/* ══════════════════════════════════════════════════════════════════════
   Orbit — warm "sunset" theme (whole portal: admin + employee panels)
   ──────────────────────────────────────────────────────────────────────
   Colours sampled from the approved reference screenshot (light + dark).
   Loaded after custom.css and orbit-theme.css so it wins over both; the
   Filament primary colour is set to the same orange (#F68544) in both
   panel providers.

   Undo: delete this file and its <link> in both panel providers, and
   restore the providers' previous primary colours.
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. Palette ─────────────────────────────────────────────────────────
   Primary = the reference orange (#F68544), as Filament "r, g, b" triplets
   (buttons, badges, links, focus rings, pagination). */
html {
    --primary-50: 255, 245, 238;
    --primary-100: 254, 232, 217;
    --primary-200: 252, 208, 178;
    --primary-300: 250, 177, 132;
    --primary-400: 248, 149, 92;
    --primary-500: 246, 133, 68;
    --primary-600: 228, 111, 46;
    --primary-700: 189, 85, 34;
    --primary-800: 150, 68, 31;
    --primary-900: 121, 57, 28;
    --primary-950: 65, 26, 11;

    --sun-orange: #F68544;
    --orbit-stat-teal: #F68544;
    --sun-orange-soft: #FEB274;
}

/* Light surfaces */
html {
    --orbit-sidebar-bg: #FAF6F0;
    --orbit-sidebar-header-bg: #FAF6F0;
    --orbit-sidebar-border: #F0E8DE;
    --orbit-sidebar-text: #394047;
    --orbit-sidebar-text-hover: #293146;
    --orbit-sidebar-active-text: #293146;
    --orbit-sidebar-hover-bg: rgba(246, 133, 68, 0.08);
    --orbit-sidebar-brand-text: #293146;
    --orbit-sidebar-icon-muted: #8E8A86;
    --orbit-topbar-bg: #FDFAF7;
    --orbit-topbar-border: #F0E8DE;
    --orbit-main-bg: #FAF5F0;
    --orbit-card-bg: #FFFFFF;
    --orbit-card-border: #F1E9DF;
    --orbit-text-primary: #293146;
    --orbit-text-muted: #93918E;
    --orbit-table-head-bg: #FFFFFF;

    --orbit-accent: #F68544;
    --orbit-accent-strong: #E46F2E;
    --orbit-accent-soft: #FBEBDC;
    --orbit-accent-glow: rgba(246, 133, 68, 0.40);
}

/* Dark surfaces — deep navy */
html.dark {
    --orbit-sidebar-bg: #212124;
    --orbit-sidebar-header-bg: #212124;
    --orbit-sidebar-border: rgba(255, 255, 255, 0.06);
    --orbit-sidebar-text: #E3E6EC;
    --orbit-sidebar-text-hover: #FFFFFF;
    --orbit-sidebar-active-text: #FFFFFF;
    --orbit-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --orbit-sidebar-brand-text: #FFFFFF;
    --orbit-sidebar-icon-muted: #A1A1AA;
    --orbit-topbar-bg: #212124;
    --orbit-topbar-border: rgba(255, 255, 255, 0.06);
    --orbit-main-bg: #1C1C1F;
    --orbit-card-bg: #27272A;
    --orbit-card-border: rgba(255, 255, 255, 0.06);
    --orbit-text-primary: #F4F6FA;
    --orbit-text-muted: #A1A1AA;
    --orbit-table-head-bg: #27272A;

    --orbit-accent: #FB9B52;
    --orbit-accent-strong: #F68544;
    --orbit-accent-soft: #50433D;
    --orbit-accent-glow: rgba(251, 155, 82, 0.35);
}

/* Glass tokens (orbit-theme.css) — solid, softly shadowed cards, no glow */
html .fi-layout {
    --au-glass: #FFFFFF;
    --au-glass-solid: #FFFFFF;
    --au-shadow: 0 1px 2px rgba(120, 90, 60, 0.04), 0 8px 24px -12px rgba(120, 90, 60, 0.14);
    --au-shadow-lift: 0 1px 2px rgba(120, 90, 60, 0.05), 0 14px 30px -14px rgba(120, 90, 60, 0.22);
    --au-text: #293146;
    --au-text-soft: #929AAA;
    --au-hairline: #F1E9DF;
    --au-mesh: none;
}

html.dark .fi-layout {
    --au-glass: #27272A;
    --au-glass-solid: #27272A;
    --au-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px -14px rgba(0, 0, 0, 0.55);
    --au-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.30), 0 16px 34px -14px rgba(0, 0, 0, 0.65);
    --au-text: #F4F6FA;
    --au-text-soft: #A1A1AA;
    --au-hairline: rgba(255, 255, 255, 0.06);
    --au-mesh: none;
}


