@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Global ──────────────────────────────────────── */
* { font-family: 'Inter', sans-serif !important; }

/* ── CSS Variables ───────────────────────────────── */
:root {
    --orbit-sidebar-bg: #FFFFFF;
    --orbit-sidebar-header-bg: #FFFFFF;
    --orbit-sidebar-border: #E2E8F0;
    --orbit-sidebar-text: #475569;
    --orbit-sidebar-text-hover: #0F172A;
    --orbit-sidebar-active-text: #0F172A;
    --orbit-sidebar-hover-bg: rgba(15,23,42,0.06);
    --orbit-sidebar-brand-text: #0F172A;
    --orbit-sidebar-icon-muted: #94A3B8;
    --orbit-topbar-bg: #FFFFFF;
    --orbit-topbar-border: #E2E8F0;
    --orbit-main-bg: #F8FAFC;
    --orbit-card-bg: #FFFFFF;
    --orbit-card-border: #E2E8F0;
    --orbit-text-primary: #0F172A;
    --orbit-text-muted: #64748B;
    --orbit-table-head-bg: #F8FAFC;
}

.dark {
    --orbit-sidebar-bg: #212124;
    --orbit-sidebar-header-bg: #212124;
    --orbit-sidebar-border: rgba(246, 133, 68, 0.10);
    --orbit-sidebar-text: #94A3B8;
    --orbit-sidebar-text-hover: #FFFFFF;
    --orbit-sidebar-active-text: #FFFFFF;
    --orbit-sidebar-hover-bg: rgba(255,255,255,0.08);
    --orbit-sidebar-brand-text: #FFFFFF;
    --orbit-sidebar-icon-muted: #64748B;
    --orbit-topbar-bg: #212124;
    --orbit-topbar-border: rgba(246, 133, 68, 0.10);
    --orbit-main-bg: #1C1C1F;
    --orbit-card-bg: #27272A;
    --orbit-card-border: #3A3A3F;
    --orbit-text-primary: #F8FAFC;
    --orbit-text-muted: #94A3B8;
    --orbit-table-head-bg: #27272A;
}

/* ── Accent tokens ───────────────────────────────────
   One purple/indigo accent, shared by the active-nav highlight, the
   sidebar sub-item dots, the casual-leave icon/progress bar, the
   Need Help button and every other primary accent, so the accent
   can't drift between components. The stat-card blue/green below are
   the only other two hues, each also defined once. */
:root {
    --orbit-accent: #F68544;
    --orbit-accent-strong: #E46F2E;
    --orbit-accent-soft: rgba(246, 133, 68, 0.13);
    --orbit-accent-glow: rgba(246, 133, 68, 0.45);
    --orbit-stat-blue: #3B82F6;
    --orbit-stat-green: #10B981;
    --orbit-stat-teal: #06B6D4;
}

/* ── Sidebar background overrides ────────────────── */
.fi-sidebar,
aside.fi-sidebar,
.orbit-sidebar {
    background: var(--orbit-sidebar-bg) !important;
    border-right: 1px solid var(--orbit-sidebar-border) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.06) !important;
}
.dark .fi-sidebar,
.dark aside.fi-sidebar,
.dark .orbit-sidebar {
    box-shadow: 4px 0 20px rgba(0,0,0,0.2) !important;
}

.fi-sidebar-header,
.orbit-sidebar-header {
    background: var(--orbit-sidebar-header-bg) !important;
    background-color: var(--orbit-sidebar-header-bg) !important;
    border-bottom: 1px solid var(--orbit-sidebar-border) !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
    ring: none !important;
}

/* Override Tailwind inline bg classes on sidebar header */
.fi-sidebar .fi-sidebar-header.bg-white,
.fi-sidebar .fi-sidebar-header[class*="bg-"] {
    background: var(--orbit-sidebar-header-bg) !important;
    background-color: var(--orbit-sidebar-header-bg) !important;
}

/* Sidebar logo / brand text */
.fi-sidebar-header *,
.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-logo,
.fi-logo * {
    color: var(--orbit-sidebar-brand-text) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ── Sidebar collapsed: logo icon button ─────────── */
.orbit-sidebar-logo-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.15s;
    width: 100%;
}
.orbit-sidebar-logo-btn:hover {
    background: var(--orbit-sidebar-hover-bg);
}
.orbit-sidebar-collapsed-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(234,88,12,0.25));
    display: block;
    margin: 0 auto;
}

/* ── Sidebar expanded: brand name image ──────────── */
.orbit-sidebar-brand-name {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Light mode: black wordmark; dark mode: white wordmark */
.orbit-brand-dark-only { display: none; }
.orbit-brand-light-only { display: block; }
.dark .orbit-brand-dark-only { display: block; }
.dark .orbit-brand-light-only { display: none; }

/* Center the header content wrapper */
.fi-sidebar-header .flex {
    justify-content: center !important;
}
.fi-sidebar-header a {
    display: flex !important;
    justify-content: center !important;
}

/* ── Sidebar hamburger toggle button ─────────────── */
.orbit-hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.orbit-hamburger-btn:hover {
    background: var(--orbit-sidebar-hover-bg);
}
.orbit-hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--orbit-sidebar-icon-muted);
    border-radius: 2px;
    transition: background 0.15s;
}
.orbit-hamburger-btn:hover .orbit-hamburger-line {
    background: var(--orbit-sidebar-text-hover);
}

/* Sidebar collapse button (legacy) */
.fi-sidebar .fi-icon-btn {
    color: var(--orbit-sidebar-icon-muted) !important;
}

/* Nav inner padding */
.orbit-sidebar-nav-inner {
    padding: 1rem 0.75rem 1.5rem !important;
}

/* Breathing room between groups (General / Time Zone / Leave / …) */
.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.5rem !important;
}

/* ── Group labels ─────────────────────────────────────
   Small-caps section headers, with a hairline rule trailing off to the
   right so each group reads as a distinct block without adding weight. */
.orbit-group-label,
.fi-sidebar-group-label {
    color: var(--orbit-sidebar-icon-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 0.5rem 0.375rem !important;
}

/* ── Grouped sub-item dot markers ────────────────────
   Filament renders a .fi-sidebar-item-grouped-border spacer before every
   sub-nav item (Attendance Request/Settings/Details, Leave Requests,
   Holiday). Its own connector lines are hidden and replaced with a single
   6px accent dot centred in the spacer. */
.fi-sidebar-item-grouped-border > * { display: none !important; }

/* Default dot: muted grey — the accent is reserved for the active item so
   the sidebar isn't washed in colour. */
.fi-sidebar-item-grouped-border::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--orbit-sidebar-icon-muted) !important;
    flex-shrink: 0;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: hint the accent without committing to it */
