/* Future Loops "Aqua" theme touches for Filament (matches the var10 prototype). */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

/* Headings -> Sora */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading,
h1.fi-header-heading {
    font-family: 'Sora', 'Inter', sans-serif !important;
    letter-spacing: -0.015em;
}

/* Aqua dark surfaces (deep teal-black like the prototype) */
.dark .fi-body,
.dark body {
    background-color: #04141c !important;
}
.dark .fi-sidebar,
.dark .fi-topbar,
.dark .fi-topbar nav {
    background-color: #072330 !important;
    border-color: #0e3a4d !important;
}
.dark .fi-section,
.dark .fi-ta,
.dark .fi-ta-ctn {
    background-color: #07212d !important;
    border-color: #0e3a4d !important;
    border-radius: 14px;
}

/* Cyan gradient on primary buttons (teal -> cyan -> blue) */
.fi-btn[class*="primary"],
.fi-btn-color-primary {
    background-image: linear-gradient(120deg, #2dd4bf, #22d3ee 55%, #3b82f6) !important;
    color: #022027 !important;
    border: 0 !important;
}

/* Subtle cyan glow on table row hover */
.dark .fi-ta-row:hover {
    background-color: rgba(34, 211, 238, 0.05) !important;
    box-shadow: inset 2px 0 0 0 #22d3ee;
}

/* ============================================================
   Vuexy-style sidebar: full-height icon rail + hover-peek + pin.
   Desktop only (>=64rem); mobile keeps Filament's overlay.
   ============================================================ */
@media (min-width: 64rem) {
    :root { --fl-rail: 4.75rem; --fl-full: 16rem; }

    /* Sidebar = fixed full-height rail, above the topbar */
    .fi-body .fi-sidebar.fi-main-sidebar {
        position: fixed !important;
        top: 0 !important; bottom: 0 !important;
        inset-inline-start: 0 !important;
        height: 100vh !important;
        width: var(--fl-rail) !important;
        translate: 0 !important;
        overflow: hidden;
        z-index: 50;
        display: flex !important;
        flex-direction: column;
        transition: width .18s ease;
    }
    .fi-body.fl-peek .fi-sidebar.fi-main-sidebar:hover,
    .fi-body.fl-locked .fi-sidebar.fi-main-sidebar { width: var(--fl-full) !important; }
    .fi-body.fl-peek .fi-sidebar.fi-main-sidebar:hover { box-shadow: 12px 0 44px rgba(0, 0, 0, .55); }

    /* Topbar to the RIGHT of the rail; kill its full-width logo + mobile hamburger */
    .fi-body .fi-topbar-ctn { margin-inline-start: var(--fl-rail) !important; transition: margin .18s ease; }
    .fi-body.fl-locked .fi-topbar-ctn { margin-inline-start: var(--fl-full) !important; }
    .fi-topbar-ctn .fi-logo, .fi-topbar .fi-logo, .fi-topbar-open-sidebar-btn { display: none !important; }

    /* Content offset */
    .fi-body .fi-main-ctn {
        margin-inline-start: var(--fl-rail) !important;
        width: auto !important; max-width: 100% !important;
        transition: margin .18s ease;
    }
    .fi-body.fl-locked .fi-main-ctn { margin-inline-start: var(--fl-full) !important; }

    /* Sidebar header: Filament zeroes its height (brand lives in topbar) — force it visible.
       Rail = centred mark; expanded = wordmark left, pin right (space-between, no overlap). */
    .fi-sidebar-header-ctn { height: auto !important; }
    .fi-sidebar .fi-sidebar-header {
        display: flex !important; align-items: center; justify-content: center;
        gap: .5rem; min-height: 4rem; padding: .75rem 1rem; overflow: hidden;
        border-bottom: 1px solid var(--gray-200);
    }
    .fi-sidebar .fi-sidebar-header:where(.dark, .dark *) { border-color: rgba(255,255,255,.06); }
    .fl-peek .fi-sidebar:hover .fi-sidebar-header,
    .fl-locked .fi-sidebar .fi-sidebar-header { justify-content: space-between; }
    .fi-sidebar-header-logo-ctn { display: flex; align-items: center; flex: none !important; min-width: 0; overflow: visible; }

    /* Logo swap: compact mark in rail, wordmark (sized to leave room for the pin) when expanded */
    .fi-sidebar .fi-logo { display: none !important; }
    .fi-sidebar .fl-mark { display: block !important; height: 2.6rem !important; width: 2.6rem !important; max-width: none !important; flex: none; background-repeat: no-repeat; background-position: center; background-size: contain; }
    .fl-peek .fi-sidebar:hover .fi-logo,
    .fl-locked .fi-sidebar .fi-logo { display: block !important; height: 1.05rem !important; width: auto !important; max-width: 100%; }
    .fl-peek .fi-sidebar:hover .fl-mark,
    .fl-locked .fi-sidebar .fl-mark { display: none !important; }

    /* RAIL: center icons, hide labels (display:none frees the flex space) */
    .fi-sidebar .fi-sidebar-item-btn,
    .fi-sidebar .fi-sidebar-group-btn { justify-content: center !important; }
    .fi-sidebar .fi-sidebar-item-icon { flex: none !important; width: 1.5rem !important; height: 1.5rem !important; }
    .fi-sidebar .fi-sidebar-item-label,
    .fi-sidebar .fi-sidebar-group-label { display: none !important; }
    /* Toggle-parent chevron (Orders etc.): hide in the rail so the icon stays centred. The
       custom peek/lock collapse isn't Filament's native collapsible, so the blade's x-show
       guard never fires — without this the icon+chevron centre as a pair and the icon shifts left. */
    .fi-sidebar .fi-sidebar-item-chevron { display: none !important; }

    /* EXPANDED: restore labels + left alignment */
    .fl-peek .fi-sidebar:hover .fi-sidebar-item-btn,
    .fl-peek .fi-sidebar:hover .fi-sidebar-group-btn,
    .fl-locked .fi-sidebar .fi-sidebar-item-btn,
    .fl-locked .fi-sidebar .fi-sidebar-group-btn { justify-content: flex-start !important; }
    .fl-peek .fi-sidebar:hover .fi-sidebar-item-label,
    .fl-peek .fi-sidebar:hover .fi-sidebar-group-label,
    .fl-locked .fi-sidebar .fi-sidebar-item-label,
    .fl-locked .fi-sidebar .fi-sidebar-group-label { display: block !important; white-space: nowrap; }
    .fl-peek .fi-sidebar:hover .fi-sidebar-item-chevron,
    .fl-locked .fi-sidebar .fi-sidebar-item-chevron { display: inline-flex !important; }

    /* Navigation groups: in the rail show ONLY the group icon (the product tree);
       hide the chevron + child items. Unlabelled groups (Dashboard) keep their item
       icon. Expanding reveals the label, chevron and children. Uses :has(). */
    .fi-sidebar .fi-sidebar-group-btn > .fi-icon { width: 1.5rem !important; height: 1.5rem !important; flex: none; }
    .fi-sidebar .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-collapse-btn { display: none !important; }
    .fi-sidebar .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-items { display: none !important; }
    .fl-peek .fi-sidebar:hover .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-collapse-btn,
    .fl-locked .fi-sidebar .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-collapse-btn { display: inline-flex !important; }
    .fl-peek .fi-sidebar:hover .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-items,
    .fl-locked .fi-sidebar .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-items { display: flex !important; flex-direction: column; }

    /* Pin / lock toggle (injected into the sidebar header) */
    .fl-pin {
        flex: none; width: 1.6rem; height: 1.6rem;
        display: grid; place-items: center;
        border-radius: 9999px; border: 1.5px solid var(--gray-500);
        color: var(--gray-400); cursor: pointer; display: none;
        transition: opacity .12s ease, color .12s, border-color .12s;
    }
    .fl-peek .fi-sidebar:hover .fl-pin, .fl-locked .fi-sidebar .fl-pin { display: grid; opacity: .7; }
    .fl-pin:hover { opacity: 1 !important; }
    .fl-pin .fl-pin-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: currentColor; }
    .fl-pin.fl-pinned { color: #22d3ee; border-color: #22d3ee; opacity: 1 !important; }
}

/* ToggleButtons options must NOT get the primary gradient (they share .fi-color-primary
   with action buttons) — let Filament's selected/unselected bg show so state is visible. */
.fi-fo-toggle-buttons .fi-btn,
[class*="toggle-buttons"] .fi-btn { background-image: none !important; }

/* CheckboxList option rows — hover glow + selected highlight (tags/tempo lists) */
.fi-fo-checkbox-list-option { border-radius: 8px; padding: .3rem .5rem; margin: -.15rem -.25rem;
    transition: background-color .12s ease, box-shadow .12s ease; }
.fi-fo-checkbox-list-option:hover { background-color: rgba(34, 211, 238, 0.10); }
.fi-fo-checkbox-list-option:has(input:checked) { background-color: rgba(34, 211, 238, 0.16); box-shadow: inset 2px 0 0 0 #22d3ee; }

/* ---- Sidebar: eliminate the big gap between the top-level links and the Products group.
   Filament spaces nav GROUPS apart with row-gap:calc(var(--spacing)*7) on
   .fi-sidebar-nav-groups — that's the gap between the ungrouped block
   (Dashboard/Labels/Producers) and the "Products" group. Collapse it to the same
   1-unit spacing items use so the whole menu is evenly balanced. ---- */
.fi-sidebar .fi-sidebar-nav-groups { row-gap: calc(var(--spacing) * 1) !important; }
.fi-sidebar .fi-sidebar-group { margin: 0 !important; }
/* "Products" group label reads as a peer, not an uppercase muted section header. */
.fl-peek .fi-sidebar:hover .fi-sidebar-group-label,
.fl-locked .fi-sidebar .fi-sidebar-group-label {
    text-transform: none !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    color: inherit !important;
    opacity: 1 !important;
    margin: 0 !important;
}
.fl-peek .fi-sidebar:hover .fi-sidebar-group-btn,
.fl-locked .fi-sidebar .fi-sidebar-group-btn { padding-block: .55rem !important; }

/* ============================================================
   Dashboard polish — gradient stat cards + glow, richer charts
   ============================================================ */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    border: 1px solid rgba(34, 211, 238, .16) !important;
    background-image: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(7, 35, 48, .28)) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fi-wi-stats-overview-stat::before {
    content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px;
    background: linear-gradient(180deg, #0fb6d4, #22d3ee 55%, #3b82f6);
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, .4) !important;
    box-shadow: 0 16px 38px -16px rgba(34, 211, 238, .45);
}
.fi-wi-stats-overview-stat-value {
    font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -.4px;
    color: #eafcff !important;
}
.fi-wi-stats-overview-stat-label {
    text-transform: uppercase; letter-spacing: .6px; font-size: .72rem !important; opacity: .85;
}
.fi-wi-stats-overview-stat-chart { opacity: .92; }

/* Chart + table widget panels: subtle aqua frame */
.fi-wi-chart, .fi-section:has(> .fi-section-content-ctn .fi-ta) {
    border-radius: 16px;
}
.fi-wi-chart canvas { filter: saturate(1.06); }

/* Quick stats — two glass panels of compact metric tiles */
.fl-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1024px) { .fl-qs { grid-template-columns: 1fr; } }
.fl-qs-panel {
    padding: 1rem 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(34, 211, 238, .14);
    background-image: linear-gradient(135deg, rgba(34, 211, 238, .06), rgba(7, 35, 48, .3));
}
.fl-qs-head {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #7fe7f5;
}
.fl-qs-head::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }
.fl-qs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 640px) { .fl-qs-grid { grid-template-columns: repeat(2, 1fr); } }
.fl-qs-tile {
    display: flex; flex-direction: column; gap: .2rem; padding: .7rem .6rem;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .025);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.fl-qs-tile:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .05); }
