/*
 * Ethesia Design System — Filament panel theme bridge
 * --------------------------------------------------------------------------
 * Panel-wide chrome layer (docs/design-system.md § "Laravel/Filament EDS
 * bridge" + ai/ENGINEERING_STANDARDS.md "native Filament pages use an EDS
 * bridge"). The warm cream canvas, hairlines and ink text come from the
 * panel's EDS gray ramp + Iris primary set in EthesiaPanelProvider->colors();
 * this file only adds the parts the colour engine can't express: the Fraunces
 * editorial display type on headings and the EDS card radius/shadow. It maps
 * native Filament `fi-*` chrome to EDS — it is NOT a place for page-specific
 * styling (use the reusable `fi-eds-*` classes in eds-panel.css for that).
 *
 * Tokens are the shared EDS variables declared on :root in eds-panel.css,
 * which is loaded panel-wide alongside this file.
 */

/* Fraunces is loaded as a real <link> tag in EthesiaPanelProvider's render
   hook (shared with eds-panel.css) — a nested @import here would block
   CSSOM parsing panel-wide until this file finishes downloading. */

:root {
    --brand-font: Georgia, 'Times New Roman', serif;
}

/* ── Editorial display type ──────────────────────────────────────────────
   Fraunces on the headings that carry the brand; Inter (the panel font)
   stays on all UI/body text. EDS rule: headings weight 430, never 700/800. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-fo-wizard-header-step-label,
.fi-ta-empty-state-heading,
.fi-in-empty-state-heading {
    font-family: var(--ser);
    font-weight: 430;
    letter-spacing: -0.01em;
}

/* ── Brand lockup ────────────────────────────────────────────────────────
   Georgia carries the Ethesia wordmark. Fraunces remains the editorial
   display face and Inter remains the panel UI/body face. */
.fi-eds-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    color: var(--ink);
}
.fi-eds-brand-lockup__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
}
.fi-eds-brand-lockup__wordmark {
    font: 700 1.35rem/1 var(--brand-font);
    letter-spacing: 0.01em;
}

/* ── EDS card radius — panels/cards/tables use the 18px workhorse radius and
   a soft warm shadow instead of the stock cool elevation. One card radius
   across the panel: --radius-xl (section 0) is 18 too, so vendor's own
   card chrome (.fi-ta-ctn, modal windows…) lands on the same corner. ──── */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: 18px;
}

/* Only CONTAINED sections are cards — `fi-section-not-contained` is the
   heading-only grouping variant (the dashboard stat groups), and a shadow on
   a transparent box paints a ghost band across the canvas. */
.fi-section:not(.fi-section-not-contained) {
    box-shadow: var(--fi-eds-shadow);
}

/* ── EDS stat tile — map Filament's StatsOverview stat to the EdsStat look
   (web-nuxt4 app/components/ui/EdsStat.vue): a paper surface on a warm
   hairline ring, an Inter uppercase eyebrow label in --ink3, and a Fraunces
   value. The native classes carry Tailwind utilities; these later, equal-
   specificity rules retoken them without touching the widget markup. ──── */
.fi-wi-stats-overview-stat {
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow);
    padding: 1.2rem 1.35rem;
    transition: box-shadow 160ms var(--fi-eds-ease), transform 160ms var(--fi-eds-ease);
}
.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px var(--lineS), var(--fi-eds-shadow-h);
    transform: translateY(-2px);
}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    font: 600 11px var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink3);
}
.fi-wi-stats-overview-stat .fi-icon {
    color: var(--ink3);
}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font: 430 28px/1.1 var(--ser);
    letter-spacing: -0.01em;
    color: var(--ink);
}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    font: 400 12.5px/1.4 var(--sans);
    color: var(--ink3);
}

/* ── EDS left rail — icon strip that expands to a labelled overlay on hover
   (mirrors web-nuxt4 app/components/ui/EdsAppLeftMenu.vue). The panel runs the
   always-visible (non-collapsible) sidebar, so every label lives in the DOM and
   the rail is driven purely by width + reveal CSS — there is no Alpine collapse
   state to fight. Desktop only (≥64rem); below that Filament's own off-canvas
   drawer is left untouched. The brand mark sits in the topbar; the rail is a
   clean icon column that never pushes page content (the open state overlays). */
@media (min-width: 64rem) {
    :root {
        --eds-rail: 80px;
        --eds-rail-open: 248px;
    }

    .fi-main-sidebar.fi-sidebar {
        position: fixed;
        inset-inline-start: 0;
        width: var(--eds-rail);
        background: var(--cream);
        border-inline-end: 1px solid var(--line);
        overflow: hidden;
        z-index: 30;
        transition: width 0.18s var(--fi-eds-ease);
    }
    .fi-main-sidebar.fi-sidebar:hover,
    .fi-main-sidebar.fi-sidebar:focus-within {
        width: var(--eds-rail-open);
        overflow: visible;
        box-shadow: 18px 0 40px -28px rgba(26, 23, 20, 0.4);
    }

    /* Reserve the collapsed gutter; the open rail overlays it, never reflowing
       the page (same geometry as the EDS rail). */
    .fi-layout {
        padding-inline-start: var(--eds-rail);
    }

    /* Brand lives in the topbar — drop the duplicate sidebar header. */
    .fi-main-sidebar .fi-sidebar-header-ctn {
        display: none;
    }

    .fi-main-sidebar .fi-sidebar-nav {
        padding-inline: 12px;
        padding-block: 14px;
        scrollbar-gutter: auto;
    }

    /* Rows: centred icons when railed, left-aligned when open. */
    .fi-main-sidebar .fi-sidebar-item-btn {
        justify-content: center;
        gap: 0;
        border-radius: 10px;
        padding: 9px 10px;
    }
    .fi-main-sidebar.fi-sidebar:hover .fi-sidebar-item-btn,
    .fi-main-sidebar.fi-sidebar:focus-within .fi-sidebar-item-btn {
        justify-content: flex-start;
        gap: 11px;
    }

    /* Labels / badges / group headings: collapsed away, revealed on expand. */
    .fi-main-sidebar .fi-sidebar-item-label,
    .fi-main-sidebar .fi-sidebar-item-badge-ctn,
    .fi-main-sidebar .fi-sidebar-group-label {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: opacity 0.16s ease, max-width 0.18s var(--fi-eds-ease);
    }
    .fi-main-sidebar.fi-sidebar:hover .fi-sidebar-item-label,
    .fi-main-sidebar.fi-sidebar:focus-within .fi-sidebar-item-label {
        opacity: 1;
        max-width: 180px;
    }
    .fi-main-sidebar.fi-sidebar:hover .fi-sidebar-item-badge-ctn,
    .fi-main-sidebar.fi-sidebar:focus-within .fi-sidebar-item-badge-ctn,
    .fi-main-sidebar.fi-sidebar:hover .fi-sidebar-group-label,
    .fi-main-sidebar.fi-sidebar:focus-within .fi-sidebar-group-label {
        opacity: 1;
        max-width: 200px;
    }

    /* Warm EDS states: muted icons, cream-well hover, psoft/purple active. */
    .fi-main-sidebar .fi-sidebar-item-icon {
        color: var(--ink3);
    }
    .fi-main-sidebar .fi-sidebar-item-label {
        color: var(--ink2);
        font-weight: 500;
    }
    .fi-main-sidebar .fi-sidebar-item-btn:hover {
        background: var(--cream2);
    }
    .fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background: var(--psoft);
    }
    .fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
    .fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
        color: var(--purple7);
    }
}

