/*
 * Frex Core — the panel's design system.
 *
 * Loaded after Filament's stylesheet (AppServiceProvider, HEAD_END) and
 * unlayered, while Filament's compiled CSS sits in @layer components. So ANY
 * rule here beats ANY Filament rule, whatever its specificity. That is what
 * keeps this file short, and also what makes it dangerous: a size or box rule
 * on a wrapper Filament reuses (.fi-no, .fi-input-wrp, .fi-modal-window,
 * .fi-wi-stats-overview, .fi-fo-repeater-item, .fi-ta-ctn) lands on every
 * screen at once. Style the real hooks, never the shared wrappers.
 *
 * The first half redefines Filament's own design tokens: six eleven-step
 * colour ramps and the font stacks. App\Support\Palette registers the same
 * ramps in PHP, so Filament's own contrast choices (which shade carries a
 * badge's text, a link's ink) are made against the colours drawn here.
 * Everything else is a --frex-* token, light in :root, dark in .dark.
 *
 * The system it describes:
 *
 *   Warm neutrals.   Filament ships a chroma-zero grey. A billing panel is
 *                    mostly neutral surface, so a pure grey is most of what
 *                    you see all day, and it reads cold next to a warm brand.
 *                    Every step here carries a trace of the brand hue.
 *
 *   Studio dark.     The dark theme is the delivery's "studio": a graphite
 *                    rail that darkens downward, cards lit from above, a dot
 *                    grid fading under the first cards, a fading orange line
 *                    under the topbar, per-section hues on navigation icons.
 *                    Expressed as tokens and rules on real Filament hooks —
 *                    no attribute-substring or nth-child selectors.
 *
 *   Orange points.   The brand orange marks the active place, focus and the
 *                    one primary action, and may also carry a status (send to
 *                    client, publishing). Red means destructive or late money
 *                    and nothing else.
 *
 *   Money is typography.  Aligned amounts get exact figures (Avenir's digits
 *                    are all 0.5em; kerning off keeps columns pixel-aligned)
 *                    and a weight step. Figures are scoped to money, totals
 *                    and number inputs — not every number in the panel.
 *
 * Brand colours sampled from the master logo artwork:
 *   orange #FC9700 (= --primary-400)   red #CA0000 (= --danger-600)
 */

/* ------------------------------------------------------------------- faces */

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Light.woff2') format('woff2'),
         url('/fonts/avenir/Avenir-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Book.woff2') format('woff2'),
         url('/fonts/avenir/Avenir-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-BookOblique.woff2') format('woff2'),
         url('/fonts/avenir/Avenir-BookOblique.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Medium.woff2') format('woff2'),
         url('/fonts/avenir/Avenir-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Heavy.woff2') format('woff2'),
         url('/fonts/avenir/Avenir-Heavy.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/avenir/Avenir-Black.woff2') format('woff2'),
         url('/fonts/avenir/Avenir-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Persian/Arabic script only. unicode-range means the browser fetches it on
   the first Arabic-script character and never on an English page; Latin and
   every digit stay in Avenir. size-adjust lifts Estedad's small Persian bowls
   to Avenir's x-height (42 -> ~44.5 at 100px). */
@font-face {
    font-family: 'Estedad';
    src: url('/fonts/estedad/Estedad-arabic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    size-adjust: 106%;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                   U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* The brand's second face. Per the brand guide it belongs on documents, not
   on UI chrome, so the panel never sets it — it is declared for the PDF
   templates and for anything that deliberately asks for the serif role. */
@font-face {
    font-family: 'Frex Accent';
    src: url('/fonts/georgia/Georgia-BoldItalic.woff2') format('woff2'),
         url('/fonts/georgia/Georgia-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ====================================================================
   TOKENS
   ==================================================================== */

:root {
    /* --- Filament's six ramps (same values as App\Support\Palette) -------
     * Declared once, here, for both themes. The neutral ramp carries both:
     * 50-300 are the light planes, 400-700 the measured muted-text steps
     * (500 is 4.56-4.8:1 on the light planes), 800-950 the studio graphite
     * every Filament dark surface lands on. */
    --gray-50: oklch(0.9803 0.0062 75.41);   /* #FBF8F4 light rail */
    --gray-100: oklch(0.9596 0.0091 78.28);  /* #F5F1EB light page, hover */
    --gray-200: oklch(0.9117 0.0149 80.71);  /* #E7E1D7 light hairline, active */
    --gray-300: oklch(0.8419 0.0199 80.11);  /* #D2CABD light card edge */
    --gray-400: oklch(0.6996 0.0101 62.52);  /* #A39D98 dark muted, icons */
    --gray-500: oklch(0.5453 0.0118 67.58);  /* #756F69 light muted */
    --gray-600: oklch(0.4678 0.0123 67.52);  /* #5F5953 */
    --gray-700: oklch(0.3872 0.0117 62.31);  /* #49433E */
    --gray-800: oklch(0.2812 0.0039 84.58);  /* #2A2927 studio active */
    --gray-900: oklch(0.2170 0.0038 106.71); /* #1A1A18 studio card */
    --gray-950: oklch(0.1818 0.0020 106.60); /* #121211 studio app */

    /* Brand orange at 400 exactly. 600 is the light theme's action, focus and
       indicator step: white on it is 4.96:1, and it clears 3:1 on every light
       plane, which the bright orange (2.1:1) never could. */
    --primary-50: oklch(0.976 0.018 78);     /* #FEF6EA */
    --primary-100: oklch(0.948 0.04 76);     /* #FEEBD1 light selected wash */
    --primary-200: oklch(0.902 0.078 73);    /* #FFD7A6 */
    --primary-300: oklch(0.845 0.118 69);    /* #FEBE73 */
    --primary-400: oklch(0.7648 0.1723 64.48); /* #FC9700 brand orange */
    --primary-500: oklch(0.69 0.158 59);     /* #E17F15 */
    --primary-600: oklch(0.556 0.136 55);    /* #AE5905 light action + focus */
    --primary-700: oklch(0.48 0.118 50);     /* #904611 light link, accent ink */
    --primary-800: oklch(0.428 0.1 46);      /* #7A3B19 */
    --primary-900: oklch(0.362 0.082 44);    /* #602D16 */
    --primary-950: oklch(0.242 0.056 42);    /* #351508 */

    /* Brand red at 600 exactly. Destructive actions and late money only. */
    --danger-50: oklch(0.972 0.014 20);      /* #FFF2F2 */
    --danger-100: oklch(0.94 0.03 20);       /* #FFE4E3 */
    --danger-200: oklch(0.888 0.058 22);     /* #FFCCC9 */
    --danger-300: oklch(0.808 0.105 24);     /* #FDA59F */
    --danger-400: oklch(0.694 0.165 27);     /* #F26D62 dark late money */
    --danger-500: oklch(0.6 0.2 28);         /* #DE3D34 */
    --danger-600: oklch(0.5269 0.2162 29.23); /* #CA0000 brand red */
    --danger-700: oklch(0.455 0.18 29);      /* #A30D09 */
    --danger-800: oklch(0.39 0.15 29);       /* #830E09 */
    --danger-900: oklch(0.33 0.122 29);      /* #660D09 */
    --danger-950: oklch(0.212 0.082 28);     /* #360202 */

    /* Held back from neon so a paid invoice reads as settled, not celebrated. */
    --success-50: oklch(0.972 0.018 158);
    --success-100: oklch(0.94 0.04 158);
    --success-200: oklch(0.888 0.072 158);
    --success-300: oklch(0.812 0.104 158);
    --success-400: oklch(0.722 0.126 158);
    --success-500: oklch(0.64 0.126 159);
    --success-600: oklch(0.548 0.112 159);
    --success-700: oklch(0.462 0.094 159);
    --success-800: oklch(0.392 0.078 159);
    --success-900: oklch(0.338 0.064 159);
    --success-950: oklch(0.222 0.042 159);

    /* A yellower amber than the brand orange on purpose, so "the main action"
       and "look at this" never read as the same thing. */
    --warning-50: oklch(0.978 0.02 100);
    --warning-100: oklch(0.952 0.046 98);
    --warning-200: oklch(0.91 0.084 96);
    --warning-300: oklch(0.858 0.116 94);
    --warning-400: oklch(0.796 0.132 92);
    --warning-500: oklch(0.722 0.128 90);
    --warning-600: oklch(0.618 0.112 88);
    --warning-700: oklch(0.518 0.094 86);
    --warning-800: oklch(0.432 0.076 84);
    --warning-900: oklch(0.366 0.062 82);
    --warning-950: oklch(0.244 0.042 80);

    /* The only cool hue, desaturated toward the templates' quiet blue. */
    --info-50: oklch(0.972 0.01 248);
    --info-100: oklch(0.94 0.022 248);
    --info-200: oklch(0.888 0.04 248);
    --info-300: oklch(0.812 0.062 249);
    --info-400: oklch(0.712 0.08 250);
    --info-500: oklch(0.618 0.088 251);
    --info-600: oklch(0.532 0.086 252);
    --info-700: oklch(0.452 0.074 252);
    --info-800: oklch(0.386 0.06 252);
    --info-900: oklch(0.334 0.048 252);
    --info-950: oklch(0.226 0.034 252);

    /* --- type ---------------------------------------------------------
     * Avenir for Latin text and every figure; Estedad only for Arabic
     * script (its @font-face is unicode-range limited), so mixed EN/FA
     * strings resolve per glyph with no per-direction override. */
    --font-family: 'Avenir', 'Estedad', 'Segoe UI', 'Tahoma', sans-serif;
    --mono-font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Estedad', monospace;

    /* --- brand constants ------------------------------------------------ */
    --frex-orange: #fc9700;
    --frex-red: #ca0000;

    /* --- planes (light) ------------------------------------------------- */
    --frex-surface: #F5F1EB;
    --frex-canvas-texture: none;
    --frex-rail: #FBF8F4;
    --frex-rail-fill: none;
    --frex-topbar: #FEFCF9;
    --frex-topbar-rule: none;
    --frex-surface-card: #FEFCF9;
    --frex-card-fill: var(--frex-surface-card);
    --frex-card-head-fill: transparent;
    --frex-card-foot-fill: var(--frex-surface-sunken);
    --frex-surface-raised: #FEFCF9;
    --frex-surface-raised-hover: #F5F1EB;
    --frex-surface-modal: #FEFCF9;
    --frex-surface-sunken: #EDE8E0;
    --frex-surface-input: #FEFCF9;
    --frex-surface-hover: #F5F1EB;
    --frex-surface-active: #E7E1D7;
    --frex-surface-select: var(--primary-100);
    --frex-surface-disabled: #EDE8E0;
    --frex-scrim: rgba(45, 34, 20, .34);

    /* --- edges ---------------------------------------------------------- */
    --frex-hairline: #E7E1D7;
    --frex-border: #D2CABD;
    --frex-border-strong: #B0A798;
    --frex-field-edge: #857F79;          /* 3.86 card, 3.24 sunken, 3.04 active: a field, checkbox or off switch is visibly one */
    --frex-field-edge-hover: #6D6455;

    /* --- ink ------------------------------------------------------------ */
    --frex-ink: #221E19;                 /* 16.2:1 on card */
    --frex-ink-2: #544C40;               /* 8.25 */
    --frex-ink-muted: #6D6455;           /* 5.69 card, 4.78 sunken — never on surface-active */
    --frex-ink-faint: #6D6455;
    --frex-ink-placeholder: #6D6455;
    --frex-ink-disabled: #6F6657;        /* 5.4 card, 4.6 sunken: quiet text (dashes, zeros, group labels, card meta) is read, not exempt like a disabled control */
    --frex-ink-accent: var(--primary-700);
    --frex-link: var(--primary-700);
    --frex-link-hover: var(--primary-800);

    /* --- accent ----------------------------------------------------------
     * Indicators (active nav edge, tab underline, pinned edge, focused field
     * edge, active sort icon) use 600 in light: >= 3:1 on every light plane. */
    --frex-accent: var(--primary-600);
    --frex-accent-soft: var(--primary-50);
    --frex-accent-soft-edge: var(--primary-200);
    --frex-accent-glow: none;

    /* --- the action colour -----------------------------------------------
     * Filament fills a primary button with the 400 step and letters it in
     * 950. Orange at that lightness cannot clear 3:1 against a light page
     * however it is tuned, so in light the filled action steps down to 600
     * and takes white (4.96:1). In dark it takes the bright brand orange and
     * near-black lettering (8.72:1). */
    --frex-action: var(--primary-600);
    --frex-action-hover: var(--primary-700);
    --frex-action-press: var(--primary-800);
    --frex-on-action: #ffffff;
    --frex-action-cast: none;
    --frex-danger-action: var(--danger-600);
    --frex-danger-action-hover: var(--danger-700);

    --frex-focus: var(--primary-600);
    --frex-focus-ring: 0 0 0 3px color-mix(in oklab, var(--primary-600) 24%, transparent);
    --frex-money-late: var(--danger-600);

    /* Per-section hues are a studio (dark) effect; light keeps muted icons. */
    --frex-hue-work: var(--frex-ink-muted);
    --frex-hue-clients: var(--frex-ink-muted);
    --frex-hue-billing: var(--frex-ink-muted);
    --frex-hue-sales: var(--frex-ink-muted);
    --frex-hue-settings: var(--frex-ink-muted);
    --frex-row-hue: transparent;

    /* --- depth ---------------------------------------------------------- */
    --frex-shadow-card: 0 1px 2px rgba(74, 56, 32, .07);
    --frex-shadow-raised: 0 10px 22px -8px rgba(74, 56, 32, .16), 0 1px 3px rgba(74, 56, 32, .09);
    --frex-shadow-modal: 0 28px 60px -16px rgba(74, 56, 32, .24), 0 4px 12px rgba(74, 56, 32, .11);
    --frex-shadow-lift: 0 -10px 22px -14px rgba(74, 56, 32, .28);
    --frex-modal-rule: none;

    /* --- shape, rhythm, type scale -------------------------------------- */
    --frex-radius-surface: 0.75rem;      /* 12px containers */
    --frex-radius-control: 0.375rem;     /* 6px controls */
    --frex-gutter: 1.5rem;               /* 24px page padding */
    --frex-topbar-h: 3.5rem;             /* 56px */
    --frex-control-h: 2.125rem;          /* 34px, single-line controls only */
    --frex-row-h: 2.5rem;                /* 40px table rows */
    --frex-head-h: 2.125rem;             /* 34px table head */
    --frex-cell-pad-inline: 0.75rem;
    --frex-text-2xs: 0.6875rem;          /* 11 */
    --frex-text-xs: 0.75rem;             /* 12 */
    --frex-text-sm: 0.8125rem;           /* 13 */
    --frex-text-md: 0.875rem;            /* 14 */
    --frex-text-lg: 1rem;                /* 16 */
    --frex-text-xl: 1.25rem;             /* 20 */
    --frex-lh-cell: 1.35;
    --frex-lh-body: 1.5;
    --frex-weight-figure: 500;
    --frex-weight-figure-total: 700;
    --frex-dur-fast: 120ms;
    --frex-dur-base: 170ms;
    --frex-ease-out: cubic-bezier(.22, .61, .36, 1);
    --frex-opacity-disabled: 0.55;
}

/* Studio dark. Filament puts .dark on <html>. Only --frex-* tokens here: the
   ramps above already carry both themes. */
.dark {
    --frex-surface: #121211;
    --frex-canvas-texture: radial-gradient(circle, rgba(255, 244, 230, .09) 1px, transparent 1.4px);
    --frex-rail: #0D0D0C;
    --frex-rail-fill: linear-gradient(180deg, #171615 0%, #0E0E0D 36%, #0B0B0A 100%);
    --frex-topbar: #141413;
    --frex-topbar-rule: linear-gradient(90deg, transparent 0, rgba(252, 151, 0, .55) 16%, rgba(252, 151, 0, .12) 55%, transparent 100%);
    --frex-surface-card: #1A1A18;
    --frex-card-fill: linear-gradient(180deg, #1C1C1A 0%, #181817 100%);
    --frex-card-head-fill: linear-gradient(180deg, #171615, #141312);
    --frex-card-foot-fill: linear-gradient(180deg, #191817, #161514);
    --frex-surface-raised: #242321;
    --frex-surface-raised-hover: #2E2D2A;
    --frex-surface-modal: #1E1D1B;
    --frex-surface-sunken: #151514;
    --frex-surface-input: #10100F;
    --frex-surface-hover: #21201E;
    --frex-surface-active: #2A2927;
    --frex-surface-select: color-mix(in oklab, var(--frex-orange) 12%, #1A1A18);
    --frex-surface-disabled: #151514;
    --frex-scrim: rgba(10, 8, 6, .66);

    --frex-hairline: rgba(255, 248, 240, .06);
    --frex-border: rgba(255, 248, 240, .095);
    --frex-border-strong: rgba(255, 248, 240, .17);
    /* Not the studio's quiet .09 edge: the input well (#10100F) is only
       1.1:1 from the card, so the edge is what shows a field is there.
       Composited over the well it is 3.69 against the well, 3.31 card,
       3.23 modal, 3.04 raised; as the off-switch track 3.67 on the card. */
    --frex-field-edge: rgba(255, 248, 240, .40);
    --frex-field-edge-hover: rgba(255, 248, 240, .55);

    --frex-ink: #F2EEE9;
    --frex-ink-2: #C3BEB7;
    --frex-ink-muted: #968F87;
    --frex-ink-faint: #8E877E;
    --frex-ink-placeholder: #8E8881;
    --frex-ink-disabled: #86817B;
    --frex-ink-accent: #FFB547;
    --frex-link: var(--primary-400);
    --frex-link-hover: var(--primary-300);

    --frex-accent: #FFA31A;
    --frex-accent-soft: linear-gradient(90deg, rgba(252, 151, 0, .24) 0%, rgba(252, 151, 0, .06) 100%);
    --frex-accent-soft-edge: rgba(252, 151, 0, .18);
    --frex-accent-glow: 0 0 10px 1px rgba(255, 163, 26, .55);

    --frex-action: var(--primary-400);
    --frex-action-hover: #FFAB24;
    --frex-action-press: var(--primary-500);
    --frex-on-action: #110F0C;
    --frex-action-cast: 0 8px 18px -10px rgba(252, 151, 0, .65);
    --frex-danger-action: var(--danger-600);
    --frex-danger-action-hover: var(--danger-500);

    --frex-focus: #FFA31A;
    --frex-focus-ring: 0 0 0 3px rgba(252, 151, 0, .16);
    --frex-money-late: var(--danger-400);

    --frex-hue-work: #8DB4DD;
    --frex-hue-clients: #6FCB94;
    --frex-hue-billing: #FFAE3D;
    --frex-hue-sales: #E8C860;
    --frex-hue-settings: var(--frex-ink-muted);
    --frex-row-hue: var(--frex-hue-work);

    --frex-shadow-card: inset 0 1px 0 rgba(255, 248, 240, .05), 0 1px 2px rgba(0, 0, 0, .35), 0 16px 32px -24px rgba(0, 0, 0, .9);
    --frex-shadow-raised: 0 10px 26px -8px rgba(0, 0, 0, .66), 0 2px 6px rgba(0, 0, 0, .44);
    --frex-shadow-modal: inset 0 1px 0 rgba(255, 248, 240, .06), 0 30px 60px -20px rgba(0, 0, 0, .85);
    --frex-shadow-lift: 0 -14px 28px -14px rgba(0, 0, 0, .75);
    --frex-modal-rule: linear-gradient(90deg, transparent, rgba(252, 151, 0, .55), transparent);
}

/* Right-to-left: gradients that run along the inline axis flip as tokens;
   Persian wants taller lines. */
html[dir='rtl'] {
    --frex-lh-cell: 1.6;
    --frex-lh-body: 1.7;
}

html.dark[dir='rtl'] {
    --frex-accent-soft: linear-gradient(270deg, rgba(252, 151, 0, .24) 0%, rgba(252, 151, 0, .06) 100%);
    --frex-topbar-rule: linear-gradient(270deg, transparent 0, rgba(252, 151, 0, .55) 16%, rgba(252, 151, 0, .12) 55%, transparent 100%);
}

/* ====================================================================
   BASE
   ==================================================================== */

/* Filament already reads --font-family; this is the safety net. */
body {
    font-family: var(--font-family);
}

.fi-body {
    background-color: var(--frex-surface);
    color: var(--frex-ink);
}

/* ====================================================================
   CHROME — rail, topbar, page frame
   ==================================================================== */

/* The rail runs the full height with its own 56px logo header; the topbar
   starts beside it. Filament offsets the rail below its 4rem topbar; we pull
   it up instead. Desktop only: below 64rem Filament's off-canvas rail stays. */
@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-sidebar {
        inset-block-start: 0;
        block-size: 100dvh;
        margin-block-start: calc(-1 * var(--frex-topbar-h));
    }

    .fi-body-has-topbar .fi-sidebar-header {
        display: flex;
    }

    .fi-body-has-topbar .fi-topbar-ctn {
        margin-inline-start: var(--sidebar-width);
    }

    .fi-body-has-sidebar-collapsible-on-desktop:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar-ctn {
        margin-inline-start: var(--collapsed-sidebar-width);
    }

    /* Filament 5.7.5 prints --collapsed-sidebar-width but never applies it. */
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
        inline-size: var(--collapsed-sidebar-width);
    }

    /* The logo lives in the rail. */
    .fi-topbar-start > a:has(> .fi-logo) {
        display: none;
    }
}

.fi-main-ctn {
    min-block-size: calc(100dvh - var(--frex-topbar-h));
}

/* --- rail ---------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--frex-rail);
    background-image: var(--frex-rail-fill);
    border-inline-end: 1px solid var(--frex-hairline);
}

/* Filament gives the header a white plane and a ring when there is a topbar. */
.fi-sidebar-header {
    block-size: var(--frex-topbar-h);
    justify-content: flex-start;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--frex-hairline);
    background-color: transparent;
    box-shadow: none;
}

.fi-sidebar-header .fi-logo {
    margin-inline-start: 0.25rem;
}

/* Warm glow behind the logo (studio). */
.dark .fi-sidebar-header {
    background: radial-gradient(150px 46px at 28% 50%, rgba(252, 151, 0, .11), transparent 70%);
}

html.dark[dir='rtl'] .fi-sidebar-header {
    background: radial-gradient(150px 46px at 72% 50%, rgba(252, 151, 0, .11), transparent 70%);
}

.fi-sidebar-nav {
    padding: 0.75rem 0.625rem;
    row-gap: 1rem;
}

.fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 1rem;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    row-gap: 2px;
}

.fi-sidebar-group-btn {
    padding: 0 0.625rem;
    margin-block-end: 0.375rem;
    column-gap: 0.375rem;
}

.fi-sidebar-group-label {
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frex-ink-disabled);
}

.fi-sidebar-group-collapse-btn .fi-icon {
    inline-size: 13px;
    block-size: 13px;
    color: var(--frex-ink-disabled);
}

.fi-sidebar-item-btn {
    position: relative;
    min-block-size: 2.125rem;
    padding: 0 0.625rem;
    column-gap: 0.625rem;
    border-radius: var(--frex-radius-control);
}

.fi-sidebar-item-btn > .fi-sidebar-item-icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--frex-nav-hue, var(--frex-ink-muted));
}

.fi-sidebar-item-label {
    font-size: var(--frex-text-md);
    font-weight: 400;
    color: var(--frex-ink-2);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: var(--frex-surface-hover);
}

.dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 248, 240, .055);
}

/* Per-group hue (studio), attached in PHP with extraSidebarAttributes(). In
   light every --frex-hue-* resolves to the muted ink. */
.fx-nav-work { --frex-nav-hue: var(--frex-hue-work); }
.fx-nav-clients { --frex-nav-hue: var(--frex-hue-clients); }
.fx-nav-billing { --frex-nav-hue: var(--frex-hue-billing); }
.fx-nav-sales { --frex-nav-hue: var(--frex-hue-sales); }
.fx-nav-settings { --frex-nav-hue: var(--frex-hue-settings); }

/*
 * The current page. Filament v5 marks it with .fi-active on the <li> and
 * aria-current on the link (never .fi-sidebar-item-active, which it does not
 * emit). Styling the accessibility attribute for the edge is the honest
 * selector: it is true exactly when the item is the current page.
 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--frex-accent-soft);
    box-shadow: inset 0 0 0 1px var(--frex-accent-soft-edge);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--frex-ink-accent);
    font-weight: 500;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon {
    color: var(--frex-ink-accent);
}

.fi-sidebar-item-btn[aria-current='page']::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.625rem;
    inset-block: 7px;
    inline-size: 2px;
    border-radius: 2px;
    background: var(--frex-accent);
    box-shadow: var(--frex-accent-glow);
}

/* Count chips: neutral ink on the active plane (muted would be 4.48:1 there);
   only danger-coloured counts — late money — stay red. */
.fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    min-inline-size: 18px;
    block-size: 18px;
    min-block-size: 0;
    padding-inline: 5px;
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    font-variant-numeric: proportional-nums;
    border-radius: 4px;
    color: var(--frex-ink);
    background: var(--frex-surface-active);
    box-shadow: inset 0 0 0 1px var(--frex-border-strong);
}

.fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color-danger {
    color: var(--danger-700);
    background: var(--danger-50);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}

.dark .fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color-danger {
    color: var(--danger-300);
    background: color-mix(in oklab, var(--danger-600) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-400) 35%, transparent);
}

/* Settings children: indented under their parent with one hairline. */
.fi-sidebar-sub-group-items {
    margin-inline-start: 1.1875rem;
    padding-inline-start: 0.8125rem;
    border-inline-start: 1px solid var(--frex-border);
}

.fi-sidebar-sub-group-items .fi-sidebar-item-btn {
    min-block-size: 1.875rem;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-muted);
}

.fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    display: none;
}

/* A current child marks the hairline itself rather than a second line
   beside it. */
.fi-sidebar-sub-group-items .fi-sidebar-item-btn[aria-current='page']::before {
    inset-inline-start: calc(-0.8125rem - 1px);
}

/* Collapsed rail (60px): icons centred. */
@media (min-width: 64rem) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        inline-size: 2.75rem;
        justify-content: center;
        padding-inline: 0;
        column-gap: 0;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn[aria-current='page']::before {
        inset-inline-start: -0.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        justify-content: center;
        padding-inline: 0;
    }
}

.fx-rail-mark {
    block-size: 1.5rem;
    inline-size: auto;
    margin-inline: auto;
}

/* Footer = the user block. */
.fi-sidebar-footer {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.dark .fi-sidebar-footer {
    background: rgba(255, 248, 240, .025);
}

.fi-user-menu-trigger {
    column-gap: 0.625rem;
}

.fi-user-menu-trigger .fi-avatar {
    inline-size: 1.75rem;
    block-size: 1.75rem;
}

.fi-user-menu-trigger-text {
    font-size: var(--frex-text-sm);
    font-weight: 500;
    color: var(--frex-ink);
}

/* --- topbar -------------------------------------------------------------- */

/* A hairline, and in dark a fading orange line along it (studio). */
.fi-topbar {
    position: relative;
    min-block-size: var(--frex-topbar-h);
    padding-inline: 1.5rem;
    column-gap: 1rem;
    background: var(--frex-topbar);
    box-shadow: none;
    border-block-end: 1px solid var(--frex-hairline);
}

.fi-topbar::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 1px;
    background: var(--frex-topbar-rule);
    pointer-events: none;
}

.fi-topbar-start {
    margin-inline-end: 0;
}

.fi-topbar-end {
    flex: 1;
    margin-inline-start: 0;
    column-gap: 0.5rem;
}

.fx-topbar-spacer {
    flex: 1;
}

.fi-topbar .fi-icon-btn {
    color: var(--frex-ink-muted);
}

/* Filament's -8px bleed on an icon button let the bell's 36px box overlap the
   language button's by 6px (two click targets on top of each other) and put
   the unread count on top of the language glyph. Each button is its own box,
   and the bell, which carries the count, leaves it room beside it. */
.fi-topbar-end .fi-icon-btn {
    margin: 0;
}

.fi-topbar-end .fi-no-database {
    margin-inline-end: 0.375rem;
}

.fi-topbar .fi-icon-btn:hover {
    color: var(--frex-ink);
    background: var(--frex-surface-hover);
}

.fx-company-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    block-size: var(--frex-control-h);
    max-inline-size: 16rem;
    padding-inline: 0.625rem;
    border: 1px solid var(--frex-border);
    border-radius: var(--frex-radius-control);
    background: transparent;
    color: var(--frex-ink);
    font-size: var(--frex-text-md);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.fx-company-trigger:hover {
    border-color: var(--frex-border-strong);
    background: var(--frex-surface-hover);
}

.fx-company-trigger__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-company-trigger__icon,
.fx-company-trigger__chev {
    flex-shrink: 0;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--frex-ink-muted);
}

.fi-global-search {
    inline-size: 13.5rem;
}

.fi-global-search-results-ctn {
    background: var(--frex-surface-raised);
    box-shadow: var(--frex-shadow-raised);
    border: 1px solid var(--frex-border);
    border-radius: var(--frex-radius-surface);
}

.fi-dropdown-list-item.fx-current {
    background: var(--frex-surface-active);
    color: var(--frex-ink);
    font-weight: 500;
}

/* --- page frame ---------------------------------------------------------- */

/* Dot grid fading out under the first cards (studio). */
.dark .fi-main-ctn {
    background-image: linear-gradient(180deg, rgba(18, 18, 17, 0) 0, rgba(18, 18, 17, .55) 200px, #121211 440px),
                      var(--frex-canvas-texture);
    background-size: 100% 100%, 22px 22px;
    background-attachment: local, local;
}

.fi-main {
    padding-inline: var(--frex-gutter);
}

.fi-page-header-main-ctn {
    row-gap: 1rem;
    padding-block: 1.25rem 1.75rem;
}

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

.fi-header-heading {
    font-size: var(--frex-text-xl);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--frex-ink);
}

.fi-header-subheading {
    margin-block-start: 0.25rem;
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-muted);
}

.fi-header.fi-header-has-breadcrumbs .fi-header-actions-ctn {
    margin-block-start: 1.25rem;
}

.fi-breadcrumbs {
    margin-block-end: 0.375rem;
}

.fi-breadcrumbs ol li {
    font-size: var(--frex-text-xs);
    font-weight: 400;
    color: var(--frex-ink-muted);
}

.fi-breadcrumbs ol li:last-child {
    color: var(--frex-ink-2);
    font-weight: 500;
}

.fi-breadcrumbs ol li .fi-icon {
    inline-size: 0.8125rem;
    block-size: 0.8125rem;
    color: var(--frex-ink-disabled);
}

/* Sign-in (and the other simple pages): the same card as everywhere else. */
.fi-simple-main {
    background: var(--frex-card-fill);
    border-radius: var(--frex-radius-surface);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
}

/* Sign-in card: the mark sits above the form, so give it room. Filament
   prints the panel's logo height inline, hence the one !important. */
.fi-simple-main .fi-logo {
    height: 3.25rem !important;
    margin-inline: auto;
}

/* ====================================================================
   FOCUS — one treatment, per theme (light 600: >= 3.76:1 on every plane)
   ==================================================================== */

:where(a, button, [role='button'], [tabindex], .fi-tabs-item, .fi-sidebar-item-btn, .fi-btn, .fi-icon-btn, .fi-link):focus-visible {
    outline: 2px solid var(--frex-focus);
    outline-offset: 2px;
}

.fi-checkbox-input:focus-visible,
.fi-toggle:focus-visible,
.fi-fo-radio input:focus-visible {
    outline: 2px solid var(--frex-focus);
    outline-offset: 2px;
}

/* ====================================================================
   BUTTONS
   ==================================================================== */

.fi-btn {
    min-block-size: var(--frex-control-h);
    padding-block: 0;
    border-radius: var(--frex-radius-control);
    font-weight: 500;
}

.fi-btn.fi-size-sm,
.fi-btn.fi-size-xs {
    min-block-size: 1.75rem;
    font-size: var(--frex-text-xs);
}

/* Primary, filled. Filament's outlined variant is .fi-outlined; colour the
   button and its icon (Filament colours the icon separately). */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--frex-action);
    color: var(--frex-on-action);
    box-shadow: var(--frex-action-cast);
}

.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon {
    color: var(--frex-on-action);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background: var(--frex-action-hover);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):active {
    background: var(--frex-action-press);
}

/* Danger, filled. */
.fi-btn.fi-color-danger:not(.fi-outlined) {
    background: var(--frex-danger-action);
    color: #fff;
}

.fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon {
    color: #fff;
}

.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background: var(--frex-danger-action-hover);
}

/* Secondary = Filament's gray, which carries no colour class at all. */
.fi-btn:not(.fi-outlined):not(.fi-color) {
    background: var(--frex-surface-card);
    color: var(--frex-ink);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

.fi-btn:not(.fi-outlined):not(.fi-color) > .fi-icon {
    color: var(--frex-ink-muted);
}

.fi-btn:not(.fi-outlined):not(.fi-color):not(.fi-disabled):not([disabled]):hover {
    background: var(--frex-surface-hover);
    box-shadow: inset 0 0 0 1px var(--frex-border-strong);
}

/* Outlined, any colour: Filament's ink stays, only the edge and plane. */
.fi-btn.fi-outlined {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--frex-border-strong);
}

.fi-btn.fi-outlined.fi-color {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* Icon buttons: quiet until hovered. */
.fi-icon-btn {
    border-radius: var(--frex-radius-control);
    color: var(--frex-ink-muted);
}

.fi-icon-btn:hover {
    background: var(--frex-surface-hover);
    color: var(--frex-ink);
}

.fi-icon-btn.fi-color-danger {
    color: var(--frex-money-late);
}

.fi-link {
    font-weight: 500;
}

.fi-link:not(.fi-color) {
    color: var(--frex-link);
}

/* One disabled opacity everywhere. */
.fi-btn.fi-disabled:not(.fi-force-enabled),
.fi-btn[disabled]:not(.fi-force-enabled),
.fi-icon-btn[disabled] {
    opacity: var(--frex-opacity-disabled);
}

/* ====================================================================
   BADGES — control radius, no pills
   ==================================================================== */

.fi-badge {
    min-block-size: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--frex-radius-control);
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: proportional-nums;
}

.fi-badge:not(.fi-color) {
    background: var(--frex-surface-active);
    color: var(--frex-ink-2);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

/* Orange may be a status; keep it apart from the amber warning by hue step. */
.fi-badge.fi-color-primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.dark .fi-badge.fi-color-primary {
    background: color-mix(in oklab, var(--primary-400) 14%, transparent);
    color: var(--primary-300);
}

.dark .fi-badge.fi-color-warning {
    color: var(--warning-300);
}

.fi-badge > .fi-icon {
    inline-size: 0.75rem;
    block-size: 0.75rem;
}

/* ====================================================================
   TABS — an underline row (list pages) and contained (inside forms)
   ==================================================================== */

/* List-page tabs render without .fi-contained, as a white pill box: that box
   is what hid every underline before.
   The strip scrolls sideways in a narrow window (Filament's overflow-x), and
   a scroller clips whatever sticks out of it, which cut the top, bottom and
   first-tab edges off the 2px focus ring. So the strip keeps 4px of room on
   every side, pulled back by negative margins so the tabs still line up with
   the title, and its rule is a 1px background line across the content width
   only (a border would run 4px past the card on each side). */
.fi-tabs:not(.fi-contained) {
    --fx-tabs-rule: var(--frex-border);
    max-inline-size: none;
    margin: -0.25rem -0.25rem 0;
    padding: 0.25rem;
    justify-content: flex-start;
    column-gap: 1.25rem;
    border-radius: 0;
    background: linear-gradient(var(--fx-tabs-rule), var(--fx-tabs-rule)) no-repeat 0.25rem 100% / calc(100% - 0.5rem) 1px;
    box-shadow: none;
}

.dark .fi-tabs:not(.fi-contained) {
    --fx-tabs-rule: rgba(255, 248, 240, .08);
}

.fi-tabs.fi-contained {
    column-gap: 1.25rem;
}

.fi-tabs-item {
    position: relative;
    min-block-size: 2.375rem;
    padding-inline: 0;
    padding-block: 0;
    border-radius: 0;
    background: none;
    color: var(--frex-ink-muted);
}

.fi-tabs-item:hover {
    background: none;
    color: var(--frex-ink);
}

.fi-tabs-item-label {
    font-size: var(--frex-text-md);
    font-weight: 500;
    color: inherit;
}

/* v5 marks the selected tab with .fi-active. */
.fi-tabs-item.fi-active {
    color: var(--frex-ink);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: inherit;
    font-weight: 500;
}

.fi-tabs-item.fi-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 2px;
    background: var(--frex-accent);
}

/* On the list strip the rule sits under the 4px of focus room. */
.fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active::after {
    inset-block-end: -0.25rem;
}

.dark .fi-tabs-item.fi-active {
    color: var(--frex-hue-billing);
}

.fi-tabs-item .fi-badge {
    min-block-size: 1.125rem;
    padding-inline: 0.3125rem;
    border-radius: 4px;
}

/* A count is a count: neutral, as the templates draw it. This is Filament's
   default colour only; a tab whose count PHP colours on purpose (the
   proposals "due" nudges, warning) keeps its colour. */
