/*
 * Premium Executive Design System
 * UK Sponsor Licence Compliance Platform
 * Hybrid Style: Clean XDesign + Subtle Glassmorphism
 */

/* =====================================================
   DESIGN TOKENS - Premium Color Palette
   ===================================================== */

:root {
  /* Dark Mode Primary Colors - Aligned with landing page palette */
  --bg-primary: #0A0B0F;
  --bg-secondary: #12131A;
  --bg-tertiary: #1A1C24;
  --bg-elevated: #22242E;

  /* Glassmorphic Overlays */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-hover: rgba(255, 255, 255, 0.06);

  /* Premium Gold Accents */
  --gold-primary: #F5C563;
  --gold-secondary: #E8B84F;
  --gold-tertiary: #D4A941;
  --gold-glow: rgba(245, 197, 99, 0.25);
  --gold-glow-strong: rgba(245, 197, 99, 0.4);

  /* Text Colors - Aligned with landing page */
  --text-primary: #F0F0F3;
  --text-secondary: #9B9CA7;
  --text-tertiary: #5E5F6B;
  --text-muted: #4A4B56;

  /* Semantic Colors (Muted for Sophistication) */
  --success: #34D399;
  --success-glow: rgba(52, 211, 153, 0.2);
  --warning: #FBBF24;
  --warning-glow: rgba(251, 191, 36, 0.2);
  --danger: #F87171;
  --danger-glow: rgba(248, 113, 113, 0.2);
  --info: #60A5FA;
  --info-glow: rgba(96, 165, 250, 0.2);

  /* Premium Navy Shades */
  --navy-50: #E6E9EF;
  --navy-100: #C0C7D6;
  --navy-200: #99A3BC;
  --navy-300: #737FA2;
  --navy-400: #4D5B88;
  --navy-500: #2C3A5C;
  --navy-600: #1F2943;
  --navy-700: #151D30;
  --navy-800: #0F1522;
  --navy-900: #0A0B0F;

  /* Legacy IM variable bridge (used across premium templates) */
  --im-navy: #0A0B0F;
  --im-blue: #1A1C24;
  --im-blue-light: #22242E;
  --im-gold: #F5C563;
  --im-gold-light: #FFE08A;
  --im-charcoal: #1A1C24;
  --im-slate: #5E5F6B;
  --im-ivory: #F0F0F3;
  --im-border: rgba(255, 255, 255, 0.06);

  /* Sidebar specific (used in inline styles via theme toggle) */
  --sidebar-bg: linear-gradient(180deg, rgba(10, 11, 15, 0.98) 0%, rgba(18, 19, 26, 0.95) 100%);
  --sidebar-bottom-bg: rgba(10, 11, 15, 0.98);
}

/* =====================================================
   LIGHT THEME - Warm Cream Light Mode (Option A)
   Warm cream backgrounds, dark text, navy accents
   Inspired by landing page design
   ===================================================== */

[data-theme="light"] {
  /* Warm Cream Background Colors - Landing page palette */
  --bg-primary: #FAF4EE;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FFFBF4;
  --bg-elevated: #FFFFFF;
  --bg-cream: linear-gradient(180deg, #FFFBF4 0%, #FAF4EE 100%);

  /* Borders and Overlays */
  --glass-bg: #FFFFFF;
  --glass-border: #E8E2DA;
  --glass-hover: #FFFBF4;

  /* Accent Colors - Navy primary, Gold secondary */
  --navy-accent: #1E3A5F;
  --navy-accent-hover: #152D4A;
  --gold-accent: #C9A227;
  --gold-accent-hover: #B8930F;

  /* Keep gold-primary as navy for existing button compatibility */
  --gold-primary: #1E3A5F;
  --gold-secondary: #2D4A6F;
  --gold-tertiary: #152D4A;
  --gold-glow: rgba(30, 58, 95, 0.1);
  --gold-glow-strong: rgba(30, 58, 95, 0.15);

  /* Text Colors - Warm dark tones */
  --text-primary: #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-tertiary: #717171;
  --text-muted: #9A9A9A;

  /* Semantic Colors */
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.08);
  --warning: #D97706;
  --warning-glow: rgba(217, 119, 6, 0.08);
  --danger: #DC2626;
  --danger-glow: rgba(220, 38, 38, 0.08);
  --info: #2563EB;
  --info-glow: rgba(37, 99, 235, 0.08);

  /* Header colors - Cream background with dark text */
  --header-bg: #FFFBF7;
  --header-text: #1A1A1A;
  --header-subtext: #717171;

  /* Sidebar stays dark (modern SaaS pattern) */
  --sidebar-bg: linear-gradient(180deg, #1A2B3C 0%, #0F1D2E 100%);
  --sidebar-bottom-bg: #152030;

  /* Status colors for light mode */
  --status-critical-bg: #FEF2F2;
  --status-critical-border: #FECACA;
  --status-critical-text: #DC2626;

  --status-warning-bg: #FFFBEB;
  --status-warning-border: #FDE68A;
  --status-warning-text: #D97706;

  --status-success-bg: #ECFDF5;
  --status-success-border: #A7F3D0;
  --status-success-text: #059669;

  --status-info-bg: #EFF6FF;
  --status-info-border: #BFDBFE;
  --status-info-text: #2563EB;

  /* Borders - Warm tones */
  --border-color: #E8E4DF;
  --border-light: #F5F2EE;

  /* Legacy IM bridge - light mode overrides */
  --im-border: rgba(0, 0, 0, 0.08);
  --im-navy: #1E3A5F;
  --im-blue: #2D4A6F;
  --im-blue-light: #3D5A80;
  --im-gold: #C9A227;
  --im-gold-light: #E8C94A;
  --im-charcoal: #4A5568;
  --im-slate: #717171;
  --im-ivory: #FAF4EE;
}

/* Light mode: glass-card overrides - Flat design */
[data-theme="light"] .glass-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
  border-radius: 8px;
}

[data-theme="light"] .glass-card:hover {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: none;
}

/* Bootstrap .card theme overrides for dark/light mode compatibility */
.card {
  background: var(--bg-secondary);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

.card-header {
  background: var(--bg-tertiary);
  border-bottom-color: var(--glass-border);
  color: var(--text-primary);
}

.card-body {
  color: var(--text-primary);
}

/* Table theme overrides */
.table {
  color: var(--text-primary);
}

.table > thead {
  color: var(--text-secondary);
}

.table-light {
  --bs-table-bg: var(--bg-tertiary);
  --bs-table-border-color: var(--glass-border);
  color: var(--text-primary);
}

/* Override bg-white on card headers for theme compatibility */
.card-header.bg-white {
  background-color: var(--bg-tertiary) !important;
}

/* Premium Card Header Variants - Semantic Colors with Gradients */
.card-header.bg-danger {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.95) 0%, rgba(153, 27, 27, 0.9) 100%) !important;
  border-bottom: 1px solid var(--danger);
}

.card-header.bg-warning {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.95) 0%, rgba(146, 64, 14, 0.9) 100%) !important;
  border-bottom: 1px solid var(--warning);
  color: #FFFFFF !important;
}

.card-header.bg-info {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(37, 99, 235, 0.9) 100%) !important;
  border-bottom: 1px solid var(--info);
}

.card-header.bg-success {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.95) 0%, rgba(6, 95, 70, 0.9) 100%) !important;
  border-bottom: 1px solid var(--success);
}

.card-header.bg-primary {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(29, 78, 216, 0.9) 100%) !important;
  border-bottom: 1px solid #2563eb;
}

/* Text utility overrides */
.text-muted {
  color: var(--text-tertiary) !important;
}