@media (min-width: 64rem) and (prefers-reduced-motion: reduce) {
    .fi-main-sidebar.fi-sidebar,
    .fi-main-sidebar .fi-sidebar-item-label,
    .fi-main-sidebar .fi-sidebar-item-badge-ctn,
    .fi-main-sidebar .fi-sidebar-group-label {
        transition: none;
    }
}

/* ── Nicer Inter rendering across the panel ──────────────────────────── */
.fi-body {
    font-feature-settings: 'ss01' on, 'cv01' on, 'cv11' on;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════
   NATIVE FILAMENT CHROME → EDS
   ----------------------------------------------------------------------
   Everything below maps Filament v5.6's own `fi-*` components onto the EDS
   contract. Selectors are verified against the vendor Blade templates in
   api/vendor/filament/ and the compiled panel stylesheet
   api/public/css/filament/filament/app.css — this file is loaded from the
   `panels::head.end` render hook, i.e. AFTER that stylesheet, so equal-
   specificity rules here win on source order and `!important` is almost
   never needed.

   Sections:
     0. Token remap (the keystone — Filament's own palette/radius scale)
     1. Modals + slide-overs
     2. Tables
     3. Forms
     4. Buttons
     5. Badges
     6. Dropdown menus
     7. Notifications (toasts)
     8. Tabs + breadcrumbs + topbar
     9. Auth / login
    10. Widgets
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. Token remap ──────────────────────────────────────────────────────
   Filament generates every surface, hairline, ink and accent from a handful
   of Tailwind theme variables. Re-pointing those at the EDS ramp restyles
   the whole panel at the root instead of chasing hundreds of components:

   · --color-white  is Filament's CARD SURFACE token (tables, modals, menus,
     inputs, sidebar, topbar…), so it becomes --paper.
   · --gray-*       drives canvas, hairlines, muted icons and body ink. The
     stock ramp is chroma-0 cool gray; this is the warm EDS ramp.
   · --primary-*    Iris. 600 = --purple, 700 = --purple7, 50 = --psoft, so
     Filament's own "50 surface / 700 ink" badge pairing lands exactly on the
     EDS soft-badge recipe for free.
   · --danger/success/warning-* are the three sanctioned status pairs, again
     arranged so shade 50 is the surface and shade 700 the ink.
   · --info-*       is Filament's only cool-blue accent and EDS has no blue:
     it is aliased onto the warm neutral ramp so "info" reads as quiet
     context rather than a second accent colour.
   · --radius-*     the EDS radius scale: md 6 (chips/badges), lg 10
     (buttons/inputs/segmented), xl 18 (cards/panels — the workhorse, one card
     radius for the whole panel). Overlays take 20 in section 1 and menus 14
     in section 6.

   Every value below is a var() reference into the EDS token block on :root in
   eds-panel.css — the named tokens where one exists, and the sanctioned
   `--eds-*` ramp rungs (declared there too) for the in-between shades the
   colour engine needs. NO literal colour belongs in this file.            */
:root {
    /* Card surface */
    --color-white: var(--paper);

    /* Warm neutral ramp */
    --gray-50: var(--cream);
    --gray-100: var(--cream2);
    --gray-200: var(--line);
    --gray-300: var(--lineS);
    --gray-400: var(--eds-warm-400);
    --gray-500: var(--ink3);
    --gray-600: var(--ink3-aa);
    --gray-700: var(--ink2);
    --gray-800: var(--eds-warm-800);
    --gray-900: var(--eds-warm-900);
    --gray-950: var(--ink);

    /* Iris */
    --primary-50: var(--psoft);
    --primary-100: var(--eds-iris-100);
    --primary-200: var(--eds-iris-200);
    --primary-300: var(--eds-iris-300);
    --primary-400: var(--eds-iris-400);
    --primary-500: var(--eds-iris-500);
    --primary-600: var(--purple);
    --primary-700: var(--purple7);
    --primary-800: var(--eds-iris-800);
    --primary-900: var(--eds-iris-900);
    --primary-950: var(--eds-iris-950);

    /* Status pair — err. 600 is the sanctioned ink; 700 is a genuinely darker
       rung so Filament's 600→700 hover step still has somewhere to go. */
    --danger-50: var(--err-surface);
    --danger-100: var(--eds-err-100);
    --danger-200: var(--eds-err-200);
    --danger-300: var(--eds-err-300);
    --danger-400: var(--eds-err-400);
    --danger-500: var(--eds-err-500);
    --danger-600: var(--err-ink);
    --danger-700: var(--eds-err-700);
    --danger-800: var(--eds-err-800);
    --danger-900: var(--eds-err-900);
    --danger-950: var(--eds-err-950);

    /* Status pair — ok */
    --success-50: var(--ok-surface);
    --success-100: var(--eds-ok-100);
    --success-200: var(--eds-ok-200);
    --success-300: var(--eds-ok-300);
    --success-400: var(--eds-ok-400);
    --success-500: var(--eds-ok-500);
    --success-600: var(--ok-ink);
    --success-700: var(--eds-ok-700);
    --success-800: var(--eds-ok-800);
    --success-900: var(--eds-ok-900);
    --success-950: var(--eds-ok-950);

    /* Status pair — warn */
    --warning-50: var(--warn-surface);
    --warning-100: var(--eds-warn-100);
    --warning-200: var(--eds-warn-200);
    --warning-300: var(--eds-warn-300);
    --warning-400: var(--eds-warn-400);
    --warning-500: var(--eds-warn-500);
    --warning-600: var(--warn-ink);
    --warning-700: var(--eds-warn-700);
    --warning-800: var(--eds-warn-800);
    --warning-900: var(--eds-warn-900);
    --warning-950: var(--eds-warn-950);

    /* No blue in EDS — "info" is warm neutral context. */
    --info-50: var(--cream2);
    --info-100: var(--cream2);
    --info-200: var(--line);
    --info-300: var(--lineS);
    --info-400: var(--eds-warm-400);
    --info-500: var(--ink3);
    --info-600: var(--ink3-aa);
    --info-700: var(--ink2);
    --info-800: var(--eds-warm-800);
    --info-900: var(--eds-warm-900);
    --info-950: var(--ink);

    /* EDS radius scale. Only md/lg/xl exist in the compiled panel stylesheet,
       so only those three are remapped — declaring sm/2xl as well would imply
       a coverage this bridge does not have. */
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 18px;

    /* Overlay geometry + motion, shared by section 1 */
    --eds-overlay-inset: 16px;
    --eds-overlay-radius: 20px;
    --eds-overlay-shadow: 0 24px 60px rgba(40, 33, 20, 0.22), 0 2px 8px rgba(40, 33, 20, 0.08);
    --eds-focus-ring: 0 0 0 3px color-mix(in srgb, var(--purple) 16%, transparent);
    --eds-focus-ring-err: 0 0 0 3px color-mix(in srgb, var(--err-ink) 16%, transparent);
    /* Buttons focus with an offset ring: a paper gap so the purple reads on a
       purple fill as clearly as it does on the cream canvas. */
    --eds-focus-ring-btn: 0 0 0 2px var(--paper), 0 0 0 4px var(--purple);
}

/* Warm canvas everywhere the layout paints a ground. */
.fi-body,
.fi-layout,
.fi-main-ctn {
    background-color: var(--cream);
}

/* Links: purple is rationed to actual navigation/actions. */
.fi-link.fi-color-primary {
    --text: var(--purple7);
}

/* ── 1. Modals + slide-overs ─────────────────────────────────────────────
   The EDS overlay contract (spec rule 9, canonical look = .fi-eds-slideover
   in eds-panel.css): a FLOATING, DETACHED panel inset from every viewport
   edge, 20px corners, warm hairline + elevated warm shadow, cream body with
   paper header/footer bands.

   Filament drives open/close with Alpine transition classes
   (.fi-transition-enter/-leave-* set `translate`/`scale`/`opacity`), so only
   the RESTING geometry and the off-screen distance are restyled here — the
   transition hooks themselves are left in place. The `.fi-modal >
   .fi-modal-window-ctn > .fi-modal-window` chains below deliberately mirror
   vendor specificity (0,3,0) so they win on source order alone. */

/* Backdrop — warm ink wash + blur instead of the stock cool 50% gray-950. */
.fi-modal > .fi-modal-close-overlay {
    background-color: rgba(26, 23, 20, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* The panel surface, shared by centred modals and slide-overs. Paper is the
   resting surface so a modal with no body (a confirm dialog is header +
   footer and nothing else) stays ONE continuous card; the cream body band
   below is painted on .fi-modal-content, which only exists when there is
   content to sit in it. */
.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    background-color: var(--paper);
    border-radius: var(--eds-overlay-radius);
    box-shadow: 0 0 0 1px var(--line), var(--eds-overlay-shadow);
    transition-duration: 260ms;
    transition-timing-function: var(--fi-eds-ease);
}

/* Centred modal: the container already pads 16px; just take the EDS corner
   (the vendor rule sets --radius-xl on this exact chain). */
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn .fi-modal-window {
    border-radius: var(--eds-overlay-radius);
}

/* Slide-over: detach it from all four edges. Vendor gives the window
   height:100dvh + margin-inline-start:auto; trading 32px of height for the
   top/bottom inset keeps it inside the fixed, full-bleed container without
   touching the grid. */
.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window {
    height: calc(100dvh - (var(--eds-overlay-inset) * 2));
    /* Vendor gives the window width:100%, which on a narrow viewport has no
       room left for the inset margins. Trim the WIDTH, never the max-width:
       every `fi-width-*` class is a `max-width` on this exact selector chain
       at this exact specificity, so capping max-width here would clobber all
       of them and blow every drawer up to the full viewport. */
    width: calc(100% - (var(--eds-overlay-inset) * 2));
    margin-block: var(--eds-overlay-inset);
    margin-inline-end: var(--eds-overlay-inset);
    border-radius: var(--eds-overlay-radius);
}
.fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window {
    margin-inline: var(--eds-overlay-inset) auto;
}

/* The BODY scrolls, not the whole panel — the canonical EDS drawer
   (.fi-eds-slideover / .fi-eds-detail__head + __body in eds-panel.css) is a
   flex column with a fixed header band over a scrolling body. Vendor instead
   scrolls the window itself and makes the header `position: sticky`, so
   whatever the panel is scrolled to on open gets sliced in half under that
   header — and Filament's focus trap DOES scroll it on open (it focuses the
   first link in the body, which the browser scrolls into view). Handing the
   overflow to .fi-modal-content clips the content at the band edge instead,
   so no row can ever render half-occluded. Slide-overs only: a centred modal
   sizes to its content and must keep scrolling as one window. */
.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window {
    overflow-y: hidden;
}
.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-content {
    overflow-y: auto;
    /* A flex child's min-height defaults to its content, which would let the
       body outgrow the panel and take the scroll back to the window. */
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--lineS) transparent;
}

/* Off-screen distance has to clear the detached margin too, or the panel
   parks with a sliver still showing. Mirrors the vendor enter/leave chains. */
.fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
.fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end {
    --tw-translate-x: calc(100% + 24px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}
.fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
.fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end {
    --tw-translate-x: calc(-100% - 24px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

/* Body band: cream, so header/footer read as paper bands around it. */
.fi-modal-window > .fi-modal-content {
    background-color: var(--cream);
    padding-block: 20px;
}

/* Header / footer geometry. */
.fi-modal-window > .fi-modal-header {
    border-start-start-radius: var(--eds-overlay-radius);
    border-start-end-radius: var(--eds-overlay-radius);
    padding-block: 16px;
}
.fi-modal-window > .fi-modal-footer {
    border-end-start-radius: var(--eds-overlay-radius);
    border-end-end-radius: var(--eds-overlay-radius);
    padding-block: 14px;
}

/* …and the hairline that divides them from the body — ONLY when a body is
   actually rendered between them. Filament omits .fi-modal-content entirely
   on a confirmation dialog, so an unconditional pair of rules draws two rules
   around the flex gap and the modal grows an empty band across its middle. */
.fi-modal-window > .fi-modal-header:has(+ .fi-modal-content) {
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
}
.fi-modal-window > .fi-modal-content + .fi-modal-footer {
    background-color: var(--paper);
    border-top: 1px solid var(--line);
}

.fi-modal-heading {
    font-size: 19px;
    line-height: 1.25;
    color: var(--ink);
}
.fi-modal-description {
    color: var(--ink3);
}
.fi-modal-icon-ctn .fi-modal-icon-bg {
    border-radius: 10px;
}
.fi-modal-close-btn {
    border-radius: 10px;
    color: var(--ink3);
}
.fi-modal-close-btn:hover {
    background-color: var(--cream2);
    color: var(--ink);
}

/* Small screens keep the 16px floor from spec rule 9; only the radius takes
   the sanctioned 20→16 exception. */
@media (max-width: 640px) {
    :root {
        --eds-overlay-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-modal > .fi-modal-window-ctn > .fi-modal-window {
        transition-duration: 1ms;
    }
    /* The backdrop is animated by Alpine's `x-transition.duration.300ms`,
       which writes transition-duration as an INLINE style — the only rule in
       this file that has to out-rank one. */
    .fi-modal > .fi-modal-close-overlay {
        transition-duration: 1ms !important;
    }
}

/* ── 2. Tables ───────────────────────────────────────────────────────────
   Linear-quiet density: a paper card on a warm hairline, cream header band
   with 11px uppercase Inter labels in --ink3, hairline row rules, and a
   psoft-tinted hover. */
.fi-ta-ctn {
    background-color: var(--paper);
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow);
}

/* A wide table scrolls sideways inside its card (vendor gives the content
   container overflow-x:auto) but leaves the affordance to the platform, which
   paints an overlay bar that is invisible at rest — the trailing column then
   reads as TRUNCATED DATA rather than as more table. A thin, always-drawn
   warm bar is the whole fix: `scrollbar-width: thin` opts out of overlay
   scrollbars, so the moment a table overflows it says so. */
.fi-ta-content-ctn {
    scrollbar-width: thin;
    scrollbar-color: var(--lineS) transparent;
}
.fi-ta-content-ctn::-webkit-scrollbar {
    height: 10px;
}
.fi-ta-content-ctn::-webkit-scrollbar-track {
    background: transparent;
}
.fi-ta-content-ctn::-webkit-scrollbar-thumb {
    background-color: var(--lineS);
    border: 3px solid var(--paper);
    border-radius: 6px;
}
.fi-ta-content-ctn::-webkit-scrollbar-thumb:hover {
    background-color: var(--ink3);
}

.fi-ta-header {
    border-bottom: 1px solid var(--line);
}
.fi-ta-header-heading {
    color: var(--ink);
}
.fi-ta-header-description {
    color: var(--ink3);
}

/* Header cells — the EDS table head. Micro-caps at the BOTTOM of the EDS
   band (10.5px, 0.04em) rather than the top: with `table-layout: auto` the
   head dictates each column's min width, and 11px/0.05em uppercase widened
   the wide tables by ~18px against vendor's 14px sentence-case labels —
   enough to push the trailing column's value past the card's right edge on
   /panel/users. Measured at 1600px: users 1851 → 1854 (was 1869), deliveries
   1545 → 1547 (was 1554), webhook logs 1594 → 1595 (was 1602). */
.fi-ta-header-cell,
.fi-ta-header-group-cell {
    background-color: var(--cream);
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink3);
}
.fi-ta-header-cell.fi-ta-header-cell-sorted {
    color: var(--purple7);
}
.fi-ta-header-cell .fi-ta-header-cell-sort-btn:hover {
    color: var(--ink);
}
/* The selection checkbox cell lives in the same band. */
th.fi-ta-cell.fi-ta-selection-cell {
    background-color: var(--cream);
    border-bottom: 1px solid var(--line);
}

/* Rows — hairline rules, warm zebra, psoft hover. Striping is toggled by PHP
   via .fi-striped (it skips group-header rows), so it must never be
   reproduced with :nth-child or it desyncs after a group header. */
tr.fi-ta-row {
    border-bottom: 1px solid var(--line);
}
tr.fi-ta-row.fi-striped {
    background-color: var(--cream);
}
tr.fi-ta-row.fi-clickable:hover,
tr.fi-ta-row.fi-striped.fi-clickable:hover {
    background-color: color-mix(in srgb, var(--psoft) 55%, transparent);
}
tr.fi-ta-row.fi-selected {
    background-color: var(--psoft);
}
/* Vendor marks a selected row with a 2px flag stripe down its leading edge
   (`--primary-600`, i.e. EDS purple once section 0 lands). Panel rule: NEVER
   border-left flag stripes — and on a table card with 18px corners it is
   full-bleed past the radius. The psoft row fill plus the purple checkbox
   already carry selection. Suppressed in all three layouts vendor emits it
   in: the table row, the mobile-stacked row, and the record list. Each chain
   matches or exceeds the vendor selector it has to out-rank. */
tr.fi-ta-row.fi-selected > :first-child::before,
tr.fi-ta-row.fi-selected::before,
.fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row.fi-selected > :first-child::before,
.fi-ta-content-ctn .fi-ta-content .fi-ta-record.fi-selected::before {
    display: none;
}
tr.fi-ta-row.fi-ta-group-header-row > td {
    background-color: var(--cream2);
    color: var(--ink2);
}

td.fi-ta-cell {
    color: var(--ink2);
}
td.fi-ta-cell .fi-ta-cell-label {
    color: var(--ink3);
}
/* The first data column is the record's identity — give it full ink. On a
   bulk-selectable table the first `td` IS the checkbox cell, so the identity
   column is the one that follows it; without bulk actions it is simply the
   first cell. (Vendor's class is `fi-ta-text-item` — there is no
   `-label` suffix on it in v5.6.) */
td.fi-ta-selection-cell + td.fi-ta-cell .fi-ta-text-item,
tr:not(:has(.fi-ta-selection-cell)) > td.fi-ta-cell:first-of-type .fi-ta-text-item {
    color: var(--ink);
}

/* Search + per-page + filter chrome. */
.fi-ta-search-field .fi-input-wrp,
.fi-pagination-records-per-page-select-ctn .fi-input-wrp {
    border-radius: 10px;
}
.fi-ta-filters-dropdown .fi-dropdown-panel .fi-ta-filters,
.fi-ta-filters-modal .fi-ta-filters {
    background-color: var(--paper);
}
.fi-ta-filters .fi-ta-filters-header .fi-ta-filters-heading {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink3);
}
.fi-ta-filter-indicators {
    background-color: var(--cream);
    border-bottom: 1px solid var(--line);
}
.fi-ta-filter-indicators .fi-ta-filter-indicators-badges-ctn .fi-badge {
    background-color: var(--psoft);
    color: var(--purple7);
}

/* Selection indicator + the bulk actions that surface beside it. */
.fi-ta-selection-indicator {
    background-color: var(--psoft);
    border-bottom: 1px solid var(--line);
    color: var(--purple7);
}
.fi-ta-selection-indicator .fi-ta-selection-indicator-actions-ctn .fi-link {
    color: var(--purple7);
}

/* Pagination — paper controls on the footer band. */
/* The table card has no overflow clip (action menus must be able to escape
   it), so the two elements that can sit on its bottom edge carry the corner
   themselves — otherwise a paper footer squares off the card's 18px radius.
   Read the rung from --radius-xl so the card corner stays a single knob. */
nav.fi-pagination {
    border-top: 1px solid var(--line);
    padding-block: 12px;
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
}
nav.fi-pagination .fi-pagination-overview {
    color: var(--ink3);
}
nav.fi-pagination ol.fi-pagination-items {
    background-color: var(--paper);
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--line);
}
nav.fi-pagination .fi-pagination-item-btn {
    border-radius: 10px;
    color: var(--ink2);
}
/* Vendor puts `fi-active` on the <li>, not the button, and never emits
   aria-current (support/…/components/pagination/item.blade.php). */
nav.fi-pagination .fi-pagination-item.fi-active > .fi-pagination-item-btn {
    background-color: var(--psoft);
    color: var(--purple7);
}
nav.fi-pagination .fi-pagination-previous-btn,
nav.fi-pagination .fi-pagination-next-btn {
    border-radius: 10px;
}

/* Empty state — the .fi-eds-empty look. The block deliberately paints NO
   surface of its own: .fi-ta-ctn already paints paper and a background is
   clipped to its own border-radius, so an opaque child over the bottom edge
   squares off the card's corners. */
div.fi-ta-empty-state-icon-bg {
    background-color: var(--cream2);
    color: var(--ink3);
    border-radius: 14px;
}
.fi-ta-empty-state-heading {
    color: var(--ink);
}
p.fi-ta-empty-state-description {
    color: var(--ink3);
}

/* ── 3. Forms ────────────────────────────────────────────────────────────
   Labels in quiet ink, paper fields on a warm hairline with a purple focus
   ring, section/fieldset cards on the 18px workhorse radius. */
.fi-fo-field-label,
.fi-fo-field-label .fi-fo-field-label-content {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink2);
}
sup.fi-fo-field-label-required-mark {
    color: var(--err-ink);
}

