/* MASTER SPACE — Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --black: #000000;
  --yellow: #F5C518;
  --yellow-light: #FFD84D;
  --yellow-dark: #C99E10;
  --yellow-glow: rgba(245, 197, 24, 0.4);
  --green: #39A751;
  --green-light: #4FD46E;
  --green-dark: #2D8540;
  --green-glow: rgba(57, 167, 81, 0.4);
  --teal: #00BFA5;
  --bg-primary: #0A0A0A;
  --bg-secondary: #111111;
  --bg-card: #161616;
  --bg-card-hover: #1E1E1E;
  --bg-input: #1A1A1A;
  --bg-modal: #141414;
  --border-primary: #2A2A2A;
  --border-light: #333333;
  --border-focus: var(--yellow);
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --text-muted: #666666;
  --text-accent: var(--yellow);
  --status-pending: #F59E0B;
  --status-enrolled: #3B82F6;
  --status-training: #8B5CF6;
  --status-evaluated: #F97316;
  --status-certified: var(--green);
  --danger: #EF4444;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.7);
  --shadow-yellow: 0 0 20px rgba(245,197,24,0.15);
  --shadow-green: 0 0 20px rgba(57,167,81,0.15);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --sheet-handle-color: rgba(255, 255, 255, 0.2);
  --input-height: 48px;

  /* Default Dark Glassmorphic variables */
  --bg-card-glass: rgba(22, 22, 22, 0.4);
  --bg-card-glass-hover: rgba(30, 30, 30, 0.45);
  --border-card-glass: rgba(255, 255, 255, 0.05);
  --border-card-glass-hover: rgba(255, 255, 255, 0.12);
  --shadow-card-glass: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-card-glass-hover: 0 15px 35px rgba(0, 0, 0, 0.35);
  --bg-sidebar: rgba(17, 17, 17, 0.65);
  --bg-nav-hover: rgba(255, 255, 255, 0.03);
  --bg-option: rgba(255, 255, 255, 0.03);
  --border-option: rgba(255, 255, 255, 0.1);
  --bg-option-hover: rgba(255, 255, 255, 0.08);
  --border-option-hover: rgba(255, 255, 255, 0.3);
  --bg-modal-glass: rgba(20, 20, 20, 0.6);
  --border-modal-glass: rgba(255, 255, 255, 0.08);
  --shadow-modal-glass: 0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  
  --bg-toast-success: rgba(57, 167, 81, 0.15);
  --text-toast-success: #fff;
  --bg-toast-error: rgba(239, 68, 68, 0.15);
  --text-toast-error: #fff;
  --bg-toast-info: rgba(59, 130, 246, 0.15);
  --text-toast-info: #fff;
  --border-toast-glass: rgba(255, 255, 255, 0.05);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-primary); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; line-height: 1.6; overflow-x: hidden; }
a { color: var(--yellow); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--yellow-light); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--font-primary); }
input, select, textarea { font-family: var(--font-primary); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); }

.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.text-center { text-align: center; }
.text-yellow { color: var(--yellow); }
.text-green { color: var(--green); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-display { font-family: var(--font-display); }
.hidden { display: none !important; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.w-full { width: 100%; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid { gap: 16px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .grid { gap: 12px; } }

/* ── Light Theme Variable Overrides ── */
:root.light-theme, html.light-theme {
  --yellow: #D97706;
  --yellow-light: #F59E0B;
  --yellow-dark: #B45309;
  --yellow-glow: rgba(217, 119, 6, 0.2);
  --green: #16A34A;
  --green-light: #22C55E;
  --green-dark: #15803D;
  --green-glow: rgba(22, 163, 74, 0.2);
  --teal: #0D9488;
  
  --bg-primary: #F8FAFC;
  --bg-secondary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-input: #FFFFFF;
  --bg-modal: #FFFFFF;
  --border-primary: #E2E8F0;
  --border-light: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  /* Premium Light Glassmorphism */
  --bg-card-glass: rgba(255, 255, 255, 0.7);
  --bg-card-glass-hover: rgba(255, 255, 255, 0.95);
  --border-card-glass: rgba(15, 23, 42, 0.06);
  --border-card-glass-hover: rgba(15, 23, 42, 0.12);
  --shadow-card-glass: 0 10px 30px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-card-glass-hover: 0 15px 35px rgba(15, 23, 42, 0.08);
  --bg-sidebar: rgba(255, 255, 255, 0.75);
  --bg-nav-hover: rgba(15, 23, 42, 0.04);
  --bg-option: rgba(15, 23, 42, 0.02);
  --border-option: rgba(15, 23, 42, 0.08);
  --bg-option-hover: rgba(15, 23, 42, 0.05);
  --border-option-hover: rgba(15, 23, 42, 0.18);
  --bg-modal-glass: rgba(255, 255, 255, 0.85);
  --border-modal-glass: rgba(15, 23, 42, 0.08);
  --shadow-modal-glass: 0 24px 64px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Fully Accessible Toast Notifications in Light Mode */
  --bg-toast-success: #DEF7EC;
  --text-toast-success: #03543F;
  --bg-toast-error: #FDE8E8;
  --text-toast-error: #9B1C1C;
  --bg-toast-info: #E1EFFE;
  --text-toast-info: #1E429F;
  --border-toast-glass: rgba(15, 23, 42, 0.05);
  --shadow-toast: 0 10px 30px rgba(15, 23, 42, 0.08);

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* ── Smooth Theme Transition Effects ── */
body, .sidebar, .main-content, .card, .nav-item, .form-input, .mobile-topbar, .portal-topbar, .modal, .toast {
  transition: background var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

/* ── Public Pages Light Theme Overrides ── */
html.light-theme .landing-page::before {
  background: radial-gradient(ellipse at 20% 10%, rgba(245,197,24,0.06) 0%, transparent 45%), 
              radial-gradient(ellipse at 80% 90%, rgba(57,167,81,0.05) 0%, transparent 45%), 
              radial-gradient(circle at 50% 50%, #F8FAFC 0%, #F1F5F9 100%) !important;
}

html.light-theme .register-page {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

html.light-theme .register-page::before {
  background: radial-gradient(ellipse at 20% 10%, rgba(245,197,24,0.06) 0%, transparent 40%),
              radial-gradient(ellipse at 80% 90%, rgba(139,92,246,0.05) 0%, transparent 40%),
              radial-gradient(circle at 50% 50%, #F8FAFC 0%, #F1F5F9 100%) !important;
}

/* Specific overrides for verify.html */
html.light-theme {
  --dark: #0F172A !important;
  --gray: #475569 !important;
  --gray-light: #94A3B8 !important;
  --border: #E2E8F0 !important;
  --bg: #F8FAFC !important;
  --white: rgba(255, 255, 255, 0.85) !important;
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme body::before {
  background: radial-gradient(ellipse at 20% 10%, rgba(245, 197, 24, 0.06) 0%, transparent 45%),
              radial-gradient(ellipse at 80% 90%, rgba(57, 167, 81, 0.05) 0%, transparent 45%),
              radial-gradient(circle at 50% 50%, #F8FAFC 0%, #F1F5F9 100%) !important;
}

html.light-theme .verify-header {
  background: rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html.light-theme .verify-footer {
  color: var(--text-secondary) !important;
}

html.light-theme .photo-format-hint {
  color: #1e40af !important;
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
}

html.light-theme .form-group.has-error .error-feedback {
  color: #9b1c1c !important;
}