/* ── 2. Cards — solid, rounded, soft shadow, no gradient edge or bloom ── */
html .fi-layout .fi-wi-stats-overview-stat::after,
html .fi-layout .fi-ta-ctn::after,
html .fi-layout .fi-section::after,
html .fi-layout .fi-wi-chart::after,
html .fi-layout .fi-wi-stats-overview-stat::before {
    display: none !important;
}

html .fi-layout .fi-wi-stats-overview-stat,
html .fi-layout .fi-ta-ctn,
html .fi-layout .fi-section,
html .fi-layout .fi-wi-chart {
    background: var(--orbit-card-bg) !important;
    border: 1px solid var(--orbit-card-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--au-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html .fi-layout .fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--au-shadow-lift) !important;
}

html .fi-layout .fi-header-heading,
html .fi-layout .fi-wi-stats-overview-stat-value {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--au-text) !important;
}

html .fi-layout .fi-header-subheading {
    color: var(--orbit-text-muted) !important;
}

/* Section heading accent bar + "View Details →" links */
html .fi-layout .fi-wi-stats-overview-header-heading::before,
html .fi-layout .fi-section-header-heading::before,
html .fi-layout .fi-ta-header-heading::before {
    background: var(--sun-orange-soft) !important;
    box-shadow: none !important;
}

html.dark .fi-layout .fi-wi-stats-overview-header-heading::before,
html.dark .fi-layout .fi-section-header-heading::before,
html.dark .fi-layout .fi-ta-header-heading::before {
    background: #FB9B52 !important;
}

html .fi-layout .fi-link {
    color: var(--orbit-accent) !important;
}


/* ── 3. Sidebar active item — peach pill, orange icon tile ────────────── */
html .fi-sidebar-item-icon.text-primary-600 {
    background: #F68544 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px -4px rgba(246, 133, 68, 0.55) !important;
}


