/*
 * filament-nexus.css — maps the nexus styleguide onto Filament v4 (fi-*) markup.
 * Loaded after Filament's CSS and after tokens/variables.css (App\Filament\Theme).
 * Tokens only: no literal colours outside the leading :root block below.
 * fi-* selectors are Filament internals — re-run the visual checklist after Filament updates
 * (docs/superpowers/specs/2026-10-05-styleguide-theme-design.md).
 */

/* 0. App-added tokens — the only place literal colours may appear. */
:root {
}

/* 1. Filament variables (unlayered: must beat Filament's inline :root values). */
:root {
    --font-family: var(--font-sans);
    --primary-50: var(--color-primary-container);
    --primary-600: var(--color-primary);
    --primary-700: var(--color-primary-dark);
    --danger-600: var(--color-danger);
}

/*
 * 2–5. Component rules. Inside Filament's own `components` layer so normal
 * specificity applies: Filament's state rules (focus, active, invalid) still win
 * where they are more specific. `.fi` is the class on <html> — one extra class
 * of specificity over Filament's base rules. Borders/elevation: override the
 * --tw-shadow / --tw-ring-color variables, never box-shadow itself.
 */
@layer components {

    /* 2. Base */
    .fi .fi-body {
        background-color: var(--color-bg);
        color: var(--color-text);
    }

    /* 3. Shell — topbar (styleguide .appbar) */
    .fi .fi-topbar {
        background-color: var(--color-navy);
        color: var(--color-on-navy);
        --tw-shadow: var(--shadow-appbar);
        --tw-ring-color: transparent;
    }
    .fi .fi-topbar .fi-icon-btn {
        color: var(--color-on-navy-muted);
        border-radius: var(--radius-pill);
    }
    .fi .fi-topbar .fi-icon-btn:hover {
        background-color: var(--color-on-navy-hover);
        color: var(--color-on-navy);
    }
    .fi .fi-topbar .fi-icon-btn:focus-visible {
        outline: 2px solid var(--color-on-navy);
        outline-offset: 2px;
    }
    .fi .fi-topbar .fi-user-avatar {
        outline: 2px solid var(--color-on-navy-fill);
    }

    /* Brand (styleguide .brand + .dot) — topbar on navy, sidebar header and login on light. */
    .fi .fi-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--color-text);
    }
    .fi .fi-logo::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--color-primary);
        flex: none;
    }
    .fi .fi-topbar .fi-logo {
        color: var(--color-on-navy);
    }

    /* Global search on navy; its results dropdown stays light. */
    .fi .fi-topbar .fi-global-search-field .fi-input-wrp {
        background-color: var(--color-on-navy-fill);
        border-radius: var(--radius-pill);
        --tw-ring-color: transparent;
    }
    .fi .fi-topbar .fi-global-search-field input {
        color: var(--color-on-navy);
    }
    .fi .fi-topbar .fi-global-search-field input::placeholder,
    .fi .fi-topbar .fi-global-search-field .fi-icon {
        color: var(--color-on-navy-muted);
    }
    /* Filament's focus ring is primary-600 — invisible on navy. Same specificity, later. */
    .fi .fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
        --tw-ring-color: var(--color-on-navy);
    }
    .fi .fi-topbar .fi-global-search-results-ctn {
        color: var(--color-text);
    }

    /* 3. Shell — sidebar (styleguide .sidebar / .side-item / .side-label) */
    @media (min-width: 1024px) {
        .fi .fi-main-sidebar .fi-sidebar-nav {
            background-color: var(--color-surface);
            border: 1px solid var(--color-outline);
            border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            margin: var(--gutter) 0 var(--gutter) 12px;
            padding: 20px 12px;
            row-gap: 12px;
        }
    }
    .fi .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn {
        border-radius: var(--radius-pill);
        padding: 12px 16px;
        column-gap: 14px;
        color: var(--color-text-muted);
        font-size: .92rem;
        font-weight: 500;
    }
    .fi .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon,
    .fi .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn > .fi-sidebar-item-label {
        color: inherit;
    }
    .fi .fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
        background-color: var(--color-surface-high);
    }
    .fi .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background-color: var(--color-sidebar-active-bg);
        color: var(--color-sidebar-active-text);
        font-weight: 700;
    }
    .fi .fi-sidebar .fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
        background-color: var(--color-primary-dark);
    }
    .fi .fi-sidebar .fi-sidebar-group-label {
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--color-text-muted);
    }

    /* 3. Shell — page heading and breadcrumbs (styleguide .page-head / .subtitle / .crumb) */
    .fi .fi-header-heading {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--color-text);
    }
    .fi .fi-header-subheading {
        font-size: .88rem;
        color: var(--color-text-muted);
    }
    .fi .fi-breadcrumbs-item-label {
        font-size: .8rem;
        color: var(--color-text-muted);
    }
    .fi .fi-breadcrumbs a.fi-breadcrumbs-item-label,
    .fi .fi-breadcrumbs a .fi-breadcrumbs-item-label {
        color: var(--color-primary);
        font-weight: 600;
    }

    /* 4. Components — cards (styleguide .card / .table-card / .section-title) */
    .fi .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    .fi .fi-ta-ctn {
        background-color: var(--color-surface);
        border-radius: var(--radius);
        --tw-shadow: var(--shadow-card);
        --tw-ring-color: var(--color-outline);
    }
    .fi .fi-section-header-heading {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text);
    }

    /* Tables — no overflow:hidden on the card: dropdown panels are positioned inside it. */
    .fi .fi-ta-header-cell,
    .fi .fi-ta-header-cell-sort-btn {
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700;
        color: var(--color-text-muted);
    }
    .fi .fi-ta-cell {
        font-size: .88rem;
    }
    .fi .fi-ta-row.fi-clickable:hover {
        background-color: var(--color-surface-high);
    }

    /* Buttons and badges (styleguide .btn-* / .tag / .status shapes) */
    .fi .fi-btn,
    .fi .fi-icon-btn {
        border-radius: var(--radius-pill);
    }
    .fi .fi-btn {
        font-weight: 600;
    }
    .fi .fi-badge {
        border-radius: var(--radius-pill);
    }

    /* Inputs (styleguide .textfield / .field label) — interactive boundary = outline-strong (3:1). */
    .fi .fi-input-wrp {
        border-radius: var(--radius-sm);
        --tw-ring-color: var(--color-outline-strong);
    }
    /* Restated: same specificity as the rule above, so Filament's own invalid rule would lose. */
    .fi .fi-input-wrp.fi-invalid {
        --tw-ring-color: var(--color-danger);
    }
    .fi .fi-fo-field-label-content {
        font-size: .78rem;
        font-weight: 600;
        color: var(--color-text-muted);
    }

    /* Overlays */
    /* Mirrors Filament's own selector — a shorter one loses to its radius/shadow rules. */
    .fi .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
        border-radius: var(--radius);
        --tw-shadow: var(--shadow-card-hover);
    }
    .fi .fi-dropdown-panel {
        border-radius: var(--radius-sm);
        --tw-shadow: var(--shadow-card);
        --tw-ring-color: var(--color-outline);
    }
    .fi .fi-dropdown-list-item:hover {
        background-color: var(--color-surface-high);
    }
    .fi .fi-no-notification {
        border-radius: var(--radius-sm);
        --tw-shadow: var(--shadow-card);
    }

    /* Pagination (styleguide .pagination) */
    .fi .fi-pagination-item .fi-pagination-item-btn {
        border-radius: 50%;
        color: var(--color-text-muted);
    }
    .fi .fi-pagination-item.fi-active .fi-pagination-item-btn {
        background-color: var(--color-primary-container);
        color: var(--color-on-primary-container);
        font-weight: 700;
    }
    .fi .fi-pagination-item.fi-active .fi-pagination-item-label {
        color: inherit;
    }

    /* Tabs (styleguide .chip-filter.active look) */
    .fi .fi-tabs-item {
        border-radius: var(--radius-pill);
    }
    .fi .fi-tabs-item.fi-active {
        background-color: var(--color-primary-container);
    }
    .fi .fi-tabs-item.fi-active .fi-tabs-item-label {
        color: var(--color-on-primary-container);
    }

    /* 5. Simple layout (login, password reset) */
    .fi .fi-simple-layout {
        background-color: var(--color-bg);
    }
    .fi .fi-simple-main {
        background-color: var(--color-surface);
        border-radius: var(--radius);
        --tw-shadow: var(--shadow-card);
        --tw-ring-color: var(--color-outline);
    }
    .fi .fi-simple-header-heading {
        color: var(--color-text);
    }
    .fi .fi-simple-header-subheading {
        color: var(--color-text-muted);
    }
}