.fi-sidebar-item-button:hover .fi-sidebar-item-grouped-border::before {
    background: var(--orbit-sidebar-text) !important;
}

/* Active sub-item: the only accent dot, with a soft halo */
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border::before {
    background: var(--orbit-accent) !important;
    box-shadow: 0 0 0 3px var(--orbit-accent-soft);
}

/* ── Nav item — default ──────────────────────────────
   Consistent row height/gap across every item so icon, label and (on the
   active row) the left accent bar all line up regardless of label length. */
.fi-sidebar-item {
    position: relative !important;
}

.fi-sidebar-item-button {
    position: relative !important;
    border-radius: 10px !important;
    margin: 2px 4px !important;
    padding: 9px 12px !important;
    min-height: 42px !important;
    color: var(--orbit-sidebar-text) !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
    gap: 11px !important;
}

/* Label — not active */
.fi-sidebar-item-label {
    color: var(--orbit-sidebar-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Icon — not active */
.fi-sidebar-item-icon.text-gray-400 {
    color: var(--orbit-sidebar-icon-muted) !important;
}

/* ── Nav item — hover ─────────────────────────────── */
.fi-sidebar-item-button:hover {
    background: var(--orbit-sidebar-hover-bg) !important;
    color: var(--orbit-sidebar-text-hover) !important;
    transform: translateX(1px);
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: var(--orbit-sidebar-text-hover) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--orbit-sidebar-text-hover) !important;
}

/* ── Nav item — active ────────────────────────────────
   Filament puts `hover:bg-gray-100` / `focus-visible:bg-gray-100` on every
   linked item, so an attribute match like [class*="bg-gray"] hits ALL items,
   not just the active one. Strip Filament's own grey fill from everything
   first, then paint the accent highlight using .fi-active alone (the class
   Filament sets on the active <li>), so exactly one row is tinted. */
.fi-sidebar-item-button.bg-gray-100,
.fi-sidebar-item-button[class*="bg-gray"] {
    background: transparent !important;
    box-shadow: none !important;
}

/* Active row: soft accent fill + a slim accent bar on the leading edge, so
   the current section is obvious even at a glance or when scrolled. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button:hover {
    background: var(--orbit-accent-soft) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 9999px;
    background: var(--orbit-accent) !important;
}

/* Active label */
.fi-sidebar-item-label.text-primary-600 {
    color: var(--orbit-sidebar-active-text) !important;
    font-weight: 600 !important;
}

/* Active icon — solid teal rounded chip, sits on the tinted row */
.fi-sidebar-item-icon.text-primary-600 {
    color: #ffffff !important;
    background: var(--orbit-stat-teal) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    width: 30px !important;
    height: 30px !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4) !important;
    flex-shrink: 0 !important;
}

/* Non-active icon — same footprint as the active chip so labels never
   shift when a row becomes active. */
.fi-sidebar-item-icon.text-gray-400 {
    color: var(--orbit-sidebar-icon-muted) !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 6px !important;
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
}

/* Hover: icon gets subtle background too */
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--orbit-sidebar-text-hover) !important;
    background: var(--orbit-sidebar-hover-bg) !important;
}

/* ── Sidebar scrollbar — slim and unobtrusive ────────── */
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--orbit-sidebar-border) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--orbit-sidebar-border);
    border-radius: 9999px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--orbit-sidebar-icon-muted);
}

/* ── Sidebar group headers — icon + label ────────────
   Filament's own group-label icon (.fi-sidebar-group-icon, a sibling of
   the .fi-sidebar-group-label text span, both inside .fi-sidebar-group-
   button which already flexes them side by side) renders as a small flat
   glyph; this gives it a soft tinted chip so each section reads clearly
   at a glance, matching the accent used for active nav items and page
   headings. */
.fi-sidebar-group-icon {
    width: 18px !important;
    height: 18px !important;
    padding: 4px !important;
    box-sizing: content-box !important;
    border-radius: 7px !important;
    background: var(--orbit-accent-soft) !important;
    color: var(--orbit-accent) !important;
}

/* ── Page heading — icon + heading/subheading hierarchy ──
   The heading icon sits in a soft accent chip beside a large, bold title;
   the subheading (when present) stays visually secondary: smaller, muted,
   indented to align under the title text rather than the icon. */
.orbit-heading-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.orbit-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--orbit-accent-soft);
    box-shadow: 0 2px 8px rgba(246, 133, 68, 0.18);
}

.orbit-heading-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--orbit-accent);
}

html .fi-layout p.orbit-heading-subtitle.fi-header-subheading {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-top: 0.25rem !important;
    margin-left: calc(2.5rem + 0.75rem) !important;
    color: var(--orbit-text-muted) !important;
}

/* ── Topbar ───────────────────────────────────────── */
.fi-topbar nav,
.fi-topbar-nav {
    background: var(--orbit-topbar-bg) !important;
    border-bottom: 1px solid var(--orbit-topbar-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin-right: 0.5rem;
}

.fi-topbar-close-sidebar-btn {
    margin-right: 0.5rem;
}

.orbit-topbar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--orbit-text-primary);
}

.orbit-topbar-user-role {
    font-size: 0.75rem;
    color: var(--orbit-text-muted);
}

.orbit-theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    background: var(--orbit-card-bg);
    border: 1px solid var(--orbit-card-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(246, 133, 68,0);
}

.orbit-theme-toggle::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(246, 133, 68,0.35) 0%, rgba(246, 133, 68,0) 70%);
    filter: blur(4px);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s;
}

.dark .orbit-theme-toggle::before {
    opacity: 1;
}

.orbit-theme-toggle:hover {
    background: var(--orbit-sidebar-hover-bg);
    box-shadow: 0 0 16px 2px rgba(246, 133, 68,0.25);
}

.orbit-theme-toggle svg {
    width: 18px;
    height: 18px;
    color: var(--orbit-text-muted);
}

.dark .orbit-theme-toggle svg {
    color: #FDE68A;
}

/* ── Main content ─────────────────────────────────── */
.fi-main-ctn, .fi-main { background: var(--orbit-main-bg) !important; }

/* ── Page heading ─────────────────────────────────── */
.fi-page-header-heading {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--orbit-text-primary) !important;
}

