/**
 * main.css - HackSimulator.nl
 * Global styles and CSS Variables
 */

/* ==================== CSS Variables ==================== */
:root {
  /* Colors - Cyberpunk Pure Black/Neon Green Terminal Theme */
  /* Pure Black - Background Layers */
  --color-bg: #000000;              /* Body & Terminal - pure black cyberpunk */
  --color-bg-terminal: #000000;     /* Same as body - unified black */
  --color-bg-modal: #0a0a0a;        /* Modals/overlays - subtle contrast with pure black */
  --color-bg-hover: #1a1a1a;        /* Hover states - dark grey */

  /* Color Hierarchy - Neon Green Terminal */
  --color-prompt: #00ff88;          /* Neon green - terminal prompt (retro authentic) */
  --color-input: #00ff88;           /* Neon green - user typed commands (consistent) */
  --color-text: #ccffcc;            /* Light mint green - primary output text (readable) */
  --color-text-dim: #669966;        /* Dimmed green - hints/secondary info */

  /* Semantic Colors - Cyberpunk Neon Palette */
  --color-error: #ff0055;           /* Bright magenta - errors stand out */
  --color-warning: #ffaa00;         /* Neon orange - better visibility than yellow */
  --color-info: #00ffff;            /* Cyan - tips, hints (distinct from terminal green) */
  --color-success: #00ff88;         /* Neon green - positive feedback (consistent) */

  /* UI Elements - Neon Green Primary + Cyan Secondary */
  --color-ui-primary: #00ff88;      /* Softer neon green - primary buttons (consistent met terminal prompt) */
  --color-ui-hover: #33ffaa;        /* Brighter neon green - hover state (optimale feedback) */
  --color-ui-secondary: #00ffff;    /* Cyan - secondary elements */
  --color-border: #333333;          /* Dark grey - subtle borders/dividers */
  --color-link: #00ffff;            /* Cyan - links (distinct from terminal output) */
  --color-modal-text: #ffffff;      /* White - readable text for long legal content */

  /* Extended UI Colors - Additional variables for complete consistency */
  --color-text-muted: #888888;        /* Dimmed UI text (modal close button) */
  --color-text-light: #cccccc;        /* Modal body text & feedback elements */
  --color-star-inactive: #555555;     /* Unselected rating stars */
  --color-border-input: #444444;      /* Form input borders */
  --color-link-hover: #33ffff;        /* Link hover states */
  --color-bg-modal-content: #2d2d2d;  /* Modal content background */
  --color-modal-header: #ffffff;      /* Modal header text - white for maximum contrast & hierarchy */

  /* Typography - Dual Font System */
  --font-terminal: 'Courier New', 'Courier', monospace;  /* Primary: Terminal/UI */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;  /* Secondary: Long-form text */
  --font-size-base: 18px;
  --font-size-mobile: 16px;
  --line-height: 1.5;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Layout */
  --terminal-padding: 20px;
  --terminal-max-width: 1200px;
  --mobile-breakpoint: 768px;

  /* Border Radius - Design System Standard */
  --border-radius-button: 4px;      /* Standard buttons, inputs, dropdowns */
  --border-radius-small: 2px;       /* Small UI chips, toggles, bars */
  --border-radius-modal: 8px;       /* Large containers, modals */
  --border-radius-none: 0;          /* Explicit opt-out (brutalist elements) */
  --border-radius-circle: 50%;      /* Circular elements */

  /* Animations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;

  /* Z-index layers */
  --z-terminal: 1;
  --z-footer: 10;
  --z-navbar: 50;
  --z-feedback: 100;
  --z-modal: 1000;
  --z-cookie: 2000;

  /* Vignette Background - Dark mode (default for :root) */
  --vignette-center: rgba(35, 35, 35, 1);     /* Dark grey center */
  --vignette-mid1: rgba(22, 22, 22, 1);       /* Mid-dark grey */
  --vignette-mid2: rgba(11, 11, 11, 1);       /* Very dark grey */
  --vignette-edge: rgba(0, 0, 0, 1);          /* Pure black edges */

  /* Navbar Colors - Dark mode defaults */
  --color-bg-navbar: #000000;           /* Black navbar background */
  --color-navbar-link: #cccccc;         /* Light grey navigation links */
  --color-navbar-link-hover: #ffffff;   /* White hover state */
  --color-navbar-action: #ffffff;       /* White action icons (search, github, theme toggle) */
  --color-navbar-dropdown-icon: #00ffff; /* Cyan dropdown icons (+/×) - distinct from link text */

  /* Footer Colors - Dark mode defaults (matches navbar chrome pattern) */
  --color-bg-footer: #000000;           /* Black footer background */
  --color-footer-text: #cccccc;         /* Light grey footer text (readable on dark footer) */
  --color-footer-link: #00ffff;         /* Cyan footer links (same as --color-link) */
  --color-footer-link-hover: #33ffff;   /* Lighter cyan hover (same as --color-link-hover) */

  /* Theme Toggle Colors */
  --color-toggle-text: #cccccc;         /* Light grey toggle text (readable on dark navbar) */
  --color-toggle-hover: rgba(255, 255, 255, 0.1);  /* Subtle white overlay for hover highlight */

  /* Modal Overlay */
  --color-modal-overlay: rgba(0, 0, 0, 0.95);  /* Nearly opaque black overlay */
}

