/*
 * Hand-authored, not generated — safe to edit directly (unlike public/css/filament/filament/app.css,
 * which `filament:upgrade` republishes). Loaded via a `panels::styles.after` render hook in
 * AdminPanelProvider so it always wins over Filament's own compiled utility classes without needing
 * a Node/Vite build step for a proper Filament theme (this repo has none — see AGENTS.md's tech
 * stack).
 *
 * Every selector and value below was confirmed against the installed Filament 5 source
 * (vendor/filament/*/resources/css/components/*.css), not guessed — a class that looks plausible but
 * carries no actual padding (e.g. `.fi-ta-cell`, which ships `p-0`; the real per-cell padding is on
 * `.fi-ta-text`) would otherwise silently do nothing.
 *
 * This is one of three pieces working together for a restrained, less "generic Filament" admin (see
 * .ai/rules/filament.md's Theming section for the other two):
 *   1. Every Form calls ->dense() on its outer Schema — Filament's own density API
 *      (Filament\Schemas\Concerns\HasGap), cascades to every nested Section/Tabs/Group's *gap*
 *      (.fi-sc-has-gap: 1.5rem → .fi-sc-dense: 0.75rem; this file balances that spacing, see
 *      below). AdminPanelProvider also sets ->sidebarWidth('16rem')/->collapsedSidebarWidth('3rem')
 *      (defaults 20rem/4.5rem), ->sidebarCollapsibleOnDesktop() (the collapse-to-icons toggle
 *      button), and passes an Htmlable combining the logo image and brand name to ->brandLogo() so
 *      they render together — real Filament APIs, not CSS.
 *   2. This file overrides padding Filament has no PHP-level API for. The target is a compact but
 *      calm Japanese-inspired rhythm: consistent 4px multiples, clear grouping, and little visual
 *      decoration.
 *   3. Color/depth: a tinted page background against white cards with an actual visible border (not
 *      just Filament's own near-invisible ring-gray-950/5), a light sidebar with its own visible
 *      boundary, a dark "galaxy" gradient scoped to the login screen, and a flat pale fill plus a
 *      straight left-edge indicator on the active sidebar item — patterns loosely inspired by
 *      base-edu-admin's app/assets/style/tokens.css (a sibling project's Nuxt/shadcn admin — not
 *      Filament, so only the *idea* carries over, not any actual CSS/variable).
 *
 * Color values are copied from vendor/filament/support/src/Colors/Color.php's Slate/Emerald
 * constants — the exact shades AdminPanelProvider registers as 'gray'/'primary' — not approximated,
 * so this file's colors and the panel's PHP-configured palette never drift apart. Emerald stays the
 * only accent color; nothing here introduces a new hue.
 */

/* Section — default is p-6 content / px-6 py-4 header (vendor/filament/support/resources/css/components/section.css).
   A 1rem content rhythm keeps forms compact while preserving calm, readable grouping. */
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
    padding: 1rem !important;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding-inline: 1rem !important;
    padding-block: 0.75rem !important;
}

/* Builder blocks and Repeater items (Content > Pages' block editor, and every per-locale list
   inside a block — hero slides, facts, standards items, journey steps, ...) default to the same
   near-invisible ring-gray-950/5 as Section above, but with NO extra visible border applied to them
   anywhere else in this file — on a long page with many blocks stacked, they read as one
   undifferentiated wall rather than distinct, scannable pieces ("khoảng trắng thừa và khó phân biệt
   các section" — excess whitespace, hard to tell blocks apart, explicit feedback). Fixed the same
   way Section already is: a real Slate-200 border, plus a Slate-50 tint so each block/item reads as
   its own surface against the white Section it sits in — not a new hue, still Emerald-only accent.
   (vendor/filament/forms/resources/css/components/builder.css,
   .../resources/css/components/repeater.css — `.fi-fo-builder-item`/`.fi-fo-repeater-item` share the
   exact same class shape, so one rule covers both.) */
.fi-fo-builder-item,
.fi-fo-repeater-item {
    border: 1px solid oklch(0.929 0.013 255.508) !important; /* Slate-200 */
    background: oklch(0.984 0.003 247.858) !important; /* Slate-50 */
    box-shadow: none !important;
}

/* The header row is each block/item's own "what is this" label — giving it a slightly deeper tint
   than the Slate-50 body makes it read as a title bar at a glance, and the bolder/darker label text
   makes the block name itself (Hero, Standards, Journey, ...) the first thing the eye lands on. */
.fi-fo-builder-item-header,
.fi-fo-repeater-item-header {
    padding-inline: 0.75rem !important;
    padding-block: 0.5rem !important;
    background: oklch(0.968 0.007 247.896) !important; /* Slate-100 */
    border-radius: 0.75rem 0.75rem 0 0;
}

.fi-fo-builder-item-header-label,
.fi-fo-repeater-item-header-label {
    font-weight: 600 !important;
}

/* Content padding to match Section's own reduced 1rem — these are nested one level deeper, so
   slightly less again keeps the rhythm from stacking up (Section padding + block padding + field
   gaps all at once was a big part of the reported excess whitespace). */
.fi-fo-builder-item-content,
.fi-fo-repeater-item-content {
    padding: 0.75rem !important;
}

/* Vertical gap between stacked blocks/items — Filament's default 1rem (builder.css's
   `.fi-fo-builder-items > * + *`, repeater.css's `.fi-fo-repeater-items` gap-4) reads as more air
   than needed now that each block is already clearly bounded by its own border above. */
.fi-fo-builder-items > * + * {
    margin-top: 0.625rem !important;
}

.fi-fo-repeater-items {
    gap: 0.625rem !important;
}

/* An uncontained Tabs block (every per-locale Tabs used inside a builder block/repeater item here —
   none of them call ->contained()) still gets schemas/tabs.css's `mt-6` on its active panel, meant
   for a bare top-level Tabs with no surrounding card. Nested one or two levels inside an
   already-bordered block, that extra 24px reads as dead space before the fields even start. */
.fi-sc-tabs .fi-sc-tabs-tab.fi-active {
    margin-top: 0.5rem !important;
}

/* Gap between sibling schema components — slightly more air than Filament's dense 0.75rem keeps
   field groups distinct without returning to the spacious 1.5rem default. */
.fi-sc.fi-sc-has-gap.fi-sc-dense {
    gap: 0.875rem !important;
}

/* Page — default (vendor/filament/filament/resources/css/components/page.css) is
   .fi-page-header-main-ctn: gap-y-8 py-8 (2rem/2rem); .fi-page-content: gap-y-8 (2rem, no padding). */
.fi-page-header-main-ctn {
    padding-block: 1.25rem !important;
    row-gap: 1rem !important;
}

.fi-page-content {
    row-gap: 1rem !important;
}

/* Table cells — .fi-ta-cell itself ships p-0; the visible padding is on the column's own content
   element. TextColumn (.fi-ta-text, the column type this project's tables mostly use) ships
   px-3 py-4 (1rem vertical); header cells ship px-3 py-3.5 (0.875rem vertical). shadcn's own Table
   cells run py-2 (0.5rem) — close to that. */
.fi-ta-text:not(.fi-inline) {
    padding-block: 0.4rem !important;
}

.fi-ta-header-cell {
    padding-block: 0.4rem !important;
}

/* Tabs (per-locale translation tabs, e.g. Product/Post/Page forms) — default
   (vendor/filament/schemas/resources/css/components/tabs.css) is p-6 on the active, contained tab
   panel. */
.fi-sc-tabs.fi-contained .fi-sc-tabs-tab.fi-active {
    padding: 0.625rem !important;
}

/* Inputs — default (vendor/filament/support/resources/css/components/input/index.css) is
   px-3 py-1.5 (0.375rem vertical); shadcn's Input is h-9 (2.25rem total) — close to that with the
   text size and border this project already has. */
.fi-input {
    padding-block: 0.1875rem !important;
}

/* Topbar — default min-h-16 (4rem) (vendor/filament/filament/resources/css/components/topbar.css);
   shadcn admin headers commonly run h-14 (3.5rem) to h-12 (3rem). */
.fi-topbar {
    min-height: 3rem !important;
}