.fl-qs-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 9px; margin-bottom: .15rem; }
.fl-qs-ic svg { width: 1.05rem; height: 1.05rem; }
.fl-qs-v { font-size: 1.15rem; font-weight: 800; line-height: 1.1; letter-spacing: -.3px; color: #eafcff; font-variant-numeric: tabular-nums; }
.fl-qs-l { font-size: .66rem; letter-spacing: .5px; text-transform: uppercase; color: #9fcdda; }

/* ── Floating topbar + centred global search ──────────────────────────── */
/* Inset the bar from the edges so it reads as a floating card, not a 100%-width strip.
   The sticky wrapper gets the page colour so content scrolls cleanly behind the inset gap. */
.dark .fi-topbar-ctn { background-color: #04141c !important; }
.dark .fi-topbar {
    margin: 1rem 1rem .65rem;            /* generous top gap so the bar clearly floats */
    border-radius: 14px;
    border: 1px solid #0e3a4d !important;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7);
    padding-inline: 1.25rem;            /* tuck the edge controls in from the rounded corners */
}
/* Keep the right-hand controls (bell + avatar) vertically centred and fully inside the
   rounded bar — hard-constrain the avatar img so it can't overflow the bar's height. */
.fi-topbar-end { align-items: center; }
.fi-topbar-end .fi-avatar,
.fi-topbar-end .fi-user-menu img {
    width: 2rem !important;
    height: 2rem !important;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Pull the global-search field out of the right-hand cluster and centre it (desktop only).
   .fi-topbar is position:relative, .fi-topbar-end stays static, so the absolute field
   anchors to the bar's centre while notifications + user menu remain on the right. */
@media (min-width: 1024px) {
    .fi-topbar { position: relative; }
    .fi-topbar-end .fi-global-search {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(440px, 40vw);
        margin: 0;
    }
    .fi-topbar-end .fi-global-search-ctn,
    .fi-topbar-end .fi-global-search-field { width: 100%; }
}