/* ═══════════════════════════════════════════════════════════════════════
   ORBIT AURORA — premium portal design system
   ═══════════════════════════════════════════════════════════════════════

   Loaded AFTER custom.css on both panels. Two scopes are used:

     .fi-layout          → every standard page in both panels. The login
                           screen uses Filament's *simple* layout, which
                           has no .fi-layout wrapper, so it is excluded
                           automatically — no :not() gymnastics needed.
     .fi-dashboard-page  → dashboard-only extras (hero banner, stat blooms,
                           entrance stagger).

   Deleting this file plus its two render-hook lines reverts everything.

   Design language
   ───────────────
   · Aurora canvas   — the flat page colour is replaced by a soft, fixed
                       three-point radial mesh, so the page has depth and
                       cards feel like they float above something.
   · Glass surfaces  — translucent, blurred cards with a 1px *gradient*
                       hairline (mask-composite technique) instead of a
                       flat border. This is what reads as "premium": the
                       edge catches light on one side and fades on the other.
   · Luminous accents— icon tiles and progress bars are gradients with a
                       matching coloured glow, so colour appears to emit
                       rather than sit flat.
   · Calm motion     — a single staggered rise-in on load, and a lift on
                       hover. Fully disabled under prefers-reduced-motion.

   Both themes are first-class: the dark theme is the showcase, the light
   theme uses the same structure with inverted glass and softer glows.
   No markup, data, routing or widget logic is involved — this is styling
   only, riding on the classes Filament already emits.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. Tokens ─────────────────────────────────────────────────────────
   Scoped to .fi-layout, which the login screen does not render. */
.fi-layout {
    /* Accent ramp — shared by both themes */
    --au-violet: #6D5FFD;
    --au-indigo: #7C3AED;
    --au-blue:   #3B82F6;
    --au-cyan:   #06B6D4;
    --au-green:  #10B981;
    --au-amber:  #F59E0B;
    --au-rose:   #F43F5E;

    /* Light theme surfaces */
    --au-glass:        rgba(255, 255, 255, 0.72);
    --au-glass-solid:  #FFFFFF;
    --au-edge-1:       rgba(109, 95, 253, 0.30);
    --au-edge-2:       rgba(59, 130, 246, 0.14);
    --au-shadow:       0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14);
    --au-shadow-lift:  0 1px 2px rgba(16, 24, 40, 0.05), 0 24px 48px -16px rgba(109, 95, 253, 0.28);
    --au-text:         #0B1220;
    --au-text-soft:    #5A6478;
    --au-hairline:     rgba(16, 24, 40, 0.07);
    --au-blur:         blur(18px) saturate(150%);

    /* Aurora mesh — light */
    --au-mesh:
        radial-gradient(900px 520px at 10% -8%,  rgba(109, 95, 253, 0.13), transparent 62%),
        radial-gradient(820px 460px at 90% -4%,  rgba(6, 182, 212, 0.11),  transparent 60%),
        radial-gradient(760px 520px at 52% 108%, rgba(236, 72, 153, 0.07), transparent 62%);
}

.dark .fi-layout {
    --au-glass:        rgba(21, 27, 44, 0.68);
    --au-glass-solid:  #131826;
    --au-edge-1:       rgba(139, 128, 255, 0.42);
    --au-edge-2:       rgba(59, 130, 246, 0.16);
    --au-shadow:       0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px -16px rgba(0, 0, 0, 0.65);
    --au-shadow-lift:  0 1px 2px rgba(0, 0, 0, 0.4), 0 28px 56px -18px rgba(109, 95, 253, 0.42);
    --au-text:         #F4F7FF;
    --au-text-soft:    #94A0BA;
    --au-hairline:     rgba(255, 255, 255, 0.07);

    /* Aurora mesh — dark. Stronger, since it's doing more visual work. */
    --au-mesh:
        radial-gradient(1000px 560px at 8% -10%,  rgba(109, 95, 253, 0.20), transparent 60%),
        radial-gradient(900px 520px at 92% -6%,   rgba(6, 182, 212, 0.14),  transparent 58%),
        radial-gradient(820px 560px at 50% 112%,  rgba(236, 72, 153, 0.10), transparent 60%);
}