/* Buttons — default px-3 py-2 (0.5rem vertical) for the base/medium size
   (vendor/filament/support/resources/css/components/button.css); shadcn's default Button size is
   h-9 with py-1.5-equivalent padding. Eased back up a little from an earlier, tighter pass, per
   explicit follow-up feedback. */
.fi-btn:not(.fi-size-xs):not(.fi-size-sm) {
    padding-block: 0.4375rem !important;
}

/* Filament selects Emerald-400 with dark text for a primary filled button. On this panel that
   combination reads muddy, so primary actions use the brand's deeper Emerald with white content. */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: oklch(0.432 0.095 166.913) !important; /* Emerald-800 */
    color: white !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon {
    color: white !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background-color: oklch(0.378 0.077 168.94) !important; /* Emerald-900 */
    color: white !important;
}

/* ---- Color / depth (see this file's header comment) ---- */

/* Page background — default is bg-gray-50, a literal Tailwind class independent of the panel's
   registered 'gray' => Color::Slate (that only retargets Filament's own gray-driven component
   classes, not this hardcoded one) — vendor/filament/filament/resources/css/components/layout.css.
   Slate-50, so the tint actually matches the rest of the panel's gray scale. */
.fi-body {
    background-color: oklch(0.984 0.003 247.858) !important;
}

/* Sidebar — light mode, matching the rest of the panel. Filament's own .fi-sidebar is bg-white
   (mobile) / bg-transparent (desktop, vendor/filament/filament/resources/css/components/sidebar.css)
   — on desktop that just shows the (now Slate-50-tinted) body through it, so give it an explicit
   white background plus a hairline border to read as its own surface, the same way a Section reads
   as a card against the tinted body. */
.fi-sidebar {
    background-color: white !important;
    border-inline-end: 1px solid oklch(0.869 0.022 252.894); /* Slate-300 */
}

/* The custom topbar is 3rem tall, so the desktop sidebar must begin at the same boundary instead
   of retaining Filament's 4rem default and leaving a visible empty strip. */
@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-sidebar {
        top: 3rem !important;
        height: calc(100dvh - 3rem) !important;
    }
}

/* Cards and the table container both default to a near-invisible ring-gray-950/5
   (vendor/filament/support/resources/css/components/section.css,
   vendor/filament/tables/resources/css/container.css) — add an actual, visible border in the
   panel's own gray scale on top of it so every surface reads as clearly bounded ("đậm đà hơn" —
   richer/bolder border definition, requested for the whole admin, not just the sidebar). */
.fi-section:not(.fi-aside),
.fi-ta-ctn {
    border: 1px solid oklch(0.929 0.013 255.508) !important; /* Slate-200 */
    border-radius: 0.375rem !important;
}

/* Logo + brand name — live in the topbar (above the page content), not the sidebar; explicit
   correction after a previous pass put them in the sidebar's own header row instead. See
   AdminPanelProvider's ->brandLogo(), which passes an Htmlable (an <img> and this <span> together)
   instead of a plain URL string specifically so they share the same .fi-logo wrapper. .fi-logo is
   already `display: flex` by default (vendor/filament/filament/resources/css/components/logo.css);
   it just needs centering and a gap. Class names are `fi-brand-*`, not `fi-sidebar-brand-*` — this
   markup is Filament's single ->brandLogo() Htmlable, reused wherever Filament renders the logo, not
   sidebar-specific. */
.fi-logo {
    align-items: center;
    gap: 0.5rem;
}

.fi-brand-logo {
    height: 100%;
    width: auto;
}

.fi-brand-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: oklch(0.208 0.042 265.755); /* Slate-900 */
    white-space: nowrap;
}

/* Filament renders the logo in two places (.fi-topbar-start, topbar.blade.php, and
   .fi-sidebar-header-logo-ctn, sidebar.blade.php), reconciled by a responsive class rather than a
   server-side either/or — .fi-sidebar-header ships `lg:hidden` when ->hasTopbar() is true
   (sidebar.css), so it's already hidden on desktop by default; nothing to override there for the
   topbar to be the one visible copy. Only Filament's own topbar collapse-toggle button is hidden
   (this project's own copy, rendered via TOPBAR_LOGO_AFTER, replaces it — see
   resources/views/filament/sidebar-toggle.blade.php); the topbar's logo itself is left alone. */
.fi-topbar-collapse-sidebar-btn-ctn {
    display: none !important;
}

/* Sidebar toggle — sits directly after the logo/name inside .fi-topbar-start. */
.fi-sidebar-boundary-toggle {
    flex: none;
    margin-inline-start: 0.375rem;
    width: 2rem !important;
    height: 2rem !important;
    border: 1px solid oklch(0.869 0.022 252.894) !important;
    border-radius: 0.375rem !important;
    background: white !important;
    color: oklch(0.446 0.043 257.281) !important;
    box-shadow: 0 1px 2px oklch(0.208 0.042 265.755 / 8%) !important;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        transform 120ms ease,
        box-shadow 160ms ease !important;
}

.fi-sidebar-boundary-toggle:hover {
    border-color: oklch(0.696 0.17 162.48) !important;
    background: oklch(0.982 0.018 155.826) !important;
    color: oklch(0.432 0.095 166.913) !important;
    box-shadow: 0 2px 5px oklch(0.208 0.042 265.755 / 10%) !important;
}

.fi-sidebar-boundary-toggle:active {
    transform: scale(0.96);
}

.fi-sidebar-boundary-toggle:focus-visible {
    outline: 2px solid oklch(0.696 0.17 162.48);
    outline-offset: 2px;
}

.fi-sidebar-boundary-toggle .fi-icon > svg {
    width: 100%;
    height: 100%;
}

/* Sidebar proportions mirror base-edu-admin: 16rem expanded / 3rem collapsed, 40px navigation
   rows, 32px group labels, 16px icons, and an 8px outer gutter. Colors and surfaces intentionally
   remain this panel's existing light Slate/Emerald treatment. */
.fi-sidebar-nav {
    padding-inline: 0.5rem !important;
    padding-block: 0.75rem !important;
}

/* .fi-sidebar-nav's own row-gap (above) only spaces its *direct* children — in practice just
   .fi-sidebar-nav-groups, the <ul> wrapping every group (Content/Product/Blog/Contact); the actual
   visible gap *between* those groups is .fi-sidebar-nav-groups' own gap-y-7 (1.75rem, sidebar.css)
   — the one that needed cutting, not the outer nav's. */
.fi-sidebar-nav-groups {
    margin-inline: 0 !important;
    row-gap: 0.75rem !important;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-btn,
.fi-sidebar-group-dropdown-trigger-btn {
    min-height: 2.5rem;
    padding: 0.625rem !important;
    column-gap: 0.625rem !important;
    border-radius: 0.5rem !important;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    row-gap: 0.25rem !important;
}

.fi-sidebar-group-btn {
    min-height: 2rem;
    padding-block: 0 !important;
    padding-inline: 0.5rem !important;
}

.fi-sidebar-group-label {
    font-size: 0.6875rem !important;
    line-height: 2rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-sidebar-item-btn > .fi-icon {
    width: 1rem !important;
    height: 1rem !important;
}

@media (min-width: 64rem) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.25rem !important;
    }
}

/* Active item — a straight indicator at the inline-start edge plus a flat pale fill, replacing
   Filament's own flat bg-gray-100 (sidebar.css's .fi-sidebar-item.fi-active > .fi-sidebar-item-btn)
   so the current page reads clearly at a glance. .fi-sidebar-item-btn is already `position: relative`
   by default, so the indicator needs no extra wrapper. The treatment stays inside the primary hue
   (Emerald, registered in AdminPanelProvider) — no new color introduced. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: oklch(0.962 0.044 156.743) !important; /* Emerald-50 */
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.25rem;
    height: 1.125rem;
    border-radius: 0;
    background-color: oklch(0.508 0.118 165.612); /* Emerald-700, matches the active icon/label text */
}

/* Table rows — default .fi-ta-row has no background of its own outside .fi-clickable/.fi-striped/
   .fi-selected (vendor/filament/tables/resources/css/row.css); add a hover background unconditionally
   so it applies whether or not a row counts as "clickable", and tint the header row so it reads as
   a distinct band above the data (shadcn's Table header is typically a subtle bg/border-b treatment). */
