/* ============================================================
   FitFlow Admin Theme — Filament 3
   Selectores extraídos del source real de Filament.
   Dark: navy #080d18   |   Light: slate #edf2f7
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   CUERPO / FONDO GLOBAL
   Body tiene: fi-body bg-gray-50 dark:bg-gray-950
───────────────────────────────────────────────────────────── */

/* Light */
.fi-body { background-color: #edf2f7 !important; }

/* Dark — fondo ligeramente más oscuro que el topbar (#0d1526) para crear profundidad */
.dark .fi-body { background-color: #070b14 !important; }


/* ─────────────────────────────────────────────────────────────
   SIDEBAR
   fi-sidebar: bg-white dark:bg-gray-900 lg:bg-transparent dark:lg:bg-transparent
   fi-sidebar-header: bg-white dark:bg-gray-900
───────────────────────────────────────────────────────────── */

.fi-sidebar {
    background: linear-gradient(180deg, #0c1220 0%, #111827 100%) !important;
    border-right: 1px solid rgba(14,165,233,0.1) !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.3) !important;
}

/* Ocultar scrollbar del sidebar (mantener funcionalidad) */
.fi-sidebar-nav {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.fi-sidebar-nav::-webkit-scrollbar {
    display: none !important;
}

/* Light mode: sidebar algo menos agresivo */
:not(.dark) .fi-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    border-right: 1px solid rgba(14,165,233,0.12) !important;
}

.fi-sidebar-header {
    background-color: #0c1220 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* Light mode sidebar header */
:not(.dark) .fi-sidebar-header {
    background-color: #0f172a !important;
}

/* Brand container */
.fi-logo { color: #e0f2fe !important; font-weight: 700 !important; }

/* ── Sidebar brand (gym logo + name) ─────────────────────── */
.fitflow-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.fitflow-brand-logo {
    width: auto;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.fitflow-brand-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, rgba(14,165,233,0.25), rgba(6,182,212,0.15));
    border: 1px solid rgba(14,165,233,0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #38bdf8;
}

.fitflow-brand-icon svg {
    width: 18px;
    height: 18px;
}

.fitflow-brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e0f2fe;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

/* ── Grupos de navegación ─────────────────────────────────── */
/* fi-sidebar-group-label: text-gray-500 dark:text-gray-400 */
.fi-sidebar-group-label {
    color: rgba(148, 163, 184, 0.5) !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Separación entre grupos */
.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
}

/* ── Items de navegación ──────────────────────────────────── */
/* fi-sidebar-item-button: hover:bg-gray-100 dark:hover:bg-white/5 */
.fi-sidebar-item-button {
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}
.fi-sidebar-item-button:hover {
    background-color: rgba(14,165,233,0.09) !important;
}

/* Espaciado compacto entre items */
.fi-sidebar-item {
    margin-bottom: 1px !important;
}

/* Estado activo: fi-sidebar-item.fi-active .fi-sidebar-item-button
   Tiene: bg-gray-100 dark:bg-white/5 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > a.fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(14,165,233,0.22), rgba(14,165,233,0.06)) !important;
    box-shadow: inset 3px 0 0 #0ea5e9 !important;
}

/* Etiquetas de items */
/* fi-sidebar-item-label: text-gray-700 dark:text-gray-200 */
.fi-sidebar-item-label {
    color: #94a3b8 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #cbd5e1 !important;
}

/* Íconos de items */
/* fi-sidebar-item-icon: text-gray-400 dark:text-gray-500 / active: text-primary-600 dark:text-primary-400 */
.fi-sidebar-item-icon {
    color: #64748b !important;
    opacity: 1 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #0ea5e9 !important;
    filter: drop-shadow(0 0 4px rgba(14,165,233,0.4)) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #94a3b8 !important;
}

/* ── Control de Acceso: destacado (solo href exacto "access-control") ── */
.fi-sidebar-item a[href*="access-control"]:not(.fi-active):not([aria-current="page"]) {
    background: rgba(14,165,233,0.08) !important;
    border: 1px solid rgba(14,165,233,0.18) !important;
    border-radius: 8px !important;
}
.fi-sidebar-item a[href*="access-control"] .fi-sidebar-item-label {
    color: #7dd3fc !important;
}
.fi-sidebar-item a[href*="access-control"] .fi-sidebar-item-icon {
    color: #0ea5e9 !important;
}
.fi-sidebar-item a[href*="access-control"]:hover {
    background: rgba(14,165,233,0.16) !important;
    border-color: rgba(14,165,233,0.35) !important;
}


/* ─────────────────────────────────────────────────────────────
   TOPBAR
   Inner div: bg-white dark:bg-gray-900 ring-1 ring-gray-950/5 dark:ring-white/10
───────────────────────────────────────────────────────────── */

/* Light topbar */
.fi-topbar > div {
    background-color: rgba(255,255,255,0.98) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
/* Dark topbar — ligeramente más claro que el fondo para distinguirse */
.dark .fi-topbar > div {
    background-color: #0d1526 !important;
    border-bottom: 1px solid rgba(14,165,233,0.12) !important;
    box-shadow: 0 1px 0 rgba(14,165,233,0.06), 0 4px 16px rgba(0,0,0,0.3) !important;
    backdrop-filter: blur(12px) !important;
}


/* ─────────────────────────────────────────────────────────────
   TABLAS
   thead tr: bg-gray-100 dark:bg-transparent
   row hover: hover:bg-gray-50 dark:hover:bg-white/5
   striped: bg-gray-50 dark:bg-white/5
───────────────────────────────────────────────────────────── */

/* Header */
.fi-ta-table thead tr {
    background-color: #f1f5f9 !important;
}
.dark .fi-ta-table thead tr {
    background-color: rgba(7,11,20,0.9) !important;
}

/* Header cell label */
.fi-ta-header-cell-label {
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #64748b !important;
}
.dark .fi-ta-header-cell-label { color: #475569 !important; }

/* Divisores entre columnas del header */
.fi-ta-table {
    border-collapse: collapse !important;
}
.fi-ta-table thead {
    border-bottom: 2px solid #e2e8f0 !important;
}
.dark .fi-ta-table thead {
    border-bottom: 1px solid rgba(14,165,233,0.1) !important;
}

/* Row hover */
.fi-ta-table tbody tr:hover {
    background-color: rgba(14,165,233,0.04) !important;
}
.dark .fi-ta-table tbody tr:hover {
    background-color: rgba(14,165,233,0.07) !important;
}

/* Divisores de filas */
.fi-ta-table tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
.dark .fi-ta-table tbody tr {
    border-bottom: 1px solid rgba(14,165,233,0.05) !important;
}

/* Cell text */
.fi-ta-cell { color: #334155 !important; font-size: 0.875rem !important; }
.dark .fi-ta-cell { color: #94a3b8 !important; }

/* Striping en dark */
.dark .fi-ta-table tbody tr:nth-child(even) {
    background-color: rgba(13,20,36,0.3) !important;
}
.dark .fi-ta-table tbody tr:nth-child(even):hover {
    background-color: rgba(14,165,233,0.07) !important;
}

/* Contenedor de tabla */
.fi-ta-ctn {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #dde3ed !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
.dark .fi-ta-ctn {
    border-color: rgba(14,165,233,0.09) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* Footer / paginación */
.dark .fi-ta-table tfoot tr {
    background-color: rgba(7,11,20,0.6) !important;
    border-top: 1px solid rgba(14,165,233,0.07) !important;
}


/* ─────────────────────────────────────────────────────────────
   KPI CARDS (StatsOverview)
───────────────────────────────────────────────────────────── */

.fi-wi-stats-overview-stat {
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: 1px solid #dde3ed !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

.dark .fi-wi-stats-overview-stat {
    background: rgba(13,20,36,0.9) !important;
    border-color: rgba(14,165,233,0.12) !important;
    box-shadow: 0 0 0 1px rgba(14,165,233,0.06), 0 4px 20px rgba(0,0,0,0.4) !important;
}
.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px rgba(14,165,233,0.25), 0 8px 32px rgba(14,165,233,0.12), 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Franja de acento superior */
.fi-wi-stats-overview-stat::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4) !important;
    z-index: 1 !important;
}

/* Valor */
.fi-wi-stats-overview-stat-value {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: #0f172a !important;
}
.dark .fi-wi-stats-overview-stat-value { color: #f0f9ff !important; }

/* Label */
.fi-wi-stats-overview-stat-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Descripción */
.fi-wi-stats-overview-stat-description { color: #94a3b8 !important; font-size: 0.78rem !important; }

/* Chart */
.fi-wi-stats-overview-stat-chart { opacity: 0.45 !important; }


/* ─────────────────────────────────────────────────────────────
   SECTIONS / CARDS
───────────────────────────────────────────────────────────── */

.fi-section {
    border-radius: 12px !important;
    border: 1px solid #dde3ed !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04) !important;
}
.dark .fi-section {
    background: rgba(13,20,36,0.9) !important;
    border-color: rgba(14,165,233,0.09) !important;
    box-shadow: 0 0 0 1px rgba(14,165,233,0.05), 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Page header */
.fi-page-header .fi-heading,
h1.fi-header-heading {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #0f172a !important;
}
.dark .fi-page-header .fi-heading,
.dark h1.fi-header-heading { color: #f0f9ff !important; }


/* ─────────────────────────────────────────────────────────────
   BOTONES
───────────────────────────────────────────────────────────── */

.fi-btn { border-radius: 8px !important; font-weight: 600 !important; }

.fi-btn-color-primary {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(14,165,233,0.35) !important;
}
.fi-btn-color-primary:hover {
    box-shadow: 0 4px 18px rgba(14,165,233,0.5) !important;
    transform: translateY(-1px) !important;
}


/* ─────────────────────────────────────────────────────────────
   BADGES
───────────────────────────────────────────────────────────── */

.fi-badge {
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 2px 9px !important;
    letter-spacing: 0.04em !important;
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE EXTRAS
───────────────────────────────────────────────────────────── */

/* Scrollbar */
.dark ::-webkit-scrollbar { width: 5px; height: 5px; }
.dark ::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: rgba(14,165,233,0.2); border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(14,165,233,0.4); }

/* Selection */
.dark ::selection { background: rgba(14,165,233,0.25); color: #f0f9ff; }
::selection { background: rgba(14,165,233,0.15); color: #0f172a; }

/* Breadcrumbs */
.fi-breadcrumbs-item-separator { color: #64748b !important; }
.dark .fi-breadcrumbs ol li a { color: #0ea5e9 !important; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .fi-wi-stats-overview { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .fi-wi-stats-overview { grid-template-columns: 1fr !important; }
}