/* ── 2. Aurora canvas ──────────────────────────────────────────────────
   Exactly ONE element paints the canvas: .fi-main-ctn, the full-width
   column beside the sidebar.

   Why it must be only one: .fi-main carries Filament's page gutters
   (px-4 md:px-6 lg:px-8) and .fi-page sits inside that padding box. If
   more than one of them paints an opaque background, the gutters end up
   showing a different tone from the content area and read as vertical
   bands down both edges of every page. So the descendants are forced
   transparent, overriding custom.css's flat !important fills, and the
   mesh shows through continuously edge to edge.

   background-attachment: fixed anchors the glow to the viewport so it
   stays put while content scrolls. */
.fi-layout .fi-main-ctn {
    background-color: var(--orbit-main-bg) !important;
    background-image: var(--au-mesh) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.fi-layout .fi-main,
.fi-layout .fi-page,
.fi-layout .fi-dashboard-page {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* ── 3. Page title ─────────────────────────────────────────────────────
   "Dashboard" becomes a display heading with a soft gradient wash. */
.fi-layout .fi-header-heading {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
    color: var(--au-text) !important;
}

.dark .fi-layout .fi-header-heading {
    background: linear-gradient(92deg, #FFFFFF 0%, #C9D3F0 58%, #9DA9CC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fi-layout .fi-header-subheading {
    color: var(--au-text-soft) !important;
    font-size: 0.9rem !important;
    margin-top: 0.15rem !important;
}


/* ── 4. Hero greeting ──────────────────────────────────────────────────
   The banner already carries the time-of-day artwork; here it gains depth
   (taller, deeper shadow, inner light catch) so it anchors the page. */
.fi-dashboard-page .orbit-dash-greet-card {
    min-height: 132px !important;
    border-radius: 22px !important;
    padding: 1.6rem 1.9rem !important;
    margin-bottom: 0 !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 28px 60px -22px rgba(76, 29, 149, 0.55) !important;
}

/* Inner top highlight — the "glass catch" along the upper edge */
.fi-dashboard-page .orbit-dash-greet-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%);
}

.fi-dashboard-page .orbit-dash-greet-main {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
}

.fi-dashboard-page .orbit-dash-greet-meta {
    font-size: 0.85rem !important;
    margin-top: 0.5rem !important;
}

/* Date/time sits in its own frosted chip */
.fi-dashboard-page .orbit-dash-greet-meta > span:first-child,
.fi-dashboard-page .orbit-dash-greet-time {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.7rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}

.fi-dashboard-page .orbit-dash-greet-sep { display: none !important; }


/* ── 5. Section headings ───────────────────────────────────────────────
   Widget headings ("My Leave Balance", "Leave Requests — This Month") get
   an accent bar, so the page reads as distinct sections rather than a
   uniform wall of cards. */
.fi-layout .fi-wi-stats-overview-header-heading,
.fi-layout .fi-section-header-heading,
.fi-layout .fi-ta-header-heading {
    position: relative !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
    color: var(--au-text) !important;
    padding-left: 0.85rem !important;
}

.fi-layout .fi-wi-stats-overview-header-heading::before,
.fi-layout .fi-section-header-heading::before,
.fi-layout .fi-ta-header-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05em;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--au-violet), var(--au-cyan));
    box-shadow: 0 0 12px rgba(109, 95, 253, 0.55);
}


/* ── 6. Glass surface + gradient hairline ──────────────────────────────
   The signature treatment. ::after paints a 1px gradient ring using
   mask-composite, which is the only way to get a *gradient* border that
   follows a border-radius. Falls back to the plain border underneath on
   engines without mask-composite. */
.fi-layout .fi-wi-stats-overview-stat,
.fi-layout .fi-ta-ctn,
.fi-layout .fi-section,
.fi-layout .fi-wi-chart {
    position: relative !important;
    background: var(--au-glass) !important;
    border: 1px solid var(--au-hairline) !important;
    border-radius: 20px !important;
    box-shadow: var(--au-shadow) !important;
}

