/* _content/SeasonFlow.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-hd0v337yrr] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-hd0v337yrr] {
    flex: 1;
}

.sidebar[b-hd0v337yrr] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-hd0v337yrr] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-hd0v337yrr]  a, .top-row[b-hd0v337yrr]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-hd0v337yrr]  a:hover, .top-row[b-hd0v337yrr]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-hd0v337yrr]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-hd0v337yrr] {
        justify-content: space-between;
    }

    .top-row[b-hd0v337yrr]  a, .top-row[b-hd0v337yrr]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-hd0v337yrr] {
        flex-direction: row;
    }

    .sidebar[b-hd0v337yrr] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-hd0v337yrr] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-hd0v337yrr]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-hd0v337yrr], article[b-hd0v337yrr] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-hd0v337yrr] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-hd0v337yrr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/SeasonFlow.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ghy6jl6jhm] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ghy6jl6jhm] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ghy6jl6jhm] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ghy6jl6jhm] {
    font-size: 1.1rem;
}

.bi[b-ghy6jl6jhm] {
    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-ghy6jl6jhm] {
    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-ghy6jl6jhm] {
    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-ghy6jl6jhm] {
    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-ghy6jl6jhm] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ghy6jl6jhm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ghy6jl6jhm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ghy6jl6jhm]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ghy6jl6jhm]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ghy6jl6jhm]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ghy6jl6jhm] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ghy6jl6jhm] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ghy6jl6jhm] {
        display: none;
    }

    .nav-scrollable[b-ghy6jl6jhm] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/SeasonFlow.Web/Components/Pages/Account/AccountRegister.razor.rz.scp.css */
.ar-card[b-5j0opc4kep] {
    background: var(--card);
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    border: .5px solid var(--border);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.ar-header[b-5j0opc4kep] {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: .5px solid var(--border);
}

.ar-logo[b-5j0opc4kep] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.ar-logo i[b-5j0opc4kep] {
    font-size: 22px;
    color: #fff;
}

.ar-title[b-5j0opc4kep] {
    font-size: 18px;
    font-weight: 600;
}

.ar-body[b-5j0opc4kep] {
    padding: 20px 24px;
}

.ar-success-link[b-5j0opc4kep] {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
}

.ar-success-link a[b-5j0opc4kep] {
    color: var(--ink);
    font-weight: 500;
}

.ar-submit[b-5j0opc4kep] {
    width: 100%;
}

.ar-footer[b-5j0opc4kep] {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink3);
}

.ar-footer a[b-5j0opc4kep] {
    color: var(--ink);
    font-weight: 500;
}
/* _content/SeasonFlow.Web/Components/Pages/Account/ChangePassword.razor.rz.scp.css */
.cp-wrap[b-61i2md1fu9] {
    max-width: 420px;
}

.cp-title[b-61i2md1fu9] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 22px;
}

.cp-success-body[b-61i2md1fu9] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.cp-success-head[b-61i2md1fu9] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.cp-success-icon[b-61i2md1fu9] {
    font-size: 18px;
}

.cp-success-msg[b-61i2md1fu9] {
    font-size: 13px;
}

.cp-card[b-61i2md1fu9] {
    background: var(--card);
    border: .5px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
}

.cp-pw-wrap[b-61i2md1fu9] {
    position: relative;
}

.cp-pw-toggle[b-61i2md1fu9] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink3);
    padding: 4px;
}

.cp-pw-icon[b-61i2md1fu9] {
    font-size: 17px;
}

.cp-hint[b-61i2md1fu9] {
    font-size: 12px;
    color: var(--red);
    margin-top: 4px;
}

.cp-submit[b-61i2md1fu9] {
    width: 100%;
}
/* _content/SeasonFlow.Web/Components/Pages/Account/Login.razor.rz.scp.css */
.lg-card[b-9431lq9cz0] {
    background: var(--card);
    border-radius: 14px;
    width: 100%;
    max-width: 380px;
    border: .5px solid var(--border);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.lg-header[b-9431lq9cz0] {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: .5px solid var(--border);
}

.lg-logo[b-9431lq9cz0] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content:center;
    margin-bottom: 12px;
}

.lg-logo i[b-9431lq9cz0] {
    font-size: 22px;
    color: #fff;
}

.lg-title[b-9431lq9cz0] {
    font-size: 18px;
    font-weight: 600;
}

.lg-body[b-9431lq9cz0] {
    padding: 20px 24px;
}

.lg-pw-wrap[b-9431lq9cz0] {
    position: relative;
}

.lg-pw-input[b-9431lq9cz0] {
    padding-right: 40px;
    width: 100%;
}

.lg-pw-toggle[b-9431lq9cz0] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ink3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lg-pw-toggle i[b-9431lq9cz0] {
    font-size: 16px;
}

.lg-remember[b-9431lq9cz0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    accent-color: var(--ink);
}

.lg-remember label[b-9431lq9cz0] {
    cursor: pointer;
}

.lg-submit[b-9431lq9cz0] {
    width: 100%;
}

.lg-footer[b-9431lq9cz0] {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink3);
}

.lg-footer a[b-9431lq9cz0] {
    color: var(--ink);
    font-weight: 500;
}
/* _content/SeasonFlow.Web/Components/Pages/Account/SetPassword.razor.rz.scp.css */
.lg-card[b-yzo4ki5mx7] {
    background: var(--card);
    border-radius: 14px;
    width: 100%;
    max-width: 400px;
    border: .5px solid var(--border);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.lg-header[b-yzo4ki5mx7] {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: .5px solid var(--border);
}

.lg-logo[b-yzo4ki5mx7] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.lg-logo i[b-yzo4ki5mx7] {
    font-size: 22px;
    color: #fff;
}

.lg-title[b-yzo4ki5mx7] {
    font-size: 18px;
    font-weight: 600;
}

.lg-body[b-yzo4ki5mx7] {
    padding: 24px 28px;
}

.lg-pw-wrap[b-yzo4ki5mx7] {
    position: relative;
}

.lg-pw-input[b-yzo4ki5mx7] {
    padding-right: 42px;
    width: 100%;
}

.lg-pw-toggle[b-yzo4ki5mx7] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ink3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lg-pw-toggle i[b-yzo4ki5mx7] {
    font-size: 16px;
}

.lg-submit[b-yzo4ki5mx7] {
    width: 100%;
    justify-content: center;
}

.lg-footer[b-yzo4ki5mx7] {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink3);
}

.lg-footer a[b-yzo4ki5mx7] {
    color: var(--ink);
    font-weight: 500;
}

/* Strength hint */
.pw-hint[b-yzo4ki5mx7] {
    font-size: 12px;
    color: var(--red);
    margin-top: 4px;
}
/* _content/SeasonFlow.Web/Components/Pages/Admin/AccountManagement.razor.rz.scp.css */
/* ══ AccountManagement — "Executive Payroll Terminal" (đồng bộ /employees, /payroll)
   Nền porcelain #EEF1F2 (layout.css), widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (primary) · amber #B45309 (chờ đặt MK). ══ */

.acm-wrap[b-0hl7k85jn9] {
    --c-ink: #293640;
    --c-muted: #6b7a85;
    --c-border: #e2e7ea;
    --c-hair: #eef1f3;
    --c-emerald: #05835f;
    --c-amber: #b45309;
    --c-red: #a32d2d;
    --c-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--c-ink);
}

/* ── Page header ── */
.acm-head[b-0hl7k85jn9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.acm-title[b-0hl7k85jn9] {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin: 0;
}
.acm-sub[b-0hl7k85jn9] { font-size: 13px; color: var(--c-muted); margin-top: 4px; max-width: 560px; }
.acm-kpis[b-0hl7k85jn9] { display: flex; gap: 10px; flex-wrap: wrap; }
.acm-kpi[b-0hl7k85jn9] {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--c-shadow);
    padding: 10px 16px;
    min-width: 108px;
}
.acm-kpi-lbl[b-0hl7k85jn9] { font-size: 11.5px; color: var(--c-muted); margin-bottom: 3px; white-space: nowrap; }
.acm-kpi-val[b-0hl7k85jn9] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
    line-height: 1.1;
}
.acm-kpi-val--em[b-0hl7k85jn9] { color: var(--c-emerald); }
.acm-kpi-val--am[b-0hl7k85jn9] { color: var(--c-amber); }

.acm-wrap .alert[b-0hl7k85jn9] { margin: 0; }

/* ── Ledger widget ── */
.acm-ledger[b-0hl7k85jn9] {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: var(--c-shadow);
    overflow: hidden;
}

/* Toolbar */
.acm-toolbar[b-0hl7k85jn9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
}
.acm-search-wrap[b-0hl7k85jn9] { position: relative; flex: 1; min-width: 160px; }
.acm-search-icon[b-0hl7k85jn9] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-muted);
    pointer-events: none;
    font-size: 15px;
}
.acm-search-input[b-0hl7k85jn9] {
    width: 100%;
    padding-left: 34px;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: #fff;
}
.acm-search-input:focus[b-0hl7k85jn9] { border-color: var(--c-ink); }
.acm-role-sel[b-0hl7k85jn9] {
    width: auto;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: #fff;
    color: var(--c-ink);
}

/* Primary button: emerald */
.acm-btn-primary[b-0hl7k85jn9] {
    background: var(--c-emerald);
    border: 1px solid var(--c-emerald);
    color: #fff;
    font-weight: 600;
}
.acm-btn-primary:hover[b-0hl7k85jn9] { background: #046b4e; border-color: #046b4e; color: #fff; }

/* ── Table ── */
.acm-tw[b-0hl7k85jn9] { overflow-x: auto; }
.acm-table[b-0hl7k85jn9] { width: 100%; border-collapse: collapse; font-size: 14px; }
.acm-table thead tr[b-0hl7k85jn9] { background: #fafbfc; }
.acm-table th[b-0hl7k85jn9] {
    padding: 10px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--c-muted);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.acm-table td[b-0hl7k85jn9] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--c-hair);
    vertical-align: middle;
}
.acm-table tbody tr:hover[b-0hl7k85jn9] { background: #f7f9fa; }
.acm-table tbody tr:last-child td[b-0hl7k85jn9] { border-bottom: none; }

.acm-th-actions[b-0hl7k85jn9] { width: 1%; }
.acm-th-sort[b-0hl7k85jn9] { cursor: pointer; user-select: none; white-space: nowrap; }
.acm-th-sort:hover[b-0hl7k85jn9] { color: var(--c-ink); }
.acm-sort-ico[b-0hl7k85jn9] {
    font-size: 13px;
    margin-left: 3px;
    vertical-align: -1px;
    color: var(--c-emerald);
}
.acm-sort-dim[b-0hl7k85jn9] { color: var(--c-muted); opacity: .55; }

/* Username as ID chip */
.acm-td-username[b-0hl7k85jn9] { white-space: nowrap; }
.acm-chip[b-0hl7k85jn9] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    background: #f1f4f6;
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* System-role pill */
.acm-spill[b-0hl7k85jn9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.acm-spill-dot[b-0hl7k85jn9] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.acm-spill--ink[b-0hl7k85jn9] { background: #eef1f3; color: var(--c-ink); }
.acm-spill--gr[b-0hl7k85jn9] { background: #eef1f3; color: var(--c-muted); }

/* Employee cell */
.acm-td-name[b-0hl7k85jn9] { max-width: 200px; }
.acm-emp-name[b-0hl7k85jn9] {
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acm-emp-code[b-0hl7k85jn9] { font-size: 12px; color: var(--c-muted); margin-top: 1px; }
.acm-td-created[b-0hl7k85jn9] { color: var(--c-muted); font-size: 13px; white-space: nowrap; }
.acm-dash[b-0hl7k85jn9] { color: var(--c-muted); }

/* Actions */
.acm-td-actions-cell[b-0hl7k85jn9] { text-align: right; }
.acm-td-actions[b-0hl7k85jn9] { display: flex; gap: 5px; justify-content: flex-end; }
.acm-td-actions .btn[b-0hl7k85jn9] { border-color: var(--c-border); }
.acm-btn-mail[b-0hl7k85jn9] { color: var(--c-emerald); border-color: var(--c-emerald) !important; }
.acm-btn-mail:hover[b-0hl7k85jn9] { background: #e7f3ee; }
.acm-btn-mail-off[b-0hl7k85jn9] { color: var(--c-muted); }
.acm-btn-danger[b-0hl7k85jn9] { color: var(--c-red); }
.acm-btn-danger:hover[b-0hl7k85jn9] { background: #fcebeb; }

.acm-td-empty[b-0hl7k85jn9] { text-align: center; padding: 28px; color: var(--c-muted); }

/* Footer */
.acm-foot[b-0hl7k85jn9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--c-border);
    font-size: 13px;
    color: var(--c-muted);
}
.acm-foot-count[b-0hl7k85jn9] { font-variant-numeric: tabular-nums; }

.acm-mbox-lg[b-0hl7k85jn9] {
    width: 440px;
}

.acm-mbox-md[b-0hl7k85jn9] {
    width: 420px;
}

.acm-mbox-sm[b-0hl7k85jn9] {
    width: 360px;
}

.acm-modal-footer[b-0hl7k85jn9] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.acm-modal-footer-nogap[b-0hl7k85jn9] {
    display: flex;
    gap: 10px;
}

.acm-flex1[b-0hl7k85jn9] {
    flex: 1;
}

.acm-flex2[b-0hl7k85jn9] {
    flex: 2;
}

.acm-username-inline[b-0hl7k85jn9] {
    font-size: 14px;
}

.acm-pw-divider[b-0hl7k85jn9] {
    border-top: 1px solid var(--border);
    margin: 14px 0;
    padding-top: 14px;
}

.acm-pw-label[b-0hl7k85jn9] {
    margin-bottom: 8px;
}

.acm-delete-msg[b-0hl7k85jn9] {
    font-size: 14px;
    color: var(--ink2);
    margin-bottom: 18px;
}

/* Custom roles column */
.acm-td-custom-roles[b-0hl7k85jn9] {
    max-width: 200px;
}

.acm-role-badge[b-0hl7k85jn9] {
    display: inline-block;
    margin: 0 3px 2px 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* Assign modal — 2-column split (illustration + form) */
.acm-mbox-assign[b-0hl7k85jn9] {
    width: 460px;
    max-height: 85vh;
    overflow-y: auto;
}

.acm-assign-split[b-0hl7k85jn9] {
    width: 720px;
    max-width: 92vw;
    padding: 0;
    overflow: hidden;
    display: flex;
}

/* Left illustration panel */
.acm-assign-art[b-0hl7k85jn9] {
    flex-shrink: 0;
    width: 240px;
    background: linear-gradient(160deg, var(--bb), #eef4fb);
    border-right: .5px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px 22px;
}
.acm-assign-art svg[b-0hl7k85jn9] { width: 170px; height: auto; }
.acm-assign-art-cap[b-0hl7k85jn9] {
    font-size: 13px;
    color: var(--ink2);
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
}

.acm-assign-form[b-0hl7k85jn9] {
    flex: 1;
    min-width: 0;
    padding: 22px 24px;
    overflow-y: auto;
}

.acm-assign-section-lbl[b-0hl7k85jn9] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}

/* Pill-style toggles (match RoleManagement) */
.acm-assign-pills[b-0hl7k85jn9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.acm-pill[b-0hl7k85jn9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink2);
    transition: background .12s, border-color .12s, color .12s;
}
.acm-pill:hover[b-0hl7k85jn9] { border-color: var(--bm); background: var(--bb); }
.acm-pill:has(input:checked)[b-0hl7k85jn9] {
    background: var(--bb);
    border-color: var(--bm);
    color: var(--bm);
    font-weight: 600;
}

.acm-pill-chk[b-0hl7k85jn9] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--bm);
    margin: 0;
    flex-shrink: 0;
}

.acm-assign-role-name[b-0hl7k85jn9] { font-weight: 500; }

.acm-dept-dot[b-0hl7k85jn9] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Pastel-blue primary button inside this modal */
.acm-assign-form .btn.bd[b-0hl7k85jn9] { background: var(--bm); border-color: var(--bm); }
.acm-assign-form .btn.bd:hover[b-0hl7k85jn9] { background: var(--blue); border-color: var(--blue); }

@media (max-width: 768px) {
    .acm-title[b-0hl7k85jn9] { font-size: 22px; }
    .acm-kpis[b-0hl7k85jn9] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .acm-kpi[b-0hl7k85jn9] { min-width: 0; }
    .acm-toolbar[b-0hl7k85jn9] { display: grid; grid-template-columns: 1fr 1fr; }
    .acm-search-wrap[b-0hl7k85jn9] { grid-column: 1 / -1; }
    .acm-role-sel[b-0hl7k85jn9] { width: 100%; }
    .acm-btn-primary[b-0hl7k85jn9] { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 620px) {
    .acm-assign-split[b-0hl7k85jn9] { flex-direction: column; }
    .acm-assign-art[b-0hl7k85jn9] { width: auto; border-right: none; border-bottom: .5px solid var(--border); flex-direction: row; padding: 18px 22px; }
    .acm-assign-art svg[b-0hl7k85jn9] { width: 76px; }
    .acm-assign-art-cap[b-0hl7k85jn9] { text-align: left; font-size: 12px; }
}
/* _content/SeasonFlow.Web/Components/Pages/Admin/AdminSendNotification.razor.rz.scp.css */
/* ══ Send Notification — "Executive Payroll Terminal" (đồng bộ /employees, /payroll)
   Nền porcelain #EEF1F2 (layout.css), widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (primary). Không gradient, mỗi khối 1 điểm đậm. ══ */

.asn-wrap[b-i3ln02e1cf] {
    --a-ink: #293640;
    --a-muted: #6b7a85;
    --a-border: #e2e7ea;
    --a-hair: #eef1f3;
    --a-emerald: #05835f;
    --a-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--a-ink);
}

/* ── Page header ── */
.asn-head[b-i3ln02e1cf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.asn-title[b-i3ln02e1cf] {
    font-size: 26px;
    font-weight: 700;
    color: var(--a-ink);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin: 0;
}
.asn-sub[b-i3ln02e1cf] {
    font-size: 13px;
    color: var(--a-muted);
    margin-top: 4px;
    max-width: 560px;
}
.asn-kpis[b-i3ln02e1cf] { display: flex; gap: 10px; flex-wrap: wrap; }
.asn-kpi[b-i3ln02e1cf] {
    background: #fff;
    border: 1px solid var(--a-border);
    border-radius: 10px;
    box-shadow: var(--a-shadow);
    padding: 10px 16px;
    min-width: 118px;
}
.asn-kpi-lbl[b-i3ln02e1cf] { font-size: 11.5px; color: var(--a-muted); margin-bottom: 3px; white-space: nowrap; }
.asn-kpi-val[b-i3ln02e1cf] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--a-ink);
    line-height: 1.1;
}
.asn-kpi-val--em[b-i3ln02e1cf] { color: var(--a-emerald); }

/* ── Alerts spacing ── */
.asn-wrap .alert[b-i3ln02e1cf] { margin: 0; }

/* ── Two-column grid ── */
.asn-grid[b-i3ln02e1cf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* ── Widget ── */
.asn-widget[b-i3ln02e1cf] {
    background: #fff;
    border: 1px solid var(--a-border);
    border-radius: 12px;
    box-shadow: var(--a-shadow);
    overflow: hidden;
}
.asn-widget-hd[b-i3ln02e1cf] {
    padding: 10px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--a-border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--a-ink);
}
.asn-widget-bd[b-i3ln02e1cf] { padding: 16px; }

/* ── Inputs ── */
.asn-input[b-i3ln02e1cf] {
    width: 100%;
    border: 1px solid var(--a-border);
    border-radius: 9px;
    background: #fff;
    color: var(--a-ink);
}
.asn-input:focus[b-i3ln02e1cf] { border-color: var(--a-ink); outline: none; }
.asn-textarea[b-i3ln02e1cf] { resize: vertical; min-height: 96px; }

/* ── Primary button: emerald (đúng 1 nút chính) ── */
.asn-btn-primary[b-i3ln02e1cf] {
    width: 100%;
    justify-content: center;
    background: var(--a-emerald);
    border: 1px solid var(--a-emerald);
    color: #fff;
    font-weight: 600;
}
.asn-btn-primary:hover[b-i3ln02e1cf] { background: #046b4e; border-color: #046b4e; color: #fff; }
.asn-btn-primary:disabled[b-i3ln02e1cf] { opacity: .6; }

/* ── Preview box ── */
.asn-preview-box[b-i3ln02e1cf] {
    border: 1px solid var(--a-border);
    border-radius: 10px;
    padding: 14px;
    background: #fafbfc;
}
.asn-preview-row[b-i3ln02e1cf] { display: flex; align-items: flex-start; gap: 10px; }
.asn-preview-icon[b-i3ln02e1cf] {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.asn-preview-icon i[b-i3ln02e1cf] { font-size: 16px; color: #fff; }
.asn-preview-content[b-i3ln02e1cf] { min-width: 0; }
.asn-preview-title[b-i3ln02e1cf] { font-weight: 600; font-size: 14px; margin-bottom: 2px; color: var(--a-ink); }
.asn-preview-body[b-i3ln02e1cf] { font-size: 13px; color: var(--a-muted); white-space: pre-wrap; }
.asn-preview-time[b-i3ln02e1cf] { font-size: 11px; color: #9aa6ad; margin-top: 6px; }

.asn-preview-footer[b-i3ln02e1cf] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--a-hair);
    font-size: 12px;
}
.asn-preview-footer-lbl[b-i3ln02e1cf] {
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--a-muted);
    margin-right: 6px;
}
.asn-preview-footer-val[b-i3ln02e1cf] { font-weight: 600; color: var(--a-ink); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .asn-grid[b-i3ln02e1cf] { grid-template-columns: 1fr; }
    .asn-title[b-i3ln02e1cf] { font-size: 22px; }
    .asn-kpis[b-i3ln02e1cf] { width: 100%; }
    .asn-kpi[b-i3ln02e1cf] { flex: 1; min-width: 0; }
}
/* _content/SeasonFlow.Web/Components/Pages/Admin/DesignSystem.razor.rz.scp.css */
.ds-page[b-tqnlzkbv1o] { max-width: 920px; }
.ds-intro[b-tqnlzkbv1o] { font-size: 13px; color: var(--ink2); margin-bottom: 16px; line-height: 1.55; }
.ds-card[b-tqnlzkbv1o] { margin-bottom: 16px; }
.ds-h[b-tqnlzkbv1o] { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.ds-h .mono[b-tqnlzkbv1o] { font-size: 12px; color: var(--ink3); font-weight: 500; }

.ds-row[b-tqnlzkbv1o] { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.ds-sub[b-tqnlzkbv1o] { font-size: 12px; color: var(--ink3); margin-top: 12px; line-height: 1.5; }
.ds-muted[b-tqnlzkbv1o] { color: var(--ink3); font-size: 13px; }

/* color swatches */
.ds-swatches[b-tqnlzkbv1o] { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ds-swatch[b-tqnlzkbv1o] { display: flex; flex-direction: column; gap: 4px; }
.ds-chip[b-tqnlzkbv1o] { height: 44px; border-radius: 8px; border: .5px solid var(--border); }
.ds-chip-name[b-tqnlzkbv1o] { font-size: 12px; font-weight: 600; color: var(--ink); }
.ds-chip-hex[b-tqnlzkbv1o] { font-size: 11px; color: var(--ink3); }

/* button table */
.ds-tbl[b-tqnlzkbv1o] { width: 100%; border-collapse: collapse; }
.ds-tbl th[b-tqnlzkbv1o] { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .03em; padding: 6px 12px; border-bottom: .5px solid var(--border); }
.ds-tbl td[b-tqnlzkbv1o] { padding: 10px 12px; border-bottom: .5px solid var(--border); font-size: 13px; vertical-align: middle; }
.ds-tbl tr:last-child td[b-tqnlzkbv1o] { border-bottom: none; }
.ds-tbl .mono[b-tqnlzkbv1o] { font-size: 12px; color: var(--bm); }

.ds-list[b-tqnlzkbv1o] { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink2); line-height: 1.9; }
.ds-list .mono[b-tqnlzkbv1o] { color: var(--bm); font-size: 12px; }

.mb8[b-tqnlzkbv1o] { margin-bottom: 8px; }

/* ── PII Demo ──────────────────────────────────────────────────── */
.ds-pii-fields[b-tqnlzkbv1o] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ds-pii-row[b-tqnlzkbv1o]    { display: flex; align-items: center; gap: 12px; }
.ds-pii-label[b-tqnlzkbv1o]  { flex: 0 0 120px; }
.ds-pii-input[b-tqnlzkbv1o]  {
    flex: 1; max-width: 340px;
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 6px 10px; font-size: 13px; color: var(--ink);
    background: var(--card); font-family: inherit;
    transition: border-color .15s;
}
.ds-pii-input:focus[b-tqnlzkbv1o] { outline: none; border-color: var(--bm); }

.ds-pii-actions[b-tqnlzkbv1o] { display: flex; gap: 8px; flex-wrap: wrap; }

/* result wrapper */
.ds-pii-result-wrap[b-tqnlzkbv1o] { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ds-pii-result-header[b-tqnlzkbv1o] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--gb); font-size: 12px; font-weight: 600; color: var(--ink2);
    border-bottom: 1px solid var(--border);
}
.ds-pii-result-header.enc[b-tqnlzkbv1o] { background: var(--rb); }

/* status badge inside header */
.ds-pii-badge[b-tqnlzkbv1o] { margin-left: auto; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.ds-pii-enc[b-tqnlzkbv1o]   { background: var(--rb); color: var(--red); }
.ds-pii-plain[b-tqnlzkbv1o] { background: var(--gb); color: var(--gm); }

/* table */
.ds-pii-table[b-tqnlzkbv1o] { width: 100%; border-collapse: collapse; }
.ds-pii-table th[b-tqnlzkbv1o] {
    text-align: left; font-size: 11px; font-weight: 600; color: var(--ink3);
    text-transform: uppercase; letter-spacing: .04em;
    padding: 7px 14px; border-bottom: 1px solid var(--border); background: var(--card);
}
.ds-pii-table td[b-tqnlzkbv1o] { padding: 9px 14px; border-bottom: .5px solid var(--border); vertical-align: middle; }
.ds-pii-table tr:last-child td[b-tqnlzkbv1o] { border-bottom: none; }

/* encrypted cell */
.ds-pii-cipher[b-tqnlzkbv1o]    { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; word-break: break-all; }
.ds-pii-prefix[b-tqnlzkbv1o]    { color: var(--red); font-weight: 700; margin-right: 1px; }
.ds-pii-ciphertext[b-tqnlzkbv1o]{ color: var(--ink3); }

/* plaintext cell */
.ds-pii-plain-val[b-tqnlzkbv1o] { font-size: 13px; color: var(--gm); font-weight: 600; }

.ds-pii-len[b-tqnlzkbv1o] { font-size: 12px; color: var(--ink2); white-space: nowrap; width: 80px; }
/* _content/SeasonFlow.Web/Components/Pages/Admin/RoleManagement.razor.rz.scp.css */
/* ══ RoleManagement — "Executive Payroll Terminal" (đồng bộ /employees, /payroll)
   Nền porcelain #EEF1F2 (layout.css), widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (chọn / primary). ══ */

.rm-wrap[b-0bn8xiweyy] {
    --r-ink: #293640;
    --r-muted: #6b7a85;
    --r-border: #e2e7ea;
    --r-hair: #eef1f3;
    --r-emerald: #05835f;
    --r-red: #a32d2d;
    --r-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--r-ink);
}

/* ── Page header ── */
.rm-head[b-0bn8xiweyy] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.rm-title[b-0bn8xiweyy] {
    font-size: 26px;
    font-weight: 700;
    color: var(--r-ink);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin: 0;
}
.rm-sub[b-0bn8xiweyy] { font-size: 13px; color: var(--r-muted); margin-top: 4px; max-width: 560px; }
.rm-kpis[b-0bn8xiweyy] { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.rm-kpi[b-0bn8xiweyy] {
    background: #fff;
    border: 1px solid var(--r-border);
    border-radius: 10px;
    box-shadow: var(--r-shadow);
    padding: 10px 16px;
    min-width: 92px;
}
.rm-kpi-lbl[b-0bn8xiweyy] { font-size: 11.5px; color: var(--r-muted); margin-bottom: 3px; white-space: nowrap; }
.rm-kpi-val[b-0bn8xiweyy] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--r-ink);
    line-height: 1.1;
}
.rm-kpi-val--em[b-0bn8xiweyy] { color: var(--r-emerald); }
.rm-head-btn[b-0bn8xiweyy] { align-self: center; }

.rm-wrap .alert[b-0bn8xiweyy] { margin: 0; }

/* Primary button: emerald */
.rm-btn-primary[b-0bn8xiweyy] {
    background: var(--r-emerald);
    border: 1px solid var(--r-emerald);
    color: #fff;
    font-weight: 600;
}
.rm-btn-primary:hover[b-0bn8xiweyy] { background: #046b4e; border-color: #046b4e; color: #fff; }
.rm-btn-primary:disabled[b-0bn8xiweyy] { opacity: .6; }
/* Delete: chữ đỏ nền trắng */
.rm-btn-danger[b-0bn8xiweyy] { color: var(--r-red); }
.rm-btn-danger:hover[b-0bn8xiweyy] { background: #fcebeb; }

/* ── Two-column layout ── */
.rm-layout[b-0bn8xiweyy] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start;
}

/* ── Role list (left) ── */
.rm-role-list[b-0bn8xiweyy] { display: flex; flex-direction: column; gap: 8px; }

.rm-role-card[b-0bn8xiweyy] {
    background: #fff;
    border: 1px solid var(--r-border);
    border-radius: 12px;
    box-shadow: var(--r-shadow);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.rm-role-card:hover[b-0bn8xiweyy] { border-color: #cfd8dd; }
.rm-role-card--active[b-0bn8xiweyy] {
    border-color: var(--r-emerald) !important;
    box-shadow: inset 3px 0 0 var(--r-emerald), var(--r-shadow);
    background: #f2f7f5;
}

.rm-role-top[b-0bn8xiweyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.rm-role-name[b-0bn8xiweyy] {
    font-weight: 600;
    font-size: 14px;
    color: var(--r-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.rm-role-desc[b-0bn8xiweyy] {
    font-size: 12px;
    color: var(--r-muted);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-role-meta[b-0bn8xiweyy] { display: flex; gap: 12px; font-size: 11px; }
.rm-role-meta .muted[b-0bn8xiweyy] { color: var(--r-muted); }

.rm-empty[b-0bn8xiweyy] {
    text-align: center;
    padding: 32px 16px;
    line-height: 1.6;
    font-size: 13px;
    color: var(--r-muted);
    border: 1px dashed var(--r-border);
    border-radius: 12px;
    background: #fff;
}

/* Status pill */
.rm-pill[b-0bn8xiweyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.rm-pill-dot[b-0bn8xiweyy] { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.rm-pill--em[b-0bn8xiweyy] { background: #e7f3ee; color: var(--r-emerald); }
.rm-pill--gr[b-0bn8xiweyy] { background: #eef1f3; color: var(--r-muted); }

/* ── Permission panel (right) ── */
.rm-perm-panel[b-0bn8xiweyy] {
    background: #fff;
    border: 1px solid var(--r-border);
    border-radius: 12px;
    box-shadow: var(--r-shadow);
    overflow: hidden;
    min-height: 200px;
}

.rm-perm-empty[b-0bn8xiweyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 60px 24px;
    font-size: 13px;
    color: var(--r-muted);
}

.rm-perm-header[b-0bn8xiweyy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--r-border);
}
.rm-perm-header-actions[b-0bn8xiweyy] { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.rm-perm-header-actions .btn[b-0bn8xiweyy] { border-color: var(--r-border); }
.rm-perm-title[b-0bn8xiweyy] { font-size: 15px; font-weight: 700; color: var(--r-ink); }
.rm-perm-subtitle[b-0bn8xiweyy] { font-size: 12px; margin-top: 2px; color: var(--r-muted); }

.rm-perm-body[b-0bn8xiweyy] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rm-perm-group[b-0bn8xiweyy] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--r-hair);
}
.rm-perm-group:last-child[b-0bn8xiweyy] { border-bottom: none; padding-bottom: 0; }
.rm-perm-resource[b-0bn8xiweyy] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--r-muted);
    padding-top: 6px;
}
.rm-perm-actions[b-0bn8xiweyy] { display: flex; flex-wrap: wrap; gap: 8px 10px; }

/* Permission as a toggleable pill — emerald khi tick */
.rm-perm-item[b-0bn8xiweyy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--r-border);
    border-radius: 999px;
    background: #fff;
    color: var(--r-muted);
    transition: background .12s, border-color .12s, color .12s;
}
.rm-perm-item:hover[b-0bn8xiweyy] { border-color: var(--r-emerald); background: #f2f7f5; }
.rm-perm-item:has(input:checked)[b-0bn8xiweyy] {
    background: #e7f3ee;
    border-color: var(--r-emerald);
    color: var(--r-emerald);
    font-weight: 600;
}
.rm-chk[b-0bn8xiweyy] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--r-emerald);
    margin: 0;
    flex-shrink: 0;
}

.rm-perm-footer[b-0bn8xiweyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--r-border);
    background: #fafbfc;
}
.rm-perm-count[b-0bn8xiweyy] { font-size: 12px; color: var(--r-muted); font-variant-numeric: tabular-nums; }

/* ── Modals ── */
.rm-mbox[b-0bn8xiweyy] { width: 400px; }
.rm-modal-footer[b-0bn8xiweyy] { display: flex; gap: 10px; margin-top: 4px; }
.rm-flex1[b-0bn8xiweyy] { flex: 1; }
.rm-flex2[b-0bn8xiweyy] { flex: 2; }

/* ── Responsive ── */
@media (max-width: 820px) {
    .rm-layout[b-0bn8xiweyy] { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .rm-title[b-0bn8xiweyy] { font-size: 22px; }
    .rm-kpis[b-0bn8xiweyy] { width: 100%; }
    .rm-head-btn[b-0bn8xiweyy] { flex: 1 0 100%; justify-content: center; }
}
/* _content/SeasonFlow.Web/Components/Pages/Attendance/AdminCheckRequests.razor.rz.scp.css */
/* ══ Yêu cầu chấm công — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (CI/tích cực) · amber #B45309 (chờ/trễ) · đỏ #A32D2D chỉ chữ
   · champagne #A16207 chỉ cho dữ liệu tiền. Không gradient, mỗi khối 1 điểm đậm 700. ══ */

.acr-wrap[b-2tm1zki46w] {
    --acr-ink: #293640;
    --acr-muted: #6b7a85;
    --acr-border: #e2e7ea;
    --acr-hair: #eef1f3;
    --acr-emerald: #05835f;
    --acr-amber: #b45309;
    --acr-red: #a32d2d;
    --acr-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--acr-ink);
}

/* ── Page header ── */
.acr-head[b-2tm1zki46w] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.acr-page-title[b-2tm1zki46w] {
    font-size: 26px;
    font-weight: 700;
    color: var(--acr-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.acr-page-sub[b-2tm1zki46w] { font-size: 13px; color: var(--acr-muted); margin-top: 4px; }

/* KPI strip */
.acr-kpis[b-2tm1zki46w] { display: flex; gap: 10px; flex-wrap: wrap; }
.acr-kpi[b-2tm1zki46w] {
    background: #fff;
    border: 1px solid var(--acr-border);
    border-radius: 10px;
    box-shadow: var(--acr-shadow);
    padding: 10px 16px;
    min-width: 112px;
}
.acr-kpi-lbl[b-2tm1zki46w] { font-size: 11.5px; color: var(--acr-muted); margin-bottom: 3px; white-space: nowrap; }
.acr-kpi-val[b-2tm1zki46w] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--acr-ink);
    line-height: 1.1;
}
.acr-kpi-val--em[b-2tm1zki46w] { color: var(--acr-emerald); }
.acr-kpi-val--am[b-2tm1zki46w] { color: var(--acr-amber); }
.acr-kpi-val--rd[b-2tm1zki46w] { color: var(--acr-red); }

/* ── Master-detail columns ── */
.acr-cols[b-2tm1zki46w] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.acr-cols--open[b-2tm1zki46w] { grid-template-columns: minmax(0, 1.2fr) minmax(420px, 1fr); }

/* ── LEFT: ledger ── */
.acr-ledger[b-2tm1zki46w] {
    background: #fff;
    border: 1px solid var(--acr-border);
    border-radius: 12px;
    box-shadow: var(--acr-shadow);
    overflow: hidden;
}
.acr-toolbar[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--acr-border);
}
.acr-toolbar-btns[b-2tm1zki46w] { display: flex; gap: 8px; }
.acr-title[b-2tm1zki46w] { font-size: 14px; font-weight: 600; color: var(--acr-ink); }
.acr-title-meta[b-2tm1zki46w] { font-size: 12px; color: var(--acr-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.acr-tbtn[b-2tm1zki46w] { border-color: var(--acr-border); }

/* Nút chính emerald + nút từ chối chữ đỏ */
.acr-btn-primary[b-2tm1zki46w] {
    background: var(--acr-emerald);
    border: 1px solid var(--acr-emerald);
    color: #fff;
    font-weight: 600;
}
.acr-btn-primary:hover[b-2tm1zki46w] { background: #046b4e; border-color: #046b4e; color: #fff; }
.acr-btn-primary:disabled[b-2tm1zki46w] { opacity: .6; }
.acr-btn-danger[b-2tm1zki46w] { border-color: var(--acr-border); color: var(--acr-red); }
.acr-btn-danger:hover[b-2tm1zki46w] { background: #f9eceb; border-color: #e8c9c7; color: var(--acr-red); }

/* Filter */
.acr-filter-row[b-2tm1zki46w] {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--acr-border);
}
.acr-search-wrap[b-2tm1zki46w] { position: relative; flex: 1; }
.acr-search-icon[b-2tm1zki46w] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--acr-muted);
    pointer-events: none;
    font-size: 15px;
}
.acr-search-input[b-2tm1zki46w] {
    padding-left: 34px;
    width: 100%;
    border: 1px solid var(--acr-border);
    border-radius: 9px;
    background: #fff;
}
.acr-search-input:focus[b-2tm1zki46w] { border-color: var(--acr-ink); }

/* ── List body ── */
.acr-list-body[b-2tm1zki46w] { padding: 6px 16px 14px; max-height: 640px; overflow-y: auto; }
.acr-loading[b-2tm1zki46w], .acr-empty[b-2tm1zki46w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--acr-muted);
    font-size: 13px;
}
.acr-loading-icon[b-2tm1zki46w] { font-size: 28px; }
.acr-empty i[b-2tm1zki46w] { font-size: 32px; color: var(--acr-emerald); }

/* Group card */
.acr-group-card[b-2tm1zki46w] {
    border: 1px solid var(--acr-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    cursor: pointer;
    background: #fff;
    transition: background .1s, border-color .15s;
}
.acr-group-card:hover[b-2tm1zki46w] { background: #f7f9fa; }
.acr-group-sel[b-2tm1zki46w] { border-color: var(--acr-emerald) !important; background: #f2f7f5; }

.acr-gc-row1[b-2tm1zki46w] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}
.acr-gc-name[b-2tm1zki46w] { font-size: 14px; font-weight: 600; color: var(--acr-ink); }
.acr-gc-date[b-2tm1zki46w] { font-size: 11.5px; color: var(--acr-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.acr-gc-shift[b-2tm1zki46w] {
    font-size: 11.5px;
    color: var(--acr-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.acr-gc-pills[b-2tm1zki46w] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.acr-gc-est[b-2tm1zki46w] {
    font-size: 11.5px;
    color: var(--acr-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.acr-gc-pay[b-2tm1zki46w] { color: #a16207; font-weight: 600; }

/* Pills: CI = emerald · CO = graphite chip */
.acr-pill[b-2tm1zki46w] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.acr-pill-ci[b-2tm1zki46w] { background: #e7f3ee; color: var(--acr-emerald); }
.acr-pill-co[b-2tm1zki46w] { background: #f1f4f6; color: var(--acr-ink); border: 1px solid var(--acr-border); }

/* Footer */
.acr-foot[b-2tm1zki46w] {
    padding: 10px 16px;
    border-top: 1px solid var(--acr-border);
    font-size: 12.5px;
    color: var(--acr-muted);
    font-variant-numeric: tabular-nums;
}

/* ── RIGHT: dossier ── */
.acr-dossier[b-2tm1zki46w] {
    background: #fff;
    border: 1px solid var(--acr-border);
    border-radius: 12px;
    box-shadow: var(--acr-shadow);
    position: sticky;
    top: 12px;
}
.acr-det-wrap[b-2tm1zki46w] { padding: 18px; display: flex; flex-direction: column; gap: 0; }

.acr-det-hd[b-2tm1zki46w] { border-bottom: 1px solid var(--acr-hair); padding-bottom: 14px; margin-bottom: 16px; }
.acr-det-row1[b-2tm1zki46w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}
.acr-det-emp[b-2tm1zki46w] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acr-det-name[b-2tm1zki46w] { font-size: 17px; font-weight: 700; color: var(--acr-ink); letter-spacing: -.2px; }
.acr-det-code[b-2tm1zki46w] {
    font-family: var(--mono);
    font-size: 11.5px;
    background: #f1f4f6;
    border: 1px solid var(--acr-border);
    border-radius: 6px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
}
.acr-det-meta[b-2tm1zki46w] {
    font-size: 12px;
    color: var(--acr-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.acr-det-meta i[b-2tm1zki46w] { font-size: 11px; }
.acr-dot[b-2tm1zki46w] { color: var(--acr-muted); flex-shrink: 0; }

/* Box (thay card lồng card) */
.acr-box[b-2tm1zki46w] {
    border: 1px solid var(--acr-border);
    border-radius: 10px;
    background: #fff;
}
.mb12[b-2tm1zki46w] { margin-bottom: 12px; }

/* ── Progress stepper ── */
.acr-steps-card[b-2tm1zki46w] { padding: 24px 18px 20px; }
.acr-prog[b-2tm1zki46w] { display: flex; align-items: flex-start; }
.acr-prog-step[b-2tm1zki46w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 90px;
}
.acr-prog-dot[b-2tm1zki46w] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.acr-prog-dot svg[b-2tm1zki46w] { width: 18px; height: 18px; }
.acr-prog-step--done .acr-prog-dot[b-2tm1zki46w] {
    background: var(--acr-emerald);
    color: #fff;
    box-shadow: 0 0 0 5px #e7f3ee;
}
.acr-prog-step--active .acr-prog-dot[b-2tm1zki46w] {
    background: #fff;
    color: var(--acr-amber);
    border: 2.5px solid var(--acr-amber);
    box-shadow: 0 0 0 5px #fdf3e2;
    animation: acr-prog-pulse-b-2tm1zki46w 1.8s ease-in-out infinite;
}
@keyframes acr-prog-pulse-b-2tm1zki46w {
    0%, 100% { box-shadow: 0 0 0 5px #fdf3e2; }
    50%      { box-shadow: 0 0 0 8px #fdf3e2; }
}
.acr-prog-step--wait .acr-prog-dot[b-2tm1zki46w] {
    background: #fff;
    color: var(--acr-muted);
    border: 1.5px dashed var(--acr-border);
}
.acr-prog-cap[b-2tm1zki46w] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 11px;
}
.acr-prog-step--done .acr-prog-cap[b-2tm1zki46w]   { color: var(--acr-emerald); }
.acr-prog-step--active .acr-prog-cap[b-2tm1zki46w] { color: var(--acr-amber); }
.acr-prog-step--wait .acr-prog-cap[b-2tm1zki46w]   { color: var(--acr-muted); opacity: .7; }
.acr-prog-label[b-2tm1zki46w] {
    font-weight: 600;
    font-size: 13px;
    margin-top: 2px;
    white-space: nowrap;
    color: var(--acr-ink);
}
.acr-prog-step--wait .acr-prog-label[b-2tm1zki46w] { color: var(--acr-muted); }
.acr-prog-sub[b-2tm1zki46w] { font-size: 11px; color: var(--acr-muted); margin-top: 2px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.acr-prog-bar[b-2tm1zki46w] {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--acr-hair);
    margin-top: 20px;
    min-width: 16px;
    transition: background .2s;
}
.acr-prog-bar--done[b-2tm1zki46w] { background: var(--acr-emerald); }

/* ── Request detail blocks ── */
.acr-req-grid[b-2tm1zki46w] { display: grid; gap: 10px; margin-bottom: 10px; }
.acr-req-two[b-2tm1zki46w] { grid-template-columns: 1fr 1fr; }
.acr-req-one[b-2tm1zki46w] { grid-template-columns: 1fr; }

.acr-req-block[b-2tm1zki46w] { padding: 14px 16px; }
.acr-req-block-hd[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.acr-req-time-row[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.acr-req-time-lbl[b-2tm1zki46w] { font-size: 11px; color: var(--acr-muted); font-weight: 500; margin-bottom: 1px; }
.acr-req-time[b-2tm1zki46w] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.acr-req-ci .acr-req-time[b-2tm1zki46w] { color: var(--acr-emerald); }
.acr-req-co .acr-req-time[b-2tm1zki46w] { color: var(--acr-ink); }

.acr-late-chip[b-2tm1zki46w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--acr-amber);
    background: #fdf3e2;
    border: 1px solid #f2dfbc;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 500;
}
.acr-late-chip .ti[b-2tm1zki46w] { font-size: 14px; flex-shrink: 0; }
.acr-late-chip strong[b-2tm1zki46w] { font-weight: 700; }
.acr-early-chip[b-2tm1zki46w] { color: var(--acr-red); background: #f9eceb; border-color: #e8c9c7; }

.acr-req-gps[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #fafbfc;
    border: 1px solid var(--acr-hair);
    border-radius: 8px;
    padding: 9px 12px;
    margin-top: 6px;
}
.acr-gps-icon[b-2tm1zki46w] { color: var(--acr-emerald); font-size: 15px; flex-shrink: 0; }
.acr-gps-lbl[b-2tm1zki46w] { font-size: 12px; color: var(--acr-muted); font-weight: 500; flex-shrink: 0; }
.acr-gps-coords[b-2tm1zki46w] {
    font-size: 13px;
    color: var(--acr-ink);
    font-weight: 600;
    font-family: var(--mono);
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.acr-gps-map[b-2tm1zki46w] { flex-shrink: 0; border-color: var(--acr-border); }

.acr-req-nogps[b-2tm1zki46w] {
    font-size: 12.5px;
    color: var(--acr-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fafbfc;
    border: 1px solid var(--acr-hair);
    border-radius: 8px;
}
.acr-geo-warn[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdf3e2;
    border: 1px solid #f2dfbc;
    font-size: 13px;
    color: var(--acr-amber);
    line-height: 1.4;
}
.acr-geo-warn .ti[b-2tm1zki46w] { font-size: 17px; flex-shrink: 0; }
.acr-geo-warn strong[b-2tm1zki46w] { font-weight: 700; }
.acr-geo-ok[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #e7f3ee;
    border: 1px solid #cfe6dc;
    font-size: 13px;
    color: var(--acr-emerald);
    line-height: 1.4;
}
.acr-geo-ok .ti[b-2tm1zki46w] { font-size: 17px; flex-shrink: 0; }
.acr-geo-ok strong[b-2tm1zki46w] { font-weight: 700; }

/* Status tags */
.acr-late-tag[b-2tm1zki46w], .acr-ontime-tag[b-2tm1zki46w] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.acr-late-tag[b-2tm1zki46w] { background: #fdf3e2; color: var(--acr-amber); }
.acr-ontime-tag[b-2tm1zki46w] { background: #e7f3ee; color: var(--acr-emerald); }

/* ── Map ── */
.acr-map-wrap[b-2tm1zki46w] { margin-bottom: 12px; }
.acr-map-canvas[b-2tm1zki46w] {
    height: 220px;
    border-radius: 8px;
    border: 1px solid var(--acr-border);
    overflow: hidden;
}
.acr-map-legend[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--acr-muted);
    margin-bottom: 6px;
}
.acr-map-dot[b-2tm1zki46w] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(20, 30, 40, .3);
}
.acr-map-dot-work[b-2tm1zki46w] { background: #2563eb; }
.acr-map-dot-emp[b-2tm1zki46w]  { background: #f59e0b; }
.acr-map-dot-out[b-2tm1zki46w]  { background: #ef4444; }

/* ── Estimate bar — dữ liệu tiền: cream champagne ── */
.acr-est-bar[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: #fbf8f1;
    border: 1px solid #ecdfc3;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--acr-ink);
}
.acr-est-icon[b-2tm1zki46w] { color: var(--acr-amber); }
.acr-est-sep[b-2tm1zki46w] { color: var(--acr-muted); }
.acr-est-pay[b-2tm1zki46w] { color: #a16207; }
.acr-est-rate[b-2tm1zki46w] { font-size: 11px; color: var(--acr-muted); }

/* ── Action card ── */
.acr-action-card[b-2tm1zki46w] { padding: 14px 16px; }
.acr-det-lbl[b-2tm1zki46w] {
    font-size: 11px;
    font-weight: 600;
    color: var(--acr-ink);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}
.acr-reject-input[b-2tm1zki46w] {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid var(--acr-border);
    border-radius: 9px;
}
.acr-reject-input:focus[b-2tm1zki46w] { border-color: var(--acr-ink); }
.acr-acts-row[b-2tm1zki46w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.acr-acts-left[b-2tm1zki46w] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acr-acts-single[b-2tm1zki46w] { display: flex; gap: 8px; }
.acr-reject-ind[b-2tm1zki46w] { font-size: 12px; border-color: var(--acr-border); color: var(--acr-red); }
.acr-reject-ind:hover[b-2tm1zki46w] { background: #f9eceb; color: var(--acr-red); }
.acr-approve-all[b-2tm1zki46w] { padding-left: 20px; padding-right: 20px; }
.acr-confirm-txt[b-2tm1zki46w] { font-size: 12px; color: var(--acr-red); font-weight: 600; }

/* ── Error ── */
.acr-error[b-2tm1zki46w] {
    background: #f9eceb;
    border: 1px solid #e8c9c7;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--acr-red);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Flow guide modal ── */
.acr-flow-overlay[b-2tm1zki46w] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 30, 40, .45);
    display: flex; align-items: center; justify-content: center;
}
.acr-flow-modal[b-2tm1zki46w] {
    background: #fff;
    border: 1px solid #e2e7ea;
    border-radius: 12px;
    width: min(480px, 96vw);
    padding: 24px;
    box-shadow: 0 20px 60px rgba(20, 30, 40, .2);
}
.acr-flow-modal-hd[b-2tm1zki46w] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.acr-flow-modal-title[b-2tm1zki46w] {
    font-size: 15px; font-weight: 700; color: #293640;
    display: flex; align-items: center; gap: 7px;
}
.acr-flow-modal-sub[b-2tm1zki46w] { font-size: 12.5px; color: #6b7a85; margin: 0 0 18px; }
.acr-flow-lane[b-2tm1zki46w] {
    background: #fafbfc; border: 1px solid #e2e7ea;
    border-radius: 10px; padding: 16px;
}
.acr-flow-lane-title[b-2tm1zki46w] {
    font-size: 12px; font-weight: 600; color: #293640;
    text-transform: uppercase; letter-spacing: .6px;
    display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.acr-flow-step[b-2tm1zki46w] {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 12px; color: #293640;
}
.acr-flow-step strong[b-2tm1zki46w] { display: block; margin-bottom: 1px; }
.acr-flow-note[b-2tm1zki46w] { font-size: 10.5px; color: #6b7a85; }
.acr-flow-dot[b-2tm1zki46w] {
    width: 10px; height: 10px; border-radius: 50%;
    background: #05835f; margin-top: 4px; flex-shrink: 0;
}
.acr-flow-connector[b-2tm1zki46w] {
    width: 2px; height: 18px; margin: 4px 0 4px 4px;
    border-left: 2px dashed #cfe6dc;
}
.acr-flow-dest[b-2tm1zki46w] {
    display: flex; align-items: center; gap: 10px;
    background: #05835f; border-radius: 8px; padding: 10px 12px; margin-top: 4px;
}
.acr-flow-dest .ti[b-2tm1zki46w] { font-size: 18px; color: #fff; }
.acr-flow-dest-title[b-2tm1zki46w] { font-size: 12px; font-weight: 700; color: #fff; }
.acr-flow-dest-sub[b-2tm1zki46w]   { font-size: 10.5px; color: rgba(255, 255, 255, .75); }
.acr-flow-footer[b-2tm1zki46w] {
    display: flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 10px 14px;
    background: #e7f3ee; border: 1px solid #cfe6dc; border-radius: 8px;
    font-size: 12px; color: #05835f;
}
.acr-flow-footer i[b-2tm1zki46w] { color: #05835f; }
.acr-flow-footer-link[b-2tm1zki46w] { color: #05835f; text-decoration: underline; margin-left: 2px; }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 1000px) {
    .acr-cols--open[b-2tm1zki46w] { grid-template-columns: 1fr; }
    .acr-dossier[b-2tm1zki46w] { position: static; }
    .acr-req-two[b-2tm1zki46w] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .acr-wrap[b-2tm1zki46w] { gap: 12px; }
    .acr-page-title[b-2tm1zki46w] { font-size: 22px; }

    .acr-kpis[b-2tm1zki46w] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .acr-kpi[b-2tm1zki46w] { min-width: 0; }

    .acr-det-wrap[b-2tm1zki46w] { padding: 14px; }
    .acr-prog[b-2tm1zki46w] { flex-wrap: wrap; gap: 10px; }
    .acr-prog-bar[b-2tm1zki46w] { display: none; }
    .acr-acts-single[b-2tm1zki46w] { flex-direction: column; }
}
/* _content/SeasonFlow.Web/Components/Pages/Attendance/Attendance.razor.rz.scp.css */
/* ══ Chấm công — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (tích cực) · amber #B45309 (chờ/trễ) · đỏ #A32D2D chỉ chữ.
   Không gradient, không SVG pastel, mỗi khối 1 điểm đậm 700. ══ */

/* Token phải khai cho CẢ .modal-bg: modal của trang được render NGOÀI .att-wrap,
   nên nếu chỉ khai trên wrapper thì mọi var(--att-*) bên trong modal đều invalid —
   .att-btn-primary mất nền emerald, chữ #fff trên nền trắng thành vô hình.
   Chỉ chia sẻ TOKEN, không chia sẻ layout: đắp flex-direction/max-width lên
   .modal-bg sẽ phá mất căn giữa của overlay. */
.att-wrap[b-hi01hgi0tb],
.modal-bg[b-hi01hgi0tb] {
    --att-ink: #293640;
    --att-muted: #6b7a85;
    --att-border: #e2e7ea;
    --att-hair: #eef1f3;
    --att-emerald: #05835f;
    --att-amber: #b45309;
    --att-red: #a32d2d;
    --att-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
}

.att-wrap[b-hi01hgi0tb] {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--att-ink);
}

/* ── Page header ── */
.att-head[b-hi01hgi0tb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.att-page-title[b-hi01hgi0tb] {
    font-size: 26px;
    font-weight: 700;
    color: var(--att-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.att-page-sub[b-hi01hgi0tb] { font-size: 13px; color: var(--att-muted); margin-top: 4px; }
.att-head-date[b-hi01hgi0tb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--att-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.att-head-date i[b-hi01hgi0tb] { font-size: 15px; }

/* KPI strip — icon tile + value + label */
.att-kpis[b-hi01hgi0tb] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.att-kpi[b-hi01hgi0tb] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--att-border);
    border-radius: 12px;
    box-shadow: var(--att-shadow);
    padding: 14px 16px;
    min-width: 0;
}
.att-kpi-ico[b-hi01hgi0tb] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}
.att-kpi--blue  .att-kpi-ico[b-hi01hgi0tb] { background: #eaf1fb; color: #3a5a78; }
.att-kpi--amber .att-kpi-ico[b-hi01hgi0tb] { background: #fdf3e2; color: var(--att-amber); }
.att-kpi--green .att-kpi-ico[b-hi01hgi0tb] { background: #e7f3ee; color: var(--att-emerald); }
.att-kpi--gray  .att-kpi-ico[b-hi01hgi0tb] { background: #eef1f3; color: var(--att-muted); }
.att-kpi-txt[b-hi01hgi0tb] { min-width: 0; }
.att-kpi-lbl[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-kpi-val[b-hi01hgi0tb] {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--att-ink);
    line-height: 1.15;
    margin-bottom: 1px;
}
.att-kpi-unit[b-hi01hgi0tb] { font-size: 12px; font-weight: 500; color: var(--att-muted); }
.att-kpi-val--em[b-hi01hgi0tb] { color: var(--att-emerald); }
.att-kpi-val--am[b-hi01hgi0tb] { color: var(--att-amber); }

/* ── Tab bar ── */
.att-tabs-bar[b-hi01hgi0tb] {
    display: flex;
    background: #fff;
    border: 1px solid var(--att-border);
    border-radius: 12px;
    box-shadow: var(--att-shadow);
    padding: 0 8px;
    overflow-x: auto;
}
.att-tab[b-hi01hgi0tb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--att-muted);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
    border-radius: 0;
    transition: color .12s, box-shadow .12s;
}
.att-tab:hover[b-hi01hgi0tb] { color: var(--att-ink); }
.att-tab-on[b-hi01hgi0tb] {
    color: var(--att-ink) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--att-emerald);
}
.att-tab-badge[b-hi01hgi0tb] {
    background: #fdf3e2;
    color: var(--att-amber);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Master-detail columns ── */
.att-cols[b-hi01hgi0tb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.att-cols--open[b-hi01hgi0tb] { grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr); }

/* ── Ledger (left widget) ── */
.att-ledger[b-hi01hgi0tb] {
    background: #fff;
    border: 1px solid var(--att-border);
    border-radius: 12px;
    box-shadow: var(--att-shadow);
    overflow: hidden;
}
.att-toolbar[b-hi01hgi0tb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--att-border);
}
.att-toolbar-txt[b-hi01hgi0tb] { min-width: 0; }
.att-title[b-hi01hgi0tb] { font-size: 14px; font-weight: 600; color: var(--att-ink); }
.att-title-meta[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.att-toolbar-left[b-hi01hgi0tb] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.att-toolbar-right[b-hi01hgi0tb] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.att-tbtn[b-hi01hgi0tb] { border-color: var(--att-border); }

.att-date-input[b-hi01hgi0tb], .att-time-input[b-hi01hgi0tb] {
    width: auto;
    border: 1px solid var(--att-border);
    border-radius: 9px;
    background: #fff;
    font-variant-numeric: tabular-nums;
}
.att-time-range[b-hi01hgi0tb] { display: flex; align-items: center; gap: 4px; }
.att-time-sep[b-hi01hgi0tb] { color: var(--att-muted); flex-shrink: 0; }

/* Nút chính: emerald — MỘT nút primary duy nhất */
.att-btn-primary[b-hi01hgi0tb] {
    background: var(--att-emerald);
    border: 1px solid var(--att-emerald);
    color: #fff;
    font-weight: 600;
}
.att-btn-primary:hover[b-hi01hgi0tb] { background: #046b4e; border-color: #046b4e; color: #fff; }
.att-btn-primary:disabled[b-hi01hgi0tb] { opacity: .6; }
.att-btn-danger[b-hi01hgi0tb] { border-color: var(--att-border); color: var(--att-red); }
.att-btn-danger:hover[b-hi01hgi0tb] { background: #f9eceb; border-color: #e8c9c7; color: var(--att-red); }

/* Search — inline in toolbar, right side */
.att-search-wrap[b-hi01hgi0tb] { position: relative; min-width: 220px; flex: 1; max-width: 320px; }
.att-search-icon[b-hi01hgi0tb] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--att-muted);
    pointer-events: none;
    font-size: 15px;
}
.att-search-input[b-hi01hgi0tb] {
    width: 100%;
    padding-left: 34px;
    border: 1px solid var(--att-border);
    border-radius: 9px;
    background: #fff;
}
.att-search-input:focus[b-hi01hgi0tb] { border-color: var(--att-ink); }

/* ── List rows (ledger style) ── */
.att-list-body[b-hi01hgi0tb] { min-height: 120px; }
.att-loading[b-hi01hgi0tb] { text-align: center; padding: 36px; color: var(--att-muted); font-size: 13px; }
.att-empty[b-hi01hgi0tb] { padding: 40px 16px; text-align: center; color: var(--att-muted); font-size: 13px; }
.att-empty i[b-hi01hgi0tb] { font-size: 26px; display: block; margin-bottom: 8px; color: #b6c0c7; }
.att-empty p[b-hi01hgi0tb] { margin: 0; }

/* ── Data table ── */
.att-table-scroll[b-hi01hgi0tb] { overflow-x: auto; }
.att-table[b-hi01hgi0tb] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.att-table thead th[b-hi01hgi0tb] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fafbfc;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--att-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--att-border);
    white-space: nowrap;
}
.att-table th.att-col-c[b-hi01hgi0tb], .att-table td.att-col-c[b-hi01hgi0tb] { text-align: center; }
.att-table tbody td[b-hi01hgi0tb] {
    padding: 9px 14px;
    border-bottom: 1px solid var(--att-hair);
    font-size: 13px;
    color: var(--att-ink);
    vertical-align: middle;
}
.att-trow[b-hi01hgi0tb] { cursor: pointer; transition: background .1s; }
.att-trow:hover td[b-hi01hgi0tb] { background: #f7f9fa; }
.att-trow.sel td[b-hi01hgi0tb] { background: #f2f7f5; }
.att-trow.sel td:first-child[b-hi01hgi0tb] { box-shadow: inset 3px 0 0 var(--att-emerald); }
.att-muted-cell[b-hi01hgi0tb] { color: var(--att-muted); }
.att-worked-cell[b-hi01hgi0tb] { font-weight: 600; }
.att-dash[b-hi01hgi0tb] { color: #b6c0c7; }

/* Employee cell */
.att-emp-cell[b-hi01hgi0tb] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.att-emp-txt[b-hi01hgi0tb] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.att-emp-name[b-hi01hgi0tb] {
    font-weight: 600;
    color: var(--att-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.att-emp-code[b-hi01hgi0tb] { font-size: 11px; color: var(--att-muted); font-variant-numeric: tabular-nums; }

/* Shift cell */
.att-shift-cell[b-hi01hgi0tb] { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.att-shift-name[b-hi01hgi0tb] { font-weight: 500; }
.att-shift-time[b-hi01hgi0tb] { font-size: 11px; color: var(--att-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Check-in / out time chip */
.att-time-chip[b-hi01hgi0tb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.att-time-chip i[b-hi01hgi0tb] { font-size: 13px; }
.att-time-ok[b-hi01hgi0tb] { color: var(--att-emerald); }
.att-time-late[b-hi01hgi0tb] { color: var(--att-amber); }
.att-t-ok[b-hi01hgi0tb] { color: var(--att-emerald); }
.att-t-late[b-hi01hgi0tb] { color: var(--att-amber); }

/* Location cell */
.att-loc-cell[b-hi01hgi0tb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--att-muted);
    white-space: nowrap;
}
.att-loc-cell i[b-hi01hgi0tb] { font-size: 13px; color: #b6c0c7; }

@keyframes spin-b-hi01hgi0tb { to { transform: rotate(360deg) } }

/* ID chip */
.att-id[b-hi01hgi0tb] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--att-border);
    color: var(--att-ink);
    font-weight: 500;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status pill (suggested) */
.att-pill[b-hi01hgi0tb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.att-pill-dot[b-hi01hgi0tb] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.att-pill--em[b-hi01hgi0tb] { background: #e7f3ee; color: var(--att-emerald); }
.att-pill--am[b-hi01hgi0tb] { background: #fdf3e2; color: var(--att-amber); }
.att-pill--rd[b-hi01hgi0tb] { background: #f9eceb; color: var(--att-red); }

/* Footer */
.att-foot[b-hi01hgi0tb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--att-border);
    font-size: 12.5px;
    color: var(--att-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Dossier (right widget) ── */
.att-dossier[b-hi01hgi0tb] {
    background: #fff;
    border: 1px solid var(--att-border);
    border-radius: 12px;
    box-shadow: var(--att-shadow);
    padding: 18px;
    position: sticky;
    top: 12px;
}

.att-detail-header[b-hi01hgi0tb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.att-detail-id[b-hi01hgi0tb] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.att-detail-name[b-hi01hgi0tb] { font-size: 17px; font-weight: 700; color: var(--att-ink); letter-spacing: -.2px; }
.att-detail-code[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.att-detail-meta[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.att-detail-badge[b-hi01hgi0tb] { margin-top: 7px; }
.att-detail-actions[b-hi01hgi0tb] { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.att-detail-spin[b-hi01hgi0tb] { animation: spin-b-hi01hgi0tb .8s linear infinite; }

/* ── Vertical timeline (detail) ── */
.att-vtl[b-hi01hgi0tb] { position: relative; margin: 0 0 16px; padding-left: 4px; }
.att-vtl-step[b-hi01hgi0tb] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 18px;
}
/* connector line between dots */
.att-vtl-step:not(.att-vtl-last)[b-hi01hgi0tb]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--att-hair);
}
.att-vtl-last[b-hi01hgi0tb] { padding-bottom: 0; }
.att-vtl-dot[b-hi01hgi0tb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.att-vtl-dot svg[b-hi01hgi0tb] { width: 15px; height: 15px; }
.att-vtl-dot--sched[b-hi01hgi0tb] { background: #eef1f3; color: var(--att-muted); }
.att-vtl-dot--ok[b-hi01hgi0tb]    { background: var(--att-emerald); color: #fff; }
.att-vtl-dot--late[b-hi01hgi0tb]  { background: var(--att-amber); color: #fff; }
.att-vtl-dot--dim[b-hi01hgi0tb]   { background: #fafbfc; color: #b6c0c7; border: 1px solid var(--att-border); }
.att-vtl-body[b-hi01hgi0tb] { flex: 1; min-width: 0; padding-top: 1px; }
.att-vtl-label[b-hi01hgi0tb] { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--att-muted); }
.att-vtl-time[b-hi01hgi0tb] { font-size: 16px; font-weight: 700; color: var(--att-ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.att-vtl-loc[b-hi01hgi0tb] { font-size: 11.5px; color: var(--att-muted); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.att-vtl-loc i[b-hi01hgi0tb] { font-size: 12px; }
.att-vtl-date[b-hi01hgi0tb] { font-size: 11.5px; color: var(--att-muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }

/* Box: section viền nhạt (thay card lồng card) */
.att-box[b-hi01hgi0tb] {
    border: 1px solid var(--att-border);
    border-radius: 10px;
    background: #fff;
}
.mb12[b-hi01hgi0tb] { margin-bottom: 12px; }
.mb14[b-hi01hgi0tb] { margin-bottom: 14px; }

/* Info rows */
.att-info-card[b-hi01hgi0tb] { overflow: hidden; }
.att-ir[b-hi01hgi0tb] {
    display: flex;
    padding: 10px 14px;
    border-bottom: 1px solid var(--att-hair);
    font-size: 13px;
}
.att-ir:last-child[b-hi01hgi0tb] { border-bottom: none; }
.att-ik[b-hi01hgi0tb] { width: 130px; flex-shrink: 0; color: var(--att-muted); font-size: 12px; padding-top: 1px; }
.att-iv[b-hi01hgi0tb] { font-weight: 500; color: var(--att-ink); min-width: 0; font-variant-numeric: tabular-nums; }
.att-ir-paid[b-hi01hgi0tb] { color: var(--att-emerald); font-weight: 600; }
.att-gps-value[b-hi01hgi0tb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-gps-coords[b-hi01hgi0tb] { font-size: 12px; }
.att-map-link[b-hi01hgi0tb] { font-size: 11px; border-color: var(--att-border); }
.att-iv-sub[b-hi01hgi0tb] { color: var(--att-muted); font-weight: 400; font-size: 12px; }
.att-edit-note[b-hi01hgi0tb] { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-style: italic; color: var(--att-muted); }
.att-edit-note i[b-hi01hgi0tb] { color: var(--att-amber); font-style: normal; }
.att-edit-meta[b-hi01hgi0tb] { font-size: 11px; color: var(--att-muted); opacity: .8; }

/* ── Pending tab ── */
.att-pend-list[b-hi01hgi0tb] { padding: 6px 16px 14px; max-height: 640px; overflow-y: auto; }
.att-pend-empty[b-hi01hgi0tb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--att-muted);
    font-size: 13px;
}
.att-pend-empty-ok[b-hi01hgi0tb] { font-size: 36px; color: var(--att-emerald); }

.att-pend-card[b-hi01hgi0tb] {
    border: 1px solid var(--att-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    cursor: pointer;
    background: #fff;
    transition: box-shadow .15s, border-color .15s, background .1s;
}
.att-pend-card:hover[b-hi01hgi0tb] { background: #f7f9fa; }
.att-pend-sel[b-hi01hgi0tb] { border-color: var(--att-emerald) !important; background: #f2f7f5; }

.att-pend-row1[b-hi01hgi0tb] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.att-pend-name[b-hi01hgi0tb] { font-size: 14px; font-weight: 600; color: var(--att-ink); }
.att-pend-date[b-hi01hgi0tb] { font-size: 11.5px; color: var(--att-muted); font-variant-numeric: tabular-nums; }
.att-pend-shift[b-hi01hgi0tb] {
    font-size: 11.5px;
    color: var(--att-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 7px;
    font-variant-numeric: tabular-nums;
}
.att-pend-shift i[b-hi01hgi0tb] { font-size: 10px; }
.att-pend-pills[b-hi01hgi0tb] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.att-pend-pill[b-hi01hgi0tb] {
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.att-pend-ci[b-hi01hgi0tb] { background: #e7f3ee; color: var(--att-emerald); }
.att-pend-co[b-hi01hgi0tb] { background: #f1f4f6; color: var(--att-ink); border: 1px solid var(--att-border); }
.att-pend-dim[b-hi01hgi0tb] { background: #eef1f3; color: var(--att-muted); }
.att-pend-est[b-hi01hgi0tb] { font-size: 11.5px; color: var(--att-muted); display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.att-pend-pay[b-hi01hgi0tb] { color: var(--att-emerald); font-weight: 600; }

/* Pending detail */
.att-pend-det[b-hi01hgi0tb] { display: flex; flex-direction: column; }
.att-pend-det-hd[b-hi01hgi0tb] { border-bottom: 1px solid var(--att-hair); padding-bottom: 14px; margin-bottom: 14px; }
.att-pend-det-row1[b-hi01hgi0tb] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.att-pend-det-emp[b-hi01hgi0tb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-pend-det-name[b-hi01hgi0tb] { font-size: 17px; font-weight: 700; color: var(--att-ink); letter-spacing: -.2px; }
.att-pend-det-meta[b-hi01hgi0tb] {
    font-size: 12px;
    color: var(--att-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.att-pend-det-meta i[b-hi01hgi0tb] { font-size: 11px; }

/* Timeline (pending) */
.att-pend-tl-card[b-hi01hgi0tb] { padding: 14px 16px; }
.att-pend-tl[b-hi01hgi0tb] { display: flex; align-items: center; }
.att-pend-tl-step[b-hi01hgi0tb] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.att-pend-tl-line[b-hi01hgi0tb] { flex: 1; height: 1.5px; min-width: 14px; }
.att-tl-line-ok[b-hi01hgi0tb] { background: var(--att-emerald); }
.att-tl-line-dim[b-hi01hgi0tb] { background: var(--att-hair); }
.att-pend-tl-dot[b-hi01hgi0tb] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.att-tl-dot-ok[b-hi01hgi0tb]     { background: var(--att-emerald); color: #fff; }
.att-tl-dot-late[b-hi01hgi0tb]   { background: var(--att-amber); color: #fff; }
.att-tl-dot-active[b-hi01hgi0tb] { background: var(--att-amber); color: #fff; }
.att-tl-dot-dim[b-hi01hgi0tb]    { background: #fafbfc; color: var(--att-muted); border: 1px solid var(--att-border); }
.att-pend-tl-body[b-hi01hgi0tb] { text-align: center; }
.att-pend-tl-label[b-hi01hgi0tb] { font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--att-ink); }
.att-tl-label-warn[b-hi01hgi0tb] { color: var(--att-amber); }
.att-pend-tl-time[b-hi01hgi0tb]  { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-pend-tl-note[b-hi01hgi0tb]  { font-size: 10px; white-space: nowrap; color: var(--att-muted); }
.att-tl-note-ok[b-hi01hgi0tb]   { color: var(--att-emerald); }
.att-tl-note-warn[b-hi01hgi0tb] { color: var(--att-amber); }
.att-tl-note-err[b-hi01hgi0tb]  { color: var(--att-red); }

/* Estimate bar — dữ liệu tiền: nền cream champagne */
.att-pend-est-bar[b-hi01hgi0tb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: #fbf8f1;
    border: 1px solid #ecdfc3;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
}
.att-est-ico[b-hi01hgi0tb] { color: var(--att-amber); }
.att-est-pay[b-hi01hgi0tb] { color: #a16207; }
.att-est-rate[b-hi01hgi0tb] { color: var(--att-muted); font-size: 11px; }

/* Suggest / action cards */
.att-pend-suggest-card[b-hi01hgi0tb] { padding: 12px 16px; }
.att-pend-lbl[b-hi01hgi0tb] {
    font-size: 11px;
    font-weight: 600;
    color: var(--att-ink);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 8px;
}
.att-pend-lbl-inline[b-hi01hgi0tb] { margin: 0; }
.att-suggest-arrow[b-hi01hgi0tb] { color: var(--att-muted); font-size: 13px; }
.att-pend-suggest-row[b-hi01hgi0tb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-pend-status-sel[b-hi01hgi0tb] {
    width: auto;
    font-size: 13px;
    height: 32px;
    padding: 3px 10px;
    border: 1px solid var(--att-border);
    border-radius: 8px;
}
.att-pend-action-card[b-hi01hgi0tb] { padding: 12px 16px; }
.att-pend-act-row[b-hi01hgi0tb] { display: flex; gap: 8px; }
.att-pend-approve-btn[b-hi01hgi0tb] { flex: 1; justify-content: center; }
.att-pend-confirm-row[b-hi01hgi0tb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Progress stepper (list detail) ── */
.att-timeline-card[b-hi01hgi0tb] { padding: 24px 22px 20px; }
.att-prog[b-hi01hgi0tb] { display: flex; align-items: flex-start; }
.att-prog-step[b-hi01hgi0tb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 96px;
}
.att-prog-dot[b-hi01hgi0tb] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.att-prog-dot svg[b-hi01hgi0tb] { width: 18px; height: 18px; }
.att-prog-step--done .att-prog-dot[b-hi01hgi0tb] {
    background: var(--att-emerald);
    color: #fff;
    box-shadow: 0 0 0 5px #e7f3ee;
}
.att-prog-step--active .att-prog-dot[b-hi01hgi0tb] {
    background: #fff;
    color: var(--att-emerald);
    border: 2.5px solid var(--att-emerald);
    box-shadow: 0 0 0 5px #e7f3ee;
    animation: att-prog-pulse-b-hi01hgi0tb 1.8s ease-in-out infinite;
}
@keyframes att-prog-pulse-b-hi01hgi0tb {
    0%, 100% { box-shadow: 0 0 0 5px #e7f3ee; }
    50%      { box-shadow: 0 0 0 8px #e7f3ee; }
}
.att-prog-step--wait .att-prog-dot[b-hi01hgi0tb] {
    background: #fff;
    color: var(--att-muted);
    border: 1.5px dashed var(--att-border);
}
.att-prog-cap[b-hi01hgi0tb] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 11px;
}
.att-prog-step--done .att-prog-cap[b-hi01hgi0tb]   { color: var(--att-emerald); }
.att-prog-step--active .att-prog-cap[b-hi01hgi0tb] { color: var(--att-amber); }
.att-prog-step--wait .att-prog-cap[b-hi01hgi0tb]   { color: var(--att-muted); opacity: .7; }
.att-prog-label[b-hi01hgi0tb] { font-weight: 600; font-size: 13.5px; margin-top: 2px; color: var(--att-ink); }
.att-prog-step--wait .att-prog-label[b-hi01hgi0tb] { color: var(--att-muted); }
.att-prog-sub[b-hi01hgi0tb] { font-size: 11.5px; color: var(--att-muted); margin-top: 2px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.att-prog-bar[b-hi01hgi0tb] {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--att-hair);
    margin-top: 20px;
    min-width: 24px;
    transition: background .2s;
}
.att-prog-bar--done[b-hi01hgi0tb] { background: var(--att-emerald); }
.att-prog-edit[b-hi01hgi0tb] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--att-hair);
}
.att-prog-edit-dot[b-hi01hgi0tb] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fdf3e2;
    color: var(--att-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.att-prog-edit-title[b-hi01hgi0tb] { font-weight: 600; font-size: 13px; color: var(--att-ink); }
.att-prog-edit-reason[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); font-style: italic; margin-top: 2px; }

/* ── Modals ── */
.att-ci-mbox[b-hi01hgi0tb] { width: 460px; }
.att-ci-row[b-hi01hgi0tb] { align-items: end; }
.att-ci-field-lg[b-hi01hgi0tb] { flex: 2; }
.att-ci-field-sm[b-hi01hgi0tb] { flex: 1; }
.att-ci-search-btn[b-hi01hgi0tb] { width: 100%; justify-content: center; margin-bottom: 14px; }
.att-ci-spin[b-hi01hgi0tb] { animation: spin-b-hi01hgi0tb .8s linear infinite; }
.att-ci-section-label[b-hi01hgi0tb] {
    font-size: 11px;
    font-weight: 600;
    color: var(--att-ink);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 8px;
}
.att-ci-list[b-hi01hgi0tb] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.att-ci-item[b-hi01hgi0tb] {
    border: 1px solid var(--att-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    background: #fff;
    transition: background .1s, border-color .1s;
}
.att-ci-item:hover[b-hi01hgi0tb] { background: #f7f9fa; }
.att-ci-item.on[b-hi01hgi0tb] { border-color: var(--att-emerald); background: #f2f7f5; }
.att-ci-radio[b-hi01hgi0tb] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--att-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.att-ci-radio.on[b-hi01hgi0tb] { border-color: var(--att-emerald); }
.att-ci-radio-dot[b-hi01hgi0tb] { width: 9px; height: 9px; border-radius: 50%; background: var(--att-emerald); }
.att-ci-item-inner[b-hi01hgi0tb] { display: flex; align-items: center; gap: 10px; }
.att-ci-item-info[b-hi01hgi0tb] { flex: 1; min-width: 0; }
.att-ci-item-top[b-hi01hgi0tb] { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.att-ci-item-name[b-hi01hgi0tb] { font-weight: 600; font-size: 14px; color: var(--att-ink); }
.att-ci-item-time[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); font-variant-numeric: tabular-nums; }
.att-ci-dept-gap[b-hi01hgi0tb] { margin-left: 10px; }
.att-ci-item-ci[b-hi01hgi0tb] { font-size: 11px; color: var(--att-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

.att-modal-footer[b-hi01hgi0tb] { display: flex; gap: 10px; }
.att-modal-cancel[b-hi01hgi0tb] { flex: 1; }
.att-modal-submit[b-hi01hgi0tb] { flex: 2; justify-content: center; }
.att-submit-spin[b-hi01hgi0tb] { animation: spin-b-hi01hgi0tb .8s linear infinite; }

/* Edit modal */
.att-edit-mbox[b-hi01hgi0tb] { width: 460px; }
.att-edit-dt-row[b-hi01hgi0tb] { display: flex; align-items: center; gap: 6px; }
.att-edit-dt-date[b-hi01hgi0tb] { flex: 1.4; min-width: 0; }
.att-edit-dt-time[b-hi01hgi0tb] { flex: 1; min-width: 0; }
.att-edit-ctx[b-hi01hgi0tb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fafbfc;
    border: 1px solid var(--att-border);
    font-size: 13px;
}
.att-edit-alert-icon[b-hi01hgi0tb] { margin-top: 2px; color: var(--att-muted); }
.att-edit-alert-name[b-hi01hgi0tb] { font-weight: 600; color: var(--att-ink); }
.att-edit-alert-meta[b-hi01hgi0tb] { font-size: 12px; color: var(--att-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.att-required-star[b-hi01hgi0tb] { color: var(--att-red); }
.att-textarea-resize[b-hi01hgi0tb] { resize: vertical; }
.mb10[b-hi01hgi0tb] { margin-bottom: 10px; }

/* ── Flow guide modal ── */
.att-flow-overlay[b-hi01hgi0tb] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 30, 40, .45);
    display: flex; align-items: center; justify-content: center;
}
.att-flow-modal[b-hi01hgi0tb] {
    background: #fff;
    border: 1px solid var(--att-border, #e2e7ea);
    border-radius: 12px;
    width: min(680px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(20, 30, 40, .2);
}
.att-flow-modal-hd[b-hi01hgi0tb] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.att-flow-modal-title[b-hi01hgi0tb] {
    font-size: 15px; font-weight: 700; color: #293640;
    display: flex; align-items: center; gap: 7px;
}
.att-flow-modal-sub[b-hi01hgi0tb] { font-size: 12.5px; color: #6b7a85; margin: 0 0 20px; }
.att-flow-lane[b-hi01hgi0tb] {
    border-radius: 10px; padding: 16px;
    background: #fafbfc; border: 1px solid #e2e7ea;
}
.att-flow-lane-title[b-hi01hgi0tb] {
    font-size: 12px; font-weight: 600; margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
    color: #293640; text-transform: uppercase; letter-spacing: .6px;
}
.att-flow-step[b-hi01hgi0tb] { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: #293640; }
.att-flow-step strong[b-hi01hgi0tb] { display: block; margin-bottom: 1px; }
.att-flow-note[b-hi01hgi0tb] { font-size: 10.5px; color: #6b7a85; }
.att-flow-dot[b-hi01hgi0tb] { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: #05835f; }
.att-flow-connector[b-hi01hgi0tb] { width: 2px; height: 18px; margin: 4px 0 4px 4px; border-left: 2px dashed #cfe6dc; }
.att-flow-dest[b-hi01hgi0tb] {
    display: flex; align-items: center; gap: 10px;
    border-radius: 8px; padding: 10px 12px; margin-top: 4px;
    background: #05835f;
}
.att-flow-dest .ti[b-hi01hgi0tb] { font-size: 18px; color: #fff; }
.att-flow-dest-title[b-hi01hgi0tb] { font-size: 12px; font-weight: 700; color: #fff; }
.att-flow-dest-link[b-hi01hgi0tb]  { font-size: 10.5px; color: rgba(255, 255, 255, .75); }
.att-flow-footer[b-hi01hgi0tb] {
    display: flex; align-items: center; gap: 8px;
    margin-top: 20px; padding: 10px 14px;
    background: #e7f3ee; border: 1px solid #cfe6dc; border-radius: 8px;
    font-size: 12px; color: #05835f;
}
.att-flow-footer i[b-hi01hgi0tb] { color: #05835f; }
.att-flow-footer-link[b-hi01hgi0tb] { color: #05835f; text-decoration: underline; margin-left: 2px; }

/* When detail is open the ledger narrows — drop the two secondary columns so the
   essentials (name, shift, CI, CO, status, location) stay readable without scrolling. */
.att-cols--open .att-col-sched[b-hi01hgi0tb],
.att-cols--open .att-col-worked[b-hi01hgi0tb] { display: none; }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 900px) {
    .att-cols--open[b-hi01hgi0tb] { grid-template-columns: 1fr; }
    .att-dossier[b-hi01hgi0tb] { position: static; }
    /* single column again → restore the hidden table columns */
    .att-cols--open .att-col-sched[b-hi01hgi0tb],
    .att-cols--open .att-col-worked[b-hi01hgi0tb] { display: table-cell; }
}

@media (max-width: 768px) {
    .att-wrap[b-hi01hgi0tb] { gap: 12px; }
    .att-page-title[b-hi01hgi0tb] { font-size: 22px; }
    .att-head-date[b-hi01hgi0tb] { display: none; }

    .att-kpis[b-hi01hgi0tb] { grid-template-columns: 1fr 1fr; }
    .att-kpi[b-hi01hgi0tb] { min-width: 0; padding: 12px; }

    .att-toolbar[b-hi01hgi0tb] { flex-direction: column; align-items: stretch; }
    .att-toolbar-left[b-hi01hgi0tb] { display: grid; grid-template-columns: 1fr 1fr; }
    .att-date-input[b-hi01hgi0tb], .att-time-range[b-hi01hgi0tb] { grid-column: 1 / -1; }
    .att-time-input[b-hi01hgi0tb] { flex: 1; }
    .att-search-wrap[b-hi01hgi0tb] { max-width: none; width: 100%; }
    .att-btn-primary[b-hi01hgi0tb] { justify-content: center; }

    /* Hide low-priority columns on narrow screens; table scrolls for the rest */
    .att-col-sched[b-hi01hgi0tb], .att-col-worked[b-hi01hgi0tb] { display: none; }

    .att-dossier[b-hi01hgi0tb] { padding: 14px; }
    .att-prog[b-hi01hgi0tb] { flex-wrap: wrap; gap: 10px; }
    .att-prog-bar[b-hi01hgi0tb] { display: none; }

    .att-ci-mbox[b-hi01hgi0tb], .att-edit-mbox[b-hi01hgi0tb] { width: calc(100vw - 32px); }
}
/* _content/SeasonFlow.Web/Components/Pages/Attendance/DeviceFraudAlerts.razor.rz.scp.css */
/* ══ Cảnh báo thiết bị — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · đỏ #A32D2D (cảnh báo gian lận, chỉ chữ/dot) · amber #B45309.
   Không gradient, không SVG doodle, mỗi khối 1 điểm đậm 700. ══ */

.dfa-wrap[b-sxeqah3n7k] {
    --dfa-ink: #293640;
    --dfa-muted: #6b7a85;
    --dfa-border: #e2e7ea;
    --dfa-hair: #eef1f3;
    --dfa-emerald: #05835f;
    --dfa-amber: #b45309;
    --dfa-red: #a32d2d;
    --dfa-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--dfa-ink);
}

/* ── Page header ── */
.dfa-head[b-sxeqah3n7k] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.dfa-title[b-sxeqah3n7k] {
    font-size: 26px;
    font-weight: 700;
    color: var(--dfa-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.dfa-sub[b-sxeqah3n7k] { font-size: 13px; color: var(--dfa-muted); margin-top: 4px; }

/* ── Info hover note (giải thích trang kiểm tra gian lận) ── */
.dfa-info[b-sxeqah3n7k] {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 8px;
    cursor: help;
    outline: none;
}
.dfa-info > i[b-sxeqah3n7k] {
    font-size: 17px;
    color: var(--dfa-muted);
    transition: color .12s;
}
.dfa-info:hover > i[b-sxeqah3n7k],
.dfa-info:focus-visible > i[b-sxeqah3n7k] { color: var(--dfa-emerald); }

.dfa-tip[b-sxeqah3n7k] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-width: min(320px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--dfa-border);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(20, 30, 40, .14);
    padding: 14px 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s, transform .14s, visibility .14s;
    pointer-events: none;
    text-align: left;
    white-space: normal;
    letter-spacing: normal;
    font-weight: 400;
}
.dfa-info:hover .dfa-tip[b-sxeqah3n7k],
.dfa-info:focus-visible .dfa-tip[b-sxeqah3n7k] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* mũi tên nhỏ */
.dfa-tip[b-sxeqah3n7k]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid var(--dfa-border);
    border-top: 1px solid var(--dfa-border);
    transform: rotate(45deg);
}
.dfa-tip-h[b-sxeqah3n7k] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dfa-ink);
    margin-bottom: 6px;
}
.dfa-tip-p[b-sxeqah3n7k] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dfa-muted);
    margin: 0 0 8px;
}
.dfa-tip-sub[b-sxeqah3n7k] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dfa-muted);
    margin-bottom: 5px;
}
.dfa-tip-list[b-sxeqah3n7k] {
    margin: 0 0 8px;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dfa-tip-list li[b-sxeqah3n7k] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--dfa-ink);
}
.dfa-tip-note[b-sxeqah3n7k] {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--dfa-amber);
    margin: 0;
}

/* KPI strip */
.dfa-kpis[b-sxeqah3n7k] { display: flex; gap: 10px; flex-wrap: wrap; }
.dfa-kpi[b-sxeqah3n7k] {
    background: #fff;
    border: 1px solid var(--dfa-border);
    border-radius: 10px;
    box-shadow: var(--dfa-shadow);
    padding: 10px 16px;
    min-width: 112px;
}
.dfa-kpi-lbl[b-sxeqah3n7k] { font-size: 11.5px; color: var(--dfa-muted); margin-bottom: 3px; white-space: nowrap; }
.dfa-kpi-val[b-sxeqah3n7k] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dfa-ink);
    line-height: 1.1;
    white-space: nowrap;
}
.dfa-kpi-val--rd[b-sxeqah3n7k] { color: var(--dfa-red); }
.dfa-kpi-val--am[b-sxeqah3n7k] { color: var(--dfa-amber); }

/* ── Ledger widget ── */
.dfa-ledger[b-sxeqah3n7k] {
    background: #fff;
    border: 1px solid var(--dfa-border);
    border-radius: 12px;
    box-shadow: var(--dfa-shadow);
    overflow: hidden;
}
.dfa-toolbar[b-sxeqah3n7k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dfa-border);
}
.dfa-filter-label[b-sxeqah3n7k] { font-size: 12.5px; color: var(--dfa-muted); }
.dfa-date[b-sxeqah3n7k] {
    padding: 6px 10px;
    border: 1px solid var(--dfa-border);
    border-radius: 9px;
    font-size: 13px;
    background: #fff;
    color: var(--dfa-ink);
    font-variant-numeric: tabular-nums;
}

/* Nút quét: emerald primary duy nhất */
.dfa-btn-primary[b-sxeqah3n7k] {
    background: var(--dfa-emerald);
    border: 1px solid var(--dfa-emerald);
    color: #fff;
    font-weight: 600;
    margin-left: auto;
}
.dfa-btn-primary:hover[b-sxeqah3n7k] { background: #046b4e; border-color: #046b4e; color: #fff; }
.dfa-btn-primary:disabled[b-sxeqah3n7k] { opacity: .6; }

/* ── Loading / Empty ── */
.dfa-empty[b-sxeqah3n7k] {
    text-align: center;
    padding: 48px 16px;
    color: var(--dfa-muted);
    font-size: 13px;
}
.dfa-empty i[b-sxeqah3n7k] { font-size: 30px; display: block; margin: 0 auto 8px; color: var(--dfa-emerald); }
.dfa-empty p[b-sxeqah3n7k] { margin: 0; }

/* ── Alert rows ── */
.dfa-alert-list[b-sxeqah3n7k] { display: flex; flex-direction: column; }
.dfa-alert-card[b-sxeqah3n7k] {
    border-bottom: 1px solid var(--dfa-hair);
    border-left: 3px solid var(--dfa-red);
}
.dfa-alert-card:last-child[b-sxeqah3n7k] { border-bottom: none; }
.dfa-alert-header[b-sxeqah3n7k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .1s;
}
.dfa-alert-header:hover[b-sxeqah3n7k] { background: #f7f9fa; }
.dfa-alert-left[b-sxeqah3n7k] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dfa-alert-icon[b-sxeqah3n7k] { font-size: 20px; color: var(--dfa-red); flex-shrink: 0; }
.dfa-alert-device[b-sxeqah3n7k] { font-weight: 600; font-size: 13.5px; color: var(--dfa-ink); }
.dfa-alert-device code[b-sxeqah3n7k] {
    font-size: 12px;
    background: #f9eceb;
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--dfa-red);
    font-variant-numeric: tabular-nums;
}
.dfa-alert-meta[b-sxeqah3n7k] { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.dfa-alert-period[b-sxeqah3n7k] { font-size: 12px; color: var(--dfa-muted); font-variant-numeric: tabular-nums; }
.dfa-alert-chev[b-sxeqah3n7k] { color: var(--dfa-muted); flex-shrink: 0; }

/* Pill: dot + chữ */
.dfa-pill[b-sxeqah3n7k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.dfa-pill-dot[b-sxeqah3n7k] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dfa-pill--rd[b-sxeqah3n7k] { background: #f9eceb; color: var(--dfa-red); }

/* ID chip */
.dfa-id[b-sxeqah3n7k] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--dfa-border);
    color: var(--dfa-ink);
    font-weight: 500;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: 4px;
}
.dfa-emp-name[b-sxeqah3n7k] { font-weight: 600; color: var(--dfa-ink); }

/* ── Ledger detail table ── */
.dfa-alert-detail[b-sxeqah3n7k] { padding: 0 16px 14px; }
.dfa-table[b-sxeqah3n7k] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.dfa-table thead tr[b-sxeqah3n7k] { background: #fafbfc; }
.dfa-table th[b-sxeqah3n7k] {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dfa-muted);
    border-bottom: 1px solid var(--dfa-border);
    white-space: nowrap;
}
.dfa-table td[b-sxeqah3n7k] { padding: 9px 10px; border-bottom: 1px solid var(--dfa-hair); }
.dfa-table tr:last-child td[b-sxeqah3n7k] { border-bottom: none; }
.dfa-table tbody tr:hover[b-sxeqah3n7k] { background: #f7f9fa; }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 768px) {
    .dfa-wrap[b-sxeqah3n7k] { gap: 12px; }
    .dfa-title[b-sxeqah3n7k] { font-size: 22px; }

    .dfa-kpis[b-sxeqah3n7k] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .dfa-kpi[b-sxeqah3n7k] { min-width: 0; }

    .dfa-toolbar[b-sxeqah3n7k] { display: grid; grid-template-columns: auto 1fr; }
    .dfa-btn-primary[b-sxeqah3n7k] { grid-column: 1 / -1; justify-content: center; margin-left: 0; }

    .dfa-alert-detail[b-sxeqah3n7k] { overflow-x: auto; }
    .dfa-table[b-sxeqah3n7k] { min-width: 520px; }

    .dfa-tip[b-sxeqah3n7k] { width: min(300px, calc(100vw - 32px)); }
}
/* _content/SeasonFlow.Web/Components/Pages/Attendance/EmployeeCheckIn.razor.rz.scp.css */
/* ── Loading / error states ───────────────────── */
.eci-loading[b-iu470j9emk] {
    padding: 48px;
    text-align: center;
    color: var(--ink3);
}
.eci-loading-icon[b-iu470j9emk] { font-size: 26px; display: block; margin-bottom: 10px; }
.eci-not-employee[b-iu470j9emk] { padding: 40px; text-align: center; color: var(--ink3); }
.eci-alert-margin[b-iu470j9emk] { margin: 24px; }

/* ── Page wrapper ────────────────────────────── */
.eci-wrap[b-iu470j9emk] {
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.content:has(.eci-wrap)[b-iu470j9emk] {
    background:
        radial-gradient(circle at 18% 0%, rgba(29,78,216,.05), transparent 32%),
        linear-gradient(180deg, #eef2f5 0%, #e4eaee 100%);
}

/* ── Daily card ──────────────────────────────── */
.eci-daily-card[b-iu470j9emk] {
    background: var(--card);
    border-radius: 20px;
    border: .5px solid var(--border);
    padding: 28px 32px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Left: clock panel */
.eci-daily-left[b-iu470j9emk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 220px;
}

.eci-daily-heading[b-iu470j9emk] {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 2px;
    letter-spacing: 0;
}

.eci-daily-date[b-iu470j9emk] {
    font-size: 13px;
    color: #1d4ed8;
    margin-bottom: 16px;
    font-weight: 600;
}

.eci-analog-svg[b-iu470j9emk] {
    width: 200px;
    height: 200px;
}

.eci-clock-shift-label[b-iu470j9emk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink2);
    background: var(--surface);
    border: .5px solid var(--border);
    border-radius: 20px;
    padding: 4px 14px;
    margin-top: 10px;
}

.eci-clock-note[b-iu470j9emk] {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    margin-top: 12px;
    font-style: normal;
    line-height: 1.45;
    max-width: 230px;
}

/* Right panel */
.eci-daily-right[b-iu470j9emk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Check In / Check Out cards */
.eci-time-cards[b-iu470j9emk] {
    display: flex;
    gap: 14px;
}

.eci-time-card[b-iu470j9emk] {
    flex: 1;
    background: var(--surface);
    border-radius: 14px;
    border: .5px solid var(--border);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eci-tc-label[b-iu470j9emk] {
    font-size: 13px;
    color: var(--ink2);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.eci-tc-value[b-iu470j9emk] {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--ink);
    letter-spacing: 1px;
}

/* Greeting banner */
.eci-greeting-banner[b-iu470j9emk] {
    flex: 1;
    background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 120px;
    position: relative;
}

.eci-greeting-text[b-iu470j9emk] {
    font-size: 18px;
    font-weight: 700;
    color: #0369a1;
    z-index: 1;
}

.eci-greeting-illus[b-iu470j9emk] {
    width: 180px;
    height: 130px;
    flex-shrink: 0;
}

/* ── Overdue / next-shift banners ────────────── */
.eci-next-shift[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bb);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid var(--bm);
}
.eci-next-icon[b-iu470j9emk]  { font-size: 28px; color: var(--bm); flex-shrink: 0; }
.eci-next-title[b-iu470j9emk] { font-size: 15px; font-weight: 700; color: var(--bm); }
.eci-next-sub[b-iu470j9emk]   { font-size: 12px; color: var(--ink2); margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }

.eci-late-warning[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ab);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid var(--am);
}
.eci-late-icon[b-iu470j9emk]  { font-size: 30px; color: var(--am); flex-shrink: 0; }
.eci-late-title[b-iu470j9emk] { font-size: 15px; font-weight: 700; color: var(--am); }
.eci-late-sub[b-iu470j9emk]   { font-size: 12px; color: var(--ink2); margin-top: 3px; }

/* ── Shift cards ─────────────────────────────── */
.eci-list[b-iu470j9emk] { display: flex; flex-direction: column; gap: 14px; }

.eci-section-label[b-iu470j9emk] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: -4px;
}

.eci-shift-card[b-iu470j9emk] {
    background: var(--card);
    border-radius: 14px;
    border: .5px solid var(--border);
    overflow: hidden;
}

.eci-card-hd[b-iu470j9emk] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    transition: background .12s;
}
.eci-card-hd:hover[b-iu470j9emk] { background: var(--surface); }
.eci-card-hd-content[b-iu470j9emk] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.eci-card-chevron[b-iu470j9emk] { font-size: 16px; color: var(--ink3); flex-shrink: 0; }
.eci-card-body[b-iu470j9emk]    { padding: 0 20px 18px; }

.eci-shift-name[b-iu470j9emk]  { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.eci-shift-times[b-iu470j9emk] { font-size: 13px; color: var(--ink3); margin-bottom: 3px; }
.eci-dept-name[b-iu470j9emk]   { font-size: 12px; color: var(--ink2); font-weight: 500; }
.eci-dept-icon[b-iu470j9emk]   { color: var(--bm); }

.eci-error[b-iu470j9emk] {
    background: var(--rb);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--red);
}

.eci-checkin-box[b-iu470j9emk] {
    background: var(--gb);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.eci-checkin-icon[b-iu470j9emk]   { font-size: 18px; color: var(--gm); }
.eci-checkin-label[b-iu470j9emk]  { font-weight: 600; font-size: 14px; color: var(--gm); }
.eci-checkin-status[b-iu470j9emk] { font-size: 13px; color: var(--ink2); }

.eci-gps-row[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: .5px solid #97C45940;
}
.eci-gps-icon[b-iu470j9emk]   { font-size: 14px; color: var(--gm); }
.eci-gps-coords[b-iu470j9emk] { font-size: 12px; color: var(--ink2); }
.eci-map-btn[b-iu470j9emk]    { font-size: 11px; margin-left: auto; }

.eci-checkout-box[b-iu470j9emk] {
    background: var(--bb);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eci-checkout-icon[b-iu470j9emk]  { font-size: 18px; color: var(--bm); }
.eci-checkout-label[b-iu470j9emk] { font-weight: 600; font-size: 14px; color: var(--bm); }
.eci-early-note[b-iu470j9emk]     { font-size: 12px; color: var(--am); }

.eci-btn-full[b-iu470j9emk]    { width: 100%; justify-content: center; padding: 11px; }
.eci-btn-full-lg[b-iu470j9emk] { width: 100%; justify-content: center; padding: 12px; }
.eci-gps-hint[b-iu470j9emk]   { text-align: center; font-size: 11px; color: var(--ink3); margin-top: 8px; }

/* ── Weekly section ──────────────────────────── */
.eci-weekly-section[b-iu470j9emk] {
    background: var(--card);
    border-radius: 22px;
    border: 1px solid rgba(15,32,39,.08);
    padding: 26px 28px;
    box-shadow: 0 18px 48px rgba(15,32,39,.07);
}

.eci-weekly-hd[b-iu470j9emk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.eci-weekly-title[b-iu470j9emk] {
    font-size: 16px;
    font-weight: 700;
}

.eci-week-drop-btn[b-iu470j9emk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid rgba(15,32,39,.12);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}
.eci-week-drop-btn:hover[b-iu470j9emk] { border-color: #2563eb; background: #fff; }

.eci-week-drop-list[b-iu470j9emk] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.eci-week-drop-item[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 9px;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink2);
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    width: 100%;
}
.eci-week-drop-item:hover[b-iu470j9emk] { background: var(--surface); color: var(--ink); }

.eci-week-drop-active[b-iu470j9emk] {
    background: var(--bb) !important;
    color: var(--bm) !important;
    font-weight: 700;
}

.eci-week-drop-now[b-iu470j9emk] {
    font-size: 10px;
    font-weight: 700;
    background: var(--bm);
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 2px;
}

.eci-weekly-body[b-iu470j9emk] {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* Chart panel */
.eci-chart-panel[b-iu470j9emk] {
    flex: 1;
    min-width: 0;
}

.eci-weekly-total[b-iu470j9emk] {
    font-size: 32px;
    font-weight: 800;
    font-family: var(--mono);
    margin-bottom: 12px;
    letter-spacing: -1px;
}

.eci-bar-svg[b-iu470j9emk] {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Day list */
.eci-day-list[b-iu470j9emk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eci-day-item[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    border-radius: 16px;
    padding: 14px 18px;
    border: 1px solid rgba(15,32,39,.08);
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
    cursor: pointer;
    width: 100%;
    font-family: var(--font);
    text-align: left;
    min-width: 0;
}

.eci-day-today[b-iu470j9emk] {
    border-color: rgba(37,99,235,.35);
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow: 0 10px 24px rgba(37,99,235,.10);
}

.eci-day-weekend[b-iu470j9emk] {
    opacity: .78;
}

.eci-day-icon-wrap[b-iu470j9emk] {
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 12%, #fff);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.eci-day-info[b-iu470j9emk] { flex: 1 1 auto; min-width: 0; }

.eci-day-name[b-iu470j9emk] {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 3px;
    color: var(--ink);
}

.eci-day-date[b-iu470j9emk] {
    font-size: 12px;
    color: var(--ink3);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eci-day-right[b-iu470j9emk] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    min-width: fit-content;
}

.eci-day-badge[b-iu470j9emk] {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eci-day-out[b-iu470j9emk] {
    font-size: 13px;
    color: var(--ink2);
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Page header ─────────────────────────────── */
.eci-page-hd[b-iu470j9emk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Main clock + shift list block ──────────── */
.eci-main-block[b-iu470j9emk] {
    background: rgba(255,255,255,.96);
    border-radius: 24px;
    border: 1px solid rgba(15,32,39,.08);
    padding: 26px;
    display: flex;
    gap: 28px;
    align-items: stretch;
    min-width: 0;
    box-shadow: 0 22px 60px rgba(15,32,39,.09);
}

.eci-mb-clock[b-iu470j9emk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 300px;
    padding: 18px 20px 16px;
    border-radius: 20px;
    border: 1px solid rgba(15,32,39,.09);
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.95), rgba(255,255,255,0) 38%),
        linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 18px 42px rgba(15,32,39,.08);
}

.eci-mb-svg[b-iu470j9emk] {
    width: 194px;
    height: 194px;
    overflow: visible;
    filter: drop-shadow(0 12px 18px rgba(15,32,39,.08));
}

.eci-clock-readout[b-iu470j9emk] {
    width: 100%;
    margin-top: 2px;
    text-align: center;
}

.eci-clock-kicker[b-iu470j9emk] {
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    color: #516174;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.eci-clock-time[b-iu470j9emk] {
    font-family: var(--font);
    font-size: 39px;
    line-height: .92;
    font-weight: 600;
    letter-spacing: .02em;
    color: #132331;
    font-variant-numeric: tabular-nums;
}

.eci-clock-status[b-iu470j9emk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.eci-clock-status span[b-iu470j9emk] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52,211,153,.14);
}

.eci-clock-status.is-warn span[b-iu470j9emk] {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,.14);
}

/* Right: shift status list */
.eci-mb-right[b-iu470j9emk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding-top: 0;
}

.eci-mb-greeting[b-iu470j9emk] {
    padding: 20px 0;
}

/* Per-shift status card */
.eci-sr-card[b-iu470j9emk] {
    background: linear-gradient(180deg, #fff, #f8fafc);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(15,32,39,.08);
    min-width: 0;
}

.eci-sr-head[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eci-sr-icon[b-iu470j9emk] { font-size: 26px; flex-shrink: 0; }

.eci-sr-title[b-iu470j9emk] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.eci-sr-sub[b-iu470j9emk] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.eci-sr-meta[b-iu470j9emk] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink2);
    min-width: 0;
}

.eci-sr-meta i[b-iu470j9emk] { font-size: 12px; }

.eci-sr-times[b-iu470j9emk] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: .5px solid var(--border);
}

.eci-sr-t[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-family: var(--mono);
    color: #475569;
}

/* ── Back button ─────────────────────────────── */
.eci-back-btn[b-iu470j9emk] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 14px;
    color: var(--ink2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-right: 10px;
    transition: color .12s;
}
.eci-back-btn:hover[b-iu470j9emk] { color: var(--ink); }

.eci-weekly-title[b-iu470j9emk] {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
}

/* ── Day detail ──────────────────────────────── */
.eci-day-detail[b-iu470j9emk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

/* ── Day detail total box ────────────────────── */

.eci-dd-list[b-iu470j9emk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eci-dd-card[b-iu470j9emk] {
    background: var(--surface);
    border-radius: 12px;
    border: .5px solid var(--border);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eci-dd-card-hd[b-iu470j9emk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.eci-dd-shift-name[b-iu470j9emk] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}

.eci-dd-shift-meta[b-iu470j9emk] {
    font-size: 12px;
    color: var(--ink3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.eci-dd-times[b-iu470j9emk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: .5px solid var(--border);
}

.eci-dd-t[b-iu470j9emk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink2);
    font-family: var(--mono);
}

.eci-dd-t i[b-iu470j9emk] { font-size: 14px; }
.eci-dd-t span:first-of-type[b-iu470j9emk] { color: var(--ink3); font-family: var(--font); min-width: 70px; }
.eci-dd-t strong[b-iu470j9emk] { color: var(--ink); font-weight: 700; }

.eci-dd-late[b-iu470j9emk] {
    font-size: 11px;
    background: var(--ab);
    color: var(--am);
    border-radius: 6px;
    padding: 1px 7px;
    font-family: var(--font);
    font-weight: 600;
    margin-left: 4px;
}

/* Make day items clickable */
.eci-day-item[b-iu470j9emk] {
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-align: left;
    width: 100%;
    font-family: var(--font);
    border: none;
}
.eci-day-item:hover[b-iu470j9emk] {
    background: #fff;
    border-color: rgba(37,99,235,.30);
    box-shadow: 0 12px 24px rgba(15,32,39,.08);
    transform: translateY(-1px);
}

/* ── Illustration banner cards ───────────────── */
.eci-banner[b-iu470j9emk] {
    border-radius: 20px;
    padding: 34px 36px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    min-height: 230px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.eci-banner-chill[b-iu470j9emk] {
    background:
        radial-gradient(circle at 16% 16%, rgba(20,184,166,.18), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f2fbf8 58%, #eef9ff 100%);
    border: 1px solid rgba(16,185,129,.38);
}

.eci-banner-warn[b-iu470j9emk] {
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
    border: 1px solid rgba(245,158,11,.35);
}

.eci-banner-done[b-iu470j9emk] {
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    border: 1px solid rgba(20,184,166,.36);
}

.eci-banner-art[b-iu470j9emk] {
    display: none;
}

.eci-banner-text[b-iu470j9emk] {
    flex: 1;
    min-width: 0;
}

.eci-banner-title[b-iu470j9emk] {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.3;
}

.eci-banner-sub[b-iu470j9emk] {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    max-width: 520px;
}

.eci-terminal-head[b-iu470j9emk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.eci-terminal-icon[b-iu470j9emk] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,185,129,.12);
    color: #047857;
    border: 1px solid rgba(16,185,129,.18);
    box-shadow: 0 12px 26px rgba(16,185,129,.10);
}
.eci-terminal-icon i[b-iu470j9emk] { font-size: 30px; }

.eci-terminal-kicker[b-iu470j9emk] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #64748b;
}

.eci-terminal-metrics[b-iu470j9emk] {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(15,32,39,.10);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.eci-terminal-metric[b-iu470j9emk] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    min-width: 0;
}
.eci-terminal-metric i[b-iu470j9emk] {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #047857;
    font-size: 18px;
}
.eci-terminal-metric span[b-iu470j9emk] {
    font-size: 12px;
    color: #64748b;
}
.eci-terminal-metric strong[b-iu470j9emk] {
    font-size: 15px;
    color: #0f2027;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eci-banner-co-btn[b-iu470j9emk] {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
}

.eci-banner-pending[b-iu470j9emk] {
    margin-top: 10px;
    font-size: 13px;
    color: var(--am);
    display: flex;
    align-items: center;
    gap: 6px;
}

.eci-banner-link[b-iu470j9emk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #ef4444;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.eci-banner-link:hover[b-iu470j9emk] { color: #b91c1c; }

/* Focused shift card (driving the clock arc) */
.eci-sr-card-focused[b-iu470j9emk] {
    border-color: rgba(20,184,166,.55) !important;
    background: #f8fffc !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
    /* Page wrapper */
    .eci-wrap[b-iu470j9emk] { gap: 14px; }

    /* Main clock + shift block: stack vertically */
    .eci-main-block[b-iu470j9emk] {
        flex-direction: column;
        padding: 20px 18px;
        gap: 20px;
    }
    .eci-mb-clock[b-iu470j9emk] { width: 100%; box-sizing: border-box; }
    .eci-mb-svg[b-iu470j9emk] { width: 160px; height: 160px; }
    .eci-clock-time[b-iu470j9emk] { font-size: 38px; }
    .eci-clock-status[b-iu470j9emk] {
        font-size: 12px;
        margin-top: 10px;
        max-width: 240px;
        text-align: center;
    }
    .eci-clock-note[b-iu470j9emk] { font-size: 10px; }
    .eci-mb-right[b-iu470j9emk] { gap: 10px; }

    /* Banner: shrink art on mid-screens */
    .eci-banner[b-iu470j9emk] { padding: 20px 20px; gap: 16px; min-height: 140px; }
    .eci-banner-art[b-iu470j9emk] { width: 160px; height: 120px; }
    .eci-banner-title[b-iu470j9emk] { font-size: 17px; }
    .eci-banner-sub[b-iu470j9emk] { font-size: 13px; }
    .eci-terminal-metrics[b-iu470j9emk] { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; padding-top: 16px; }
    .eci-terminal-metric[b-iu470j9emk] {
        min-height: 44px;
        padding: 8px 0;
    }

    /* Weekly section */
    .eci-weekly-section[b-iu470j9emk] { padding: 18px 18px; }
    .eci-weekly-body[b-iu470j9emk] { flex-direction: column; }
    .eci-chart-panel[b-iu470j9emk],
    .eci-day-list[b-iu470j9emk] { width: 100%; }
    .eci-bar-svg[b-iu470j9emk] { max-width: 100%; }

    /* Week dropdown: full width */
    .eci-week-drop-btn[b-iu470j9emk] { width: 100%; justify-content: space-between; }
    .eci-week-drop-list[b-iu470j9emk] { left: 0; right: 0; min-width: unset; }

    /* Time cards (check-in / check-out) */
    .eci-time-cards[b-iu470j9emk] { flex-direction: column; }
    .eci-tc-value[b-iu470j9emk] { font-size: 20px; }

    /* Legacy daily card */
    .eci-daily-card[b-iu470j9emk] { flex-direction: column; padding: 22px 18px; }
    .eci-daily-left[b-iu470j9emk] { min-width: unset; width: 100%; }

    /* Shift row cards */
    .eci-card-hd[b-iu470j9emk] { padding: 14px 16px; }
    .eci-card-body[b-iu470j9emk] { padding: 0 16px 14px; }
    .eci-shift-name[b-iu470j9emk] { font-size: 14px; }

    /* Day list items */
    .eci-day-item[b-iu470j9emk] { padding: 12px 14px; gap: 10px; min-height: 64px; }
    .eci-day-icon-wrap[b-iu470j9emk] { font-size: 20px; width: 30px; }
    .eci-day-name[b-iu470j9emk] { font-size: 14px; }
}

@media (max-width: 480px) {
    .eci-main-block[b-iu470j9emk] { padding: 12px; border-radius: 14px; gap: 12px; }
    .eci-mb-clock[b-iu470j9emk] { padding: 14px 12px 12px; border-radius: 14px; }
    .eci-mb-svg[b-iu470j9emk] { width: 136px; height: 136px; }
    .eci-clock-readout[b-iu470j9emk] { margin-top: 0; }
    .eci-clock-time[b-iu470j9emk] { font-size: 32px; }
    .eci-clock-kicker[b-iu470j9emk] { font-size: 8px; margin-bottom: 6px; }
    .eci-clock-status[b-iu470j9emk] {
        max-width: 220px;
        margin-top: 8px;
        gap: 7px;
        font-size: 11px;
    }
    .eci-clock-status span[b-iu470j9emk] {
        width: 8px;
        height: 8px;
    }
    .eci-sr-card[b-iu470j9emk] { padding: 12px; }
    .eci-sr-meta[b-iu470j9emk] { gap: 6px; }
    .eci-sr-meta span[b-iu470j9emk] { max-width: 100%; }

    /* Banner: hide art entirely on small phones */
    .eci-banner-art[b-iu470j9emk] { display: none; }
    .eci-banner[b-iu470j9emk] { min-height: unset; padding: 14px; border-radius: 14px; }
    .eci-banner-title[b-iu470j9emk] { font-size: 16px; }
    .eci-terminal-head[b-iu470j9emk] { margin-bottom: 12px; }
    .eci-terminal-icon[b-iu470j9emk] { width: 44px; height: 44px; }
    .eci-terminal-icon i[b-iu470j9emk] { font-size: 24px; }
    .eci-terminal-kicker[b-iu470j9emk] { font-size: 10px; letter-spacing: .08em; }
    .eci-terminal-metrics[b-iu470j9emk] { gap: 6px; margin-top: 14px; padding-top: 12px; }
    .eci-terminal-metric[b-iu470j9emk] {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 8px;
        min-height: 42px;
    }
    .eci-terminal-metric i[b-iu470j9emk] {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 16px;
    }
    .eci-terminal-metric span[b-iu470j9emk] { font-size: 11px; }
    .eci-terminal-metric strong[b-iu470j9emk] { font-size: 14px; }

    /* Weekly total number */
    .eci-weekly-total[b-iu470j9emk] { font-size: 26px; }
    .eci-weekly-section[b-iu470j9emk] { padding: 14px 12px; border-radius: 14px; }
    .eci-weekly-hd[b-iu470j9emk] { align-items: stretch; }
    .eci-weekly-title[b-iu470j9emk] { font-size: 15px; }
    .eci-day-item[b-iu470j9emk] { align-items: flex-start; padding: 12px; min-height: 68px; }
    .eci-day-date[b-iu470j9emk] { white-space: normal; }
    .eci-day-right[b-iu470j9emk] { max-width: 42%; }
    .eci-day-badge[b-iu470j9emk] { max-width: 100%; }

    /* Greeting illustration */
    .eci-greeting-illus[b-iu470j9emk] { width: 100px; height: 75px; }
}
/* _content/SeasonFlow.Web/Components/Pages/Attendance/WorkClock.razor.rz.scp.css */
/* ══ Đồng hồ ca làm — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (đang làm/tích cực) · amber #B45309 (trễ/sắp tới) · đỏ #A32D2D chỉ chữ.
   Không gradient, không SVG pastel, mỗi khối 1 điểm đậm 700. ══ */

.clk-wrap[b-7k4eiu54r6] {
    --clk-ink: #293640;
    --clk-muted: #6b7a85;
    --clk-border: #e2e7ea;
    --clk-hair: #eef1f3;
    --clk-emerald: #05835f;
    --clk-amber: #b45309;
    --clk-red: #a32d2d;
    --clk-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--clk-ink);
}

/* ── Page header ── */
.clk-head[b-7k4eiu54r6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.clk-title[b-7k4eiu54r6] {
    font-size: 26px;
    font-weight: 700;
    color: var(--clk-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.clk-sub[b-7k4eiu54r6] {
    font-size: 13px;
    color: var(--clk-muted);
    margin-top: 4px;
}

/* ── Tab bar: gạch chân trên hairline (theo mẫu) ── */
.clk-tabsbar[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--clk-border);
    overflow-x: auto;
}
.clk-tabs[b-7k4eiu54r6] { display: flex; flex: 1; gap: 22px; }
.clk-tab[b-7k4eiu54r6] {
    padding: 10px 2px 12px;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--clk-muted);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .12s, box-shadow .12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.clk-tab:hover[b-7k4eiu54r6] { color: var(--clk-ink); }
.clk-tab.on[b-7k4eiu54r6] {
    color: var(--clk-emerald);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--clk-emerald);
}
.clk-refresh-hint[b-7k4eiu54r6] {
    font-size: 11px;
    color: var(--clk-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.clk-refresh-hint i[b-7k4eiu54r6] { font-size: 11px; }

/* Nút chính: emerald — MỘT nút primary duy nhất trên màn hình */
.clk-btn-primary[b-7k4eiu54r6] {
    background: var(--clk-emerald);
    border: 1px solid var(--clk-emerald);
    color: #fff;
    font-weight: 600;
}
.clk-btn-primary:hover[b-7k4eiu54r6] { background: #046b4e; border-color: #046b4e; color: #fff; }
.clk-btn-primary:disabled[b-7k4eiu54r6] { opacity: .6; }

.clk-btn-danger[b-7k4eiu54r6] { border-color: var(--clk-border); color: var(--clk-red); }
.clk-btn-danger:hover[b-7k4eiu54r6] { background: #f9eceb; border-color: #e8c9c7; color: var(--clk-red); }

/* ── Hero: dark navy terminal banner (theo mẫu) ── */
.clk-hero[b-7k4eiu54r6] {
    background: #102a3e;
    border: 1px solid #0c2233;
    border-radius: 12px;
    box-shadow: var(--clk-shadow);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
}
.clk-hero-cell[b-7k4eiu54r6] {
    flex: 1;
    min-width: 0;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.clk-hero-cell:first-child[b-7k4eiu54r6] { border-left: none; }
.clk-hero-cell--time[b-7k4eiu54r6] { flex: 1.35; }
.clk-hero-lbl[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 10px;
    white-space: nowrap;
}
.clk-time[b-7k4eiu54r6] {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.clk-date[b-7k4eiu54r6] { margin-top: 9px; font-size: 13px; color: rgba(255, 255, 255, .65); }

/* Ca đang diễn ra: tên ca emerald sáng — điểm đậm duy nhất của ô */
.clk-hero-shift[b-7k4eiu54r6] {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #3bcf9c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clk-hero-shift--muted[b-7k4eiu54r6] { color: rgba(255, 255, 255, .55); font-size: 20px; font-weight: 600; }
.clk-hero-range[b-7k4eiu54r6] { margin-top: 8px; font-size: 16px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }

/* Đang làm việc: icon tròn + số lớn emerald */
.clk-hero-work[b-7k4eiu54r6] { display: flex; align-items: center; gap: 14px; }
.clk-hero-ico[b-7k4eiu54r6] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(59, 207, 156, .16);
    color: #3bcf9c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}
.clk-hero-num[b-7k4eiu54r6] {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #3bcf9c;
    font-variant-numeric: tabular-nums;
}
.clk-hero-denom[b-7k4eiu54r6] { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }

/* ── Stats strip: 4 chỉ số icon tròn viền ── */
.clk-stats[b-7k4eiu54r6] {
    background: #fff;
    border: 1px solid var(--clk-border);
    border-radius: 12px;
    box-shadow: var(--clk-shadow);
    display: flex;
    align-items: stretch;
}
.clk-stat[b-7k4eiu54r6] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-left: 1px solid var(--clk-hair);
}
.clk-stat:first-child[b-7k4eiu54r6] { border-left: none; }
.clk-stat-ico[b-7k4eiu54r6] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.clk-stat-ico--em[b-7k4eiu54r6] { color: var(--clk-emerald); border-color: #b3dccd; }
.clk-stat-ico--am[b-7k4eiu54r6] { color: var(--clk-amber); border-color: #ecd2ae; }
.clk-stat-ico--gr[b-7k4eiu54r6] { color: var(--clk-muted); border-color: #ccd5da; }
.clk-stat-txt[b-7k4eiu54r6] { min-width: 0; }
.clk-stat-val[b-7k4eiu54r6] {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--clk-ink);
    font-variant-numeric: tabular-nums;
}
.clk-stat-lbl[b-7k4eiu54r6] { font-size: 12px; color: var(--clk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* dot live nhấp nháy emerald */
.clk-live-dot[b-7k4eiu54r6] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clk-emerald);
    flex-shrink: 0;
    animation: clk-live-pulse-b-7k4eiu54r6 1.6s ease-in-out infinite;
}
@keyframes clk-live-pulse-b-7k4eiu54r6 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5, 131, 95, .35); }
    50%      { box-shadow: 0 0 0 4px rgba(5, 131, 95, .12); }
}

.clk-loading[b-7k4eiu54r6] { text-align: center; padding: 36px; font-size: 13px; color: var(--clk-muted); }

/* ── Body: two cards ── */
.clk-cols[b-7k4eiu54r6] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* Card trắng (khối live view) */
.clk-card[b-7k4eiu54r6] {
    background: #fff;
    border: 1px solid var(--clk-border);
    border-radius: 12px;
    box-shadow: var(--clk-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.clk-card-title[b-7k4eiu54r6] {
    padding: 14px 16px 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--clk-ink);
}

/* ── Timeline "Ca hôm nay" ── */
.clk-tl[b-7k4eiu54r6] { padding: 2px 16px 8px; }
.clk-tl-item[b-7k4eiu54r6] { position: relative; padding-left: 24px; padding-bottom: 10px; }
.clk-tl-item:last-child[b-7k4eiu54r6] { padding-bottom: 0; }
.clk-tl-item[b-7k4eiu54r6]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 22px;
    bottom: -4px;
    width: 1px;
    background: var(--clk-border);
}
.clk-tl-item:last-child[b-7k4eiu54r6]::before { display: none; }
.clk-tl-dot[b-7k4eiu54r6] {
    position: absolute;
    left: 0;
    top: 13px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c3ccd2;
    box-sizing: border-box;
}
.clk-tl-item--on .clk-tl-dot[b-7k4eiu54r6] {
    background: var(--clk-emerald);
    border-color: var(--clk-emerald);
    box-shadow: 0 0 0 3px rgba(5, 131, 95, .15);
}
.clk-tl-item--past[b-7k4eiu54r6] { opacity: .6; }
.clk-tl-box[b-7k4eiu54r6] { padding: 8px 12px 10px; border-radius: 10px; }
.clk-tl-item--on .clk-tl-box[b-7k4eiu54r6] { background: #f2f7f5; }
.clk-tl-top[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.clk-tl-name[b-7k4eiu54r6] { font-size: 13.5px; font-weight: 600; color: var(--clk-ink); min-width: 0; }
.clk-tl-btm[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}
.clk-tl-time[b-7k4eiu54r6] { font-size: 12px; color: var(--clk-muted); font-variant-numeric: tabular-nums; }
.clk-tl-cnt[b-7k4eiu54r6] { font-size: 12px; font-weight: 500; color: var(--clk-ink); font-variant-numeric: tabular-nums; }

/* Nút "Xem lịch đầy đủ" */
.clk-viewfull[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 8px 16px 14px;
    padding: 9px 12px;
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clk-emerald);
    text-decoration: none;
    transition: background .1s;
}
.clk-viewfull:hover[b-7k4eiu54r6] { background: #f2f7f5; }
.clk-viewfull i[b-7k4eiu54r6] { font-size: 14px; }
.clk-widget[b-7k4eiu54r6] {
    background: #fff;
    border: 1px solid var(--clk-border);
    border-radius: 12px;
    box-shadow: var(--clk-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.clk-widget-hd[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--clk-border);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--clk-ink);
    flex-shrink: 0;
}
.clk-widget-hd-r[b-7k4eiu54r6] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .8px;
    color: var(--clk-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.clk-col-empty[b-7k4eiu54r6] { padding: 24px 14px 28px; font-size: 12px; text-align: center; color: var(--clk-muted); }

/* Thanh meter 5px: track hairline, fill emerald (bảng giờ công) */
.clk-meter[b-7k4eiu54r6] {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--clk-hair);
    overflow: hidden;
    min-width: 40px;
}
.clk-meter-fill[b-7k4eiu54r6] {
    height: 100%;
    border-radius: 999px;
    background: var(--clk-emerald);
    transition: width .3s;
}

/* Status pill: dot + chữ, nền rất nhạt */
.clk-pill[b-7k4eiu54r6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.clk-pill-dot[b-7k4eiu54r6] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.clk-pill--em[b-7k4eiu54r6] { background: #e7f3ee; color: var(--clk-emerald); }
.clk-pill--am[b-7k4eiu54r6] { background: #fdf3e2; color: var(--clk-amber); }
.clk-pill--rd[b-7k4eiu54r6] { background: #f9eceb; color: var(--clk-red); }
.clk-pill--gr[b-7k4eiu54r6] { background: #eef1f3; color: var(--clk-muted); }

/* ── Employee card: các nhóm trạng thái ── */
.clk-emp-card[b-7k4eiu54r6] { max-height: 640px; overflow-y: auto; }

.clk-sec[b-7k4eiu54r6] { padding: 14px 18px 16px; border-bottom: 1px solid var(--clk-hair); }
.clk-sec:last-child[b-7k4eiu54r6] { border-bottom: none; }
.clk-sec-hd[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.clk-sec-title[b-7k4eiu54r6] { font-size: 13.5px; font-weight: 600; }
.clk-sec-title--em[b-7k4eiu54r6] { color: var(--clk-emerald); }
.clk-sec-title--am[b-7k4eiu54r6] { color: var(--clk-amber); }
.clk-sec-title--gr[b-7k4eiu54r6] { color: var(--clk-ink); }
.clk-sec-more[b-7k4eiu54r6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    padding: 2px 0;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--clk-emerald);
    cursor: pointer;
    white-space: nowrap;
}
.clk-sec-more:hover[b-7k4eiu54r6] { text-decoration: underline; }
.clk-sec-more i[b-7k4eiu54r6] { font-size: 13px; }

/* Lưới nhân viên: avatar + tên + địa điểm + pill trạng thái */
.clk-emp-grid[b-7k4eiu54r6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4px 16px;
    margin-top: 8px;
}
.clk-emp-item[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    min-width: 0;
    transition: background .1s;
}
.clk-emp-item:hover[b-7k4eiu54r6] { background: #f7f9fa; }
.clk-emp-item--faded[b-7k4eiu54r6] { opacity: .6; }
.clk-emp-txt[b-7k4eiu54r6] { flex: 1; min-width: 0; }
.clk-emp-name[b-7k4eiu54r6] {
    font-weight: 600;
    font-size: 13px;
    color: var(--clk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clk-emp-dept[b-7k4eiu54r6] {
    font-size: 11.5px;
    color: var(--clk-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty big */
.clk-empty-big[b-7k4eiu54r6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 8px;
}
.clk-empty-big i[b-7k4eiu54r6] { font-size: 32px; color: #b6c0c7; }
.clk-empty-title[b-7k4eiu54r6] { font-size: 14px; font-weight: 600; color: var(--clk-ink); }
.clk-empty-hint[b-7k4eiu54r6] { font-size: 12px; color: var(--clk-muted); text-align: center; }

/* ── Hours report ── */

/* KPI cards */
.clk-hstats[b-7k4eiu54r6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.clk-hstat[b-7k4eiu54r6] {
    background: #fff;
    border: 1px solid var(--clk-border);
    border-radius: 12px;
    box-shadow: var(--clk-shadow);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    min-width: 0;
}
.clk-hstat-ico[b-7k4eiu54r6] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e7f3ee;
    color: var(--clk-emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.clk-hstat-txt[b-7k4eiu54r6] { min-width: 0; }
.clk-hstat-lbl[b-7k4eiu54r6] { font-size: 12.5px; color: var(--clk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk-hstat-val[b-7k4eiu54r6] {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--clk-emerald);
    font-variant-numeric: tabular-nums;
}

.clk-toolbar[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--clk-border);
}

/* Week picker: [<] [📅 Tuần ...] [>] */
.clk-week[b-7k4eiu54r6] { display: inline-flex; align-items: stretch; gap: 8px; }
.clk-week-btn[b-7k4eiu54r6] {
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    background: #fff;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--clk-muted);
    cursor: pointer;
    line-height: 1;
    transition: background .1s, color .1s;
}
.clk-week-btn:hover[b-7k4eiu54r6] { background: #f7f9fa; color: var(--clk-ink); }
.clk-week-lbl[b-7k4eiu54r6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clk-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.clk-week-lbl i[b-7k4eiu54r6] { font-size: 15px; color: var(--clk-muted); }

/* Search */
.clk-search-wrap[b-7k4eiu54r6] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 160px;
    max-width: 320px;
    margin-left: auto;
}
.clk-search-icon[b-7k4eiu54r6] {
    position: absolute;
    left: 11px;
    font-size: 15px;
    color: var(--clk-muted);
    pointer-events: none;
}
.clk-search-input[b-7k4eiu54r6] {
    width: 100%;
    padding: 6px 32px 6px 34px;
    font-size: 13px;
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    background: #fff;
}
.clk-search-input:focus[b-7k4eiu54r6] { border-color: var(--clk-ink); }
.clk-search-clear[b-7k4eiu54r6] {
    position: absolute;
    right: 8px;
    border: none;
    background: none;
    color: var(--clk-muted);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    padding: 2px;
}
.clk-search-clear:hover[b-7k4eiu54r6] { color: var(--clk-red); }

/* Ledger table */
.clk-tw[b-7k4eiu54r6] { overflow-x: auto; }
.clk-table[b-7k4eiu54r6] { width: 100%; border-collapse: collapse; font-size: 14px; }
.clk-table thead tr[b-7k4eiu54r6] { background: #fafbfc; }
.clk-table th[b-7k4eiu54r6] {
    padding: 12px 14px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--clk-muted);
    border-bottom: 1px solid var(--clk-border);
    white-space: nowrap;
}
.clk-table td[b-7k4eiu54r6] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--clk-hair);
    vertical-align: middle;
}
.clk-table tbody tr:hover[b-7k4eiu54r6] { background: #f7f9fa; }
.clk-table tbody tr:last-child td[b-7k4eiu54r6] { border-bottom: none; }
.clk-th-c[b-7k4eiu54r6] { text-align: center !important; }
.clk-th-r[b-7k4eiu54r6] { text-align: right !important; }
.clk-th-sort[b-7k4eiu54r6] { cursor: pointer; user-select: none; }
.clk-th-sort:hover[b-7k4eiu54r6] { color: var(--clk-ink); }
.clk-sort-ico[b-7k4eiu54r6] { font-size: 12px; margin-left: 2px; vertical-align: -1px; color: var(--clk-emerald); }
.clk-sort-dim[b-7k4eiu54r6] { color: var(--clk-muted); opacity: .5; }

/* Cột nhân viên: avatar + tên + bộ phận */
.clk-td-emp[b-7k4eiu54r6] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.clk-td-emp-txt[b-7k4eiu54r6] { min-width: 0; }
.clk-td-name[b-7k4eiu54r6] { font-weight: 600; color: var(--clk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk-td-dept[b-7k4eiu54r6] { font-size: 12px; color: var(--clk-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk-td-code[b-7k4eiu54r6] { color: var(--clk-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clk-td-empty[b-7k4eiu54r6] { text-align: center; padding: 36px !important; color: var(--clk-muted); }

/* Ô đếm "9 (90%)": số 600 màu cột, percent nhạt hơn */
.clk-cnt[b-7k4eiu54r6] { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clk-cnt--em[b-7k4eiu54r6] { color: var(--clk-emerald); }
.clk-cnt--am[b-7k4eiu54r6] { color: var(--clk-amber); }
.clk-cnt--rd[b-7k4eiu54r6] { color: var(--clk-red); }
.clk-cnt-pct[b-7k4eiu54r6] { font-weight: 400; opacity: .75; font-size: 12.5px; }

/* Cột giờ công: số + meter ngang (max tuần = emerald, còn lại xám #D7DEE2) */
.clk-th-hours[b-7k4eiu54r6] { text-align: left !important; min-width: 160px; }
.clk-td-hours-cell[b-7k4eiu54r6] { min-width: 160px; }
.clk-hours-bar-row[b-7k4eiu54r6] { display: flex; align-items: center; gap: 10px; }
.clk-td-hours[b-7k4eiu54r6] {
    font-weight: 700;
    color: var(--clk-ink);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
    flex-shrink: 0;
}
.clk-meter--table[b-7k4eiu54r6] { max-width: 110px; }

/* Hàng tổng "Tổng cộng": nền xám nhạt, tổng giờ là điểm đậm 700 duy nhất */
.clk-total-row td[b-7k4eiu54r6] {
    background: #fafbfc;
    border-top: 1px solid var(--clk-border);
    border-bottom: none !important;
    font-size: 13px;
    color: var(--clk-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.clk-total-lbl[b-7k4eiu54r6] { color: var(--clk-emerald); font-weight: 600; }
.clk-td-total[b-7k4eiu54r6] {
    font-size: 14px;
    font-weight: 700;
    color: var(--clk-ink);
    font-variant-numeric: tabular-nums;
}

/* Banner ghi chú cuối trang */
.clk-note[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid #d5e4f4;
    border-radius: 12px;
    background: #eff6fd;
    color: #2a5d8f;
    font-size: 13px;
}
.clk-note i[b-7k4eiu54r6] { font-size: 17px; flex-shrink: 0; color: #3b7bb8; }

.clk-id[b-7k4eiu54r6] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--clk-border);
    color: var(--clk-ink);
    font-weight: 500;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Cảnh báo amber */
.clk-warn[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdf3e2;
    color: var(--clk-amber);
    font-size: 12.5px;
    margin-top: 12px;
}
.clk-warn i[b-7k4eiu54r6] { font-size: 15px; flex-shrink: 0; }

/* ── Kiosk modal ── */
.clk-kiosk-bg[b-7k4eiu54r6] {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 40, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.clk-kiosk-box[b-7k4eiu54r6] {
    width: 420px;
    max-height: 88vh;
    background: #fff;
    border: 1px solid var(--clk-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(20, 30, 40, .25);
}
.clk-kiosk-head[b-7k4eiu54r6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 18px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--clk-border);
    color: var(--clk-ink);
    flex-shrink: 0;
}
.clk-kiosk-head-r[b-7k4eiu54r6] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.clk-kiosk-htime[b-7k4eiu54r6] {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.clk-kiosk-hdate[b-7k4eiu54r6] { margin-top: 4px; font-size: 12px; color: var(--clk-muted); }

.clk-kiosk-body[b-7k4eiu54r6] { flex: 1; overflow-y: auto; padding: 14px 16px; }

.clk-kiosk-search-wrap[b-7k4eiu54r6] { position: relative; margin-bottom: 12px; }
.clk-kiosk-search-icon[b-7k4eiu54r6] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clk-muted);
    font-size: 15px;
}
.clk-kiosk-input[b-7k4eiu54r6] {
    width: 100%;
    padding: 10px 12px 10px 34px;
    font-size: 14px;
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    background: #fff;
    color: var(--clk-ink);
    font-family: var(--font);
    box-sizing: border-box;
}
.clk-kiosk-input:focus[b-7k4eiu54r6] { outline: none; border-color: var(--clk-ink); }

.clk-kiosk-result[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 9px;
    cursor: pointer;
    margin-bottom: 4px;
    border: 1px solid var(--clk-border);
    transition: background .1s;
}
.clk-kiosk-result:hover[b-7k4eiu54r6] { background: #f7f9fa; }
.clk-kiosk-result-name[b-7k4eiu54r6] {
    font-weight: 600;
    font-size: 14px;
    color: var(--clk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.clk-kiosk-result-code[b-7k4eiu54r6] { margin-top: 3px; }
.clk-kiosk-hint[b-7k4eiu54r6] { text-align: center; padding: 24px 0; font-size: 12px; color: var(--clk-muted); }

.clk-kiosk-emp-box[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fafbfc;
    border: 1px solid var(--clk-border);
    border-radius: 10px;
    margin-bottom: 14px;
}
.clk-kiosk-emp-name[b-7k4eiu54r6] { font-size: 16px; font-weight: 700; color: var(--clk-ink); }

.clk-kiosk-shift[b-7k4eiu54r6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    margin-bottom: 8px;
}
.clk-kiosk-shift-info[b-7k4eiu54r6] { flex: 1; min-width: 0; }
.clk-kiosk-shift-name[b-7k4eiu54r6] { font-weight: 600; font-size: 13px; margin-bottom: 2px; color: var(--clk-ink); }
.clk-kiosk-shift-meta[b-7k4eiu54r6] { font-size: 12px; color: var(--clk-muted); font-variant-numeric: tabular-nums; }
.clk-kiosk-action-btn[b-7k4eiu54r6] { white-space: nowrap; flex-shrink: 0; }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 900px) {
    .clk-cols[b-7k4eiu54r6] { grid-template-columns: 1fr; }
    .clk-emp-card[b-7k4eiu54r6] { max-height: none; }
}

@media (max-width: 768px) {
    .clk-wrap[b-7k4eiu54r6] { gap: 12px; }
    .clk-title[b-7k4eiu54r6] { font-size: 22px; }

    .clk-head[b-7k4eiu54r6] { align-items: center; }

    .clk-tabsbar[b-7k4eiu54r6] { flex-wrap: wrap; }

    .clk-hero[b-7k4eiu54r6] { flex-direction: column; }
    .clk-hero-cell[b-7k4eiu54r6] {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding: 16px 18px;
    }
    .clk-hero-cell:first-child[b-7k4eiu54r6] { border-top: none; }
    .clk-time[b-7k4eiu54r6] { font-size: 40px; }
    .clk-hero-shift[b-7k4eiu54r6] { font-size: 24px; }

    .clk-stats[b-7k4eiu54r6] { flex-wrap: wrap; }
    .clk-stat[b-7k4eiu54r6] {
        flex: 1 1 46%;
        border-left: none;
        border-top: 1px solid var(--clk-hair);
        padding: 12px 14px;
    }
    .clk-stat:nth-child(-n+2)[b-7k4eiu54r6] { border-top: none; }
    .clk-stat:nth-child(even)[b-7k4eiu54r6] { border-left: 1px solid var(--clk-hair); }

    .clk-emp-grid[b-7k4eiu54r6] { grid-template-columns: 1fr; }

    .clk-hstats[b-7k4eiu54r6] { grid-template-columns: 1fr 1fr; gap: 10px; }
    .clk-hstat[b-7k4eiu54r6] { padding: 13px 14px; gap: 10px; }
    .clk-hstat-val[b-7k4eiu54r6] { font-size: 21px; }

    .clk-th-hours[b-7k4eiu54r6], .clk-td-hours-cell[b-7k4eiu54r6] { min-width: 120px; }
    .clk-meter--table[b-7k4eiu54r6] { max-width: 60px; }

    .clk-toolbar[b-7k4eiu54r6] { display: grid; grid-template-columns: 1fr; }
    .clk-week[b-7k4eiu54r6] { justify-content: space-between; }
    .clk-week-lbl[b-7k4eiu54r6] { flex: 1; justify-content: center; }
    .clk-search-wrap[b-7k4eiu54r6] { max-width: none; margin-left: 0; }

    .clk-kiosk-box[b-7k4eiu54r6] { width: calc(100vw - 24px); }
}
/* _content/SeasonFlow.Web/Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ══ Dashboard — "Executive Payroll Terminal" (đồng bộ với /employees)
   Nền porcelain #EEF1F2, widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (tích cực) · champagne #A16207 (tiền) · amber #B45309 (chờ xử lý).
   Không gradient, màu chỉ nằm ở con số / pill / dot. ══ */

.db-page[b-2fat0o1vv0] {
    background: #eef1f2;
    padding: 20px 22px 28px;
}

.db-terminal[b-2fat0o1vv0] {
    --db-ink: #293640;
    --db-muted: #6b7a85;
    --db-border: #e2e7ea;
    --db-emerald: #05835f;
    --db-champagne: #a16207;
    --db-amber: #b45309;
    --db-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1500px;
    margin: 0 auto;
    color: var(--db-ink);
}

/* ── Header ─────────────────────────────────────────── */
.db-head[b-2fat0o1vv0] { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:2px 2px 18px; }
.db-kicker[b-2fat0o1vv0], .db-section-kicker[b-2fat0o1vv0] { display:inline-flex; align-items:center; gap:6px; color:var(--db-emerald); font-size:10px; font-weight:700; letter-spacing:.8px; line-height:1; text-transform:uppercase; }
.db-kicker i[b-2fat0o1vv0], .db-section-kicker i[b-2fat0o1vv0] { font-size:13px; }
.db-head h1[b-2fat0o1vv0] { margin:5px 0 0; font-size:26px; font-weight:700; letter-spacing:-.3px; line-height:1.15; }
.db-head-actions[b-2fat0o1vv0] { display:flex; align-items:center; gap:12px; }
.db-date[b-2fat0o1vv0] { display:flex; align-items:center; gap:7px; color:var(--db-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.db-clock-btn[b-2fat0o1vv0] { min-height:38px; background:var(--db-emerald); border:1px solid var(--db-emerald); color:#fff; font-weight:600; }
.db-clock-btn:hover[b-2fat0o1vv0] { background:#046b4e; border-color:#046b4e; color:#fff; }

/* ── KPI strip (theo .e-kpi của /employees) ─────────── */
.db-kpis[b-2fat0o1vv0] { display:flex; gap:10px; flex-wrap:wrap; }
.db-kpi[b-2fat0o1vv0] { flex:1; min-width:118px; display:flex; flex-direction:column; padding:10px 16px; background:#fff; border:1px solid var(--db-border); border-radius:10px; box-shadow:var(--db-shadow); font-family:var(--font); color:inherit; cursor:pointer; text-align:left; transition:background .1s; }
.db-kpi:hover[b-2fat0o1vv0] { background:#fafbfc; }
.db-kpi-lbl[b-2fat0o1vv0] { color:var(--db-muted); font-size:11.5px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-kpi-val[b-2fat0o1vv0] { font-size:21px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--db-ink); }
.db-kpi-val--em[b-2fat0o1vv0] { color:var(--db-emerald); }
.db-kpi-val--am[b-2fat0o1vv0] { color:var(--db-amber); }
.db-kpi-val--ch[b-2fat0o1vv0] { color:var(--db-champagne); }
.db-kpi-sub[b-2fat0o1vv0] { margin-top:2px; color:var(--db-muted); font-size:11px; }

/* ── Cards (base) ───────────────────────────────────── */
.db-primary-grid[b-2fat0o1vv0] { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(310px, .8fr); gap:14px; margin-top:14px; }
.db-pulse[b-2fat0o1vv0], .db-queue[b-2fat0o1vv0], .db-ledger[b-2fat0o1vv0], .db-payroll-readiness[b-2fat0o1vv0] { background:#fff; border:1px solid var(--db-border); border-radius:12px; box-shadow:var(--db-shadow); }
.db-pulse[b-2fat0o1vv0] { padding:20px; }
.db-queue[b-2fat0o1vv0] { padding:20px 0 8px; }
.db-section-head[b-2fat0o1vv0] { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.db-section-head h2[b-2fat0o1vv0], .db-payroll-readiness h2[b-2fat0o1vv0] { margin:5px 0 0; color:var(--db-ink); font-size:16px; font-weight:700; line-height:1.2; }
.db-inline-link[b-2fat0o1vv0] { display:flex; align-items:center; gap:5px; padding:3px 0; border:0; background:transparent; color:var(--db-muted); font-family:var(--font); font-size:11px; cursor:pointer; }
.db-inline-link:hover[b-2fat0o1vv0] { color:var(--db-emerald); }

/* ── Pulse (nhân lực trực tiếp) ─────────────────────── */
.db-pulse-overview[b-2fat0o1vv0] { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-top:26px; }
.db-pulse-label[b-2fat0o1vv0] { display:block; color:var(--db-muted); font-size:12px; }
.db-pulse-overview strong[b-2fat0o1vv0] { display:inline-block; margin-top:5px; color:var(--db-emerald); font-size:42px; font-weight:700; line-height:.95; font-variant-numeric:tabular-nums; }
.db-pulse-total[b-2fat0o1vv0] { margin-left:5px; color:var(--db-muted); font-size:12px; }
.db-ring[b-2fat0o1vv0] { --db-progress:0; position:relative; display:grid; place-items:center; width:72px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--db-emerald) calc(var(--db-progress) * 1%), #e8edef 0); }
.db-ring[b-2fat0o1vv0]::after { position:absolute; inset:6px; border-radius:50%; background:#fff; content:""; }
.db-ring span[b-2fat0o1vv0] { z-index:1; color:var(--db-emerald); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.db-progress[b-2fat0o1vv0] { height:5px; margin:17px 0 20px; overflow:hidden; border-radius:99px; background:#e8edef; }
.db-progress span[b-2fat0o1vv0], .db-dept-meter span[b-2fat0o1vv0] { display:block; height:100%; border-radius:inherit; background:var(--db-emerald); }
.db-dept-list[b-2fat0o1vv0] { border-top:1px solid var(--db-border); }
.db-dept[b-2fat0o1vv0] { display:grid; grid-template-columns:minmax(130px, 1fr) minmax(80px, 1.2fr) 36px; align-items:center; gap:14px; width:100%; padding:12px 0; border:0; border-bottom:1px solid #eef1f3; background:transparent; color:inherit; font-family:var(--font); cursor:pointer; text-align:left; transition:background .1s; }
.db-dept:last-child[b-2fat0o1vv0] { border-bottom:0; }
.db-dept:hover[b-2fat0o1vv0] { background:#f7f9fa; }
.db-dept-name[b-2fat0o1vv0] { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; }
.db-dept-name i[b-2fat0o1vv0] { color:var(--db-muted); font-size:15px; }
.db-dept-meter[b-2fat0o1vv0] { height:4px; overflow:hidden; border-radius:99px; background:#e8edef; }
.db-dept strong[b-2fat0o1vv0] { font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

/* Empty state (Line Art + Flat Doodle) */
.db-empty[b-2fat0o1vv0] { display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 0 14px; color:var(--db-muted); font-size:12px; }
.db-empty-svg[b-2fat0o1vv0] { width:150px; height:90px; }

/* ── Queue (hồ sơ chờ duyệt) ────────────────────────── */
.db-queue .db-section-head[b-2fat0o1vv0] { padding:0 20px 13px; border-bottom:1px solid var(--db-border); }
.db-queue-row[b-2fat0o1vv0] { display:grid; grid-template-columns:38px minmax(0, 1fr) auto 12px; align-items:center; gap:10px; width:100%; padding:14px 20px; border:0; border-bottom:1px solid #eef1f3; background:transparent; color:var(--db-ink); font-family:var(--font); cursor:pointer; text-align:left; transition:background .1s; }
.db-queue-row:hover[b-2fat0o1vv0] { background:#f7f9fa; }
.db-queue-icon[b-2fat0o1vv0] { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#f0f2f4; color:var(--db-ink); font-size:18px; }
.db-queue-row--payroll .db-queue-icon[b-2fat0o1vv0] { background:#fbf4e8; color:var(--db-champagne); }
.db-queue-row strong[b-2fat0o1vv0], .db-queue-row small[b-2fat0o1vv0] { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-queue-row strong[b-2fat0o1vv0] { font-size:13px; font-weight:600; }
.db-queue-row small[b-2fat0o1vv0] { margin-top:3px; color:var(--db-muted); font-size:11px; }
.db-queue-row b[b-2fat0o1vv0] { color:var(--db-amber); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.db-queue-row--payroll b[b-2fat0o1vv0] { color:var(--db-champagne); }
.db-queue-row > i[b-2fat0o1vv0] { color:var(--db-muted); font-size:15px; }
.db-all-clear[b-2fat0o1vv0] { display:flex; align-items:center; gap:8px; margin:12px 15px 8px; padding:11px 14px; border-radius:9px; background:#e7f3ee; color:var(--db-emerald); font-size:12px; font-weight:600; }

/* ── Bottom grid ────────────────────────────────────── */
.db-bottom-grid[b-2fat0o1vv0] { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(260px, .8fr); gap:14px; margin-top:14px; }
.db-ledger[b-2fat0o1vv0] { padding:20px; }
.db-ledger-total[b-2fat0o1vv0] { color:var(--db-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.db-ledger-table[b-2fat0o1vv0] { margin-top:17px; border:1px solid var(--db-border); border-radius:8px; overflow:hidden; }
.db-ledger-row[b-2fat0o1vv0] { display:grid; grid-template-columns:minmax(0, 1.5fr) .65fr .65fr; align-items:center; gap:12px; min-height:40px; padding:0 12px; border-bottom:1px solid #eef1f3; font-size:12px; }
.db-ledger-row:last-child[b-2fat0o1vv0] { border-bottom:0; }
.db-ledger-row:not(.db-ledger-row--head):hover[b-2fat0o1vv0] { background:#f7f9fa; }
.db-ledger-row--head[b-2fat0o1vv0] { min-height:34px; background:#fafbfc; color:var(--db-muted); font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
.db-ledger-row--head span[b-2fat0o1vv0] { display:flex; align-items:center; gap:6px; }
.db-th-svg[b-2fat0o1vv0] { flex-shrink:0; width:14px; height:14px; }
.db-ledger-empty[b-2fat0o1vv0] { padding:14px 12px; color:var(--db-muted); font-size:12px; }
.db-ledger-row strong[b-2fat0o1vv0] { font-weight:700; font-variant-numeric:tabular-nums; }
.db-ledger-row span:last-child[b-2fat0o1vv0] { color:var(--db-emerald); font-variant-numeric:tabular-nums; }
.db-ledger-row span:last-child i[b-2fat0o1vv0] { font-size:12px; }

/* ── Payroll readiness ──────────────────────────────── */
.db-payroll-readiness[b-2fat0o1vv0] { display:flex; flex-direction:column; padding:20px; }
.db-readiness-line[b-2fat0o1vv0] { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0; border-bottom:1px solid #eef1f3; color:var(--db-muted); font-size:12px; }
.db-readiness-line strong[b-2fat0o1vv0] { color:var(--db-emerald); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.db-readiness-line:last-of-type strong[b-2fat0o1vv0] { color:var(--db-champagne); }
.db-payroll-btn[b-2fat0o1vv0] { justify-content:center; width:100%; margin-top:auto; padding:10px 14px; background:var(--db-emerald); border:1px solid var(--db-emerald); color:#fff; font-weight:600; }
.db-payroll-btn:hover[b-2fat0o1vv0] { background:#046b4e; border-color:#046b4e; color:#fff; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .db-primary-grid[b-2fat0o1vv0], .db-bottom-grid[b-2fat0o1vv0] { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
    .db-page[b-2fat0o1vv0] { padding:12px 10px 20px; }
    .db-head[b-2fat0o1vv0] { align-items:start; margin:2px 3px 14px; }
    .db-head h1[b-2fat0o1vv0] { font-size:22px; }
    .db-head-actions[b-2fat0o1vv0] { display:block; }
    .db-date[b-2fat0o1vv0] { display:none; }
    .db-clock-btn[b-2fat0o1vv0] { width:40px; height:40px; padding:0; justify-content:center; font-size:0; }
    .db-clock-btn i[b-2fat0o1vv0] { margin:0; font-size:19px; }
    .db-kpis[b-2fat0o1vv0] { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .db-kpi[b-2fat0o1vv0] { min-width:0; }
    .db-kpi-val[b-2fat0o1vv0] { font-size:19px; }
    .db-kpi-sub[b-2fat0o1vv0] { display:none; }
    .db-pulse[b-2fat0o1vv0], .db-ledger[b-2fat0o1vv0], .db-payroll-readiness[b-2fat0o1vv0] { padding:15px; }
    .db-pulse-overview[b-2fat0o1vv0] { margin-top:20px; }
    .db-pulse-overview strong[b-2fat0o1vv0] { font-size:36px; }
    .db-dept[b-2fat0o1vv0] { grid-template-columns:minmax(120px, 1fr) 65px 28px; gap:9px; }
    .db-dept-meter[b-2fat0o1vv0] { display:none; }
    .db-queue .db-section-head[b-2fat0o1vv0] { padding:15px 15px 12px; }
    .db-queue-row[b-2fat0o1vv0] { grid-template-columns:34px minmax(0, 1fr) auto 10px; gap:8px; padding:12px 15px; }
    .db-queue-icon[b-2fat0o1vv0] { width:34px; height:34px; font-size:16px; }
    .db-ledger-table[b-2fat0o1vv0] { overflow-x:auto; }
    .db-ledger-row[b-2fat0o1vv0] { min-width:440px; }
}
/* _content/SeasonFlow.Web/Components/Pages/Deposits/DepositsAdmin.razor.rz.scp.css */
.dp-wrap[b-6f2ruurl6v] { max-width: 1100px; margin: 0 auto; padding: 4px; }

.dp-head[b-6f2ruurl6v] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dp-title[b-6f2ruurl6v] { font-size: 26px; font-weight: 700; color: #293640; margin: 0; }
.dp-sub[b-6f2ruurl6v] { font-size: 13px; color: #6B7A85; margin: 4px 0 0; }

.dp-kpis[b-6f2ruurl6v] { display: flex; gap: 10px; }
.dp-kpi[b-6f2ruurl6v] { background: #fff; border: 1px solid #E2E7EA; border-radius: 10px; padding: 8px 14px; min-width: 92px; text-align: center; }
.dp-kpi-l[b-6f2ruurl6v] { display: block; font-size: 11.5px; color: #6B7A85; text-transform: uppercase; letter-spacing: .4px; }
.dp-kpi-v[b-6f2ruurl6v] { display: block; font-size: 21px; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; color: #293640; }

.dp-alert[b-6f2ruurl6v] { margin-bottom: 12px; }

.dp-tabs[b-6f2ruurl6v] { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dp-tab[b-6f2ruurl6v] { background: #fff; border: 1px solid #E2E7EA; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: #6B7A85; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dp-tab.on[b-6f2ruurl6v] { background: #E7F3EE; border-color: #05835F; color: #05835F; font-weight: 600; }
.dp-tab-n[b-6f2ruurl6v] { font-family: var(--mono); font-size: 11.5px; background: #EEF1F3; border-radius: 999px; padding: 1px 7px; }
.dp-tab.on .dp-tab-n[b-6f2ruurl6v] { background: #fff; }

.dp-card[b-6f2ruurl6v] { background: #fff; border: 1px solid #E2E7EA; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,30,40,.04), 0 4px 14px rgba(20,30,40,.05); }
.dp-empty[b-6f2ruurl6v] { padding: 40px; text-align: center; color: #6B7A85; }
.dp-empty i[b-6f2ruurl6v] { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }

.dp-table[b-6f2ruurl6v] { width: 100%; border-collapse: collapse; font-family: Inter, sans-serif; }
.dp-table thead th[b-6f2ruurl6v] { background: #FAFBFC; text-transform: uppercase; font-size: 10.5px; font-weight: 600; color: #6B7A85; letter-spacing: .5px; text-align: left; padding: 10px 14px; border-bottom: 1px solid #EEF1F3; }
.dp-table td[b-6f2ruurl6v] { padding: 12px 14px; border-bottom: 1px solid #EEF1F3; font-size: 13px; color: #293640; vertical-align: middle; }
.dp-table tbody tr:hover[b-6f2ruurl6v] { background: #F7F9FA; }
.dp-r[b-6f2ruurl6v] { text-align: right; }

.dp-emp[b-6f2ruurl6v] { font-weight: 600; }
.dp-chip[b-6f2ruurl6v] { display: inline-block; background: #F1F4F6; border: 1px solid #E2E7EA; border-radius: 6px; font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; margin-top: 2px; color: #6B7A85; }
.dp-muted[b-6f2ruurl6v] { color: #6B7A85; font-size: 12px; }
.dp-amt[b-6f2ruurl6v] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: #A16207; }
.dp-memo[b-6f2ruurl6v] { font-family: var(--mono); font-size: 12px; background: #FBF8F1; border: 1px solid #EEE3CC; border-radius: 5px; padding: 1px 6px; color: #A16207; }
.dp-warn[b-6f2ruurl6v] { color: #B45309; }

/* Tab "Phí đang giữ": phần hoàn NV emerald, phần công ty giữ champagne */
.dp-refunded[b-6f2ruurl6v] { font-family: var(--mono); font-variant-numeric: tabular-nums; color: #05835F; font-weight: 500; }
.dp-fee[b-6f2ruurl6v] { font-family: var(--mono); font-variant-numeric: tabular-nums; color: #A16207; font-weight: 700; }

/* ── Modal chốt số tiền hoàn ──────────────────────────────────────── */
.dp-mbox[b-6f2ruurl6v] { width: 430px; max-width: 94vw; }
.dp-rm-body[b-6f2ruurl6v] { padding: 16px; }

.dp-rm-emp[b-6f2ruurl6v] { padding-bottom: 12px; border-bottom: 1px solid #EEF1F3; margin-bottom: 12px; }

.dp-rm-row[b-6f2ruurl6v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #FBF8F1;
    border: 1px solid #EEE3CC;
    border-radius: 9px;
    margin-bottom: 14px;
}
.dp-rm-lbl[b-6f2ruurl6v] { font-size: 12.5px; color: #6B7A85; }
.dp-rm-val[b-6f2ruurl6v] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: #A16207; }

.dp-rm-field[b-6f2ruurl6v] { margin-bottom: 14px; }

/* Gợi ý bấm nhanh — chip viền, không phải nút đặc, để không tranh vai trò nút chính */
.dp-rm-sugg[b-6f2ruurl6v] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dp-sugg[b-6f2ruurl6v] {
    background: #fff;
    border: 1px solid #E2E7EA;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    color: #293640;
    cursor: pointer;
    font-family: inherit;
}
.dp-sugg:hover[b-6f2ruurl6v] { background: #F2F7F5; border-color: #05835F; color: #05835F; }

/* Tách đôi kết quả: NV nhận bao nhiêu / công ty giữ bao nhiêu */
.dp-rm-split[b-6f2ruurl6v] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.dp-rm-split-item[b-6f2ruurl6v] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid;
}
.dp-rm-split-lbl[b-6f2ruurl6v] { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.dp-rm-split-val[b-6f2ruurl6v] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; }

.dp-rm-split--refund[b-6f2ruurl6v] { background: #E7F3EE; border-color: #BFE0D2; }
.dp-rm-split--refund .dp-rm-split-lbl[b-6f2ruurl6v],
.dp-rm-split--refund .dp-rm-split-val[b-6f2ruurl6v] { color: #05835F; }

.dp-rm-split--fee[b-6f2ruurl6v] { background: #FBF8F1; border-color: #EEE3CC; }
.dp-rm-split--fee .dp-rm-split-lbl[b-6f2ruurl6v],
.dp-rm-split--fee .dp-rm-split-val[b-6f2ruurl6v] { color: #A16207; }

.dp-rm-note[b-6f2ruurl6v] { font-size: 12.5px; margin-bottom: 12px; }
.dp-rm-actions[b-6f2ruurl6v] { display: flex; gap: 8px; }
.dp-rm-actions .btn[b-6f2ruurl6v] { justify-content: center; }

@media (max-width: 768px) {
    .dp-rm-split[b-6f2ruurl6v] { grid-template-columns: 1fr; }

    .dp-table thead[b-6f2ruurl6v] { display: none; }
    .dp-table[b-6f2ruurl6v], .dp-table tbody[b-6f2ruurl6v], .dp-table tr[b-6f2ruurl6v], .dp-table td[b-6f2ruurl6v] { display: block; width: 100%; }
    .dp-table tr[b-6f2ruurl6v] { border: 1px solid #E2E7EA; border-radius: 12px; margin-bottom: 10px; padding: 6px; }
    .dp-table td[b-6f2ruurl6v] { border: none; padding: 6px 10px; }
    .dp-r[b-6f2ruurl6v] { text-align: left; }
}
/* _content/SeasonFlow.Web/Components/Pages/Employees/EmployeeDetail.razor.rz.scp.css */
/* ══ Employee Detail — "Executive Dossier"
   Cùng ngôn ngữ Payroll Terminal với trang danh sách: nền porcelain #EEF1F2 (layout.css),
   widget trắng viền nhạt, graphite #293640 · champagne #A16207 (payroll) · emerald #05835F (tích cực).
   Rail hồ sơ cố định bên trái, dữ liệu vận hành theo tab bên phải. ══ */

.epf-wrap[b-lm1cyxcan4] {
    --e-ink: #293640;
    --e-muted: #6b7a85;
    --e-border: #e2e7ea;
    --e-hairline: #eef1f3;
    --e-champagne: #a16207;
    --e-emerald: #05835f;
    --e-emerald-bg: #e7f3ee;
    --e-amber: #b45309;
    --e-amber-bg: #fdf3e2;
    --e-red: #a32d2d;
    --e-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--e-ink);
}

/* ── Top bar ── */
.epf-topbar[b-lm1cyxcan4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.epf-crumb-wrap[b-lm1cyxcan4] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.epf-back[b-lm1cyxcan4] {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid var(--e-border);
    background: #fff;
    color: var(--e-ink);
    font-size: 15px;
    cursor: pointer;
    display: grid; place-items: center;
    box-shadow: var(--e-shadow);
    transition: background .12s;
}
.epf-back:hover[b-lm1cyxcan4] { background: #f7f9fa; }
.epf-title[b-lm1cyxcan4] { font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; }
.epf-crumb[b-lm1cyxcan4] {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--e-muted); margin-top: 2px;
}
.epf-crumb a[b-lm1cyxcan4] { color: var(--e-muted); text-decoration: none; }
.epf-crumb a:hover[b-lm1cyxcan4] { color: var(--e-ink); }
.epf-crumb i[b-lm1cyxcan4] { font-size: 12px; }
.epf-crumb span[b-lm1cyxcan4] { color: var(--e-ink); font-weight: 500; }

.epf-month[b-lm1cyxcan4] {
    display: flex; align-items: center; gap: 2px;
    border: 1px solid var(--e-border);
    background: #fff;
    border-radius: 9px;
    box-shadow: var(--e-shadow);
    overflow: hidden;
}
.epf-month button[b-lm1cyxcan4] {
    border: 0; background: none;
    padding: 7px 10px;
    color: var(--e-muted);
    font-size: 13px;
    cursor: pointer;
}
.epf-month button:hover:not(:disabled)[b-lm1cyxcan4] { color: var(--e-ink); background: #f7f9fa; }
.epf-month button:disabled[b-lm1cyxcan4] { opacity: .35; cursor: default; }
.epf-month span[b-lm1cyxcan4] { padding: 0 6px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── States ── */
.epf-loading[b-lm1cyxcan4] { display: grid; place-items: center; padding: 80px 0; font-size: 26px; color: var(--e-muted); }
.epf-empty-card[b-lm1cyxcan4] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 12px;
    box-shadow: var(--e-shadow);
    padding: 40px 20px 32px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.epf-empty-art[b-lm1cyxcan4] { width: 190px; height: auto; }
.epf-empty-txt[b-lm1cyxcan4] { font-size: 14px; color: var(--e-muted); }

/* ── Layout grid ── */
.epf-grid[b-lm1cyxcan4] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* ══ IDENTITY RAIL ══ */
.epf-rail[b-lm1cyxcan4] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 12px;
    box-shadow: var(--e-shadow);
    overflow: hidden;
    position: sticky;
    top: 12px;
}
.epf-rail-accent[b-lm1cyxcan4] { height: 3px; background: linear-gradient(90deg, var(--e-champagne) 0 36%, var(--e-border) 36%); }

.epf-rail-id[b-lm1cyxcan4] {
    padding: 18px;
    display: flex; gap: 14px; align-items: center;
    border-bottom: 1px solid var(--e-hairline);
}
.epf-rail-id-txt[b-lm1cyxcan4] { min-width: 0; }
.epf-av[b-lm1cyxcan4] {
    border-radius: 14px;
    background: var(--e-emerald-bg);
    color: var(--e-emerald);
    display: grid; place-items: center;
    font-weight: 700;
    flex-shrink: 0;
}
.epf-rail-name[b-lm1cyxcan4] {
    font-size: 16.5px; font-weight: 600; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epf-rail-code[b-lm1cyxcan4] { font-size: 12px; color: var(--e-muted); margin-top: 2px; }
.epf-rail-badge[b-lm1cyxcan4] { margin-top: 7px; }

.epf-pill[b-lm1cyxcan4] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    white-space: nowrap;
}
.epf-pill-dot[b-lm1cyxcan4] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.epf-pill--em[b-lm1cyxcan4] { background: var(--e-emerald-bg); color: var(--e-emerald); }
.epf-pill--am[b-lm1cyxcan4] { background: var(--e-amber-bg); color: var(--e-amber); }
.epf-pill--gr[b-lm1cyxcan4] { background: #eef1f3; color: var(--e-muted); }

.epf-rail-sec[b-lm1cyxcan4] { padding: 14px 18px; border-bottom: 1px solid var(--e-hairline); }
.epf-sec-lbl[b-lm1cyxcan4] {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .9px; text-transform: uppercase;
    color: var(--e-muted);
    margin-bottom: 8px;
}
.epf-verified[b-lm1cyxcan4] {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--e-emerald);
    font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
}
.epf-verified i[b-lm1cyxcan4] { font-size: 13px; }

.epf-kv[b-lm1cyxcan4] {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 5px 0;
    font-size: 13px;
}
.epf-k[b-lm1cyxcan4] { color: var(--e-muted); flex-shrink: 0; }
.epf-v[b-lm1cyxcan4] {
    font-weight: 400; text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.epf-ch[b-lm1cyxcan4] { color: var(--e-champagne); }
.epf-em[b-lm1cyxcan4] { color: var(--e-emerald); }
.epf-am[b-lm1cyxcan4] { color: var(--e-amber); }
.epf-rd[b-lm1cyxcan4] { color: var(--e-red); }

/* Kỳ lương hiện tại */
.epf-cycle[b-lm1cyxcan4] { padding: 15px 18px; background: #fbf8f1; border-bottom: 1px solid var(--e-hairline); }
.epf-cycle-amt[b-lm1cyxcan4] { font-size: 21px; font-weight: 700; color: var(--e-champagne); margin-top: 2px; font-variant-numeric: tabular-nums; }
.epf-cycle-sub[b-lm1cyxcan4] { font-size: 12px; color: var(--e-muted); margin-top: 2px; }
.epf-meter[b-lm1cyxcan4] { height: 5px; border-radius: 3px; background: #ece5d4; margin-top: 12px; overflow: hidden; }
.epf-meter i[b-lm1cyxcan4] { display: block; height: 100%; background: var(--e-champagne); border-radius: 3px; transition: width .3s; }
.epf-meter-lbl[b-lm1cyxcan4] {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 11px; color: var(--e-muted); margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.epf-watermark[b-lm1cyxcan4] {
    padding: 12px 18px 14px;
    font-size: 24px; font-weight: 700;
    letter-spacing: 4px;
    color: var(--e-ink);
    opacity: .07;
    user-select: none;
}

/* ══ MAIN ══ */
.epf-main[b-lm1cyxcan4] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.epf-tabsrow[b-lm1cyxcan4] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.epf-tabs[b-lm1cyxcan4] {
    display: flex; gap: 2px;
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 10px;
    box-shadow: var(--e-shadow);
    padding: 3px;
}
.epf-tab[b-lm1cyxcan4] {
    border: 0; background: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px; font-weight: 500;
    font-family: var(--font);
    color: var(--e-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.epf-tab:hover[b-lm1cyxcan4] { color: var(--e-ink); }
.epf-tab.on[b-lm1cyxcan4] { background: var(--e-ink); color: #fff; }
.epf-tabsmeta[b-lm1cyxcan4] {
    font-size: 11px; font-weight: 500;
    letter-spacing: .9px; text-transform: uppercase;
    color: var(--e-muted);
}

/* ── KPI band ── */
.epf-kpis[b-lm1cyxcan4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.epf-kpis--3[b-lm1cyxcan4] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.epf-kpi[b-lm1cyxcan4] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 12px;
    box-shadow: var(--e-shadow);
    padding: 14px 16px;
    min-width: 0;
}
.epf-kpi-l[b-lm1cyxcan4] { font-size: 11.5px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epf-kpi-v[b-lm1cyxcan4] {
    font-size: 23px; font-weight: 700;
    margin-top: 4px; line-height: 1.1; letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epf-kpi-d[b-lm1cyxcan4] { font-size: 11.5px; margin-top: 5px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epf-kpi-d b[b-lm1cyxcan4] { font-weight: 600; }

/* ── Widgets ── */
.epf-row2[b-lm1cyxcan4] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 14px;
}
.epf-widget[b-lm1cyxcan4] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 12px;
    box-shadow: var(--e-shadow);
    overflow: hidden;
    min-width: 0;
}
.epf-whd[b-lm1cyxcan4] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--e-hairline);
}
.epf-wt[b-lm1cyxcan4] { font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.epf-wm[b-lm1cyxcan4] { font-size: 11px; font-weight: 500; letter-spacing: .7px; text-transform: uppercase; color: var(--e-muted); }
.epf-wbd[b-lm1cyxcan4] { padding: 16px; }
.epf-link[b-lm1cyxcan4] {
    border: 0; background: none;
    font-size: 12px; font-weight: 500;
    font-family: var(--font);
    color: var(--e-muted);
    cursor: pointer;
    padding: 0;
}
.epf-link:hover[b-lm1cyxcan4] { color: var(--e-ink); }

/* ── Bar chart (div-based) ── */
.epf-bars[b-lm1cyxcan4] {
    display: flex; align-items: flex-end;
    height: 150px;
    padding: 4px 4px 0;
    position: relative;
}
.epf-bars[b-lm1cyxcan4]::before {
    content: "";
    position: absolute;
    inset: 8px 4px 24px;
    background: repeating-linear-gradient(to top, transparent 0 35px, var(--e-hairline) 35px 36px);
    pointer-events: none;
}
.epf-bgrp[b-lm1cyxcan4] {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    z-index: 1;
    min-width: 0;
}
.epf-bval[b-lm1cyxcan4] { font-size: 11px; color: var(--e-muted); height: 14px; }
.epf-bar[b-lm1cyxcan4] { width: 26px; border-radius: 5px 5px 2px 2px; background: #d7dee2; }
.epf-bgrp.cur .epf-bar[b-lm1cyxcan4] { background: var(--e-emerald); }
.epf-bgrp.cur .epf-bval[b-lm1cyxcan4] { color: var(--e-emerald); font-weight: 600; }
.epf-blbl[b-lm1cyxcan4] { font-size: 11px; color: var(--e-muted); }

/* ── Donut ── */
.epf-donut-wrap[b-lm1cyxcan4] { display: flex; gap: 18px; align-items: center; }
.epf-donut[b-lm1cyxcan4] {
    width: 116px; height: 116px;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.epf-donut i[b-lm1cyxcan4] {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: #fff;
    display: grid; place-items: center;
    font-style: normal;
    font-size: 20px; font-weight: 700;
    color: var(--e-emerald);
}
.epf-legend[b-lm1cyxcan4] { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; min-width: 0; flex: 1; }
.epf-li[b-lm1cyxcan4] { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.epf-li span[b-lm1cyxcan4] { display: flex; align-items: center; gap: 7px; color: var(--e-muted); }
.epf-li b[b-lm1cyxcan4] { font-weight: 500; }
.epf-dot[b-lm1cyxcan4] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Ledger table ── */
.epf-tblwrap[b-lm1cyxcan4] { overflow-x: auto; }
.epf-tbl[b-lm1cyxcan4] { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.epf-tbl th[b-lm1cyxcan4] {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .7px; text-transform: uppercase;
    color: var(--e-muted);
    text-align: left;
    padding: 9px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--e-border);
    white-space: nowrap;
}
.epf-tbl td[b-lm1cyxcan4] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--e-hairline);
    white-space: nowrap;
    vertical-align: middle;
}
.epf-tbl tr:last-child td[b-lm1cyxcan4] { border-bottom: 0; }
.epf-tbl th.r[b-lm1cyxcan4], .epf-tbl td.r[b-lm1cyxcan4] { text-align: right; }
.epf-tbl td.mono[b-lm1cyxcan4], .epf-tbl .mono[b-lm1cyxcan4] { font-variant-numeric: tabular-nums; }

.epf-amt[b-lm1cyxcan4] { font-weight: 500; color: var(--e-champagne); }
.epf-amt.zero[b-lm1cyxcan4] { color: var(--e-muted); font-weight: 400; }
.epf-paidtxt[b-lm1cyxcan4] { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--e-emerald); }
.epf-paidtxt i[b-lm1cyxcan4] { font-size: 13px; }
.epf-unpaidtxt[b-lm1cyxcan4] { font-size: 11px; font-weight: 400; color: var(--e-muted); }
.epf-tbl-empty[b-lm1cyxcan4] { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--e-muted); }

/* ── Payroll summary list ── */
.epf-paylist[b-lm1cyxcan4] { display: flex; flex-direction: column; }
.epf-payrow[b-lm1cyxcan4] {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--e-hairline);
    font-size: 13px;
}
.epf-payrow:last-child[b-lm1cyxcan4] { border-bottom: 0; }
.epf-payrow .epf-k[b-lm1cyxcan4] { color: var(--e-muted); }
.epf-payrow .epf-pv[b-lm1cyxcan4] { font-weight: 500; font-variant-numeric: tabular-nums; }
.epf-payrow.total[b-lm1cyxcan4] { background: #fbf8f1; }
.epf-payrow.total .epf-k[b-lm1cyxcan4] { color: var(--e-ink); font-weight: 600; }
.epf-payrow.total .epf-pv[b-lm1cyxcan4] { color: var(--e-champagne); font-size: 15px; font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .epf-grid[b-lm1cyxcan4] { grid-template-columns: 1fr; }
    .epf-rail[b-lm1cyxcan4] { position: static; }
    .epf-kpis[b-lm1cyxcan4], .epf-kpis--3[b-lm1cyxcan4] { grid-template-columns: 1fr 1fr; }
    .epf-row2[b-lm1cyxcan4] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .epf-wrap[b-lm1cyxcan4] { gap: 12px; }
    .epf-tabs[b-lm1cyxcan4] { width: 100%; overflow-x: auto; }
    .epf-tab[b-lm1cyxcan4] { padding: 8px 12px; flex-shrink: 0; }
    .epf-tabsmeta[b-lm1cyxcan4] { display: none; }
    .epf-kpis[b-lm1cyxcan4], .epf-kpis--3[b-lm1cyxcan4] { grid-template-columns: 1fr 1fr; }
    .epf-kpi-v[b-lm1cyxcan4] { font-size: 20px; }
    .epf-bar[b-lm1cyxcan4] { width: 18px; }
    .epf-donut-wrap[b-lm1cyxcan4] { flex-direction: column; align-items: flex-start; }
}
/* _content/SeasonFlow.Web/Components/Pages/Employees/EmployeeRegistration.razor.rz.scp.css */
/* ── Inline field validation ─────────────────────── */
.er-input-err[b-27p1vc357l] {
    border-color: var(--red) !important;
    background: color-mix(in srgb, var(--red) 4%, var(--surface));
}
.er-field-err[b-27p1vc357l] {
    margin-top: 5px;
    font-size: 12px;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 4px;
}
.er-field-ok[b-27p1vc357l] {
    margin-top: 5px;
    font-size: 12px;
    color: var(--gm);
    display: flex;
    align-items: center;
    gap: 4px;
}
.er-field-hint[b-27p1vc357l] {
    margin-top: 5px;
    font-size: 11px;
    color: var(--ink3);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Date of birth picker ────────────────────────── */
.er-dob-row[b-27p1vc357l] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 8px;
}
.er-dob-sel[b-27p1vc357l] {
    width: 100%;
}
.er-dob-preview[b-27p1vc357l] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--gm);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Card shell ──────────────────────────────────── */
.er-card[b-27p1vc357l] { background:var(--card); border-radius:14px; width:100%; max-width:520px; border:.5px solid var(--border); overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.08); }

/* ── Card header ─────────────────────────────────── */
.er-hd[b-27p1vc357l] { padding:16px 20px; border-bottom:.5px solid var(--border); }

/* ── Card body ───────────────────────────────────── */
.er-body[b-27p1vc357l] { padding:18px 20px; }

/* ── Card footer ─────────────────────────────────── */
.er-ft[b-27p1vc357l] { padding:8px 20px; border-top:.5px solid var(--border); text-align:center; font-size:11px; color:var(--ink3); }

/* ── Step bar segments ───────────────────────────── */
.er-stepseg[b-27p1vc357l] { flex:1; height:3px; border-radius:2px; background:var(--border2); }
.er-stepseg.er-dn[b-27p1vc357l] { background:var(--ink); }

/* ── Upload box ──────────────────────────────────── */
.er-upload-box[b-27p1vc357l] { border:.5px dashed var(--border2); border-radius:8px; padding:14px; text-align:center; cursor:pointer; background:var(--surface); transition:border-color .12s; display:block; }
.er-upload-box:hover[b-27p1vc357l] { border-color:var(--ink3); }
.er-upload-box.er-has-file[b-27p1vc357l] { border-style:solid; border-color:var(--gm); background:var(--gb); }

/* ── Success screen icon ─────────────────────────── */
.er-success-icon[b-27p1vc357l] { width:32px; height:32px; border-radius:50%; background:var(--gb); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.er-success-icon i[b-27p1vc357l] { font-size:17px; color:var(--gm); }

/* ── Header icon (logo/brand) ────────────────────── */
.er-brand-icon[b-27p1vc357l] { width:32px; height:32px; border-radius:8px; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.er-brand-icon i[b-27p1vc357l] { font-size:15px; color:#fff; }

/* ── Header title row ────────────────────────────── */
.er-hd-row[b-27p1vc357l] { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.er-hd-title[b-27p1vc357l] { font-size:14px; font-weight:600; }

/* ── Step bar row ────────────────────────────────── */
.er-stepbar[b-27p1vc357l] { display:flex; gap:5px; margin-bottom:6px; }
.er-step-label[b-27p1vc357l] { font-size:12px; font-weight:600; color:var(--ink); }

/* ── Success header row ──────────────────────────── */
.er-success-row[b-27p1vc357l] { display:flex; align-items:center; gap:9px; }
.er-success-title[b-27p1vc357l] { font-size:14px; font-weight:600; }

/* ── Step 1: required asterisk ───────────────────── */
.er-req[b-27p1vc357l] { color:var(--red); }

/* ── Step 1: full-width next button ─────────────── */
.er-btn-full[b-27p1vc357l] { width:100%; margin-top:4px; }

/* ── Step 2: bank + account grid ────────────────── */
.er-bank-grid[b-27p1vc357l] { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.er-bank-grid .field[b-27p1vc357l] { margin-bottom:0; }

/* ── Step 2: section label (CCCD, QR) ───────────── */
.er-section-label[b-27p1vc357l] { margin-top:14px; margin-bottom:6px; font-size:11px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.3px; }
.er-section-label-mb0[b-27p1vc357l] { margin-top:0; margin-bottom:6px; font-size:11px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.3px; }

/* ── Step 2: CCCD upload grid ────────────────────── */
.er-cccd-grid[b-27p1vc357l] { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.er-cccd-label[b-27p1vc357l] { font-size:11px; margin-bottom:5px; }

/* ── Step 2: upload image preview ───────────────── */
.er-upload-img[b-27p1vc357l] { width:100%; height:72px; object-fit:cover; border-radius:5px; }
.er-upload-ok[b-27p1vc357l] { font-size:10px; color:var(--gm); margin-top:4px; }
.er-upload-icon[b-27p1vc357l] { font-size:18px; color:var(--ink3); display:block; margin-bottom:4px; }
.er-upload-hint[b-27p1vc357l] { font-size:11px; color:var(--ink3); }

/* ── Step 2: QR upload box wrapper ──────────────── */
.er-qr-wrap[b-27p1vc357l] { margin-bottom:14px; }
.er-qr-row[b-27p1vc357l] { display:flex; align-items:center; gap:10px; justify-content:center; }
.er-qr-img[b-27p1vc357l] { width:56px; height:56px; object-fit:contain; border-radius:5px; }
.er-qr-info[b-27p1vc357l] { text-align:left; }
.er-qr-ok[b-27p1vc357l] { font-size:12px; font-weight:600; color:var(--gm); }
.er-qr-sub[b-27p1vc357l] { font-size:10px; color:var(--ink3); }
.er-qr-icon[b-27p1vc357l] { font-size:22px; color:var(--ink3); display:block; margin-bottom:5px; }
.er-qr-hint[b-27p1vc357l] { font-size:12px; color:var(--ink3); }
.er-qr-note[b-27p1vc357l] { font-size:10px; color:var(--ink3); margin-top:3px; }

/* ── Step 2 / 3: nav button row ──────────────────── */
.er-nav[b-27p1vc357l] { display:flex; gap:8px; }
.er-nav-btn[b-27p1vc357l] { flex:1; }

/* ── Step 3: summary box ─────────────────────────── */
.er-summary[b-27p1vc357l] { background:var(--bb); border-radius:9px; padding:12px 14px; margin-bottom:12px; }
.er-summary-name[b-27p1vc357l] { font-size:13px; font-weight:600; margin-bottom:8px; }
.er-summary-row[b-27p1vc357l] { display:flex; gap:8px; font-size:12px; margin-bottom:4px; }
.er-summary-key[b-27p1vc357l] { width:90px; color:var(--ink3); flex-shrink:0; }
.er-summary-val[b-27p1vc357l] { font-weight:500; }

/* ── Step 3: attachment check row ────────────────── */
.er-attach-row[b-27p1vc357l] { display:flex; gap:8px; margin-bottom:10px; font-size:12px; }
.er-attach-cell[b-27p1vc357l] { flex:1; padding:8px; background:var(--surface); border-radius:7px; text-align:center; }
.er-attach-icon-ok[b-27p1vc357l] { color:var(--gm); }
.er-attach-icon-no[b-27p1vc357l] { color:var(--ink3); }
.er-attach-label[b-27p1vc357l] { font-size:10px; margin-top:2px; }
.er-attach-label-no[b-27p1vc357l] { font-size:10px; margin-top:2px; color:var(--ink3); }

/* ── Step 3: submit button row ───────────────────── */
.er-submit-btn[b-27p1vc357l] { flex:2; background:#3B6D11; border-color:#3B6D11; }

/* ── Error alert placement ───────────────────────── */
.er-error[b-27p1vc357l] { margin:12px 20px 0; }

/* ── Misc spacing helpers ────────────────────────── */
.er-meta-sub[b-27p1vc357l] { margin-top:2px; }
.er-meta-sub1[b-27p1vc357l] { margin-top:1px; }
.er-alert-info[b-27p1vc357l] { margin-bottom:14px; }
.er-alert-note[b-27p1vc357l] { margin-bottom:12px; }

/* ── Bank picker ─────────────────────────────────── */
.er-bank-btn[b-27p1vc357l] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s;
    text-align: left;
}
.er-bank-btn:hover[b-27p1vc357l] { border-color: var(--bm); }

.er-bank-logo[b-27p1vc357l] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    background: #fff;
}

.er-bank-drop[b-27p1vc357l] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 300;
    display: flex;
    flex-direction: column;
    max-height: 300px;
}

.er-bank-items[b-27p1vc357l] {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
}

.er-bank-search[b-27p1vc357l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.er-bank-search-input[b-27p1vc357l] {
    flex: 1;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    outline: none;
}
.er-bank-search-input[b-27p1vc357l]::placeholder { color: var(--ink3); }

.er-bank-item[b-27p1vc357l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: background .1s;
    width: 100%;
}
.er-bank-item:hover[b-27p1vc357l] { background: var(--surface); }
.er-bank-item-active[b-27p1vc357l] { background: var(--bb) !important; }

.er-bank-item-info[b-27p1vc357l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.er-bank-item-short[b-27p1vc357l] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.er-bank-item-full[b-27p1vc357l] {
    font-size: 11px;
    color: var(--ink3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/SeasonFlow.Web/Components/Pages/Employees/Employees.razor.rz.scp.css */
/* ══ Employees — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · champagne #A16207 (payroll data) · emerald #05835F (trạng thái tích cực).
   Không gradient xanh dương, không card lồng card. ══ */

/* Token phải khai cho CẢ .modal-bg: modal của trang được render NGOÀI .emp-wrap,
   nên nếu chỉ khai trên wrapper thì mọi var(--e-*) bên trong modal đều invalid —
   pill trạng thái mất nền, nút mất viền.
   Chỉ chia sẻ TOKEN, không chia sẻ layout: đắp flex-direction/max-width lên
   .modal-bg sẽ phá mất căn giữa của overlay. */
.emp-wrap[b-vzazq6euqr],
.modal-bg[b-vzazq6euqr] {
    --e-ink: #293640;
    --e-muted: #6b7a85;
    --e-border: #e2e7ea;
    --e-champagne: #a16207;
    --e-emerald: #05835f;
    --e-amber: #b45309;
    --e-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
}

.emp-wrap[b-vzazq6euqr] {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--e-ink);
}

/* ── Page header ── */
.e-head[b-vzazq6euqr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.e-title[b-vzazq6euqr] {
    font-size: 26px;
    font-weight: 700;
    color: var(--e-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.e-sub[b-vzazq6euqr] {
    font-size: 13px;
    color: var(--e-muted);
    margin-top: 4px;
}

/* KPI strip */
.e-kpis[b-vzazq6euqr] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.e-kpi[b-vzazq6euqr] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 10px;
    box-shadow: var(--e-shadow);
    padding: 10px 16px;
    min-width: 118px;
}
.e-kpi-lbl[b-vzazq6euqr] {
    font-size: 11.5px;
    color: var(--e-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}
.e-kpi-val[b-vzazq6euqr] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--e-ink);
    line-height: 1.1;
}
.e-kpi-val--em[b-vzazq6euqr] { color: var(--e-emerald); }
.e-kpi-val--am[b-vzazq6euqr] { color: var(--e-amber); }
.e-kpi-val--ch[b-vzazq6euqr] { color: var(--e-champagne); }

/* ── Master-detail columns ── */
.e-cols[b-vzazq6euqr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.e-cols--open[b-vzazq6euqr] { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); }

/* ── LEFT: ledger ── */
.e-ledger[b-vzazq6euqr] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 12px;
    box-shadow: var(--e-shadow);
    overflow: hidden;
}

.e-toolbar[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--e-border);
}

.search-wrap[b-vzazq6euqr] {
    position: relative;
    flex: 1;
    min-width: 160px;
}
.search-icon[b-vzazq6euqr] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--e-muted);
    pointer-events: none;
    font-size: 15px;
}
.search-input[b-vzazq6euqr] {
    width: 100%;
    padding-left: 34px;
    border: 1px solid var(--e-border);
    border-radius: 9px;
    background: #fff;
}
.search-input:focus[b-vzazq6euqr] { border-color: var(--e-ink); }

.e-select[b-vzazq6euqr] {
    width: auto;
    border: 1px solid var(--e-border);
    border-radius: 9px;
    background: #fff;
    color: var(--e-ink);
}

/* Nút chính: emerald, chỉ dùng cho hành động tích cực */
.e-btn-primary[b-vzazq6euqr] {
    background: var(--e-emerald);
    border: 1px solid var(--e-emerald);
    color: #fff;
    font-weight: 600;
}
.e-btn-primary:hover[b-vzazq6euqr] { background: #046b4e; border-color: #046b4e; color: #fff; }
.e-btn-primary:disabled[b-vzazq6euqr] { opacity: .6; }

/* Nút xoá: chữ đỏ trên nền trắng viền nhạt (không đỏ đặc) */
.e-btn-danger[b-vzazq6euqr] { color: var(--red, #a32d2d); }
.e-btn-danger:hover[b-vzazq6euqr] { background: var(--rb, #fcebeb); }

/* ── Table ── */
.e-tw[b-vzazq6euqr] { overflow-x: auto; }
.e-table[b-vzazq6euqr] { width: 100%; border-collapse: collapse; font-size: 14px; }

.e-table thead tr[b-vzazq6euqr] { background: #fafbfc; position: static; }
.e-table th[b-vzazq6euqr] {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--e-muted);
    border-bottom: 1px solid var(--e-border);
    white-space: nowrap;
}
.e-table td[b-vzazq6euqr] {
    padding: 12px 14px;
    border-bottom: 1px solid #eef1f3;
    vertical-align: middle;
}
.e-table tbody tr[b-vzazq6euqr] { cursor: pointer; transition: background .1s; }
.e-table tbody tr:hover[b-vzazq6euqr] { background: #f7f9fa; }
.e-table tbody tr.sel[b-vzazq6euqr] {
    background: #f2f7f5;
    box-shadow: inset 3px 0 0 var(--e-emerald);
}
.e-table tbody tr:last-child td[b-vzazq6euqr] { border-bottom: none; }

.emp-chk-th[b-vzazq6euqr], .emp-chk-td[b-vzazq6euqr] { width: 36px; text-align: center; padding: 0 4px; }
.emp-chk[b-vzazq6euqr] {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: var(--e-emerald);
}
.emp-row-sel[b-vzazq6euqr] { background: #f2f7f5; }

.emp-code[b-vzazq6euqr] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    background: #f1f4f6;
    border: 1px solid var(--e-border);
    color: var(--e-ink);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.emp-cell[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}
.emp-cell-txt[b-vzazq6euqr] { display: flex; flex-direction: column; min-width: 0; }
.emp-name[b-vzazq6euqr] {
    font-weight: 600;
    color: var(--e-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.emp-row-sub[b-vzazq6euqr] {
    font-size: 12px;
    color: var(--e-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lương giờ: champagne, mono, đơn vị mờ */
.e-th-rate[b-vzazq6euqr], .e-td-rate[b-vzazq6euqr] { text-align: right; }
.e-rate[b-vzazq6euqr] {
    font-weight: 700;
    font-size: 14px;
    color: var(--e-champagne);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.e-rate-unit[b-vzazq6euqr] { font-size: 11px; font-weight: 500; color: var(--e-muted); margin-left: 2px; }

.e-td-act[b-vzazq6euqr] { text-align: right; white-space: nowrap; }
.e-td-act .btn[b-vzazq6euqr] { border-color: var(--e-border); }

/* Status pill: dot + chữ, nền rất nhạt */
.e-pill[b-vzazq6euqr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.e-pill-dot[b-vzazq6euqr] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.e-pill--em[b-vzazq6euqr] { background: #e7f3ee; color: var(--e-emerald); }
.e-pill--am[b-vzazq6euqr] { background: #fdf3e2; color: var(--e-amber); }
.e-pill--gr[b-vzazq6euqr] { background: #eef1f3; color: var(--e-muted); }

/* Footer: đếm + pager */
.e-foot[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--e-border);
    font-size: 13px;
    color: var(--e-muted);
}
.emp-sel-hint[b-vzazq6euqr] { color: var(--e-emerald); font-weight: 600; margin-left: 8px; }

/* ── Bulk action bar ── */
.emp-bulk-bar[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f7f9fa;
    border-bottom: 1px solid var(--e-border);
    flex-wrap: wrap;
}
.emp-bulk-info[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--e-ink);
    margin-right: 4px;
}
.emp-bulk-actions[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── RIGHT: dossier ── */
.e-dossier[b-vzazq6euqr] {
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 12px;
    box-shadow: var(--e-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 12px;
}

.e-dos-head[b-vzazq6euqr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.e-dos-id[b-vzazq6euqr] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.e-dos-id-txt[b-vzazq6euqr] { min-width: 0; }
.e-dos-name[b-vzazq6euqr] {
    font-size: 17px;
    font-weight: 700;
    color: var(--e-ink);
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.e-dos-meta[b-vzazq6euqr] { font-size: 12px; color: var(--e-muted); margin-top: 2px; }
.e-dos-badge[b-vzazq6euqr] { margin-top: 6px; }
.e-dos-actions[b-vzazq6euqr] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.e-dos-actions .btn[b-vzazq6euqr] { border-color: var(--e-border); }

/* 3 KPI trong dossier */
.e-dos-kpis[b-vzazq6euqr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.e-dos-kpi[b-vzazq6euqr] {
    border: 1px solid var(--e-border);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}
.e-dos-kpi-lbl[b-vzazq6euqr] { font-size: 11.5px; color: var(--e-muted); margin-bottom: 3px; white-space: nowrap; }
.e-dos-kpi-val[b-vzazq6euqr] {
    font-size: 14px;
    font-weight: 700;
    color: var(--e-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.e-dos-kpi-val--ch[b-vzazq6euqr] { color: var(--e-champagne); }

/* ── Section: header bar xám + body ── */
.e-section[b-vzazq6euqr] {
    border: 1px solid var(--e-border);
    border-radius: 10px;
    overflow: hidden;
}
.e-section-hd[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--e-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--e-ink);
}
.e-section-hd-r[b-vzazq6euqr] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--e-muted);
}
.e-section-body[b-vzazq6euqr] { padding: 14px; }

.e-verified[b-vzazq6euqr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--e-emerald);
}
.e-verified i[b-vzazq6euqr] { font-size: 14px; }

/* Info grid 2 cột */
.e-info-grid[b-vzazq6euqr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.e-info-cell[b-vzazq6euqr] {
    padding: 11px 14px;
    border-bottom: 1px solid #eef1f3;
    min-width: 0;
}
.e-info-cell:nth-child(odd)[b-vzazq6euqr] { border-right: 1px solid #eef1f3; }
.e-info-cell:nth-last-child(-n+2)[b-vzazq6euqr] { border-bottom: none; }
.e-info-lbl[b-vzazq6euqr] { font-size: 11.5px; color: var(--e-muted); margin-bottom: 3px; }
.e-info-val[b-vzazq6euqr] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--e-ink);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}
.e-reveal-row[b-vzazq6euqr] { display: flex; align-items: center; gap: 8px; }
.e-reveal-btn[b-vzazq6euqr] { padding: 2px 8px; font-size: 11px; border-color: var(--e-border); }

.e-cccd-hint[b-vzazq6euqr] {
    font-size: 11px;
    color: var(--e-muted);
    text-align: center;
    margin-top: 10px;
}

/* Payroll activity */
.e-act-list[b-vzazq6euqr] { display: flex; flex-direction: column; }
.e-act-item[b-vzazq6euqr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #eef1f3;
}
.e-act-item:last-child[b-vzazq6euqr] { border-bottom: none; }
.e-act-dot[b-vzazq6euqr] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--e-emerald);
    flex-shrink: 0;
    margin-top: 5px;
}
.e-act-dot--am[b-vzazq6euqr] { background: #f59e0b; }
.e-act-dot--gray[b-vzazq6euqr] { background: #b6c0c7; }
.e-act-txt[b-vzazq6euqr] { flex: 1; min-width: 0; }
.e-act-title[b-vzazq6euqr] { font-size: 13px; font-weight: 600; color: var(--e-ink); }
.e-act-sub[b-vzazq6euqr] { font-size: 12px; color: var(--e-muted); margin-top: 1px; }
.e-act-amt[b-vzazq6euqr] {
    font-size: 13px;
    font-weight: 700;
    color: var(--e-champagne);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.e-act-empty[b-vzazq6euqr] {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--e-muted);
    text-align: center;
}

/* ── QR row ── */
.qr-row[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: 10px;
}
.qr-img[b-vzazq6euqr] {
    width: 56px; height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--e-border);
    cursor: pointer;
}
.qr-label[b-vzazq6euqr] { font-size: 12px; font-weight: 700; color: var(--e-emerald); }
.e-qr-meta[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--e-muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.e-qr-bank-logo[b-vzazq6euqr] { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }

/* ── CCCD flip card (giữ nguyên hành vi) ── */
.cccd-flip-scene[b-vzazq6euqr] { width: 100%; height: 160px; perspective: 900px; cursor: pointer; position: relative; border-radius: 10px; }
.cccd-flip-card[b-vzazq6euqr] { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4, 0, .2, 1); border-radius: 10px; }
.cccd-flip-card.is-flipped[b-vzazq6euqr] { transform: rotateY(180deg); }
.cccd-face[b-vzazq6euqr] { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; border: 1px solid var(--e-border); }
.cccd-back[b-vzazq6euqr] { transform: rotateY(180deg); }
.cccd-img[b-vzazq6euqr] { width: 100%; height: 100%; object-fit: contain; display: block; background: #f7f9fa; }
.cccd-label[b-vzazq6euqr] { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; font-size: 11px; }
.cccd-empty[b-vzazq6euqr] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 6px; color: var(--e-muted); font-size: 12px; background: #f7f9fa; }
.cccd-blurred .cccd-img[b-vzazq6euqr] { filter: blur(8px); }
.cccd-lock-overlay[b-vzazq6euqr] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); border-radius: 10px; z-index: 10; cursor: pointer; }

/* ── Modal (giữ hành vi cũ) ── */
.emp-modal-footer[b-vzazq6euqr] { display: flex; gap: 10px; }
.flex1[b-vzazq6euqr] { flex: 1; }
.flex2[b-vzazq6euqr] { flex: 2; }
.mbox-emp[b-vzazq6euqr] { width: 500px; }
.mb12[b-vzazq6euqr] { margin-bottom: 12px; }

/* ── Bank picker (modal) ── */
.emp-bank-btn[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s;
    text-align: left;
}
.emp-bank-btn:hover[b-vzazq6euqr] { border-color: var(--e-emerald); }

.emp-bank-logo[b-vzazq6euqr] {
    width: 24px; height: 24px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    background: #fff;
}

.emp-bank-drop[b-vzazq6euqr] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    z-index: 300;
    display: flex;
    flex-direction: column;
    max-height: 320px;
}
.emp-bank-items[b-vzazq6euqr] { overflow-y: auto; flex: 1; padding: 4px; }
.emp-bank-search[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.emp-bank-search-input[b-vzazq6euqr] {
    flex: 1;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    outline: none;
}
.emp-bank-search-input[b-vzazq6euqr]::placeholder { color: var(--ink3); }
.emp-bank-item[b-vzazq6euqr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: background .1s;
    width: 100%;
}
.emp-bank-item:hover[b-vzazq6euqr] { background: var(--surface); }
.emp-bank-item-active[b-vzazq6euqr] { background: #e7f3ee !important; }
.emp-bank-item-info[b-vzazq6euqr] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.emp-bank-item-short[b-vzazq6euqr] { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.emp-bank-item-full[b-vzazq6euqr] { font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── CCCD/QR upload row (modal) ── */
.cccd-upload-row[b-vzazq6euqr] { display: flex; gap: 10px; }
.cccd-upload-box[b-vzazq6euqr] {
    flex: 1; min-width: 0; height: 110px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    cursor: pointer; position: relative;
    background: var(--surface);
    transition: border-color .2s;
}
.cccd-upload-box:hover[b-vzazq6euqr] { border-color: var(--ink2); }
.cccd-upload-box img[b-vzazq6euqr] { width: 100%; height: 100%; object-fit: contain; }
.cccd-upload-box input[type=file][b-vzazq6euqr], .cccd-upload-box[b-vzazq6euqr]  input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cccd-upload-placeholder[b-vzazq6euqr] { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink3); font-size: 11px; text-align: center; pointer-events: none; }
.cccd-upload-placeholder i[b-vzazq6euqr] { font-size: 22px; }

/* ── Mobile (PWA, một tay) ── */
@media (max-width: 900px) {
    .e-cols--open[b-vzazq6euqr] { grid-template-columns: 1fr; }
    .e-dossier[b-vzazq6euqr] { position: static; }
}

@media (max-width: 768px) {
    .emp-wrap[b-vzazq6euqr] { gap: 12px; }

    /* KPI → lưới 2 cột */
    .e-kpis[b-vzazq6euqr] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .e-kpi[b-vzazq6euqr] { min-width: 0; }
    .e-title[b-vzazq6euqr] { font-size: 22px; }

    /* Filter → grid, nút bấm vừa tay */
    .e-toolbar[b-vzazq6euqr] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .search-wrap[b-vzazq6euqr] { grid-column: 1 / -1; }
    .e-btn-primary[b-vzazq6euqr] { grid-column: 1 / -1; justify-content: center; padding: 10px; font-size: 14px; }
    .e-select[b-vzazq6euqr] { width: 100%; }

    /* Bảng → employee cards */
    .e-tw[b-vzazq6euqr] { overflow: visible; }
    .e-table[b-vzazq6euqr] { display: block; }
    .e-table thead[b-vzazq6euqr] { display: none; }
    .e-table tbody[b-vzazq6euqr] { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .e-table tbody tr[b-vzazq6euqr] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "chk emp status"
            "chk code rate"
            "chk act act";
        gap: 6px 10px;
        align-items: center;
        padding: 12px;
        border: 1px solid var(--e-border);
        border-radius: 12px;
        background: #fff;
    }
    .e-table tbody tr.sel[b-vzazq6euqr] { box-shadow: inset 0 0 0 1.5px var(--e-emerald); background: #f2f7f5; }
    .e-table td[b-vzazq6euqr] { padding: 0; border-bottom: none; }
    .emp-chk-td[b-vzazq6euqr] { grid-area: chk; width: auto; align-self: start; padding-top: 4px; }
    .e-td-emp[b-vzazq6euqr] { grid-area: emp; min-width: 0; }
    .e-td-status[b-vzazq6euqr] { grid-area: status; justify-self: end; }
    .e-td-code[b-vzazq6euqr] { grid-area: code; }
    .e-td-rate[b-vzazq6euqr] { grid-area: rate; justify-self: end; }
    .e-td-act[b-vzazq6euqr] { grid-area: act; justify-self: end; }
    .e-td-act .btn[b-vzazq6euqr] { padding: 7px 12px; }
    .e-table tbody tr:last-child td[b-vzazq6euqr] { border-bottom: none; }

    /* Dossier */
    .e-dossier[b-vzazq6euqr] { padding: 14px; }
    .e-dos-kpis[b-vzazq6euqr] { grid-template-columns: 1fr; }
    .e-info-grid[b-vzazq6euqr] { grid-template-columns: 1fr; }
    .e-info-cell:nth-child(odd)[b-vzazq6euqr] { border-right: none; }
    .e-info-cell:nth-last-child(-n+2)[b-vzazq6euqr] { border-bottom: 1px solid #eef1f3; }
    .e-info-cell:last-child[b-vzazq6euqr] { border-bottom: none; }
}
/* _content/SeasonFlow.Web/Components/Pages/Employees/RegistrationProfiles.razor.rz.scp.css */
/* ══ Hồ sơ đăng ký — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (duyệt/tích cực) · amber #B45309 (chờ) · đỏ #A32D2D chỉ chữ.
   Không gradient, không card lồng card, mỗi khối 1 điểm đậm 700. ══ */

/* Token phải khai cho CẢ .modal-bg: modal của trang được render NGOÀI .rp-wrap,
   nên nếu chỉ khai trên wrapper thì mọi var(--rp-*) bên trong modal đều invalid —
   .rp-btn-primary mất nền emerald, chữ #fff trên nền trắng thành vô hình.
   Chỉ chia sẻ TOKEN, không chia sẻ layout: đắp flex-direction/max-width lên
   .modal-bg sẽ phá mất căn giữa của overlay. */
.rp-wrap[b-sku34fnxbv],
.modal-bg[b-sku34fnxbv] {
    --rp-ink: #293640;
    --rp-muted: #6b7a85;
    --rp-border: #e2e7ea;
    --rp-hair: #eef1f3;
    --rp-emerald: #05835f;
    --rp-amber: #b45309;
    --rp-red: #a32d2d;
    --rp-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
}

.rp-wrap[b-sku34fnxbv] {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--rp-ink);
}

/* ── Page header ── */
.rp-head[b-sku34fnxbv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.rp-title[b-sku34fnxbv] {
    font-size: 26px;
    font-weight: 700;
    color: var(--rp-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.rp-sub[b-sku34fnxbv] {
    font-size: 13px;
    color: var(--rp-muted);
    margin-top: 4px;
}

/* KPI strip */
.rp-kpis[b-sku34fnxbv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rp-kpi[b-sku34fnxbv] {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    box-shadow: var(--rp-shadow);
    padding: 10px 16px;
    min-width: 112px;
}
.rp-kpi-lbl[b-sku34fnxbv] {
    font-size: 11.5px;
    color: var(--rp-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}
.rp-kpi-val[b-sku34fnxbv] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rp-ink);
    line-height: 1.1;
}
.rp-kpi-val--am[b-sku34fnxbv] { color: var(--rp-amber); }

/* ── Master-detail columns ── */
.rp-cols[b-sku34fnxbv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.rp-cols--open[b-sku34fnxbv] { grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); }

/* ── LEFT: request ledger ── */
.rp-ledger[b-sku34fnxbv] {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 12px;
    box-shadow: var(--rp-shadow);
    overflow: hidden;
}

/* Tabs: thanh header xám, tab active gạch chân emerald */
.rp-tabs[b-sku34fnxbv] {
    display: flex;
    background: #fafbfc;
    border-bottom: 1px solid var(--rp-border);
    overflow-x: auto;
}
.rp-tab[b-sku34fnxbv] {
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--rp-muted);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .12s, background .12s, box-shadow .12s;
}
.rp-tab:hover[b-sku34fnxbv] { color: var(--rp-ink); }
.rp-tab.on[b-sku34fnxbv] {
    background: #fff;
    color: var(--rp-ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--rp-emerald);
}

/* Toolbar: filter chips + search + link */
.rp-toolbar[b-sku34fnxbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rp-border);
}
.rp-chips[b-sku34fnxbv] { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-chip[b-sku34fnxbv] {
    padding: 4px 12px;
    border: 1px solid var(--rp-border);
    border-radius: 999px;
    background: #fff;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--rp-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s, color .1s, border-color .1s;
}
.rp-chip:hover[b-sku34fnxbv] { background: #f7f9fa; color: var(--rp-ink); }
.rp-chip.on[b-sku34fnxbv] {
    background: #f1f4f6;
    border-color: var(--rp-ink);
    color: var(--rp-ink);
    font-weight: 600;
}

.rp-search-wrap[b-sku34fnxbv] { position: relative; flex: 1; min-width: 150px; }
.rp-search-icon[b-sku34fnxbv] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rp-muted);
    pointer-events: none;
    font-size: 15px;
}
.rp-search-input[b-sku34fnxbv] {
    width: 100%;
    padding-left: 34px;
    border: 1px solid var(--rp-border);
    border-radius: 9px;
    background: #fff;
}
.rp-search-input:focus[b-sku34fnxbv] { border-color: var(--rp-ink); }

.rp-tbtn[b-sku34fnxbv] { border-color: var(--rp-border); }

/* ── List rows (ledger style): hairline ngang, hover nhạt, chọn = inset emerald ── */
.rp-list[b-sku34fnxbv] { min-height: 120px; }
.rp-row[b-sku34fnxbv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rp-hair);
    cursor: pointer;
    transition: background .1s;
}
.rp-row:hover[b-sku34fnxbv] { background: #f7f9fa; }
.rp-row.sel[b-sku34fnxbv] {
    background: #f2f7f5;
    box-shadow: inset 3px 0 0 var(--rp-emerald);
}
.rp-row-txt[b-sku34fnxbv] { min-width: 0; }
.rp-row-name[b-sku34fnxbv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rp-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.rp-row-meta[b-sku34fnxbv] {
    font-size: 12px;
    color: var(--rp-muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ID chip (mã NV, phòng ban) */
.rp-id[b-sku34fnxbv] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--rp-border);
    color: var(--rp-ink);
    font-weight: 500;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status pill: dot + chữ, nền rất nhạt */
.rp-pill[b-sku34fnxbv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.rp-pill-dot[b-sku34fnxbv] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.rp-pill--em[b-sku34fnxbv] { background: #e7f3ee; color: var(--rp-emerald); }
.rp-pill--am[b-sku34fnxbv] { background: #fdf3e2; color: var(--rp-amber); }
.rp-pill--rd[b-sku34fnxbv] { background: #f9eceb; color: var(--rp-red); }
.rp-pill--gr[b-sku34fnxbv] { background: #eef1f3; color: var(--rp-muted); }

/* Empty / loading */
.rp-empty[b-sku34fnxbv] {
    padding: 40px 16px;
    text-align: center;
    color: var(--rp-muted);
    font-size: 13px;
}
.rp-empty i[b-sku34fnxbv] { font-size: 26px; display: block; margin-bottom: 8px; color: #b6c0c7; }
.rp-empty p[b-sku34fnxbv] { margin: 0; }

/* Footer: đếm + pager */
.rp-foot[b-sku34fnxbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--rp-border);
    font-size: 12.5px;
    color: var(--rp-muted);
    font-variant-numeric: tabular-nums;
}

/* ── RIGHT: dossier ── */
.rp-dossier[b-sku34fnxbv] {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 12px;
    box-shadow: var(--rp-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}

.rp-dos-head[b-sku34fnxbv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.rp-dos-txt[b-sku34fnxbv] { min-width: 0; }
.rp-dos-name[b-sku34fnxbv] {
    font-size: 17px;
    font-weight: 700;
    color: var(--rp-ink);
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-dos-meta[b-sku34fnxbv] {
    font-size: 12px;
    color: var(--rp-muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.rp-dos-badge[b-sku34fnxbv] { margin-top: 7px; }

/* Section: header bar xám UPPERCASE + body */
.rp-section[b-sku34fnxbv] {
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    overflow: hidden;
}
.rp-section-hd[b-sku34fnxbv] {
    padding: 9px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--rp-border);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--rp-ink);
}
.rp-section-hd--split[b-sku34fnxbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rp-section-body[b-sku34fnxbv] { padding: 14px; }

/* ── Che CCCD (PII): số masked + nút hiển thị, ảnh blur + khoá ── */
.rp-reveal-row[b-sku34fnxbv] { display: inline-flex; align-items: center; gap: 8px; }
.rp-masked[b-sku34fnxbv] { letter-spacing: 2px; color: var(--rp-muted); }
.rp-reveal-btn[b-sku34fnxbv] { padding: 2px 8px; font-size: 11px; border-color: var(--rp-border); text-transform: none; letter-spacing: 0; }

.rp-img-box[b-sku34fnxbv] { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; }
.rp-img-locked img[b-sku34fnxbv] { filter: blur(9px); }
.rp-lock-overlay[b-sku34fnxbv] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(20, 30, 40, .28);
    border-radius: 8px;
}
.rp-lock-overlay i[b-sku34fnxbv] { font-size: 20px; color: #fff; }
.rp-lock-overlay span[b-sku34fnxbv] { font-size: 10.5px; color: #fff; }

/* Info rows trong section */
.rp-ir[b-sku34fnxbv] {
    display: flex;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rp-hair);
    font-size: 13px;
}
.rp-ir:last-child[b-sku34fnxbv] { border-bottom: none; }
.rp-ik[b-sku34fnxbv] { width: 110px; flex-shrink: 0; color: var(--rp-muted); font-size: 12px; padding-top: 1px; }
.rp-iv[b-sku34fnxbv] {
    font-weight: 500;
    color: var(--rp-ink);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* CCCD image grid */
.rp-img-grid[b-sku34fnxbv] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-img-caption[b-sku34fnxbv] { font-size: 11px; color: var(--rp-muted); margin-bottom: 4px; }
.rp-icon-sm[b-sku34fnxbv] { font-size: 16px; }
.reg-img[b-sku34fnxbv] {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--rp-border);
    cursor: pointer;
    background: #f7f9fa;
}
.img-ph[b-sku34fnxbv] {
    height: 96px;
    border-radius: 8px;
    border: 1.5px dashed var(--rp-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--rp-muted);
    font-size: 11px;
    gap: 4px;
    background: #fafbfc;
}

/* QR row */
.rp-qr-row[b-sku34fnxbv] { display: flex; align-items: center; gap: 12px; }
.rp-qr-img[b-sku34fnxbv] {
    width: 56px; height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--rp-border);
    cursor: pointer;
    flex-shrink: 0;
}
.rp-qr-label[b-sku34fnxbv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rp-emerald);
}
.rp-qr-label i[b-sku34fnxbv] { font-size: 15px; }
.rp-qr-sub[b-sku34fnxbv] { font-size: 12px; color: var(--rp-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Cảnh báo amber (thiếu QR) */
.rp-warn[b-sku34fnxbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdf3e2;
    color: var(--rp-amber);
    font-size: 12.5px;
}
.rp-warn i[b-sku34fnxbv] { font-size: 15px; flex-shrink: 0; }

/* Approve zone */
.rp-approve-grid[b-sku34fnxbv] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-field-nm[b-sku34fnxbv] { margin-bottom: 0; }
.rp-actions[b-sku34fnxbv] { display: flex; gap: 8px; margin-top: 12px; }
.rp-section .rp-actions:only-child[b-sku34fnxbv] { margin-top: 0; }
.rp-dossier > .rp-actions[b-sku34fnxbv] { margin-top: 0; }
.rp-flex1[b-sku34fnxbv] { flex: 1; }
.rp-flex2[b-sku34fnxbv] { flex: 2; }

/* Nút chính: emerald — MỘT nút primary duy nhất mỗi trạng thái màn hình */
.rp-btn-primary[b-sku34fnxbv] {
    background: var(--rp-emerald);
    border: 1px solid var(--rp-emerald);
    color: #fff;
    font-weight: 600;
}
.rp-btn-primary:hover[b-sku34fnxbv] { background: #046b4e; border-color: #046b4e; color: #fff; }
.rp-btn-primary:disabled[b-sku34fnxbv] { opacity: .6; }

/* Nút từ chối: chữ đỏ trên nền trắng viền nhạt (không đỏ đặc) */
.rp-btn-danger[b-sku34fnxbv] { border-color: var(--rp-border); color: var(--rp-red); }
.rp-btn-danger:hover[b-sku34fnxbv] { background: #f9eceb; border-color: #e8c9c7; color: var(--rp-red); }

/* Ghi chú trạng thái đã xử lý */
.rp-status-note[b-sku34fnxbv] {
    text-align: center;
    font-size: 12.5px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 500;
}
.rp-status-note--em[b-sku34fnxbv] { background: #e7f3ee; color: var(--rp-emerald); }
.rp-status-note--rd[b-sku34fnxbv] { background: #f9eceb; color: var(--rp-red); }

/* Slot list (đăng ký lịch) */
.rp-slot[b-sku34fnxbv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rp-hair);
    font-size: 13px;
    flex-wrap: wrap;
}
.rp-slot:last-child[b-sku34fnxbv] { border-bottom: none; }
.rp-slot-date[b-sku34fnxbv] {
    font-weight: 600;
    color: var(--rp-ink);
    font-variant-numeric: tabular-nums;
    min-width: 86px;
}
.rp-slot-shift[b-sku34fnxbv] { color: var(--rp-ink); }
.rp-slot-time[b-sku34fnxbv] { font-size: 12px; color: var(--rp-muted); font-variant-numeric: tabular-nums; }
.rp-slot .rp-id[b-sku34fnxbv] { margin-left: auto; }
.rp-slot-empty[b-sku34fnxbv] { padding: 14px; font-size: 13px; color: var(--rp-muted); }

/* ── Account setup modal ── */
.rp-acc-mbox[b-sku34fnxbv] { width: 420px; }
.rp-acct-list[b-sku34fnxbv] {
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    overflow: hidden;
}
.rp-acct-row[b-sku34fnxbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    border-top: 1px solid var(--rp-hair);
    transition: background .1s;
}
.rp-acct-row:first-child[b-sku34fnxbv] { border-top: none; }
.rp-acct-row:hover[b-sku34fnxbv] { background: #f7f9fa; }
.rp-acct-row.on[b-sku34fnxbv] { background: #f2f7f5; box-shadow: inset 3px 0 0 var(--rp-emerald); }
.rp-acct-radio[b-sku34fnxbv] { font-size: 15px; color: var(--rp-muted); flex-shrink: 0; }
.rp-acct-row.on .rp-acct-radio[b-sku34fnxbv] { color: var(--rp-emerald); }
.rp-acct-user-ic[b-sku34fnxbv] { color: var(--rp-muted); font-size: 15px; }
.rp-acct-since[b-sku34fnxbv] { margin-left: auto; font-size: 11px; color: var(--rp-muted); font-variant-numeric: tabular-nums; }

.rp-hint[b-sku34fnxbv] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f7f9fa;
    border: 1px solid var(--rp-border);
    color: var(--rp-muted);
    font-size: 12px;
}
.rp-hint i[b-sku34fnxbv] { font-size: 14px; margin-top: 1px; flex-shrink: 0; }

.rp-acc-footer[b-sku34fnxbv] { display: flex; gap: 10px; margin-top: 4px; }
.mb12[b-sku34fnxbv] { margin-bottom: 12px; }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 900px) {
    .rp-cols--open[b-sku34fnxbv] { grid-template-columns: 1fr; }
    .rp-dossier[b-sku34fnxbv] { position: static; }
}

@media (max-width: 768px) {
    .rp-wrap[b-sku34fnxbv] { gap: 12px; }
    .rp-title[b-sku34fnxbv] { font-size: 22px; }

    /* KPI → lưới 2 cột */
    .rp-kpis[b-sku34fnxbv] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .rp-kpi[b-sku34fnxbv] { min-width: 0; }

    /* Toolbar → grid, search full-width */
    .rp-toolbar[b-sku34fnxbv] { display: grid; grid-template-columns: 1fr auto; }
    .rp-chips[b-sku34fnxbv] { grid-column: 1 / -1; }
    .rp-search-wrap[b-sku34fnxbv] { min-width: 0; }

    /* Row → card dọc, pill xuống dưới tên */
    .rp-row[b-sku34fnxbv] { flex-wrap: wrap; }
    .rp-row-meta[b-sku34fnxbv] { white-space: normal; }

    .rp-dossier[b-sku34fnxbv] { padding: 14px; }
    .rp-approve-grid[b-sku34fnxbv] { grid-template-columns: 1fr; }
    .rp-acc-mbox[b-sku34fnxbv] { width: calc(100vw - 32px); }
}
/* _content/SeasonFlow.Web/Components/Pages/Payroll/Payroll.razor.rz.scp.css */
/* ══ Payroll — "Executive Payroll Terminal" (đồng bộ /employees, /dashboard)
   Nền porcelain #EEF1F2 (layout.css), widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · champagne #A16207 (tiền) · emerald #05835F (đã chi / primary)
   · amber #B45309 (chưa chi). Không gradient, mỗi khối đúng 1 điểm đậm 700. ══ */

/* Token phải khai cho CẢ .modal-bg: modal của trang được render NGOÀI .py-wrap,
   nên nếu chỉ khai trên wrapper thì mọi var(--p-*) bên trong modal đều invalid —
   .py-btn-primary mất nền emerald, chữ #fff trên nền trắng thành vô hình.
   Chỉ chia sẻ TOKEN, không chia sẻ layout: đắp flex-direction/max-width lên
   .modal-bg sẽ phá mất căn giữa của overlay. */
.py-wrap[b-xqbk3tt5ob],
.modal-bg[b-xqbk3tt5ob],
.py-drawer-bg[b-xqbk3tt5ob] {
    --p-ink: #293640;
    --p-muted: #6b7a85;
    --p-border: #e2e7ea;
    --p-hair: #eef1f3;
    --p-champagne: #a16207;
    --p-emerald: #05835f;
    --p-amber: #b45309;
    --p-red: #a32d2d;
    --p-cream: #fbf8f1;
    --p-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
}

.py-wrap[b-xqbk3tt5ob] {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--p-ink);
}

/* ── Page header + KPI strip ────────────────────── */
.py-head[b-xqbk3tt5ob] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.py-head-id[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.py-title[b-xqbk3tt5ob] {
    font-size: 26px;
    font-weight: 700;
    color: var(--p-ink);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin: 0;
}

.py-sub[b-xqbk3tt5ob] {
    font-size: 13px;
    color: var(--p-muted);
    margin-top: 4px;
}

.py-sub--id[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.py-back[b-xqbk3tt5ob] { flex-shrink: 0; }

.py-kpis[b-xqbk3tt5ob] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.py-kpi[b-xqbk3tt5ob] {
    background: #fff;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    box-shadow: var(--p-shadow);
    padding: 10px 16px;
    min-width: 118px;
}

.py-kpi-lbl[b-xqbk3tt5ob] {
    font-size: 11.5px;
    color: var(--p-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}

.py-kpi-val[b-xqbk3tt5ob] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--p-ink);
    line-height: 1.1;
    white-space: nowrap;
}

.py-kpi-val--ch[b-xqbk3tt5ob] { color: var(--p-champagne); }
.py-kpi-val--em[b-xqbk3tt5ob] { color: var(--p-emerald); }
.py-kpi-val--am[b-xqbk3tt5ob] { color: var(--p-amber); }

.py-kpi-sub[b-xqbk3tt5ob] {
    margin-top: 2px;
    color: var(--p-muted);
    font-size: 11px;
    white-space: nowrap;
}

/* ── Detail view: sổ ca (trái) + rail quyết toán (phải) ────────────
   Dựng như một phiếu lương: chuyện đã xảy ra bên trái, con số chốt bên phải. */
.py-detail-body[b-xqbk3tt5ob] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    align-items: start;
}

.py-rail[b-xqbk3tt5ob] { display: flex; flex-direction: column; gap: 14px; }

.py-settle[b-xqbk3tt5ob] { padding: 16px; display: flex; flex-direction: column; }

.py-settle-row[b-xqbk3tt5ob] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--p-hair);
    font-size: 13px;
    color: var(--p-muted);
}

.py-settle-cnt[b-xqbk3tt5ob] { color: var(--p-muted); font-size: 12px; }
.py-settle-v[b-xqbk3tt5ob] { font-size: 14px; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.py-settle-v--plus[b-xqbk3tt5ob]  { color: var(--p-emerald); }
.py-settle-v--minus[b-xqbk3tt5ob] { color: var(--p-amber); }
.py-settle-v--dep[b-xqbk3tt5ob]   { color: var(--p-emerald); }

/* khối thực lĩnh dùng lại .py-money, chỉ nới cỡ số cho vai trò focal point */
.py-money--net[b-xqbk3tt5ob] { margin-top: 14px; margin-bottom: 0; padding: 14px 15px; }
.py-money--net .py-money-val[b-xqbk3tt5ob] { font-size: 26px; letter-spacing: -.5px; }
.py-net-unit[b-xqbk3tt5ob] { font-size: 13px; font-weight: 500; color: var(--p-muted); margin-left: 5px; }

.py-meter-cap[b-xqbk3tt5ob] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--p-muted);
}
.py-cap--em[b-xqbk3tt5ob] { color: var(--p-emerald); }
.py-cap--am[b-xqbk3tt5ob] { color: var(--p-amber); }

.py-rail-note[b-xqbk3tt5ob] {
    padding: 11px 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--p-muted);
    background: #fafbfc;
    border-top: 1px solid var(--p-border);
}

/* ── Dòng tiền cọc giữ ca (biểu đồ tròn) ────────── */
.py-dp[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 18px 16px;
    flex-wrap: wrap;
}

.py-dp-chart[b-xqbk3tt5ob] { flex: 0 0 auto; }

/* Vòng tròn vẽ bằng conic-gradient (đặt inline theo dữ liệu), khoét lỗ bằng
   phần tử con nền trắng — không cần thư viện chart. */
.py-dp-donut[b-xqbk3tt5ob] {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.py-dp-hole[b-xqbk3tt5ob] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.py-dp-hole-lbl[b-xqbk3tt5ob] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    color: var(--p-muted);
}

.py-dp-hole-val[b-xqbk3tt5ob] {
    font-size: 15px;
    font-weight: 700;
    color: var(--p-champagne);
    font-variant-numeric: tabular-nums;
}

.py-dp-legend[b-xqbk3tt5ob] { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }

.py-dp-item[b-xqbk3tt5ob] {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--p-hair);
    font-size: 13px;
}
.py-dp-item:last-child[b-xqbk3tt5ob] { border-bottom: none; }

.py-dp-dot[b-xqbk3tt5ob] { width: 10px; height: 10px; border-radius: 3px; }
.py-dp-name[b-xqbk3tt5ob] { color: var(--p-ink); }
.py-dp-val[b-xqbk3tt5ob] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--p-ink); }
.py-dp-pct[b-xqbk3tt5ob] { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--p-muted); min-width: 44px; text-align: right; }

.py-dp-item--total[b-xqbk3tt5ob] { border-top: 2px solid var(--p-border); margin-top: 4px; padding-top: 9px; }
.py-dp-item--total .py-dp-name[b-xqbk3tt5ob] { font-weight: 600; }
.py-dp-item--total .py-dp-val[b-xqbk3tt5ob] { color: var(--p-champagne); font-weight: 700; }
.py-dp-item--total[b-xqbk3tt5ob] { grid-template-columns: 1fr auto auto; }

@media (max-width: 640px) {
    .py-dp[b-xqbk3tt5ob] { gap: 16px; justify-content: center; }
}

/* ── Cơ cấu ca (theo tiền) ──────────────────────── */
.py-comp[b-xqbk3tt5ob] { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }

.py-comp-row[b-xqbk3tt5ob] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: baseline;
}

.py-comp-name[b-xqbk3tt5ob] { min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; }
.py-comp-cnt[b-xqbk3tt5ob] { color: var(--p-muted); font-size: 11.5px; flex-shrink: 0; }
.py-comp-val[b-xqbk3tt5ob] { font-size: 13px; font-weight: 600; color: var(--p-champagne); font-variant-numeric: tabular-nums; }

.py-comp-bar[b-xqbk3tt5ob] {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 99px;
    background: var(--p-hair);
    overflow: hidden;
}
.py-comp-bar > span[b-xqbk3tt5ob] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--p-champagne) 55%, transparent);
}
.py-comp-bar.is-top > span[b-xqbk3tt5ob] { background: var(--p-champagne); }

/* ── Cột tiền tách 3 phần: trọn ca · điều chỉnh · thực trả ─────────
   nowrap để con số không bao giờ bị bẻ đôi giữa chừng. */
.py-td-shiftpay[b-xqbk3tt5ob],
.py-td-adj[b-xqbk3tt5ob] {
    color: var(--p-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.py-td-shiftpay[b-xqbk3tt5ob] { color: var(--p-ink); }
.py-adj--plus[b-xqbk3tt5ob]  { color: var(--p-emerald); white-space: nowrap; }
.py-adj--minus[b-xqbk3tt5ob] { color: var(--p-amber);   white-space: nowrap; }

/* Cọc giữ ca hoàn lại — emerald như mọi khoản cộng vào lương */
.py-td-dep[b-xqbk3tt5ob] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.py-dep[b-xqbk3tt5ob] { color: var(--p-emerald); font-weight: 500; white-space: nowrap; }

.py-kpi-of[b-xqbk3tt5ob] { font-weight: 400; color: var(--p-muted); }

@media (max-width: 1100px) {
    .py-detail-body[b-xqbk3tt5ob] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Filter bar ─────────────────────────────────── */
.py-filterbar[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.py-input[b-xqbk3tt5ob] {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--p-border);
    border-radius: 9px;
    background: #fff;
    color: var(--p-ink);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    width: auto;
}

.py-input:focus[b-xqbk3tt5ob] { border-color: var(--p-ink); outline: none; }

/* ── Widgets (base) ─────────────────────────────── */
.py-widget[b-xqbk3tt5ob] {
    background: #fff;
    border: 1px solid var(--p-border);
    border-radius: 12px;
    box-shadow: var(--p-shadow);
    overflow: hidden;
}

.py-widget-hd[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--p-border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--p-ink);
}

.py-widget-hd-r[b-xqbk3tt5ob] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    color: var(--p-muted);
    text-transform: none;
}

.py-grid[b-xqbk3tt5ob] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
    gap: 14px;
}

/* ── Chart: flat div-based stacked bars ─────────── */
.py-legend[b-xqbk3tt5ob] { display: inline-flex; align-items: center; gap: 6px; }

.py-legend-dot[b-xqbk3tt5ob] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.py-legend-dot--paid[b-xqbk3tt5ob]   { background: var(--p-emerald); }
.py-legend-dot--unpaid[b-xqbk3tt5ob] { background: #d7dee2; margin-left: 8px; }

.py-chart-body[b-xqbk3tt5ob] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 18px 20px 14px;
    overflow-x: auto;
}

.py-chart-col[b-xqbk3tt5ob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 56px;
    flex: 1;
}

.py-chart-amt[b-xqbk3tt5ob] {
    font-size: 11px;
    color: var(--p-muted);
    font-variant-numeric: tabular-nums;
}

.py-chart-track[b-xqbk3tt5ob] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 122px;
    background:
        repeating-linear-gradient(to top, transparent 0 29.5px, var(--p-hair) 29.5px 30.5px);
    border-bottom: 1px solid var(--p-border);
}

.py-chart-stack[b-xqbk3tt5ob] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 38px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    transition: opacity .15s;
}

.py-chart-col:hover .py-chart-stack[b-xqbk3tt5ob] { opacity: .8; }

.py-chart-seg--paid[b-xqbk3tt5ob]   { background: var(--p-emerald); }
.py-chart-seg--unpaid[b-xqbk3tt5ob] { background: #d7dee2; }

.py-chart-lbl[b-xqbk3tt5ob] {
    font-size: 11px;
    color: var(--p-muted);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Payment progress widget ────────────────────── */
.py-progress-body[b-xqbk3tt5ob] {
    padding: 14px 16px 8px;
    display: flex;
    flex-direction: column;
}

.py-money[b-xqbk3tt5ob] {
    background: var(--p-cream);
    border: 1px solid #efe6d2;
    border-radius: 9px;
    padding: 12px 14px;
    margin-bottom: 6px;
}

.py-money-lbl[b-xqbk3tt5ob] {
    font-size: 11.5px;
    color: var(--p-muted);
    margin-bottom: 4px;
}

.py-money-val[b-xqbk3tt5ob] {
    font-size: 20px;
    font-weight: 700;
    color: var(--p-champagne);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.py-money-total[b-xqbk3tt5ob] {
    font-size: 12px;
    font-weight: 500;
    color: var(--p-muted);
}

.py-meter[b-xqbk3tt5ob] {
    height: 5px;
    border-radius: 99px;
    background: #efe6d2;
    overflow: hidden;
    margin-top: 10px;
}

.py-meter span[b-xqbk3tt5ob] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--p-champagne);
}

.py-progress-line[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--p-hair);
    color: var(--p-muted);
    font-size: 12.5px;
}

.py-progress-line:last-child[b-xqbk3tt5ob] { border-bottom: none; }

.py-progress-line strong[b-xqbk3tt5ob] {
    font-size: 15px;
    font-weight: 700;
    color: var(--p-ink);
    font-variant-numeric: tabular-nums;
}

.py-line--em[b-xqbk3tt5ob] { color: var(--p-emerald) !important; }
.py-line--am[b-xqbk3tt5ob] { color: var(--p-amber) !important; }

/* ── Ledger toolbar (tabs + search + date range) ── */
.py-toolbar[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--p-border);
}

.py-tabs[b-xqbk3tt5ob] {
    display: inline-flex;
    border: 1px solid var(--p-border);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.py-tab[b-xqbk3tt5ob] {
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--p-muted);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s, color .1s;
    font-variant-numeric: tabular-nums;
}

.py-tab + .py-tab[b-xqbk3tt5ob] { border-left: 1px solid var(--p-border); }
.py-tab:hover[b-xqbk3tt5ob] { background: #f7f9fa; }

.py-tab.on[b-xqbk3tt5ob] {
    background: #f2f7f5;
    color: var(--p-emerald);
    font-weight: 600;
}

.search-wrap[b-xqbk3tt5ob] {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}

.search-icon[b-xqbk3tt5ob] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-muted);
    pointer-events: none;
    font-size: 15px;
}

.search-input[b-xqbk3tt5ob] {
    width: 100%;
    height: 36px;
    padding: 0 30px 0 34px;
    border: 1px solid var(--p-border);
    border-radius: 9px;
    background: #fff;
    color: var(--p-ink);
    font-size: 13px;
}

.search-input:focus[b-xqbk3tt5ob] { border-color: var(--p-ink); outline: none; }
.search-input[b-xqbk3tt5ob]::placeholder { color: var(--p-muted); }

.py-search-clear[b-xqbk3tt5ob] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--p-muted);
    padding: 3px 5px;
    border-radius: 5px;
    line-height: 1;
    font-size: 13px;
}

.py-search-clear:hover[b-xqbk3tt5ob] { color: var(--p-ink); background: var(--p-hair); }

.py-daterange[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.py-daterange .py-input[b-xqbk3tt5ob] { width: 138px; }
.py-daterange-sep[b-xqbk3tt5ob] { color: var(--p-muted); }

/* ── Employee groups inside the ledger ──────────── */
.py-group[b-xqbk3tt5ob] { border-bottom: 1px solid var(--p-border); }
.py-group:last-of-type[b-xqbk3tt5ob] { border-bottom: none; }

.py-group-hd[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    transition: background .1s;
}

.py-group-hd:hover[b-xqbk3tt5ob] { background: #f7f9fa; }

.py-collapse-btn[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--p-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .1s, color .1s;
}

.py-collapse-btn:hover[b-xqbk3tt5ob] { background: var(--p-hair); color: var(--p-ink); }
.py-collapse-btn i[b-xqbk3tt5ob] { font-size: 15px; transition: transform .18s ease; }
.py-collapse-btn--closed i[b-xqbk3tt5ob] { transform: rotate(-90deg); }

.py-av[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #f1f4f6;
    border: 1px solid var(--p-border);
    color: var(--p-ink);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.py-group-id[b-xqbk3tt5ob] { min-width: 0; flex: 1; }

.py-group-name-row[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.py-name-btn[b-xqbk3tt5ob] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--p-ink);
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.py-name-btn:hover[b-xqbk3tt5ob] { color: var(--p-emerald); text-decoration: underline; }

.py-group-sub[b-xqbk3tt5ob] {
    font-size: 12px;
    color: var(--p-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.py-group-actions[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-left: auto;
}

.py-group-total[b-xqbk3tt5ob] { font-size: 15px; }
.py-paid-note[b-xqbk3tt5ob] { font-size: 12px; color: var(--p-emerald); }

/* ── ID chip (mã NV) ────────────────────────────── */
.py-chip[b-xqbk3tt5ob] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 7px;
    background: #f1f4f6;
    border: 1px solid var(--p-border);
    color: var(--p-ink);
    font-weight: 500;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Status pills (dot + chữ, nền rất nhạt) ─────── */
.py-pill[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.py-pill-dot[b-xqbk3tt5ob] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.py-pill--em[b-xqbk3tt5ob] { background: #e7f3ee; color: var(--p-emerald); }
.py-pill--am[b-xqbk3tt5ob] { background: #fdf3e2; color: var(--p-amber); }
.py-pill--gr[b-xqbk3tt5ob] { background: var(--p-hair); color: var(--p-muted); }
.py-pill--rd[b-xqbk3tt5ob] { background: #fcebeb; color: var(--p-red); }

/* ── Money values (champagne, mono) ─────────────── */
.py-amt[b-xqbk3tt5ob] {
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.py-amt--ch[b-xqbk3tt5ob]   { color: var(--p-champagne); }
.py-amt--mut[b-xqbk3tt5ob]  { color: var(--p-muted); font-weight: 500; }
.py-amt--zero[b-xqbk3tt5ob] { color: var(--p-red); }

.py-amt-sub[b-xqbk3tt5ob] {
    font-size: 11px;
    color: var(--p-muted);
    margin-top: 2px;
    font-weight: 400;
}

.py-tag[b-xqbk3tt5ob] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--p-hair);
    color: var(--p-muted);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    vertical-align: middle;
}

.py-rate[b-xqbk3tt5ob] {
    font-weight: 600;
    color: var(--p-champagne);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.py-rate-unit[b-xqbk3tt5ob] { font-size: 11px; font-weight: 500; color: var(--p-muted); }

/* ── Tables (ledger style) ──────────────────────── */
.py-tw[b-xqbk3tt5ob] { overflow-x: auto; }

.py-tw--scroll[b-xqbk3tt5ob] {
    max-height: 560px;
    overflow-y: auto;
}

.py-table[b-xqbk3tt5ob] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.py-table thead th[b-xqbk3tt5ob] {
    padding: 9px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--p-muted);
    background: #fafbfc;
    border-bottom: 1px solid var(--p-border);
    border-top: 1px solid var(--p-hair);
    white-space: nowrap;
}

.py-table td[b-xqbk3tt5ob] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--p-hair);
    vertical-align: middle;
}

.py-table tbody tr:last-child td[b-xqbk3tt5ob] { border-bottom: none; }
.py-table tbody tr.py-row[b-xqbk3tt5ob] { transition: background .1s; }
.py-table tbody tr.py-row:hover td[b-xqbk3tt5ob] { background: #f7f9fa; }

.py-table--detail thead th[b-xqbk3tt5ob] {
    position: sticky;
    top: 0;
    z-index: 2;
    border-top: none;
}

.py-table--detail tbody tr.py-row--unpaid td[b-xqbk3tt5ob] { background: #fdfaf3; }
.py-table--detail tbody tr.py-row--unpaid:hover td[b-xqbk3tt5ob] { background: #faf5ea; }

.py-table thead th.py-th-r[b-xqbk3tt5ob] { text-align: right; }
.py-td-r[b-xqbk3tt5ob] { text-align: right; }
.py-td-ellipsis[b-xqbk3tt5ob] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cột Thao tác: các nút là inline-flex nên với text-align:right chúng tự xuống dòng
   khi cột hẹp, làm mỗi hàng cao thấp một kiểu. Ép thành một hàng flex canh phải,
   không wrap, để mọi dòng có cùng chiều cao và các nút thẳng cột với nhau. */
/* KHÔNG đặt display:flex lên <td> — làm vậy sẽ kéo ô ra khỏi thuật toán
   table layout, <colgroup> mất tác dụng và các cột đè lên nhau.
   Flex nằm ở div bọc bên trong. */
.py-acts[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
}
/* nowrap đặt trên nút chứ không đặt trên ô — ô còn chứa khối xác nhận
   "ca chưa hoàn tất" với câu dài, cần được phép xuống dòng. */
.py-acts .btn[b-xqbk3tt5ob] { white-space: nowrap; flex-shrink: 0; }

/* .bsm mặc định 8px/16px là quá rộng cho một ô thao tác trong bảng */
.py-acts .btn.bsm[b-xqbk3tt5ob] { padding: 7px 12px; font-size: 13px; }

/* Nút chỉ có icon (xem chi tiết / sửa) → ép vuông cho cân với nút có chữ */
.py-acts .btn.bgh.bsm > i:only-child[b-xqbk3tt5ob] { margin: 0; }
.py-acts .btn.bgh.bsm:not(.py-btn-pay)[b-xqbk3tt5ob] { padding: 7px 9px; }

.py-td-date[b-xqbk3tt5ob] { font-weight: 500; color: var(--p-ink); white-space: nowrap; }
.py-td-dept[b-xqbk3tt5ob] { color: var(--p-muted); }
.py-td-inout[b-xqbk3tt5ob] { white-space: nowrap; color: var(--p-ink); }
.py-io-sep[b-xqbk3tt5ob] { margin: 0 5px; color: var(--p-muted); }
.py-td-count[b-xqbk3tt5ob] { color: var(--p-muted); }

/* Shift cell: icon mờ + tên, không pill pastel */
.py-shift[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    font-weight: 600;
    font-size: 13px;
    color: var(--p-ink);
    white-space: nowrap;
}

.py-shift i[b-xqbk3tt5ob] { color: var(--p-muted); font-size: 15px; flex-shrink: 0; }
.py-shift-txt[b-xqbk3tt5ob] { overflow: hidden; text-overflow: ellipsis; }

/* Sticky total row (cream, champagne) */
.py-table--detail tfoot td[b-xqbk3tt5ob] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--p-cream);
    border-top: 1px solid #efe6d2;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--p-muted);
    font-weight: 500;
}

.py-total-amt[b-xqbk3tt5ob] { font-size: 14px; }
.py-total-note[b-xqbk3tt5ob] { font-size: 11.5px; color: var(--p-muted); }

/* ── Buttons ────────────────────────────────────── */
.py-wrap .btn.bgh[b-xqbk3tt5ob] { border-color: var(--p-border); background: #fff; }
.py-wrap .btn.bgh:hover[b-xqbk3tt5ob] { background: #f7f9fa; opacity: 1; }

.py-btn-primary[b-xqbk3tt5ob] {
    background: var(--p-emerald);
    border: 1px solid var(--p-emerald);
    color: #fff;
    font-weight: 600;
}

.py-btn-primary:hover[b-xqbk3tt5ob] { background: #046b4e; border-color: #046b4e; color: #fff; opacity: 1; }

.py-btn-pay[b-xqbk3tt5ob] { color: var(--p-emerald); font-weight: 600; }
.py-btn-pay:hover[b-xqbk3tt5ob] { background: #f2f7f5; }

.py-warn-ico[b-xqbk3tt5ob] { color: var(--p-amber); }

.py-confirm-incomplete[b-xqbk3tt5ob] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    white-space: normal;
    min-width: 170px;
}

.py-confirm-incomplete-txt[b-xqbk3tt5ob] {
    font-size: 11px;
    color: var(--p-amber);
    text-align: right;
    line-height: 1.3;
}

.py-confirm-incomplete-btns[b-xqbk3tt5ob] { display: flex; gap: 6px; }

/* ── Ledger footer (đếm + pager) ────────────────── */
.py-foot[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--p-border);
    font-size: 12.5px;
    color: var(--p-muted);
    font-variant-numeric: tabular-nums;
}

.py-foot-pager[b-xqbk3tt5ob] { margin-left: auto; }

/* ── Empty / loading ────────────────────────────── */
.py-loading[b-xqbk3tt5ob] {
    text-align: center;
    padding: 48px;
    color: var(--p-muted);
}

.py-empty[b-xqbk3tt5ob] {
    text-align: center;
    padding: 40px 16px;
    color: var(--p-muted);
    font-size: 13px;
}

.py-empty i[b-xqbk3tt5ob] { font-size: 32px; display: block; margin-bottom: 10px; color: #b6c0c7; }

/* ── Modal — cùng ngôn ngữ terminal ─────────────── */
.mac-info-box[b-xqbk3tt5ob] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 14px;
    background: #fafbfc;
    border: 1px solid var(--p-border);
    border-radius: 9px;
}

.mac-info-row[b-xqbk3tt5ob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    padding: 9px 0;
    border-bottom: 1px solid var(--p-hair);
}

.mac-info-row:last-child[b-xqbk3tt5ob] { border-bottom: none; }

.mac-info-lbl[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--p-muted);
    flex-shrink: 0;
}

.mac-info-ico[b-xqbk3tt5ob] { font-size: 15px; color: var(--p-muted); }

.mac-info-val[b-xqbk3tt5ob] {
    font-weight: 600;
    text-align: right;
    color: var(--p-ink);
    font-variant-numeric: tabular-nums;
}







.py-seg-projected[b-xqbk3tt5ob] {
    font-size: 10px;
    font-weight: 600;
    color: var(--p-amber);
    background: #fdf3e2;
    border-radius: 5px;
    padding: 1px 6px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Money summary bar: cream + champagne */
.mac-total-bar[b-xqbk3tt5ob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-top: 8px;
    background: var(--p-cream);
    border: 1px solid #efe6d2;
    border-radius: 9px;
}

/* Khoảng giờ ca đi kèm nhãn — chữ nhỏ, muted, để con số tiền giữ vai trò
   điểm đậm 700 duy nhất của khối. */
.mac-total-sub[b-xqbk3tt5ob] {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--p-muted);
    font-variant-numeric: tabular-nums;
}

.mac-total-lbl[b-xqbk3tt5ob] { font-size: 12.5px; font-weight: 500; color: var(--p-muted); }
.mac-total-val[b-xqbk3tt5ob] { font-size: 15px; font-weight: 700; color: var(--p-champagne); font-variant-numeric: tabular-nums; }

/* Calculation breakdown */
.mac-calc[b-xqbk3tt5ob] {
    margin-top: 8px;
    margin-bottom: 14px;
    border: 1px solid #efe6d2;
    border-radius: 9px;
    overflow: hidden;
}

.mac-calc-row[b-xqbk3tt5ob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #f3ede0;
}

.mac-calc-row:first-child[b-xqbk3tt5ob] {
    background: var(--p-cream);
    padding: 10px 14px;
}

.mac-calc-lbl[b-xqbk3tt5ob] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--p-muted);
}

.mac-calc-shift[b-xqbk3tt5ob] {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--p-muted);
}

.mac-calc-val[b-xqbk3tt5ob] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--p-ink);
    font-variant-numeric: tabular-nums;
}

.mac-calc-row:first-child .mac-calc-val[b-xqbk3tt5ob] {
    font-size: 15px;
    font-weight: 700;
    color: var(--p-champagne);
}

.mac-calc-input[b-xqbk3tt5ob] {
    gap: 12px;
}

.mac-calc-input[b-xqbk3tt5ob]  input {
    font-size: 13px;
    padding: 5px 10px;
}

.mac-calc-penalty .mac-calc-lbl[b-xqbk3tt5ob],
.mac-calc-penalty[b-xqbk3tt5ob] {
    color: var(--p-red, #A32D2D);
}

.mac-calc-deposit[b-xqbk3tt5ob] {
    background: #E7F3EE;
}

/* Dòng chỉ để tham chiếu — có số nhưng KHÔNG cộng vào thành tiền.
   Gạch ngang + muted để không ai đọc nhầm là tiền được chi. */
.mac-calc-muted[b-xqbk3tt5ob] { background: #FAFBFC; }

.mac-calc-muted .mac-calc-lbl[b-xqbk3tt5ob],
.mac-calc-muted .mac-calc-val[b-xqbk3tt5ob] { color: var(--p-muted); font-weight: 400; }

.mac-calc-strike[b-xqbk3tt5ob] { text-decoration: line-through; }

.mac-calc-why[b-xqbk3tt5ob] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--p-muted);
}

.mac-calc-deposit .mac-calc-lbl[b-xqbk3tt5ob],
.mac-calc-deposit .mac-calc-val[b-xqbk3tt5ob] {
    color: #05835F;
}

.mac-calc-total[b-xqbk3tt5ob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--p-cream);
    border-top: 2px solid #efe6d2;
}

.mac-calc-total .mac-calc-lbl[b-xqbk3tt5ob] {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-ink);
}

.mac-calc-total .mac-calc-val[b-xqbk3tt5ob] {
    font-size: 16px;
    font-weight: 700;
    color: var(--p-champagne);
}

.py-pay-footer[b-xqbk3tt5ob] { display: flex; flex-direction: column; gap: 8px; }
.py-pay-footer-row[b-xqbk3tt5ob] { display: flex; gap: 8px; }
.py-pay-footer .btn[b-xqbk3tt5ob] { justify-content: center; }

.py-required-mark[b-xqbk3tt5ob] { color: var(--p-red); margin-left: 3px; }
.py-required-hint[b-xqbk3tt5ob] { font-size: 11.5px; color: var(--p-red); margin-top: 4px; }
.py-input-invalid[b-xqbk3tt5ob] { border-color: var(--p-red) !important; }

/* ── Sortable headers ───────────────────────────── */
.py-th-sort[b-xqbk3tt5ob] { cursor: pointer; user-select: none; transition: color .1s; }
.py-th-sort:hover[b-xqbk3tt5ob] { color: var(--p-ink); }
.py-th-sort i[b-xqbk3tt5ob] { font-size: 11px; margin-left: 3px; opacity: .55; }
.py-th-sort:hover i[b-xqbk3tt5ob] { opacity: 1; }

/* ── Top bar (brand + date range + confirm) ─────── */
.py-topbar[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.py-brand[b-xqbk3tt5ob] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.py-topbar .py-title[b-xqbk3tt5ob] { font-size: 20px; }

.py-topbar-r[b-xqbk3tt5ob] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.py-range[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--p-border);
    border-radius: 9px;
    background: #fff;
    color: var(--p-ink);
    font-size: 13px;
}

.py-range:focus-within[b-xqbk3tt5ob] { border-color: var(--p-ink); }
.py-range i[b-xqbk3tt5ob] { color: var(--p-muted); font-size: 16px; flex-shrink: 0; }

.py-range-input[b-xqbk3tt5ob] {
    border: none;
    background: transparent;
    color: var(--p-ink);
    font-family: var(--font);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    outline: none;
    cursor: pointer;
    padding: 0;
    height: 100%;
}
.py-updated[b-xqbk3tt5ob] { font-size: 12px; color: var(--p-muted); white-space: nowrap; }

/* ── 4-step flow tracker ────────────────────────── */
.py-flow[b-xqbk3tt5ob] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--p-border);
    border-radius: 12px;
    box-shadow: var(--p-shadow);
    overflow-x: auto;
}

.py-step[b-xqbk3tt5ob] { flex: 1; min-width: 178px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.py-step-hd[b-xqbk3tt5ob] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.py-step-no[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1f3;
    color: var(--p-muted);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.py-step-no--am[b-xqbk3tt5ob] { background: #fdf3e2; color: var(--p-amber); }
.py-step-no--em[b-xqbk3tt5ob] { background: #e7f3ee; color: var(--p-emerald); }
.py-step-name[b-xqbk3tt5ob] { font-size: 13px; font-weight: 600; color: var(--p-ink); }

.py-step-metrics[b-xqbk3tt5ob] { display: flex; gap: 20px; flex-wrap: wrap; }
.py-metric[b-xqbk3tt5ob] { display: flex; align-items: center; gap: 9px; }
.py-metric-ico[b-xqbk3tt5ob] { font-size: 20px; color: var(--p-muted); flex-shrink: 0; }
.py-metric-ico--am[b-xqbk3tt5ob] { color: var(--p-amber); }
.py-metric-ico--em[b-xqbk3tt5ob] { color: var(--p-emerald); }

.py-metric-val[b-xqbk3tt5ob] {
    font-size: 20px;
    font-weight: 700;
    color: var(--p-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.py-metric-val--am[b-xqbk3tt5ob] { color: var(--p-amber); }
.py-metric-val--em[b-xqbk3tt5ob] { color: var(--p-emerald); }
.py-metric-lbl[b-xqbk3tt5ob] { font-size: 11px; color: var(--p-muted); margin-top: 1px; }

/* Canh mũi tên đúng vào hàng số liệu (ghim đáy) thay vì giữa cả khối */
.py-step-arrow[b-xqbk3tt5ob] { display: flex; align-items: flex-end; justify-content: center; color: #aeb8c0; flex-shrink: 0; padding: 0 2px 16px; }
.py-step-arrow svg[b-xqbk3tt5ob] { display: block; width: 38px; height: 14px; }

/* ── Panels grid (anomalies + dept summary) ─────── */
.py-grid--panels[b-xqbk3tt5ob] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.py-count-chip[b-xqbk3tt5ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef1f3;
    color: var(--p-muted);
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.py-link[b-xqbk3tt5ob] {
    border: none;
    background: none;
    color: var(--p-muted);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    cursor: pointer;
    text-transform: none;
}

.py-link:hover[b-xqbk3tt5ob] { color: var(--p-emerald); }

/* ── Flat-table helpers (anomalies / dept / ledger) ── */
.py-table--auto[b-xqbk3tt5ob] { table-layout: auto; }

.py-emp-cell[b-xqbk3tt5ob] { display: flex; align-items: center; gap: 9px; min-width: 0; }
.py-dot[b-xqbk3tt5ob] { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.py-dot--rd[b-xqbk3tt5ob] { background: var(--p-red); }
.py-dot--am[b-xqbk3tt5ob] { background: var(--p-amber); }
.py-td-mut[b-xqbk3tt5ob] { color: var(--p-muted); }
.py-td-deptname[b-xqbk3tt5ob] { font-weight: 500; color: var(--p-ink); }
.py-td-detail[b-xqbk3tt5ob] { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.py-detail-sep[b-xqbk3tt5ob] { color: var(--p-muted); }
.py-ded[b-xqbk3tt5ob] { color: var(--p-red); font-weight: 600; }

/* Ledger flat table: header bar + checkbox + selected row */
.py-ledger-hd[b-xqbk3tt5ob] { border-bottom: 1px solid var(--p-border); }
.py-th-chk[b-xqbk3tt5ob], .py-td-chk[b-xqbk3tt5ob] { text-align: center; padding-left: 8px; padding-right: 8px; }
.py-chk[b-xqbk3tt5ob] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--p-emerald); }
.py-chk:disabled[b-xqbk3tt5ob] { cursor: not-allowed; opacity: .4; }
.py-table--ledger tbody tr.py-row--sel td[b-xqbk3tt5ob] { background: #f2f7f5; }
.py-table--ledger tbody tr.py-row--sel:hover td[b-xqbk3tt5ob] { background: #eef4f1; }

/* ── Bulk confirm modal ─────────────────────────── */
.py-bulk-box[b-xqbk3tt5ob] {
    background: #fafbfc;
    border: 1px solid var(--p-border);
    border-radius: 9px;
    padding: 2px 14px;
    margin-bottom: 14px;
}

.py-bulk-row[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--p-hair);
    font-size: 13px;
}

.py-bulk-row:last-child[b-xqbk3tt5ob] { border-bottom: none; }
.py-bulk-lbl[b-xqbk3tt5ob] { color: var(--p-muted); }
.py-bulk-count[b-xqbk3tt5ob] { font-weight: 600; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.py-bulk-total[b-xqbk3tt5ob] { font-size: 16px; font-weight: 700; color: var(--p-champagne); font-variant-numeric: tabular-nums; }
.py-bulk-msg[b-xqbk3tt5ob] { padding: 14px 2px 18px; color: var(--p-muted); font-size: 13px; text-align: center; }

/* ── Mobile PWA (≤768px) ────────────────────────── */
@media (max-width: 900px) {
    .py-grid[b-xqbk3tt5ob], .py-grid--panels[b-xqbk3tt5ob] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .py-wrap[b-xqbk3tt5ob] { gap: 12px; }
    .py-title[b-xqbk3tt5ob] { font-size: 22px; }
    .py-head[b-xqbk3tt5ob] { align-items: flex-start; }

    /* KPI → lưới 2 cột */
    .py-kpis[b-xqbk3tt5ob] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .py-kpi[b-xqbk3tt5ob] { min-width: 0; }
    .py-kpi-val[b-xqbk3tt5ob] { font-size: 18px; }

    /* Filter → grid */
    .py-filterbar[b-xqbk3tt5ob] { display: grid; grid-template-columns: 1fr 1fr; }
    .py-filterbar .py-input:first-child[b-xqbk3tt5ob] { grid-column: 1 / -1; }
    .py-filterbar .py-input[b-xqbk3tt5ob] { width: 100%; }

    .py-toolbar[b-xqbk3tt5ob] { padding: 10px 12px; }
    .py-tabs[b-xqbk3tt5ob] { width: 100%; }
    .py-tab[b-xqbk3tt5ob] { flex: 1; text-align: center; }
    .search-wrap[b-xqbk3tt5ob] { max-width: none; }
    .py-daterange[b-xqbk3tt5ob] { width: 100%; }
    .py-daterange .py-input[b-xqbk3tt5ob] { flex: 1; width: auto; min-width: 0; }

    /* Group header wrap */
    .py-group-hd[b-xqbk3tt5ob] { padding: 12px; }
    .py-group-actions[b-xqbk3tt5ob] {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .py-group-actions .py-btn-primary[b-xqbk3tt5ob] { min-height: 40px; }

    /* Breakdown table → thẻ dọc */
    .py-table--breakdown[b-xqbk3tt5ob] { display: block; table-layout: auto; }
    .py-table--breakdown colgroup[b-xqbk3tt5ob], .py-table--breakdown thead[b-xqbk3tt5ob] { display: none; }
    .py-table--breakdown tbody[b-xqbk3tt5ob] { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .py-table--breakdown tbody tr.py-row[b-xqbk3tt5ob] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "shift  status"
            "dept   count"
            "amt    amt"
            "act    act";
        gap: 4px 10px;
        align-items: center;
        padding: 12px;
        border: 1px solid var(--p-border);
        border-radius: 12px;
        background: #fff;
    }
    .py-table--breakdown td[b-xqbk3tt5ob] { padding: 0; border-bottom: none; }
    .py-table--breakdown .py-td-shift[b-xqbk3tt5ob]  { grid-area: shift; }
    .py-table--breakdown .py-td-status[b-xqbk3tt5ob] { grid-area: status; justify-self: end; }
    .py-table--breakdown .py-td-dept[b-xqbk3tt5ob]   { grid-area: dept; }
    .py-table--breakdown .py-td-count[b-xqbk3tt5ob]  { grid-area: count; justify-self: end; }
    .py-table--breakdown .py-td-amt[b-xqbk3tt5ob]    { grid-area: amt; text-align: left; margin-top: 4px; }
    .py-table--breakdown .py-td-act[b-xqbk3tt5ob]    { grid-area: act; justify-self: end; margin-top: 4px; }

    /* Detail table → thẻ dọc */
    .py-tw--scroll[b-xqbk3tt5ob] { max-height: none; overflow-y: visible; }
    .py-table--detail[b-xqbk3tt5ob] { display: block; table-layout: auto; }
    .py-table--detail colgroup[b-xqbk3tt5ob], .py-table--detail thead[b-xqbk3tt5ob] { display: none; }
    .py-table--detail tbody[b-xqbk3tt5ob] { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .py-table--detail tbody tr.py-row[b-xqbk3tt5ob] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "date  shift  status"
            "date  dept   inout"
            "amt   amt    amt"
            "act   act    act";
        gap: 4px 10px;
        align-items: center;
        padding: 12px;
        border: 1px solid var(--p-border);
        border-radius: 12px;
        background: #fff;
    }
    .py-table--detail tbody tr.py-row--unpaid[b-xqbk3tt5ob],
    .py-table--detail tbody tr.py-row--unpaid td[b-xqbk3tt5ob] { background: #fdfaf3; }
    .py-table--detail td[b-xqbk3tt5ob] { padding: 0; border-bottom: none; }
    .py-table--detail .py-td-date[b-xqbk3tt5ob]   { grid-area: date; align-self: start; font-size: 14px; font-weight: 600; }
    .py-table--detail .py-td-shift[b-xqbk3tt5ob]  { grid-area: shift; }
    .py-table--detail .py-td-status[b-xqbk3tt5ob] { grid-area: status; justify-self: end; }
    .py-table--detail .py-td-dept[b-xqbk3tt5ob]   { grid-area: dept; font-size: 12px; }
    .py-table--detail .py-td-inout[b-xqbk3tt5ob]  { grid-area: inout; justify-self: end; font-size: 12px; }
    .py-table--detail .py-td-amt[b-xqbk3tt5ob]    { grid-area: amt; text-align: left; margin-top: 4px; }
    .py-table--detail .py-td-act[b-xqbk3tt5ob]    { grid-area: act; justify-self: end; margin-top: 4px; }
    .py-table--detail tfoot[b-xqbk3tt5ob] { display: block; }
    .py-table--detail tfoot tr[b-xqbk3tt5ob] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
    }
    .py-table--detail tfoot td[b-xqbk3tt5ob] { position: static; padding: 0; border-top: none; }
    .py-table--detail tfoot[b-xqbk3tt5ob] { background: var(--p-cream); border-top: 1px solid #efe6d2; }

    .py-foot[b-xqbk3tt5ob] { padding: 10px 12px; }

    /* Top bar + flow tracker + flat ledger on small screens */
    .py-topbar .py-title[b-xqbk3tt5ob] { font-size: 18px; }
    .py-topbar-r[b-xqbk3tt5ob] { width: 100%; }
    .py-range[b-xqbk3tt5ob] { flex: 1; }
    .py-updated[b-xqbk3tt5ob] { display: none; }
    .py-topbar-r .py-btn-primary[b-xqbk3tt5ob] { min-height: 40px; }

    .py-flow[b-xqbk3tt5ob] { gap: 4px; padding: 14px; }
    .py-step[b-xqbk3tt5ob] { min-width: 150px; }
    .py-step-arrow[b-xqbk3tt5ob] { display: none; }

    .py-toolbar .py-input[b-xqbk3tt5ob] { flex: 1; min-width: 0; }

    /* Flat ledger stays a table but scrolls horizontally inside its card */
    .py-table--ledger[b-xqbk3tt5ob] { min-width: 720px; }
}

/* ── Bank-transfer drawer (VietQR) ──────────────── */
.py-drawer-bg[b-xqbk3tt5ob] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 30, 40, .35);
    display: flex;
    justify-content: flex-end;
}

.py-drawer[b-xqbk3tt5ob] {
    width: 420px;
    max-width: 94vw;
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--p-border);
    box-shadow: -8px 0 28px rgba(20, 30, 40, .14);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    overflow-y: auto;
    animation: py-drawer-in-b-xqbk3tt5ob .18s ease;
    color: var(--p-ink);
}

@keyframes py-drawer-in-b-xqbk3tt5ob {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.py-drawer-hd[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.py-drawer-hd i[b-xqbk3tt5ob] { color: var(--p-emerald); }

.py-drawer-emp[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--p-hair);
}

.py-drawer-emp-name[b-xqbk3tt5ob] { font-size: 14px; font-weight: 600; }
.py-drawer-emp-sub[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--p-muted);
}

/* Khối tiền: cream + champagne theo spec admin — điểm đậm 700 duy nhất của drawer */
.py-drawer-amt[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--p-cream);
    border: 1px solid #efe6d2;
    border-radius: 10px;
}

.py-drawer-amt-lbl[b-xqbk3tt5ob] { font-size: 12px; color: var(--p-muted); text-transform: uppercase; letter-spacing: .6px; }
.py-drawer-amt-val[b-xqbk3tt5ob] { font-size: 18px; font-weight: 700; color: var(--p-champagne); font-variant-numeric: tabular-nums; }

.py-drawer-load[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 18px 0;
    color: var(--p-muted);
    font-size: 13px;
}

.py-drawer-bank[b-xqbk3tt5ob] {
    border: 1px solid var(--p-border);
    border-radius: 10px;
    overflow: hidden;
}

.py-drawer-row[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--p-hair);
    font-size: 13px;
}

.py-drawer-row:last-child[b-xqbk3tt5ob] { border-bottom: none; }
.py-drawer-row-lbl[b-xqbk3tt5ob] { color: var(--p-muted); flex-shrink: 0; }
.py-drawer-row-val[b-xqbk3tt5ob] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: right;
    font-weight: 500;
    word-break: break-all;
}

.py-drawer-bank-logo[b-xqbk3tt5ob] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.py-drawer-qr-btn[b-xqbk3tt5ob] { justify-content: center; }

.py-drawer-qr[b-xqbk3tt5ob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    background: #fafbfc;
}

.py-drawer-qr img[b-xqbk3tt5ob] {
    width: 100%;
    max-width: 280px;
    border-radius: 8px;
}

.py-drawer-qr-hint[b-xqbk3tt5ob] { font-size: 12px; color: var(--p-muted); text-align: center; }

.py-drawer-foot[b-xqbk3tt5ob] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--p-hair);
}

.py-drawer-foot .btn[b-xqbk3tt5ob] { justify-content: center; }

@media (max-width: 768px) {
    .py-drawer[b-xqbk3tt5ob] { width: 100%; max-width: none; padding: 14px; }
}

/* ── Popup "chuyển khoản lại?" sau khi sửa lương đã chi ── */
.py-retransfer-msg[b-xqbk3tt5ob] {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--p-muted);
    line-height: 1.5;
}

.py-retransfer-alert[b-xqbk3tt5ob] {
    font-size: 13px;
    margin-bottom: 12px;
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MyAttendance.razor.rz.scp.css */
/* ── Porcelain Terminal — MyAttendance (themed via --pt-*) ── */

.content:has(.mac-wrap)[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--pt-am, #14b8a6) 7%, transparent), transparent 32%),
        linear-gradient(180deg, #eef2f5 0%, #e4eaee 100%);
}

.mac-wrap[b-1uw7x39pn1] { max-width: 960px; margin: 0 auto; width: 100%; min-width: 0; padding: 32px 24px 48px; }

/* ── Loading / empty ── */
.mac-loading[b-1uw7x39pn1] { display:flex;align-items:center;justify-content:center;gap:8px;padding:60px;color:var(--ink3);font-size:13px }
.mac-loading-icon[b-1uw7x39pn1] { font-size:18px }
.mac-not-employee[b-1uw7x39pn1] { padding:60px 24px;text-align:center;color:var(--ink3) }
.mac-admin-icon-wrap[b-1uw7x39pn1] { width:64px;height:64px;border-radius:16px;background:#f1f5f9;border:.5px solid var(--border);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px }
.mac-admin-icon[b-1uw7x39pn1] { font-size:28px;color:var(--ink3) }
.mac-admin-title[b-1uw7x39pn1] { font-size:15px;font-weight:600;margin-bottom:6px;color:var(--ink) }
.mac-admin-sub[b-1uw7x39pn1] { font-size:13px;color:var(--ink3) }
.mac-empty[b-1uw7x39pn1] { display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;color:#64748b;font-size:13px;background:rgba(255,255,255,.96);border-radius:20px;border:1px solid rgba(15,32,39,.08);box-shadow:0 18px 48px rgba(15,32,39,.07) }
.mac-empty i[b-1uw7x39pn1] { font-size:36px }

/* ── Header ── */
.mac-hd[b-1uw7x39pn1] { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap }
.mac-title[b-1uw7x39pn1] { font-size:22px;font-weight:800;color:var(--ink);letter-spacing:0 }
.mac-subtitle[b-1uw7x39pn1] { font-size:13px;color:#64748b;margin-top:3px;font-weight:500 }

.mac-month-picker[b-1uw7x39pn1] {
    display:flex;align-items:center;gap:8px;
    background:linear-gradient(180deg, #fff, #f5f7fa);
    border:1px solid rgba(15,32,39,.12);
    border-radius:14px;padding:6px 8px;
    box-shadow:0 2px 8px rgba(15,32,39,.04);
}
.mac-mp-btn[b-1uw7x39pn1] { border:none;background:none;cursor:pointer;padding:5px 8px;color:#64748b;font-size:14px;border-radius:8px;transition:background .12s,color .12s;font-family:var(--font) }
.mac-mp-btn:hover[b-1uw7x39pn1] { background:color-mix(in srgb, var(--pt-am, #14b8a6) 8%, transparent);color:var(--pt-a, #0f766e) }
.mac-mp-btn:disabled[b-1uw7x39pn1] { opacity:.3;cursor:default }
.mac-mp-btn:disabled:hover[b-1uw7x39pn1] { background:none;color:#64748b }
.mac-mp-label[b-1uw7x39pn1] { font-size:14px;font-weight:700;color:var(--ink);min-width:100px;text-align:center }

/* ── Sub-tabs ── */
.mac-tabs[b-1uw7x39pn1] {
    display:flex;gap:6px;
    background:linear-gradient(180deg, #f1f5f9, #e8ecf0);
    border-radius:14px;padding:5px;
    border:1px solid rgba(15,32,39,.08);
    align-self:flex-start;margin-bottom:4px;
    box-shadow:inset 0 1px 3px rgba(15,32,39,.06);
}
.mac-tab[b-1uw7x39pn1] {
    display:flex;align-items:center;gap:6px;padding:9px 20px;border-radius:10px;border:none;background:none;
    font-family:var(--font);font-size:13px;font-weight:700;color:#64748b;
    cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
}
.mac-tab:hover[b-1uw7x39pn1] { color:var(--ink);background:rgba(255,255,255,.6) }
.mac-tab-active[b-1uw7x39pn1] {
    background:rgba(255,255,255,.96) !important;color:var(--pt-a, #0f766e) !important;
    box-shadow:0 4px 12px rgba(15,32,39,.08);
}

/* ── Weekly chart card ── */
.mac-week-card[b-1uw7x39pn1] {
    background:rgba(255,255,255,.96);
    border-radius:24px;border:1px solid rgba(15,32,39,.08);padding:26px 28px;
    box-shadow:0 22px 60px rgba(15,32,39,.09);
}

/* ── Metric strip ── */
.mac-metrics[b-1uw7x39pn1] { display:flex;gap:12px;margin-bottom:20px }
.mac-metric[b-1uw7x39pn1] {
    flex:1;padding:18px 20px;
    border-radius:16px;
    border:1px solid rgba(15,32,39,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.96), #f8fafc);
    box-shadow:0 10px 24px rgba(15,32,39,.06);
    transition:transform .15s, box-shadow .15s;
}
.mac-metric:hover[b-1uw7x39pn1] { transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,32,39,.09) }
.mac-metric-lbl[b-1uw7x39pn1] { font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;font-weight:600 }
.mac-metric-val[b-1uw7x39pn1] { font-size:24px;font-weight:800;color:var(--ink);margin-top:6px;font-family:var(--mono);font-variant-numeric:tabular-nums }
.mac-metric-val--green[b-1uw7x39pn1] { color:#0f766e }
.mac-metric-val--amber[b-1uw7x39pn1] { color:#b45309 }
.mac-metric-val--gray[b-1uw7x39pn1] { color:var(--ink2) }
.mac-metric-unit[b-1uw7x39pn1] { font-size:13px;font-weight:400;color:var(--ink3) }

/* ── Earnings ledger ── */
.mac-earn[b-1uw7x39pn1] {
    display:flex;align-items:center;gap:24px;
    background:
        radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 10%, transparent), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,.96) 0%, var(--pt-bg, #f0fdfa) 58%, color-mix(in srgb, var(--pt-am, #14b8a6) 10%, #fff) 100%);
    border:1px solid color-mix(in srgb, var(--pt-am, #14b8a6) 25%, transparent);
    border-radius:16px;padding:18px 24px;margin-bottom:24px;
    box-shadow:0 10px 24px rgba(15,32,39,.06);
}
.mac-earn-cell[b-1uw7x39pn1] { min-width:0 }
.mac-earn-lbl[b-1uw7x39pn1] { font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.4px;font-weight:600 }
.mac-earn-lbl--green[b-1uw7x39pn1] { color:color-mix(in srgb, var(--pt-a, #0f766e) 80%, #555) }
.mac-earn-lbl--amber[b-1uw7x39pn1] { color:#b45309 }
.mac-earn-val[b-1uw7x39pn1] { font-size:17px;font-weight:800;color:var(--pt-a, #0f766e);font-family:var(--mono);margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere }
.mac-earn-val--green[b-1uw7x39pn1] { color:color-mix(in srgb, var(--pt-a, #047857) 100%, transparent) }
.mac-earn-val--amber[b-1uw7x39pn1] { color:#b45309 }
.mac-earn-div[b-1uw7x39pn1] { width:1px;height:32px;background:color-mix(in srgb, var(--pt-am, #14b8a6) 20%, transparent);flex-shrink:0 }

/* ── Week groups ── */
.mac-groups[b-1uw7x39pn1] { display:flex;flex-direction:column;gap:14px }
.mac-week[b-1uw7x39pn1] {
    background:rgba(255,255,255,.96);
    border:1px solid rgba(15,32,39,.08);
    border-radius:20px;overflow:hidden;
    box-shadow:0 18px 48px rgba(15,32,39,.07);
}

.mac-wk-hd[b-1uw7x39pn1] { width:100%;display:flex;align-items:center;gap:8px;padding:15px 20px;border:none;background:none;cursor:pointer;font-family:var(--font);text-align:left;transition:background .12s }
.mac-wk-hd:hover[b-1uw7x39pn1] { background:color-mix(in srgb, var(--pt-am, #14b8a6) 4%, transparent) }
.mac-wk-chev[b-1uw7x39pn1] { font-size:14px;color:var(--ink3);flex-shrink:0;transition:transform .15s }
.mac-wk-label[b-1uw7x39pn1] { font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap }
.mac-wk-now[b-1uw7x39pn1] { font-size:10px;font-weight:700;color:#fff;background:var(--pt-am, #14b8a6);padding:2px 8px;border-radius:8px;box-shadow:0 2px 6px color-mix(in srgb, var(--pt-am, #14b8a6) 25%, transparent) }
.mac-wk-spacer[b-1uw7x39pn1] { flex:1 }
.mac-wk-sum[b-1uw7x39pn1] { font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;color:var(--pt-a, #0f766e);white-space:nowrap }
.mac-wk-sum-unit[b-1uw7x39pn1] { font-size:10px;font-weight:600;margin-left:1px;opacity:.65;vertical-align:super }
.mac-wk-late-badge[b-1uw7x39pn1] { font-size:10px;font-weight:700;color:#fff;background:var(--am);width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(245,158,11,.25) }

.mac-wk-body[b-1uw7x39pn1] { overflow:hidden;transition:max-height .25s ease }

/* ── Week footer ── */
.mac-wk-foot[b-1uw7x39pn1] {
    display:flex;justify-content:space-between;align-items:center;padding:12px 22px;
    background:linear-gradient(135deg, var(--pt-bg, #f0fdfa) 0%, #f1f5f9 100%);
    border-top:1px solid color-mix(in srgb, var(--pt-am, #14b8a6) 10%, transparent);
}
.mac-wk-foot-rate[b-1uw7x39pn1] { font-size:12px;color:#64748b;font-weight:500 }

/* ══════════════════════════════════
   Table (desktop)
   ══════════════════════════════════ */
.mac-tbl[b-1uw7x39pn1] { width:100%;border-collapse:collapse;font-size:13px }
.mac-tbl thead th[b-1uw7x39pn1] {
    text-align:left;padding:12px 20px;font-size:11px;font-weight:700;
    color:#64748b;text-transform:uppercase;letter-spacing:.5px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--pt-bg, #f0fdfa) 30%, #fff), #f1f5f9);
    border-top:1px solid color-mix(in srgb, var(--pt-am, #14b8a6) 8%, transparent);
}
.mac-th-center[b-1uw7x39pn1] { text-align:center !important }
.mac-th-right[b-1uw7x39pn1] { text-align:right !important }
.mac-tbl tbody td[b-1uw7x39pn1] { padding:14px 20px;border-top:1px solid color-mix(in srgb, var(--pt-am, #14b8a6) 10%, transparent);vertical-align:middle }

/* ── Icon-only th with hover tooltip ── */
.mac-th-icon[b-1uw7x39pn1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: default;
    color: #94a3b8;
    font-size: 15px;
    transition: background .12s, color .12s;
}
.mac-th-icon:hover[b-1uw7x39pn1] { background: color-mix(in srgb, var(--pt-am, #14b8a6) 10%, transparent); color: var(--pt-a, #0f766e); }
.mac-th-icon--right[b-1uw7x39pn1] { margin-left: auto; }

.mac-th-tip[b-1uw7x39pn1] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    z-index: 20;
    letter-spacing: .2px;
}
.mac-th-tip[b-1uw7x39pn1]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: #1e293b;
}
.mac-th-icon:hover .mac-th-tip[b-1uw7x39pn1] { opacity: 1; }

/* Row variants */
.mac-tbl tbody tr[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 10%, transparent), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, var(--pt-bg, #f0fdfa) 58%, color-mix(in srgb, var(--pt-am, #14b8a6) 8%, #fff) 100%);
    transition: background .15s, box-shadow .15s;
}
.mac-tbl tbody tr:hover[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 16%, transparent), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--pt-am, #14b8a6) 22%, #fff) 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 14%, #fff) 100%);
}
.mac-row-today[b-1uw7x39pn1] {
    box-shadow:inset 3px 0 0 var(--pt-a, #0f766e);
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 18%, transparent), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--pt-am, #14b8a6) 30%, #fff) 58%, color-mix(in srgb, var(--pt-am, #14b8a6) 14%, #fff) 100%) !important;
}
.mac-row-late[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 4% 50%, rgba(245,158,11,.12), transparent 35%),
        linear-gradient(135deg, #fffbf5 0%, #fff8ee 58%, #fffdf8 100%) !important;
}

/* ── Shift cell (merged date + shift) ── */
.mac-shift-cell[b-1uw7x39pn1] { position:relative;min-width:100px }
.mac-shift-line1[b-1uw7x39pn1] { font-weight:500;color:var(--ink);font-size:13px;display:flex;align-items:center;gap:6px }
.mac-shift-dot[b-1uw7x39pn1] { width:4px;height:4px;border-radius:50%;background:#cbd5e1;flex-shrink:0 }
.mac-shift-dot--amber[b-1uw7x39pn1] { background:var(--am) }
.mac-shift-dot--green[b-1uw7x39pn1] { background:var(--gm) }
.mac-shift-today[b-1uw7x39pn1] { color:var(--pt-a, #0f766e);font-weight:600 }
.mac-shift-late-name[b-1uw7x39pn1] { color:var(--am) }


/* ══════════════════════════════════
   Flight timeline v2 — pill badges
   ══════════════════════════════════ */
.mac-flight-cell[b-1uw7x39pn1] { min-width:220px }
.mac-flight[b-1uw7x39pn1] { display:flex;align-items:center;gap:0 }
.mac-flight--absent[b-1uw7x39pn1] { opacity:.5 }

/* Time pills */
.mac-fl-pill[b-1uw7x39pn1] {
    font-family:var(--mono);font-variant-numeric:tabular-nums;
    font-size:14px;font-weight:700;
    padding:4px 10px;border-radius:8px;
    white-space:nowrap;flex-shrink:0;
    letter-spacing:.3px;
}
.mac-fl-pill--green[b-1uw7x39pn1] { color:#065f46;background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:1px solid rgba(16,185,129,.30) }
.mac-fl-pill--amber[b-1uw7x39pn1] { color:#92400e;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid rgba(245,158,11,.35) }
.mac-fl-pill--dark[b-1uw7x39pn1]  { color:var(--ink);background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border:1px solid rgba(15,32,39,.10) }
.mac-fl-pill--ghost[b-1uw7x39pn1] { color:#94a3b8;background:transparent;border:1.5px dashed #cbd5e1;padding:3px 9px }

/* Track — thicker, bolder */
.mac-fl-track[b-1uw7x39pn1] { flex:1;display:flex;align-items:center;padding:0 6px;min-width:36px }

.mac-fl-line[b-1uw7x39pn1] { flex:1;height:2.5px;background:#e2e8f0;border-radius:2px }
.mac-fl-line--green[b-1uw7x39pn1] { background:linear-gradient(90deg,#10b981,#34d399) }
.mac-fl-line--amber[b-1uw7x39pn1] { background:linear-gradient(90deg,#f59e0b,#fbbf24) }
.mac-fl-line--dashed[b-1uw7x39pn1] { height:0;border-top:2px dashed #d1d5db;background:transparent }

.mac-fl-node[b-1uw7x39pn1] { width:10px;height:10px;border-radius:50%;border:2px solid #d1d5db;background:var(--card);flex-shrink:0;position:relative;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.08) }
.mac-fl-node--green[b-1uw7x39pn1] { border-color:#10b981;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18) }
.mac-fl-node--amber[b-1uw7x39pn1] { border-color:#f59e0b;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.mac-fl-node--empty[b-1uw7x39pn1] { border-color:#d1d5db;background:var(--card) }
.mac-fl-node--pulse[b-1uw7x39pn1] { border-color:#10b981;background:var(--card);animation:mac-pulse-b-1uw7x39pn1 2s infinite }

@keyframes mac-pulse-b-1uw7x39pn1 {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18) }
    50% { box-shadow: 0 0 0 7px rgba(16,185,129,.08) }
}

/* Hours badge */
.mac-fl-badge[b-1uw7x39pn1] {
    display:inline-flex;align-items:center;gap:4px;
    font-family:var(--mono);font-variant-numeric:tabular-nums;
    font-size:12px;font-weight:600;
    color:var(--ink2);background:#f1f5f9;
    padding:4px 10px;border-radius:8px;
    white-space:nowrap;margin-left:8px;flex-shrink:0;
    border:1px solid rgba(15,32,39,.06);
}
.mac-fl-badge i[b-1uw7x39pn1] { font-size:13px }
.mac-fl-badge--green[b-1uw7x39pn1] { color:#065f46;background:linear-gradient(135deg,#d1fae5,#ecfdf5);border-color:rgba(16,185,129,.20) }
.mac-fl-badge--amber[b-1uw7x39pn1] { color:#92400e;background:linear-gradient(135deg,#fef3c7,#fffbeb);border-color:rgba(245,158,11,.20) }
.mac-fl-badge--blue[b-1uw7x39pn1] { color:#1e40af;background:linear-gradient(135deg,#dbeafe,#eff6ff);border-color:rgba(37,99,235,.15) }
.mac-fl-badge--muted[b-1uw7x39pn1] { color:#94a3b8;background:transparent;border:none }

/* ── Status cell ── */
.mac-status-cell[b-1uw7x39pn1] { text-align:center }
.mac-status[b-1uw7x39pn1] { display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;background:rgba(0,0,0,.03);white-space:nowrap }
.mac-status-dot[b-1uw7x39pn1] { width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,.04) }

/* ── Pay cell — compact chip ── */
.mac-pay-cell[b-1uw7x39pn1] { text-align:right }

.mac-pay-chip[b-1uw7x39pn1] {
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--mono);font-variant-numeric:tabular-nums;
    font-size:13px;font-weight:600;
    padding:5px 12px;border-radius:10px;border:none;
    white-space:nowrap;cursor:pointer;
    transition:filter .12s, box-shadow .12s;
}
.mac-pay-chip:hover[b-1uw7x39pn1] { filter:brightness(.96);box-shadow:0 2px 8px rgba(0,0,0,.08) }
.mac-pay-chip i[b-1uw7x39pn1] { font-size:14px }
.mac-chip-unit[b-1uw7x39pn1] { font-size:10px;font-weight:600;margin-left:1px;opacity:.65;vertical-align:super }

.mac-pay-chip--paid[b-1uw7x39pn1] { color:#065f46;background:linear-gradient(135deg,#d1fae5,#ecfdf5);border:1px solid rgba(16,185,129,.22) }
.mac-pay-chip--pending[b-1uw7x39pn1] { color:#92400e;background:linear-gradient(135deg,#fef3c7,#fffbeb);border:1px solid rgba(245,158,11,.22) }
.mac-pay-chip--none[b-1uw7x39pn1] { color:#94a3b8;background:transparent;border:1px dashed #d1d5db;cursor:default }
.mac-pay-chip--none:hover[b-1uw7x39pn1] { filter:none;box-shadow:none }

.mac-pay-dash[b-1uw7x39pn1] { color:var(--ink3) }

/* ══════════════════════════════════
   Mobile cards
   ══════════════════════════════════ */
.mac-cards[b-1uw7x39pn1] { display:none;border-top:.5px solid #f1f5f9 }
.mac-card[b-1uw7x39pn1] {
    padding:12px 16px;
    border-bottom:.5px solid color-mix(in srgb, var(--pt-am, #14b8a6) 10%, transparent);
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 8%, transparent), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, var(--pt-bg, #f0fdfa) 58%, color-mix(in srgb, var(--pt-am, #14b8a6) 8%, #fff) 100%);
}
.mac-card:last-child[b-1uw7x39pn1] { border-bottom:none }
.mac-card-today[b-1uw7x39pn1] {
    box-shadow:inset 3px 0 0 var(--pt-a, #0f766e);
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #14b8a6) 18%, transparent), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--pt-am, #14b8a6) 28%, #fff) 58%, color-mix(in srgb, var(--pt-am, #14b8a6) 14%, #fff) 100%) !important;
}
.mac-card-late[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 4% 50%, rgba(245,158,11,.12), transparent 35%),
        linear-gradient(135deg, #fffbf5 0%, #fff8ee 58%, #fffdf8 100%) !important;
}
.mac-card-top[b-1uw7x39pn1] { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px }
.mac-card-date[b-1uw7x39pn1] { font-size:13px;font-weight:600;color:var(--ink) }
.mac-card-shift[b-1uw7x39pn1] { font-size:12px;color:var(--ink3);margin-top:2px }
.mac-card-bot[b-1uw7x39pn1] { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap }
.mac-card-times[b-1uw7x39pn1] { display:flex;align-items:center;gap:4px;font-size:13px;font-family:var(--mono);color:var(--ink) }
.mac-card-time--amber[b-1uw7x39pn1] { color:var(--am);font-weight:600 }
.mac-card-arrow[b-1uw7x39pn1] { color:var(--ink3);font-size:12px }
.mac-card-hrs[b-1uw7x39pn1] { color:var(--ink3);margin-left:6px }
.mac-card-muted[b-1uw7x39pn1] { color:var(--ink3) }

/* ══════════════════════════════════
   Detail modal v2 — Executive Terminal
   ══════════════════════════════════ */
.mac-dm[b-1uw7x39pn1] {
    width:440px;max-width:92vw;padding:0;border-radius:24px;overflow:hidden;
    border:1px solid rgba(15,32,39,.08);
    box-shadow:0 22px 60px rgba(15,32,39,.16);
    background:rgba(255,255,255,.98);
}

/* ── Header band ── */
.mac-dm-hd[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 16% 16%, color-mix(in srgb, var(--pt-am, #14b8a6) 14%, transparent), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, var(--pt-bg, #f0fdfa) 58%, color-mix(in srgb, var(--pt-am, #14b8a6) 10%, #fff) 100%);
    padding:22px 24px 18px;
    border-bottom:1px solid color-mix(in srgb, var(--pt-am, #14b8a6) 12%, transparent);
}
.mac-dm-hd--amber[b-1uw7x39pn1] {
    background:
        radial-gradient(circle at 16% 16%, rgba(245,158,11,.12), transparent 40%),
        linear-gradient(135deg, #fffbf5 0%, #fff8ee 58%, #fffdf8 100%);
    border-bottom-color:rgba(245,158,11,.15);
}

.mac-dm-hd-top[b-1uw7x39pn1] { display:flex;align-items:flex-start;gap:12px;margin-bottom:14px }

.mac-dm-shift-icon[b-1uw7x39pn1] {
    width:42px;height:42px;border-radius:12px;flex-shrink:0;
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #14b8a6) 28%, #fff),
        color-mix(in srgb, var(--pt-am, #14b8a6) 50%, #fff));
    border:1px solid color-mix(in srgb, var(--pt-am, #14b8a6) 25%, transparent);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;color:var(--pt-a, #065f46);
}
.mac-dm-hd--amber .mac-dm-shift-icon[b-1uw7x39pn1] {
    background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:rgba(245,158,11,.30);
    color:#92400e;
}

.mac-dm-hd-info[b-1uw7x39pn1] { flex:1;min-width:0 }
.mac-dm-shift-name[b-1uw7x39pn1] { font-size:17px;font-weight:700;color:var(--ink) }
.mac-dm-shift-meta[b-1uw7x39pn1] { font-size:12px;color:var(--ink3);margin-top:3px }

.mac-dm-close[b-1uw7x39pn1] {
    border:none;background:rgba(15,32,39,.06);cursor:pointer;
    width:32px;height:32px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;color:var(--ink3);transition:background .12s;flex-shrink:0;
}
.mac-dm-close:hover[b-1uw7x39pn1] { background:rgba(15,32,39,.12);color:var(--ink) }

.mac-dm-flight[b-1uw7x39pn1] { display:flex;align-items:center;gap:0;margin-bottom:12px }

.mac-dm-chips[b-1uw7x39pn1] { display:flex;align-items:center;gap:10px;flex-wrap:wrap }
.mac-dm-rate-chip[b-1uw7x39pn1] {
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:600;color:var(--ink2);
    background:rgba(255,255,255,.7);border:1px solid rgba(15,32,39,.08);
    padding:4px 10px;border-radius:8px;
}
.mac-dm-rate-chip i[b-1uw7x39pn1] { color:var(--bm);font-size:14px }

/* ── Body: hourly breakdown ── */
.mac-dm-body[b-1uw7x39pn1] {
    padding:16px 24px;max-height:280px;overflow-y:auto;
    display:flex;flex-direction:column;gap:0;
}

.mac-dm-seg[b-1uw7x39pn1] {
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    font-size:13px;padding:8px 0;
    border-bottom:1px solid rgba(15,32,39,.04);
}
.mac-dm-seg:last-child[b-1uw7x39pn1] { border-bottom:none }

.mac-dm-seg-time[b-1uw7x39pn1] { color:var(--ink2) }
.mac-dm-seg-hrs[b-1uw7x39pn1] { font-size:11px;color:var(--ink3);margin-left:3px }
.mac-dm-seg-projected[b-1uw7x39pn1] {
    font-size:10px;font-weight:600;color:#92400e;
    background:linear-gradient(135deg,#fef3c7,#fffbeb);
    border:1px solid rgba(245,158,11,.20);
    border-radius:6px;padding:1px 7px;margin-left:6px;
}
.mac-dm-seg-amt[b-1uw7x39pn1] { font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap }

.mac-dm-seg--bonus[b-1uw7x39pn1] { color:var(--gm) }
.mac-dm-seg--bonus .mac-dm-seg-amt[b-1uw7x39pn1] { color:var(--gm) }
.mac-dm-seg--bonus i[b-1uw7x39pn1] { font-size:13px;margin-right:3px }
.mac-dm-seg--penalty[b-1uw7x39pn1] { color:var(--red) }
.mac-dm-seg--penalty .mac-dm-seg-amt[b-1uw7x39pn1] { color:var(--red) }
.mac-dm-seg--penalty i[b-1uw7x39pn1] { font-size:13px;margin-right:3px }

/* ── Footer: total + payment status ── */
.mac-dm-foot[b-1uw7x39pn1] { padding:0 24px 20px }

.mac-dm-total[b-1uw7x39pn1] {
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 0 12px;
    border-top:2px solid rgba(15,32,39,.08);
    font-size:14px;font-weight:700;color:var(--ink);
}
.mac-dm-total-val[b-1uw7x39pn1] { font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:18px;color:var(--ink) }

.mac-dm-pay-status[b-1uw7x39pn1] {
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:12px;font-weight:600;
    padding:10px 14px;border-radius:12px;
}
.mac-dm-pay-status i[b-1uw7x39pn1] { font-size:15px }
.mac-dm-pay-status--paid[b-1uw7x39pn1] {
    color:#065f46;
    background:linear-gradient(135deg,#d1fae5,#ecfdf5);
    border:1px solid rgba(16,185,129,.20);
}
.mac-dm-pay-status--pending[b-1uw7x39pn1] {
    color:#92400e;
    background:linear-gradient(135deg,#fef3c7,#fffbeb);
    border:1px solid rgba(245,158,11,.20);
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
@media (max-width: 768px) {
    .mac-wrap[b-1uw7x39pn1] { max-width:100%;padding:20px 16px 32px }
    .mac-hd[b-1uw7x39pn1] { margin-bottom:16px }
    .mac-title[b-1uw7x39pn1] { font-size:18px }
    .mac-metrics[b-1uw7x39pn1] { flex-wrap:wrap;gap:10px }
    .mac-metric[b-1uw7x39pn1] { flex:1 1 45%;padding:14px 16px;border-radius:14px }
    .mac-metric-val[b-1uw7x39pn1] { font-size:20px }
    .mac-earn[b-1uw7x39pn1] { flex-wrap:wrap;gap:12px;padding:14px 18px;border-radius:14px }
    .mac-earn-div[b-1uw7x39pn1] { display:none }
    .mac-earn-val[b-1uw7x39pn1] { font-size:15px }
    .mac-wk-hd[b-1uw7x39pn1] { padding:12px 16px }
    .mac-wk-hd-r[b-1uw7x39pn1] { gap:10px;font-size:11px }
    .mac-week[b-1uw7x39pn1] { border-radius:16px }
    .mac-tbl[b-1uw7x39pn1] { display:none }
    .mac-cards[b-1uw7x39pn1] { display:block }
    .mac-wk-foot[b-1uw7x39pn1] { padding:10px 16px }
}

@media (max-width: 640px) {
    .mac-week-card[b-1uw7x39pn1] { padding:14px 12px;border-radius:14px }
    .mac-tabs[b-1uw7x39pn1] { align-self:stretch }
    .mac-tab[b-1uw7x39pn1] { flex:1;justify-content:center }
}

@media (max-width: 480px) {
    .mac-wrap[b-1uw7x39pn1] { padding:16px 12px 24px }
    .mac-week-card[b-1uw7x39pn1] { padding:12px 10px;border-radius:14px }
    .mac-tabs[b-1uw7x39pn1] { width:100% }
    .mac-tab[b-1uw7x39pn1] { padding:8px 10px;font-size:12px;min-width:0;border-radius:8px }
    .mac-metric[b-1uw7x39pn1] { padding:12px;border-radius:12px }
    .mac-metric-val[b-1uw7x39pn1] { font-size:18px }
    .mac-metric-lbl[b-1uw7x39pn1] { font-size:10px }
    .mac-earn[b-1uw7x39pn1] { padding:12px 14px;gap:8px;border-radius:12px }
    .mac-earn-val[b-1uw7x39pn1] { font-size:13px }
    .mac-week[b-1uw7x39pn1] { border-radius:14px }
    .mac-wk-hd[b-1uw7x39pn1] { align-items:flex-start;padding:12px 12px }
    .mac-wk-hd-r[b-1uw7x39pn1] { flex-wrap:wrap;gap:8px }
    .mac-card[b-1uw7x39pn1] { padding:10px 12px }
    .mac-detail-mbox[b-1uw7x39pn1] { padding:18px 16px }
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MyDeposits.razor.rz.scp.css */
[b-95d0wjldqe](.content:has(.md-wrap)) {
    background:
        radial-gradient(circle at 18% 0%, rgba(5,131,95,.05), transparent 32%),
        linear-gradient(180deg, #eef2f5 0%, #e4eaee 100%);
}

.md-wrap[b-95d0wjldqe] { max-width: 780px; margin: 0 auto; padding: 6px; }

.md-head[b-95d0wjldqe] { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.md-title[b-95d0wjldqe] { font-size: 22px; font-weight: 800; color: #0f3d2e; margin: 0; }
.md-sub[b-95d0wjldqe] { font-size: 13px; color: #64748b; margin: 4px 0 0; }

.md-held[b-95d0wjldqe] {
    background: radial-gradient(circle at 12% 40%, rgba(16,185,129,.14), transparent 45%), linear-gradient(135deg, #ffffff, #f0fdf7);
    border: 1px solid rgba(5,131,95,.22); border-radius: 16px; padding: 10px 18px; text-align: right; min-width: 140px;
}
.md-held-l[b-95d0wjldqe] { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: #64748b; }
.md-held-v[b-95d0wjldqe] { display: block; font-size: 24px; font-weight: 900; font-family: var(--mono); font-variant-numeric: tabular-nums; color: #047857; }

.md-empty[b-95d0wjldqe] { background: rgba(255,255,255,.96); border: 1px solid rgba(15,32,39,.08); border-radius: 18px; padding: 40px; text-align: center; color: #64748b; box-shadow: 0 18px 48px rgba(15,32,39,.07); }
.md-empty i[b-95d0wjldqe] { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }

.md-list[b-95d0wjldqe] { display: flex; flex-direction: column; gap: 14px; }
.md-card[b-95d0wjldqe] {
    background: rgba(255,255,255,.96); border: 1px solid rgba(15,32,39,.08); border-radius: 18px; padding: 16px 18px;
    box-shadow: 0 18px 48px rgba(15,32,39,.07);
}
.md-card-top[b-95d0wjldqe] { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.md-shift[b-95d0wjldqe] { font-weight: 700; color: #0f3d2e; }
.md-dot[b-95d0wjldqe] { color: #cbd5e1; }
.md-muted[b-95d0wjldqe] { color: #64748b; font-weight: 400; }
.md-date[b-95d0wjldqe] { font-family: var(--mono); font-size: 12px; color: #64748b; margin-top: 2px; }

.md-st[b-95d0wjldqe] { font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 3px 10px; white-space: nowrap; }
.md-st--wait[b-95d0wjldqe] { background: linear-gradient(135deg,#fef3c7,#fffbeb); color: #92400e; }
.md-st--pending[b-95d0wjldqe] { background: linear-gradient(135deg,#dbeafe,#eff6ff); color: #1e40af; }
.md-st--held[b-95d0wjldqe] { background: linear-gradient(135deg,#d1fae5,#ecfdf5); color: #065f46; }
.md-st--refunded[b-95d0wjldqe] { background: linear-gradient(135deg,#d1fae5,#ecfdf5); color: #065f46; }
.md-st--forfeited[b-95d0wjldqe] { background: linear-gradient(135deg,#fee2e2,#fef2f2); color: #991b1b; }
.md-st--cancel[b-95d0wjldqe] { background: linear-gradient(135deg,#fef3c7,#fffbeb); color: #92400e; }
.md-st--cancelled[b-95d0wjldqe] { background: linear-gradient(135deg,#e2e8f0,#f1f5f9); color: #475569; }

.md-amt-row[b-95d0wjldqe] { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15,32,39,.06); }
.md-amt-l[b-95d0wjldqe] { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.md-amt-v[b-95d0wjldqe] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; color: #047857; }

.md-pay[b-95d0wjldqe] { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #cbd5e1; align-items: center; flex-wrap: wrap; }
.md-qr[b-95d0wjldqe] { width: 132px; height: 132px; border-radius: 12px; border: 1px solid rgba(15,32,39,.08); background: #fff; }
.md-pay-info[b-95d0wjldqe] { flex: 1; min-width: 180px; }
.md-scan[b-95d0wjldqe] { font-size: 12.5px; color: #475569; margin: 0 0 8px; }
.md-memo-row[b-95d0wjldqe] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.md-memo[b-95d0wjldqe] { font-family: var(--mono); font-size: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 2px 8px; color: #047857; }
.md-paid-btn[b-95d0wjldqe] { width: 100%; }

.md-nobank[b-95d0wjldqe] { margin-top: 12px; }

.md-cancel[b-95d0wjldqe] { margin-top: 12px; }
.md-cancel-l[b-95d0wjldqe] { display: block; font-size: 12px; color: #475569; margin-bottom: 6px; }
.md-cancel-txt[b-95d0wjldqe] { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px; font-size: 13px; resize: vertical; }
.md-cancel-act[b-95d0wjldqe] { display: flex; gap: 8px; margin-top: 8px; }
.md-cancel-start[b-95d0wjldqe] { margin-top: 12px; }
.md-reason[b-95d0wjldqe] { margin-top: 10px; font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; }

/* Tách rõ NV thực nhận bao nhiêu / bị giữ bao nhiêu khi hủy ca hoàn một phần */
.md-split[b-95d0wjldqe] { margin-top: 10px; border: 1px solid rgba(15,32,39,.08); border-radius: 12px; overflow: hidden; }
.md-split-row[b-95d0wjldqe] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 12px; }
.md-split-row + .md-split-row[b-95d0wjldqe] { border-top: 1px solid rgba(15,32,39,.06); background: #fffbf5; }
.md-split-l[b-95d0wjldqe] { font-size: 12.5px; color: #64748b; }
.md-split-note[b-95d0wjldqe] { display: block; margin-top: 2px; font-size: 11px; color: #94a3b8; }
.md-split-v[b-95d0wjldqe] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; white-space: nowrap; }
.md-split-v--in[b-95d0wjldqe] { color: #047857; }
.md-split-v--fee[b-95d0wjldqe] { color: #b45309; }

@media (max-width: 600px) {
    .md-pay[b-95d0wjldqe] { flex-direction: column; align-items: stretch; }
    .md-qr[b-95d0wjldqe] { align-self: center; }
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MyNotifications.razor.rz.scp.css */
/* ── Porcelain Terminal — MyNotifications (themed via --pt-*) ── */

.content:has(.mn-wrap)[b-235pb8grxs] {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--pt-a, #b45309) 6%, transparent), transparent 34%),
        linear-gradient(180deg, #eef2f5 0%, #e4eaee 100%);
}

.mn-loading[b-235pb8grxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 20px;
    color: #94a3b8;
    font-size: 13px;
}

.mn-error[b-235pb8grxs] { margin: 24px; }

.mn-not-employee[b-235pb8grxs] {
    padding: 60px 24px;
    text-align: center;
    color: #94a3b8;
}

.mn-admin-icon-wrap[b-235pb8grxs] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #f59e0b) 30%, #fff),
        color-mix(in srgb, var(--pt-am, #f59e0b) 55%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #f59e0b) 22%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-am, #f59e0b) 14%, transparent);
}

.mn-admin-icon[b-235pb8grxs] { font-size: 28px; color: var(--pt-a, #b45309); }

.mn-admin-title[b-235pb8grxs] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
}

.mn-admin-sub[b-235pb8grxs] { font-size: 13px; color: #94a3b8; }

/* ── Wrap ── */
.mn-wrap[b-235pb8grxs] {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

/* ── Header ── */
.mn-header[b-235pb8grxs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.mn-page-title[b-235pb8grxs] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.4px;
}

.mn-unread-count[b-235pb8grxs] {
    font-size: 13px;
    color: var(--pt-a, #b45309);
    margin-top: 3px;
    font-weight: 600;
}

/* Mark-all button: theme gradient */
.mn-mark-all-btn[b-235pb8grxs] {
    background: linear-gradient(135deg, var(--pt-am, #f59e0b), color-mix(in srgb, var(--pt-a, #b45309) 88%, #000));
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-am, #f59e0b) 28%, transparent);
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mn-mark-all-btn:hover:not(:disabled)[b-235pb8grxs] {
    filter: brightness(1.05);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pt-am, #f59e0b) 35%, transparent);
}
.mn-mark-all-btn:disabled[b-235pb8grxs] { opacity: .55; cursor: default; }

/* ── Empty state ── */
.mn-empty[b-235pb8grxs] {
    height: auto;
    padding: 64px 24px;
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    border: 1px solid rgba(15,32,39,.08);
    box-shadow: 0 18px 48px rgba(15,32,39,.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}
.mn-empty i[b-235pb8grxs] { font-size: 36px; color: color-mix(in srgb, var(--pt-am, #f59e0b) 60%, #fff); }

/* ── Notification list card ── */
.mn-list[b-235pb8grxs] {
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    border: 1px solid rgba(15,32,39,.08);
    box-shadow: 0 18px 48px rgba(15,32,39,.07);
    overflow: hidden;
}

/* ── Notification item ── */
.mn-item[b-235pb8grxs] {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(15,32,39,.05);
    transition: background .15s;
    min-width: 0;
}
.mn-item:last-child[b-235pb8grxs] { border-bottom: none; }

.mn-item:hover[b-235pb8grxs] { background: color-mix(in srgb, var(--pt-am, #f59e0b) 3%, transparent); }

/* Unread: subtle theme tint */
.mn-item-unread[b-235pb8grxs] {
    background:
        radial-gradient(circle at 2% 50%, color-mix(in srgb, var(--pt-am, #f59e0b) 6%, transparent), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.98), var(--pt-bg, #fffbeb));
}
.mn-item-unread:hover[b-235pb8grxs] {
    background:
        radial-gradient(circle at 2% 50%, color-mix(in srgb, var(--pt-am, #f59e0b) 9%, transparent), transparent 40%),
        linear-gradient(180deg, #fff, color-mix(in srgb, var(--pt-am, #f59e0b) 30%, #fff));
}

/* ── Icon box ── */
.mn-icon-box[b-235pb8grxs] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #f59e0b) 28%, #fff),
        color-mix(in srgb, var(--pt-am, #f59e0b) 50%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #f59e0b) 20%, transparent);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--pt-am, #f59e0b) 12%, transparent);
}
.mn-icon[b-235pb8grxs] { font-size: 18px; color: var(--pt-a, #b45309); }

/* ── Item body ── */
.mn-body[b-235pb8grxs] { flex: 1; min-width: 0; }

.mn-item-head[b-235pb8grxs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.mn-title[b-235pb8grxs] {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}
.mn-title-unread[b-235pb8grxs] { font-weight: 700; color: #0f172a; }

/* Unread dot: theme medium */
.mn-dot[b-235pb8grxs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pt-am, #f59e0b);
    flex-shrink: 0;
    margin-top: 5px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-am, #f59e0b) 18%, transparent);
}

.mn-message[b-235pb8grxs] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mn-time[b-235pb8grxs] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}

/* Delete button: show on hover */
.mn-del-btn[b-235pb8grxs] {
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
}
.mn-item:hover .mn-del-btn[b-235pb8grxs] { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .mn-wrap[b-235pb8grxs] { padding: 20px 16px 32px; }
    .mn-page-title[b-235pb8grxs] { font-size: 18px; }
    .mn-item[b-235pb8grxs] { padding: 16px; gap: 12px; }
    .mn-del-btn[b-235pb8grxs] { opacity: 1; }
    .mn-list[b-235pb8grxs] { border-radius: 16px; }
}

@media (max-width: 480px) {
    .mn-wrap[b-235pb8grxs] { padding: 16px 12px 24px; }
    .mn-error[b-235pb8grxs] { margin: 12px 0; }
    .mn-loading[b-235pb8grxs], .mn-not-employee[b-235pb8grxs], .mn-empty[b-235pb8grxs] { padding: 40px 14px; }
    .mn-icon-box[b-235pb8grxs] { width: 32px; height: 32px; border-radius: 9px; }
    .mn-icon[b-235pb8grxs] { font-size: 16px; }
    .mn-item[b-235pb8grxs] { padding: 14px 12px; gap: 10px; }
    .mn-item-head[b-235pb8grxs] { gap: 6px; }
    .mn-message[b-235pb8grxs] { font-size: 12px; }
    .mn-list[b-235pb8grxs] { border-radius: 14px; }
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MyPayroll.razor.rz.scp.css */
/* ══ MyPayroll — "Thu nhập của tôi" (hero navy + champagne, accordion tuần) ══ */

.content:has(.mpy-wrap)[b-5o4ds0f42l] {
    background:
        radial-gradient(circle at 15% -5%, color-mix(in srgb, var(--pt-am, #14b8a6) 8%, transparent), transparent 34%),
        linear-gradient(180deg, #f7f6f2 0%, #f1f0ea 100%);
}

.mpy-wrap[b-5o4ds0f42l] { max-width: 1000px; margin: 0 auto; width: 100%; min-width: 0; padding: 28px 24px 48px; }

/* ── Loading / error / not-employee ── */
.mpy-loading[b-5o4ds0f42l] { display:flex;align-items:center;justify-content:center;gap:8px;padding:60px;color:#64748b;font-size:13px }
.mpy-loader-icon[b-5o4ds0f42l] { font-size:18px }
.mpy-alert-wrap[b-5o4ds0f42l] { margin:24px }
.mpy-not-employee[b-5o4ds0f42l] { padding:60px 24px;text-align:center;color:#64748b }

/* ── Header ── */
.mpy-header[b-5o4ds0f42l] {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:22px;flex-wrap:wrap;gap:12px;
}
.mpy-title[b-5o4ds0f42l] { font-size:26px;font-weight:800;color:#1f2d3a;margin:0;letter-spacing:-.3px }

.mpy-month-picker[b-5o4ds0f42l] {
    display:flex;align-items:center;gap:4px;
    background:#fff;border:1px solid #e6e3db;border-radius:12px;padding:6px 8px;
    box-shadow:0 1px 2px rgba(30,30,20,.03);
}
.mpy-mp-btn[b-5o4ds0f42l] { border:none;background:none;cursor:pointer;padding:6px 8px;color:#64748b;font-size:14px;border-radius:8px;font-family:var(--font) }
.mpy-mp-btn:hover[b-5o4ds0f42l] { background:color-mix(in srgb, var(--pt-am, #14b8a6) 12%, transparent);color:var(--pt-a, #0f766e) }
.mpy-mp-btn:disabled[b-5o4ds0f42l] { opacity:.3;cursor:default }
.mpy-mp-btn:disabled:hover[b-5o4ds0f42l] { background:none;color:#64748b }
.mpy-mp-label[b-5o4ds0f42l] { display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#2a3742;min-width:120px;justify-content:center }
.mpy-mp-cal[b-5o4ds0f42l] { color:#94a3b8;font-size:15px }

/* ══════════════════════════════════
   Hero — dark navy earnings card
   ══════════════════════════════════ */
.mpy-hero[b-5o4ds0f42l] {
    position:relative;overflow:hidden;
    display:flex;align-items:stretch;gap:36px;
    background:
        radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--pt-am, #14b8a6) 20%, transparent), transparent 46%),
        linear-gradient(135deg, #0f1f2e 0%, color-mix(in srgb, var(--pt-a, #0f766e) 20%, #14283a) 58%, color-mix(in srgb, var(--pt-a, #0f766e) 30%, #16324a) 100%);
    border-radius:22px;padding:28px 34px;
    box-shadow:0 20px 50px rgba(15,25,35,.22);
}

.mpy-hero-main[b-5o4ds0f42l] { display:flex;flex-direction:column;justify-content:center;min-width:0 }
.mpy-hero-lbl[b-5o4ds0f42l] { font-size:13.5px;color:#9db0c0;font-weight:500 }
.mpy-hero-total[b-5o4ds0f42l] {
    font-family:var(--mono);font-weight:800;font-size:46px;line-height:1;
    color:#e3c483;letter-spacing:-.5px;margin-top:10px;
    font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mpy-hero-unit[b-5o4ds0f42l] { font-size:26px;margin-left:2px;opacity:.9 }
.mpy-hero-meta[b-5o4ds0f42l] { display:flex;align-items:center;gap:12px;margin-top:18px;color:#9db0c0;font-size:13px }
.mpy-hero-meta i[b-5o4ds0f42l] { color:#7d94a5;margin-right:5px;font-size:15px;vertical-align:-2px }
.mpy-hero-sep[b-5o4ds0f42l] { color:#465d6e }

.mpy-hero-right[b-5o4ds0f42l] {
    flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;
    padding-left:36px;border-left:1px solid rgba(255,255,255,.09);min-width:0;z-index:1;
}
.mpy-hero-cells[b-5o4ds0f42l] { display:flex;gap:48px }
.mpy-hero-cell[b-5o4ds0f42l] { min-width:0 }
.mpy-hero-cell-lbl[b-5o4ds0f42l] { font-size:13px;font-weight:600;margin-bottom:8px }
.mpy-hc--green[b-5o4ds0f42l] { color:#63d89b }
.mpy-hc--amber[b-5o4ds0f42l] { color:#eeb95e }
.mpy-hero-cell-val[b-5o4ds0f42l] { font-family:var(--mono);font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap }
.mpy-hero-cell-val.mpy-hc--green[b-5o4ds0f42l] { color:#63d89b }
.mpy-hero-cell-val.mpy-hc--amber[b-5o4ds0f42l] { color:#eeb95e }
.mpy-hero-unit2[b-5o4ds0f42l] { font-size:16px;margin-left:1px;opacity:.85 }
.mpy-hero-cell-sub[b-5o4ds0f42l] { font-size:12px;color:#8497a6;margin-top:6px }

.mpy-hero-status[b-5o4ds0f42l] { display:flex;align-items:center;gap:11px }
.mpy-hero-sico[b-5o4ds0f42l] { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;flex-shrink:0;font-size:14px }
.mpy-hero-sico--ok[b-5o4ds0f42l] { background:rgba(52,211,153,.16);color:#5fdd99 }
.mpy-hero-sico--wait[b-5o4ds0f42l] { background:rgba(245,190,90,.16);color:#eeb95e }
.mpy-hero-stitle[b-5o4ds0f42l] { font-size:13px;font-weight:600;color:#d7e6dd }
.mpy-hero-ssub[b-5o4ds0f42l] { font-size:12px;color:#8497a6;margin-top:2px }

.mpy-hero-leaf[b-5o4ds0f42l] { position:absolute;right:26px;top:50%;transform:translateY(-50%);width:120px;height:140px;opacity:.55;pointer-events:none;z-index:0;color:color-mix(in srgb, var(--pt-a, #0f766e) 55%, #3a5a49) }

/* ══════════════════════════════════
   Section header
   ══════════════════════════════════ */
.mpy-sec-hd[b-5o4ds0f42l] { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 2px 16px;flex-wrap:wrap }
.mpy-sec-title[b-5o4ds0f42l] { font-size:17px;font-weight:700;color:#1f2d3a }
.mpy-sec-note[b-5o4ds0f42l] { font-size:12.5px;color:#94a3b8 }

/* ══════════════════════════════════
   Week accordion cards
   ══════════════════════════════════ */
.mpy-empty[b-5o4ds0f42l] {
    padding:60px 24px;background:#fff;border-radius:18px;border:1px solid #ece9e2;
    box-shadow:0 8px 24px rgba(30,30,20,.04);
    display:flex;flex-direction:column;align-items:center;gap:10px;color:#64748b;font-size:13px;
}
.mpy-empty i[b-5o4ds0f42l] { font-size:36px;color:#c7c2b6 }

.mpy-weeks[b-5o4ds0f42l] { display:flex;flex-direction:column;gap:14px }

.mpy-week[b-5o4ds0f42l] {
    background:#fff;border:1px solid #ece9e2;border-radius:16px;overflow:hidden;
    box-shadow:0 1px 2px rgba(30,30,20,.03), 0 8px 24px rgba(30,30,20,.04);
    transition:box-shadow .15s;
}
.mpy-week--open[b-5o4ds0f42l] { box-shadow:0 2px 4px rgba(30,30,20,.05), 0 14px 34px rgba(30,30,20,.07) }

.mpy-week-hd[b-5o4ds0f42l] {
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 22px;border:none;background:none;cursor:pointer;font-family:var(--font);text-align:left;
}
.mpy-week-hd:hover[b-5o4ds0f42l] { background:color-mix(in srgb, var(--pt-am, #14b8a6) 5%, #faf9f5) }

.mpy-week-range[b-5o4ds0f42l] { font-size:15px;font-weight:700;color:#22303d;white-space:nowrap }

.mpy-week-stats[b-5o4ds0f42l] { display:flex;align-items:center;gap:18px;flex-shrink:0 }
.mpy-week-stat[b-5o4ds0f42l] { font-size:13px;color:#64748b;white-space:nowrap;font-variant-numeric:tabular-nums }
.mpy-week-vsep[b-5o4ds0f42l] { width:1px;height:15px;background:#e4e2da }
.mpy-week-amt[b-5o4ds0f42l] {
    font-family:var(--mono);font-weight:800;font-size:15px;color:#a97b28;
    font-variant-numeric:tabular-nums;min-width:112px;text-align:right;
}

.mpy-wpill[b-5o4ds0f42l] { font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;white-space:nowrap }
.mpy-wpill--paid[b-5o4ds0f42l] { color:#2f7d54;background:#e8f5ec }
.mpy-wpill--partial[b-5o4ds0f42l] { color:#92400e;background:#fdf3e2 }
.mpy-wpill--unpaid[b-5o4ds0f42l] { color:#9a6a1a;background:#fbf3e0 }

.mpy-chevron[b-5o4ds0f42l] { font-size:16px;color:#a7b1bc;flex-shrink:0 }

/* ── Rows container ── */
.mpy-rows[b-5o4ds0f42l] { overflow:hidden;transition:max-height .22s ease }

/* ── Detail table ── */
.mpy-tbl[b-5o4ds0f42l] { width:100%;border-collapse:collapse;font-size:13.5px }
.mpy-tbl thead th[b-5o4ds0f42l] {
    text-align:left;padding:11px 22px;font-size:11.5px;font-weight:600;color:#8a95a1;
    background:color-mix(in srgb, var(--pt-bg, #f0fdfa) 40%, #faf9f5);border-top:1px solid #f0eee8;border-bottom:1px solid #edeae3;white-space:nowrap;
}
.mpy-th-right[b-5o4ds0f42l] { text-align:right }
.mpy-tbl tbody td[b-5o4ds0f42l] { padding:14px 22px;border-bottom:1px solid #f2f0ea;color:#33404c;vertical-align:middle }
.mpy-tbl tbody tr:last-child td[b-5o4ds0f42l] { border-bottom:none }
.mpy-tbl tbody tr:hover td[b-5o4ds0f42l] { background:color-mix(in srgb, var(--pt-am, #14b8a6) 5%, #faf9f5) }
.mpy-tbl tbody tr.mpy-row-late td[b-5o4ds0f42l] { background:#fffaf2 }

.mpy-td-day[b-5o4ds0f42l] { font-weight:500;color:#2a3742;white-space:nowrap }
.mpy-td-io[b-5o4ds0f42l], .mpy-td-hrs[b-5o4ds0f42l] { color:#4a5763;font-variant-numeric:tabular-nums;white-space:nowrap }
.mpy-td-income[b-5o4ds0f42l] { text-align:right;font-weight:700;color:#a97b28;font-variant-numeric:tabular-nums;white-space:nowrap }

.mpy-att-stat[b-5o4ds0f42l] { display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;white-space:nowrap }
.mpy-att-dot[b-5o4ds0f42l] { width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0 }

/* ── Mobile cards ── */
.mpy-cards[b-5o4ds0f42l] { display:none }
.mpy-card[b-5o4ds0f42l] { padding:13px 18px;border-bottom:1px solid #f2f0ea }
.mpy-card:last-child[b-5o4ds0f42l] { border-bottom:none }
.mpy-card-late[b-5o4ds0f42l] { background:#fffaf2 }
.mpy-card-top[b-5o4ds0f42l] { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px }
.mpy-card-day[b-5o4ds0f42l] { font-size:13.5px;font-weight:600;color:#2a3742 }
.mpy-card-bot[b-5o4ds0f42l] { display:flex;align-items:center;justify-content:space-between;gap:10px }
.mpy-card-io[b-5o4ds0f42l] { font-size:12.5px;color:#4a5763 }
.mpy-card-hrs[b-5o4ds0f42l] { color:#94a3b8 }

.mpy-unit2[b-5o4ds0f42l] { font-size:11px;margin-left:1px;opacity:.7 }

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
@media (max-width: 900px) {
    .mpy-hero[b-5o4ds0f42l] { flex-direction:column;gap:22px;padding:24px 26px }
    .mpy-hero-right[b-5o4ds0f42l] { padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.09);padding-top:22px }
    .mpy-hero-leaf[b-5o4ds0f42l] { display:none }
}

@media (max-width: 768px) {
    .mpy-wrap[b-5o4ds0f42l] { padding:20px 16px 32px }
    .mpy-title[b-5o4ds0f42l] { font-size:22px }
    .mpy-hero-total[b-5o4ds0f42l] { font-size:38px }
    .mpy-hero-unit[b-5o4ds0f42l] { font-size:22px }

    .mpy-week-hd[b-5o4ds0f42l] { flex-wrap:wrap;gap:10px;padding:15px 16px }
    .mpy-week-stats[b-5o4ds0f42l] { gap:12px;width:100%;justify-content:flex-end }
    .mpy-week-amt[b-5o4ds0f42l] { min-width:0 }

    .mpy-tbl[b-5o4ds0f42l] { display:none }
    .mpy-cards[b-5o4ds0f42l] { display:block }
}

@media (max-width: 480px) {
    .mpy-hero[b-5o4ds0f42l] { padding:20px 18px }
    .mpy-hero-cells[b-5o4ds0f42l] { gap:28px }
    .mpy-hero-cell-val[b-5o4ds0f42l] { font-size:22px }
    .mpy-week-range[b-5o4ds0f42l] { font-size:14px }
    .mpy-week-stats[b-5o4ds0f42l] { flex-wrap:wrap;gap:8px 12px }
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MyProfile.razor.rz.scp.css */
/* ── Dossier — MyProfile (hero navy + champagne, themed via --pt-*) ── */

.content:has(.mp-wrap)[b-9ux9k9gdlh] {
    background:
        radial-gradient(circle at 15% -5%, color-mix(in srgb, var(--pt-am, #a78bfa) 8%, transparent), transparent 34%),
        linear-gradient(180deg, #f7f6f2 0%, #f1f0ea 100%);
}

/* ── Page wrapper ── */
.mp-wrap[b-9ux9k9gdlh] {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    padding: 28px 24px 48px;
}

/* ══════════════════════════════════
   Hero — dossier navy
   ══════════════════════════════════ */
.mp-hero[b-9ux9k9gdlh] {
    position: relative;
    display: flex; align-items: center; gap: 24px;
    background:
        radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--pt-am, #a78bfa) 20%, transparent), transparent 46%),
        linear-gradient(135deg, #0f1f2e 0%, color-mix(in srgb, var(--pt-a, #7c3aed) 20%, #14283a) 58%, color-mix(in srgb, var(--pt-a, #7c3aed) 30%, #16324a) 100%);
    border-radius: 22px;
    padding: 26px 30px;
    box-shadow: 0 20px 50px rgba(15,25,35,.22);
}

.mp-hero-main[b-9ux9k9gdlh] { flex: 1; min-width: 0; }
.mp-hero-lbl[b-9ux9k9gdlh] { font-size: 12px; color: #9db0c0; font-weight: 500; }
.mp-hero-name[b-9ux9k9gdlh] {
    font-size: 24px; font-weight: 800; color: #eef3f7;
    margin-top: 5px; letter-spacing: -.2px; overflow-wrap: anywhere;
}

.mp-hero-chips[b-9ux9k9gdlh] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.mp-hero-code[b-9ux9k9gdlh] {
    font-size: 11.5px; font-weight: 700; color: #e3c483;
    border: 1px solid rgba(227,196,131,.35); border-radius: 999px;
    padding: 4px 11px; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}

.mp-hero-chip[b-9ux9k9gdlh] {
    font-size: 11.5px; font-weight: 500; color: #9db0c0;
    background: rgba(255,255,255,.07); border-radius: 999px; padding: 4px 11px;
}
.mp-hero-chip--ok[b-9ux9k9gdlh] { color: #63d89b; background: rgba(52,211,153,.14); }
.mp-hero-chip--warn[b-9ux9k9gdlh] { color: #eeb95e; background: rgba(245,190,90,.16); }
.mp-hero-chip--off[b-9ux9k9gdlh] { color: #a7b6c2; background: rgba(255,255,255,.08); }

.mp-hero-status[b-9ux9k9gdlh] { display: flex; align-items: center; gap: 10px; margin-top: 17px; }
.mp-hero-sico[b-9ux9k9gdlh] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    font-size: 13px; background: rgba(245,190,90,.16); color: #eeb95e;
}
.mp-hero-stxt[b-9ux9k9gdlh] { font-size: 12.5px; color: #d7e6dd; }

/* ── Hero: thẻ CCCD xếp lớp ── */
.mp-hero-id[b-9ux9k9gdlh] { position: relative; width: 210px; flex-shrink: 0; }

.mp-idghost[b-9ux9k9gdlh] {
    position: absolute; top: 0; left: 0; right: 0; height: 130px;
    transform: rotate(-7deg) translateX(10px);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}

.mp-idstack[b-9ux9k9gdlh] {
    position: relative; height: 130px;
    perspective: 900px; cursor: pointer; user-select: none;
}

.mp-idflip[b-9ux9k9gdlh] {
    position: absolute; inset: 0;
    transform: rotate(3deg);
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.mp-idflip.is-flipped[b-9ux9k9gdlh] { transform: rotate(3deg) rotateY(180deg); }

.mp-idface[b-9ux9k9gdlh] {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 12px; overflow: hidden;
    background: linear-gradient(140deg, #1c3448, #24455d);
    border: 1px solid rgba(227,196,131,.3);
    box-shadow: 0 10px 26px rgba(10,18,26,.32);
}
.mp-idface--back[b-9ux9k9gdlh] { transform: rotateY(180deg); }

.mp-idimg[b-9ux9k9gdlh] { width: 100%; height: 100%; object-fit: cover; display: block; }

.mp-idstack--locked .mp-idimg[b-9ux9k9gdlh] { filter: blur(6px); }
.mp-idstack--locked .mp-idface-num[b-9ux9k9gdlh] { filter: blur(3px); }

.mp-idface-tag[b-9ux9k9gdlh] {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 5px 10px;
    background: linear-gradient(transparent, rgba(10,18,26,.7));
    color: #cdd9e2; font-size: 10.5px; font-weight: 600;
}

.mp-idface-txt[b-9ux9k9gdlh] {
    height: 100%; padding: 12px 13px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.mp-idface-top[b-9ux9k9gdlh] {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; color: #9db0c0;
}
.mp-idface-top i[b-9ux9k9gdlh] { color: #e3c483; font-size: 13px; }
.mp-idface-num[b-9ux9k9gdlh] {
    font-size: 14px; color: #cdd9e2;
    letter-spacing: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.mp-idface-hint[b-9ux9k9gdlh] { font-size: 10px; color: #7d94a5; }

.mp-idlock[b-9ux9k9gdlh] {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-radius: 12px; transform: rotate(3deg);
    background: rgba(10,18,26,.28);
}
.mp-idlock i[b-9ux9k9gdlh] { font-size: 18px; color: #e3c483; }
.mp-idlock span[b-9ux9k9gdlh] { font-size: 10.5px; color: #d7e6dd; }

.mp-idstack:hover .mp-idface[b-9ux9k9gdlh] { box-shadow: 0 14px 32px rgba(10,18,26,.42); }

.mp-idflip-hint[b-9ux9k9gdlh] { margin-top: 10px; text-align: center; font-size: 10.5px; color: #7d94a5; }

/* ══════════════════════════════════
   Tiles tóm tắt
   ══════════════════════════════════ */
.mp-tiles[b-9ux9k9gdlh] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: 14px;
}

.mp-tile[b-9ux9k9gdlh] {
    background: #fff; border: 1px solid #ece9e2; border-radius: 14px;
    padding: 14px 16px; min-width: 0;
    box-shadow: 0 1px 2px rgba(30,30,20,.03), 0 8px 24px rgba(30,30,20,.04);
    transition: box-shadow .15s;
}
.mp-tile:hover[b-9ux9k9gdlh] { box-shadow: 0 2px 4px rgba(30,30,20,.05), 0 12px 30px rgba(30,30,20,.07); }

.mp-tile-lbl[b-9ux9k9gdlh] { font-size: 11px; color: #8a95a1; display: flex; align-items: center; gap: 6px; }
.mp-tile-lbl i[b-9ux9k9gdlh] { font-size: 13px; }

.mp-tile-val[b-9ux9k9gdlh] {
    font-size: 13.5px; font-weight: 600; color: #22303d; margin-top: 7px;
    display: flex; align-items: center; gap: 7px; min-width: 0;
    overflow-wrap: anywhere;
}
.mp-tile-val--ok[b-9ux9k9gdlh] { color: #2f7d54; }
.mp-tile-val--muted[b-9ux9k9gdlh] { color: #a7b1bc; font-weight: 500; }
.mp-tile-logo[b-9ux9k9gdlh] { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; background: #fff; flex-shrink: 0; }

.mp-tile-sub[b-9ux9k9gdlh] {
    font-size: 11.5px; color: #8a95a1; margin-top: 3px;
    display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere;
}
.mp-tile-sub--gold[b-9ux9k9gdlh] { color: #a97b28; font-weight: 600; font-variant-numeric: tabular-nums; }

.mp-tile-eye[b-9ux9k9gdlh] {
    border: none; background: none; cursor: pointer; padding: 0;
    color: #a7b1bc; font-size: 13px; line-height: 1; flex-shrink: 0;
}
.mp-tile-eye:hover[b-9ux9k9gdlh] { color: var(--pt-a, #7c3aed); }

/* ══════════════════════════════════
   Panel — form yêu cầu
   ══════════════════════════════════ */
.mp-panel[b-9ux9k9gdlh] {
    background: #fff; border: 1px solid #ece9e2; border-radius: 16px;
    margin-top: 12px;
    box-shadow: 0 1px 2px rgba(30,30,20,.03), 0 8px 24px rgba(30,30,20,.04);
}

.mp-panel-hd[b-9ux9k9gdlh] {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px; border: none; background: none; cursor: pointer;
    font-family: var(--font); text-align: left; border-radius: 16px;
}
.mp-panel-hd:hover[b-9ux9k9gdlh] { background: color-mix(in srgb, var(--pt-am, #a78bfa) 5%, #faf9f5); }
.mp-panel-hd--open[b-9ux9k9gdlh] {
    background: #faf9f5; border-bottom: 1px solid #f0eee8;
    border-radius: 16px 16px 0 0;
}

.mp-panel-title[b-9ux9k9gdlh] { font-size: 13.5px; font-weight: 600; color: #22303d; display: flex; align-items: center; gap: 9px; }
.mp-panel-title i[b-9ux9k9gdlh] { font-size: 15px; color: #a7b1bc; }

.mp-panel-right[b-9ux9k9gdlh] { display: flex; align-items: center; gap: 12px; }
.mp-panel-hint[b-9ux9k9gdlh] { font-size: 11.5px; color: #8a95a1; }
.mp-panel-chev[b-9ux9k9gdlh] { font-size: 15px; color: #a7b1bc; }

.mp-panel-body[b-9ux9k9gdlh] { padding: 18px; }

/* ── State screens ── */
.mp-state[b-9ux9k9gdlh] { padding: 48px; text-align: center; color: #64748b; }
.mp-state-icon[b-9ux9k9gdlh] { font-size: 26px; display: block; margin-bottom: 10px; }
.mp-state-alert[b-9ux9k9gdlh] { margin: 24px; }

.mp-admin-icon-wrap[b-9ux9k9gdlh] {
    width: 64px; height: 64px; border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #a78bfa) 30%, #fff),
        color-mix(in srgb, var(--pt-am, #a78bfa) 55%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-a, #7c3aed) 18%, transparent);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-a, #7c3aed) 12%, transparent);
}
.mp-admin-icon[b-9ux9k9gdlh] { font-size: 30px; color: var(--pt-a, #7c3aed); }
.mp-admin-title[b-9ux9k9gdlh] { font-size: 17px; font-weight: 700; margin-bottom: 8px; }

/* ── Pending banner ── */
.mp-pending[b-9ux9k9gdlh] {
    background: linear-gradient(135deg, #fffbeb, #fef9ee);
    border: 1px solid rgba(245,158,11,.28);
    border-radius: 16px;
    padding: 16px 18px;
    margin-top: 12px;
    box-shadow: 0 6px 18px rgba(245,158,11,.08);
}

.mp-pending-header[b-9ux9k9gdlh] {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px; margin-bottom: 10px; flex-wrap: wrap;
}

.mp-pending-icon[b-9ux9k9gdlh] { font-size: 16px; color: #b45309; }

.mp-pending-date[b-9ux9k9gdlh] { color: #b45309; font-weight: 500; font-size: 12px; margin-left: auto; }

.mp-pending-chips[b-9ux9k9gdlh] { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; margin-bottom: 12px; }

.mp-chip[b-9ux9k9gdlh] {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border: 1px solid rgba(245,158,11,.22);
    color: #92400e;
    border-radius: 8px;
    padding: 3px 10px;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-weight: 600;
}

/* ── Notice card ── */
.mp-notice[b-9ux9k9gdlh] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-a, #7c3aed) 6%, transparent),
        color-mix(in srgb, var(--pt-a, #7c3aed) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--pt-a, #7c3aed) 15%, transparent);
    border-radius: 12px;
    font-size: 13px;
    color: color-mix(in srgb, var(--pt-a, #7c3aed) 80%, #000);
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px; margin-bottom: 14px;
}
.mp-notice-icon[b-9ux9k9gdlh] { flex-shrink: 0; margin-top: 1px; font-size: 14px; }

/* ── Section label ── */
.mp-section-label[b-9ux9k9gdlh] {
    font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}

/* ── Upload labels ── */
.mp-upload[b-9ux9k9gdlh] {
    display: block; border-radius: 12px; padding: 14px;
    text-align: center; cursor: pointer;
    transition: border-color .15s, opacity .15s;
}
.mp-upload:hover[b-9ux9k9gdlh] { opacity: .85; }
.mp-upload-hint[b-9ux9k9gdlh] { font-size: 11px; margin-bottom: 5px; color: #94a3b8; }
.mp-upload-img[b-9ux9k9gdlh] { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; }
.mp-upload-icon[b-9ux9k9gdlh] { font-size: 18px; color: #cbd5e1; display: block; margin-bottom: 4px; }
.mp-upload-text[b-9ux9k9gdlh] { font-size: 11px; color: #94a3b8; }
.mp-upload:hover .mp-upload-overlay[b-9ux9k9gdlh] { opacity: 1 !important; }

/* ── QR preview ── */
.mp-qr-preview[b-9ux9k9gdlh] { display: flex; align-items: center; gap: 10px; justify-content: center; }
.mp-qr-img[b-9ux9k9gdlh] { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; }
.mp-qr-info[b-9ux9k9gdlh] { text-align: left; }
.mp-qr-ok[b-9ux9k9gdlh] { font-size: 12px; font-weight: 700; color: var(--pt-a, #7c3aed); }
.mp-qr-hint[b-9ux9k9gdlh] { font-size: 10px; color: #94a3b8; }
.mp-qr-icon[b-9ux9k9gdlh] { font-size: 22px; color: #cbd5e1; display: block; margin-bottom: 4px; }
.mp-qr-text[b-9ux9k9gdlh] { font-size: 12px; color: #94a3b8; }

/* ── Submit button — theme gradient ── */
.mp-btn-submit[b-9ux9k9gdlh] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 26px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, var(--pt-a, #7c3aed), var(--pt-am, #a78bfa));
    color: #fff; font-family: var(--font);
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: box-shadow .15s, filter .15s;
    white-space: nowrap; line-height: 1;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-a, #7c3aed) 28%, transparent);
}
.mp-btn-submit:hover[b-9ux9k9gdlh] { filter: brightness(1.06); box-shadow: 0 6px 20px color-mix(in srgb, var(--pt-a, #7c3aed) 36%, transparent); }
.mp-btn-submit:disabled[b-9ux9k9gdlh] { opacity: .35; cursor: default; pointer-events: none; }

/* ── Actions row ── */
.mp-actions[b-9ux9k9gdlh] { display: flex; gap: 10px; margin-bottom: 28px; }

/* ── History ── */
.mp-history[b-9ux9k9gdlh] { margin-top: 30px; }

.mp-hist-title[b-9ux9k9gdlh] { font-size: 17px; font-weight: 700; color: #1f2d3a; margin-bottom: 14px; }

.mp-hist-card[b-9ux9k9gdlh] {
    background: #fff;
    border: 1px solid #ece9e2;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(30,30,20,.04);
    transition: box-shadow .15s, transform .15s;
}
.mp-hist-card:hover[b-9ux9k9gdlh] { box-shadow: 0 8px 20px rgba(15,32,39,.08); transform: translateY(-1px); }

.mp-hist-header[b-9ux9k9gdlh] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }

.mp-hist-date[b-9ux9k9gdlh] {
    font-size: 12px; color: #94a3b8;
    font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .3px;
}

.mp-hist-row[b-9ux9k9gdlh] { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }

.mp-hist-chip[b-9ux9k9gdlh] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-bg, #f5f3ff) 100%, transparent),
        color-mix(in srgb, var(--pt-am, #a78bfa) 18%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-a, #7c3aed) 14%, transparent);
    border-radius: 8px; padding: 3px 10px;
    max-width: 100%; overflow-wrap: anywhere;
    color: color-mix(in srgb, var(--pt-a, #7c3aed) 82%, #000); font-weight: 600;
}

.mp-hist-note[b-9ux9k9gdlh] { margin-top: 8px; font-size: 12px; color: #64748b; }

.mp-hist-admin-note[b-9ux9k9gdlh] {
    margin-top: 6px; font-size: 12px; color: #64748b;
    display: flex; align-items: flex-start; gap: 5px;
}
.mp-hist-admin-rej[b-9ux9k9gdlh] { color: var(--red); }

/* ── Field validation ── */
.mp-input-err[b-9ux9k9gdlh] { border-color: var(--red) !important; background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.mp-field-err[b-9ux9k9gdlh] { margin-top: 5px; font-size: 12px; color: var(--red); display: flex; align-items: center; gap: 4px; }
.mp-field-ok[b-9ux9k9gdlh] { margin-top: 5px; font-size: 12px; color: var(--pt-a, #7c3aed); display: flex; align-items: center; gap: 4px; font-weight: 600; }
.mp-field-hint[b-9ux9k9gdlh] { margin-top: 5px; font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 4px; }

/* ── Bank picker ── */
.mp-bank-btn[b-9ux9k9gdlh] {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,32,39,.10);
    border-radius: 10px;
    font-family: var(--font); font-size: 13px; color: var(--ink);
    cursor: pointer; transition: border-color .15s; text-align: left; min-width: 0;
}
.mp-bank-btn:hover[b-9ux9k9gdlh] { border-color: color-mix(in srgb, var(--pt-a, #7c3aed) 30%, transparent); }

.mp-bank-logo[b-9ux9k9gdlh] { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; flex-shrink: 0; background: #fff; }

.mp-bank-drop[b-9ux9k9gdlh] {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,32,39,.08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15,32,39,.12);
    z-index: 300; display: flex; flex-direction: column; max-height: 300px;
}

.mp-bank-items[b-9ux9k9gdlh] { overflow-y: auto; flex: 1; padding: 4px; }

.mp-bank-search[b-9ux9k9gdlh] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid rgba(15,32,39,.06); flex-shrink: 0;
}
.mp-bank-search-input[b-9ux9k9gdlh] {
    flex: 1; border: none; background: none;
    font-family: var(--font); font-size: 13px; color: var(--ink); outline: none;
}
.mp-bank-search-input[b-9ux9k9gdlh]::placeholder { color: #94a3b8; }

.mp-bank-item[b-9ux9k9gdlh] {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border: none; background: none; border-radius: 10px;
    font-family: var(--font); cursor: pointer; text-align: left;
    transition: background .1s; width: 100%; min-width: 0;
}
.mp-bank-item:hover[b-9ux9k9gdlh] { background: color-mix(in srgb, var(--pt-a, #7c3aed) 5%, transparent); }
.mp-bank-item-active[b-9ux9k9gdlh] { background: color-mix(in srgb, var(--pt-a, #7c3aed) 8%, transparent) !important; }

.mp-bank-item-info[b-9ux9k9gdlh] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mp-bank-item-short[b-9ux9k9gdlh] { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.mp-bank-item-full[b-9ux9k9gdlh] { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .mp-hero[b-9ux9k9gdlh] { flex-direction: column; align-items: stretch; gap: 22px; padding: 24px 22px; }
    .mp-hero-id[b-9ux9k9gdlh] { width: 100%; max-width: 230px; margin: 0 auto; }
    .mp-tiles[b-9ux9k9gdlh] { grid-template-columns: 1fr 1fr; }
    .mp-tiles > .mp-tile:last-child[b-9ux9k9gdlh] { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .mp-wrap[b-9ux9k9gdlh] { padding: 20px 16px 32px; }
    .mp-hero[b-9ux9k9gdlh] { border-radius: 18px; }
    .mp-hero-name[b-9ux9k9gdlh] { font-size: 21px; }
    .mp-pending[b-9ux9k9gdlh] { border-radius: 14px; }
    .mp-notice[b-9ux9k9gdlh] { border-radius: 10px; }
    .mp-hist-card[b-9ux9k9gdlh] { border-radius: 12px; }
    .mp-actions[b-9ux9k9gdlh] { margin-bottom: 0; }
}

@media (max-width: 480px) {
    .mp-wrap[b-9ux9k9gdlh] { padding: 16px 12px 24px; }
    .mp-state[b-9ux9k9gdlh] { padding: 34px 14px; }
    .mp-state-alert[b-9ux9k9gdlh] { margin: 12px 0; }
    .mp-hero[b-9ux9k9gdlh] { padding: 20px 18px; }
    .mp-hero-name[b-9ux9k9gdlh] { font-size: 19px; }
    .mp-tiles[b-9ux9k9gdlh] { grid-template-columns: 1fr; }
    .mp-tiles > .mp-tile:last-child[b-9ux9k9gdlh] { grid-column: auto; }
    .mp-panel-body[b-9ux9k9gdlh] { padding: 14px; }
    .mp-panel-hint[b-9ux9k9gdlh] { display: none; }
    .mp-pending[b-9ux9k9gdlh] { padding: 12px 14px; }
    .mp-pending-chips[b-9ux9k9gdlh],
    .mp-hist-row[b-9ux9k9gdlh] { gap: 5px; font-size: 11px; }
    .mp-chip[b-9ux9k9gdlh], .mp-hist-chip[b-9ux9k9gdlh] { width: 100%; }
    .mp-upload[b-9ux9k9gdlh] { padding: 10px; border-radius: 10px; }
    .mp-upload-img[b-9ux9k9gdlh] { height: 86px; }
    .mp-qr-preview[b-9ux9k9gdlh] { justify-content: flex-start; }
    .mp-actions[b-9ux9k9gdlh] { flex-direction: column; }
    .mp-actions .mp-btn-submit[b-9ux9k9gdlh] { width: 100%; justify-content: center; }
    .mp-hist-header[b-9ux9k9gdlh] { flex-direction: column; }
    .mp-bank-drop[b-9ux9k9gdlh] { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom,0)); max-height: 70vh; z-index: 500; }
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MySchedule.razor.rz.scp.css */
/* ── Porcelain Terminal — MySchedule (themed via --pt-*) ── */

.content:has(.msc-wrap)[b-yo9tawkjv6] {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--pt-am, #3b82f6) 7%, transparent), transparent 32%),
        linear-gradient(180deg, #eef2f5 0%, #e4eaee 100%);
}

.msc-wrap[b-yo9tawkjv6] { max-width: 820px; margin: 0 auto; width: 100%; min-width: 0; padding: 32px 24px 48px; }

/* ── Loading / error / not-employee ── */
.msc-loading[b-yo9tawkjv6] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 60px; color: #64748b; font-size: 14px;
}
.msc-loader-icon[b-yo9tawkjv6] { font-size: 24px; }
.msc-alert-wrap[b-yo9tawkjv6] { margin: 24px 0; }

.msc-not-employee[b-yo9tawkjv6] { padding: 60px 24px; text-align: center; color: #64748b; }
.msc-ne-icon-wrap[b-yo9tawkjv6] {
    width: 64px; height: 64px; border-radius: 16px;
    background: var(--pt-bg, #eff6ff); border: 1px solid color-mix(in srgb, var(--pt-a, #1d4ed8) 14%, transparent);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.msc-ne-icon[b-yo9tawkjv6] { font-size: 28px; color: var(--pt-am, #3b82f6); }
.msc-ne-title[b-yo9tawkjv6] { font-size: 15px; font-weight: 600; color: var(--ink); }

/* ── Page header ── */
.msc-hd[b-yo9tawkjv6] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 22px; flex-wrap: wrap;
}
.msc-title[b-yo9tawkjv6] { font-size: 22px; font-weight: 800; color: var(--ink); }

/* Register button: theme gradient */
.msc-reg-btn[b-yo9tawkjv6] {
    background: linear-gradient(135deg, var(--pt-a, #1d4ed8), var(--pt-am, #3b82f6)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-a, #1d4ed8) 25%, transparent) !important;
}
.msc-reg-btn:hover[b-yo9tawkjv6] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pt-a, #1d4ed8) 88%, #000), var(--pt-a, #1d4ed8)) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pt-a, #1d4ed8) 32%, transparent) !important;
}

/* ── Sub-tabs ── */
.msc-tabs[b-yo9tawkjv6] {
    display: flex; gap: 6px; margin-bottom: 20px;
    background: linear-gradient(180deg, #f1f5f9, #e8ecf0);
    border-radius: 14px; padding: 5px;
    border: 1px solid rgba(15,32,39,.08);
    align-self: flex-start;
    box-shadow: inset 0 1px 3px rgba(15,32,39,.06);
}
.msc-tab[b-yo9tawkjv6] {
    display: flex; align-items: center; gap: 7px; padding: 9px 20px;
    border-radius: 10px; border: none; background: none;
    font-family: var(--font); font-size: 13px; font-weight: 700; color: #64748b;
    cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.msc-tab:hover[b-yo9tawkjv6] { color: var(--ink); background: rgba(255,255,255,.6); }
.msc-tab-active[b-yo9tawkjv6] {
    background: rgba(255,255,255,.96) !important;
    color: var(--pt-a, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(15,32,39,.08);
}
.msc-tab-count[b-yo9tawkjv6] {
    background: var(--pt-a, #1d4ed8); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px; line-height: 1.6;
}

/* ── Week picker ── */
.msc-wkpicker[b-yo9tawkjv6] {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid rgba(15,32,39,.10);
    border-radius: 16px; padding: 8px 14px;
    box-shadow: 0 4px 12px rgba(15,32,39,.05);
}
.msc-wkbtn[b-yo9tawkjv6] {
    border: none; background: none; cursor: pointer;
    padding: 6px 10px; color: #64748b; font-size: 15px;
    border-radius: 10px; transition: background .12s, color .12s;
    font-family: var(--font);
}
.msc-wkbtn:hover[b-yo9tawkjv6] { background: color-mix(in srgb, var(--pt-am, #3b82f6) 8%, transparent); color: var(--pt-a, #1d4ed8); }
.msc-wk-label[b-yo9tawkjv6] {
    flex: 1; text-align: center;
    font-size: 14px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.msc-wk-cal-icon[b-yo9tawkjv6] { color: var(--pt-am, #3b82f6); font-size: 16px; }

/* ══════════════════════════════════════════════
   Agenda timeline — one row per day
   ══════════════════════════════════════════════ */
.msc-agenda[b-yo9tawkjv6] {
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    border: 1px solid rgba(15,32,39,.08);
    box-shadow: 0 14px 40px rgba(15,32,39,.07);
    overflow: hidden;
}

/* Each day row */
.msc-ag-row[b-yo9tawkjv6] {
    display: flex; align-items: stretch;
    border-bottom: 1px solid rgba(15,32,39,.06);
    transition: background .12s;
}
.msc-ag-row:last-child[b-yo9tawkjv6] { border-bottom: none; }
.msc-ag-row:hover[b-yo9tawkjv6] { background: color-mix(in srgb, var(--pt-am, #3b82f6) 2%, transparent); }

/* Today highlight */
.msc-ag-today[b-yo9tawkjv6] {
    background:
        radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 6%, transparent), transparent 50%),
        linear-gradient(90deg, var(--pt-bg, #eff6ff), rgba(255,255,255,.96) 40%) !important;
}

/* Left: date column */
.msc-ag-date[b-yo9tawkjv6] {
    width: 72px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px 8px;
    border-right: 1px solid rgba(15,32,39,.06);
    gap: 2px;
}
.msc-ag-dow[b-yo9tawkjv6] {
    font-size: 10px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px;
}
.msc-ag-day[b-yo9tawkjv6] {
    font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1;
}
.msc-ag-day-today[b-yo9tawkjv6] {
    color: #fff;
    background: var(--pt-a, #1d4ed8);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--pt-a, #1d4ed8) 35%, transparent);
}
.msc-ag-today-label[b-yo9tawkjv6] {
    font-size: 9px; font-weight: 700; color: var(--pt-am, #3b82f6);
    letter-spacing: .3px;
}

/* Right: shifts area */
.msc-ag-shifts[b-yo9tawkjv6] {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 16px;
}

/* No shift */
.msc-ag-empty[b-yo9tawkjv6] {
    font-size: 13px; color: #b0bec5; font-style: italic;
    padding: 4px 0;
    display: flex; align-items: center; gap: 6px;
}

/* Shift card inside a day */
.msc-ag-shift[b-yo9tawkjv6] {
    display: flex; align-items: stretch;
    border-radius: 12px;
    background:
        radial-gradient(circle at 2% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 6%, transparent), transparent 40%),
        linear-gradient(135deg, #fafbff, var(--pt-bg, #eff6ff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 12%, transparent);
    overflow: hidden;
    transition: box-shadow .12s, transform .12s;
}
.msc-ag-shift:hover[b-yo9tawkjv6] {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent);
    transform: translateX(2px);
}

/* Color bar on the left edge */
.msc-ag-color-bar[b-yo9tawkjv6] {
    width: 4px; flex-shrink: 0;
    background: var(--att-color, var(--pt-am, #3b82f6));
    border-radius: 4px 0 0 4px;
}

.msc-ag-shift-body[b-yo9tawkjv6] {
    flex: 1; min-width: 0;
    padding: 10px 14px;
    display: flex; flex-direction: column; gap: 5px;
}

.msc-ag-shift-top[b-yo9tawkjv6] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.msc-ag-shift-name[b-yo9tawkjv6] {
    font-size: 14px; font-weight: 700; color: var(--ink);
}

.msc-ag-shift-bottom[b-yo9tawkjv6] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.msc-ag-shift-time[b-yo9tawkjv6] {
    font-size: 12px; color: var(--pt-a, #1d4ed8);
    font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.msc-ag-clock[b-yo9tawkjv6] { font-size: 13px; }
.msc-ag-shift-dept[b-yo9tawkjv6] {
    font-size: 11px; color: #64748b; font-weight: 500;
}

/* ── Request filter bar ── */
.msc-filter-bar[b-yo9tawkjv6] { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }

.msc-fbtn[b-yo9tawkjv6] {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; font-family: var(--font);
    padding: 7px 14px; border-radius: 20px;
    border: 1px solid rgba(15,32,39,.08);
    background: rgba(255,255,255,.80);
    cursor: pointer; color: #64748b;
    transition: all .12s;
    box-shadow: 0 2px 6px rgba(15,32,39,.04);
}
.msc-fbtn:hover:not(.on)[b-yo9tawkjv6] {
    border-color: color-mix(in srgb, var(--pt-am, #3b82f6) 28%, transparent);
    color: var(--pt-a, #1d4ed8);
    background: rgba(255,255,255,.96);
}
.msc-fbtn.on[b-yo9tawkjv6] {
    background: linear-gradient(135deg, var(--pt-a, #1d4ed8), var(--pt-am, #3b82f6));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-a, #1d4ed8) 25%, transparent);
}
.msc-fbtn-cnt[b-yo9tawkjv6] {
    background: rgba(255,255,255,.25); border-radius: 8px;
    font-size: 10px; padding: 0 5px; line-height: 1.7; font-weight: 700;
}
.msc-fbtn:not(.on) .msc-fbtn-cnt[b-yo9tawkjv6] {
    background: rgba(15,32,39,.06); color: #64748b;
}

/* ── Request list ── */
.msc-list[b-yo9tawkjv6] { display: flex; flex-direction: column; gap: 12px; }

.msc-card[b-yo9tawkjv6] {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,32,39,.08);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 32px rgba(15,32,39,.07);
    transition: box-shadow .15s, transform .15s;
}
.msc-card:hover[b-yo9tawkjv6] { box-shadow: 0 16px 40px rgba(15,32,39,.10); transform: translateY(-1px); }
.msc-card-approved[b-yo9tawkjv6] { border-color: rgba(16,185,129,.22); }
.msc-card-rejected[b-yo9tawkjv6]  { border-color: rgba(239,68,68,.18); }

.msc-card-hd[b-yo9tawkjv6] {
    padding: 18px 20px; display: flex; align-items: center;
    gap: 14px; cursor: pointer; min-width: 0;
    transition: background .12s;
}
.msc-card-hd:hover[b-yo9tawkjv6] { background: color-mix(in srgb, var(--pt-am, #3b82f6) 3%, transparent); }

/* Week icon */
.msc-week-icon[b-yo9tawkjv6] {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #3b82f6) 35%, #fff),
        color-mix(in srgb, var(--pt-am, #3b82f6) 60%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 22%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pt-am, #3b82f6) 14%, transparent);
}
.msc-card-approved .msc-week-icon[b-yo9tawkjv6] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: rgba(16,185,129,.22);
    box-shadow: 0 4px 10px rgba(16,185,129,.14);
}
.msc-card-rejected .msc-week-icon[b-yo9tawkjv6] {
    background: linear-gradient(135deg, #fde2e2, #fecaca);
    border-color: rgba(239,68,68,.18);
    box-shadow: 0 4px 10px rgba(239,68,68,.10);
}
.msc-week-icon-label[b-yo9tawkjv6] {
    font-size: 9px; font-weight: 700; color: var(--pt-a, #2563eb);
    text-transform: uppercase; letter-spacing: .5px;
}
.msc-card-approved .msc-week-icon-label[b-yo9tawkjv6] { color: #065f46; }
.msc-card-rejected  .msc-week-icon-label[b-yo9tawkjv6] { color: #991b1b; }
.msc-week-icon-day[b-yo9tawkjv6] {
    font-size: 17px; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--pt-a, #1d4ed8) 80%, #000);
}
.msc-card-approved .msc-week-icon-day[b-yo9tawkjv6] { color: #047857; }
.msc-card-rejected  .msc-week-icon-day[b-yo9tawkjv6] { color: #b91c1c; }

.msc-card-body[b-yo9tawkjv6] { flex: 1; min-width: 0; }
.msc-card-title[b-yo9tawkjv6] {
    font-weight: 700; font-size: 14px; color: var(--ink);
    margin-bottom: 5px; overflow-wrap: anywhere;
}
.msc-card-meta[b-yo9tawkjv6] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msc-card-meta-txt[b-yo9tawkjv6] { font-size: 12px; color: #64748b; }

.msc-chevron[b-yo9tawkjv6] { font-size: 18px; color: #94a3b8; flex-shrink: 0; transition: color .12s; }
.msc-card-hd:hover .msc-chevron[b-yo9tawkjv6] { color: var(--pt-a, #1d4ed8); }

/* Detail panel */
.msc-detail[b-yo9tawkjv6] {
    border-top: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 9%, transparent);
    padding: 16px 20px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--pt-am, #3b82f6) 3%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--pt-bg, #eff6ff) 20%, #fff), #fff);
}

.msc-notes[b-yo9tawkjv6] {
    font-size: 13px; color: #475569; margin-bottom: 14px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--pt-am, #3b82f6) 5%, transparent);
    border-radius: 10px; border-left: 3px solid var(--pt-am, #3b82f6);
    display: flex; align-items: flex-start; gap: 8px;
}

.msc-day-group[b-yo9tawkjv6] { margin-bottom: 14px; }
.msc-day-label[b-yo9tawkjv6] {
    font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 5px;
}
.msc-day-label-icon[b-yo9tawkjv6] { font-size: 13px; color: var(--pt-am, #93c5fd); }

.msc-slots[b-yo9tawkjv6] { display: flex; flex-wrap: wrap; gap: 8px; }
.msc-slot[b-yo9tawkjv6] {
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 6%, transparent), transparent 50%),
        linear-gradient(135deg, rgba(255,255,255,.96), var(--pt-bg, #eff6ff));
    border-radius: 12px; padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 14%, transparent); min-width: 0;
    transition: box-shadow .12s;
}
.msc-slot:hover[b-yo9tawkjv6] { box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent); }
.msc-slot-name[b-yo9tawkjv6] { font-weight: 700; font-size: 14px; color: var(--ink); }
.msc-slot-time[b-yo9tawkjv6] {
    font-size: 12px; color: var(--pt-a, #2563eb); margin-top: 3px;
    font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.msc-slot-clock[b-yo9tawkjv6] { font-size: 12px; }
.msc-slot-dept[b-yo9tawkjv6] { margin-top: 6px; display: inline-block; }

/* Status messages */
.msc-status-msg[b-yo9tawkjv6] {
    padding: 12px 16px; border-radius: 12px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.msc-approved-msg[b-yo9tawkjv6] {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border: 1px solid rgba(16,185,129,.22); color: #065f46;
}
.msc-rejected-msg[b-yo9tawkjv6] {
    background: linear-gradient(135deg, #fde2e2, #fff5f5);
    border: 1px solid rgba(239,68,68,.18); color: #991b1b;
}
.msc-msg-icon[b-yo9tawkjv6] { font-size: 17px; flex-shrink: 0; }

/* ── Empty state ── */
.msc-empty[b-yo9tawkjv6] {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 56px 24px;
    background: rgba(255,255,255,.96);
    border-radius: 20px; border: 1px solid rgba(15,32,39,.08);
    box-shadow: 0 18px 48px rgba(15,32,39,.07);
    text-align: center;
}
.msc-empty-svg[b-yo9tawkjv6] { width: 120px; height: 105px; margin-bottom: 4px; }
.msc-empty-title[b-yo9tawkjv6] { font-size: 15px; font-weight: 700; color: var(--ink); }
.msc-empty-btn[b-yo9tawkjv6] { margin-top: 8px; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .msc-wrap[b-yo9tawkjv6] { padding: 20px 16px 32px; }
    .msc-hd[b-yo9tawkjv6] { align-items: stretch; }
    .msc-hd .msc-reg-btn[b-yo9tawkjv6] { width: 100%; justify-content: center; }
    .msc-tabs[b-yo9tawkjv6] { width: 100%; }
    .msc-tab[b-yo9tawkjv6] { flex: 1; justify-content: center; }
    .msc-ag-date[b-yo9tawkjv6] { width: 58px; padding: 12px 6px; }
    .msc-ag-day[b-yo9tawkjv6] { font-size: 18px; }
    .msc-ag-day-today[b-yo9tawkjv6] { width: 30px; height: 30px; font-size: 16px; }
    .msc-ag-shifts[b-yo9tawkjv6] { padding: 10px 12px; }
    .msc-ag-shift-top[b-yo9tawkjv6] { flex-direction: column; align-items: flex-start; gap: 4px; }
    .msc-card-hd[b-yo9tawkjv6] { padding: 16px; gap: 12px; }
    .msc-detail[b-yo9tawkjv6] { padding: 14px 16px; }
    .msc-filter-bar[b-yo9tawkjv6] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .msc-fbtn[b-yo9tawkjv6] { flex: 0 0 auto; }
    .msc-slots[b-yo9tawkjv6] { flex-direction: column; }
    .msc-slot[b-yo9tawkjv6] { width: 100%; }
}
/* _content/SeasonFlow.Web/Components/Pages/Portal/MyWorkRequests.razor.rz.scp.css */
/* ── MyWorkRequests — ledger redesign (themed via --pt-*, green fallback) ── */

.content:has(.mwr-wrap)[b-4kovkybbke] {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--pt-a, #047857) 6%, transparent), transparent 34%),
        linear-gradient(180deg, #eef2f0 0%, #e6ece8 100%);
}

/* ── Page container ── */
.mwr-wrap[b-4kovkybbke] { max-width: 1040px; margin: 0 auto; width: 100%; min-width: 0; padding: 32px 24px 48px; }

/* ── Loading ── */
.mwr-loading[b-4kovkybbke] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 60px 20px; color: var(--ink3); font-size: 13px;
}
.mwr-loading-icon[b-4kovkybbke] { font-size: 18px; }

/* ══════════════════════════════════
   Header
   ══════════════════════════════════ */
.mwr-header[b-4kovkybbke] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.mwr-head-txt[b-4kovkybbke] { min-width: 0; }
.mwr-title[b-4kovkybbke] {
    font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px;
}
.mwr-subtitle[b-4kovkybbke] {
    font-size: 13.5px; color: #64748b; margin-top: 4px; max-width: 620px; line-height: 1.5;
}

.mwr-create-btn[b-4kovkybbke] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 12px; border: none;
    font-family: var(--font); font-size: 13.5px; font-weight: 700;
    cursor: pointer; color: #fff; white-space: nowrap; flex-shrink: 0;
    background: linear-gradient(135deg, var(--pt-a, #047857), var(--pt-am, #10b981));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-am, #10b981) 30%, transparent);
    transition: box-shadow .15s, filter .15s;
}
.mwr-create-btn:hover[b-4kovkybbke] {
    filter: brightness(1.04);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pt-am, #10b981) 38%, transparent);
}

/* ══════════════════════════════════
   Stat KPI tiles — white card + circular icon badge
   ══════════════════════════════════ */
.mwr-stats[b-4kovkybbke] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-bottom: 22px;
}
.mwr-stat[b-4kovkybbke] {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: 16px;
    background: #fff; border: 1px solid rgba(15,32,39,.08);
    box-shadow: 0 6px 18px rgba(15,32,39,.05);
    transition: transform .15s, box-shadow .15s;
}
.mwr-stat:hover[b-4kovkybbke] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15,32,39,.08);
}
.mwr-stat-ic[b-4kovkybbke] {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.mwr-stat-ic svg[b-4kovkybbke] { width: 22px; height: 22px; }
.mwr-stat-txt[b-4kovkybbke] { min-width: 0; }
.mwr-stat-lbl[b-4kovkybbke] {
    font-size: 11.5px; font-weight: 600; color: #64748b;
}
.mwr-stat-val[b-4kovkybbke] {
    font-size: 24px; font-weight: 800; margin-top: 1px; line-height: 1.1;
    font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* Variants — icon-badge tint + value color */
.mwr-stat--slate .mwr-stat-ic[b-4kovkybbke] { background: #eef2f5; color: #64748b; }
.mwr-stat--slate .mwr-stat-val[b-4kovkybbke] { color: #334155; }
.mwr-stat--amber .mwr-stat-ic[b-4kovkybbke] { background: #fef3c7; color: #b45309; }
.mwr-stat--amber .mwr-stat-val[b-4kovkybbke] { color: #b45309; }
.mwr-stat--green .mwr-stat-ic[b-4kovkybbke] { background: #d1fae5; color: #047857; }
.mwr-stat--green .mwr-stat-val[b-4kovkybbke] { color: #047857; }
.mwr-stat--red   .mwr-stat-ic[b-4kovkybbke] { background: #fee2e2; color: #b91c1c; }
.mwr-stat--red   .mwr-stat-val[b-4kovkybbke] { color: #b91c1c; }

/* ══════════════════════════════════
   Panel (tabs + table + footer)
   ══════════════════════════════════ */
.mwr-panel[b-4kovkybbke] {
    background: #fff; border: 1px solid rgba(15,32,39,.08);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(15,32,39,.06);
}

/* Tabs */
.mwr-tabs[b-4kovkybbke] {
    display: flex; gap: 4px; padding: 6px 10px 0;
    border-bottom: 1px solid #eef1f3; overflow-x: auto;
}
.mwr-tab[b-4kovkybbke] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-family: var(--font); font-weight: 600;
    padding: 12px 14px 13px; border: none; background: none;
    color: #64748b; cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .12s;
}
.mwr-tab:hover:not(.on)[b-4kovkybbke] { color: var(--pt-a, #047857); }
.mwr-tab.on[b-4kovkybbke] {
    color: var(--pt-a, #047857);
    border-bottom-color: var(--pt-a, #047857);
}
.mwr-tab-count[b-4kovkybbke] {
    font-size: 11px; font-weight: 700; padding: 1px 7px;
    border-radius: 999px; background: #eef1f3; color: #64748b;
    font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.mwr-tab.on .mwr-tab-count[b-4kovkybbke] {
    background: color-mix(in srgb, var(--pt-am, #10b981) 16%, transparent);
    color: var(--pt-a, #047857);
}

/* ══════════════════════════════════
   Ledger table
   ══════════════════════════════════ */
.mwr-table-scroll[b-4kovkybbke] { width: 100%; }
.mwr-table[b-4kovkybbke] {
    width: 100%; border-collapse: collapse;
    font-family: 'Inter', var(--font);
    font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}
.mwr-table thead th[b-4kovkybbke] {
    text-align: left; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: #94a3b8;
    padding: 12px 16px; background: #fafbfc;
    border-bottom: 1px solid #eef1f3; white-space: nowrap;
}
.mwr-th-date[b-4kovkybbke] { width: 130px; }
.mwr-th-status[b-4kovkybbke] { width: 150px; }
.mwr-th-prio[b-4kovkybbke] { width: 110px; }
.mwr-th-exp[b-4kovkybbke] { width: 44px; }

.mwr-row[b-4kovkybbke] {
    cursor: pointer; transition: background .12s;
    border-top: 1px solid #f1f4f6;
}
.mwr-table tbody tr:first-child .mwr-row[b-4kovkybbke],
.mwr-table tbody .mwr-row:first-child[b-4kovkybbke] { border-top: none; }
.mwr-row:hover[b-4kovkybbke] { background: #f7faf8; }
.mwr-row td[b-4kovkybbke] {
    padding: 14px 16px; font-size: 13.5px; color: #334155;
    vertical-align: middle;
}
.mwr-cell-title[b-4kovkybbke] { font-weight: 600; color: var(--ink); }
.mwr-cell-date[b-4kovkybbke] {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 12.5px; color: #64748b; white-space: nowrap;
}
.mwr-overdue[b-4kovkybbke] { color: #b91c1c !important; font-weight: 700; }
.mwr-cell-exp[b-4kovkybbke] { text-align: center; }

.mwr-chevron[b-4kovkybbke] {
    font-size: 16px; color: #94a3b8; transition: transform .2s ease;
}
.mwr-chevron-open[b-4kovkybbke] { transform: rotate(180deg); color: var(--pt-a, #047857); }

.mwr-row-open[b-4kovkybbke] {
    background: color-mix(in srgb, var(--pt-am, #10b981) 6%, transparent);
    box-shadow: inset 3px 0 0 var(--pt-a, #047857);
}
.mwr-row-open:hover[b-4kovkybbke] { background: color-mix(in srgb, var(--pt-am, #10b981) 8%, transparent); }

/* ── Priority badges ── */
.mwr-priority[b-4kovkybbke] {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 8px; white-space: nowrap;
}
.wr-p-low[b-4kovkybbke]    { background: #f1f5f9; color: #64748b; }
.wr-p-normal[b-4kovkybbke] { background: #dcfce7; color: #15803d; }
.wr-p-high[b-4kovkybbke]   { background: #fef3c7; color: #b45309; }
.wr-p-urgent[b-4kovkybbke] { background: #fee2e2; color: #b91c1c; }

/* ── Status pills ── */
.mwr-pill[b-4kovkybbke] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; padding: 4px 11px;
    border-radius: 999px; white-space: nowrap;
}
.mwr-pill i[b-4kovkybbke] { font-size: 14px; }
.mwr-pill--amber[b-4kovkybbke] { background: #fef3c7; color: #b45309; }
.mwr-pill--green[b-4kovkybbke] { background: #dcfce7; color: #15803d; }
.mwr-pill--red[b-4kovkybbke]   { background: #fee2e2; color: #b91c1c; }
.mwr-pill--slate[b-4kovkybbke] { background: #eef1f3; color: #64748b; }

/* ── Footer count ── */
.mwr-foot[b-4kovkybbke] {
    padding: 13px 16px; text-align: center; font-size: 12.5px;
    color: #94a3b8; border-top: 1px solid #f1f4f6; background: #fafbfc;
}

/* ══════════════════════════════════
   Expandable detail row
   ══════════════════════════════════ */
.mwr-detail-row td[b-4kovkybbke] { padding: 0; }
.mwr-detail-cell[b-4kovkybbke] {
    background: color-mix(in srgb, var(--pt-am, #10b981) 4%, #fff);
    border-top: none;
}
.mwr-card-collapse[b-4kovkybbke] { overflow: hidden; transition: max-height .25s ease; }
.mwr-card-body[b-4kovkybbke] { padding: 4px 20px 18px; }

.mwr-content-box[b-4kovkybbke] {
    font-size: 13px; color: #475569; line-height: 1.6;
    white-space: pre-wrap; padding: 12px 0 10px; overflow-wrap: anywhere;
}

.mwr-note-box[b-4kovkybbke] {
    background: color-mix(in srgb, var(--pt-am, #10b981) 6%, #fff);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--pt-am, #10b981) 16%, transparent);
    border-left-width: 3px; padding: 10px 14px;
    font-size: 12px; color: #475569; margin-top: 4px;
}
.mwr-note-lbl[b-4kovkybbke] {
    font-size: 11px; font-weight: 700;
    color: var(--pt-a, #047857); margin-bottom: 4px;
}
.mwr-resolved-at[b-4kovkybbke] { font-size: 11px; color: #94a3b8; margin-top: 8px; }

/* Images */
.mwr-images[b-4kovkybbke] { display: flex; flex-wrap: wrap; gap: 6px; }
.mwr-thumb[b-4kovkybbke] {
    width: 80px; height: 80px; object-fit: cover; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--pt-am, #10b981) 16%, transparent);
    cursor: pointer; transition: opacity .15s, box-shadow .15s;
}
.mwr-thumb:hover[b-4kovkybbke] { opacity: .88; box-shadow: 0 4px 10px color-mix(in srgb, var(--pt-am, #10b981) 16%, transparent); }

/* ══════════════════════════════════
   Empty state
   ══════════════════════════════════ */
.mwr-empty[b-4kovkybbke] {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 52px 24px; text-align: center;
}
.mwr-empty-svg[b-4kovkybbke] { width: 150px; height: auto; margin-bottom: 4px; }
.mwr-empty-title[b-4kovkybbke] { font-size: 15px; font-weight: 700; color: var(--ink); }
.mwr-empty-desc[b-4kovkybbke] { font-size: 12.5px; color: #64748b; margin-bottom: 6px; }

/* ══════════════════════════════════
   Modal — 2-column with illustration panel
   ══════════════════════════════════ */
.mwr-modal[b-4kovkybbke] {
    display: flex; max-width: 700px; width: 95vw;
    background: #fff;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 32px 80px rgba(15,32,39,.18);
    border: 1px solid rgba(15,32,39,.08);
}
.mwr-modal-art[b-4kovkybbke] {
    width: 240px; flex-shrink: 0;
    background: linear-gradient(160deg, var(--pt-bg, #ecfdf5), #f2faf6);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 28px 20px; gap: 14px;
}
.mwr-modal-art-svg[b-4kovkybbke] { width: 150px; height: auto; }
.mwr-modal-art-caption[b-4kovkybbke] {
    font-size: 12px; color: #64748b; text-align: center;
    line-height: 1.5; font-weight: 500;
}
.mwr-modal-form[b-4kovkybbke] { flex: 1; padding: 24px; min-width: 0; }
.mwr-modal-title[b-4kovkybbke] {
    font-size: 18px; font-weight: 800; color: var(--ink);
    margin-bottom: 16px;
}

/* Image upload */
.mwr-img-lbl[b-4kovkybbke] {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 13px; padding: 8px 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #10b981) 22%, #fff),
        color-mix(in srgb, var(--pt-am, #10b981) 10%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #10b981) 22%, transparent);
    border-radius: 10px; color: var(--pt-a, #047857); font-weight: 600;
    transition: box-shadow .12s;
}
.mwr-img-lbl:hover[b-4kovkybbke] { box-shadow: 0 4px 10px color-mix(in srgb, var(--pt-am, #10b981) 14%, transparent); }

.mwr-img-preview[b-4kovkybbke] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mwr-img-item[b-4kovkybbke] { position: relative; display: inline-block; }
.mwr-img-thumb[b-4kovkybbke] {
    width: 70px; height: 70px; object-fit: cover; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--pt-am, #10b981) 15%, transparent); display: block;
}
.mwr-img-del[b-4kovkybbke] {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #dc2626; color: #fff; border: none; cursor: pointer;
    font-size: 11px; display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}

/* Modal footer */
.mwr-modal-footer[b-4kovkybbke] { display: flex; gap: 10px; margin-top: 8px; }
.mwr-modal-footer .btn[b-4kovkybbke] { justify-content: center; }

.mwr-submit-btn[b-4kovkybbke] {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 18px; border-radius: 10px; border: none;
    font-family: var(--font); font-size: 13px; font-weight: 700;
    cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--pt-a, #047857), var(--pt-am, #10b981));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-am, #10b981) 25%, transparent);
    transition: box-shadow .15s, filter .15s;
}
.mwr-submit-btn:hover[b-4kovkybbke] {
    filter: brightness(1.04);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pt-am, #10b981) 32%, transparent);
}
.mwr-submit-btn:disabled[b-4kovkybbke] { opacity: .6; cursor: default; }

/* ══════════════════════════════════
   Mobile — table becomes stacked cards
   ══════════════════════════════════ */
@media (max-width: 768px) {
    .mwr-wrap[b-4kovkybbke] { padding: 20px 14px 32px; }
    .mwr-stats[b-4kovkybbke] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mwr-header .mwr-create-btn[b-4kovkybbke] { width: 100%; justify-content: center; }
    .mwr-title[b-4kovkybbke] { font-size: 21px; }
    .mwr-stat[b-4kovkybbke] { padding: 14px; }
    .mwr-stat-val[b-4kovkybbke] { font-size: 20px; }

    .mwr-panel[b-4kovkybbke] { border-radius: 16px; }

    /* Card-ify the table */
    .mwr-table[b-4kovkybbke], .mwr-table tbody[b-4kovkybbke], .mwr-table tr[b-4kovkybbke], .mwr-table td[b-4kovkybbke] { display: block; }
    .mwr-table thead[b-4kovkybbke] { display: none; }
    .mwr-table tbody[b-4kovkybbke] { padding: 10px; }

    .mwr-row[b-4kovkybbke] {
        border: 1px solid #e6ebee; border-radius: 14px;
        margin-bottom: 10px; padding: 12px 14px 6px; position: relative;
    }
    .mwr-row:hover[b-4kovkybbke] { background: #fff; }
    .mwr-row-open[b-4kovkybbke] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pt-am, #10b981) 30%, transparent); }

    .mwr-row td[b-4kovkybbke] {
        padding: 5px 0; display: flex; align-items: center;
        justify-content: space-between; gap: 12px; border: none;
    }
    .mwr-row td[b-4kovkybbke]::before {
        content: attr(data-lbl); font-size: 11px; font-weight: 600;
        color: #94a3b8; text-transform: uppercase; letter-spacing: .3px;
        flex-shrink: 0;
    }
    .mwr-cell-title[b-4kovkybbke] {
        font-size: 15px; padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f4f6 !important;
    }
    .mwr-cell-title[b-4kovkybbke]::before { display: none; }
    .mwr-cell-title[b-4kovkybbke] { justify-content: flex-start !important; }
    .mwr-cell-exp[b-4kovkybbke] {
        position: absolute; top: 12px; right: 12px; padding: 0 !important;
    }
    .mwr-cell-exp[b-4kovkybbke]::before { display: none; }

    /* detail row spans full card */
    .mwr-detail-row[b-4kovkybbke] { display: block; }
    .mwr-detail-cell[b-4kovkybbke] { display: block; background: transparent; }
    .mwr-card-body[b-4kovkybbke] { padding: 0 0 4px; }

    .mwr-thumb[b-4kovkybbke] { width: 64px; height: 64px; }
    .mwr-img-thumb[b-4kovkybbke] { width: 58px; height: 58px; }

    /* Modal: stack vertically */
    .mwr-modal[b-4kovkybbke] { flex-direction: column; max-width: 460px; }
    .mwr-modal-art[b-4kovkybbke] {
        width: 100%; padding: 20px 16px;
        flex-direction: row; gap: 12px;
    }
    .mwr-modal-art-svg[b-4kovkybbke] { width: 80px; }
    .mwr-modal-art-caption[b-4kovkybbke] { text-align: left; font-size: 11px; }
}

@media (max-width: 480px) {
    .mwr-wrap[b-4kovkybbke] { padding: 16px 12px 24px; }
    .mwr-stats[b-4kovkybbke] { grid-template-columns: 1fr 1fr; }
    .mwr-modal-footer[b-4kovkybbke] { flex-direction: column; }
    .mwr-modal-footer .btn[b-4kovkybbke],
    .mwr-submit-btn[b-4kovkybbke] { width: 100%; }
}
/* _content/SeasonFlow.Web/Components/Pages/Schedule/ScheduleRegister.razor.rz.scp.css */
/* ── Porcelain Terminal — ScheduleRegister (portal-theme-aware) ── */
/* Background: set in layout.css via .content:has(.sr-page) (unscoped) */

/* ── Page wrapper ── */
/* .sr-page nằm TRONG .content (block, overflow-y:auto) — .content lo việc cuộn, .sr-page chỉ căn giữa. */
.sr-page[b-j556vr9xjy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 24px;
}

/* ── Main card ── */
.sr-card[b-j556vr9xjy] {
    background: rgba(255,255,255,.96);
    border-radius: 24px;
    width: 100%;
    max-width: 600px;
    border: 1px solid rgba(15,32,39,.08);
    box-shadow: 0 18px 48px rgba(15,32,39,.07);
    overflow: hidden;
}

/* ── Loading state ── */
.sr-page-loading[b-j556vr9xjy] {
    justify-content: center;
    gap: 12px;
    min-height: calc(100vh - 56px - 48px);
    padding: 24px 0;
}
.sr-spin-lg[b-j556vr9xjy] {
    font-size: 28px;
    color: var(--pt-am, #3b82f6);
}
.sr-loading-txt[b-j556vr9xjy] {
    font-size: 14px;
    color: #64748b;
}

/* ── Step bar ── */
.sr-header[b-j556vr9xjy] {
    padding: 22px 26px 18px;
    border-bottom: 1px solid rgba(15,32,39,.06);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--pt-am, #3b82f6) 5%, transparent), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.96), #f8faff);
}

.sr-stepbar[b-j556vr9xjy] {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.stepseg[b-j556vr9xjy] {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: rgba(15,32,39,.08);
    transition: background .25s;
}
.stepseg.dn[b-j556vr9xjy] {
    background: linear-gradient(90deg, var(--pt-a, #1d4ed8), var(--pt-am, #3b82f6));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--pt-a, #1d4ed8) 25%, transparent);
}

.sr-steplabels[b-j556vr9xjy] {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.sr-steplabel[b-j556vr9xjy] {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: color .2s;
}

.sr-title[b-j556vr9xjy] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sr-title i[b-j556vr9xjy] {
    color: var(--pt-am, #3b82f6);
}

/* ── Card body ── */
.sr-body[b-j556vr9xjy] {
    padding: 22px 26px;
}

/* ── Error alert ── */
.sr-error-alert[b-j556vr9xjy] {
    margin: 14px 26px 0;
}

/* ── Employee info box (self-view) ── */
.sr-emp-box[b-j556vr9xjy] {
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent), transparent 40%),
        linear-gradient(135deg, #fafbff, var(--pt-bg, #eff6ff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 14%, transparent);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow .15s;
}
.sr-emp-box:hover[b-j556vr9xjy] {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-am, #3b82f6) 12%, transparent);
}

.sr-emp-icon-wrap[b-j556vr9xjy] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pt-am, #3b82f6) 30%, #fff),
        color-mix(in srgb, var(--pt-am, #3b82f6) 45%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--pt-am, #3b82f6) 14%, transparent);
}
.sr-emp-icon[b-j556vr9xjy] {
    font-size: 20px;
    color: var(--pt-a, #1d4ed8);
}

.sr-emp-info[b-j556vr9xjy] {
    flex: 1;
    min-width: 0;
}
.sr-emp-name[b-j556vr9xjy] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.sr-emp-meta[b-j556vr9xjy] {
    font-size: 12px;
    color: var(--pt-a, #1d4ed8);
    font-weight: 600;
    font-family: var(--mono);
}

/* ── Employee search dropdown ── */
.sr-search-wrap[b-j556vr9xjy] {
    position: relative;
}
.sr-search-icon[b-j556vr9xjy] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--pt-am, #3b82f6) 55%, #fff);
    pointer-events: none;
    font-size: 16px;
}
.sr-search-input[b-j556vr9xjy] {
    padding-left: 36px;
    border-radius: 12px;
    border: 1px solid rgba(15,32,39,.10);
    transition: border-color .15s, box-shadow .15s;
}
.sr-search-input:focus[b-j556vr9xjy] {
    border-color: color-mix(in srgb, var(--pt-am, #3b82f6) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent);
}

.sr-dropdown[b-j556vr9xjy] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,32,39,.10);
    border-radius: 14px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 12px 32px rgba(15,32,39,.12);
    margin-top: 4px;
    padding: 4px;
}
.sr-dropdown-item[b-j556vr9xjy] {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 10px;
    transition: background .12s;
}
.sr-dropdown-item:hover[b-j556vr9xjy] {
    background: color-mix(in srgb, var(--pt-am, #3b82f6) 7%, transparent);
}
.sr-dropdown-item-name[b-j556vr9xjy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.sr-dropdown-item-meta[b-j556vr9xjy] {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.sr-dropdown-empty[b-j556vr9xjy] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,32,39,.10);
    border-radius: 14px;
    padding: 14px 16px;
    z-index: 200;
    font-size: 13px;
    color: #94a3b8;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(15,32,39,.10);
}

/* ── Week picker ── */
.sr-week-row[b-j556vr9xjy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid rgba(15,32,39,.10);
    border-radius: 16px;
    padding: 6px 12px;
    box-shadow: 0 4px 12px rgba(15,32,39,.05);
}
.sr-week-row .btn[b-j556vr9xjy] {
    border: none;
    background: none;
    color: #64748b;
    border-radius: 10px;
    padding: 6px 10px;
    transition: background .12s, color .12s;
}
.sr-week-row .btn:hover[b-j556vr9xjy] {
    background: color-mix(in srgb, var(--pt-am, #3b82f6) 8%, transparent);
    color: var(--pt-a, #1d4ed8);
}
.sr-week-label[b-j556vr9xjy] {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.sr-week-cal-icon[b-j556vr9xjy] {
    color: var(--pt-am, #3b82f6);
    font-size: 15px;
}

/* ── Full-width button (step 1 next) ── */
.sr-full-btn[b-j556vr9xjy] {
    display: flex;
    width: 100%;
    margin-top: 8px;
    justify-content: center;
    padding: 12px;
    background: linear-gradient(135deg, var(--pt-a, #1d4ed8), var(--pt-am, #3b82f6)) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-a, #1d4ed8) 25%, transparent);
    transition: box-shadow .15s, background .15s;
}
.sr-full-btn:hover:not(:disabled)[b-j556vr9xjy] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pt-a, #1d4ed8) 88%, #000), var(--pt-a, #1d4ed8)) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pt-a, #1d4ed8) 32%, transparent);
}
.sr-full-btn:disabled[b-j556vr9xjy] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Step 2: Day rows ── */
.day-row[b-j556vr9xjy] {
    padding: 14px 0;
    border-bottom: 1px solid rgba(15,32,39,.06);
}
.day-row:last-child[b-j556vr9xjy] {
    border-bottom: none;
}

.sr-day-label[b-j556vr9xjy] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sr-day-date[b-j556vr9xjy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--pt-am, #3b82f6);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.sr-no-slots[b-j556vr9xjy] {
    font-size: 12px;
    color: #b0bec5;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

/* ── Slot pills ── */
.sr-slots-wrap[b-j556vr9xjy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.slot-pill[b-j556vr9xjy] {
    --pill-accent: var(--pt-am, #3b82f6);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--pill-accent) 18%, transparent);
    cursor: pointer;
    font-size: 12px;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
    background: color-mix(in srgb, var(--pill-accent) 6%, #fff);
}
.slot-pill:hover:not(:disabled)[b-j556vr9xjy] {
    border-color: color-mix(in srgb, var(--pill-accent) 40%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pill-accent) 12%, transparent);
    transform: translateY(-1px);
}
.slot-pill.on[b-j556vr9xjy] {
    border-width: 1.5px;
    background: color-mix(in srgb, var(--pill-accent) 14%, #fff);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pill-accent) 18%, transparent);
}
.slot-pill .sp-name[b-j556vr9xjy] {
    font-weight: 700;
    color: var(--ink);
}
.slot-pill.on .sp-name[b-j556vr9xjy] {
    color: var(--pill-accent);
}
.slot-pill .sp-time[b-j556vr9xjy] {
    font-size: 10px;
    color: #64748b;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.sr-conflict-note[b-j556vr9xjy] {
    color: #ef4444 !important;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font) !important;
}

/* ── Tiền công trọn ca của ô ca ──────────────────────────────
   Bám accent của trang (theo portal theme picker) để không lạc màu:
   spec portal cấm trộn 2 accent khác họ trên cùng một trang. */
.slot-pill .sp-pay[b-j556vr9xjy] {
    margin-top: 1px;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pt-a, #1d4ed8);
}
.slot-pill:disabled .sp-pay[b-j556vr9xjy] { color: #94a3b8; }

/* ── Info text ── */
.sr-info-text[b-j556vr9xjy] {
    font-size: 12px;
}

/* ── Summary bar ── */
.sr-summary-bar[b-j556vr9xjy] {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 8%, transparent), transparent 40%),
        linear-gradient(135deg, var(--pt-bg, #eff6ff), color-mix(in srgb, var(--pt-bg, #eff6ff) 80%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 12%, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sr-summary-pay[b-j556vr9xjy] {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}
.sr-summary-pay strong[b-j556vr9xjy] {
    color: var(--pt-a, #1d4ed8);
    font-size: 14px;
    margin-left: 4px;
}

.sr-summary-count[b-j556vr9xjy] {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}
.sr-summary-count strong[b-j556vr9xjy] {
    color: var(--pt-a, #1d4ed8);
    font-size: 15px;
    font-weight: 800;
}

/* ── Nav buttons (step 2/3) ── */
.sr-nav[b-j556vr9xjy] {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.sr-nav-btn[b-j556vr9xjy] {
    flex: 1;
    justify-content: center;
    border-radius: 12px;
    font-weight: 700;
    padding: 10px;
}
.sr-nav .btn.bd[b-j556vr9xjy] {
    background: linear-gradient(135deg, var(--pt-a, #1d4ed8), var(--pt-am, #3b82f6)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-a, #1d4ed8) 25%, transparent);
}
.sr-nav .btn.bd:hover:not(:disabled)[b-j556vr9xjy] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pt-a, #1d4ed8) 88%, #000), var(--pt-a, #1d4ed8)) !important;
}
.sr-nav .btn.bd:disabled[b-j556vr9xjy] {
    opacity: .45;
}

/* ── Step 3: Confirmation ── */
.sr-confirm[b-j556vr9xjy] {
    margin-bottom: 16px;
}
.sr-confirm-heading[b-j556vr9xjy] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sr-confirm-heading i[b-j556vr9xjy] {
    color: var(--pt-am, #3b82f6);
}
.sr-confirm-summary[b-j556vr9xjy] {
    background:
        radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 8%, transparent), transparent 40%),
        linear-gradient(135deg, var(--pt-bg, #eff6ff), color-mix(in srgb, var(--pt-bg, #eff6ff) 80%, #fff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 14%, transparent);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sr-confirm-summary i[b-j556vr9xjy] {
    color: var(--pt-am, #3b82f6);
}
.sr-confirm-summary strong[b-j556vr9xjy] {
    color: var(--pt-a, #1d4ed8);
}

/* tiền của từng ca ở bước xác nhận — đẩy sát phải, không bị chữ dài ép xuống dòng */
.sr-slot-pay[b-j556vr9xjy] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-a, #1d4ed8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* tổng dự kiến của cả đợt đăng ký */
.sr-confirm-total[b-j556vr9xjy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pt-bg, #eff6ff), #fff);
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 22%, transparent);
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}
.sr-confirm-total strong[b-j556vr9xjy] {
    font-size: 18px;
    font-weight: 800;
    color: var(--pt-a, #1d4ed8);
    font-variant-numeric: tabular-nums;
}

.sr-slot-row[b-j556vr9xjy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background:
        radial-gradient(circle at 2% 50%, color-mix(in srgb, var(--pt-am, #3b82f6) 5%, transparent), transparent 40%),
        linear-gradient(135deg, #fafbff, var(--pt-bg, #eff6ff));
    border: 1px solid color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent);
    border-radius: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    transition: box-shadow .12s, transform .12s;
}
.sr-slot-row:hover[b-j556vr9xjy] {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent);
    transform: translateX(2px);
}
.sr-slot-dot[b-j556vr9xjy] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.sr-slot-label[b-j556vr9xjy] {
    flex: 1;
    color: var(--ink);
}
.sr-slot-label strong[b-j556vr9xjy] {
    font-weight: 700;
}
.sr-slot-row .meta[b-j556vr9xjy] {
    font-size: 12px;
    color: var(--pt-a, #1d4ed8);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Submit row ── */
.sr-submit-row[b-j556vr9xjy] {
    display: flex;
    gap: 10px;
}
.sr-submit-btn[b-j556vr9xjy] {
    flex: 2;
    justify-content: center;
    border-radius: 12px;
    font-weight: 700;
    padding: 12px;
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.25);
    transition: background .15s, box-shadow .15s;
}
.sr-submit-btn:hover:not(:disabled)[b-j556vr9xjy] {
    background: linear-gradient(135deg, #047857, #059669) !important;
    box-shadow: 0 6px 18px rgba(16,185,129,.32);
}
.sr-submit-btn:disabled[b-j556vr9xjy] {
    opacity: .5;
}
.sr-submit-row .sr-nav-btn[b-j556vr9xjy] {
    border-radius: 12px;
}

/* ── Card footer ── */
.sr-footer[b-j556vr9xjy] {
    padding: 10px 26px;
    border-top: 1px solid rgba(15,32,39,.06);
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    background: rgba(248,250,252,.5);
}

/* ── Success screen ── */
.sr-success[b-j556vr9xjy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    max-width: 420px;
    padding: 20px;
}
.sr-success-icon[b-j556vr9xjy] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid rgba(16,185,129,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(16,185,129,.18);
}
.sr-success-icon i[b-j556vr9xjy] {
    font-size: 28px;
    color: #059669;
}
.sr-success-title[b-j556vr9xjy] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
}
.sr-success-desc[b-j556vr9xjy] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}
.sr-success-btn[b-j556vr9xjy] {
    margin-top: 6px;
    background: linear-gradient(135deg, var(--pt-a, #1d4ed8), var(--pt-am, #3b82f6)) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 700;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pt-a, #1d4ed8) 25%, transparent);
}
.sr-success-btn:hover[b-j556vr9xjy] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pt-a, #1d4ed8) 88%, #000), var(--pt-a, #1d4ed8)) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pt-a, #1d4ed8) 32%, transparent);
}

/* ── Success illustration ── */
.sr-success-art[b-j556vr9xjy] {
    width: 140px;
    height: 120px;
    margin-bottom: 4px;
}

.sr-emp-meta-sm[b-j556vr9xjy] {
    font-size: 12px;
}

/* ── Notes textarea ── */
.sr-body textarea[b-j556vr9xjy] {
    border-radius: 12px;
    border: 1px solid rgba(15,32,39,.10);
    transition: border-color .15s, box-shadow .15s;
}
.sr-body textarea:focus[b-j556vr9xjy] {
    border-color: color-mix(in srgb, var(--pt-am, #3b82f6) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-am, #3b82f6) 10%, transparent);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .sr-page[b-j556vr9xjy] {
        padding: 4px 0 16px;
    }
    .sr-page-loading[b-j556vr9xjy] {
        min-height: calc(100vh - 52px - 82px - 28px);
    }
    .sr-card[b-j556vr9xjy] {
        border-radius: 18px;
    }
    .sr-header[b-j556vr9xjy] {
        padding: 18px 20px 14px;
    }
    .sr-steplabels[b-j556vr9xjy] {
        display: none;
    }
    .sr-title[b-j556vr9xjy] {
        font-size: 16px;
    }
    .sr-body[b-j556vr9xjy] {
        padding: 18px 20px;
    }
    .sr-week-row[b-j556vr9xjy] {
        padding: 4px 8px;
    }
    .sr-week-row .btn[b-j556vr9xjy] {
        min-height: unset;
        width: 34px;
        padding: 0;
        justify-content: center;
        flex-shrink: 0;
    }
    .sr-week-label[b-j556vr9xjy] {
        font-size: 12px;
    }
    .sr-full-btn[b-j556vr9xjy] {
        min-height: 48px;
    }
    .sr-nav-btn[b-j556vr9xjy] {
        justify-content: center;
    }
    .sr-submit-row .btn[b-j556vr9xjy] {
        justify-content: center;
    }
    .sr-slot-row[b-j556vr9xjy] {
        display: grid;
        grid-template-columns: 16px 1fr;
        column-gap: 10px;
        row-gap: 4px;
        align-items: start;
    }
    .sr-slot-dot[b-j556vr9xjy] {
        grid-row: 1 / 3;
        align-self: center;
    }
    .sr-slot-label[b-j556vr9xjy] {
        min-width: 0;
    }
    .sr-slot-row .meta[b-j556vr9xjy] {
        font-size: 11px;
        color: #64748b;
    }
    .sr-footer[b-j556vr9xjy] {
        padding: 8px 20px;
    }
    .sr-error-alert[b-j556vr9xjy] {
        margin: 12px 20px 0;
    }
    .sr-success-art[b-j556vr9xjy] {
        width: 110px;
        height: 95px;
    }
}

/* ── Deposit confirmation block (step 3) ── */
.sr-deposit-box[b-j556vr9xjy] {
    margin-top: 14px; border: 1px solid rgba(5,150,105,.22); border-radius: 14px;
    background: radial-gradient(circle at 4% 0%, rgba(16,185,129,.10), transparent 42%), linear-gradient(135deg, #ffffff, #f0fdf7);
    padding: 12px 14px;
}
.sr-deposit-head[b-j556vr9xjy] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #047857; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sr-deposit-row[b-j556vr9xjy] { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13px; color: #334155; border-bottom: 1px dashed rgba(5,150,105,.14); }
.sr-deposit-label[b-j556vr9xjy] { min-width: 0; }
.sr-deposit-amt[b-j556vr9xjy] { color: #047857; font-weight: 600; }
.sr-deposit-total[b-j556vr9xjy] { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 14px; color: #0f3d2e; }
.sr-deposit-total strong[b-j556vr9xjy] { color: #047857; font-size: 17px; font-weight: 800; }
.sr-deposit-note-inline[b-j556vr9xjy] { margin-top: 8px; font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.sr-deposit-note-total[b-j556vr9xjy] { margin-top: 6px; font-size: 13px; }
/* _content/SeasonFlow.Web/Components/Pages/Schedule/ScheduleRequests.razor.rz.scp.css */
/* ══ Yêu cầu lịch tuần — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (duyệt) · amber #B45309 (chờ) · đỏ #A32D2D chỉ chữ.
   Không gradient, không card lồng card, mỗi khối 1 điểm đậm 700. ══ */

.sq-wrap[b-6dn0311rsb] {
    --sq-ink: #293640;
    --sq-muted: #6b7a85;
    --sq-border: #e2e7ea;
    --sq-hair: #eef1f3;
    --sq-emerald: #05835f;
    --sq-amber: #b45309;
    --sq-red: #a32d2d;
    --sq-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--sq-ink);
}

/* ── Page header ── */
.sq-head[b-6dn0311rsb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.sq-title[b-6dn0311rsb] {
    font-size: 26px;
    font-weight: 700;
    color: var(--sq-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.sq-sub[b-6dn0311rsb] { font-size: 13px; color: var(--sq-muted); margin-top: 4px; }

/* ── KPI cards (clickable = filter) ── */
.sq-kpis[b-6dn0311rsb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.sq-kpi[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: 12px;
    box-shadow: var(--sq-shadow);
    padding: 14px 16px;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    transition: border-color .12s, box-shadow .12s;
}
.sq-kpi:hover[b-6dn0311rsb] { border-color: #c8d1d6; }
.sq-kpi.on[b-6dn0311rsb] { border-color: var(--sq-ink); box-shadow: inset 0 0 0 1px var(--sq-ink), var(--sq-shadow); }
.sq-kpi--am.on[b-6dn0311rsb] { border-color: var(--sq-amber); box-shadow: inset 0 0 0 1px var(--sq-amber), var(--sq-shadow); }
.sq-kpi--em.on[b-6dn0311rsb] { border-color: var(--sq-emerald); box-shadow: inset 0 0 0 1px var(--sq-emerald), var(--sq-shadow); }
.sq-kpi--rd.on[b-6dn0311rsb] { border-color: var(--sq-red); box-shadow: inset 0 0 0 1px var(--sq-red), var(--sq-shadow); }

.sq-kpi-ico[b-6dn0311rsb] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.sq-kpi-ico--gr[b-6dn0311rsb] { background: #f1f4f6; color: var(--sq-ink); }
.sq-kpi-ico--am[b-6dn0311rsb] { background: #fdf3e2; color: var(--sq-amber); }
.sq-kpi-ico--em[b-6dn0311rsb] { background: #e7f3ee; color: var(--sq-emerald); }
.sq-kpi-ico--rd[b-6dn0311rsb] { background: #f9eceb; color: var(--sq-red); }

.sq-kpi-txt[b-6dn0311rsb] { display: flex; flex-direction: column; min-width: 0; }
.sq-kpi-lbl[b-6dn0311rsb] { font-size: 11.5px; color: var(--sq-muted); white-space: nowrap; }
.sq-kpi-val[b-6dn0311rsb] {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sq-ink);
    line-height: 1.15;
}
.sq-kpi-val--em[b-6dn0311rsb] { color: var(--sq-emerald); }
.sq-kpi-val--am[b-6dn0311rsb] { color: var(--sq-amber); }
.sq-kpi-val--rd[b-6dn0311rsb] { color: var(--sq-red); }

/* ── Tabs + search bar ── */
.sq-tabsbar[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sq-border);
}
.sq-tabs[b-6dn0311rsb] { display: flex; gap: 2px; }
.sq-tab[b-6dn0311rsb] {
    padding: 9px 14px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--sq-muted);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color .1s, border-color .1s;
}
.sq-tab:hover[b-6dn0311rsb] { color: var(--sq-ink); }
.sq-tab.on[b-6dn0311rsb] {
    color: var(--sq-emerald);
    border-bottom-color: var(--sq-emerald);
    font-weight: 600;
}

.sq-tools[b-6dn0311rsb] { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.sq-search-wrap[b-6dn0311rsb] { position: relative; min-width: 210px; }
.sq-search-icon[b-6dn0311rsb] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sq-muted);
    pointer-events: none;
    font-size: 15px;
}
.sq-search-input[b-6dn0311rsb] {
    width: 100%;
    padding-left: 34px;
    border: 1px solid var(--sq-border);
    border-radius: 9px;
    background: #fff;
}
.sq-search-input:focus[b-6dn0311rsb] { border-color: var(--sq-ink); }
.sq-tbtn[b-6dn0311rsb] { border-color: var(--sq-border); }

/* ── Master-detail columns ── */
.sq-cols[b-6dn0311rsb] {
    display: grid;
    grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
    gap: 16px;
    align-items: start;
}

/* ── LEFT: ledger ── */
.sq-ledger[b-6dn0311rsb] {
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: 12px;
    box-shadow: var(--sq-shadow);
    overflow: hidden;
}
.sq-ledger-hd[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--sq-border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--sq-ink);
}
.sq-ledger-meta[b-6dn0311rsb] {
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--sq-muted);
    font-variant-numeric: tabular-nums;
}

/* List rows */
.sq-list[b-6dn0311rsb] { min-height: 120px; }
.sq-row[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sq-hair);
    cursor: pointer;
    transition: background .1s;
}
.sq-row:hover[b-6dn0311rsb] { background: #f7f9fa; }
.sq-row.sel[b-6dn0311rsb] {
    background: #f2f7f5;
    box-shadow: inset 3px 0 0 var(--sq-emerald);
}
.sq-row-txt[b-6dn0311rsb] { min-width: 0; flex: 1; }
.sq-row-name[b-6dn0311rsb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sq-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sq-row-meta[b-6dn0311rsb] {
    font-size: 12px;
    color: var(--sq-muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Initials avatar — tints from the closed admin palette */
.sq-ava[b-6dn0311rsb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    flex-shrink: 0;
    font-variant-numeric: normal;
}
.sq-ava--0[b-6dn0311rsb] { background: #e7f3ee; color: var(--sq-emerald); }
.sq-ava--1[b-6dn0311rsb] { background: #fdf3e2; color: var(--sq-amber); }
.sq-ava--2[b-6dn0311rsb] { background: #f1f4f6; color: var(--sq-ink); }
.sq-ava--3[b-6dn0311rsb] { background: #fbf8f1; color: #a16207; }
.sq-ava--lg[b-6dn0311rsb] { width: 46px; height: 46px; font-size: 15px; }

/* ID chip */
.sq-id[b-6dn0311rsb] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--sq-border);
    color: var(--sq-ink);
    font-weight: 500;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status pill */
.sq-pill[b-6dn0311rsb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.sq-pill-dot[b-6dn0311rsb] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sq-pill--em[b-6dn0311rsb] { background: #e7f3ee; color: var(--sq-emerald); }
.sq-pill--am[b-6dn0311rsb] { background: #fdf3e2; color: var(--sq-amber); }
.sq-pill--rd[b-6dn0311rsb] { background: #f9eceb; color: var(--sq-red); }
.sq-pill--gr[b-6dn0311rsb] { background: #eef1f3; color: var(--sq-muted); }

/* Empty */
.sq-empty[b-6dn0311rsb] { padding: 40px 16px; text-align: center; color: var(--sq-muted); font-size: 13px; }
.sq-empty i[b-6dn0311rsb] { font-size: 26px; display: block; margin-bottom: 8px; color: #b6c0c7; }
.sq-empty p[b-6dn0311rsb] { margin: 0; }

/* Footer */
.sq-foot[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--sq-border);
    font-size: 12.5px;
    color: var(--sq-muted);
    font-variant-numeric: tabular-nums;
}

/* ── RIGHT: dossier ── */
.sq-dossier[b-6dn0311rsb] {
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: 12px;
    box-shadow: var(--sq-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}
.sq-dossier--empty[b-6dn0311rsb] {
    align-items: center;
    justify-content: center;
    min-height: 260px;
    color: var(--sq-muted);
    font-size: 13px;
}
.sq-dossier--empty i[b-6dn0311rsb] { font-size: 30px; color: #b6c0c7; }
.sq-dossier--empty p[b-6dn0311rsb] { margin: 0; }

.sq-dos-head[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sq-dos-txt[b-6dn0311rsb] { min-width: 0; }
.sq-dos-name[b-6dn0311rsb] {
    font-size: 17px;
    font-weight: 700;
    color: var(--sq-ink);
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sq-dos-meta[b-6dn0311rsb] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--sq-muted);
    margin-top: 5px;
}
.sq-dos-contact[b-6dn0311rsb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.sq-dos-contact i[b-6dn0311rsb] { font-size: 14px; color: #93a1ab; }

/* Section */
.sq-section[b-6dn0311rsb] {
    border: 1px solid var(--sq-border);
    border-radius: 10px;
    overflow: hidden;
}
.sq-section-hd[b-6dn0311rsb] {
    padding: 9px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--sq-border);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--sq-ink);
}

/* Info grid (2 columns) */
.sq-info-grid[b-6dn0311rsb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.sq-ig[b-6dn0311rsb] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--sq-hair);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.sq-ig:nth-child(odd)[b-6dn0311rsb] { border-right: 1px solid var(--sq-hair); }
.sq-ig--full[b-6dn0311rsb] { grid-column: 1 / -1; border-right: none !important; }
.sq-info-grid .sq-ig:nth-last-child(-n+2):not(.sq-ig--full)[b-6dn0311rsb] { border-bottom: none; }
.sq-info-grid .sq-ig--full:last-child[b-6dn0311rsb] { border-bottom: none; }
.sq-ik[b-6dn0311rsb] { font-size: 11.5px; color: var(--sq-muted); }
.sq-iv[b-6dn0311rsb] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sq-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.sq-iv--strong[b-6dn0311rsb] { font-weight: 600; }

/* Slots ledger table */
.sq-table-scroll[b-6dn0311rsb] { overflow-x: auto; }
.sq-table[b-6dn0311rsb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sq-table th[b-6dn0311rsb] {
    padding: 8px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--sq-border);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--sq-muted);
    text-align: left;
    white-space: nowrap;
}
.sq-table td[b-6dn0311rsb] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sq-hair);
    vertical-align: middle;
}
.sq-table tr:last-child td[b-6dn0311rsb] { border-bottom: none; }
.sq-table tbody tr:hover[b-6dn0311rsb] { background: #f7f9fa; }
.sq-td-date[b-6dn0311rsb] { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq-td-time[b-6dn0311rsb] { color: var(--sq-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq-slot-empty[b-6dn0311rsb] { padding: 14px; font-size: 13px; color: var(--sq-muted); }

/* Review result box (approved / rejected) */
.sq-review[b-6dn0311rsb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 10px;
    padding: 13px 15px;
    border: 1px solid;
}
.sq-review--em[b-6dn0311rsb] { background: #e7f3ee; border-color: #cbe5da; }
.sq-review--rd[b-6dn0311rsb] { background: #f9eceb; border-color: #eed4d2; }
.sq-review-ico[b-6dn0311rsb] { font-size: 21px; flex-shrink: 0; margin-top: 1px; }
.sq-review--em .sq-review-ico[b-6dn0311rsb] { color: var(--sq-emerald); }
.sq-review--rd .sq-review-ico[b-6dn0311rsb] { color: var(--sq-red); }
.sq-review-txt[b-6dn0311rsb] { min-width: 0; }
.sq-review-lbl[b-6dn0311rsb] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--sq-muted);
}
.sq-review-val[b-6dn0311rsb] {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.sq-review--em .sq-review-val[b-6dn0311rsb] { color: var(--sq-emerald); }
.sq-review--rd .sq-review-val[b-6dn0311rsb] { color: var(--sq-red); }
.sq-review-by[b-6dn0311rsb] { font-size: 12.5px; color: var(--sq-muted); margin-top: 2px; }
.sq-review-by span[b-6dn0311rsb] { color: var(--sq-ink); font-weight: 500; }

/* Reject reason box */
.sq-reject-box[b-6dn0311rsb] {
    border: 1px solid #eed4d2;
    background: #fdf8f8;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sq-reject-lbl[b-6dn0311rsb] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--sq-red);
}
.sq-reject-input[b-6dn0311rsb] {
    width: 100%;
    border: 1px solid var(--sq-border);
    border-radius: 9px;
    background: #fff;
    padding: 8px 11px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--sq-ink);
    resize: vertical;
}
.sq-reject-input:focus[b-6dn0311rsb] { border-color: var(--sq-red); outline: none; }
.sq-btn-danger-solid[b-6dn0311rsb] {
    background: #f9eceb;
    border: 1px solid #e8c9c7;
    color: var(--sq-red);
    font-weight: 600;
}
.sq-btn-danger-solid:hover[b-6dn0311rsb] { background: #f3dedc; border-color: #dfb3b0; color: var(--sq-red); }
.sq-btn-danger-solid:disabled[b-6dn0311rsb] { opacity: .6; }

/* Actions: MỘT nút primary emerald (Duyệt), Từ chối = chữ đỏ nền trắng */
.sq-actions[b-6dn0311rsb] { display: flex; gap: 8px; }
.sq-flex1[b-6dn0311rsb] { flex: 1; }
.sq-flex2[b-6dn0311rsb] { flex: 2; }
.sq-btn-primary[b-6dn0311rsb] {
    background: var(--sq-emerald);
    border: 1px solid var(--sq-emerald);
    color: #fff;
    font-weight: 600;
}
.sq-btn-primary:hover[b-6dn0311rsb] { background: #046b4e; border-color: #046b4e; color: #fff; }
.sq-btn-primary:disabled[b-6dn0311rsb] { opacity: .6; }
.sq-btn-danger[b-6dn0311rsb] { border-color: var(--sq-border); color: var(--sq-red); }
.sq-btn-danger:hover[b-6dn0311rsb] { background: #f9eceb; border-color: #e8c9c7; color: var(--sq-red); }

/* ── Tablet / Mobile PWA ── */
@media (max-width: 1100px) {
    .sq-cols[b-6dn0311rsb] { grid-template-columns: 1fr; }
    .sq-dossier[b-6dn0311rsb] { position: static; }
}

@media (max-width: 768px) {
    .sq-wrap[b-6dn0311rsb] { gap: 12px; }
    .sq-title[b-6dn0311rsb] { font-size: 22px; }

    .sq-kpis[b-6dn0311rsb] { grid-template-columns: 1fr 1fr; }
    .sq-kpi[b-6dn0311rsb] { padding: 12px 14px; }

    .sq-tabsbar[b-6dn0311rsb] { flex-direction: column; align-items: stretch; }
    .sq-tabs[b-6dn0311rsb] { overflow-x: auto; }
    .sq-tools[b-6dn0311rsb] { padding-bottom: 10px; }
    .sq-search-wrap[b-6dn0311rsb] { flex: 1; min-width: 0; }

    .sq-row[b-6dn0311rsb] { flex-wrap: wrap; }
    .sq-row-meta[b-6dn0311rsb] { white-space: normal; }

    .sq-dossier[b-6dn0311rsb] { padding: 14px; }
    .sq-info-grid[b-6dn0311rsb] { grid-template-columns: 1fr; }
    .sq-ig:nth-child(odd)[b-6dn0311rsb] { border-right: none; }
    .sq-info-grid .sq-ig:nth-last-child(-n+2):not(.sq-ig--full)[b-6dn0311rsb] { border-bottom: 1px solid var(--sq-hair); }
    .sq-info-grid .sq-ig:last-child[b-6dn0311rsb] { border-bottom: none; }
}
/* _content/SeasonFlow.Web/Components/Pages/Schedule/ShiftSchedule.razor.rz.scp.css */
/* ══ Lịch ca tuần — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (đủ người/tích cực) · amber #B45309 (thiếu/cảnh báo)
   · champagne #A16207 chỉ cho dữ liệu tiền (chưa chi). Không gradient, mỗi khối 1 điểm đậm 700. ══ */

/* Token phải khai cho CẢ .modal-bg: các modal của trang được render NGOÀI .ss-wrap
   (xem @if (_showCfgModal) trong .razor), nên nếu chỉ khai trên .ss-wrap thì mọi
   var(--ss-*) bên trong modal đều invalid — nút primary mất nền emerald thành trong
   suốt (chữ #fff trên nền trắng = vô hình), input mất luôn viền. */
.ss-wrap[b-iqre8phugj],
.modal-bg[b-iqre8phugj] {
    --ss-ink: #293640;
    --ss-muted: #6b7a85;
    --ss-border: #e2e7ea;
    --ss-hair: #eef1f3;
    --ss-emerald: #05835f;
    --ss-amber: #b45309;
    --ss-red: #a32d2d;
    --ss-champagne: #a16207;
    --ss-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
}

.ss-wrap[b-iqre8phugj] {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--ss-ink);
}

/* ── Page header ── */
.ss-head[b-iqre8phugj] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.ss-title[b-iqre8phugj] {
    font-size: 26px;
    font-weight: 700;
    color: var(--ss-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.ss-sub[b-iqre8phugj] {
    font-size: 13px;
    color: var(--ss-muted);
    margin-top: 4px;
}

/* KPI strip */
.ss-kpis[b-iqre8phugj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ss-kpi[b-iqre8phugj] {
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    box-shadow: var(--ss-shadow);
    padding: 10px 16px;
    min-width: 112px;
}
.ss-kpi-lbl[b-iqre8phugj] {
    font-size: 11.5px;
    color: var(--ss-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}
.ss-kpi-val[b-iqre8phugj] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ss-ink);
    line-height: 1.1;
}
.ss-kpi-val--em[b-iqre8phugj] { color: var(--ss-emerald); }
.ss-kpi-val--am[b-iqre8phugj] { color: var(--ss-amber); }
.ss-kpi-val--rd[b-iqre8phugj] { color: var(--ss-red); }

/* ── Master-detail columns ── */
.ss-cols[b-iqre8phugj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.ss-cols--open[b-iqre8phugj] { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }

/* ── LEFT: week grid ledger ── */
.ss-ledger[b-iqre8phugj] {
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    box-shadow: var(--ss-shadow);
    overflow: hidden;
}

.ss-toolbar[b-iqre8phugj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ss-border);
}
.ss-spacer[b-iqre8phugj] { flex: 1; }

/* Week picker: nhóm trắng viền nhạt, nhãn mono */
.ss-week[b-iqre8phugj] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ss-border);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}
.ss-week-btn[b-iqre8phugj] {
    border: none;
    background: transparent;
    padding: 6px 12px;
    font-size: 16px;
    color: var(--ss-muted);
    cursor: pointer;
    line-height: 1;
    transition: background .1s, color .1s;
}
.ss-week-btn:hover[b-iqre8phugj] { background: #f7f9fa; color: var(--ss-ink); }
.ss-week-lbl[b-iqre8phugj] {
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border-left: 1px solid var(--ss-hair);
    border-right: 1px solid var(--ss-hair);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

.ss-tbtn[b-iqre8phugj] { border-color: var(--ss-border); }

/* Nút chính: emerald — MỘT nút primary duy nhất trên màn hình */
.ss-btn-primary[b-iqre8phugj] {
    background: var(--ss-emerald);
    border: 1px solid var(--ss-emerald);
    color: #fff;
    font-weight: 600;
}
.ss-btn-primary:hover[b-iqre8phugj] { background: #046b4e; border-color: #046b4e; color: #fff; }
.ss-btn-primary:disabled[b-iqre8phugj] { opacity: .6; }

/* ── Week grid table ── */
.ss-tw[b-iqre8phugj] { overflow-x: auto; }
.ss-table[b-iqre8phugj] {
    table-layout: fixed;
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
.ss-table thead tr[b-iqre8phugj] { background: #fafbfc; }
.ss-table th[b-iqre8phugj] {
    padding: 9px 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ss-muted);
    border-bottom: 1px solid var(--ss-border);
    white-space: nowrap;
}
.ss-th-dept[b-iqre8phugj] { width: 128px; text-align: left; padding-left: 16px; }
.ss-th-day[b-iqre8phugj] { text-align: center; }
.ss-th-day-name[b-iqre8phugj] { font-weight: 600; }
.ss-th-day-date[b-iqre8phugj] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ss-muted);
    font-variant-numeric: tabular-nums;
}
.ss-th-day--today .ss-th-day-name[b-iqre8phugj],
.ss-th-day--today .ss-th-day-date[b-iqre8phugj] { color: var(--ss-emerald); }

/* Dept header row */
.ss-dept-row td[b-iqre8phugj] {
    padding: 8px 12px 5px 16px;
    background: #fafbfc;
    border-top: 1px solid var(--ss-hair);
    border-bottom: 1px solid var(--ss-hair);
}
.ss-dept-hd[b-iqre8phugj] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ss-ink);
}
.ss-dept-dot[b-iqre8phugj] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Shift name column */
.ss-shift-cell[b-iqre8phugj] {
    padding: 4px 8px 4px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 12.5px;
    color: var(--ss-muted);
}

/* Attendance cells */
.ss-att-cell[b-iqre8phugj] { padding: 4px; }
.ss-cell[b-iqre8phugj] {
    border-radius: 8px;
    padding: 5px 4px;
    text-align: center;
    min-height: 44px;
    border: 1px solid transparent;
    transition: background .1s, border-color .1s;
}
.ss-cell-num[b-iqre8phugj] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.ss-cell-max[b-iqre8phugj] { font-size: 11px; font-weight: 400; opacity: .65; }
.ss-cell-sub[b-iqre8phugj] { font-size: 9.5px; color: var(--ss-muted); margin-top: 1px; }
.ss-cell-short[b-iqre8phugj] { font-size: 10px; font-weight: 600; color: var(--ss-amber); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* trạng thái ô: đủ người = emerald nhạt · thiếu = amber nhạt · chỉ có cấu hình = xám · chọn = nền chọn + viền emerald */
.ss-cell--ok[b-iqre8phugj]    { background: #e7f3ee; border-color: #cfe6dc; cursor: pointer; }
.ss-cell--ok    .ss-cell-num[b-iqre8phugj] { color: var(--ss-emerald); }
.ss-cell--short[b-iqre8phugj] { background: #fdf3e2; border-color: #f2dfbc; cursor: pointer; }
.ss-cell--short .ss-cell-num[b-iqre8phugj] { color: var(--ss-amber); }
.ss-cell--cfg[b-iqre8phugj]   { background: #fafbfc; border-color: var(--ss-hair); cursor: pointer; }
.ss-cell--cfg   .ss-cell-num[b-iqre8phugj] { color: var(--ss-muted); }
.ss-cell--sel[b-iqre8phugj]   { background: #f2f7f5; border: 1.5px solid var(--ss-emerald); cursor: pointer; }
.ss-cell--sel   .ss-cell-num[b-iqre8phugj] { color: var(--ss-ink); }
.ss-cell--ok:hover[b-iqre8phugj], .ss-cell--short:hover[b-iqre8phugj], .ss-cell--cfg:hover[b-iqre8phugj] { border-color: var(--ss-muted); }
.ss-cell--none[b-iqre8phugj] {
    color: #c3ccd2;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* ── RIGHT: dossier ── */
.ss-dossier[b-iqre8phugj] {
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    box-shadow: var(--ss-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}

.ss-dos-head[b-iqre8phugj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.ss-dos-txt[b-iqre8phugj] { min-width: 0; }
.ss-dos-dept[b-iqre8phugj] { display: flex; align-items: center; gap: 7px; }
.ss-dos-name[b-iqre8phugj] {
    font-size: 17px;
    font-weight: 700;
    color: var(--ss-ink);
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-dos-shift[b-iqre8phugj] { font-size: 13px; font-weight: 500; color: var(--ss-ink); margin-top: 3px; }
.ss-dos-meta[b-iqre8phugj] { font-size: 12px; color: var(--ss-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* 3 KPI nhỏ trong dossier — trắng viền nhạt, riêng "chưa chi" nền cream champagne */
/* 4 ô (Đã nhận / Check-in / Đi muộn / Chưa chi) xếp 2×2 — cột dossier chỉ ~320px,
   xếp 4 cột ngang thì nhãn bị cắt. */
.ss-dos-kpis[b-iqre8phugj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ss-dos-kpi[b-iqre8phugj] {
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    padding: 9px 11px;
    min-width: 0;
    background: #fff;
}
.ss-dos-kpi--money[b-iqre8phugj] { background: #fbf8f1; border-color: #ecdfc3; }
.ss-dos-kpi-lbl[b-iqre8phugj] { font-size: 11px; color: var(--ss-muted); margin-bottom: 3px; white-space: nowrap; }
.ss-dos-kpi-val[b-iqre8phugj] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* Mẫu số (tổng suất cấu hình) là ngữ cảnh, không phải điểm nhấn — nhạt và mảnh hơn tử số. */
.ss-dos-kpi-max[b-iqre8phugj] { font-size: 13px; font-weight: 400; color: var(--ss-muted); }
.ss-dos-kpi-val--em[b-iqre8phugj] { color: var(--ss-emerald); }
.ss-dos-kpi-val--am[b-iqre8phugj] { color: var(--ss-amber); }
.ss-dos-kpi-val--ch[b-iqre8phugj] { color: var(--ss-champagne); }

.ss-dos-links[b-iqre8phugj] { display: flex; gap: 8px; }
.ss-dos-link[b-iqre8phugj] { flex: 1; justify-content: center; font-size: 12px; }

/* Employee list section */
.ss-section[b-iqre8phugj] {
    border: 1px solid var(--ss-border);
    border-radius: 10px;
    overflow: hidden;
}
.ss-emp-list[b-iqre8phugj] { max-height: 420px; overflow-y: auto; }
.ss-emp-row[b-iqre8phugj] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ss-hair);
}
.ss-emp-row:last-child[b-iqre8phugj] { border-bottom: none; }
.ss-emp-row-hd[b-iqre8phugj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.ss-emp-row-id[b-iqre8phugj] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ss-emp-name[b-iqre8phugj] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ss-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ss-id[b-iqre8phugj] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--ss-border);
    color: var(--ss-ink);
    font-weight: 500;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.ss-emp-link[b-iqre8phugj] { padding: 3px 6px; font-size: 12px; flex-shrink: 0; border-color: var(--ss-border); }
.ss-emp-times[b-iqre8phugj] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ss-muted);
    font-variant-numeric: tabular-nums;
}
.ss-emp-times i[b-iqre8phugj] { font-size: 12px; }
.ss-emp-dot[b-iqre8phugj] { color: #c3ccd2; }
.ss-emp-paid[b-iqre8phugj] { color: var(--ss-emerald); font-weight: 600; margin-left: 6px; font-size: 11.5px; }
.ss-emp-notes[b-iqre8phugj] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ss-amber);
}
.ss-emp-notes i[b-iqre8phugj] { font-size: 11px; }

/* ── Modals ── */
.ss-add-mbox[b-iqre8phugj] { width: 400px; }
.ss-modal-caption[b-iqre8phugj] { font-size: 12.5px; color: var(--ss-muted); margin: -6px 0 14px; }
.ss-modal-footer[b-iqre8phugj] { display: flex; gap: 10px; }
.ss-flex1[b-iqre8phugj] { flex: 1; }
.ss-flex2[b-iqre8phugj] { flex: 2; }

.ss-hint[b-iqre8phugj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f7f9fa;
    border: 1px solid var(--ss-border);
    color: var(--ss-muted);
    font-size: 12px;
}
.ss-hint i[b-iqre8phugj] { font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* Week config modal */
/* Rộng hơn 600px vì mỗi hàng ca giờ mang thêm ô tiền công trọn ca. */
.ss-cfg-mbox[b-iqre8phugj] { width: 680px; max-width: calc(100vw - 32px); max-height: 88vh; }
.ss-cfg-scroll[b-iqre8phugj] { max-height: 440px; overflow-y: auto; overflow-x: hidden; }
.ss-cfg-dept-block[b-iqre8phugj] { margin-bottom: 14px; }

/* Tab địa điểm: một hàng ngang cuộn được, chỉ panel của tab đang chọn được render. */
.ss-cfg-tabs[b-iqre8phugj] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ss-hair);
    scrollbar-width: thin;
}
.ss-cfg-tab[b-iqre8phugj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid var(--ss-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ss-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.ss-cfg-tab:hover[b-iqre8phugj] { background: #f7f9fa; }
.ss-cfg-tab--on[b-iqre8phugj] {
    border-color: color-mix(in srgb, var(--ss-emerald) 45%, transparent);
    background: color-mix(in srgb, var(--ss-emerald) 8%, #fff);
    color: var(--ss-ink);
}
.ss-cfg-tab[b-iqre8phugj]  .ss-cfg-tab-name { font-size: 13px; }
.ss-cfg-tab--on[b-iqre8phugj]  .ss-cfg-tab-name { font-weight: 600; }
/* Số ô lịch đã bật của địa điểm — cho biết tab nào đã cấu hình mà không phải mở ra xem. */
.ss-cfg-tab-count[b-iqre8phugj] {
    min-width: 20px;
    padding: 1px 6px;
    border: 1px solid var(--ss-border);
    border-radius: 999px;
    background: #f1f4f6;
    color: var(--ss-muted);
    font-size: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ss-cfg-tab--on .ss-cfg-tab-count[b-iqre8phugj] {
    border-color: color-mix(in srgb, var(--ss-emerald) 30%, transparent);
    background: color-mix(in srgb, var(--ss-emerald) 14%, #fff);
    color: var(--ss-emerald);
}
/* Chấm đỏ: tab này còn ca thiếu tiền công → đang là thứ khoá nút Lưu. */
.ss-cfg-tab-warn[b-iqre8phugj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ss-red);
    flex-shrink: 0;
}
.ss-cfg-day-block[b-iqre8phugj] { border-bottom: 1px solid var(--ss-hair); padding: 6px 0 4px; }
.ss-cfg-day-hd[b-iqre8phugj] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
    color: var(--ss-ink);
}
.ss-cfg-day-hd--off[b-iqre8phugj] { color: var(--ss-muted); }
.ss-cfg-day-date[b-iqre8phugj] { font-weight: 400; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
/* Grid (không phải flex) để cột Slot và Tiền ca thẳng hàng giữa mọi dòng ca,
   giúp mắt quét nhanh theo cột thay vì mỗi dòng lệch một kiểu. */
/* Một ca = một khối: hàng đầu là checkbox + tên ca; nếu được chọn thì hiện cụm ô nhập
   (suất/tiền công/tiền cọc) căn thẳng cột bên dưới. Ca chưa chọn chỉ còn một dòng gọn. */
.ss-cfg-shift-row[b-iqre8phugj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background .12s, border-color .12s;
}
.ss-cfg-shift-row--on[b-iqre8phugj] {
    background: #f7faf9;
    border-color: color-mix(in srgb, var(--ss-emerald) 22%, transparent);
}

.ss-cfg-shift-head[b-iqre8phugj] {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    min-width: 0;
}
.ss-cfg-checkbox[b-iqre8phugj] {
    width: 17px; height: 17px; cursor: pointer; flex-shrink: 0;
    accent-color: var(--ss-emerald);
}
.ss-cfg-shift-name[b-iqre8phugj] {
    font-size: 13px;
    min-width: 0;
    color: var(--ss-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss-cfg-shift-row--on .ss-cfg-shift-name[b-iqre8phugj] { font-weight: 600; }
.ss-cfg-shift-name--off[b-iqre8phugj] { color: var(--ss-muted); }
.ss-cfg-shift-time[b-iqre8phugj] { font-size: 11.5px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }

/* Mini-form căn cột: [nhãn phải] [ô nhập 96px] [đơn vị]. Ba dòng suất/tiền/cọc thẳng hàng. */
.ss-cfg-inputs[b-iqre8phugj] {
    display: grid;
    grid-template-columns: auto 96px 10px;
    align-items: center;
    gap: 7px 9px;
    padding-left: 26px;   /* thụt vào ngang với tên ca (sau checkbox) */
}
.ss-cfg-flbl[b-iqre8phugj] { font-size: 11.5px; color: var(--ss-muted); text-align: right; white-space: nowrap; }
.ss-cfg-flbl--dep[b-iqre8phugj] { color: var(--ss-emerald); }
.ss-cfg-unit[b-iqre8phugj] { font-size: 11px; color: var(--ss-muted); }

/* Mọi ô nhập trong cụm (number + CurrencyInput qua ::deep) chung một khuôn: 96px, canh phải. */
.ss-cfg-num[b-iqre8phugj],
.ss-cfg-inputs[b-iqre8phugj]  input {
    width: 96px;
    padding: 6px 9px;
    text-align: right;
    font-size: 12.5px;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    background: #fff;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.ss-cfg-num:focus[b-iqre8phugj],
.ss-cfg-inputs[b-iqre8phugj]  input:focus {
    outline: none;
    border-color: var(--ss-emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-emerald) 12%, transparent);
}
.ss-cfg-money--inv[b-iqre8phugj] { border-color: var(--red) !important; background: var(--rb) !important; }
.ss-cfg-money--dep[b-iqre8phugj] { border-color: color-mix(in srgb, var(--ss-emerald) 35%, var(--ss-border)) !important; }
.ss-cfg-error[b-iqre8phugj] { margin-top: 12px; }

.ss-cfg-footer[b-iqre8phugj] { display: flex; gap: 10px; margin-top: 16px; }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 1024px) {
    .ss-cols--open[b-iqre8phugj] { grid-template-columns: 1fr; }
    .ss-dossier[b-iqre8phugj] { position: static; }
}

@media (max-width: 768px) {
    .ss-wrap[b-iqre8phugj] { gap: 12px; }
    .ss-title[b-iqre8phugj] { font-size: 22px; }

    /* KPI → lưới 2 cột */
    .ss-kpis[b-iqre8phugj] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .ss-kpi[b-iqre8phugj] { min-width: 0; }

    /* Toolbar → grid, nút full-width */
    .ss-toolbar[b-iqre8phugj] { display: grid; grid-template-columns: 1fr 1fr; }
    .ss-week[b-iqre8phugj] { grid-column: 1 / -1; justify-content: center; }
    .ss-week-lbl[b-iqre8phugj] { flex: 1; justify-content: center; }
    .ss-spacer[b-iqre8phugj] { display: none; }
    .ss-btn-primary[b-iqre8phugj], .ss-toolbar .ss-tbtn[b-iqre8phugj] { justify-content: center; padding: 10px; font-size: 13px; }

    .ss-dossier[b-iqre8phugj] { padding: 14px; }
    .ss-dos-kpis[b-iqre8phugj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ss-add-mbox[b-iqre8phugj], .ss-cfg-mbox[b-iqre8phugj] { width: calc(100vw - 32px); }

    /* Layout ca đã là flex-column (tên trên, cụm ô nhập thụt vào dưới) nên hợp mobile sẵn;
       chỉ cho phép tên ca xuống dòng khi hẹp. */
    .ss-cfg-shift-name[b-iqre8phugj] { white-space: normal; }
}

/* Màn rất hẹp: nhãn thu lại, ô nhập co theo cột còn lại để không tràn. */
@media (max-width: 400px) {
    .ss-cfg-inputs[b-iqre8phugj] { grid-template-columns: auto minmax(0, 1fr) 10px; padding-left: 8px; }
    .ss-cfg-num[b-iqre8phugj], .ss-cfg-inputs[b-iqre8phugj]  input { width: 100%; }
}
/* _content/SeasonFlow.Web/Components/Pages/Settings/Settings.razor.rz.scp.css */
/* ══ Settings — "Executive Payroll Terminal" (đồng bộ /employees, /payroll)
   Nền porcelain #EEF1F2 (layout.css), widget trắng sứ viền nhạt, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (trạng thái tích cực / primary). ══ */

.st-wrap[b-0w1jx9xmak] {
    --s-ink: #293640;
    --s-muted: #6b7a85;
    --s-border: #e2e7ea;
    --s-hair: #eef1f3;
    --s-emerald: #05835f;
    --s-red: #a32d2d;
    --s-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--s-ink);
}

/* ── Page header ── */
.st-head[b-0w1jx9xmak] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.st-title[b-0w1jx9xmak] {
    font-size: 26px;
    font-weight: 700;
    color: var(--s-ink);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin: 0;
}
.st-sub[b-0w1jx9xmak] { font-size: 13px; color: var(--s-muted); margin-top: 4px; max-width: 560px; }
.st-kpis[b-0w1jx9xmak] { display: flex; gap: 10px; flex-wrap: wrap; }
.st-kpi[b-0w1jx9xmak] {
    background: #fff;
    border: 1px solid var(--s-border);
    border-radius: 10px;
    box-shadow: var(--s-shadow);
    padding: 10px 16px;
    min-width: 118px;
}
.st-kpi-lbl[b-0w1jx9xmak] { font-size: 11.5px; color: var(--s-muted); margin-bottom: 3px; white-space: nowrap; }
.st-kpi-val[b-0w1jx9xmak] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--s-ink);
    line-height: 1.1;
}
.st-kpi-val--em[b-0w1jx9xmak] { color: var(--s-emerald); }

.st-wrap .alert[b-0w1jx9xmak] { margin: 0; }

/* ── Two-column layout ── */
.st-cols[b-0w1jx9xmak] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* ── Widget (ledger) ── */
.st-widget[b-0w1jx9xmak] {
    background: #fff;
    border: 1px solid var(--s-border);
    border-radius: 12px;
    box-shadow: var(--s-shadow);
    overflow: hidden;
}
.st-widget-hd[b-0w1jx9xmak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--s-border);
}
.st-widget-title[b-0w1jx9xmak] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--s-ink);
}
.st-widget-hd-r[b-0w1jx9xmak] { display: flex; align-items: center; gap: 10px; }
.st-widget-meta[b-0w1jx9xmak] {
    font-size: 11px;
    font-weight: 600;
    color: var(--s-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Primary button: emerald (đúng 1 hành động chính mỗi widget) */
.st-btn-primary[b-0w1jx9xmak] {
    background: var(--s-emerald);
    border: 1px solid var(--s-emerald);
    color: #fff;
    font-weight: 600;
}
.st-btn-primary:hover[b-0w1jx9xmak] { background: #046b4e; border-color: #046b4e; color: #fff; }
/* Delete: chữ đỏ trên nền trắng viền nhạt */
.st-btn-danger[b-0w1jx9xmak] { color: var(--s-red); }
.st-btn-danger:hover[b-0w1jx9xmak] { background: #fcebeb; }

/* ── Table ── */
.st-tw[b-0w1jx9xmak] { overflow-x: auto; }
.st-table[b-0w1jx9xmak] { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-table thead tr[b-0w1jx9xmak] { background: #fafbfc; }
.st-table th[b-0w1jx9xmak] {
    padding: 9px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--s-muted);
    border-bottom: 1px solid var(--s-border);
    white-space: nowrap;
}
.st-table td[b-0w1jx9xmak] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--s-hair);
    vertical-align: middle;
}
.st-table tbody tr:hover[b-0w1jx9xmak] { background: #f7f9fa; }
.st-table tbody tr:last-child td[b-0w1jx9xmak] { border-bottom: none; }
.st-table .mono[b-0w1jx9xmak] { font-variant-numeric: tabular-nums; }

.st-th-act[b-0w1jx9xmak] { width: 1%; }
.st-td-act[b-0w1jx9xmak] { text-align: right; white-space: nowrap; }
.st-td-act .btn[b-0w1jx9xmak] { border-color: var(--s-border); }

/* Sortable column headers */
.st-th-sort[b-0w1jx9xmak] { cursor: pointer; user-select: none; white-space: nowrap; }
.st-th-sort:hover[b-0w1jx9xmak] { color: var(--s-ink); }
.st-sort-ico[b-0w1jx9xmak] {
    font-size: 13px;
    margin-left: 2px;
    vertical-align: -1px;
    color: var(--s-emerald);
}
.st-sort-dim[b-0w1jx9xmak] { color: var(--s-muted); opacity: .55; }

/* Table cell: bold name */
.st-fw6[b-0w1jx9xmak] { font-weight: 600; color: var(--s-ink); }

/* Inline action button group */
.st-act[b-0w1jx9xmak] { display: flex; gap: 5px; justify-content: flex-end; }

/* Empty-state table cell */
.st-empty-cell[b-0w1jx9xmak] { text-align: center; padding: 24px; color: var(--s-muted); }

/* Status pill: dot + chữ, nền rất nhạt */
.st-pill[b-0w1jx9xmak] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.st-pill-dot[b-0w1jx9xmak] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.st-pill--em[b-0w1jx9xmak] { background: #e7f3ee; color: var(--s-emerald); }
.st-pill--gr[b-0w1jx9xmak] { background: #eef1f3; color: var(--s-muted); }

/* Department name cell: dot + text */
.st-dept-name[b-0w1jx9xmak] {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    min-width: 0;
}
.st-dept-dot[b-0w1jx9xmak] { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.st-dept-name .st-fw6[b-0w1jx9xmak] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Image count badge in department table row */
.st-img-count[b-0w1jx9xmak] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--s-muted);
    background: #f1f4f6;
    border: 1px solid var(--s-border);
    border-radius: 4px;
    padding: 1px 6px;
    cursor: pointer;
}

/* ── Mobile ── */
@media (max-width: 820px) {
    .st-cols[b-0w1jx9xmak] { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .st-title[b-0w1jx9xmak] { font-size: 22px; }
    .st-kpis[b-0w1jx9xmak] { width: 100%; }
    .st-kpi[b-0w1jx9xmak] { flex: 1; min-width: 0; }
}


/* Modal box fixed width — có trần theo viewport để không tràn trên màn hẹp */
.st-mbox[b-0w1jx9xmak] {
    width: 400px;
    max-width: calc(100vw - 24px);
}

/* Modal footer button row */
.st-modal-footer[b-0w1jx9xmak] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

/* Cancel button: equal share */
.st-btn-cancel[b-0w1jx9xmak] {
    flex: 1;
}

/* Save button: larger share */
.st-btn-save[b-0w1jx9xmak] {
    flex: 2;
}

/* Color swatch picker row */
.st-color-row[b-0w1jx9xmak] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

/* Background swatch (always bordered so white is visible) */
.st-bg-swatch[b-0w1jx9xmak] {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.st-bg-swatch-on[b-0w1jx9xmak] {
    border: 2.5px solid #333;
}

/* Native color input sized to match swatches */
.st-color-input[b-0w1jx9xmak] {
    width: 30px;
    height: 26px;
    padding: 0;
    border-radius: 5px;
    cursor: pointer;
}

/* Icon picker grid */
.st-icon-grid[b-0w1jx9xmak] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.st-icon-opt[b-0w1jx9xmak] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink2, #6B7A85);
    font-size: 17px;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.st-icon-opt:hover[b-0w1jx9xmak] { border-color: var(--ink3, #9aa7b0); }
.st-icon-on[b-0w1jx9xmak] {
    border-color: #05835F;
    background: #E7F3EE;
    color: #05835F;
}

/* "No color" clear button in the swatch row */
.st-color-clear[b-0w1jx9xmak] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
    color: var(--ink2, #6B7A85);
    cursor: pointer;
}
.st-color-clear-on[b-0w1jx9xmak] { border-color: #333; color: #333; }

/* Live tag preview under the pickers */
.st-tag-preview[b-0w1jx9xmak] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #FAFBFC;
}
.st-tag-preview-lbl[b-0w1jx9xmak] {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink2, #6B7A85);
    font-weight: 600;
}
.st-tag-preview .sf-tag[b-0w1jx9xmak] { font-size: 15px; font-weight: 600; }

/* Geofencing sub-section separator */
.st-geo-section[b-0w1jx9xmak] {
    border-top: .5px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
    margin-bottom: 10px;
}

/* Geofencing section label */
.st-geo-title[b-0w1jx9xmak] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}

/* Geofencing hint text */
.st-geo-hint[b-0w1jx9xmak] {
    font-size: 11px;
    color: var(--ink3);
    margin-top: 4px;
}

/* ── Department image gallery popup ─────────────── */
.st-view-mbox[b-0w1jx9xmak] {
    width: 520px;
    padding: 0;
    overflow: hidden;
}

.st-view-head[b-0w1jx9xmak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: .5px solid var(--border);
}

.st-view-title-row[b-0w1jx9xmak] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-dept-color-dot[b-0w1jx9xmak] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.st-view-name[b-0w1jx9xmak] {
    font-size: 15px;
    font-weight: 700;
}

.st-view-close[b-0w1jx9xmak] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--ink3);
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
}

.st-view-gallery[b-0w1jx9xmak] {
    padding: 14px 16px 16px;
}

.st-view-main-wrap[b-0w1jx9xmak] {
    margin-bottom: 8px;
}

.st-view-main-img[b-0w1jx9xmak] {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
    border: .5px solid var(--border2);
    display: block;
}

.st-view-thumb-row[b-0w1jx9xmak] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.st-view-thumb[b-0w1jx9xmak] {
    width: 80px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .12s, opacity .12s;
    opacity: .65;
}

.st-view-thumb:hover[b-0w1jx9xmak] { opacity: 1; }
.st-view-thumb-on[b-0w1jx9xmak] { border-color: var(--ink) !important; opacity: 1 !important; }

.st-view-empty[b-0w1jx9xmak] {
    padding: 36px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink3);
    font-size: 13px;
}

/* Department images sub-section */
.st-img-section[b-0w1jx9xmak] {
    border-top: .5px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
    margin-bottom: 10px;
}

.st-img-grid[b-0w1jx9xmak] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.st-img-item[b-0w1jx9xmak] {
    position: relative;
    width: 90px;
}

.st-img-thumb[b-0w1jx9xmak] {
    width: 90px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    border: .5px solid var(--border2);
    display: block;
}

.st-img-main-badge[b-0w1jx9xmak] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--ink);
    color: var(--bg);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
}

.st-img-btns[b-0w1jx9xmak] {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}

.st-img-btn[b-0w1jx9xmak] {
    flex: 1;
    font-size: 10px;
    padding: 3px 4px;
}

.st-img-upload[b-0w1jx9xmak] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 6px 12px;
    border: .5px dashed var(--border2);
    border-radius: 6px;
    cursor: pointer;
    color: var(--ink3);
    background: var(--surface);
}

.st-img-upload:hover[b-0w1jx9xmak] {
    border-color: var(--ink3);
    color: var(--ink);
}

.st-img-error[b-0w1jx9xmak] {
    font-size: 11px;
    color: var(--red);
    margin-top: 5px;
}


/* Bảng đơn giá theo giờ-trong-ngày (chỉ hiện ở PayrollMode.Hourly) */
.st-hr-grid[b-0w1jx9xmak] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.st-hr-cell[b-0w1jx9xmak] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-hr-lbl[b-0w1jx9xmak] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink3);
    letter-spacing: .3px;
}

@media (max-width: 640px) {
    .st-hr-grid[b-0w1jx9xmak] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Deposit (cọc giữ ca) settings ── */
/* overflow:visible để dropdown chọn ngân hàng tràn ra ngoài thẻ được — .st-widget mặc định
   overflow:hidden sẽ cắt cụt dropdown, và phần bị cắt rơi trúng backdrop nên bấm không chọn được. */
.st-deposit[b-0w1jx9xmak] { margin-bottom: 16px; overflow: visible; }
.st-deposit .st-widget-hd[b-0w1jx9xmak] { border-radius: 12px 12px 0 0; }
.st-deposit-body[b-0w1jx9xmak] { padding: 14px 16px; }
.st-deposit-grid[b-0w1jx9xmak] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; }
.st-deposit-save[b-0w1jx9xmak] { margin-top: 14px; }
@media (max-width: 600px) { .st-deposit-grid[b-0w1jx9xmak] { grid-template-columns: 1fr; } }
/* _content/SeasonFlow.Web/Components/Pages/WorkRequests/WorkRequests.razor.rz.scp.css */
/* ══ Yêu cầu công việc — "Executive Payroll Terminal"
   Nền porcelain #EEF1F2 (layout.css), widget trắng viền #E2E7EA, shadow rất nhẹ.
   Graphite #293640 · emerald #05835F (duyệt/hoàn thành) · amber #B45309 (chờ/gấp) · đỏ #A32D2D chỉ chữ.
   Không gradient, không card lồng card, mỗi khối 1 điểm đậm 700. ══ */

.wra-wrap[b-t2tzt3t6m8] {
    --wra-ink: #293640;
    --wra-muted: #6b7a85;
    --wra-border: #e2e7ea;
    --wra-hair: #eef1f3;
    --wra-emerald: #05835f;
    --wra-amber: #b45309;
    --wra-red: #a32d2d;
    --wra-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 14px rgba(20, 30, 40, .05);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--wra-ink);
}

/* ── Page header ── */
.wra-head[b-t2tzt3t6m8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.wra-title[b-t2tzt3t6m8] {
    font-size: 26px;
    font-weight: 700;
    color: var(--wra-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.3px;
}
.wra-sub[b-t2tzt3t6m8] {
    font-size: 13px;
    color: var(--wra-muted);
    margin-top: 4px;
}

/* KPI strip */
.wra-kpis[b-t2tzt3t6m8] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.wra-kpi[b-t2tzt3t6m8] {
    background: #fff;
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    box-shadow: var(--wra-shadow);
    padding: 10px 16px;
    min-width: 112px;
}
.wra-kpi-lbl[b-t2tzt3t6m8] {
    font-size: 11.5px;
    color: var(--wra-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}
.wra-kpi-val[b-t2tzt3t6m8] {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--wra-ink);
    line-height: 1.1;
}
.wra-kpi-val--em[b-t2tzt3t6m8] { color: var(--wra-emerald); }
.wra-kpi-val--am[b-t2tzt3t6m8] { color: var(--wra-amber); }
.wra-kpi-val--rd[b-t2tzt3t6m8] { color: var(--wra-red); }

/* ── Master-detail columns ── */
.wra-cols[b-t2tzt3t6m8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.wra-cols--open[b-t2tzt3t6m8] { grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); }

/* ── LEFT: request ledger ── */
.wra-ledger[b-t2tzt3t6m8] {
    background: #fff;
    border: 1px solid var(--wra-border);
    border-radius: 12px;
    box-shadow: var(--wra-shadow);
    overflow: hidden;
}

.wra-toolbar[b-t2tzt3t6m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wra-border);
}
.wra-search-wrap[b-t2tzt3t6m8] { position: relative; flex: 1; min-width: 150px; }
.wra-search-icon[b-t2tzt3t6m8] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wra-muted);
    pointer-events: none;
    font-size: 15px;
}
.wra-search-input[b-t2tzt3t6m8] {
    width: 100%;
    padding-left: 34px;
    border: 1px solid var(--wra-border);
    border-radius: 9px;
    background: #fff;
}
.wra-search-input:focus[b-t2tzt3t6m8] { border-color: var(--wra-ink); }

.wra-sel[b-t2tzt3t6m8] {
    width: auto;
    border: 1px solid var(--wra-border);
    border-radius: 9px;
    background: #fff;
    color: var(--wra-ink);
}

.wra-date-group[b-t2tzt3t6m8] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wra-date-input[b-t2tzt3t6m8] {
    width: 130px;
    border: 1px solid var(--wra-border);
    border-radius: 9px;
    background: #fff;
    font-variant-numeric: tabular-nums;
}
.wra-date-lbl[b-t2tzt3t6m8] { font-size: 12px; color: var(--wra-muted); white-space: nowrap; }

/* ── List rows (ledger style) ── */
.wra-list[b-t2tzt3t6m8] { min-height: 120px; }
.wra-row[b-t2tzt3t6m8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wra-hair);
    cursor: pointer;
    transition: background .1s;
}
.wra-row:hover[b-t2tzt3t6m8] { background: #f7f9fa; }
.wra-row.sel[b-t2tzt3t6m8] {
    background: #f2f7f5;
    box-shadow: inset 3px 0 0 var(--wra-emerald);
}
.wra-row-txt[b-t2tzt3t6m8] { min-width: 0; }
.wra-row-title[b-t2tzt3t6m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.wra-row-name[b-t2tzt3t6m8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--wra-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.wra-row-meta[b-t2tzt3t6m8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--wra-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.wra-row-emp[b-t2tzt3t6m8] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ID chip (mã NV) */
.wra-id[b-t2tzt3t6m8] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f4f6;
    border: 1px solid var(--wra-border);
    color: var(--wra-ink);
    font-weight: 500;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wra-img-badge[b-t2tzt3t6m8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--wra-muted);
    background: #f1f4f6;
    border: 1px solid var(--wra-border);
    border-radius: 6px;
    padding: 1px 6px;
}

/* Priority tag — palette đóng: gray / graphite / amber / red */
.wra-pri[b-t2tzt3t6m8] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.wr-p-low[b-t2tzt3t6m8]    { background: #eef1f3; color: var(--wra-muted, #6b7a85); }
.wr-p-normal[b-t2tzt3t6m8] { background: #f1f4f6; color: var(--wra-ink, #293640); border: 1px solid var(--wra-border, #e2e7ea); }
.wr-p-high[b-t2tzt3t6m8]   { background: #fdf3e2; color: var(--wra-amber, #b45309); }
.wr-p-urgent[b-t2tzt3t6m8] { background: #f9eceb; color: var(--wra-red, #a32d2d); }

.wra-overdue[b-t2tzt3t6m8] { color: var(--wra-red); font-weight: 600; }

/* Status pill: dot + chữ, nền rất nhạt */
.wra-pill[b-t2tzt3t6m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.wra-pill-dot[b-t2tzt3t6m8] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.wra-pill--em[b-t2tzt3t6m8] { background: #e7f3ee; color: var(--wra-emerald); }
.wra-pill--am[b-t2tzt3t6m8] { background: #fdf3e2; color: var(--wra-amber); }
.wra-pill--rd[b-t2tzt3t6m8] { background: #f9eceb; color: var(--wra-red); }
.wra-pill--gr[b-t2tzt3t6m8] { background: #eef1f3; color: var(--wra-muted); }

/* Empty */
.wra-empty[b-t2tzt3t6m8] {
    padding: 48px 16px;
    text-align: center;
    color: var(--wra-muted);
    font-size: 13px;
}
.wra-empty i[b-t2tzt3t6m8] { font-size: 30px; display: block; margin-bottom: 8px; color: #b6c0c7; }
.wra-empty p[b-t2tzt3t6m8] { margin: 0; }

/* Footer */
.wra-foot[b-t2tzt3t6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--wra-border);
    font-size: 12.5px;
    color: var(--wra-muted);
    font-variant-numeric: tabular-nums;
}

/* ── RIGHT: dossier ── */
.wra-dossier[b-t2tzt3t6m8] {
    background: #fff;
    border: 1px solid var(--wra-border);
    border-radius: 12px;
    box-shadow: var(--wra-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}

.wra-dos-head[b-t2tzt3t6m8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.wra-dos-txt[b-t2tzt3t6m8] { min-width: 0; }
.wra-dos-title-row[b-t2tzt3t6m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.wra-dos-name[b-t2tzt3t6m8] {
    font-size: 17px;
    font-weight: 700;
    color: var(--wra-ink);
    letter-spacing: -.2px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.wra-dos-meta[b-t2tzt3t6m8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--wra-muted);
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}
.wra-dos-badge[b-t2tzt3t6m8] { margin-top: 7px; }

/* Section: header bar xám UPPERCASE + body */
.wra-section[b-t2tzt3t6m8] {
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    overflow: hidden;
}
.wra-section-hd[b-t2tzt3t6m8] {
    padding: 9px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--wra-border);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--wra-ink);
}
.wra-section-body[b-t2tzt3t6m8] { padding: 14px; }

.wra-content[b-t2tzt3t6m8] {
    font-size: 13px;
    color: var(--wra-ink);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wra-images[b-t2tzt3t6m8] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wra-thumb[b-t2tzt3t6m8] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--wra-border);
    cursor: pointer;
    transition: opacity .15s;
    background: #f7f9fa;
}
.wra-thumb:hover[b-t2tzt3t6m8] { opacity: .85; }

.wra-resolved-at[b-t2tzt3t6m8] { font-size: 11.5px; color: var(--wra-muted); margin-top: 10px; font-variant-numeric: tabular-nums; }

/* Resolve form */
.wra-ta[b-t2tzt3t6m8] {
    width: 100%;
    border: 1px solid var(--wra-border);
    border-radius: 9px;
    padding: 8px 10px;
    font-family: var(--font);
    font-size: 13px;
    background: #fff;
    color: var(--wra-ink);
    resize: vertical;
}
.wra-ta:focus[b-t2tzt3t6m8] { border-color: var(--wra-ink); }

.wra-upload-row[b-t2tzt3t6m8] { margin-top: 10px; }
.wra-upload-lbl[b-t2tzt3t6m8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--wra-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--wra-muted);
    transition: color .1s, border-color .1s;
}
.wra-upload-lbl:hover[b-t2tzt3t6m8] { border-color: var(--wra-ink); color: var(--wra-ink); }

.wra-resolve-imgs[b-t2tzt3t6m8] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wra-resolve-img[b-t2tzt3t6m8] { position: relative; display: inline-block; }
.wra-resolve-img-t[b-t2tzt3t6m8] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--wra-border);
    display: block;
}
.wra-resolve-img-x[b-t2tzt3t6m8] {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wra-red);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* Actions: đúng MỘT nút primary emerald (Duyệt), Từ chối = chữ đỏ nền trắng */
.wra-actions[b-t2tzt3t6m8] { display: flex; gap: 8px; margin-top: 12px; }
.wra-flex1[b-t2tzt3t6m8] { flex: 1; }
.wra-flex2[b-t2tzt3t6m8] { flex: 2; }

.wra-btn-primary[b-t2tzt3t6m8] {
    background: var(--wra-emerald);
    border: 1px solid var(--wra-emerald);
    color: #fff;
    font-weight: 600;
}
.wra-btn-primary:hover[b-t2tzt3t6m8] { background: #046b4e; border-color: #046b4e; color: #fff; }
.wra-btn-primary:disabled[b-t2tzt3t6m8] { opacity: .6; }

.wra-btn-danger[b-t2tzt3t6m8] { border-color: var(--wra-border); color: var(--wra-red); }
.wra-btn-danger:hover[b-t2tzt3t6m8] { background: #f9eceb; border-color: #e8c9c7; color: var(--wra-red); }

/* ── Mobile PWA (≤768px) ── */
@media (max-width: 900px) {
    .wra-cols--open[b-t2tzt3t6m8] { grid-template-columns: 1fr; }
    .wra-dossier[b-t2tzt3t6m8] { position: static; }
}

@media (max-width: 768px) {
    .wra-wrap[b-t2tzt3t6m8] { gap: 12px; }
    .wra-title[b-t2tzt3t6m8] { font-size: 22px; }

    /* KPI → lưới 2 cột */
    .wra-kpis[b-t2tzt3t6m8] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .wra-kpi[b-t2tzt3t6m8] { min-width: 0; }

    /* Toolbar → grid */
    .wra-toolbar[b-t2tzt3t6m8] { display: grid; grid-template-columns: 1fr 1fr; }
    .wra-search-wrap[b-t2tzt3t6m8] { grid-column: 1 / -1; min-width: 0; }
    .wra-sel[b-t2tzt3t6m8] { width: 100%; grid-column: 1 / -1; }
    .wra-date-group[b-t2tzt3t6m8] { grid-column: 1 / -1; }
    .wra-date-input[b-t2tzt3t6m8] { flex: 1; width: auto; min-width: 0; }

    /* Row → thẻ dọc */
    .wra-row[b-t2tzt3t6m8] { flex-wrap: wrap; }
    .wra-row-meta[b-t2tzt3t6m8] { white-space: normal; }
    .wra-row-emp[b-t2tzt3t6m8] { max-width: none; }

    .wra-dossier[b-t2tzt3t6m8] { padding: 14px; }
    .wra-actions[b-t2tzt3t6m8] { flex-direction: column; }
}
/* _content/SeasonFlow.Web/Components/Shared/BankPicker.razor.rz.scp.css */
.bp-wrap[b-dvcvt6rli6] { position: relative; }

.bp-btn[b-dvcvt6rli6] {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: #fff; border: 1px solid var(--border, #E2E7EA); border-radius: 10px;
    padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--ink, #293640); text-align: left;
}
.bp-btn:hover[b-dvcvt6rli6] { border-color: #cbd5e1; }
.bp-logo[b-dvcvt6rli6] { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; background: #fff; flex-shrink: 0; }
.bp-sel[b-dvcvt6rli6] { font-weight: 600; }
.bp-code[b-dvcvt6rli6] { font-family: var(--mono); font-size: 11px; color: var(--ink3, #6B7A85); background: #F1F4F6; border-radius: 5px; padding: 1px 6px; }
.bp-ph[b-dvcvt6rli6] { color: var(--ink3, #94a3b8); }
.bp-chev[b-dvcvt6rli6] { margin-left: auto; color: var(--ink3, #94a3b8); font-size: 14px; }

.bp-backdrop[b-dvcvt6rli6] { position: fixed; inset: 0; z-index: 900; }

/* Tràn rộng hơn nút bấm mỗi bên 8px cho dễ nhìn/dễ bấm. Thẻ cha PHẢI để overflow:visible,
   nếu không dropdown bị cắt và click rơi trúng backdrop (đóng menu thay vì chọn). */
.bp-drop[b-dvcvt6rli6] {
    position: absolute; z-index: 901; top: calc(100% + 6px); left: -8px; right: -8px;
    background: #fff; border: 1px solid var(--border, #E2E7EA); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(20,30,40,.18); overflow: hidden;
}
.bp-search[b-dvcvt6rli6] { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #EEF1F3; }
.bp-search i[b-dvcvt6rli6] { color: var(--ink3, #94a3b8); font-size: 14px; }
.bp-search-input[b-dvcvt6rli6] { border: none; outline: none; flex: 1; font-size: 13px; background: transparent; }

.bp-items[b-dvcvt6rli6] { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.bp-item[b-dvcvt6rli6] {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; padding: 9px 12px; border-bottom: 1px solid #F5F7F8;
}
.bp-item:hover[b-dvcvt6rli6] { background: #F7F9FA; }
.bp-item-active[b-dvcvt6rli6] { background: #F2F7F5; }
.bp-item-info[b-dvcvt6rli6] { display: flex; flex-direction: column; min-width: 0; }
.bp-item-short[b-dvcvt6rli6] { font-size: 13px; font-weight: 600; color: var(--ink, #293640); }
.bp-item-full[b-dvcvt6rli6] { font-size: 11px; color: var(--ink3, #6B7A85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-item-check[b-dvcvt6rli6] { margin-left: auto; color: #05835F; font-size: 15px; }
/* _content/SeasonFlow.Web/Components/Shared/DataPager.razor.rz.scp.css */
.dp-row[b-orceoq2fd5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 0 4px;
}

.dp-pager[b-orceoq2fd5] {
    display: flex;
    align-items: center;
}

/* Bootstrap-style connected pagination buttons */
.dp-pager .dp-btn[b-orceoq2fd5] {
    border-radius: 0;
    margin-left: -.5px;
    padding: 6px 11px;
    min-width: 36px;
    justify-content: center;
    position: relative;
    z-index: 0;
    font-size: 13px;
}
.dp-pager .dp-btn:first-child[b-orceoq2fd5] {
    border-radius: 7px 0 0 7px;
    margin-left: 0;
}
.dp-pager .dp-btn:last-child[b-orceoq2fd5] {
    border-radius: 0 7px 7px 0;
}
.dp-pager .dp-btn.bd[b-orceoq2fd5] {
    z-index: 1;
}
.dp-pager .dp-btn:hover:not([disabled])[b-orceoq2fd5] {
    z-index: 1;
}

.dp-size[b-orceoq2fd5] {
    width: auto;
    font-size: 13px;
    height: 34px;
    padding: 4px 10px;
}

.dp-info[b-orceoq2fd5] {
    font-size: 13px;
    color: var(--ink2);
}
/* _content/SeasonFlow.Web/Components/Shared/DayAttendanceDetail.razor.rz.scp.css */
/* Stats strip — 3 pastel cards */
.dad-stats[b-ltffa73bi8] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.dad-stat[b-ltffa73bi8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 14px;
    border: 1px solid transparent;
}

.dad-stat-teal[b-ltffa73bi8] { background: #f0fdfa; border-color: #99f6e4; }
.dad-stat-teal .dad-stat-num[b-ltffa73bi8]  { color: #0f766e; }
.dad-stat-teal .dad-stat-unit[b-ltffa73bi8] { color: #14b8a6; }
.dad-stat-teal .dad-stat-lbl[b-ltffa73bi8]  { color: #0d9488; }

.dad-stat-blue[b-ltffa73bi8] { background: #eff6ff; border-color: #bfdbfe; }
.dad-stat-blue .dad-stat-num[b-ltffa73bi8]  { color: #1d4ed8; }
.dad-stat-blue .dad-stat-unit[b-ltffa73bi8] { color: #60a5fa; }
.dad-stat-blue .dad-stat-lbl[b-ltffa73bi8]  { color: #2563eb; }

.dad-stat-amber[b-ltffa73bi8] { background: #fffbeb; border-color: #fde68a; }
.dad-stat-amber .dad-stat-num[b-ltffa73bi8]  { color: #b45309; }
.dad-stat-amber .dad-stat-unit[b-ltffa73bi8] { color: #f59e0b; }
.dad-stat-amber .dad-stat-lbl[b-ltffa73bi8]  { color: #d97706; }

.dad-stat-num[b-ltffa73bi8] {
    font-size: 24px;
    font-weight: 900;
    font-family: var(--mono);
    letter-spacing: -1px;
    line-height: 1;
}

.dad-stat-unit[b-ltffa73bi8] {
    font-size: 13px;
    font-weight: 600;
    margin-left: 2px;
    margin-right: 3px;
}

.dad-stat-lbl[b-ltffa73bi8] {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Card list */
.dad-list[b-ltffa73bi8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dad-card[b-ltffa73bi8] {
    background: var(--surface);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    transition: border-color .15s, background .15s;
}

.dad-card-focused[b-ltffa73bi8] {
    background: #f0fdfa !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 2px #14b8a620;
}

.dad-card-hd[b-ltffa73bi8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.dad-shift-name[b-ltffa73bi8] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.dad-shift-meta[b-ltffa73bi8] {
    font-size: 12px;
    color: var(--ink3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Status chips */
.dad-chip[b-ltffa73bi8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dad-chip-ok[b-ltffa73bi8]     { background: var(--gb); color: var(--gm); }
.dad-chip-late[b-ltffa73bi8]   { background: var(--ab); color: var(--am); }
.dad-chip-early[b-ltffa73bi8]  { background: #ffe4e6;   color: #ef4444;   }
.dad-chip-sched[b-ltffa73bi8]  { background: var(--bb); color: var(--bm); }
.dad-chip-absent[b-ltffa73bi8] { background: #fef2f2;   color: #ef4444;   }

/* Time rows */
.dad-times[b-ltffa73bi8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.dad-time-row[b-ltffa73bi8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink2);
}

.dad-time-row strong[b-ltffa73bi8] {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.dad-late-tag[b-ltffa73bi8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--am);
    background: var(--ab);
    padding: 1px 7px;
    border-radius: 10px;
}

.dad-sched-note[b-ltffa73bi8] {
    font-size: 12px;
    color: var(--bm);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
/* _content/SeasonFlow.Web/Components/Shared/GuideView.razor.rz.scp.css */
.gv-wrap[b-niuzywsqy8]{max-width:1180px;margin:0 auto;padding:20px 22px 60px;}

/* ── HERO ───────────────────────────────────────── */
.gv-hero[b-niuzywsqy8]{display:flex;align-items:center;gap:20px;border-radius:var(--rl);
    padding:26px 28px;margin-bottom:22px;border:1px solid var(--border);overflow:hidden;}
.gv-hero--blue[b-niuzywsqy8] {background:linear-gradient(160deg,var(--bb),#eef4fb);}
.gv-hero--green[b-niuzywsqy8]{background:linear-gradient(160deg,var(--gb),#f1f8e8);}
.gv-hero-txt[b-niuzywsqy8]{flex:1;min-width:0;}
.gv-hero-title[b-niuzywsqy8]{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.4px;margin-bottom:6px;}
.gv-hero-lead[b-niuzywsqy8]{font-size:13.5px;color:var(--ink2);line-height:1.55;max-width:560px;margin-bottom:16px;}
.gv-hero-art[b-niuzywsqy8]{flex-shrink:0;width:170px;}
.gv-hero-art svg[b-niuzywsqy8]{width:100%;height:auto;display:block;}

/* search */
.gv-search[b-niuzywsqy8]{position:relative;max-width:420px;}
.gv-search-ic[b-niuzywsqy8]{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:16px;}
.gv-search-in[b-niuzywsqy8]{width:100%;border:1px solid var(--border2);border-radius:var(--r);
    background:var(--card);padding:10px 36px 10px 36px;font-size:13.5px;color:var(--ink);
    font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s;}
.gv-search-in:focus[b-niuzywsqy8]{border-color:var(--bm);box-shadow:0 0 0 3px rgba(29,78,216,.12);}
.gv-search-clear[b-niuzywsqy8]{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    border:0;background:none;color:var(--ink3);cursor:pointer;padding:4px;border-radius:50%;display:flex;}
.gv-search-clear:hover[b-niuzywsqy8]{background:rgba(0,0,0,.06);color:var(--ink);}

/* ── 2-COLUMN LAYOUT ────────────────────────────── */
.gv-cols[b-niuzywsqy8]{display:flex;gap:24px;align-items:flex-start;}

/* table of contents */
.gv-toc[b-niuzywsqy8]{flex-shrink:0;width:228px;position:sticky;top:14px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:12px;}
.gv-toc-hd[b-niuzywsqy8]{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;color:var(--ink3);padding:4px 8px 10px;}
.gv-toc-item[b-niuzywsqy8]{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r);
    font-size:13px;color:var(--ink2);text-decoration:none;border-left:3px solid transparent;
    transition:background .12s,color .12s;}
.gv-toc-item i[b-niuzywsqy8]{font-size:16px;flex-shrink:0;}
.gv-toc-item:hover[b-niuzywsqy8]{background:var(--surface);color:var(--ink);}
.gv-toc-item--green:hover[b-niuzywsqy8]{border-left-color:var(--gm);}
.gv-toc-item--green i[b-niuzywsqy8]{color:var(--gm);}
.gv-toc-item--blue:hover[b-niuzywsqy8] {border-left-color:var(--bm);}
.gv-toc-item--blue  i[b-niuzywsqy8]{color:var(--bm);}
.gv-toc-item--amber:hover[b-niuzywsqy8]{border-left-color:var(--am);}
.gv-toc-item--amber i[b-niuzywsqy8]{color:var(--am);}
.gv-toc-item--red:hover[b-niuzywsqy8] {border-left-color:var(--red);}
.gv-toc-item--red   i[b-niuzywsqy8]{color:var(--red);}
.gv-toc-empty[b-niuzywsqy8]{padding:10px 8px;font-size:12.5px;color:var(--ink3);}

/* ── SECTION CARDS ──────────────────────────────── */
.gv-body[b-niuzywsqy8]{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}
.gv-sec[b-niuzywsqy8]{border:1px solid var(--border);border-radius:var(--rl);padding:18px 20px;
    border-left:3px solid var(--border2);scroll-margin-top:14px;}
.gv-sec--green[b-niuzywsqy8]{background:var(--gb);border-left-color:var(--gm);}
.gv-sec--blue[b-niuzywsqy8] {background:var(--bb);border-left-color:var(--bm);}
.gv-sec--amber[b-niuzywsqy8]{background:var(--ab);border-left-color:var(--am);}
.gv-sec--red[b-niuzywsqy8]  {background:var(--rb);border-left-color:var(--red);}

.gv-sec-hd[b-niuzywsqy8]{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px;}
.gv-sec-ic[b-niuzywsqy8]{flex-shrink:0;width:42px;height:42px;border-radius:11px;display:flex;
    align-items:center;justify-content:center;font-size:22px;background:var(--card);}
.gv-sec-ic--green[b-niuzywsqy8]{color:var(--gm);}
.gv-sec-ic--blue[b-niuzywsqy8] {color:var(--bm);}
.gv-sec-ic--amber[b-niuzywsqy8]{color:var(--am);}
.gv-sec-ic--red[b-niuzywsqy8]  {color:var(--red);}
.gv-sec-hd-txt[b-niuzywsqy8]{min-width:0;padding-top:1px;}
.gv-sec-title[b-niuzywsqy8]{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.2px;}
.gv-sec-sum[b-niuzywsqy8]{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:2px;}

/* numbered steps */
.gv-steps[b-niuzywsqy8]{list-style:none;margin:0;padding:0;counter-reset:gv;display:flex;flex-direction:column;gap:9px;}
.gv-step[b-niuzywsqy8]{display:flex;gap:11px;align-items:flex-start;}
.gv-step-n[b-niuzywsqy8]{counter-increment:gv;flex-shrink:0;width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
    color:#fff;margin-top:1px;}
.gv-step-n[b-niuzywsqy8]::before{content:counter(gv);}
.gv-step-n--green[b-niuzywsqy8]{background:var(--gm);}
.gv-step-n--blue[b-niuzywsqy8] {background:var(--bm);}
.gv-step-n--amber[b-niuzywsqy8]{background:var(--am);}
.gv-step-n--red[b-niuzywsqy8]  {background:var(--red);}
.gv-step-tx[b-niuzywsqy8]{font-size:13.5px;color:var(--ink);line-height:1.6;padding-top:1px;}

/* tip box */
.gv-tip[b-niuzywsqy8]{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;
    border-radius:var(--r);background:var(--card);font-size:12.5px;color:var(--ink2);line-height:1.55;}
.gv-tip i[b-niuzywsqy8]{font-size:17px;flex-shrink:0;margin-top:1px;}
.gv-tip--green i[b-niuzywsqy8]{color:var(--gm);}
.gv-tip--blue  i[b-niuzywsqy8]{color:var(--bm);}
.gv-tip--amber i[b-niuzywsqy8]{color:var(--am);}
.gv-tip--red   i[b-niuzywsqy8]{color:var(--red);}

/* search highlight */
.gv-mark[b-niuzywsqy8]{background:#fde9c8;color:var(--ink);border-radius:3px;padding:0 2px;font-weight:600;}

/* empty state */
.gv-empty[b-niuzywsqy8]{text-align:center;padding:46px 20px;background:var(--card);
    border:1px dashed var(--border2);border-radius:var(--rl);}
.gv-empty-svg[b-niuzywsqy8]{width:140px;height:auto;margin-bottom:8px;}
.gv-empty-t[b-niuzywsqy8]{font-size:15px;font-weight:700;color:var(--ink);}
.gv-empty-s[b-niuzywsqy8]{font-size:12.5px;color:var(--ink3);margin-top:4px;}

/* responsive */
@media (max-width:860px){
    .gv-cols[b-niuzywsqy8]{flex-direction:column;}
    .gv-toc[b-niuzywsqy8]{position:static;width:100%;}
    .gv-hero[b-niuzywsqy8]{flex-direction:column;text-align:center;}
    .gv-hero-art[b-niuzywsqy8]{width:120px;}
    .gv-search[b-niuzywsqy8]{margin:0 auto;}
}
/* _content/SeasonFlow.Web/Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.lang-switch[b-ozbmrmuh6m] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--bb);
    border: 1px solid var(--border);
    border-radius: var(--r);
}

.lang-opt[b-ozbmrmuh6m] {
    border: 0;
    background: transparent;
    color: var(--ink3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 4px 9px;
    border-radius: calc(var(--r) - 2px);
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.lang-opt:hover:not(:disabled)[b-ozbmrmuh6m] {
    color: var(--bm);
}

.lang-opt.on[b-ozbmrmuh6m] {
    background: #fff;
    color: var(--bm);
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
/* _content/SeasonFlow.Web/Components/Shared/ModalBanner.razor.rz.scp.css */
.mbanner[b-eeecie2anc] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: .5px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(160deg, var(--bb), #eef4fb);
}
.mbanner--blue[b-eeecie2anc]  { background: linear-gradient(160deg, var(--bb), #eef4fb); }
.mbanner--green[b-eeecie2anc] { background: linear-gradient(160deg, var(--gb), #eef7e6); }
.mbanner--amber[b-eeecie2anc] { background: linear-gradient(160deg, var(--ab), #fdf3e3); }
.mbanner--red[b-eeecie2anc]   { background: linear-gradient(160deg, var(--rb), #fdeeee); }

.mbanner-art[b-eeecie2anc] { flex-shrink: 0; }
.mbanner-art[b-eeecie2anc]  svg { width: 62px; height: 62px; display: block; }

.mbanner-title[b-eeecie2anc] { margin: 0; }
.mbanner-cap[b-eeecie2anc] {
    font-size: 12.5px;
    color: var(--ink2);
    line-height: 1.45;
    margin-top: 3px;
}
/* _content/SeasonFlow.Web/Components/Shared/PortalThemePicker.razor.rz.scp.css */
/* ── PortalThemePicker dropdown ── */

.ptp-wrap[b-g4w1lif2ln] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Trigger button ── */
.ptp-trigger[b-g4w1lif2ln] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 8px;
    border: 1px solid rgba(15,32,39,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.80);
    cursor: pointer;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink2);
    transition: background .12s, border-color .12s, box-shadow .12s;
    white-space: nowrap;
    line-height: 1;
}
.ptp-trigger:hover[b-g4w1lif2ln] {
    background: rgba(255,255,255,.96);
    border-color: rgba(15,32,39,.18);
    box-shadow: 0 2px 8px rgba(15,32,39,.06);
}

.ptp-swatch[b-g4w1lif2ln] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.ptp-trigger-label[b-g4w1lif2ln] {
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ptp-chevron[b-g4w1lif2ln] {
    font-size: 12px;
    color: #94a3b8;
    transition: transform .18s;
    flex-shrink: 0;
}
.ptp-chevron-open[b-g4w1lif2ln] { transform: rotate(180deg); }

/* ── Dropdown panel ── */
.ptp-dropdown[b-g4w1lif2ln] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,32,39,.09);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15,32,39,.12), 0 2px 8px rgba(15,32,39,.06);
    z-index: 400;
    overflow: hidden;
    padding: 6px;
    animation: ptp-in-b-g4w1lif2ln .13s ease;
}

@keyframes ptp-in-b-g4w1lif2ln {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.ptp-dropdown-title[b-g4w1lif2ln] {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 8px 6px;
}

/* ── Item row ── */
.ptp-item[b-g4w1lif2ln] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink2);
    text-align: left;
    transition: background .10s, color .10s;
}
.ptp-item:hover[b-g4w1lif2ln] { background: rgba(15,32,39,.04); color: var(--ink); }

.ptp-item-on[b-g4w1lif2ln] {
    background: rgba(15,32,39,.05) !important;
    color: var(--ink) !important;
    font-weight: 700;
}

.ptp-item-swatch[b-g4w1lif2ln] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.ptp-item-label[b-g4w1lif2ln] { flex: 1; }

.ptp-item-chk[b-g4w1lif2ln] {
    font-size: 13px;
    color: var(--ink2);
    flex-shrink: 0;
}

/* ── Mobile: push dropdown to left if near right edge ── */
@media (max-width: 480px) {
    .ptp-trigger-label[b-g4w1lif2ln] { display: none; }
    .ptp-trigger[b-g4w1lif2ln] { padding: 5px 7px; }
    .ptp-dropdown[b-g4w1lif2ln] { right: auto; left: 0; }
}
/* _content/SeasonFlow.Web/Components/Shared/WeeklyAttendanceChart.razor.rz.scp.css */
.wac-wrap[b-a7fl7ac765] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Header */
.wac-hd[b-a7fl7ac765] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.wac-drop-btn[b-a7fl7ac765] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid rgba(15,32,39,.12);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15,32,39,.04);
}
.wac-drop-btn:hover[b-a7fl7ac765] { border-color: rgba(20,184,166,.45); background: #fff; box-shadow: 0 4px 12px rgba(15,32,39,.08); }

.wac-drop-list[b-a7fl7ac765] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,32,39,.08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15,32,39,.12);
    padding: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.wac-drop-item[b-a7fl7ac765] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    width: 100%;
}
.wac-drop-item:hover[b-a7fl7ac765] { background: rgba(16,185,129,.06); color: var(--ink); }

.wac-drop-active[b-a7fl7ac765] {
    background: rgba(16,185,129,.08) !important;
    color: #0f766e !important;
    font-weight: 700;
}

.wac-drop-now[b-a7fl7ac765] {
    font-size: 10px;
    font-weight: 700;
    background: #14b8a6;
    color: white;
    padding: 2px 8px;
    border-radius: 8px;
    margin-right: 2px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(20,184,166,.25);
}

.wac-loading[b-a7fl7ac765] {
    text-align: center;
    padding: 40px;
    color: #64748b;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Stats strip */
.wac-stats[b-a7fl7ac765] {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.wac-stat[b-a7fl7ac765] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 14px;
    border-radius: 16px;
    border: 1px solid rgba(15,32,39,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.96), #f8fafc);
    box-shadow: 0 10px 24px rgba(15,32,39,.06);
    transition: transform .15s, box-shadow .15s;
}
.wac-stat:hover[b-a7fl7ac765] { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15,32,39,.09); }

.wac-stat-teal[b-a7fl7ac765] {
    background:
        radial-gradient(circle at 50% 20%, rgba(20,184,166,.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.96), #f0fdfa);
    border-color: rgba(20,184,166,.25);
}
.wac-stat-teal .wac-stat-num[b-a7fl7ac765] { color: #0f766e; }
.wac-stat-teal .wac-stat-unit[b-a7fl7ac765] { color: #14b8a6; }
.wac-stat-teal .wac-stat-lbl[b-a7fl7ac765] { color: #0d9488; }

.wac-stat-blue[b-a7fl7ac765] {
    background:
        radial-gradient(circle at 50% 20%, rgba(37,99,235,.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.96), #eff6ff);
    border-color: rgba(37,99,235,.20);
}
.wac-stat-blue .wac-stat-num[b-a7fl7ac765] { color: #1d4ed8; }
.wac-stat-blue .wac-stat-unit[b-a7fl7ac765] { color: #60a5fa; }
.wac-stat-blue .wac-stat-lbl[b-a7fl7ac765] { color: #2563eb; }

.wac-stat-amber[b-a7fl7ac765] {
    background:
        radial-gradient(circle at 50% 20%, rgba(245,158,11,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.96), #fffbeb);
    border-color: rgba(245,158,11,.22);
}
.wac-stat-amber .wac-stat-num[b-a7fl7ac765] { color: #b45309; }
.wac-stat-amber .wac-stat-unit[b-a7fl7ac765] { color: #f59e0b; }
.wac-stat-amber .wac-stat-lbl[b-a7fl7ac765] { color: #d97706; }

.wac-stat-num[b-a7fl7ac765] {
    font-size: 28px;
    font-weight: 900;
    font-family: var(--mono);
    letter-spacing: -1px;
    line-height: 1;
}

.wac-stat-unit[b-a7fl7ac765] {
    font-size: 14px;
    font-weight: 600;
    margin-left: 3px;
}

.wac-stat-lbl[b-a7fl7ac765] {
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wac-stat-div[b-a7fl7ac765] { display: none; }

/* Body: chart + day list */
.wac-body[b-a7fl7ac765] {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.wac-chart-panel[b-a7fl7ac765] {
    flex: 1;
    min-width: 0;
}

.wac-bar-svg[b-a7fl7ac765] {
    width: 100%;
    height: auto;
    display: block;
    max-height: 260px;
}

/* Day list */
.wac-day-list[b-a7fl7ac765] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wac-day-item[b-a7fl7ac765] {
    display: flex;
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at 4% 50%, rgba(20,184,166,.08), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.96), #f8fafc);
    border-radius: 16px;
    padding: 14px 18px;
    border: 1px solid rgba(15,32,39,.08);
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
    cursor: pointer;
    width: 100%;
    font-family: var(--font);
    text-align: left;
    min-width: 0;
}

.wac-day-item:hover[b-a7fl7ac765] {
    background:
        radial-gradient(circle at 4% 50%, rgba(20,184,166,.14), transparent 40%),
        linear-gradient(180deg, #fff, #f2fbf8);
    border-color: rgba(16,185,129,.30);
    box-shadow: 0 10px 24px rgba(15,32,39,.08);
    transform: translateY(-1px);
}

.wac-dd-hd[b-a7fl7ac765] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.wac-back-btn[b-a7fl7ac765] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color .12s;
}
.wac-back-btn:hover[b-a7fl7ac765] { color: var(--ink); }

.wac-dd-title[b-a7fl7ac765] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
}

.wac-day-today[b-a7fl7ac765] {
    border-color: rgba(20,184,166,.45) !important;
    background:
        radial-gradient(circle at 4% 50%, rgba(20,184,166,.16), transparent 35%),
        linear-gradient(180deg, #ffffff, #e8f5f0) !important;
    box-shadow: 0 10px 24px rgba(20,184,166,.10);
}

.wac-day-weekend[b-a7fl7ac765] { opacity: .78; }

.wac-day-icon[b-a7fl7ac765] {
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 12%, #fff);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wac-day-info[b-a7fl7ac765] { flex: 1; min-width: 0; }

.wac-day-name[b-a7fl7ac765] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 3px;
}

.wac-day-date[b-a7fl7ac765] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wac-day-right[b-a7fl7ac765] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    min-width: fit-content;
}

.wac-day-badge[b-a7fl7ac765] {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wac-day-sub[b-a7fl7ac765] {
    font-size: 13px;
    font-family: var(--mono);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .wac-wrap[b-a7fl7ac765] { gap: 14px; }

    /* Header: dropdown full width */
    .wac-hd[b-a7fl7ac765] { flex-direction: column; align-items: stretch; gap: 8px; }
    .wac-drop-btn[b-a7fl7ac765] { width: 100%; justify-content: space-between; }
    .wac-drop-list[b-a7fl7ac765] { left: 0; right: 0; min-width: unset; }

    /* Stats: 3 cards in a row but smaller */
    .wac-stats[b-a7fl7ac765] { gap: 8px; }
    .wac-stat[b-a7fl7ac765] { padding: 14px 8px; gap: 4px; border-radius: 14px; }
    .wac-stat-num[b-a7fl7ac765] { font-size: 22px; }
    .wac-stat-unit[b-a7fl7ac765] { font-size: 12px; }
    .wac-stat-lbl[b-a7fl7ac765] { font-size: 10px; }

    /* Body: chart stacks on top, list below */
    .wac-body[b-a7fl7ac765] { flex-direction: column; gap: 14px; }

    /* Chart shorter on mobile */
    .wac-bar-svg[b-a7fl7ac765] { max-width: 100%; }
    .wac-chart-panel[b-a7fl7ac765] { width: 100%; }

    /* Day list full width */
    .wac-day-list[b-a7fl7ac765] { width: 100%; }
    .wac-day-item[b-a7fl7ac765] { padding: 12px 14px; gap: 10px; min-height: 64px; }
    .wac-day-icon[b-a7fl7ac765] { font-size: 14px; width: 34px; height: 34px; border-radius: 10px; }
    .wac-day-name[b-a7fl7ac765] { font-size: 14px; }
    .wac-day-date[b-a7fl7ac765] { font-size: 11px; }
    .wac-day-badge[b-a7fl7ac765] { font-size: 10px; padding: 2px 8px; }
    .wac-day-sub[b-a7fl7ac765] { font-size: 11px; }

    /* Day detail back header */
    .wac-dd-hd[b-a7fl7ac765] { margin-bottom: 10px; }
    .wac-dd-title[b-a7fl7ac765] { font-size: 14px; }
}