/*
 * Admin panel theme — light-first, glassmorphism SaaS look (Apple/Shopify).
 *
 * Plain CSS on Filament's documented `fi-*` hook classes; served via the
 * panel asset pipeline (`php artisan filament:assets`), so no Tailwind
 * compilation happens here. Light-mode styling is scoped to
 * `html:not(.dark)` so dark mode keeps Filament's stock appearance.
 *
 * Glass recipe: translucent white surfaces + backdrop blur, floating over a
 * canvas with faint ambient color washes — without those washes the blur
 * would have nothing to refract and the cards would read as flat white.
 */

:root {
    --theme-radius-card: 1rem;
    --theme-radius-control: 0.625rem;
    /* 0.85 alpha keeps WCAG contrast intact on top of the tinted canvas —
       lower values wash the text baseline out. */
    --theme-glass-bg: rgb(255 255 255 / 0.85);
    --theme-glass-blur: blur(16px) saturate(180%);
    --theme-shadow-card:
        0 4px 6px -1px rgb(0 0 0 / 0.05),
        0 2px 4px -1px rgb(0 0 0 / 0.03);
    --theme-shadow-card-hover:
        0 6px 10px -2px rgb(0 0 0 / 0.06),
        0 3px 6px -2px rgb(0 0 0 / 0.04);
    --theme-shadow-card-lift:
        0 10px 15px -3px rgb(0 0 0 / 0.08),
        0 4px 6px -4px rgb(0 0 0 / 0.05);
    /* Inner white highlight + soft slate hairline: the two edges that make a
       translucent pane read as "glass" instead of "washed out". */
    --theme-ring-glass:
        inset 0 0 0 1px rgb(255 255 255 / 0.55),
        0 0 0 1px rgb(226 232 240 / 0.6);
}

/* ------------------------------------------------------------------ */
/* Canvas: soft gray with fixed ambient color washes for the blur     */
/* ------------------------------------------------------------------ */

html:not(.dark) .fi-body {
    background-color: #f2f4f7;
    background-image:
        radial-gradient(42rem 30rem at 10% -10%, rgb(99 102 241 / 0.12), transparent 60%),
        radial-gradient(38rem 28rem at 92% -8%, rgb(20 184 166 / 0.10), transparent 60%),
        radial-gradient(48rem 34rem at 50% 115%, rgb(168 85 247 / 0.08), transparent 62%);
    background-attachment: fixed;
}

html:not(.dark) .fi-sidebar {
    background-color: rgb(255 255 255 / 0.7);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    border-inline-end: 1px solid rgb(226 232 240 / 0.5);
}

html:not(.dark) .fi-topbar {
    background-color: rgb(255 255 255 / 0.7);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    border-block-end: 1px solid rgb(226 232 240 / 0.5);
    box-shadow: none;
}

/* Global search: recessive until it's needed — translucent at rest,
   solid on hover/focus. */
html:not(.dark) .fi-topbar .fi-global-search .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.5);
    box-shadow: 0 0 0 1px rgb(226 232 240 / 0.6);
    transition: background-color 150ms ease;
}

html:not(.dark) .fi-topbar .fi-global-search .fi-input-wrp:hover,
html:not(.dark) .fi-topbar .fi-global-search .fi-input-wrp:focus-within {
    background-color: rgb(255 255 255 / 0.9);
}

/* ------------------------------------------------------------------ */
/* Cards: sections, tables, widgets — frosted glass panes             */
/* ------------------------------------------------------------------ */

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-wi-chart {
    background-color: var(--theme-glass-bg);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    border-radius: var(--theme-radius-card);
    box-shadow: var(--theme-ring-glass), var(--theme-shadow-card);
    --tw-ring-shadow: 0 0 #0000;
}

/* Micro-animation: the main cards "breathe" on hover — a gentle lift with a
   deeper shadow. Disabled for users who ask for reduced motion. */
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-wi-chart {
    transition: box-shadow 300ms ease, transform 300ms ease;
}

html:not(.dark) .fi-wi-stats-overview-stat:hover,
html:not(.dark) .fi-wi-chart:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-ring-glass), var(--theme-shadow-card-lift);
}