/* Alert overrides */
.alert-info {
  background: var(--bg-tertiary);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

.alert-light {
  background: var(--bg-tertiary);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

/* Light mode: stat-card - no shimmer, flat design */
[data-theme="light"] .stat-card::before {
  display: none;
}

[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

/* Light mode: light slate sidebar for contrast */
[data-theme="light"] .sidebar-premium {
  background: #FAFBFC;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sidebar-link {
  color: #4A5568;
}

[data-theme="light"] .sidebar-link:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #1A1A1A;
}

[data-theme="light"] .sidebar-link.active {
  background: rgba(201, 162, 39, 0.06);
  color: #1A1A1A;
  border-left: 3px solid var(--gold-accent);
  box-shadow: none;
}

[data-theme="light"] .sidebar-link.active i {
  color: var(--gold-accent);
}

[data-theme="light"] .sidebar-section-header,
[data-theme="light"] .sidebar-premium .sidebar-section-header,
[data-theme="light"] li.sidebar-section-header {
  color: #1E2D43 !important;
}

/* Light mode: more visible badges - HIGH OPACITY */
[data-theme="light"] .sidebar-upgrade-badge {
  background: rgba(180, 140, 20, 0.25) !important;
  border: 1px solid rgba(150, 110, 10, 0.7) !important;
  color: #7A5F00 !important;
}

[data-theme="light"] .badge-soon,
[data-theme="light"] .badge-soon-inline {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Light mode: alert and soon badges more visible */
[data-theme="light"] .badge-danger {
  background: rgba(220, 38, 38, 0.25) !important;
  color: #991b1b !important;
  border: 1px solid rgba(153, 27, 27, 0.6) !important;
}

[data-theme="light"] .badge-warning {
  background: rgba(217, 119, 6, 0.25) !important;
  color: #92400e !important;
  border: 1px solid rgba(146, 64, 14, 0.6) !important;
}

[data-theme="light"] .sidebar-soon-badge {
  background: rgba(109, 40, 217, 0.2) !important;
  color: #5b21b6 !important;
  border: 1px solid rgba(91, 33, 182, 0.6) !important;
}

[data-theme="light"] .sidebar-logo {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Light mode: table styles — matching mock mk-table transparent header */
[data-theme="light"] table thead th {
  background: transparent;
  color: #6B7280;
  border-color: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

[data-theme="light"] table tbody td {
  border-color: rgba(0, 0, 0, 0.04);
  color: #1A2332;
}

[data-theme="light"] table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Light mode: buttons - Clean professional navy theme */
[data-theme="light"] .btn-gold {
  background: #1E3A5F;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-gold:hover {
  background: #152030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #FFFFFF;
}

[data-theme="light"] .btn-ghost {
  border-color: #1E3A5F;
  color: #1E3A5F;
}

[data-theme="light"] .btn-ghost:hover {
  background: rgba(30, 58, 95, 0.06);
  border-color: #152030;
  color: #152030;
}

[data-theme="light"] .btn-outline {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

[data-theme="light"] .btn-outline:hover {
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.03);
}

/* Light mode: badge and alert adjustments - Refined style */
[data-theme="light"] .badge-premium {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
}

[data-theme="light"] .badge-gold {
  background: rgba(184, 134, 11, 0.1);
  border: 1px solid rgba(184, 134, 11, 0.25);
  color: var(--gold-primary);
}

/* Light mode: form inputs */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  color: var(--text-primary);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px var(--gold-glow);
  outline: none;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] .form-control::placeholder {
  color: var(--text-muted);
}

/* Light mode: scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #F0F2F5;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #C1C9D4;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #A0AEC0;
}

/* Theme Toggle Button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 6px 10px;
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.theme-toggle i {
  font-size: 0.85rem;
}

/* =====================================================
   TYPOGRAPHY - Executive Premium
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@800&display=swap');

:root {
  /* Font Families */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

  /* Font Sizes (Fluid, responsive) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation/Shadow System (4 levels) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Glow Shadows for semantic colors */
  --shadow-danger-glow: 0 0 20px rgba(248, 113, 113, 0.3);
  --shadow-warning-glow: 0 0 20px rgba(251, 191, 36, 0.3);
  --shadow-success-glow: 0 0 20px rgba(52, 211, 153, 0.3);
  --shadow-info-glow: 0 0 20px rgba(96, 165, 250, 0.3);
  --shadow-gold-glow: 0 0 20px rgba(245, 197, 99, 0.3);
}

/* =====================================================
   GLOBAL STYLES
   ===================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* =====================================================
   PREMIUM COMPONENTS
   ===================================================== */

/* Glass Card - Hybrid Style */
.glass-card {
  background: linear-gradient(135deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 100%
  );
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all var(--transition-base);
}

.glass-card:hover {
  background: linear-gradient(135deg,
    rgba(18, 19, 26, 0.9) 0%,
    rgba(26, 28, 36, 0.9) 100%
  );
  backdrop-filter: blur(20px);
  border-color: rgba(245, 197, 99, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px var(--gold-glow);
  transform: translateY(-4px);
}

/* Stat Card */
.stat-card {
  position: relative;
  padding: var(--space-6);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 197, 99, 0.1),
    transparent
  );
  transition: left var(--transition-slow);
}

.stat-card:hover::before {
  left: 100%;
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  color: var(--gold-primary);
  line-height: 1;
  text-shadow: 0 0 30px var(--gold-glow);
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-top: var(--space-3);
}

.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

/* Premium Stat Card Variants - Semantic Colors */
.stat-card-danger {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.9) 0%, rgba(153, 27, 27, 0.85) 100%);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.stat-card-danger .stat-value { color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.stat-card-danger .stat-label { color: rgba(255,255,255,0.9); }
.stat-card-danger .stat-icon { color: rgba(255,255,255,0.12); }

.stat-card-warning {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(146, 64, 14, 0.85) 100%);
  border: 1px solid var(--warning);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.stat-card-warning .stat-value { color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.stat-card-warning .stat-label { color: rgba(255,255,255,0.9); }
.stat-card-warning .stat-icon { color: rgba(255,255,255,0.12); }

.stat-card-info {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.9) 0%, rgba(37, 99, 235, 0.85) 100%);
  border: 1px solid var(--info);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.stat-card-info .stat-value { color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.stat-card-info .stat-label { color: rgba(255,255,255,0.9); }
.stat-card-info .stat-icon { color: rgba(255,255,255,0.12); }

.stat-card-gold {
  background: linear-gradient(135deg, rgba(146, 112, 42, 0.95) 0%, rgba(184, 151, 106, 0.9) 100%);
  border: 1px solid rgba(212, 184, 150, 0.5);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.stat-card-gold .stat-value { color: var(--bg-primary); text-shadow: none; }
.stat-card-gold .stat-label { color: var(--bg-primary); opacity: 0.85; }
.stat-card-gold .stat-icon { color: rgba(26, 43, 60, 0.12); }

/* Stat Card Common Styles */
.stat-card-danger, .stat-card-warning, .stat-card-info, .stat-card-gold {
  padding: var(--space-6);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.stat-card-danger:hover, .stat-card-warning:hover, .stat-card-info:hover, .stat-card-gold:hover {
  transform: translateY(-2px);
}
.stat-card-danger:hover { box-shadow: var(--shadow-lg), var(--shadow-danger-glow); }
.stat-card-warning:hover { box-shadow: var(--shadow-lg), var(--shadow-warning-glow); }
.stat-card-info:hover { box-shadow: var(--shadow-lg), var(--shadow-info-glow); }
.stat-card-gold:hover { box-shadow: var(--shadow-lg), var(--shadow-gold-glow); }

/* Premium Buttons */
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left var(--transition-slow);
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
  color: var(--bg-primary);
  box-shadow:
    0 4px 16px var(--gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px var(--gold-glow-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--gold-primary);
  border: 1.5px solid var(--gold-primary);
}

.btn-ghost:hover {
  background: var(--glass-hover);
  border-color: var(--gold-secondary);
  box-shadow: 0 0 20px var(--gold-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--glass-border);
}

.btn-outline:hover {
  background: var(--glass-hover);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* Subtle Gold Outline Button - for Quick Actions etc. */
.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--gold-glow);
  border: 1px solid rgba(245, 197, 99, 0.3);
  border-radius: var(--radius-sm);
  color: var(--gold-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-outline-gold:hover {
  background: rgba(245, 197, 99, 0.2);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--gold-glow);
}

.btn-outline-gold:active {
  transform: translateY(0);
}

/* Light mode: Gold outline button - Match "Add Worker" button style (dark navy gradient) */
[data-theme="light"] .btn-outline-gold {
  background: linear-gradient(135deg, #1E2D43 0%, #152030 100%);
  border: none;
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-outline-gold:hover {
  background: linear-gradient(135deg, #263A52 0%, #1A2738 100%);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .btn-outline-gold i,
[data-theme="light"] .btn-outline-gold i.bi {
  color: #C9A227 !important;
}

/* Sidebar Navigation */
/* Sidebar: slim icon-only by default, expand on hover or pin */
.sidebar-premium {
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 15, 0.98) 0%,
    rgba(18, 19, 26, 0.95) 100%
  );
  backdrop-filter: blur(40px);
  border-right: 1px solid var(--glass-border);
  padding: 0.75rem 0 0 0;
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* === SIDEBAR MODE SYSTEM ===
   Mode 1: mode-tooltip — slim icons, no hover expand, tooltips on hover
   Mode 2: mode-hover   — slim icons, expands on hover (default)
   Mode 3: mode-pinned  — always expanded, resizable right edge
*/

/* Mode-hover: expand on hover */
.sidebar-premium.mode-hover:hover {
  width: 300px;
}
/* Mode-pinned: always expanded (width set via JS for resizable) */
.sidebar-premium.mode-pinned {
  width: var(--sidebar-pinned-width, 300px);
}

/* --- Slim mode defaults (mode-tooltip and mode-hover at rest) --- */
/* Hide text labels */
.sidebar-premium .sidebar-link span,
.sidebar-premium .sidebar-soon-badge,
.sidebar-premium .sidebar-upgrade-badge {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
/* Collapse section headers */
.sidebar-premium .sidebar-section-header {
  display: none !important;
}
/* Hide user panel text */
.sidebar-premium .sidebar-user-name,
.sidebar-premium .sidebar-user-role,
.sidebar-premium .sidebar-btn-label {
  display: none;
  transition: opacity 0.15s ease;
}
.sidebar-premium .sidebar-user-info { display: none; }
.sidebar-premium .sidebar-action-rows { display: none; }
.sidebar-premium .sidebar-action-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* --- Expanded state (mode-hover:hover OR mode-pinned) --- */
.sidebar-premium.mode-hover:hover .sidebar-link span,
.sidebar-premium.mode-hover:hover .sidebar-soon-badge,
.sidebar-premium.mode-hover:hover .sidebar-upgrade-badge,
.sidebar-premium.mode-pinned .sidebar-link span,
.sidebar-premium.mode-pinned .sidebar-soon-badge,
.sidebar-premium.mode-pinned .sidebar-upgrade-badge {
  opacity: 1;
}
.sidebar-premium.mode-hover:hover .sidebar-section-header,
.sidebar-premium.mode-pinned .sidebar-section-header {
  display: list-item !important;
}
.sidebar-premium.mode-hover:hover .sidebar-user-info,
.sidebar-premium.mode-pinned .sidebar-user-info {
  display: flex;
}
.sidebar-premium.mode-hover:hover .sidebar-action-rows,
.sidebar-premium.mode-pinned .sidebar-action-rows {
  display: block;
}
.sidebar-premium.mode-hover:hover .sidebar-action-stack,
.sidebar-premium.mode-pinned .sidebar-action-stack {
  display: none;
}
.sidebar-premium.mode-hover:hover .sidebar-user-name,
.sidebar-premium.mode-hover:hover .sidebar-user-role,
.sidebar-premium.mode-hover:hover .sidebar-btn-label,
.sidebar-premium.mode-pinned .sidebar-user-name,
.sidebar-premium.mode-pinned .sidebar-user-role,
.sidebar-premium.mode-pinned .sidebar-btn-label {
  display: inline;
  opacity: 1;
}

/* --- Mode toggle button (in sidebar flow, below logo) --- */
.sidebar-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.sidebar-premium:hover .sidebar-mode-btn,
.sidebar-premium.mode-pinned .sidebar-mode-btn {
  opacity: 1;
}
.sidebar-mode-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--gold-primary);
}
.sidebar-premium.mode-pinned .sidebar-mode-btn {
  color: var(--gold-primary);
}

/* --- Sidebar tooltip (mode-tooltip only) --- */
.sidebar-tooltip {
  position: fixed;
  left: 62px;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sidebar-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Resize handle (mode-pinned only) --- */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 1001;
  display: none;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: rgba(245, 197, 99, 0.3);
}
.sidebar-premium.mode-pinned .sidebar-resize-handle {
  display: block;
}
/* Disable transition during resize for smooth dragging */
.sidebar-premium.resizing {
  transition: none !important;
}
.sidebar-premium.resizing ~ .main-content {
  transition: none !important;
}

.sidebar-logo {
  padding: 0.25rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
/* Hide full logo in slim mode, show icon */
.sidebar-logo .logo-full { display: none; }
.sidebar-logo .logo-icon-solo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-premium.mode-hover:hover .sidebar-logo .logo-full,
.sidebar-premium.mode-pinned .sidebar-logo .logo-full {
  display: block;
}
.sidebar-premium.mode-hover:hover .sidebar-logo .logo-icon-solo,
.sidebar-premium.mode-pinned .sidebar-logo .logo-icon-solo {
  display: none;
}

.sidebar-logo h2 {
  font-size: 1rem;
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: var(--tracking-wide);
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 2px 6px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: 0.8rem;
  transition: all var(--transition-base);
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--gold-primary), var(--gold-secondary));
  border-radius: 0 2px 2px 0;
  transition: height var(--transition-base);
}

.sidebar-link:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.sidebar-link.active {
  background: var(--glass-bg);
  color: var(--gold-primary);
  box-shadow: inset 0 0 20px var(--gold-glow);
}

.sidebar-link.active::before {
  height: 70%;
}

.sidebar-link i {
  margin-right: var(--space-3);
  font-size: 18px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.sidebar-link:hover i {
  transform: scale(1.1);
}

/* Main Content Area */
.main-content {
  margin-left: 56px;
  min-height: 100vh;
  padding: 1rem 1.5rem;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

/* Content wrapper fills available space; disclaimers at bottom use margin-top: auto */
.sp-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push all disclaimer/warning banners to the bottom of the viewport */
/* Compliance disclaimer - standard styling */
.compliance-disclaimer {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.compliance-disclaimer a {
    color: var(--gold-primary);
}

.sp-content-wrap .compliance-disclaimer,
.sp-content-wrap .disclaimer-banner,
.sp-content-wrap .disclaimer-card,
.sp-content-wrap .rw-disclaimer-banner,
.sp-content-wrap .rw-info-banner,
.sp-content-wrap .cr-disclaimer,
.sp-content-wrap .rg-info-banner,
.sp-content-wrap .rk-info-banner {
  margin-top: auto !important;
}
/* When sidebar is pinned, push content over */
.sidebar-premium.mode-pinned ~ .main-content {
  margin-left: var(--sidebar-pinned-width, 300px);
}

/* (sidebar-link i styles consolidated above) */

/* Dashboard Header */
.dashboard-header {
  position: sticky;
  top: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 15, 0.95) 0%,
    rgba(10, 11, 15, 0.8) 100%
  );
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-8);
  z-index: 100;
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.page-subtitle {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Badge/Tag Components */
.badge-premium {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge-success {
  background: var(--success-glow);
  color: var(--success);
  border: 1px solid var(--success);
}

.badge-warning {
  background: var(--warning-glow);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.badge-danger {
  background: var(--danger-glow);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.badge-info {
  background: var(--info-glow);
  color: var(--info);
  border: 1px solid var(--info);
}

.badge-gold {
  background: var(--gold-glow);
  color: var(--gold-primary);
  border: 1px solid var(--gold-primary);
}

/* Custom orange badge for High priority alerts */
.badge-orange {
  background: rgba(253, 126, 20, 0.15);
  color: #fd7e14;
  border: 1px solid #fd7e14;
}

/* Custom yellow badge for Medium priority alerts */
.badge-yellow {
  background: rgba(255, 193, 7, 0.15);
  color: #cc9a06;
  border: 1px solid #ffc107;
}

/* SOON Badge - Purple/White for coming soon features */
.badge-soon {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
  border: 1px solid #9333ea;
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-soon i {
  font-size: 0.55rem;
}

/* Inline SOON Badge - for inline positioning with titles */
.badge-soon-inline {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
  font-size: 0.65rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

.badge-soon-inline i {
  font-size: 0.55rem;
}

/* Add-on Cards */
.addon-card {
  background: var(--bg-tertiary);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  height: 100%;
  border: 1px solid rgba(139, 92, 246, 0.15);
  transition: all 0.2s ease;
}

.addon-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.addon-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.addon-card-header i {
  font-size: 1.25rem;
}

.addon-card-header strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}

.addon-card-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.addon-card-price {
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.addon-card-note {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Sidebar SOON badge specific styling */
.sidebar-soon-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  font-size: 0.6rem;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-soon-badge i {
  font-size: 0.55rem;
}

/* Sidebar UPGRADE badge styling - base */
.sidebar-upgrade-badge {
  background: rgba(245, 197, 99, 0.15);
  color: var(--gold-primary);
  height: 20px;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 4px;
  margin-left: auto;
  border: 1px solid rgba(245, 197, 99, 0.3);
  flex-shrink: 0;
  transition: all 0.2s ease;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
}

/* Text badges (UPGRADE, PAID) get letter-spacing and gap back */
.sidebar-upgrade-badge .bi-lock,
.sidebar-upgrade-badge .bi-plus-circle {
  margin-right: 4px;
}

.sidebar-upgrade-badge i {
  font-size: 10px;
  line-height: 1;
}

/* Override Bootstrap Icons defaults that break flex centering */
.sidebar-upgrade-badge i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar-upgrade-badge i::before {
  vertical-align: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Sidebar section headers - aligned with menu items */
.sidebar-section-header {
  display: flex;
  align-items: center;
  margin: 2px 6px !important;
  padding: 8px 12px !important;
}

/* Push section header badges to the right edge */
.sidebar-section-header .sidebar-upgrade-badge {
  margin-left: auto;
}

/* Push SOON badge to the right edge of sidebar link */
.sidebar-link .sidebar-soon-badge {
  margin-left: auto;
}

/* Upgrade link styling - visible but dimmed */
.sidebar-link-upgrade {
  opacity: 0.6;
  transition: all 0.2s ease;
}

.sidebar-link-upgrade:hover {
  opacity: 0.9;
  background: rgba(245, 197, 99, 0.1) !important;
}

.sidebar-link-upgrade:hover .sidebar-upgrade-badge {
  background: rgba(245, 197, 99, 0.25);
  border-color: rgba(245, 197, 99, 0.5);
}

/* Disabled/locked link styling */
.sidebar-link-disabled {
  opacity: 0.7;
  cursor: not-allowed !important;
  pointer-events: none;
}

.sidebar-link-disabled:hover {
  background: transparent !important;
}

/* Progress Bars */
.progress-premium {
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.progress-bar-premium {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-primary), var(--gold-secondary));
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--bg-primary);
}

/* Tables */
.table-premium {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.table-premium thead th {
  padding: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.table-premium tbody tr {
  background: var(--glass-bg);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.table-premium tbody tr:hover {
  background: var(--glass-hover);
  transform: translateX(4px);
}

.table-premium tbody td {
  padding: var(--space-4);
  color: var(--text-secondary);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.table-premium tbody td:first-child {
  border-left: 1px solid var(--glass-border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.table-premium tbody td:last-child {
  border-right: 1px solid var(--glass-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass-bg) 0%,
    var(--glass-hover) 50%,
    var(--glass-bg) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-md);
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--gold-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--gold-glow-strong);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

.text-gold { color: var(--gold-primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-muted); }

.bg-gradient-gold {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
}

.shadow-gold {
  box-shadow: 0 0 40px var(--gold-glow);
}

.border-gold {
  border-color: var(--gold-primary);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* =====================================================
   UNIFIED COMPONENT SYSTEM (SP- PREFIX)
   Consistent, sophisticated components across all pages
   ===================================================== */

/* --- Refined Status Colors (Muted & Sophisticated) --- */
:root {
  /* Refined status backgrounds (8-12% opacity) */
  --status-critical-bg: rgba(220, 38, 38, 0.08);
  --status-critical-border: rgba(220, 38, 38, 0.2);
  --status-critical-text: #fca5a5;

  --status-warning-bg: rgba(245, 158, 11, 0.08);
  --status-warning-border: rgba(245, 158, 11, 0.2);
  --status-warning-text: #fcd34d;

  --status-success-bg: rgba(16, 185, 129, 0.08);
  --status-success-border: rgba(16, 185, 129, 0.2);
  --status-success-text: #6ee7b7;

  --status-info-bg: rgba(59, 130, 246, 0.08);
  --status-info-border: rgba(59, 130, 246, 0.2);
  --status-info-text: #93c5fd;

  /* Refined neutral borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-emphasis: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] {
  --status-critical-bg: rgba(220, 38, 38, 0.06);
  --status-critical-border: rgba(220, 38, 38, 0.15);
  --status-critical-text: #dc2626;

  --status-warning-bg: rgba(245, 158, 11, 0.06);
  --status-warning-border: rgba(245, 158, 11, 0.15);
  --status-warning-text: #d97706;

  --status-success-bg: rgba(16, 185, 129, 0.06);
  --status-success-border: rgba(16, 185, 129, 0.15);
  --status-success-text: #059669;

  --status-info-bg: rgba(59, 130, 246, 0.06);
  --status-info-border: rgba(59, 130, 246, 0.15);
  --status-info-text: #2563eb;

  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-default: rgba(0, 0, 0, 0.08);
  --border-emphasis: rgba(0, 0, 0, 0.12);
}

/* --- SP Card: Unified Card Component --- */
.sp-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.sp-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Card with accent — no visible top border, just subtle emphasis */
.sp-card-accent {
  /* Removed gold top accent to match mock design */
}

/* Card header - matching mock: transparent bg, gold icon */
.sp-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-card-header h5,
.sp-card-header h6 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-card-header h5 i,
.sp-card-header h6 i {
  color: var(--gold-primary);
  font-size: 0.9rem;
}

.sp-card-body {
  padding: 14px 16px;
}

.sp-card-body-compact {
  padding: 10px 14px;
}

/* --- SP Page Header: Clean header matching mock design --- */
.sp-page-header {
  background: transparent;
  color: var(--text-primary);
  padding: 0 0 1rem 0;
  margin-bottom: 1rem;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  z-index: 20;
  overflow: visible;
}

.sp-page-header h1 {
  font-size: 1.15rem;
  font-weight: var(--weight-bold);
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sp-page-header h1 i {
  color: var(--gold-primary);
  font-size: 1.1rem;
}

.sp-page-header p {
  color: var(--text-tertiary);
  margin: 0.25rem 0 0 0;
  font-size: var(--text-xs);
}

/* Export dropdown styling for premium page headers */
.sp-page-header .sp-dropdown-menu {
  margin-top: 0.5rem;
  padding: 0.4rem;
  min-width: 16.5rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(14, 17, 24, 0.95);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1025;
}

.sp-page-header .sp-dropdown-menu .dropdown-item {
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.55rem 0.65rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-page-header .sp-dropdown-menu .dropdown-item i {
  color: var(--gold-primary);
  margin-right: 0.45rem;
}

.sp-page-header .sp-dropdown-menu .dropdown-item:hover,
.sp-page-header .sp-dropdown-menu .dropdown-item:focus {
  background: rgba(212, 175, 55, 0.15);
  color: var(--text-primary);
}

.sp-page-header .sp-dropdown-menu .dropdown-divider {
  margin: 0.35rem 0;
  border-top-color: var(--glass-border);
}

/* --- SP Stat Cards: Compact, mock-matching design --- */
.sp-stat-card {
  position: relative;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  height: 100%;
}

.sp-stat-card:hover {
  transform: translateY(-1px);
}

.sp-stat-card .sp-stat-value {
  font-size: 1.75rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.sp-stat-card .sp-stat-label {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.sp-stat-card .sp-stat-sublabel {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.sp-stat-card .sp-stat-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  opacity: 0.2;
}

/* Stat card left accent bar (matching mock design) */
.sp-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 2px 2px 0;
}

/* Critical stat card */
.sp-stat-critical::after { background: #F87171; }
.sp-stat-critical .sp-stat-value { color: #F87171; }
.sp-stat-critical .sp-stat-icon { color: #F87171; }
.sp-stat-critical:hover { box-shadow: 0 4px 16px rgba(248, 113, 113, 0.12); }

/* Warning stat card */
.sp-stat-warning::after { background: #FBBF24; }
.sp-stat-warning .sp-stat-value { color: #FBBF24; }
.sp-stat-warning .sp-stat-icon { color: #FBBF24; }
.sp-stat-warning:hover { box-shadow: 0 4px 16px rgba(251, 191, 36, 0.12); }

/* Info stat card */
.sp-stat-info::after { background: #60A5FA; }
.sp-stat-info .sp-stat-value { color: #60A5FA; }
.sp-stat-info .sp-stat-icon { color: #60A5FA; }
.sp-stat-info:hover { box-shadow: 0 4px 16px rgba(96, 165, 250, 0.12); }

/* Success stat card */
.sp-stat-success::after { background: #34D399; }
.sp-stat-success .sp-stat-value { color: #34D399; }
.sp-stat-success .sp-stat-icon { color: #34D399; }
.sp-stat-success:hover { box-shadow: 0 4px 16px rgba(52, 211, 153, 0.12); }

/* Neutral/Gold stat card */
.sp-stat-neutral::after { background: var(--gold-primary); }
.sp-stat-neutral .sp-stat-value { color: var(--gold-primary); }
.sp-stat-neutral .sp-stat-icon { color: var(--gold-primary); }
.sp-stat-neutral:hover { box-shadow: 0 4px 16px rgba(245, 197, 99, 0.12); }

/* --- SP Buttons: Matching mock design --- */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  border: none;
}

.sp-btn-sm {
  padding: 4px 10px;
  font-size: 0.65rem;
}

.sp-btn-lg {
  padding: 10px 18px;
  font-size: 0.85rem;
}

/* Primary button - gold */
.sp-btn-primary {
  background: var(--gold-primary);
  color: #0A0B0F;
  border: 1px solid transparent;
}

.sp-btn-primary:hover {
  background: var(--gold-secondary);
  color: #0A0B0F;
  transform: translateY(-1px);
}

/* Secondary button - subtle outline */
.sp-btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.sp-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

/* Ghost button - subtle outline, icon-accented */
.sp-btn-ghost {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.sp-btn-ghost i {
  color: var(--gold-primary);
}

.sp-btn-ghost:hover {
  border-color: rgba(245, 197, 99, 0.15);
  color: var(--text-primary);
}

/* Danger button */
.sp-btn-danger {
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.12);
  color: #F87171;
}

.sp-btn-danger:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.25);
}

/* Success button */
.sp-btn-success {
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.12);
  color: #34D399;
}

.sp-btn-success:hover {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.25);
}

/* --- SP Badges: Matching mock design (dot + colored text) --- */
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  border: none;
}

.sp-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sp-badge-critical {
  background: rgba(248, 113, 113, 0.08);
  color: #F87171;
}
.sp-badge-critical::before { background: #F87171; }

.sp-badge-warning {
  background: rgba(251, 191, 36, 0.08);
  color: #FBBF24;
}
.sp-badge-warning::before { background: #FBBF24; }

.sp-badge-success {
  background: rgba(52, 211, 153, 0.08);
  color: #34D399;
}
.sp-badge-success::before { background: #34D399; }

.sp-badge-info {
  background: rgba(96, 165, 250, 0.08);
  color: #60A5FA;
}
.sp-badge-info::before { background: #60A5FA; }

.sp-badge-neutral {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}
.sp-badge-neutral::before { background: var(--text-tertiary); }

.sp-badge-gold {
  background: rgba(245, 197, 99, 0.08);
  color: var(--gold-primary);
}
.sp-badge-gold::before { background: var(--gold-primary); }

/* --- SP Section Title: Consistent section dividers --- */
.sp-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.sp-section-title-gold {
  border-bottom-color: rgba(245, 197, 99, 0.3);
}

/* --- SP Empty State: Unified empty state component --- */
.sp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.sp-empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(245, 197, 99, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.sp-empty-state-icon i {
  font-size: 1.75rem;
  color: var(--gold-primary);
  opacity: 0.6;
}

.sp-empty-state p {
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

/* --- SP Table: Unified table styling --- */
.sp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.sp-table thead th {
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-bottom: 1px solid var(--glass-border);
  text-align: left;
}

.sp-table tbody td {
  padding: 10px 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  font-size: 0.8rem;
}

.sp-table tbody tr:hover {
  background: rgba(245, 197, 99, 0.04);
}

.sp-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- SP Alert/Info Banner: Consistent alert styling --- */
.sp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.sp-alert i {
  flex-shrink: 0;
  margin-top: 2px;
}

.sp-alert-info {
  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-left: 3px solid #3b82f6;
  color: var(--text-primary);
}

.sp-alert-info i { color: var(--status-info-text); }

.sp-alert-warning {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  border-left: 3px solid #f59e0b;
  color: var(--text-primary);
}

.sp-alert-warning i { color: var(--status-warning-text); }

.sp-alert-success {
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-left: 3px solid #10b981;
  color: var(--text-primary);
}

.sp-alert-success i { color: var(--status-success-text); }

.sp-alert-danger {
  background: var(--status-critical-bg);
  border: 1px solid var(--status-critical-border);
  border-left: 3px solid #ef4444;
  color: var(--text-primary);
}

.sp-alert-danger i { color: var(--status-critical-text); }

.sp-alert-neutral {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--text-tertiary);
  color: var(--text-primary);
}

/* --- SP Banner (compact inline notification matching mock mk-banner) --- */
.sp-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.5;
}
.sp-banner i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sp-banner-title { font-weight: 700; }
.sp-banner-text { color: var(--text-secondary); font-size: 11px; }
.sp-banner-success { background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.12); color: #34D399; }
.sp-banner-critical { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.12); color: #F87171; }
.sp-banner-warning { background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.12); color: #FBBF24; }
.sp-banner-info { background: rgba(96,165,250,0.06); border: 1px solid rgba(96,165,250,0.12); color: #60A5FA; }

/* --- SP Area Card (compliance area card matching mock mk-area-card) --- */
.sp-area-cards { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sp-area-card {
  flex: 1;
  min-width: 140px;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  text-align: center;
  border-top: 3px solid transparent;
}
.sp-area-card.pass { border-top-color: #34D399; }
.sp-area-card.warn { border-top-color: #FBBF24; }
.sp-area-card.fail { border-top-color: #F87171; }
.sp-area-icon { font-size: 18px; margin-bottom: 6px; }
.sp-area-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.sp-area-score { font-size: 22px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.sp-area-score.green { color: #34D399; }
.sp-area-score.amber { color: #FBBF24; }
.sp-area-score.red { color: #F87171; }
.sp-area-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-area-badge.met { background: rgba(52,211,153,0.1); color: #34D399; }
.sp-area-badge.not-met { background: rgba(248,113,113,0.1); color: #F87171; }
.sp-area-weight { font-size: 10px; color: var(--text-tertiary); margin-top: 4px; }

/* --- SP Mini Progress Bar (matching mock mk-progress) --- */
.sp-mini-progress { height: 4px; background: var(--glass-border); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.sp-mini-progress-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }

/* --- SP Distribution Bar (horizontal bar chart matching mock pattern) --- */
.sp-dist-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sp-dist-row + .sp-dist-row { border-top: 1px solid rgba(255,255,255,0.025); }
.sp-dist-label { flex: 0 0 120px; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.sp-dist-bar-wrap { flex: 1; height: 8px; background: var(--glass-border); border-radius: 4px; overflow: hidden; }
.sp-dist-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.sp-dist-value { flex: 0 0 40px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-secondary); }

/* --- SP Issue Item (colored left border matching mock pattern) --- */
.sp-issue-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-left: 2px solid;
  border-radius: 0 6px 6px 0;
  background: var(--bg-tertiary);
  margin-bottom: 6px;
  font-size: 12px;
}
.sp-issue-item.critical { border-left-color: #F87171; }
.sp-issue-item.warning { border-left-color: #FBBF24; }
.sp-issue-item.info { border-left-color: #60A5FA; }
.sp-issue-item i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sp-issue-item.critical i { color: #F87171; }
.sp-issue-item.warning i { color: #FBBF24; }
.sp-issue-item.info i { color: #60A5FA; }

/* --- SP Score Ring (SVG circular progress matching mock mk-score-ring) --- */
.sp-score-ring { width: 140px; height: 140px; position: relative; flex-shrink: 0; }
.sp-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-score-ring circle { fill: none; stroke-width: 8; }
.sp-score-ring .ring-bg { stroke: var(--glass-border); }
.sp-score-ring .ring-fg { stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.sp-score-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sp-score-num { font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; }
.sp-score-label { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* --- SP Reporting Tiles (inline stat tiles) --- */
.sp-report-tiles { display: flex; gap: 10px; }
.sp-report-tile {
  flex: 1;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  text-align: center;
}
.sp-report-tile-value { font-size: 22px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.sp-report-tile-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }

/* --- SP Modal (alert detail popup matching mock mk-popup pattern) --- */
.sp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
}
.sp-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.sp-modal-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sp-modal-overlay.visible .sp-modal-card {
  transform: scale(1) translateY(0);
}
.sp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s;
}
.sp-modal-close:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #F87171;
}

/* --- Bootstrap .form-text override for dark/light theme readability --- */
.form-text {
  color: var(--text-secondary) !important;
}

/* --- SP Form Controls: Unified form styling --- */
.sp-form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.sp-form-control,
.sp-input {
  width: 100%;
  height: 42px;
  padding: 0.6rem 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sp-form-control:focus,
.sp-input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(245, 197, 99, 0.12);
}

.sp-form-control::placeholder,
.sp-input::placeholder {
  color: var(--text-muted);
}

/* Date input consistent styling */
.sp-input[type="date"],
.sp-form-control[type="date"],
input[type="date"].form-control,
input[type="date"] {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Calendar picker icon - keep dark icon visible on light input backgrounds */
input[type="date"]::-webkit-calendar-picker-indicator,
.sp-form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  padding: 4px;
  width: 20px;
  height: 20px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
.sp-form-control[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Light mode date inputs - consistent text color */
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="date"].form-control,
[data-theme="light"] .sp-input[type="date"],
[data-theme="light"] .sp-form-control[type="date"] {
  color: #1A1A1A;
  -webkit-text-fill-color: #1A1A1A;
}

[data-theme="light"] input[type="date"]::-webkit-datetime-edit,
[data-theme="light"] input[type="date"]::-webkit-datetime-edit-fields-wrapper,
[data-theme="light"] input[type="date"]::-webkit-datetime-edit-text,
[data-theme="light"] input[type="date"]::-webkit-datetime-edit-month-field,
[data-theme="light"] input[type="date"]::-webkit-datetime-edit-day-field,
[data-theme="light"] input[type="date"]::-webkit-datetime-edit-year-field {
  color: #1A1A1A;
  -webkit-text-fill-color: #1A1A1A;
}

[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.3);
  cursor: pointer;
}

/* --- SP Modal: Unified modal styling --- */
.sp-modal .modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.sp-modal .modal-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
}

.sp-modal .modal-title {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.sp-modal .modal-body {
  padding: var(--space-5);
}

.sp-modal .modal-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
}

/* Worker Alerts Box - Dark Theme Styled */
.worker-alerts-box {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.worker-alerts-box h5 {
  color: var(--warning);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.worker-alerts-box h5 i {
  font-size: 1.1rem;
}

.worker-alerts-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
}

.worker-alerts-box ul li {
  color: var(--text-primary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-sm);
}

.worker-alerts-box ul li:last-child {
  border-bottom: none;
}

.worker-alerts-box ul li strong {
  color: var(--warning);
}

.worker-alerts-box .btn-outline-warning {
  border-color: var(--warning);
  color: var(--warning);
  font-size: var(--text-sm);
}

.worker-alerts-box .btn-outline-warning:hover {
  background: var(--warning);
  color: var(--bg-primary);
}

/* Light mode overrides for alerts box - Clean style */
[data-theme="light"] .worker-alerts-box {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid #f59e0b;
}

[data-theme="light"] .worker-alerts-box ul li {
  color: #1A2332;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .worker-alerts-box h5 {
  color: #d97706;
}

/* =====================================================
   LIGHT MODE - SP Component System Overrides
   Matching mock (mk-*) design patterns for light bg
   ===================================================== */

/* --- SP Page Header: Transparent, matching mock mk-header pattern --- */
[data-theme="light"] .sp-page-header {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  box-shadow: none;
}

[data-theme="light"] .sp-page-header h1,
[data-theme="light"] .sp-page-header h2,
[data-theme="light"] .sp-page-header .dashboard-title {
  color: #1A1A1A !important;
}

[data-theme="light"] .sp-page-header p {
  color: #717171;
}

[data-theme="light"] .sp-page-header h1 i {
  color: var(--gold-accent) !important;
}

[data-theme="light"] .sp-page-header .sp-dropdown-menu {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 28, 46, 0.12);
  box-shadow: 0 16px 36px rgba(15, 28, 46, 0.16);
}

[data-theme="light"] .sp-page-header .sp-dropdown-menu .dropdown-item {
  color: #1A1A1A;
}

[data-theme="light"] .sp-page-header .sp-dropdown-menu .dropdown-item:hover,
[data-theme="light"] .sp-page-header .sp-dropdown-menu .dropdown-item:focus {
  background: rgba(212, 175, 55, 0.18);
}

[data-theme="light"] .sp-page-header .sp-dropdown-menu .dropdown-divider {
  border-top-color: rgba(15, 28, 46, 0.12);
}

/* --- Compliance Header: Clean light mode --- */
[data-theme="light"] .compliance-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .compliance-header h1,
[data-theme="light"] .compliance-header h2,
[data-theme="light"] .compliance-header .dashboard-title {
  color: #1A1A1A !important;
}

[data-theme="light"] .compliance-header p {
  color: #717171 !important;
}

[data-theme="light"] .compliance-header i {
  color: var(--gold-accent) !important;
}

[data-theme="light"] .compliance-header .btn-light {
  background: var(--gold-accent);
  color: #0A0B0F;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .compliance-header .btn-light:hover {
  background: var(--gold-accent-hover);
}

/* --- SP Card: Matching mock mk-card pattern — white bg, subtle border, transparent header --- */
[data-theme="light"] .sp-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

[data-theme="light"] .sp-card:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Card header — transparent bg matching mk-header pattern */
[data-theme="light"] .sp-card-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sp-card-header h5,
[data-theme="light"] .sp-card-header h6 {
  color: #1A1A1A;
}

/* Gold icon accent in card headers — matching mock */
[data-theme="light"] .sp-card-header i {
  color: var(--gold-accent) !important;
}

/* No accent top border — matching mock (mk-card has no top accent) */
[data-theme="light"] .sp-card-accent {
  border-top: none;
}

/* --- SP Buttons: Matching mock mk-btn pattern — gold primary, subtle ghost --- */
[data-theme="light"] .sp-btn-primary {
  background: var(--gold-accent);
  color: #0A0B0F;
  border: 1px solid transparent;
  box-shadow: none;
  border-radius: 6px;
}

[data-theme="light"] .sp-btn-primary:hover {
  background: var(--gold-accent-hover);
  color: #0A0B0F;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.2);
}

[data-theme="light"] .sp-btn-secondary {
  background: #F8F8F8;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #374151;
  border-radius: 6px;
}

[data-theme="light"] .sp-btn-secondary:hover {
  background: #F0F0F0;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1A1A1A;
  transform: translateY(-1px);
}

[data-theme="light"] .sp-btn-secondary i {
  color: var(--gold-accent);
}

/* Ghost button — subtle outline with gold icon, matching mk-btn-ghost */
[data-theme="light"] .sp-btn-ghost {
  background: #F8F8F8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #374151;
  border-radius: 6px;
  box-shadow: none;
}

[data-theme="light"] .sp-btn-ghost:hover {
  background: #F0F0F0;
  border-color: rgba(201, 162, 39, 0.25);
  color: #1A1A1A;
  transform: translateY(-1px);
}

[data-theme="light"] .sp-btn-ghost i {
  color: var(--gold-accent) !important;
}

[data-theme="light"] .sp-btn-danger {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border-radius: 6px;
}

[data-theme="light"] .sp-btn-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .sp-btn-success {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: #059669;
  border-radius: 6px;
}

[data-theme="light"] .sp-btn-success:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

/* --- SP Stat Cards: Matching mock mk-stat pattern — ::after left accent bar --- */
/* White bg with subtle border; left accent via ::after (inherited from base) */
[data-theme="light"] .sp-stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

[data-theme="light"] .sp-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Critical — red accent (darker for light bg readability) */
[data-theme="light"] .sp-stat-critical::after { background: #DC2626; }
[data-theme="light"] .sp-stat-critical .sp-stat-value { color: #DC2626; }
[data-theme="light"] .sp-stat-critical .sp-stat-icon { color: #DC2626 !important; opacity: 0.12 !important; }
[data-theme="light"] .sp-stat-critical:hover { box-shadow: 0 4px 16px rgba(220, 38, 38, 0.1); }

/* Warning — amber accent */
[data-theme="light"] .sp-stat-warning::after { background: #D97706; }
[data-theme="light"] .sp-stat-warning .sp-stat-value { color: #D97706; }
[data-theme="light"] .sp-stat-warning .sp-stat-icon { color: #D97706 !important; opacity: 0.12 !important; }
[data-theme="light"] .sp-stat-warning:hover { box-shadow: 0 4px 16px rgba(217, 119, 6, 0.1); }

/* Success — green accent */
[data-theme="light"] .sp-stat-success::after { background: #059669; }
[data-theme="light"] .sp-stat-success .sp-stat-value { color: #059669; }
[data-theme="light"] .sp-stat-success .sp-stat-icon { color: #059669 !important; opacity: 0.12 !important; }
[data-theme="light"] .sp-stat-success:hover { box-shadow: 0 4px 16px rgba(5, 150, 105, 0.1); }

/* Info — blue accent */
[data-theme="light"] .sp-stat-info::after { background: #2563EB; }
[data-theme="light"] .sp-stat-info .sp-stat-value { color: #2563EB; }
[data-theme="light"] .sp-stat-info .sp-stat-icon { color: #2563EB !important; opacity: 0.12 !important; }
[data-theme="light"] .sp-stat-info:hover { box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1); }

/* Neutral — gold accent */
[data-theme="light"] .sp-stat-neutral::after { background: var(--gold-accent); }
[data-theme="light"] .sp-stat-neutral .sp-stat-value { color: #996A00; }
[data-theme="light"] .sp-stat-neutral .sp-stat-icon { color: var(--gold-accent) !important; opacity: 0.12 !important; }
[data-theme="light"] .sp-stat-neutral:hover { box-shadow: 0 4px 16px rgba(201, 162, 39, 0.1); }

/* Stat card text colors for light mode */
[data-theme="light"] .sp-stat-card .sp-stat-label {
  color: #374151 !important;
}

[data-theme="light"] .sp-stat-card .sp-stat-sublabel {
  color: #6B7280 !important;
}

/* --- SP Badges: Matching mock mk-badge pattern — dot prefix, borderless, colored text --- */
/* Darker color values for readability on white backgrounds */
[data-theme="light"] .sp-badge-critical {
  background: rgba(220, 38, 38, 0.06);
  border: none;
  color: #DC2626;
}
[data-theme="light"] .sp-badge-critical::before { background: #DC2626; }

[data-theme="light"] .sp-badge-warning {
  background: rgba(217, 119, 6, 0.06);
  border: none;
  color: #D97706;
}
[data-theme="light"] .sp-badge-warning::before { background: #D97706; }

[data-theme="light"] .sp-badge-success {
  background: rgba(5, 150, 105, 0.06);
  border: none;
  color: #059669;
}
[data-theme="light"] .sp-badge-success::before { background: #059669; }

[data-theme="light"] .sp-badge-info {
  background: rgba(37, 99, 235, 0.06);
  border: none;
  color: #2563EB;
}
[data-theme="light"] .sp-badge-info::before { background: #2563EB; }

[data-theme="light"] .sp-badge-neutral {
  background: rgba(0, 0, 0, 0.03);
  border: none;
  color: #4A5568;
}
[data-theme="light"] .sp-badge-neutral::before { background: #9CA3AF; }

[data-theme="light"] .sp-badge-gold {
  background: rgba(153, 106, 0, 0.06);
  border: none;
  color: #996A00;
}
[data-theme="light"] .sp-badge-gold::before { background: #996A00; }

/* --- SP Table: Matching mock mk-table pattern — transparent header, subtle borders --- */
[data-theme="light"] .sp-table thead th {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: #6B7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

[data-theme="light"] .sp-table tbody td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: #374151;
}

[data-theme="light"] .sp-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.015);
}

/* --- SP Form Controls: Matching mock mk-search-input pattern --- */
[data-theme="light"] .sp-form-control,
[data-theme="light"] .sp-input {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1A2332;
  border-radius: 8px;
}

[data-theme="light"] .sp-form-control:focus,
[data-theme="light"] .sp-input:focus {
  border-color: var(--gold-accent);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15);
  outline: none;
}

[data-theme="light"] .sp-form-label {
  color: #1A2332;
  font-weight: 500;
}

/* --- SP Alert/Info boxes: Matching mock mk-banner pattern --- */
[data-theme="light"] .sp-alert-info {
  background: rgba(37, 99, 235, 0.04);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-left: none;
}

[data-theme="light"] .sp-alert-warning {
  background: rgba(217, 119, 6, 0.04);
  border: 1px solid rgba(217, 119, 6, 0.12);
  border-left: none;
}

[data-theme="light"] .sp-alert-success {
  background: rgba(5, 150, 105, 0.04);
  border: 1px solid rgba(5, 150, 105, 0.12);
  border-left: none;
}

[data-theme="light"] .sp-alert-danger {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.12);
  border-left: none;
}

/* --- New components: Light mode --- */
[data-theme="light"] .sp-area-card {
  background: #FAFBFC;
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .sp-area-name { color: #6B7280; }
[data-theme="light"] .sp-dist-row + .sp-dist-row { border-top-color: rgba(0,0,0,0.04); }
[data-theme="light"] .sp-dist-bar-wrap { background: rgba(0,0,0,0.06); }
[data-theme="light"] .sp-issue-item { background: #FAFBFC; }
[data-theme="light"] .sp-score-ring .ring-bg { stroke: rgba(0,0,0,0.08); }
[data-theme="light"] .sp-report-tile {
  background: #FAFBFC;
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .sp-mini-progress { background: rgba(0,0,0,0.06); }

/* --- SP Modal: Light mode --- */
[data-theme="light"] .sp-modal-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .sp-modal-close {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #6B7280;
}
[data-theme="light"] .sp-modal-close:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

/* --- SP Empty State: Clean light mode --- */
[data-theme="light"] .sp-empty-state {
  background: #FAFBFC;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

[data-theme="light"] .sp-empty-state-icon {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .sp-empty-state-icon i {
  color: #6B7280;
}

/* --- Status Colors for Light Mode --- */
[data-theme="light"] .check-pass {
  background: rgba(5, 150, 105, 0.04);
  border: 1px solid rgba(5, 150, 105, 0.12);
  border-left: 3px solid #059669;
}

[data-theme="light"] .check-fail {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.12);
  border-left: 3px solid #dc2626;
}

[data-theme="light"] .check-warn {
  background: rgba(217, 119, 6, 0.04);
  border: 1px solid rgba(217, 119, 6, 0.12);
  border-left: 3px solid #d97706;
}

/* --- Progress bars for light mode --- */
[data-theme="light"] .progress {
  background: rgba(0, 0, 0, 0.04);
  border: none;
}

/* --- Additional Light Mode Polish --- */
[data-theme="light"] body {
  background: var(--bg-primary);
}

/* Link colors for light mode - gold accent */
[data-theme="light"] a {
  color: var(--gold-accent);
}

[data-theme="light"] a:hover {
  color: var(--gold-accent-hover);
}

/* Text inside cards and general areas */
[data-theme="light"] .text-gold {
  color: var(--gold-accent) !important;
}

/* Dashboard title styling in light mode */
[data-theme="light"] .dashboard-title {
  color: var(--text-primary);
}

/* Personnel card styling for light mode */
[data-theme="light"] .personnel-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .personnel-card.vacant {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #DC2626;
  color: #1F2937;
}

[data-theme="light"] .personnel-card.vacant h5,
[data-theme="light"] .personnel-card.vacant p {
  color: #1F2937 !important;
}

/* Calendar section styling */
[data-theme="light"] .calendar-section {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Event items for light mode */
[data-theme="light"] .event-item {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}

[data-theme="light"] .event-item.critical {
  background: #FFFFFF;
  border-left: 4px solid #DC2626;
}

[data-theme="light"] .event-item.high {
  background: #FFFFFF;
  border-left: 4px solid #F59E0B;
}

[data-theme="light"] .event-item.medium {
  background: #FFFFFF;
  border-left: 4px solid #3B82F6;
}

/* Role badges for light mode */
[data-theme="light"] .role-badge {
  font-weight: 600;
}

/* Month header accent */
[data-theme="light"] .month-header {
  color: #1A1A1A;
  border-bottom-color: var(--gold-accent);
}

/* Glass card — matching mock mk-card pattern */
[data-theme="light"] .glass-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

[data-theme="light"] .glass-card:hover {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  transform: translateY(-1px);
}

/* Legacy stat card — matching mock pattern */
[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .stat-value {
  color: #1A1A1A;
  text-shadow: none;
}

/* Legacy semantic stat cards — matching mock mk-stat ::after pattern */
[data-theme="light"] .stat-card-danger {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

[data-theme="light"] .stat-card-danger .stat-value { color: #DC2626; text-shadow: none; }
[data-theme="light"] .stat-card-danger .stat-label { color: #374151; }
[data-theme="light"] .stat-card-danger .stat-icon { color: #DC2626 !important; opacity: 0.12 !important; }

[data-theme="light"] .stat-card-warning {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

[data-theme="light"] .stat-card-warning .stat-value { color: #D97706; text-shadow: none; }
[data-theme="light"] .stat-card-warning .stat-label { color: #374151; }
[data-theme="light"] .stat-card-warning .stat-icon { color: #D97706 !important; opacity: 0.12 !important; }

[data-theme="light"] .stat-card-info {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

[data-theme="light"] .stat-card-info .stat-value { color: #2563EB; text-shadow: none; }
[data-theme="light"] .stat-card-info .stat-label { color: #374151; }
[data-theme="light"] .stat-card-info .stat-icon { color: #2563EB !important; opacity: 0.12 !important; }

[data-theme="light"] .stat-card-gold {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

[data-theme="light"] .stat-card-gold .stat-value { color: #996A00; text-shadow: none; }
[data-theme="light"] .stat-card-gold .stat-label { color: #374151; }
[data-theme="light"] .stat-card-gold .stat-icon { color: var(--gold-accent) !important; opacity: 0.12 !important; }

/* =====================================================
   LIGHT MODE - Custom Header Fixes
   Matching mock mk-header transparent pattern
   ===================================================== */

/* All custom headers — transparent bg matching mock */
[data-theme="light"] .rk-card-header,
[data-theme="light"] .rw-card-header,
[data-theme="light"] .rtw-page-header,
[data-theme="light"] .rk-result-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .rk-card-header h1,
[data-theme="light"] .rk-card-header h2,
[data-theme="light"] .rk-card-header h3,
[data-theme="light"] .rk-card-header h4,
[data-theme="light"] .rk-card-header h5,
[data-theme="light"] .rk-card-header p,
[data-theme="light"] .rk-card-header span {
  color: #1A1A1A !important;
}

[data-theme="light"] .rk-card-header .header-subtitle {
  color: #717171 !important;
}

[data-theme="light"] .rw-card-header h1,
[data-theme="light"] .rw-card-header h2,
[data-theme="light"] .rw-card-header h3,
[data-theme="light"] .rw-card-header h4,
[data-theme="light"] .rw-card-header p,
[data-theme="light"] .rw-card-header span {
  color: #1A1A1A !important;
}

[data-theme="light"] .rtw-page-header h1,
[data-theme="light"] .rtw-page-header h2,
[data-theme="light"] .rtw-page-header p {
  color: #1A1A1A !important;
}

[data-theme="light"] .rk-result-header h4,
[data-theme="light"] .rk-result-header p,
[data-theme="light"] .rk-result-header span {
  color: #1A1A1A !important;
}

/* Modal headers — transparent matching mock */
[data-theme="light"] .modal-header[style*="im-navy"],
[data-theme="light"] .modal-header[style*="gradient"] {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .modal-header[style*="im-navy"] h5,
[data-theme="light"] .modal-header[style*="gradient"] h5,
[data-theme="light"] .modal-header[style*="im-navy"] .modal-title,
[data-theme="light"] .modal-header[style*="gradient"] .modal-title {
  color: #1A1A1A !important;
}

/* Card headers with inline gradient styles — convert to light */
[data-theme="light"] .card-header[style*="im-navy"],
[data-theme="light"] .card-header[style*="gradient"] {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .card-header[style*="im-navy"] *,
[data-theme="light"] .card-header[style*="gradient"] * {
  color: #1A1A1A !important;
}

/* Icons in headers - gold accent */
[data-theme="light"] .rk-card-header i,
[data-theme="light"] .rw-card-header i,
[data-theme="light"] .rtw-page-header i,
[data-theme="light"] .compliance-header i,
[data-theme="light"] .sp-page-header i {
  color: var(--gold-accent) !important;
}

/* Subtitles in headers */
[data-theme="light"] .rk-card-header .header-subtitle,
[data-theme="light"] .rw-card-header .header-subtitle,
[data-theme="light"] .compliance-header p,
[data-theme="light"] .sp-page-header p {
  color: #717171 !important;
}

/* --- Bootstrap Primary Buttons: Gold accent matching mock --- */
[data-theme="light"] .btn-primary {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  color: #0A0B0F !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus,
[data-theme="light"] .btn-primary:active {
  background: var(--gold-accent-hover) !important;
  border-color: var(--gold-accent-hover) !important;
  color: #0A0B0F !important;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.25) !important;
}

[data-theme="light"] .btn-primary i {
  color: #0A0B0F !important;
}

/* Bootstrap outline buttons */
[data-theme="light"] .btn-outline-primary {
  background: transparent !important;
  border-color: var(--gold-accent) !important;
  color: #996A00 !important;
}

[data-theme="light"] .btn-outline-primary:hover {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  color: #0A0B0F !important;
}

[data-theme="light"] .btn-outline-primary i {
  color: var(--gold-accent) !important;
}

/* Bootstrap danger buttons - white text on red */
[data-theme="light"] .btn-danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .btn-danger:hover,
[data-theme="light"] .btn-danger:focus,
[data-theme="light"] .btn-danger:active {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .btn-danger i {
  color: #FFFFFF !important;
}

/* --- RTW Wizard Buttons: Gold accent matching mock mk-btn --- */
[data-theme="light"] .rw-btn-primary {
  background: var(--gold-accent) !important;
  color: #0A0B0F !important;
  border: 1px solid transparent !important;
}

[data-theme="light"] .rw-btn-primary:hover {
  background: var(--gold-accent-hover) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.25) !important;
}

[data-theme="light"] .rw-btn-primary i {
  color: #0A0B0F !important;
}

[data-theme="light"] .rw-btn-secondary {
  background: #F8F8F8 !important;
  color: #374151 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .rw-btn-secondary:hover {
  background: #F0F0F0 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .rw-btn-secondary i {
  color: var(--gold-accent) !important;
}

/* Reporting guide buttons — matching mock */
[data-theme="light"] .rg-btn-primary {
  background: var(--gold-accent) !important;
  color: #0A0B0F !important;
  border: 1px solid transparent !important;
}

[data-theme="light"] .rg-btn-primary i {
  color: #0A0B0F !important;
}

[data-theme="light"] .rg-btn-secondary {
  background: #F8F8F8 !important;
  color: #374151 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .rg-btn-secondary i {
  color: var(--gold-accent) !important;
}

/* --- Step Indicators: Matching mock mk-step pattern --- */
[data-theme="light"] .rg-step.active .rg-step-number,
[data-theme="light"] .rw-step.active .rw-step-number,
[data-theme="light"] .rk-step.active .rk-step-number {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  color: #0A0B0F !important;
}

[data-theme="light"] .rg-step.active .rg-step-label,
[data-theme="light"] .rw-step.active .rw-step-label,
[data-theme="light"] .rk-step.active .rk-step-label {
  color: #1A1A1A !important;
}

[data-theme="light"] .rg-step-number,
[data-theme="light"] .rw-step-number,
[data-theme="light"] .rk-step-number {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #9CA3AF !important;
}

[data-theme="light"] .rg-step-connector,
[data-theme="light"] .rw-step-connector,
[data-theme="light"] .rk-step-connector {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* --- Bootstrap Cards: Hover effects for both modes --- */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   PUBLIC PAGES - Modern SaaS Design System
   Shared across landing, pricing, about, legal pages
   Inspired by Neon.com, Framer, Datalog, Ballpark
   ===================================================== */

/* Public page accent tokens (scoped via inline style overrides in templates) */
:root {
  --accent-primary: #F5C563;
  --accent-secondary: #FFE08A;
  --accent-glow: rgba(245, 197, 99, 0.15);
  --accent-glow-strong: rgba(245, 197, 99, 0.25);
}

/* Footer - Dark theme */
.footer {
  background: #0A0B0F;
  padding: 80px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer h6 {
  color: #F0F0F3;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.footer a {
  color: #5E5F6B;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: #F5C563;
}

/* CTA Section - Dark with accent gradient */
.cta-section {
  background: #0A0B0F;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 99, 0.3), transparent);
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(245, 197, 99, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #F0F0F3;
  letter-spacing: -0.02em;
}

/* Landing Navigation */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 0;
  background: rgba(10, 11, 15, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1000;
  transition: all 0.3s ease;
}

.landing-nav.scrolled {
  padding: 10px 0;
  background: rgba(10, 11, 15, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-link {
  color: #9B9CA7;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
}

.nav-link:hover,
.nav-link.active {
  color: #F5C563;
}

/* Public page button overrides */
.public-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  background: #F5C563;
  color: #0A0B0F;
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.public-btn-primary:hover {
  background: #FFD580;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245, 197, 99, 0.3);
  color: #0A0B0F;
}

.public-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: #F0F0F3;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.public-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

/* Reveal animation utility */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   FLATPICKR DATE PICKER - Custom SponsorPro Theme
   ===================================================== */

/* Base Flatpickr container styling */
.flatpickr-calendar {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  font-family: inherit !important;
  width: 307px !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none !important;
}

/* Month navigation header */
.flatpickr-months {
  background: var(--bg-tertiary) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: var(--space-2) !important;
}

.flatpickr-months .flatpickr-month {
  background: transparent !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
  height: 40px !important;
}

.flatpickr-current-month {
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-weight: var(--weight-semibold) !important;
  padding: var(--space-1) var(--space-2) !important;
  text-align: center !important;
  text-align-last: center !important;
  -moz-text-align-last: center !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  text-align: center !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--bg-elevated) !important;
}

.flatpickr-current-month input.cur-year {
  color: var(--text-primary) !important;
  font-weight: var(--weight-semibold) !important;
  background: transparent !important;
}

/* Year input up/down arrows */
.flatpickr-current-month .numInputWrapper {
  display: inline-flex !important;
  align-items: center !important;
}

.flatpickr-current-month .numInputWrapper span {
  border: none !important;
  background: transparent !important;
}

.flatpickr-current-month .numInputWrapper span:after {
  border-color: var(--gold-primary) transparent transparent transparent !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-color: transparent transparent var(--gold-primary) transparent !important;
}

.flatpickr-current-month .numInputWrapper span:hover:after {
  border-bottom-color: var(--gold-secondary) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:hover:after {
  border-top-color: var(--gold-secondary) !important;
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
  padding: var(--space-2) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--bg-elevated) !important;
  fill: var(--gold-primary) !important;
  color: var(--gold-primary) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: inherit !important;
}

/* Weekday headers */
.flatpickr-weekdays {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-2) 0 !important;
}

.flatpickr-weekday {
  color: var(--text-tertiary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Days container */
.flatpickr-days {
  background: var(--bg-secondary) !important;
  border: none !important;
  padding: var(--space-2) !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Individual day cells */
.flatpickr-day {
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  border: none !important;
  max-width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 1px !important;
  transition: all var(--transition-fast) !important;
}

.flatpickr-day:hover {
  background: var(--bg-elevated) !important;
  border-color: transparent !important;
}

/* Today */
.flatpickr-day.today {
  border: 2px solid var(--gold-primary) !important;
  background: transparent !important;
}

.flatpickr-day.today:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary)) !important;
  color: var(--bg-primary) !important;
  border-color: transparent !important;
  font-weight: var(--weight-bold) !important;
}

/* Selected + today */
.flatpickr-day.selected.today {
  border-color: transparent !important;
}

/* In range selection */
.flatpickr-day.inRange {
  background: rgba(245, 197, 99, 0.15) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Disabled / other month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--text-muted) !important;
  background: transparent !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-muted) !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--bg-tertiary) !important;
}

/* Time picker */
.flatpickr-time {
  background: var(--bg-tertiary) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  max-height: 48px !important;
}

.flatpickr-time input {
  color: var(--text-primary) !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-semibold) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: var(--bg-elevated) !important;
  border-color: var(--gold-primary) !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text-secondary) !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
  background: var(--bg-elevated) !important;
}

/* Input styling for Flatpickr alt input */
.sp-flatpickr-input,
.flatpickr-input {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  padding: var(--space-3) !important;
  font-size: var(--text-sm) !important;
  transition: all var(--transition-fast) !important;
  width: 100% !important;
}

.sp-flatpickr-input:hover,
.flatpickr-input:hover {
  border-color: var(--border-emphasis) !important;
}

.sp-flatpickr-input:focus,
.flatpickr-input:focus {
  outline: none !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 3px var(--gold-glow) !important;
}

/* Flatpickr input with icon */
.sp-flatpickr-input::placeholder,
.flatpickr-input::placeholder {
  color: var(--text-muted) !important;
}

/* =====================================================
   FLATPICKR LIGHT THEME OVERRIDES
   ===================================================== */

.flatpickr-light.flatpickr-calendar {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.flatpickr-light .flatpickr-months {
  background: var(--bg-tertiary) !important;
}

.flatpickr-light .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--bg-secondary) !important;
}

.flatpickr-light .flatpickr-weekdays {
  background: var(--bg-secondary) !important;
}

.flatpickr-light .flatpickr-days {
  background: var(--bg-secondary) !important;
}

.flatpickr-light .flatpickr-day:hover {
  background: var(--bg-tertiary) !important;
}

.flatpickr-light .flatpickr-day.today {
  border-color: var(--navy-accent, var(--gold-primary)) !important;
}

.flatpickr-light .flatpickr-day.selected,
.flatpickr-light .flatpickr-day.startRange,
.flatpickr-light .flatpickr-day.endRange {
  background: linear-gradient(135deg, var(--navy-accent, #1E3A5F), #152D4A) !important;
  color: #FFFFFF !important;
}

.flatpickr-light .flatpickr-day.inRange {
  background: rgba(30, 58, 95, 0.15) !important;
}

.flatpickr-light .flatpickr-time {
  background: var(--bg-tertiary) !important;
}

.flatpickr-light .flatpickr-time input {
  background: var(--bg-secondary) !important;
}

/* Light mode year arrows use navy instead of gold */
.flatpickr-light .flatpickr-current-month .numInputWrapper span:after {
  border-color: var(--navy-accent, #1E3A5F) transparent transparent transparent !important;
}

.flatpickr-light .flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-color: transparent transparent var(--navy-accent, #1E3A5F) transparent !important;
}

/* Light mode input focus uses navy instead of gold */
[data-theme="light"] .sp-flatpickr-input:focus,
[data-theme="light"] .flatpickr-input:focus {
  border-color: var(--navy-accent, #1E3A5F) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15) !important;
}

/* =====================================================
   PAGE-LOAD ANIMATIONS
   Reusable animation classes for portal elements.
   Use --anim-delay custom property to stagger.
   ===================================================== */

@keyframes sp-fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sp-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sp-scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sp-pop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sp-fillBar {
  from { width: 0; }
}
@keyframes sp-ringFill {
  from { stroke-dashoffset: 264; }
}
@keyframes sp-countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sp-slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Base class: hides element until animation fires */
.sp-anim {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: var(--anim-delay, 0ms);
}

/* Fade + slide up (stat cards, cards, rows) */
.sp-anim-up {
  opacity: 0;
  animation: sp-fadeSlideUp 0.5s cubic-bezier(0.4,0,0.2,1) var(--anim-delay, 0ms) both;
}

/* Fade in (banners, headers) */
.sp-anim-fade {
  opacity: 0;
  animation: sp-fadeIn 0.45s ease var(--anim-delay, 0ms) both;
}

/* Scale in (cards, tiles) */
.sp-anim-scale {
  opacity: 0;
  animation: sp-scaleIn 0.45s cubic-bezier(0.4,0,0.2,1) var(--anim-delay, 0ms) both;
}

/* Pop in (icons, badges) */
.sp-anim-pop {
  opacity: 0;
  animation: sp-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) var(--anim-delay, 0ms) both;
}

/* Fill bar from left (progress bars) */
.sp-anim-bar {
  animation: sp-fillBar 0.8s cubic-bezier(0.4,0,0.2,1) var(--anim-delay, 0ms) both;
}

/* SVG ring fill (score ring stroke-dashoffset) */
.sp-anim-ring {
  animation: sp-ringFill 1.2s cubic-bezier(0.4,0,0.2,1) var(--anim-delay, 0ms) both;
}

/* Slide in from left (table rows) */
.sp-anim-slide {
  opacity: 0;
  animation: sp-slideInLeft 0.35s cubic-bezier(0.4,0,0.2,1) var(--anim-delay, 0ms) both;
}

/* Quick stagger helpers — use as nth-child delay utilities */
.sp-stagger-1 { --anim-delay: 80ms; }
.sp-stagger-2 { --anim-delay: 160ms; }
.sp-stagger-3 { --anim-delay: 240ms; }
.sp-stagger-4 { --anim-delay: 320ms; }
.sp-stagger-5 { --anim-delay: 400ms; }
.sp-stagger-6 { --anim-delay: 480ms; }
.sp-stagger-7 { --anim-delay: 560ms; }
.sp-stagger-8 { --anim-delay: 640ms; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sp-anim, .sp-anim-up, .sp-anim-fade, .sp-anim-scale,
  .sp-anim-pop, .sp-anim-bar, .sp-anim-ring, .sp-anim-slide {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}