/* ── Cards / Sections ─────────────────────────────── */
.fi-section {
    background: var(--orbit-card-bg) !important;
    border-radius: 16px !important;
    border: 1px solid var(--orbit-card-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.dark .fi-section {
    background: var(--orbit-card-bg) !important;
}

/* ── Stat widgets ─────────────────────────────────── */
.fi-wi-stats-overview-stat {
    background: var(--orbit-card-bg) !important;
    border-radius: 16px !important;
    border: 1px solid var(--orbit-card-border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    padding: 1.4rem 1.5rem !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--orbit-text-muted) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--orbit-text-primary) !important;
    line-height: 1.1 !important;
}

.dark .fi-wi-stats-overview-stat {
    background: var(--orbit-card-bg) !important;
}

/* Colored icon badges — a rounded square behind each stat's icon, cycling
   blue / green / purple by card position to match the leave-balance design. */
.fi-wi-stats-overview-stat-icon {
    width: 2.6rem !important;
    height: 2.6rem !important;
    padding: 0.6rem !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+1) .fi-wi-stats-overview-stat-icon {
    background: rgba(246, 133, 68, 0.22) !important;
    color: var(--orbit-accent) !important;
}
.fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+2) .fi-wi-stats-overview-stat-icon {
    background: rgba(59, 130, 246, 0.22) !important;
    color: var(--orbit-stat-blue) !important;
}
.fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+3) .fi-wi-stats-overview-stat-icon {
    background: rgba(16, 185, 129, 0.22) !important;
    color: var(--orbit-stat-green) !important;
}

/* Icon sits beside the label, vertically centered */
.fi-wi-stats-overview-stat .grid.gap-y-2 > .flex.items-center.gap-x-2 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

/* Thin progress bar under each stat's description, colored to match its icon badge */
.orbit-stat-progress {
    width: 100%;
    height: 7px;
    border-radius: 9999px;
    background: var(--orbit-card-border);
    overflow: hidden;
    margin-top: 0.75rem;
}
.orbit-stat-progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+1) .orbit-stat-progress-fill {
    background: var(--orbit-accent);
}
.fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+2) .orbit-stat-progress-fill {
    background: var(--orbit-stat-blue);
}
.fi-wi-stats-overview-stats-ctn > .fi-wi-stats-overview-stat:nth-child(3n+3) .orbit-stat-progress-fill {
    background: var(--orbit-stat-green);
}

/* ── Table ────────────────────────────────────────── */
.fi-ta-ctn {
    background: var(--orbit-card-bg) !important;
    border-radius: 16px !important;
    border: 1px solid var(--orbit-card-border) !important;
    overflow: visible !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* .fi-ta-ctn is overflow:visible (above) so the filters-trigger badge,
   which sits half outside its button in the toolbar's top-right corner
   by design (Filament's standard "notification dot" placement), isn't
   clipped. .fi-ta-content (the scrollable table body) still clips and
   scrolls independently, so this doesn't affect horizontal scrolling on
   narrow tables.

   The badge itself is left completely untouched — full icon visible,
   badge perched on its own button's corner exactly as Filament designed
   it. Instead, the toolbar row is given extra padding on all sides so
   that corner position — which pokes half the badge's size past the
   button — lands inside the card instead of past its border/top edge. */
.fi-ta-header-toolbar {
    padding: 1rem 1.5rem !important;
}

.fi-ta-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.fi-ta-table {
    min-width: 600px !important;
}

.fi-ta-header-cell {
    background: var(--orbit-main-bg) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--orbit-text-muted) !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--orbit-card-border) !important;
}

.fi-ta-row {
    border-bottom: 1px solid var(--orbit-card-border) !important;
    transition: background 0.1s !important;
}

.fi-ta-row:hover td,
.fi-ta-row:hover .fi-ta-cell {
    background: var(--orbit-main-bg) !important;
}

.fi-ta-cell {
    font-size: 0.875rem !important;
    color: var(--orbit-text-primary) !important;
    padding: 0.875rem 1rem !important;
}

.dark .fi-ta-ctn {
    background: var(--orbit-card-bg) !important;
}

.dark .fi-ta-header-cell {
    background: var(--orbit-table-head-bg) !important;
}

/* Dark mode: give the header <tr> a solid background so it spans the full row width */
.dark .fi-ta-table thead tr {
    background-color: var(--orbit-table-head-bg) !important;
}
.dark .fi-ta-table thead tr.bg-gray-100,
.dark .fi-ta-table thead tr[class*="bg-"] {
    background-color: var(--orbit-table-head-bg) !important;
}

/* ── Buttons ──────────────────────────────────────── */
.fi-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* Orange primary buttons */
.fi-btn-color-primary {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
    color: #ffffff !important;
}
.fi-btn-color-primary:hover {
    background-color: #C2410C !important;
    border-color: #C2410C !important;
    color: #ffffff !important;
}
.fi-btn-color-primary:focus {
    box-shadow: 0 0 0 3px rgba(234,88,12,0.3) !important;
    outline: none !important;
}

/* Keep outlined/ghost primary buttons using orange text + border */
.fi-btn-color-primary.fi-btn-outlined {
    background-color: transparent !important;
    border-color: #EA580C !important;
    color: #EA580C !important;
}
.fi-btn-color-primary.fi-btn-outlined:hover {
    background-color: rgba(234,88,12,0.08) !important;
}

/* Active sidebar icon stays cyan/teal (separate from button primary) */
.fi-sidebar-item-icon.text-primary-600 {
    background: var(--orbit-stat-teal) !important;
}

/* ── Badges / status pills ────────────────────────────
   Fully-rounded pills with a soft tinted background and matching text
   colour: approved = green, rejected = red, pending = amber. The tint
   and text colour are set here for both themes so the pill reads the
   same on the dashboard table and on the leave-request pages. */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    padding: 0.25rem 0.75rem !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important;
}

.fi-badge.fi-color-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}
.fi-badge.fi-color-danger {
    background-color: rgba(244, 63, 94, 0.15) !important;
    color: #FB7185 !important;
}
.fi-badge.fi-color-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #FBBF24 !important;
}
.fi-badge.fi-color-gray {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #94A3B8 !important;
}