.fi-ta-row:hover {
    background-color: oklch(0.984 0.003 247.858) !important; /* Slate-50 */
}

.fi-ta-header-cell {
    background-color: oklch(0.968 0.007 247.896) !important; /* Slate-100 */
}

/* Modern admin shell — quiet depth, firmer typography, and consistent 6px geometry. */
.fi-body:not(.fi-body-has-simple-layout) {
    background:
        radial-gradient(ellipse 34rem 22rem at 92% 0%, oklch(0.845 0.143 164.978 / 13%), transparent 72%),
        oklch(0.976 0.006 247.896) !important;
    background-attachment: fixed !important;
}

.fi-topbar {
    min-height: 3.5rem !important;
    padding-inline: 1.25rem !important;
    border-bottom: 1px solid oklch(0.845 0.143 164.978 / 24%);
    background:
        radial-gradient(ellipse 19rem 5.5rem at 7rem -0.75rem, oklch(0.905 0.093 164.15 / 62%), transparent 74%),
        linear-gradient(90deg, oklch(1 0 0 / 94%), oklch(0.984 0.003 247.858 / 90%)) !important;
    box-shadow: 0 5px 20px oklch(0.208 0.042 265.755 / 6%) !important;
    backdrop-filter: blur(14px);
}

.fi-topbar-start {
    position: relative;
    gap: 0.5rem;
    margin-inline-end: 1.25rem !important;
    padding-inline-end: 1.25rem;
}

.fi-topbar-start::after {
    position: absolute;
    inset-block: 0.25rem;
    inset-inline-end: 0;
    width: 1px;
    content: '';
    background: linear-gradient(transparent, oklch(0.869 0.022 252.894), transparent);
}

.fi-topbar-start .fi-logo {
    margin-inline-start: 0 !important;
}

.fi-topbar .fi-brand-name {
    color: oklch(0.32 0.07 164) !important;
    font-weight: 680;
    letter-spacing: -0.012em;
}

.fi-topbar .fi-sidebar-boundary-toggle {
    border-color: oklch(0.696 0.17 162.48 / 32%) !important;
    background: oklch(1 0 0 / 74%) !important;
    color: oklch(0.432 0.095 166.913) !important;
    backdrop-filter: blur(8px);
}

.fi-topbar .fi-sidebar-boundary-toggle:hover {
    border-color: oklch(0.596 0.145 163.225 / 62%) !important;
    background: oklch(0.962 0.044 156.743 / 88%) !important;
    color: oklch(0.378 0.077 168.94) !important;
}

.fi-topbar-end {
    gap: 0.625rem !important;
}

/* Unread-count badge on the topbar bell — Filament's icon-button badge defaults to 'primary'
   (vendor/filament/support/.../icon-button.blade.php), the same emerald used everywhere else in
   the panel, so it barely reads as an alert. Same danger red as .gv-dashboard-stat--danger's icon
   (OverviewStats) for a consistent "needs attention" color across the admin, not a one-off value. */
.fi-topbar-database-notifications-btn .fi-badge {
    background-color: oklch(0.505 0.213 27.518) !important;
    color: oklch(0.985 0.002 247.839) !important;
    font-weight: 700 !important;
}

.fi-user-menu-trigger {
    padding: 0.125rem;
    border: 1px solid oklch(0.869 0.022 252.894);
    border-radius: 9999px;
    background: white;
    box-shadow: 0 1px 3px oklch(0.208 0.042 265.755 / 8%);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 140ms ease;
}

.fi-user-menu-trigger:hover {
    border-color: oklch(0.596 0.145 163.225);
    box-shadow: 0 0 0 3px oklch(0.905 0.093 164.15 / 48%);
    transform: translateY(-1px);
}

.fi-user-menu-trigger:focus-visible {
    outline: 2px solid oklch(0.596 0.145 163.225);
    outline-offset: 2px;
}

@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-sidebar {
        top: 3.5rem !important;
        height: calc(100dvh - 3.5rem) !important;
    }
}

.fi-header-heading {
    color: oklch(0.208 0.042 265.755) !important;
    font-size: clamp(1.375rem, 2vw, 1.75rem) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em;
}

.fi-header-subheading {
    max-width: 48rem;
    color: oklch(0.446 0.043 257.281) !important;
}

.fi-section:not(.fi-aside),
.fi-ta-ctn {
    background: oklch(1 0 0 / 94%) !important;
    box-shadow:
        0 1px 2px oklch(0.208 0.042 265.755 / 4%),
        0 8px 24px oklch(0.208 0.042 265.755 / 4%) !important;
}

.fi-section.fi-section-has-header:not(.fi-collapsed) > .fi-section-header {
    border-bottom: 1px solid oklch(0.929 0.013 255.508 / 80%);
    background: linear-gradient(180deg, white, oklch(0.984 0.003 247.858 / 72%));
}

.fi-section-heading,
.fi-ta-header-heading {
    color: oklch(0.278 0.033 256.848) !important;
    font-weight: 650 !important;
    letter-spacing: -0.012em;
}

.fi-input-wrp {
    border: 1px solid oklch(0.869 0.022 252.894) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px oklch(0.208 0.042 265.755 / 3%) !important;
}

.fi-input-wrp:not(.fi-disabled):focus-within {
    border-color: oklch(0.596 0.145 163.225) !important;
    box-shadow: 0 0 0 3px oklch(0.905 0.093 164.15 / 55%) !important;
}

/* Branded Select — native and searchable/multiple variants share one visual language. */
.fi-input-wrp:has(.fi-select-input) {
    overflow: hidden;
    border-color: oklch(0.845 0.143 164.978 / 34%) !important;
    background:
        radial-gradient(ellipse 7rem 3rem at 100% 0%, oklch(0.905 0.093 164.15 / 34%), transparent 72%),
        white !important;
}

.fi-input-wrp:has(.fi-select-input).fi-disabled {
    border-color: oklch(0.869 0.022 252.894 / 70%) !important;
    background: oklch(0.968 0.007 247.896) !important;
    opacity: 0.72;
}

.fi-input-wrp:has(.fi-select-input).fi-invalid {
    border-color: oklch(0.637 0.237 25.331 / 72%) !important;
    box-shadow: 0 0 0 3px oklch(0.885 0.062 18.334 / 42%) !important;
}

select.fi-select-input,
.fi-select-input .fi-select-input-btn {
    min-height: 2.5rem;
    padding-inline-start: 0.875rem !important;
    padding-inline-end: 3rem !important;
    background-position: right 0.625rem center !important;
    background-size: 1.75rem 1.75rem !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Crect x='1' y='1' width='26' height='26' rx='7' fill='%23d1fae5'/%3E%3Cpath d='m9.5 11.5 4.5 4.5 4.5-4.5' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    color: oklch(0.278 0.033 256.848) !important;
    font-weight: 560;
    transition: color 160ms ease, background-color 160ms ease !important;
}

.fi-select-input .fi-select-input-btn[aria-expanded='true'] {
    color: oklch(0.378 0.077 168.94) !important;
}

