/* ==========================================================================
   NADI theme
   --------------------------------------------------------------------------
   Light: an airy workspace — soft lavender-white ground, white cards lifted on
   gentle shadows, generous spacing, one blue accent.
   Dark:  the brand's own world — deep navy ground, raised panels, same accent.

   Both share a single token set, so the theme toggle swaps values rather than
   re-styling components. Colours are NADI's: the blue and the pulse green come
   straight off the logo, and green stays reserved for "alive and healthy" so it
   keeps meaning something.
   ========================================================================== */

:root,
.fi-body {
    /* ground and surfaces */
    --nadi-ground: #f6f7fb;
    --nadi-ground-2: #eef0f8;
    --nadi-surface: #ffffff;
    --nadi-surface-2: #fbfbfe;
    --nadi-line: #e6e8f0;
    --nadi-line-soft: #eef0f6;

    /* ink */
    --nadi-ink: #141a2e;
    --nadi-ink-2: #38415c;
    --nadi-muted: #6b748f;
    --nadi-dim: #98a0b8;

    /* brand */
    --nadi-blue: #2b7fff;
    --nadi-blue-soft: #eaf1ff;
    --nadi-pulse: #16a34a;
    --nadi-pulse-soft: #e8f8ee;

    /* shape and lift */
    --nadi-r: 14px;
    --nadi-r-sm: 9px;
    --nadi-shadow: 0 1px 2px rgba(20, 26, 46, .04), 0 8px 24px -12px rgba(20, 26, 46, .12);
    --nadi-shadow-sm: 0 1px 2px rgba(20, 26, 46, .05);
    --nadi-shadow-lift: 0 2px 4px rgba(20, 26, 46, .05), 0 16px 32px -16px rgba(20, 26, 46, .18);
}

.dark,
.dark .fi-body {
    --nadi-ground: #070f22;
    --nadi-ground-2: #0a1428;
    --nadi-surface: #0c1832;
    --nadi-surface-2: #0f1d3c;
    --nadi-line: #1a2c52;
    --nadi-line-soft: #16264a;

    --nadi-ink: #eaf1ff;
    --nadi-ink-2: #c3d2ee;
    --nadi-muted: #8698bf;
    --nadi-dim: #5f7099;

    --nadi-blue: #4d9fff;
    --nadi-blue-soft: rgba(43, 127, 255, .14);
    --nadi-pulse: #4ade80;
    --nadi-pulse-soft: rgba(34, 197, 94, .14);

    --nadi-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --nadi-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --nadi-shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 32px -16px rgba(0, 0, 0, .7);
}

/* ── page ground ─────────────────────────────────────────────────────────── */
.fi-body,
.fi-layout,
.fi-main-ctn {
    background-color: var(--nadi-ground) !important;
}

.fi-main {
    max-width: 100% !important;
}

/* ── sidebar: quiet, so the content carries the page ─────────────────────── */
.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--nadi-surface) !important;
    border-right: 1px solid var(--nadi-line) !important;
    box-shadow: none !important;
}

.fi-sidebar-nav {
    padding-inline: .6rem;
    gap: .1rem;
}

.fi-sidebar-group-label {
    font-size: .66rem !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    color: var(--nadi-dim) !important;
    padding-inline: .7rem;
    margin-block: .9rem .35rem;
}

.fi-sidebar-item-button {
    border-radius: var(--nadi-r-sm) !important;
    padding-block: .52rem !important;
    padding-inline: .7rem !important;
    font-weight: 500;
    color: var(--nadi-ink-2) !important;
    transition: background-color .14s ease, color .14s ease;
}

.fi-sidebar-item-button:hover {
    background-color: var(--nadi-ground-2) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--nadi-blue-soft) !important;
    color: var(--nadi-blue) !important;
    font-weight: 600;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--nadi-blue) !important;
}

.fi-sidebar-item-icon {
    color: var(--nadi-muted) !important;
}

/* navigation counts read as quiet chips, not alarms */
.fi-sidebar-item-badge .fi-badge {
    background-color: var(--nadi-ground-2) !important;
    color: var(--nadi-muted) !important;
    box-shadow: none !important;
    font-weight: 600;
}

/* ── topbar ──────────────────────────────────────────────────────────────── */
.fi-topbar > nav {
    /* No backdrop-filter here: it creates a containing block that clips the
       user dropdown rendered inside the topbar. A solid ground costs nothing
       and keeps the menu whole. */
    background-color: var(--nadi-ground) !important;
    border-bottom: 1px solid var(--nadi-line-soft) !important;
    box-shadow: none !important;
}

/* ── cards, panels, tables: one rounded, softly lifted surface ───────────── */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section,
.fi-modal-window,
.fi-dropdown-panel {
    background-color: var(--nadi-surface) !important;
    border: 1px solid var(--nadi-line) !important;
    border-radius: var(--nadi-r) !important;
    box-shadow: var(--nadi-shadow) !important;
}

.fi-section-header,
.fi-section-content {
    padding: 1.4rem 1.5rem !important;
}