/* Light mode needs the darker text shade for contrast on the soft tint */
:root:not(.dark) .fi-badge.fi-color-success { color: #047857 !important; }
:root:not(.dark) .fi-badge.fi-color-danger  { color: #BE123C !important; }
:root:not(.dark) .fi-badge.fi-color-warning { color: #B45309 !important; }
:root:not(.dark) .fi-badge.fi-color-gray    { color: #475569 !important; }

/* ── Inputs ───────────────────────────────────────── */
.fi-input,
.fi-select-input,
.fi-textarea {
    border-radius: 8px !important;
    border-color: var(--orbit-card-border) !important;
    font-size: 0.875rem !important;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
    border-color: #0891B2 !important;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15) !important;
    outline: none !important;
}

/* ── Tabs ─────────────────────────────────────────── */
.fi-tabs-tab {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--orbit-text-muted) !important;
    transition: all 0.15s !important;
}

.fi-tabs-tab[aria-selected="true"] {
    background: #E0F2FE !important;
    color: #0891B2 !important;
}

.dark .fi-tabs-tab[aria-selected="true"] {
    background: rgba(8,145,178,0.2) !important;
    color: #38BDF8 !important;
}

/* ── Login page ───────────────────────────────────── */
.fi-simple-main {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    min-height: 100vh !important;
}

.fi-simple-page {
    background: var(--orbit-card-bg) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

/* ── Dark mode topbar overrides ───────────────────── */
.dark .fi-topbar nav,
.dark .fi-topbar-nav {
    background: var(--orbit-topbar-bg) !important;
    border-color: var(--orbit-topbar-border) !important;
}

/* ── Full-screen dark background fix ─────────────── */
html, body, .fi-body {
    background: var(--orbit-main-bg) !important;
    min-height: 100vh !important;
}

.fi-main-ctn,
.fi-main,
.fi-page {
    background: var(--orbit-main-bg) !important;
    min-height: 100% !important;
}

/* Ensure layout wrapper fills full height */
.fi-layout {
    min-height: 100vh !important;
    background: var(--orbit-main-bg) !important;
}

/* ── Topbar user trigger button ───────────────────── */
.orbit-user-trigger {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 4px 8px 4px 4px;
    border-radius: 10px;
    transition: background 0.15s;
}
.orbit-user-trigger:hover {
    background: rgba(255,255,255,0.06);
}

/* ── User dropdown panel ──────────────────────────── */
.orbit-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--orbit-card-bg);
    border: 1px solid var(--orbit-card-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    z-index: 9999;
    overflow: hidden;
}

.orbit-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.orbit-dropdown-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--orbit-text-primary);
    display: block;
}

.orbit-dropdown-role {
    font-size: 0.75rem;
    color: var(--orbit-text-muted);
    display: block;
    margin-top: 1px;
}

.orbit-dropdown-divider {
    height: 1px;
    background: var(--orbit-card-border);
    margin: 0;
}

.orbit-dropdown-menu {
    padding: 6px;
}

.orbit-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--orbit-text-primary);
    text-decoration: none;
    transition: background 0.12s;
    border: none;
    background: transparent;
    cursor: pointer;
}

.orbit-dropdown-item:hover {
    background: var(--orbit-main-bg);
    color: var(--orbit-text-primary);
    text-decoration: none;
}

.orbit-dropdown-item-icon {
    width: 18px;
    height: 18px;
    color: var(--orbit-text-muted);
    flex-shrink: 0;
}

.orbit-dropdown-item-logout {
    color: #EF4444;
}

.orbit-dropdown-item-logout .orbit-dropdown-item-icon {
    color: #EF4444;
}

.orbit-dropdown-item-logout:hover {
    background: rgba(239,68,68,0.08);
    color: #EF4444;
}

/* ── Dashboard greeting card ───────────────────────────────────────
   Diagonal gradient with inline SVG artwork (sun, clouds, layered
   mountains) drawn by the Blade partial. Every colour in the artwork is
   a CSS custom property, so the three time-of-day scenes below are pure
   token swaps on .is-morning / .is-afternoon / .is-evening — the SVG
   markup itself is written once and never branches.

   All three keep the brand purple anchored on the left edge and vary the
   right-hand sky, sun colour/height and mountain palette:
     morning   — sunrise: violet → coral → gold, sun low and rising
     afternoon — clear day: purple → blue → sky blue, sun high
     evening   — sunset: indigo → magenta → ember, sun near the horizon */
.orbit-dash-greet-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 104px;
    border-radius: 1rem;
    padding: 1.35rem 1.5rem;
    border: none;
    margin-bottom: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--orbit-greet-bg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);

    /* Defaults = afternoon, so the card is never unstyled if the
       time-of-day class is ever missing. */
    --orbit-greet-bg: linear-gradient(100deg, #E46F2E 0%, #F68544 22%, #4F6FE5 46%, #3B93E8 72%, #5FC3F2 100%);
    --orbit-greet-sun-core: #FDE68A;
    --orbit-greet-sun-mid: #FBBF24;
    --orbit-greet-sun-edge: #F59E0B;
    --orbit-greet-sun-shift: 0px;
    --orbit-greet-cloud: #FFFFFF;
    --orbit-greet-cloud-op: 0.92;
    --orbit-greet-mtn-back: #BFDBFE;
    --orbit-greet-mtn-back-op: 0.45;
    --orbit-greet-mtn-mid: #93C5FD;
    --orbit-greet-mtn-mid-op: 0.65;
    --orbit-greet-mtn-front: #DBEAFE;
    --orbit-greet-mtn-front-op: 0.82;
    --orbit-greet-pine: #1E3A8A;
    --orbit-greet-scrim: rgba(23, 16, 66, 0.30);
}