/* Input chrome. The wrapper carries the surface + ring (vendor class is
   fi-input-wrp, NOT fi-fo-input-wrp). */
/* --lineS, not --line: a resource form with no .fi-section card puts these
   straight on the cream canvas, where a --line hairline is ~4% off the
   ground and the field stops reading as a field. --tw-shadow is zeroed
   because vendor's focus rule re-composes box-shadow from the Tailwind ring
   variables and would otherwise re-insert vendor's cool black drop shadow,
   which spec rule 4 forbids. */
.fi-input-wrp {
    background-color: var(--paper);
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--lineS);
    --tw-shadow: 0 0 transparent;
    transition: box-shadow 150ms var(--fi-eds-ease);
}
.fi-input-wrp:hover {
    box-shadow: 0 0 0 1px var(--ink3);
}
/* Vendor's focus ring lives on
   `.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within`
   — matched exactly here so the EDS 1px + soft glow actually lands (a bare
   `:focus-within` loses the cascade and never renders). */
.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: 0 0 0 1px var(--purple), var(--eds-focus-ring);
}
.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--err-ink);
}
.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)).fi-invalid:focus-within {
    box-shadow: 0 0 0 1px var(--err-ink), var(--eds-focus-ring-err);
}
.fi-input-wrp.fi-disabled {
    background-color: var(--cream2);
    box-shadow: 0 0 0 1px var(--line);
}
.fi-input-wrp .fi-input,
.fi-input-wrp .fi-select-input,
.fi-input-wrp textarea {
    color: var(--ink);
}
.fi-input::placeholder,
.fi-input-wrp textarea::placeholder {
    color: var(--ink3);
}
.fi-input-wrp-prefix,
.fi-input-wrp-suffix,
.fi-input-wrp-label {
    color: var(--ink3);
}
/* Trailing affordances (the password reveal on the login screen, a copy or
   clear action on a field) — vendor fences them off with a full-height
   hairline that runs straight into the field's 10px corners, and sizes the
   glyph at 20px so an ink3 solid icon still reads as a dark blob. EDS keeps
   it quiet: no rule, a 16px glyph, and the icon button's own cream hover
   well as the affordance. */