.fi-select-input .fi-dropdown-panel {
    padding: 0.375rem;
    border: 1px solid oklch(0.845 0.143 164.978 / 34%);
    border-radius: 0.5rem !important;
    background:
        radial-gradient(ellipse 11rem 6rem at 100% 0%, oklch(0.905 0.093 164.15 / 28%), transparent 72%),
        white !important;
    box-shadow:
        0 16px 38px oklch(0.208 0.042 265.755 / 14%),
        0 3px 10px oklch(0.208 0.042 265.755 / 7%) !important;
    transform-origin: top center;
    animation: gv-select-open 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fi-select-input .fi-select-input-options-ctn,
.fi-select-input .fi-select-input-option-group {
    border: 0 !important;
}

.fi-select-input .fi-select-input-option {
    position: relative;
    min-height: 2.375rem;
    margin-block: 0.125rem;
    padding: 0.625rem 2.25rem 0.625rem 0.75rem !important;
    border: 1px solid transparent;
    border-radius: 0.375rem !important;
    color: oklch(0.334 0.04 257.281) !important;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease,
        transform 140ms ease !important;
}

.fi-select-input .fi-select-input-option:hover,
.fi-select-input .fi-select-input-option:focus-visible {
    border-color: oklch(0.845 0.143 164.978 / 30%) !important;
    background: oklch(0.962 0.044 156.743 / 72%) !important;
    color: oklch(0.378 0.077 168.94) !important;
    transform: translateX(0.125rem);
}

.fi-select-input .fi-select-input-option.fi-selected {
    border-color: oklch(0.696 0.17 162.48 / 34%) !important;
    background: linear-gradient(90deg, oklch(0.905 0.093 164.15 / 72%), oklch(0.962 0.044 156.743 / 52%)) !important;
    color: oklch(0.32 0.07 164) !important;
    font-weight: 650;
}

.fi-select-input .fi-select-input-option.fi-selected::after {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    content: '✓';
    color: oklch(0.508 0.118 165.612);
    font-size: 0.8125rem;
    font-weight: 800;
    transform: translateY(-50%);
}

.fi-select-input .fi-select-input-search-ctn {
    padding: 0.375rem;
    border-bottom: 1px solid oklch(0.929 0.013 255.508);
    background: oklch(1 0 0 / 88%) !important;
    backdrop-filter: blur(10px);
}

.fi-select-input .fi-select-input-search-ctn .fi-input-wrp {
    border-color: oklch(0.845 0.143 164.978 / 38%) !important;
    background: oklch(0.982 0.018 155.826 / 72%) !important;
}

.fi-select-input .fi-select-input-value-badges-ctn .fi-badge {
    border: 1px solid oklch(0.696 0.17 162.48 / 24%);
    background: oklch(0.95 0.052 163.051) !important;
    color: oklch(0.378 0.077 168.94) !important;
}

@keyframes gv-select-open {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fi-fo-field-wrp-label {
    color: oklch(0.278 0.033 256.848) !important;
    font-weight: 600 !important;
}

.fi-btn {
    border-radius: 0.375rem !important;
    letter-spacing: -0.005em;
}

.fi-btn:not(.fi-outlined) {
    box-shadow: 0 1px 2px oklch(0.208 0.042 265.755 / 9%) !important;
}

.fi-tabs {
    padding: 0.25rem !important;
    border: 1px solid oklch(0.929 0.013 255.508);
    border-radius: 0.5rem !important;
    background: oklch(0.968 0.007 247.896 / 72%) !important;
}

.fi-tabs-item {
    border-radius: 0.375rem !important;
}

.fi-tabs-item.fi-active {
    background: white !important;
    box-shadow: 0 1px 3px oklch(0.208 0.042 265.755 / 10%) !important;
}

.fi-ta-header {
    border-bottom: 1px solid oklch(0.929 0.013 255.508 / 85%);
    background: linear-gradient(180deg, white, oklch(0.984 0.003 247.858 / 62%));
}

.fi-ta-row {
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.fi-ta-row:hover {
    background-color: oklch(0.982 0.018 155.826 / 72%) !important;
    box-shadow: inset 0.1875rem 0 oklch(0.596 0.145 163.225);
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background: oklch(0.968 0.007 247.896) !important;
    color: oklch(0.278 0.033 256.848) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    box-shadow: inset 0 0 0 1px oklch(0.845 0.143 164.978 / 38%);
}

.fi-badge {
    border-radius: 0.25rem !important;
    font-weight: 600 !important;
}

/* Sidebar theme — deep forest navigation against a quiet, bright workspace. */
.fi-sidebar {
    border-inline-end: 1px solid oklch(0.38 0.055 166 / 42%) !important;
    background:
        radial-gradient(circle at 12% 4%, oklch(0.47 0.095 162 / 32%), transparent 15rem),
        radial-gradient(circle at 100% 72%, oklch(0.4 0.07 205 / 18%), transparent 18rem),
        linear-gradient(180deg, oklch(0.235 0.042 166), oklch(0.17 0.025 170) 58%, oklch(0.135 0.02 170)) !important;
    box-shadow: 8px 0 30px oklch(0.11 0.025 170 / 12%);
    transition:
        width 240ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms ease !important;
}

.fi-sidebar .fi-sidebar-header {
    border-bottom: 1px solid oklch(1 0 0 / 8%);
    background: oklch(0.19 0.032 168 / 92%) !important;
    box-shadow: none !important;
}

.fi-sidebar .fi-brand-name {
    color: oklch(0.97 0.008 160) !important;
}

.fi-sidebar-nav {
    scrollbar-color: oklch(1 0 0 / 18%) transparent;
    scrollbar-width: thin;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 0.375rem;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: oklch(1 0 0 / 16%);
}

.fi-sidebar-group-label {
    color: oklch(0.78 0.025 165 / 72%) !important;
    font-weight: 650 !important;
    letter-spacing: 0.09em;
}

.fi-sidebar-group-btn > .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn > .fi-icon,
.fi-sidebar-item-btn > .fi-icon {
    color: oklch(0.79 0.035 166 / 72%) !important;
}

.fi-sidebar-item-label {
    color: oklch(0.9 0.015 165 / 82%) !important;
    font-weight: 520 !important;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-dropdown-trigger-btn {
    border: 1px solid transparent;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-dropdown-trigger-btn:focus-visible {
    outline: 2px solid oklch(0.82 0.16 158 / 78%);
    outline-offset: -2px;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar-group-dropdown-trigger-btn:hover {
    border-color: oklch(1 0 0 / 7%) !important;
    background: oklch(1 0 0 / 7%) !important;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 4%);
    transform: translateX(0.125rem);
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar-group-dropdown-trigger-btn:hover > .fi-icon {
    color: oklch(0.97 0.018 160) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    border-color: oklch(0.79 0.13 162 / 24%) !important;
    background:
        linear-gradient(90deg, oklch(0.62 0.13 162 / 28%), oklch(1 0 0 / 7%)) !important;
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 8%),
        0 8px 18px oklch(0.08 0.025 170 / 16%) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: oklch(0.88 0.12 160) !important;
    filter: drop-shadow(0 0 0.35rem oklch(0.7 0.14 160 / 24%));
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: white !important;
    font-weight: 650 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    inset-inline-start: -1px;
    width: 0.1875rem;
    height: 1.5rem;
    border-radius: 0 9999px 9999px 0;
    background: oklch(0.82 0.16 158) !important;
    box-shadow: 0 0 0.75rem oklch(0.72 0.16 160 / 55%);
}

.fi-sidebar-item-badge-ctn .fi-badge {
    border: 1px solid oklch(1 0 0 / 8%);
    background: oklch(1 0 0 / 8%) !important;
    color: oklch(0.9 0.025 162) !important;
}

/* Contextual resource overviews — Product, Blog, and Contact each get a distinct visual language. */
.gv-collection-overview {
    --gv-collection-accent: oklch(0.55 0.13 164);
    --gv-collection-soft: oklch(0.905 0.093 164.15 / 42%);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    min-height: 10rem;
    padding: 1.5rem;
    border: 1px solid oklch(0.929 0.013 255.508);
    border-radius: 0.5rem;
    background:
        radial-gradient(ellipse 42% 130% at 100% 0%, var(--gv-collection-soft), transparent 72%),
        oklch(1 0 0 / 94%);
    box-shadow:
        0 1px 2px oklch(0.208 0.042 265.755 / 4%),
        0 12px 30px oklch(0.208 0.042 265.755 / 5%);
    animation: gv-surface-enter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gv-collection-overview::before {
    position: absolute;
    inset-inline-start: -4rem;
    bottom: -6rem;
    width: 15rem;
    height: 15rem;
    border-radius: 9999px;
    content: '';
    background: radial-gradient(circle, var(--gv-collection-soft), transparent 68%);
    opacity: 0.42;
    filter: blur(0.375rem);
    pointer-events: none;
}

.gv-collection-overview--blog {
    --gv-collection-accent: oklch(0.52 0.13 245);
    --gv-collection-soft: oklch(0.89 0.07 235 / 44%);
}

.gv-collection-overview--contact {
    --gv-collection-accent: oklch(0.58 0.14 55);
    --gv-collection-soft: oklch(0.91 0.09 65 / 42%);
}

.gv-collection-overview__copy,
.gv-collection-overview__metrics {
    position: relative;
    z-index: 1;
}

.gv-collection-overview__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gv-collection-accent);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.gv-collection-overview__eyebrow::before {
    width: 1.5rem;
    height: 2px;
    border-radius: 9999px;
    content: '';
    background: currentColor;
}

.gv-collection-overview h2 {
    margin-top: 0.5rem;
    color: oklch(0.208 0.042 265.755);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 680;
    letter-spacing: -0.025em;
}

.gv-collection-overview p {
    max-width: 46rem;
    margin-top: 0.375rem;
    color: oklch(0.446 0.043 257.281);
    font-size: 0.875rem;
    line-height: 1.55;
}

.gv-collection-overview__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(5.75rem, 1fr));
    gap: 0.5rem;
}

.gv-collection-overview__metric {
    display: block;
    min-width: 6.5rem;
    padding: 0.75rem;
    border: 1px solid oklch(1 0 0 / 72%);
    border-radius: 0.375rem;
    background: oklch(1 0 0 / 68%);
    box-shadow: 0 5px 16px oklch(0.208 0.042 265.755 / 6%);
    backdrop-filter: blur(8px);
    animation: gv-metric-enter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(90ms + var(--gv-metric-index) * 55ms);
}

/* Clickable metrics (a ->url() present, see App\Filament\Widgets\CollectionOverview's blade) apply
   the matching table filter — see e.g. Modules\Contact\...\Pages\ListContactLeads. Plain metrics
   (no url, e.g. a "Total" tile with nothing to filter to) stay a <div>, untouched. */
a.gv-collection-overview__metric {
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

a.gv-collection-overview__metric:hover,
a.gv-collection-overview__metric:focus-visible {
    border-color: var(--gv-collection-accent);
    box-shadow: 0 8px 20px oklch(0.208 0.042 265.755 / 11%);
    transform: translateY(-0.125rem);
}

.gv-collection-overview__metric--active {
    border-color: var(--gv-collection-accent);
    background: oklch(1 0 0 / 92%);
    box-shadow:
        inset 0 0 0 1px var(--gv-collection-accent),
        0 5px 16px oklch(0.208 0.042 265.755 / 6%);
}

.gv-collection-overview__metrics dt {
    color: oklch(0.446 0.043 257.281);
    font-size: 0.6875rem;
    font-weight: 650;
    white-space: nowrap;
}

.gv-collection-overview__metrics dd {
    margin-top: 0.25rem;
    color: oklch(0.208 0.042 265.755);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.gv-resource-table {
    --gv-table-accent: oklch(0.596 0.145 163.225);
    --gv-table-hover: oklch(0.982 0.018 155.826 / 78%);
    overflow: hidden;
    box-shadow:
        inset 0 0.1875rem 0 var(--gv-table-accent),
        0 10px 28px oklch(0.208 0.042 265.755 / 5%) !important;
    animation: gv-surface-enter 420ms 70ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gv-resource-table--blog {
    --gv-table-accent: oklch(0.58 0.13 245);
    --gv-table-hover: oklch(0.97 0.022 240 / 84%);
}

.gv-resource-table--contact {
    --gv-table-accent: oklch(0.63 0.145 55);
    --gv-table-hover: oklch(0.98 0.024 65 / 84%);
}

.gv-resource-table .fi-ta-header {
    padding-top: 0.1875rem;
}

.gv-resource-table .fi-ta-row:hover {
    background: var(--gv-table-hover) !important;
    box-shadow: inset 0.1875rem 0 var(--gv-table-accent);
}

.gv-resource-table .fi-ta-image {
    border-radius: 0.375rem !important;
    box-shadow: 0 2px 8px oklch(0.208 0.042 265.755 / 10%);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}

.gv-resource-table .fi-ta-row:hover .fi-ta-image {
    box-shadow: 0 5px 14px oklch(0.208 0.042 265.755 / 14%);
    transform: scale(1.045);
}

/* Plain columns (not a Split/Stack card or ->contentGrid()), see each module's own
   Tables/*Table::columns() (ProductsTable/PostsTable/ContactLeadsTable) — a shorter row than
   Filament's own default cell padding so more records fit on screen at once. */
.gv-resource-table--product .fi-ta-cell,
.gv-resource-table--blog .fi-ta-cell,
.gv-resource-table--contact .fi-ta-cell {
    padding-block: 0.5rem;
}

.gv-resource-table--product .fi-ta-text,
.gv-resource-table--blog .fi-ta-text,
.gv-resource-table--contact .fi-ta-text {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* Per-row status accent — see ContactLeadsTable::configure()'s ->recordClasses(). A left-edge bar
   (same visual language as the row-hover accent above) plus a faint tint, so a row reads as
   new/contacted/closed at a glance instead of only via the narrow status cell. Declared after the
   generic hover rule and without !important on box-shadow so the two share equal specificity and
   this, being later, wins — the status bar stays visible through hover; the hover rule's own
   !important background still gives hover feedback on top of the tint. */
.gv-resource-table--contact .fi-ta-row.gv-row-status-new {
    background: oklch(0.936 0.032 17.717 / 38%);
    box-shadow: inset 0.1875rem 0 oklch(0.505 0.213 27.518);
}

.gv-resource-table--contact .fi-ta-row.gv-row-status-contacted {
    background: oklch(0.962 0.059 95.617 / 48%);
    box-shadow: inset 0.1875rem 0 oklch(0.555 0.135 66.442);
}

.gv-resource-table--contact .fi-ta-row.gv-row-status-closed {
    background: oklch(0.95 0.052 163.051 / 38%);
    box-shadow: inset 0.1875rem 0 oklch(0.508 0.118 165.612);
}

@keyframes gv-surface-enter {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gv-metric-enter {
    from {
        opacity: 0;
        transform: translateY(0.375rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dashboard welcome — restrained editorial composition with one strong green edge, compact actions,
   and a calendar block that gives the report view a clear visual anchor. */
.gv-dashboard-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    min-height: 11rem;
    padding: 1.5rem;
    border: 1px solid oklch(0.929 0.013 255.508);
    border-inline-start: 0.25rem solid oklch(0.508 0.118 165.612);
    border-radius: 0.375rem;
    background:
        radial-gradient(ellipse 48% 115% at 100% 0%, oklch(0.905 0.093 164.15 / 48%), transparent 68%),
        radial-gradient(ellipse 38% 80% at 76% 110%, oklch(0.951 0.026 236.824 / 46%), transparent 72%),
        white;
    box-shadow: 0 2px 8px oklch(0.208 0.042 265.755 / 5%);
}

.gv-dashboard-welcome::after {
    position: absolute;
    inset-inline-end: -5rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    content: '';
    background: radial-gradient(circle, oklch(0.845 0.143 164.978 / 15%), transparent 68%);
    filter: blur(0.5rem);
}

.gv-dashboard-welcome__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.gv-dashboard-welcome__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: oklch(0.508 0.118 165.612);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gv-dashboard-welcome__status {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: oklch(0.696 0.17 162.48);
    box-shadow: 0 0 0 0.25rem oklch(0.95 0.052 163.051);
}

.gv-dashboard-welcome h2 {
    color: oklch(0.208 0.042 265.755);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

.gv-dashboard-welcome p {
    margin-top: 0.375rem;
    color: oklch(0.446 0.043 257.281);
    font-size: 0.875rem;
}

.gv-dashboard-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.gv-dashboard-welcome__date {
    position: relative;
    z-index: 1;
    display: grid;
    flex: none;
    width: 6.5rem;
    min-height: 7.5rem;
    place-content: center;
    border: 1px solid oklch(0.869 0.022 252.894);
    border-radius: 0.375rem;
    background: oklch(1 0 0 / 86%);
    text-align: center;
    box-shadow: 0 8px 24px oklch(0.208 0.042 265.755 / 7%);
}

.gv-dashboard-welcome__date span,
.gv-dashboard-welcome__date small {
    color: oklch(0.446 0.043 257.281);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gv-dashboard-welcome__date strong {
    color: oklch(0.278 0.033 256.848);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.1;
}

/* Stat widget cards (Dashboard) — default p-6/shadow-sm
   (vendor/filament/widgets/resources/css/stats-overview-widget.css). Second pass on this design
   (the first — a left accent border — the client didn't like): match this file's Section padding,
   drop the accent border, and turn each stat's own icon (OverviewStats sets ->icon() on every
   stat — vendor/filament/widgets/resources/views/stats-overview-widget/stat.blade.php renders it
   plain, inline with the label, by default) into a small rounded badge instead, plus a hover lift
   since these are links (OverviewStats also sets ->url() on every stat). */
.fi-wi-stats-overview-stat {
    padding: 1rem !important;
    border-radius: 0.375rem !important;
    transition: box-shadow 160ms ease, background-color 160ms ease;
}

.gv-dashboard-stat {
    position: relative;
    overflow: hidden;
    border-color: oklch(0.929 0.013 255.508 / 85%) !important;
}

.gv-dashboard-stat::after {
    position: absolute;
    inset-inline-end: -3.5rem;
    top: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    content: '';
    opacity: 0.52;
    background: radial-gradient(circle, var(--gv-stat-glow), transparent 68%);
    filter: blur(0.25rem);
    pointer-events: none;
}

.gv-dashboard-stat--primary {
    --gv-stat-glow: oklch(0.905 0.093 164.15);
    background:
        radial-gradient(ellipse 72% 130% at 105% -8%, oklch(0.905 0.093 164.15 / 42%), transparent 68%),
        white !important;
}

.gv-dashboard-stat--warning {
    --gv-stat-glow: oklch(0.924 0.12 95.746);
    background:
        radial-gradient(ellipse 72% 130% at 105% -8%, oklch(0.924 0.12 95.746 / 38%), transparent 68%),
        white !important;
}

.gv-dashboard-stat--info {
    --gv-stat-glow: oklch(0.901 0.058 230.902);
    background:
        radial-gradient(ellipse 72% 130% at 105% -8%, oklch(0.901 0.058 230.902 / 42%), transparent 68%),
        white !important;
}

.gv-dashboard-stat--danger {
    --gv-stat-glow: oklch(0.885 0.062 18.334);
    background:
        radial-gradient(ellipse 72% 130% at 105% -8%, oklch(0.885 0.062 18.334 / 38%), transparent 68%),
        white !important;
}

.gv-dashboard-stat--success {
    --gv-stat-glow: oklch(0.9 0.08 195);
    background:
        radial-gradient(ellipse 72% 130% at 105% -8%, oklch(0.9 0.08 195 / 40%), transparent 68%),
        white !important;
}

.gv-dashboard-stat--gray {
    --gv-stat-glow: oklch(0.92 0.01 255);
    background:
        radial-gradient(ellipse 72% 130% at 105% -8%, oklch(0.92 0.01 255 / 45%), transparent 68%),
        white !important;
}

.fi-wi-stats-overview-stat:hover {
    background-color: oklch(0.984 0.003 247.858) !important; /* Slate-50 */
    box-shadow: 0 4px 12px oklch(0.208 0.042 265.755 / 8%);
}

.fi-wi-stats-overview-stat-label-ctn {
    align-items: center !important;
}

.gv-dashboard-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    padding: 0.375rem;
    border-radius: 0.25rem;
    background-color: oklch(0.95 0.052 163.051); /* Emerald-100 */
    color: oklch(0.508 0.118 165.612) !important; /* Emerald-700 */
    width: 1.75rem;
    height: 1.75rem;
}

.gv-dashboard-stat--warning .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.962 0.059 95.617);
    color: oklch(0.555 0.135 66.442) !important;
}

.gv-dashboard-stat--info .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.951 0.026 236.824);
    color: oklch(0.5 0.134 242.749) !important;
}

.gv-dashboard-stat--danger .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.936 0.032 17.717);
    color: oklch(0.505 0.213 27.518) !important;
}

.gv-dashboard-stat--success .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.94 0.045 195);
    color: oklch(0.5 0.1 195) !important;
}

.gv-dashboard-stat--gray .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.94 0.006 255);
    color: oklch(0.45 0.02 255) !important;
}

/* Dark mode — authored surfaces use their own dark palette instead of relying on color inversion. */
.dark .fi-body:not(.fi-body-has-simple-layout) {
    background:
        radial-gradient(ellipse 36rem 24rem at 92% 0%, oklch(0.48 0.1 162 / 14%), transparent 72%),
        oklch(0.125 0.016 255) !important;
}

.dark .fi-topbar {
    border-bottom-color: oklch(0.62 0.13 162 / 18%);
    background:
        radial-gradient(ellipse 20rem 6rem at 7rem -1rem, oklch(0.42 0.095 162 / 42%), transparent 74%),
        linear-gradient(90deg, oklch(0.17 0.024 165 / 94%), oklch(0.145 0.018 255 / 92%)) !important;
    box-shadow: 0 5px 22px oklch(0.06 0.015 255 / 36%) !important;
}

.dark .fi-topbar .fi-brand-name,
.dark .fi-header-heading {
    color: oklch(0.97 0.008 250) !important;
}

.dark .fi-topbar .fi-brand-name {
    color: oklch(0.91 0.08 158) !important;
}

.dark .fi-topbar-start::after {
    background: linear-gradient(transparent, oklch(1 0 0 / 16%), transparent);
}

.dark .fi-user-menu-trigger {
    border-color: oklch(1 0 0 / 14%);
    background: oklch(0.22 0.025 255);
    box-shadow: 0 1px 3px oklch(0.05 0.015 255 / 35%);
}

.dark .fi-user-menu-trigger:hover {
    border-color: oklch(0.68 0.13 162 / 70%);
    box-shadow: 0 0 0 3px oklch(0.5 0.12 164 / 24%);
}

.dark .fi-header-subheading {
    color: oklch(0.72 0.02 250) !important;
}

.dark .fi-sidebar-boundary-toggle {
    border-color: oklch(1 0 0 / 14%) !important;
    background: oklch(0.22 0.025 255) !important;
    color: oklch(0.82 0.025 250) !important;
    box-shadow: 0 1px 3px oklch(0.05 0.015 255 / 35%) !important;
}

.dark .fi-sidebar-boundary-toggle:hover {
    border-color: oklch(0.68 0.13 162 / 68%) !important;
    background: oklch(0.28 0.055 164) !important;
    color: white !important;
}

.dark .fi-topbar .fi-sidebar-boundary-toggle {
    border-color: oklch(0.68 0.13 162 / 26%) !important;
    background: oklch(0.22 0.04 165 / 74%) !important;
    color: oklch(0.85 0.1 158) !important;
}

.dark .fi-topbar .fi-sidebar-boundary-toggle:hover {
    border-color: oklch(0.72 0.14 160 / 58%) !important;
    background: oklch(0.3 0.07 163 / 88%) !important;
    color: white !important;
}

.dark .fi-section:not(.fi-aside),
.dark .fi-ta-ctn {
    border-color: oklch(1 0 0 / 9%) !important;
    background: oklch(0.175 0.018 255 / 96%) !important;
    box-shadow:
        0 1px 2px oklch(0.05 0.015 255 / 28%),
        0 10px 28px oklch(0.05 0.015 255 / 18%) !important;
}

.dark .fi-section.fi-section-has-header:not(.fi-collapsed) > .fi-section-header,
.dark .fi-ta-header {
    border-color: oklch(1 0 0 / 8%);
    background: linear-gradient(180deg, oklch(0.2 0.02 255), oklch(0.17 0.018 255)) !important;
}

.dark .fi-section-heading,
.dark .fi-ta-header-heading,
.dark .fi-fo-field-wrp-label {
    color: oklch(0.9 0.012 250) !important;
}

.dark .fi-input-wrp {
    border-color: oklch(1 0 0 / 13%) !important;
    background: oklch(0.145 0.018 255) !important;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 3%) !important;
}

