/* ===========================================
   Simple Slides - CSS Variables & Theming
   =========================================== */

:root {
  /* ---- Light Theme (Default) ---- */

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #eeeeee;
  --bg-tertiary: #f5f5f5;
  --bg-overlay: rgba(0, 0, 0, 0.73);

  /* Text */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;

  /* Borders */
  --border-color: #cccccc;
  --border-light: #dddddd;
  --border-dark: #aaaaaa;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.2);

  /* UI Components */
  --navbar-bg: #eeeeee;
  --navbar-border: #cccccc;
  --resizer-bg: #ccc;
  --modal-bg: #ffffff;

  /* Console */
  --console-bg: #333333;
  --console-text: #ffffff;
  --console-border: #555555;
  --console-toolbar-bg: #2a2a2a;

  /* Progress Bar */
  --progress-bg: #dc3545;
  --progress-fill: #28a745;

  /* Code Editor */
  --editor-bg: #ffffff;
  --editor-gutter: #f7f7f7;
  --editor-cursor: #333333;

  /* Blink Items */
  --blink-border: #cccccc;

  /* Keyboard */
  --kbd-bg: #000000;
  --kbd-text: #ffffff;
}

/* ---- Dark Theme ---- */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #1e1e1e;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #252526;
  --bg-overlay: rgba(0, 0, 0, 0.85);

  /* Text */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;

  /* Borders */
  --border-color: #444444;
  --border-light: #555555;
  --border-dark: #333333;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);

  /* UI Components */
  --navbar-bg: #2d2d2d;
  --navbar-border: #444444;
  --resizer-bg: #3d3d3d;
  --modal-bg: #252526;

  /* Console */
  --console-bg: #1a1a1a;
  --console-text: #e0e0e0;
  --console-border: #444444;
  --console-toolbar-bg: #252526;

  /* Progress Bar - keep same for visibility */
  --progress-bg: #dc3545;
  --progress-fill: #28a745;

  /* Code Editor */
  --editor-bg: #1e1e1e;
  --editor-gutter: #252526;
  --editor-cursor: #ffffff;

  /* Blink Items */
  --blink-border: #555555;

  /* Keyboard */
  --kbd-bg: #444444;
  --kbd-text: #ffffff;
}

/* ---- Dark Theme Overrides for Bootstrap ---- */
[data-theme="dark"] .btn-outline-dark {
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .progress {
  background-color: var(--bg-tertiary);
}

/* Text colors */
[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
  color: var(--text-secondary) !important;
}

/* Cards */
[data-theme="dark"] .card {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .card-body {
  background-color: var(--bg-secondary);
}

/* Alerts */
[data-theme="dark"] .alert-info {
  background-color: #1a3a4a;
  border-color: #2a4a5a;
  color: #8ecae6;
}

[data-theme="dark"] .alert-warning {
  background-color: #4a3a1a;
  border-color: #5a4a2a;
  color: #f0c674;
}

[data-theme="dark"] .alert-success {
  background-color: #1a3a2a;
  border-color: #2a4a3a;
  color: #8fbc8f;
}

[data-theme="dark"] .alert-danger {
  background-color: #4a1a1a;
  border-color: #5a2a2a;
  color: #e08080;
}

/* Tables */
[data-theme="dark"] .table {
  color: var(--text-primary);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .table thead th {
  border-color: var(--border-color);
  background-color: var(--bg-tertiary);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-tertiary);
}

[data-theme="dark"] .table-bordered {
  border-color: var(--border-color);
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Table contextual classes */
[data-theme="dark"] .table-primary,
[data-theme="dark"] .table-primary > td,
[data-theme="dark"] .table-primary > th {
  background-color: #1a3a5a;
  color: #a8c8e8;
}

[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > td,
[data-theme="dark"] .table-success > th {
  background-color: #1a3a2a;
  color: #8fbc8f;
}

[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info > td,
[data-theme="dark"] .table-info > th {
  background-color: #1a3a4a;
  color: #8ecae6;
}

[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] .table-warning > th {
  background-color: #4a3a1a;
  color: #f0c674;
}

[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > td,
[data-theme="dark"] .table-danger > th {
  background-color: #4a1a1a;
  color: #e08080;
}

[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > td,
[data-theme="dark"] .table-secondary > th {
  background-color: #3a3a3a;
  color: #c0c0c0;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table-light > th {
  background-color: #2a2a2a;
  color: var(--text-primary);
}

[data-theme="dark"] .table-dark,
[data-theme="dark"] .table-dark > td,
[data-theme="dark"] .table-dark > th {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* Mermaid diagrams */
[data-theme="dark"] .mermaid {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
}

/* ---- Utility: Smooth Theme Transition ---- */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.slide,
.navbar-code,
.navbar-renderer,
.outer .inner,
.CodeMirror {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}