.fi-input-wrp .fi-input-wrp-suffix:not(.fi-inline) {
    border-inline-start: 0;
    padding-inline-start: 4px;
    padding-inline-end: 8px;
}
.fi-input-wrp .fi-input-wrp-prefix:not(.fi-inline) {
    border-inline-end: 0;
    padding-inline-end: 4px;
    padding-inline-start: 8px;
}
.fi-input-wrp .fi-input-wrp-suffix .fi-icon-btn > .fi-icon,
.fi-input-wrp .fi-input-wrp-prefix .fi-icon-btn > .fi-icon {
    width: 16px;
    height: 16px;
}

/* Fused schema groups (a stack of fields sharing one field shell) carry
   vendor's cool drop shadow on every member. Zero it and take the EDS field
   chrome, same recipe as .fi-input-wrp above. */
.fi-sc-fused-group > .fi-sc {
    --tw-shadow: 0 0 transparent;
    box-shadow: 0 0 0 1px var(--lineS);
    border-radius: 10px;
}

/* Checkbox / radio / toggle — purple accent, never a cool blue. --tw-shadow
   is zeroed on all three for the same reason it is on .fi-input-wrp: vendor
   composes box-shadow from the Tailwind ring variables and would otherwise
   paint its cool black drop shadow under the control (spec rule 4).
   The `input[type=…]` prefix is load-bearing, not decoration: vendor declares
   every one of these properties on `input[type=checkbox].fi-checkbox-input`
   (0,2,1), so a bare `input.fi-checkbox-input` (0,1,1) loses regardless of
   source order and the cool elevation survives under the box. */
