/**
 * dark.css - Dark Theme CSS
 * 
 * Contains all dark theme specific styles (converted from .dark selectors).
 * These styles override variables and properties to define the dark color scheme.
 * 
 * This file is loaded when dark theme is active.
 */

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME CSS VARIABLES
   ──────────────────────────────────────────────────────────────────────────── */

.dark {
    --bg-body: var(--c-slate-900);
    --text-body: var(--c-slate-100);
    --bg-header: var(--c-slate-800);
    --border-color: var(--c-slate-700);
    --text-muted: var(--c-slate-400);
    --text-link: var(--c-slate-400);
    --text-link-hover: var(--c-slate-200);
    
    --bg-card: var(--c-slate-800);
    --border-card: var(--c-slate-700);
    
    --bg-input: var(--c-slate-800);
    --border-input: var(--c-slate-600);
    
    --bg-sidebar: var(--c-slate-900);
    --border-sidebar: var(--c-slate-700);
    
    --prose-headings: #ffffff;
    --prose-text: var(--c-slate-200);
    --prose-code-bg: var(--c-slate-700);
    --prose-code-text: #f43f5e;
    --prose-table-head-bg: var(--c-slate-700);
    --prose-table-head-text: var(--c-slate-100);
    --prose-table-head-border: var(--c-slate-600);
    
    /* Code block colors (dark theme) */
    --codeblock-bg: var(--c-slate-800);
    --codeblock-text: #e2e8f0;
    --codeblock-border: var(--c-slate-700);
    --codeblock-border-left: #60a5fa;
    --inline-code-bg: rgba(229, 62, 142, 0.15);
    --inline-code-text: #f87171;
    --inline-code-border: rgba(248, 113, 113, 0.3);

    /* Editor page styles (dark theme overrides) */
    --editor-kbd-bg: var(--c-slate-700);
    --editor-kbd-border: var(--c-slate-600);
    --editor-metadata-bg: var(--c-slate-800);
    --editor-metadata-border: var(--c-slate-700);
    --editor-metadata-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --editor-btn-secondary-bg: var(--c-slate-700);
    --editor-btn-secondary-text: var(--c-slate-100);
    --editor-btn-secondary-hover: var(--c-slate-600);
    --editor-btn-edit-bg: rgba(59, 130, 246, 0.2);
    --editor-btn-edit-text: var(--c-blue-400);
    --editor-btn-edit-border: var(--c-blue-700);
    --editor-btn-edit-hover: rgba(59, 130, 246, 0.3);
    --editor-btn-remove-bg: rgba(220, 38, 38, 0.2);
    --editor-btn-remove-text: #fca5a5;
    --editor-btn-remove-border: #7f1d1d;
    --editor-btn-remove-hover: rgba(220, 38, 38, 0.3);
    --editor-btn-copy-bg: #10b981;
    --editor-btn-copy-text: #ffffff;
    --editor-btn-copy-hover: #059669;
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME SYNTAX HIGHLIGHTING
   ──────────────────────────────────────────────────────────────────────────── */

.dark .hl-comment { color: #6a7282; font-style: italic; }
.dark .hl-string { color: #98c379; }
.dark .hl-keyword { color: #c678dd; font-weight: bold; }
.dark .hl-bash-var { color: #e06c75; }
.dark .hl-flag { color: #d19a66; }
.dark .hl-number { color: #d19a66; }
.dark .hl-punctuation { color: #abb2bf; }
.dark .hl-json-key { color: #61afef; font-weight: 500; }
.dark .hl-yaml-key { color: #61afef; font-weight: 500; }
.dark .hl-yaml-anchor { color: #c678dd; }
.dark .hl-var { color: #c678dd; font-weight: bold; }
.dark .hl-filled { font-weight: bold; color: inherit; }
.dark .hl-operator { color: #56b6c2; }
.dark .hl-function { color: #e5c07b; font-weight: 600; }
.dark .hl-property { color: #61afef; }
.dark .hl-decorator { color: #d19a66; }
.dark .hl-macro { color: #e06c75; font-weight: 600; }
.dark .hl-type { color: #7dcfff; }
.dark .hl-lifetime { color: #c678dd; font-style: italic; }

/* Dark theme markdown syntax highlighting */
.dark .hl-md-h1 { color: #e879f9; font-weight: bold; }
.dark .hl-md-h2 { color: #60a5fa; font-weight: bold; }
.dark .hl-md-h3 { color: #34d399; font-weight: bold; }
.dark .hl-md-h4 { color: #fbbf24; font-weight: bold; }
.dark .hl-md-h5 { color: #fb923c; font-weight: bold; }
.dark .hl-md-h6 { color: #94a3b8; font-weight: bold; }
.dark .hl-md-heading-1 { color: #f0abfc; }
.dark .hl-md-heading-2 { color: #93c5fd; }
.dark .hl-md-heading-3 { color: #6ee7b7; }
.dark .hl-md-heading-4 { color: #fde68a; }
.dark .hl-md-heading-5 { color: #fdba74; }
.dark .hl-md-heading-6 { color: #cbd5e1; }
.dark .hl-md-checkbox { font-weight: bold; vertical-align: middle; }
.dark .hl-md-checkbox-unchecked { color: #d1d5db; }
.dark .hl-md-checkbox-checked { color: #34d399; }
.dark .hl-md-fm { color: #6a9955; font-style: italic; }
.dark .hl-md-fence { color: #c084fc; }
.dark .hl-md-hr { color: #475569; letter-spacing: 0.15em; }
.dark .hl-md-bq-marker { color: #60a5fa; font-weight: bold; }
.dark .hl-md-bq { color: #a5b4fc; font-style: italic; }

/* Dark theme blockquote nesting levels */
.dark .hl-md-bq-level-1 .hl-md-bq-marker { color: #60a5fa; }
.dark .hl-md-bq-level-1 .hl-md-bq { color: #a5b4fc; }
.dark .hl-md-bq-level-2 .hl-md-bq-marker { color: #22d3ee; }
.dark .hl-md-bq-level-2 .hl-md-bq { color: #67e8f9; }
.dark .hl-md-bq-level-3 .hl-md-bq-marker { color: #34d399; }
.dark .hl-md-bq-level-3 .hl-md-bq { color: #6ee7b7; }
.dark .hl-md-bq-level-4 .hl-md-bq-marker { color: #a78bfa; }
.dark .hl-md-bq-level-4 .hl-md-bq { color: #d8b4fe; }
.dark .hl-md-bq-level-5 .hl-md-bq-marker { color: #f87171; }
.dark .hl-md-bq-level-5 .hl-md-bq { color: #fca5a5; }

.dark .hl-md-list-marker { color: #fbbf24; font-weight: bold; }
.dark .hl-md-bold { color: #fde68a; font-weight: bold; }
.dark .hl-md-italic { color: #86efac; font-style: italic; }
.dark .hl-md-code { color: #f87171; }
.dark .hl-md-link { color: #67e8f9; }
.dark .hl-md-link-text { color: #67e8f9; }
.dark .hl-md-link-url { color: #a5f3fc; text-decoration: underline; text-underline-offset: 2px; }
.dark .hl-md-image { color: #c084fc; }
.dark .hl-md-html { color: #fdba74; }

/* Dark theme CSV highlighting */
.dark .csv-col-0  { color: #93c5fd; }
.dark .csv-col-1  { color: #67e8f9; }
.dark .csv-col-2  { color: #86efac; }
.dark .csv-col-3  { color: #fbbf24; }
.dark .csv-col-4  { color: #f87171; }
.dark .csv-col-5  { color: #d8b4fe; }
.dark .csv-col-6  { color: #a5f3fc; }
.dark .csv-col-7  { color: #6ee7b7; }
.dark .csv-col-8  { color: #fde68a; }
.dark .csv-col-9  { color: #fca5a5; }
.dark .csv-col-10 { color: #c084fc; }
.dark .csv-col-11 { color: #22d3ee; }
.dark .csv-col-12 { color: #86efac; }
.dark .csv-col-13 { color: #fbbf24; }
.dark .csv-col-14 { color: #f472b6; }
.dark .csv-col-15 { color: #60a5fa; }

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME SIDEBAR
   ──────────────────────────────────────────────────────────────────────────── */

.dark .sidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

.dark .sidebar-toggle-btn {
    background: var(--c-slate-700);
    border-color: var(--c-slate-600);
    color: var(--c-blue-400);
}

.dark .sidebar-toggle-btn:hover {
    background-color: var(--c-slate-600);
    border-color: var(--c-slate-500);
    color: var(--c-blue-300);
}

.dark .sidebar-content::-webkit-scrollbar-thumb {
    background: var(--c-slate-600);
}

.dark .back-link { color: var(--c-blue-400); }

.dark .back-link:hover {
    background-color: var(--c-slate-800);
}

.dark .nav-item:hover { 
    background-color: var(--c-slate-800);
}

.dark .nav-item.active {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--c-blue-300);
    border-left-color: var(--c-blue-400);
}

.dark .group-toggle:hover {
    background-color: var(--c-slate-800);
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME COMPONENTS
   ──────────────────────────────────────────────────────────────────────────── */

.dark .theme-toggle:hover {
    background-color: var(--c-slate-700);
}

.dark .card:hover .card-title { color: var(--c-blue-400); }

.dark .card-footer { color: var(--c-blue-400); }

.dark .hero-promo { color: var(--c-blue-400); }

.dark .badge { background-color: rgba(30, 58, 138, 0.5); color: var(--c-blue-300); }

.dark .tag { background-color: var(--c-slate-800); color: var(--c-slate-400); }

.dark .var-panel {
    background-color: rgba(30, 41, 59, 0.95);
    border-color: var(--c-slate-700);
}

.dark .panel-toggle { color: var(--c-blue-400); }

.dark .panel-clear-btn:hover { 
    background: var(--c-slate-700); 
    color: var(--c-blue-400); 
}

.dark .checkbox-label:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark input[type="checkbox"] {
    border-color: #6b7280;
    background-color: #1f2937;
}

.dark input[type="checkbox"]:hover:not(:checked) {
    border-color: #9ca3af;
}

.dark input[type="checkbox"]:checked {
    background-color: #34d399;
    border-color: #34d399;
}

.dark li.task-list-item input[type="checkbox"] {
    border-color: #4b5563;
    background-color: #111827;
}

.dark li.task-list-item input[type="checkbox"]:checked {
    background-color: #34d399;
    border-color: #34d399;
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME PROSE / CONTENT
   ──────────────────────────────────────────────────────────────────────────── */

.dark .prose a {
    color: var(--c-blue-400);
    text-decoration-color: var(--c-blue-600);
}

.dark .prose a:hover {
    color: var(--c-blue-300);
    text-decoration-color: var(--c-blue-400);
}

.dark .prose th {
    background: var(--c-slate-800);
    color: var(--c-slate-200);
    border-bottom-color: var(--c-slate-600);
}

.dark .prose blockquote {
    border-left-color: var(--c-blue-400);
    background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(99,102,241,0.06) 100%);
    color: var(--c-slate-200);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.dark .prose blockquote p {
    color: inherit;
}

.dark .prose blockquote::before {
    color: var(--c-blue-400);
    opacity: 0.4;
}

.dark .prose blockquote blockquote {
    border-left-color: #22d3ee;
    background: linear-gradient(135deg, rgba(6,182,212,0.10) 0%, rgba(8,145,178,0.06) 100%);
    color: var(--c-slate-200);
}

.dark .prose blockquote blockquote blockquote {
    border-left-color: #34d399;
    background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(5,150,105,0.06) 100%);
    color: var(--c-slate-200);
}

.dark .prose blockquote blockquote blockquote blockquote {
    border-left-color: #a78bfa;
    background: linear-gradient(135deg, rgba(139,92,246,0.10) 0%, rgba(109,40,217,0.06) 100%);
    color: var(--c-slate-200);
}

.dark .prose blockquote blockquote blockquote blockquote blockquote {
    border-left-color: #fca5a5;
    background: linear-gradient(135deg, rgba(248,113,113,0.10) 0%, rgba(239,68,68,0.06) 100%);
    color: var(--c-slate-200);
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME CSV HIGHLIGHTING
   ──────────────────────────────────────────────────────────────────────────── */

.dark .csv-col-0  { color: #818cf8; }
.dark .csv-col-1  { color: #22d3ee; }
.dark .csv-col-2  { color: #4ade80; }
.dark .csv-col-3  { color: #fbbf24; }
.dark .csv-col-4  { color: #f87171; }
.dark .csv-col-5  { color: #c084fc; }
.dark .csv-col-6  { color: #38bdf8; }
.dark .csv-col-7  { color: #34d399; }
.dark .csv-col-8  { color: #fb923c; }
.dark .csv-col-9  { color: #fb7185; }
.dark .csv-col-10 { color: #a78bfa; }
.dark .csv-col-11 { color: #67e8f9; }
.dark .csv-col-12 { color: #86efac; }
.dark .csv-col-13 { color: #fcd34d; }
.dark .csv-col-14 { color: #f472b6; }
.dark .csv-col-15 { color: #60a5fa; }

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME VARIABLES
   ──────────────────────────────────────────────────────────────────────────── */

.dark .var-highlight {
    background: var(--c-blue-800);
    color: var(--c-blue-100);
}

.dark .info-button:hover {
    background: var(--c-slate-700);
    color: var(--c-blue-400);
}

.dark .hints-close-btn:hover {
    background: var(--c-slate-700);
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME CODE BLOCK SCROLLBAR
   ──────────────────────────────────────────────────────────────────────────── */

.dark .prose pre {
    scrollbar-color: rgba(96, 165, 250, 0.3) rgba(30, 41, 59, 0.5);
}

.dark .prose pre::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
}

.dark .prose pre::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
}

.dark .prose pre::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}