/* Blur is applied ONLY to cards that can never contain pop-out UI.
   backdrop-filter creates a stacking context, which traps any dropdown
   rendered inside the card — its z-index then competes only with its
   siblings *inside* that card, so anything later on the page (the Save
   Settings button, the next section) paints straight over the open panel.
   Stat and chart cards hold no dropdowns, so they keep the full effect;
   form sections and table containers stay translucent without the blur,
   which looks near-identical over the aurora canvas and keeps dropdowns
   stacking normally against the rest of the page. */
.fi-layout .fi-wi-stats-overview-stat,
.fi-layout .fi-wi-chart {
    backdrop-filter: var(--au-blur) !important;
    -webkit-backdrop-filter: var(--au-blur) !important;
    overflow: hidden !important;
}

.fi-layout .fi-wi-stats-overview-stat::after,
.fi-layout .fi-ta-ctn::after,
.fi-layout .fi-section::after,
.fi-layout .fi-wi-chart::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Kept at 1: form sections/table containers are no longer stacking
       contexts, so this value competes at page level. It only needs to sit
       above the card's own background, and the mask leaves everything but
       the 1px ring transparent. */
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, var(--au-edge-1) 0%, var(--au-edge-2) 38%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Containers that hold pop-out UI must NOT clip it. .fi-section wraps form
   cards, so clipping there cut off time/date picker panels, select menus and
   filter dropdowns wherever they extended past the card edge. The rounded
   glass look survives without the clip because the gradient hairline is drawn
   by ::after with border-radius: inherit rather than by overflow.

   .fi-wi-stats-overview-stat and .fi-wi-chart keep overflow: hidden above —
   the stat card's blurred colour bloom genuinely needs clipping, and neither
   contains a dropdown. */
.fi-layout .fi-ta-ctn,
.fi-layout .fi-section {
    overflow: visible !important;
}

/* Pop-out panels are lifted clear of both the hairline and any sibling
   content further down the page (form action bars, following sections). */
.fi-layout .fi-fo-twelve-hour-time-picker-panel,
.fi-layout .fi-fo-date-time-picker-panel,
.fi-layout .fi-fo-select-panel,
.fi-layout .fi-dropdown-panel {
    z-index: 50 !important;
}

/* The form's action bar ("Save Settings" and friends) renders after the
   fields, so without this it wins on DOM order alone the moment a panel
   opens over it. */
.fi-layout .fi-fo-actions,
.fi-layout .fi-form-actions {
    position: relative;
    z-index: 0;
}


/* ── 7. Stat cards ─────────────────────────────────────────────────────
   Bigger numerals, luminous icon tile, gradient progress. */
.fi-layout .fi-wi-stats-overview-stats-ctn {
    gap: 1.25rem !important;
}

.fi-layout .fi-wi-stats-overview-stat {
    padding: 1.6rem 1.7rem !important;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

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

/* A wide, soft colour bloom in the card's top-left, tinted per position.
   This is what stops the three cards reading as identical grey boxes. */
.fi-layout .fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: -55%;
    left: -22%;
    width: 78%;
    height: 165%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(46px);
    background: var(--au-bloom, var(--au-violet));
    transition: opacity 0.32s ease;
}

.fi-layout .fi-wi-stats-overview-stat:hover::before { opacity: 0.72; }

/* Keep real content above the bloom */
.fi-layout .fi-wi-stats-overview-stat > .grid { position: relative; z-index: 1; }

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

.fi-layout .fi-wi-stats-overview-stat-value {
    font-size: 2.5rem !important;
    font-weight: 750 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.05 !important;
    margin-top: 0.15rem !important;
    color: var(--au-text) !important;
}