.dark .fi-input-wrp:not(.fi-disabled):focus-within {
    border-color: oklch(0.7 0.14 162 / 78%) !important;
    box-shadow: 0 0 0 3px oklch(0.5 0.12 164 / 24%) !important;
}

.dark .fi-input-wrp:has(.fi-select-input) {
    border-color: oklch(0.696 0.17 162.48 / 30%) !important;
    background:
        radial-gradient(ellipse 7rem 3rem at 100% 0%, oklch(0.508 0.118 165.612 / 20%), transparent 72%),
        oklch(0.145 0.018 255) !important;
}

.dark select.fi-select-input,
.dark .fi-select-input .fi-select-input-btn {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Crect x='1' y='1' width='26' height='26' rx='7' fill='%231f4d3b'/%3E%3Cpath d='m9.5 11.5 4.5 4.5 4.5-4.5' stroke='%236ee7b7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    color: oklch(0.9 0.012 250) !important;
}

.dark .fi-select-input .fi-dropdown-panel {
    border-color: oklch(0.696 0.17 162.48 / 28%);
    background:
        radial-gradient(ellipse 11rem 6rem at 100% 0%, oklch(0.508 0.118 165.612 / 18%), transparent 72%),
        oklch(0.175 0.018 255) !important;
    box-shadow:
        0 18px 42px oklch(0.05 0.015 255 / 46%),
        0 3px 10px oklch(0.05 0.015 255 / 30%) !important;
}