/* ── Morning: sunrise ─────────────────────────────── */
.orbit-dash-greet-card.is-morning {
    --orbit-greet-bg: linear-gradient(100deg,
        #BD5522 0%,
        #E46F2E 18%,
        #FB9B52 36%,
        #F472B6 58%,
        #FB9B52 82%,
        #FCD34D 100%);
    --orbit-greet-sun-core: #FFFBEB;
    --orbit-greet-sun-mid: #FCD34D;
    --orbit-greet-sun-edge: #F59E0B;
    /* Sun sits low on the horizon — it's rising */
    --orbit-greet-sun-shift: 16px;
    --orbit-greet-cloud: #FFF7ED;
    --orbit-greet-cloud-op: 0.85;
    --orbit-greet-mtn-back: #FED7AA;
    --orbit-greet-mtn-back-op: 0.42;
    --orbit-greet-mtn-mid: #FDBA74;
    --orbit-greet-mtn-mid-op: 0.55;
    --orbit-greet-mtn-front: #FFEDD5;
    --orbit-greet-mtn-front-op: 0.80;
    --orbit-greet-pine: #BD5522;
    --orbit-greet-scrim: rgba(46, 16, 74, 0.32);
}

/* ── Afternoon: clear day (explicit, matches the defaults) ── */
.orbit-dash-greet-card.is-afternoon {
    --orbit-greet-bg: linear-gradient(100deg,
        #E46F2E 0%,
        #F68544 22%,
        #4F6FE5 46%,
        #3B93E8 72%,
        #5FC3F2 100%);
    --orbit-greet-sun-core: #FDE68A;
    --orbit-greet-sun-mid: #FBBF24;
    --orbit-greet-sun-edge: #F59E0B;
    --orbit-greet-sun-shift: 0px;
    --orbit-greet-cloud: #FFFFFF;
    --orbit-greet-cloud-op: 0.92;
    --orbit-greet-mtn-back: #BFDBFE;
    --orbit-greet-mtn-back-op: 0.45;
    --orbit-greet-mtn-mid: #93C5FD;
    --orbit-greet-mtn-mid-op: 0.65;
    --orbit-greet-mtn-front: #DBEAFE;
    --orbit-greet-mtn-front-op: 0.82;
    --orbit-greet-pine: #1E3A8A;
    --orbit-greet-scrim: rgba(23, 16, 66, 0.30);
}

/* ── Evening: sunset ──────────────────────────────── */
.orbit-dash-greet-card.is-evening {
    --orbit-greet-bg: linear-gradient(100deg,
        #312E81 0%,
        #4C1D95 18%,
        #7E22CE 38%,
        #BE185D 62%,
        #EA580C 85%,
        #F59E0B 100%);
    --orbit-greet-sun-core: #FEF3C7;
    --orbit-greet-sun-mid: #FB9B52;
    --orbit-greet-sun-edge: #EA580C;
    /* Lowest of the three — the sun is setting */
    --orbit-greet-sun-shift: 22px;
    --orbit-greet-cloud: #FBCFE8;
    --orbit-greet-cloud-op: 0.55;
    /* Darker ranges so the peaks read as silhouettes against the warm sky */
    --orbit-greet-mtn-back: #6D28D9;
    --orbit-greet-mtn-back-op: 0.48;
    --orbit-greet-mtn-mid: #3B0764;
    --orbit-greet-mtn-mid-op: 0.62;
    --orbit-greet-mtn-front: #1E1B4B;
    --orbit-greet-mtn-front-op: 0.78;
    --orbit-greet-pine: #0F172A;
    --orbit-greet-scrim: rgba(8, 5, 28, 0.34);
}

@media (max-width: 640px) {
    .orbit-dash-greet-card { min-height: 120px; }
}

/* Inline SVG artwork layers */
.orbit-greet-mountains {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 66%;
    z-index: 0;
    pointer-events: none;
}

.orbit-greet-sky {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 46%;
    z-index: 0;
    pointer-events: none;
}

/* Light scrim on the left only, so the vivid gradient stays vivid on the
   right while the greeting text keeps its contrast. Tinted per variant via
   --orbit-greet-scrim, fading to fully transparent before the artwork. */
.orbit-dash-greet-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg,
        var(--orbit-greet-scrim) 0%,
        transparent 72%);
}

/* Sun rides lower at sunrise/sunset. Applied as a CSS transform on the SVG
   group rather than baked into cy, so the artwork markup stays variant-free. */
.orbit-greet-sun-group {
    transform: translateY(var(--orbit-greet-sun-shift));
}

.orbit-dash-greet-text {
    position: relative;
    flex: 1;
}
.orbit-dash-greet-main {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.orbit-dash-greet-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
    flex-wrap: wrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.orbit-dash-greet-time {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: rgba(255,255,255,0.98);
}
.orbit-dash-greet-sep { color: rgba(255,255,255,0.6); }

/* ── Chart widgets: hide horizontal grid lines in light mode only ── */
:root:not(.dark) .fi-wi-chart [x-ref="gridColorElement"] {
    color: transparent !important;
}

/* ── Dashboard table widgets: heading + search/filter toolbar on one line ── */
.fi-wi-table .fi-ta-header-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.fi-wi-table .fi-ta-header-ctn > * {
    border-top: none !important;
}

.fi-wi-table .fi-ta-header {
    flex: 1 1 auto;
    padding-bottom: 0.75rem !important;
}

.fi-wi-table .fi-ta-header-toolbar {
    flex: 0 0 auto;
    margin-left: auto;
    padding-top: 0.75rem !important;
}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ═══════════════════════════════════════════════════════════════
   ORG CHART PAGE
═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────────── */
.oc-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 140px);
    min-height: 520px;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.oc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--orbit-card-bg);
    border: 1px solid var(--orbit-card-border);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.oc-toolbar-left { display: flex; align-items: center; gap: 0.5rem; }
.oc-toolbar-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; font-weight: 500; color: var(--orbit-text-muted);
}
.oc-toolbar-icon { width: 16px; height: 16px; flex-shrink: 0; }
.oc-toolbar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.oc-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem; font-size: 0.78rem; font-weight: 600;
    color: var(--orbit-text-muted); background: var(--orbit-main-bg);
    border: 1px solid var(--orbit-card-border); border-radius: 8px;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.oc-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.oc-btn:hover { background: var(--orbit-card-border); color: var(--orbit-text-primary); }

/* ── Canvas wrap (pan area) ──────────────────────────────────── */
.oc-canvas-wrap {
    flex: 1; overflow: hidden;
    background: var(--orbit-main-bg);
    border: 1px solid var(--orbit-card-border);
    border-top: none; border-radius: 0 0 12px 12px;
    cursor: grab; position: relative;
}
.oc-canvas-wrap:active { cursor: grabbing; }

.oc-canvas {
    display: inline-block; padding: 3rem 4rem;
    transform-origin: top left; transition: transform 0.05s linear;
    min-width: 100%; will-change: transform;
}

/* ── Tree root ───────────────────────────────────────────────── */
.oc-tree {
    display: flex; flex-direction: row; gap: 2.5rem;
    align-items: flex-start; justify-content: center;
}

/* ── Node wrapper ────────────────────────────────────────────── */
.oc-node-wrap { display: flex; flex-direction: column; align-items: center; position: relative; }

/* ── Card ────────────────────────────────────────────────────── */
.oc-card {
    position: relative; width: 200px;
    background: var(--orbit-card-bg); border: 1px solid var(--orbit-card-border);
    border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, transform 0.2s; overflow: hidden; flex-shrink: 0;
}
.oc-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.18); transform: translateY(-2px); }