.fi-tabs-item .fi-badge.fi-color-primary {
    background: var(--frex-surface-active);
    color: var(--frex-ink-2);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

/* ====================================================================
   TABLES — the screen this system is used on most
   ==================================================================== */

/* Never overflow on .fi-ta-ctn: Filament leaves it unclipped for its
   dropdowns. */
.fi-ta-ctn {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
}

.dark .fi-ta-ctn {
    box-shadow: 0 0 0 1px rgba(255, 248, 240, .08), var(--frex-shadow-card);
}

.fi-ta-header-toolbar {
    padding: 0.625rem 0.75rem;
    background: var(--frex-card-head-fill);
    border-block-end-color: var(--frex-hairline);
}

.fi-ta-header-toolbar > * {
    min-block-size: var(--frex-control-h);
}

/* Filter and column-manager triggers: bordered squares at control height,
   level with the 34px search field (the templates' outlined icon button).
   Filament gives every icon button a -8px margin so it can bleed into its
   padding; in the toolbar that margin shrank the 16px gap between neighbours
   to nothing and pushed the last button 8px past the toolbar's own padding.
   With the margin gone each trigger is its own 34px box. */
.fi-ta-header-toolbar .fi-icon-btn {
    margin: 0;
    inline-size: var(--frex-control-h);
    block-size: var(--frex-control-h);
    background: var(--frex-surface-card);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

/* The end of the toolbar is one row: search, filters, columns, 8px apart, and
   the last button sits the toolbar's 12px padding from the card's edge. The
   row is an unclassed div in Filament's markup, so it is found by what it
   holds. */
.fi-ta-header-toolbar > div:has(> :is(.fi-ta-search-field, .fi-ta-filters-dropdown, .fi-ta-col-manager-dropdown)) {
    column-gap: 0.5rem;
}

/* The active-filter count hangs off the button's top corner, inside the
   toolbar's own padding, so it never lands on the column button beside it. */
.fi-ta-header-toolbar .fi-icon-btn-badge-ctn {
    inset-inline-start: auto;
    inset-inline-end: -0.25rem;
    inset-block-start: -0.375rem;
    translate: none;
}

.fi-ta-header-toolbar .fi-icon-btn:hover {
    background: var(--frex-surface-hover);
    box-shadow: inset 0 0 0 1px var(--frex-border-strong);
}

/* Filament prints the active-filter count even when it is 0. Every filter
   in this app indicates itself in the "Active filters" row, so with no row
   there is nothing to count. */
.fi-ta-ctn:not(:has(.fi-ta-filter-indicators)) .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn {
    display: none;
}

.fi-ta-selection-indicator {
    padding-inline: 0.75rem;
    background: var(--frex-surface-select);
    font-size: var(--frex-text-sm);
    color: var(--frex-ink);
}

/* "Active filters" row. */
.fi-ta-filter-indicators {
    padding-inline: 0.75rem;
    background: var(--frex-surface-sunken);
    border-color: var(--frex-hairline);
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-2);
}

/* The head row's plane and rule, on every head cell — the checkbox and
   actions columns are not .fi-ta-header-cell and would otherwise show
   Filament's own row tint. */
.fi-ta-table > thead > tr {
    background: var(--frex-surface-sunken);
}

.fi-ta-table > thead > tr > th {
    background: var(--frex-surface-sunken);
    border-block-end: 1px solid var(--frex-border);
}

.dark .fi-ta-table > thead > tr,
.dark .fi-ta-table > thead > tr > th {
    background: linear-gradient(180deg, #151514, #131312);
    border-block-end-color: rgba(255, 248, 240, .08);
}

/* Column head: 34px, 11px/500, sentence case (the templates' .fx-th). The old
   uppercase "label voice" is retired for table heads; nav group labels keep
   it. */
.fi-ta-header-cell {
    padding-block: 0.5625rem;
    padding-inline: var(--frex-cell-pad-inline);
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--frex-ink-faint);
    background: var(--frex-surface-sunken);
    border-block-end: 1px solid var(--frex-border);
}

.dark .fi-ta-header-cell {
    background: linear-gradient(180deg, #151514, #131312);
    border-block-end-color: rgba(255, 248, 240, .08);
    letter-spacing: .03em;
}

.fi-ta-header-cell:first-of-type {
    padding-inline-start: var(--frex-cell-pad-inline);
}

.fi-ta-header-cell:last-of-type {
    padding-inline-end: var(--frex-cell-pad-inline);
}

/* 14px sort icon keeps the head at 34px (the 20px one made it 38.5). */
.fi-ta-header-cell-sort-btn > .fi-icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    color: var(--frex-ink-muted);
}

/* Sorted column: Filament's class, not aria-sort (every sortable head has it). */
.fi-ta-header-cell.fi-ta-header-cell-sorted {
    color: var(--frex-ink);
}

.fi-ta-header-cell.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn > .fi-icon {
    color: var(--frex-accent);
}

/*
 * Rows: 40px at 13px. The padding lives on the text element, not the cell
 * (Filament pads .fi-ta-text itself). An invoice list is scanned rather than
 * read — who owes, how much, how late — so density is the point.
 */
.fi-ta-cell {
    padding: 0;
}

.fi-ta-cell:first-child {
    padding-inline-start: 0.25rem;
}

.fi-ta-cell:last-child {
    padding-inline-end: 0.25rem;
}

/* The checkbox column: Filament pads it 16px top and bottom, which alone
   would make every selectable row 48px. */
.fi-ta-cell.fi-ta-selection-cell {
    padding-block: 0;
    padding-inline: 0.75rem;
}

.fi-ta-cell.fi-ta-selection-cell:first-of-type {
    padding-inline-start: 1rem;
}

.fi-ta-text:not(.fi-inline),
.fi-ta-icon:not(.fi-inline),
.fi-ta-color:not(.fi-inline) {
    padding-block: 0.6875rem;
    padding-inline: var(--frex-cell-pad-inline);
}

.fi-ta-text.fi-ta-text-has-badges:not(.fi-inline) {
    padding-block: 0.5625rem;
}

.fi-ta-icon:not(.fi-inline) {
    padding-block: 0.5rem;
}

.fi-ta-icon .fi-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

.fi-ta-text-item {
    font-size: var(--frex-text-sm);
    line-height: var(--frex-lh-cell);
}

/* Ink only the uncoloured items: a ->color() column (overdue dates, a figure in info blue) carries
   its own hue through Filament's .fi-color rule, in both themes. */
.fi-ta-text-item:not(.fi-color) {
    color: var(--frex-ink);
}

/* A single-line cell stays one line: past 22rem it ends in an ellipsis (the
   templates' .fx-cell-clip) instead of widening the table beyond its card.
   Two-line columns are left alone: one PHP marks ->wrap(), and one with a
   ->description() line (a different element, .fi-ta-text-has-descriptions)
   are multi-line on purpose, and their screens decide. Filament draws the
   text as a -webkit-box for its line clamp; nothing here clamps without
   wrapping, so a plain block carries the ellipsis. */
.fi-ta-text.fi-ta-text-item:not(.fi-wrapped, .fi-ta-text-has-badges) {
    display: block;
    max-inline-size: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In a column wider than the cap, an end-aligned figure still ends at the
   cell's end. */
.fi-ta-text.fi-ta-text-item.fi-align-end:not(.fi-wrapped, .fi-ta-text-has-badges) {
    margin-inline-start: auto;
}

/* Where the browser can say "its own width, at most 22rem", the cap only
   limits how wide the text asks its column to be: a column the table makes
   wider anyway (spare width is shared out) shows the text in full instead
   of cutting it at 22rem. */
@supports (inline-size: calc-size(max-content, size)) {
    .fi-ta-text.fi-ta-text-item:not(.fi-wrapped, .fi-ta-text-has-badges) {
        inline-size: calc-size(max-content, min(size, 22rem));
        min-inline-size: 100%;
        max-inline-size: none;
    }
}

/* The column description — "13 days overdue" under a due date. v5 calls it
   .fi-ta-text-description. */
.fi-ta-text-description {
    font-size: var(--frex-text-xs);
    line-height: 1.35;
    color: var(--frex-ink-muted);
}

/* The em-dash placeholder kept a 24px line, which made its row 46px. */
.fi-ta-placeholder {
    font-size: var(--frex-text-sm);
    line-height: var(--frex-lh-cell);
    color: var(--frex-ink-disabled);
    opacity: 1;
}

.fi-ta-row {
    border-block-start: 1px solid var(--frex-hairline);
}

/* Hover: a neutral plane in light; in dark a hue edge per resource (studio). */
.fi-ta-row:hover {
    background: var(--frex-surface-hover);
}

.dark .fi-ta-row:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--frex-row-hue) 8%, transparent), rgba(255, 248, 240, .02) 45%);
    box-shadow: inset 2px 0 0 var(--frex-row-hue);
}

html.dark[dir='rtl'] .fi-ta-row:hover {
    background: linear-gradient(270deg, color-mix(in srgb, var(--frex-row-hue) 8%, transparent), rgba(255, 248, 240, .02) 45%);
    box-shadow: inset -2px 0 0 var(--frex-row-hue);
}

/* Selection is a wash plus an edge, so it never reads as hover. */
.fi-ta-row.fi-selected {
    background: var(--frex-surface-select);
}

.fi-ta-row.fi-selected > .fi-ta-cell:first-child {
    box-shadow: inset 2px 0 0 var(--frex-accent);
}

html[dir='rtl'] .fi-ta-row.fi-selected > .fi-ta-cell:first-child {
    box-shadow: inset -2px 0 0 var(--frex-accent);
}

/* Row flags, attached in PHP with Table::recordClasses(). */
.fi-ta-row.fx-row-pinned > .fi-ta-cell:first-child {
    box-shadow: inset 2px 0 0 var(--frex-accent);
}

.fi-ta-row.fx-row-late > .fi-ta-cell:first-child {
    box-shadow: inset 2px 0 0 var(--frex-money-late);
}

html[dir='rtl'] .fi-ta-row.fx-row-pinned > .fi-ta-cell:first-child {
    box-shadow: inset -2px 0 0 var(--frex-accent);
}

html[dir='rtl'] .fi-ta-row.fx-row-late > .fi-ta-cell:first-child {
    box-shadow: inset -2px 0 0 var(--frex-money-late);
}

/* Studio row hue per resource (work items keep the default blue). */
.fi-resource-clients { --frex-row-hue: var(--frex-hue-clients); }
.fi-resource-invoices,
.fi-resource-quotes { --frex-row-hue: var(--frex-hue-billing); }
.fi-resource-proposals { --frex-row-hue: var(--frex-hue-sales); }

/* Amounts: end-aligned cells are money. Exact figures (Avenir's digits are all
   0.5em; kerning off removes the 1-1 pair) and a weight step, because the
   amount is what the row is about. */
.fi-ta-cell.fi-align-end .fi-ta-text-item,
th.fi-ta-header-cell.fi-align-end {
    white-space: nowrap;
}

.fi-ta-cell.fi-align-end .fi-ta-text-item {
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    font-weight: var(--frex-weight-figure);
}

.fx-late .fi-ta-text-item,
.fi-ta-text-item.fx-late {
    color: var(--frex-money-late);
}

/* Row actions, inside the cell only (the toolbar has its own .fi-ta-actions). */
.fi-ta-cell .fi-ta-actions {
    justify-content: flex-end;
    padding-inline: 0.5rem;
}

/*
 * List pages fit the window, and only the rows scroll — inside the card,
 * under a sticky column head. The page is a column no taller than the
 * space under the topbar. Every box from the page down to the rows is a
 * column that may shrink (min-block-size: 0); everything beside them — the
 * page header, the tab strip, the toolbar, the "Active filters" row, the
 * pagination — keeps its natural height. So whatever sits above the table,
 * the rows take what is left, with no constant to keep in step and no second
 * scroll on the page. In a window too short for that (under 34rem below the
 * topbar; 639px gives 36.4rem), the page may grow to 34rem and scrolls as a
 * whole, with the card intact.
 */
@media (min-width: 64rem) {
    .fi-resource-list-records-page {
        display: flex;
        flex-direction: column;
        max-block-size: max(100dvh - var(--frex-topbar-h), 34rem);
    }

    .fi-resource-list-records-page :is(.fi-page-header-main-ctn, .fi-page-main, .fi-page-content, .fi-sc, .fi-grid-col, .fi-sc-component, .fi-ta, .fi-ta-main):has(.fi-ta-content-ctn) {
        display: flex;
        flex-direction: column;
        min-block-size: 0;
    }

    /* The card itself stays a row (Filament's filter panel can sit beside
       the table); it only has to be allowed to shrink. */
    .fi-resource-list-records-page .fi-ta-ctn {
        min-block-size: 0;
    }

    /* At least 12rem of rows — or all of them, when there are fewer — so a
       short list does not leave an empty well inside its card. calc-size()
       is the second line; a browser without it keeps the plain floor. */
    .fi-resource-list-records-page .fi-ta-content-ctn {
        min-block-size: 12rem;
        min-block-size: calc-size(max-content, min(size, 12rem));
        overflow: auto;
    }

    .fi-resource-list-records-page .fi-ta-table > thead > tr > th {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
    }
}

/* Pagination, at the foot of the table card. */
.fi-ta-ctn .fi-pagination {
    padding: 0.5rem 0.75rem;
    background: var(--frex-card-foot-fill);
    border-block-start: 1px solid var(--frex-hairline);
    border-end-start-radius: var(--frex-radius-surface);
    border-end-end-radius: var(--frex-radius-surface);
}

.fi-pagination .fi-pagination-overview {
    font-size: var(--frex-text-xs);
    font-weight: 400;
    color: var(--frex-ink-muted);
}

.fi-pagination .fi-pagination-items {
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-card);
    box-shadow: 0 0 0 1px var(--frex-border);
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--frex-surface-select);
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--frex-ink-accent);
}

/* Empty states. */
.fi-ta-empty-state {
    padding-block: 2.5rem;
}

.fi-ta-empty-state-icon-bg {
    background: var(--frex-surface-sunken);
    border-radius: var(--frex-radius-surface);
}

.fi-ta-empty-state-heading {
    font-size: var(--frex-text-md);
    font-weight: 700;
    color: var(--frex-ink);
}

.fi-ta-empty-state-description {
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-muted);
}

/* ====================================================================
   FORMS
   ==================================================================== */

.fi-fo-field-label-content {
    font-size: var(--frex-text-sm);
    font-weight: 500;
    color: var(--frex-ink-2);
}

.dark .fi-fo-field-label-content {
    color: #B8B0A5;
}

/* Helper text carries the real rules in this app — TRN format, the VAT
   switch, pro-rata behaviour — so it is muted, never faint. v5 renders it as
   a Text component under the field. */
.fi-fo-field-content-col .fi-sc-text:not(.fi-badge) {
    font-size: var(--frex-text-xs);
    line-height: 1.5;
    color: var(--frex-ink-muted);
}

.fi-fo-field-wrp-error-message {
    font-size: var(--frex-text-xs);
    color: var(--frex-money-late);
}

/* The field's edge and focus live on the wrapper. No height here, ever: the
   wrapper also holds textareas, rich editors and multi-selects. */
.fi-input-wrp {
    border-radius: var(--frex-radius-control);
    background-color: var(--frex-surface-input);
    box-shadow: inset 0 0 0 1px var(--frex-field-edge);
}

.dark .fi-input-wrp {
    box-shadow: inset 0 0 0 1px var(--frex-field-edge), inset 0 1px 2px rgba(0, 0, 0, .45);
}

.fi-input-wrp:not(.fi-disabled):hover {
    box-shadow: inset 0 0 0 1px var(--frex-field-edge-hover);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: inset 0 0 0 1px var(--frex-accent), var(--frex-focus-ring);
}

.fi-input-wrp.fi-invalid {
    box-shadow: inset 0 0 0 1px var(--frex-money-late);
}

.fi-input-wrp.fi-disabled {
    background-color: var(--frex-surface-disabled);
}

/* 34px single-line controls, set on the controls themselves: 5 + 24 + 5.
   The searchable select and the date picker are not input.fi-input, so they
   are named here too. */
input.fi-input,
select.fi-select-input,
.fi-select-input-btn,
.fi-fo-date-time-picker-display-text-input {
    padding-block: 0.3125rem;
    font-size: var(--frex-text-md);
    line-height: 1.5rem;
}

/* Filament floors the searchable select at 36px, on the button and on the
   [x-ref=select] box around it (its own selector). A floor at 34px keeps an
   empty select level with its neighbours; a multi-select still grows. */
.fi-select-input-btn,
.fi-select-input div[x-ref='select'] {
    min-block-size: var(--frex-control-h);
}

input.fi-input::placeholder,
.fi-fo-textarea textarea::placeholder {
    color: var(--frex-ink-placeholder);
    opacity: 1;
}

/* A select's "Select an option" is Filament's gray-400 (2.6:1) in light; the dark theme keeps its own. */
html:not(.dark) .fi-select-input .fi-select-input-placeholder {
    color: var(--frex-ink-placeholder);
}

input[type='number'].fi-input {
    font-kerning: none;
    font-variant-numeric: tabular-nums;
}

.fi-input-wrp-prefix:not(.fi-inline),
.fi-input-wrp-suffix:not(.fi-inline) {
    border-color: var(--frex-hairline);
}

/* The "AED" affix. */
.fi-input-wrp-label {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--frex-ink-muted);
}

/* Money inputs: TextInput ->extraAttributes(['class' => 'fx-money-input']).
   (.fx-money is the read-only figure MoneyDisplay draws, in SCREENS - SHARED;
   the two never share a name.) */
.fi-input-wrp.fx-money-input .fi-input {
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* A frozen document (an issued invoice) stays readable: Filament greys
   disabled text through -webkit-text-fill-color. */
.fx-frozen .fi-input-wrp.fi-disabled {
    background-color: var(--frex-surface-sunken);
}

.fx-frozen :is(input.fi-input, select.fi-select-input, .fi-fo-textarea textarea):disabled {
    color: var(--frex-ink-2);
    -webkit-text-fill-color: var(--frex-ink-2);
}

/* Checkbox, radio and switch need a visible resting edge to be found at all:
   the field edge, 3:1 or more on every plane they sit on, in both themes. */
.fi-checkbox-input:not(:checked),
.fi-radio-input:not(:checked) {
    background-color: var(--frex-surface-input);
    box-shadow: inset 0 0 0 1px var(--frex-field-edge);
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    background-color: var(--frex-action);
}

.fi-toggle.fi-toggle-off {
    background-color: var(--frex-field-edge);
}

.fi-toggle.fi-toggle-on {
    background-color: var(--frex-action);
}

/* Spacing only — a repeater item is a list item, never a grid. */
.fi-fo-repeater-item {
    margin-block-end: 0.4rem;
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border);
}

.fi-fo-repeater-item-header {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--frex-hairline);
}

.fi-fo-repeater-item-header-label {
    font-size: var(--frex-text-sm);
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fi-fo-table-repeater > table {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border);
}

.fi-fo-table-repeater > table > thead th {
    padding: 0.5rem 0.75rem;
    background: var(--frex-surface-sunken);
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    color: var(--frex-ink-faint);
    text-align: start;
}

.fi-fo-table-repeater-header-required-mark {
    color: var(--frex-money-late);
}

/*
 * Reminder messages, portal links and notification bodies are meant to be read
 * and copied verbatim. Monospace beats a proportional wall of text.
 */
.fi-modal textarea[readonly],
.fi-modal textarea:disabled,
textarea[name$='.text'],
textarea[name$='.body'],
textarea[name$='.link'] {
    font-family: var(--mono-font-family);
    font-size: 0.82rem;
    line-height: 1.65;
}

/* Date-time picker panel. */
.fi-fo-date-time-picker-panel {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-surface-raised);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-fo-date-time-picker-calendar-header-day {
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    color: var(--frex-ink-muted);
}

.fi-fo-date-time-picker-calendar-day {
    border-radius: var(--frex-radius-control);
}

.fi-fo-date-time-picker-calendar-day.fi-selected {
    background: var(--frex-action);
    color: var(--frex-on-action);
}

.fi-fo-date-time-picker-calendar-day-today:not(.fi-selected) {
    box-shadow: inset 0 0 0 1px var(--frex-accent);
}

.fi-fo-date-time-picker-calendar-day.fi-focused:not(.fi-selected):not(.fi-disabled) {
    background: var(--frex-surface-raised-hover);
}

/* File upload (FilePond). Filament marks the label colour !important itself. */
.fi-fo-file-upload .filepond--panel-root {
    background-color: var(--frex-surface-sunken);
    border: 1px dashed var(--frex-field-edge);
    border-radius: var(--frex-radius-control);
}

.fi-fo-file-upload .filepond--drop-label,
.fi-fo-file-upload .filepond--drop-label label {
    color: var(--frex-ink-muted) !important;
}

/* ====================================================================
   SECTIONS / CARDS
   ==================================================================== */

/* The card is <section class="fi-section"> unless it is not contained; an
   aside section draws its card on the content column. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.dark .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn {
    box-shadow: 0 0 0 1px rgba(255, 248, 240, .085), var(--frex-shadow-card);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    min-block-size: 2.75rem;
    padding: 0.625rem 1rem;
    background: var(--frex-card-head-fill);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}

.fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-block-start-color: var(--frex-hairline);
}

.fi-section-header-heading {
    font-size: var(--frex-text-md);
    font-weight: 700;
    color: var(--frex-ink);
}

.dark .fi-section-header-heading {
    color: #EDE6DC;
    letter-spacing: .02em;
}

.fi-section-header-description {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
    padding: 1rem;
}

.fi-section-footer {
    background: var(--frex-card-foot-fill);
    border-block-start-color: var(--frex-hairline);
}

/* Section header glyph chip (studio), when PHP gives the section ->icon(). */
.fi-section-header > .fi-icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--frex-ink-muted);
}

.dark .fi-section-header > .fi-icon {
    box-sizing: content-box;
    padding: 5px;
    margin: -5px;
    border-radius: var(--frex-radius-control);
    color: var(--frex-sec-hue, var(--frex-hue-billing));
    background: color-mix(in srgb, currentColor 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
}

.fx-hue-blue { --frex-sec-hue: var(--frex-hue-work); }
.fx-hue-green { --frex-sec-hue: var(--frex-hue-clients); }
.fx-hue-orange { --frex-sec-hue: var(--frex-hue-billing); }
.fx-hue-gold { --frex-sec-hue: var(--frex-hue-sales); }

/* ====================================================================
   WIDGETS — stat tiles (columns are set in PHP, never a grid here)
   ==================================================================== */

.fi-wi-stats-overview-stat {
    position: relative;
    padding: 0.875rem 1rem;
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
    container-type: inline-size;
}

.fi-wi-stats-overview-stat-label {
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frex-ink-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: var(--frex-text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--frex-ink);
}

.fi-wi-stats-overview-stat-description {
    font-size: var(--frex-text-xs);
}

/* KPI glyph tile (studio): the stat's own ->icon(), moved to the inline end. */
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    display: none;
}

.dark .fi-wi-stats-overview-stat {
    background: linear-gradient(180deg, #1E1D1B 0%, #181817 100%);
    box-shadow: inset 0 1px 0 rgba(255, 248, 240, .055), 0 0 0 1px rgba(255, 248, 240, .085), 0 1px 2px rgba(0, 0, 0, .35), 0 14px 28px -22px rgba(0, 0, 0, .9);
}

.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: inset 0 1px 0 rgba(255, 248, 240, .055), 0 0 0 1px rgba(255, 248, 240, .16), 0 1px 2px rgba(0, 0, 0, .35);
}

