/* =============================================================================
   JAOS — Filament theme (Light + Dark via tokens --jaos-*)
   ============================================================================= */

/* ── Layout ── */
.fi-main {
    background:
        radial-gradient(900px 520px at 12% -8%, var(--jaos-main-glow-a), transparent 55%),
        radial-gradient(700px 420px at 92% 0%, var(--jaos-main-glow-b), transparent 50%),
        var(--jaos-bg) !important;
}

.fi-main-ctn {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ── Topbar ── */
.fi-topbar {
    background: var(--jaos-topbar-bg) !important;
    border-bottom: 1px solid var(--jaos-border) !important;
    backdrop-filter: blur(12px);
}

.fi-topbar .fi-input-wrp {
    background: var(--jaos-input-bg) !important;
    border: 1px solid var(--jaos-border) !important;
    border-radius: var(--jaos-radius-md) !important;
}

.fi-topbar .fi-input-wrp:focus-within {
    border-color: var(--jaos-primary) !important;
    box-shadow: 0 0 0 3px var(--jaos-glow-soft) !important;
}

/* ── Sidebar ── */
.fi-sidebar {
    background: var(--jaos-sidebar-bg) !important;
    border-right: 1px solid var(--jaos-border) !important;
}

.fi-sidebar-header {
    padding: 24px 18px !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header img.fi-logo {
    filter: var(--jaos-logo-glow);
}

.fi-sidebar-group-label {
    color: var(--jaos-text-subtle) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 18px;
    font-weight: 600;
}

.fi-sidebar-item-label,
.fi-sidebar-item-icon {
    color: var(--jaos-text-soft) !important;
}

.fi-sidebar-item a {
    margin: 4px 10px !important;
    border-radius: var(--jaos-radius-md) !important;
    min-height: 44px;
    transition: all var(--jaos-transition);
}

.fi-sidebar-item a:hover {
    background: var(--jaos-hover-bg) !important;
    transform: translateX(3px);
}

.fi-sidebar-item-active a {
    background: var(--jaos-active-bg) !important;
    border: 1px solid var(--jaos-border-strong);
    box-shadow: 0 0 18px var(--jaos-glow-soft);
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--jaos-primary) !important;
    font-weight: 700 !important;
}

html.fi.dark .fi-sidebar-item-active .fi-sidebar-item-label,
html.fi.dark .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--jaos-accent) !important;
}

/* ── Headings ── */
.fi-header-heading {
    letter-spacing: 0.02em;
    color: var(--jaos-text) !important;
}

.fi-header-subheading {
    max-width: 52rem;
    color: var(--jaos-text-muted) !important;
}

/* ── Cartes / widgets / sections ── */
.fi-wi-stats-overview-stat,
.fi-widget,
.fi-section:not(.fi-section-not-contained),
.fi-ta {
    background: var(--jaos-card-gradient) !important;
    border: 1px solid var(--jaos-border) !important;
    border-radius: var(--jaos-radius-lg) !important;
    box-shadow: var(--jaos-shadow);
    transition: all var(--jaos-transition);
}

html.fi:not(.dark) .fi-wi-stats-overview-stat,
html.fi:not(.dark) .fi-widget,
html.fi:not(.dark) .fi-section:not(.fi-section-not-contained),
html.fi:not(.dark) .fi-ta {
    backdrop-filter: none;
}

html.fi.dark .fi-wi-stats-overview-stat,
html.fi.dark .fi-widget,
html.fi.dark .fi-section:not(.fi-section-not-contained),
html.fi.dark .fi-ta {
    backdrop-filter: blur(8px);
}

.fi-wi-stats-overview-stat:hover,
.fi-widget:hover {
    transform: translateY(-2px);
    border-color: var(--jaos-border-strong) !important;
    box-shadow: var(--jaos-shadow-glow);
}

/* ── KPI ── */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--jaos-glow-soft), transparent 50%);
    pointer-events: none;
    opacity: 0.75;
}

.fi-wi-stats-overview-stat > * {
    position: relative;
    z-index: 1;
}

.fi-wi-stats-overview-stat-value {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: var(--jaos-kpi-value) !important;
}