.fi-section-header-heading {
    font-weight: 650 !important;
    letter-spacing: -.01em;
    color: var(--nadi-ink) !important;
}

.fi-section-header-description {
    color: var(--nadi-muted) !important;
    line-height: 1.55;
}

/* ── stat tiles ──────────────────────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    padding: 1.25rem 1.35rem !important;
    transition: box-shadow .18s ease, transform .18s ease;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--nadi-shadow-lift) !important;
    transform: translateY(-1px);
}

.fi-wi-stats-overview-stat-label {
    font-size: .74rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nadi-dim) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -.025em;
    color: var(--nadi-ink) !important;
    font-variant-numeric: tabular-nums;
    margin-block: .3rem .15rem;
}

.fi-wi-stats-overview-stat-description {
    font-size: .78rem !important;
    color: var(--nadi-muted) !important;
}

/* ── tables ──────────────────────────────────────────────────────────────── */
.fi-ta-header,
.fi-ta-header-ctn {
    background-color: transparent !important;
    border-bottom: 1px solid var(--nadi-line-soft) !important;
}

.fi-ta-header-cell {
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nadi-dim) !important;
    padding-block: .85rem !important;
}

.fi-ta-row {
    border-color: var(--nadi-line-soft) !important;
    transition: background-color .12s ease;
}

.fi-ta-row:hover {
    background-color: var(--nadi-ground-2) !important;
}

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

.fi-ta-text-item-label {
    color: var(--nadi-ink-2) !important;
}

/* money and reference columns line up when they are tabular */
.fi-ta-text-item-label:has(+ *),
.fi-ta-cell [class*="tabular"] {
    font-variant-numeric: tabular-nums;
}

/* ── badges: readable, not shouty ───────────────────────────────────────── */
.fi-badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: .7rem !important;
    letter-spacing: .02em;
    padding-inline: .55rem !important;
    box-shadow: none !important;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.fi-btn {
    border-radius: var(--nadi-r-sm) !important;
    font-weight: 600 !important;
    box-shadow: var(--nadi-shadow-sm) !important;
    transition: transform .12s ease, box-shadow .16s ease, filter .12s ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--nadi-shadow) !important;
}

.fi-btn:active {
    transform: translateY(0);
}

/* ── inputs ──────────────────────────────────────────────────────────────── */
.fi-input-wrp {
    border-radius: var(--nadi-r-sm) !important;
    background-color: var(--nadi-surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--nadi-line) !important;
    transition: box-shadow .14s ease, background-color .14s ease;
}

.fi-input-wrp:focus-within {
    background-color: var(--nadi-surface) !important;
    box-shadow: inset 0 0 0 1px var(--nadi-blue),
                0 0 0 3px color-mix(in srgb, var(--nadi-blue) 16%, transparent) !important;
}

.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    color: var(--nadi-ink-2) !important;
}

.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text {
    color: var(--nadi-muted) !important;
    line-height: 1.5;
}

/* ── page heading ────────────────────────────────────────────────────────── */
.fi-header-heading {
    font-weight: 700 !important;
    letter-spacing: -.022em;
    color: var(--nadi-ink) !important;
}

.fi-header-subheading {
    color: var(--nadi-muted) !important;
}

/* ── empty states read as guidance, not an error ────────────────────────── */
.fi-ta-empty-state-icon-ctn {
    background-color: var(--nadi-blue-soft) !important;
}

.fi-ta-empty-state-icon {
    color: var(--nadi-blue) !important;
}

.fi-ta-empty-state-heading {
    color: var(--nadi-ink) !important;
    font-weight: 650 !important;
}

.fi-ta-empty-state-description {
    color: var(--nadi-muted) !important;
    max-width: 46ch;
    margin-inline: auto;
}

/* ── the theme toggle itself, so it is findable ─────────────────────────── */
/* Filament's own switcher in the user menu is left untouched: restyling it
   made the selected state read as a broken icon. The topbar toggle is the
   one people use. */

/* ── login: centred, lifted, unmistakably NADI ──────────────────────────── */
.fi-simple-main {
    background-color: var(--nadi-surface) !important;
    border: 1px solid var(--nadi-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--nadi-shadow-lift) !important;
}

.fi-simple-layout {
    background-color: var(--nadi-ground) !important;
}

/* ── respect a reduced-motion preference ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-wi-stats-overview-stat,
    .fi-ta-row,
    .fi-sidebar-item-button {
        transition: none !important;
    }

    .fi-btn:hover,
    .fi-wi-stats-overview-stat:hover {
        transform: none;
    }
}


/* ── mobile stacking ────────────────────────────────────────────────────────
   nadi-mobile-stacking
   On narrow screens the sidebar is an overlay. Nothing in the content area may
   sit above it, so cards are held at the base layer and the sidebar is pinned
   over them. A card that escapes here covers the navigation entirely.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn {
        z-index: auto !important;
        position: relative;
    }

    .fi-sidebar,
    .fi-sidebar-open,
    .fi-sidebar-close-overlay {
        z-index: 40 !important;
    }
}