/* =================================================================
   DARK-THEME.CSS - Dark Mode Color Scheme
   
   This file contains all the dark theme specific styling:
   - CSS Custom Properties (variables) for dark mode
   - Dark mode color applications using [data-theme="dark"] selector
   - GitHub markdown dark theme integration
   - Dark mode specific overrides and enhancements
   ================================================================= */

/* ===== GROK DARK THEME VARIABLES ===== */
:root[data-theme="dark"] {
  /* Base colors - Grok's pure black aesthetic */
  --bg-color: #000000;
  --text-color: #ffffff;
  --border-color: #1a1a1a;
  --accent-color: #4fc3f7; /* Subtle light blue accent */
  --accent-color-rgb: 79, 195, 247;

  /* Header colors */
  --header-bg: #000000;
  --header-gradient: #1a1a1a;
  
  /* Button colors - Grok's frosted glass style */
  --button-bg: #1a1a1a;
  --button-bg-rgb: 26, 26, 26; /* RGB values for frosted glass */
  --button-hover: rgba(79, 195, 247, 0.1); /* Light blue with transparency */
  --button-active: #1a1a1a;
  
  /* Stats background */
  --stats-bg: rgba(0, 0, 0, 0.8);
  
  /* Editor and preview colors - Different for visual separation */
  --editor-bg: #1a1a1a; /* Dark gray for editor */
  --editor-bg-rgb: 26, 26, 26; /* RGB values for frosted glass */
  --preview-bg: #000000; /* Pure black for preview */
  --preview-bg-rgb: 0, 0, 0; /* RGB values for frosted glass */
  --preview-text-color: #ffffff;
  
  /* Table colors */
  --table-bg: #0f1318; /* base cell background */
  --table-row-alt: #141a22; /* zebra stripe */
  --table-border: #30363d; /* borders similar to GitHub dark */
  

  
  /* Dropzone colors */
  --dropzone-bg: rgba(26, 26, 26, 0.8);
  
  /* Code highlighting */
  --code-bg: #1a1a1a;
  --code-pre-bg: #242628;
  --code-inline-bg: #29241E;
  --code-inline-color: #FFD085;
  --hljs-color: #e8eaed;
  
  /* Loading screen colors */
  --loading-bg-start: #1a1a1a;
  --loading-bg-end: #000000;
  --loading-border: rgba(79, 195, 247, 0.2);
  --loading-text-shadow: rgba(0, 0, 0, 0.5);
  --loading-subtitle-color: rgba(255, 255, 255, 0.9);
  --loading-progress-bg: rgba(79, 195, 247, 0.1);
  --loading-progress-border: rgba(79, 195, 247, 0.3);
  --loading-designer-color: rgba(255, 255, 255, 0.7);
  
  /* Hover effects */
  --hover-accent: rgba(79, 195, 247, 0.1);
  --hover-primary: rgba(79, 195, 247, 0.15);
  --hover-shadow: rgba(79, 195, 247, 0.2);
  --hover-shadow-primary: rgba(79, 195, 247, 0.3);
  
  /* List and content colors */
  --list-marker-color: #ffffff;
  --blockquote-color: #cccccc;
  --blockquote-bold-color: #E2E8F0;
  --hr-color: #333333;
  
  /* Danger colors */
  --color-danger-fg: #ff6b6b;
}

/* =================================================================
   GROK FROSTED GLASS HOVER EFFECTS
   ================================================================= */

/* ===== GROK FROSTED GLASS HOVER EFFECTS ===== */

/* ===== DARK THEME LOADING SCREEN ===== */
[data-theme="dark"] .loading-screen {
  background: linear-gradient(135deg, var(--loading-bg-start) 0%, var(--loading-bg-end) 50%, var(--loading-bg-start) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--loading-border);
}

[data-theme="dark"] .loading-content {
  color: var(--text-color);
  text-shadow: 0 2px 10px var(--loading-text-shadow);
}