.dark .fi-wi-stats-overview-stat-label {
    color: color-mix(in srgb, var(--frex-sec-hue, var(--frex-ink-muted)) 80%, #C3BEB7);
}

.dark .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    display: grid;
    position: absolute;
    inset-block-start: 2.125rem;
    inset-inline-end: 0.875rem;
    box-sizing: content-box;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0.4375rem;
    border-radius: var(--frex-radius-control);
    color: var(--frex-sec-hue, var(--frex-ink-muted));
    background: color-mix(in srgb, var(--frex-sec-hue, var(--frex-ink-muted)) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frex-sec-hue, var(--frex-ink-muted)) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Narrow tiles drop the glyph (mirrors the template's own rule). */
@container (max-width: 259px) {
    .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
        display: none !important;
    }
}

/* The overdue-money tile: orange marks attention, the amount stays red. */
.dark .fi-wi-stats-overview-stat.fx-alert {
    background: radial-gradient(120% 90% at 100% 0%, rgba(252, 151, 0, .13), transparent 58%), linear-gradient(180deg, #201D19 0%, #191715 100%);
    box-shadow: inset 0 1px 0 rgba(255, 200, 130, .09), 0 0 0 1px rgba(252, 151, 0, .40), 0 0 0 4px rgba(252, 151, 0, .06), 0 18px 36px -22px rgba(252, 151, 0, .45);
}

html.dark[dir='rtl'] .fi-wi-stats-overview-stat.fx-alert {
    background: radial-gradient(120% 90% at 0% 0%, rgba(252, 151, 0, .13), transparent 58%), linear-gradient(180deg, #201D19 0%, #191715 100%);
}

/* Lazy widget placeholders. */
.fi-loading-section {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border);
}

.fi-loading-indicator {
    color: var(--frex-accent);
}

/* ====================================================================
   INFOLISTS
   ==================================================================== */

.fi-in-entry-label {
    font-size: var(--frex-text-sm);
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fi-in-text-item {
    font-size: var(--frex-text-md);
    color: var(--frex-ink);
}

.fi-in-text.fi-align-end .fi-in-text-item {
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    font-weight: var(--frex-weight-figure);
}

/* ====================================================================
   OVERLAYS — modals, dropdowns, toasts
   ==================================================================== */

/* Widths stay in PHP (->modalWidth()); nothing here sizes the window. */
.fi-modal-close-overlay {
    background-color: var(--frex-scrim);
}

.fi-modal-window {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-surface-modal);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-modal);
}

.dark .fi-modal-window {
    position: relative;
    background: linear-gradient(180deg, #1E1E1C, #191918);
    box-shadow: 0 0 0 1px rgba(255, 248, 240, .09), var(--frex-shadow-modal);
}

/* A short orange rule along the top edge (studio); not on slide-overs. */
.dark .fi-modal:not(.fi-modal-slide-over) .fi-modal-window::before {
    content: '';
    position: absolute;
    inset-inline: 1.5rem;
    inset-block-start: -1px;
    block-size: 1px;
    background: var(--frex-modal-rule);
    pointer-events: none;
}

.fi-modal-header {
    border-block-end: 1px solid var(--frex-hairline);
}

.fi-modal-heading {
    font-size: var(--frex-text-lg);
    font-weight: 700;
    color: var(--frex-ink);
}

.fi-modal-description {
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-muted);
}

.fi-modal-footer {
    border-block-start: 1px solid var(--frex-hairline);
    background: var(--frex-card-foot-fill);
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
}

/* Every action's modal has a sticky footer (AppServiceProvider), so the
   buttons stay on screen however long the form is: the window scrolls its own
   content and the footer pins to its bottom edge. The footer fill is opaque in
   both themes, so content passes under it cleanly. It is the window's bottom
   edge now, so it takes 16px of air instead of Filament's 20, which is room
   for another field at 639px. A confirmation has no content between its text
   and that rule; the header gives the text room before it. */
.fi-modal-has-sticky-footer:not(.fi-modal-slide-over) .fi-modal-footer {
    padding-block: 1rem;
}

.fi-modal-has-sticky-footer .fi-modal-window:not(.fi-modal-window-has-content) .fi-modal-header {
    padding-block-end: 1.5rem;
}

.fi-dropdown-panel {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-surface-raised);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-dropdown-list-item {
    border-radius: var(--frex-radius-control);
    color: var(--frex-ink-2);
    font-size: var(--frex-text-sm);
}

.fi-dropdown-list-item:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible) {
    background: var(--frex-surface-raised-hover);
    color: var(--frex-ink);
}

.fi-dropdown-header {
    font-size: var(--frex-text-sm);
    font-weight: 500;
    color: var(--frex-ink);
}

/* Toasts are .fi-no-notification. .fi-no itself is the fixed, always-present
   overlay they sit in — it must stay unpainted. */
.fi-no .fi-no-notification {
    border-radius: var(--frex-radius-surface);
    background: var(--frex-surface-raised);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-no .fi-no-notification.fi-status-success {
    box-shadow: inset 3px 0 0 var(--success-500), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-no .fi-no-notification.fi-status-danger {
    box-shadow: inset 3px 0 0 var(--danger-600), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-no .fi-no-notification.fi-status-warning {
    box-shadow: inset 3px 0 0 var(--warning-500), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-no .fi-no-notification.fi-status-info {
    box-shadow: inset 3px 0 0 var(--info-500), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

html[dir='rtl'] .fi-no .fi-no-notification.fi-status-success {
    box-shadow: inset -3px 0 0 var(--success-500), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

html[dir='rtl'] .fi-no .fi-no-notification.fi-status-danger {
    box-shadow: inset -3px 0 0 var(--danger-600), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

html[dir='rtl'] .fi-no .fi-no-notification.fi-status-warning {
    box-shadow: inset -3px 0 0 var(--warning-500), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

html[dir='rtl'] .fi-no .fi-no-notification.fi-status-info {
    box-shadow: inset -3px 0 0 var(--info-500), 0 0 0 1px var(--frex-border), var(--frex-shadow-raised);
}

.fi-no-notification-title {
    font-size: var(--frex-text-md);
    font-weight: 500;
    color: var(--frex-ink);
}

.fi-no-notification-body {
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-2);
}

.fi-no-notification-date {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fi-no-notification-unread-ctn::before {
    background-color: var(--frex-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Panels written by hand, and why they need CSS at all.

   This project has no Tailwind build over its own Blade files. The panel loads
   Filament's PREBUILT theme plus this file, so a utility class written in a
   custom partial — `w-full`, `space-y-3`, `flex`, `text-sm` — matches nothing
   and does nothing. Verified against the shipped theme: zero occurrences of
   any of them.

   The symptom is quiet and specific. `<textarea class="w-full">` in the brief
   preview fell back to the HTML default of 20 columns, so the entire discovery
   brief — 11,122 characters — rendered in a 220px ribbon inside a 5xl modal
   with the rest of the width empty. It looked like a broken layout; it was a
   stylesheet that never had the rule.

   So these are real class names, defined here where they are actually served.
   The page-specific board keeps its own <style> block; these are the small
   shared pieces.
   ──────────────────────────────────────────────────────────────────────────── */

/* A plain vertical rhythm, replacing space-y-*. */
.fx-stack > * + * { margin-top: 0.75rem; }
.fx-stack--tight > * + * { margin-top: 0.5rem; }

.fx-muted { color: var(--frex-ink-muted); }
.fx-small { font-size: 0.8125rem; line-height: 1.5; }
.fx-xs { font-size: 0.75rem; line-height: 1.5; }

/* The brief preview, and any other full-width read-only dump. */
.fx-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mono-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.75rem;
    line-height: 1.6;
    padding: 0.75rem;
    border-radius: var(--frex-radius-control);
    border: 1px solid var(--frex-border);
    background: var(--frex-surface-sunken);
    color: var(--frex-ink);
    resize: vertical;
}
.fx-code:focus { outline: 2px solid var(--frex-focus); outline-offset: 1px; }

/* One entry in a log: a badge, then whatever it is about. */
.fx-entry { display: flex; align-items: flex-start; gap: 0.75rem; }
.fx-entry__badge { flex: 0 0 auto; }
.fx-entry__body { min-width: 0; font-size: 0.8125rem; line-height: 1.5; }
.fx-entry__body p { margin: 0; }
.fx-entry__body p + p { margin-top: 0.125rem; }
.fx-entry__strong { font-weight: 500; color: var(--frex-ink); }
.fx-entry__wrap { overflow-wrap: anywhere; }
.fx-entry__error { color: var(--frex-money-late); }

/* Figures and isolates for hand-written Blade (partials, portal). Dates may be
   forced LTR because their month names are English in every locale. Money
   (.fx-money, .fx-cur, .fx-fig) is drawn by App\Support\MoneyDisplay and lives
   in SCREENS - SHARED, with its modifiers, so it is defined once. */
.fx-figure {
    font-kerning: none;
    font-variant-numeric: tabular-nums;
}

.fx-ltr,
.fx-ref,
.fx-date {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ─────────────────────────────────────────────────────────────────────────────
   The quick-pick row inside a date picker's calendar.

   Injected into Filament's own panel at runtime — see
   resources/views/filament/date-shortcuts.blade.php — so it has to sit against
   the panel's existing padding without knowing it. A top border rather than a
   gap, so the row reads as part of the calendar and not as something floating
   under it.
   ──────────────────────────────────────────────────────────────────────────── */

.fx-dtp-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--frex-hairline);
}

.fx-dtp-shortcut {
    /* Share the width evenly, but never let a label wrap mid-word. */
    flex: 1 1 auto;
    padding: 0.3125rem 0.5rem;
    border: 0;
    border-radius: var(--frex-radius-control);
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    color: var(--frex-ink-2);
    background: var(--frex-surface-hover);
    transition: background-color 75ms ease;
}

.fx-dtp-shortcut:hover {
    background: var(--frex-surface-active);
}

.fx-dtp-shortcut:focus-visible {
    outline: 2px solid var(--frex-focus);
    outline-offset: 1px;
}

/* ====================================================================
   SCREENS - SHARED — pieces more than one screen group builds on

   One definition each: the screen sections after this one use these
   classes and never restate them. Where they come from in the specs:
   money (finance 0.3), reference cells, due dates, file chips,
   placeholder tokens, numeric cells, the form bar and settings rows
   (tasks 0.3), the status dot (tasks 1.6, used again by sales), the
   heading meta line and the person cell (clients 1.2, 1.4). Logical
   properties only; the one RTL twin sits beside its rule.
   ==================================================================== */

/* --- Money: App\Support\MoneyDisplay -------------------------------------
   <span class="fx-money" dir="ltr"><span class="fx-cur">AED</span> <span class="fx-fig">1,234.50</span></span>
   The currency comes first and steps back, the figure is tabular, and the
   whole amount is one left-to-right run so a Persian row cannot turn it into
   "1,234.50 AED". Modifiers are classes on the wrapper. */
.fx-money {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-kerning: none;
    font-variant-numeric: tabular-nums;
}

.fx-money .fx-cur {
    font-size: 0.82em;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--frex-ink-muted);
}

.fx-money .fx-fig {
    font-weight: var(--frex-weight-figure);
}

/* No figure at all: an em dash, in the quiet ink. */
.fx-money--none {
    color: var(--frex-ink-muted);
}

/* A quieter figure beside a bigger one: a VAT line, a row's secondary total. */
.fx-money--muted .fx-fig {
    font-weight: 400;
    color: var(--frex-ink-2);
}

/* Late money: bold in the danger ink; in studio it also sits on a faint red
   plate. The plate's end margin cancels its padding, so an end-aligned
   figure still lands on the column edge. */
.fx-money--owed .fx-fig {
    font-weight: var(--frex-weight-figure-total);
    color: var(--frex-money-late);
}

.dark .fx-money--owed {
    display: inline-block;
    padding: 0.125rem 0.4375rem;
    margin-inline-end: -0.4375rem;
    border-radius: 0.3125rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--danger-400) 14%, transparent),
        color-mix(in srgb, var(--danger-400) 5%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-400) 26%, transparent);
}

/* A payment that arrived. */
.fx-money--received .fx-fig {
    color: var(--success-700);
}

.dark .fx-money--received .fx-fig {
    color: var(--success-400);
}

/* A negative amount (a credit note, a refund) keeps its hyphen-minus inside
   .fx-fig, "AED -735.00", as the PDF prints it, and takes no colour: red is
   late money and nothing else. .fx-money--neg is a hook for a screen that
   wants one; this block gives it no rule on purpose. */

/* --- Reference cells: task and invoice numbers -------------------------- */
.fx-ref-cell .fi-ta-text {
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink-2);
}

.dark .fi-resource-work-items .fx-ref-cell .fi-ta-text {
    color: color-mix(in srgb, var(--frex-hue-work) 72%, var(--frex-ink-muted));
}

/* --- Due date: the date strong, the time quiet, one LTR unit ------------
   Isolated left-to-right so "19 Sep 2026 16:00" keeps one order in RTL (the
   month names are English in every locale). */
.fx-dt {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
    direction: ltr;
}

.fx-dt__d {
    font-weight: 600;
}

.fx-dt__t {
    margin-inline-start: 0.375rem;
    font-weight: 400;
    opacity: 0.72;
}

/* --- File / link chip: a task's conversation, a client message ---------- */
.fx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-inline-size: 100%;
    block-size: 1.875rem;
    padding-inline: 0.625rem;
    border-radius: var(--frex-radius-control);
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink);
    background: var(--frex-surface);
    box-shadow: inset 0 0 0 1px var(--frex-border);
    text-decoration: none;
}

.fx-chip:hover {
    box-shadow: inset 0 0 0 1px var(--frex-accent);
}

.fx-chip:focus-visible {
    outline: 2px solid var(--frex-focus);
    outline-offset: 2px;
}

.fx-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-chip__icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    flex: none;
    color: var(--frex-ink-muted);
}

/* The arrow points to the reading end. */
html[dir='rtl'] .fx-chip__icon:last-child {
    transform: scaleX(-1);
}

/* --- Placeholder token: [date], {client_name} inside a preview or a list - */
.fx-tok {
    font-family: var(--mono-font-family, ui-monospace, monospace);
    font-size: 0.92em;
    padding: 0 0.1875rem;
    margin-inline: 0.0625rem;
    border-radius: 3px;
    color: var(--frex-ink-2);
    background: var(--frex-surface);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
    unicode-bidi: isolate;
}

.dark .fx-tok {
    color: var(--frex-hue-sales);
    background: color-mix(in srgb, var(--frex-hue-sales) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frex-hue-sales) 22%, transparent);
}

/* --- Counts and order inputs: tabular, end-aligned in a field ----------- */
.fx-num-cell .fi-ta-text,
.fx-num {
    font-variant-numeric: tabular-nums;
}

.fx-num {
    text-align: end;
}

/* --- Settings rows: switches under a hairline, inside a form or modal --- */
.fx-settings {
    padding-block-start: 0.875rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-settings > .fi-sc {
    row-gap: 0.75rem;
}

/* --- Form bar: the save row under a settings or messages form ----------- */
.fx-form-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: var(--frex-radius-surface);
    background: var(--frex-surface-card);
    box-shadow: 0 0 0 1px var(--frex-border);
}

.fx-form-bar__hint {
    flex: 1 1 16rem;
    font-size: var(--frex-text-2xs);
    line-height: 1.5;
    color: var(--frex-ink-muted);
}

.fx-form-bar__end {
    margin-inline-start: auto;
}

/* --- Status dot: a dot ahead of a badge's label ------------------------- */
.fx-cell-dot .fi-badge::before {
    content: "";
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* --- Heading meta line: code and status on an edit page's title row ----- */
.fx-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.fx-head-meta__ref {
    font-size: var(--frex-text-xs);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink-muted);
}

/* --- Person cell: App\Filament\Support\PersonCell (avatar, name, email) - */
.fx-person {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
}

.fx-avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-2);
    background: var(--frex-surface-active);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