/* ==================== Light Mode Theme ==================== */
[data-theme="light"] {
  /* Light Mode - Subtle grey palette (#1a1a1a → #e5e5e5) */

  /* Background Layers - Light variant */
  --color-bg: #f8f8f8;              /* Off-white background (professional standard) */
  --color-bg-terminal: #ffffff;     /* Pure white terminal - pops from background */
  --color-bg-modal: #ffffff;        /* White modal backgrounds - clean aesthetic */
  --color-bg-hover: #ebebeb;        /* Very light hover states */

  /* Vignette Background - Light mode variant (clean white fade) */
  --vignette-center: rgba(255, 255, 255, 1);   /* Pure white center - clean aesthetic */
  --vignette-mid1: rgba(250, 250, 250, 1);     /* Very light grey */
  --vignette-mid2: rgba(245, 245, 245, 1);     /* Light grey */
  --vignette-edge: rgba(240, 240, 240, 1);     /* Off-white edges - subtle fade */

  /* Text Colors - Dark variant for readability */
  --color-prompt: #00dd66;          /* Vibrant neon green - moderate saturation boost */
  --color-input: #00dd66;           /* Consistent with prompt */
  --color-text: #0a0a0a;            /* Very dark grey - maximum contrast */
  --color-text-dim: #444444;        /* Dimmed grey for secondary info */

  /* Semantic Colors - Darker variants for light backgrounds */
  --color-error: #d60047;           /* Darker magenta for contrast */
  --color-warning: #dd8800;         /* Darker orange for contrast */
  --color-info: #0969da;            /* GitHub blue - proven readability on light backgrounds */
  --color-success: #00dd66;         /* Vibrant green - matches prompt */

  /* UI Elements - Darker primary + contrast-optimized secondary */
  --color-ui-primary: #00dd66;      /* Vibrant neon green - matches prompt/success */
  --color-ui-hover: #00ee88;        /* Brighter green - consistent saturation boost */
  --color-ui-secondary: #0969da;    /* GitHub blue - matches info/links (context-aware theming) */
  --color-border: #e0e0e0;          /* Darker grey borders - better visibility */
  --color-link: #0969da;            /* GitHub blue - professional readability on light backgrounds */
  --color-modal-text: #0a0a0a;      /* Very dark text - maximum contrast */

  /* Extended UI Colors - Light mode variants */
  --color-text-muted: #666666;      /* Darker muted text */
  --color-text-light: #2a2a2a;      /* Very dark grey - better contrast */
  --color-star-inactive: #999999;   /* Much darker grey - visibility fix! */
  --color-border-input: #d0d0d0;    /* Darker grey - better visibility */
  --color-link-hover: #0550ae;      /* Darker GitHub blue for hover (increased contrast) */
  --color-bg-modal-content: #fafafa;  /* Off-white modal content */
  --color-modal-header: #0a0a0a;    /* Very dark text - maximum contrast */

  /* Navbar Colors - STAYS DARK in light mode (VS Code/GitHub Desktop pattern) */
  --color-bg-navbar: #1a1a1a;           /* Dark navbar background (professional developer tool aesthetic) */
  --color-navbar-link: #cccccc;         /* Light grey links (same as dark mode) */
  --color-navbar-link-hover: #ffffff;   /* White hover (same as dark mode) */
  --color-navbar-action: #ffffff;       /* White icons (same as dark mode) */
  --color-navbar-dropdown-icon: #00ffff; /* Cyan dropdown icons - same as dark mode (navbar stays dark) */

  /* Footer Colors - STAYS DARK in light mode (matches navbar frame pattern) */
  --color-bg-footer: #1a1a1a;           /* Dark footer background (same as navbar) */
  --color-footer-text: #cccccc;         /* STAYS LIGHT (footer is dark in light mode!) */
  --color-footer-link: #00ffff;         /* Cyan links (lighter for contrast on dark bg) */
  --color-footer-link-hover: #33ffff;   /* Lighter cyan hover (good contrast on dark bg) */

  /* Theme Toggle Colors - STAYS LIGHT in light mode (navbar is dark) */
  --color-toggle-text: #cccccc;         /* STAYS LIGHT (navbar is dark in light mode!) */
  --color-toggle-hover: rgba(255, 255, 255, 0.15);  /* Slightly brighter hover for visibility on #1a1a1a navbar */

  /* Modal Overlay - Dark dimming in light mode (Bootstrap/Material UI pattern) */
  --color-modal-overlay: rgba(0, 0, 0, 0.5);  /* Semi-transparent dark overlay for focus effect */
}

