/**
 * FaStep - Executive Design System (Dark & Light Mode)
 * Enterprise Career Suite Design Architecture
 */

/* ==========================================================================
   1. COLOR TOKENS: DEFAULT DARK MODE (EXECUTIVE NAVY & ROYAL AZURE)
   ========================================================================== */
:root,
body.fastep-page {
  /* Canvas & Surface */
  --bg-primary: #070d18 !important;
  --bg-secondary: #0b1120 !important;
  --fs-bg-canvas: #070d18;
  --fs-bg-surface: #0b1120;
  --fs-bg-card: rgba(15, 23, 42, 0.78);
  --fs-bg-card-hover: rgba(22, 33, 58, 0.88);
  --fs-card-border: rgba(56, 189, 248, 0.16);
  --fs-card-border-hover: rgba(56, 189, 248, 0.4);

  /* Semantic Accents */
  --accent-color: #38bdf8 !important;
  --accent-violet: #6366f1 !important;
  --accent-pink: #f43f5e !important;
  --accent-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #38bdf8 100%) !important;

  --fs-azure: #38bdf8;
  --fs-azure-glow: rgba(56, 189, 248, 0.35);
  --fs-royal: #2563eb;
  --fs-royal-glow: rgba(37, 99, 235, 0.4);
  --fs-indigo: #6366f1;
  --fs-ruby: #f43f5e;
  --fs-emerald: #10b981;
  --fs-amber: #f59e0b;

  /* Typography */
  --text-primary: #f8fafc !important;
  --text-secondary: #94a3b8 !important;
  --fs-text-heading: #ffffff;
  --fs-text-body: #cbd5e1;
  --fs-text-muted: #64748b;

  --fs-header-height: 56px;
}

/* ==========================================================================
   2. DARK MODE STYLING (DEFAULT)
   ========================================================================== */
body.fastep-page {
  background-color: #070d18 !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.14), transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(99, 102, 241, 0.10), transparent 42%) !important;
  background-attachment: fixed !important;
  color: #e2e8f0 !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.fastep-page .glow-orb.orb-1 {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 70%) !important;
}
body.fastep-page .glow-orb.orb-2 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 70%) !important;
}

.fastep-app-header {
  background: rgba(7, 13, 24, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  position: sticky;
  top: 0;
  z-index: 1040;
  padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.55rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.fs-header-step-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fs-wizard-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 1px;
  outline: none !important;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-wizard-step-btn .step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.fs-wizard-step-btn:hover .step-circle {
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.fs-wizard-step-btn.active .step-circle {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #38bdf8 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.65) !important;
  transform: scale(1.15);
}

.fs-wizard-step-btn.completed .step-circle {
  background: rgba(37, 99, 235, 0.16) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

#fs-wizard-top-save-btn {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #0284c7 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.2s ease;
}

#fs-wizard-top-save-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #0284c7 60%, #38bdf8 100%) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-1px);
}

#fs-wizard-save-feedback {
  background: #10b981 !important;
  color: #062a1e !important;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

body.fastep-page .glass-card {
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  border: 1px solid rgba(56, 189, 248, 0.16) !important;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  transition: background 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#fs-step-1 { border-top: 3px solid #38bdf8 !important; }
#fs-step-2 { border-top: 3px solid #6366f1 !important; }
#fs-step-3 { border-top: 3px solid #38bdf8 !important; }
#fs-step-4 { border-top: 3px solid #38bdf8 !important; }
#fs-step-5 { border-top: 3px solid #f43f5e !important; }
#fs-step-6 { border-top: 3px solid #f59e0b !important; }

body.fastep-page .btn-wow.btn-glow {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0284c7 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.38) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.fastep-page .btn-wow.btn-glow:hover {
  background: linear-gradient(135deg, #2563eb 0%, #0284c7 50%, #38bdf8 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 26px rgba(56, 189, 248, 0.55) !important;
  transform: translateY(-1px);
}

body.fastep-page .btn-wow.btn-glass {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #f1f5f9 !important;
}

body.fastep-page .btn-wow.btn-glass:hover {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

body.fastep-page .gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #bae6fd 45%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.fastep-page .text-info {
  color: #38bdf8 !important;
}

body.fastep-page .border-info {
  border-color: rgba(56, 189, 248, 0.35) !important;
}

body.fastep-page .bg-primary {
  background-color: #2563eb !important;
}

body.fastep-page .glass-input,
body.fastep-page .form-control.glass-input,
body.fastep-page .form-select.glass-input {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: #ffffff !important;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body.fastep-page .glass-input:hover,
body.fastep-page .form-control.glass-input:hover,
body.fastep-page .form-select.glass-input:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(15, 23, 42, 0.8) !important;
}

body.fastep-page .glass-input:focus,
body.fastep-page .form-control.glass-input:focus,
body.fastep-page .form-select.glass-input:focus {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.32) !important;
  outline: none !important;
}

body.fastep-page .form-select.glass-input option {
  background-color: #0b1120;
  color: #ffffff;
}

#fs-cloud-auth-bar {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: flex !important;
  align-items: center;
  gap: 6px;
}

#fs-cloud-auth-bar.d-none {
  display: none !important;
}

#fs-cloud-guest-alert {
  border-radius: 8px;
}