.fx-person__txt {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.fx-person__name {
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.fx-person__sub {
    font-size: var(--frex-text-xs);
    line-height: 1.3;
    color: var(--frex-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two lines and a 28px avatar make the row about 52px; the cell's usual 11px
   of block padding would make it 57 to 61. The badge cells already take 9px
   for the same reason. */
.fi-ta-text:not(.fi-inline):has(.fx-person) {
    padding-block: 0.5625rem;
}

/* A Persian name in the English panel hugs the avatar like an English one
   (isolate keeps the panel's direction for alignment and the name's own for
   its letters); in the Persian panel both lines sit on the reading edge. */
html[dir='rtl'] :is(.fx-person__name, .fx-person__sub) {
    text-align: right;
}

/* "You": the one orange mark in the row; the accent tokens carry both themes. */
.fx-you {
    margin-inline-start: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    color: var(--frex-ink-accent);
    background: var(--frex-accent-soft);
    box-shadow: inset 0 0 0 1px var(--frex-accent-soft-edge);
    vertical-align: 0.0625rem;
}

/* ====================================================================
   SCREEN - TASK DETAIL — a Team task's edit page and the new-task page

   Both pages share WorkItemResource::form() and carry .fx-task-page. The
   cards, glyph chips, footer band, underline tabs and the table repeater's
   base look are the foundation's; this adds only the eyebrow header, the
   12-column details grid, the checklist as one line per step, the
   conversation feed and the sticky save bar.
   ==================================================================== */

/* Header: the number and status above the subject. The DOM order stays
   heading, then subheading; the subheading is drawn first. */
.fx-task-page .fi-header > div:not(.fi-header-actions-ctn) {
    display: flex;
    flex-direction: column;
}

.fx-task-page .fi-header .fi-breadcrumbs {
    order: -2;
}

.fx-task-page .fi-header .fi-header-subheading {
    order: -1;
    margin: 0 0 0.25rem;
    max-inline-size: none;
}

.fx-task-page .fi-header .fi-header-heading {
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    unicode-bidi: plaintext;
}

.fx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fx-eyebrow__label,
.fx-eyebrow__ref {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--frex-ink-muted);
}

.fx-eyebrow__ref {
    font-variant-numeric: tabular-nums;
    margin-inline-start: -0.25rem;
}

/* Persian has no capitals and no tracking. */
html[dir='rtl'] :is(.fx-eyebrow__label, .fx-eyebrow__ref) {
    text-transform: none;
    letter-spacing: 0;
}

/* Fourteen pixels between the cards. */
.fx-task-page .fi-page-content .fi-sc-has-gap:has(> .fi-grid-col > .fi-sc-component > .fi-sc-section) {
    gap: 0.875rem;
}

/* Details: the reminder switch lines up with the inputs of its row, and the
   read-only task number reads as a reference. */
.fi-fo-field.fx-remind {
    padding-block-start: 1.75rem;
}

.fx-ref {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Checklist: one line per step. */
.fx-checklist .fx-count {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fx-checklist .fi-fo-table-repeater > table {
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.fx-checklist .fi-fo-table-repeater > table > thead > tr > th {
    block-size: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
    line-height: 0;
}

.fx-checklist .fi-fo-table-repeater > table > tbody > tr {
    border: 0;
}

.fx-checklist .fi-fo-table-repeater > table > tbody > tr > td {
    padding: 0.1875rem 0.25rem;
    vertical-align: middle;
    border: 0;
}

.fx-checklist .fi-fo-table-repeater-actions .fi-icon-btn {
    color: var(--frex-ink-disabled);
}

.fx-checklist .fi-fo-table-repeater .fi-ac-icon-btn-action.fi-color-danger {
    opacity: 0.7;
}

.fx-checklist .fi-fo-table-repeater tr:hover .fi-ac-icon-btn-action.fi-color-danger {
    opacity: 1;
}

.fx-checklist tr:has(.fi-checkbox-input:checked) .fi-input {
    color: var(--frex-ink-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Conversation: a feed, one entry per message (the relation manager's View
   layout column), not table rows. */
.fi-ta-content:has(.fx-msg) .fi-ta-record {
    padding: 0;
    background: none;
    border-block-end: 1px solid var(--frex-hairline);
}

.fi-ta-content:has(.fx-msg) .fi-ta-record:last-child {
    border-block-end: 0;
}

.fx-msg {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.fx-msg__avatar {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    font-size: var(--frex-text-xs);
    font-weight: 700;
    color: var(--frex-ink-2);
    background: var(--frex-surface);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

.fx-msg__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.fx-msg__author {
    font-size: var(--frex-text-md);
    font-weight: 700;
    color: var(--frex-ink);
}

.fx-msg__time {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.fx-msg__body {
    margin-block-start: 0.25rem;
    font-size: var(--frex-text-md);
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--frex-ink-2);
    unicode-bidi: plaintext;
}

.fx-msg__files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: 0.5rem;
}

/* Sticky save bar: flush with the bottom edge, with the studio lift. */
.fx-task-page .fi-sc-actions.fi-sticky .fi-ac {
    bottom: 0;
    /* Filament pulls the bar 16px past the cards on both sides; it lines up with them. */
    margin-inline: 0;
    border-radius: var(--frex-radius-surface) var(--frex-radius-surface) 0 0;
    padding: 0.625rem 1rem;
    background: var(--frex-card-foot-fill);
    box-shadow: 0 -1px 0 var(--frex-border);
}

.dark .fx-task-page .fi-sc-actions.fi-sticky .fi-ac {
    box-shadow: var(--frex-shadow-lift), inset 0 1px 0 rgb(255 248 240 / 0.04), 0 -1px 0 var(--frex-border);
}

/* New task: a form column of 820px at the reading edge, and the bar no wider. */
.fx-task-page--create .fi-sc-form {
    max-inline-size: 51.25rem;
}

.fx-task-page--create .fi-sc-actions.fi-sticky .fi-ac {
    max-inline-size: 51.25rem;
}

.fx-hint-chip {
    display: inline-flex;
    align-items: center;
    block-size: 1.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--frex-radius-control);
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
    box-shadow: inset 0 0 0 1px var(--frex-border);
    white-space: nowrap;
}

/* ====================================================================
   SCREEN - WORK LIST — the Team tasks list

   Tabs, row density, the header band, the hover wash, the pinned and late
   edges, and the toolbar's buttons are the foundation's. This adds the
   search at the reading edge of every list page's toolbar, the tighter gap
   under the tabs, and the quiet row-end edit icon.
   ==================================================================== */

/* Fourteen pixels between the tabs and the table. */
.fi-resource-list-records-page .fi-page-content > .fi-sc-has-gap:has(> .fi-grid-col .fi-sc-tabs) {
    row-gap: 0.875rem;
}

/* Toolbar: the search at the reading edge, the filter and column buttons at
   the far end. Filament puts all three in one unclassed row that it pushes to
   the end; the row takes the whole width and the search lets go of the rest. */
.fi-resource-list-records-page .fi-ta-header-toolbar > div:has(> .fi-ta-search-field) {
    flex: 1 1 auto;
}

.fi-resource-list-records-page .fi-ta-header-toolbar .fi-ta-search-field {
    inline-size: 16.25rem;
    margin-inline-end: auto;
}

/* The toolbar is the templates' 44px band, not the 55px the foundation's 34px
   controls make: a list that sits under a title and a row of tabs has little
   height to spare at 1536x639, and every pixel here is a pixel of rows. The
   controls (search and the two icon buttons) drop to 30px inside it. */
.fi-resource-list-records-page .fi-ta-header-toolbar {
    --frex-control-h: 1.875rem;
    padding-block: 0.4375rem;
}

.fi-resource-list-records-page .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp {
    min-block-size: var(--frex-control-h);
}

.fi-resource-list-records-page .fi-ta-header-toolbar .fi-ta-search-field .fi-input {
    block-size: var(--frex-control-h);
    padding-block: 0;
}

/* The two hand-over tabs (Send to Client, Publishing Post) keep a count in the
   primary tone: those are tasks that need somebody to act. The foundation
   greys every other tab count. */
.fi-tabs-item.fx-tab-hot .fi-badge.fi-color-primary {
    background: var(--primary-100);
    color: var(--primary-700);
    box-shadow: none;
}

.dark .fi-tabs-item.fx-tab-hot .fi-badge.fi-color-primary {
    background: color-mix(in oklab, var(--primary-400) 14%, transparent);
    color: var(--primary-300);
}

/* The edit icon at the end of a row is quiet until the row is hovered or focused. */
.fi-resource-work-items .fi-ta-row .fi-ta-actions .fi-icon-btn {
    opacity: 0.55;
    transition: opacity 120ms ease-out;
}

.fi-resource-work-items .fi-ta-row:is(:hover, :focus-within) .fi-ta-actions .fi-icon-btn {
    opacity: 1;
}

/* ====================================================================
   SCREEN - DASHBOARD — widgets in whatever order the access level stores

   The tile (lit fill, glyph chip, alert glow, container query) is the
   foundation's, keyed on the .fx-hue-* and .fx-alert classes the widgets
   emit. This is the rhythm between the blocks, the table widgets as one-band
   cards, the team notes and the loading skeletons.
   ==================================================================== */

/* Fourteen pixels between the widgets and between the tiles. Placeholders are
   direct children of the grid while a lazy widget loads. */
.fx-page-dashboard .fi-page-content .fi-grid.fi-sc-has-gap:has(> .fi-wi-widget, > .fi-loading-section) {
    gap: 0.875rem;
}

.fi-wi-stats-overview .fi-section-content.fi-grid {
    gap: 0.875rem;
}

/* Tile internals the foundation leaves at Filament's defaults. */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-content {
    row-gap: 0.375rem;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* A tile whose description runs to two lines stays within 112px. */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    line-height: 1.3;
}

/* Text never runs under the studio glyph (32px chip and a 14px inset). */
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    padding-inline-end: 2.75rem;
}

@container (max-width: 259px) {
    .dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
    .dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
        padding-inline-end: 0;
    }
}

/* The alert tile keeps an orange edge in light too; the foundation draws the dark one. */
.fi-wi-stats-overview-stat.fx-alert {
    box-shadow: 0 0 0 1px var(--primary-300), var(--frex-shadow-card);
}

/* Table widgets: title and subtitle on the start side, search and the column
   toggle on the end side, in one band. */
.fi-wi-table .fi-ta-header-ctn {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--frex-hairline);
}

.fi-wi-table .fi-ta-header-ctn > .fi-ta-header {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0.75rem 0;
    border: 0;
}

.fi-wi-table .fi-ta-header-ctn > .fi-ta-header-toolbar {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    /* The foundation's toolbar band is a gradient; here the toolbar is half of
       the header row, which is one flat surface. */
    background: none;
}

.fi-wi-table .fi-ta-header-toolbar > .fi-ta-actions.fi-align-start:empty {
    display: none;
}

.fi-wi-table .fi-ta-header-heading {
    font-size: var(--frex-text-lg);
    font-weight: 700;
    line-height: 1.375rem;
}

.fi-wi-table .fi-ta-header-description {
    margin-block-start: 0.125rem;
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

/* Team notes */
.fx-notes .fi-section-header {
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
}

.fx-notes .fi-section-content:has(> .fx-notes__empty) {
    padding: 0.75rem 1rem;
}

.fx-notes__empty {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-notes__list {
    display: grid;
}

.fx-note {
    padding-block: 0.75rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-note:first-child {
    padding-block-start: 0;
    border: 0;
}

.fx-note__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.fx-note__pin {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--primary-500);
    align-self: center;
}

.fx-note__title {
    font-size: var(--frex-text-md);
    font-weight: 700;
    color: var(--frex-ink);
}

.fx-note__by {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-note__body {
    margin-block-start: 0.25rem;
    font-size: var(--frex-text-md);
    line-height: 1.6;
    white-space: pre-line;
    color: var(--frex-ink-2);
    unicode-bidi: plaintext;
}

.fx-note__replies {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 2px solid var(--frex-border);
}

.fx-note__reply-by {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink);
}

.fx-note__actions {
    display: flex;
    gap: 0.75rem;
    margin-block-start: 0.25rem;
}

/* Skeletons keep each widget's height while it loads. The card look is the
   foundation's; only the studio shimmer is added. Reduced motion is the foundation's slow
   fade, which outranks any animation set here. */
.dark .fx-page-dashboard .fi-loading-section {
    background: linear-gradient(90deg, transparent 0, rgb(255 248 240 / 0.035) 50%, transparent 100%) 0 0 / 200% 100% no-repeat, var(--frex-surface-card);
    animation: fx-shimmer 1.4s linear infinite;
}

@keyframes fx-shimmer {
    to {
        background-position: -200% 0, 0 0;
    }
}

/* ====================================================================
   SCREEN - SUPPORT PAGES — canned replies, checklist templates, client
   messages and the knowledge base

   The placeholder token, numeric cell, settings row and form bar are in
   SCREENS - SHARED. The two list pages' dialogs have no inner cards; the two
   settings pages are cards of rows with a bar under them.
   ==================================================================== */

/* One-line preview that ellipsises at its own end, in either script. */
.fx-preview {
    display: block;
    /* 44rem, not 48: at 48 the Name column plus the five narrow ones came to exactly the table's
       width at 1536, and a font or scrollbar difference of 9px made the table scroll sideways. */
    max-inline-size: 44rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
}

/* Steps builder: numbered rows, the controls on hover or focus. */
.fx-steps .fi-fo-simple-repeater-items {
    counter-reset: fx-step;
    display: grid;
    gap: 0.375rem;
}

.fx-steps .fi-fo-simple-repeater-item {
    counter-increment: fx-step;
    display: grid;
    grid-template-columns: 1.375rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.375rem;
}

.fx-steps .fi-fo-simple-repeater-item::before {
    content: counter(fx-step);
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.dark .fx-steps .fi-fo-simple-repeater-item::before {
    display: grid;
    place-items: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-radius: 50%;
    text-align: center;
    font-weight: 500;
    color: var(--frex-hue-clients);
    background: color-mix(in srgb, var(--frex-hue-clients) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frex-hue-clients) 28%, transparent);
}

.dark .fx-steps .fi-fo-simple-repeater-item:focus-within::before {
    background: color-mix(in srgb, var(--frex-hue-clients) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frex-hue-clients) 45%, transparent), 0 0 10px -2px color-mix(in srgb, var(--frex-hue-clients) 50%, transparent);
}

.fx-steps .fi-fo-simple-repeater-item-actions {
    opacity: 0;
    transition: opacity 120ms ease-out;
}

.fx-steps .fi-fo-simple-repeater-item:is(:hover, :focus-within) .fi-fo-simple-repeater-item-actions {
    opacity: 1;
}

@media (hover: none) {
    .fx-steps .fi-fo-simple-repeater-item-actions {
        opacity: 1;
    }
}

.fx-steps .fi-fo-simple-repeater-add {
    padding-inline-start: 1.75rem;
}

/* A quiet subheading and the bar under the form, on both settings pages. */
:is(.fx-page-client-messages, .fx-page-knowledge-base) .fi-header-subheading {
    margin-block-start: 0.25rem;
    font-size: var(--frex-text-xs);
    line-height: 1.5;
    color: var(--frex-ink-muted);
    max-inline-size: 90ch;
}

/* Client messages: the placeholders card. */
.fx-tokens {
    display: grid;
    gap: 0.875rem;
}

.fx-tokens__title {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-2);
    margin-block-end: 0.375rem;
}

.fx-tokens__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.375rem 1rem;
}

.fx-tokens__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-tokens__item dt {
    flex: none;
}

/* The tabs are the foundation's underline row; only the edited count shares it. */
.fx-messages-form {
    position: relative;
}

.fx-edited-count {
    position: absolute;
    inset-block-start: 0.6875rem;
    inset-inline-end: 0;
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
}

.fx-page-client-messages .fi-sc-tabs .fi-sc-tabs-tab.fi-active {
    margin-block-start: 0.875rem;
}

/* A motion card holding one collapsible row per language. */
.fx-msg-group > .fi-section > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
    gap: 0;
}

.fx-msg-row {
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-msg-row > .fi-section > .fi-section-header {
    padding: 0.625rem 1rem;
    cursor: pointer;
}

.fx-msg-row > .fi-section > .fi-section-content-ctn {
    padding: 0 1rem 1rem;
}

.fx-msg-row > .fi-section.fi-collapsed > .fi-section-header:hover {
    background: var(--frex-surface);
}

.fx-lang-code {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.75rem;
    block-size: 1.25rem;
    margin-inline-end: 0.5rem;
    padding-inline: 0.25rem;
    border-radius: 4px;
    font-size: var(--frex-text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--frex-ink-2);
    background: var(--frex-surface);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

.dark .fx-msg-row > .fi-section > .fi-section-header:hover {
    background: linear-gradient(90deg, rgb(141 180 221 / 0.07), transparent 60%);
}

[dir='rtl'] .dark .fx-msg-row > .fi-section > .fi-section-header:hover {
    background: linear-gradient(270deg, rgb(141 180 221 / 0.07), transparent 60%);
}

/* The message editors: each line takes its own direction (Persian and Arabic wording). */
.fx-msg-row .fi-fo-textarea textarea {
    unicode-bidi: plaintext;
}

/* Knowledge base: the weight callout's figure and the form. */
.fx-kb-weight .fx-figure {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

.fx-kb-form {
    display: grid;
    gap: 0.875rem;
}

/* Prompt editors: literal text sent to a model. Monospace with a script
   fallback (the mono stack has no Arabic-script face), each line its own
   direction. */
.fx-prompt {
    font-family: var(--mono-font-family, ui-monospace, 'Cascadia Mono', Consolas, monospace), var(--font-family, sans-serif);
    font-size: 0.78125rem;
    line-height: 1.7;
    tab-size: 2;
    direction: ltr;
    unicode-bidi: plaintext;
}

.fi-input-wrp:has(> .fi-input-wrp-content-ctn > .fx-prompt),
.fi-fo-textarea:has(.fx-prompt) {
    background: var(--frex-surface);
}

.dark .fi-fo-textarea:has(.fx-prompt) {
    background: #0E0D0C;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.55), inset 2px 0 0 rgb(141 180 221 / 0.35), 0 0 0 1px rgb(141 180 221 / 0.16);
}

[dir='rtl'] .dark .fi-fo-textarea:has(.fx-prompt) {
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.55), inset -2px 0 0 rgb(141 180 221 / 0.35), 0 0 0 1px rgb(141 180 221 / 0.16);
}

.dark .fi-fo-textarea:has(.fx-prompt):hover {
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.55), inset 2px 0 0 rgb(141 180 221 / 0.35), 0 0 0 1px rgb(141 180 221 / 0.28);
}

/* ====================================================================
   SCREEN - CLIENTS & SETTINGS — clients, companies, retainers, staff,
   access levels, the notification log, letterheads, services & prices,
   the profile page and the sign-in page

   The tokens, buttons, badges, tabs, tables, forms, modals, cards and
   glyph chips are the foundation's; the person cell, money, reference
   cell, date over time, numeric cell, settings row and head meta line
   are SCREENS - SHARED. This block adds only what these screens need
   on top: the quiet row-end icons, the identifier chips, the error box,
   the permission boxes and the sign-in layout. Logical properties only.
   ==================================================================== */

/* The row hue of the lists whose template differs from the foundation's default
   (blue, the Settings lists; clients are green in the foundation block). */
.fi-resource-retainers { --frex-row-hue: var(--frex-hue-clients); }
.fi-resource-services { --frex-row-hue: var(--frex-hue-billing); }

/* The icon buttons at a row's end are quiet until the row is hovered or focused. */
:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-retainers, .fi-resource-users, .fi-resource-roles,
    .fi-resource-notification-logs, .fi-resource-letterheads, .fi-resource-services).fi-resource-list-records-page .fi-ta-cell .fi-ta-actions .fi-icon-btn {
    opacity: 0.55;
    transition: opacity var(--frex-dur-fast) var(--frex-ease-out);
}

:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-retainers, .fi-resource-users, .fi-resource-roles,
    .fi-resource-notification-logs, .fi-resource-letterheads, .fi-resource-services).fi-resource-list-records-page
    .fi-ta-row:is(:hover, :focus-within) .fi-ta-cell .fi-ta-actions .fi-icon-btn {
    opacity: 1;
}

/* The search box: the templates' 280px on every list of this group, so the box does not change
   width as you move between Clients, Retainers and the Settings lists. */
:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-retainers, .fi-resource-users, .fi-resource-roles,
    .fi-resource-letterheads, .fi-resource-services, .fi-resource-notification-logs)
    .fi-ta-header-toolbar .fi-ta-search-field {
    inline-size: 17.5rem;
}

/* The two reorderable lists (letterheads, services): search stays the first control and the
   reorder toggle moves to the end of the toolbar, as the templates' "Sort" does. Filament prints
   the toggle in the first block of the toolbar, so it is only sent behind the rest. */
:is(.fi-resource-letterheads, .fi-resource-services) .fi-ta-header-toolbar > .fi-ta-actions.fi-align-start {
    order: 1;
}

/* A gray ->color() text item (a zero) takes the muted ink, not Filament's gray-500. */
.fi-ta-text-item.fi-color-gray {
    color: var(--frex-ink-muted);
}

/* Two-line name cells (a name over its alias, a tagline, an email): 9px of block padding
   instead of 11, so a row is about 57px and not 64. Filament already puts 4px between the lines. */
:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-retainers, .fi-resource-users, .fi-resource-roles,
    .fi-resource-letterheads, .fi-resource-services).fi-resource-list-records-page .fi-ta-text.fi-ta-text-has-descriptions:not(.fi-inline) {
    padding-block: 0.5625rem;
}

/* --- Notification log: the reason a message failed, readable ------------
   A tinted box, two lines, never the bare red text. */
.fx-err-cell .fi-ta-text-item:not(.fi-ta-placeholder) {
    display: inline-block;
    max-inline-size: 18rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--frex-radius-control);
    white-space: normal;
    font-size: var(--frex-text-xs);
    line-height: 1.35;
    color: var(--danger-700);
    background: var(--danger-50);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}

.dark .fx-err-cell .fi-ta-text-item:not(.fi-ta-placeholder) {
    color: var(--danger-300);
    background: color-mix(in oklab, var(--danger-600) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-400) 30%, transparent);
}

/* The dash is not an error: it keeps no box. */
.fx-err-cell .fi-ta-placeholder {
    color: var(--frex-ink-disabled);
}

/* --- Identifiers: TRN, numbering prefixes, the service key ---------------
   Inputs carry fx-mono; a table cell carries fx-id-cell on top of the
   column's own monospace face, which adds the engraved chip in studio and
   keeps the value one left-to-right run in any language. */
.fx-mono {
    font-family: var(--mono-font-family, ui-monospace, monospace);
    font-kerning: none;
    letter-spacing: 0;
}

.fx-id-cell .fi-ta-text.fi-ta-text-item {
    display: inline-block;
    font-size: var(--frex-text-xs);
    direction: ltr;
    unicode-bidi: isolate;
}

.dark .fx-id-cell .fi-ta-text.fi-ta-text-item {
    inline-size: auto;
    min-inline-size: 0;
    margin-block: 0.625rem;
    margin-inline-start: calc(var(--frex-cell-pad-inline) - 0.375rem);
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    color: #C9C1B6;
    background: rgba(255, 248, 240, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 248, 240, 0.08);
}

/* --- Edit and create pages: clients, companies, staff, access levels, profile ---
   The content width is set in PHP per page. The title block may shrink so a
   long name (Persian too) wraps instead of pushing the actions out. */
:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-header > div:first-child {
    min-inline-size: 0;
}

:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-header-heading {
    overflow-wrap: anywhere;
}

/* Rhythm: 14px between the cards and between the fields (Filament's is 24). */
:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-sc-form {
    gap: 0.875rem;
}

:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-sc-form .fi-sc-has-gap:has(> .fi-grid-col > .fi-sc-component > .fi-sc-section) {
    row-gap: 0.875rem;
}

:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-section-content,
:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-section-content .fi-sc-has-gap {
    gap: 0.875rem;
}

/* The actions card: Save, Cancel, and Delete at the end edge. One treatment for
   the pages above; it sits under the cards, not inside one, because Filament
   keeps the form's actions outside its sections. */
:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-sc-form .fi-sc-actions {
    padding: 0.75rem 1rem;
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-foot-fill);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
}

:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-sc-actions .fi-ac {
    align-items: center;
    gap: 0.5rem;
}

:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fx-act-end {
    margin-inline-start: auto;
}

/* --- Access levels list --------------------------------------------------
   A count and its unit ("6 widgets"): the figure is full ink, the unit steps
   back. A red cell (an empty dashboard) keeps the unit red too. */
.fx-figure {
    font-weight: var(--frex-weight-figure-total);
    font-variant-numeric: tabular-nums;
}

.fx-unit {
    margin-inline-start: 0.1875rem;
    font-size: var(--frex-text-xs);
    font-weight: 400;
    color: var(--frex-ink-muted);
}

.fi-color-danger .fx-unit {
    color: inherit;
}

/* "Built in": a small outlined tag after the name, gold in studio. */
.fx-tag {
    margin-inline-start: 0.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    vertical-align: 0.0625rem;
    color: var(--frex-ink-2);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-border);
}

.dark .fx-tag {
    color: var(--frex-hue-sales);
    background: rgba(232, 200, 96, 0.08);
    box-shadow: inset 0 0 0 1px rgba(232, 200, 96, 0.24);
}