[data-theme="dark"] .loading-title {
  background: linear-gradient(45deg, var(--text-color), var(--accent-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px var(--hover-shadow-primary));
}

[data-theme="dark"] .loading-subtitle {
  color: var(--loading-subtitle-color);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .loading-progress {
  background: var(--loading-progress-bg);
  border: 1px solid var(--loading-progress-border);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

[data-theme="dark"] .progress-bar {
  background: linear-gradient(90deg, var(--accent-color), var(--text-color), var(--accent-color));
  box-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

[data-theme="dark"] .loading-designer {
  color: var(--loading-designer-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Dark theme loading pulse animation */
[data-theme="dark"] .loading-screen {
  animation: loadingPulseDark 4s ease-in-out infinite;
}
/* Grok's signature frosted glass hover effect for buttons and interactive elements */
[data-theme="dark"] button,
[data-theme="dark"] .btn,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .dropdown-item {
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--hover-accent) !important; /* Light blue with transparency */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  box-shadow: 0 0 10px var(--hover-shadow);
}

/* Enhanced frosted glass for primary buttons */
[data-theme="dark"] .btn-primary:hover {
  background-color: var(--hover-primary) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 15px var(--hover-shadow-primary);
}

/* ===== DARK MODE LINE NUMBERS ===== */
/* Line number styling for numbered code blocks in dark mode */

/* ===== GITHUB MARKDOWN DARK THEME ===== */
/* GitHub's official dark mode syntax highlighting */
[data-theme="dark"] .markdown-body {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #ffffff;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110,118,129,0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187,128,9,0.15);
  --color-danger-fg: #f85149;
}

/* ===== DARK MODE TABLE STYLING ===== */
/* Table styling aligned with export/PDF look */
[data-theme="dark"] .markdown-body table {
  background-color: var(--table-bg);
  border-color: var(--table-border);
}

[data-theme="dark"] .markdown-body table tr {
  background-color: var(--table-bg);
  border-top: 1px solid var(--table-border);
}

[data-theme="dark"] .markdown-body table tr:nth-child(2n) {
  background-color: var(--table-row-alt);
}

[data-theme="dark"] .markdown-body table th,
[data-theme="dark"] .markdown-body table td {
  border: 1px solid var(--table-border);
}

/* ===== DARK MODE CODE BLOCK STYLING ===== */
/* Pre-formatted code block backgrounds in dark mode */
[data-theme="dark"] .markdown-body pre {
  background-color: var(--code-pre-bg);
  font-family: "Fira Code", "Consolas", "Monaco", "Lucida Console", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Inline code styling for dark mode */
[data-theme="dark"] .markdown-body code:not(pre code) {
  background-color: var(--code-inline-bg);
  color: var(--code-inline-color);
  font-family: "Fira Code", "Consolas", "Monaco", "Lucida Console", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

[data-theme="dark"] .markdown-body pre code {
  background: transparent;
  font-family: "Fira Code", "Consolas", "Monaco", "Lucida Console", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Syntax highlighting text color */
[data-theme="dark"] .hljs {
  color: var(--hljs-color);
}




/* ===== DARK MODE HEADER ELEMENTS ===== */
/* H4 styling */
[data-theme="dark"] .markdown-body h4 {
  font-weight: bold;
}

/* Bold text styling for dark mode */
[data-theme="dark"] .markdown-body strong,
[data-theme="dark"] .markdown-body b {
  font-weight: 900 !important;
  color: var(--text-color) !important;
  font-style: normal !important;
}

/* Handle nested formatting in dark mode */
[data-theme="dark"] .markdown-body strong em,
[data-theme="dark"] .markdown-body strong i,
[data-theme="dark"] .markdown-body b em,
[data-theme="dark"] .markdown-body b i {
  font-weight: 900 !important;
  color: var(--text-color) !important;
}

/* Blockquote bold text should be less aggressive */
[data-theme="dark"] .markdown-body blockquote strong,
[data-theme="dark"] .markdown-body blockquote b {
  font-weight: 700 !important;
  color: var(--blockquote-bold-color) !important;
}
/* App header title color in dark mode */
[data-theme="dark"] .app-header .h4 {
  color: var(--text-color); /* Use dark theme text color for MarkTide Viewer title */
}

/* GitHub link color in dark mode */
[data-theme="dark"] .app-header .github-link {
  color: var(--text-color); /* Use dark theme text color for GitHub icon */
}

/* GitHub link hover state in dark mode */
[data-theme="dark"] .app-header .github-link:hover {
  color: var(--accent-color); /* Use dark theme accent color for GitHub icon on hover */
}

/* =================================================================
   DEPRECATED LOADING SCREEN STYLES - REMOVE IN PRODUCTION
   ================================================================= */
/* TODO: Remove these loading screen styles as they're not used in production */

/* Dark theme numbered list styling - Grok-style improvements */
[data-theme="dark"] .markdown-body ol li::marker {
  color: var(--list-marker-color); /* White numbers for list items */
  font-weight: 600; /* Bold font weight for better visibility */
}

[data-theme="dark"] .markdown-body ol li {
  color: var(--list-marker-color); /* White text for list items */
}

/* Dark theme blockquote styling for better readability */
[data-theme="dark"] .markdown-body blockquote {
  color: var(--blockquote-color); /* Light gray text for quoted content */
}

[data-theme="dark"] .markdown-body blockquote p {
  color: var(--blockquote-color); /* Consistent color for paragraphs within blockquotes */
}

/* Dark theme quote marks styling within blockquotes */
[data-theme="dark"] .markdown-body blockquote::before,
[data-theme="dark"] .markdown-body blockquote::after {
  color: var(--blockquote-color); /* Light gray for decorative quote marks */
}

/* Dark theme horizontal rules - Grok-style separators */
[data-theme="dark"] .markdown-body hr {
  background-color: var(--hr-color); /* Dark gray horizontal line */
  border: none; /* Remove default border */
  height: 1px; /* Thin line */
  margin: 2em 0; /* Generous spacing above and below */
}

/* Dark theme bullet points styling for unordered lists */
[data-theme="dark"] .markdown-body ul {
  list-style-type: disc; /* Standard bullet points */
}

[data-theme="dark"] .markdown-body ul li::marker {
  color: var(--list-marker-color); /* White bullet points for better visibility */
}