/* ─────────────────────────────────────────────────────────────────────────
   SIGIL-X admin theme overrides.
   Layered on top of Filament's compiled CSS via a panels::head.end render hook
   (no npm/Vite build). Goal: soft, rounded, glassy dark SaaS dashboard with a
   sci-fi/gaming flair. Keep usability first — do not break Filament layout.
   ───────────────────────────────────────────────────────────────────────── */

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

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/ibm-plex-sans/cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/ibm-plex-sans/cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/ibm-plex-sans/greek.woff2) format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/ibm-plex-sans/vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/ibm-plex-sans/latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/ibm-plex-sans/latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── FONTS & TYPOGRAPHY ────────────────────────────────────────────────────
   Filament v4 (Tailwind v4) does not expose a `--text-base` custom property we
   can safely lean on, so heading + body sizes are set explicitly here.

   - All headings (h1–h6 + Filament heading/title classes) → IBM Plex Sans.
   - h2 is the anchor at 1.4rem; other levels scale up/down from it.
   - Base body / paragraph text → 0.8rem.
   ─────────────────────────────────────────────────────────────────────────── */

/* Body and nav: monospace feel throughout */
.fi-body,
body {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
}

/* Default body / paragraph text → IBM Plex Sans Regular @ 0.8rem */
p {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
}

/* Navigation links */
.fi-nav-item-label,
.fi-sidebar-nav a,
.fi-topbar nav a {
    font-family: 'IBM Plex Mono', monospace;
}