/* --- Access level edit: permission boxes ---------------------------------
   Counters are CSS: each ticked checkbox counts itself into its box ("7/7")
   and into the card ("14 of 30 granted"), so there is no round trip and the
   numbers follow a click at once. The counting pseudo-elements sit after the
   checkboxes in document order and are moved into place with positioning;
   moved before them they would read 0. data-total and data-of come from PHP. */
.fx-perms {
    position: relative;
    counter-reset: fx-granted;
}

.fx-perms::after {
    content: counter(fx-granted) ' ' attr(data-of);
    position: absolute;
    inset-block-start: 0.8125rem;
    inset-inline-end: 1rem;
    font-size: var(--frex-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink-muted);
    pointer-events: none;
}

.fx-perm-box {
    position: relative;
    counter-reset: fx-ticked 0;
    align-self: start;
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-border);
    transition: box-shadow var(--frex-dur-fast) var(--frex-ease-out);
}

.fx-perm-box .fi-checkbox-input:checked {
    counter-increment: fx-ticked fx-granted;
}

/* A box with something ticked is lit: the accent edge, and in studio a faint glow. */
.fx-perm-box:has(.fi-checkbox-input:checked) {
    box-shadow: inset 0 0 0 1px var(--frex-accent-soft-edge);
}

.dark .fx-perm-box:has(.fi-checkbox-input:checked) {
    background: linear-gradient(180deg, rgba(252, 151, 0, 0.07), rgba(252, 151, 0, 0.02));
    box-shadow: inset 0 0 0 1px rgba(252, 151, 0, 0.34), 0 0 14px -6px rgba(252, 151, 0, 0.5);
}

/* The box header is the label row; the count and the All / Clear link sit at its end. */
.fx-perm-box .fi-fo-field-label-col {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--frex-hairline);
}

.fx-perm-box .fi-fo-checkbox-list-actions {
    position: absolute;
    inset-block-start: 0.4375rem;
    inset-inline-end: 0.75rem;
    margin: 0;
    font-size: var(--frex-text-xs);
}

.fx-perm-box::after {
    content: counter(fx-ticked) '/' attr(data-total);
    position: absolute;
    inset-block-start: 0.5625rem;
    inset-inline-end: 3.75rem;
    font-size: var(--frex-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink-muted);
    pointer-events: none;
}

/* Persian "Clear" is wider than the English word: the count makes room for it. */
html[dir='rtl'] .fx-perm-box::after {
    inset-inline-end: 5.25rem;
}

.fx-perm-box:has(.fi-checkbox-input:checked)::after {
    color: var(--frex-ink-accent);
}

.fx-perm-box .fi-fo-checkbox-list-options {
    gap: 0;
    padding: 0.375rem 0.75rem 0.625rem;
}

.fx-perm-box .fi-fo-checkbox-list-option-ctn {
    padding-block: 0.1875rem;
}

.fx-perm-box .fi-fo-checkbox-list-option-label {
    font-size: var(--frex-text-sm);
    color: var(--frex-ink);
}

/* Dashboard blocks: a name over one muted sentence, three across. */
.fx-block-help .fi-sc-text.fi-font-medium {
    color: var(--frex-ink);
}

:is(:is(.fi-resource-clients, .fi-resource-companies, .fi-resource-users, .fi-resource-roles):is(.fi-resource-edit-record-page, .fi-resource-create-record-page), .fx-page-profile) .fi-section-content .fx-block-help > .fi-sc-has-gap {
    gap: 0.125rem;
}

/* --- Clients list ----------------------------------------------------------
   Money owed that is not (necessarily) late: bold full ink, and in studio a
   warm plate behind it. fx-money--owed (shared) stays the red late form;
   fx-money--plate is the same plate on a retainer's monthly figure. The
   plate's end margin cancels its padding, so the figure keeps the column edge. */
:is(.fx-money--due, .fx-money--plate) .fx-fig {
    font-weight: var(--frex-weight-figure-total);
    color: var(--frex-ink);
}

.dark :is(.fx-money--due, .fx-money--plate) {
    display: inline-block;
    padding: 0.125rem 0.4375rem;
    margin-block: -0.125rem;
    margin-inline-end: -0.4375rem;
    border-radius: var(--frex-radius-control);
    background: linear-gradient(180deg, rgba(255, 174, 61, 0.12), rgba(255, 174, 61, 0.05));
    box-shadow: inset 0 0 0 1px rgba(255, 174, 61, 0.2);
}

/* The client code is a reference in the secondary ink, a shade warmer in studio. */
.dark .fi-resource-clients .fx-ref-cell .fi-ta-text-item {
    color: #A8A096;
}

/* A card whose description is a state line ("Dubai, AE", "Nothing recorded"): it
   sits beside the title, and only while the card is closed. The extra attributes
   land on the outer wrapper, so the closed state is reached through a descendant. */
.fx-state-line .fi-section-header-text-ctn {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.fx-state-line .fi-section-header-description {
    margin: 0;
}

.fx-state-line .fi-section:not(.fi-collapsed) .fi-section-header-description {
    display: none;
}

/* --- Client edit: the code and the status ride on the heading row ----------
   The header's first child holds the breadcrumbs, the heading and the
   subheading (which is the code and the badge, see head-meta.blade.php). */
.fi-resource-clients.fi-resource-edit-record-page .fi-header > div:first-child {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
}

.fi-resource-clients.fi-resource-edit-record-page .fi-header .fi-breadcrumbs {
    grid-column: 1 / -1;
}

.fi-resource-clients.fi-resource-edit-record-page .fi-header .fi-header-subheading {
    margin: 0;
}

/* --- Company edit: "Next invoice  INV-2026-0001" ---------------------------
   The label quiet, the number as the identifier chip. */
.fx-next-no {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-next-no .fx-mono {
    font-size: var(--frex-text-xs);
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    color: var(--frex-ink-2);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
}

/* --- Retainers ---------------------------------------------------------------
   The VAT basis before the figure ("plus VAT · 5%"): quiet, so the figure
   keeps the end edge of the column and the row stays one line. */
.fx-basis {
    margin-inline-end: 0.5rem;
    font-size: var(--frex-text-xs);
    font-weight: 400;
    color: var(--frex-ink-muted);
    white-space: nowrap;
}

/* A paused row: the date and the figure step back. They are still data, in the muted ink. */
.fx-when-off .fi-ta-text-item,
.fi-ta-row.fx-row-paused .fx-money--plate .fx-fig {
    color: var(--frex-ink-muted);
}

.dark .fi-ta-row.fx-row-paused .fx-money--plate {
    background: none;
    box-shadow: none;
}

/* Dialog groups: a hairline and a micro label instead of a card; the dot only in studio.
   The extra attributes land on the outer wrapper, so every rule goes through > .fi-section
   (which also keeps them off nested sections). */
.fx-dlg-group {
    padding-block-start: 0.875rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-dlg-group > .fi-section {
    gap: 0;
}

.fx-dlg-group > .fi-section > .fi-section-header {
    padding: 0;
    min-block-size: 0;
    background: none;
}

.fx-dlg-group .fi-section-header-heading {
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--frex-ink-disabled);
}

.fx-dlg-group > .fi-section > .fi-section-content-ctn {
    border: 0;
}

.fx-dlg-group > .fi-section > .fi-section-content-ctn > .fi-section-content {
    padding: 0.625rem 0 0;
}

.dark .fx-dlg-group .fi-section-header-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    color: var(--frex-ink-faint);
}

.dark .fx-dlg-group .fi-section-header-heading::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--frex-sec-hue);
    box-shadow: 0 0 6px color-mix(in srgb, var(--frex-sec-hue) 50%, transparent);
}

/* --- Services & prices ----------------------------------------------------------
   The service key: an identifier under the name. */
.fx-key {
    display: inline-block;
    font-family: var(--mono-font-family, ui-monospace, monospace);
    font-size: var(--frex-text-2xs);
    letter-spacing: 0;
    color: var(--frex-ink-muted);
    unicode-bidi: isolate;
}

.dark .fx-key {
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    color: #A8A096;
    background: rgba(255, 248, 240, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 248, 240, 0.08);
}

/* Starting price: "from AED 4,000" over "one-time", figures tabular, the unit words quiet. */
.fx-price {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

.fx-price .fx-from,
.fx-price .fx-cur {
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
}

.fx-price .fx-cur {
    letter-spacing: 0.04em;
}

.fx-price .fx-amt {
    font-weight: var(--frex-weight-figure-total);
    color: var(--frex-ink);
}

.fx-price .fx-per {
    display: block;
    margin-block-start: 0.125rem;
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
}

.fx-price--text {
    display: block;
    max-inline-size: 22rem;
    white-space: normal;
    line-height: 1.35;
    unicode-bidi: plaintext;
}

/* A service priced in more than one currency lists each starting price, AED and CAD side by side. */
.fx-price-sep {
    vertical-align: top;
    color: var(--frex-ink-muted);
}

/* --- Profile: the same frame as the staff form ----------------------------------
   The two-factor rows read as a list inside their card. */
.fx-page-profile .fi-header-heading {
    font-size: var(--frex-text-xl);
}

.fx-page-profile .fi-section-content .fi-sc-section {
    margin: 0;
}

/* --- Sign-in page ------------------------------------------------------------------
   The foundation draws the card (.fi-simple-main: fill, radius, ring, shadow) and sizes
   the wordmark; this only changes the layout inside it: the DS card, a left-aligned mark,
   a 20px heading with one quiet line, and 40px controls on this page alone. */
.fi-simple-main {
    padding: 1.5rem;
}

.fi-simple-page-content {
    row-gap: 1.25rem;
}

.fi-simple-header {
    align-items: flex-start;
    row-gap: 0.25rem;
}

.fi-simple-main .fi-logo {
    margin-inline: 0;
    margin-block-end: 0.75rem;
}

.fi-simple-header-heading {
    text-align: start;
    font-size: var(--frex-text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--frex-ink);
}

.fi-simple-header-subheading {
    margin-block-start: 0;
    text-align: start;
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fi-simple-page input.fi-input {
    padding-block: 0.5rem;
}

.fi-simple-page .fi-btn {
    min-block-size: 2.5rem;
}

/* Language and theme at the top end of the viewport. */
.fx-guest-controls {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* A 16px gutter around the card on a phone (Filament runs it edge to edge below 40rem). */
.fi-simple-main-ctn {
    padding-inline: 1rem;
}

/* --- Free text in a right-to-left page ----------------------------------------------
   A name or a description typed in English keeps the direction of its own first letter, so
   "Layla H." and a closing full stop stay in order on a Persian page (the inputs would
   otherwise take the page's direction and move the stop to the wrong end). Inputs that
   carry their own dir (identifiers, figures, emails) are left alone. */
html[dir='rtl'] :is(.fi-resource-clients, .fi-resource-companies, .fi-resource-retainers, .fi-resource-users,
    .fi-resource-roles, .fi-resource-letterheads, .fi-resource-services)
    :is(input.fi-input:is([type='text'], :not([type])), textarea.fi-input):not([dir]):not(.fx-mono):not(.fx-num) {
    unicode-bidi: plaintext;
}

/* ====================================================================
   SCREEN - SALES — the pipeline board, leads, proposals, and the proposal
   send page

   Uses the pieces in SCREENS - SHARED (money, form bar, status dot, hue
   classes) and never restates them. The pipeline's bounded-scroll
   structure stays in pipeline.blade.php on purpose: PipelineBoardTest reads
   it from the rendered page. Everything here is skin.
   ==================================================================== */

/* Plain facts in a table cell: secondary ink, no pill. Needs ->color(false) in PHP,
   because an enum column otherwise borrows the enum's own colour. */
.fx-flat .fi-ta-text-item {
    color: var(--frex-ink-2);
}

.fx-flat--inbound .fi-ta-text-item {
    color: var(--success-700);
}

.dark .fx-flat--inbound .fi-ta-text-item {
    color: var(--success-400);
}

.fx-n .fi-ta-text-item {
    font-variant-numeric: tabular-nums;
}

/* Zero is not news: a bare muted figure, whether the column draws text or a badge.
   The td. is deliberate: it has to outrank the .fi-badge:not(.fi-color) rule. */
td.fx-count-zero .fi-ta-text-item {
    color: var(--frex-ink-disabled);
}

td.fx-count-zero .fi-badge {
    padding-inline: 0;
    background: none;
    box-shadow: none;
    font-weight: 400;
    color: var(--frex-ink-disabled);
}

.fx-help {
    margin: 0;
    font-size: var(--frex-text-2xs);
    line-height: 1.45;
    color: var(--frex-ink-muted);
}

/* Active-filter strip, every table: chips, then the clear control beside them. The plane,
   the inline padding and the hairline come from the base rule. */
.fi-ta-filter-indicators {
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.4375rem;
    border-block-end: 1px solid var(--frex-hairline);
}

.fi-ta-filter-indicators > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fi-ta-filter-indicators-label {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fi-ta-filter-indicators-badges-ctn {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fi-ta-filter-indicators .fi-badge {
    min-block-size: 1.5rem;
    background: var(--frex-surface-card);
    color: var(--frex-ink);
    box-shadow: inset 0 0 0 1px var(--frex-accent-soft-edge);
}

.dark .fi-ta-filter-indicators {
    background: linear-gradient(90deg, color-mix(in srgb, var(--frex-row-hue) 7%, transparent), transparent 60%), #141312;
    border-block-end-color: rgba(255, 248, 240, .06);
}

html.dark[dir='rtl'] .fi-ta-filter-indicators {
    background: linear-gradient(270deg, color-mix(in srgb, var(--frex-row-hue) 7%, transparent), transparent 60%), #141312;
}

.dark .fi-ta-filter-indicators .fi-badge {
    color: #EDE6DC;
    background: color-mix(in srgb, var(--frex-row-hue) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frex-row-hue) 30%, transparent);
}

/* Row-end icon buttons: quiet until the row is hovered or focused; a due action stays full strength. */
:is(.fi-resource-leads, .fi-resource-proposals) .fi-ta-row .fi-ta-actions .fi-icon-btn {
    opacity: 0.55;
    transition: opacity var(--frex-dur-fast) var(--frex-ease-out);
}

:is(.fi-resource-leads, .fi-resource-proposals) .fi-ta-row:is(:hover, :focus-within) .fi-ta-actions .fi-icon-btn,
:is(.fi-resource-leads, .fi-resource-proposals) .fi-ta-row .fi-ta-actions .fi-icon-btn.fi-color-warning {
    opacity: 1;
}

/* Nested sunken card (Section::secondary()). The selector is written to outrank the base card rule on its own. */
.fi-section.fi-secondary:not(.fi-aside):not(.fi-section-not-contained) {
    background: var(--frex-surface-sunken);
    box-shadow: 0 0 0 1px var(--frex-hairline);
}

.dark .fi-section.fi-secondary:not(.fi-aside):not(.fi-section-not-contained) {
    background: var(--frex-surface-sunken);
    box-shadow: 0 0 0 1px rgba(255, 248, 240, .06);
}

.fi-section.fi-secondary:not(.fi-aside):not(.fi-section-not-contained) > .fi-section-header {
    background: transparent;
}

/* Callout (x-filament::callout and the schema Callout): Filament builds the tint and ring
   from the ramps; only the type scale is set here. */
.fi-callout .fi-callout-heading {
    font-size: var(--frex-text-sm);
    font-weight: 500;
}

.fi-callout .fi-callout-description {
    font-size: var(--frex-text-xs);
    line-height: 1.5;
}

/* --- Pipeline: skin only ------------------------------------------------- */
.fx-pipeline__col {
    --fx-stage-hue: var(--frex-ink-faint);
    --fx-stage-tint: transparent;
    position: relative;
    background: var(--frex-surface-sunken);
    border: 1px solid var(--frex-hairline);
    border-radius: var(--frex-radius-surface);
    overflow: hidden;
}

.fx-pipeline__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 0;
    cursor: pointer;
    user-select: none;
}

.fx-pipeline__head:focus-visible {
    outline: 2px solid var(--frex-focus);
    outline-offset: -2px;
}

.fx-pipeline__name {
    flex: 1;
    min-inline-size: 0;
    font-size: var(--frex-text-sm);
    font-weight: 700;
    color: var(--frex-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-pipeline__count {
    min-inline-size: 20px;
    block-size: 18px;
    padding-inline: 5px;
    display: inline-grid;
    place-items: center;
    font-size: var(--frex-text-2xs);
    font-variant-numeric: tabular-nums;
    border-radius: 4px;
    background: var(--frex-surface-active);
    color: var(--frex-ink-2);
}

.fx-pipeline__hint {
    margin: 0;
    padding: 4px 12px 10px;
    font-size: var(--frex-text-2xs);
    line-height: 1.4;
    color: var(--frex-ink-muted);
    border-block-end: 1px solid var(--frex-hairline);
}

.fx-pipeline__cards {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fx-pipeline__card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    text-decoration: none;
    color: inherit;
    background: var(--frex-card-fill);
    border: 1px solid var(--frex-border);
    border-radius: var(--frex-radius-control);
    cursor: grab;
    transition: border-color var(--frex-dur-fast) var(--frex-ease-out), box-shadow var(--frex-dur-fast) var(--frex-ease-out);
}

.fx-pipeline__card:hover {
    border-color: var(--frex-border-strong);
    box-shadow: var(--frex-shadow-card);
}

.fx-pipeline__company {
    font-size: var(--frex-text-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--frex-ink);
}

.fx-pipeline__meta {
    font-size: var(--frex-text-2xs);
    line-height: 1.45;
    color: var(--frex-ink-muted);
}

.fx-pipeline__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 1px;
}

.fx-pipeline__stars {
    color: var(--warning-600);
    font-size: 10px;
    letter-spacing: 1px;
}

.fx-pipeline__src,
.fx-pipeline__age {
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-disabled);
    white-space: nowrap;
}

.fx-pipeline__age {
    margin-inline-start: auto;
    font-variant-numeric: proportional-nums;
}

.fx-pipeline__empty {
    margin: 0;
    padding: 18px 10px;
    text-align: center;
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-disabled);
}

.fx-pipeline__more {
    margin: 0;
    padding: 0 8px 8px;
    text-align: center;
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
}

.fx-pipeline__legend {
    margin: 10px 0 0;
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-pipeline__ghost {
    background: var(--frex-accent-soft);
    border: 1px dashed var(--frex-accent);
}

.fx-pipeline__ghost > * {
    visibility: hidden;
}

/* Won reads as a win; Lost steps back. */
.fx-pipeline__col--won {
    border-color: var(--success-300);
}

.fx-pipeline__col--won .fx-pipeline__name {
    color: var(--success-700);
}

.fx-pipeline__col--lost {
    background: var(--frex-surface);
}

.fx-pipeline__col--lost .fx-pipeline__card {
    background: transparent;
    border-color: var(--frex-hairline);
    box-shadow: none;
}

.fx-pipeline__col--lost .fx-pipeline__card:hover {
    background: var(--frex-surface-card);
}

.fx-pipeline__col--lost .fx-pipeline__company {
    color: var(--frex-ink-2);
}

/* Drop target: Lost only (data-droppable comes from droppableStages()). */
.fx-pipeline__col[data-droppable] {
    border-style: dashed;
}

.fx-pipeline[data-dragging] .fx-pipeline__col[data-droppable] {
    border-color: var(--frex-accent);
    box-shadow: 0 0 0 3px var(--frex-accent-soft-edge);
}

/* Studio: a hue per stage (blue, gold, orange, green; Lost neutral). Light keeps none. */
.dark .fx-pipeline__col--new,
.dark .fx-pipeline__col--researched {
    --fx-stage-hue: var(--frex-hue-work);
    --fx-stage-tint: rgba(141, 180, 221, .10);
}

.dark .fx-pipeline__col--drafted,
.dark .fx-pipeline__col--sent {
    --fx-stage-hue: var(--frex-hue-sales);
    --fx-stage-tint: rgba(232, 200, 96, .10);
}

.dark .fx-pipeline__col--replied {
    --fx-stage-hue: var(--frex-hue-billing);
    --fx-stage-tint: rgba(255, 174, 61, .10);
}

.dark .fx-pipeline__col--won {
    --fx-stage-hue: var(--frex-hue-clients);
    --fx-stage-tint: rgba(111, 203, 148, .10);
}

.dark .fx-pipeline__col--won .fx-pipeline__name {
    color: var(--success-400);
}

.dark .fx-pipeline__col--lost {
    --fx-stage-hue: #8A8379;
    --fx-stage-tint: rgba(255, 248, 240, .04);
}

.dark .fx-pipeline__col {
    background: linear-gradient(180deg, var(--fx-stage-tint) 0, transparent 64px), linear-gradient(180deg, #161514, #131211);
    border-color: rgba(255, 248, 240, .07);
}

.dark .fx-pipeline__col--won {
    border-color: rgba(111, 203, 148, .22);
}

.dark .fx-pipeline__col--lost {
    background: linear-gradient(180deg, #141312, #111010);
}

.dark .fx-pipeline__col::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--fx-stage-hue) 25%, var(--fx-stage-hue) 75%, transparent);
    opacity: .85;
    pointer-events: none;
}

.dark .fx-pipeline__hint {
    border-block-end-color: rgba(255, 248, 240, .07);
    color: var(--frex-ink-faint);
}

.dark .fx-pipeline__name {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #EDE6DC;
    padding-inline-start: 10px;
    margin-inline-start: -10px;
    padding-block: 3px;
    margin-block: -3px;
}

.dark .fx-pipeline__name::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--fx-stage-hue);
    box-shadow: 0 0 0 3px var(--fx-stage-tint), 0 0 8px var(--fx-stage-hue);
}

