@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --teal-50: oklch(.984 .014 180.72); --teal-100: oklch(.953 .051 180.801); --teal-200: oklch(.91 .096 180.426);
    --teal-300: oklch(.855 .138 181.071); --teal-400: oklch(.777 .152 181.912); --teal-500: oklch(.704 .14 182.503);
    --teal-600: oklch(.6 .118 184.704); --teal-700: oklch(.511 .096 186.391); --teal-800: oklch(.437 .078 188.216);
    --teal-900: oklch(.386 .063 188.416); --teal-950: oklch(.277 .046 192.524);

    --amber-50: oklch(.987 .022 95.277); --amber-100: oklch(.962 .059 95.617); --amber-200: oklch(.924 .12 95.746);
    --amber-300: oklch(.879 .169 91.605); --amber-400: oklch(.828 .189 84.429); --amber-500: oklch(.769 .188 70.08);
    --amber-600: oklch(.666 .179 58.318); --amber-700: oklch(.555 .163 48.998); --amber-800: oklch(.473 .137 46.201);
    --amber-900: oklch(.414 .112 45.904); --amber-950: oklch(.279 .077 45.635);

    --slate-50: oklch(.984 .003 247.858); --slate-100: oklch(.968 .007 247.896); --slate-200: oklch(.929 .013 255.508);
    --slate-300: oklch(.869 .022 252.894); --slate-400: oklch(.704 .04 256.788); --slate-500: oklch(.554 .046 257.417);
    --slate-600: oklch(.446 .043 257.281); --slate-700: oklch(.372 .044 257.287); --slate-800: oklch(.279 .041 260.031);
    --slate-900: oklch(.208 .042 265.755); --slate-950: oklch(.129 .042 264.695);

    --surface-page: var(--slate-100);
    --surface-card: #fff;
    --surface-sidebar: color-mix(in oklab, #fff 72%, transparent);
    --surface-sunken: var(--slate-50);
    --border-default: color-mix(in oklab, var(--slate-900) 8%, transparent);
    --border-strong: var(--slate-300);
    --text-heading: var(--slate-900);
    --text-body: var(--slate-700);
    --text-muted: var(--slate-500);
    --focus-ring: var(--teal-500);

    --radius-sm: .375rem; --radius-md: .625rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --radius-full: 9999px;
    --shadow-xs: 0 1px 2px 0 rgba(15,23,42,.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 8px 24px -4px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
    --shadow-lg: 0 20px 40px -8px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.04);
    --blur-chrome: 20px;
    --ease-standard: cubic-bezier(.4,0,.2,1);
    --duration-base: 180ms;
}

body { font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; background: var(--surface-page); }

.fi-sidebar {
    background: var(--surface-sidebar) !important;
    backdrop-filter: blur(var(--blur-chrome));
    -webkit-backdrop-filter: blur(var(--blur-chrome));
    border-right: 1px solid var(--border-default);
}
.fi-topbar > nav {
    background: var(--surface-sidebar) !important;
    backdrop-filter: blur(var(--blur-chrome));
    -webkit-backdrop-filter: blur(var(--blur-chrome));
}
.fi-sidebar-item-active .fi-sidebar-item-button { background: var(--teal-600) !important; color: #fff !important; }
.fi-avatar { border-radius: var(--radius-full) !important; }
.fi-badge { border-radius: var(--radius-full) !important; font-weight: 600; }
.fi-btn { border-radius: var(--radius-full) !important; transition: background var(--duration-base) var(--ease-standard); }
.fi-ta-ctn, .fi-section, .fi-wi-stats-overview-stat, .fi-card {
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-default) !important;
}
.fi-ta-header-cell { text-transform: uppercase; letter-spacing: .03em; font-size: .75rem; color: var(--text-muted) !important; }

:root {
    --green-500: oklch(.723 .219 149.579);
    --blue-500: oklch(.623 .214 259.815);
}

/* ==========================================================================
   Icon-rail sidebar (Phase 2)
   ========================================================================== */

/* Floating rail: detach the sidebar from the viewport edges into its own
   rounded, elevated "pill" instead of a full-height edge-to-edge panel. */
