/*
 * Stridemates · Cervello — admin panel cosmetic overrides.
 *
 * Filament's defaults are clean but feel generic; we layer in the
 * brand palette (ink #2A1849, violet #6B3FC4, electric #A15EFF, snow
 * #F8F9FA) and tighten spacing on mobile so the dashboard stays
 * readable on a phone.
 *
 * Loaded via PanelProvider->viteTheme()? No — we're not running Vite
 * inside Laravel here, so we register it as an asset URL and Filament
 * inlines it into the panel layout. See AdminPanelProvider.
 */

:root {
  --sm-ink: #2A1849;
  --sm-violet: #6B3FC4;
  --sm-electric: #A15EFF;
  --sm-soft: #F8F9FA;
  --sm-fog: #E9ECEF;
}

/* Sidebar — brand-ink solid background, white items, accent on hover */
.fi-sidebar {
  background: var(--sm-ink) !important;
  border-right: 0 !important;
}
.fi-sidebar .fi-sidebar-header {
  background: var(--sm-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.fi-sidebar-nav .fi-sidebar-item .fi-sidebar-item-button {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}
.fi-sidebar-nav .fi-sidebar-item .fi-sidebar-item-button:hover {
  background: rgba(161, 94, 255, 0.22) !important;
  color: #FFFFFF !important;
}
.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-button {
  background: linear-gradient(135deg, var(--sm-electric) 0%, var(--sm-violet) 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px -4px rgba(161, 94, 255, 0.5) !important;
}
.fi-sidebar-nav .fi-sidebar-item .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-sidebar-item .fi-sidebar-item-button svg {
  color: #FFFFFF !important;
  opacity: 0.95 !important;
}
.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-button svg {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
.fi-sidebar-group-label {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.fi-sidebar-group-icon {
  color: rgba(255, 255, 255, 0.62) !important;
}
/* Brand name + collapse buttons */
.fi-sidebar-header .fi-logo,
.fi-sidebar-header .fi-icon-btn {
  color: #FFFFFF !important;
}

/* Topbar */
.fi-topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sm-fog) !important;
}
.dark .fi-topbar {
  background: rgba(20, 12, 33, 0.85) !important;
}

/* Stat cards — round + subtle violet glow */
.fi-wi-stats-overview-stat {
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(107, 63, 196, 0.08), 0 8px 24px -16px rgba(107, 63, 196, 0.16) !important;
  border: 1px solid var(--sm-fog) !important;
}
.dark .fi-wi-stats-overview-stat {
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Tables / cards — softer borders, slightly rounder */
.fi-section,
.fi-ta-ctn {
  border-radius: 16px !important;
}

/* Primary buttons — true brand gradient instead of flat tint */
.fi-btn-color-primary,
.fi-btn[data-color="primary"] {
  background: linear-gradient(135deg, var(--sm-electric) 0%, var(--sm-violet) 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
.fi-btn-color-primary:hover,
.fi-btn[data-color="primary"]:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 16px -8px rgba(107, 63, 196, 0.6);
}

/* Login card */
.fi-simple-main-ctn {
  background: linear-gradient(160deg, var(--sm-ink) 0%, var(--sm-violet) 100%) !important;
}
.fi-simple-main {
  border-radius: 24px !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.4) !important;
}

/* Nav badge (pending alerts) */
.fi-sidebar-item-badge {
  background: var(--sm-electric) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Mobile tweaks: spacing tighter, stat strip stacks 2 per row */
@media (max-width: 640px) {
  .fi-page,
  .fi-page-content {
    padding: 12px !important;
  }
  .fi-wi-stats-overview > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .fi-wi-stats-overview-stat {
    padding: 14px !important;
  }
  .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 22px !important;
  }
  .fi-section-header,
  .fi-section-content {
    padding: 14px !important;
  }
}