/*
 * Tema del panel /admin (GlobalMetrics).
 *
 * CSS plano registrado con `Panel::assets()` — no pasa por Tailwind/Vite,
 * así que solo usa las clases `fi-*` estables de Filament y sus variables
 * de color (`--primary-500`, `--gray-200`, ...). Tras editarlo hay que
 * correr `php artisan filament:assets` para republicar
 * `public/css/app/admin-theme.css`.
 */

:root {
    --gm-radius: 1rem;
    --gm-shadow: 0 1px 2px rgb(20 20 13 / 0.04), 0 4px 16px -4px rgb(20 20 13 / 0.08);
    --gm-shadow-hover: 0 2px 4px rgb(20 20 13 / 0.05), 0 12px 28px -8px rgb(20 20 13 / 0.16);
}

/* ---------- Fondo y layout ---------- */

.fi-body {
    background:
        radial-gradient(1200px 400px at 100% -10%, color-mix(in oklab, var(--primary-500) 9%, transparent), transparent 70%),
        var(--gray-50);
}

.fi-body:where(.dark, .dark *) {
    background:
        radial-gradient(1200px 400px at 100% -10%, color-mix(in oklab, var(--primary-500) 12%, transparent), transparent 70%),
        var(--gray-950);
}

.fi-topbar {
    background-color: color-mix(in oklab, white 80%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: 0 1px 0 var(--gray-200);
}

.fi-topbar:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--gray-900) 80%, transparent);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
}

/* ---------- Sidebar ---------- */

.fi-sidebar {
    background-color: white;
    border-inline-end: 1px solid var(--gray-200);
}

.fi-sidebar:where(.dark, .dark *) {
    background-color: var(--gray-900);
    border-inline-end-color: rgb(255 255 255 / 0.06);
}

.fi-sidebar-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-sidebar-item-btn {
    border-radius: 0.625rem;
    transition: background-color 150ms, color 150ms;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-500) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--primary-500);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--primary-500) 18%, transparent);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--primary-600);
    font-weight: 600;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) .fi-sidebar-item-icon {
    color: var(--primary-400);
}

/* ---------- Encabezado de página ---------- */

.fi-header-heading {
    letter-spacing: -0.02em;
}

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

/* ---------- Tarjetas (secciones, widgets) ---------- */

.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat {
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow);
}

.fi-section-header-heading {
    font-weight: 600;
}

/* ---------- KPIs ---------- */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: box-shadow 200ms, transform 200ms;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gm-accent, var(--primary-500)), transparent);
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--gm-shadow-hover);
    transform: translateY(-2px);
}

.fi-wi-stats-overview-stat-label-ctn {
    align-items: center;
}

.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    box-sizing: content-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    color: var(--gm-accent, var(--primary-500));
    background-color: color-mix(in oklab, var(--gm-accent, var(--primary-500)) 14%, transparent);
}

.fi-wi-stats-overview-stat-label {
    font-weight: 500;
}

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

@media (prefers-reduced-motion: reduce) {
    .fi-wi-stats-overview-stat,
    .fi-sidebar-item-btn {
        transition: none;
    }

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