.fi-sidebar {
    width: 72px !important;
    height: calc(100vh - 32px) !important;
    margin: 16px 0 16px 16px !important;
    top: 16px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-lg) !important;
    /* No overflow:hidden here — the user-menu dropdown panel needs to be
       able to render outside the rail's bounds (it flips upward to open
       above the avatar since there's no room below it at the bottom of
       the screen). Nothing else in the rail overflows the rounded corners,
       so clipping isn't needed for the pill shape to look right. */
}
.fi-sidebar-nav-groups { display: none !important; }
/* Native Filament header (brand logo + collapse toggle) is fully replaced
   by the custom rail below, so it's hidden rather than styled. */
.fi-sidebar-header { display: none !important; }

.gecko-rail { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 16px 0; gap: 4px; }
.gecko-rail-logo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 16px; flex-shrink: 0; }
.gecko-rail-logo-icon { height: 30px; width: auto; display: block; }

.gecko-rail-items { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* User avatar, pinned to the bottom of the rail */
.gecko-rail-user { margin-top: auto; display: flex; align-items: center; justify-content: center; width: 100%; padding-top: 10px; }
.gecko-rail-user button {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: var(--radius-full); transition: background var(--duration-base) var(--ease-standard);
}
.gecko-rail-user button:hover { background: var(--slate-200); }
.dark .gecko-rail-user button:hover { background: var(--slate-800); }
.gecko-rail-user .fi-user-avatar { width: 36px !important; height: 36px !important; }
.gecko-rail-item-wrap { position: relative; }

/* Horizontal section-tabs bar, rendered at the top of a panel's pages
   (replaces per-panel sub-items that used to live in the sidebar). */
.gecko-tabs-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 28px 0 20px; border-bottom: 1px solid var(--border-default); padding-bottom: 12px; }
.gecko-tab {
    display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: var(--radius-full);
    font-size: 13.5px; font-weight: 500; color: var(--text-body); text-decoration: none; border: none;
    background: transparent; cursor: pointer; transition: background var(--duration-base) var(--ease-standard);
}
.gecko-tab:hover { background: var(--slate-100); color: var(--text-heading); }
.gecko-tab.is-active { background: var(--teal-600); color: #fff; }
.gecko-tab-dropdown-wrap { position: relative; }
.gecko-tab-dropdown-menu {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; z-index: 40;
    background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.gecko-tab-dropdown-item { padding: 8px 10px; border-radius: var(--radius-md); font-size: 13.5px; color: var(--text-body); text-decoration: none; }
.gecko-tab-dropdown-item:hover { background: var(--slate-100); color: var(--text-heading); }
.gecko-tab-dropdown-item.is-active { color: var(--teal-600); font-weight: 600; }
.dark .gecko-tab:hover { background: var(--slate-800); }
.dark .gecko-tab-dropdown-item:hover { background: var(--slate-800); }

.gecko-rail-item {
    width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer; position: relative;
    transition: background var(--duration-base) var(--ease-standard);
}
.gecko-rail-item:hover { background: var(--slate-200); }
.gecko-rail-item.is-active { background: var(--teal-600); }
.gecko-rail-item.is-active .gecko-rail-icon { filter: brightness(0) invert(1); }
.gecko-rail-icon { display: block; filter: invert(.42) sepia(.06) saturate(.5); }
.gecko-rail-dot { position: absolute; top: 1px; right: 1px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--surface-sidebar); }

.gecko-rail-flyout {
    position: absolute; left: 56px; top: -4px; min-width: 200px; z-index: 40;
    background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.gecko-rail-flyout-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px 4px; }
.gecko-rail-flyout-item { padding: 8px 10px; border-radius: var(--radius-md); font-size: 13.5px; color: var(--text-body); text-decoration: none; }
.gecko-rail-flyout-item:hover { background: var(--slate-100); color: var(--text-heading); }

/* ==========================================================================
   Home dashboard
   ========================================================================== */

.gecko-hero {
    position: relative; border-radius: var(--radius-2xl); overflow: hidden; min-height: 180px;
    background: linear-gradient(135deg, var(--slate-800), var(--teal-900));
    display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 28px; margin-bottom: 24px;
}
.gecko-hero-badge {
    position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 6px;
    background: var(--slate-950); color: #fff; padding: 6px 14px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 500;
}
.gecko-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-400); display: inline-block; }
.gecko-hero-title { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.gecko-hero-sub { font-size: 14.5px; color: rgba(255,255,255,.75); margin-top: 4px; }

.gecko-vacation-box {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 14px 18px; margin-bottom: 24px;
    font-size: 14.5px; color: var(--text-body);
}
.gecko-vacation-icon { color: var(--amber-500); flex-shrink: 0; }
.gecko-vacation-days { color: var(--text-muted); }

.gecko-page-flex {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 160px);
}
.gecko-footer-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 2px; margin-top: auto; padding-top: 28px;
    font-size: 13.5px; color: var(--text-body);
}
.gecko-footer-label { font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.gecko-footer-sep { color: var(--text-muted); }

.gecko-section-label { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; }
.gecko-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gecko-section-tile {
    background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-height: 88px;
    text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-standard);
}
.gecko-section-tile:hover { box-shadow: var(--shadow-md); }
.gecko-section-tile-header { display: flex; align-items: center; gap: 8px; }
.gecko-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gecko-section-tile-label { font-size: 15.5px; font-weight: 600; color: var(--text-heading); letter-spacing: -.01em; }
.gecko-section-tile-desc { font-size: 13.5px; color: var(--text-muted); }