@media (prefers-reduced-motion: reduce) {
    html:not(.dark) .fi-wi-stats-overview-stat:hover,
    html:not(.dark) .fi-wi-chart:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------ */
/* Stat gradient system: widgets opt in per stat via extraAttributes  */
/* (`app-stat app-stat--indigo` …). Subtle tint wash on the pane +    */
/* soft icon pill (color-600 icon on a color-50 gradient, rounded-xl) */
/* ------------------------------------------------------------------ */

html:not(.dark) .app-stat .fi-wi-stats-overview-stat-label-ctn svg {
    width: 2.125rem;
    height: 2.125rem;
    padding: 0.4375rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

html:not(.dark) .app-stat .fi-wi-stats-overview-stat-value {
    color: var(--gray-900);
}

html:not(.dark) .app-stat--indigo {
    background-image: linear-gradient(135deg, rgb(99 102 241 / 0.08), rgb(168 85 247 / 0.03) 55%, transparent 80%);
}

html:not(.dark) .app-stat--indigo .fi-wi-stats-overview-stat-label-ctn svg {
    background-image: linear-gradient(135deg, #eef2ff, #faf5ff);
    color: #4f46e5;
}

html:not(.dark) .app-stat--sky {
    background-image: linear-gradient(135deg, rgb(14 165 233 / 0.08), rgb(99 102 241 / 0.03) 55%, transparent 80%);
}

html:not(.dark) .app-stat--sky .fi-wi-stats-overview-stat-label-ctn svg {
    background-image: linear-gradient(135deg, #f0f9ff, #eef2ff);
    color: #0284c7;
}

html:not(.dark) .app-stat--emerald {
    background-image: linear-gradient(135deg, rgb(16 185 129 / 0.08), rgb(20 184 166 / 0.03) 55%, transparent 80%);
}

html:not(.dark) .app-stat--emerald .fi-wi-stats-overview-stat-label-ctn svg {
    background-image: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    color: #059669;
}

html:not(.dark) .app-stat--amber {
    background-image: linear-gradient(135deg, rgb(245 158 11 / 0.08), rgb(251 146 60 / 0.03) 55%, transparent 80%);
}

html:not(.dark) .app-stat--amber .fi-wi-stats-overview-stat-label-ctn svg {
    background-image: linear-gradient(135deg, #fffbeb, #fff7ed);
    color: #d97706;
}

html:not(.dark) .app-stat--rose {
    background-image: linear-gradient(135deg, rgb(244 63 94 / 0.08), rgb(236 72 153 / 0.03) 55%, transparent 80%);
}

html:not(.dark) .app-stat--rose .fi-wi-stats-overview-stat-label-ctn svg {
    background-image: linear-gradient(135deg, #fff1f2, #fdf2f8);
    color: #e11d48;
}

html:not(.dark) .app-stat--slate {
    background-image: linear-gradient(135deg, rgb(100 116 139 / 0.06), rgb(148 163 184 / 0.02) 55%, transparent 80%);
}

html:not(.dark) .app-stat--slate .fi-wi-stats-overview-stat-label-ctn svg {
    background-image: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #475569;
}

/* ------------------------------------------------------------------ */
/* Command Center KPI cards (custom Blade views): free-floating glass */
/* panes with trend pills and SVG sparklines. Layout is mode-neutral; */
/* colors are set per mode at the end of this block.                  */
/* ------------------------------------------------------------------ */

.app-kpi-rows {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.app-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Large finance cards (row 1 of the KPI cluster) */
.app-kpi-card--featured {
    padding: 2rem;
}

.app-kpi-card--featured .app-kpi-value {
    font-size: 2.25rem;
}

.app-kpi-card--featured .app-kpi-spark {
    height: 3rem;
}

@media (min-width: 640px) {
    /* auto-fit lets the row carry four or five cards and wrap cleanly on
       narrow screens instead of forcing a fixed column count */
    .app-kpi-grid--four {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }

    .app-kpi-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-kpi-grid--hero {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

/* Symmetric 3-column grid for the V13 booking-data cluster */
@media (min-width: 640px) {
    .app-kpi-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .app-kpi-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.app-kpi-card {
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: box-shadow 300ms ease, transform 300ms ease, background-color 300ms ease;
}

/* Cards that open a flap-out: pointer, corner chevron, stronger hover */
.app-kpi-card--clickable {
    cursor: pointer;
    position: relative;
    text-align: inherit;
}

.app-kpi-affordance {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
}

.app-kpi-affordance svg {
    width: 1rem;
    height: 1rem;
}

html:not(.dark) .app-kpi-affordance {
    color: var(--gray-400);
}

html:not(.dark) .app-kpi-card--clickable:hover {
    background-color: rgb(255 255 255 / 0.92);
}

html:not(.dark) .app-kpi-card--clickable:hover .app-kpi-affordance {
    color: var(--primary-600);
}

html.dark .app-kpi-affordance {
    color: var(--gray-500);
}

html.dark .app-kpi-card--clickable:hover {
    background-color: rgb(255 255 255 / 0.09);
}

html.dark .app-kpi-card--clickable:hover .app-kpi-affordance {
    color: var(--primary-400);
}

/* Flap-out detail tables */
.app-flap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.app-flap-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

.app-flap-table td {
    padding: 0.625rem 0.75rem;
}

.app-flap-table th:last-child,
.app-flap-table td:last-child {
    text-align: right;
}

html:not(.dark) .app-flap-table th {
    color: var(--gray-500);
}

html:not(.dark) .app-flap-table td {
    border-top: 1px solid rgb(2 6 23 / 0.06);
    color: var(--gray-700);
}

html.dark .app-flap-table th {
    color: var(--gray-400);
}

html.dark .app-flap-table td {
    border-top: 1px solid rgb(255 255 255 / 0.08);
    color: var(--gray-300);
}

.app-flap-link {
    color: var(--primary-600);
    font-weight: 500;
}

.app-flap-link:hover {
    text-decoration: underline;
}

/* Stacked bar sections inside the demographics flap-out */
.app-flap-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 0.5rem;
}

.app-flap-section-heading {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

html:not(.dark) .app-flap-section-heading {
    color: var(--gray-900);
}

html.dark .app-flap-section-heading {
    color: #ffffff;
}

.app-flap-empty {
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

html:not(.dark) .app-flap-empty {
    color: var(--gray-500);
}

html.dark .app-flap-empty {
    color: var(--gray-400);
}

.app-kpi-card:hover {
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .app-kpi-card:hover {
        transform: none;
    }
}

.app-kpi-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.app-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.app-kpi-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.app-kpi-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.app-kpi-value-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.625rem;
    margin-top: 1rem;
}

.app-kpi-value {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    white-space: nowrap;
}

.app-kpi-pill {
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

/* Comparison-window tooltip on the trend pill: shows on hover and on
   focus, so taps and keyboard reach it too. */
.app-kpi-pill[data-tip]:hover::after,
.app-kpi-pill[data-tip]:focus::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.375rem);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: rgb(15 23 42 / 0.88);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 400;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 8px 20px -6px rgb(15 23 42 / 0.35);
    z-index: 10;
    pointer-events: none;
}

.app-kpi-pill[data-tip]:focus {
    outline: none;
}

.app-kpi-meta {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.app-kpi-spark {
    display: block;
    width: 100%;
    height: 2.5rem;
    margin-top: 1.25rem;
}

/* Light mode */

html:not(.dark) .app-kpi-card {
    background-color: rgb(255 255 255 / 0.6);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.55),
        0 0 0 1px rgb(15 23 42 / 0.05),
        var(--theme-shadow-card);
}

html:not(.dark) .app-kpi-card:hover {
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.55),
        0 0 0 1px rgb(15 23 42 / 0.05),
        var(--theme-shadow-card-lift);
}

html:not(.dark) .app-kpi-label,
html:not(.dark) .app-kpi-meta {
    color: var(--gray-500);
}

html:not(.dark) .app-kpi-value {
    color: var(--gray-900);
}

html:not(.dark) .app-kpi-pill--up {
    background-color: #ecfdf5;
    color: #059669;
}

html:not(.dark) .app-kpi-pill--down {
    background-color: #fff1f2;
    color: #e11d48;
}

html:not(.dark) .app-kpi-pill--warn {
    background-color: #fffbeb;
    color: #b45309;
}

html:not(.dark) .app-kpi-pill--neutral {
    background-color: #f1f5f9;
    color: #475569;
}

html:not(.dark) .app-kpi-card--indigo .app-kpi-icon {
    background-image: linear-gradient(135deg, #eef2ff, #faf5ff);
    color: #4f46e5;
}

html:not(.dark) .app-kpi-card--sky .app-kpi-icon {
    background-image: linear-gradient(135deg, #f0f9ff, #eef2ff);
    color: #0284c7;
}

html:not(.dark) .app-kpi-card--emerald .app-kpi-icon {
    background-image: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    color: #059669;
}

html:not(.dark) .app-kpi-card--amber .app-kpi-icon {
    background-image: linear-gradient(135deg, #fffbeb, #fff7ed);
    color: #d97706;
}

html:not(.dark) .app-kpi-card--rose .app-kpi-icon {
    background-image: linear-gradient(135deg, #fff1f2, #fdf2f8);
    color: #e11d48;
}

html:not(.dark) .app-kpi-card--violet .app-kpi-icon {
    background-image: linear-gradient(135deg, #f5f3ff, #faf5ff);
    color: #7c3aed;
}

html:not(.dark) .app-kpi-card--teal .app-kpi-icon {
    background-image: linear-gradient(135deg, #f0fdfa, #ecfdf5);
    color: #0d9488;
}

/* Dark mode: custom markup gets explicit dark styling (stock Filament
   does not know these classes) */

html.dark .app-kpi-card {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

html.dark .app-kpi-label,
html.dark .app-kpi-meta {
    color: var(--gray-400);
}

html.dark .app-kpi-value {
    color: #ffffff;
}

html.dark .app-kpi-icon {
    background-color: rgb(255 255 255 / 0.08);
    color: var(--gray-300);
}

html.dark .app-kpi-pill--up {
    background-color: rgb(16 185 129 / 0.15);
    color: #6ee7b7;
}

html.dark .app-kpi-pill--down {
    background-color: rgb(244 63 94 / 0.15);
    color: #fda4af;
}

html.dark .app-kpi-pill--warn {
    background-color: rgb(245 158 11 / 0.15);
    color: #fcd34d;
}

html.dark .app-kpi-pill--neutral {
    background-color: rgb(148 163 184 / 0.15);
    color: #cbd5e1;
}

/* ------------------------------------------------------------------ */
/* Data-viz widgets (V8): glass card shell, gender metric cards,      */
/* horizontal metric bars and the nationality world map               */
/* ------------------------------------------------------------------ */

.app-viz-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: var(--theme-radius-card);
    padding: 1.5rem;
}

.app-viz-heading {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.app-viz-sub {
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* One shared grid for ALL rows of a widget: labels truncate in a fixed
   first column and values sit right-aligned in a fixed last column, so
   every bar starts and ends on exactly the same vertical line. */
.app-bars {
    display: grid;
    grid-template-columns: var(--bars-label-w, 10rem) minmax(0, 1fr) var(--bars-value-w, 5.5rem);
    column-gap: 0.875rem;
    row-gap: 1rem;
    align-items: center;
}

.app-bars--wide {
    --bars-label-w: 16rem;
    --bars-value-w: 9rem;
}

.app-bars-row {
    display: contents;
}

.app-bars-label {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-bars-track {
    height: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
}

.app-bars-fill {
    height: 100%;
    border-radius: 9999px;
    background-image: linear-gradient(90deg, #4f46e5, #818cf8);
    transition: width 300ms ease;
}

.app-bars-value {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.app-bars-pct {
    margin-inline-start: 0.25rem;
    font-size: 0.75rem;
}

/* Light mode */

html:not(.dark) .app-viz-card {
    background-color: var(--theme-glass-bg);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    box-shadow: var(--theme-ring-glass), var(--theme-shadow-card);
}

html:not(.dark) .app-viz-heading,
html:not(.dark) .app-bars-label {
    color: var(--gray-900);
}

html:not(.dark) .app-viz-sub,
html:not(.dark) .app-bars-pct {
    color: var(--gray-500);
}

html:not(.dark) .app-bars-value {
    color: var(--gray-700);
}

html:not(.dark) .app-bars-track {
    background-color: rgb(15 23 42 / 0.06);
}

/* Dark mode */

html.dark .app-viz-card {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

html.dark .app-viz-heading,
html.dark .app-bars-label {
    color: #ffffff;
}

html.dark .app-viz-sub,
html.dark .app-bars-pct {
    color: var(--gray-400);
}

html.dark .app-bars-value {
    color: var(--gray-300);
}

html.dark .app-bars-track {
    background-color: rgb(255 255 255 / 0.1);
}

/* ------------------------------------------------------------------ */
/* Adaptive time-series chart inside the KPI flap-outs (V20): one     */
/* indigo series in the sparkline gradient language, bars growing     */
/* from the zero baseline, hairline grid, CSS data-tip tooltips on    */
/* hover AND keyboard focus.                                          */
/* ------------------------------------------------------------------ */

.app-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.app-chart-head .app-flap-section-heading {
    margin-bottom: 0;
}

.app-chart-frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.625rem;
    row-gap: 0.375rem;
}

.app-chart-ticks {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.app-chart-plot {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    height: 9rem;
}

.app-chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.app-chart-gridline {
    height: 1px;
}

.app-chart-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

/* Full-height hover/focus target per bucket — far bigger than the bar
   itself, so tooltips never demand pixel hunting. */
.app-chart-slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 0.375rem;
}

.app-chart-bar {
    width: 100%;
    max-width: 1.5rem;
    /* Rounded data-end only; square at the baseline. */
    border-radius: 4px 4px 0 0;
    transition: height 300ms ease, filter 150ms ease;
}

.app-chart-slot:hover .app-chart-bar,
.app-chart-slot:focus-visible .app-chart-bar {
    filter: brightness(1.08) saturate(1.1);
}

/* Bucket tooltip: identical recipe to the trend-pill data-tip — hover
   AND focus, so taps and keyboard reach it too. */
.app-chart-slot[data-tip]:hover::after,
.app-chart-slot[data-tip]:focus::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.375rem);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: rgb(15 23 42 / 0.88);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 400;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 8px 20px -6px rgb(15 23 42 / 0.35);
    z-index: 10;
    pointer-events: none;
}

/* Mouse clicks stay quiet; keyboard focus gets the theme's explicit
   ring, inset so it never crosses into the 2px-gapped neighbor slot. */
.app-chart-slot:focus {
    outline: none;
}

.app-chart-slot:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: -2px;
}

.app-chart-xaxis {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: 2px;
}

.app-chart-xlabel {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.6875rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
}

/* Light mode */

html:not(.dark) .app-chart-ticks,
html:not(.dark) .app-chart-xlabel {
    color: var(--gray-500);
}

html:not(.dark) .app-chart-gridline {
    background-color: rgb(15 23 42 / 0.06);
}

html:not(.dark) .app-chart-gridline--baseline {
    background-color: rgb(15 23 42 / 0.12);
}

html:not(.dark) .app-chart-slot:hover,
html:not(.dark) .app-chart-slot:focus-visible {
    background-color: rgb(15 23 42 / 0.03);
}

html:not(.dark) .app-chart-bar {
    background-image: linear-gradient(180deg, #818cf8, #4f46e5);
}

/* Dark mode */

html.dark .app-chart-ticks,
html.dark .app-chart-xlabel {
    color: var(--gray-400);
}

html.dark .app-chart-gridline {
    background-color: rgb(255 255 255 / 0.08);
}

html.dark .app-chart-gridline--baseline {
    background-color: rgb(255 255 255 / 0.16);
}

html.dark .app-chart-slot:hover,
html.dark .app-chart-slot:focus-visible {
    background-color: rgb(255 255 255 / 0.05);
}

html.dark .app-chart-bar {
    /* Validated against the dark surface (OKLCH L 0.48–0.67, ≥3:1). */
    background-image: linear-gradient(180deg, #7c83f7, #6366f1);
}

/* ------------------------------------------------------------------ */
/* Typography: calm, high-contrast headings                           */
/* ------------------------------------------------------------------ */

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-weight: 600;
    letter-spacing: -0.025em;
}

html:not(.dark) .fi-header-heading {
    color: var(--gray-900);
}

html:not(.dark) .fi-header-subheading {
    color: var(--gray-500);
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.025em;
}

/* ------------------------------------------------------------------ */
/* A11y: elegant, explicit focus rings for keyboard navigation.       */
/* :focus-visible keeps mouse clicks quiet; inputs are excluded       */
/* because Filament already rings their wrapper in primary.           */
/* ------------------------------------------------------------------ */

.fi-body :is(a, button, [role='button']):focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Tables: room to breathe, clear contrast, gentle hover              */
/* ------------------------------------------------------------------ */

.fi-ta-cell {
    padding-block: 0.375rem;
}

html:not(.dark) .fi-ta-header-cell {
    color: var(--gray-500);
}

html:not(.dark) .fi-ta-row:hover {
    background-color: rgb(2 6 23 / 0.02);
}

html:not(.dark) .fi-ta-table {
    --tw-divide-y-reverse: 0;
}

/* ------------------------------------------------------------------ */
/* Badges: soft pastel pills — tinted background, darker label        */
/* ------------------------------------------------------------------ */

.fi-body .fi-badge {
    border-radius: 9999px;
    padding-inline: 0.625rem;
}

html:not(.dark) .fi-badge.fi-color {
    background-color: color-mix(in srgb, var(--color-100) 60%, #ffffff);
    color: var(--color-700);
    --tw-ring-color: color-mix(in srgb, var(--color-600) 14%, transparent);
}

html:not(.dark) .fi-badge.fi-color-gray {
    background-color: var(--gray-100);
    color: var(--gray-600);
    --tw-ring-color: rgb(2 6 23 / 0.08);
}

/* ------------------------------------------------------------------ */
/* Controls: buttons and inputs with softer radii; solid danger       */
/* buttons become quiet soft-tint buttons (Apple-style restraint —    */
/* only the primary CTA may shout)                                    */
/* ------------------------------------------------------------------ */

.fi-btn {
    border-radius: var(--theme-radius-control);
}

html:not(.dark) .fi-btn.fi-color-danger {
    background-color: color-mix(in srgb, var(--color-50) 80%, #ffffff);
    background-image: none;
    color: var(--color-600);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-600) 18%, transparent);
    --tw-ring-shadow: 0 0 #0000;
}

html:not(.dark) .fi-btn.fi-color-danger:hover {
    background-color: var(--color-100);
    color: var(--color-700);
}

/* Destructive intent may only shout at the moment of truth: inside the
   confirmation modal the confirm button returns to full rose. */
html:not(.dark) .fi-modal-footer .fi-btn.fi-color-danger,
html:not(.dark) .fi-modal-footer-actions .fi-btn.fi-color-danger {
    background-color: var(--color-600);
    color: #ffffff;
    box-shadow: none;
}

html:not(.dark) .fi-modal-footer .fi-btn.fi-color-danger:hover,
html:not(.dark) .fi-modal-footer-actions .fi-btn.fi-color-danger:hover {
    background-color: var(--color-500);
    color: #ffffff;
}

.fi-input-wrp {
    border-radius: var(--theme-radius-control);
}

html:not(.dark) .fi-input-wrp {
    background-color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Integrations page: the panel compiles no Tailwind utilities for    */
/* app blades, so the tile layout lives here as semantic classes      */
/* (layout is mode-neutral; text colors are set per mode below)       */
/* ------------------------------------------------------------------ */

.app-integrations {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.app-integrations-category-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.app-integrations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .app-integrations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .app-integrations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.app-integration-tile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-integration-tile-title {
    font-size: 1rem;
    font-weight: 600;
}

.app-integration-tile-badges {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.app-integration-tile-description {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.app-integration-webhook {
    margin-top: 1rem;
}

.app-integration-webhook-label {
    font-size: 0.75rem;
    font-weight: 500;
}

.app-integration-webhook-field {
    margin-top: 0.375rem;
}

.app-integration-tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

html:not(.dark) .app-integrations-category-title,
html:not(.dark) .app-integration-tile-title {
    color: var(--gray-900);
}

html:not(.dark) .app-integration-tile-description,
html:not(.dark) .app-integration-webhook-label {
    color: var(--gray-500);
}

html.dark .app-integrations-category-title,
html.dark .app-integration-tile-title {
    color: #ffffff;
}

html.dark .app-integration-tile-description,
html.dark .app-integration-webhook-label {
    color: var(--gray-400);
}

/* ------------------------------------------------------------------ */
/* Sidebar navigation: quiet items, clear active state                */
/* ------------------------------------------------------------------ */

.fi-sidebar-item-btn {
    border-radius: 0.5rem;
}

html:not(.dark) .fi-sidebar-group-label {
    color: var(--gray-500);
}

/* ------------------------------------------------------------------ */
/* Modals & slide-overs: frosted panes over the dimmed page           */
/* ------------------------------------------------------------------ */

html:not(.dark) .fi-modal-window {
    background-color: rgb(255 255 255 / 0.85);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    box-shadow:
        var(--theme-ring-glass),
        0 24px 60px -16px rgb(15 23 42 / 0.24);
}

.fi-modal:not(.fi-modal-slide-over) .fi-modal-window {
    border-radius: 1rem;
}

/* MFA app-authentication setup: this one modal's content (QR + secret +
   the recovery-code list) is taller than a laptop viewport, so Filament's
   default cap turned it into an inner scroll box. Lift the cap only here so
   the whole dialog scrolls with the page; the child selector out-specifies
   the vendor rule regardless of stylesheet order. All other modals keep the
   viewport-capped internal scroll (wanted for the flap-outs). */
.fi-modal-window-ctn > .fi-modal-window.fi-mfa-setup-modal {
    max-height: none;
}

/* ------------------------------------------------------------------ */
/* Dropdowns                                                          */
/* ------------------------------------------------------------------ */

html:not(.dark) .fi-dropdown-panel {
    background-color: rgb(255 255 255 / 0.85);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    border-radius: 0.75rem;
    box-shadow:
        var(--theme-ring-glass),
        0 12px 32px -8px rgb(15 23 42 / 0.18);
    --tw-ring-shadow: 0 0 #0000;
}

/* ------------------------------------------------------------------ */
/* Auth pages (login, password reset): floating glass card            */
/* ------------------------------------------------------------------ */

html:not(.dark) .fi-simple-layout {
    background-color: #f2f4f7;
    background-image:
        radial-gradient(42rem 30rem at 10% -10%, rgb(99 102 241 / 0.12), transparent 60%),
        radial-gradient(38rem 28rem at 92% -8%, rgb(20 184 166 / 0.10), transparent 60%);
    background-attachment: fixed;
}

html:not(.dark) .fi-simple-main {
    background-color: var(--theme-glass-bg);
    -webkit-backdrop-filter: var(--theme-glass-blur);
    backdrop-filter: var(--theme-glass-blur);
    border-radius: 1.25rem;
    box-shadow: var(--theme-ring-glass), var(--theme-shadow-card-hover);
    --tw-ring-shadow: 0 0 #0000;
}

/* ------------------------------------------------------------------ */
/* Payout reconciliation breakdown (bookings flap-out, V17)           */
/* ------------------------------------------------------------------ */

.app-payout-recon {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgb(226 232 240 / 0.8);
    border-radius: 0.75rem;
    background-color: rgb(255 255 255 / 0.65);
}

html.dark .app-payout-recon {
    border-color: rgb(51 65 85 / 0.8);
    background-color: rgb(15 23 42 / 0.5);
}

.app-payout-recon-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-payout-recon-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.375rem 1.5rem;
    margin: 0;
    font-size: 0.875rem;
    max-width: 26rem;
}

.app-payout-recon-grid dt {
    color: rgb(100 116 139);
}

html.dark .app-payout-recon-grid dt {
    color: rgb(148 163 184);
}

.app-payout-recon-grid dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: rgb(15 23 42);
}

html.dark .app-payout-recon-grid dd {
    color: rgb(226 232 240);
}

.app-payout-recon-grid .app-payout-recon-total {
    border-top: 1px solid rgb(226 232 240 / 0.8);
    padding-top: 0.375rem;
    font-weight: 600;
}

html.dark .app-payout-recon-grid .app-payout-recon-total {
    border-top-color: rgb(51 65 85 / 0.8);
}

.app-payout-recon-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: rgb(180 83 9);
}

html.dark .app-payout-recon-hint {
    color: rgb(251 191 36);
}

.app-payout-recon-hint--danger {
    color: rgb(190 18 60);
}

html.dark .app-payout-recon-hint--danger {
    color: rgb(251 113 133);
}