/*
 * Night City — the panel's dark mode, styled after Cyberpunk 2077.
 *
 * Every rule is scoped to `html.fi.dark`, the class Filament's theme switcher
 * (light / dark / system) already puts on <html>, so light mode never matches
 * any of it. The file is linked from filament/night-city.blade.php, which
 * also lazy-loads the fonts the first time dark mode is on.
 *
 * Filament's own CSS lives in cascade layers (theme, base, components,
 * utilities) and this file is NOT layered, so its rules win over Filament's
 * without !important. The !important rules left are for inline styles the
 * calendar and a few Blade views write onto elements.
 *
 * Contrast rules: text on any solid neon fill is always --cp-ink, and every
 * state (hover, focus, active, disabled) sets background and colour together.
 */

html.fi.dark {
    --cp-bg: #05060b;
    --cp-bg-2: #0b0d17;
    --cp-bg-3: #121626;
    --cp-bg-4: #1a1f33;
    --cp-field: #080a12;
    --cp-ink: #07080d;
    --cp-text: #dce3ee;
    --cp-muted: #8d97ad;
    --cp-dim: #7a84a0;
    --cp-line: rgba(0, 240, 255, 0.16);
    --cp-line-2: rgba(0, 240, 255, 0.32);
    --cp-yellow: #fcee0a;
    --cp-cyan: #00f0ff;
    --cp-red: #ff4d6a;
    --cp-red-2: #ff003c;
    --cp-magenta: #ff2a6d;
    --cp-green: #1effa0;
    --cp-orange: #ffb020;
    --cp-disabled: #5f6984;
    --cp-cut: 9px;

    --cp-font-ui: 'Rajdhani', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --cp-font-display: 'Orbitron', 'Rajdhani', 'Roboto', sans-serif;
    --cp-font-brand: 'Tektur', 'Orbitron', sans-serif;
    --cp-font-mono: 'Share Tech Mono', Menlo, Consolas, monospace;

    /* Filament builds every surface and text colour from these scales. */
    --gray-50: #f3f6fa;
    --gray-100: #e8edf5;
    --gray-200: #dce3ee;
    --gray-300: #b5bdcc;
    --gray-400: #8d97ad;
    --gray-500: #7a84a0;
    --gray-600: #4f5872;
    --gray-700: #2a3150;
    --gray-800: #1a1f33;
    --gray-900: #0b0d17;
    --gray-950: #05060b;

    /* Primary (links, focus rings, checkboxes) and info are neon cyan;
       solid primary buttons and active states are overridden to yellow below. */
    --primary-50: #e6feff;
    --primary-100: #c2fcff;
    --primary-200: #8af8ff;
    --primary-300: #4df4ff;
    --primary-400: #00f0ff;
    --primary-500: #00d5e3;
    --primary-600: #00b5c2;
    --primary-700: #008a94;
    --primary-800: #00646b;
    --primary-900: #024348;
    --primary-950: #012a2e;

    --info-50: #e6feff;
    --info-100: #c2fcff;
    --info-200: #8af8ff;
    --info-300: #4df4ff;
    --info-400: #00f0ff;
    --info-500: #00d5e3;
    --info-600: #00b5c2;
    --info-700: #008a94;
    --info-800: #00646b;
    --info-900: #024348;
    --info-950: #012a2e;

    --success-50: #e8fff5;
    --success-100: #c4ffe6;
    --success-200: #8dffd0;
    --success-300: #5cffbb;
    --success-400: #1effa0;
    --success-500: #00e08a;
    --success-600: #00b870;
    --success-700: #008a54;
    --success-800: #006640;
    --success-900: #00452c;
    --success-950: #002a1b;

    --warning-50: #fff8e8;
    --warning-100: #ffedc2;
    --warning-200: #ffdd8a;
    --warning-300: #ffcd57;
    --warning-400: #ffb020;
    --warning-500: #f59a00;
    --warning-600: #cc7a00;
    --warning-700: #995b00;
    --warning-800: #703f00;
    --warning-900: #4a2a00;
    --warning-950: #2e1a00;

    --danger-50: #fff0f3;
    --danger-100: #ffd6de;
    --danger-200: #ffadbd;
    --danger-300: #ff8fa1;
    --danger-400: #ff4d6a;
    --danger-500: #ff2a4f;
    --danger-600: #ff003c;
    --danger-700: #c8002f;
    --danger-800: #8f0022;
    --danger-900: #5c0016;
    --danger-950: #33000c;

    /* Rajdhani is narrow with a small x-height: one step up keeps it legible. */
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;

    color-scheme: dark;
    accent-color: var(--cp-yellow);
    scrollbar-color: #2a3150 var(--cp-bg);
    background-color: var(--cp-bg);

    & ::selection {
        background: var(--cp-yellow);
        color: var(--cp-ink);
    }

    /* ── Page ─────────────────────────────────────────────────────────── */

    & body.fi-body {
        font-family: var(--cp-font-ui);
        font-weight: 500;
        color: var(--cp-text);
        background-color: var(--cp-bg);
        background-image:
            radial-gradient(1200px 600px at 100% -10%, rgba(255, 42, 109, 0.13), transparent 60%),
            radial-gradient(900px 500px at -10% 110%, rgba(0, 240, 255, 0.1), transparent 60%),
            linear-gradient(rgba(0, 240, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 240, 255, 0.035) 1px, transparent 1px);
        background-size: auto, auto, 44px 44px, 44px 44px;
        background-attachment: fixed;
    }

    /* CRT scanlines over everything; never catches a click. */
    & body.fi-body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        pointer-events: none;
        mix-blend-mode: multiply;
        background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.11) 0 1px, transparent 1px 3px);
    }

    /* !important: the setup guide sets its code font inline. */
    & code,
    & kbd,
    & pre {
        font-family: var(--cp-font-mono) !important;
    }

    & :focus-visible {
        outline-color: var(--cp-cyan);
    }

    /* ── Brand ────────────────────────────────────────────────────────── */

    /* The brand's shape (font, skew, peach, 2077 tag) lives in
       filament/brand.blade.php for both themes; Night City only repaints
       it: a yellow wordmark with a glow, and the tag back to red (light
       mode's tag is yellow, which would vanish beside a yellow wordmark). */
    & .fi-brand-name {
        font-family: var(--cp-font-brand);
        color: var(--cp-yellow);
        -webkit-text-fill-color: var(--cp-yellow);
        text-shadow: -2px 0 var(--cp-cyan), 0 0 16px rgba(252, 238, 10, 0.35);
    }

    & .fi-brand-tag {
        background: var(--cp-red-2);
        box-shadow: 0 0 12px rgba(255, 0, 60, 0.55);
    }

    /* ── Headings ─────────────────────────────────────────────────────── */

    & .fi-header-heading,
    & .fi-simple-header-heading {
        font-family: var(--cp-font-display);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--cp-yellow);
        text-shadow: 0 0 18px rgba(252, 238, 10, 0.3);
    }

    /* Orbitron runs wide: step the title down with the viewport so it
       wraps no sooner than light mode's heading does. */
    & .fi-header-heading {
        font-size: 1.75rem;
        overflow-wrap: anywhere;
    }

    @media (max-width: 1279px) {
        & .fi-header-heading {
            font-size: 1.2rem;
        }
    }

    @media (max-width: 639px) {
        & .fi-header-heading {
            font-size: 1rem;
            letter-spacing: 0.03em;
        }
    }

    & .fi-simple-header-heading {
        font-size: 1.35rem;
    }

    & .fi-header-subheading,
    & .fi-simple-header-subheading {
        color: var(--cp-muted);
    }

    & .fi-section-header-heading,
    & .fi-ta-header-heading,
    & .fi-wi-stats-overview-stat-label,
    & .fi-fieldset > legend,
    & .fi-in-section-heading {
        font-family: var(--cp-font-ui);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-yellow);
    }

    & .fi-section-header-description,
    & .fi-ta-header-description {
        color: var(--cp-muted);
    }

    /* ── Topbar (the navbar) ──────────────────────────────────────────── */

    & .fi-topbar {
        position: relative;
        background: rgba(5, 6, 11, 0.94);
        border-bottom: 1px solid var(--cp-red-2);
        box-shadow: 0 1px 0 rgba(255, 0, 60, 0.35), 0 6px 24px rgba(255, 0, 60, 0.12);
        backdrop-filter: blur(6px);
    }

    /* The yellow tab hanging under the left end of the bar. */
    & .fi-topbar::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 180px;
        height: 3px;
        background: var(--cp-yellow);
        clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        pointer-events: none;
    }

    & .fi-topbar-ctn {
        overflow: visible;
    }

    /* ── Sidebar navigation ───────────────────────────────────────────── */

    & .fi-sidebar {
        background: transparent;
    }

    /* Below lg the sidebar slides over the page and needs its own surface. */
    @media (max-width: 1023px) {
        & .fi-sidebar {
            background: var(--cp-bg-2);
            box-shadow: 1px 0 0 var(--cp-line-2), 12px 0 32px rgba(0, 0, 0, 0.6);
        }

        & .fi-body-has-topbar .fi-sidebar-header {
            background: var(--cp-bg);
            box-shadow: inset 0 -1px 0 var(--cp-red-2);
        }
    }

    & .fi-sidebar-close-overlay {
        background: rgba(0, 0, 0, 0.78);
    }

    & .fi-sidebar-group-label {
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--cp-red);
    }

    & .fi-sidebar-item-btn {
        border-radius: 0;
        transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;

        & > .fi-sidebar-item-label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--cp-text);
        }

        & > .fi-icon {
            color: var(--cp-dim);
        }

        &:hover,
        &:focus-visible {
            background: rgba(252, 238, 10, 0.06);
            box-shadow: inset 2px 0 0 var(--cp-yellow);

            & > .fi-sidebar-item-label,
            & > .fi-icon {
                color: var(--cp-yellow);
                text-shadow: 0 0 10px rgba(252, 238, 10, 0.45);
            }
        }
    }

    & .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background: var(--cp-yellow);
        box-shadow: 0 0 18px rgba(252, 238, 10, 0.25);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-cut)), calc(100% - var(--cp-cut)) 100%, 0 100%);

        & > .fi-sidebar-item-label,
        & > .fi-icon {
            color: var(--cp-ink);
            text-shadow: none;
        }
    }

    /* ── Cards: sections, tables, widgets ─────────────────────────────── */

    & .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    & .fi-section.fi-aside:not(.fi-section-not-contained) > .fi-section-content-ctn,
    & .fi-ta-ctn,
    & .fi-wi-stats-overview-stat,
    & .fi-simple-main,
    & .fi-tabs:not(.fi-contained) {
        position: relative;
        border-radius: 0;
        background-color: rgba(11, 13, 23, 0.92);
        box-shadow: 0 0 0 1px var(--cp-line), 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    /* The yellow L-bracket on each card's top-left corner. A pseudo element,
       not clip-path, so dropdowns can still overflow the card. */
    & .fi-section:not(.fi-section-not-contained):not(.fi-aside)::before,
    & .fi-section.fi-aside:not(.fi-section-not-contained) > .fi-section-content-ctn::before,
    & .fi-ta-ctn::before,
    & .fi-simple-main::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        width: 18px;
        height: 18px;
        border-top: 2px solid var(--cp-yellow);
        border-left: 2px solid var(--cp-yellow);
        pointer-events: none;
        z-index: 1;
    }

    & .fi-section.fi-secondary:not(.fi-section-not-contained) {
        background-color: rgba(18, 22, 38, 0.92);
    }

    & .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
    & .fi-ta-header {
        background: linear-gradient(90deg, rgba(252, 238, 10, 0.08), transparent 70%);
    }

    & .fi-section.fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
    & .fi-section .fi-section-footer,
    & .fi-ta-header-ctn,
    & .fi-ta-header-toolbar,
    & .fi-ta-footer,
    & .fi-ta-content-ctn,
    & .fi-ta-filters-header,
    & .fi-pagination {
        border-color: var(--cp-line);
    }

    & .fi-divided > .fi-section-content-ctn > .fi-section-content > *,
    & .fi-ta-header-toolbar,
    & .fi-ta-main {
        border-color: var(--cp-line);
    }

    /* Nested sections (a section inside a section) stay flat. */
    & .fi-section .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
        box-shadow: 0 0 0 1px var(--cp-line);
    }

    /* ── Buttons ──────────────────────────────────────────────────────── */

    & .fi-btn {
        --cp-btn: var(--cp-cyan);
        --cp-btn-rgb: 0, 240, 255;
        border-radius: 0;
        font-family: var(--cp-font-ui);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-btn);
        background-color: rgba(var(--cp-btn-rgb), 0.08);
        box-shadow: inset 0 0 0 1px rgba(var(--cp-btn-rgb), 0.55);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-cut)), calc(100% - var(--cp-cut)) 100%, 0 100%);
        transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;

        & > .fi-icon,
        & .fi-badge {
            color: currentColor;
        }

        &.fi-size-xs,
        &.fi-size-sm {
            --cp-cut: 5px;
            letter-spacing: 0.02em;
        }

        &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible, :active) {
            color: var(--cp-ink);
            background-color: var(--cp-btn);
            box-shadow: 0 0 16px rgba(var(--cp-btn-rgb), 0.35);

            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        /* clip-path clips outlines and rings, so focus is drawn inside. */
        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: -5px;
        }

        &.fi-color-success {
            --cp-btn: var(--cp-green);
            --cp-btn-rgb: 30, 255, 160;
        }

        &.fi-color-warning {
            --cp-btn: var(--cp-orange);
            --cp-btn-rgb: 255, 176, 32;
        }

        &.fi-color-danger {
            --cp-btn: var(--cp-red);
            --cp-btn-rgb: 255, 77, 106;
        }

        &.fi-color-info {
            --cp-btn: var(--cp-cyan);
            --cp-btn-rgb: 0, 240, 255;
        }

        /* Primary: solid yellow at rest, cyan on hover. */
        &.fi-color-primary:not(.fi-outlined) {
            --cp-btn: var(--cp-cyan);
            --cp-btn-rgb: 0, 240, 255;
            color: var(--cp-ink);
            background-color: var(--cp-yellow);
            box-shadow: 0 0 14px rgba(252, 238, 10, 0.22);

            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        &.fi-color-primary.fi-outlined {
            --cp-btn: var(--cp-yellow);
            --cp-btn-rgb: 252, 238, 10;
        }

        &:is(.fi-disabled, [disabled]):not(.fi-force-enabled) {
            opacity: 1;
            color: var(--cp-disabled);
            background-color: rgba(141, 151, 173, 0.06);
            box-shadow: inset 0 0 0 1px rgba(141, 151, 173, 0.25);

            & > .fi-icon {
                color: var(--cp-disabled);
            }
        }
    }

    /* Inside button groups and input wrappers, square joints stay clean. */
    & .fi-btn-group .fi-btn,
    & .fi-input-wrp .fi-btn,
    & .fi-ac-btn-group .fi-btn {
        clip-path: none;
    }

    & .fi-btn-group {
        border-radius: 0;
        box-shadow: none;
    }

    /* Toggle-button groups (radio labels styled as buttons). */
    & input:checked + label.fi-btn {
        color: var(--cp-ink);
        background-color: var(--cp-yellow);
        box-shadow: none;
    }

    /* Icon buttons: muted until hovered. */
    & .fi-icon-btn {
        border-radius: 0;
        color: var(--cp-muted);
        transition: color 0.12s, background-color 0.12s;

        &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible) {
            color: var(--cp-yellow);
            background-color: rgba(252, 238, 10, 0.08);
        }

        &.fi-color:not(.fi-color-gray) {
            color: var(--color-400);
        }

        &:focus-visible {
            outline: 2px solid var(--cp-cyan);
            outline-offset: -2px;
            box-shadow: none;
        }
    }

    & .fi-icon-btn-badge-ctn .fi-badge {
        color: var(--cp-ink);
        background: var(--cp-red-2);
        box-shadow: 0 0 10px rgba(255, 0, 60, 0.6);
    }

    /* ── Links ────────────────────────────────────────────────────────── */

    & .fi-link {
        color: var(--cp-cyan);

        & .fi-link-label,
        & > .fi-icon {
            color: inherit;
        }

        &.fi-color:not(.fi-color-primary):not(.fi-color-gray) {
            color: var(--color-400);
        }

        &:hover,
        &:focus-visible {
            color: var(--cp-yellow);

            & .fi-link-label {
                text-decoration: underline;
                text-underline-offset: 3px;
            }
        }

        &:focus-visible {
            outline: 2px solid var(--cp-cyan);
            outline-offset: 3px;
        }
    }

    & .fi-badge-delete-btn:focus-visible {
        outline: 2px solid var(--cp-cyan);
        outline-offset: 1px;
    }

    & .fi-prose a,
    & .fi-in-text a:not(.fi-btn):not(.fi-badge),
    & .fi-sc-text a,
    & .fi-ta-text a:not(.fi-btn):not(.fi-badge),
    & .fi-fo-field-wrp-helper-text a,
    & .fi-sc-text a {
        color: var(--cp-cyan);

        &:hover {
            color: var(--cp-yellow);
        }
    }

    /* ── Badges ───────────────────────────────────────────────────────── */

    & .fi-badge {
        border-radius: 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cp-muted);
        background-color: rgba(141, 151, 173, 0.1);
        box-shadow: inset 0 0 0 1px rgba(141, 151, 173, 0.45);

        &.fi-color {
            color: var(--color-300);
            background-color: color-mix(in srgb, var(--color-400) 12%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-400) 60%, transparent);
        }

        /* Primary badges (people in tables and selects) are yellow, but
           outlined: solid yellow is kept for the one active thing on screen. */
        &.fi-color-primary {
            color: var(--cp-yellow);
            background-color: rgba(252, 238, 10, 0.1);
            box-shadow: inset 0 0 0 1px rgba(252, 238, 10, 0.6);
        }

        & .fi-badge-delete-btn > .fi-icon {
            color: currentColor;
            opacity: 0.7;
        }
    }

    /* ── Forms ────────────────────────────────────────────────────────── */

    & .fi-input-wrp {
        border-radius: 0;
        background-color: var(--cp-field);
        box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.24);
        transition: box-shadow 0.12s;

        &:not(.fi-disabled):hover {
            box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.45);
        }

        &:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
            box-shadow: 0 0 0 1px var(--cp-cyan), 0 0 14px rgba(0, 240, 255, 0.35);

            & .fi-input {
                color: #fff;
            }
        }

        &.fi-invalid {
            box-shadow: 0 0 0 1px var(--cp-red);

            &:focus-within {
                box-shadow: 0 0 0 1px var(--cp-red), 0 0 14px rgba(255, 77, 106, 0.4);
            }
        }

        &.fi-disabled {
            background-color: #0e111c;
            box-shadow: 0 0 0 1px rgba(141, 151, 173, 0.2);

            & .fi-input {
                color: var(--cp-muted);
                -webkit-text-fill-color: var(--cp-muted);
            }
        }

        & .fi-input-wrp-prefix:not(.fi-inline),
        & .fi-input-wrp-suffix:not(.fi-inline) {
            border-color: var(--cp-line);
            background-color: var(--cp-bg-3);
        }

        & .fi-input-wrp-label {
            color: var(--cp-cyan);
        }

        & .fi-input-wrp-prefix > .fi-icon,
        & .fi-input-wrp-suffix > .fi-icon {
            color: var(--cp-dim);
        }
    }

    & .fi-input,
    & .fi-select-input-btn,
    & .fi-fo-date-time-picker-display-text-input,
    & .fi-fo-tags-input-wrp input,
    & .fi-fo-textarea textarea,
    & .fi-fo-select-native select {
        font-family: var(--cp-font-ui);
        font-weight: 500;
        color: var(--cp-text);
    }

    & .fi-input::placeholder,
    & textarea::placeholder,
    & .fi-select-input-placeholder,
    & .fi-fo-date-time-picker-display-text-input::placeholder {
        color: var(--cp-dim);
    }

    & select.fi-select-input,
    & .fi-fo-select-native select,
    & .fi-pagination-records-per-page-select select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2300f0ff' stroke-linecap='square' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }

    & select option {
        background-color: var(--cp-bg-2);
        color: var(--cp-text);
    }

    & .fi-fo-field-label-content,
    & .fi-fo-field-label,
    & .fi-sc-section-label {
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--cp-muted);
    }

    & .fi-fo-field-label-required-mark {
        color: var(--cp-red);
    }

    & .fi-checkbox-list-option-label,
    & .fi-fo-checkbox-list-option-label,
    & .fi-fo-radio-label,
    & label:has(> .fi-checkbox-input) .fi-fo-field-label-content,
    & label:has(> .fi-checkbox-input) {
        color: var(--cp-text);
    }

    & .fi-fo-field-wrp-helper-text,
    & .fi-sc-text,
    & .fi-fo-field-wrp-hint {
        color: var(--cp-muted);
    }

    & .fi-fo-field-wrp-error-message,
    & .fi-fo-file-upload-error-message {
        color: var(--cp-red);
    }

    & .fi-checkbox-input,
    & .fi-radio-input {
        background-color: var(--cp-field);
        border-radius: 0;
        box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.45);
        color: var(--cp-yellow);

        &:checked {
            background-color: var(--cp-yellow);
            box-shadow: none;
        }

        &:focus-visible {
            outline: 2px solid var(--cp-cyan);
            outline-offset: 2px;
        }

        &:disabled {
            background-color: #0e111c;
            box-shadow: inset 0 0 0 1px rgba(141, 151, 173, 0.25);
        }
    }

    & .fi-checkbox-input:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2307080d' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }

    & .fi-checkbox-input:indeterminate {
        background-color: var(--cp-yellow);
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2307080d' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='4' y='7' width='8' height='2'/%3e%3c/svg%3e");
    }

    & .fi-radio-input {
        border-radius: 9999px;

        &:checked {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2307080d' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
        }
    }

    /* Toggles: off is a dark track with a cyan edge, on is solid yellow. */
    & .fi-toggle {
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);

        & > :first-child {
            border-radius: 0;
        }

        &.fi-toggle-off {
            background-color: var(--cp-bg-4);
            box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.4);

            & > :first-child {
                background-color: var(--cp-muted);
            }
        }

        &.fi-toggle-on {
            background-color: var(--cp-yellow);
            box-shadow: 0 0 12px rgba(252, 238, 10, 0.35);

            & > :first-child {
                background-color: var(--cp-ink);
            }

            & .fi-icon {
                color: var(--cp-yellow);
            }
        }

        &:focus-visible {
            outline: 2px solid var(--cp-cyan);
            outline-offset: 2px;
        }
    }

    /* Custom select dropdown, date picker, tags. */
    & .fi-select-input-option {
        border-radius: 0;
        border-left: 2px solid transparent;
        color: var(--cp-text);

        &:hover,
        &.fi-focused {
            color: var(--cp-yellow);
            background-color: rgba(252, 238, 10, 0.07);
            border-left-color: var(--cp-yellow);
        }

        &.fi-selected {
            color: var(--cp-ink);
            background-color: var(--cp-yellow);
            border-left-color: var(--cp-yellow);
        }
    }

    & .fi-select-input-message {
        color: var(--cp-muted);
    }

    & .fi-fo-date-time-picker-panel {
        & .fi-fo-date-time-picker-calendar-header-day {
            color: var(--cp-cyan);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        & .fi-fo-date-time-picker-calendar-day {
            border-radius: 0;
            color: var(--cp-text);

            &:hover,
            &.fi-focused {
                color: var(--cp-yellow);
                background-color: rgba(252, 238, 10, 0.1);
            }

            &.fi-fo-date-time-picker-calendar-day-today {
                color: var(--cp-cyan);
                box-shadow: inset 0 0 0 1px var(--cp-line-2);
            }

            &.fi-selected {
                color: var(--cp-ink);
                background-color: var(--cp-yellow);
            }

            &.fi-disabled {
                color: var(--cp-disabled);
                background: none;
            }
        }

        & .fi-fo-date-time-picker-month-select,
        & .fi-fo-date-time-picker-year-input,
        & .fi-fo-date-time-picker-time-input {
            background-color: transparent;
            color: var(--cp-text);
            font-weight: 600;
        }
    }

    & .fi-fo-color-picker-panel {
        border-radius: 0;
    }

    /* FilePond uploads: a dashed drop zone. */
    & .fi-fo-file-upload .filepond--root {
        border-radius: 0;
        background-color: var(--cp-field);
        box-shadow: none;
        outline: 1px dashed rgba(0, 240, 255, 0.45);
        outline-offset: -1px;
    }

    & .fi-fo-file-upload .filepond--root[data-style-panel-layout='compact circle'] {
        border-radius: 9999px;
    }

    & .filepond--panel-root {
        border-radius: 0;
        background-color: transparent;
    }

    & .filepond--drop-label {
        color: var(--cp-muted);

        & label {
            color: var(--cp-muted);
        }
    }

    & .filepond--label-action {
        color: var(--cp-cyan);
        text-decoration-color: var(--cp-cyan);
    }

    & .filepond--item-panel {
        border-radius: 0;
    }

    /* ── Tables ───────────────────────────────────────────────────────── */

    & .fi-ta-table > thead > tr,
    & .fi-ta-table > thead {
        background: rgba(0, 240, 255, 0.035);
    }

    & .fi-ta-header-cell,
    & .fi-ta-header-cell-sort-btn,
    & .fi-ta-actions-header-cell {
        font-family: var(--cp-font-ui);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--cp-cyan);
    }

    & .fi-ta-header-cell {
        border-bottom: 1px solid var(--cp-line-2);

        &.fi-ta-header-cell-sorted .fi-icon,
        & .fi-ta-header-cell-sort-btn:hover .fi-icon {
            color: var(--cp-yellow);
        }

        &:not(.fi-ta-header-cell-sorted) .fi-icon {
            color: rgba(0, 240, 255, 0.55);
        }
    }

    & .fi-ta-table {
        & > tbody,
        & > thead {
            border-color: rgba(0, 240, 255, 0.09);
        }

        & > tbody > tr,
        & > tbody > tr > td {
            border-color: rgba(0, 240, 255, 0.09);
        }
    }

    & .fi-ta-table,
    & .fi-ta-table > tbody,
    & .fi-ta-content {
        --tw-divide-opacity: 1;
    }

    & .fi-ta-table :is(thead, tbody, tr),
    & .fi-ta-content > *,
    & .fi-ta-content-grouped > * {
        border-color: rgba(0, 240, 255, 0.09);
    }

    & .fi-ta-row.fi-striped {
        background-color: rgba(255, 255, 255, 0.022);
    }

    & .fi-ta-row.fi-clickable:hover,
    & .fi-ta-record.fi-clickable:hover {
        background-color: rgba(252, 238, 10, 0.05);
        box-shadow: inset 3px 0 0 var(--cp-yellow);
    }

    & .fi-ta-row.fi-selected:not(.fi-striped),
    & .fi-ta-record.fi-selected {
        background-color: rgba(0, 240, 255, 0.07);
    }

    & .fi-ta-group-header-row > td,
    & .fi-ta-group-header {
        background-color: rgba(0, 240, 255, 0.04);
    }

    & .fi-ta-group-heading {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #fff;
    }

    & .fi-ta-group-description,
    & .fi-ta-text-description,
    & .fi-ta-placeholder,
    & .fi-in-placeholder {
        color: var(--cp-muted);
    }

    & .fi-ta-selection-indicator {
        background-color: rgba(0, 240, 255, 0.06);
        border-color: var(--cp-line);
    }

    & .fi-ta-empty-state {
        & .fi-ta-empty-state-icon-bg {
            border-radius: 0;
            background-color: rgba(0, 240, 255, 0.08);
            box-shadow: inset 0 0 0 1px var(--cp-line-2);

            & .fi-icon {
                color: var(--cp-cyan);
            }
        }

        & .fi-ta-empty-state-heading {
            font-family: var(--cp-font-display);
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--cp-yellow);
        }

        & .fi-ta-empty-state-description {
            color: var(--cp-muted);
        }
    }

    & .fi-ta-col-manager-heading,
    & .fi-ta-filters-heading {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cp-yellow);
    }

    & .fi-ta-filter-indicators-label {
        color: var(--cp-muted);
    }

    & .fi-ta-color-item {
        border-radius: 0;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    }

    /* ── Tabs ─────────────────────────────────────────────────────────── */

    & .fi-tabs.fi-contained {
        border-color: var(--cp-line-2);
    }

    & .fi-tabs-item {
        border-radius: 0;

        & .fi-tabs-item-label {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--cp-muted);
        }

        & > .fi-icon {
            color: var(--cp-dim);
        }

        &:not(.fi-active):is(:hover, :focus-visible) {
            background-color: rgba(252, 238, 10, 0.05);

            & .fi-tabs-item-label,
            & > .fi-icon {
                color: var(--cp-yellow);
            }
        }

        &.fi-active {
            background-color: var(--cp-bg-2);
            box-shadow: inset 0 2px 0 var(--cp-yellow);

            & .fi-tabs-item-label,
            & > .fi-icon {
                color: var(--cp-yellow);
            }
        }
    }

    /* ── Pagination ───────────────────────────────────────────────────── */

    & .fi-pagination-items {
        border-radius: 0;
        background-color: rgba(11, 13, 23, 0.9);
        box-shadow: 0 0 0 1px var(--cp-line);
    }

    & .fi-pagination-item {
        border-color: var(--cp-line);

        & .fi-pagination-item-btn {
            border-radius: 0;

            & .fi-pagination-item-label {
                color: var(--cp-cyan);
            }

            & .fi-icon {
                color: var(--cp-cyan);
            }

            &:enabled:is(:hover, :focus-visible) {
                background-color: rgba(252, 238, 10, 0.08);

                & .fi-pagination-item-label,
                & .fi-icon {
                    color: var(--cp-yellow);
                }
            }
        }

        &.fi-active .fi-pagination-item-btn {
            background-color: var(--cp-yellow);

            & .fi-pagination-item-label {
                color: var(--cp-ink);
            }
        }

        &.fi-disabled .fi-pagination-item-btn {
            & .fi-pagination-item-label,
            & .fi-icon {
                color: #4f5872;
            }
        }
    }

    & .fi-pagination-overview {
        color: var(--cp-muted);
    }

    /* ── Dropdowns ────────────────────────────────────────────────────── */

    & .fi-dropdown-panel {
        border-radius: 0;
        background-color: var(--cp-bg-2);
        border: 1px solid var(--cp-line-2);
        border-top: 2px solid var(--cp-cyan);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 240, 255, 0.12);
    }

    & .fi-dropdown-list {
        border-color: var(--cp-line);
    }

    & .fi-dropdown-header {
        & .fi-dropdown-header-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--cp-red);
        }

        & .fi-icon {
            color: var(--cp-red);
        }
    }

    & .fi-dropdown-list-item {
        border-radius: 0;
        border-left: 2px solid transparent;

        & .fi-dropdown-list-item-label {
            color: var(--cp-text);
        }

        & > .fi-icon {
            color: var(--cp-dim);
        }

        &.fi-color:not(.fi-color-gray) {
            & .fi-dropdown-list-item-label,
            & > .fi-icon {
                color: var(--color-400);
            }
        }

        &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible) {
            background-color: rgba(252, 238, 10, 0.07);
            border-left-color: var(--cp-yellow);

            & .fi-dropdown-list-item-label,
            & > .fi-icon {
                color: var(--cp-yellow);
            }
        }

        &.fi-selected {
            background-color: var(--cp-yellow);
            border-left-color: var(--cp-yellow);

            & .fi-dropdown-list-item-label,
            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        &:is(.fi-disabled, [disabled]) .fi-dropdown-list-item-label {
            color: var(--cp-disabled);
        }
    }

    /* Light / dark / system switcher inside the user menu. */
    & .fi-theme-switcher-btn {
        border-radius: 0;
        color: var(--cp-dim);

        &:hover,
        &:focus-visible {
            color: var(--cp-yellow);
            background-color: rgba(252, 238, 10, 0.08);
        }

        &.fi-active {
            color: var(--cp-ink);
            background-color: var(--cp-yellow);
        }
    }

    & .fi-user-avatar,
    & .fi-avatar {
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    }

    & .fi-user-menu-trigger:focus-visible .fi-user-avatar {
        outline: 2px solid var(--cp-cyan);
        outline-offset: -2px;
    }

    /* ── Modals ───────────────────────────────────────────────────────── */

    & .fi-modal-window {
        border-radius: 0;
        background-color: var(--cp-bg-2);
        border: 1px solid var(--cp-line-2);
        border-top: 2px solid var(--cp-yellow);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.14);
    }

    & .fi-modal-close-overlay {
        background-color: rgba(0, 0, 0, 0.78);
    }

    & .fi-modal-heading {
        font-family: var(--cp-font-display);
        font-size: 1rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-yellow);
    }

    & .fi-modal-description {
        color: var(--cp-muted);
    }

    & .fi-modal-icon-bg {
        border-radius: 0;
    }

    & .fi-modal-header,
    & .fi-modal-footer,
    & .fi-modal.fi-modal-has-sticky-header .fi-modal-header,
    & .fi-modal.fi-modal-has-sticky-footer .fi-modal-footer {
        border-color: var(--cp-line);
        background-color: var(--cp-bg-2);
    }

    /* ── Notifications (toasts) ───────────────────────────────────────── */

    & .fi-no-notification {
        border-radius: 0;
        background-color: var(--cp-bg-2);
        box-shadow: 0 0 0 1px var(--cp-line-2), 0 12px 32px rgba(0, 0, 0, 0.7);

        &.fi-color {
            box-shadow: inset 4px 0 0 var(--color-400), 0 0 0 1px var(--cp-line-2), 0 12px 32px rgba(0, 0, 0, 0.7);
        }

        & .fi-no-notification-title {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #fff;
        }

        & .fi-no-notification-body {
            color: var(--cp-muted);
        }
    }

    /* ── Breadcrumbs, global search ───────────────────────────────────── */

    & .fi-breadcrumbs-item-label {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-muted);
    }

    & a.fi-breadcrumbs-item-label:hover {
        color: var(--cp-yellow);
    }

    & .fi-breadcrumbs-item-separator {
        color: var(--cp-magenta);
    }

    & .fi-global-search-field .fi-input-wrp {
        background-color: rgba(8, 10, 18, 0.9);
    }

    & .fi-global-search-results-ctn {
        border-radius: 0;
        background-color: var(--cp-bg-2);
        border: 1px solid var(--cp-line-2);
        border-top: 2px solid var(--cp-cyan);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 240, 255, 0.12);
    }

    & .fi-global-search-result-group-header {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--cp-red);
        background-color: var(--cp-bg-3);
    }

    & .fi-global-search-result-link:is(:hover, :focus-visible) {
        background-color: rgba(252, 238, 10, 0.07);

        & .fi-global-search-result-heading {
            color: var(--cp-yellow);
        }
    }

    & .fi-global-search-result-details,
    & .fi-global-search-no-results-message {
        color: var(--cp-muted);
    }

    /* ── Infolists, prose, callouts ───────────────────────────────────── */

    & .fi-in-entry-label {
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--cp-muted);
    }

    & .fi-prose {
        color: var(--cp-text);

        & :is(h1, h2, h3) {
            font-family: var(--cp-font-display);
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--cp-yellow);
        }

        & h3 {
            font-size: 0.95em;
            text-transform: uppercase;
        }

        & :is(h4, h5, h6) {
            color: var(--cp-cyan);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        & strong {
            color: #fff;
        }

        & :not(pre) > code {
            color: var(--cp-magenta);
            background-color: rgba(255, 42, 109, 0.1);
            border-radius: 0;
            padding: 0.1em 0.35em;
        }

        & pre {
            border-radius: 0;
            background-color: var(--cp-bg-3);
            box-shadow: inset 0 0 0 1px var(--cp-line);
        }

        & blockquote {
            border-left-color: var(--cp-magenta);
            color: var(--cp-muted);
        }

        & ul > li::marker,
        & ol > li::marker {
            color: var(--cp-cyan);
        }

        & hr {
            border-color: var(--cp-line);
        }
    }

    & .fi-callout {
        border-radius: 0;
        background-color: rgba(0, 240, 255, 0.07);
        box-shadow: inset 4px 0 0 var(--cp-cyan), 0 0 0 1px var(--cp-line-2);

        &.fi-color {
            background-color: color-mix(in srgb, var(--color-400) 8%, transparent);
            box-shadow: inset 4px 0 0 var(--color-400), 0 0 0 1px color-mix(in srgb, var(--color-400) 45%, transparent);
        }

        & .fi-callout-heading {
            font-family: var(--cp-font-display);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--cp-cyan);
        }

        &.fi-color .fi-callout-heading {
            color: var(--color-400);
        }
    }

    & .fi-loading-indicator {
        color: var(--cp-cyan);
    }

    /* ── Dashboard week view (WeekWidget) ─────────────────────────────── */

    /* The day headings keep their weekday hue from week-row-stripes. */
    & .fi-wi-table .fi-ta-group-heading {
        font-family: var(--cp-font-ui);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    /* ── Month calendar (guava/calendar → EventCalendar) ──────────────── */

    & .ec {
        --ec-border-color: rgba(0, 240, 255, 0.14);
        --ec-today-bg-color: rgba(252, 238, 10, 0.07);
        --ec-bg-color: transparent;
        --ec-text-color: var(--cp-text);
        font-family: var(--cp-font-ui);
        color: var(--cp-text);
    }

    & .ec-toolbar .ec-title {
        font-family: var(--cp-font-display);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cp-yellow);
        white-space: nowrap;
    }

    @media (max-width: 639px) {
        & .ec-toolbar .ec-title {
            font-size: 0.8rem;
            letter-spacing: 0.04em;
        }
    }

    & .ec-button {
        border-radius: 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-cyan);
        background-color: rgba(0, 240, 255, 0.08);
        border-color: rgba(0, 240, 255, 0.55);
        transition: background-color 0.12s, color 0.12s;

        &:not(:disabled):is(:hover, :focus-visible, :active) {
            color: var(--cp-ink);
            background-color: var(--cp-cyan);
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: -4px;
        }

        &:disabled {
            color: var(--cp-disabled);
            background-color: rgba(141, 151, 173, 0.06);
            border-color: rgba(141, 151, 173, 0.25);
            opacity: 1;
        }
    }

    & .ec-button-group .ec-button {
        border-radius: 0;
    }

    & .ec-col-head,
    & .ec-header .ec-day {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--cp-cyan);
        background: rgba(0, 240, 255, 0.035);
    }

    & .ec-day-head {
        color: var(--cp-muted);
        font-weight: 600;
    }

    & .ec-day.ec-today {
        background-color: rgba(252, 238, 10, 0.07);
        box-shadow: inset 0 2px 0 var(--cp-yellow);

        & .ec-day-head {
            color: var(--cp-yellow);
            font-weight: 700;
        }
    }

    /* EventCalendar fades other-month dates with opacity .3, which drops
       them to 1.3:1; a dimmer colour at full opacity keeps them readable. */
    & .ec-day.ec-other-month .ec-day-head,
    & .ec-day.ec-other-month .ec-day-head time {
        color: var(--cp-dim);
        opacity: 1;
    }

    /* The widget paints each event in its person's colour with white text,
       which fails contrast on the lighter hues. Here the colour moves to a
       tint and a left bar (--who-color, set per event by
       HouseholdCalendarWidget) and the text stays light. */
    & .ec-event {
        border-radius: 0 !important;
        color: var(--cp-text) !important;
        background-color: color-mix(in srgb, var(--who-color, var(--cp-cyan)) 26%, var(--cp-bg-2)) !important;
        box-shadow: inset 3px 0 0 var(--who-color, var(--cp-cyan));
        transition: background-color 0.12s;

        & .ec-event-time,
        & .ec-event-title {
            color: inherit;
        }

        & .ec-event-time {
            font-weight: 700;
        }

        &:hover,
        &:focus-visible {
            background-color: color-mix(in srgb, var(--who-color, var(--cp-cyan)) 40%, var(--cp-bg-2)) !important;
            color: #fff !important;
        }
    }

    /* ── Night City only ──────────────────────────────────────────────── */

    @media print {
        & body.fi-body::after {
            display: none;
        }
    }
}

/* Also drives the brand's hover glitch in light mode (filament/brand.blade.php),
   which is why it sits outside the html.fi.dark scope. */
@keyframes cp-glitch {
    0% {
        text-shadow: -2px 0 #00f0ff, 2px 0 #ff003c;
        translate: 0 0;
    }

    25% {
        text-shadow: 2px 0 #00f0ff, -2px 0 #ff003c;
        translate: 1px 0;
    }

    50% {
        text-shadow: -2px 1px #00f0ff, 2px -1px #ff003c;
        translate: -1px 0;
    }

    75% {
        text-shadow: 1px 0 #00f0ff, -1px 0 #ff003c;
        translate: 0 1px;
    }

    100% {
        text-shadow: -2px 0 #00f0ff, 0 0 16px rgba(252, 238, 10, 0.35);
        translate: 0 0;
    }
}