/* All headings (h1–h6) + Filament heading/title classes → IBM Plex Sans. */
h1, h2, h3, h4, h5, h6,
.fi-page-header-heading,
.fi-section-header-heading,
.fi-modal-header-heading,
.fi-wi-stats-overview-stat-label,
[class*="-heading"],
[class*="-title"] {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

/* Heading size scale, anchored on h2 = 1.4rem. */
h1, .fi-page-header-heading { font-size: 1.6rem; }
h2, .fi-section-header-heading,
    .fi-modal-header-heading   { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.85rem; }

/* Brand logo in top-left bar → IBM Plex Sans */
.fi-logo {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    letter-spacing: 0.2em;
    font-weight: 400;
}

/* Buttons, labels, badges, tables, form UI → IBM Plex Sans */
.fi-btn,
.fi-badge,
label,
.fi-fo-field-wrp label,
.fi-ta-header-cell,
.fi-ta-cell,
.fi-fo-field-wrp,
.fi-select-option,
.fi-dropdown-list-item {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

:root {
    --sgx-bg: #060c16;
    --sgx-bg-2: #0b1424;
    --sgx-accent: #8b6cff;
    --sgx-accent-soft: rgba(139, 108, 255, 0.16);
    --sgx-glass: rgba(18, 28, 48, 0.6);
    --sgx-border: rgba(139, 108, 255, 0.14);
    --sgx-radius: 0.9rem;
}

/* Page background: deep blue-black with a soft purple aurora. */
.fi-body,
body.fi-body {
    background-color: var(--sgx-bg);
    background-image:
        radial-gradient(1200px 600px at 85% -5%, rgba(139, 108, 255, 0.10), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(80, 120, 255, 0.08), transparent 55%);
    background-attachment: fixed;
}

/* Glassy sidebar + topbar. */
.fi-sidebar .fi-sidebar-nav,
.fi-topbar > nav,
.fi-topbar {
    background: var(--sgx-glass) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: var(--sgx-border) !important;
}

/* Cards, sections, widgets, tables, modals: rounded + subtle glass. */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: var(--sgx-radius) !important;
    border: 1px solid var(--sgx-border) !important;
    background: var(--sgx-glass) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Buttons: rounded, with a soft accent glow on primary. */
.fi-btn {
    border-radius: 0.7rem !important;
}
.fi-btn.fi-color-primary {
    box-shadow: 0 6px 20px -8px var(--sgx-accent);
}

/* Brand text. */
.fi-logo {
    letter-spacing: 0.18em;
    font-weight: 700;
    color: #e8ecf6;
}

/* Stat widgets: gentle lift on hover. */
.fi-wi-stats-overview-stat {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -12px rgba(139, 108, 255, 0.35);
}

/* Auth pages (login / password reset): center it in the aurora with a glass card. */
.fi-simple-main {
    border-radius: 1.1rem !important;
    border: 1px solid var(--sgx-border) !important;
    background: var(--sgx-glass) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

/* ── SIDEBAR NAV ─────────────────────────────────────────────────────────────
   Panel width is set in AdminPanelProvider (sidebarWidth). In the EXPANDED state
   give the items a bit more breathing room from the rail edges; the collapsed
   icon rail keeps Filament's default padding so icons stay centred. */
.fi-sidebar.fi-sidebar-open .fi-sidebar-nav {
    padding-inline: 1.5rem;
}
.fi-sidebar-item-btn {
    padding-block: 0.2rem;
}

/* Sidebar label sizes. */
.fi-sidebar-group-label,
.fi-sidebar-item-label {
    font-size: 13px;
}

/* Hide the sidebar scrollbar when the nav overflows the viewport height, but
   keep it scrollable (Firefox / legacy Edge / WebKit-Chromium). */
.fi-sidebar-nav {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* ── TOPBAR: SEARCH ON THE LEFT, UTC CLOCK ON THE RIGHT ─────────────────────
   Pure-CSS reorder — NO DOM surgery. Moving the global-search node in JS
   detaches its Livewire/Alpine wiring (Enter stops working), so instead we
   dissolve the right-hand container `.fi-topbar-end` with display:contents:
   its children (search, clock, user menu) become flex items of `.fi-topbar`,
   so the search naturally sits right after the logo. `margin-inline-end:auto`
   on the search then pushes the clock + user menu to the far right. Desktop
   only (≥lg), where the logo/topbar-start is visible; the mobile bar keeps its
   default layout. The clock is rendered server-side via the USER_MENU_BEFORE
   hook, so it stays immediately left of the user dropdown. */
@media (min-width: 1024px) {
    .fi-topbar-end {
        display: contents;
    }
    /* The global-search Livewire root is `.fi-global-search-ctn` (the flex item
       of .fi-topbar); `.fi-global-search` is a nested child. Put the auto margin
       on the CONTAINER with flex-grow:0 so the margin (not flex-grow) absorbs the
       free space and pushes the clock + user menu to the far right. */
    .fi-topbar .fi-global-search-ctn {
        flex: 0 0 auto;
        width: 20rem;
        max-width: 40%;
        margin-inline-start: 1rem;
        margin-inline-end: auto;
    }
    /* Restore the inter-item spacing that .fi-topbar-end's flex gap provided.
       (Descendant selector — display:contents keeps .fi-user-menu a DOM child
       of .fi-topbar-end, so a `>` child combinator off .fi-topbar wouldn't match.) */
    .fi-topbar-end .fi-user-menu {
        margin-inline-start: 1rem;
    }
}

.sgx-utc-clock {
    display: none;             /* revealed once JS sets a real time (avoids flof --:--) */
    align-items: center;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--sgx-accent);
    padding-inline: 0.5rem;
    white-space: nowrap;
}
.sgx-utc-clock.sgx-clock-ready {
    display: inline-flex;
}
@media (max-width: 640px) {
    .sgx-utc-clock.sgx-clock-ready { display: none; }   /* keep the mobile bar uncluttered */
}

/* ── PAGE-TRANSITION LOADER ─────────────────────────────────────────────────
   #sgx-page-loader is injected at BODY_START and covers the viewport with an
   opaque backdrop + spinner. It sits ON TOP of the app; it never sets the
   content to display:none / opacity:0, so Filament/Livewire components, tables
   and charts still lay out at their true dimensions underneath (this avoids the
   classic zero-width ApexCharts bug). sgx-admin.js adds `.sgx-loaded` to <html>
   once the page is ready — with a hard failsafe timeout — to fade the overlay
   out, and re-shows it on full-page navigations only (never on Livewire AJAX).
   See Documentation/admin-preferences.md. */
#sgx-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sgx-bg);
    background-image:
        radial-gradient(1200px 600px at 85% -5%, rgba(139, 108, 255, 0.10), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(80, 120, 255, 0.08), transparent 55%);
    opacity: 1;
    transition: opacity 0.35s ease;
}
html.sgx-loaded #sgx-page-loader {
    opacity: 0;
    pointer-events: none;
}
/* Fully remove from the a11y tree + paint path once faded out. */
html.sgx-loaded.sgx-loader-done #sgx-page-loader {
    display: none;
}
/* Content fades IN (not out→in of layout) once loaded — opacity only, so it
   never reflows and never zero-sizes a chart. */
.fi-main {
    transition: opacity 0.3s ease;
}
html:not(.sgx-loaded) .fi-main {
    opacity: 0;
}

.sgx-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(139, 108, 255, 0.25);
    border-top-color: var(--sgx-accent);
    animation: sgx-spin 0.8s linear infinite;
}
@keyframes sgx-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sgx-spinner { animation-duration: 2s; }
    #sgx-page-loader, .fi-main { transition: none; }
}

/* ── CENTERED ADMIN FOOTER ──────────────────────────────────────────────────
   Rendered via the FOOTER hook, so it sits at the bottom of the page content
   on every admin page. */
.sgx-admin-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem 1rem;
    text-align: center;
}
.sgx-admin-footer-logo {
    width: 24px;
    height: auto;
    opacity: 0.8;
}
.sgx-admin-footer-text {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--color-gray-200);
    opacity: 0.75;
}