/* ── 4. Greeting banner — soft peach dawn (light), dusk sunset (dark) ─── */
html .orbit-dash-greet-card,
html .orbit-dash-greet-card.is-morning,
html .orbit-dash-greet-card.is-afternoon,
html .orbit-dash-greet-card.is-evening {
    --orbit-greet-bg: linear-gradient(100deg, #F7D3BF 0%, #F9DFCB 30%, #F1D7C1 60%, #FDE5C9 100%);
    --orbit-greet-sun-core: #FEDDAA;
    --orbit-greet-sun-mid: #FECE95;
    --orbit-greet-sun-edge: #FBB978;
    --orbit-greet-cloud: #FFFFFF;
    --orbit-greet-cloud-op: 0.55;
    --orbit-greet-mtn-back: #D9B8B0;
    --orbit-greet-mtn-back-op: 0.75;
    --orbit-greet-mtn-mid: #C4A2A4;
    --orbit-greet-mtn-mid-op: 0.85;
    --orbit-greet-mtn-front: #AF9099;
    --orbit-greet-mtn-front-op: 0.90;
    --orbit-greet-pine: #7E8A92;
    --orbit-greet-scrim: transparent;
}

html.dark .orbit-dash-greet-card,
html.dark .orbit-dash-greet-card.is-morning,
html.dark .orbit-dash-greet-card.is-afternoon,
html.dark .orbit-dash-greet-card.is-evening {
    --orbit-greet-bg: linear-gradient(100deg, #212124 0%, #171414 35%, #251B19 60%, #45291F 85%, #6A3B28 100%);
    --orbit-greet-sun-core: #FFD9A8;
    --orbit-greet-sun-mid: #F9A766;
    --orbit-greet-sun-edge: #E9844A;
    --orbit-greet-cloud: #FFFFFF;
    --orbit-greet-cloud-op: 0.25;
    --orbit-greet-mtn-back: #3A2620;
    --orbit-greet-mtn-back-op: 0.85;
    --orbit-greet-mtn-mid: #2A1E1B;
    --orbit-greet-mtn-mid-op: 0.92;
    --orbit-greet-mtn-front: #1A1716;
    --orbit-greet-mtn-front-op: 1;
    --orbit-greet-pine: #212124;
    --orbit-greet-scrim: transparent;
}

html .fi-dashboard-page .orbit-dash-greet-card {
    border-radius: 18px !important;
    box-shadow: 0 10px 30px -14px rgba(200, 120, 80, 0.45) !important;
}

html.dark .fi-dashboard-page .orbit-dash-greet-card {
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.65) !important;
}

html .orbit-dash-greet-card::before,
html .fi-dashboard-page .orbit-dash-greet-card::after {
    display: none !important;
}

html .orbit-dash-greet-main,
html .fi-dashboard-page .orbit-dash-greet-main {
    color: #293146 !important;
    text-shadow: none !important;
}

html .orbit-dash-greet-meta,
html .orbit-dash-greet-time,
html .orbit-dash-greet-sep {
    color: #394047 !important;
    text-shadow: none !important;
}

html .fi-dashboard-page .orbit-dash-greet-meta > span:first-child,
html .fi-dashboard-page .orbit-dash-greet-time {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

html.dark .orbit-dash-greet-main,
html.dark .fi-dashboard-page .orbit-dash-greet-main,
html.dark .orbit-dash-greet-meta,
html.dark .orbit-dash-greet-time,
html.dark .orbit-dash-greet-sep {
    color: #FFFFFF !important;
}

html.dark .fi-dashboard-page .orbit-dash-greet-meta > span:first-child,
html.dark .fi-dashboard-page .orbit-dash-greet-time {
    background: rgba(58, 58, 63, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* ── 5. Stat cards — per-position colours, 5-card cycle ───────────────────
   Order in the reference: orange · green · purple · blue · coral tiles,
   with green / blue / orange progress bars on cards 3–5. Light mode uses a
   pastel tile with a coloured icon; dark mode a solid tile, white icon. */
html .fi-layout .fi-wi-stats-overview-stat-icon {
    background: var(--tile-bg) !important;
    color: var(--tile-fg) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+1) { --tile-bg: #FDEFDA; --tile-fg: #FD9B60; --au-bar: #FC904F; }
html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+2) { --tile-bg: #E6F2E9; --tile-fg: #56A084; --au-bar: #3CB285; }
html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+3) { --tile-bg: #ECE9FA; --tile-fg: #8B7FE0; --au-bar: #3CB285; }
html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+4) { --tile-bg: #D0F0FC; --tile-fg: #478BFD; --au-bar: #478BFD; }
html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+5) { --tile-bg: #FCE3DF; --tile-fg: #E0564A; --au-bar: #FC904F; }

html.dark .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+1) { --tile-bg: #945A34; --tile-fg: #FFFFFF; --au-bar: #FC8164; }
html.dark .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+2) { --tile-bg: #2DA672; --tile-fg: #FFFFFF; --au-bar: #78CFAA; }
html.dark .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+3) { --tile-bg: #845AD5; --tile-fg: #FFFFFF; --au-bar: #78CFAA; }
html.dark .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+4) { --tile-bg: #329AD6; --tile-fg: #FFFFFF; --au-bar: #74D1FC; }
html.dark .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(5n+5) { --tile-bg: #C65D65; --tile-fg: #FFFFFF; --au-bar: #FC8164; }

/* Progress bars — solid fill on a light track */
html .fi-dashboard-page .orbit-stat-progress {
    background: #E6E6E9 !important;
}

html.dark .fi-dashboard-page .orbit-stat-progress {
    background: #4A4A52 !important;
}

html .fi-dashboard-page .orbit-stat-progress-fill {
    background: var(--au-bar) !important;
    box-shadow: none !important;
}


/* ── 6. Buttons, tabs, tables ─────────────────────────────────────────── */
html .fi-layout .fi-btn-color-primary {
    background: #F68544 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px -8px rgba(246, 133, 68, 0.60) !important;
}

html .fi-layout .fi-btn-color-primary:hover {
    background: #E46F2E !important;
}

html .fi-layout .fi-btn-color-primary:focus-visible,
html .fi-layout .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(246, 133, 68, 0.25) !important;
}

html .fi-layout .fi-tabs-item[aria-selected="true"] {
    background: #FBEBDC !important;
    color: #E46F2E !important;
    box-shadow: none !important;
}

html.dark .fi-layout .fi-tabs-item[aria-selected="true"] {
    background: #50433D !important;
    color: #FB9B52 !important;
}

html .fi-layout .fi-ta-row:hover td,
html .fi-layout .fi-ta-row:hover .fi-ta-cell {
    background: rgba(246, 133, 68, 0.05) !important;
}

html.dark .fi-layout .fi-ta-row:hover td,
html.dark .fi-layout .fi-ta-row:hover .fi-ta-cell {
    background: rgba(255, 255, 255, 0.03) !important;
}

html .fi-layout .fi-input-wrp {
    background: #F0EAE5 !important;
    border-color: transparent !important;
}

html.dark .fi-layout .fi-input-wrp {
    background: #2F2F33 !important;
}


/* ── 7. Reference layout & typography ─────────────────────────────────── */

/* Page title + subtitle */
html .fi-layout .fi-header-heading {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

html .fi-layout .fi-header-subheading {
    font-size: 0.9rem !important;
    margin-top: 0.35rem !important;
}

/* Stat cards: icon tile on its own row, then label, value, description */
html .fi-layout .fi-wi-stats-overview-stats-ctn {
    gap: 1rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat {
    padding: 1.15rem 1.25rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat .grid.gap-y-2 {
    row-gap: 0.3rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat .grid.gap-y-2 > .flex.items-center.gap-x-2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat-label {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--au-text-soft) !important;
}

html .fi-layout .fi-wi-stats-overview-stat-value {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-top: 0.1rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem !important;
    color: var(--au-text-soft) !important;
}

html .fi-layout .fi-wi-stats-overview-stat-description-icon {
    display: none !important;
}

/* Icon tile: 40px rounded square. Selector mirrors custom.css's
   nth-child chain (and outranks it) so the reference colours apply. */
html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.6rem !important;
    border-radius: 0.8rem !important;
    background: var(--tile-bg) !important;
    color: var(--tile-fg) !important;
    box-shadow: none !important;
}

/* Tables: small muted uppercase headers, relaxed rows */
html .fi-layout .fi-ta-header-cell,
html .fi-layout .fi-ta-header-cell * {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--au-text-soft) !important;
}

html .fi-layout .fi-ta-cell {
    font-size: 0.84rem !important;
}

html .fi-layout .fi-ta-header-heading {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Greeting: title size, chips with icons */
html .fi-dashboard-page .orbit-dash-greet-main {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
}

html .fi-dashboard-page .orbit-dash-greet-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    margin-top: 0.85rem !important;
}

html .orbit-dash-greet-sep {
    display: none !important;
}

html .fi-dashboard-page .orbit-greet-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 9999px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

html.dark .fi-dashboard-page .orbit-greet-chip {
    background: rgba(58, 58, 63, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html .orbit-greet-chip-icon {
    width: 1rem;
    height: 1rem;
    color: #F68544;
    flex-shrink: 0;
}

html.dark .orbit-greet-chip-icon {
    color: #FFFFFF;
}

html.dark .orbit-dash-greet-card {
    --orbit-greet-bird: rgba(255, 255, 255, 0.35);
}


/* ── 8. Custom pages — map each view's own palette to the theme ─────────
   These views (profile, employee view, attendance calendars, leave /
   attendance request details, request summaries) declare their own colour
   variables on a shell class. The html / html.dark prefix outranks the
   views' `.shell` / `.dark .shell` declarations. */

/* Light */
html .orbit-profile-shell,
html .orbit-employee-shell,
html .orbit-attendance-shell,
html .orbit-lr-shell,
html .orbit-al-shell,
html .orbit-ar-shell {
    --orbit-pf-text: #293146; --orbit-pf-muted: #93918E; --orbit-pf-border: #F1E9DF; --orbit-pf-bg: #FFFFFF;
    --orbit-pf-active-bg: #FBEBDC; --orbit-pf-chip-bg: #FFFFFF; --orbit-pf-chip-border: #F1E9DF;
    --orbit-pf-hero-bg: #FBEBDC; --orbit-pf-hero-border: #F6D9C0; --orbit-pf-hero-text: #293146;
    --orbit-pf-hero-muted: #93918E; --orbit-pf-hero-chip-bg: #FFFFFF; --orbit-pf-hero-chip-border: #F6D9C0;

    --orbit-emp-text: #293146; --orbit-emp-muted: #93918E; --orbit-emp-border: #F1E9DF; --orbit-emp-bg: #FFFFFF; --orbit-emp-row-border: #F4EEE6;

    --orbit-att-text: #293146; --orbit-att-muted: #93918E; --orbit-att-border: #F1E9DF; --orbit-att-bg: #FFFFFF;
    --orbit-att-header-bg: #FAF5F0; --orbit-att-cell-bg: #FFFFFF; --orbit-att-empty-bg: #FAF5F0;

    --orbit-lr-text: #293146; --orbit-lr-muted: #93918E; --orbit-lr-border: #F1E9DF; --orbit-lr-bg: #FFFFFF; --orbit-lr-row-border: #F4EEE6;
    --orbit-lr-accent: #F68544; --orbit-lr-accent-bg: #FBEBDC;

    --orbit-al-text: #293146; --orbit-al-muted: #93918E; --orbit-al-border: #F1E9DF; --orbit-al-bg: #FFFFFF; --orbit-al-row-border: #F4EEE6;
    --orbit-al-header-bg: #FAF5F0; --orbit-al-accent: #F68544; --orbit-al-accent-bg: #FBEBDC;

    --orbit-ar-text: #293146; --orbit-ar-muted: #93918E; --orbit-ar-border: #F1E9DF; --orbit-ar-bg: #FFFFFF; --orbit-ar-row-border: #F4EEE6;
    --orbit-ar-accent: #F68544; --orbit-ar-accent-bg: #FBEBDC;
}

html .orbit-leave-request-details-modal { --orbit-lrd-shell: #FFFFFF; --orbit-lrd-header: #FAF5F0; --orbit-lrd-border: #F1E9DF; }
html .orbit-attendance-request-details-modal { --orbit-ard-shell: #FFFFFF; --orbit-ard-header: #FAF5F0; --orbit-ard-border: #F1E9DF; }

html .orbit-request-summary-modal {
    --orbit-summary-shell: rgba(255, 255, 255, 0.98);
    --orbit-summary-header: rgba(250, 245, 240, 0.95);
    --orbit-summary-panel: #FFFFFF;
    --orbit-summary-border: #F1E9DF;
    --orbit-summary-divider: #F1E9DF;
    --orbit-summary-label: #93918E;
    --orbit-summary-text: #293146;
    --orbit-summary-shadow: 0 24px 70px rgba(120, 90, 60, 0.18);
}

/* Dark */
html.dark .orbit-profile-shell,
html.dark .orbit-employee-shell,
html.dark .orbit-attendance-shell,
html.dark .orbit-lr-shell,
html.dark .orbit-al-shell,
html.dark .orbit-ar-shell {
    --orbit-pf-text: #F4F6FA; --orbit-pf-muted: #A1A1AA; --orbit-pf-border: rgba(255, 255, 255, 0.06); --orbit-pf-bg: #27272A;
    --orbit-pf-active-bg: #50433D; --orbit-pf-chip-bg: #27272A; --orbit-pf-chip-border: rgba(255, 255, 255, 0.08);
    --orbit-pf-hero-bg: #2F2F33; --orbit-pf-hero-border: rgba(255, 255, 255, 0.08); --orbit-pf-hero-text: #F4F6FA;
    --orbit-pf-hero-muted: #A1A1AA; --orbit-pf-hero-chip-bg: #2F2F33; --orbit-pf-hero-chip-border: rgba(255, 255, 255, 0.08);

    --orbit-emp-text: #F4F6FA; --orbit-emp-muted: #A1A1AA; --orbit-emp-border: rgba(255, 255, 255, 0.06); --orbit-emp-bg: #27272A; --orbit-emp-row-border: rgba(255, 255, 255, 0.06);

    --orbit-att-text: #F4F6FA; --orbit-att-muted: #A1A1AA; --orbit-att-border: rgba(255, 255, 255, 0.06); --orbit-att-bg: #27272A;
    --orbit-att-header-bg: #2F2F33; --orbit-att-cell-bg: #27272A; --orbit-att-empty-bg: #232326;

    --orbit-lr-text: #F4F6FA; --orbit-lr-muted: #A1A1AA; --orbit-lr-border: rgba(255, 255, 255, 0.06); --orbit-lr-bg: #27272A; --orbit-lr-row-border: rgba(255, 255, 255, 0.06);
    --orbit-lr-accent: #FB9B52; --orbit-lr-accent-bg: #50433D;

    --orbit-al-text: #F4F6FA; --orbit-al-muted: #A1A1AA; --orbit-al-border: rgba(255, 255, 255, 0.06); --orbit-al-bg: #27272A; --orbit-al-row-border: rgba(255, 255, 255, 0.06);
    --orbit-al-header-bg: #2F2F33; --orbit-al-accent: #FB9B52; --orbit-al-accent-bg: #50433D;

    --orbit-ar-text: #F4F6FA; --orbit-ar-muted: #A1A1AA; --orbit-ar-border: rgba(255, 255, 255, 0.06); --orbit-ar-bg: #27272A; --orbit-ar-row-border: rgba(255, 255, 255, 0.06);
    --orbit-ar-accent: #FB9B52; --orbit-ar-accent-bg: #50433D;
}

html.dark .orbit-leave-request-details-modal { --orbit-lrd-shell: #212124; --orbit-lrd-header: #27272A; --orbit-lrd-border: rgba(255, 255, 255, 0.06); }
html.dark .orbit-attendance-request-details-modal { --orbit-ard-shell: #212124; --orbit-ard-header: #27272A; --orbit-ard-border: rgba(255, 255, 255, 0.06); }

html.dark .orbit-request-summary-modal {
    --orbit-summary-shell: rgba(33, 33, 36, 0.97);
    --orbit-summary-header: rgba(39, 39, 42, 0.97);
    --orbit-summary-panel: rgba(28, 28, 31, 0.80);
    --orbit-summary-border: rgba(255, 255, 255, 0.08);
    --orbit-summary-divider: rgba(255, 255, 255, 0.08);
    --orbit-summary-label: #A1A1AA;
    --orbit-summary-text: #F4F6FA;
    --orbit-summary-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}


/* ── 9. Portal-wide Filament pieces ───────────────────────────────────── */

/* Modals and dropdowns sit on the theme's card surface */
html .fi-modal-window,
html .fi-dropdown-panel {
    background: var(--orbit-card-bg) !important;
}

/* Active pagination page */
html .fi-pagination-items .fi-active,
html .fi-pagination-item.fi-active .fi-pagination-item-button {
    background: #FBEBDC !important;
    color: #E46F2E !important;
}

html.dark .fi-pagination-items .fi-active,
html.dark .fi-pagination-item.fi-active .fi-pagination-item-button {
    background: #50433D !important;
    color: #FB9B52 !important;
}

/* Checkbox / toggle / radio accents follow the orange primary */
html .fi-checkbox-input:checked,
html .fi-radio-input:checked {
    background-color: #F68544 !important;
    border-color: #F68544 !important;
}


/* ── 10. Attendance requests over the monthly limit ───────────────────── */

/* Soft amber wash + left accent bar on the flagged row */
html .fi-layout .fi-ta-row.orbit-request-over-limit td,
html .fi-layout .fi-ta-row.orbit-request-over-limit .fi-ta-cell {
    background: rgba(245, 158, 11, 0.06) !important;
}

html.dark .fi-layout .fi-ta-row.orbit-request-over-limit td,
html.dark .fi-layout .fi-ta-row.orbit-request-over-limit .fi-ta-cell {
    background: rgba(245, 158, 11, 0.05) !important;
}

html .fi-layout .fi-ta-row.orbit-request-over-limit:hover td,
html .fi-layout .fi-ta-row.orbit-request-over-limit:hover .fi-ta-cell {
    background: rgba(245, 158, 11, 0.10) !important;
}

html .fi-layout .fi-ta-row.orbit-request-over-limit > td:first-child {
    box-shadow: inset 3px 0 0 #F59E0B !important;
}

/* "5 requests · Sep 2026" chip under the employee name */
html .orbit-request-limit-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #B45309;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

html.dark .orbit-request-limit-chip {
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
}

html .orbit-request-limit-chip-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: currentColor;
}


/* ── 11. Compact layout + table column alignment (whole portal) ──────── */

/* Column alignment. Filament pads header text inside the <th>, but data
   text inside an inner "px-3 py-4" wrapper in the <td>. Earlier theme
   rules padded both <th> and <td> equally, so every column's data sat one
   wrapper-width (0.75rem) right of its header. Header cells get Filament's
   own padding scheme; data cells carry only the outer first/last offset
   and let the inner wrapper supply the rest, so both edges line up. */
html .fi-layout .fi-ta-header-cell {
    padding: 0.6rem 0.75rem !important;
}

html .fi-layout .fi-ta-header-cell:first-of-type {
    padding-left: 1.5rem !important;
}

html .fi-layout .fi-ta-header-cell:last-of-type {
    padding-right: 1.5rem !important;
}

html .fi-layout .fi-ta-cell {
    padding: 0 !important;
}

html .fi-layout .fi-ta-cell:first-of-type {
    padding-left: 0.75rem !important;
}

html .fi-layout .fi-ta-cell:last-of-type {
    padding-right: 0.75rem !important;
}

/* Compact rows: the row height comes from the inner wrapper's py-4 */
html .fi-layout .fi-ta-cell .py-4 {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

html .fi-layout .fi-ta-record-checkbox.my-4 {
    margin-top: 0.6rem !important;
    margin-bottom: 0.6rem !important;
}

/* Table toolbar (search, filters) */
html .fi-layout .fi-ta-header-toolbar {
    padding: 0.65rem 1.5rem !important;
}

html .fi-layout .fi-ta-header {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

/* Page: tighter vertical rhythm between header, tabs, tables and forms */
html .fi-layout .fi-page > section {
    row-gap: 1.25rem !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

html .fi-layout .fi-header-heading {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html .fi-layout .fi-header-subheading {
    margin-top: 0.2rem !important;
}

/* Form sections and fields */
html .fi-layout .fi-section-header {
    padding: 0.85rem 1.25rem !important;
}

html .fi-layout .fi-section-content {
    padding: 1.1rem 1.25rem !important;
}

html .fi-layout .fi-fo-component-ctn.gap-6 {
    gap: 1rem !important;
}

/* Stat cards */
html .fi-layout .fi-wi-stats-overview-stats-ctn {
    gap: 0.85rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat {
    padding: 0.95rem 1.1rem !important;
}

/* Small screens: same scheme with a narrower outer offset */
@media (max-width: 639px) {
    html .fi-layout .fi-ta-header-cell:first-of-type { padding-left: 1rem !important; }
    html .fi-layout .fi-ta-header-cell:last-of-type { padding-right: 1rem !important; }
    html .fi-layout .fi-ta-cell:first-of-type { padding-left: 0.25rem !important; }
    html .fi-layout .fi-ta-cell:last-of-type { padding-right: 0.25rem !important; }
    html .fi-layout .fi-ta-header-toolbar { padding: 0.6rem 1rem !important; }
}


/* ── 12. Category badges (leave type, duration, request type) ─────────
   Filament adds .fi-color-custom to every non-grey badge, named colours
   included, so the rules below exclude the status colours (success,
   warning, danger, info), which keep their own pills from orbit-theme.css. */

/* Primary: the portal's warm orange, same tint as the active tab and
   pagination item. */
html .fi-layout .fi-badge.fi-color-primary {
    background: rgba(246, 133, 68, 0.12) !important;
    border-color: rgba(246, 133, 68, 0.30) !important;
    color: #E46F2E !important;
}

html.dark .fi-layout .fi-badge.fi-color-primary {
    background: rgba(251, 155, 82, 0.12) !important;
    border-color: rgba(251, 155, 82, 0.30) !important;
    color: #FB9B52 !important;
}

/* A leave type's own colour (hex palette from LeaveType::badgeColor()):
   these carry no named fi-color-* class besides fi-color-custom. */
html .fi-layout .fi-badge.fi-color-custom:not(.fi-color-primary):not(.fi-color-success):not(.fi-color-warning):not(.fi-color-danger):not(.fi-color-info) {
    background: rgba(var(--c-600), 0.12) !important;
    border-color: rgba(var(--c-600), 0.28) !important;
    color: rgb(var(--c-600)) !important;
}

html.dark .fi-layout .fi-badge.fi-color-custom:not(.fi-color-primary):not(.fi-color-success):not(.fi-color-warning):not(.fi-color-danger):not(.fi-color-info) {
    background: rgba(var(--c-400), 0.12) !important;
    border-color: rgba(var(--c-400), 0.30) !important;
    color: rgb(var(--c-400)) !important;
}


/* ── 13. Colour swatches (Leave Types table) ───────────────────────────
   A hairline ring keeps pale colours visible on the card background. */
html .fi-layout .fi-ta-color-item {
    width: 1.35rem !important;
    height: 1.35rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45), 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}


/* ── 14. Record sub-navigation (Employee: Bank Details, Salary Histories,
   Basic Salary) ─────────────────────────────────────────────────────────
   Styled like the form tabs (Employee Details / Management): a white card
   bar across the page with left-aligned tabs, the active one as a soft
   orange pill. Scoped to the sub-navigation, so list tabs (All /
   Pending…) keep their centred pill style. */
html .fi-layout .fi-page-sub-navigation-tabs {
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    padding: 0.4rem !important;
    background: var(--orbit-card-bg, #FFFFFF) !important;
    border: 1px solid var(--orbit-card-border, #F1E9DF) !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

html .fi-layout .fi-page-sub-navigation-tabs::-webkit-scrollbar {
    display: none !important;
}

html .fi-layout .fi-page-sub-navigation-tabs .fi-tabs-item {
    padding: 0.45rem 0.8rem !important;
    border-radius: 0.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--orbit-text-muted, #93918E) !important;
}

/* Form tabs carry no icons; match them */
html .fi-layout .fi-page-sub-navigation-tabs .fi-tabs-item .fi-tabs-item-icon {
    display: none !important;
}

html .fi-layout .fi-page-sub-navigation-tabs .fi-tabs-item .fi-tabs-item-label {
    color: currentColor !important;
}

html .fi-layout .fi-page-sub-navigation-tabs .fi-tabs-item:hover {
    color: var(--orbit-text-primary, #293146) !important;
    background: rgba(246, 133, 68, 0.06) !important;
}

html .fi-layout .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    background: #FBEBDC !important;
    color: #E46F2E !important;
    font-weight: 600 !important;
}

html.dark .fi-layout .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    background: #50433D !important;
    color: #FB9B52 !important;
}


/* ── 15. Compact stat cards (admin + employee dashboards) ─────────────
   Icon tile on the left spanning the card, label / value / caption
   stacked beside it, instead of the icon on its own row above them.
   Filament's markup is .grid > [.flex(icon, label), value, caption], so
   the .flex row is dissolved (display: contents) to let its icon and label
   sit directly in a two-column grid. */
html .fi-layout .fi-wi-stats-overview-stats-ctn {
    gap: 0.75rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat {
    padding: 0.8rem 1rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat .grid.gap-y-2 {
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 0.85rem !important;
    row-gap: 0.1rem !important;
    align-items: center !important;
}

html .fi-layout .fi-wi-stats-overview-stat .grid.gap-y-2 > .flex.items-center.gap-x-2 {
    display: contents !important;
}

html .fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0.5rem !important;
    border-radius: 0.7rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    grid-column: 2 !important;
    font-size: 0.65rem !important;
}

html .fi-layout .fi-wi-stats-overview-stat .grid.gap-y-2 > :not(.flex.items-center.gap-x-2) {
    grid-column: 2 !important;
}

html .fi-layout .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
}

html .fi-layout .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    font-size: 0.72rem !important;
}


/* ── 16. Employees directory cards (admin Employees list) ─────────────
   Centred profile cards in a grid; the ⋯ actions menu sits in the card's
   top-right corner instead of a row under the content. */
html .fi-layout .fi-ta-record.orbit-employee-card {
    border-radius: 0.9rem !important;
    border: 1px solid var(--orbit-card-border, #F1E9DF) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card:hover {
    transform: translateY(-2px);
    border-color: rgba(246, 133, 68, 0.45) !important;
    box-shadow: 0 8px 20px -10px rgba(246, 133, 68, 0.45) !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card > div {
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
}

/* ⋯ menu pinned top-right, inset from the corner */
html .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-actions {
    position: absolute !important;
    top: 0.75rem;
    right: 0.9rem;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bigger ⋯ button with a soft orange hover circle */
html .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-actions .fi-icon-btn {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 9999px !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-actions .fi-icon-btn svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-actions .fi-icon-btn:hover {
    background: rgba(246, 133, 68, 0.12) !important;
}

/* Photo: soft orange ring */
html .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-image img {
    box-shadow: 0 0 0 3px #FBEBDC !important;
    object-fit: cover;
}

html.dark .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-image img {
    box-shadow: 0 0 0 3px #50433D !important;
}

/* Tight vertical rhythm inside the card */
html .fi-layout .fi-ta-record.orbit-employee-card .fi-ta-text {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

/* "View details" reads as a link */
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-employee-card-link {
    margin-top: 0.35rem;
}

html .fi-layout .fi-ta-record.orbit-employee-card:hover .orbit-employee-card-link * {
    text-decoration: underline;
}

/* Inactive employees: faded */
html .fi-layout .fi-ta-record.orbit-employee-card-inactive {
    opacity: 0.6;
}

/* Employee cards: larger, easier-to-read text (photo is 84px, set in
   EmployeeResource). The theme's global .fi-ta-cell size is overridden
   per line here. */
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-name,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-name * {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-designation,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-designation *,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-department,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-department * {
    font-size: 0.925rem !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-id,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-id *,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-email,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-emp-email * {
    font-size: 0.82rem !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card .orbit-employee-card-link,
html .fi-layout .fi-ta-record.orbit-employee-card .orbit-employee-card-link * {
    font-size: 0.925rem !important;
}

html .fi-layout .fi-ta-record.orbit-employee-card .fi-badge {
    font-size: 0.76rem !important;
}

/* ── Topbar icon buttons (theme toggle + notification bell) ──
   Same size, centred, clearly visible in dark mode; no blurred glow box. */
.orbit-theme-toggle,
.fi-topbar-database-notifications-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0;
    border-radius: 9999px !important;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: none;
}

.orbit-theme-toggle::before { display: none !important; }

html.dark .orbit-theme-toggle,
html.dark .fi-topbar-database-notifications-btn {
    background: #323236 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

html.dark .orbit-theme-toggle:hover,
html.dark .fi-topbar-database-notifications-btn:hover {
    background: #3D3D42 !important;
    border-color: rgba(251, 155, 82, 0.5) !important;
}

html.dark .orbit-theme-toggle svg,
html.dark .fi-topbar-database-notifications-btn svg {
    color: #FDE68A !important;
    width: 20px;
    height: 20px;
}

html.dark .fi-topbar-database-notifications-btn svg { color: #E4E4E7 !important; }
html.dark .fi-topbar-database-notifications-btn:hover svg { color: #FB9B52 !important; }

/* ── Attendance "Sessions" popup: solid surface ──
   orbit-theme.css re-points --orbit-att-bg at a translucent glass colour for the
   page cards, which made the popup see-through (the calendar showed behind the
   text). The popup gets an opaque surface in both themes. */
html .orbit-attendance-modal-backdrop {
    background: rgba(41, 49, 70, 0.55);
}

html .orbit-attendance-modal {
    background: #FFFFFF !important;
    border: 1px solid #F1E9DF !important;
    box-shadow: 0 24px 48px -12px rgba(41, 49, 70, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html .orbit-attendance-modal .orbit-attendance-session-duration { color: #6B7280; }

html .orbit-attendance-modal .orbit-attendance-session-footer {
    background: #FDEBDD;
    border: 1px solid #F8D7BD;
}

html.dark .orbit-attendance-modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

html.dark .orbit-attendance-modal {
    background: #27272A !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

html.dark .orbit-attendance-modal .orbit-attendance-session-duration { color: #A1A1AA; }

html.dark .orbit-attendance-modal .orbit-attendance-session-footer {
    background: rgba(251, 155, 82, 0.16);
    border-color: rgba(251, 155, 82, 0.28);
}