/* ==================== Reset & Base ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  height: 100%;
}

body {
  font-family: var(--font-terminal);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==================== Typography ==================== */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

a:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

strong {
  font-weight: var(--font-weight-bold);
}

/* ==================== Buttons ==================== */
button {
  font-family: var(--font-terminal);
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

button:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-ui-primary);
  color: #000000;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--color-ui-primary);
  border-radius: var(--border-radius-button);
}

.btn-primary:hover {
  background-color: var(--color-ui-hover);
  border-color: var(--color-ui-hover);
  color: #000000;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-ui-secondary);
  border: 2px solid var(--color-ui-secondary);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  border-radius: var(--border-radius-button);
}

.btn-secondary:hover {
  background-color: var(--color-ui-secondary);
  border-color: var(--color-ui-secondary);
  color: #000000;
}

.btn-small {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 16px;
  background-color: var(--color-ui-primary);
  color: #000000;
  border: 1px solid var(--color-ui-primary);
  border-radius: var(--border-radius-button);
}

.btn-small:hover {
  background-color: var(--color-ui-hover);
  border-color: var(--color-ui-hover);
  color: #000000;
}

/* ==================== Modals ==================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-modal-overlay);
  z-index: var(--z-modal);
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--color-bg-modal-content);
  border: none;
  border-radius: var(--border-radius-modal);
  padding: 40px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: none;
}

.modal-content h2 {
  color: var(--color-modal-header);
  margin-bottom: var(--spacing-lg);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.modal-content p {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
}

.modal-content ul {
  color: var(--color-text-light);
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.modal-content li {
  margin-bottom: var(--spacing-sm);
}

.modal-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-md);
  background: none;
  color: var(--color-text-muted);
  font-size: 2rem;
  line-height: 1;
  padding: 0;
}

.modal-close:hover {
  color: var(--color-text-light);
}

/* ==================== Cookie Consent Banner ==================== */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-modal);
  border-top: 2px solid var(--color-border);
  padding: var(--spacing-md);
  z-index: var(--z-cookie);
}

.cookie-banner.active {
  display: block;
}