/* fix: flyout was being clipped by the sidebar nav's own scroll/overflow container */
.fi-sidebar-nav,
.fi-sidebar-nav-groups,
.fi-sidebar-group,
.fi-sidebar-group-items {
    overflow: visible !important;
}
.gecko-rail-flyout {
    z-index: 9999 !important;
}

:root {
    --blue-100: oklch(.932 .032 255.585);
}
body {
    background: linear-gradient(180deg, color-mix(in oklab, var(--blue-100) 55%, var(--surface-page)), var(--surface-page) 40%);
}

:root {
    --blue-100: oklch(.932 .032 255.585);
}
body {
    background: linear-gradient(180deg, color-mix(in oklab, var(--blue-100) 55%, var(--surface-page)), var(--surface-page) 40%);
}

/* ── Reports page: override hardcoded dark card styling with Gecko light tokens ── */
.gecko-reports-page .bg-gray-900,
.gecko-reports-page .bg-gray-950,
.gecko-reports-page .bg-slate-900,
.gecko-reports-page .bg-slate-950,
.gecko-reports-page .bg-gray-800 {
    background-color: var(--surface-card) !important;
}

.gecko-reports-page .ring-white\/10,
.gecko-reports-page .ring-white\/15,
.gecko-reports-page .ring-white\/20 {
    --tw-ring-color: var(--border-default) !important;
}