#fs-stepper-prev-btn,
#fs-stepper-next-btn {
  color: #94a3b8;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#fs-stepper-prev-btn:hover:not(:disabled),
#fs-stepper-next-btn:hover:not(:disabled) {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

#fs-stepper-prev-btn:disabled,
#fs-stepper-next-btn:disabled {
  pointer-events: none;
}

.fs-subtab-btn.active {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.4) !important;
}

#fs-page-result {
  font-family: 'Outfit', sans-serif;
  color: #f8fafc !important;
  line-height: 1.75;
  font-size: 0.96rem;
}

#fs-page-ats-container {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 12px;
}

#fs-page-ats-score {
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

#fs-page-progress-bar {
  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

/* ==========================================================================
   3. LIGHT MODE (EXECUTIVE LIGHT SLATE & CRISP WHITE)
   Triggered by: html[data-theme=light] or body.theme-light
   ========================================================================== */
html[data-theme=light] body.fastep-page,
body.theme-light {
  background-color: #f8fafc !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.07), transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(99, 102, 241, 0.05), transparent 42%) !important;
  color: #1e293b !important;
}

html[data-theme=light] body.fastep-page .glow-orb.orb-1,
body.theme-light .glow-orb.orb-1 {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%) !important;
}
html[data-theme=light] body.fastep-page .glow-orb.orb-2,
body.theme-light .glow-orb.orb-2 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 70%) !important;
}

/* Header in Light Mode */
html[data-theme=light] .fastep-app-header,
body.theme-light .fastep-app-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Stepper dots in Light Mode */
html[data-theme=light] .fs-wizard-step-btn .step-circle,
body.theme-light .fs-wizard-step-btn .step-circle {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme=light] .fs-wizard-step-btn:hover .step-circle,
body.theme-light .fs-wizard-step-btn:hover .step-circle {
  border-color: #2563eb !important;
  color: #0f172a !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.25) !important;
}

