/**
 * GradeUP PRO — Material Design 3 (M3 Expressive) Theme & Component System (v3.1)
 * Strict Institutional White & Royal Blue (#1e3a8a / #1e40af / #2563eb / #3b82f6)
 * 
 * Features:
 * - Granular Corner-Radius Scale (sm:12px, md:16px, lg:20px, xl:28px, 2xl:32px, full:9999px)
 * - Tonal Surface Containers (lowest, low, default, high, highest)
 * - Tactile Fluid Elevation & Spring Press States (scale: 0.98)
 * - Form Controls, Selects, Cards, Tables, Navbars, Modals & Floating Media Dock
 * - WCAG AA High Contrast Guarantee (7:1+ for text and badges)
 * - Mobile 5-Pillar Bottom Navigation Invariant Compliance
 */

:root {
  /* --- M3 Expressive Core Color Tokens --- */
  --md-sys-color-primary: #1e40af;
  --md-sys-color-primary-dark: #1e3a8a;
  --md-sys-color-primary-hover: #1d4ed8;
  --md-sys-color-primary-accent: #2563eb;
  --md-sys-color-secondary: #3b82f6;
  --md-sys-color-tertiary: #0284c7;

  /* --- Tonal Surface Containers --- */
  --md-sys-color-surface: #f8fafc;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f4f7fd;
  --md-sys-color-surface-container: #edf3fc;
  --md-sys-color-surface-container-high: #e2ecfb;
  --md-sys-color-surface-container-highest: #dbeafe;

  /* --- Typography & Text Hierarchy --- */
  --md-sys-color-on-surface: #0f172a;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-outline: #cbd5e1;
  --md-sys-color-outline-variant: #e2e8f0;

  /* --- M3 Expressive Corner Radius Scale --- */
  --md-sys-shape-corner-xs: 6px;
  --md-sys-shape-corner-sm: 12px;
  --md-sys-shape-corner-md: 16px;
  --md-sys-shape-corner-lg: 20px;
  --md-sys-shape-corner-xl: 28px;
  --md-sys-shape-corner-2xl: 32px;
  --md-sys-shape-corner-full: 9999px;

  /* --- Shadows & Elevations --- */
  --md-sys-elevation-1: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --md-sys-elevation-2: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --md-sys-elevation-3: 0 12px 24px -4px rgba(15, 23, 42, 0.09), 0 4px 8px -4px rgba(15, 23, 42, 0.03);
  --md-sys-elevation-floating: 0 16px 36px -4px rgba(30, 64, 175, 0.25);
}

/* ==========================================================================
   1. Cards & Container Surfaces (M3 Expressive Large Increased Curve)
   ========================================================================== */
.card, .gu-m3-card, .founder-card, .stat-card, .analytics-card {
  border-radius: var(--md-sys-shape-corner-lg) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  background-color: var(--md-sys-color-surface-container-lowest) !important;
  box-shadow: var(--md-sys-elevation-1) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.card:hover, .gu-m3-card:hover, .founder-card:hover, .stat-card:hover {
  box-shadow: var(--md-sys-elevation-2) !important;
  border-color: #bfdbfe !important;
}

/* ==========================================================================
   2. Buttons & Tactile Pills (M3 Expressive Full Curved Radius)
   ========================================================================== */
.btn, .gu-m3-btn {
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  padding: 0.5rem 1.25rem;
  transition: all 0.15s cubic-bezier(0.2, 0, 0, 1) !important;
}

.btn:active, .gu-m3-btn:active {
  transform: scale(0.97) !important;
}

.btn-primary, .gu-btn-primary {
  background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary-accent) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

.btn-primary:hover, .gu-btn-primary:hover {
  background: linear-gradient(135deg, var(--md-sys-color-primary-dark) 0%, var(--md-sys-color-primary) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.btn-outline-primary {
  border: 1.5px solid var(--md-sys-color-primary-accent) !important;
  color: var(--md-sys-color-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-primary-dark) !important;
}

/* ==========================================================================
   3. Form Inputs & Select Controls (M3 Expressive Soft Curves)
   ========================================================================== */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], select {
  border-radius: var(--md-sys-shape-corner-md) !important;
  border: 1.5px solid var(--md-sys-color-outline-variant) !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.92rem !important;
  background-color: var(--md-sys-color-surface-container-lowest) !important;
  color: var(--md-sys-color-on-surface) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus, .form-select:focus, input:focus, select:focus {
  border-color: var(--md-sys-color-primary-accent) !important;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.18) !important;
  outline: none !important;
}

/* ==========================================================================
   4. Modals & Dialogs (M3 Expressive XL Curves)
   ========================================================================== */
.modal-content {
  border-radius: var(--md-sys-shape-corner-xl) !important;
  border: none !important;
  box-shadow: var(--md-sys-elevation-floating) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   5. Badges, Chips & Progress Indicators
   ========================================================================== */
.badge, .gu-chip {
  border-radius: var(--md-sys-shape-corner-full) !important;
  padding: 0.35rem 0.75rem !important;
  font-weight: 600 !important;
}

.progress {
  border-radius: var(--md-sys-shape-corner-full) !important;
  background-color: var(--md-sys-color-surface-container-high) !important;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary-accent) 100%) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
}

/* ==========================================================================
   6. Hero High-Contrast Banner Guarantee
   ========================================================================== */
.gu-hero-high-contrast, [style*="background: linear-gradient"] {
  border-radius: var(--md-sys-shape-corner-2xl) !important;
}

.gu-hero-high-contrast h1,
.gu-hero-high-contrast h2,
.gu-hero-high-contrast h3,
.gu-hero-high-contrast h4,
.gu-hero-high-contrast h5,
.gu-hero-high-contrast h6 {
  color: #ffffff !important;
}

/* ==========================================================================
   7. Floating Media Dock (Audio & YouTube Listen Mode)
   ========================================================================== */
#gu-floating-audio-dock, .gu-m3-floating-dock {
  border-radius: var(--md-sys-shape-corner-xl) !important;
  box-shadow: var(--md-sys-elevation-floating) !important;
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Mobile 5-Pillar Bottom Navigation Invariant Safeguard */
@media (max-width: 991.98px) {
  #gu-floating-audio-dock {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    margin: 0 !important;
  }
}