.dark .fi-select-input .fi-select-input-option {
    color: oklch(0.87 0.015 250) !important;
}

.dark .fi-select-input .fi-select-input-option:hover,
.dark .fi-select-input .fi-select-input-option:focus-visible {
    border-color: oklch(0.696 0.17 162.48 / 24%) !important;
    background: oklch(0.3 0.07 163 / 40%) !important;
    color: oklch(0.905 0.093 164.15) !important;
}

.dark .fi-select-input .fi-select-input-option.fi-selected {
    border-color: oklch(0.696 0.17 162.48 / 32%) !important;
    background: linear-gradient(90deg, oklch(0.3 0.07 163 / 74%), oklch(0.235 0.035 164 / 52%)) !important;
    color: oklch(0.95 0.052 163.051) !important;
}

.dark .fi-select-input .fi-select-input-search-ctn {
    border-color: oklch(1 0 0 / 8%);
    background: oklch(0.155 0.018 255 / 90%) !important;
}

.dark .fi-select-input .fi-select-input-search-ctn .fi-input-wrp {
    border-color: oklch(0.696 0.17 162.48 / 28%) !important;
    background: oklch(0.125 0.016 255 / 82%) !important;
}

.dark .fi-select-input .fi-select-input-value-badges-ctn .fi-badge {
    border-color: oklch(0.696 0.17 162.48 / 24%);
    background: oklch(0.3 0.07 163 / 56%) !important;
    color: oklch(0.905 0.093 164.15) !important;
}

