/* ==========================================================================
   Admin panel — "Modern" theme
   Entirely scoped under html[data-admin-theme="modern"] (set by a HEAD_START
   render hook in AdminPanelProvider, from Settings > Site Settings >
   Branding > Admin panel appearance) — every rule here is inert unless that
   attribute is present, so this file never affects the default "Classic"
   look in admin-custom.css. Loaded after admin-custom.css via
   Panel::assets(), so it only needs to override what actually changes.
   ========================================================================== */

html[data-admin-theme="modern"] {
    /* Softer surfaces, bigger radii, more breathing room — same token
       names admin-custom.css already defines, so every .fi-* rule that
       consumes them picks this up with no selector duplication. */
    --cms-card-bg: #0a0a0b;
    --cms-elevated-bg: #0a0a0b;
    --cms-border: rgba(255, 255, 255, 0.10);
    --cms-border-strong: rgba(255, 255, 255, 0.18);
    --cms-radius-sm: 10px;
    --cms-radius-md: 14px;
    --cms-radius-lg: 20px;
    --cms-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* The accent itself is driven by Panel::colors() (see
       AdminPanelProvider), which Filament turns into --primary-* custom
       properties — reuse those instead of a second hardcoded color, so the
       admin-picked hex flows through automatically. */
    --cms-accent: var(--primary-500);
    --cms-accent-soft: color-mix(in srgb, var(--primary-500) 14%, transparent);
    --cms-accent-border: color-mix(in srgb, var(--primary-500) 35%, transparent);
}

/* ---- Glass surfaces ------------------------------------------------------ */

html[data-admin-theme="modern"] .fi-body {
    background: var(--cms-bg) !important;
}

html[data-admin-theme="modern"] .fi-section,
html[data-admin-theme="modern"] .fi-modal-window,
html[data-admin-theme="modern"] .fi-dropdown-panel,
html[data-admin-theme="modern"] .fi-wi-widget {
    background-color: color-mix(in srgb, var(--cms-card-bg) 88%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5) !important;
}

/* Extra top clearance (2.25rem, vs. 1.25rem on the other 3 sides) — every
   widget on this dashboard gets an absolutely-positioned title overlaid in
   its top-left corner (see App\Filament\Pages\Dashboard::wrapWidgetWithRemoveButton),
   sitting ~0.85rem-1.5rem from the top; without the extra clearance here the
   stat's own label/icon row starts underneath it and the two overlap. */
html[data-admin-theme="modern"] .fi-wi-stats-overview-stat {
    padding: 2.25rem 1.5rem 1.25rem !important;
}

html[data-admin-theme="modern"] .fi-sidebar {
    background-color: color-mix(in srgb, var(--cms-sidebar-bg) 85%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-admin-theme="modern"] .fi-topbar {
    background-color: color-mix(in srgb, var(--cms-topbar-bg) 80%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ---- Buttons & nav — pill radius, glowing active state ------------------- */

html[data-admin-theme="modern"] .fi-btn {
    border-radius: 9999px !important;
}

html[data-admin-theme="modern"] .fi-sidebar-item-btn {
    border-radius: 9999px !important;
}

html[data-admin-theme="modern"] .fi-active .fi-sidebar-item-btn,
html[data-admin-theme="modern"] .fi-sidebar-item-btn.fi-active {
    box-shadow: 0 0 0 1px var(--cms-accent-border), 0 4px 16px -4px var(--cms-accent-soft) !important;
}

html[data-admin-theme="modern"] input,
html[data-admin-theme="modern"] .fi-input-wrp,
html[data-admin-theme="modern"] .fi-select-input {
    border-radius: var(--cms-radius-md) !important;
}

/* ---- Login page — mirrors the customer-facing auth redesign -------------- */

html[data-admin-theme="modern"] .fi-simple-layout {
    background:
        radial-gradient(40rem 40rem at 50% 20%, color-mix(in srgb, var(--primary-500) 16%, transparent), transparent 65%),
        var(--cms-bg);
}

html[data-admin-theme="modern"] .fi-simple-page-content {
    background-color: color-mix(in srgb, var(--cms-card-bg) 82%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--cms-border);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}