.cookie-content {
  max-width: var(--terminal-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.cookie-content p {
  margin: 0;
}

.cookie-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

/* ==================== Feedback Widget ==================== */
#feedback-widget {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: var(--z-feedback);
}

.floating-btn {
  /* Dimensions - optimale balans voor leesbaarheid */
  width: 100px;
  height: 48px;
  padding: 0 10px;  /* Critical fix: breathing room voor tekst */

  /* Border styling */
  border-radius: var(--border-radius-button);
  border: 3px solid #666666;  /* Upgraded van var(--color-border) voor betere visibility */

  /* Colors */
  background-color: var(--color-ui-primary);
  color: #000000;

  /* Typography - geoptimaliseerd voor beschikbare ruimte */
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 48px;  /* Perfect vertical centering */

  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;  /* Smooth all properties voor hover effects */
}

.floating-btn:hover {
  /* Multi-layer brutalist hover feedback */
  background-color: var(--color-ui-hover);
  border-color: var(--color-ui-hover);
  transform: translateY(-2px);  /* Subtle lift - geen scale (te playful) */
  box-shadow: 0 4px 0 var(--color-ui-primary);  /* Brutalist solid shadow */
}

.floating-btn:focus {
  outline: 2px solid var(--color-ui-primary);
  outline-offset: 4px;  /* Verhoogd voor duidelijkere focus indicator */
}

/* Feedback Modal - Balanced spacing */
#feedback-modal .modal-content p {
  margin-bottom: 4px; /* Reduced spacing for tighter layout */
  font-size: 20px; /* Significantly larger question text */
  line-height: 1.3; /* Compact line height for less visual space */
}

/* Rating Stars */
.rating-stars {
  display: flex;
  gap: var(--spacing-sm);
  margin: 12px 0; /* Increased spacing for balanced visual weight */
}

.star {
  background: none;
  font-size: 4.5rem; /* Extra large stars */
  padding: var(--spacing-xs);
  color: var(--color-star-inactive); /* Medium grey for better visibility on dark background */
  transition: all var(--transition-fast);
  text-shadow: none;
}

.star:hover,
.star.selected,
.star.active {
  color: var(--color-ui-primary); /* Softer neon green (#00ff88) - consistent met terminal prompt */
  text-shadow: 0 0 8px var(--color-ui-primary); /* Subtle glow effect */
}

#feedback-comment {
  width: 100%;
  background-color: var(--color-bg-hover);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-input);
  padding: 12px;
  font-family: var(--font-terminal);
  font-size: 17px;
  resize: vertical;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-button);
}

#feedback-comment:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* Feedback error message - Reserved space pattern (zero layout shift) */
.feedback-error {
  background: rgba(255, 0, 85, 0.1);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 12px;
  margin: 12px 0;
  border-radius: var(--border-radius-button);
  font-size: 15px;
  line-height: 1.4;
  min-height: 48px; /* Fixed height prevents layout shift */

  /* Default hidden state - accessibility-friendly (not display: none) */
  opacity: 0;
  visibility: hidden;

  /* Smooth transitions */
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

/* Visible state - triggered by JavaScript */
.feedback-error.visible {
  opacity: 1;
  visibility: visible;
}

/* Feedback submit button - full-width modern style */
#feedback-submit {
  background-color: var(--color-ui-primary);
  border-color: var(--color-ui-primary);
  color: #000000;
  width: 100%;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: var(--border-radius-button);
}

#feedback-submit:hover {
  background-color: var(--color-ui-hover);
  border-color: var(--color-ui-hover);
  color: #000000;
  transform: scale(1.02);
}

/* ==================== Footer ==================== */
footer {
  position: static;
  background-color: var(--color-bg-footer);
  color: var(--color-footer-text);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 16px;
  text-align: center;
  margin-top: var(--spacing-lg);
}

.footer-content {
  max-width: var(--terminal-max-width);
  margin: 0 auto;
}

footer nav {
  margin-top: var(--spacing-xs);
}

footer a {
  color: var(--color-footer-link);
  text-decoration: none;
  padding: 0 var(--spacing-sm);
}

footer a:hover {
  color: var(--color-footer-link-hover);
}

/* ==================== Skip Link (Accessibility) ==================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: #1a1a1a;
  color: #cccccc;
  border: 1px solid #333333;
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ==================== Navigation Bar ==================== */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-navbar);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
  z-index: var(--z-navbar);
  height: 60px;
  display: flex;
  align-items: center;
}