input[type='checkbox'].fi-checkbox-input,
input[type='radio'].fi-radio-input {
    accent-color: var(--purple);
    color: var(--purple);
    --tw-shadow: 0 0 transparent;
}
/* 4px, not the 6px chip rung: the control is 16px square, so a 6px corner is
   37.5% of it and the box stops reading as a checkbox next to a radio. The
   EDS radius scale governs surfaces (chips, buttons, cards) — a glyph-sized
   native form control takes the proportional corner vendor ships. */
input[type='checkbox'].fi-checkbox-input {
    border-radius: 4px;
}
input[type='radio'].fi-radio-input {
    border-radius: 50%;
}
.fi-toggle > :first-child {
    --tw-shadow: 0 0 transparent;
    box-shadow: var(--fi-eds-shadow);
}
/* Vendor's ring lives on `input[type=checkbox].fi-checkbox-input:focus`
   (0,3,1) — matched rung for rung here so the EDS ring wins on source order.
   The 1px purple edge is re-stated because this box-shadow REPLACES vendor's
   composed ring, which is the only thing drawing the control's outline. */
input[type='checkbox'].fi-checkbox-input:focus-visible,
input[type='radio'].fi-radio-input:focus-visible {
    box-shadow: 0 0 0 1px var(--purple), var(--eds-focus-ring);
}
.fi-fo-radio-label-text,
.fi-fo-checkbox-list-option {
    color: var(--ink2);
}
p.fi-fo-radio-label-description {
    color: var(--ink3);
}

/* Validation text from the err pair. */
.fi-fo-field-wrp-error-message,
li.fi-fo-field-wrp-error-message {
    color: var(--err-ink);
}

/* Grouping cards. */
.fi-fieldset {
    border-radius: 18px;
    border-color: var(--line);
}
/* `fi-section-not-contained` is Filament's own "this section has no card"
   variant — the dashboard uses it to group stat tiles under a heading, so it
   must stay transparent or every heading grows a full-width paper band. */
