@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Areas/Admin/Layout/AdminLayout.razor.rz.scp.css */
/* /Areas/Admin/Layout/AdminNavMenu.razor.rz.scp.css */
/* /Areas/Admin/Pages/Dashboard.razor.rz.scp.css */
@@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@300;400;500;600&display=swap');

.adm *[b-6at68iuqjy] {
    box-sizing: border-box;
}

.adm[b-6at68iuqjy] {
    font-family: 'Outfit', sans-serif;
    background: #F0F3F9;
    min-height: 100vh;
    padding: 26px 30px;
}

/* ── Welcome ── */
.adm-welcome[b-6at68iuqjy] {
    background: linear-gradient(135deg, #0F1F45 0%, #1A3366 55%, #0F1F45 100%);
    border-radius: 20px;
    padding: 26px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}

    .adm-welcome[b-6at68iuqjy]::before {
        content: '';
        position: absolute;
        right: -50px;
        top: -50px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(80, 140, 255, 0.10);
    }

    .adm-welcome[b-6at68iuqjy]::after {
        content: '';
        position: absolute;
        left: 30%;
        bottom: -80px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(80, 200, 160, 0.07);
    }

.adm-greeting[b-6at68iuqjy] {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
    position: relative;
    z-index: 1;
}

.adm-sub[b-6at68iuqjy] {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
    position: relative;
    z-index: 1;
}

.adm-meta[b-6at68iuqjy] {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 8px 16px;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* ── KPI Row ── */
.kpi-row[b-6at68iuqjy] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.kpi-tile[b-6at68iuqjy] {
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform .18s, box-shadow .18s;
}

    .kpi-tile:hover[b-6at68iuqjy] {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.09);
    }

.kpi-bar[b-6at68iuqjy] {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 16px 0 0 16px;
}

.kpi-ico[b-6at68iuqjy] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 14px;
}

.kpi-num[b-6at68iuqjy] {
    font-family: 'Syne', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0F1F45;
    line-height: 1;
    margin-bottom: 4px;
}

.kpi-lbl[b-6at68iuqjy] {
    font-size: 12px;
    color: #8E96B0;
    font-weight: 400;
}

/* ── Chart Grid ── */
.chart-row[b-6at68iuqjy] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

.chart-panel[b-6at68iuqjy] {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 20px 22px;
    transition: box-shadow .18s;
}

    .chart-panel:hover[b-6at68iuqjy] {
        box-shadow: 0 8px 24px rgba(0,0,0,0.07);
    }