.gecko-reports-page .bg-white\/5,
.gecko-reports-page .bg-white\/10,
.gecko-reports-page .bg-white\/15,
.gecko-reports-page .bg-white\/3 {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

.gecko-reports-page .text-white,
.gecko-reports-page .text-gray-100,
.gecko-reports-page .text-gray-200,
.gecko-reports-page .text-gray-300 {
    color: var(--text-body) !important;
}

.gecko-reports-page .text-gray-400,
.gecko-reports-page .text-gray-500 {
    color: var(--text-muted) !important;
}

/* ==========================================================================
   Dark mode token overrides — everything above uses var(--token), so
   redefining the tokens here makes the sidebar, topbar, rail, Home
   dashboard, report switcher, and page background all flip to dark
   together, matching the existing report content's own dark: classes.
   ========================================================================== */
.dark {
    --surface-page: var(--slate-950);
    --surface-card: var(--slate-900);
    --surface-sidebar: color-mix(in oklab, var(--slate-950) 72%, transparent);
    --surface-sunken: var(--slate-800);
    --border-default: color-mix(in oklab, #fff 10%, transparent);
    --border-strong: var(--slate-700);
    --text-heading: var(--slate-50);
    --text-body: var(--slate-300);
    --text-muted: var(--slate-400);
}
.dark body {
    background: var(--surface-page);
}
.dark .gecko-rail-item:hover {
    background: var(--slate-800);
}
.dark .gecko-rail-icon {
    filter: invert(1) brightness(1.4) saturate(.5);
}
.dark .gecko-rail-flyout-item:hover {
    background: var(--slate-800);
}

/* ==========================================================================
   Dark mode token overrides — everything above uses var(--token), so
   redefining the tokens here makes the sidebar, topbar, rail, Home
   dashboard, report switcher, and page background all flip to dark
   together, matching the existing report content's own dark: classes.
   ========================================================================== */
.dark {
    --surface-page: var(--slate-950);
    --surface-card: var(--slate-900);
    --surface-sidebar: color-mix(in oklab, var(--slate-950) 72%, transparent);
    --surface-sunken: var(--slate-800);
    --border-default: color-mix(in oklab, #fff 10%, transparent);
    --border-strong: var(--slate-700);
    --text-heading: var(--slate-50);
    --text-body: var(--slate-300);
    --text-muted: var(--slate-400);
}
.dark body {
    background: var(--surface-page);
}
.dark .gecko-rail-item:hover {
    background: var(--slate-800);
}
.dark .gecko-rail-icon {
    filter: invert(1) brightness(1.4) saturate(.5);
}
.dark .gecko-rail-flyout-item:hover {
    background: var(--slate-800);
}

/* ── Home hero: per-user background image upload ── */
.gecko-hero-edit-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}
.gecko-hero:hover .gecko-hero-edit-btn {
    opacity: 1;
}
.gecko-hero-edit-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.gecko-hero-remove-btn {
    position: absolute;
    top: 16px;
    left: 56px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    border: none;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}
.gecko-hero:hover .gecko-hero-remove-btn {
    opacity: 1;
}

/* Persistent employee-info panel, HR panel only — sits in the gutter
   between the floating icon rail (72px + 16px margin) and where Filament's
   default content offset begins. Nudge left/top here if it overlaps
   the tab bar/content on your screen. */
.gecko-info-panel {
    position: fixed;
    top: 110px;
    left: 104px;
    width: 190px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default, #e5e7eb);
    border-radius: var(--radius-xl, 14px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted, #4b5563);
}
.gecko-info-welcome {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-default, #111827);
}
@media (max-width: 1280px) {
    .gecko-info-panel { display: none; }
}

/* "Edit Leave" table — force every column to fit the viewport width so
   there's no horizontal scrollbar, instead of letting columns overflow.
   Percentages are keyed to column order: Employee, Department, Type,
   Start, End, Days, Status, Approved By, Date of Approval, Edited, Actions. */
.gecko-compact-table .fi-ta-content,
.gecko-compact-table [class*="overflow-x"] {
    overflow-x: visible !important;
}
.gecko-compact-table table {
    table-layout: fixed !important;
    width: 100% !important;
}
.gecko-compact-table table th,
.gecko-compact-table table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
.gecko-compact-table table th {
    font-size: 9.5px !important;
}
.gecko-compact-table table th:nth-child(1),  .gecko-compact-table table td:nth-child(1)  { width: 13%; }
.gecko-compact-table table th:nth-child(2),  .gecko-compact-table table td:nth-child(2)  { width: 9%; }
.gecko-compact-table table th:nth-child(3),  .gecko-compact-table table td:nth-child(3)  { width: 8%; }
.gecko-compact-table table th:nth-child(4),  .gecko-compact-table table td:nth-child(4)  { width: 8%; }
.gecko-compact-table table th:nth-child(5),  .gecko-compact-table table td:nth-child(5)  { width: 8%; }
.gecko-compact-table table th:nth-child(6),  .gecko-compact-table table td:nth-child(6)  { width: 5%; }
.gecko-compact-table table th:nth-child(7),  .gecko-compact-table table td:nth-child(7)  { width: 8%; }
.gecko-compact-table table th:nth-child(8),  .gecko-compact-table table td:nth-child(8)  { width: 9%; }
.gecko-compact-table table th:nth-child(9),  .gecko-compact-table table td:nth-child(9)  { width: 10%; }
.gecko-compact-table table th:nth-child(10), .gecko-compact-table table td:nth-child(10) { width: 6%; }
.gecko-compact-table table th:nth-child(11), .gecko-compact-table table td:nth-child(11) { width: 16%; }

/* Correction: the table actually has 12 columns (Reason was missed in the
   first pass, pushing Actions into overlap). Re-declaring all 12 widths —
   later rules win over the earlier mis-numbered ones. */
.gecko-compact-table table th:nth-child(1),  .gecko-compact-table table td:nth-child(1)  { width: 12%; }
.gecko-compact-table table th:nth-child(2),  .gecko-compact-table table td:nth-child(2)  { width: 8%; }
.gecko-compact-table table th:nth-child(3),  .gecko-compact-table table td:nth-child(3)  { width: 7%; }
.gecko-compact-table table th:nth-child(4),  .gecko-compact-table table td:nth-child(4)  { width: 7%; }
.gecko-compact-table table th:nth-child(5),  .gecko-compact-table table td:nth-child(5)  { width: 7%; }
.gecko-compact-table table th:nth-child(6),  .gecko-compact-table table td:nth-child(6)  { width: 4%; }
.gecko-compact-table table th:nth-child(7),  .gecko-compact-table table td:nth-child(7)  { width: 7%; }
.gecko-compact-table table th:nth-child(8),  .gecko-compact-table table td:nth-child(8)  { width: 8%; }
.gecko-compact-table table th:nth-child(9),  .gecko-compact-table table td:nth-child(9)  { width: 9%; }
.gecko-compact-table table th:nth-child(10), .gecko-compact-table table td:nth-child(10) { width: 5%; }
.gecko-compact-table table th:nth-child(11), .gecko-compact-table table td:nth-child(11) { width: 14%; }
.gecko-compact-table table th:nth-child(12), .gecko-compact-table table td:nth-child(12) { width: 12%; }

/* Correction: the table actually has 12 columns (Reason was missed in the
   first pass, pushing Actions into overlap). Re-declaring all 12 widths —
   later rules win over the earlier mis-numbered ones. */
.gecko-compact-table table th:nth-child(1),  .gecko-compact-table table td:nth-child(1)  { width: 12%; }
.gecko-compact-table table th:nth-child(2),  .gecko-compact-table table td:nth-child(2)  { width: 8%; }
.gecko-compact-table table th:nth-child(3),  .gecko-compact-table table td:nth-child(3)  { width: 7%; }
.gecko-compact-table table th:nth-child(4),  .gecko-compact-table table td:nth-child(4)  { width: 7%; }
.gecko-compact-table table th:nth-child(5),  .gecko-compact-table table td:nth-child(5)  { width: 7%; }
.gecko-compact-table table th:nth-child(6),  .gecko-compact-table table td:nth-child(6)  { width: 4%; }
.gecko-compact-table table th:nth-child(7),  .gecko-compact-table table td:nth-child(7)  { width: 7%; }
.gecko-compact-table table th:nth-child(8),  .gecko-compact-table table td:nth-child(8)  { width: 8%; }
.gecko-compact-table table th:nth-child(9),  .gecko-compact-table table td:nth-child(9)  { width: 9%; }
.gecko-compact-table table th:nth-child(10), .gecko-compact-table table td:nth-child(10) { width: 5%; }
.gecko-compact-table table th:nth-child(11), .gecko-compact-table table td:nth-child(11) { width: 14%; }
.gecko-compact-table table th:nth-child(12), .gecko-compact-table table td:nth-child(12) { width: 12%; }

/* Keep the table clear of the fixed "Welcome, George" info panel
   (which sits at left:104px, width:190px) by pushing the table's own
   left edge out past it — this makes the extra width from
   MaxWidth::Full apply on the RIGHT side only, not the left.
   Font shrunk further too, per request, so nothing overlaps at full width. */
.gecko-compact-table {
    margin-left: 220px !important;
}
.gecko-compact-table table th,
.gecko-compact-table table td {
    font-size: 9px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.gecko-compact-table table th {
    font-size: 8px !important;
}

/* MaxWidth::Full at the page level widened the tab bar too (it shares the
   same content container as the table), causing it to misalign vs other
   HR pages. Reverted that. Instead, break the table out to the right only,
   via CSS, leaving the tab bar/page container at the normal default width. */
.gecko-compact-table {
    margin-right: -240px !important;
    width: calc(100% + 240px) !important;
    max-width: none !important;
}

/* The 220px left-margin was only needed when the page used MaxWidth::Full
   (table started right under the info panel). Now that the page is back
   to its default width, the table's natural start already clears the
   info panel — that old margin-left was stacking with the right-side
   breakout and pushing the table's right edge past the viewport. Reset it. */
.gecko-compact-table {
    margin-left: 0 !important;
}

/* Final pass: font smaller across the board, and the Actions column (13th)
   pinned to a fixed pixel width instead of a fragile percentage — a % of
   a narrower table wasn't enough room for the icon button and was getting
   clipped at the edge. Fixed px guarantees it fits regardless of table width. */
.gecko-compact-table table th,
.gecko-compact-table table td {
    font-size: 8px !important;
    padding: 3px !important;
}
.gecko-compact-table table th {
    font-size: 7px !important;
}
.gecko-compact-table table th:nth-child(13),
.gecko-compact-table table td:nth-child(13) {
    width: 40px !important;
    white-space: nowrap !important;
}

/* Team Calendar — keep the days header row visible while scrolling down
   through a long employee list. The wrapping div uses overflow-x-auto
   (Tailwind) for horizontal scrolling; per the CSS overflow spec that
   also makes its overflow-y compute to 'auto', which would turn the div
   into its own (never-actually-scrolling, since it's unbounded height)
   scroll container and silently break position:sticky. Forcing
   overflow-y back to visible keeps the real page scroll in charge, which
   is what position:sticky needs to track. */
.gecko-cal-scroll {
    max-height: calc(100vh - 260px);
    overflow-y: auto !important;
}
.gecko-cal-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
}

/* Team Calendar — bright stroke down the "today" column, header to bottom row */
.gecko-cal-today-col {
    box-shadow: inset 2px 0 0 var(--teal-400), inset -2px 0 0 var(--teal-400) !important;
}
.gecko-cal-today-top {
    box-shadow: inset 2px 0 0 var(--teal-400), inset -2px 0 0 var(--teal-400), inset 0 2px 0 var(--teal-400) !important;
}
.gecko-cal-today-bottom {
    box-shadow: inset 2px 0 0 var(--teal-400), inset -2px 0 0 var(--teal-400), inset 0 -2px 0 var(--teal-400) !important;
}

/* ===== Team Calendar redesign — card-based layout ===== */
body:has(.gecko-cal-redesign) .gecko-info-panel {
    display: none !important;
}
.gecko-cal-redesign {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.gecko-cal-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 260px;
    flex-shrink: 0;
}
.gecko-cal-main {
    flex: 1;
    min-width: 0;
}
.gecko-cal-card {
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default, #e5e7eb);
    border-radius: var(--radius-xl, 1.25rem);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}
.gecko-cal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--avatar-bg, var(--teal-600));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.gecko-cal-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 16px;
    margin-bottom: 10px;
}
.gecko-cal-welcome-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-heading);
}
.gecko-cal-welcome-dept {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.gecko-cal-stat {
    border-top: 1px solid var(--border-default);
    padding-top: 10px;
    margin-top: 10px;
}
.gecko-cal-stat:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.gecko-cal-stat-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.gecko-cal-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
}
.gecko-cal-stat-value span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}
.gecko-cal-stat-value-sm {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
}
.gecko-cal-legend-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}
.gecko-cal-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-body);
    padding: 4px 0;
}
.gecko-cal-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}
.gecko-cal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    flex-shrink: 0;
}
.gecko-cal-badge-wide {
    width: 22px;
    border-radius: 8px;
    font-size: 7px;
}
.gecko-cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.gecko-cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gecko-cal-nav-btn {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
}
.gecko-cal-nav-btn:hover {
    background: var(--surface-sunken);
}
.gecko-cal-month-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    min-width: 120px;
    text-align: center;
}
.gecko-cal-dept-select {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--text-body);
}
.gecko-cal-table-card {
    padding: 0;
    overflow: hidden;
}
.gecko-cal-scroll {
    max-height: calc(100vh - 260px);
    overflow-y: auto !important;
    overflow-x: auto;
    padding: 14px;
}
.gecko-cal-table {
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
    width: max-content;
}
.gecko-cal-corner {
    width: 170px;
    min-width: 170px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 8px 10px;
    background: var(--surface-card);
}
.gecko-cal-head-cell {
    width: 36px;
    min-width: 36px;
    height: 40px;
    text-align: center;
    background: var(--surface-card);
    border-radius: 8px;
}
.gecko-cal-head-dow {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.3;
}
.gecko-cal-head-dom {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}
.gecko-cal-head-cell.gecko-cal-today-col {
    background: var(--teal-50) !important;
}
.gecko-cal-head-cell.gecko-cal-today-col .gecko-cal-head-dom {
    color: var(--teal-700);
}
.gecko-cal-head-cell.gecko-cal-today-top {
    box-shadow: inset 0 3px 0 var(--teal-500) !important;
}
.gecko-cal-dept-row {
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 5px 10px;
    border-radius: 6px;
}
.gecko-cal-member-cell {
    width: 170px;
    min-width: 170px;
    padding: 4px 8px;
    text-align: left;
}
.gecko-cal-member-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.gecko-cal-member-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gecko-cal-cell {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 34px;
    text-align: center;
    vertical-align: middle;
    border-radius: 8px;
    background: var(--cell-bg);
    color: var(--cell-fg);
    font-size: 9px;
    font-weight: 700;
}
.gecko-cal-cell.gecko-cal-today-col {
    box-shadow: inset 0 0 0 2px var(--teal-400) !important;
}
.gecko-cal-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    color: #fff;
    font-size: 6.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 1.5px #fff;
}
.gecko-cal-marker-tl { top: -3px; left: -3px; }
.gecko-cal-marker-tr { top: -3px; right: -3px; }
.gecko-cal-marker-bl { bottom: -3px; left: -3px; }
.gecko-cal-marker-br { bottom: -3px; right: -3px; }
.gecko-cal-marker-wide { width: 16px; border-radius: 6px; font-size: 6px; }
.gecko-cal-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.gecko-cal-scroll::-webkit-scrollbar-thumb {
    background: var(--teal-300);
    border-radius: 99px;
}
.gecko-cal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
@media (max-width: 1100px) {
    .gecko-cal-redesign { flex-direction: column; }
    .gecko-cal-sidebar { flex-direction: row; width: 100%; flex-wrap: wrap; }
    .gecko-cal-sidebar .gecko-cal-card { flex: 1; min-width: 240px; }
}

