/**
 * RunMe Dark Mode - Token Overrides
 * ==================================
 * This file ONLY overrides CSS custom properties for dark mode.
 * All component styles automatically adapt via token references.
 *
 * NOTE: Auto dark mode based on system preference is DISABLED.
 * Dark mode only activates when .dark-mode class is added to body.
 * Users can toggle via the dark mode button or Ctrl/Cmd+Shift+D.
 */

/* ===== MANUAL DARK MODE (Toggle) ===== */
body.dark-mode,
html.dark-mode,
:root.dark-mode {
  /* Semantic Colors - Dark */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #98989D;
  --color-text-tertiary: #636366;
  --color-text-inverse: #1C1C1E;
  --color-background: #000000;
  --color-surface: #1C1C1E;
  --color-surface-elevated: #2C2C2E;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-overlay: rgba(0, 0, 0, 0.6);

  /* Inverted Neutral Scale */
  --color-gray-50: #1C1C1E;
  --color-gray-100: #2C2C2E;
  --color-gray-200: #3A3A3C;
  --color-gray-300: #48484A;
  --color-gray-400: #636366;
  --color-gray-500: #8E8E93;
  --color-gray-600: #AEAEB2;
  --color-gray-700: #D1D1D6;
  --color-gray-800: #E5E5EA;
  --color-gray-900: #F2F2F7;

  /* Adjusted Primary for Dark (brighter) */
  --color-primary: #0A84FF;
  --color-primary-light: #5EB0FF;
  --color-primary-dark: #0066CC;
  --color-primary-bg: rgba(10, 132, 255, 0.15);

  /* Adjusted Success for Dark */
  --color-success: #30D158;
  --color-success-light: #5EE07E;
  --color-success-dark: #28A745;
  --color-success-bg: rgba(48, 209, 88, 0.15);

  /* Adjusted Danger for Dark */
  --color-danger: #FF453A;
  --color-danger-light: #FF6B61;
  --color-danger-dark: #D93025;
  --color-danger-bg: rgba(255, 69, 58, 0.15);

  /* Adjusted Warning for Dark */
  --color-warning: #FFD60A;
  --color-warning-light: #FFE24D;
  --color-warning-dark: #FFAA00;
  --color-warning-bg: rgba(255, 214, 10, 0.15);

  /* Adjusted Info for Dark */
  --color-info: #64D2FF;
  --color-info-light: #8DDFFF;
  --color-info-dark: #40C8FF;
  --color-info-bg: rgba(100, 210, 255, 0.15);

  /* Shadows - Subtle glows for dark mode */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.9), 0 12px 32px rgba(0, 0, 0, 0.7);

  /* Colored shadows adjusted for dark */
  --shadow-primary: 0 4px 14px rgba(10, 132, 255, 0.35);
  --shadow-success: 0 4px 14px rgba(48, 209, 88, 0.35);
  --shadow-danger: 0 4px 14px rgba(255, 69, 58, 0.35);
}

/* ===== GLASS EFFECT OVERRIDES ===== */
body.dark-mode .glass,
body.dark-mode .card-glass {
  background: rgba(28, 28, 30, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .navbar {
  background: rgba(28, 28, 30, 0.85);
}

/* ===== BOOTSTRAP OVERRIDES FOR DARK MODE ===== */
/* These ensure Bootstrap components respect our dark tokens */

body.dark-mode {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

body.dark-mode .bg-light {
  background-color: var(--color-gray-100) !important;
}

body.dark-mode .bg-white {
  background-color: var(--color-surface) !important;
}

body.dark-mode .text-dark {
  color: var(--color-text-primary) !important;
}

body.dark-mode .text-muted {
  color: var(--color-text-secondary) !important;
}

body.dark-mode .border {
  border-color: var(--color-border) !important;
}

body.dark-mode .border-bottom {
  border-bottom-color: var(--color-border) !important;
}

body.dark-mode .border-top {
  border-top-color: var(--color-border) !important;
}

/* Card Overrides */
body.dark-mode .card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

/* Preserve Bootstrap colored card backgrounds in dark mode */
body.dark-mode .card.bg-success {
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}

body.dark-mode .card.bg-warning {
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

body.dark-mode .card.bg-danger {
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}

body.dark-mode .card.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

body.dark-mode .card.bg-info {
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

body.dark-mode .card-header {
  background-color: var(--color-surface-elevated);
  border-bottom-color: var(--color-border);
}

body.dark-mode .card-footer {
  background-color: var(--color-surface-elevated);
  border-top-color: var(--color-border);
}

/* Form Controls */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--color-gray-100);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--color-gray-100);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

body.dark-mode .form-control::placeholder {
  color: var(--color-text-tertiary);
}

body.dark-mode .input-group-text {
  background-color: var(--color-gray-200);
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
}

body.dark-mode .form-label {
  color: var(--color-text-primary);
}

/* List Groups */
body.dark-mode .list-group-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

body.dark-mode .list-group-item:hover {
  background-color: var(--color-gray-100);
}

/* Tables */
body.dark-mode .table {
  color: var(--color-text-primary);
}

body.dark-mode .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--color-border);
}

body.dark-mode .table > thead {
  background-color: var(--color-surface-elevated);
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--color-gray-100);
}

body.dark-mode .table-hover > tbody > tr:hover > * {
  background-color: var(--color-gray-200);
}

/* Modals */
body.dark-mode .modal-content {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--color-border);
}

body.dark-mode .modal-footer {
  border-top-color: var(--color-border);
}

body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border);
}

body.dark-mode .dropdown-item {
  color: var(--color-text-primary);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--color-gray-200);
  color: var(--color-text-primary);
}

body.dark-mode .dropdown-divider {
  border-top-color: var(--color-border);
}

body.dark-mode .dropdown-header {
  color: var(--color-text-secondary);
}

/* Alerts use token backgrounds which already work */

/* Buttons - Secondary needs override */
body.dark-mode .btn-secondary {
  background-color: var(--color-gray-200);
  color: var(--color-text-primary);
}

body.dark-mode .btn-outline-secondary {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--color-gray-200);
  color: var(--color-text-primary);
}

/* Progress Bars */
body.dark-mode .progress {
  background-color: var(--color-gray-200);
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--color-background);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* Firefox scrollbar */
body.dark-mode * {
  scrollbar-color: var(--color-gray-300) var(--color-background);
}

/* ===== DARK MODE TOGGLE BUTTON ===== */
.dark-mode-toggle {
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  transition: all var(--duration-fast) var(--ease-out);
}

.dark-mode-toggle:hover {
  background-color: var(--color-gray-100);
}

.dark-mode-toggle i {
  font-size: var(--text-base);
}

/* ===== SELECTION COLOR ===== */
body.dark-mode ::selection {
  background-color: var(--color-primary);
  color: white;
}