/* ============================================================
   dark-mode.css
   All dark-mode overrides for the MyChair Manager Portal
   and Identity pages. Loaded after landing.css and the
   Tailwind CDN script so that specificity is correct.
   ============================================================ */

/* ── 1. Dark palette: CSS custom property overrides ── */
html.dark {
  /* Backgrounds */
  --bg: #0f1729;
  --bg-2: #131d33;
  --bg-3: #182440;
  --surface: rgba(22, 33, 62, 0.92);
  --surface-2: rgba(26, 38, 68, 0.96);

  /* Borders & lines */
  --line: rgba(87, 184, 232, 0.14);
  --line-soft: rgba(87, 184, 232, 0.08);

  /* Text */
  --text: #e8edf4;
  --muted: #8fa3b8;
  --muted-2: #6b8299;

  /* Brand blues (adjusted for dark backgrounds) */
  --blue: #4a9ede;
  --blue-2: #5eaee6;
  --blue-3: #3b8fd0;
  --cyan: #6cc4ec;

  /* Semantic colours */
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.14);
  --gold: #f0b84a;
  --gold-soft: rgba(240, 184, 74, 0.14);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);

  /* Shadows */
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);

  /* Page gradients */
  --page-grad-1: rgba(74, 158, 222, 0.06);
  --page-grad-2: rgba(108, 196, 236, 0.04);
  --page-start: #0f1729;
  --page-end: #0f1729;
  --grid-line: rgba(87, 184, 232, 0.03);

  /* Sticky header / glass */
  --sticky-bg: rgba(15, 23, 41, 0.85);
  --sticky-line: rgba(87, 184, 232, 0.10);
  --glass-top: rgba(22, 33, 62, 0.96);
  --glass-bottom: rgba(18, 28, 52, 0.94);
  --surface-top: rgba(22, 33, 62, 0.96);
  --surface-bottom: rgba(18, 28, 52, 0.94);
  --surface-soft-top: rgba(74, 158, 222, 0.10);
  --surface-soft-bottom: rgba(74, 158, 222, 0.04);

  /* Hero / landing */
  --hero-panel-top: rgba(22, 33, 62, 0.96);
  --hero-panel-bottom: rgba(18, 28, 52, 0.94);
  --hero-chip-text: #e8edf4;
  --nav-text: #8fa3b8;
  --nav-hover: #e8edf4;
  --primary-btn-text: #ffffff;
  --secondary-btn-text: #e8edf4;

  /* Identity-specific */
  --blue-dark: #5eaee6;
  --cyan-soft: rgba(108, 196, 236, 0.14);

  color-scheme: dark;
}

/* ── 2. Tailwind utility class overrides ── */
html.dark .bg-slate-50   { background-color: #0f1729 !important; }
html.dark .bg-white       { background-color: #16213e !important; }
html.dark .text-slate-900 { color: #e8edf4 !important; }
html.dark .text-slate-950 { color: #f1f5f9 !important; }
html.dark .text-slate-700 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #8fa3b8 !important; }
html.dark .text-slate-600 { color: #8fa3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }
html.dark .text-sky-900   { color: #7dd3fc !important; }
html.dark .text-sky-700   { color: #7dd3fc !important; }
html.dark .border-sky-200 { border-color: rgba(87, 184, 232, 0.18) !important; }
html.dark .border-sky-100 { border-color: rgba(87, 184, 232, 0.10) !important; }
html.dark .bg-white\/60   { background-color: rgba(22, 33, 62, 0.60) !important; }
html.dark .hover\:bg-sky-50:hover { background-color: rgba(74, 158, 222, 0.10) !important; }
html.dark .hover\:text-slate-950:hover { color: #f1f5f9 !important; }
html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important; }

/* ── 3. Identity page dark overrides ── */
html.dark .identity-topbar {
  background: linear-gradient(180deg, #0d1b2a 0%, #132238 100%);
}

html.dark .card-badge {
  background: rgba(22, 33, 62, 0.8);
  border-color: rgba(87, 184, 232, 0.18);
}

html.dark .field label {
  color: #c0cdd8;
}

html.dark .field input {
  background: rgba(22, 33, 62, 0.9);
  border-color: rgba(87, 184, 232, 0.14);
  color: var(--text);
}

html.dark .field input:focus {
  border-color: rgba(74, 158, 222, 0.42);
  box-shadow: 0 0 0 4px rgba(74, 158, 222, 0.12);
  background: rgba(26, 38, 68, 1);
}

html.dark .btn {
  background: linear-gradient(180deg, #3b8fd0 0%, #2a7cc0 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.30);
}

/* ── 4. Smooth transition (added by JS during toggle, never on page load) ── */
html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
  transition: background-color 250ms ease,
              color 250ms ease,
              border-color 250ms ease,
              box-shadow 250ms ease !important;
}

/* ── 5. Disable transition for users who prefer reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html.dark-transition,
  html.dark-transition *,
  html.dark-transition *::before,
  html.dark-transition *::after {
    transition: none !important;
  }
}