/* ===== Team Calendar redesign — follow-up fixes ===== */

/* toolbar now sits above the two-column row instead of inside .gecko-cal-main,
   so welcome/legend cards start level with the calendar card */
.gecko-cal-toolbar {
    margin-right: -300px;
    width: calc(100% + 300px);
    max-width: none;
}
.gecko-cal-redesign {
    margin-right: -300px;
    width: calc(100% + 300px);
    max-width: none;
}

/* small date line under the vacation title */
.gecko-cal-stat-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* department group divider — solid bar like the original design */
.gecko-cal-dept-row {
    background: var(--slate-800);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 6px 12px;
    border-radius: 6px;
}

/* department <select> was showing multiple stacked chevrons (native +
   inherited Filament form-reset arrows both rendering) — force a single
   custom arrow */
.gecko-cal-dept-select {
    padding: 6px 30px 6px 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23636b74' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 13px !important;
}

/* shrink day columns slightly so more of the month fits before scrolling */
.gecko-cal-table {
    border-spacing: 2px;
}
.gecko-cal-head-cell {
    width: 33px;
    min-width: 33px;
}
.gecko-cal-cell {
    width: 33px;
    min-width: 33px;
}
.gecko-cal-corner {
    width: 160px;
    min-width: 160px;
}
.gecko-cal-member-cell {
    width: 160px;
    min-width: 160px;
}