.oc-card-accent-bar { height: 3px; background: var(--oc-accent, #0891B2); width: 100%; }

.oc-card-inner {
    display: flex; flex-direction: column; align-items: center;
    padding: 1rem 0.75rem 0.75rem; gap: 0.5rem; position: relative;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.oc-avatar-wrap { position: relative; flex-shrink: 0; }
.oc-avatar {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    display: block; border: 2px solid var(--oc-accent, #0891B2);
}
.oc-avatar-initials {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; color: #fff;
    background: var(--oc-accent, #0891B2); border: 2px solid var(--oc-accent, #0891B2);
}
.oc-avatar-ring {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--oc-accent, #0891B2); opacity: 0.25; pointer-events: none;
}

/* ── Card text ───────────────────────────────────────────────── */
.oc-card-info { text-align: center; width: 100%; }
.oc-card-name {
    font-size: 0.82rem; font-weight: 700; color: var(--orbit-text-primary);
    line-height: 1.3; margin-bottom: 0.15rem; word-break: break-word;
}
.oc-card-desig { font-size: 0.72rem; color: var(--oc-accent, #0891B2); font-weight: 600; line-height: 1.3; word-break: break-word; }
.oc-card-dept { font-size: 0.68rem; color: var(--orbit-text-muted); margin-top: 0.1rem; word-break: break-word; }

/* ── View button ─────────────────────────────────────────────── */
.oc-view-btn {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: var(--orbit-main-bg); border: 1px solid var(--orbit-card-border);
    border-radius: 6px; cursor: pointer; color: var(--orbit-text-muted);
    transition: all 0.15s; padding: 0;
}
.oc-view-btn svg { width: 13px; height: 13px; }
.oc-view-btn:hover { background: var(--oc-accent, #0891B2); border-color: var(--oc-accent, #0891B2); color: #fff; }

/* ── Card footer ─────────────────────────────────────────────── */
.oc-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0.75rem; border-top: 1px solid var(--orbit-card-border);
    background: var(--orbit-main-bg);
}
.oc-sub-badge { display: flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 600; color: var(--orbit-text-muted); }
.oc-sub-badge svg { width: 12px; height: 12px; }

.oc-toggle-btn {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--orbit-card-border);
    border-radius: 6px; cursor: pointer; color: var(--orbit-text-muted);
    transition: all 0.2s; padding: 0; flex-shrink: 0;
}
.oc-toggle-btn svg { width: 13px; height: 13px; transition: transform 0.25s ease; }
.oc-toggle-btn:hover { background: var(--oc-accent, #0891B2); border-color: var(--oc-accent, #0891B2); color: #fff; }
.oc-toggle-btn.oc-toggle-collapsed svg { transform: rotate(-90deg); }

/* ── Connectors ──────────────────────────────────────────────── */
.oc-children { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.oc-children.oc-hidden { display: none; }
.oc-connector-v { width: 2px; height: 28px; background: var(--orbit-card-border); flex-shrink: 0; }

.oc-children-row {
    display: flex; flex-direction: row; align-items: flex-start;
    gap: 0; position: relative;
}
.oc-children-row::before {
    content: ''; position: absolute; top: 0;
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 200px); height: 2px;
    background: var(--orbit-card-border); pointer-events: none;
}

.oc-child-col { display: flex; flex-direction: column; align-items: center; padding: 0 1.25rem; }
.oc-connector-h-cap { width: 2px; height: 24px; background: var(--orbit-card-border); flex-shrink: 0; }

/* Root node slightly larger */
.oc-root > .oc-card { width: 220px; box-shadow: 0 6px 28px rgba(0,0,0,0.14); }
.oc-root > .oc-card .oc-avatar,
.oc-root > .oc-card .oc-avatar-initials { width: 60px; height: 60px; }
.oc-root > .oc-card .oc-card-name { font-size: 0.88rem; }
.oc-root > .oc-card .oc-card-desig { font-size: 0.78rem; }

/* ── Empty state ─────────────────────────────────────────────── */
.oc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 5rem 2rem; text-align: center; }
.oc-empty-icon { width: 64px; height: 64px; color: var(--orbit-text-muted); opacity: 0.4; }
.oc-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--orbit-text-primary); }
.oc-empty-sub { font-size: 0.85rem; color: var(--orbit-text-muted); max-width: 380px; line-height: 1.6; }
.oc-empty-sub code { font-family: monospace; background: var(--orbit-card-bg); border: 1px solid var(--orbit-card-border); border-radius: 4px; padding: 0.1em 0.4em; font-size: 0.85em; }

/* ── Drawer backdrop ─────────────────────────────────────────── */
.oc-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 49; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.oc-drawer-backdrop.oc-backdrop-show { opacity: 1; pointer-events: all; }

/* ── Slide-over drawer ───────────────────────────────────────── */
.oc-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 92vw;
    background: var(--orbit-card-bg); border-left: 1px solid var(--orbit-card-border);
    box-shadow: -12px 0 48px rgba(0,0,0,0.2); z-index: 50;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto; padding: 1.5rem;
}
.oc-drawer.oc-drawer-open { transform: translateX(0); }

.oc-drawer-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: var(--orbit-main-bg); border: 1px solid var(--orbit-card-border);
    border-radius: 8px; cursor: pointer; color: var(--orbit-text-muted); transition: all 0.15s; padding: 0;
}
.oc-drawer-close svg { width: 14px; height: 14px; }
.oc-drawer-close:hover { background: #EF4444; border-color: #EF4444; color: #fff; }

.oc-drawer-hero { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; margin-bottom: 1.25rem; padding-right: 2rem; }
.oc-drawer-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--orbit-card-border); }
.oc-drawer-initials { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #fff; background: #0891B2; }
.oc-drawer-name { font-size: 1rem; font-weight: 700; color: var(--orbit-text-primary); line-height: 1.3; }
.oc-drawer-desig { font-size: 0.8rem; font-weight: 600; color: #0891B2; margin-top: 0.1rem; }
.oc-drawer-dept { font-size: 0.75rem; color: var(--orbit-text-muted); margin-top: 0.1rem; }
.oc-drawer-divider { height: 1px; background: var(--orbit-card-border); margin: 1rem 0; }
.oc-drawer-meta { display: flex; flex-direction: column; gap: 0.6rem; }
.oc-drawer-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--orbit-text-muted); }
.oc-drawer-row svg { width: 15px; height: 15px; flex-shrink: 0; }
.oc-drawer-link { color: #0891B2; text-decoration: none; font-weight: 500; }
.oc-drawer-link:hover { text-decoration: underline; }
.oc-drawer-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orbit-text-muted); margin-bottom: 0.75rem; }

/* Direct reports list in drawer */
.oc-drawer-reports { display: flex; flex-direction: column; gap: 0.5rem; }
.oc-dr-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--orbit-main-bg); border: 1px solid var(--orbit-card-border); }
.oc-dr-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--orbit-card-border); }
.oc-dr-initials { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; background: #E46F2E; }
.oc-dr-name { font-size: 0.8rem; font-weight: 600; color: var(--orbit-text-primary); line-height: 1.3; }

/* Highlight selected ToggleButtons option (leave duration / half-day) */
.fi-fo-toggle-buttons input.peer + .fi-btn {
    border-radius: 0.5rem;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Light mode – selected */
.fi-fo-toggle-buttons input.peer:checked + .fi-btn {
    background-color: #EA580C !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
}

/* Dark mode – selected */
.dark .fi-fo-toggle-buttons input.peer:checked + .fi-btn {
    background-color: #EA580C !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.4) !important;
}

/* Light mode – unselected */
.fi-fo-toggle-buttons input.peer:not(:checked) + .fi-btn {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border: none !important;
}

/* Dark mode – unselected */
.dark .fi-fo-toggle-buttons input.peer:not(:checked) + .fi-btn {
    background-color: #2D3B4F !important;
    color: #CBD5E1 !important;
    border: none !important;
}

/* Hover on unselected */
.fi-fo-toggle-buttons input.peer:not(:checked) + .fi-btn:hover {
    background-color: #E2E8F0 !important;
    color: #334155 !important;
}
.dark .fi-fo-toggle-buttons input.peer:not(:checked) + .fi-btn:hover {
    background-color: #334155 !important;
    color: #E2E8F0 !important;
}

.oc-dr-desig { font-size: 0.7rem; color: var(--orbit-text-muted); margin-top: 0.05rem; }
 
/* Attendance Settings time pickers only — match sidebar background in dark mode */
.dark .orbit-attendance-settings-time-pickers .fi-fo-twelve-hour-time-picker > button,
.dark .orbit-attendance-settings-time-pickers .fi-fo-twelve-hour-time-picker-panel {
    background-color: var(--orbit-sidebar-bg) !important;
}

/* Collapsed-sidebar group flyout (the dropdown showing a group's items,
   e.g. "Attendance") — its bg-white/dark:bg-gray-900 utility classes never
   get compiled into Filament's vendor CSS bundle because that bundle only
   scans Filament's own package templates, not this app's overridden
   resources/views/vendor/filament-panels/** copies. Without this override
   the panel renders with no background at all. Styled theme-aware here to
   match the rest of the app's card surfaces. */
.fi-dropdown-panel {
    background-color: var(--orbit-card-bg) !important;
    border: 1px solid var(--orbit-card-border) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
    z-index: 9999 !important;
}
.fi-dropdown-panel,
.fi-dropdown-panel * {
    color: var(--orbit-text-primary) !important;
}
.fi-dropdown-panel .fi-dropdown-list {
    border-color: var(--orbit-card-border) !important;
}
.fi-dropdown-panel .fi-dropdown-list-item:hover {
    background-color: var(--orbit-sidebar-hover-bg) !important;
}

/* ── Table pagination / "Per page" selector ──────────
   Styled to sit on the card surface with the same muted-label treatment
   as the table header. Applies wherever Filament renders pagination —
   the dashboard leave table included. */
.fi-pagination {
    padding: 0.9rem 1.5rem !important;
    border-top: 1px solid var(--orbit-card-border) !important;
}

.fi-pagination-overview,
.fi-pagination-records-per-page-select label,
.fi-pagination-records-per-page-select .fi-fo-field-wrp-label {
    color: var(--orbit-text-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.fi-pagination-records-per-page-select select,
.fi-pagination-records-per-page-select .fi-input,
.fi-pagination-records-per-page-select .fi-select-input {
    background-color: var(--orbit-table-head-bg) !important;
    border: 1px solid var(--orbit-card-border) !important;
    border-radius: 9px !important;
    color: var(--orbit-text-primary) !important;
    font-size: 0.8rem !important;
    padding: 0.35rem 2rem 0.35rem 0.7rem !important;
}

/* Pagination page buttons */
.fi-pagination-items .fi-btn,
.fi-pagination-previous-btn,
.fi-pagination-next-btn {
    border-radius: 9px !important;
    background-color: var(--orbit-table-head-bg) !important;
    border: 1px solid var(--orbit-card-border) !important;
    color: var(--orbit-text-muted) !important;
}

.fi-pagination-items .fi-btn[aria-current="page"],
.fi-pagination-items .fi-active {
    background-color: var(--orbit-accent) !important;
    border-color: var(--orbit-accent) !important;
    color: #ffffff !important;
}

/* ── Table filter / status dropdown trigger ──────────
   Styling only — no filter is added to any table here. Where a table
   already defines filters (e.g. a status filter), its trigger picks up
   the same surface treatment as the per-page selector above. */
.fi-ta-filters-trigger .fi-icon-btn,
.fi-ta-header-toolbar .fi-select-input,
.fi-ta-header-toolbar .fi-input {
    background-color: var(--orbit-table-head-bg) !important;
    border: 1px solid var(--orbit-card-border) !important;
    border-radius: 10px !important;
    color: var(--orbit-text-primary) !important;
}

.fi-ta-filters-trigger .fi-icon-btn:hover {
    border-color: var(--orbit-accent) !important;
    color: var(--orbit-accent) !important;
}

/* ── Table empty state ───────────────────────────────
   Matches the reference's centred icon-in-a-circle treatment. */
.fi-ta-empty-state-icon-ctn {
    background-color: var(--orbit-accent-soft) !important;
    border-radius: 9999px !important;
    padding: 1.25rem !important;
}
.fi-ta-empty-state-icon {
    color: var(--orbit-accent) !important;
}
.fi-ta-empty-state-heading {
    color: var(--orbit-text-primary) !important;
    font-weight: 600 !important;
}
.fi-ta-empty-state-description {
    color: var(--orbit-text-muted) !important;
}


/* ── Employee directory cards (ViewColumn blade) ────────────────────────────
   .oemp-* styles for the custom employee-card.blade.php column view.
   Colors use the project CSS vars so light/dark mode works automatically. */

/* Card wrapper — used by Filament recordClasses */
.orbit-employee-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.orbit-employee-card:hover { transform: translateY(-3px); }
.orbit-employee-card-inactive { opacity: 0.6; filter: grayscale(40%); }

/* Filament injects a cell wrapper — remove its padding so our card fills edge-to-edge */
.orbit-employee-card .fi-ta-record-cell,
.orbit-employee-card > td {
    padding: 0 !important;
}

/* ── The card itself ── */
.oemp-card {
    display: flex;
    flex-direction: column;
    background: var(--orbit-card-bg);
    border: 1px solid var(--orbit-card-border);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.orbit-employee-card:hover .oemp-card {
    box-shadow: 0 8px 28px var(--orbit-accent-glow);
    border-color: var(--orbit-accent);
}

/* ── Header strip with wavy gradient bg ── */
.oemp-header {
    position: relative;
    background: linear-gradient(145deg, rgba(246,133,68,0.18) 0%, rgba(246,133,68,0.04) 100%);
    padding: 1.25rem 1rem 2rem;
    display: flex;
    align-items: flex-start;
}

/* Avatar + level badge container */
.oemp-avatar-wrap {
    position: relative;
    display: inline-block;
}

.oemp-avatar {
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--orbit-accent);
    box-shadow: 0 4px 16px var(--orbit-accent-glow);
    display: block;
}

/* Level badge — top-left corner of avatar */
.oemp-level-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px 2px 5px;
    border-radius: 9999px;
    border: 2px solid var(--orbit-card-bg);
    box-shadow: 0 2px 8px rgba(99,102,241,0.5);
    white-space: nowrap;
    z-index: 2;
}
.oemp-level-icon {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}

/* ── Body ── */
.oemp-body {
    padding: 0.85rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.oemp-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--orbit-text-primary);
    line-height: 1.25;
}

/* Row with icon */
.oemp-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.80rem;
    color: var(--orbit-text-muted);
}
.oemp-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--orbit-text-muted);
    opacity: 0.7;
}