.dark .fi-input-wrp:has(.fi-select-input).fi-disabled {
    border-color: oklch(1 0 0 / 8%) !important;
    background: oklch(0.13 0.014 255) !important;
}

.dark .fi-input-wrp:has(.fi-select-input).fi-invalid {
    border-color: oklch(0.704 0.191 22.216 / 72%) !important;
    box-shadow: 0 0 0 3px oklch(0.444 0.177 26.899 / 25%) !important;
}

.dark .fi-tabs {
    border-color: oklch(1 0 0 / 9%);
    background: oklch(0.125 0.016 255 / 78%) !important;
}

.dark .fi-tabs-item.fi-active {
    background: oklch(0.235 0.025 255) !important;
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 5%),
        0 2px 6px oklch(0.05 0.015 255 / 24%) !important;
}

.dark .fi-ta-header-cell {
    background-color: oklch(0.205 0.02 255) !important;
}

.dark .fi-ta-row:hover {
    background-color: oklch(0.25 0.045 164 / 52%) !important;
    box-shadow: inset 0.1875rem 0 oklch(0.7 0.14 162);
}

.dark .gv-collection-overview {
    border-color: oklch(1 0 0 / 9%);
    background:
        radial-gradient(ellipse 44% 135% at 100% 0%, var(--gv-collection-soft), transparent 72%),
        oklch(0.175 0.018 255 / 96%);
    box-shadow: 0 12px 30px oklch(0.05 0.015 255 / 22%);
}

.dark .gv-collection-overview--product {
    --gv-collection-accent: oklch(0.79 0.13 160);
    --gv-collection-soft: oklch(0.42 0.095 162 / 34%);
}

.dark .gv-collection-overview--blog {
    --gv-collection-accent: oklch(0.78 0.1 235);
    --gv-collection-soft: oklch(0.4 0.085 235 / 34%);
}

.dark .gv-collection-overview--contact {
    --gv-collection-accent: oklch(0.82 0.12 70);
    --gv-collection-soft: oklch(0.43 0.09 60 / 34%);
}

.dark .gv-collection-overview h2,
.dark .gv-collection-overview__metrics dd {
    color: oklch(0.97 0.008 250);
}

.dark .gv-collection-overview p,
.dark .gv-collection-overview__metrics dt {
    color: oklch(0.74 0.02 250);
}

.dark .gv-collection-overview__metric {
    border-color: oklch(1 0 0 / 10%);
    background: oklch(0.12 0.016 255 / 48%);
    box-shadow: 0 6px 18px oklch(0.05 0.015 255 / 24%);
}

.dark .gv-collection-overview__metric--active {
    background: oklch(0.18 0.02 255 / 72%);
}

.dark .gv-resource-table {
    --gv-table-hover: oklch(0.25 0.045 164 / 54%);
}

.dark .gv-resource-table--blog {
    --gv-table-hover: oklch(0.24 0.045 235 / 54%);
}

.dark .gv-resource-table--contact {
    --gv-table-hover: oklch(0.25 0.045 60 / 54%);
}

.dark .gv-resource-table--blog .fi-ta-image {
    border-color: oklch(1 0 0 / 9%);
}

.dark .gv-resource-table--contact .fi-ta-row.gv-row-status-new {
    background: oklch(0.3 0.075 25 / 45%);
    box-shadow: inset 0.1875rem 0 oklch(0.7 0.16 25);
}

.dark .gv-resource-table--contact .fi-ta-row.gv-row-status-contacted {
    background: oklch(0.31 0.07 75 / 45%);
    box-shadow: inset 0.1875rem 0 oklch(0.75 0.13 80);
}

.dark .gv-resource-table--contact .fi-ta-row.gv-row-status-closed {
    background: oklch(0.32 0.07 164 / 45%);
    box-shadow: inset 0.1875rem 0 oklch(0.72 0.14 162);
}

.dark .gv-dashboard-welcome {
    border-color: oklch(1 0 0 / 9%);
    border-inline-start-color: oklch(0.68 0.14 162);
    background:
        radial-gradient(ellipse 50% 125% at 100% 0%, oklch(0.46 0.1 162 / 32%), transparent 68%),
        radial-gradient(ellipse 38% 90% at 74% 112%, oklch(0.4 0.07 235 / 22%), transparent 72%),
        oklch(0.17 0.02 255) !important;
    box-shadow: 0 8px 28px oklch(0.05 0.015 255 / 22%);
}

.dark .gv-dashboard-welcome::after {
    background: radial-gradient(circle, oklch(0.58 0.13 162 / 18%), transparent 68%);
}

.dark .gv-dashboard-welcome h2,
.dark .gv-dashboard-welcome__date strong {
    color: oklch(0.97 0.008 250);
}

.dark .gv-dashboard-welcome p,
.dark .gv-dashboard-welcome__date span,
.dark .gv-dashboard-welcome__date small {
    color: oklch(0.74 0.02 250);
}

.dark .gv-dashboard-welcome__date {
    border-color: oklch(1 0 0 / 12%);
    background: oklch(0.125 0.018 255 / 72%);
    box-shadow: 0 10px 24px oklch(0.05 0.015 255 / 28%);
}

.dark .gv-dashboard-stat {
    border-color: oklch(1 0 0 / 9%) !important;
}

.dark .gv-dashboard-stat--primary {
    --gv-stat-glow: oklch(0.52 0.11 162);
    background:
        radial-gradient(ellipse 72% 135% at 105% -8%, oklch(0.42 0.095 162 / 48%), transparent 68%),
        oklch(0.18 0.02 255) !important;
}

