/* Final theme-aware surfaces. Loaded after module styles so legacy fixed colours cannot win. */

/* Soft professional palettes. These remain deliberately light while retaining
   a medium-tone navigation colour so white labels always remain readable. */
html[data-theme="sage"] {
    --app-bg:#f3f7f2; --surface:#ffffff; --surface-2:#eaf2e9; --surface-3:#dce9db;
    --text-main:#26372f; --text-muted:#64766c; --theme-line:#cfded2; --topbar-bg:rgba(255,255,255,.96);
    --ink:#26372f; --ink-soft:#64766c; --paper:#ffffff; --cream:#f3f7f2; --line:#cfded2;
    --teal:#4f7864; --teal-bright:#82a88f; --teal-pale:#e2eee5; --navy:#344b40; --navy-2:#4d6b5b;
    --violet:#74749a; --violet-pale:#eeedf6; --shadow:0 16px 42px rgba(55,80,66,.11); --shadow-sm:0 7px 22px rgba(55,80,66,.08); color-scheme:light;
}
html[data-theme="cloud"] {
    --app-bg:#f2f7fb; --surface:#ffffff; --surface-2:#e8f0f7; --surface-3:#d9e6f1;
    --text-main:#253547; --text-muted:#63768a; --theme-line:#cbd9e5; --topbar-bg:rgba(255,255,255,.96);
    --ink:#253547; --ink-soft:#63768a; --paper:#ffffff; --cream:#f2f7fb; --line:#cbd9e5;
    --teal:#527da6; --teal-bright:#7fa9cc; --teal-pale:#e3eef8; --navy:#354b62; --navy-2:#4c6c8c;
    --violet:#7077ad; --violet-pale:#ebedf8; --shadow:0 16px 42px rgba(49,77,104,.11); --shadow-sm:0 7px 22px rgba(49,77,104,.08); color-scheme:light;
}
html[data-theme="lavender"] {
    --app-bg:#f8f5fb; --surface:#ffffff; --surface-2:#f0eaf5; --surface-3:#e5dced;
    --text-main:#392f43; --text-muted:#75677f; --theme-line:#ddd1e5; --topbar-bg:rgba(255,255,255,.96);
    --ink:#392f43; --ink-soft:#75677f; --paper:#ffffff; --cream:#f8f5fb; --line:#ddd1e5;
    --teal:#79628e; --teal-bright:#aa8fbd; --teal-pale:#eee5f4; --navy:#4b3d56; --navy-2:#685676;
    --violet:#7f6ba3; --violet-pale:#eee8f6; --shadow:0 16px 42px rgba(76,58,88,.11); --shadow-sm:0 7px 22px rgba(76,58,88,.08); color-scheme:light;
}
html[data-theme="peach"] {
    --app-bg:#fff7f1; --surface:#fffefd; --surface-2:#f9ede4; --surface-3:#f1ddd0;
    --text-main:#44342e; --text-muted:#7d6a61; --theme-line:#e6d4c8; --topbar-bg:rgba(255,254,252,.96);
    --ink:#44342e; --ink-soft:#7d6a61; --paper:#fffefd; --cream:#fff7f1; --line:#e6d4c8;
    --teal:#9a6554; --teal-bright:#c58b73; --teal-pale:#f7e5dc; --navy:#59423a; --navy-2:#78584c;
    --coral:#c56d60; --coral-pale:#fae6e1; --violet:#806f94; --violet-pale:#f0ebf4; --shadow:0 16px 42px rgba(91,62,50,.11); --shadow-sm:0 7px 22px rgba(91,62,50,.08); color-scheme:light;
}
html[data-theme="mint"] {
    --app-bg:#f0f9f6; --surface:#ffffff; --surface-2:#e3f3ee; --surface-3:#d3e9e2;
    --text-main:#213b35; --text-muted:#607a73; --theme-line:#c7ded7; --topbar-bg:rgba(252,255,254,.96);
    --ink:#213b35; --ink-soft:#607a73; --paper:#ffffff; --cream:#f0f9f6; --line:#c7ded7;
    --teal:#397c6b; --teal-bright:#6eaa99; --teal-pale:#dcf0ea; --navy:#2c5148; --navy-2:#3f6f63;
    --violet:#687caa; --violet-pale:#e9edf8; --shadow:0 16px 42px rgba(42,86,75,.11); --shadow-sm:0 7px 22px rgba(42,86,75,.08); color-scheme:light;
}