.fi-section:not(.fi-section-not-contained) {
    background-color: var(--paper);
    border-radius: 18px;
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow);
}
.fi-section.fi-secondary:not(.fi-section-not-contained) {
    background-color: var(--cream);
}
/* `fi-loading-section` is vendor's DEFERRED-WIDGET placeholder — a
   deliberately empty 8rem div (support/…/components/loading-section.blade.php)
   swapped for the real widget when its query returns. Two dashboard charts
   are slow enough to leave it on screen for seconds, and as a paper card with
   a hairline and a shadow it reads as a broken empty widget. The EDS sunken
   well reads as a slot still filling. */
.fi-section.fi-loading-section {
    background-color: var(--cream2);
    box-shadow: none;
}
.fi-section:not(.fi-section-not-contained) > header.fi-section-header {
    border-bottom: 1px solid var(--line);
}
p.fi-section-header-description {
    color: var(--ink3);
}
footer.fi-section-footer {
    border-top: 1px solid var(--line);
    background-color: var(--cream);
}

/* Repeater / key-value grids read as the same paper card. The repeater chain
   mirrors vendor's own `.fi-fo-repeater .fi-fo-repeater-item` (0,2,0) — a
   bare `.fi-fo-repeater-item` loses to it and the 14 never renders. */
.fi-fo-key-value,
.fi-fo-repeater .fi-fo-repeater-item {
    border-radius: 14px;
}

/* ── 4. Buttons ──────────────────────────────────────────────────────────
   Radius 10 (from --radius-lg), never a pill, never weight 700. Filament
   emits `--bg` / `--text` custom properties from its shade classes
   (.fi-bg-color-400 → --bg: var(--color-400)); re-declaring those two
   properties on the colour class is the lowest-specificity way in, and it
   also beats the shade classes (0,2,0 vs 0,1,0) without touching the
   `background-color: var(--bg)` rule itself. */
.fi-btn,
.fi-icon-btn {
    font-weight: 500;
    letter-spacing: 0;
    /* Vendor ships 75ms, below the 150–300ms EDS motion band. */
    transition-duration: 150ms;
    transition-timing-function: var(--fi-eds-ease);
}

/* Primary = purple fill. Stock light mode uses a 400 tint with 950 text,
   which reads lavender rather than as the EDS primary action. */
.fi-btn:not(.fi-outlined).fi-color-primary {
    --bg: var(--purple);
    --text: var(--paper);
    --hover-bg: var(--purple7);
    --hover-text: var(--paper);
}
.fi-btn:not(.fi-outlined).fi-color-primary:hover {
    background-color: var(--purple7);
}

/* Danger / success / warning from the three sanctioned pairs. A filled
   status button is a PRIMARY action (Delete in a confirm dialog, Approve on
   the vetting screen) and has to out-weigh the neutral Cancel beside it, so
   it takes the pair's INK as the fill with paper text — the soft 50-surface
   recipe is for badges, and on a button it reads as disabled. Hover steps to
   the darker 700 rung. */
.fi-btn:not(.fi-outlined).fi-color-danger {
    --bg: var(--err-ink);
    --text: var(--paper);
    --hover-bg: var(--danger-700);
    --hover-text: var(--paper);
}
.fi-btn:not(.fi-outlined).fi-color-danger:hover {
    background-color: var(--danger-700);
}
.fi-btn:not(.fi-outlined).fi-color-success {
    --bg: var(--ok-ink);
    --text: var(--paper);
    --hover-bg: var(--success-700);
    --hover-text: var(--paper);
}
.fi-btn:not(.fi-outlined).fi-color-success:hover {
    background-color: var(--success-700);
}
.fi-btn:not(.fi-outlined).fi-color-warning {
    --bg: var(--warn-ink);
    --text: var(--paper);
    --hover-bg: var(--warning-700);
    --hover-text: var(--paper);
}
.fi-btn:not(.fi-outlined).fi-color-warning:hover {
    background-color: var(--warning-700);
}

/* `info` has no recipe of its own in vendor's light mode beyond "400 tint +
   950 text", which on the warm ramp section 0 aliases it to is a muddy
   mid-gray slab. It is the same case as the three status pairs above — a
   FILLED info button is the submit action of its dialog ("Replace logo") and
   has to out-weigh the neutral Cancel beside it — so it takes the warm
   ramp's own ink as the fill: a solid neutral, no blue, no second accent,
   and unmistakably not the paper secondary below. */
.fi-btn:not(.fi-outlined).fi-color-info {
    --bg: var(--ink2);
    --text: var(--paper);
    --hover-bg: var(--ink);
    --hover-text: var(--paper);
}
.fi-btn:not(.fi-outlined).fi-color-info:hover {
    background-color: var(--ink);
}

/* Secondary / gray = paper on a hairline; hover firms the hairline. */
.fi-btn:not(.fi-outlined):not(.fi-color),
.fi-btn:not(.fi-outlined).fi-color-gray {
    background-color: var(--paper);
    color: var(--ink2);
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow);
}
.fi-btn:not(.fi-outlined):not(.fi-color):hover,
.fi-btn:not(.fi-outlined).fi-color-gray:hover {
    background-color: var(--paper);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--lineS), var(--fi-eds-shadow);
}
.fi-btn:not(.fi-color) > .fi-icon {
    color: var(--ink3);
}
/* Neutral outline only where there is no semantic colour — an
   ->outlined()->color('danger') button keeps vendor's own coloured ring, but
   not vendor's cool black drop shadow under it (spec rule 4). */
.fi-btn.fi-outlined:not(.fi-color) {
    box-shadow: 0 0 0 1px var(--lineS);
}
.fi-btn.fi-outlined.fi-color {
    --tw-shadow: 0 0 transparent;
}

/* Icon buttons are the one place a circle is allowed only when the glyph is
   square; Filament sizes them square, so keep the 10px EDS corner instead of
   a pill and let the hover well read as the cream sunken state.
   `:not(.fi-color)` is load-bearing: this rule lands after vendor's
   `.fi-text-color-600`, so without the guard it would neutralise every
   semantically coloured icon button in the panel — the red trash on a
   repeater row, the amber key on a user row — down to muted ink. */
.fi-icon-btn {
    border-radius: 10px;
}
.fi-icon-btn:not(.fi-color) {
    color: var(--ink3);
}
.fi-icon-btn:hover {
    background-color: var(--cream2);
}
.fi-icon-btn:not(.fi-color):hover {
    color: var(--ink);
}

/* Keyboard focus. Vendor paints the 2px ring from --tw-ring-color on
   `:is(.fi-btn.fi-force-enabled, .fi-btn:not(.fi-disabled):not([disabled])):focus-visible`
   and then re-points that variable per colour variant at higher specificity,
   so a plain `.fi-btn:focus-visible { box-shadow }` here would never render.
   `.fi-btn` also carries --tw-outline-style:none, i.e. there is no fallback
   outline — the ring IS the focus indicator. Each chain below mirrors the
   vendor selector that sets --tw-ring-color and wins on source order. */