.dark .gv-dashboard-stat--warning {
    --gv-stat-glow: oklch(0.55 0.11 80);
    background:
        radial-gradient(ellipse 72% 135% at 105% -8%, oklch(0.46 0.09 75 / 42%), transparent 68%),
        oklch(0.18 0.02 255) !important;
}

.dark .gv-dashboard-stat--info {
    --gv-stat-glow: oklch(0.48 0.1 235);
    background:
        radial-gradient(ellipse 72% 135% at 105% -8%, oklch(0.42 0.085 235 / 44%), transparent 68%),
        oklch(0.18 0.02 255) !important;
}

.dark .gv-dashboard-stat--danger {
    --gv-stat-glow: oklch(0.48 0.12 25);
    background:
        radial-gradient(ellipse 72% 135% at 105% -8%, oklch(0.44 0.1 25 / 42%), transparent 68%),
        oklch(0.18 0.02 255) !important;
}

.dark .gv-dashboard-stat--success {
    --gv-stat-glow: oklch(0.5 0.09 195);
    background:
        radial-gradient(ellipse 72% 135% at 105% -8%, oklch(0.42 0.08 195 / 46%), transparent 68%),
        oklch(0.18 0.02 255) !important;
}

.dark .gv-dashboard-stat--gray {
    --gv-stat-glow: oklch(0.5 0.015 255);
    background:
        radial-gradient(ellipse 72% 135% at 105% -8%, oklch(0.42 0.015 255 / 46%), transparent 68%),
        oklch(0.18 0.02 255) !important;
}

.dark .fi-wi-stats-overview-stat:hover {
    background-color: oklch(0.22 0.025 255) !important;
    box-shadow: 0 8px 20px oklch(0.05 0.015 255 / 28%);
}

.dark .gv-dashboard-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.32 0.07 164);
    color: oklch(0.84 0.11 160) !important;
}

.dark .gv-dashboard-stat--warning .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.31 0.07 75);
    color: oklch(0.86 0.12 85) !important;
}

.dark .gv-dashboard-stat--info .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.29 0.065 235);
    color: oklch(0.82 0.09 230) !important;
}

.dark .gv-dashboard-stat--danger .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.3 0.075 25);
    color: oklch(0.83 0.11 25) !important;
}

.dark .gv-dashboard-stat--success .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.3 0.06 195);
    color: oklch(0.84 0.09 195) !important;
}

.dark .gv-dashboard-stat--gray .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    background-color: oklch(0.32 0.01 255);
    color: oklch(0.82 0.015 255) !important;
}

@media (max-width: 63.999rem) {
    .fi-sidebar-boundary-toggle {
        display: none !important;
    }

    .gv-collection-overview {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .gv-collection-overview__metrics {
        max-width: 28rem;
    }
}

@media (max-width: 40rem) {
    .gv-dashboard-welcome {
        align-items: flex-start;
        min-height: auto;
        padding: 1.25rem;
    }

    .gv-dashboard-welcome__date,
    .gv-dashboard-welcome::after {
        display: none;
    }

    .gv-collection-overview {
        padding: 1.125rem;
    }

    .gv-collection-overview__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gv-collection-overview__metric {
        min-width: 0;
        padding: 0.625rem;
    }

    .gv-collection-overview__metrics dt {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-boundary-toggle,
    .fi-sidebar,
    .fi-sidebar-item-btn,
    .fi-sidebar-group-dropdown-trigger-btn,
    .fi-user-menu-trigger,
    .gv-resource-table .fi-ta-image,
    a.gv-collection-overview__metric,
    .fi-wi-stats-overview-stat {
        transition-duration: 0.01ms !important;
    }

    .gv-collection-overview,
    .gv-collection-overview__metric,
    .gv-resource-table {
        animation: none !important;
    }

    .fi-select-input .fi-dropdown-panel {
        animation: none !important;
    }

    .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
    .fi-sidebar-group-dropdown-trigger-btn:hover,
    .fi-user-menu-trigger:hover,
    a.gv-collection-overview__metric:hover,
    .gv-resource-table .fi-ta-row:hover .fi-ta-image {
        transform: none;
    }

    .fi-select-input .fi-select-input-option:hover,
    .fi-select-input .fi-select-input-option:focus-visible {
        transform: none;
    }
}

/* Login page — a deeper galaxy treatment with a restrained layer of floating banana cutouts. The
   decoration stays behind the white card, ignores pointer input, and stops entirely for reduced
   motion. Inputs are intentionally roomier here than the dense admin forms used after login. */
.fi-simple-layout {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 78% 22%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 32% 76%, oklch(0.9 0.06 155 / 90%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 90% 72%, white 0 1px, transparent 1.5px),
        radial-gradient(ellipse 70% 50% at 15% -10%, oklch(0.55 0.16 163 / 42%), transparent 60%),
        radial-gradient(ellipse 60% 45% at 90% 105%, oklch(0.5 0.14 264 / 32%), transparent 60%),
        linear-gradient(180deg, oklch(0.208 0.042 265.755), oklch(0.129 0.042 264.695));
    background-size: 13rem 13rem, 17rem 17rem, 19rem 19rem, 23rem 23rem, auto, auto, auto;
}

.fi-simple-layout::before,
.fi-simple-layout::after {
    content: '';
    position: absolute;
    inset: -6rem;
    z-index: -1;
    pointer-events: none;
    background-image:
        url('/images/login/banana-float.png'),
        url('/images/login/banana-float.png'),
        url('/images/login/banana-float.png');
    background-repeat: no-repeat;
    filter: saturate(0.9) drop-shadow(0 0.75rem 1.5rem oklch(0.05 0.02 265 / 35%));
    opacity: 0.42;
    animation: gv-login-bananas-drift 14s ease-in-out infinite alternate;
}

.fi-simple-layout::before {
    background-position: 7% 18%, 94% 20%, 14% 86%;
    background-size: 9rem auto, 6.5rem auto, 7rem auto;
}

.fi-simple-layout::after {
    background-position: 82% 84%, 35% 5%, 62% 98%;
    background-size: 10rem auto, 5rem auto, 6rem auto;
    opacity: 0.28;
    transform: rotate(8deg);
    animation-name: gv-login-bananas-drift-reverse;
    animation-duration: 18s;
}

.fi-simple-layout .fi-simple-main {
    position: relative;
    z-index: 1;
    width: min(100% - 2rem, 30rem);
}

.fi-simple-layout .fi-input-wrp {
    min-height: 3.25rem;
    border-radius: 0.625rem;
}

.fi-simple-layout .fi-input {
    min-height: 3.25rem;
    padding-block: 0.75rem !important;
    padding-inline: 1rem !important;
    font-size: 1rem;
    line-height: 1.5;
}

.fi-simple-layout .fi-fo-field-wrp-label {
    font-size: 0.9375rem;
}

.fi-simple-layout .fi-btn:not(.fi-size-xs):not(.fi-size-sm) {
    min-height: 3.25rem;
    padding-block: 0.75rem !important;
    font-size: 1rem;
}

@keyframes gv-login-bananas-drift {
    from {
        transform: translate3d(-0.5rem, 0.25rem, 0) rotate(-2deg);
    }

    to {
        transform: translate3d(0.75rem, -0.75rem, 0) rotate(2deg);
    }
}

@keyframes gv-login-bananas-drift-reverse {
    from {
        transform: translate3d(0.5rem, -0.35rem, 0) rotate(10deg);
    }

    to {
        transform: translate3d(-0.65rem, 0.8rem, 0) rotate(6deg);
    }
}

@media (max-width: 40rem) {
    .fi-simple-layout::before {
        background-position: -8% 12%, 108% 24%, 3% 92%;
        background-size: 6rem auto, 5rem auto, 5.5rem auto;
        opacity: 0.32;
    }

    .fi-simple-layout::after {
        background-position: 108% 88%, 45% -2%, 65% 104%;
        background-size: 7rem auto, 4rem auto, 4.5rem auto;
        opacity: 0.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-simple-layout::before,
    .fi-simple-layout::after {
        animation: none;
    }
}