/* ==============================================================================
   Obsidian Labs CTF 2026 — High-Contrast Cybersecurity Dark Theme
   Modular, non-destructive dark stylesheet scoped under html.dark
   ============================================================================== */

html.dark {
  color-scheme: dark;
  --bg-canvas: #090d16;
  --bg-surface: #0f172a;
  --bg-surface-elevated: #131b2e;
  --border-subtle: #1e293b;
  --border-strong: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
}

/* 1. Global Canvas & Typography */
html.dark,
html.dark body {
  background-color: #090d16 !important;
  color: #f1f5f9 !important;
}

html.dark body {
  selection-background-color: #f59e0b;
  selection-color: #090d16;
}

html.dark ::selection {
  background: #f59e0b !important;
  color: #090d16 !important;
}

/* 2. Scrollbars */
html.dark ::-webkit-scrollbar-track {
  background: #090d16 !important;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155 !important;
  border-radius: 3px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569 !important;
}

/* 3. Global Command Header */
html.dark header {
  background-color: rgba(11, 15, 25, 0.94) !important;
  border-bottom-color: #1e293b !important;
}

html.dark header .text-slate-900,
html.dark header span.text-slate-900 {
  color: #f8fafc !important;
}

html.dark header .text-slate-500,
html.dark header .text-slate-600 {
  color: #94a3b8 !important;
}

html.dark header .border-slate-200,
html.dark header .border-slate-300 {
  border-color: #1e293b !important;
}

html.dark nav button {
  color: #94a3b8 !important;
}
html.dark nav button:hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}
html.dark nav button.bg-slate-100,
html.dark nav button[class*="bg-slate-100"] {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* Header Buttons */
html.dark #btn-header-login {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark #btn-header-login:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

html.dark #btn-header-register {
  background-color: #f8fafc !important;
  color: #090d16 !important;
  font-weight: 700 !important;
}
html.dark #btn-header-register:hover {
  background-color: #e2e8f0 !important;
}

html.dark #auth-user-menu > div.bg-slate-100 {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
html.dark #user-avatar-initial {
  background-color: #334155 !important;
  color: #f8fafc !important;
}
html.dark #user-display-name {
  color: #f8fafc !important;
}
html.dark #auth-user-menu button {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark #auth-user-menu button:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Theme Toggle Button */
#theme-toggle-btn {
  cursor: pointer;
}
html.dark #theme-toggle-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #fbbf24 !important;
}
html.dark #theme-toggle-btn:hover {
  background-color: #334155 !important;
  color: #fde68a !important;
}

/* Mobile Nav Drawer */
html.dark #mobile-nav-drawer {
  background-color: #0f172a !important;
  border-top-color: #1e293b !important;
  color: #cbd5e1 !important;
}
html.dark #mobile-nav-drawer button:hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}
html.dark #mobile-nav-drawer .border-slate-200 {
  border-color: #1e293b !important;
}

/* 4. Background Utilities & Panels */
html.dark .bg-white {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark .bg-slate-50 {
  background-color: #0b0f19 !important;
}

html.dark .bg-slate-100 {
  background-color: #172033 !important;
}

html.dark .bg-slate-100\/70 {
  background-color: rgba(23, 32, 51, 0.7) !important;
}

html.dark .bg-slate-50\/70 {
  background-color: rgba(19, 27, 46, 0.7) !important;
}

html.dark .bg-slate-50\/40 {
  background-color: rgba(19, 27, 46, 0.4) !important;
}

html.dark .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(51, 65, 85, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(51, 65, 85, 0.25) 1px, transparent 1px) !important;
}

/* 5. Borders */
html.dark .border-slate-100 {
  border-color: #172033 !important;
}
html.dark .border-slate-200 {
  border-color: #1e293b !important;
}
html.dark .border-slate-300 {
  border-color: #334155 !important;
}

/* 6. Text Utilities */
html.dark .text-slate-900 {
  color: #f8fafc !important;
}
html.dark .text-slate-800 {
  color: #f1f5f9 !important;
}
html.dark .text-slate-700 {
  color: #cbd5e1 !important;
}
html.dark .text-slate-600 {
  color: #94a3b8 !important;
}
html.dark .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark .text-slate-400 {
  color: #64748b !important;
}

/* 7. Forms, Inputs, Selects, Textareas */
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
  background-color: #0b0f19 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1px #f59e0b !important;
  outline: none !important;
}