.dark .fx-pipeline__col--lost .fx-pipeline__name::before {
    box-shadow: none;
}

.dark .fx-pipeline__count {
    background: var(--fx-stage-tint);
    color: #EDE6DC;
    box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .06);
}

.dark .fx-pipeline__card {
    background: linear-gradient(180deg, #1C1B19, #181716);
    border-color: rgba(255, 248, 240, .08);
    box-shadow: inset 0 1px 0 rgba(255, 248, 240, .03), 0 4px 10px -6px rgba(0, 0, 0, .6);
}

.dark .fx-pipeline__card:hover {
    border-color: color-mix(in srgb, var(--fx-stage-hue) 45%, transparent);
    box-shadow: inset 2px 0 0 var(--fx-stage-hue), 0 10px 22px -12px rgba(0, 0, 0, .7);
}

html.dark[dir='rtl'] .fx-pipeline__card:hover {
    box-shadow: inset -2px 0 0 var(--fx-stage-hue), 0 10px 22px -12px rgba(0, 0, 0, .7);
}

.dark .fx-pipeline__col--lost .fx-pipeline__card {
    background: transparent;
    box-shadow: none;
}

.dark .fx-pipeline__col--lost .fx-pipeline__company {
    color: #A8A096;
}

.dark .fx-pipeline__company {
    color: #F0E9DF;
}

.dark .fx-pipeline__stars {
    color: var(--frex-hue-sales);
    text-shadow: 0 0 3px rgba(232, 200, 96, .45);
}

.dark .fx-pipeline__src,
.dark .fx-pipeline__age {
    color: #8A8379;
}

/* --- Leads list ---------------------------------------------------------- */

/* The company over its contact, or the lead over its subject: 9px of block padding instead of 11, so a two-line row is about
   57px as on the Clients list and not 61. */
:is(.fi-resource-leads, .fi-resource-proposals).fi-resource-list-records-page .fi-ta-text.fi-ta-text-has-descriptions:not(.fi-inline) {
    padding-block: 0.5625rem;
}

/* The search box is the templates' 280px on both sales lists. */
:is(.fi-resource-leads, .fi-resource-proposals) .fi-ta-header-toolbar .fi-ta-search-field {
    inline-size: 17.5rem;
}

/* Toolbar order as in the template: search first, then Export CSV, then the filter and column
   buttons. Filament prints Export in a block ahead of the row that holds the other three, so the
   row is flattened into the toolbar and each control is ordered. */
.fi-resource-leads .fi-ta-header-toolbar {
    column-gap: 0.5rem;
}

.fi-resource-leads .fi-ta-header-toolbar > div:has(> .fi-ta-search-field) {
    display: contents;
}

.fi-resource-leads .fi-ta-header-toolbar .fi-ta-search-field {
    order: 1;
    margin-inline-end: 0;
}

.fi-resource-leads .fi-ta-header-toolbar > .fi-ta-actions.fi-align-start {
    order: 2;
    margin-inline-start: auto;
}

.fi-resource-leads .fi-ta-header-toolbar .fi-ta-filters-dropdown {
    order: 3;
}

.fi-resource-leads .fi-ta-header-toolbar .fi-ta-col-manager-dropdown {
    order: 4;
}


/* Interest, edited in place: a 28px control, 130px wide, the chevron always on. */
.fi-resource-leads .fi-ta-select {
    min-inline-size: 0;
    /* 130px control plus Filament's 12px each side */
    inline-size: 9.625rem;
    padding-block: 0.375rem;
}

.fi-resource-leads .fi-ta-select select.fi-select-input {
    padding-block: 0.25rem;
    font-size: var(--frex-text-xs);
    line-height: 1.25rem;
}

.fi-resource-leads .fi-ta-select .fi-input-wrp {
    border-radius: var(--frex-radius-control);
}

.dark .fi-resource-leads .fi-ta-select .fi-input-wrp:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frex-hue-work) 40%, transparent), inset 0 1px 2px rgba(0, 0, 0, .45);
}

/* --- Lead edit and create ---------------------------------------------------- */

/* 14px between the form cards (Filament's schema gap is 24px). */
.fi-resource-leads:is(.fi-resource-edit-record-page, .fi-resource-create-record-page) .fi-page-content .fi-sc-has-gap:has(> .fi-grid-col > .fi-sc-component > .fi-sc-section) {
    gap: 0.875rem;
}

/* The fifth glyph hue: internal sections (a lead's "Where it stands", a proposal's note). */
.fx-hue-grey {
    --frex-sec-hue: var(--frex-hue-settings);
}

/* The heading's name: bidi-isolated so a Persian company keeps its own order. */
.fx-iso {
    unicode-bidi: isolate;
}

/* Services: the label and a one-line description. */
.fi-resource-leads .fi-fo-checkbox-list-option-label {
    font-size: var(--frex-text-md);
}

.fi-resource-leads .fi-fo-checkbox-list-option-description {
    margin-block-start: 0.25rem;
    font-size: var(--frex-text-2xs);
    line-height: 1.45;
    color: var(--frex-ink-muted);
}

/* The Fill dialog's numbered steps (any later two-step dialog can use them). */
.fx-step {
    display: grid;
    grid-template-columns: 1.375rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.fx-step__n,
.fx-step-field::before {
    display: grid;
    place-items: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-radius: 50%;
    font-size: var(--frex-text-2xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink-accent);
    background: var(--frex-accent-soft);
    box-shadow: inset 0 0 0 1px var(--frex-accent-soft-edge);
}

.fx-step-field {
    position: relative;
    padding-inline-start: 2.125rem;
}

.fx-step-field::before {
    content: "2";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
}

.fx-step__title {
    margin: 0 0 0.375rem;
    font-size: var(--frex-text-md);
    font-weight: 500;
    line-height: 1.375rem;
    color: var(--frex-ink);
}

.fx-step__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-inline-size: 0;
}

/* The research prompt (it used to be a style block in research-prompt.blade.php). */
.fx-rp {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fx-rp__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fx-rp__meta,
.fx-rp__hint {
    margin: 0;
    font-size: var(--frex-text-xs);
    line-height: 1.7;
    color: var(--frex-ink-muted);
}

.fx-rp__text {
    inline-size: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-sunken);
    color: var(--frex-ink-2);
    box-shadow: inset 0 0 0 1px var(--frex-border);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.71875rem;
    line-height: 1.7;
    resize: vertical;
}

.fx-rp__disclosure {
    padding: 0;
    border: 0;
    background: none;
    color: var(--frex-link);
    font-size: var(--frex-text-xs);
    font-weight: 500;
    cursor: pointer;
}

.fx-rp__disclosure:hover {
    color: var(--frex-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Free text on a Persian page: a company or a note typed in English keeps its full stop in place
   (the page's direction would move it to the wrong end). Fields that carry their own dir are left alone. */
html[dir='rtl'] :is(.fi-resource-leads, .fi-resource-proposals)
    :is(input.fi-input:is([type='text'], :not([type])), textarea.fi-input):not([dir]):not(.fx-mono):not(.fx-num) {
    unicode-bidi: plaintext;
}

/* --- Proposals list --------------------------------------------------------- */
.fx-lang .fi-ta-text-item {
    font-size: var(--frex-text-xs);
    letter-spacing: 0.04em;
    color: var(--frex-ink-2);
}

.fx-age {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fx-age__n {
    font-weight: 500;
    color: var(--frex-ink);
}

.fx-age__u {
    margin-inline-start: 0.25rem;
    color: var(--frex-ink-muted);
}

/* --- Proposal edit ---------------------------------------------------------- */

/* The sections list: each item a 38px tile with an ordinal. A CSS counter in DOM order,
   so there is no nth-child. */
.fx-sections .fi-fo-repeater-items {
    counter-reset: fx-sec;
}

.fx-sections .fi-fo-repeater-item {
    counter-increment: fx-sec;
    background: var(--frex-surface-sunken);
    box-shadow: 0 0 0 1px var(--frex-hairline);
    transition: box-shadow var(--frex-dur-fast) var(--frex-ease-out), background var(--frex-dur-fast) var(--frex-ease-out);
}

.fx-sections .fi-fo-repeater-item:hover {
    background: var(--frex-surface-card);
    box-shadow: 0 0 0 1px var(--frex-border-strong);
}

.fx-sections .fi-fo-repeater-item-header {
    min-block-size: 2.375rem;
    padding-block: 0.25rem;
}

.fx-sections .fi-fo-repeater-item-header::before {
    content: counter(fx-sec);
    order: -1;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-inline-end: 0.5rem;
    border-radius: 4px;
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink-muted);
    background: var(--frex-surface-active);
}

.fx-sections .fi-fo-repeater-item-header-label {
    font-size: var(--frex-text-md);
    font-weight: 500;
    color: var(--frex-ink);
}

/* Rewrite and remove stay out of sight until the tile is pointed at, focused or open. */
.fx-sections .fi-fo-repeater-item-header-end-actions > li:not(.fi-fo-repeater-item-header-collapsible-actions) {
    opacity: 0;
    transition: opacity var(--frex-dur-fast) var(--frex-ease-out);
}

.fx-sections .fi-fo-repeater-item:is(:hover, :focus-within, :not(.fi-collapsed)) .fi-fo-repeater-item-header-end-actions > li {
    opacity: 1;
}

/* The open section: an accent edge on the inline-start, the editor full width inside. */
.fx-sections .fi-fo-repeater-item:not(.fi-collapsed) {
    background: var(--frex-surface-card);
    box-shadow: inset 2px 0 0 var(--frex-accent), 0 0 0 1px var(--frex-border);
}

html[dir='rtl'] .fx-sections .fi-fo-repeater-item:not(.fi-collapsed) {
    box-shadow: inset -2px 0 0 var(--frex-accent), 0 0 0 1px var(--frex-border);
}

.dark .fx-sections .fi-fo-repeater-item:hover {
    box-shadow: inset 2px 0 0 var(--frex-hue-sales), 0 0 0 1px color-mix(in srgb, var(--frex-hue-sales) 38%, transparent);
}

html.dark[dir='rtl'] .fx-sections .fi-fo-repeater-item:hover {
    box-shadow: inset -2px 0 0 var(--frex-hue-sales), 0 0 0 1px color-mix(in srgb, var(--frex-hue-sales) 38%, transparent);
}

.fx-sections .fi-fo-repeater-actions {
    justify-content: flex-end;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
    font-size: var(--frex-text-xs);
}

.fx-sections .fi-fo-repeater-actions .fi-link {
    font-size: var(--frex-text-xs);
}

.fx-sections .fi-fo-repeater-add {
    margin-block-start: 0.25rem;
}

/* The aside: the reading-time figure list. */
.fx-stats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.3125rem;
    border-block-end: 1px solid var(--frex-hairline);
}

.fx-stat:last-child {
    border-block-end: 0;
}

.fx-stat__k {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-stat__v {
    margin: 0;
    font-size: var(--frex-text-md);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--frex-ink);
}

.fx-stat__v--quiet {
    font-weight: 400;
}

.fx-stats--channels {
    margin-block-start: 0.5rem;
}

.fx-opens {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: flex-start;
}

.fx-opens > .fx-stats {
    align-self: stretch;
}

/* The aside: the follow-up state strip. */
.fx-nudge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
}

.fx-nudge__icon {
    flex: none;
    inline-size: 0.9375rem;
    block-size: 0.9375rem;
    color: var(--frex-ink-muted);
}

.fx-nudge__text {
    margin: 0;
    font-size: var(--frex-text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--frex-ink);
}

.fx-nudge--due {
    background: color-mix(in srgb, var(--warning-500) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning-500) 34%, transparent);
}

.fx-nudge--due .fx-nudge__icon,
.fx-nudge--due .fx-nudge__text {
    color: var(--warning-800);
}

.dark .fx-nudge--due .fx-nudge__icon,
.dark .fx-nudge--due .fx-nudge__text {
    color: var(--warning-300);
}

/* --- Proposal send ------------------------------------------------------------- */
.fx-send {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.fx-send__dot {
    display: inline-block;
    flex: none;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    margin-inline-end: 0.4375rem;
    border-radius: 50%;
    background: var(--frex-border-strong);
}

.fx-send__dot[data-opened] {
    background: var(--success-600);
}

.dark .fx-send__dot[data-opened] {
    background: var(--success-400);
}

.fx-send__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fx-send__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 0;
}

.fx-send__label {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--frex-ink-2);
}

.fx-send__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.75rem;
}

.fx-send__linkrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fx-send__url {
    flex: 1;
    min-inline-size: 0;
    block-size: var(--frex-control-h);
    padding-inline: 0.625rem;
    border: 0;
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
    font-family: var(--mono-font-family, ui-monospace, monospace);
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-2);
    direction: ltr;
    text-overflow: ellipsis;
}

.fx-send__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fx-send__missing {
    font-size: var(--frex-text-xs);
    color: var(--warning-700);
}

.dark .fx-send__missing {
    color: var(--warning-300);
}

.fx-send__back {
    display: flex;
}

/* The back arrow points to the reading start. */
html[dir='rtl'] .fx-send__back .fi-icon {
    transform: scaleX(-1);
}

.fx-page-proposal-send .fi-header-subheading .fx-send__co {
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fx-help--prose {
    max-inline-size: 76ch;
}

/* ====================================================================
   SCREEN - SALES SETTINGS — AI and proposals, Email, Google Calendar,
   Google Drive, Telegram bot

   Each page is a Filament page with a hand-written view: status areas are
   x-filament::section cards, the schema Sections are the form's cards, and
   the save row is .fx-form-bar from SCREENS - SHARED. The few classes below
   are what those pages share (the status line, the copy field, the button
   row) and then what each one needs.
   ==================================================================== */

.fx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fx-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.875rem;
}

.fx-status__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--frex-text-xs);
}

.fx-status__item + .fx-status__item {
    padding-inline-start: 0.875rem;
    border-inline-start: 1px solid var(--frex-hairline);
}

.fx-status__l {
    color: var(--frex-ink-muted);
}

.fx-status__v {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink);
    unicode-bidi: isolate;
}

.fx-status__v--success {
    color: var(--success-700);
}

.fx-status__v--danger {
    color: var(--frex-money-late);
}

.dark .fx-status__v--success {
    color: var(--success-400);
}

.fx-status__dot {
    flex: none;
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    border-radius: 50%;
    background: var(--frex-ink-faint);
}

.fx-status__dot--success {
    background: var(--success-600);
}

.fx-status__dot--danger {
    background: var(--danger-600);
}

.dark .fx-status__dot--success {
    background: var(--success-400);
}

.dark .fx-status__dot--danger {
    background: var(--danger-400);
}

.fx-copyfield {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.fx-copyfield__l {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fx-copyfield__row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
}

.fx-copyfield__v {
    flex: 1;
    min-inline-size: 0;
    block-size: var(--frex-control-h);
    padding-inline: 0.625rem;
    border: 0;
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
    font-family: var(--mono-font-family, ui-monospace, monospace);
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-2);
    direction: ltr;
    text-overflow: ellipsis;
}

.fx-copyfield__done {
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
}

.fx-page-settings .fi-header-subheading {
    max-inline-size: 90ch;
}

.fx-page-settings .fi-section-header-description {
    display: block;
}

/* A divided section (switch rows, the colour rows): Filament pads each row 24px, which makes a
   three-row card taller than the page needs, and 24px at the sides, which sets the switches in
   further than the fields of the cards above and below. */
.fx-page-settings .fi-section.fi-divided .fi-grid-col {
    padding-block: 0.875rem;
    padding-inline: 0;
}

/* --- Telegram bot ------------------------------------------------------------------ */
.fx-error {
    margin: 0;
    font-size: var(--frex-text-sm);
    line-height: 1.5;
    color: var(--danger-700);
}

.dark .fx-error {
    color: var(--danger-300);
}

.fx-page-telegram .fi-callout-description {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* --- Google Drive ------------------------------------------------------------------ */
.fx-connect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 0.875rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-connect .fx-help {
    flex-basis: 100%;
}

.fx-connect .fi-link {
    font-size: var(--frex-text-xs);
    font-weight: 500;
}

.fx-page-drive .fi-section-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* --- Google Calendar: who is what colour -------------------------------------- */
.fx-colours .fi-fo-field-has-inline-label {
    grid-template-columns: minmax(0, 1fr) 15rem;
}

.fx-colours .fi-fo-field-has-inline-label .fi-fo-field-content-col {
    grid-column: auto;
}

.fx-colours .fi-fo-field-label-content {
    font-size: var(--frex-text-md);
    font-weight: 500;
    color: var(--frex-ink);
}

.fx-colours .fi-fo-field {
    padding-block: 0.1875rem;
}

.fx-page-settings .fx-colours .fi-grid-col {
    padding-block: 0.4375rem;
}

.fx-swatches {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--frex-text-sm);
    color: var(--frex-ink-2);
}

.fx-swatches li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* A colour option in a picker: the dot, then the name. */
.fx-swatch-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fx-swatch {
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--frex-border-strong);
}

/* --- AI and proposals: the spend tiles and the two tables --------------------- */
.fx-ai-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 64rem) {
    .fx-ai-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fx-ai-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
}

.fx-ai-kpi p {
    margin: 0;
}

.fx-ai-kpi__l {
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-muted);
}

.fx-ai-kpi__v {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink);
}

.fx-ai-kpi__n {
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
}

.fx-ai-kpi--key {
    box-shadow: 0 0 0 1px var(--frex-accent-soft-edge), var(--frex-shadow-card);
}

.fx-ai-kpi--key .fx-ai-kpi__v {
    color: var(--frex-ink-accent);
}