.fi-btn:not(.fi-disabled):not([disabled]):focus-visible,
.fi-btn.fi-outlined.fi-color:not(.fi-disabled):not([disabled]):focus-visible,
.fi-btn:not(.fi-outlined).fi-color:not(label):not(.fi-disabled):not([disabled]):focus-visible,
.fi-icon-btn:not(.fi-disabled):not([disabled]):focus-visible,
.fi-icon-btn.fi-color:not(.fi-disabled):not([disabled]):focus-visible {
    --tw-ring-color: var(--purple);
    box-shadow: var(--eds-focus-ring-btn);
}

/* ── 5. Badges ───────────────────────────────────────────────────────────
   Radius 6 (never a pill), soft tinted surfaces on the warm ramp. The token
   remap in section 0 already lands the palette pairs (shade 50 surface /
   shade 700 ink); these rules pin the neutral + info cases, which Filament
   would otherwise draw from the cool gray/blue ramps. */
.fi-badge {
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0;
}
/* Vendor draws a 1px inset ring on every badge from a neutral --gray-600
   tint; on a tinted EDS badge that reads as a warm-gray outline around the
   colour. The EDS recipe (.fi-eds-tag--applied, .fi-eds-badge in
   eds-panel.css) is a bare tint with a transparent border. */
.fi-badge:not(.fi-color),
.fi-badge.fi-color-gray,
.fi-badge.fi-color-info,
.fi-badge.fi-color-primary,
.fi-badge.fi-color-success,
.fi-badge.fi-color-warning,
.fi-badge.fi-color-danger {
    --tw-ring-color: transparent;
}
.fi-badge:not(.fi-color) {
    background-color: var(--cream2);
    color: var(--ink2);
}
.fi-badge.fi-color-gray {
    background-color: var(--cream2);
    --text: var(--ink2);
    color: var(--ink2);
}
/* `info` and `gray` are chosen deliberately against each other across the
   panel (a dozen tables and stat widgets pick one or the other on the same
   screen), so they must not collapse into one chip. EDS has no blue, so info
   stays warm but takes the OUTLINED recipe — paper on a firm hairline, muted
   ink — reading as quiet context next to gray's filled well. */
.fi-badge.fi-color-info {
    background-color: var(--paper);
    box-shadow: 0 0 0 1px var(--lineS);
    --text: var(--ink3);
    color: var(--ink3);
}
.fi-badge.fi-color-primary {
    background-color: var(--psoft);
    --text: var(--purple7);
}
.fi-badge.fi-color-success {
    background-color: var(--ok-surface);
    --text: var(--ok-ink);
}
.fi-badge.fi-color-warning {
    background-color: var(--warn-surface);
    --text: var(--warn-ink);
}
.fi-badge.fi-color-danger {
    background-color: var(--err-surface);
    --text: var(--err-ink);
}
.fi-badge .fi-badge-label-ctn .fi-badge-label {
    font-weight: 500;
}
button.fi-badge-delete-btn {
    color: currentcolor;
}

/* ── 6. Popovers ─────────────────────────────────────────────────────────
   Popover radius 14, paper on a warm hairline + warm shadow; items in ink2
   with cream-well hover and ink3 icons. Covers table action menus, column
   toggles, filter dropdowns and the topbar user menu — plus every other
   floating surface Filament ships, which otherwise keeps its cool
   `0 10px 15px -3px #0000001a` elevation and --radius-lg corners. */
div.fi-dropdown-panel,
.fi-global-search-results-ctn,
.fi-fo-date-time-picker .fi-fo-date-time-picker-panel,
.fi-fo-color-picker .fi-fo-color-picker-panel,
.fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-menu,
.fi-sc-actions.fi-sticky .fi-ac {
    background-color: var(--paper);
    border-radius: 14px;
    --tw-shadow: 0 0 transparent;
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow-h);
}
div.fi-dropdown-panel {
    padding: 5px;
}
/* The PAGE-level empty state is a card, not a popover — same recipe the
   table card and sections take in sections 2/3 (18px, resting warm shadow).
   The table's own empty state is handled in section 2; this is the one a
   whole page renders when a relation manager or list has no records. */
.fi-empty-state:not(.fi-empty-state-not-contained) {
    background-color: var(--paper);
    border-radius: 18px;
    --tw-shadow: 0 0 transparent;
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow);
}
/* These three mirror vendor's own (0,2,0) descendant chains — a bare class
   here loses the cascade and the pill icon bin / cool ink would survive. */
.fi-empty-state .fi-empty-state-icon-bg {
    background-color: var(--cream2);
    border-radius: 14px;
}
.fi-empty-state .fi-empty-state-icon-bg .fi-icon {
    color: var(--ink3);
}
.fi-empty-state .fi-empty-state-heading {
    font-family: var(--ser);
    font-weight: 430;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.fi-empty-state .fi-empty-state-description {
    color: var(--ink3);
}
/* The rich-editor menu is the one member that draws a real border rather
   than a ring — drop it so it does not double the hairline above. */
.fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-menu {
    border-color: transparent;
}
/* The mobile off-canvas sidebar is a floating surface too (vendor gives it a
   cool `0 20px 25px -5px` drop shadow). */
.fi-sidebar.fi-sidebar-open {
    --tw-shadow: 0 0 transparent;
    box-shadow: 1px 0 40px -12px rgba(26, 23, 20, 0.4);
}
ul.fi-dropdown-list {
    border-radius: 10px;
    padding: 0;
}
.fi-dropdown-list-item {
    border-radius: 10px;
    color: var(--ink2);
}
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background-color: var(--cream2);
    color: var(--ink);
}
/* Muted glyphs on NEUTRAL items only. A `->color('danger')` menu item colours
   its label from the rule below; without the `:not(.fi-color)` guard the icon
   stays ink3 and the row renders a red "Delete" label beside a grey trash. */
.fi-dropdown-list-item:not(.fi-color) > .fi-icon,
.fi-dropdown-list-item:not(.fi-color) .fi-dropdown-list-item-icon {
    color: var(--ink3);
}
/* A coloured menu item colours its LABEL AND its glyph, never one without the
   other — the base `.fi-dropdown-list-item { color: var(--ink2) }` above
   out-ranks vendor's own `--text`, so each variant has to re-state the pair's
   ink here or the row renders an amber pencil beside a dark-ink "Reset
   password" directly under a fully red "Delete". */
.fi-dropdown-list-item.fi-color-danger,
.fi-dropdown-list-item.fi-color-danger > .fi-icon,
.fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-icon {
    color: var(--err-ink);
}
.fi-dropdown-list-item.fi-color-warning,
.fi-dropdown-list-item.fi-color-warning > .fi-icon,
.fi-dropdown-list-item.fi-color-warning .fi-dropdown-list-item-icon {
    color: var(--warn-ink);
}
.fi-dropdown-list-item.fi-color-success,
.fi-dropdown-list-item.fi-color-success > .fi-icon,
.fi-dropdown-list-item.fi-color-success .fi-dropdown-list-item-icon {
    color: var(--ok-ink);
}
.fi-dropdown-list-item.fi-color-primary,
.fi-dropdown-list-item.fi-color-primary > .fi-icon,
.fi-dropdown-list-item.fi-color-primary .fi-dropdown-list-item-icon {
    color: var(--purple7);
}
.fi-dropdown-list-item.fi-color-danger:hover {
    background-color: var(--err-surface);
    color: var(--err-ink);
}
span.fi-dropdown-list-item-label {
    font-weight: 500;
}
div.fi-dropdown-header {
    color: var(--ink3);
    border-bottom: 1px solid var(--line);
}