/* 8. Challenge Arena & Cards */
html.dark #arena-stats-counter {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark #arena-challenges-grid > div {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark #arena-challenges-grid > div:hover {
  border-color: #475569 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

html.dark #arena-challenges-grid .border-emerald-300 {
  border-color: rgba(16, 185, 129, 0.5) !important;
}
html.dark #arena-challenges-grid .bg-emerald-50\/20 {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

/* Category Pills Bar */
html.dark #arena-category-pills button {
  background-color: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
}
html.dark #arena-category-pills button:hover {
  background-color: #334155;
  color: #f8fafc;
}
html.dark #arena-category-pills button.bg-slate-900,
html.dark #arena-category-pills button[class*="bg-slate-900"] {
  background-color: #f59e0b !important;
  color: #090d16 !important;
  border-color: #f59e0b !important;
  font-weight: 700 !important;
}

/* 9. Difficulty Badges */
html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
  color: #34d399 !important;
}
html.dark .border-emerald-200 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 {
  color: #fbbf24 !important;
}
html.dark .border-amber-200,
html.dark .border-amber-200\/80 {
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .bg-rose-50,
html.dark .bg-red-50 {
  background-color: rgba(244, 63, 94, 0.15) !important;
}
html.dark .text-rose-700,
html.dark .text-red-700 {
  color: #fb7185 !important;
}
html.dark .border-rose-200,
html.dark .border-red-200 {
  border-color: rgba(244, 63, 94, 0.3) !important;
}

/* 10. Modals */
html.dark .modal-backdrop {
  background-color: rgba(2, 6, 23, 0.8) !important;
}

html.dark #modal-challenge > div,
html.dark #modal-auth > div,
html.dark #modal-admin-challenge > div {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
}

html.dark #m-chal-desc {
  background-color: #0b0f19 !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}

html.dark #m-chal-submit-btn {
  background-color: #f59e0b !important;
  color: #090d16 !important;
  font-weight: 700 !important;
}
html.dark #m-chal-submit-btn:hover {
  background-color: #d97706 !important;
}

html.dark #m-chal-unauth-banner {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}

/* Auth Modal Tabs */
html.dark #modal-auth .bg-slate-100 {
  background-color: #0b0f19 !important;
  border-color: #1e293b !important;
}
html.dark #auth-tab-login.bg-white,
html.dark #auth-tab-register.bg-white {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

html.dark #form-login button[type="submit"],
html.dark #form-register button[type="submit"] {
  background-color: #f59e0b !important;
  color: #090d16 !important;
  font-weight: 700 !important;
}
html.dark #form-login button[type="submit"]:hover,
html.dark #form-register button[type="submit"]:hover {
  background-color: #d97706 !important;
}

/* 11. Scoreboard & Leaderboard */
html.dark #my-rank-banner {
  background-color: #131b2e !important;
  border-color: #334155 !important;
}

html.dark table thead tr {
  background-color: #131b2e !important;
  border-bottom-color: #1e293b !important;
}
html.dark table thead th {
  color: #94a3b8 !important;
}

html.dark table tbody tr {
  border-bottom-color: #1e293b !important;
}
html.dark table tbody tr:hover {
  background-color: #172033 !important;
}
html.dark .divide-slate-100 > * + * {
  border-color: #1e293b !important;
}

/* 12. Dashboard & KPIs */
html.dark #dash-score,
html.dark #dash-solves,
html.dark #dash-cert-status {
  color: #f8fafc !important;
}
html.dark #dash-rank {
  color: #fbbf24 !important;
}

/* 13. Admin Management Console */
html.dark #tab-btn-importer.border-slate-900,
html.dark #tab-btn-chals.border-slate-900,
html.dark #tab-btn-users.border-slate-900,
html.dark #tab-btn-certs.border-slate-900,
html.dark #tab-btn-audit.border-slate-900 {
  border-color: #f59e0b !important;
  color: #f8fafc !important;
}

html.dark #import-json-area {
  background-color: #0b0f19 !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
}

html.dark #admin-cert-results {
  background-color: #0b0f19 !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}

/* 14. Event Notice Banner */
html.dark #event-notice-banner {
  background-color: rgba(120, 53, 15, 0.25) !important;
  border-bottom-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}

/* 15. Footer */
html.dark footer {
  background-color: #090d16 !important;
  border-top-color: #1e293b !important;
  color: #64748b !important;
}

/* 16. Code Blocks & Badges */
html.dark code {
  color: #e2e8f0;
}
html.dark .bg-slate-200\/70 {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}