.dark .fi-layout .fi-wi-stats-overview-stat-value {
    background: linear-gradient(92deg, #FFFFFF 0%, #D7DEF5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Luminous icon tile */
.fi-layout .fi-wi-stats-overview-stat-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0.62rem !important;
    border-radius: 0.9rem !important;
    color: #FFFFFF !important;
    background: var(--au-tile, linear-gradient(140deg, var(--au-violet), var(--au-indigo))) !important;
    box-shadow: var(--au-tile-glow, 0 6px 18px -4px rgba(109, 95, 253, 0.6)) !important;
    flex-shrink: 0 !important;
}

/* Per-position palette. Filament emits identical markup for every stat, so
   position is the only hook available — the cycle repeats every 3 cards and
   matches the progress-bar colours below. */
.fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+1) {
    --au-bloom: rgba(109, 95, 253, 0.5);
    --au-tile: linear-gradient(140deg, #8B7BFF, #6D5FFD 55%, #5B21B6);
    --au-tile-glow: 0 6px 20px -4px rgba(109, 95, 253, 0.65);
    --au-bar: linear-gradient(90deg, #8B7BFF, #6D5FFD);
}
.fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+2) {
    --au-bloom: rgba(59, 130, 246, 0.45);
    --au-tile: linear-gradient(140deg, #60A5FA, #3B82F6 55%, #1D4ED8);
    --au-tile-glow: 0 6px 20px -4px rgba(59, 130, 246, 0.6);
    --au-bar: linear-gradient(90deg, #60A5FA, #3B82F6);
}
.fi-layout .fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+3) {
    --au-bloom: rgba(16, 185, 129, 0.42);
    --au-tile: linear-gradient(140deg, #34D399, #10B981 55%, #047857);
    --au-tile-glow: 0 6px 20px -4px rgba(16, 185, 129, 0.6);
    --au-bar: linear-gradient(90deg, #34D399, #10B981);
}

/* Description icon inherits the card's accent instead of staying grey */
.fi-layout .fi-wi-stats-overview-stat-description-icon {
    color: var(--au-text-soft) !important;
}

/* Progress bar (employee leave balances) */
.fi-dashboard-page .orbit-stat-progress {
    height: 8px !important;
    margin-top: 0.9rem !important;
    background: var(--au-hairline) !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.fi-dashboard-page .orbit-stat-progress-fill {
    background: var(--au-bar, linear-gradient(90deg, #8B7BFF, #6D5FFD)) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 14px -1px currentColor;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ── 8. Tables ─────────────────────────────────────────────────────────
   Borderless rows, uppercase micro-labels, a soft accent wash on hover. */
.fi-layout .fi-ta-header-toolbar {
    padding: 1.15rem 1.5rem !important;
    border-bottom: 1px solid var(--au-hairline) !important;
}

.fi-layout .fi-ta-header-cell {
    background: transparent !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--au-text-soft) !important;
    padding: 0.85rem 1.5rem !important;
    border-bottom: 1px solid var(--au-hairline) !important;
}

.dark .fi-layout .fi-ta-table thead tr,
.dark .fi-layout .fi-ta-header-cell,
.fi-layout .fi-ta-table thead tr {
    background: transparent !important;
    background-color: transparent !important;
}

.fi-layout .fi-ta-row {
    border-bottom: 1px solid var(--au-hairline) !important;
    transition: background 0.18s ease !important;
}

.fi-layout .fi-ta-row:last-child { border-bottom: none !important; }

.fi-layout .fi-ta-cell {
    padding: 0.95rem 1.5rem !important;
    font-size: 0.86rem !important;
    color: var(--au-text) !important;
}

.fi-layout .fi-ta-row:hover td,
.fi-layout .fi-ta-row:hover .fi-ta-cell {
    background: linear-gradient(90deg, rgba(109, 95, 253, 0.10), rgba(109, 95, 253, 0.02) 65%, transparent) !important;
}

/* Empty state */
.fi-layout .fi-ta-empty-state {
    padding: 3.5rem 1.5rem !important;
}

.fi-layout .fi-ta-empty-state-icon-ctn {
    background: var(--au-hairline) !important;
    border-radius: 9999px !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.fi-layout .fi-ta-empty-state-icon-ctn svg { color: var(--au-violet) !important; }

.fi-layout .fi-ta-empty-state-heading {
    font-weight: 700 !important;
    color: var(--au-text) !important;
    margin-top: 1rem !important;
}


/* ── 9. Badges / status pills ──────────────────────────────────────────
   Soft tint + matching text, fully rounded, with a leading dot so status
   is legible without relying on colour alone. */
.fi-layout .fi-badge {
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em !important;
    padding: 0.26rem 0.7rem 0.26rem 0.55rem !important;
    border: 1px solid transparent !important;
    text-transform: capitalize !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.fi-layout .fi-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}

.fi-layout .fi-badge.fi-color-success {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    color: #059669 !important;
}
.dark .fi-layout .fi-badge.fi-color-success { color: #34D399 !important; }

.fi-layout .fi-badge.fi-color-danger {
    background: rgba(244, 63, 94, 0.14) !important;
    border-color: rgba(244, 63, 94, 0.28) !important;
    color: #E11D48 !important;
}
.dark .fi-layout .fi-badge.fi-color-danger { color: #FB7185 !important; }

.fi-layout .fi-badge.fi-color-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #D97706 !important;
}
.dark .fi-layout .fi-badge.fi-color-warning { color: #FBBF24 !important; }

.fi-layout .fi-badge.fi-color-gray {
    background: rgba(100, 116, 139, 0.14) !important;
    border-color: rgba(100, 116, 139, 0.26) !important;
    color: #64748B !important;
}
.dark .fi-layout .fi-badge.fi-color-gray { color: #94A3B8 !important; }


/* ── 10. Charts ────────────────────────────────────────────────────────
   The chart canvas needs breathing room inside the glass card. */
.fi-layout .fi-wi-chart { padding: 1.5rem 1.6rem !important; }

.fi-layout .fi-wi-chart-header-heading {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--au-text) !important;
}


/* ── 11. Pagination / per-page ─────────────────────────────────────────*/
.fi-layout .fi-pagination {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--au-hairline) !important;
}

.fi-layout .fi-pagination-label,
.fi-layout .fi-pagination-records-per-page-select-label {
    font-size: 0.78rem !important;
    color: var(--au-text-soft) !important;
}


/* ── 12. Entrance motion ───────────────────────────────────────────────
   One staggered rise as the dashboard paints. Deliberately short and
   subtle — the goal is "settled", not "animated". */
@keyframes au-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* .fi-wi is the grid container; .fi-wi-widget is the per-widget cell, which
   is what actually needs staggering. */
.fi-dashboard-page .orbit-dash-greet-card,
.fi-dashboard-page .fi-wi-widget {
    animation: au-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fi-dashboard-page .fi-wi-widget:nth-child(1) { animation-delay: 0.04s; }
.fi-dashboard-page .fi-wi-widget:nth-child(2) { animation-delay: 0.10s; }
.fi-dashboard-page .fi-wi-widget:nth-child(3) { animation-delay: 0.16s; }
.fi-dashboard-page .fi-wi-widget:nth-child(4) { animation-delay: 0.22s; }
.fi-dashboard-page .fi-wi-widget:nth-child(5) { animation-delay: 0.28s; }
.fi-dashboard-page .fi-wi-widget:nth-child(6) { animation-delay: 0.34s; }

/* Hover lift must not fight the entrance transform */
@media (prefers-reduced-motion: reduce) {
    .fi-dashboard-page .orbit-dash-greet-card,
    .fi-dashboard-page .fi-wi-widget,
    .fi-layout .fi-wi-stats-overview-stat,
    .fi-dashboard-page .orbit-stat-progress-fill {
        animation: none !important;
        transition: none !important;
    }
    .fi-layout .fi-wi-stats-overview-stat:hover { transform: none !important; }
}


/* ── 13. Responsive ────────────────────────────────────────────────────*/
@media (max-width: 1024px) {
    .fi-layout .fi-wi-stats-overview-stat-value { font-size: 2.2rem !important; }
}

@media (max-width: 640px) {
    .fi-layout .fi-header-heading { font-size: 1.55rem !important; }
    .fi-dashboard-page .orbit-dash-greet-card {
        min-height: 150px !important;
        padding: 1.3rem 1.35rem !important;
        border-radius: 18px !important;
    }
    .fi-dashboard-page .orbit-dash-greet-main { font-size: 1.24rem !important; }
    .fi-layout .fi-wi-stats-overview-stat { padding: 1.3rem 1.35rem !important; }
    .fi-layout .fi-wi-stats-overview-stat-value { font-size: 2.05rem !important; }
    .fi-layout .fi-ta-cell,
    .fi-layout .fi-ta-header-cell { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Backdrop-blur is progressive enhancement; without it the glass falls
   back to a solid surface so contrast is never lost. */
/* Only the cards that actually rely on blur need the solid fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fi-layout .fi-wi-stats-overview-stat,
    .fi-layout .fi-wi-chart {
        background: var(--au-glass-solid) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PORTAL-WIDE CHROME
   Everything below applies to every standard page in both panels. The
   login screen has no .fi-layout wrapper and is therefore untouched.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 14. Topbar ────────────────────────────────────────────────────────
   Frosted rather than solid, so content scrolls under it. */
.fi-layout .fi-topbar > nav,
.fi-layout .fi-topbar nav {
    background: var(--au-glass) !important;
    backdrop-filter: var(--au-blur) !important;
    -webkit-backdrop-filter: var(--au-blur) !important;
    border-bottom: 1px solid var(--au-hairline) !important;
    box-shadow: none !important;
}


/* ── 15. Sidebar ───────────────────────────────────────────────────────
   Slightly translucent with a hairline edge, matching the card system.
   Nav item shape/colour stays owned by custom.css so the active-item
   behaviour tuned earlier is preserved. */
.fi-layout .fi-sidebar,
.fi-layout aside.fi-sidebar {
    border-right: 1px solid var(--au-hairline) !important;
    box-shadow: none !important;
}

.dark .fi-layout .fi-sidebar,
.dark .fi-layout aside.fi-sidebar {
    background: rgba(11, 15, 27, 0.92) !important;
    backdrop-filter: var(--au-blur) !important;
    -webkit-backdrop-filter: var(--au-blur) !important;
}

.fi-layout .fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--au-hairline) !important;
}


/* ── 16. Buttons ───────────────────────────────────────────────────────
   custom.css paints primary buttons orange, which fights the violet
   accent used everywhere else. Primary now carries the same gradient as
   the icon tiles so the whole portal reads as one system. */
.fi-layout .fi-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.fi-layout .fi-btn-color-primary {
    background: linear-gradient(140deg, #8B7BFF 0%, #6D5FFD 55%, #5B21B6 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px -6px rgba(109, 95, 253, 0.7) !important;
}

.fi-layout .fi-btn-color-primary:hover {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px -8px rgba(109, 95, 253, 0.8) !important;
}

.fi-layout .fi-btn-color-primary:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(109, 95, 253, 0.35) !important;
}

/* Outlined / secondary buttons pick up the glass treatment */
.fi-layout .fi-btn-outlined,
.fi-layout .fi-icon-btn {
    border-radius: 10px !important;
    border-color: var(--au-hairline) !important;
}


/* ── 17. Inputs ────────────────────────────────────────────────────────*/
.fi-layout .fi-input,
.fi-layout .fi-select-input,
.fi-layout .fi-textarea,
.fi-layout .fi-input-wrp {
    border-radius: 10px !important;
    border-color: var(--au-hairline) !important;
    background-color: transparent !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.fi-layout .fi-input:focus,
.fi-layout .fi-select-input:focus,
.fi-layout .fi-textarea:focus,
.fi-layout .fi-input-wrp:focus-within {
    border-color: var(--au-violet) !important;
    box-shadow: 0 0 0 3px rgba(109, 95, 253, 0.18) !important;
    outline: none !important;
}


/* ── 18. Tabs ──────────────────────────────────────────────────────────*/
.fi-layout .fi-tabs {
    background: var(--au-glass) !important;
    border: 1px solid var(--au-hairline) !important;
    border-radius: 14px !important;
    padding: 0.3rem !important;
    backdrop-filter: var(--au-blur) !important;
    -webkit-backdrop-filter: var(--au-blur) !important;
}

.fi-layout .fi-tabs-item {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: background 0.18s ease, color 0.18s ease !important;
}

.fi-layout .fi-tabs-item[aria-selected="true"] {
    background: linear-gradient(140deg, rgba(109, 95, 253, 0.22), rgba(109, 95, 253, 0.10)) !important;
    color: var(--au-violet) !important;
    box-shadow: inset 0 0 0 1px rgba(109, 95, 253, 0.30) !important;
}

.dark .fi-layout .fi-tabs-item[aria-selected="true"] { color: #B8AEFF !important; }


/* ── 19. Modals & dropdowns ────────────────────────────────────────────*/
.fi-layout .fi-modal-window {
    border-radius: 20px !important;
    background: var(--au-glass-solid) !important;
    border: 1px solid var(--au-hairline) !important;
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.55) !important;
}

.fi-layout .fi-dropdown-panel {
    border-radius: 14px !important;
    background: var(--au-glass-solid) !important;
    border: 1px solid var(--au-hairline) !important;
    box-shadow: 0 20px 48px -18px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

.fi-layout .fi-dropdown-list-item { border-radius: 9px !important; }


/* ── 20. Forms / sections on non-dashboard pages ───────────────────────
   .fi-section already receives the glass treatment above; these are the
   supporting parts so form pages don't look half-restyled. */
.fi-layout .fi-fo-field-wrp-label {
    font-weight: 600 !important;
    color: var(--au-text) !important;
}

.fi-layout .fi-fo-field-wrp-hint,
.fi-layout .fi-fo-field-wrp-helper-text {
    color: var(--au-text-soft) !important;
}


/* ── 21. Attendance shell harmonisation ────────────────────────────────
   The attendance detail pages ship their own scoped --orbit-att-* palette
   with solid surfaces. Rather than rewrite that markup, the tokens are
   re-pointed at the Aurora palette so those pages join the system. */
.fi-layout .orbit-attendance-shell {
    --orbit-att-border: rgba(16, 24, 40, 0.08);
    --orbit-att-bg: rgba(255, 255, 255, 0.78);
    --orbit-att-header-bg: rgba(248, 250, 252, 0.9);
    --orbit-att-cell-bg: rgba(255, 255, 255, 0.6);
    --orbit-att-empty-bg: rgba(241, 245, 249, 0.55);
}

.dark .fi-layout .orbit-attendance-shell {
    --orbit-att-text: #F4F7FF;
    --orbit-att-muted: #94A0BA;
    --orbit-att-border: rgba(255, 255, 255, 0.08);
    --orbit-att-bg: rgba(21, 27, 44, 0.72);
    --orbit-att-header-bg: rgba(27, 34, 54, 0.85);
    --orbit-att-cell-bg: rgba(19, 24, 38, 0.55);
    --orbit-att-empty-bg: rgba(12, 16, 28, 0.5);
}

.fi-layout .orbit-attendance-summary,
.fi-layout .orbit-attendance-toolbar {
    border-radius: 16px !important;
    backdrop-filter: var(--au-blur);
    -webkit-backdrop-filter: var(--au-blur);
    box-shadow: var(--au-shadow);
}

.fi-layout .orbit-attendance-weekdays { border-radius: 16px 16px 0 0 !important; }
.fi-layout .orbit-attendance-grid { border-radius: 0 0 16px 16px !important; }

/* Today's cell gets the accent ring instead of the old cyan */
.fi-layout .orbit-attendance-day.is-today {
    box-shadow: inset 0 0 0 2px var(--au-violet) !important;
}
.fi-layout .orbit-attendance-day.is-today .orbit-attendance-number {
    background: var(--au-violet) !important;
}


/* ── 22. Scrollbars ────────────────────────────────────────────────────*/
.dark .fi-layout *::-webkit-scrollbar { width: 10px; height: 10px; }
.dark .fi-layout *::-webkit-scrollbar-track { background: transparent; }
.dark .fi-layout *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.dark .fi-layout *::-webkit-scrollbar-thumb:hover {
    background: rgba(109, 95, 253, 0.45);
    background-clip: content-box;
}