/* ── 7. Notifications (toasts) ───────────────────────────────────────────
   Paper card, radius 14, warm hairline + shadow, Fraunces title. The toast
   card itself is composed client-side by Alpine (no vendor Blade), so these
   class names come from the shipped notification stylesheet. */
/* The chain mirrors vendor's `.fi-no-notification:not(.fi-inline)` (0,2,0):
   a bare `.fi-no-notification` loses to it and the toast renders at 18. */
.fi-no-notification:not(.fi-inline) {
    background-color: var(--paper);
    border-radius: 14px;
    --tw-shadow: 0 0 transparent;
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow-h);
}
.fi-no-notification-title {
    font-family: var(--ser);
    font-weight: 430;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.fi-no-notification-body,
.fi-no-notification-text {
    color: var(--ink2);
}
.fi-no-notification-date {
    color: var(--ink3);
}
.fi-no-notification-icon.fi-color-success {
    color: var(--ok-ink);
}
.fi-no-notification-icon.fi-color-warning {
    color: var(--warn-ink);
}
.fi-no-notification-icon.fi-color-danger {
    color: var(--err-ink);
}
.fi-no-notification-icon.fi-color-info,
.fi-no-notification-icon.fi-color-primary {
    color: var(--purple7);
}

/* ── 8. Tabs + breadcrumbs + topbar ──────────────────────────────────── */

/* Tabs read as an EDS segmented control: cream track, paper active pill on
   the 10px corner with purple7 text and a soft warm shadow. Filament ships
   two families (legacy fi-tabs and Schema fi-sc-tabs); both use
   .fi-tabs-item / .fi-active for the item + its state. */
/* The chain mirrors vendor's `.fi-tabs:not(.fi-contained)` (0,2,0) — a bare
   `.fi-tabs` loses to it, so the track kept vendor's 18px PAPER surface and
   8px padding and the paper active pill vanished into it. `fi-contained` is
   a different component (a bottom-ruled strip, no track) and is left alone.
   The hairline is a ring, not a border: vendor already draws a ring here, so
   a border would stack a second hairline outside it. --tw-shadow is zeroed
   so vendor's cool elevation is not re-composed into that ring. */
.fi-tabs:not(.fi-contained) {
    background-color: var(--cream);
    border-radius: 14px;
    padding: 4px;
    gap: 2px;
    --tw-shadow: 0 0 transparent;
    box-shadow: 0 0 0 1px var(--line), var(--fi-eds-shadow);
}
.fi-tabs-item {
    border-radius: 10px;
}
.fi-tabs-item .fi-tabs-item-label {
    color: var(--ink2);
    font-weight: 500;
}
.fi-tabs-item:hover {
    background-color: transparent;
}
.fi-tabs-item:hover .fi-tabs-item-label {
    color: var(--ink);
}
.fi-tabs-item.fi-active {
    background-color: var(--paper);
    box-shadow: var(--fi-eds-shadow);
}
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: var(--purple7);
}
.fi-tabs-item > .fi-icon {
    color: var(--ink3);
}

/* Breadcrumbs — muted trail, the current (non-link) crumb in ink. */
nav.fi-breadcrumbs .fi-breadcrumbs-item-label {
    color: var(--ink3);
    font-weight: 500;
}
nav.fi-breadcrumbs a.fi-breadcrumbs-item-label:hover {
    color: var(--purple7);
}
nav.fi-breadcrumbs span.fi-breadcrumbs-item-label {
    color: var(--ink2);
}
nav.fi-breadcrumbs .fi-breadcrumbs-item-separator {
    color: var(--lineS);
}

/* Topbar — cream band on a bottom hairline, EDS global search field. */
nav.fi-topbar,
div.fi-topbar-ctn nav.fi-topbar {
    background-color: var(--cream);
    box-shadow: none;
    border-bottom: 1px solid var(--line);
}
div.fi-global-search-field .fi-input-wrp {
    background-color: var(--paper);
    border-radius: 10px;
}
button.fi-user-menu-trigger span.fi-user-menu-trigger-text {
    color: var(--ink2);
    font-weight: 500;
}

/* ── 9. Auth / login ─────────────────────────────────────────────────────
   Cream canvas, ONE paper card on the 24px hero radius with a warm hairline
   and elevated warm shadow. There is no .fi-simple-page-card, and the card is
   NOT .fi-simple-page either: in this build .fi-simple-main carries the
   surface (radius + 48px padding) and .fi-simple-page nests inside it, so
   .fi-simple-page must stay transparent or the page renders card-in-card. */
div.fi-simple-layout {
    background-color: var(--cream);
}
main.fi-simple-main {
    background-color: var(--paper);
    border-radius: 24px;
    box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(40, 33, 20, 0.08);
}
div.fi-simple-page {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
h1.fi-simple-header-heading {
    font-family: var(--ser);
    font-weight: 430;
    letter-spacing: -0.01em;
    color: var(--ink);
}
p.fi-simple-header-subheading {
    color: var(--ink3);
}

/* ── 10. Widgets ─────────────────────────────────────────────────────────
   Chart/table widget shells are deliberately NOT restyled: `.fi-wi-chart`
   wraps an <x-filament::section> that section 3 already draws as a card, and
   `.fi-wi-table` wraps a `.fi-ta-ctn` that section 2 does — painting the
   outer wrapper too gives every dashboard widget a second hairline offset a
   couple of pixels outside the first. (Stat tiles are themed further up.) */
.fi-wi-chart .fi-wi-chart-filter .fi-input-wrp {
    border-radius: 10px;
}

/* ── 11. Motion cadence + reduced motion ─────────────────────────────────
   Spec rule 7. Vendor ships 75ms colour transitions on the three hover
   surfaces below, which is half the cadence section 4 gives buttons — the
   panel would hover at two speeds. Normalise them to the same 150ms, then
   gate every transition this file touches. The gate sits at the very end of
   the file because these selectors are equal-specificity with the ones that
   set the durations above, so it has to win on source order. (The overlay
   gate stays in section 1 — it needs `!important` to out-rank an Alpine
   inline style, so its position is irrelevant.) */
.fi-ta-row,
.fi-tabs-item,
.fi-dropdown-list-item {
    transition-duration: 150ms;
    transition-timing-function: var(--fi-eds-ease);
}

@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-icon-btn,
    .fi-input-wrp,
    .fi-wi-stats-overview-stat,
    .fi-ta-row,
    .fi-tabs-item,
    .fi-dropdown-list-item {
        transition-duration: 1ms;
    }
    .fi-wi-stats-overview-stat:hover {
        transform: none;
    }
}