.dark .fx-ai-kpi {
    background: linear-gradient(180deg, #1E1D1B 0%, #181817 100%);
    box-shadow: inset 0 1px 0 rgba(255, 248, 240, .055), 0 0 0 1px rgba(255, 248, 240, .085), 0 1px 2px rgba(0, 0, 0, .35), 0 14px 28px -22px rgba(0, 0, 0, .9);
}

.dark .fx-ai-kpi--key {
    background: radial-gradient(120% 90% at 100% 0%, rgba(252, 151, 0, .13), transparent 58%), linear-gradient(180deg, #201D19 0%, #191715 100%);
    box-shadow: inset 0 1px 0 rgba(255, 200, 130, .09), 0 0 0 1px rgba(252, 151, 0, .40), 0 18px 36px -22px rgba(252, 151, 0, .45);
}

html.dark[dir='rtl'] .fx-ai-kpi--key {
    background: radial-gradient(120% 90% at 0% 0%, rgba(252, 151, 0, .13), transparent 58%), linear-gradient(180deg, #201D19 0%, #191715 100%);
}

.fx-ai-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 64rem) {
    .fx-ai-tables {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A compact data table inside a card. */
.fx-mini {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.fx-mini th {
    padding: 0.5625rem 0.75rem;
    text-align: start;
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    white-space: nowrap;
    color: var(--frex-ink-faint);
    background: var(--frex-surface-sunken);
    border-block-end: 1px solid var(--frex-border);
}

.dark .fx-mini th {
    background: linear-gradient(180deg, #151514, #131312);
    border-block-end-color: rgba(255, 248, 240, .08);
    letter-spacing: .03em;
}

.fx-mini td {
    padding: 0.5625rem 0.75rem;
    font-size: var(--frex-text-sm);
    color: var(--frex-ink);
    border-block-start: 1px solid var(--frex-hairline);
    vertical-align: middle;
}

.fx-mini tbody tr:first-child td {
    border-block-start: 0;
}

.fx-mini .fx-mini__num {
    inline-size: 5rem;
    text-align: end;
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.fx-mini__name {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-mini__sub {
    display: block;
    margin-block-start: 0.125rem;
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
    font-variant-numeric: proportional-nums;
}

/* --- Email: the two stream cards ---------------------------------------------- */
.fx-mail__streams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem;
}

.fx-mail__card {
    position: relative;
    --fx-stream-hue: var(--frex-ink-faint);
}

.fx-mail__card--proposals {
    --fx-stream-hue: var(--frex-hue-sales);
}

.fx-mail__card--system {
    --fx-stream-hue: var(--frex-hue-work);
}

.dark .fx-mail__card::before {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-start: -1px;
    block-size: 2px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, var(--fx-stream-hue) 25%, var(--fx-stream-hue) 75%, transparent);
    opacity: .8;
    pointer-events: none;
}

.fx-mail__card[data-bad] {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger-600) 55%, transparent), var(--frex-shadow-card);
}

.fx-mail__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.fx-mail__stats dt {
    font-size: var(--frex-text-2xs);
    line-height: 1.4;
    color: var(--frex-ink-muted);
}

.fx-mail__stats dd {
    margin: 0.1875rem 0 0;
}

.fx-mail__fig {
    font-size: var(--frex-text-md);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--frex-ink);
    unicode-bidi: isolate;
}

.fx-mail__fig--zero {
    font-weight: 400;
    color: var(--frex-ink-muted);
}

.fx-mail__error {
    margin: 0.625rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--frex-radius-control);
    font-family: var(--mono-font-family, ui-monospace, monospace);
    font-size: var(--frex-text-xs);
    line-height: 1.6;
    overflow-wrap: anywhere;
    color: var(--danger-700);
    background: color-mix(in srgb, var(--danger-500) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-500) 30%, transparent);
}

.dark .fx-mail__error {
    color: var(--danger-300);
}

.fx-mail__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fx-mail__to {
    margin-inline-start: auto;
    font-size: var(--frex-text-2xs);
    color: var(--frex-ink-muted);
    unicode-bidi: isolate;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====================================================================
   SCREEN - FINANCE — proforma invoices, invoices, payments, collections
   and the financial report

   Uses the pieces in SCREENS - SHARED (money, reference cells, dates) and
   never restates them. Scoped to .fi-resource-invoices / -quotes /
   -reminders, .fx-invoice, .fx-quote and .fx-report.
   ==================================================================== */

/* --- Lists: row actions are quiet until the row is in use ------------- */
:is(.fi-resource-invoices, .fi-resource-quotes, .fi-resource-reminders, .fx-invoice) .fi-ta-row .fi-ta-actions .fi-icon-btn {
    opacity: 0.55;
    transition: opacity var(--frex-dur-fast) var(--frex-ease-out);
}

:is(.fi-resource-invoices, .fi-resource-quotes, .fi-resource-reminders, .fx-invoice) .fi-ta-row:is(:hover, :focus-within) .fi-ta-actions .fi-icon-btn {
    opacity: 1;
}

@media (hover: none) {
    :is(.fi-resource-invoices, .fi-resource-quotes, .fi-resource-reminders, .fx-invoice) .fi-ta-row .fi-ta-actions .fi-icon-btn {
        opacity: 1;
    }
}

/* --- Unpaid invoices: the summary row is "what is owed" ---------------- */
.fi-resource-invoices .fi-ta-summary-row > :is(td, th) {
    background: var(--frex-surface-sunken);
}

.dark .fi-resource-invoices .fi-ta-summary-row > :is(td, th) {
    background: linear-gradient(180deg, rgba(255, 174, 61, .12), rgba(255, 174, 61, .04));
}

.fi-resource-invoices .fi-ta-summary-row-heading-cell {
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fi-resource-invoices .fi-ta-summary-row .fx-money--owed .fx-fig {
    font-size: 1.0625rem;
}

/* --- Invoice forms: system values and locked fields stay readable --------
   Number, Status and every locked field are disabled inputs. Filament greys
   them with -webkit-text-fill-color, which beats color, so both are set. */
.fx-invoice .fi-input-wrp.fi-disabled {
    background-color: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
}

.fx-invoice .fi-input-wrp.fi-disabled :is(input.fi-input, select.fi-select-input, .fi-select-input-btn, .fi-fo-date-time-picker-display-text-input, textarea):disabled,
.fx-invoice .fi-input-wrp.fi-disabled .fi-select-input-btn {
    color: var(--frex-ink);
    -webkit-text-fill-color: var(--frex-ink);
    opacity: 1;
    cursor: default;
}

.fx-invoice .fi-input-wrp.fi-disabled .fi-select-input-value-remove-btn {
    display: none;
}

/* "Draft" and "Set on save" are placeholders in a system field: legible. */
.fx-invoice--new .fi-input-wrp.fi-disabled input::placeholder {
    -webkit-text-fill-color: var(--frex-ink-muted);
    color: var(--frex-ink-muted);
    opacity: 1;
}

/* Frozen: in dark the value sits on the card, with a dashed hairline instead of
   a second input style. Light keeps the sunken plane. */
.dark .fx-invoice--frozen .fi-input-wrp.fi-disabled {
    background: transparent;
    box-shadow: none;
    outline: 1px dashed var(--frex-border);
    outline-offset: -1px;
}

.fx-invoice--frozen .fi-input-wrp.fi-disabled :is(input, textarea)::placeholder {
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.fx-invoice--frozen .fi-fo-repeater-item-header {
    background: transparent;
}

.fx-lock {
    margin-block-end: 0.25rem;
}

/* Figures in inputs: end-aligned, tabular; the AED prefix steps back. */
.fx-num input.fi-input {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.fx-money-input .fi-input-wrp-prefix {
    color: var(--frex-ink-muted);
    font-size: 0.82em;
}

/* --- Line blocks: Filament's own stacked repeater, restyled -------------
   A line stays a block: the description needs the full width. Never a grid. */
.fx-invoice .fi-fo-repeater-item {
    border-radius: var(--frex-radius-control);
    box-shadow: 0 0 0 1px var(--frex-border);
    overflow: clip;
    margin-block-end: 0.625rem;
}

.dark .fx-invoice .fi-fo-repeater-item:is(:hover, :focus-within) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--frex-hue-billing) 28%, transparent), 0 8px 22px -12px rgba(0, 0, 0, .6);
}

.fx-invoice .fi-fo-repeater-item-header {
    min-block-size: 2.125rem;
    padding-block: 0;
    padding-inline: 0.625rem;
    gap: 0.5rem;
    background: var(--frex-surface-sunken);
}

.fx-invoice .fi-fo-repeater-item-header-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
}

.fx-line-ord {
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--frex-ink-muted);
}

.dark .fx-line-ord {
    color: var(--frex-hue-billing);
}

html[dir='rtl'] .fx-line-ord {
    letter-spacing: 0;
    text-transform: none;
}

.fx-line-amt {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
}

.fx-line-basis {
    font-size: var(--frex-text-2xs);
    font-weight: 400;
    color: var(--frex-ink-muted);
}

/* Move and delete come with the pointer. Filament puts the move buttons
   before the label; they go to the end, with delete. */
.fx-invoice .fi-fo-repeater-item-header-start-actions {
    order: 3;
}

.fx-invoice .fi-fo-repeater-item-header-end-actions {
    order: 4;
}

.fx-invoice .fi-fo-repeater-item-header :is(.fi-fo-repeater-item-header-start-actions, .fi-fo-repeater-item-header-end-actions) {
    opacity: 0;
    transition: opacity var(--frex-dur-fast) var(--frex-ease-out);
}

.fx-invoice .fi-fo-repeater-item:is(:hover, :focus-within) :is(.fi-fo-repeater-item-header-start-actions, .fi-fo-repeater-item-header-end-actions) {
    opacity: 1;
}

@media (hover: none) {
    .fx-invoice .fi-fo-repeater-item-header :is(.fi-fo-repeater-item-header-start-actions, .fi-fo-repeater-item-header-end-actions) {
        opacity: 1;
    }
}

.fx-invoice .fi-fo-repeater-item-content {
    padding: 0.75rem;
}

.fx-invoice .fi-fo-repeater-add {
    justify-content: flex-start;
}

/* --- Totals stack: Subtotal, VAT, Total (and Paid, Balance due) ---------- */
.fx-totals {
    margin-inline-start: auto;
    inline-size: min(100%, 20rem);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-block-start: 0.875rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-totals-note {
    margin: 0 0 0.25rem;
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-totals-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.fx-totals-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
}

.fx-totals-row dt {
    font-size: var(--frex-text-md);
    color: var(--frex-ink-2);
}

.fx-totals-row dd {
    margin: 0;
}

.fx-totals-row--grand {
    padding: 0.5rem 0.625rem;
    margin-inline: -0.625rem;
    border-radius: var(--frex-radius-control);
    background: var(--frex-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--frex-hairline);
}

.dark .fx-totals-row--grand {
    background: linear-gradient(180deg, rgba(255, 174, 61, .12), rgba(255, 174, 61, .04));
    box-shadow: inset 0 0 0 1px rgba(255, 174, 61, .22);
}

.fx-totals-row--grand dt {
    color: var(--frex-ink);
    font-weight: 500;
}

.fx-totals-row--grand .fx-fig {
    font-weight: var(--frex-weight-figure-total);
    font-size: 1.125rem;
}

.fx-totals-row--due .fx-fig {
    font-weight: var(--frex-weight-figure-total);
}

/* --- Edit heading: status, client and the dates that matter -------------- */
.fx-doc-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
}

.fx-doc-meta-item + .fx-doc-meta-item::before {
    content: "·";
    margin-inline-end: 0.75rem;
    color: var(--frex-ink-muted);
}

.fx-doc-meta-late {
    color: var(--frex-money-late);
    font-weight: 500;
}

/* "FRX-2026-0001" keeps its order in a right-to-left heading. */
.fx-invoice .fi-header-heading {
    unicode-bidi: plaintext;
}

/* --- Financial report ------------------------------------------------------
   Filter card: dates about 170px each with Run beside them, the CSV exports
   under a hairline. */
.fx-report-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fx-report-dates {
    inline-size: min(100%, 22rem);
}

.fx-report-exports {
    display: flex;
    align-items: center;
    gap: 0.375rem 0.5rem;
    flex-wrap: wrap;
    margin-block-start: 0.875rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--frex-hairline);
}

.fx-report-exports-label {
    margin-inline-end: 0.25rem;
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-2);
}

/* KPI tiles: three figures, each with its own hue (a lit top edge and a corner
   glow in studio). */
.fx-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 64rem) {
    .fx-kpis {
        grid-template-columns: 1fr;
    }
}

.fx-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border-radius: var(--frex-radius-surface);
    background: var(--frex-card-fill);
    box-shadow: 0 0 0 1px var(--frex-border), var(--frex-shadow-card);
}

.fx-kpi-l {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--frex-text-xs);
    font-weight: 500;
    color: var(--frex-ink-2);
}

.fx-kpi-l .fi-icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--fx-hue);
}

.fx-kpi-v .fx-money {
    font-size: 1.5rem;
    line-height: 1.05;
}

.fx-kpi-v .fx-money .fx-fig {
    font-weight: var(--frex-weight-figure-total);
}

.fx-kpi-n {
    font-size: var(--frex-text-xs);
    color: var(--frex-ink-muted);
}

.fx-kpi--orange { --fx-hue: var(--primary-700); }
.fx-kpi--green { --fx-hue: var(--success-700); }
.fx-kpi--gold { --fx-hue: var(--warning-700); }

.dark .fx-kpi--orange { --fx-hue: #FFAE3D; --fx-glow: rgba(255, 174, 61, .12); }
.dark .fx-kpi--green { --fx-hue: #6FCB94; --fx-glow: rgba(111, 203, 148, .12); }
.dark .fx-kpi--gold { --fx-hue: #E8C860; --fx-glow: rgba(232, 200, 96, .12); }

.dark .fx-kpi::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    opacity: .8;
    background: linear-gradient(90deg, transparent, var(--fx-hue) 30%, var(--fx-hue) 70%, transparent);
}

.dark .fx-kpi::after {
    content: "";
    position: absolute;
    inset-block-start: -60px;
    inset-inline-end: -40px;
    inline-size: 160px;
    block-size: 120px;
    background: radial-gradient(closest-side, var(--fx-glow), transparent);
    pointer-events: none;
}

/* Report tables run edge to edge inside their card. */
.fx-report-card.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
}

.fx-rt {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--frex-text-md);
}

.fx-rt th,
.fx-rt td {
    padding: 0.625rem 1rem;
    text-align: start;
    border-block-end: 1px solid var(--frex-hairline);
    white-space: nowrap;
}

.fx-rt thead th {
    block-size: 2rem;
    padding-block: 0;
    font-size: var(--frex-text-2xs);
    font-weight: 500;
    color: var(--frex-ink-muted);
    background: var(--frex-surface-sunken);
    border-block-end-color: var(--frex-border);
}

.fx-rt .fx-rt-end {
    text-align: end;
}

.fx-rt tbody tr:last-child td {
    border-block-end: 0;
}

.fx-rt tfoot :is(th, td) {
    font-weight: 500;
    border-block-end: 0;
    border-block-start: 1px solid var(--frex-border);
    background: var(--frex-surface-sunken);
}

.dark .fx-rt tfoot :is(th, td) {
    background: linear-gradient(180deg, rgba(255, 174, 61, .12), rgba(255, 174, 61, .04));
    border-block-start-color: rgba(255, 174, 61, .22);
}

.fx-rt tfoot .fx-fig {
    font-weight: var(--frex-weight-figure-total);
}

.fx-rt-name {
    margin-inline-end: 0.5rem;
    unicode-bidi: isolate;
}

.fx-rt-empty {
    color: var(--frex-ink-muted);
}

/* Share: a native <progress>, so the width needs no inline style and a screen
   reader gets the value. It fills from the inline start in both directions. */
.fx-rt-share {
    inline-size: 13rem;
}

progress.fx-share {
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    inline-size: 7.5rem;
    block-size: 4px;
    margin-inline-end: 1rem;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background: var(--frex-hairline);
    color: var(--frex-ink-faint);
}

progress.fx-share::-webkit-progress-bar {
    background: var(--frex-border);
    border-radius: 2px;
}

progress.fx-share::-webkit-progress-value {
    background: var(--frex-border-strong);
    border-radius: 2px;
}

progress.fx-share::-moz-progress-bar {
    background: var(--frex-border-strong);
    border-radius: 2px;
}

progress.fx-share--top::-webkit-progress-value {
    background: var(--primary-500);
}

progress.fx-share--top::-moz-progress-bar {
    background: var(--primary-500);
}

.dark progress.fx-share::-webkit-progress-bar {
    background: rgba(255, 248, 240, .06);
}

.dark progress.fx-share::-webkit-progress-value {
    background: linear-gradient(90deg, rgba(255, 248, 240, .28), rgba(255, 248, 240, .45));
}

.dark progress.fx-share--top::-webkit-progress-value {
    background: linear-gradient(90deg, #E08600, #FFAE3D);
    box-shadow: 0 0 8px rgba(255, 174, 61, .5);
}

.dark progress.fx-share::-moz-progress-bar {
    background: rgba(255, 248, 240, .4);
}

.dark progress.fx-share--top::-moz-progress-bar {
    background: #FFAE3D;
}

.fx-pct {
    display: inline-block;
    min-inline-size: 3.25rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.fx-report-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 64rem) {
    .fx-report-pair {
        grid-template-columns: 1fr;
    }
}

.fx-report-card.fi-section {
    overflow: clip;
}

/* END SCREEN - FINANCE */

/* ====================================================================
   RIGHT-TO-LEFT — structure, not polish
   ==================================================================== */

/* A Latin value alone in an RTL cell is reordered by the bidi algorithm
   ("14 Sep 2026" reads "Sep 2026 14"). plaintext lays each value out by its
   own first strong character; it also flips text-align:start, so alignment
   is stated physically. */
html[dir='rtl'] :is(.fi-ta-text-item, .fi-in-text-item):not(:has(> .fi-badge)) {
    unicode-bidi: plaintext;
    text-align: right;
}

html[dir='rtl'] :is(.fi-ta-cell.fi-align-end, .fi-in-text.fi-align-end) :is(.fi-ta-text-item, .fi-in-text-item),
html[dir='rtl'] :is(.fi-ta-text-item, .fi-in-text-item).fi-align-end {
    text-align: left;
}

html[dir='rtl'] .fi-ta-cell.fi-align-center .fi-ta-text-item {
    text-align: center;
}

/* Inputs that hold left-to-right values. The date picker draws its value as
   text ("7 Oct 2026", English months in every locale), which the bidi
   algorithm would read as "Oct 2026 7" in an RTL field. */
html[dir='rtl'] .fi-input:is([type='email'], [type='tel'], [type='url'], [type='number']),
html[dir='rtl'] .fi-input-wrp.fx-ltr .fi-input,
html[dir='rtl'] .fi-fo-date-time-picker-display-text-input {
    direction: ltr;
    text-align: right;
}

/* Amounts end-align, with the affix before the figure in both directions. */
html[dir='rtl'] .fi-input-wrp.fx-money-input .fi-input {
    direction: ltr;
    text-align: left;
}

/* Persian has no capitals and no tracking. */
html[dir='rtl'] :is(.fi-sidebar-group-label, .fi-wi-stats-overview-stat-label) {
    text-transform: none;
    letter-spacing: 0;
}

html[dir='rtl'] .fi-header-heading {
    line-height: 1.5;
}

html[dir='rtl'] :is(.fi-ta-text, .fi-in-text) {
    line-height: var(--frex-lh-cell);
}

/* ====================================================================
   PRINT
   ==================================================================== */

@media print {
    .fi-sidebar,
    .fi-topbar-ctn,
    .fi-ta-header-toolbar,
    .fi-ta-selection-indicator,
    .fi-tabs:not(.fi-contained),
    .fi-ta-actions,
    .fi-header-actions-ctn,
    .fi-pagination,
    .fi-ta-selection-cell,
    .fi-no,
    .fi-modal,
    .fi-breadcrumbs,
    .fx-dtp-shortcuts {
        display: none !important;
    }

    .fi-layout,
    .fi-main-ctn,
    .fi-main {
        display: block;
        overflow: visible;
        margin: 0;
        padding: 0;
        max-inline-size: none;
        background: #fff !important;
    }

    .fi-ta-content-ctn {
        max-block-size: none !important;
        overflow: visible !important;
    }

    .fi-ta-table > thead > tr > th {
        position: static;
        background: #fff !important;
        color: #000;
    }

    .fi-ta-ctn,
    .fi-section,
    .fi-wi-stats-overview-stat {
        box-shadow: none !important;
        border: 1px solid #999;
        background: #fff !important;
        break-inside: avoid;
    }

    .fi-ta-row {
        break-inside: avoid;
    }

    .fi-ta-row:hover {
        background: none !important;
        box-shadow: none !important;
    }

    html,
    body,
    .fi-body {
        background: #fff !important;
    }

    body,
    .fi-body,
    .fi-ta-text-item,
    .fi-in-text-item,
    .fi-header-heading {
        color: #000 !important;
    }

    /* A dark-theme badge is pale ink on a tint: unreadable on paper. */
    .fi-badge {
        color: #000 !important;
        background: none !important;
        box-shadow: inset 0 0 0 1px #999 !important;
    }

    .fi-badge > .fi-icon {
        color: #000 !important;
    }

    .dark .fi-main-ctn {
        background-image: none !important;
    }

    .fx-late,
    .fx-late .fi-ta-text-item {
        font-weight: 700;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 1ms !important;
    }

    /* A wait still needs a sign of life. With the spin and the pulse gone,
       a spinner would look like a hang, so spinners and loading tables and
       widgets fade slowly in place instead: no movement, still a cue. */
    .fi-loading-indicator,
    .fi-loading-section,
    .fi-ta-ctn.fi-loading {
        animation: frex-breathe 2.4s ease-in-out infinite !important;
    }
}

/* Filament's base layer cuts every animation to .01ms and a single run under
   reduced motion, with !important, and an important declaration in a layer
   outranks an unlayered one. An important declaration in an EARLIER layer
   outranks it in turn, so the cue's timing goes in Filament's theme layer
   (declared before base). The cue's name and easing stay above. */
@layer theme {
    @media (prefers-reduced-motion: reduce) {
        .fi-loading-indicator,
        .fi-loading-section,
        .fi-ta-ctn.fi-loading {
            animation-duration: 2.4s !important;
            animation-iteration-count: infinite !important;
        }
    }
}

@keyframes frex-breathe {
    50% {
        opacity: 0.45;
    }
}