html:is([data-theme="sage"],[data-theme="cloud"],[data-theme="lavender"],[data-theme="peach"],[data-theme="mint"]) :is(
    .sidebar,.login-story,.school-brand-story,.staff-login-story,.order-summary,.recon-commandbar,
    .recon-modal .modal-header,.finance-detail-modal .modal-header,.student-menu-head,.beyond-login-story
) { background:linear-gradient(150deg,var(--navy),var(--navy-2) 68%,color-mix(in srgb,var(--teal) 78%,#fff)) !important; }

html:is([data-theme="sage"],[data-theme="cloud"],[data-theme="lavender"],[data-theme="peach"],[data-theme="mint"]) :is(
    .reminder-hero,.finance-pulse,.waterfall-result,.recon-batch-board
) { background:linear-gradient(122deg,var(--navy),var(--teal)) !important; }

.theme-menu-palette.sage i:nth-child(1),.palette-swatches.sage i:nth-child(1){background:#344b40}.theme-menu-palette.sage i:nth-child(2),.palette-swatches.sage i:nth-child(2){background:#648a72}.theme-menu-palette.sage i:nth-child(3),.palette-swatches.sage i:nth-child(3){background:#f3f7f2}.palette-swatches.sage i:nth-child(4){background:#fff}.palette-swatches.sage i:nth-child(5){background:#82a88f}
.theme-menu-palette.cloud i:nth-child(1),.palette-swatches.cloud i:nth-child(1){background:#354b62}.theme-menu-palette.cloud i:nth-child(2),.palette-swatches.cloud i:nth-child(2){background:#668fb5}.theme-menu-palette.cloud i:nth-child(3),.palette-swatches.cloud i:nth-child(3){background:#f2f7fb}.palette-swatches.cloud i:nth-child(4){background:#fff}.palette-swatches.cloud i:nth-child(5){background:#7fa9cc}
.theme-menu-palette.lavender i:nth-child(1),.palette-swatches.lavender i:nth-child(1){background:#4b3d56}.theme-menu-palette.lavender i:nth-child(2),.palette-swatches.lavender i:nth-child(2){background:#8a71a0}.theme-menu-palette.lavender i:nth-child(3),.palette-swatches.lavender i:nth-child(3){background:#f8f5fb}.palette-swatches.lavender i:nth-child(4){background:#fff}.palette-swatches.lavender i:nth-child(5){background:#aa8fbd}
.theme-menu-palette.peach i:nth-child(1),.palette-swatches.peach i:nth-child(1){background:#59423a}.theme-menu-palette.peach i:nth-child(2),.palette-swatches.peach i:nth-child(2){background:#a97461}.theme-menu-palette.peach i:nth-child(3),.palette-swatches.peach i:nth-child(3){background:#fff7f1}.palette-swatches.peach i:nth-child(4){background:#fff}.palette-swatches.peach i:nth-child(5){background:#c58b73}
.theme-menu-palette.mint i:nth-child(1),.palette-swatches.mint i:nth-child(1){background:#2c5148}.theme-menu-palette.mint i:nth-child(2),.palette-swatches.mint i:nth-child(2){background:#4f8e7d}.theme-menu-palette.mint i:nth-child(3),.palette-swatches.mint i:nth-child(3){background:#f0f9f6}.palette-swatches.mint i:nth-child(4){background:#fff}.palette-swatches.mint i:nth-child(5){background:#6eaa99}

.appearance-preview.sage{background:#f3f7f2}.appearance-preview.sage .preview-sidebar{background:#344b40}.appearance-preview.sage .preview-surface{background:#fff}.appearance-preview.sage .preview-accent{background:#82a88f}
.appearance-preview.cloud{background:#f2f7fb}.appearance-preview.cloud .preview-sidebar{background:#354b62}.appearance-preview.cloud .preview-surface{background:#fff}.appearance-preview.cloud .preview-accent{background:#7fa9cc}
.appearance-preview.lavender{background:#f8f5fb}.appearance-preview.lavender .preview-sidebar{background:#4b3d56}.appearance-preview.lavender .preview-surface{background:#fff}.appearance-preview.lavender .preview-accent{background:#aa8fbd}
.appearance-preview.peach{background:#fff7f1}.appearance-preview.peach .preview-sidebar{background:#59423a}.appearance-preview.peach .preview-surface{background:#fff}.appearance-preview.peach .preview-accent{background:#c58b73}
.appearance-preview.mint{background:#f0f9f6}.appearance-preview.mint .preview-sidebar{background:#2c5148}.appearance-preview.mint .preview-surface{background:#fff}.appearance-preview.mint .preview-accent{background:#6eaa99}
html[data-theme] .hr-suite {
    --hr-blue: var(--teal);
    --hr-cyan: var(--teal-bright);
}

html[data-theme] :is(
    .hr-command-hero,
    .payroll-hero,
    .employee-self-hero,
    .probation-command-hero,
    .deduction-review-hero,
    .payroll-studio-head,
    .approval-command-head,
    .work-dashboard-hero,
    .my-leave-hero,
    .learning-hero,
    .teacher-command-hero,
    .care-hero,
    .assessment-hero,
    .result-intelligence-hero,
    .assignment-hero,
    .event-hero,
    .pta-hero,
    .parent-card-hero,
    .transport-hero,
    .tw-hero,
    .tp-hero,
    .shared-device-hero,
    .pickup-hero,
    .notification-hero,
    .reminder-hero,
    .rollover-hero,
    .account-hero,
    .action-centre-hero,
    .accounting-hero,
    .dynamic-hero
) {
    background:linear-gradient(112deg,var(--surface),color-mix(in srgb,var(--teal) 5%,var(--surface))) !important;
    border:1px solid var(--theme-line) !important;
    border-left:4px solid color-mix(in srgb,var(--teal) 72%,var(--navy)) !important;
    color:var(--text-main) !important;
    box-shadow:var(--shadow-sm) !important;
}

html[data-theme] :is(
    .hr-command-hero,
    .payroll-hero,
    .employee-self-hero,
    .probation-command-hero,
    .deduction-review-hero,
    .payroll-studio-head,
    .approval-command-head,
    .work-dashboard-hero,
    .my-leave-hero,
    .learning-hero,
    .teacher-command-hero,
    .care-hero,
    .assessment-hero,
    .result-intelligence-hero,
    .assignment-hero,
    .event-hero,
    .pta-hero,
    .parent-card-hero,
    .transport-hero,
    .tw-hero,
    .tp-hero,
    .shared-device-hero,
    .pickup-hero,
    .notification-hero,
    .reminder-hero,
    .rollover-hero,
    .account-hero,
    .action-centre-hero,
    .accounting-hero,
    .dynamic-hero
) :is(h1,h2,h3,strong) { color:var(--text-main) !important; }

html[data-theme] :is(
    .hr-command-hero,
    .payroll-hero,
    .employee-self-hero,
    .probation-command-hero,
    .deduction-review-hero,
    .payroll-studio-head,
    .approval-command-head,
    .work-dashboard-hero,
    .my-leave-hero,
    .learning-hero,
    .teacher-command-hero,
    .care-hero,
    .assessment-hero,
    .result-intelligence-hero,
    .assignment-hero,
    .event-hero,
    .pta-hero,
    .parent-card-hero,
    .transport-hero,
    .tw-hero,
    .tp-hero,
    .shared-device-hero,
    .pickup-hero,
    .notification-hero,
    .reminder-hero,
    .rollover-hero,
    .account-hero,
    .action-centre-hero,
    .accounting-hero,
    .dynamic-hero
) :is(p,small) { color:var(--text-muted) !important; }

html[data-theme] :is(
    .hr-command-hero,.payroll-hero,.employee-self-hero,.probation-command-hero,.deduction-review-hero,.payroll-studio-head,.approval-command-head,
    .work-dashboard-hero,.my-leave-hero,.learning-hero,.teacher-command-hero,.care-hero,.assessment-hero,
    .result-intelligence-hero,.assignment-hero,.event-hero,.pta-hero,.parent-card-hero,.transport-hero,
    .tw-hero,.tp-hero,.shared-device-hero,.pickup-hero,.notification-hero,.reminder-hero,.rollover-hero,
    .account-hero,.action-centre-hero,.accounting-hero,.dynamic-hero
) .section-kicker { color:var(--teal) !important; }

html[data-theme] :is(.hr-command-hero,.payroll-hero,.employee-self-hero) > div:first-child > small,
html[data-theme] :is(.hr-command-hero,.payroll-hero,.employee-self-hero) .section-kicker {
    color:var(--teal) !important;
}

html[data-theme] .hr-live-status { color:var(--text-muted) !important; }
html[data-theme] .hr-live-status i { color:var(--teal); }

/* Hero controls follow the same quiet report-workspace treatment. */
html[data-theme] .deduction-review-hero label > span { color:var(--text-muted) !important; }
html[data-theme] .deduction-review-hero input {
    border-color:var(--theme-line) !important;
    background:var(--surface) !important;
    color:var(--text-main) !important;
    color-scheme:light;
}

/* Actions and embedded summaries inside the clean introduction panels. */
html[data-theme] :is(.payroll-studio-head,.notification-hero,.reminder-hero) .outline-button,
html[data-theme] :is(.payroll-studio-head,.notification-hero,.reminder-hero) .primary-button {
    border-color:color-mix(in srgb,var(--teal) 35%,var(--theme-line)) !important;
    background:color-mix(in srgb,var(--teal) 7%,var(--surface)) !important;
    color:var(--teal) !important;
    box-shadow:none !important;
}

html[data-theme] :is(.rollover-metrics,.priority-stack) span,
html[data-theme] .account-avatar,
html[data-theme] .dynamic-hero > div:first-child > span {
    border-color:var(--theme-line) !important;
    background:var(--surface-2) !important;
    color:var(--teal) !important;
}

html[data-theme] .account-balance :is(strong,span) { color:var(--text-main) !important; }

/* Identity and work-clock controls must never retain the legacy blue palette. */
html[data-theme] :is(.school-chip .school-monogram,.parent-student-initials,.family-avatar,.parent-picker-avatar,.tp-students button span) {
    background:var(--teal-pale) !important;
    color:var(--teal) !important;
    border-color:color-mix(in srgb,var(--teal) 25%,var(--theme-line)) !important;
}
html[data-theme] :is(.student-avatar,.parent-picker-student.selected .parent-picker-avatar,.tp-students button.active span) {
    background:var(--teal) !important;
    color:#fff !important;
    box-shadow:0 5px 14px color-mix(in srgb,var(--teal) 16%,transparent) !important;
}
html[data-theme] .user-avatar {
    border:1px solid color-mix(in srgb,var(--teal) 45%,var(--theme-line));
    background:linear-gradient(145deg,var(--teal),color-mix(in srgb,var(--teal-bright) 70%,var(--teal))) !important;
    color:#fff !important;
    box-shadow:0 6px 16px color-mix(in srgb,var(--teal) 20%,transparent);
}

html[data-theme] .attendance-clock {
    --work-blue:var(--teal) !important;
    --work-cyan:var(--teal-bright) !important;
}

html[data-theme] .attendance-clock.not_started .attendance-clock-action {
    background:linear-gradient(145deg,var(--teal),color-mix(in srgb,var(--teal-bright) 62%,var(--teal))) !important;
    border-color:color-mix(in srgb,var(--teal) 70%,var(--navy)) !important;
    color:#fff !important;
    box-shadow:0 7px 18px color-mix(in srgb,var(--teal) 25%,transparent) !important;
}

/* The gate scanner is a safety-critical action. Keep it unmistakable in every
   palette instead of allowing a soft theme button to blend into the card. */
html[data-theme] #pickupStartCamera {
    min-height:48px;
    border:1px solid color-mix(in srgb,var(--teal) 70%,var(--navy)) !important;
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--teal) 78%,var(--navy)),
        var(--navy)
    ) !important;
    color:#fff !important;
    font-size:.9rem;
    font-weight:850;
    letter-spacing:.01em;
    box-shadow:0 10px 22px color-mix(in srgb,var(--navy) 25%,transparent) !important;
}

html[data-theme] #pickupStartCamera i {
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.14);
    color:#fff !important;
    font-size:1rem;
}

html[data-theme] #pickupStartCamera:hover {
    border-color:var(--navy) !important;
    background:linear-gradient(135deg,var(--navy),color-mix(in srgb,var(--navy) 78%,#000)) !important;
    color:#fff !important;
    box-shadow:0 13px 28px color-mix(in srgb,var(--navy) 32%,transparent) !important;
}

html[data-theme] #pickupStartCamera:focus-visible {
    outline:3px solid color-mix(in srgb,var(--teal-bright) 58%,#fff);
    outline-offset:3px;
}

@media(max-width:640px) {
    html[data-theme] #pickupStartCamera {
        min-height:50px;
        font-size:.92rem;
    }
}

html[data-theme] .hr-suite .hr-tabs {
    background:color-mix(in srgb,var(--surface) 94%,var(--teal)) !important;
    border-color:var(--theme-line) !important;
}

html[data-theme] .hr-suite .hr-tabs a {
    border-color:transparent !important;
    color:var(--text-muted) !important;
    background:transparent !important;
}

html[data-theme] .hr-suite .hr-tabs a:hover {
    border-color:color-mix(in srgb,var(--teal) 22%,var(--theme-line)) !important;
    color:var(--text-main) !important;
    background:var(--surface-2) !important;
}

html[data-theme] .hr-suite .hr-tabs a.active,
html[data-theme] .hr-suite .hr-tabs a.active:hover,
html[data-theme] .hr-suite .hr-tabs a.active:focus {
    border-color:color-mix(in srgb,var(--teal) 64%,var(--navy)) !important;
    color:#fff !important;
    background:color-mix(in srgb,var(--teal) 58%,var(--navy)) !important;
    background-image:linear-gradient(
        135deg,
        color-mix(in srgb,var(--teal) 58%,var(--navy)),
        color-mix(in srgb,var(--teal-bright) 32%,var(--navy-2))
    ) !important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--teal) 24%,transparent) !important;
}

html[data-theme] .hr-suite .hr-tabs a.active :is(i,span) { color:#fff !important; }
html[data-theme] .hr-suite .hr-tabs a.active em {
    color:var(--teal) !important;
    background:var(--surface) !important;
    border-color:rgba(255,255,255,.42) !important;
}

/* Keep the same balanced active treatment on other primary module navigation. */
html[data-theme] :is(.control-tabs a.active,.parent-card-tabs a.active) {
    border-color:color-mix(in srgb,var(--teal) 64%,var(--navy)) !important;
    color:#fff !important;
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--teal) 58%,var(--navy)),
        color-mix(in srgb,var(--teal-bright) 32%,var(--navy-2))
    ) !important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--teal) 24%,transparent) !important;
}

html[data-theme] :is(.control-tabs a.active,.parent-card-tabs a.active) :is(i,span) { color:#fff !important; }

@media(max-width:767px) {
    html[data-theme] .hr-suite .hr-tabs { padding:7px; }
    html[data-theme] .hr-suite .hr-tabs a { min-height:52px; }
}

/* Probation is an operational worklist: keep the controls above it compact so
   the first employee rows remain visible without an initial page scroll. */
@media(min-width:768px) {
    .hr-tab-probation { padding-top:20px; }
    .hr-tab-probation .hr-heading {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:18px;
        margin-bottom:10px;
    }
    .hr-tab-probation .hr-heading > div:first-child { flex:1; min-width:0; }
    .hr-tab-probation .hr-heading-actions { flex:0 0 auto; width:auto; }
    .hr-tab-probation .hr-heading .eyebrow { font-size:11px; }
    .hr-tab-probation .hr-heading h1 {
        margin:2px 0 3px;
        font-size:40px;
        line-height:1.2;
    }
    .hr-tab-probation .hr-heading p {
        margin:0;
        font-size:16px;
        line-height:1.5;
    }
    .hr-tab-probation .hr-heading-actions :is(.outline-button,.primary-button) {
        min-height:38px;
        padding:8px 12px;
        font-size:12px;
    }
    html[data-theme] .hr-tab-probation .hr-tabs {
        gap:6px;
        margin:10px 0 12px;
        padding:6px;
        border-radius:16px;
    }
    html[data-theme] .hr-tab-probation .hr-tabs a {
        min-height:46px;
        padding:7px 9px;
        border-radius:11px;
        font-size:.78rem;
    }
    .hr-tab-probation .hr-tabs a > i { font-size:14px; }
    .hr-tab-probation .probation-command-hero {
        min-height:0;
        gap:14px;
        margin-bottom:10px;
        padding:12px 16px;
        border-radius:16px;
    }
    .hr-tab-probation .probation-command-hero .section-kicker { font-size:10px; }
    .hr-tab-probation .probation-command-hero h2 {
        margin:2px 0;
        font-size:clamp(1.45rem,2vw,2rem);
        line-height:1.2;
    }
    .hr-tab-probation .probation-command-hero p {
        font-size:16px;
        line-height:1.5;
    }
    .hr-tab-probation .probation-export-link {
        display:inline-flex;
        min-height:26px;
        margin-top:5px;
        padding:4px 8px;
        border-color:color-mix(in srgb,var(--teal) 30%,var(--theme-line));
        background:color-mix(in srgb,var(--teal) 6%,var(--surface));
        color:var(--teal);
        font-size:.73rem;
    }
    .hr-tab-probation .probation-route-summary {
        gap:6px;
        max-width:52%;
    }
    .hr-tab-probation .probation-route-summary > span {
        grid-template-columns:25px minmax(85px,1fr);
        min-width:128px;
        padding:5px 7px;
        border-color:var(--theme-line);
        background:var(--surface-2);
    }
    .hr-tab-probation .probation-route-summary b {
        width:25px;
        height:25px;
        border-radius:7px;
        color:#fff;
        background:var(--teal);
        font-size:10px;
    }
    .hr-tab-probation .probation-route-summary small {
        color:var(--text-muted) !important;
        font-size:.68rem;
        line-height:1.25;
    }
    .hr-tab-probation .probation-metrics {
        gap:8px;
        margin-bottom:10px;
    }
    .hr-tab-probation .probation-metrics article {
        min-height:58px;
        gap:9px;
        padding:8px 12px;
        border-radius:13px;
    }
    .hr-tab-probation .probation-metrics i {
        width:34px;
        height:34px;
        border-radius:10px;
        font-size:13px;
    }
    .hr-tab-probation .probation-metrics small { font-size:.68rem; }
    .hr-tab-probation .probation-metrics strong { font-size:1.55rem; }
    .hr-tab-probation .probation-filter-bar {
        gap:9px;
        margin-bottom:10px;
        padding:9px 11px;
        border-radius:14px;
    }
    .hr-tab-probation .probation-filter-bar label { gap:3px; }
    .hr-tab-probation .probation-filter-bar label > span { font-size:.68rem; }
    .hr-tab-probation .probation-filter-bar :is(input,select,.modern-select-trigger,.primary-button) {
        min-height:38px;
        height:38px;
        padding-top:7px;
        padding-bottom:7px;
        font-size:13px !important;
    }
    .hr-tab-probation .probation-worklist > .card-heading {
        padding:12px 16px;
    }
    .hr-tab-probation .probation-worklist > .card-heading h2 {
        margin:2px 0;
        font-size:21px;
    }
    .hr-tab-probation .probation-worklist > .card-heading p { font-size:12px; }
}