/* Navbar Content Wrapper */
.navbar-content {
  max-width: var(--terminal-max-width);
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Brand/Logo */
.navbar-brand {
  font-family: var(--font-terminal);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-ui-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.navbar-brand:hover {
  color: var(--color-ui-hover);
  opacity: 1;
}

/* Navbar Menu Container (Links + Actions) */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Navigation Links */
.navbar-links {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  margin: 0;
  position: relative;
}

.navbar-links a {
  color: var(--color-navbar-link);
  font-family: var(--font-terminal);
  font-size: var(--font-size-base);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-fast);
  position: relative;
  display: block;
  font-weight: 400;
}

.navbar-links a:hover {
  color: var(--color-navbar-link-hover);
  font-weight: 700;
  opacity: 1;
}

/* Navbar Dropdown */
.navbar-dropdown {
  position: relative;
}

.dropdown-trigger {
  cursor: pointer;
}

/* Dropdown Icon (+/× animation) */
.dropdown-icon {
  color: var(--color-navbar-dropdown-icon);
  display: inline-block;
  transition: transform var(--transition-normal);
  margin-left: 4px;
}

.navbar-dropdown.active .dropdown-icon {
  transform: rotate(45deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #0a0a0a;
  border-radius: var(--border-radius-button);
  list-style: none;
  margin: 0;
  padding: var(--spacing-md) 0;
  min-width: 160px;
  z-index: 1001;
  animation: fadeIn 0.2s ease-out;
}

.navbar-dropdown.active .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  color: #cccccc;
  text-decoration: none;
  font-weight: 400;
  transition: all var(--transition-fast);
}

.dropdown-menu a:hover {
  background-color: #1a1a1a;
  color: #ffffff;
  font-weight: 700;
  padding-left: calc(var(--spacing-lg) + 2px);
}

/* Navbar Actions (Icons: Search, GitHub, Theme Toggle) */
.navbar-actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.navbar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navbar-action);
  padding: var(--spacing-sm);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
}

.navbar-action:hover {
  color: var(--color-navbar-action);
  transform: translateY(-2px);
  opacity: 1;
}

.navbar-action svg {
  display: block;
}

/* Terminal Bracket Switch - Theme Toggle */
.theme-toggle {
  display: flex !important;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-toggle-text);
  cursor: pointer;
  font-family: var(--font-terminal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
}

.theme-toggle:hover {
  transform: none;
  opacity: 0.8;
}

.theme-toggle:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
  border-radius: var(--border-radius-button);
}

/* Toggle Option (DARK/LIGHT labels) */
.toggle-option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--border-radius-small);
  transition: all var(--transition-normal);
  user-select: none;
  white-space: nowrap;
}

.toggle-option:hover {
  background-color: var(--color-toggle-hover);
}

/* Toggle Indicator - Filled block for active theme */
.toggle-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ui-primary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

/* Active theme shows filled block */
[data-theme="dark"] .toggle-option[data-theme="dark"] .toggle-indicator,
[data-theme="light"] .toggle-option[data-theme="light"] .toggle-indicator {
  opacity: 1;
}

/* Inactive theme hides indicator */
[data-theme="dark"] .toggle-option[data-theme="light"] .toggle-indicator,
[data-theme="light"] .toggle-option[data-theme="dark"] .toggle-indicator {
  opacity: 0;
}

/* Both options are always clickable - enables switching between them */
.toggle-option {
  cursor: pointer;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .toggle-option,
  .toggle-indicator {
    transition: none;
  }
}

/* Hamburger Toggle (Hidden on Desktop) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

.navbar-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-ui-primary);
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-small);
}

.navbar-toggle:hover span {
  background-color: var(--color-ui-hover);
}

/* Hamburger → X Animation */
.navbar-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(10px);
}

.navbar-toggle.active span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px);
}

/* ==================== Utility Classes ==================== */
.error-text {
  color: var(--color-error);
}

.warning-text {
  color: var(--color-warning);
}

.info-text {
  color: var(--color-info);
}

.success-text {
  color: var(--color-success);
}

.dim-text {
  color: var(--color-text-dim);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}