/* Status badge */
.oemp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
}
.oemp-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    flex-shrink: 0;
}
.oemp-badge--success { background: rgba(34,197,94,0.12); color: #16a34a; }
.oemp-badge--success .oemp-badge-dot { background: #16a34a; }
.oemp-badge--warning { background: rgba(245,158,11,0.12); color: #d97706; }
.oemp-badge--warning .oemp-badge-dot { background: #d97706; }
.oemp-badge--info    { background: rgba(59,130,246,0.12); color: #2563eb; }
.oemp-badge--info    .oemp-badge-dot { background: #2563eb; }
.oemp-badge--danger  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.oemp-badge--danger  .oemp-badge-dot { background: #dc2626; }
.oemp-badge--gray    { background: rgba(100,116,139,0.12); color: #64748b; }
.oemp-badge--gray    .oemp-badge-dot { background: #64748b; }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .oemp-badge--success { background: rgba(34,197,94,0.18); color: #4ade80; }
    .oemp-badge--success .oemp-badge-dot { background: #4ade80; }
    .oemp-badge--warning { background: rgba(245,158,11,0.18); color: #fbbf24; }
    .oemp-badge--warning .oemp-badge-dot { background: #fbbf24; }
    .oemp-badge--info    { background: rgba(59,130,246,0.18); color: #60a5fa; }
    .oemp-badge--info    .oemp-badge-dot { background: #60a5fa; }
    .oemp-badge--danger  { background: rgba(239,68,68,0.18);  color: #f87171; }
    .oemp-badge--danger  .oemp-badge-dot { background: #f87171; }
}

/* ── Footer: view details button ── */
.oemp-footer {
    padding: 0.65rem 1rem 1rem;
}
.oemp-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1.5px solid var(--orbit-card-border);
    background: transparent;
    color: var(--orbit-text-muted);
    font-size: 0.80rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.oemp-view-btn:hover {
    border-color: var(--orbit-accent);
    color: var(--orbit-accent-strong);
    background: var(--orbit-accent-soft);
}
.oemp-btn-arrow {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}


/* Notification bell in the topbar: same round look as the theme toggle */
.fi-topbar-database-notifications-btn {
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    background: var(--orbit-card-bg);
    border: 1px solid var(--orbit-card-border);
    flex-shrink: 0;
}

/* Notification bell dropdown (compact popover instead of Filament's slide-over) */
.orbit-notif-popover {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 60;
    width: 22rem;
    max-width: calc(100vw - 1.5rem);
    background: var(--orbit-card-bg, #fff);
    border: 1px solid var(--orbit-card-border, #e8edf3);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.orbit-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--orbit-card-border, #e8edf3);
}

.orbit-notif-title {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.orbit-notif-actions {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.orbit-notif-list {
    max-height: min(24rem, 60vh);
    overflow-y: auto;
}

.orbit-notif-item {
    position: relative;
    border-bottom: 1px solid var(--orbit-card-border, #eef2f6);
}

.orbit-notif-item:last-child {
    border-bottom: 0;
}

.orbit-notif-item-unread::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgb(246, 133, 68);
}

/* tighter cards inside the popover */
.orbit-notif-item .fi-no-notification {
    padding: 10px 14px;
    box-shadow: none;
    background: transparent;
}

.orbit-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 14px;
    font-size: 13px;
    color: #94a3b8;
}

.orbit-notif-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--orbit-card-border, #e8edf3);
}

/* Notification popover: tappable "View" button and close (X) button */
.orbit-notif-item .fi-no-notification-actions {
    margin-top: 12px;
}

/* Covers both stored link-style actions (.fi-link) and button actions (.fi-btn) */
.orbit-notif-item .fi-no-notification-actions .fi-btn,
.orbit-notif-item .fi-no-notification-actions .fi-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 22px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgb(246, 133, 68);
    box-shadow: 0 1px 2px rgba(246, 133, 68, 0.35);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.orbit-notif-item .fi-no-notification-actions .fi-btn:hover,
.orbit-notif-item .fi-no-notification-actions .fi-link:hover {
    background: rgb(232, 115, 48);
    box-shadow: 0 3px 8px rgba(246, 133, 68, 0.4);
}

.orbit-notif-item .fi-no-notification-actions .fi-btn:active,
.orbit-notif-item .fi-no-notification-actions .fi-link:active {
    transform: translateY(1px);
}

.orbit-notif-item .fi-no-notification-actions .fi-btn *,
.orbit-notif-item .fi-no-notification-actions .fi-link * {
    color: inherit;
}

.orbit-notif-item .fi-no-notification-close-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 9999px;
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.orbit-notif-item .fi-no-notification-close-btn:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
}

.orbit-notif-item .fi-no-notification-close-btn svg {
    width: 16px;
    height: 16px;
}

/* Beat the theme's forced orange `.fi-link` text colour so the label stays white on the orange button */
html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-link,
html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-btn,
html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-link *,
html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-btn * {
    color: #fff !important;
}

html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-link,
html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-btn {
    background: #F68544 !important;
    box-shadow: 0 4px 10px -4px rgba(246, 133, 68, 0.6) !important;
}

html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-link:hover,
html .fi-layout .orbit-notif-item .fi-no-notification-actions .fi-btn:hover {
    background: #E46F2E !important;
}