html.fi.dark .fi-wi-stats-overview-stat-value {
    background: var(--jaos-gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat-description-icon {
    color: var(--jaos-text-muted) !important;
}

.fi-wi-stats-overview-stat-description-icon {
    color: var(--jaos-primary) !important;
}

.fi-wi-stats-overview-stat-chart {
    margin-top: 16px !important;
    padding-top: 10px !important;
    height: 52px !important;
}

/* ── Boutons ── */
.fi-btn-color-primary {
    background: var(--jaos-gradient) !important;
    border: 1px solid color-mix(in srgb, var(--jaos-primary) 55%, transparent) !important;
    color: var(--jaos-on-primary) !important;
    font-weight: 700;
    box-shadow: 0 4px 16px var(--jaos-glow-soft);
    transition: transform var(--jaos-transition), box-shadow var(--jaos-transition), filter var(--jaos-transition);
}

.fi-btn-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px var(--jaos-glow);
    filter: brightness(1.05);
}

/* ── Formulaires ── */
.fi-input-wrp,
.fi-select-input,
.fi-fo-textarea {
    border-radius: var(--jaos-radius-sm) !important;
    background: var(--jaos-input-bg) !important;
    border-color: var(--jaos-border) !important;
}

.fi-input-wrp:focus-within,
.fi-select-input:focus-within,
.fi-fo-field-wrp:focus-within .fi-input-wrp {
    border-color: var(--jaos-primary) !important;
    box-shadow: 0 0 0 3px var(--jaos-glow-soft) !important;
}

.fi-fo-field-wrp-label {
    color: var(--jaos-text-soft) !important;
    font-weight: 500;
}

.fi-fo-field-wrp-helper-text {
    color: var(--jaos-text-subtle) !important;
}

/* ── Tables ── */
.fi-ta-header {
    border-bottom: 1px solid var(--jaos-border) !important;
    background: var(--jaos-surface-2) !important;
}

.fi-ta-header-cell {
    color: var(--jaos-text-soft) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px !important;
    font-weight: 600;
}

.fi-ta-row {
    transition: background var(--jaos-transition);
}

.fi-ta-row:hover:not(.ja-premium-row) {
    background: var(--jaos-hover-bg) !important;
}

.fi-ta-cell {
    border-color: var(--jaos-border-subtle) !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    color: var(--jaos-text) !important;
}

.fi-ta-actions-cell .fi-icon-btn:hover {
    color: var(--jaos-primary) !important;
    background: var(--jaos-hover-bg) !important;
}

/* ── Badges ── */
.fi-badge.fi-color-success {
    background: color-mix(in srgb, var(--jaos-success) 14%, var(--jaos-surface)) !important;
    color: color-mix(in srgb, var(--jaos-success) 85%, #052e16) !important;
    border: 1px solid color-mix(in srgb, var(--jaos-success) 35%, transparent);
}

.fi-badge.fi-color-info {
    background: color-mix(in srgb, var(--jaos-primary) 12%, var(--jaos-surface)) !important;
    color: var(--jaos-primary-emphasis) !important;
    border: 1px solid color-mix(in srgb, var(--jaos-primary) 28%, transparent);
}

html.fi.dark .fi-badge.fi-color-info {
    color: var(--jaos-accent) !important;
}

.fi-badge.fi-color-warning {
    background: color-mix(in srgb, var(--jaos-warning) 14%, var(--jaos-surface)) !important;
    color: color-mix(in srgb, var(--jaos-warning) 90%, #451a03) !important;
    border: 1px solid color-mix(in srgb, var(--jaos-warning) 35%, transparent);
}

.fi-badge.fi-color-danger {
    background: color-mix(in srgb, var(--jaos-danger) 12%, var(--jaos-surface)) !important;
    color: color-mix(in srgb, var(--jaos-danger) 88%, #450a0a) !important;
    border: 1px solid color-mix(in srgb, var(--jaos-danger) 35%, transparent);
}

.fi-badge.fi-color-gray {
    background: var(--jaos-surface-2) !important;
    color: var(--jaos-text-muted) !important;
    border: 1px solid var(--jaos-border);
}

/* ── Tabs ── */
.fi-tabs-item-active {
    color: var(--jaos-primary) !important;
    border-color: var(--jaos-primary) !important;
}

.fi-tabs-item {
    color: var(--jaos-text-muted) !important;
}

.fi-tabs-item:hover {
    color: var(--jaos-text) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--jaos-primary) 35%, var(--jaos-border));
    border-radius: 20px;
}

/* ── Login ── */
.fi-simple-layout {
    min-height: 100dvh;
    background:
        radial-gradient(55% 45% at 50% 0%, var(--jaos-glow-soft), transparent 60%),
        radial-gradient(35% 30% at 85% 15%, var(--jaos-main-glow-b), transparent 50%),
        var(--jaos-bg);
}

.fi-simple-header .fi-logo,
.fi-simple-header img.fi-logo {
    margin-inline: auto;
    width: min(100%, 22rem);
    height: auto !important;
    max-height: 5.5rem;
    object-fit: contain;
    filter: var(--jaos-logo-glow);
}

.fi-simple-header-heading {
    color: var(--jaos-text) !important;
}

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

.fi-simple-page-content .fi-section {
    border: 1px solid var(--jaos-border) !important;
    border-radius: var(--jaos-radius-lg) !important;
    background: var(--jaos-surface) !important;
    box-shadow: var(--jaos-shadow-md);
}

html.fi.dark .fi-simple-page-content .fi-section {
    background: var(--jaos-glass) !important;
    backdrop-filter: blur(14px);
}

/* ── Dashboard ── */
.fi-page-dashboard .fi-wi-stats-overview,
.fi-page-dashboard .fi-wi-table {
    border: 1px solid var(--jaos-border);
    border-radius: var(--jaos-radius-lg);
    background: var(--jaos-surface);
    box-shadow: var(--jaos-shadow);
}

.fi-page-dashboard .fi-wi-table .fi-section-header-heading,
.ja-dashboard-events-title {
    color: var(--jaos-primary-emphasis) !important;
}

html.fi.dark .fi-page-dashboard .fi-wi-table .fi-section-header-heading,
html.fi.dark .ja-dashboard-events-title {
    color: var(--jaos-accent) !important;
}

.ja-dashboard-events-sub,
.ja-dashboard-events-empty {
    color: var(--jaos-text-muted) !important;
}

.ja-dashboard-event-card {
    background: var(--jaos-surface) !important;
    border: 1px solid var(--jaos-border) !important;
    color: var(--jaos-text) !important;
    box-shadow: var(--jaos-shadow);
}

.ja-dashboard-event-card:hover {
    border-color: var(--jaos-border-strong) !important;
    box-shadow: var(--jaos-shadow-glow);
}

.ja-dashboard-event-date {
    color: var(--jaos-primary) !important;
}

.ja-dashboard-event-title {
    color: var(--jaos-text) !important;
}

.ja-dashboard-event-client {
    color: var(--jaos-text-muted) !important;
}

/* ── Cockpit ── */
.ja-cockpit__hero {
    background: linear-gradient(135deg, var(--jaos-glow-soft), var(--jaos-surface));
    border: 1px solid var(--jaos-border);
    box-shadow: var(--jaos-shadow);
}

.ja-cockpit__hero h2 {
    color: var(--jaos-text);
}

.ja-cockpit__hero-subtitle {
    color: var(--jaos-text-muted);
}

.ja-cockpit__hero-badge--trial {
    background: color-mix(in srgb, var(--jaos-primary) 18%, transparent);
    color: var(--jaos-primary-emphasis);
    border-color: color-mix(in srgb, var(--jaos-primary) 35%, transparent);
}

.ja-cockpit__hero-badge--active {
    background: color-mix(in srgb, var(--jaos-success) 15%, transparent);
    color: var(--jaos-success);
    border-color: color-mix(in srgb, var(--jaos-success) 35%, transparent);
}

.ja-cockpit__hero-badge--expired {
    background: color-mix(in srgb, var(--jaos-danger) 12%, transparent);
    color: var(--jaos-danger);
    border-color: color-mix(in srgb, var(--jaos-danger) 35%, transparent);
}

.ja-cockpit__hero-cta {
    background: var(--jaos-gradient);
    color: var(--jaos-on-primary);
    box-shadow: var(--jaos-shadow);
}

.ja-cockpit__hero-cta:hover {
    box-shadow: var(--jaos-shadow-glow);
    color: var(--jaos-on-primary);
}

.ja-cockpit__hero p {
    color: var(--jaos-text-muted);
}

.ja-cockpit__stat {
    background: var(--jaos-surface);
    border: 1px solid var(--jaos-border);
    box-shadow: var(--jaos-shadow);
}

.ja-cockpit__stat-value {
    color: var(--jaos-primary-emphasis);
}

html.fi.dark .ja-cockpit__stat-value {
    background: var(--jaos-gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ja-cockpit__stat-label,
.ja-cockpit__section-title {
    color: var(--jaos-text-muted);
}

.ja-cockpit__tile {
    min-height: 140px;
    background: var(--jaos-surface);
    border: 1px solid var(--jaos-border);
    box-shadow: var(--jaos-shadow);
}

.ja-cockpit__tile-label {
    color: var(--jaos-text);
}

.ja-cockpit__tile-meta {
    color: var(--jaos-primary);
}

@media (hover: hover) {
    .ja-cockpit__tile:hover {
        transform: translateY(-4px);
        border-color: var(--jaos-border-strong);
        box-shadow: var(--jaos-shadow-glow);
    }
}

.ja-cockpit__fav {
    background: var(--jaos-surface-2);
    color: var(--jaos-text-muted);
}

.ja-cockpit__fav.is-active {
    color: var(--jaos-primary);
}

/* ── Abonnement ── */
.ja-subscription__title,
.ja-subscription-widget__offer {
    color: var(--jaos-text);
}

.ja-subscription__subtitle,
.ja-subscription__details dt,
.ja-subscription-widget__due,
.ja-subscription__module p {
    color: var(--jaos-text-muted);
}

.ja-subscription__details dd {
    color: var(--jaos-text);
}

.ja-subscription__module {
    background: var(--jaos-surface);
    border: 1px solid var(--jaos-border);
}

.ja-subscription__plan {
    background: var(--jaos-surface);
    border: 1px solid var(--jaos-border);
    box-shadow: var(--jaos-shadow);
}

.ja-subscription__plan-highlight,
.ja-subscription__plan-features {
    color: var(--jaos-text-muted);
}

.ja-subscription-banner--trial_active {
    background: color-mix(in srgb, var(--jaos-primary) 10%, var(--jaos-surface));
    border-color: var(--jaos-border-strong);
    color: var(--jaos-text);
}

.ja-subscription-banner--trial_active .ja-subscription-banner__cta {
    background: var(--jaos-gradient);
    color: var(--jaos-on-primary);
}

.ja-subscription-banner--trial_expiring_soon {
    background: color-mix(in srgb, var(--jaos-warning) 12%, var(--jaos-surface));
    border-color: color-mix(in srgb, var(--jaos-warning) 35%, transparent);
    color: var(--jaos-text);
}

.ja-subscription-banner--trial_expiring_soon .ja-subscription-banner__cta {
    background: var(--jaos-warning);
    color: var(--jaos-on-warning);
}

.ja-subscription-banner--expired {
    background: color-mix(in srgb, var(--jaos-danger) 10%, var(--jaos-surface));
    border-color: color-mix(in srgb, var(--jaos-danger) 35%, transparent);
    color: var(--jaos-text);
}

.ja-subscription-banner--expired .ja-subscription-banner__cta {
    background: var(--jaos-danger);
    color: var(--jaos-on-primary);
}

/* ── Legacy panels (admin-theme) — force tokens en light ── */
html.fi:not(.dark) .fi-ta .ja-event-panel.fi-ta-panel,
html.fi:not(.dark) .fi-ta .ja-client-panel.fi-ta-panel,
html.fi:not(.dark) .fi-ta .ja-invoice-panel.fi-ta-panel,
html.fi:not(.dark) .fi-ta .ja-quote-panel.fi-ta-panel,
html.fi:not(.dark) .fi-ta .ja-mail-log-panel.fi-ta-panel,
html.fi:not(.dark) .fi-ta-content-grid .ja-catalog-card.fi-ta-panel,
html.fi:not(.dark) .fi-ta:not(.fi-ta-content-grid) .ja-rental-panel.fi-ta-panel {
    background: var(--jaos-panel-gradient) !important;
    border: 1px solid var(--jaos-border) !important;
    box-shadow: var(--jaos-shadow) !important;
}

html.fi:not(.dark) .fi-section.ja-event-form-section,
html.fi:not(.dark) .fi-section.ja-settings-section {
    background: var(--jaos-surface) !important;
    border: 1px solid var(--jaos-border) !important;
}

html.fi:not(.dark) .ja-crud-title,
html.fi:not(.dark) .ja-mail-date-stack__main,
html.fi:not(.dark) .ja-rental-card-head__title {
    color: var(--jaos-text) !important;
}

html.fi:not(.dark) .ja-crud-sub,
html.fi:not(.dark) .ja-mail-excerpt,
html.fi:not(.dark) .ja-event-client {
    color: var(--jaos-text-muted) !important;
}

html.fi:not(.dark) .ja-event-montant,
html.fi:not(.dark) .ja-rental-price {
    color: var(--jaos-primary-emphasis) !important;
}

html.fi:not(.dark) .fi-modal-window {
    background: var(--jaos-surface) !important;
    border: 1px solid var(--jaos-border) !important;
    box-shadow: var(--jaos-shadow-md) !important;
}

@media (max-width: 480px) {
    .fi-simple-header .fi-logo,
    .fi-simple-header img.fi-logo {
        max-height: 4rem;
    }
}