/* pull the toolbar + two-column layout left to close the gap left behind
   by hiding the old fixed-position welcome panel on this page */
.gecko-cal-toolbar,
.gecko-cal-redesign {
    margin-left: -280px;
    margin-right: -300px;
    width: calc(100% + 580px);
    max-width: none;
}

/* month picker moved back to sit above the calendar card only (not the
   sidebar), so it no longer needs the page-wide breakout */
.gecko-cal-toolbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none;
}

/* month name is now a native <select> so clicking it opens a dropdown of
   months, styled to look like the old plain-text label */
.gecko-cal-month-select {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    min-width: 130px;
    text-align: center;
    text-align-last: center;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 4px 22px 4px 8px;
    border-radius: var(--radius-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23636b74' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 13px;
}
.gecko-cal-month-select:hover {
    background-color: var(--surface-sunken);
    border-color: var(--border-default);
}

/* wrapper now carries the page breakout; toolbar sits in its own row
   offset to start above the calendar column only (sidebar width 260px +
   20px gap = 280px), while the sidebar and calendar cards both start
   together on the row below, at the same height */
.gecko-cal-page-wrap {
    margin-left: -280px;
    margin-right: -300px;
    width: calc(100% + 580px);
    max-width: none;
}
.gecko-cal-toolbar-offset {
    margin-left: 280px;
    margin-bottom: 12px;
}
.gecko-cal-redesign {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none;
}

/* calendar card was stretching to fill the full breakout width, leaving
   blank white space past the last day column — shrink it to the table's
   actual width instead */
.gecko-cal-table-card {
    width: fit-content;
    max-width: 100%;
}

/* toolbar: cluster prev/month/next/current-month/department/search together
   instead of spreading department to the far right via space-between */
.gecko-cal-toolbar {
    justify-content: flex-start !important;
    gap: 12px;
    flex-wrap: wrap;
}
.gecko-cal-search-input {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--text-body);
    min-width: 180px;
}
.gecko-cal-search-input:focus {
    outline: none;
    border-color: var(--teal-500);
}