html[data-theme=light] .fs-wizard-step-btn.active .step-circle,
body.theme-light .fs-wizard-step-btn.active .step-circle {
  background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

html[data-theme=light] .fs-wizard-step-btn.completed .step-circle,
body.theme-light .fs-wizard-step-btn.completed .step-circle {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

/* Cards in Light Mode */
html[data-theme=light] body.fastep-page .glass-card,
body.theme-light .glass-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme=light] body.fastep-page .glass-card:hover,
body.theme-light .glass-card:hover {
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
}

/* Typography in Light Mode */
html[data-theme=light] body.fastep-page h1,
html[data-theme=light] body.fastep-page h2,
html[data-theme=light] body.fastep-page h3,
html[data-theme=light] body.fastep-page h4,
html[data-theme=light] body.fastep-page h5,
html[data-theme=light] body.fastep-page h6,
html[data-theme=light] body.fastep-page .h1,
html[data-theme=light] body.fastep-page .h2,
html[data-theme=light] body.fastep-page .h3,
html[data-theme=light] body.fastep-page .h4,
html[data-theme=light] body.fastep-page .h5,
html[data-theme=light] body.fastep-page .h6,
html[data-theme=light] body.fastep-page .text-white,
body.theme-light .text-white,
body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4, body.theme-light h5, body.theme-light h6 {
  color: #0f172a !important;
}

html[data-theme=light] body.fastep-page .text-white-50,
body.theme-light .text-white-50 {
  color: #64748b !important;
}

html[data-theme=light] body.fastep-page .premium-text,
body.theme-light .premium-text {
  color: #334155 !important;
}

html[data-theme=light] body.fastep-page .gradient-text,
body.theme-light .gradient-text {
  background: linear-gradient(135deg, #0f172a 0%, #1e40af 55%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme=light] body.fastep-page .text-info,
body.theme-light .text-info {
  color: #0284c7 !important;
}

/* Form Inputs in Light Mode */
html[data-theme=light] body.fastep-page .glass-input,
html[data-theme=light] body.fastep-page .form-control.glass-input,
html[data-theme=light] body.fastep-page .form-select.glass-input,
body.theme-light .glass-input,
body.theme-light .form-control.glass-input,
body.theme-light .form-select.glass-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme=light] body.fastep-page .glass-input:hover,
html[data-theme=light] body.fastep-page .form-control.glass-input:hover,
html[data-theme=light] body.fastep-page .form-select.glass-input:hover,
body.theme-light .glass-input:hover,
body.theme-light .form-control.glass-input:hover,
body.theme-light .form-select.glass-input:hover {
  border-color: #94a3b8 !important;
  background: #ffffff !important;
}

html[data-theme=light] body.fastep-page .glass-input:focus,
html[data-theme=light] body.fastep-page .form-control.glass-input:focus,
html[data-theme=light] body.fastep-page .form-select.glass-input:focus,
body.theme-light .glass-input:focus,
body.theme-light .form-control.glass-input:focus,
body.theme-light .form-select.glass-input:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.22) !important;
}

html[data-theme=light] body.fastep-page .form-select.glass-input option,
body.theme-light .form-select.glass-input option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Buttons in Light Mode */
html[data-theme=light] body.fastep-page .btn-wow.btn-glass,
body.theme-light .btn-wow.btn-glass {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme=light] body.fastep-page .btn-wow.btn-glass:hover,
body.theme-light .btn-wow.btn-glass:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Badges in Light Mode */
html[data-theme=light] body.fastep-page .badge.bg-dark,
body.theme-light .badge.bg-dark {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

html[data-theme=light] body.fastep-page .badge.border-info,
body.theme-light .badge.border-info {
  background: #f0f9ff !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
  color: #0284c7 !important;
}

/* Cloud Bar in Light Mode */
html[data-theme=light] #fs-cloud-auth-bar,
body.theme-light #fs-cloud-auth-bar {
  background: rgba(241, 245, 249, 0.95) !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme=light] #fs-cloud-guest-alert,
body.theme-light #fs-cloud-guest-alert {
  background: transparent !important;
  border: none !important;
}

html[data-theme=light] #fs-stepper-prev-btn,
html[data-theme=light] #fs-stepper-next-btn,
body.theme-light #fs-stepper-prev-btn,
body.theme-light #fs-stepper-next-btn {
  color: #475569;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme=light] #fs-stepper-prev-btn:hover:not(:disabled),
html[data-theme=light] #fs-stepper-next-btn:hover:not(:disabled),
body.theme-light #fs-stepper-prev-btn:hover:not(:disabled),
body.theme-light #fs-stepper-next-btn:hover:not(:disabled) {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.12) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

/* Studio Editor & ATS in Light Mode */
html[data-theme=light] #fs-page-result,
body.theme-light #fs-page-result {
  color: #0f172a !important;
}

html[data-theme=light] .glass-panel,
body.theme-light .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme=light] #fs-page-ats-container,
body.theme-light #fs-page-ats-container {
  background: #f0f9ff !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
}

html[data-theme=light] .fs-quick-refine-btn,
body.theme-light .fs-quick-refine-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html[data-theme=light] .fs-quick-refine-btn:hover,
body.theme-light .fs-quick-refine-btn:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* Sub-tabs in Light Mode */
html[data-theme=light] .fs-subtab-btn.active,
body.theme-light .fs-subtab-btn.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* Modals & Dropdown in Light Mode */
html[data-theme=light] .modal-content,
body.theme-light .modal-content {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme=light] .dropdown-menu,
body.theme-light .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme=light] .dropdown-item,
body.theme-light .dropdown-item {
  color: #334155 !important;
}

html[data-theme=light] .dropdown-item:hover,
body.theme-light .dropdown-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html[data-theme=light] .btn-close-white,
body.theme-light .btn-close-white {
  filter: none !important;
}