.chart-head[b-6at68iuqjy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.chart-title[b-6at68iuqjy] {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0F1F45;
}

.chart-sub[b-6at68iuqjy] {
    font-size: 12px;
    color: #8E96B0;
    margin-top: 2px;
}

.chart-badge[b-6at68iuqjy] {
    font-size: 11px;
    background: #EEF3FF;
    color: #3558D6;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Panel Grid (8 panels) ── */
.panel-grid[b-6at68iuqjy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.panel[b-6at68iuqjy] {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow .18s;
}

    .panel:hover[b-6at68iuqjy] {
        box-shadow: 0 6px 22px rgba(0,0,0,0.08);
    }

.panel-head[b-6at68iuqjy] {
    padding: 14px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F2F4FA;
    flex-shrink: 0;
}

.panel-title[b-6at68iuqjy] {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0F1F45;
    display: flex;
    align-items: center;
    gap: 7px;
}

.panel-ico[b-6at68iuqjy] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.panel-badge[b-6at68iuqjy] {
    font-size: 10px;
    color: #8E96B0;
    background: #F0F3F9;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.panel-body[b-6at68iuqjy] {
    padding: 6px 4px;
    max-height: 230px;
    overflow-y: auto;
}

    .panel-body[b-6at68iuqjy]::-webkit-scrollbar {
        width: 3px;
    }

    .panel-body[b-6at68iuqjy]::-webkit-scrollbar-thumb {
        background: #dde3f0;
        border-radius: 2px;
    }

/* ── Data Row ── */
.d-row[b-6at68iuqjy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 1px 5px;
    transition: background .14s;
}

    .d-row:hover[b-6at68iuqjy] {
        background: #F5F7FC;
    }

.d-name[b-6at68iuqjy] {
    font-size: 12px;
    color: #2C3A5A;
    font-weight: 400;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}

.d-val[b-6at68iuqjy] {
    font-size: 12px;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    color: #0F1F45;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Chips ── */
.chip[b-6at68iuqjy] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.chip-blue[b-6at68iuqjy] {
    background: #EEF3FF;
    color: #3558D6;
}

.chip-green[b-6at68iuqjy] {
    background: #E3F8EE;
    color: #0A7C60;
}

.chip-red[b-6at68iuqjy] {
    background: #FEE8E8;
    color: #CC2B2B;
}

.chip-amber[b-6at68iuqjy] {
    background: #FFF4E0;
    color: #C07700;
}

.chip-purple[b-6at68iuqjy] {
    background: #F3EEFF;
    color: #6E3AD4;
}

/* ── Color tokens ── */
.ico-blue[b-6at68iuqjy] {
    background: #EEF3FF;
    color: #3558D6;
}

.ico-green[b-6at68iuqjy] {
    background: #E3F8EE;
    color: #0A7C60;
}

.ico-amber[b-6at68iuqjy] {
    background: #FFF4E0;
    color: #C07700;
}

.ico-purple[b-6at68iuqjy] {
    background: #F3EEFF;
    color: #6E3AD4;
}

.ico-red[b-6at68iuqjy] {
    background: #FEE8E8;
    color: #CC2B2B;
}

.ico-teal[b-6at68iuqjy] {
    background: #E0F5F3;
    color: #0A7272;
}

.ico-navy[b-6at68iuqjy] {
    background: #E8ECF8;
    color: #0F1F45;
}

.ico-pink[b-6at68iuqjy] {
    background: #FDE8F2;
    color: #C32D7A;
}

.bar-blue[b-6at68iuqjy] {
    background: #3558D6;
}

.bar-green[b-6at68iuqjy] {
    background: #0A7C60;
}

.bar-amber[b-6at68iuqjy] {
    background: #C07700;
}

.bar-purple[b-6at68iuqjy] {
    background: #6E3AD4;
}

.bar-navy[b-6at68iuqjy] {
    background: #0F1F45;
}

/* ── Empty state ── */
.empty[b-6at68iuqjy] {
    text-align: center;
    padding: 24px 16px;
    color: #B0B8CF;
    font-size: 12px;
}

/* ── Animations ── */
@@keyframes fadeUp {
    from[b-6at68iuqjy] {
        opacity: 0;
        transform: translateY(14px);
    }

    to[b-6at68iuqjy] {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-tile[b-6at68iuqjy] {
    animation: fadeUp .4s ease both;
}

    .kpi-tile:nth-child(1)[b-6at68iuqjy] {
        animation-delay: .05s;
    }

    .kpi-tile:nth-child(2)[b-6at68iuqjy] {
        animation-delay: .10s;
    }

    .kpi-tile:nth-child(3)[b-6at68iuqjy] {
        animation-delay: .15s;
    }

    .kpi-tile:nth-child(4)[b-6at68iuqjy] {
        animation-delay: .20s;
    }

    .kpi-tile:nth-child(5)[b-6at68iuqjy] {
        animation-delay: .25s;
    }

.chart-panel[b-6at68iuqjy] {
    animation: fadeUp .5s ease both;
    animation-delay: .28s;
}

.panel[b-6at68iuqjy] {
    animation: fadeUp .5s ease both;
    animation-delay: .35s;
}

@@media (max-width: 1400px) {
    .kpi-row[b-6at68iuqjy] {
        grid-template-columns: repeat(3, 1fr);
    }

    .panel-grid[b-6at68iuqjy] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@@media (max-width: 1100px) {
    .chart-row[b-6at68iuqjy] {
        grid-template-columns: 1fr;
    }

    .panel-grid[b-6at68iuqjy] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 700px) {
    .adm[b-6at68iuqjy] {
        padding: 14px;
    }

    .kpi-row[b-6at68iuqjy] {
        grid-template-columns: repeat(2, 1fr);
    }

    .panel-grid[b-6at68iuqjy] {
        grid-template-columns: 1fr;
    }

    .adm-welcome[b-6at68iuqjy] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}
/* /Areas/Admin/Pages/TaskManagement/TaskList.razor.rz.scp.css */
.task-page-header[b-e5tc6fqzsj] {
    gap: 16px;
    flex-wrap: wrap;
}

.task-grid-card[b-e5tc6fqzsj] {
    overflow: hidden;
}

.task-grid-card > .text-muted[b-e5tc6fqzsj] {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.task-grid-card[b-e5tc6fqzsj]  .e-grid {
    border: 0 !important;
    font-size: 12px;
}

.task-grid-card[b-e5tc6fqzsj]  .e-toolbar {
    min-height: 48px !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #e1e8f0 !important;
    background: #fff !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-toolbar-item .e-tbar-btn {
    min-height: 32px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-search {
    min-width: 280px;
    min-height: 36px !important;
    border-color: #dce5f0 !important;
    border-radius: 7px !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-headercell {
    height: 42px !important;
    padding: 8px 10px !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, #0d98b4, #087c9f) !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-headercelldiv {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.task-grid-card[b-e5tc6fqzsj]  .e-rowcell {
    height: 50px !important;
    padding: 8px 10px !important;
    border-color: #e1e8f0 !important;
    color: #263649;
    font-size: 12px;
}

.task-grid-card[b-e5tc6fqzsj]  .e-row:nth-child(even) .e-rowcell {
    background: #fbfcfe;
}

.task-grid-card[b-e5tc6fqzsj]  .e-row:hover .e-rowcell {
    background: #f2f8fc !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-gridpager {
    min-height: 46px;
    border-top: 1px solid #e3eaf1 !important;
    font-size: 10px;
}

.task-grid-card .tl-title[b-e5tc6fqzsj] {
    display: block;
    max-width: 300px;
    overflow: hidden;
    color: #26384a;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-grid-card .mt-dept-badge[b-e5tc6fqzsj],
.task-grid-card .tl-priority[b-e5tc6fqzsj],
.task-grid-card .status-pill[b-e5tc6fqzsj] {
    padding: 3px 8px;
    font-size: 10px;
}

.task-grid-card .emp-avatar[b-e5tc6fqzsj] {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.task-grid-card .emp-fullname[b-e5tc6fqzsj] {
    max-width: 180px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-grid-card .btn-action[b-e5tc6fqzsj] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 7px;
    font-size: 13px;
}

.task-grid-card .action-group[b-e5tc6fqzsj] {
    gap: 4px;
}

.task-grid-card[b-e5tc6fqzsj]  .e-dialog {
    max-width: 820px !important;
    border-radius: 8px !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-dlg-header-content,
.task-grid-card[b-e5tc6fqzsj]  .e-footer-content {
    padding: 12px 16px !important;
}

.task-grid-card[b-e5tc6fqzsj]  .e-dlg-content {
    padding: 14px 16px !important;
    font-size: 12px;
}

.task-grid-card .dialog-section[b-e5tc6fqzsj] {
    padding: 12px 14px;
    margin-bottom: 10px !important;
}

.task-grid-card .dialog-section-title[b-e5tc6fqzsj],
.task-grid-card .field-label[b-e5tc6fqzsj] {
    font-size: 10px;
}

@media (max-width: 760px) {
    .task-page-header .page-header-right[b-e5tc6fqzsj] {
        width: 100%;
    }

    .task-grid-card[b-e5tc6fqzsj]  .e-search {
        min-width: 180px;
    }
}
/* /Areas/AssetManagement/Layout/AssetManagementLayout.razor.rz.scp.css */
.asset-nav-heading[b-drwzlnhncf] {
    margin: 18px 14px 7px;
    color: #8a90a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar.collapsed .asset-nav-heading[b-drwzlnhncf] {
    display: none;
}

.sidebar.collapsed:hover .asset-nav-heading[b-drwzlnhncf] {
    display: block;
}

.asset-menu-toggle[b-drwzlnhncf] {
    width: 100%;
    min-width: 50px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 3px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.asset-menu-toggle:hover[b-drwzlnhncf],
.asset-menu-toggle.active[b-drwzlnhncf] {
    color: var(--color-primary);
    background: var(--bg-navitem-active);
}

.asset-menu-toggle > i:first-child[b-drwzlnhncf] {
    min-width: 24px;
    color: var(--color-primary);
    font-size: 18px;
    text-align: center;
}

.asset-menu-count[b-drwzlnhncf] {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--color-primary);
    background: #dfeaf8;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.asset-menu-chevron[b-drwzlnhncf] {
    min-width: auto !important;
    color: #8a90a8 !important;
    font-size: 11px !important;
    transition: transform var(--transition);
}

.asset-menu-toggle.expanded .asset-menu-chevron[b-drwzlnhncf] {
    transform: rotate(180deg);
}

.asset-submenu[b-drwzlnhncf] {
    margin: 2px 0 8px 23px;
    padding: 3px 0 3px 10px;
    border-left: 1px solid #dce3ee;
}

.asset-submenu[b-drwzlnhncf]  .asset-submenu-link {
    position: relative;
    gap: 9px;
    min-height: 36px;
    margin-bottom: 1px;
    padding: 8px 10px;
    color: #687386;
    font-size: 12px;
    font-weight: 700;
}

.asset-submenu[b-drwzlnhncf]  .asset-submenu-link i {
    min-width: 18px;
    color: #8a90a8;
    font-size: 13px;
}

.asset-submenu[b-drwzlnhncf]  .asset-submenu-link:hover,
.asset-submenu[b-drwzlnhncf]  .asset-submenu-link.active {
    color: var(--color-primary);
    background: #f1f5fa;
}

.asset-submenu[b-drwzlnhncf]  .asset-submenu-link.active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -11px;
    width: 3px;
    border-radius: 4px;
    background: var(--color-primary);
}

.asset-menu-status[b-drwzlnhncf] {
    padding: 2px 7px;
    border-radius: 999px;
    color: #8a6a13;
    background: #fff6d8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sidebar.collapsed:not(:hover) .asset-submenu[b-drwzlnhncf],
.sidebar.collapsed:not(:hover) .asset-menu-count[b-drwzlnhncf],
.sidebar.collapsed:not(:hover) .asset-menu-chevron[b-drwzlnhncf],
.sidebar.collapsed:not(:hover) .asset-menu-status[b-drwzlnhncf] {
    display: none;
}

.sidebar.collapsed:not(:hover) .asset-menu-toggle[b-drwzlnhncf] {
    justify-content: center;
}

@media (max-width: 992px) {
    .sidebar .asset-submenu[b-drwzlnhncf],
    .sidebar .asset-menu-count[b-drwzlnhncf],
    .sidebar .asset-menu-chevron[b-drwzlnhncf],
    .sidebar .asset-menu-status[b-drwzlnhncf] {
        display: none;
    }

    .sidebar .asset-menu-toggle[b-drwzlnhncf] {
        justify-content: center;
    }
}

.asset-powered-by[b-drwzlnhncf] {
    display: block;
    font-size: 9px;
    font-weight: 600;
}

.asset-ge[b-drwzlnhncf] {
    color: orangered;
}

.asset-management-scope[b-drwzlnhncf] {
    --asset-grid-brand: #0d8fac;
    --asset-grid-brand-dark: #087c9f;
    --asset-grid-border: #e1e8f0;
    --asset-grid-row-alt: #fbfcfe;
    --asset-grid-row-hover: #f2f8fc;
    --asset-grid-text: #263649;
    --asset-grid-muted: #718196;
    --asset-grid-radius: 8px;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.asset-management-scope[b-drwzlnhncf]  .page-header {
    min-height: 58px;
    gap: 14px;
    margin-bottom: 12px;
    padding: 8px 0 11px;
}

.asset-management-scope[b-drwzlnhncf]  .page-header-left h2 {
    margin: 0;
    color: #1d2d3d;
    font-size: 18px !important;
    font-weight: 750;
    letter-spacing: -0.2px;
}

.asset-management-scope[b-drwzlnhncf]  .page-header-left .page-subtitle {
    margin-top: 2px;
    color: var(--asset-grid-muted);
    font-size: 12px;
    line-height: 1.4;
}

.asset-management-scope[b-drwzlnhncf]  .page-header-right {
    gap: 8px;
}

.asset-management-scope[b-drwzlnhncf]  .asset-branch-filter {
    width: 200px;
}

.asset-management-scope[b-drwzlnhncf]  .record-count-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #dce7f0;
    border-radius: 999px;
    background: #eef5fb;
    color: #245c86;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.asset-management-scope[b-drwzlnhncf]  .section-card {
    margin-bottom: 12px;
    border-color: var(--asset-grid-border);
    border-radius: var(--asset-grid-radius);
    box-shadow: 0 3px 12px rgba(33, 58, 84, 0.045);
}

.asset-management-scope[b-drwzlnhncf]  .asset-grid-card {
    padding: 14px 16px;
    overflow: hidden;
}

.asset-management-scope[b-drwzlnhncf]  .asset-grid-card .e-grid {
    border: 0 !important;
    border-radius: var(--asset-grid-radius);
    overflow: hidden;
}

.asset-management-scope[b-drwzlnhncf]  .asset-required {
    margin-left: 2px;
    color: #dc2626;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.asset-management-scope[b-drwzlnhncf]  .e-gridform label.e-error {
    display: block;
    margin-top: 5px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.asset-management-scope[b-drwzlnhncf]  .e-gridform .e-input-group.e-error,
.asset-management-scope[b-drwzlnhncf]  .e-gridform .e-input-group.e-error:hover {
    border-color: #dc2626 !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-control,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-pager {
    font-family: "Manrope", system-ui, -apple-system, sans-serif !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid {
    color: var(--asset-grid-text);
    font-size: 12px;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-gridheader,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-headercontent,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-columnheader {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: linear-gradient(135deg, var(--asset-grid-brand), var(--asset-grid-brand-dark)) !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-headercell,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-detailheadercell {
    height: 42px !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: linear-gradient(135deg, var(--asset-grid-brand), var(--asset-grid-brand-dark)) !important;
    color: #fff !important;
    padding: 0 10px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-headercell:hover,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-detailheadercell:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-headercelldiv,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-headertext,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-stackedheadercelldiv {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.25;
    letter-spacing: 0.32px;
    text-transform: uppercase;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-sortfilterdiv,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-filtermenudiv,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-gridheader .e-icons {
    color: rgba(255, 255, 255, 0.88) !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-rowcell {
    height: 48px;
    border-color: var(--asset-grid-border) !important;
    background: #fff;
    color: var(--asset-grid-text);
    padding: 7px 10px !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35 !important;
    vertical-align: middle;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-altrow .e-rowcell {
    background: var(--asset-grid-row-alt);
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-row:hover .e-rowcell,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-row.e-hover .e-rowcell {
    background: var(--asset-grid-row-hover) !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-emptyrow td {
    height: 170px;
    color: #8492a6;
    font-size: 12px;
    text-align: center;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar {
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box;
    border-color: var(--asset-grid-border) !important;
    background: #fff !important;
    padding: 5px 8px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-toolbar-items {
    height: 34px !important;
    min-height: 34px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-toolbar-item {
    min-height: 32px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-tbar-btn {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-tbar-btn-text,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-icons {
    font-size: 11px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-search {
    min-height: 32px !important;
    border-color: #d6e0ea !important;
    border-radius: 6px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-toolbar .e-search input {
    font-size: 12px !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-gridpager {
    min-height: 46px;
    border-color: var(--asset-grid-border) !important;
    background: #fff;
    color: var(--asset-grid-muted);
    font-size: 11px;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-pager .e-currentitem {
    border-radius: 6px;
    background: #e9f3f8 !important;
    color: #17627f !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-pager .e-pagercontainer,
.asset-management-scope[b-drwzlnhncf]  .e-grid .e-pager .e-pagesizes {
    margin: 5px 8px;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-filterbarcell {
    padding: 5px 7px !important;
    background: #f7fafc;
}

.asset-management-scope[b-drwzlnhncf]  .e-grid .e-filterbarcell .e-input {
    font-size: 11px !important;
}

.asset-management-scope[b-drwzlnhncf]  .field-label {
    display: block;
    margin-bottom: 4px;
    color: #607185;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.asset-management-scope[b-drwzlnhncf]  .dialog-form-wrap {
    padding: 2px 2px 4px;
}

.asset-management-scope[b-drwzlnhncf]  .dialog-section {
    padding: 0;
}

.asset-management-scope[b-drwzlnhncf]  .dialog-section-title,
.asset-management-scope[b-drwzlnhncf]  .dialog-section > div:first-child:not(.row):not(.asset-form-note) {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e4edf3;
    color: #245c86;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.asset-management-scope[b-drwzlnhncf]  .asset-form-note {
    margin: -2px 0 14px;
    padding: 9px 11px;
    border: 1px solid #d7e7f2;
    border-radius: 7px;
    color: #4b6478;
    background: #f5fafc;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.asset-management-scope[b-drwzlnhncf]  .form-row-gap {
    row-gap: 15px;
}

.asset-management-scope[b-drwzlnhncf]  .e-input-group,
.asset-management-scope[b-drwzlnhncf]  .e-input-group.e-control-wrapper {
    min-height: 36px;
    border-color: #d6e0ea !important;
    border-radius: 6px !important;
    background: #fff;
}

.asset-management-scope[b-drwzlnhncf]  .e-input-group:focus-within,
.asset-management-scope[b-drwzlnhncf]  .e-input-group.e-control-wrapper:focus-within {
    border-color: #0d8fac !important;
    box-shadow: 0 0 0 3px rgba(13, 143, 172, 0.1) !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-input,
.asset-management-scope[b-drwzlnhncf]  .e-ddl.e-input-group input,
.asset-management-scope[b-drwzlnhncf]  textarea.e-input {
    color: #263649 !important;
    font-size: 12px !important;
    font-weight: 600;
}

.asset-management-scope[b-drwzlnhncf]  .e-dialog.e-grid-dialog {
    border-radius: 10px !important;
    box-shadow: 0 22px 55px rgba(25, 52, 73, 0.22) !important;
}

.asset-management-scope[b-drwzlnhncf]  .e-dialog.e-grid-dialog .e-dlg-header-content {
    border-bottom: 1px solid #e1e8f0;
    background: #f8fbfd;
}

.asset-management-scope[b-drwzlnhncf]  .e-dialog.e-grid-dialog .e-dlg-header {
    color: #1d2d3d;
    font-size: 15px;
    font-weight: 750;
}

.asset-management-scope[b-drwzlnhncf]  .e-dialog.e-grid-dialog .e-footer-content {
    border-top: 1px solid #e1e8f0;
    background: #f8fbfd;
}

.asset-management-scope[b-drwzlnhncf]  .e-dialog.e-grid-dialog .e-primary {
    border-color: #0d8fac !important;
    background: #0d8fac !important;
}

.asset-management-scope[b-drwzlnhncf]  .asset-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.asset-management-scope[b-drwzlnhncf]  .asset-status-pill.allocated {
    color: #075985;
    background: #e0f2fe;
}

.asset-management-scope[b-drwzlnhncf]  .asset-status-pill.returned {
    color: #047857;
    background: #ecfdf5;
}

.asset-management-scope[b-drwzlnhncf]  .asset-loading-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: #718196;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .asset-management-scope[b-drwzlnhncf]  .asset-grid-card {
        padding: 10px;
    }

    .asset-management-scope[b-drwzlnhncf]  .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Areas/AssetManagement/Pages/Dashboard.razor.rz.scp.css */
.asset-dashboard[b-n6k17o2403] {
    --dash-ink: #1f3042;
    --dash-muted: #718096;
    --dash-line: #e2e9f0;
    --dash-soft: #f5f8fb;
    --dash-blue: #2877a6;
    --dash-teal: #0f8b8d;
    --dash-indigo: #6373b5;
    --dash-amber: #c68a2d;
    display: grid;
    gap: 18px;
    padding-bottom: 32px;
    color: var(--dash-ink);
}

button[b-n6k17o2403] {
    font-family: inherit;
}

.dashboard-header[b-n6k17o2403] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 5px 2px 2px;
}

.dashboard-eyebrow[b-n6k17o2403],
.panel-kicker[b-n6k17o2403] {
    color: #75879a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-eyebrow[b-n6k17o2403] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.dashboard-eyebrow > span[b-n6k17o2403] {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--dash-teal);
}

.dashboard-header h1[b-n6k17o2403] {
    margin: 0;
    color: #1b2c3d;
    font-size: 25px;
    font-weight: 760;
    letter-spacing: -.45px;
}

.dashboard-header p[b-n6k17o2403] {
    margin: 5px 0 0;
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 550;
}

.dashboard-actions[b-n6k17o2403] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.live-stamp[b-n6k17o2403] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 5px;
    padding-right: 14px;
    border-right: 1px solid var(--dash-line);
}

.live-stamp .live-dot[b-n6k17o2403] {
    width: 8px;
    height: 8px;
    border: 2px solid #caefe5;
    border-radius: 50%;
    background: #2ba77b;
    box-shadow: 0 0 0 3px #eaf8f3;
}

.live-stamp div[b-n6k17o2403] {
    display: grid;
}

.live-stamp strong[b-n6k17o2403] {
    color: #42576a;
    font-size: 10px;
    font-weight: 750;
}

.live-stamp span[b-n6k17o2403] {
    color: #8997a6;
    font-size: 9px;
}

.dashboard-button[b-n6k17o2403] {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
    transition: .18s ease;
}

.dashboard-button.secondary[b-n6k17o2403] {
    border-color: #d7e1e9;
    color: #52697c;
    background: #fff;
}

.dashboard-button.primary[b-n6k17o2403] {
    border-color: #176f8d;
    color: #fff;
    background: #176f8d;
    box-shadow: 0 4px 12px rgba(23, 111, 141, .16);
}

.dashboard-button:hover:not(:disabled)[b-n6k17o2403] {
    transform: translateY(-1px);
}

.dashboard-button:disabled[b-n6k17o2403] {
    opacity: .65;
}

.spin[b-n6k17o2403] {
    animation: dash-spin-b-n6k17o2403 .8s linear infinite;
}

@keyframes dash-spin-b-n6k17o2403 {
    to { transform: rotate(360deg); }
}

.portfolio-strip[b-n6k17o2403] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 106px;
    padding: 19px 22px;
    border: 1px solid #dce8ef;
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 0, rgba(85, 157, 187, .1), transparent 31%),
        linear-gradient(135deg, #f7fbfd, #f4f8fb);
    box-shadow: 0 6px 18px rgba(35, 66, 91, .045);
}

.portfolio-copy[b-n6k17o2403] {
    display: grid;
    gap: 4px;
}

.portfolio-label[b-n6k17o2403] {
    color: #327a96;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.portfolio-copy strong[b-n6k17o2403] {
    color: #21384b;
    font-size: 17px;
    font-weight: 750;
}

.portfolio-copy p[b-n6k17o2403] {
    margin: 0;
    color: #718396;
    font-size: 11px;
}

.portfolio-metrics[b-n6k17o2403] {
    display: grid;
    grid-template-columns: repeat(3, minmax(105px, 1fr));
    gap: 8px;
}

.portfolio-metrics > div[b-n6k17o2403] {
    min-width: 118px;
    padding: 9px 12px;
    border-left: 1px solid #dbe5ec;
}

.portfolio-metrics span[b-n6k17o2403] {
    display: block;
    margin-bottom: 3px;
    color: #8391a0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.portfolio-metrics strong[b-n6k17o2403] {
    color: #29465a;
    font-size: 15px;
    font-weight: 760;
}

.kpi-grid[b-n6k17o2403] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.kpi-card[b-n6k17o2403] {
    position: relative;
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--dash-line);
    border-radius: 10px;
    color: inherit;
    background: #fff;
    text-align: left;
    box-shadow: 0 3px 12px rgba(37, 60, 80, .035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kpi-card:hover[b-n6k17o2403] {
    border-color: #c8d9e3;
    box-shadow: 0 8px 20px rgba(32, 68, 92, .08);
    transform: translateY(-2px);
}

.kpi-icon[b-n6k17o2403] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 17px;
}

.kpi-icon.blue[b-n6k17o2403] { color: #286f9a; background: #eaf3f9; }
.kpi-icon.teal[b-n6k17o2403] { color: #0b7b78; background: #e6f5f3; }
.kpi-icon.indigo[b-n6k17o2403] { color: #5a65a3; background: #eef0fa; }
.kpi-icon.amber[b-n6k17o2403] { color: #a76f20; background: #fbf3e5; }

.kpi-copy[b-n6k17o2403] {
    min-width: 0;
    display: grid;
}

.kpi-copy > span[b-n6k17o2403] {
    color: #738497;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.kpi-copy strong[b-n6k17o2403] {
    margin: 1px 0;
    overflow: hidden;
    color: #25394b;
    font-size: 21px;
    font-weight: 780;
    letter-spacing: -.35px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-copy small[b-n6k17o2403] {
    overflow: hidden;
    color: #8795a4;
    font-size: 9.5px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-link[b-n6k17o2403] {
    position: absolute;
    top: 13px;
    right: 13px;
    color: #a3afbb;
    font-size: 11px;
}

.dashboard-grid[b-n6k17o2403] {
    display: grid;
    gap: 14px;
}

.primary-grid[b-n6k17o2403],
.distribution-grid[b-n6k17o2403] {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
}

.activity-grid[b-n6k17o2403] {
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    align-items: stretch;
}

.dashboard-panel[b-n6k17o2403] {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--dash-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 13px rgba(37, 60, 80, .035);
}

.panel-header[b-n6k17o2403] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.panel-header h2[b-n6k17o2403],
.section-heading h2[b-n6k17o2403] {
    margin: 2px 0 0;
    color: #263a4c;
    font-size: 14px;
    font-weight: 760;
}

.panel-header button[b-n6k17o2403] {
    padding: 2px;
    border: 0;
    color: #538099;
    background: transparent;
    font-size: 10px;
    font-weight: 750;
}

.panel-count[b-n6k17o2403] {
    padding: 4px 8px;
    border-radius: 999px;
    color: #6e8292;
    background: #f0f4f7;
    font-size: 9px;
    font-weight: 750;
}

.portfolio-health[b-n6k17o2403] {
    display: grid;
    grid-template-columns: 124px 1fr;
    align-items: center;
    gap: 21px;
    padding: 2px 4px 18px;
}

.assignment-ring[b-n6k17o2403] {
    position: relative;
    width: 114px;
    height: 114px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#168d9e calc(var(--dashboard-progress) * 1%), #e9eef2 0);
}

.assignment-ring[b-n6k17o2403]::before {
    content: "";
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #edf1f4;
}

.assignment-ring > div[b-n6k17o2403] {
    position: absolute;
    display: grid;
    text-align: center;
}

.assignment-ring strong[b-n6k17o2403] {
    color: #274154;
    font-size: 20px;
    font-weight: 780;
}

.assignment-ring span[b-n6k17o2403] {
    color: #80909f;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.health-legend[b-n6k17o2403] {
    display: grid;
    gap: 10px;
}

.health-legend > div[b-n6k17o2403] {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e4eaf0;
}

.health-legend span[b-n6k17o2403] {
    color: #718295;
    font-size: 10px;
}

.health-legend strong[b-n6k17o2403] {
    color: #344b5e;
    font-size: 11px;
    font-weight: 750;
}

.legend-dot[b-n6k17o2403] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.legend-dot.assigned[b-n6k17o2403] { background: #168d9e; }
.legend-dot.available[b-n6k17o2403] { background: #cbd6df; }
.legend-dot.value[b-n6k17o2403] { background: #7886bd; }

.breakdown-list[b-n6k17o2403] {
    display: grid;
    gap: 12px;
}

.breakdown-list.compact[b-n6k17o2403] {
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid #edf1f4;
}

.breakdown-row[b-n6k17o2403] {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(90px, 1.4fr) 28px;
    align-items: center;
    gap: 10px;
    font-size: 10px;
}

.breakdown-label[b-n6k17o2403] {
    overflow: hidden;
    color: #5f7386;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-dot[b-n6k17o2403] {
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 7px;
    border-radius: 50%;
}

.breakdown-track[b-n6k17o2403],
.distribution-track[b-n6k17o2403],
.quality-track[b-n6k17o2403] {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f4;
}

.breakdown-track span[b-n6k17o2403],
.distribution-track span[b-n6k17o2403],
.quality-track span[b-n6k17o2403] {
    height: 100%;
    display: block;
    border-radius: inherit;
}

.breakdown-row > strong[b-n6k17o2403] {
    color: #42586b;
    font-size: 10px;
    text-align: right;
}

.palette-0[b-n6k17o2403], .palette-bg-0[b-n6k17o2403] { background: #3b8eaa; }
.palette-1[b-n6k17o2403], .palette-bg-1[b-n6k17o2403] { background: #54a69c; }
.palette-2[b-n6k17o2403], .palette-bg-2[b-n6k17o2403] { background: #7c87b9; }
.palette-3[b-n6k17o2403], .palette-bg-3[b-n6k17o2403] { background: #bd935a; }
.palette-4[b-n6k17o2403], .palette-bg-4[b-n6k17o2403] { background: #7ea0b5; }
.palette-5[b-n6k17o2403], .palette-bg-5[b-n6k17o2403] { background: #a6afb8; }

.alert-list[b-n6k17o2403] {
    display: grid;
    gap: 6px;
}

.alert-row[b-n6k17o2403] {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: inherit;
    background: #fafcfd;
    text-align: left;
}

.alert-row:hover[b-n6k17o2403] {
    border-color: #dce6ed;
    background: #f6f9fb;
}

.alert-icon[b-n6k17o2403] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #617b8d;
    background: #edf3f6;
    font-size: 13px;
}

.alert-row.danger .alert-icon[b-n6k17o2403] { color: #a95151; background: #f9eded; }
.alert-row.warning .alert-icon[b-n6k17o2403] { color: #a4732b; background: #fbf3e5; }
.alert-row.info .alert-icon[b-n6k17o2403] { color: #397792; background: #eaf3f7; }

.alert-row > div[b-n6k17o2403] {
    min-width: 0;
    display: grid;
}

.alert-row strong[b-n6k17o2403] {
    overflow: hidden;
    color: #425568;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-row div span[b-n6k17o2403] {
    overflow: hidden;
    color: #8492a0;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-row time[b-n6k17o2403],
.alert-row > i[b-n6k17o2403] {
    color: #8b99a7;
    font-size: 9px;
    font-style: normal;
}

.attention-summary[b-n6k17o2403] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #edf1f4;
}

.attention-summary div[b-n6k17o2403] {
    display: grid;
    padding: 7px 8px;
    border-radius: 7px;
    background: #f6f8fa;
}

.attention-summary span[b-n6k17o2403] {
    overflow: hidden;
    color: #8391a0;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attention-summary strong[b-n6k17o2403] {
    color: #43596b;
    font-size: 14px;
}

.all-clear[b-n6k17o2403] {
    min-height: 154px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #527c6e;
    text-align: left;
}

.all-clear > span[b-n6k17o2403] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9f6f0;
    font-size: 20px;
}

.all-clear strong[b-n6k17o2403] {
    font-size: 12px;
}

.all-clear p[b-n6k17o2403] {
    max-width: 260px;
    margin: 2px 0 0;
    color: #84958e;
    font-size: 9.5px;
}

.month-section[b-n6k17o2403] {
    padding: 3px 0;
}

.section-heading[b-n6k17o2403] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 11px;
}

.section-heading p[b-n6k17o2403] {
    margin: 0;
    color: #8a97a4;
    font-size: 10px;
}

.month-grid[b-n6k17o2403] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.month-grid button[b-n6k17o2403] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--dash-line);
    border-radius: 9px;
    color: inherit;
    background: #fff;
    text-align: left;
    transition: .16s ease;
}

.month-grid button:hover[b-n6k17o2403] {
    border-color: #c9dbe5;
    transform: translateY(-1px);
}

.month-grid button > span[b-n6k17o2403] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #397a94;
    background: #edf5f8;
    font-size: 13px;
}

.month-grid button > div[b-n6k17o2403] {
    min-width: 0;
    display: grid;
}

.month-grid small[b-n6k17o2403] {
    color: #82909e;
    font-size: 8.5px;
    font-weight: 750;
    text-transform: uppercase;
}

.month-grid strong[b-n6k17o2403] {
    color: #334a5d;
    font-size: 16px;
    line-height: 1.2;
}

.month-grid em[b-n6k17o2403] {
    overflow: hidden;
    color: #8b98a4;
    font-size: 8.5px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.distribution-row[b-n6k17o2403] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 12px;
}

.distribution-row > div:first-child[b-n6k17o2403] {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.distribution-row > div:first-child small[b-n6k17o2403] {
    grid-column: 2;
}

.distribution-row strong[b-n6k17o2403] {
    overflow: hidden;
    color: #506579;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.distribution-row small[b-n6k17o2403] {
    color: #909ca8;
    font-size: 8.5px;
}

.distribution-value[b-n6k17o2403] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.distribution-value span[b-n6k17o2403] {
    min-width: 34px;
    color: #91a0ad;
    font-size: 8.5px;
    text-align: right;
}

.distribution-track[b-n6k17o2403] {
    grid-column: 1 / -1;
}

.location-pin[b-n6k17o2403] {
    width: 19px;
    color: #53869d;
    font-size: 11px;
}

.location-bg[b-n6k17o2403] {
    background: #5d98ad;
}

.activity-list[b-n6k17o2403] {
    display: grid;
}

.activity-panel[b-n6k17o2403] {
    display: flex;
    flex-direction: column;
}

.activity-panel .empty-state[b-n6k17o2403] {
    width: 100%;
    min-height: 230px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 12px 28px;
}

.activity-panel .empty-state > span[b-n6k17o2403] {
    flex: 0 0 44px;
    margin: 0 0 10px;
}

.activity-panel .empty-state > span i[b-n6k17o2403] {
    display: block;
    line-height: 1;
    transform: translateX(-1px);
}

.activity-row[b-n6k17o2403] {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 72px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 3px;
    border: 0;
    border-bottom: 1px solid #eef2f5;
    color: inherit;
    background: transparent;
    text-align: left;
}

.activity-row:last-child[b-n6k17o2403] {
    border-bottom: 0;
}

.activity-row:hover[b-n6k17o2403] {
    background: #fafcfd;
}

.activity-icon[b-n6k17o2403],
.volume-icon[b-n6k17o2403] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #397a94;
    background: #edf5f8;
    font-size: 12px;
}

.activity-icon.allocation[b-n6k17o2403], .activity-icon.return[b-n6k17o2403], .volume-icon.allocation[b-n6k17o2403] { color: #357c70; background: #eaf5f2; }
.activity-icon.transfer[b-n6k17o2403], .volume-icon.transfer[b-n6k17o2403] { color: #5d6b9f; background: #eff1f8; }
.activity-icon.maintenance[b-n6k17o2403], .volume-icon.maintenance[b-n6k17o2403] { color: #98702f; background: #faf2e5; }
.activity-icon.depreciation[b-n6k17o2403], .volume-icon.depreciation[b-n6k17o2403] { color: #65769a; background: #eff2f7; }
.activity-icon.disposal[b-n6k17o2403], .volume-icon.disposal[b-n6k17o2403] { color: #9b5f5f; background: #f8eded; }
.activity-icon.audit[b-n6k17o2403], .volume-icon.audit[b-n6k17o2403] { color: #477d91; background: #edf4f7; }

.activity-row > div[b-n6k17o2403] {
    min-width: 0;
    display: grid;
}

.activity-row strong[b-n6k17o2403] {
    overflow: hidden;
    color: #43586b;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-row div span[b-n6k17o2403] {
    overflow: hidden;
    color: #8694a1;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-row em[b-n6k17o2403] {
    color: #607487;
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
}

.activity-row time[b-n6k17o2403] {
    color: #95a1ad;
    font-size: 8.5px;
    text-align: right;
}

.side-stack[b-n6k17o2403] {
    display: grid;
    gap: 14px;
}

.custodian-list[b-n6k17o2403] {
    display: grid;
    gap: 5px;
}

.custodian-row[b-n6k17o2403] {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 27px;
    align-items: center;
    gap: 9px;
    padding: 7px 2px;
}

.custodian-row > span[b-n6k17o2403] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #39758d;
    background: #eaf3f7;
    font-size: 9px;
    font-weight: 800;
}

.custodian-row > div[b-n6k17o2403] {
    min-width: 0;
    display: grid;
}

.custodian-row strong[b-n6k17o2403] {
    overflow: hidden;
    color: #4b6072;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custodian-row small[b-n6k17o2403] {
    overflow: hidden;
    color: #909ca8;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custodian-row em[b-n6k17o2403] {
    width: 26px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #557184;
    background: #f0f4f6;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.quality-score[b-n6k17o2403] {
    color: #248679;
    font-size: 15px;
}

.quality-track[b-n6k17o2403] {
    height: 7px;
    margin: 3px 0 13px;
}

.quality-track span[b-n6k17o2403] {
    background: linear-gradient(90deg, #4e9f93, #2d8392);
}

.quality-grid[b-n6k17o2403] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.quality-grid button[b-n6k17o2403] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    color: inherit;
    background: #f6f8fa;
    text-align: left;
}

.quality-grid span[b-n6k17o2403] {
    overflow: hidden;
    color: #82909e;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quality-grid strong[b-n6k17o2403] {
    color: #506779;
    font-size: 10px;
}

.transaction-volume-grid[b-n6k17o2403] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.transaction-volume-grid button[b-n6k17o2403] {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto 10px;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e7edf1;
    border-radius: 8px;
    color: inherit;
    background: #fbfcfd;
    text-align: left;
}

.transaction-volume-grid button:hover[b-n6k17o2403] {
    border-color: #cfdde5;
    background: #f7fafb;
}

.transaction-volume-grid button > div[b-n6k17o2403] {
    min-width: 0;
    display: grid;
}

.transaction-volume-grid strong[b-n6k17o2403] {
    overflow: hidden;
    color: #536779;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-volume-grid small[b-n6k17o2403] {
    color: #929eaa;
    font-size: 8px;
}

.transaction-volume-grid em[b-n6k17o2403] {
    color: #3f586b;
    font-size: 13px;
    font-style: normal;
    font-weight: 780;
}

.transaction-volume-grid button > i[b-n6k17o2403] {
    color: #a0acb7;
    font-size: 9px;
}

.empty-inline[b-n6k17o2403] {
    min-height: 54px;
    display: grid;
    place-items: center;
    color: #94a0aa;
    font-size: 9.5px;
    text-align: center;
}

.empty-state[b-n6k17o2403] {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    color: #82909d;
    text-align: center;
}

.empty-state > span[b-n6k17o2403] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 50%;
    color: #66869a;
    background: #eff4f7;
    font-size: 18px;
}

.empty-state strong[b-n6k17o2403] {
    font-size: 11px;
}

.empty-state p[b-n6k17o2403] {
    max-width: 330px;
    margin: 3px 0 0;
    color: #99a4ae;
    font-size: 9px;
}

.dashboard-error[b-n6k17o2403] {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px;
    border: 1px solid #ead9d9;
    border-radius: 11px;
    background: #fdfafa;
}

.dashboard-error > span[b-n6k17o2403] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #a65353;
    background: #f8eaea;
}

.dashboard-error h2[b-n6k17o2403] {
    margin: 0;
    font-size: 13px;
}

.dashboard-error p[b-n6k17o2403] {
    margin: 3px 0 0;
    color: #8f7b7b;
    font-size: 10px;
}

.dashboard-error button[b-n6k17o2403] {
    margin-left: 18px;
    padding: 7px 12px;
    border: 1px solid #d9c6c6;
    border-radius: 7px;
    color: #875656;
    background: #fff;
    font-size: 10px;
    font-weight: 750;
}

.dashboard-skeleton[b-n6k17o2403] {
    display: grid;
    gap: 13px;
}

.skeleton-kpis[b-n6k17o2403] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.skeleton-panels[b-n6k17o2403] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.skeleton-card[b-n6k17o2403] {
    min-height: 104px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f0f3f5 25%, #f7f9fa 50%, #f0f3f5 75%);
    background-size: 200% 100%;
    animation: skeleton-shift-b-n6k17o2403 1.4s infinite;
}

.skeleton-card.wide[b-n6k17o2403] { min-height: 106px; }
.skeleton-card.tall[b-n6k17o2403] { min-height: 300px; }

@keyframes skeleton-shift-b-n6k17o2403 {
    to { background-position: -200% 0; }
}

@media (max-width: 1200px) {
    .month-grid[b-n6k17o2403] {
        grid-template-columns: repeat(3, 1fr);
    }

    .transaction-volume-grid[b-n6k17o2403] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-header[b-n6k17o2403],
    .portfolio-strip[b-n6k17o2403] {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-actions[b-n6k17o2403] {
        flex-wrap: wrap;
    }

    .live-stamp[b-n6k17o2403] {
        margin-right: auto;
        border-right: 0;
    }

    .portfolio-metrics[b-n6k17o2403] {
        border-top: 1px solid #dbe5ec;
        padding-top: 10px;
    }

    .portfolio-metrics > div:first-child[b-n6k17o2403] {
        border-left: 0;
    }

    .kpi-grid[b-n6k17o2403] {
        grid-template-columns: repeat(2, 1fr);
    }

    .primary-grid[b-n6k17o2403],
    .distribution-grid[b-n6k17o2403],
    .activity-grid[b-n6k17o2403] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-header h1[b-n6k17o2403] {
        font-size: 21px;
    }

    .live-stamp[b-n6k17o2403] {
        width: 100%;
    }

    .portfolio-metrics[b-n6k17o2403],
    .kpi-grid[b-n6k17o2403],
    .month-grid[b-n6k17o2403],
    .transaction-volume-grid[b-n6k17o2403],
    .quality-grid[b-n6k17o2403],
    .skeleton-kpis[b-n6k17o2403],
    .skeleton-panels[b-n6k17o2403] {
        grid-template-columns: 1fr;
    }

    .portfolio-metrics > div[b-n6k17o2403] {
        padding-left: 0;
        border-left: 0;
    }

    .portfolio-health[b-n6k17o2403] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .health-legend[b-n6k17o2403] {
        width: 100%;
    }

    .attention-summary[b-n6k17o2403] {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-row[b-n6k17o2403] {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .activity-row em[b-n6k17o2403] {
        display: none;
    }

    .activity-row time[b-n6k17o2403] {
        grid-column: 2;
        text-align: left;
    }
}
/* /Areas/ComplianceManagement/Layout/ComplianceManagementLayout.razor.rz.scp.css */
/* Compliance Management module styling.

   IMPORTANT: this file deliberately defines NO shell rules - no .app-shell, .sidebar, .main-area,
   .SS-logo, .gc-footer, .page-content, .nav-link. Those are global, in wwwroot/css/site.css, where
   .sidebar is position:fixed and the content is cleared by .main-area.sidebar-expanded's
   margin-left. Redefining them here is what put the sidebar on top of the page the first time -
   a scoped copy fought the global rule and lost the offset.

   What is here is only what is specific to this module: the sidebar's own nav furniture (the Asset
   equivalents live in its scoped CSS and so do not reach this component), the page furniture the
   screens use, and the Syncfusion grid theming.

   Colours come from the shared variables so the module matches the rest of the product rather than
   inventing a second palette. */

/* ------------------------------------------------------------ sidebar nav -- */

.compliance-nav-heading[b-rg6xfj3wte] {
    margin: 18px 14px 7px;
    color: #8a90a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar.collapsed .compliance-nav-heading[b-rg6xfj3wte] {
    display: none;
}

.sidebar.collapsed:hover .compliance-nav-heading[b-rg6xfj3wte] {
    display: block;
}

.compliance-menu-toggle[b-rg6xfj3wte] {
    width: 100%;
    min-width: 50px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 3px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.compliance-menu-toggle:hover[b-rg6xfj3wte],
.compliance-menu-toggle.active[b-rg6xfj3wte] {
    color: var(--color-primary);
    background: var(--bg-navitem-active);
}

.compliance-menu-toggle > i:first-child[b-rg6xfj3wte] {
    min-width: 24px;
    color: var(--color-primary);
    font-size: 18px;
    text-align: center;
}

.compliance-menu-count[b-rg6xfj3wte] {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--color-primary);
    background: #dfeaf8;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.compliance-menu-chevron[b-rg6xfj3wte] {
    min-width: auto !important;
    color: #8a90a8 !important;
    font-size: 11px !important;
    transition: transform var(--transition);
}

.compliance-menu-toggle.expanded .compliance-menu-chevron[b-rg6xfj3wte] {
    transform: rotate(180deg);
}

.compliance-submenu[b-rg6xfj3wte] {
    margin: 2px 0 8px 23px;
    padding: 3px 0 3px 10px;
    border-left: 1px solid #dce3ee;
}

.compliance-submenu[b-rg6xfj3wte]  .compliance-submenu-link {
    position: relative;
    gap: 9px;
    min-height: 36px;
    margin-bottom: 1px;
    padding: 8px 10px;
    color: #687386;
    font-size: 12px;
    font-weight: 700;
}

.compliance-submenu[b-rg6xfj3wte]  .compliance-submenu-link i {
    min-width: 18px;
    color: #8a90a8;
    font-size: 13px;
}

.compliance-submenu[b-rg6xfj3wte]  .compliance-submenu-link:hover,
.compliance-submenu[b-rg6xfj3wte]  .compliance-submenu-link.active {
    color: var(--color-primary);
    background: #f1f5fa;
}

.compliance-submenu[b-rg6xfj3wte]  .compliance-submenu-link.active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -11px;
    width: 3px;
    border-radius: 4px;
    background: var(--color-primary);
}

.sidebar.collapsed .compliance-submenu[b-rg6xfj3wte] {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

/* ------------------------------------------------------------- footer bits -- */

.compliance-powered-by[b-rg6xfj3wte] {
    color: var(--text-muted);
}

.compliance-ge[b-rg6xfj3wte] {
    color: var(--color-primary);
    font-weight: 800;
}

/* --------------------------------------------------------- page furniture -- */
/* Named to match the Asset module so a developer moving between the two is not learning a second
   vocabulary. ::deep because the screens render inside .compliance-management-scope. */

[b-rg6xfj3wte] .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

[b-rg6xfj3wte] .page-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

[b-rg6xfj3wte] .page-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--bg-navitem-active);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

[b-rg6xfj3wte] .page-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main);
}

[b-rg6xfj3wte] .page-subtitle {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
    max-width: 78ch;
}

[b-rg6xfj3wte] .record-count-chip {
    background: var(--bg-navitem-active);
    color: var(--color-primary);
    border-radius: 14px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

[b-rg6xfj3wte] .section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16, 33, 53, .04);
}

[b-rg6xfj3wte] .compliance-grid-card {
    padding: 8px;
}

[b-rg6xfj3wte] .compliance-required::after {
    content: " *";
    color: var(--danger);
    font-weight: 700;
}

[b-rg6xfj3wte] .field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #47576a;
    margin-bottom: 4px;
}

[b-rg6xfj3wte] .dialog-form-wrap {
    padding: 4px 2px;
}

[b-rg6xfj3wte] .dialog-section {
    margin-bottom: 14px;
}

[b-rg6xfj3wte] .dialog-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8a90a8;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

[b-rg6xfj3wte] .form-row-gap {
    margin-bottom: 12px;
}

[b-rg6xfj3wte] .compliance-form-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Native checkbox rather than SfCheckBox. Syncfusion's component did not accept two-way binding in
   this version and there is no working example of it anywhere in this solution to copy, so a plain
   input is used - it binds reliably and is styled to sit with the Syncfusion inputs. */

[b-rg6xfj3wte] .compliance-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}

[b-rg6xfj3wte] .compliance-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    margin: 0;
}

/* Status and overdue pills. Overdue is red on purpose - it is the one state on a compliance screen
   that should be impossible to skim past. */

[b-rg6xfj3wte] .compliance-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

[b-rg6xfj3wte] .pill-overdue { background: #fdecea; color: #a3232a; }
[b-rg6xfj3wte] .pill-due-soon { background: #fff4e5; color: #9c5a16; }
[b-rg6xfj3wte] .pill-open { background: var(--bg-navitem-active); color: var(--color-primary); }
[b-rg6xfj3wte] .pill-done { background: #e8f5ee; color: #1d6b45; }
[b-rg6xfj3wte] .pill-na { background: #f0f0f2; color: #616a75; }

[b-rg6xfj3wte] .compliance-loading-state {
    padding: 26px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ------------------------------------------------------------- Syncfusion -- */
/* These reach into the grid's own DOM, which is why they need ::deep. */

[b-rg6xfj3wte] .e-grid {
    border-radius: 7px;
    border-color: var(--border-color);
}

[b-rg6xfj3wte] .e-grid .e-headercell {
    background: var(--color-primary);
    color: var(--text-inverse);
}

[b-rg6xfj3wte] .e-grid .e-headercelldiv {
    font-weight: 700;
    font-size: 12.5px;
}

[b-rg6xfj3wte] .e-grid .e-rowcell {
    height: 44px;
    font-size: 13px;
    color: var(--text-main);
}

[b-rg6xfj3wte] .e-grid .e-row:hover .e-rowcell {
    background: var(--bg-navitem-active);
}

[b-rg6xfj3wte] .e-grid .e-toolbar {
    border-radius: 7px 7px 0 0;
}

[b-rg6xfj3wte] .e-grid .e-gridform label.e-error {
    color: var(--danger);
    font-size: 12px;
}

[b-rg6xfj3wte] .e-dialog.e-grid-dialog .e-dlg-header {
    color: var(--text-main);
    font-weight: 700;
}

/* ------------------------------------------------------------- callouts -- */
/* Several screens carry a short explanation of a design decision that would otherwise look like a
   missing feature - no OVERDUE status, no company name field, no event-based generation. These
   were inline styles with a hand-picked blue; as classes they use the brand colour and stay
   consistent when it changes. */

[b-rg6xfj3wte] .compliance-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #cfdcec;
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
    background: var(--bg-navitem-active);
    font-size: 12.5px;
    line-height: 1.6;
    color: #3d4c60;
}

[b-rg6xfj3wte] .compliance-note > i {
    color: var(--color-primary);
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

[b-rg6xfj3wte] .compliance-note.warn {
    border-color: #ecdcc4;
    border-left-color: var(--warning);
    background: #fdf8f0;
    color: #5b4a33;
}

[b-rg6xfj3wte] .compliance-note.warn > i {
    color: #9c5a16;
}

[b-rg6xfj3wte] .compliance-note.danger {
    border-color: #eccfd0;
    border-left-color: var(--danger);
    background: #fdf3f3;
    color: #7a2a2f;
}

[b-rg6xfj3wte] .compliance-note.danger > i {
    color: var(--danger);
}

[b-rg6xfj3wte] .compliance-note strong {
    font-weight: 700;
}

/* ---------------------------------------------------- generation summary -- */

[b-rg6xfj3wte] .gen-tiles {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

[b-rg6xfj3wte] .gen-tile {
    min-width: 112px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fbfcfe;
}

[b-rg6xfj3wte] .gen-tile.primary {
    background: var(--bg-navitem-active);
    border-color: #cfdcec;
}

[b-rg6xfj3wte] .gen-tile-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

[b-rg6xfj3wte] .gen-tile-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

[b-rg6xfj3wte] .gen-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

[b-rg6xfj3wte] .gen-hint {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ---------------------------------------------------------- dashboard -- */

[b-rg6xfj3wte] .dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

[b-rg6xfj3wte] .dash-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

[b-rg6xfj3wte] .dash-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(15, 67, 134, .12);
}

[b-rg6xfj3wte] .dash-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    background: var(--bg-navitem-active);
    color: var(--color-primary);
}

[b-rg6xfj3wte] .dash-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 3px;
}

[b-rg6xfj3wte] .dash-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

[b-rg6xfj3wte] .dash-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: #3d4c60;
    line-height: 1.85;
}

/* ---------------------------------------------------------- calendar -- */

[b-rg6xfj3wte] .cal-tile {
    border: 1px solid var(--border-color);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

[b-rg6xfj3wte] .cal-tile:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(15, 67, 134, .12);
}

/* Overdue is the one number on this screen that must never be skimmed past. */
[b-rg6xfj3wte] .cal-overdue {
    color: #a3232a;
}

[b-rg6xfj3wte] .cal-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 6px 4px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

[b-rg6xfj3wte] .cal-pager-info {
    font-size: 12.5px;
    color: var(--text-muted);
}

[b-rg6xfj3wte] .cal-pager-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-rg6xfj3wte] .cal-pager-page {
    font-size: 12.5px;
    color: var(--text-main);
    padding: 0 8px;
    white-space: nowrap;
}

[b-rg6xfj3wte] .cal-readonly {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.7;
    background: #f7f9fc;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 10px 12px;
}

/* -- execution chain ------------------------------------------------------------------------
   The screen for one compliance instance. Everything here is ::deep because the scoped styles
   belong to the layout and the page is rendered into @Body. */

[b-rg6xfj3wte] .pill-ready { background: #eaf3ff; color: #17457f; }

[b-rg6xfj3wte] .exec-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

[b-rg6xfj3wte] .exec-obligation {
    font-size: 15px;
    color: var(--text-main);
    margin-bottom: 3px;
}

[b-rg6xfj3wte] .exec-meta {
    font-size: 12.5px;
    color: var(--text-muted);
}

[b-rg6xfj3wte] .exec-stage-pill {
    font-size: 12.5px;
    padding: 5px 12px;
}

/* The chain as a sequence. Reading which step is waiting on someone is the job of this screen,
   so it gets the space at the top rather than being inferred from six panels below. */
[b-rg6xfj3wte] .exec-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow-x: auto;
}

[b-rg6xfj3wte] .exec-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
}

[b-rg6xfj3wte] .exec-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 2px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
}

[b-rg6xfj3wte] .exec-step-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

[b-rg6xfj3wte] .exec-step-line {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    min-width: 24px;
}

[b-rg6xfj3wte] .exec-step.step-done .exec-step-dot {
    border-color: #1d6b45;
    background: #e8f5ee;
    color: #1d6b45;
}

[b-rg6xfj3wte] .exec-step.step-current .exec-step-dot {
    border-color: var(--color-primary);
    background: var(--bg-navitem-active);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(15, 67, 134, 0.10);
}

[b-rg6xfj3wte] .exec-step.step-current .exec-step-label {
    color: var(--color-primary);
    font-weight: 600;
}

/* Rejected and Changes Requested are the chain sent backwards, not a step further along, so
   they colour the step they came from. */
[b-rg6xfj3wte] .exec-step.step-blocked .exec-step-dot {
    border-color: #a3232a;
    background: #fdecea;
    color: #a3232a;
}

[b-rg6xfj3wte] .exec-step.step-blocked .exec-step-label { color: #a3232a; font-weight: 600; }

[b-rg6xfj3wte] .exec-step.step-na .exec-step-dot { opacity: 0.4; }

[b-rg6xfj3wte] .exec-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

[b-rg6xfj3wte] .exec-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[b-rg6xfj3wte] .exec-inline-pill { margin-left: 8px; font-size: 11px; }

[b-rg6xfj3wte] .exec-half { height: 100%; margin-bottom: 14px; }

[b-rg6xfj3wte] .exec-empty {
    padding: 18px 4px;
    font-size: 12.5px;
    text-align: left;
}

[b-rg6xfj3wte] .exec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

[b-rg6xfj3wte] .exec-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}

[b-rg6xfj3wte] .exec-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

[b-rg6xfj3wte] .exec-table tr:last-child td { border-bottom: none; }

[b-rg6xfj3wte] .exec-row-blocking { background: #fffaf9; }

[b-rg6xfj3wte] .exec-primary { color: var(--text-main); }

[b-rg6xfj3wte] .exec-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

[b-rg6xfj3wte] .exec-note-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

[b-rg6xfj3wte] .exec-row-actions { white-space: nowrap; text-align: right; }

[b-rg6xfj3wte] .exec-icon-btn {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    margin-left: 4px;
}

[b-rg6xfj3wte] .exec-icon-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[b-rg6xfj3wte] .exec-icon-btn.danger:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
}

[b-rg6xfj3wte] .exec-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

[b-rg6xfj3wte] .exec-log {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-rg6xfj3wte] .exec-log li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

[b-rg6xfj3wte] .exec-log li:last-child { border-bottom: none; }

[b-rg6xfj3wte] .exec-log-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* A refused action and the reason it was refused, together. Separating them is what turns a
   precise rule into a button somebody assumes is broken. */
[b-rg6xfj3wte] .exec-blocked {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-rg6xfj3wte] .exec-blocked-btn {
    border: 1px solid var(--border-color);
    background: #f6f7f9;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    cursor: not-allowed;
}

[b-rg6xfj3wte] .exec-blocked-reason {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 460px;
    line-height: 1.5;
}

[b-rg6xfj3wte] .exec-closed {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-main);
    background: #e8f5ee;
    border: 1px solid #bfe3ce;
    border-radius: 8px;
    padding: 12px 14px;
}

[b-rg6xfj3wte] .exec-closed i { color: #1d6b45; font-size: 16px; margin-top: 1px; }

[b-rg6xfj3wte] .exec-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 4px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

[b-rg6xfj3wte] .cal-open-chain {
    font-size: 12.5px;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

[b-rg6xfj3wte] .cal-open-chain:hover { text-decoration: underline; }

[b-rg6xfj3wte] .exec-summary-main { flex: 1; min-width: 260px; }

/* A step this obligation does not carry. Struck through rather than ticked - "not required" and
   "done" must not look the same, or the strip claims a filing that never happened. */
[b-rg6xfj3wte] .exec-step.step-skipped .exec-step-dot {
    border-style: dashed;
    background: #fafafb;
    color: #b4bac2;
}

[b-rg6xfj3wte] .exec-step.step-skipped .exec-step-label {
    color: #b4bac2;
    text-decoration: line-through;
}

/* -- filings, payments, evidence ------------------------------------------------------------- */

[b-rg6xfj3wte] .exec-table th.num,
[b-rg6xfj3wte] .exec-table td.num { text-align: right; white-space: nowrap; }

/* Interest and penalty are what a late filing cost. Worth reading differently from the tax. */
[b-rg6xfj3wte] .exec-table td.num-cost { color: #a3232a; }

[b-rg6xfj3wte] .filing-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--text-main);
    background: #f7f9fc;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 6px 12px;
}

[b-rg6xfj3wte] .filing-penalty { font-size: 12px; color: #a3232a; }

[b-rg6xfj3wte] .filing-total-preview {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 10px 14px;
    background: var(--bg-navitem-active);
    border-radius: 7px;
    font-size: 14px;
    color: var(--color-primary);
}

[b-rg6xfj3wte] .filing-total-preview strong { font-size: 17px; }

/* -- attachments ------------------------------------------------------------------------------ */

[b-rg6xfj3wte] .attach-row td { background: #fafbfd; padding: 0; }

[b-rg6xfj3wte] .attach-panel { padding: 12px 14px; }

[b-rg6xfj3wte] .attach-note { margin-bottom: 10px; }

[b-rg6xfj3wte] .attach-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 4px 0 10px;
}

[b-rg6xfj3wte] .attach-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

[b-rg6xfj3wte] .attach-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    margin-bottom: 6px;
}

[b-rg6xfj3wte] .attach-icon { font-size: 17px; color: var(--color-primary); }

[b-rg6xfj3wte] .attach-main { flex: 1; min-width: 0; }

[b-rg6xfj3wte] .attach-name {
    font-size: 13px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-rg6xfj3wte] .attach-meta { font-size: 11.5px; color: var(--text-muted); }

/* The hash is what makes a stored copy evidence rather than a file somebody put on a disk, so it
   is shown rather than tucked away - monospaced, because it is compared character by character. */
[b-rg6xfj3wte] .attach-hash {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    margin-left: 8px;
    padding: 1px 6px;
    background: #f0f2f5;
    border-radius: 4px;
    color: #616a75;
}

[b-rg6xfj3wte] .attach-actions { white-space: nowrap; }

/* The upload queue: what was just picked, on its way to the register.
   Deliberately shaped like .attach-list rather than styled as something new - the two lists sit
   directly above one another and describe the same kind of thing at two moments. What separates
   them is the state stripe on the left, which is the only information here that the stored list
   has no equivalent for. */
[b-rg6xfj3wte] .attach-queue {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

[b-rg6xfj3wte] .attach-queue li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: 7px;
    margin-bottom: 6px;
}

[b-rg6xfj3wte] .attach-queue-icon { font-size: 15px; color: var(--text-muted); }

[b-rg6xfj3wte] .attach-queue li.going { border-left-color: var(--color-primary); }
[b-rg6xfj3wte] .attach-queue li.going .attach-queue-icon { color: var(--color-primary); }

[b-rg6xfj3wte] .attach-queue li.done { border-left-color: #1d6b45; }
[b-rg6xfj3wte] .attach-queue li.done .attach-queue-icon { color: #1d6b45; }

/* A refused upload is the one row in this panel that must not be skimmed past: the file is NOT in
   the register, and the only thing standing between that and somebody believing it is stands here. */
[b-rg6xfj3wte] .attach-queue li.failed {
    border-left-color: #a3232a;
    background: #fdf7f7;
}

[b-rg6xfj3wte] .attach-queue li.failed .attach-queue-icon { color: #a3232a; }
[b-rg6xfj3wte] .attach-queue li.failed .attach-meta { color: #a3232a; }

/* Only the row actually going animates. A queue where every row pulses says nothing about which
   one is moving. */
[b-rg6xfj3wte] .attach-queue li.going .attach-queue-icon {
    animation: attach-pulse-b-rg6xfj3wte 1.1s ease-in-out infinite;
}

@keyframes attach-pulse-b-rg6xfj3wte {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    [b-rg6xfj3wte] .attach-queue li.going .attach-queue-icon { animation: none; }
}

[b-rg6xfj3wte] .attach-upload {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--color-primary);
    background: #fff;
    border: 1px dashed var(--color-primary);
    border-radius: 7px;
    padding: 7px 14px;
    cursor: pointer;
}

[b-rg6xfj3wte] .attach-upload:hover { background: var(--bg-navitem-active); }

[b-rg6xfj3wte] .attach-upload.busy { opacity: 0.6; cursor: progress; }

/* The native file input is unstyleable across browsers; the label above is the control. */
[b-rg6xfj3wte] .attach-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

[b-rg6xfj3wte] .attach-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Where a dropdown used to be, on a field that is no longer a choice. Shaped like the inputs
   beside it so the row still reads as a form, but plainly not editable - a greyed-out select
   invites people to try clicking it, and this has nothing to click. */
[b-rg6xfj3wte] .exec-actor-fixed {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 11px;
    background: var(--bg-navitem-active);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-main);
}

[b-rg6xfj3wte] .exec-actor-fixed i { color: var(--color-primary); font-size: 14px; }

[b-rg6xfj3wte] .exec-icon-btn.on {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--bg-navitem-active);
}

/* The worked example on the due-date exception form. Prominent on purpose: an exception entered
   to fix a wrong date, that is itself wrong, is worse than the original. */
[b-rg6xfj3wte] .exception-preview {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 11px 14px;
    background: var(--bg-navitem-active);
    border-radius: 7px;
    font-size: 13px;
    color: var(--color-primary);
    line-height: 1.55;
}

[b-rg6xfj3wte] .exception-preview i { font-size: 15px; margin-top: 1px; }

/* -- dashboard -------------------------------------------------------------------------------- */

[b-rg6xfj3wte] .dash-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

[b-rg6xfj3wte] .dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

[b-rg6xfj3wte] .dash-kpi {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

[b-rg6xfj3wte] button.dash-kpi:hover { border-color: var(--color-primary); }

[b-rg6xfj3wte] div.dash-kpi { cursor: default; }

[b-rg6xfj3wte] .dash-kpi-value { font-size: 27px; font-weight: 600; color: var(--text-main); line-height: 1.15; }
[b-rg6xfj3wte] .dash-kpi-label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
[b-rg6xfj3wte] .dash-kpi-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* Overdue is the one tile that should be uncomfortable to look at when it is not zero. */
[b-rg6xfj3wte] .dash-kpi.alarm { border-color: #e7b4b7; background: #fffafa; }
[b-rg6xfj3wte] .dash-kpi.alarm .dash-kpi-value { color: #a3232a; }

/* Thresholds rather than a gradient: "is this acceptable" has an answer. */
[b-rg6xfj3wte] .dash-kpi.kpi-good .dash-kpi-value { color: #1d6b45; }
[b-rg6xfj3wte] .dash-kpi.kpi-warn .dash-kpi-value { color: #9c5a16; }
[b-rg6xfj3wte] .dash-kpi.kpi-bad  .dash-kpi-value { color: #a3232a; }

[b-rg6xfj3wte] .dash-panel { margin-bottom: 14px; height: calc(100% - 14px); }

[b-rg6xfj3wte] .dash-attention { list-style: none; margin: 0 0 14px; padding: 0; }

[b-rg6xfj3wte] .dash-attention li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

[b-rg6xfj3wte] .dash-attention li:last-child { border-bottom: none; }

[b-rg6xfj3wte] .dash-attention-count {
    min-width: 34px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
}

[b-rg6xfj3wte] .dash-attention li.on .dash-attention-count { color: #a3232a; }

[b-rg6xfj3wte] .dash-money {
    background: #f7f9fc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}

[b-rg6xfj3wte] .dash-money-value { font-size: 21px; font-weight: 600; color: var(--text-main); }

[b-rg6xfj3wte] .dash-money-cost { font-size: 12.5px; color: #a3232a; margin-top: 5px; }

/* Ranked comparison, so a bar reads better than a pie - length is easier to compare than angle. */
[b-rg6xfj3wte] .dash-bars { list-style: none; margin: 0; padding: 0; }

[b-rg6xfj3wte] .dash-bars li { margin-bottom: 11px; }

[b-rg6xfj3wte] .dash-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--text-main);
    margin-bottom: 4px;
    gap: 10px;
}

[b-rg6xfj3wte] .dash-bar-value { color: var(--text-muted); white-space: nowrap; }
[b-rg6xfj3wte] .dash-bar-overdue { color: #a3232a; margin-left: 6px; }

[b-rg6xfj3wte] .dash-bar-track { height: 7px; background: #eef1f5; border-radius: 4px; overflow: hidden; }

[b-rg6xfj3wte] .dash-bar-fill { height: 100%; background: var(--color-primary); border-radius: 4px; }
[b-rg6xfj3wte] .dash-bar-fill.has-overdue { background: #c0474e; }

[b-rg6xfj3wte] .dash-row-severe { background: #fffafa; }

/* -- the empty register explaining itself ----------------------------------------------------- */

[b-rg6xfj3wte] .dash-setup-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
[b-rg6xfj3wte] .dash-setup-head i { font-size: 24px; color: var(--color-primary); margin-top: 2px; }
[b-rg6xfj3wte] .dash-setup-head h3 { font-size: 17px; margin: 0 0 4px; color: var(--text-main); }
[b-rg6xfj3wte] .dash-setup-head p { font-size: 13px; color: var(--text-muted); margin: 0; max-width: 640px; }

[b-rg6xfj3wte] .dash-steps { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: step; }

[b-rg6xfj3wte] .dash-steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    font-size: 13.5px;
}

[b-rg6xfj3wte] .dash-steps li i { font-size: 17px; color: var(--border-color); margin-top: 1px; }
[b-rg6xfj3wte] .dash-steps li.done i { color: #1d6b45; }
[b-rg6xfj3wte] .dash-steps li.done { color: var(--text-muted); }

[b-rg6xfj3wte] .dash-step-count {
    font-size: 11.5px;
    color: var(--text-muted);
    background: #f0f2f5;
    border-radius: 4px;
    padding: 1px 7px;
    margin-left: 8px;
}

[b-rg6xfj3wte] .dash-step-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.55;
    max-width: 620px;
}

[b-rg6xfj3wte] .dash-setup { max-width: 900px; }

[b-rg6xfj3wte] .dash-money-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* -- audit trail ------------------------------------------------------------------------------ */

[b-rg6xfj3wte] .audit-list { list-style: none; margin: 0; padding: 0; }

[b-rg6xfj3wte] .audit-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
}

[b-rg6xfj3wte] .audit-list li:last-child { border-bottom: none; }

[b-rg6xfj3wte] .audit-main { flex: 1; min-width: 0; }

/* Old and new values are compared character by character, so they read better monospaced. */
[b-rg6xfj3wte] .audit-main .exec-primary {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    word-break: break-word;
}

/* -- notices and regulatory changes ------------------------------------------------------------ */

[b-rg6xfj3wte] .compliance-filter-bar { margin-bottom: 14px; }

/* Rows open a detail panel, so they have to look like they will. */
[b-rg6xfj3wte] .notice-table tbody tr { cursor: pointer; }

[b-rg6xfj3wte] .notice-table tbody tr:hover { background: var(--bg-navitem-active); }

[b-rg6xfj3wte] .notice-row-selected,
[b-rg6xfj3wte] .notice-table tbody tr.notice-row-selected:hover {
    background: var(--bg-navitem-active);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

[b-rg6xfj3wte] .notice-detail { margin-top: 14px; }

[b-rg6xfj3wte] .notice-subject {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 10px 0 6px;
}

/* Typed in from a letter, so newlines in the source are meaningful. */
[b-rg6xfj3wte] .notice-body {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 12px;
    max-width: 900px;
}

[b-rg6xfj3wte] .notice-actions { margin-top: 14px; }

[b-rg6xfj3wte] .notice-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[b-rg6xfj3wte] .notice-responses li { display: block; }

[b-rg6xfj3wte] .notice-response-summary {
    white-space: pre-wrap;
    max-width: 900px;
    margin: 3px 0 2px;
}

[b-rg6xfj3wte] .notice-final-pill { margin-left: 8px; }

[b-rg6xfj3wte] .notice-final-check { margin-top: 4px; }

[b-rg6xfj3wte] .notice-attach-title { margin-top: 16px; }

/* ==========================================================================================
   The help button.

   Bottom right, fixed, on every compliance screen. Quiet until it is wanted: a bordered outline
   rather than a filled accent circle, because it has to be findable without competing with the
   overdue counts and the action buttons that are the actual point of these screens.

   z-index is deliberately low. Syncfusion dialogs sit at 1000 and up, so this passes BEHIND a
   modal overlay instead of floating over a dialog somebody is filling in.
   ========================================================================================== */

[b-rg6xfj3wte] .compliance-help {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;

    width: 38px;
    height: 38px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 17px;
    text-decoration: none;

    box-shadow: 0 1px 2px rgba(23, 27, 34, 0.06), 0 6px 18px -10px rgba(23, 27, 34, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

[b-rg6xfj3wte] .compliance-help:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

[b-rg6xfj3wte] .compliance-help:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    [b-rg6xfj3wte] .compliance-help { transition: none; }
    [b-rg6xfj3wte] .compliance-help:hover { transform: none; }
}

/* Syncfusion's pager is centred, so the corner is normally clear - but on a narrow screen there
   is less room either side, so it steps back and shrinks rather than sitting on top of a control. */
@media (max-width: 640px) {
    [b-rg6xfj3wte] .compliance-help {
        right: 12px;
        bottom: 12px;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
}

/* ==========================================================================================
   User guide.

   One column of content with a jump index beside it. The index is position:sticky rather than a
   set of links to other pages on purpose - the guide exists because the execution screen opens a
   lot at once, and answering that with a guide split across seven page loads would be answering
   it with the same problem.
   ========================================================================================== */

[b-rg6xfj3wte] .guide-layout {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 22px;
    align-items: start;
}

/* The index is the first thing to go: on a narrow screen the content is what matters, and a
   sticky sidebar at phone width is just something covering the text. */
@media (max-width: 1100px) {
    [b-rg6xfj3wte] .guide-layout { grid-template-columns: 1fr; }
    [b-rg6xfj3wte] .guide-index { display: none; }
}

[b-rg6xfj3wte] .guide-index {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0 14px 16px;
    border-left: 2px solid var(--border-color);
}

[b-rg6xfj3wte] .guide-index-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

[b-rg6xfj3wte] .guide-index a {
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 0;
    line-height: 1.35;
}

[b-rg6xfj3wte] .guide-index a:hover { color: var(--color-primary); }

[b-rg6xfj3wte] .guide-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Roomier than a grid card. The shared .section-card padding of 14px is right for a table, which
   brings its own internal spacing; a page of prose sitting that close to its own border reads as
   cramped. Scoped to the guide so no other screen shifts. */
[b-rg6xfj3wte] .guide-body .section-card {
    padding: 20px 22px;
}

[b-rg6xfj3wte] .guide-body p { margin: 0 0 10px; max-width: 70ch; }
[b-rg6xfj3wte] .guide-body p:last-child { margin-bottom: 0; }

[b-rg6xfj3wte] .guide-lead {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.6;
}

[b-rg6xfj3wte] .guide-sub {
    font-size: 13px;
    font-weight: 700;
    margin: 18px 0 8px;
    color: var(--text-main);
}

/* -- the three layers -------------------------------------------------------------------- */

[b-rg6xfj3wte] .guide-layers {
    list-style: none;
    margin: 14px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-rg6xfj3wte] .guide-layers li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

[b-rg6xfj3wte] .guide-layer-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-navitem-active);
    color: var(--color-primary);
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rg6xfj3wte] .guide-layers h4,
[b-rg6xfj3wte] .guide-walk h4 {
    font-size: 13.5px;
    font-weight: 700;
    margin: 2px 0 4px;
    color: var(--text-main);
}

/* "set up once" next to a heading, so nobody reads the thirteen master screens as daily work. */
[b-rg6xfj3wte] .guide-when {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 8px;
    font-style: italic;
}

/* -- the walkthrough --------------------------------------------------------------------- */

/* Numbered because it genuinely is a sequence - the chain cannot be done out of order, and the
   numbers are the one place in this module where an ordered marker is stating a fact. */
[b-rg6xfj3wte] .guide-walk {
    margin: 14px 0 0;
    padding: 0 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-rg6xfj3wte] .guide-walk li { padding-left: 4px; }
[b-rg6xfj3wte] .guide-walk li::marker { color: var(--color-primary); font-weight: 700; font-size: 12.5px; }
[b-rg6xfj3wte] .guide-walk p { font-size: 13px; color: var(--text-muted); }
[b-rg6xfj3wte] .guide-walk code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    background: #f0f2f5;
    padding: 1px 5px;
    border-radius: 4px;
}

/* -- tables ------------------------------------------------------------------------------ */

[b-rg6xfj3wte] .guide-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    margin: 14px 0 0;
}

[b-rg6xfj3wte] .guide-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    min-width: 30rem;
}

[b-rg6xfj3wte] .guide-table th,
[b-rg6xfj3wte] .guide-table td {
    text-align: left;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

[b-rg6xfj3wte] .guide-table th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: #fafbfd;
    white-space: nowrap;
}

[b-rg6xfj3wte] .guide-table tbody tr:last-child td { border-bottom: 0; }
[b-rg6xfj3wte] .guide-table td:first-child { white-space: nowrap; }

/* -- colour key -------------------------------------------------------------------------- */

[b-rg6xfj3wte] .guide-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 14px 0 16px;
}

[b-rg6xfj3wte] .guide-swatches > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

[b-rg6xfj3wte] .guide-swatches p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* -- lists ------------------------------------------------------------------------------- */

[b-rg6xfj3wte] .guide-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

[b-rg6xfj3wte] .guide-list li { font-size: 13px; color: var(--text-muted); }
[b-rg6xfj3wte] .guide-list li::marker { color: var(--text-muted); }
[b-rg6xfj3wte] .guide-list strong { color: var(--text-main); }

/* -- everyday jobs ----------------------------------------------------------------------- */

[b-rg6xfj3wte] .guide-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    overflow: hidden;
    margin-top: 14px;
}

[b-rg6xfj3wte] .guide-job {
    background: #fff;
    padding: 13px 15px;
}

[b-rg6xfj3wte] .guide-job h4 {
    font-size: 12.5px;
    font-weight: 700;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-main);
}

[b-rg6xfj3wte] .guide-job h4 i { color: var(--color-primary); font-size: 14px; }
[b-rg6xfj3wte] .guide-job p { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* -- troubleshooting --------------------------------------------------------------------- */

[b-rg6xfj3wte] .guide-faq { margin: 14px 0 0; }

[b-rg6xfj3wte] .guide-faq dt {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 14px;
}

[b-rg6xfj3wte] .guide-faq dt:first-child { margin-top: 0; }

[b-rg6xfj3wte] .guide-faq dd {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--border-color);
    max-width: 70ch;
}

/* Two choices, both visible. A dropdown would hide one behind a click for no gain. */
[b-rg6xfj3wte] .notice-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

[b-rg6xfj3wte] .notice-toggle-btn {
    border: none;
    background: transparent;
    padding: 7px 18px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

[b-rg6xfj3wte] .notice-toggle-btn:hover { background: var(--bg-navitem-active); }

[b-rg6xfj3wte] .notice-toggle-btn.primary {
    background: var(--color-primary);
    color: #fff;
}

/* The summary is the row's real content, but it is prose - capped so one long paragraph does not
   push every other column off the screen. */
[b-rg6xfj3wte] .change-summary-cell,
[b-rg6xfj3wte] .change-rationale-cell {
    max-width: 380px;
    white-space: normal;
    line-height: 1.55;
}

[b-rg6xfj3wte] .change-source {
    font-size: 12.5px;
    margin-bottom: 12px;
    word-break: break-all;
}

[b-rg6xfj3wte] .change-source a { color: var(--color-primary); }

[b-rg6xfj3wte] .change-unassessed {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Each unassessed company is the button that assesses it - the list and the next action are the
   same thing, so making them separate would be a click for nothing. */
[b-rg6xfj3wte] .change-unassessed-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px dashed var(--border-color);
    background: #fff;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12.5px;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

[b-rg6xfj3wte] .change-unassessed-chip:hover {
    border-color: var(--color-primary);
    border-style: solid;
    color: var(--color-primary);
}

/* -- document toggles -------------------------------------------------------------------------- */

/* A labelled sibling of .exec-icon-btn, used only for the attachment toggles.

   These carry a word rather than a bare paperclip because they are the only route to the file
   upload in the whole module, and an unlabelled icon is how that route went unfound. The pressed
   state is filled, not merely tinted - the row below it appears and disappears, and the control
   has to account for that. */
[b-rg6xfj3wte] .exec-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
    border-radius: 6px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    margin-left: 4px;
}

[b-rg6xfj3wte] .exec-doc-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[b-rg6xfj3wte] .exec-doc-btn.on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

[b-rg6xfj3wte] .exec-doc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* -- reminders --------------------------------------------------------------------------------- */

[b-rg6xfj3wte] .reminder-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 32px;
}

/* Rehearsing another date changes what Send would do, so it is stated beside the button rather
   than left to be inferred from a date picker further up the page. */
[b-rg6xfj3wte] .reminder-rehearsing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #9c5a16;
    background: #fff4e5;
    border-radius: 12px;
    padding: 3px 10px;
}

/* A recipient with no address is the difference between a reminder and a log row, so it reads as
   a finding rather than as a missing value. */
[b-rg6xfj3wte] .reminder-no-address {
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[b-rg6xfj3wte] .reminder-failure {
    color: var(--danger);
    max-width: 320px;
    white-space: normal;
    line-height: 1.5;
}
/* /Areas/HRManagment/Layout/Hrdashboard.razor.rz.scp.css */
.leave-type[b-vjg7474psg] {
    background: #eef2ff;
    color: #4f46e5;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    margin: 0 8px;
}


.hr-wrap *[b-vjg7474psg] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hr-wrap[b-vjg7474psg] {
    font-family: 'DM Sans', sans-serif;
    background: #F0F2F7;
    min-height: 100vh;
    padding: 28px 32px;
}

.hr-alert[b-vjg7474psg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -12px 0 20px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #FECACA;
    background: #FFF1F2;
    color: #B91C1C;
    font-size: 13px;
    font-weight: 600;
}

/* ── Welcome Bar ── */
.welcome-bar[b-vjg7474psg] {
    background: linear-gradient(135deg, #1a1f3c 0%, #2d3561 60%, #1a1f3c 100%);
    border-radius: 18px;
    padding: 28px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

    .welcome-bar[b-vjg7474psg]::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(99,130,255,0.12);
    }

    .welcome-bar[b-vjg7474psg]::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: 40%;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(99,130,255,0.07);
    }

.welcome-title[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}

.welcome-sub[b-vjg7474psg] {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}

.welcome-date[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
}

.hr-load-chip[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.10);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.14);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.hr-mini-spinner[b-vjg7474psg] {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: hrSpin .8s linear infinite;
}

/* ── KPI Cards ── */
.kpi-row[b-vjg7474psg] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.kpi-tile[b-vjg7474psg] {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 8px 20px rgba(15,23,42,0.035);
}

    .kpi-tile:hover[b-vjg7474psg] {
        transform: translateY(-3px);
        box-shadow: 0 10px 32px rgba(0,0,0,0.09);
    }

.kpi-accent[b-vjg7474psg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 16px 0 0 16px;
}

.kpi-icon[b-vjg7474psg] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.kpi-val[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    color: #1a1f3c;
    line-height: 1;
    margin-bottom: 4px;
}

.kpi-lbl[b-vjg7474psg] {
    font-size: 12px;
    color: #8a90a8;
    font-weight: 400;
}

/* ── Colors ── */
.c-blue[b-vjg7474psg] {
    background: #EEF3FF;
    color: #4C6EF5;
}

.c-green[b-vjg7474psg] {
    background: #ECFDF5;
    color: #059669;
}

.c-rose[b-vjg7474psg] {
    background: #FFF1F2;
    color: #E11D48;
}

.c-amber[b-vjg7474psg] {
    background: #FFFBEB;
    color: #D97706;
}

.c-purple[b-vjg7474psg] {
    background: #F5F3FF;
    color: #7C3AED;
}

.acc-blue[b-vjg7474psg] {
    background: #4C6EF5;
}

.acc-green[b-vjg7474psg] {
    background: #059669;
}

.acc-rose[b-vjg7474psg] {
    background: #E11D48;
}

.acc-amber[b-vjg7474psg] {
    background: #D97706;
}

.acc-purple[b-vjg7474psg] {
    background: #7C3AED;
}

/* ── Main Grid ── */
.main-grid[b-vjg7474psg] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
}

/* ── Panel Card ── */
.panel[b-vjg7474psg] {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
    box-shadow: 0 10px 24px rgba(15,23,42,0.035);
}

    .panel:hover[b-vjg7474psg] {
        box-shadow: 0 8px 28px rgba(0,0,0,0.08);
    }

.panel-head[b-vjg7474psg] {
    padding: 18px 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F3F4F8;
    flex-shrink: 0;
}

.panel-title[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    color: #1a1f3c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-icon[b-vjg7474psg] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.panel-badge[b-vjg7474psg] {
    font-size: 11px;
    color: #8a90a8;
    background: #F0F2F7;
    padding: 3px 8px;
    border-radius: 20px;
}

.panel-body[b-vjg7474psg] {
    padding: 10px 4px;
    overflow-y: auto;
    flex: 1;
    max-height: 260px;
}

    .panel-body[b-vjg7474psg]::-webkit-scrollbar {
        width: 3px;
    }

    .panel-body[b-vjg7474psg]::-webkit-scrollbar-track {
        background: transparent;
    }

    .panel-body[b-vjg7474psg]::-webkit-scrollbar-thumb {
        background: #dde;
        border-radius: 2px;
    }

/* ── Performer Row ── */
.perf-row[b-vjg7474psg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s;
    cursor: default;
}

    .perf-row:hover[b-vjg7474psg] {
        background: #F7F8FC;
    }

.perf-rank[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    color: #b0b5cc;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

    .perf-rank.top[b-vjg7474psg] {
        color: #D97706;
    }

.perf-avatar[b-vjg7474psg] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.perf-name[b-vjg7474psg] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #2d3561;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perf-score[b-vjg7474psg] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "Manrope", sans-serif !important;
    font-size: 13px;
    font-weight: 700;
    color: #1a1f3c;
    flex-shrink: 0;
}

.star-icon[b-vjg7474psg] {
    color: #F59E0B;
    font-size: 12px;
}

/* ── Dept Row ── */
.dept-row[b-vjg7474psg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s;
}

    .dept-row:hover[b-vjg7474psg] {
        background: #F7F8FC;
    }

.dept-name-txt[b-vjg7474psg] {
    font-size: 13px;
    color: #3d4466;
    font-weight: 400;
}

.dept-pill[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: #4C6EF5;
    background: #EEF3FF;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── Leave Row ── */
.leave-row[b-vjg7474psg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s;
}

    .leave-row:hover[b-vjg7474psg] {
        background: #F7F8FC;
    }

.leave-emp[b-vjg7474psg] {
    font-size: 13px;
    color: #2d3561;
    font-weight: 500;
}

.leave-date-pill[b-vjg7474psg] {
    font-size: 11px;
    background: #FFF1F2;
    color: #E11D48;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 500;
}

/* ── Task Row ── */
.task-row[b-vjg7474psg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s;
}

    .task-row:hover[b-vjg7474psg] {
        background: #F7F8FC;
    }

.task-emp[b-vjg7474psg] {
    font-size: 13px;
    color: #2d3561;
    font-weight: 400;
}

.task-counts[b-vjg7474psg] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tc-done[b-vjg7474psg] {
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: #ECFDF5;
    padding: 2px 8px;
    border-radius: 12px;
}

.tc-pend[b-vjg7474psg] {
    font-size: 12px;
    font-weight: 600;
    color: #D97706;
    background: #FFFBEB;
    padding: 2px 8px;
    border-radius: 12px;
}

/* ── Overdue Row ── */
.overdue-row[b-vjg7474psg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s;
}

    .overdue-row:hover[b-vjg7474psg] {
        background: #FFF5F5;
    }

.overdue-emp[b-vjg7474psg] {
    font-size: 13px;
    color: #2d3561;
}

.overdue-count[b-vjg7474psg] {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #E11D48;
}

/* ── Employee of Month ── */
.eom-row[b-vjg7474psg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    margin: 2px 8px;
    transition: background .15s;
}

    .eom-row:hover[b-vjg7474psg] {
        background: #F7F8FC;
    }

    .eom-row.rank1[b-vjg7474psg] {
        background: linear-gradient(90deg, #FFFBEB, #fff);
    }

.eom-trophy[b-vjg7474psg] {
    font-size: 22px;
    flex-shrink: 0;
}

.eom-name[b-vjg7474psg] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1f3c;
}

.eom-dept[b-vjg7474psg] {
    font-size: 11px;
    color: #8a90a8;
    margin-top: 1px;
}

.eom-rating[b-vjg7474psg] {
    margin-left: auto;
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #D97706;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* ── Meeting List Row ── */
.mtg-row[b-vjg7474psg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .15s;
}

    .mtg-row:hover[b-vjg7474psg] {
        background: #F7F8FC;
    }

.mtg-title[b-vjg7474psg] {
    font-size: 13px;
    color: #2d3561;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding-right: 8px;
}

.mtg-date[b-vjg7474psg] {
    font-size: 11px;
    color: #4C6EF5;
    background: #EEF3FF;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* ── Empty State ── */
.empty-state[b-vjg7474psg] {
    text-align: center;
    padding: 32px 16px;
    color: #b0b5cc;
    font-size: 13px;
}

/* ── Block Loading ── */
.hr-skeleton[b-vjg7474psg] {
    position: relative;
    overflow: hidden;
    background: #E9EEF6;
    border-radius: 8px;
}

    .hr-skeleton[b-vjg7474psg]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
        animation: hrShimmer 1.2s infinite;
    }

.hr-skel-value[b-vjg7474psg] {
    width: 82px;
    height: 28px;
    margin-bottom: 8px;
}

.hr-skel-label[b-vjg7474psg] {
    width: 138px;
    height: 12px;
}

.hr-skel-list[b-vjg7474psg] {
    padding: 2px 0;
}

.hr-skel-row[b-vjg7474psg] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    margin: 2px 8px;
}

.hr-skel-avatar[b-vjg7474psg] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.hr-skel-line[b-vjg7474psg] {
    height: 11px;
    margin: 4px 0;
}

    .hr-skel-line.wide[b-vjg7474psg] {
        width: 92%;
    }

    .hr-skel-line.short[b-vjg7474psg] {
        width: 44%;
    }

.hr-skel-pill[b-vjg7474psg] {
    width: 48px;
    height: 20px;
    border-radius: 20px;
}

/* ── Grid Spans ── */
.span2[b-vjg7474psg] {
    grid-column: span 2;
}

@@media (max-width: 1300px) {
    .kpi-row[b-vjg7474psg] {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-grid[b-vjg7474psg] {
        grid-template-columns: 1fr 1fr;
    }

    .span2[b-vjg7474psg] {
        grid-column: span 1;
    }
}

@@media (max-width: 768px) {
    .hr-wrap[b-vjg7474psg] {
        padding: 16px;
    }

    .kpi-row[b-vjg7474psg] {
        grid-template-columns: 1fr 1fr;
    }

    .main-grid[b-vjg7474psg] {
        grid-template-columns: 1fr;
    }

    .span2[b-vjg7474psg] {
        grid-column: span 1;
    }

    .welcome-bar[b-vjg7474psg] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* ── Animations ── */
@@keyframes fadeUp {
    from[b-vjg7474psg] {
        opacity: 0;
        transform: translateY(14px);
    }

    to[b-vjg7474psg] {
        opacity: 1;
        transform: translateY(0);
    }
}

@@keyframes hrShimmer {
    100%[b-vjg7474psg] {
        transform: translateX(100%);
    }
}

@@keyframes hrSpin {
    to[b-vjg7474psg] {
        transform: rotate(360deg);
    }
}

.kpi-tile[b-vjg7474psg] {
    animation: fadeUp .4s ease both;
}

    .kpi-tile:nth-child(1)[b-vjg7474psg] {
        animation-delay: .05s;
    }

    .kpi-tile:nth-child(2)[b-vjg7474psg] {
        animation-delay: .10s;
    }

    .kpi-tile:nth-child(3)[b-vjg7474psg] {
        animation-delay: .15s;
    }

    .kpi-tile:nth-child(4)[b-vjg7474psg] {
        animation-delay: .20s;
    }

    .kpi-tile:nth-child(5)[b-vjg7474psg] {
        animation-delay: .25s;
    }

.panel[b-vjg7474psg] {
    animation: fadeUp .5s ease both;
    animation-delay: .3s;
}















.leave-card[b-vjg7474psg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f9fafc;
    margin-bottom: 10px;
    transition: 0.2s;
}

    .leave-card:hover[b-vjg7474psg] {
        background: #f1f3f9;
    }

/* LEFT */
.leave-left[b-vjg7474psg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leave-avatar[b-vjg7474psg] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.leave-info[b-vjg7474psg] {
    display: flex;
    flex-direction: column;
}

.leave-name[b-vjg7474psg] {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
}

.leave-date[b-vjg7474psg] {
    font-size: 12px;
    color: #6b7280;
}

/* RIGHT */
.leave-right[b-vjg7474psg] {
    display: flex;
    flex-direction: column; /* 🔥 main fix */
    align-items: flex-end; /* right align */
    gap: 4px;
}

.leave-days[b-vjg7474psg] {
    background: #facc15;
    color: #000;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.leave-type-pill[b-vjg7474psg] {
/*    background: #fbbf24;*/
    color: #000;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
}   

.clickable-list-row[b-vjg7474psg] {
    width: calc(100% - 16px);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

    .clickable-list-row:focus-visible[b-vjg7474psg] {
        outline: 2px solid #4C6EF5;
        outline-offset: 2px;
        background: #F7F8FC;
    }

    .clickable-list-row:hover .dept-name-txt[b-vjg7474psg] {
        color: #1a1f3c;
        font-weight: 600;
    }

.hr-modal-backdrop[b-vjg7474psg] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.hr-employee-modal[b-vjg7474psg] {
    width: min(920px, 100%);
    max-height: min(82vh, 760px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hr-modal-head[b-vjg7474psg] {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #EEF0F6;
}

.hr-modal-title[b-vjg7474psg] {
    font-family: "Manrope", sans-serif !important;
    color: #1a1f3c;
    font-size: 18px;
    font-weight: 800;
}

.hr-modal-subtitle[b-vjg7474psg] {
    margin-top: 3px;
    color: #8a90a8;
    font-size: 12px;
    font-weight: 600;
}

.hr-modal-close[b-vjg7474psg] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #F3F5FA;
    color: #4B5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .hr-modal-close:hover[b-vjg7474psg],
    .hr-modal-close:focus-visible[b-vjg7474psg] {
        background: #E8ECF6;
        color: #111827;
        outline: none;
    }

.hr-modal-search[b-vjg7474psg] {
    padding: 14px 16px;
    border-bottom: 1px solid #EEF0F6;
    background: #FBFCFF;
    position: relative;
}

.hr-modal-search i[b-vjg7474psg] {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #8A94B3;
    font-size: 14px;
    pointer-events: none;
}

.hr-modal-search .form-control[b-vjg7474psg] {
    height: 42px;
    border: 1px solid #DDE3F0;
    border-radius: 10px;
    padding-left: 38px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1f3c;
    box-shadow: none;
}

.hr-modal-search .form-control:focus[b-vjg7474psg] {
    border-color: #4C6EF5;
    box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.12);
}

.hr-employee-list[b-vjg7474psg] {
    padding: 16px;
    overflow: auto;
    display: grid;
    gap: 12px;
}

.employee-detail-card[b-vjg7474psg] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid #EEF0F6;
    border-radius: 14px;
    background: #FBFCFF;
}

.employee-avatar[b-vjg7474psg] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #EEF3FF;
    color: #3151D3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", sans-serif !important;
    font-weight: 800;
    font-size: 14px;
}

.employee-detail-main[b-vjg7474psg] {
    min-width: 0;
}

.employee-name-line[b-vjg7474psg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.employee-name[b-vjg7474psg] {
    color: #1a1f3c;
    font-size: 14px;
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}

.employee-code[b-vjg7474psg] {
    flex-shrink: 0;
    color: #4C6EF5;
    background: #EEF3FF;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
}

.employee-meta-grid[b-vjg7474psg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 16px;
}

    .employee-meta-grid span[b-vjg7474psg] {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #667085;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .employee-meta-grid i[b-vjg7474psg] {
        color: #8A94B3;
        font-size: 13px;
        flex-shrink: 0;
    }

.modal-empty[b-vjg7474psg] {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@@media (max-width: 768px) {
    .hr-modal-backdrop[b-vjg7474psg] {
        align-items: flex-end;
        padding: 0;
    }

    .hr-employee-modal[b-vjg7474psg] {
        width: 100%;
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
    }

    .employee-detail-card[b-vjg7474psg] {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    .employee-avatar[b-vjg7474psg] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .employee-name-line[b-vjg7474psg] {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .employee-meta-grid[b-vjg7474psg] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/HRManagment/Layout/HRLayout.razor.rz.scp.css */
.sb-nav[b-g9157zp849] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    overflow: auto;
}

.sb-item[b-g9157zp849] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    opacity: .95;
    transition: background-color .2s ease, transform .2s ease;
}

/* Syncfusion dropdown button look */
.user-dd[b-g9157zp849],
.user-dd.e-dropdown-btn[b-g9157zp849] {
    background: #fff !important;
    color: var(--brand) !important;
    border-radius: 10px;
    font-weight: 700;
    border: none;
}

/* Login link when not authorized */
.btn-login[b-g9157zp849] {
    background: #fff;
    color: var(--brand);
    padding: .45rem .75rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    border: none;
}

/* Content area (single scroll container) */
.content[b-g9157zp849] {
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background: var(--surface);
    min-height: 0;
}

    .content > :first-child[b-g9157zp849] {
        margin-top: 0 !important;
    }

    .content > :last-child[b-g9157zp849] {
        margin-bottom: 0 !important;
    }

/* ---- Small screens ---- */
@@media (max-width:600px) {
    .content[b-g9157zp849] {
        padding: .75rem;
    }
}

/* =========================================================
   HR PANEL — SHARED COMPACT GRID THEME
   Presentation only: shared across every page using HRLayout.
   ========================================================= */
.hr-panel-shell[b-g9157zp849] {
    --hr-grid-brand: #0d8fac;
    --hr-grid-brand-dark: #087c9f;
    --hr-grid-border: #e1e8f0;
    --hr-grid-row-alt: #fbfcfe;
    --hr-grid-row-hover: #f2f8fc;
    --hr-grid-text: #263649;
    --hr-grid-muted: #718196;
    --hr-grid-radius: 8px;
}

.hr-panel-shell[b-g9157zp849]  .page-header {
    min-height: 58px;
    gap: 14px;
    margin-bottom: 12px;
    padding: 8px 0 11px;
}

.hr-panel-shell[b-g9157zp849]  .page-header-left h2,
.hr-panel-shell[b-g9157zp849]  .event-mail-header h2 {
    color: #1d2d3d;
    font-size: 18px !important;
    font-weight: 750;
    letter-spacing: -0.2px;
}

.hr-panel-shell[b-g9157zp849]  .page-header-left .page-subtitle,
.hr-panel-shell[b-g9157zp849]  .event-mail-subtitle {
    margin-top: 2px;
    color: var(--hr-grid-muted);
    font-size: 12px;
    line-height: 1.4;
}

.hr-panel-shell[b-g9157zp849]  .page-header-right {
    gap: 8px;
}

.hr-panel-shell[b-g9157zp849]  .record-count-chip,
.hr-panel-shell[b-g9157zp849]  .event-mail-summary span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #dce7f0;
    border-radius: 999px;
    background: #eef5fb;
    color: #245c86;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.hr-panel-shell[b-g9157zp849]  .section-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-color: var(--hr-grid-border);
    border-radius: var(--hr-grid-radius);
    box-shadow: 0 3px 12px rgba(33, 58, 84, 0.045);
}

.hr-panel-shell[b-g9157zp849]  .section-card-title,
.hr-panel-shell[b-g9157zp849]  .form-section-title {
    margin-bottom: 12px;
    padding-bottom: 8px;
    color: #245c86;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.45px;
}

.hr-panel-shell[b-g9157zp849]  .field-label,
.hr-panel-shell[b-g9157zp849]  .search-box label {
    margin-bottom: 4px;
    color: #607185;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.hr-panel-shell[b-g9157zp849]  .grid-wrapper,
.hr-panel-shell[b-g9157zp849]  .event-mail-card {
    border: 1px solid var(--hr-grid-border);
    border-radius: var(--hr-grid-radius);
    background: #fff;
    box-shadow: 0 3px 12px rgba(33, 58, 84, 0.045);
}

/* Syncfusion grids */
.hr-panel-shell[b-g9157zp849]  .grid-wrapper > .e-grid,
.hr-panel-shell[b-g9157zp849]  .approval-grid.e-grid {
    border: 0 !important;
    border-radius: var(--hr-grid-radius);
}

.hr-panel-shell[b-g9157zp849]  .e-grid {
    color: var(--hr-grid-text);
    font-size: 12px;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-gridheader,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-headercontent,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-columnheader {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: linear-gradient(135deg, var(--hr-grid-brand), var(--hr-grid-brand-dark)) !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-headercell,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-detailheadercell {
    height: 42px !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: linear-gradient(135deg, var(--hr-grid-brand), var(--hr-grid-brand-dark)) !important;
    color: #fff !important;
    padding: 0 10px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-headercell:hover,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-detailheadercell:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-headercelldiv,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-headertext,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-stackedheadercelldiv {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.25;
    letter-spacing: 0.32px;
    text-transform: uppercase;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-sortfilterdiv,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-filtermenudiv,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-gridheader .e-icons {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-rowcell {
    height: 48px;
    border-color: var(--hr-grid-border) !important;
    background: #fff;
    color: var(--hr-grid-text);
    padding: 7px 10px !important;
    font-size: 12px;
    line-height: 1.35 !important;
    vertical-align: middle;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-altrow .e-rowcell {
    background: var(--hr-grid-row-alt);
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-row:hover .e-rowcell,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-row.e-hover .e-rowcell {
    background: var(--hr-grid-row-hover) !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-emptyrow td {
    height: 170px;
    color: #8492a6;
    font-size: 12px;
    text-align: center;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar {
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box;
    border-color: var(--hr-grid-border) !important;
    background: #fff !important;
    padding: 5px 8px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-toolbar-items {
    height: 34px !important;
    min-height: 34px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-toolbar-item {
    min-height: 32px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-tbar-btn {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-tbar-btn-text,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-icons {
    font-size: 11px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-search {
    min-height: 32px !important;
    border-color: #d6e0ea !important;
    border-radius: 6px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-toolbar .e-search input {
    font-size: 12px !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-gridpager {
    min-height: 46px;
    border-color: var(--hr-grid-border) !important;
    background: #fff;
    color: var(--hr-grid-muted);
    font-size: 11px;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-pager .e-currentitem {
    border-radius: 6px;
    background: #e9f3f8 !important;
    color: #17627f !important;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-pager .e-pagercontainer,
.hr-panel-shell[b-g9157zp849]  .e-grid .e-pager .e-pagesizes {
    margin: 5px 8px;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-filterbarcell {
    padding: 5px 7px !important;
    background: #f7fafc;
}

.hr-panel-shell[b-g9157zp849]  .e-grid .e-filterbarcell .e-input {
    font-size: 11px !important;
}

/* Shared compact cells and actions */
.hr-panel-shell[b-g9157zp849]  .emp-name-cell {
    gap: 8px;
}

.hr-panel-shell[b-g9157zp849]  .emp-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.hr-panel-shell[b-g9157zp849]  .emp-fullname {
    font-size: 12px;
}

.hr-panel-shell[b-g9157zp849]  .emp-code-pill,
.hr-panel-shell[b-g9157zp849]  .status-pill,
.hr-panel-shell[b-g9157zp849]  .leave-type-badge {
    font-size: 10px;
}

.hr-panel-shell[b-g9157zp849]  .grid-action-icons,
.hr-panel-shell[b-g9157zp849]  .action-group,
.hr-panel-shell[b-g9157zp849]  .row-actions {
    gap: 4px;
}

.hr-panel-shell[b-g9157zp849]  .action-icon-btn,
.hr-panel-shell[b-g9157zp849]  .btn-action {
    width: 30px;
    height: 30px;
    min-height: 30px;
    border-radius: 7px;
    font-size: 12px;
}

.hr-panel-shell[b-g9157zp849]  .btn,
.hr-panel-shell[b-g9157zp849]  .e-btn {
    font-size: 12px;
}

/* Custom HR tables use the same visual language as Syncfusion grids. */
.hr-panel-shell[b-g9157zp849]  .event-mail-table,
.hr-panel-shell[b-g9157zp849]  .payroll-sheet,
.hr-panel-shell[b-g9157zp849]  .payroll-table {
    color: var(--hr-grid-text);
    font-size: 12px;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-table thead th,
.hr-panel-shell[b-g9157zp849]  .payroll-sheet thead th,
.hr-panel-shell[b-g9157zp849]  .payroll-table thead th {
    height: 42px;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: linear-gradient(135deg, var(--hr-grid-brand), var(--hr-grid-brand-dark)) !important;
    color: #fff !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    font-weight: 750;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    vertical-align: middle;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-table tbody td,
.hr-panel-shell[b-g9157zp849]  .payroll-sheet tbody td,
.hr-panel-shell[b-g9157zp849]  .payroll-table tbody td {
    height: 48px;
    border-color: var(--hr-grid-border) !important;
    padding: 7px 10px !important;
    font-size: 12px;
    vertical-align: middle;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-table tbody tr:nth-child(even) td,
.hr-panel-shell[b-g9157zp849]  .payroll-sheet tbody tr:nth-child(even) td,
.hr-panel-shell[b-g9157zp849]  .payroll-table tbody tr:nth-child(even) td {
    background: var(--hr-grid-row-alt);
}

.hr-panel-shell[b-g9157zp849]  .event-mail-table tbody tr:hover td,
.hr-panel-shell[b-g9157zp849]  .payroll-sheet tbody tr:hover td,
.hr-panel-shell[b-g9157zp849]  .payroll-table tbody tr:hover td {
    background: var(--hr-grid-row-hover);
}

/* Remove page-specific oversized spacing without changing its structure. */
.hr-panel-shell[b-g9157zp849]  .timesheet-approval-page {
    padding: 0 !important;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-page {
    padding-bottom: 12px;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-header {
    min-height: 58px;
    margin: 0 0 12px;
    padding: 8px 0 11px;
    border-bottom: 1px solid var(--hr-grid-border);
    background: transparent;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-toolbar {
    margin-bottom: 10px;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-toolbar input {
    height: 38px;
    border-radius: 7px;
    font-size: 12px;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-summary {
    gap: 6px;
    margin-bottom: 10px;
}

.hr-panel-shell[b-g9157zp849]  .event-mail-card {
    border-radius: var(--hr-grid-radius);
    box-shadow: 0 3px 12px rgba(33, 58, 84, 0.045);
}

@@media (max-width: 768px) {
    .hr-panel-shell[b-g9157zp849]  .page-header,
    .hr-panel-shell[b-g9157zp849]  .event-mail-header {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
    }

    .hr-panel-shell[b-g9157zp849]  .page-header-right {
        width: 100%;
        flex-wrap: wrap;
    }

    .hr-panel-shell[b-g9157zp849]  .section-card {
        padding: 12px;
    }
}
/* /Areas/HRManagment/Pages/LeaveAllocatedManagement/LeaveAllocatedList.razor.rz.scp.css */
.leave-page-header[b-hfz8tcuqof] {
    gap: 16px;
    flex-wrap: wrap;
}

.allocation-grid-card[b-hfz8tcuqof] {
    overflow: hidden;
}

.allocation-loading[b-hfz8tcuqof] {
    padding: 12px;
}

.allocation-search[b-hfz8tcuqof] {
    position: relative;
    min-width: 300px;
}

.allocation-search i[b-hfz8tcuqof] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8291a7;
    pointer-events: none;
}

.allocation-search input[b-hfz8tcuqof] {
    min-height: 38px;
    padding-left: 38px;
    border-color: #dce5f0;
    font-size: 13px;
}

.fy-badge[b-hfz8tcuqof] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eef5fb;
    color: #225b87;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
}

.allocation-table-scroll[b-hfz8tcuqof] {
    width: 100%;
    overflow: auto;
    max-height: calc(100vh - 250px);
}

.allocation-grid-table[b-hfz8tcuqof] {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: #263649;
}

.allocation-grid-table th[b-hfz8tcuqof],
.allocation-grid-table td[b-hfz8tcuqof] {
    border-right: 1px solid #e1e8f0;
    border-bottom: 1px solid #e1e8f0;
    padding: 9px 10px;
    text-align: center;
    white-space: nowrap;
}

.allocation-grid-table thead th[b-hfz8tcuqof] {
    position: sticky;
    z-index: 6;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.allocation-group-header th[b-hfz8tcuqof] {
    top: 0;
    height: 48px;
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.allocation-sub-header th[b-hfz8tcuqof] {
    top: 48px;
    height: 38px;
    min-width: 88px;
    background: #119bb5;
    font-size: 11px;
    font-weight: 700;
}

.leave-group-title[b-hfz8tcuqof] {
    min-width: 264px;
}

.leave-group-title span[b-hfz8tcuqof],
.leave-group-title small[b-hfz8tcuqof] {
    display: block;
}

.leave-group-title small[b-hfz8tcuqof] {
    margin-top: 2px;
    opacity: 0.75;
    font-size: 9px;
}

.allocation-grid-table tbody tr:nth-child(even) td[b-hfz8tcuqof] {
    background: #fbfcfe;
}

.allocation-grid-table tbody tr:hover td[b-hfz8tcuqof] {
    background: #f2f8fc;
}

.allocation-grid-table tbody td[b-hfz8tcuqof] {
    height: 50px;
    background: #fff;
}

.sticky-col[b-hfz8tcuqof] {
    position: sticky;
    z-index: 4;
}

.allocation-grid-table thead .sticky-col[b-hfz8tcuqof] {
    z-index: 9;
}

.sticky-serial[b-hfz8tcuqof] {
    left: 0;
    width: 58px;
    min-width: 58px;
}

.sticky-code[b-hfz8tcuqof] {
    left: 58px;
    width: 118px;
    min-width: 118px;
}

.sticky-name[b-hfz8tcuqof] {
    left: 176px;
    width: 220px;
    min-width: 220px;
    text-align: left !important;
    box-shadow: 4px 0 7px rgba(26, 55, 85, 0.05);
}

.allocation-grid-table tbody .sticky-col[b-hfz8tcuqof] {
    background: #fff;
}

.allocation-grid-table tbody tr:nth-child(even) .sticky-col[b-hfz8tcuqof] {
    background: #fbfcfe;
}

.allocation-grid-table tbody tr:hover .sticky-col[b-hfz8tcuqof] {
    background: #f2f8fc;
}

.row-number[b-hfz8tcuqof] {
    color: #7d8998;
    font-weight: 600;
}

.metric-cell[b-hfz8tcuqof] {
    min-width: 88px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.quota-cell[b-hfz8tcuqof] {
    color: #235d8b;
    background-image: linear-gradient(rgba(225, 239, 252, 0.48), rgba(225, 239, 252, 0.48));
}

.availed-cell[b-hfz8tcuqof] {
    color: #a55b23;
}

.balance-cell[b-hfz8tcuqof] {
    color: #167453;
    background-image: linear-gradient(rgba(221, 247, 236, 0.42), rgba(221, 247, 236, 0.42));
}

.balance-low[b-hfz8tcuqof] {
    color: #b42318;
    background-image: linear-gradient(rgba(255, 232, 230, 0.65), rgba(255, 232, 230, 0.65));
}

.action-column[b-hfz8tcuqof] {
    min-width: 78px;
    right: 0;
    position: sticky;
    z-index: 5;
    background: #fff !important;
    box-shadow: -4px 0 7px rgba(26, 55, 85, 0.05);
}

.allocation-grid-table thead .action-column[b-hfz8tcuqof] {
    z-index: 9;
    background: linear-gradient(135deg, #0d98b4, #087c9f) !important;
}

.allocation-edit-button[b-hfz8tcuqof] {
    width: 32px;
    height: 32px;
    border: 1px solid #cbdbea;
    border-radius: 8px;
    background: #f2f7fb;
    color: #24618f;
    transition: 0.18s ease;
}

.allocation-edit-button:hover[b-hfz8tcuqof] {
    background: #24618f;
    color: #fff;
    border-color: #24618f;
}

.allocation-empty-cell[b-hfz8tcuqof] {
    height: 180px !important;
    color: #8492a6;
}

.allocation-empty-cell i[b-hfz8tcuqof],
.allocation-empty-cell span[b-hfz8tcuqof] {
    display: block;
}

.allocation-empty-cell i[b-hfz8tcuqof] {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.55;
}

.allocation-pager[b-hfz8tcuqof] {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid #e3eaf1;
    background: #fff;
    color: #748294;
    font-size: 12px;
}

.allocation-pager > div[b-hfz8tcuqof] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pager-button[b-hfz8tcuqof] {
    width: 30px;
    height: 30px;
    border: 1px solid #cfdae6;
    border-radius: 7px;
    background: #f5f8fb;
    color: #285f88;
}

.pager-button:disabled[b-hfz8tcuqof] {
    cursor: not-allowed;
    opacity: 0.45;
}

.allocation-dialog-body[b-hfz8tcuqof] {
    padding: 18px 20px 20px;
    background: #f8fafc;
}

.allocation-form-topbar[b-hfz8tcuqof] {
    display: flex;
    align-items: end;
    gap: 18px;
    margin-bottom: 14px;
}

.employee-select-wrap[b-hfz8tcuqof] {
    flex: 1;
}

.employee-select-wrap .form-select[b-hfz8tcuqof] {
    min-height: 42px;
    border-color: #d7e1ec;
    font-size: 13px;
}

.allocation-fy-card[b-hfz8tcuqof] {
    width: 145px;
    min-height: 42px;
    border: 1px solid #d7e1ec;
    border-radius: 7px;
    background: #fff;
    padding: 6px 12px;
}

.allocation-fy-card span[b-hfz8tcuqof],
.allocation-fy-card strong[b-hfz8tcuqof] {
    display: block;
}

.allocation-fy-card span[b-hfz8tcuqof] {
    color: #7a899b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.allocation-fy-card strong[b-hfz8tcuqof] {
    color: #245c86;
    font-size: 14px;
}

.allocation-info-banner[b-hfz8tcuqof] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cfe3f1;
    border-radius: 7px;
    background: #eef7fc;
    color: #315f7c;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 12px;
}

.allocation-info-banner i[b-hfz8tcuqof] {
    color: #13835b;
    font-size: 15px;
}

.allocation-editor-loading[b-hfz8tcuqof],
.allocation-editor-empty[b-hfz8tcuqof] {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px dashed #cfdae6;
    border-radius: 8px;
    background: #fff;
    color: #718196;
    font-size: 13px;
}

.allocation-form-scroll[b-hfz8tcuqof] {
    overflow: auto;
    max-height: 55vh;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #fff;
}

.allocation-form-table[b-hfz8tcuqof] {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.allocation-form-table th[b-hfz8tcuqof] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #edf4f9;
    color: #40566b;
    padding: 11px 14px;
    border-bottom: 1px solid #dce5ef;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.allocation-form-table th:not(:first-child)[b-hfz8tcuqof] {
    width: 22%;
    text-align: center;
}

.allocation-form-table td[b-hfz8tcuqof] {
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f5;
}

.allocation-form-table tr:last-child td[b-hfz8tcuqof] {
    border-bottom: 0;
}

.leave-type-label strong[b-hfz8tcuqof],
.leave-type-label span[b-hfz8tcuqof] {
    display: block;
}

.leave-type-label strong[b-hfz8tcuqof] {
    color: #273b4f;
    font-size: 13px;
}

.leave-type-label span[b-hfz8tcuqof] {
    color: #8492a5;
    font-size: 10px;
    margin-top: 2px;
}

.allocation-number-input[b-hfz8tcuqof] {
    max-width: 150px;
    margin: auto;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.readonly-metric[b-hfz8tcuqof] {
    max-width: 150px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background: #f1f4f7;
    color: #566777;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.readonly-metric.balance[b-hfz8tcuqof] {
    background: #eaf7f1;
    color: #187253;
    border-color: #cdeadd;
}

.readonly-metric.invalid[b-hfz8tcuqof],
.allocation-invalid-row .allocation-number-input[b-hfz8tcuqof] {
    background: #fff1f0;
    color: #b42318;
    border-color: #f2aaa5;
}

.allocation-dialog-actions[b-hfz8tcuqof] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
}

@media (max-width: 760px) {
    .allocation-search[b-hfz8tcuqof] {
        min-width: 100%;
    }

    .allocation-form-topbar[b-hfz8tcuqof] {
        align-items: stretch;
        flex-direction: column;
    }

    .allocation-fy-card[b-hfz8tcuqof] {
        width: 100%;
    }

    .page-header-right[b-hfz8tcuqof] {
        width: 100%;
        flex-wrap: wrap;
    }
}
/* /Areas/HRManagment/Pages/LeaveTracker/ApplyLeave.razor.rz.scp.css */
.approval-page-header[b-9xsxolgtr9] {
    gap: 16px;
    flex-wrap: wrap;
}

.approval-grid-card[b-9xsxolgtr9] {
    overflow: hidden;
}

.approval-loading[b-9xsxolgtr9] {
    padding: 10px 12px;
}

.approval-toolbar[b-9xsxolgtr9] {
    justify-content: flex-start;
    padding: 10px 12px;
}

.approval-employee-filter[b-9xsxolgtr9] {
    position: relative;
    width: min(320px, 100%);
    flex: 0 1 320px;
}

.approval-employee-filter > i[b-9xsxolgtr9] {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8291a7;
    pointer-events: none;
}

.approval-employee-filter[b-9xsxolgtr9]  .e-input-group {
    min-height: 38px;
    padding-left: 29px;
    border-color: #dce5f0 !important;
    border-radius: 7px;
    background: #fff;
}

.approval-employee-filter[b-9xsxolgtr9]  input {
    font-size: 13px !important;
}

.approval-status-filters[b-9xsxolgtr9] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.status-filter-button[b-9xsxolgtr9] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8e1eb;
    border-radius: 999px;
    background: #fff;
    color: #526477;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    transition: 0.15s ease;
}

.status-filter-button span[b-9xsxolgtr9] {
    min-width: 20px;
    border-radius: 999px;
    background: #edf2f7;
    padding: 1px 6px;
    color: #64748b;
    font-size: 10px;
    text-align: center;
}

.status-filter-button:hover[b-9xsxolgtr9] {
    border-color: #9db3c8;
    background: #f7fafc;
}

.status-filter-button.active[b-9xsxolgtr9] {
    border-color: #24618f;
    background: #eaf3f9;
    color: #20577f;
    box-shadow: inset 0 0 0 1px rgba(36, 97, 143, 0.08);
}

.status-filter-button.pending.active[b-9xsxolgtr9] {
    border-color: #e8b93f;
    background: #fff8e7;
    color: #8a570b;
}

.status-filter-button.approved.active[b-9xsxolgtr9] {
    border-color: #61b693;
    background: #eaf8f2;
    color: #176c4d;
}

.status-filter-button.rejected.active[b-9xsxolgtr9] {
    border-color: #e58a94;
    background: #fff0f1;
    color: #a12938;
}

.approval-clear-button[b-9xsxolgtr9] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #6d7d8f;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
}

.approval-clear-button:hover[b-9xsxolgtr9] {
    color: #245c86;
}

.approval-table-scroll[b-9xsxolgtr9] {
    width: 100%;
    max-height: calc(100vh - 265px);
    overflow: auto;
}

.approval-grid-table[b-9xsxolgtr9] {
    width: 100%;
    min-width: 830px;
    border-collapse: separate;
    border-spacing: 0;
    color: #263649;
    font-size: 12px;
}

.approval-grid-table th[b-9xsxolgtr9],
.approval-grid-table td[b-9xsxolgtr9] {
    padding: 9px 12px;
    border-right: 1px solid #e1e8f0;
    border-bottom: 1px solid #e1e8f0;
    text-align: left;
    vertical-align: middle;
}

.approval-grid-table th:last-child[b-9xsxolgtr9],
.approval-grid-table td:last-child[b-9xsxolgtr9] {
    border-right: 0;
}

.approval-grid-table thead th[b-9xsxolgtr9] {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 42px;
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
}

.approval-grid-table tbody td[b-9xsxolgtr9] {
    height: 50px;
    background: #fff;
}

.approval-grid-table tbody tr:nth-child(even) td[b-9xsxolgtr9] {
    background: #fbfcfe;
}

.approval-grid-table tbody tr:hover td[b-9xsxolgtr9] {
    background: #f2f8fc;
}

.approval-grid-table .emp-fullname[b-9xsxolgtr9] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-grid-table .leave-type-badge[b-9xsxolgtr9] {
    display: inline-block;
    border-radius: 6px;
    background: #edf5fa;
    color: #245c86;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.approval-duration[b-9xsxolgtr9] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.approval-duration strong[b-9xsxolgtr9] {
    color: #293c4f;
    font-size: 12px;
    font-weight: 700;
}

.approval-duration span[b-9xsxolgtr9] {
    color: #718196;
    font-size: 11px;
}

.approval-duration i[b-9xsxolgtr9] {
    margin-right: 4px;
    font-size: 9px;
}

.approval-action-column[b-9xsxolgtr9] {
    width: 132px;
    min-width: 132px;
    text-align: center !important;
}

.approval-actions[b-9xsxolgtr9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.approval-action-button[b-9xsxolgtr9] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: 14px;
    transition: 0.15s ease;
}

.approval-action-button.view[b-9xsxolgtr9] {
    border-color: #cbdbea;
    background: #f2f7fb;
    color: #24618f;
}

.approval-action-button.view:hover[b-9xsxolgtr9] {
    border-color: #24618f;
    background: #24618f;
    color: #fff;
}

.approval-action-button.approve[b-9xsxolgtr9] {
    color: #168459;
}

.approval-action-button.approve:hover[b-9xsxolgtr9] {
    border-color: #b7e4d1;
    background: #e8f7f0;
}

.approval-action-button.decline[b-9xsxolgtr9] {
    color: #cf3c45;
}

.approval-action-button.decline:hover[b-9xsxolgtr9] {
    border-color: #f1c4c8;
    background: #fff0f1;
}

.approval-empty-cell[b-9xsxolgtr9] {
    height: 190px !important;
    color: #8492a6;
    text-align: center !important;
}

.approval-empty-cell i[b-9xsxolgtr9],
.approval-empty-cell strong[b-9xsxolgtr9],
.approval-empty-cell span[b-9xsxolgtr9] {
    display: block;
}

.approval-empty-cell i[b-9xsxolgtr9] {
    margin-bottom: 8px;
    font-size: 28px;
    opacity: 0.55;
}

.approval-empty-cell strong[b-9xsxolgtr9] {
    color: #607185;
    font-size: 13px;
}

.approval-empty-cell span[b-9xsxolgtr9] {
    margin-top: 4px;
    font-size: 11px;
}

.approval-pager[b-9xsxolgtr9] {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 12px;
    border-top: 1px solid #e3eaf1;
    background: #fff;
    color: #748294;
    font-size: 11px;
}

.approval-pager > div[b-9xsxolgtr9] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pager-button[b-9xsxolgtr9] {
    width: 30px;
    height: 30px;
    border: 1px solid #cfdae6;
    border-radius: 7px;
    background: #f5f8fb;
    color: #285f88;
}

.pager-button:disabled[b-9xsxolgtr9] {
    cursor: not-allowed;
    opacity: 0.45;
}

.leave-review-backdrop[b-9xsxolgtr9] {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.48);
}

.leave-review-modal[b-9xsxolgtr9] {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
}

.leave-review-header[b-9xsxolgtr9],
.leave-review-footer[b-9xsxolgtr9] {
    padding: 14px 18px;
}

.leave-review-header[b-9xsxolgtr9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.leave-review-header h3[b-9xsxolgtr9] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
}

.leave-review-header p[b-9xsxolgtr9] {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.modal-close-btn[b-9xsxolgtr9] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
}

.modal-close-btn:hover[b-9xsxolgtr9] {
    background: #f8fafc;
}

.leave-review-body[b-9xsxolgtr9] {
    padding: 16px 18px;
    overflow-y: auto;
}

.leave-review-meta[b-9xsxolgtr9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    background: #f8fafc;
}

.leave-review-field[b-9xsxolgtr9] {
    min-width: 0;
    padding: 11px 13px;
    border-right: 1px solid #e4eaf0;
    border-bottom: 1px solid #e4eaf0;
}

.leave-review-field:nth-child(2n)[b-9xsxolgtr9] {
    border-right: 0;
}

.leave-review-field:nth-last-child(-n + 2)[b-9xsxolgtr9] {
    border-bottom: 0;
}

.leave-review-field > span[b-9xsxolgtr9],
.leave-review-section-title[b-9xsxolgtr9] {
    display: block;
    color: #718196;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.leave-review-field > strong[b-9xsxolgtr9] {
    display: block;
    margin-top: 4px;
    color: #26384a;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.leave-review-section-title[b-9xsxolgtr9] {
    margin-bottom: 7px;
}

.leave-review-reason[b-9xsxolgtr9] {
    min-height: 88px;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    background: #fff;
    padding: 12px 13px;
}

.leave-review-reason p[b-9xsxolgtr9] {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.leave-review-footer[b-9xsxolgtr9] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #e2e8f0;
}

.leave-review-footer .btn[b-9xsxolgtr9] {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .approval-clear-button[b-9xsxolgtr9] {
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .approval-page-header .page-header-right[b-9xsxolgtr9],
    .approval-employee-filter[b-9xsxolgtr9],
    .approval-status-filters[b-9xsxolgtr9] {
        width: 100%;
    }

    .approval-employee-filter[b-9xsxolgtr9] {
        flex-basis: 100%;
    }

    .approval-status-filters[b-9xsxolgtr9] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .status-filter-button[b-9xsxolgtr9] {
        flex: 0 0 auto;
    }

    .approval-pager[b-9xsxolgtr9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .leave-review-backdrop[b-9xsxolgtr9] {
        align-items: flex-start;
        padding: 10px;
    }

    .leave-review-meta[b-9xsxolgtr9] {
        grid-template-columns: 1fr;
    }

    .leave-review-field[b-9xsxolgtr9],
    .leave-review-field:nth-child(2n)[b-9xsxolgtr9],
    .leave-review-field:nth-last-child(-n + 2)[b-9xsxolgtr9] {
        border-right: 0;
        border-bottom: 1px solid #e4eaf0;
    }

    .leave-review-field:last-child[b-9xsxolgtr9] {
        border-bottom: 0;
    }

    .leave-review-header[b-9xsxolgtr9],
    .leave-review-body[b-9xsxolgtr9],
    .leave-review-footer[b-9xsxolgtr9] {
        padding-left: 13px;
        padding-right: 13px;
    }
}
/* /Areas/HRManagment/Pages/ManagerReview/ManagerReview.razor.rz.scp.css */
.manager-review-page[b-5h4k0dapjp] {
    padding: 0;
}

.review-page-header[b-5h4k0dapjp] {
    gap: 16px;
    flex-wrap: wrap;
}

.review-grid-card[b-5h4k0dapjp] {
    overflow: hidden;
}

.review-loading[b-5h4k0dapjp],
.review-table-loading[b-5h4k0dapjp] {
    padding: 10px 12px;
}

.review-toolbar[b-5h4k0dapjp] {
    justify-content: flex-start;
    padding: 10px 12px;
}

.review-employee-filter[b-5h4k0dapjp] {
    position: relative;
    width: min(310px, 100%);
    flex: 0 1 310px;
}

.review-employee-filter > i[b-5h4k0dapjp] {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8291a7;
    pointer-events: none;
}

.review-employee-filter[b-5h4k0dapjp]  .e-input-group {
    min-height: 38px;
    padding-left: 29px;
    border-color: #dce5f0 !important;
    border-radius: 7px;
    background: #fff;
}

.review-employee-filter[b-5h4k0dapjp]  input {
    font-size: 12px !important;
}

.review-mode-toggle[b-5h4k0dapjp],
.review-status-filters[b-5h4k0dapjp] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.review-mode-toggle[b-5h4k0dapjp] {
    padding: 3px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #f2f6f9;
}

.review-mode-toggle button[b-5h4k0dapjp] {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5f7184;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
}

.review-mode-toggle button span[b-5h4k0dapjp] {
    min-width: 19px;
    border-radius: 999px;
    background: #e3eaf1;
    padding: 1px 5px;
    color: #607185;
    font-size: 9px;
}

.review-mode-toggle button.active[b-5h4k0dapjp] {
    background: #fff;
    color: #245c86;
    box-shadow: 0 1px 4px rgba(31, 65, 94, 0.12);
}

.status-filter[b-5h4k0dapjp] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d8e1eb;
    border-radius: 999px;
    background: #fff;
    color: #526477;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 700;
}

.status-filter span[b-5h4k0dapjp] {
    min-width: 18px;
    border-radius: 999px;
    background: #edf2f7;
    padding: 1px 5px;
    color: #64748b;
    font-size: 9px;
    text-align: center;
}

.status-filter.active[b-5h4k0dapjp] {
    border-color: #24618f;
    background: #eaf3f9;
    color: #20577f;
}

.status-filter.pending.active[b-5h4k0dapjp] {
    border-color: #e8b93f;
    background: #fff8e7;
    color: #8a570b;
}

.status-filter.approved.active[b-5h4k0dapjp] {
    border-color: #61b693;
    background: #eaf8f2;
    color: #176c4d;
}

.status-filter.rejected.active[b-5h4k0dapjp] {
    border-color: #e58a94;
    background: #fff0f1;
    color: #a12938;
}

.selected-employee-strip[b-5h4k0dapjp] {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fbfd;
}

.selected-employee-strip > div:nth-child(2)[b-5h4k0dapjp] {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.selected-employee-strip strong[b-5h4k0dapjp] {
    color: #26384a;
    font-size: 13px;
    font-weight: 700;
}

.selected-employee-strip > div:nth-child(2) > span[b-5h4k0dapjp] {
    overflow: hidden;
    color: #748294;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-employee-pending[b-5h4k0dapjp] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.selected-employee-pending span[b-5h4k0dapjp] {
    border-radius: 999px;
    background: #fff6df;
    color: #8a570b;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
}

.review-table-scroll[b-5h4k0dapjp] {
    width: 100%;
    max-height: calc(100vh - 285px);
    overflow: auto;
}

.review-table[b-5h4k0dapjp] {
    width: 100%;
    min-width: 790px;
    border-collapse: separate;
    border-spacing: 0;
    color: #263649;
    font-size: 12px;
}

.task-review-table[b-5h4k0dapjp] {
    min-width: 920px;
}

.review-table th[b-5h4k0dapjp],
.review-table td[b-5h4k0dapjp] {
    padding: 8px 11px;
    border-right: 1px solid #e1e8f0;
    border-bottom: 1px solid #e1e8f0;
    text-align: left;
    vertical-align: middle;
}

.review-table th:last-child[b-5h4k0dapjp],
.review-table td:last-child[b-5h4k0dapjp] {
    border-right: 0;
}

.review-table thead th[b-5h4k0dapjp] {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 42px;
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
}

.review-table tbody td[b-5h4k0dapjp] {
    height: 50px;
    background: #fff;
}

.review-table tbody tr:nth-child(even) td[b-5h4k0dapjp] {
    background: #fbfcfe;
}

.review-table tbody tr:hover td[b-5h4k0dapjp] {
    background: #f2f8fc;
}

.review-date[b-5h4k0dapjp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #40566b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.review-date i[b-5h4k0dapjp] {
    color: #2b6a96;
}

.review-primary-cell[b-5h4k0dapjp] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.review-primary-cell strong[b-5h4k0dapjp],
.review-primary-cell span[b-5h4k0dapjp] {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-primary-cell strong[b-5h4k0dapjp] {
    color: #26384a;
    font-size: 12px;
    font-weight: 700;
}

.review-primary-cell span[b-5h4k0dapjp] {
    color: #7b8999;
    font-size: 10px;
}

.metric-badge[b-5h4k0dapjp],
.category-badge[b-5h4k0dapjp] {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.metric-badge[b-5h4k0dapjp] {
    background: #edf4fa;
    color: #245c86;
}

.category-badge[b-5h4k0dapjp] {
    background: #f2f4f7;
    color: #526477;
}

.location-text[b-5h4k0dapjp] {
    display: block;
    max-width: 140px;
    overflow: hidden;
    color: #526477;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-cell[b-5h4k0dapjp] {
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-cell > span[b-5h4k0dapjp] {
    width: 64px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.progress-cell i[b-5h4k0dapjp] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1596ae;
}

.progress-cell strong[b-5h4k0dapjp] {
    color: #526477;
    font-size: 10px;
}

.review-action-column[b-5h4k0dapjp] {
    width: 128px;
    min-width: 128px;
    text-align: center !important;
}

.review-actions[b-5h4k0dapjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.review-action-button[b-5h4k0dapjp] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: 14px;
    transition: 0.15s ease;
}

.review-action-button.view[b-5h4k0dapjp] {
    border-color: #cbdbea;
    background: #f2f7fb;
    color: #24618f;
}

.review-action-button.view:hover[b-5h4k0dapjp] {
    border-color: #24618f;
    background: #24618f;
    color: #fff;
}

.review-action-button.approve[b-5h4k0dapjp] {
    color: #168459;
}

.review-action-button.approve:hover[b-5h4k0dapjp] {
    border-color: #b7e4d1;
    background: #e8f7f0;
}

.review-action-button.reject[b-5h4k0dapjp] {
    color: #cf3c45;
}

.review-action-button.reject:hover[b-5h4k0dapjp] {
    border-color: #f1c4c8;
    background: #fff0f1;
}

.review-action-button:disabled[b-5h4k0dapjp] {
    cursor: wait;
    opacity: 0.5;
}

.review-empty[b-5h4k0dapjp],
.review-empty-cell[b-5h4k0dapjp] {
    color: #8492a6;
    text-align: center;
}

.review-empty[b-5h4k0dapjp] {
    padding: 56px 20px;
}

.review-empty h4[b-5h4k0dapjp] {
    margin: 8px 0 3px;
    color: #607185;
    font-size: 14px;
}

.review-empty p[b-5h4k0dapjp] {
    margin: 0;
    font-size: 11px;
}

.review-empty i[b-5h4k0dapjp] {
    font-size: 32px;
    opacity: 0.55;
}

.review-empty-cell[b-5h4k0dapjp] {
    height: 190px !important;
}

.review-empty-cell i[b-5h4k0dapjp],
.review-empty-cell strong[b-5h4k0dapjp],
.review-empty-cell span[b-5h4k0dapjp] {
    display: block;
}

.review-empty-cell i[b-5h4k0dapjp] {
    margin-bottom: 7px;
    font-size: 27px;
    opacity: 0.55;
}

.review-empty-cell strong[b-5h4k0dapjp] {
    color: #607185;
    font-size: 13px;
}

.review-empty-cell span[b-5h4k0dapjp] {
    margin-top: 3px;
    font-size: 10px;
}

.review-footer[b-5h4k0dapjp] {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-top: 1px solid #e3eaf1;
    background: #fff;
    color: #748294;
    font-size: 10px;
}

.modal-overlay[b-5h4k0dapjp] {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.48);
}

.review-modal[b-5h4k0dapjp] {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
}

.review-modal-header[b-5h4k0dapjp],
.review-modal-footer[b-5h4k0dapjp] {
    padding: 14px 18px;
}

.review-modal-header[b-5h4k0dapjp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.review-modal-header h4[b-5h4k0dapjp] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
}

.review-modal-header p[b-5h4k0dapjp] {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.review-modal-close[b-5h4k0dapjp] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
}

.review-modal-close:hover[b-5h4k0dapjp] {
    background: #f8fafc;
}

.review-modal-body[b-5h4k0dapjp] {
    padding: 16px 18px;
    overflow-y: auto;
}

.modal-loading[b-5h4k0dapjp],
.modal-inline-empty[b-5h4k0dapjp] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #718196;
    font-size: 12px;
}

.detail-grid[b-5h4k0dapjp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    background: #f8fafc;
}

.detail-field[b-5h4k0dapjp] {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid #e4eaf0;
    border-bottom: 1px solid #e4eaf0;
}

.detail-field:nth-child(2n)[b-5h4k0dapjp] {
    border-right: 0;
}

.detail-field:nth-last-child(-n + 2)[b-5h4k0dapjp] {
    border-bottom: 0;
}

.detail-field > span[b-5h4k0dapjp],
.detail-section-title[b-5h4k0dapjp],
.detail-row > div span[b-5h4k0dapjp] {
    display: block;
    color: #718196;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.detail-field > strong[b-5h4k0dapjp] {
    display: block;
    margin-top: 4px;
    color: #26384a;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.detail-section-title[b-5h4k0dapjp] {
    margin: 14px 0 7px;
}

.detail-list[b-5h4k0dapjp] {
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
}

.detail-row[b-5h4k0dapjp] {
    padding: 10px 12px;
    border-bottom: 1px solid #e7edf3;
    background: #fff;
}

.detail-row:last-child[b-5h4k0dapjp] {
    border-bottom: 0;
}

.detail-row > div[b-5h4k0dapjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.detail-row > div strong[b-5h4k0dapjp] {
    color: #245c86;
    font-size: 11px;
}

.detail-row p[b-5h4k0dapjp],
.detail-copy p[b-5h4k0dapjp] {
    margin: 5px 0 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.detail-copy[b-5h4k0dapjp] {
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    background: #fff;
    padding: 11px 12px;
}

.detail-copy > strong[b-5h4k0dapjp] {
    color: #26384a;
    font-size: 13px;
}

.review-modal-footer[b-5h4k0dapjp] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #e2e8f0;
}

.review-modal-footer .btn[b-5h4k0dapjp] {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1020px) {
    .review-employee-filter[b-5h4k0dapjp] {
        flex-basis: 280px;
    }
}

@media (max-width: 760px) {
    .review-page-header .page-header-right[b-5h4k0dapjp],
    .review-employee-filter[b-5h4k0dapjp],
    .review-mode-toggle[b-5h4k0dapjp],
    .review-status-filters[b-5h4k0dapjp] {
        width: 100%;
    }

    .review-employee-filter[b-5h4k0dapjp] {
        flex-basis: 100%;
    }

    .review-status-filters[b-5h4k0dapjp] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .status-filter[b-5h4k0dapjp] {
        flex: 0 0 auto;
    }

    .selected-employee-pending[b-5h4k0dapjp] {
        display: none;
    }

    .review-footer[b-5h4k0dapjp] {
        align-items: flex-start;
        flex-direction: column;
    }

    .modal-overlay[b-5h4k0dapjp] {
        align-items: flex-start;
        padding: 10px;
    }

    .detail-grid[b-5h4k0dapjp] {
        grid-template-columns: 1fr;
    }

    .detail-field[b-5h4k0dapjp],
    .detail-field:nth-child(2n)[b-5h4k0dapjp],
    .detail-field:nth-last-child(-n + 2)[b-5h4k0dapjp] {
        border-right: 0;
        border-bottom: 1px solid #e4eaf0;
    }

    .detail-field:last-child[b-5h4k0dapjp] {
        border-bottom: 0;
    }

    .review-modal-header[b-5h4k0dapjp],
    .review-modal-body[b-5h4k0dapjp],
    .review-modal-footer[b-5h4k0dapjp] {
        padding-left: 13px;
        padding-right: 13px;
    }
}
/* /Areas/HRManagment/Pages/ReimbursementManagement/ExpenseCategoryMaster.razor.rz.scp.css */
.reimbursement-master-form[b-5q6x6pxdud] {
    padding: 18px;
}

.form-section-title[b-5q6x6pxdud] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.section-icon[b-5q6x6pxdud] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef4ff;
    color: #2563eb;
}

.reimbursement-master-form .form-label[b-5q6x6pxdud] {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.reimbursement-master-form .form-control[b-5q6x6pxdud] {
    min-height: 40px;
    border-color: #d7deea;
    font-size: 13px;
}

.reimbursement-master-form .form-control:focus[b-5q6x6pxdud] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.master-form-actions[b-5q6x6pxdud] {
    display: flex;
    gap: 8px;
}

.grid-action-icons[b-5q6x6pxdud] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.grid-icon-btn[b-5q6x6pxdud] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7deea;
    border-radius: 6px;
    background: #fff;
    color: #2563eb;
    line-height: 1;
}

.grid-icon-btn:hover[b-5q6x6pxdud] {
    background: #eef4ff;
    border-color: #b8c7ee;
}

.grid-icon-btn.danger[b-5q6x6pxdud] {
    color: #dc2626;
}

.grid-icon-btn.danger:hover[b-5q6x6pxdud] {
    background: #fef2f2;
    border-color: #fecaca;
}
/* /Areas/HRManagment/Pages/ReimbursementManagement/ReimbursementApproval.razor.rz.scp.css */
.reimbursement-approval-toolbar[b-tc1ieyd9o4] {
    padding: 18px;
}

.reimbursement-approval-toolbar .form-label[b-tc1ieyd9o4] {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.reimbursement-approval-toolbar .form-control[b-tc1ieyd9o4] {
    min-height: 40px;
    border-color: #d7deea;
    font-size: 13px;
}

.reimbursement-approval-toolbar .form-control:focus[b-tc1ieyd9o4] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.search-input-wrap[b-tc1ieyd9o4] {
    position: relative;
}

.search-input-wrap i[b-tc1ieyd9o4] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

.search-input-wrap .form-control[b-tc1ieyd9o4] {
    padding-left: 40px;
}

.metric-tile[b-tc1ieyd9o4] {
    min-height: 58px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    display: grid;
    align-content: center;
}

.metric-tile span[b-tc1ieyd9o4] {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
}

.metric-tile strong[b-tc1ieyd9o4] {
    font-size: 20px;
    color: #0f172a;
    line-height: 1.1;
}

.metric-tile.pending[b-tc1ieyd9o4] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.employee-cell[b-tc1ieyd9o4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 170px;
    font-weight: 700;
    color: #0f172a;
}

.employee-avatar[b-tc1ieyd9o4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0ecff;
    color: #0f4386;
    font-size: 12px;
    font-weight: 800;
}

.status-pill[b-tc1ieyd9o4] {
    display: inline-flex;
    align-items: center;
    min-width: 86px;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
}

.status-submitted[b-tc1ieyd9o4] {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.status-approved[b-tc1ieyd9o4] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.status-rejected[b-tc1ieyd9o4] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.status-cancelled[b-tc1ieyd9o4] {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.status-draft[b-tc1ieyd9o4] {
    background: #eef4ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.expense-summary-list[b-tc1ieyd9o4] {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #475569;
}

.expense-summary-item[b-tc1ieyd9o4] {
    display: grid;
    grid-template-columns: 54px minmax(90px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.expense-summary-item strong[b-tc1ieyd9o4] {
    color: #0f172a;
    font-weight: 700;
}

.grid-action-icons[b-tc1ieyd9o4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.grid-icon-btn[b-tc1ieyd9o4] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7deea;
    border-radius: 6px;
    background: #fff;
    color: #2563eb;
    line-height: 1;
}

.grid-icon-btn:hover[b-tc1ieyd9o4] {
    background: #eef4ff;
    border-color: #b8c7ee;
}

.grid-icon-btn.primary[b-tc1ieyd9o4] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #0f4386;
}

.grid-icon-btn.primary:hover[b-tc1ieyd9o4] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.grid-icon-btn.success[b-tc1ieyd9o4] {
    color: #047857;
}

.grid-icon-btn.success:hover[b-tc1ieyd9o4] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.grid-icon-btn.danger[b-tc1ieyd9o4] {
    color: #dc2626;
}

.grid-icon-btn.danger:hover[b-tc1ieyd9o4] {
    background: #fef2f2;
    border-color: #fecaca;
}

.grid-icon-btn.warning[b-tc1ieyd9o4] {
    color: #b45309;
}

.grid-icon-btn.warning:hover[b-tc1ieyd9o4] {
    background: #fffbeb;
    border-color: #fde68a;
}

.approval-modal-backdrop[b-tc1ieyd9o4] {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.approval-modal[b-tc1ieyd9o4] {
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
}

.approval-modal-header[b-tc1ieyd9o4] {
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.approval-modal-header h3[b-tc1ieyd9o4] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
}

.approval-modal-header p[b-tc1ieyd9o4] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.modal-close-btn[b-tc1ieyd9o4] {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover[b-tc1ieyd9o4] {
    background: #f8fafc;
}

.approval-modal-body[b-tc1ieyd9o4] {
    padding: 20px 22px;
    overflow-y: auto;
}

.review-summary[b-tc1ieyd9o4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.review-summary > div[b-tc1ieyd9o4] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 4px;
}

.review-summary span[b-tc1ieyd9o4] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.review-summary strong[b-tc1ieyd9o4] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.review-detail-list[b-tc1ieyd9o4] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.review-detail-row[b-tc1ieyd9o4] {
    display: grid;
    grid-template-columns: 100px 140px minmax(150px, 1fr) 90px 140px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
}

.review-detail-row:last-child[b-tc1ieyd9o4] {
    border-bottom: 0;
}

.review-detail-row strong[b-tc1ieyd9o4] {
    color: #0f172a;
}

.review-detail-row b[b-tc1ieyd9o4] {
    text-align: right;
    color: #0f172a;
}

.action-remark-box[b-tc1ieyd9o4] {
    margin-top: 18px;
}

.action-remark-box textarea[b-tc1ieyd9o4] {
    resize: vertical;
    min-height: 94px;
}

.action-remark-box small[b-tc1ieyd9o4] {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.approval-modal-footer[b-tc1ieyd9o4] {
    padding: 14px 22px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .approval-modal-backdrop[b-tc1ieyd9o4] {
        padding: 12px;
        align-items: flex-start;
    }

    .review-summary[b-tc1ieyd9o4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-detail-row[b-tc1ieyd9o4] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .review-detail-row b[b-tc1ieyd9o4] {
        text-align: left;
    }
}
/* /Areas/HRManagment/Pages/TimesheetManagement/TimesheetReport.razor.rz.scp.css */
.timesheet-report-toolbar[b-6whoruaqty] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.timesheet-report-toolbar .btn[b-6whoruaqty] {
    min-width: 140px;
}

.timesheet-report-section-scroll[b-6whoruaqty] {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

.timesheet-report-grid[b-6whoruaqty] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.timesheet-report-grid[b-6whoruaqty]  .e-grid {
    width: max-content !important;
    min-width: 100%;
    overflow: hidden !important;
}

.timesheet-report-grid[b-6whoruaqty]  .e-gridheader,
.timesheet-report-grid[b-6whoruaqty]  .e-gridcontent,
.timesheet-report-grid[b-6whoruaqty]  .e-headercontent,
.timesheet-report-grid[b-6whoruaqty]  .e-content {
    overflow-x: hidden !important;
}

.timesheet-report-grid[b-6whoruaqty]  .e-gridcontent {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.timesheet-report-grid[b-6whoruaqty]  .e-table {
    min-width: 1650px;
    width: max-content !important;
}

@media (max-width: 992px) {
    .timesheet-report-toolbar .btn[b-6whoruaqty] {
        flex: 1 1 180px;
    }
}

@media (max-width: 576px) {
    .timesheet-report-toolbar[b-6whoruaqty] {
        flex-direction: column;
    }

    .timesheet-report-toolbar .btn[b-6whoruaqty] {
        width: 100%;
        min-width: 100%;
    }
}
/* /Areas/IPOManagement/Layout/IPOLayout.razor.rz.scp.css */
.ipo-layout[b-nbd5pjhi1t] {
    display: flex;
    height: 100vh;
}

.sidebar[b-nbd5pjhi1t] {
    width: 200px;
    background-color: #1A4D8F;
    color: white;
}

    .sidebar ul[b-nbd5pjhi1t] {
        list-style: none;
        padding: 0px 1px;
        margin: 0;
    }

    .sidebar li[b-nbd5pjhi1t] {
        margin: 1px 0;
        background-color: #52a377;
        padding: 10px;
    }

        .sidebar li a[b-nbd5pjhi1t] {
            color: white;
            text-decoration: none;
        }

            .sidebar li a:hover[b-nbd5pjhi1t] {
                color: #ffd800;
            }


    .sidebar img[b-nbd5pjhi1t] {
        margin: 10px 10px;
    }

.main-content[b-nbd5pjhi1t] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topbar[b-nbd5pjhi1t] {
    background-color: #1A4D8F;
    color: white;
    padding: 5px 10px;
}

.content-body[b-nbd5pjhi1t] {
    flex: 1;
    padding: 20px;
    background-color: #ecf0f1;
}
/* /Layout/AgentWidget.razor.rz.scp.css */
.agent-widget[b-h0zolfxa4a] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: 'DM Sans', 'Manrope', system-ui, -apple-system, sans-serif;
}

.agent-bubble[b-h0zolfxa4a] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1a1f3c 0%, #2d3561 60%, #1a1f3c 100%);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .28);
    cursor: pointer;
    transition: transform .15s ease;
}

.agent-bubble:hover[b-h0zolfxa4a] {
    transform: translateY(-2px);
}

.agent-panel[b-h0zolfxa4a] {
    width: min(340px, calc(100vw - 48px));
    max-height: min(480px, calc(100vh - 120px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agent-panel-header[b-h0zolfxa4a] {
    background: linear-gradient(135deg, #1a1f3c 0%, #2d3561 60%, #1a1f3c 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agent-panel-title[b-h0zolfxa4a] {
    font-weight: 700;
    font-size: 14px;
}

.agent-panel-subtitle[b-h0zolfxa4a] {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
}

.agent-panel-close[b-h0zolfxa4a] {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.agent-panel-messages[b-h0zolfxa4a] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 160px;
}

.agent-empty-hint[b-h0zolfxa4a] {
    color: #64748b;
    font-size: 12px;
    margin-bottom: 10px;
}

.agent-quick-actions[b-h0zolfxa4a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-quick-action[b-h0zolfxa4a] {
    text-align: left;
    background: #F0F2F7;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #1a1f3c;
    cursor: pointer;
}

.agent-quick-action:hover[b-h0zolfxa4a] {
    background: #e6e9f2;
}

.agent-msg-row[b-h0zolfxa4a] {
    margin-bottom: 8px;
    display: flex;
}

.agent-msg-user[b-h0zolfxa4a] {
    justify-content: flex-end;
}

.agent-msg-bot[b-h0zolfxa4a] {
    justify-content: flex-start;
}

.agent-msg-bubble[b-h0zolfxa4a] {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
}

.agent-msg-user .agent-msg-bubble[b-h0zolfxa4a] {
    background: #4C6EF5;
    color: #fff;
}

.agent-msg-bot .agent-msg-bubble[b-h0zolfxa4a] {
    background: #F0F2F7;
    color: #1a1f3c;
}

.agent-thinking[b-h0zolfxa4a] {
    color: #64748b;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.agent-spinner[b-h0zolfxa4a] {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(76,110,245,0.25);
    border-top-color: #4C6EF5;
    border-radius: 50%;
    display: inline-block;
    animation: agentSpin .8s linear infinite;
}

@@keyframes agentSpin {
    to[b-h0zolfxa4a] { transform: rotate(360deg); }
}

.agent-panel-input[b-h0zolfxa4a] {
    border-top: 1px solid #F0F2F7;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
}

.agent-panel-input .form-control[b-h0zolfxa4a] {
    font-size: 13px;
}

.agent-send-btn[b-h0zolfxa4a] {
    background: #4C6EF5;
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.agent-send-btn:disabled[b-h0zolfxa4a],
.agent-quick-action:disabled[b-h0zolfxa4a] {
    opacity: .6;
    cursor: not-allowed;
}

@@media (max-width: 575px) {
    .agent-widget[b-h0zolfxa4a] {
        right: 14px;
        bottom: 14px;
    }
}
/* /Layout/CrmNavMenu.razor.rz.scp.css */
/* /Layout/DashboardAiWidget.razor.rz.scp.css */
.dashboard-ai-widget[b-oyk3p9xx3f] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 4200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: 'DM Sans', 'Manrope', system-ui, -apple-system, sans-serif;
}

.dashboard-ai-bubble[b-oyk3p9xx3f] {
    min-width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.dashboard-ai-bubble i[b-oyk3p9xx3f] {
    font-size: 21px;
}

.dashboard-ai-bubble:hover[b-oyk3p9xx3f] {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
}

.dashboard-ai-panel[b-oyk3p9xx3f] {
    width: min(390px, calc(100vw - 36px));
    max-height: min(560px, calc(100vh - 108px));
    background: #ffffff;
    color: #172033;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-ai-panel-header[b-oyk3p9xx3f] {
    background: #0f766e;
    color: #ffffff;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-ai-title[b-oyk3p9xx3f] {
    font-size: 14px;
    font-weight: 900;
}

.dashboard-ai-subtitle[b-oyk3p9xx3f] {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, .78);
}

.dashboard-ai-close[b-oyk3p9xx3f] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-ai-messages[b-oyk3p9xx3f] {
    flex: 1 1 auto;
    min-height: 230px;
    overflow-y: auto;
    padding: 14px;
    background: #f7f9fc;
}

.dashboard-ai-empty[b-oyk3p9xx3f] {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 10px;
}

.dashboard-ai-actions[b-oyk3p9xx3f] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dashboard-ai-actions button[b-oyk3p9xx3f] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-ai-actions button:hover[b-oyk3p9xx3f] {
    background: #eef6f5;
    border-color: #99c7c1;
}

.dashboard-ai-msg-row[b-oyk3p9xx3f] {
    display: flex;
    margin-bottom: 9px;
}

.dashboard-ai-msg-user[b-oyk3p9xx3f] {
    justify-content: flex-end;
}

.dashboard-ai-msg-bot[b-oyk3p9xx3f] {
    justify-content: flex-start;
}

.dashboard-ai-msg-bubble[b-oyk3p9xx3f] {
    max-width: 88%;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13px;
    line-height: 1.42;
    white-space: pre-wrap;
}

.dashboard-ai-msg-user .dashboard-ai-msg-bubble[b-oyk3p9xx3f] {
    background: #0f766e;
    color: #ffffff;
}

.dashboard-ai-msg-bot .dashboard-ai-msg-bubble[b-oyk3p9xx3f] {
    background: #ffffff;
    color: #172033;
    border: 1px solid #e2e8f0;
}

.dashboard-ai-result-meta[b-oyk3p9xx3f] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.dashboard-ai-result-meta span[b-oyk3p9xx3f] {
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    padding: 2px 7px;
    color: #475569;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-ai-warning[b-oyk3p9xx3f] {
    margin-top: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    font-size: 11px;
    font-weight: 700;
}

.dashboard-ai-result-list[b-oyk3p9xx3f] {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.dashboard-ai-result-list article[b-oyk3p9xx3f] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    background: #fbfdff;
    display: grid;
    gap: 3px;
}

.dashboard-ai-result-list strong[b-oyk3p9xx3f] {
    font-size: 12px;
    color: #0f172a;
}

.dashboard-ai-result-list span[b-oyk3p9xx3f],
.dashboard-ai-result-list small[b-oyk3p9xx3f],
.dashboard-ai-more[b-oyk3p9xx3f] {
    color: #64748b;
    font-size: 11px;
}

.dashboard-ai-result-list small[b-oyk3p9xx3f] {
    display: block;
}

.dashboard-ai-thinking[b-oyk3p9xx3f] {
    color: #64748b;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.dashboard-ai-spinner[b-oyk3p9xx3f] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(15, 118, 110, .25);
    border-top-color: #0f766e;
    border-radius: 50%;
    animation: dashboardAiSpin-b-oyk3p9xx3f .8s linear infinite;
}

@keyframes dashboardAiSpin-b-oyk3p9xx3f {
    to { transform: rotate(360deg); }
}

.dashboard-ai-input[b-oyk3p9xx3f] {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.dashboard-ai-input input[b-oyk3p9xx3f] {
    min-width: 0;
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}

.dashboard-ai-input input:focus[b-oyk3p9xx3f] {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.dashboard-ai-input button[b-oyk3p9xx3f] {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-ai-input button:disabled[b-oyk3p9xx3f],
.dashboard-ai-actions button:disabled[b-oyk3p9xx3f] {
    opacity: .62;
    cursor: not-allowed;
}

@media (max-width: 575px) {
    .dashboard-ai-widget[b-oyk3p9xx3f] {
        right: 12px;
        bottom: 12px;
    }

    .dashboard-ai-bubble span[b-oyk3p9xx3f] {
        display: none;
    }
}
/* /Layout/DefaultLayout.razor.rz.scp.css */
/* /Layout/EmployeeMenu.razor.rz.scp.css */
.navbar-toggler[b-t1zpf7boyu] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-t1zpf7boyu] {
    min-height: 3.5rem;
    background-color: rgb(37,149,216);
}

.navbar-brand[b-t1zpf7boyu] {
    font-size: 1.1rem;
}

.bi[b-t1zpf7boyu] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-t1zpf7boyu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-t1zpf7boyu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-t1zpf7boyu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-t1zpf7boyu] {
    font-size: 0.9rem;
    padding-bottom: 0px;
}

    .nav-item:first-of-type[b-t1zpf7boyu] {
        padding-top: 2px;
    }

    .nav-item:last-of-type[b-t1zpf7boyu] {
        padding-bottom: 1rem;
    }

    .nav-item[b-t1zpf7boyu]  a {
        color: #d7d7d7;
        border-radius: 2px;
        height: 2.5rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-t1zpf7boyu]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-t1zpf7boyu]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-t1zpf7boyu] {
        display: none;
    }

    .collapse[b-t1zpf7boyu] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-t1zpf7boyu] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* /Layout/TopBar.razor.rz.scp.css */
.notification-btn[b-a7hnjx5r5v] {
    position: relative;
    border: none;
    background: transparent;
}

.notification-badge[b-a7hnjx5r5v] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: red;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    padding: 2px 6px;
}

.notification-wrapper[b-a7hnjx5r5v] {
    display: flex;
    align-items: center;
}


.notification-wrapper[b-a7hnjx5r5v] {
    position: relative;
}

.notification-dropdown[b-a7hnjx5r5v] {
    position: absolute;
    top: 40px;
    right: 0;
    width: 300px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    padding: 10px 0;
}

.notification-item[b-a7hnjx5r5v] {
    padding: 10px 15px;
    cursor: pointer;
}

    .notification-item:hover[b-a7hnjx5r5v] {
        background: #f5f7fb;
    }
.notification-header[b-a7hnjx5r5v] {
    font-weight: 600;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

/* ── Priority alert modal (e.g. new lead assigned) ───────────────────── */
.urgent-notification-overlay[b-a7hnjx5r5v] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
}

.urgent-notification-card[b-a7hnjx5r5v] {
    width: min(420px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.urgent-notification-header[b-a7hnjx5r5v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: #b42318;
    color: #fff;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.urgent-notification-body[b-a7hnjx5r5v] {
    padding: 10px 0;
}

.urgent-notification-row[b-a7hnjx5r5v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
}

    .urgent-notification-row:last-child[b-a7hnjx5r5v] {
        border-bottom: none;
    }

.urgent-notification-title[b-a7hnjx5r5v] {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.urgent-notification-message[b-a7hnjx5r5v] {
    font-size: 13px;
    color: #4b5563;
    margin-top: 2px;
}

.urgent-notification-actions[b-a7hnjx5r5v] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-urgent-view[b-a7hnjx5r5v],
.btn-urgent-dismiss[b-a7hnjx5r5v] {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.btn-urgent-view[b-a7hnjx5r5v] {
    background: #b42318;
    color: #fff;
}

.btn-urgent-dismiss[b-a7hnjx5r5v] {
    background: #f3f4f6;
    color: #374151;
}
/* /Pages/Accounts/ForgotPassword.razor.rz.scp.css */
.recovery-page[b-n3qvlbjrc0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 74% 18%, rgba(214, 47, 127, .08), transparent 28%),
        radial-gradient(circle at 86% 86%, rgba(247, 148, 30, .08), transparent 30%),
        #eef2f7;
    color: #0f172a;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    padding: 24px;
}

.recovery-panel[b-n3qvlbjrc0] {
    width: min(460px, 100%);
}

.recovery-card[b-n3qvlbjrc0] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .14);
    padding: 40px;
}

.form-brand[b-n3qvlbjrc0] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #edf1f7;
    margin-bottom: 28px;
    padding-bottom: 24px;
}

.form-brand img[b-n3qvlbjrc0] {
    display: block;
    width: 235px;
    max-width: 100%;
    height: auto;
}

.recovery-heading span[b-n3qvlbjrc0] {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    color: #d62f7f;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.recovery-heading h2[b-n3qvlbjrc0] {
    color: #0f172a;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.recovery-heading p[b-n3qvlbjrc0] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
    margin: 10px 0 28px;
    text-align: center;
}

.recovery-form[b-n3qvlbjrc0] {
    display: grid;
    gap: 18px;
}

.recovery-field[b-n3qvlbjrc0] {
    display: grid;
    gap: 8px;
}

.recovery-field label[b-n3qvlbjrc0] {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.recovery-field[b-n3qvlbjrc0]  .e-input-group,
.recovery-field[b-n3qvlbjrc0]  .e-control-wrapper {
    border: 1px solid #dbe3ef !important;
    border-radius: 7px !important;
    background: #fbfdff !important;
    min-height: 48px;
}

.recovery-field[b-n3qvlbjrc0]  input.e-input {
    color: #0f172a !important;
    font-weight: 700;
    min-height: 46px;
}

.recovery-field[b-n3qvlbjrc0]  .validation-message {
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
}

.recovery-actions[b-n3qvlbjrc0] {
    display: flex;
    justify-content: center;
}

[b-n3qvlbjrc0] .recovery-submit.e-btn {
    min-width: 170px;
    min-height: 42px;
    border: 0 !important;
    border-radius: 7px !important;
    background: #0f4386 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 850;
    padding: 0 26px !important;
    box-shadow: 0 10px 20px rgba(15, 67, 134, .22);
}

[b-n3qvlbjrc0] .recovery-submit.e-btn:hover,
[b-n3qvlbjrc0] .recovery-submit.e-btn:focus {
    background: #0a366f !important;
}

.recovery-alert[b-n3qvlbjrc0] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    padding: 11px 12px;
}

.recovery-alert.success[b-n3qvlbjrc0] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.recovery-alert.error[b-n3qvlbjrc0] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.recovery-footer[b-n3qvlbjrc0] {
    margin-top: 18px;
    text-align: center;
}

.recovery-footer a[b-n3qvlbjrc0] {
    color: #0f4386;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.recovery-footer a:hover[b-n3qvlbjrc0],
.recovery-footer a:focus[b-n3qvlbjrc0] {
    color: #d62f7f;
    text-decoration: underline;
}

@media (max-width: 520px) {
    .recovery-page[b-n3qvlbjrc0] {
        padding: 16px;
    }

    .recovery-card[b-n3qvlbjrc0] {
        padding: 24px;
    }

    .recovery-heading h2[b-n3qvlbjrc0] {
        font-size: 24px;
    }
}
/* /Pages/Accounts/LoginPage.razor.rz.scp.css */
.login-page[b-yd9f40bl8s] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(460px, 46vw) minmax(460px, 1fr);
    background:
        radial-gradient(circle at 74% 18%, rgba(214, 47, 127, .08), transparent 28%),
        radial-gradient(circle at 86% 86%, rgba(247, 148, 30, .08), transparent 30%),
        #eef2f7;
    color: #0f172a;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.login-visual[b-yd9f40bl8s] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: 42px;
    overflow: hidden;
    background: url("/images/stock.jpg") center/cover no-repeat;
}

.login-visual[b-yd9f40bl8s]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(8, 15, 28, .42);
}

.visual-badge[b-yd9f40bl8s] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .20);
    background: rgba(15, 23, 42, .74);
    padding: 10px 13px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .18);
}

.visual-badge i[b-yd9f40bl8s] {
    color: #f7941e;
    font-size: 16px;
}

.visual-copy[b-yd9f40bl8s] {
    max-width: 560px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(9, 17, 32, .78);
    box-shadow: 0 22px 56px rgba(2, 6, 23, .30);
    padding: 28px;
    backdrop-filter: blur(6px);
}

.visual-kicker[b-yd9f40bl8s] {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 7px 12px;
    margin-bottom: 18px;
}

.visual-copy h1[b-yd9f40bl8s] {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    font-weight: 850;
    line-height: 1.08;
    text-shadow: 0 2px 10px rgba(2, 6, 23, .65);
}

.visual-copy p[b-yd9f40bl8s] {
    max-width: 500px;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.7;
    margin: 18px 0 0;
    text-shadow: 0 1px 8px rgba(2, 6, 23, .58);
}

.visual-stats[b-yd9f40bl8s] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.visual-stats div[b-yd9f40bl8s] {
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 8px;
    background: rgba(9, 17, 32, .72);
    backdrop-filter: blur(6px);
    padding: 14px;
}

.visual-stats span[b-yd9f40bl8s] {
    display: block;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.visual-stats strong[b-yd9f40bl8s] {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.login-panel[b-yd9f40bl8s] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 56px;
}

.login-card[b-yd9f40bl8s] {
    width: min(460px, 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .14);
    padding: 40px;
}

.form-brand[b-yd9f40bl8s] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #edf1f7;
    margin-bottom: 28px;
    padding-bottom: 24px;
}

.form-brand img[b-yd9f40bl8s] {
    display: block;
    width: 235px;
    max-width: 100%;
    height: auto;
}

.login-heading span[b-yd9f40bl8s] {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    color: #d62f7f;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.login-heading h2[b-yd9f40bl8s] {
    color: #0f172a;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.login-heading p[b-yd9f40bl8s] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
    margin: 10px 0 28px;
    text-align: center;
}

.login-form[b-yd9f40bl8s] {
    display: grid;
    gap: 18px;
}

.login-field[b-yd9f40bl8s] {
    display: grid;
    gap: 8px;
}

.login-field label[b-yd9f40bl8s] {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.login-field[b-yd9f40bl8s]  .e-input-group,
.login-field[b-yd9f40bl8s]  .e-control-wrapper {
    border: 1px solid #dbe3ef !important;
    border-radius: 7px !important;
    background: #fbfdff !important;
    min-height: 48px;
}

.login-field[b-yd9f40bl8s]  .e-input-group .e-input,
.login-field[b-yd9f40bl8s]  .e-control-wrapper .e-input {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.login-field[b-yd9f40bl8s]  .e-input-group.e-input-focus,
.login-field[b-yd9f40bl8s]  .e-control-wrapper.e-input-focus {
    border-color: #0f4386 !important;
    box-shadow: 0 0 0 3px rgba(15, 67, 134, .13) !important;
    background: #fff !important;
}

.login-field[b-yd9f40bl8s]  input.e-input {
    color: #0f172a !important;
    font-weight: 700;
    min-height: 46px;
}

.login-field[b-yd9f40bl8s]  .validation-message {
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
}

.login-options[b-yd9f40bl8s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    margin-top: 0;
    margin-bottom: 2px;
}

.login-options[b-yd9f40bl8s]  .e-label {
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    line-height: 20px;
    padding-left: 8px;
}

.login-options[b-yd9f40bl8s]  .e-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
}

.login-options[b-yd9f40bl8s]  .e-frame {
    width: 18px;
    height: 18px;
}

.forgot-password-link[b-yd9f40bl8s] {
    color: #0f4386;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.forgot-password-link:hover[b-yd9f40bl8s],
.forgot-password-link:focus[b-yd9f40bl8s] {
    color: #d62f7f;
    text-decoration: underline;
}

.login-actions[b-yd9f40bl8s] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.privacy-note[b-yd9f40bl8s] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.privacy-note a[b-yd9f40bl8s] {
    color: #0f4386;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-note a:hover[b-yd9f40bl8s],
.privacy-note a:focus[b-yd9f40bl8s] {
    color: #d62f7f;
}

[b-yd9f40bl8s] .login-submit.e-btn {
    width: auto;
    min-width: 150px;
    min-height: 42px;
    border: 0 !important;
    border-radius: 7px !important;
    background: #0f4386 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 850;
    padding: 0 26px !important;
    box-shadow: 0 10px 20px rgba(15, 67, 134, .22);
}

[b-yd9f40bl8s] .login-submit.e-btn:hover,
[b-yd9f40bl8s] .login-submit.e-btn:focus {
    background: #0a366f !important;
}

[b-yd9f40bl8s] .login-submit.e-btn:disabled {
    opacity: .72;
    box-shadow: none;
}

.login-alert[b-yd9f40bl8s] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff1f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    padding: 11px 12px;
}

.login-alert i[b-yd9f40bl8s] {
    font-size: 15px;
    line-height: 1.45;
}

.login-loading[b-yd9f40bl8s] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
}

.login-loading-card[b-yd9f40bl8s] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
    padding: 18px 20px;
}

.login-spinner[b-yd9f40bl8s] {
    width: 28px;
    height: 28px;
    border: 3px solid #dbeafe;
    border-top-color: #0f4386;
    border-radius: 50%;
    animation: loginSpin-b-yd9f40bl8s .8s linear infinite;
}

.login-loading-title[b-yd9f40bl8s] {
    color: #0f172a;
    font-weight: 850;
}

.login-loading-subtitle[b-yd9f40bl8s] {
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

@keyframes loginSpin-b-yd9f40bl8s {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .login-page[b-yd9f40bl8s] {
        grid-template-columns: 1fr;
    }

    .login-visual[b-yd9f40bl8s] {
        display: none;
    }

    .login-panel[b-yd9f40bl8s] {
        min-height: 100vh;
        padding: 24px;
    }

    .form-brand[b-yd9f40bl8s] {
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .login-panel[b-yd9f40bl8s] {
        padding: 16px;
    }

    .login-card[b-yd9f40bl8s] {
        padding: 24px;
    }

    .login-heading h2[b-yd9f40bl8s] {
        font-size: 24px;
    }
}
/* /Pages/Accounts/PrivacyPolicy.razor.rz.scp.css */
.privacy-page[b-s09kpyjfya] {
    min-height: 100vh;
    padding: 42px 20px;
    background:
        radial-gradient(circle at 12% 4%, rgba(214, 47, 127, .08), transparent 28%),
        radial-gradient(circle at 92% 92%, rgba(15, 67, 134, .10), transparent 32%),
        #eef2f7;
    color: #0f172a;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.privacy-card[b-s09kpyjfya] {
    width: min(940px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(15, 23, 42, .12);
}

.privacy-header[b-s09kpyjfya] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 28px 32px;
    border-bottom: 1px solid #dbe3ef;
    background: linear-gradient(125deg, #edf4ff 0%, #f8fbff 52%, #fff5fa 100%);
}

.privacy-back[b-s09kpyjfya] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: #0f4386;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.privacy-back:hover[b-s09kpyjfya],
.privacy-back:focus[b-s09kpyjfya] {
    color: #d62f7f;
    text-decoration: underline;
}

.privacy-kicker[b-s09kpyjfya] {
    display: block;
    margin-bottom: 6px;
    color: #d62f7f;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.privacy-header h1[b-s09kpyjfya] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 850;
    line-height: 1.2;
}

.privacy-header p[b-s09kpyjfya] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.privacy-content[b-s09kpyjfya] {
    padding: 32px;
}

.privacy-content pre[b-s09kpyjfya] {
    margin: 0;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #334155;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
}

.privacy-loading[b-s09kpyjfya],
.privacy-error[b-s09kpyjfya] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    padding: 24px;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

.privacy-error[b-s09kpyjfya] {
    color: #b91c1c;
}

@media (max-width: 640px) {
    .privacy-page[b-s09kpyjfya] {
        padding: 0;
    }

    .privacy-card[b-s09kpyjfya] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .privacy-header[b-s09kpyjfya] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 20px;
    }

    .privacy-content[b-s09kpyjfya] {
        padding: 24px 20px;
    }
}
/* /Pages/Accounts/ResetPassword.razor.rz.scp.css */
.reset-page[b-s2sucimlaz] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 74% 18%, rgba(214, 47, 127, .08), transparent 28%),
        radial-gradient(circle at 86% 86%, rgba(247, 148, 30, .08), transparent 30%),
        #eef2f7;
    color: #0f172a;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
    padding: 24px;
}

.reset-panel[b-s2sucimlaz] {
    width: min(460px, 100%);
}

.reset-card[b-s2sucimlaz] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .14);
    padding: 40px;
}

.form-brand[b-s2sucimlaz] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #edf1f7;
    margin-bottom: 28px;
    padding-bottom: 24px;
}

.form-brand img[b-s2sucimlaz] {
    display: block;
    width: 235px;
    max-width: 100%;
    height: auto;
}

.reset-heading span[b-s2sucimlaz] {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    color: #d62f7f;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.reset-heading h2[b-s2sucimlaz] {
    color: #0f172a;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.reset-heading p[b-s2sucimlaz] {
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
    margin: 10px 0 28px;
    text-align: center;
}

.reset-form[b-s2sucimlaz] {
    display: grid;
    gap: 18px;
}

.reset-field[b-s2sucimlaz] {
    display: grid;
    gap: 8px;
}

.reset-field label[b-s2sucimlaz] {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.reset-field[b-s2sucimlaz]  .e-input-group,
.reset-field[b-s2sucimlaz]  .e-control-wrapper {
    border: 1px solid #dbe3ef !important;
    border-radius: 7px !important;
    background: #fbfdff !important;
    min-height: 48px;
}

.reset-field[b-s2sucimlaz]  input.e-input {
    color: #0f172a !important;
    font-weight: 700;
    min-height: 46px;
}

.reset-field[b-s2sucimlaz]  .validation-message {
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
}

.reset-actions[b-s2sucimlaz] {
    display: flex;
    justify-content: center;
}

[b-s2sucimlaz] .reset-submit.e-btn {
    min-width: 170px;
    min-height: 42px;
    border: 0 !important;
    border-radius: 7px !important;
    background: #0f4386 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 850;
    padding: 0 26px !important;
    box-shadow: 0 10px 20px rgba(15, 67, 134, .22);
}

[b-s2sucimlaz] .reset-submit.e-btn:hover,
[b-s2sucimlaz] .reset-submit.e-btn:focus {
    background: #0a366f !important;
}

.reset-status[b-s2sucimlaz] {
    color: #475569;
    font-size: 14px;
    font-weight: 750;
    text-align: center;
}

.reset-alert[b-s2sucimlaz] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    padding: 11px 12px;
}

.reset-alert.success[b-s2sucimlaz] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.reset-alert.error[b-s2sucimlaz] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.reset-footer[b-s2sucimlaz] {
    margin-top: 18px;
    text-align: center;
}

.reset-footer a[b-s2sucimlaz] {
    color: #0f4386;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.reset-footer a:hover[b-s2sucimlaz],
.reset-footer a:focus[b-s2sucimlaz] {
    color: #d62f7f;
    text-decoration: underline;
}

@media (max-width: 520px) {
    .reset-page[b-s2sucimlaz] {
        padding: 16px;
    }

    .reset-card[b-s2sucimlaz] {
        padding: 24px;
    }

    .reset-heading h2[b-s2sucimlaz] {
        font-size: 24px;
    }
}
/* /Pages/EmployeePayroll/EmployeePayroll.razor.rz.scp.css */
.payroll-page-header[b-3y9z7s5tvf] {
    gap: 16px;
    flex-wrap: wrap;
}

.payroll-summary[b-3y9z7s5tvf] {
    min-height: 58px;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 10px !important;
    overflow: hidden;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.payroll-summary .net-pay-item[b-3y9z7s5tvf] {
    min-width: 0;
    flex: 1 1 0;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 8px 12px;
    border-right: 1px solid #e3eaf1;
}

.payroll-summary .net-pay-item:last-child[b-3y9z7s5tvf] {
    border-right: 0;
}

.payroll-summary .net-pay-sep[b-3y9z7s5tvf] {
    display: none;
}

.payroll-summary .net-label[b-3y9z7s5tvf] {
    color: #718196;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.payroll-summary .net-value[b-3y9z7s5tvf] {
    color: #26384a;
    font-size: 14px;
    font-weight: 800;
}

.payroll-summary .net-pay-highlight[b-3y9z7s5tvf] {
    background: #edf8f5;
}

.payroll-summary .net-pay-highlight .net-value[b-3y9z7s5tvf] {
    color: #167453;
}

.payroll-grid-card[b-3y9z7s5tvf] {
    overflow: hidden;
}

.payroll-grid-toolbar[b-3y9z7s5tvf] {
    min-height: 45px;
    justify-content: flex-start;
    gap: 7px;
    padding: 8px 12px;
    color: #40566b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.payroll-grid-toolbar i[b-3y9z7s5tvf] {
    color: #24618f;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-grid {
    border: 0 !important;
    font-size: 12px;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-headercell {
    height: 42px !important;
    padding: 8px 10px !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, #0d98b4, #087c9f) !important;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-headercelldiv {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-rowcell {
    height: 50px !important;
    padding: 8px 10px !important;
    border-color: #e1e8f0 !important;
    color: #263649;
    font-size: 12px;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-row:nth-child(even) .e-rowcell {
    background: #fbfcfe;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-row:hover .e-rowcell {
    background: #f2f8fc !important;
}

.payroll-grid-card[b-3y9z7s5tvf]  .e-gridpager {
    min-height: 46px;
    border-top: 1px solid #e3eaf1 !important;
    font-size: 10px;
}

.payroll-grid-card .ep-amount[b-3y9z7s5tvf] {
    font-size: 11px;
    font-weight: 700;
}

.payroll-grid-card .ep-status[b-3y9z7s5tvf] {
    padding: 3px 8px;
    font-size: 10px;
}

.payroll-grid-card .ep-download-btn[b-3y9z7s5tvf] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 13px;
}

@media (max-width: 760px) {
    .payroll-page-header .page-header-right[b-3y9z7s5tvf] {
        width: 100%;
    }

    .payroll-summary[b-3y9z7s5tvf] {
        overflow-x: auto;
    }

    .payroll-summary .net-pay-item[b-3y9z7s5tvf] {
        min-width: 145px;
    }
}
/* /Pages/HolidayManagement/HolidayList.razor.rz.scp.css */
.holiday-page-header[b-x2bs2tna0f] {
    gap: 16px;
    flex-wrap: wrap;
}

.holiday-loading[b-x2bs2tna0f] {
    padding: 10px 12px;
}

.holiday-grid-card[b-x2bs2tna0f] {
    overflow: hidden;
}

.holiday-toolbar[b-x2bs2tna0f] {
    min-height: 48px;
    padding: 8px 12px;
}

.holiday-summary[b-x2bs2tna0f] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.holiday-summary span[b-x2bs2tna0f] {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d8e3ec;
    border-radius: 999px;
    background: #f5f9fc;
    color: #526477;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
}

.holiday-summary i[b-x2bs2tna0f] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #526477;
}

.holiday-summary .gazetted[b-x2bs2tna0f] {
    border-color: #bfe5d5;
    background: #edf9f4;
    color: #176c4d;
}

.holiday-summary .gazetted i[b-x2bs2tna0f] {
    background: #22a06b;
}

.holiday-summary .optional[b-x2bs2tna0f] {
    border-color: #f1db9b;
    background: #fff9e9;
    color: #8a570b;
}

.holiday-summary .optional i[b-x2bs2tna0f] {
    background: #e3a008;
}

.holiday-summary .sunday[b-x2bs2tna0f] {
    border-color: #f1c4c8;
    background: #fff1f2;
    color: #a12938;
}

.holiday-summary .sunday i[b-x2bs2tna0f] {
    background: #dc4c5a;
}

.holiday-fy[b-x2bs2tna0f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #718196;
    font-size: 10px;
    font-weight: 700;
}

.holiday-fy i[b-x2bs2tna0f] {
    color: #2b6a96;
}

.holiday-table-scroll[b-x2bs2tna0f] {
    width: 100%;
    max-height: calc(100vh - 235px);
    overflow: auto;
}

.holiday-table[b-x2bs2tna0f] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    color: #263649;
    font-size: 12px;
}

.holiday-table th[b-x2bs2tna0f],
.holiday-table td[b-x2bs2tna0f] {
    padding: 8px 11px;
    border-right: 1px solid #e1e8f0;
    border-bottom: 1px solid #e1e8f0;
    text-align: left;
    vertical-align: middle;
}

.holiday-table th:last-child[b-x2bs2tna0f],
.holiday-table td:last-child[b-x2bs2tna0f] {
    border-right: 0;
}

.holiday-table thead th[b-x2bs2tna0f] {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 42px;
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
}

.holiday-table tbody td[b-x2bs2tna0f] {
    height: 49px;
    background: #fff;
}

.holiday-table tbody tr:nth-child(even) td[b-x2bs2tna0f] {
    background: #fbfcfe;
}

.holiday-table tbody tr:not(.holiday-month-row):hover td[b-x2bs2tna0f] {
    background: #f2f8fc;
}

.holiday-month-row td[b-x2bs2tna0f] {
    height: 28px !important;
    padding: 5px 11px;
    background: #edf4f8 !important;
    color: #526477;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.holiday-name[b-x2bs2tna0f] {
    color: #26384a;
    font-size: 12px;
    font-weight: 700;
}

.holiday-date[b-x2bs2tna0f],
.holiday-day[b-x2bs2tna0f] {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.holiday-date[b-x2bs2tna0f] {
    color: #40566b;
}

.holiday-day.weekday[b-x2bs2tna0f] {
    color: #526477;
}

.holiday-day.saturday[b-x2bs2tna0f] {
    color: #a8660f;
}

.holiday-day.sunday[b-x2bs2tna0f] {
    color: #b42332;
}

.holiday-type[b-x2bs2tna0f] {
    display: inline-flex;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.holiday-type.gazetted[b-x2bs2tna0f] {
    background: #eaf8f2;
    color: #176c4d;
}

.holiday-type.optional[b-x2bs2tna0f] {
    background: #fff8e7;
    color: #8a570b;
}

.holiday-type.sunday[b-x2bs2tna0f] {
    background: #fff0f1;
    color: #a12938;
}

.holiday-type.other[b-x2bs2tna0f] {
    background: #f1f4f7;
    color: #526477;
}

.holiday-remark[b-x2bs2tna0f] {
    display: block;
    max-width: 360px;
    overflow: hidden;
    color: #718196;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.holiday-empty[b-x2bs2tna0f] {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #8492a6;
    padding: 30px 20px;
    text-align: center;
}

.holiday-empty i[b-x2bs2tna0f] {
    margin-bottom: 7px;
    font-size: 30px;
    opacity: 0.55;
}

.holiday-empty strong[b-x2bs2tna0f] {
    color: #607185;
    font-size: 14px;
}

.holiday-empty span[b-x2bs2tna0f] {
    margin-top: 3px;
    font-size: 10px;
}

@media (max-width: 760px) {
    .holiday-page-header .page-header-right[b-x2bs2tna0f],
    .holiday-summary[b-x2bs2tna0f] {
        width: 100%;
    }

    .holiday-toolbar[b-x2bs2tna0f] {
        align-items: flex-start;
        flex-direction: column;
    }

    .holiday-fy[b-x2bs2tna0f] {
        margin-left: 0;
    }
}
/* /Pages/PayrollInput/TeamPayrollInput.razor.rz.scp.css */
.payroll-input-page-header[b-pzd1p4v3uw] {
    gap: 16px;
    flex-wrap: wrap;
}

.payroll-input-toolbar[b-pzd1p4v3uw] {
    min-height: 50px;
    gap: 10px;
    margin-bottom: 10px;
    padding: 7px 10px;
    border-color: #dfe7ef;
    border-radius: 8px;
}

.toolbar-left[b-pzd1p4v3uw],
.toolbar-actions[b-pzd1p4v3uw] {
    gap: 6px;
}

.period-select[b-pzd1p4v3uw],
.year-input[b-pzd1p4v3uw],
.search-shell[b-pzd1p4v3uw],
.toggle-shell[b-pzd1p4v3uw] {
    min-height: 36px;
    border-color: #dce5f0;
    border-radius: 7px;
    font-size: 11px;
}

.period-select[b-pzd1p4v3uw],
.year-input[b-pzd1p4v3uw] {
    padding: 0 9px;
    font-weight: 700;
}

.search-shell[b-pzd1p4v3uw] {
    min-width: 270px;
    padding: 0 10px;
}

.search-shell input[b-pzd1p4v3uw] {
    font-size: 11px;
}

.toggle-shell[b-pzd1p4v3uw] {
    padding: 0 9px;
    font-size: 10px;
}

.primary-btn[b-pzd1p4v3uw],
.ghost-btn[b-pzd1p4v3uw] {
    min-height: 34px;
    border-radius: 7px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
}

.primary-btn[b-pzd1p4v3uw] {
    background: #087c9f;
}

.ghost-btn[b-pzd1p4v3uw] {
    background: #edf5fa;
    color: #245c86;
}

.payroll-input-grid-shell[b-pzd1p4v3uw] {
    border-color: #dfe7ef;
    border-radius: 8px;
}

.grid-scroll-shell[b-pzd1p4v3uw] {
    max-height: calc(100vh - 250px);
}

.payroll-input-grid[b-pzd1p4v3uw] {
    min-width: 1060px;
    font-size: 12px;
}

.payroll-input-grid th[b-pzd1p4v3uw] {
    position: sticky;
    z-index: 2;
    top: 0;
    height: 42px;
    padding: 8px 10px;
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.35px;
}

.payroll-input-grid td[b-pzd1p4v3uw] {
    height: 50px;
    padding: 7px 10px;
    border-color: #e1e8f0;
    color: #263649;
    font-size: 12px;
}

.payroll-input-grid tbody tr:nth-child(even) td[b-pzd1p4v3uw] {
    background: #fbfcfe;
}

.payroll-input-grid tbody tr:hover td[b-pzd1p4v3uw] {
    background: #f2f8fc;
}

.payroll-input-grid .employee-cell[b-pzd1p4v3uw] {
    gap: 1px;
}

.payroll-input-grid .employee-cell strong[b-pzd1p4v3uw] {
    max-width: 220px;
    overflow: hidden;
    color: #26384a;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-input-grid .employee-cell span[b-pzd1p4v3uw] {
    font-size: 9px;
}

.payroll-input-grid .amount-cell[b-pzd1p4v3uw] {
    font-size: 11px;
    font-weight: 700;
}

.amount-input[b-pzd1p4v3uw] {
    width: 110px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
}

.payroll-input-grid .status-pill[b-pzd1p4v3uw] {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 9px;
}

.loading-state[b-pzd1p4v3uw],
.empty-state[b-pzd1p4v3uw] {
    min-height: 190px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .payroll-input-page-header .page-header-right[b-pzd1p4v3uw] {
        width: 100%;
    }

    .payroll-input-toolbar[b-pzd1p4v3uw],
    .toolbar-left[b-pzd1p4v3uw],
    .toolbar-actions[b-pzd1p4v3uw] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* /Pages/ReimbursementManagement/ReimbursementRequest.razor.rz.scp.css */
.reimbursement-form-shell[b-2mpsott5v6] {
    padding: 18px;
}

.request-modal-backdrop[b-2mpsott5v6] {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.request-modal[b-2mpsott5v6] {
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    /* Mobile browsers resolve 100vh to the toolbar-collapsed height, so the modal
       grows past the fixed backdrop and the footer lands under the browser chrome.
       dvh tracks the visible height, and the 100% cap keeps it inside the backdrop. */
    max-height: min(calc(100dvh - 48px), 100%);
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
}

.request-modal-header[b-2mpsott5v6] {
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.request-modal-header h3[b-2mpsott5v6] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
}

.request-modal-header p[b-2mpsott5v6] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.modal-close-btn[b-2mpsott5v6] {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover[b-2mpsott5v6] {
    background: #f8fafc;
}

.request-modal-body[b-2mpsott5v6] {
    padding: 20px 22px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: #f8fafc;
}

.request-form-card[b-2mpsott5v6] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    margin-bottom: 14px;
}

.request-modal-footer[b-2mpsott5v6] {
    padding: 14px 22px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
}

.form-section-title[b-2mpsott5v6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.expense-title[b-2mpsott5v6] {
    margin-top: 20px;
}

.section-icon[b-2mpsott5v6] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef4ff;
    color: #2563eb;
}

.request-modal .form-label[b-2mpsott5v6],
.reimbursement-form-shell .form-label[b-2mpsott5v6] {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.required-star[b-2mpsott5v6] {
    color: #dc2626;
    font-weight: 800;
}

.request-modal .form-control[b-2mpsott5v6],
.request-modal .form-select[b-2mpsott5v6],
.reimbursement-form-shell .form-control[b-2mpsott5v6],
.reimbursement-form-shell .form-select[b-2mpsott5v6] {
    min-height: 40px;
    border-color: #d7deea;
    font-size: 13px;
}

.request-modal textarea.form-control[b-2mpsott5v6] {
    min-height: 72px;
    resize: vertical;
}

.request-modal textarea.detail-description[b-2mpsott5v6] {
    min-height: 82px;
}

.request-modal .form-control:focus[b-2mpsott5v6],
.request-modal .form-select:focus[b-2mpsott5v6],
.reimbursement-form-shell .form-control:focus[b-2mpsott5v6],
.reimbursement-form-shell .form-select:focus[b-2mpsott5v6] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.reimbursement-action-row[b-2mpsott5v6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.receipt-check[b-2mpsott5v6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    color: #334155;
    font-size: 13px;
}

.receipt-option[b-2mpsott5v6] {
    display: flex;
    align-items: stretch;
}

.receipt-option .receipt-check[b-2mpsott5v6] {
    width: 100%;
    min-height: 82px;
    border: 1px solid #d7deea;
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
}

.receipt-option .form-check-input[b-2mpsott5v6] {
    margin: 0;
    flex: 0 0 auto;
}

.receipt-option .form-check-label[b-2mpsott5v6] {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.add-expense-col[b-2mpsott5v6] {
    display: flex;
    align-items: stretch;
}

.add-expense-btn[b-2mpsott5v6] {
    width: 100%;
    min-height: 82px;
    font-weight: 700;
}

.attachment-ready[b-2mpsott5v6] {
    display: block;
    margin-top: 6px;
    color: #047857;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.attachment-ready i[b-2mpsott5v6] {
    margin-right: 4px;
}

.request-total-strip[b-2mpsott5v6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 12px 16px;
    margin: 4px 0 14px;
}

.request-total-strip span[b-2mpsott5v6] {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.request-total-strip strong[b-2mpsott5v6] {
    color: #0f4386;
    font-size: 22px;
    font-weight: 800;
}

.request-empty-detail[b-2mpsott5v6] {
    min-height: 82px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.reimbursement-detail-table[b-2mpsott5v6] {
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    overflow: hidden;
}

.reimbursement-detail-table thead th[b-2mpsott5v6] {
    background: #f7f9fc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #e6ebf2;
}

.grid-action-icons[b-2mpsott5v6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.grid-icon-btn[b-2mpsott5v6] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7deea;
    border-radius: 6px;
    background: #fff;
    color: #2563eb;
    line-height: 1;
}

.grid-icon-btn:hover[b-2mpsott5v6] {
    background: #eef4ff;
    border-color: #b8c7ee;
}

.grid-icon-btn.success[b-2mpsott5v6] {
    color: #047857;
}

.grid-icon-btn.success:hover[b-2mpsott5v6] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.grid-icon-btn.danger[b-2mpsott5v6] {
    color: #dc2626;
}

.grid-icon-btn.danger:hover[b-2mpsott5v6] {
    background: #fef2f2;
    border-color: #fecaca;
}

@media (max-width: 768px) {
    .request-modal-backdrop[b-2mpsott5v6] {
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        align-items: flex-start;
    }

    .request-modal-footer[b-2mpsott5v6] {
        justify-content: stretch;
    }

    .request-modal-footer .btn[b-2mpsott5v6] {
        flex: 1 1 calc(50% - 5px);
    }
}

.reimbursement-tabs[b-2mpsott5v6] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 16px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}

.reimbursement-tab[b-2mpsott5v6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-weight: 650;
    padding: 10px 14px;
    white-space: nowrap;
}

.reimbursement-tab.active[b-2mpsott5v6] {
    color: #1d4ed8;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.tab-count[b-2mpsott5v6] {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
    font-size: 11px;
}

.anniversary-claim-card[b-2mpsott5v6] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 55%, #ecfeff 100%);
}

.anniversary-claim-icon[b-2mpsott5v6],
.document-icon[b-2mpsott5v6] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #fff;
    background: #2563eb;
    font-size: 22px;
}

.anniversary-claim-copy[b-2mpsott5v6] {
    flex: 1;
}

.anniversary-claim-copy .eyebrow[b-2mpsott5v6] {
    color: #4f46e5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.anniversary-claim-copy h3[b-2mpsott5v6],
.anniversary-claim-copy p[b-2mpsott5v6] {
    margin: 3px 0;
}

.status-chip[b-2mpsott5v6] {
    border-radius: 999px;
    padding: 8px 13px;
    color: #1e40af;
    background: #dbeafe;
    font-weight: 700;
}

.policy-preview[b-2mpsott5v6] {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a8a;
    background: #eff6ff;
}

.policy-preview span[b-2mpsott5v6],
.policy-preview small[b-2mpsott5v6] {
    display: block;
}

.policy-preview strong[b-2mpsott5v6] {
    font-size: 19px;
    white-space: nowrap;
}

.attachment-ready-row[b-2mpsott5v6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.employee-document-grid[b-2mpsott5v6] {
    display: grid;
    gap: 12px;
}

.employee-document-card[b-2mpsott5v6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.document-icon[b-2mpsott5v6] {
    color: #047857;
    background: #d1fae5;
}

.document-info[b-2mpsott5v6] {
    flex: 1;
    min-width: 0;
}

.document-info strong[b-2mpsott5v6],
.document-info span[b-2mpsott5v6],
.document-info small[b-2mpsott5v6] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-info span[b-2mpsott5v6],
.document-info small[b-2mpsott5v6],
.section-heading-row p[b-2mpsott5v6] {
    color: #64748b;
}

.section-heading-row h4[b-2mpsott5v6],
.section-heading-row p[b-2mpsott5v6] {
    margin: 0 0 4px;
}

@media (max-width: 768px) {
    .anniversary-claim-card[b-2mpsott5v6],
    .employee-document-card[b-2mpsott5v6] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .anniversary-claim-card .btn[b-2mpsott5v6],
    .employee-document-card .btn[b-2mpsott5v6] {
        width: 100%;
    }
}

/* Compact Employee Panel alignment */
.page-header[b-2mpsott5v6] {
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-right .btn[b-2mpsott5v6] {
    min-height: 36px;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}

.reimbursement-tabs[b-2mpsott5v6] {
    gap: 5px;
    margin-bottom: 10px;
    padding: 4px;
    border-radius: 8px;
}

.reimbursement-tab[b-2mpsott5v6] {
    gap: 6px;
    min-height: 32px;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
}

.tab-count[b-2mpsott5v6] {
    min-width: 18px;
    height: 18px;
    font-size: 9px;
}

.anniversary-claim-card[b-2mpsott5v6] {
    gap: 11px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 8px;
}

.anniversary-claim-icon[b-2mpsott5v6],
.document-icon[b-2mpsott5v6] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 16px;
}

.anniversary-claim-copy .eyebrow[b-2mpsott5v6] {
    font-size: 9px;
}

.anniversary-claim-copy h3[b-2mpsott5v6] {
    font-size: 14px;
}

.anniversary-claim-copy p[b-2mpsott5v6],
.anniversary-claim-copy small[b-2mpsott5v6] {
    font-size: 10px;
}

.policy-preview[b-2mpsott5v6] {
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 10px;
}

.policy-preview strong[b-2mpsott5v6] {
    font-size: 12px;
}

.grid-wrapper[b-2mpsott5v6] {
    overflow: hidden;
}

.grid-wrapper[b-2mpsott5v6]  .e-grid {
    border: 0 !important;
    font-size: 12px;
}

.grid-wrapper[b-2mpsott5v6]  .e-gridheader,
.grid-wrapper[b-2mpsott5v6]  .e-headercontent {
    border: 0 !important;
}

.grid-wrapper[b-2mpsott5v6]  .e-headercell {
    height: 42px !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, #0d98b4, #087c9f) !important;
    color: #fff !important;
}

.grid-wrapper[b-2mpsott5v6]  .e-headercelldiv {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.grid-wrapper[b-2mpsott5v6]  .e-rowcell {
    height: 50px !important;
    padding: 8px 11px !important;
    border-color: #e1e8f0 !important;
    color: #263649;
    font-size: 12px;
}

.grid-wrapper[b-2mpsott5v6]  .e-row:nth-child(even) .e-rowcell {
    background: #fbfcfe;
}

.grid-wrapper[b-2mpsott5v6]  .e-row:hover .e-rowcell {
    background: #f2f8fc !important;
}

.grid-wrapper[b-2mpsott5v6]  .e-gridpager {
    min-height: 46px;
    border-top: 1px solid #e3eaf1 !important;
    font-size: 10px;
}

.grid-action-icons[b-2mpsott5v6] {
    gap: 4px;
}

.grid-icon-btn[b-2mpsott5v6] {
    border-radius: 7px;
    font-size: 13px;
}

.employee-document-grid[b-2mpsott5v6] {
    gap: 7px;
    padding: 10px 12px 12px;
}

.employee-document-card[b-2mpsott5v6] {
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
}

.document-info strong[b-2mpsott5v6] {
    font-size: 12px;
}

.document-info span[b-2mpsott5v6],
.document-info small[b-2mpsott5v6] {
    font-size: 10px;
}

.section-heading-row[b-2mpsott5v6] {
    padding: 11px 12px 7px;
}

.section-heading-row h4[b-2mpsott5v6] {
    font-size: 14px;
}

.section-heading-row p[b-2mpsott5v6] {
    font-size: 10px;
}

.request-modal[b-2mpsott5v6] {
    width: min(820px, 100%);
    max-height: calc(100vh - 24px);
    max-height: min(calc(100dvh - 24px), 100%);
}

.request-modal-header[b-2mpsott5v6] {
    padding: 13px 16px;
}

.request-modal-header h3[b-2mpsott5v6] {
    font-size: 17px;
}

.request-modal-header p[b-2mpsott5v6] {
    font-size: 11px;
}

.request-modal-body[b-2mpsott5v6] {
    padding: 14px 16px;
}

.request-form-card[b-2mpsott5v6] {
    padding: 12px;
    margin-bottom: 10px;
}

.request-modal-footer[b-2mpsott5v6] {
    padding: 11px 16px;
}

.request-modal .form-control[b-2mpsott5v6],
.request-modal .form-select[b-2mpsott5v6] {
    min-height: 36px;
    font-size: 12px;
}
/* /Pages/TeamMangament/MyTeam.razor.rz.scp.css */
.team-page-header[b-6grlbi6539] {
    gap: 16px;
    flex-wrap: wrap;
}

.team-grid-card[b-6grlbi6539] {
    overflow: hidden;
}

.team-loading[b-6grlbi6539] {
    padding: 10px 12px;
}

.team-toolbar[b-6grlbi6539] {
    justify-content: flex-start;
    padding: 10px 12px;
}

.team-search[b-6grlbi6539] {
    position: relative;
    width: min(330px, 100%);
    flex: 0 1 330px;
}

.team-search i[b-6grlbi6539] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8291a7;
    pointer-events: none;
}

.team-search input[b-6grlbi6539] {
    width: 100%;
    min-height: 38px;
    border: 1px solid #dce5f0;
    border-radius: 7px;
    background: #fff;
    color: #26384a;
    padding: 7px 12px 7px 35px;
    font-size: 12px;
    outline: none;
}

.team-search input:focus[b-6grlbi6539] {
    border-color: #5a93bb;
    box-shadow: 0 0 0 3px rgba(36, 97, 143, 0.1);
}

.team-summary[b-6grlbi6539] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.team-summary span[b-6grlbi6539] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d8e3ec;
    border-radius: 999px;
    background: #f5f9fc;
    color: #526477;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
}

.team-summary i[b-6grlbi6539] {
    color: #2b6a96;
}

.team-clear-button[b-6grlbi6539] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #6d7d8f;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
}

.team-clear-button:hover[b-6grlbi6539] {
    color: #245c86;
}

.team-table-scroll[b-6grlbi6539] {
    width: 100%;
    max-height: calc(100vh - 245px);
    overflow: auto;
}

.team-table[b-6grlbi6539] {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    color: #263649;
    font-size: 12px;
}

.team-table th[b-6grlbi6539],
.team-table td[b-6grlbi6539] {
    padding: 8px 11px;
    border-right: 1px solid #e1e8f0;
    border-bottom: 1px solid #e1e8f0;
    text-align: left;
    vertical-align: middle;
}

.team-table th:last-child[b-6grlbi6539],
.team-table td:last-child[b-6grlbi6539] {
    border-right: 0;
}

.team-table thead th[b-6grlbi6539] {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 42px;
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
}

.team-table tbody td[b-6grlbi6539] {
    height: 50px;
    background: #fff;
}

.team-table tbody tr:nth-child(even) td[b-6grlbi6539] {
    background: #fbfcfe;
}

.team-table tbody tr:hover td[b-6grlbi6539] {
    background: #f2f8fc;
}

.team-table .emp-fullname[b-6grlbi6539] {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-department-badge[b-6grlbi6539] {
    display: inline-flex;
    border-radius: 6px;
    background: #edf5fa;
    color: #245c86;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.team-manager[b-6grlbi6539],
.team-branch[b-6grlbi6539] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #526477;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.team-manager i[b-6grlbi6539],
.team-branch i[b-6grlbi6539] {
    color: #2b6a96;
}

.team-contact[b-6grlbi6539] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.team-contact a[b-6grlbi6539],
.team-contact span[b-6grlbi6539] {
    max-width: 250px;
    overflow: hidden;
    color: #526477;
    font-size: 10px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-contact a[b-6grlbi6539] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.team-contact a:hover[b-6grlbi6539] {
    color: #245c86;
}

.team-contact i[b-6grlbi6539] {
    color: #718196;
}

.team-empty-cell[b-6grlbi6539] {
    height: 190px !important;
    color: #8492a6;
    text-align: center !important;
}

.team-empty-cell i[b-6grlbi6539],
.team-empty-cell strong[b-6grlbi6539],
.team-empty-cell span[b-6grlbi6539] {
    display: block;
}

.team-empty-cell i[b-6grlbi6539] {
    margin-bottom: 7px;
    font-size: 27px;
    opacity: 0.55;
}

.team-empty-cell strong[b-6grlbi6539] {
    color: #607185;
    font-size: 13px;
}

.team-empty-cell span[b-6grlbi6539] {
    margin-top: 3px;
    font-size: 10px;
}

.team-pager[b-6grlbi6539] {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 12px;
    border-top: 1px solid #e3eaf1;
    background: #fff;
    color: #748294;
    font-size: 10px;
}

.team-pager > div[b-6grlbi6539] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pager-button[b-6grlbi6539] {
    width: 30px;
    height: 30px;
    border: 1px solid #cfdae6;
    border-radius: 7px;
    background: #f5f8fb;
    color: #285f88;
}

.pager-button:disabled[b-6grlbi6539] {
    cursor: not-allowed;
    opacity: 0.45;
}

.team-empty-state[b-6grlbi6539] {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #8492a6;
    padding: 32px 20px;
    text-align: center;
}

.team-empty-state i[b-6grlbi6539] {
    margin-bottom: 7px;
    font-size: 32px;
    opacity: 0.55;
}

.team-empty-state strong[b-6grlbi6539] {
    color: #607185;
    font-size: 14px;
}

.team-empty-state p[b-6grlbi6539] {
    margin: 3px 0 0;
    font-size: 11px;
}

@media (max-width: 760px) {
    .team-page-header .page-header-right[b-6grlbi6539],
    .team-search[b-6grlbi6539],
    .team-summary[b-6grlbi6539] {
        width: 100%;
    }

    .team-search[b-6grlbi6539] {
        flex-basis: 100%;
    }

    .team-clear-button[b-6grlbi6539] {
        margin-left: 0;
    }

    .team-pager[b-6grlbi6539] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Pages/TimesheetManagement/Timesheet.razor.rz.scp.css */
.timesheet-page-header[b-4vxvmkfnuh] {
    gap: 16px;
    flex-wrap: wrap;
}

.timesheet-grid-card[b-4vxvmkfnuh] {
    padding: 0 !important;
    overflow: hidden;
}

.timesheet-toolbar[b-4vxvmkfnuh] {
    justify-content: space-between;
    padding: 10px 12px;
}

.timesheet-search[b-4vxvmkfnuh] {
    position: relative;
    width: min(320px, 100%);
}

.timesheet-search i[b-4vxvmkfnuh] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8291a7;
}

.timesheet-search input[b-4vxvmkfnuh] {
    width: 100%;
    min-height: 38px;
    border: 1px solid #dce5f0;
    border-radius: 7px;
    padding: 7px 12px 7px 35px;
    color: #26384a;
    font-size: 12px;
    outline: none;
}

.timesheet-search input:focus[b-4vxvmkfnuh] {
    border-color: #5a93bb;
    box-shadow: 0 0 0 3px rgba(36, 97, 143, 0.1);
}

.timesheet-toolbar .btn-primary-sm[b-4vxvmkfnuh] {
    min-height: 36px;
    border-radius: 7px;
    padding: 6px 11px;
    font-size: 11px;
}

.timesheet-grid-card .grid-container[b-4vxvmkfnuh] {
    max-height: calc(100vh - 260px);
    overflow: auto;
    border: 0;
    border-radius: 0;
}

.timesheet-grid-card .professional-grid[b-4vxvmkfnuh] {
    min-width: 790px;
    font-size: 12px;
}

.timesheet-grid-card .professional-grid th[b-4vxvmkfnuh] {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 42px;
    padding: 8px 11px;
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #0d98b4, #087c9f);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.35px;
}

.timesheet-grid-card .professional-grid td[b-4vxvmkfnuh] {
    height: 50px;
    padding: 8px 11px;
    font-size: 12px;
}

.timesheet-grid-card .professional-grid tbody tr:nth-child(even) td[b-4vxvmkfnuh] {
    background: #fbfcfe;
}

.timesheet-grid-card .professional-grid tbody tr:hover td[b-4vxvmkfnuh] {
    background: #f2f8fc;
}

.timesheet-grid-card .date-info[b-4vxvmkfnuh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #40566b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.timesheet-grid-card .date-info i[b-4vxvmkfnuh] {
    color: #2b6a96;
}

.timesheet-grid-card .location-badge[b-4vxvmkfnuh] {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
}

.timesheet-activity-preview[b-4vxvmkfnuh] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.timesheet-activity-preview strong[b-4vxvmkfnuh],
.timesheet-activity-preview span[b-4vxvmkfnuh] {
    max-width: 390px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timesheet-activity-preview strong[b-4vxvmkfnuh] {
    color: #26384a;
    font-size: 12px;
    font-weight: 700;
}

.timesheet-activity-preview span[b-4vxvmkfnuh] {
    color: #7b8999;
    font-size: 10px;
}

.timesheet-grid-card .total-badge[b-4vxvmkfnuh],
.timesheet-grid-card .status-badge[b-4vxvmkfnuh] {
    padding: 3px 8px;
    font-size: 10px;
}

.timesheet-grid-card .action-btn[b-4vxvmkfnuh] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 7px;
    font-size: 13px;
}

.timesheet-grid-card .pagination-wrapper[b-4vxvmkfnuh] {
    min-height: 46px;
    margin: 0;
    padding: 7px 12px;
    border-top: 1px solid #e3eaf1;
    background: #fff;
    font-size: 10px;
}

.timesheet-grid-card .page-btn[b-4vxvmkfnuh],
.timesheet-grid-card .page-number[b-4vxvmkfnuh] {
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 10px;
}

.modal-container[b-4vxvmkfnuh] {
    width: min(760px, calc(100% - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 8px !important;
}

.modal-container .modal-header[b-4vxvmkfnuh],
.modal-container .modal-footer[b-4vxvmkfnuh] {
    padding: 13px 16px !important;
}

.modal-container .modal-body[b-4vxvmkfnuh] {
    padding: 14px 16px !important;
}

.modal-container .modal-title[b-4vxvmkfnuh] {
    font-size: 17px !important;
}

.modal-container label[b-4vxvmkfnuh],
.modal-container input[b-4vxvmkfnuh],
.modal-container select[b-4vxvmkfnuh],
.modal-container textarea[b-4vxvmkfnuh],
.modal-container button[b-4vxvmkfnuh] {
    font-size: 12px;
}

@media (max-width: 760px) {
    .timesheet-page-header .page-header-right[b-4vxvmkfnuh],
    .timesheet-search[b-4vxvmkfnuh] {
        width: 100%;
    }

    .timesheet-toolbar[b-4vxvmkfnuh] {
        align-items: stretch;
        flex-direction: column;
    }
}