/* summary bar above the toolbar: on duty / night shift / upcoming birthdays */
.gecko-cal-summary-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default, #e5e7eb);
    border-radius: var(--radius-xl, 1.25rem);
    box-shadow: var(--shadow-sm);
    padding: 14px 20px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-body);
}
.gecko-cal-summary-item strong {
    color: var(--text-heading);
    font-weight: 700;
}
.gecko-cal-summary-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-default);
}

/* birthday marker switched from a "B" letter badge to an actual cake emoji,
   sized up for visibility in both the legend and the calendar cells */
.gecko-cal-legend-emoji {
    font-size: 17px;
    line-height: 1;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.gecko-cal-marker-emoji {
    position: absolute;
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

/* summary bar + toolbar now live inside .gecko-cal-main (alongside the
   table card) instead of spanning the full breakout width, so main needs
   to shrink to the table's actual content width — everything inside then
   matches that same width instead of stretching into blank space */
.gecko-cal-main {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}
.gecko-cal-summary-bar,
.gecko-cal-toolbar {
    width: 100%;
}

/* ===== Submit Request page redesign — card-based layout ===== */
body:has(.gecko-submit-redesign) .gecko-info-panel {
    display: none !important;
}
.gecko-submit-redesign {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gecko-submit-top {
    display: flex;
    align-items: stretch;
    gap: 20px;
}
.gecko-submit-welcome {
    width: 260px;
    flex-shrink: 0;
}
.gecko-submit-form-card {
    flex: 1;
    min-width: 0;
}
.gecko-submit-form-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 14px;
}
.gecko-submit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gecko-submit-result {
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
}
.gecko-submit-result p {
    margin: 0;
}
.gecko-submit-result.ok {
    background: var(--teal-50);
    color: var(--teal-700);
}
.gecko-submit-result.bad {
    background: #fef2f2;
    color: #b91c1c;
}
.gecko-submit-result.neutral {
    background: var(--surface-sunken);
    color: var(--text-muted);
}
.gecko-submit-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.gecko-submit-actions-note {
    font-size: 12.5px;
    color: var(--text-muted);
}
.gecko-submit-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gecko-submit-list-card {
    width: 100%;
}
.gecko-submit-list-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gecko-submit-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px;
    border-top: 1px solid var(--border-default);
    font-size: 12.5px;
    color: var(--text-body);
}
.gecko-submit-list-row:first-of-type {
    border-top: none;
}
.gecko-submit-list-note {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}
.gecko-submit-list-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 6px 2px;
}
.gecko-submit-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    flex-shrink: 0;
}
.gecko-submit-badge.approved {
    background: #dcfce7;
    color: #166534;
}
.gecko-submit-badge.pending {
    background: #fef9c3;
    color: #854d0e;
}
.gecko-submit-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}
.gecko-submit-badge.cancelled {
    background: #e5e7eb;
    color: #4b5563;
}
@media (max-width: 1000px) {
    .gecko-submit-top {
        flex-direction: column;
    }
    .gecko-submit-welcome {
        width: 100%;
    }
}

/* global floating "Welcome" panel retired — every HR page now either has
   its own page-specific welcome card (Submit Request, Team Calendar) or
   doesn't need one (My Requests, Employee Profiles, Admin sub-pages) */
.gecko-info-panel {
    display: none !important;
}