/* ==================================================
   CaseBuilder Theme Variable Overrides (root-based)
   ================================================== */

/* Light theme (default) */
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #222;
  --text-light: #777;
  --accent: #5773ff;
  --border: #e4e6eb;
  --radius: 8px;
  --transition: 0.18s ease;
}

/* Dark mode overrides */
body.theme-dark {
  --bg: #0f0f0f;
  --surface: #181818;
  --text: #e5e5e5;
  --text-light: #bbb;
  --accent: #88aaff;
  --border: #333;
}

/* High contrast overrides */
body.theme-contrast {
  --bg: #000;
  --surface: #000;
  --text: #fff;
  --text-light: #fff;
  --accent: #ffea00;
  --border: #fff;
}










/* ================================
   CaseBuilder Theme Overrides
================================ */

/* DARK MODE */
body.theme-dark,
body.theme-dark .workspace-container,
body.theme-dark .workspace-main,
body.theme-dark .workspace-sidebar,
body.theme-dark .card {
  background: #121212 !important;
  color: #eee !important;
}

body.theme-dark a {
  color: #9ecbff !important;
}

body.theme-dark input,
body.theme-dark textarea {
  background: #1f1f1f !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* HIGH CONTRAST */
body.theme-contrast,
body.theme-contrast .workspace-container,
body.theme-contrast .workspace-main,
body.theme-contrast .workspace-sidebar {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

body.theme-contrast a {
  color: #ffea00 !important;
}

/* LARGE TEXT */
body.text-large {
  font-size: 1.15em !important;
  line-height: 1.8 !important;
}
/* --- DARK MODE TEXT TUNING --- */
body.theme-dark .muted,
body.theme-dark .small,
body.theme-dark small,
body.theme-dark .text-muted {
  color: #bbb !important;
}

body.theme-dark .muted strong,
body.theme-dark .small strong {
  color: #fff !important;
}

/* --- HIGH CONTRAST TEXT TUNING --- */
body.theme-contrast .muted,
body.theme-contrast .small,
body.theme-contrast small,
body.theme-contrast .text-muted {
  color: #fff !important;
}


body.theme-dark .flow-panel,
body.theme-dark .guided-mode-container {
  background: var(--surface);
  color: var(--text);
}


/* ===============================
   Guided + Form Contrast Tweaks
   =============================== */

/* --- Inputs and textareas --- */
body.theme-dark input,
body.theme-dark textarea {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  color: #f5f5f5 !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #888 !important;
}

/* --- Flow panels (card backgrounds) --- */
body.theme-dark .flow-panel,
body.theme-dark .guided-mode-container {
  background: #181818 !important;   /* darker than surface */
  color: #eee !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* --- Buttons --- */
body.theme-dark .flow-button {
  background: #2a56ff !important;  /* vivid accent */
  color: #fff !important;
}
body.theme-dark .flow-button.subtle {
  background: transparent !important;
  border: 1px solid #2a56ff !important;
  color: #9ecbff !important;
}

/* --- High-contrast variant --- */
body.theme-contrast input,
body.theme-contrast textarea {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
body.theme-contrast .flow-button {
  background: #ffea00 !important;
  color: #000 !important;
}

/* =========================================
   Guided Flow Typography & Contrast Fixes
   ========================================= */

/* Base guided containers */
.guided-mode-container,
.flow-panel {
  /* inherit theme colors but ensure readable defaults */
  color: var(--text, #222);
}

/* Headings — make them readable across themes */
.guided-mode-container h1,
.guided-mode-container h2,
.flow-panel h1,
.flow-panel h2 {
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.25;
  color: inherit; /* let theme decide; overridden below for dark/contrast */
  margin: 0 0 0.5rem;
}

/* Body text in guided */
.guided-mode-container p,
.flow-panel p,
.guided-mode-container blockquote {
  font-weight: 400;
  line-height: 1.6;
  color: inherit;
  margin: 0 0 1rem;
}

/* Muted text that was too faint */
.guided-mode-container .muted,
.flow-panel .muted,
.guided-mode-container small,
.flow-panel small {
  color: #666; /* light theme default */
}

/* Blockquote used in review step */
#preview-gallery + #review-intention,
.flow-panel blockquote {
  background: rgba(0,0,0,0.035);
  border-left: 4px solid var(--accent, #5773ff);
  padding: 10px 12px;
  border-radius: 6px;
  color: inherit;
}

/* --- Dark mode overrides --- */
body.theme-dark .guided-mode-container,
body.theme-dark .flow-panel {
  color: #eee !important;
}
body.theme-dark .guided-mode-container h1,
body.theme-dark .guided-mode-container h2,
body.theme-dark .flow-panel h1,
body.theme-dark .flow-panel h2 {
  color: #fafafa !important;
}
body.theme-dark .guided-mode-container p,
body.theme-dark .flow-panel p,
body.theme-dark .guided-mode-container blockquote {
  color: #d8d8d8 !important;
}
body.theme-dark .guided-mode-container .muted,
body.theme-dark .flow-panel .muted,
body.theme-dark .guided-mode-container small,
body.theme-dark .flow-panel small {
  color: #b7b7b7 !important;
}
body.theme-dark .flow-panel blockquote {
  background: #1a1a1a !important;
  border-left-color: #9ecbff !important;
}

/* --- High contrast overrides --- */
body.theme-contrast .guided-mode-container,
body.theme-contrast .flow-panel {
  color: #fff !important;
}
body.theme-contrast .guided-mode-container h1,
body.theme-contrast .guided-mode-container h2,
body.theme-contrast .flow-panel h1,
body.theme-contrast .flow-panel h2 {
  color: #fff !important;
}
body.theme-contrast .guided-mode-container p,
body.theme-contrast .flow-panel p,
body.theme-contrast .guided-mode-container blockquote {
  color: #fff !important;
}
body.theme-contrast .guided-mode-container .muted,
body.theme-contrast .flow-panel .muted,
body.theme-contrast .guided-mode-container small,
body.theme-contrast .flow-panel small {
  color: #ffea00 !important;
}
body.theme-contrast .flow-panel blockquote {
  background: #000 !important;
  border-left-color: #ffea00 !important;
}

/* Buttons in guided (ensure readable contrast) */
body.theme-dark .flow-button {
  color: #fff !important;
}
body.theme-dark .flow-button.subtle {
  color: #9ecbff !important;
}

body.theme-contrast .flow-button {
  background: #ffea00 !important;
  color: #000 !important;
}
body.theme-contrast .flow-button.subtle {
  background: transparent !important;
  border: 2px solid #ffea00 !important;
  color: #ffea00 !important;
}

/* =========================================
   Workspace + Sidebar Theme Integration
   ========================================= */

/* GENERAL */
body.theme-dark .workspace-container,
body.theme-dark .workspace-main,
body.theme-dark .workspace-sidebar,
body.theme-dark .workspace-dashboard {
  background: #121212 !important;
  color: #eee !important;
}

/* SIDEBAR */
body.theme-dark .workspace-sidebar {
  background: #1a1a1a !important;
  border-right: 1px solid #2c2c2c !important;
}
body.theme-dark .workspace-sidebar .sidebar-title {
  color: #fff !important;
}
body.theme-dark .workspace-sidebar a {
  color: #9ecbff !important;
}
body.theme-dark .workspace-sidebar .case-item.active {
  background: #2a2a2a !important;
  border-radius: 6px;
}

/* MAIN AREA */
body.theme-dark .workspace-main {
  background: #181818 !important;
  color: #eee !important;
}
body.theme-dark .workspace-dashboard p {
  color: #bbb !important;
}
body.theme-dark .workspace-dashboard a {
  color: #9ecbff !important;
}

/* BUTTONS */
body.theme-dark .btn-primary,
body.theme-dark .btn-secondary {
  background: #2a56ff !important;
  color: #fff !important;
  border: none !important;
}
body.theme-dark .btn-secondary {
  background: #333 !important;
}

/* HIGH CONTRAST */
body.theme-contrast .workspace-container,
body.theme-contrast .workspace-main,
body.theme-contrast .workspace-sidebar {
  background: #000 !important;
  color: #fff !important;
}
body.theme-contrast .workspace-sidebar {
  border-right: 2px solid #fff !important;
}
body.theme-contrast .workspace-sidebar .case-item.active {
  background: #fff !important;
  color: #000 !important;
}
body.theme-contrast a {
  color: #ffea00 !important;
}

/* LARGE TEXT */
body.text-large .workspace-container,
body.text-large .workspace-main,
body.text-large .workspace-sidebar {
  font-size: 1.15em !important;
  line-height: 1.75 !important;
}


/* =========================================
   Dashboard (Case List) Theme Integration
   ========================================= */

/* BASE BACKGROUND + TEXT */
body.theme-dark .dashboard,
body.theme-dark .dashboard-cases,
body.theme-dark .case-card,
body.theme-dark .case-list,
body.theme-dark .case-item {
  background: #121212 !important;
  color: #eee !important;
  border-color: #2a2a2a !important;
}

/* CARD CONTAINERS */
body.theme-dark .case-card,
body.theme-dark .case-item {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* CASE TITLES / TEXT */
body.theme-dark .case-name,
body.theme-dark .case-card h3,
body.theme-dark .case-item h3 {
  color: #fff !important;
  font-weight: 600;
}
body.theme-dark .case-date,
body.theme-dark small,
body.theme-dark .muted {
  color: #aaa !important;
}

/* BUTTONS */
body.theme-dark button,
body.theme-dark .btn,
body.theme-dark .btn-text {
  background: #2a56ff !important;
  color: #fff !important;
  border: none !important;
}
body.theme-dark .btn-text {
  background: transparent !important;
  color: #9ecbff !important;
}

/* "NO PREVIEW" BOXES */
body.theme-dark .no-preview,
body.theme-dark .case-thumb-empty {
  background: #222 !important;
  border: 1px dashed #444 !important;
  color: #888 !important;
}

/* HEADER / NAV LINKS */
body.theme-dark .dashboard-header,
body.theme-dark .dashboard-nav {
  background: #181818 !important;
  color: #eee !important;
}
body.theme-dark .dashboard-header a,
body.theme-dark .dashboard-nav a {
  color: #9ecbff !important;
}

/* HIGH CONTRAST */
body.theme-contrast .dashboard,
body.theme-contrast .dashboard-cases,
body.theme-contrast .case-card,
body.theme-contrast .case-list,
body.theme-contrast .case-item {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.theme-contrast .no-preview,
body.theme-contrast .case-thumb-empty {
  border: 2px dashed #fff !important;
  color: #ffea00 !important;
}
body.theme-contrast a {
  color: #ffea00 !important;
}

/* LARGE TEXT */
body.text-large .dashboard,
body.text-large .case-card,
body.text-large .case-list {
  font-size: 1.15em !important;
  line-height: 1.75 !important;
}


/* =========================================
   Case Titles – Dark Mode Readability
   ========================================= */

body.theme-dark .case-item a,
body.theme-dark .case-card a,
body.theme-dark .case-name,
body.theme-dark .case-name a {
  color: #b0b0b0 !important;       /* darker gray, better legibility */
  text-decoration: none !important;
  font-weight: 500;
}

body.theme-dark .case-item a:hover,
body.theme-dark .case-card a:hover,
body.theme-dark .case-name a:hover {
  color: #9ecbff !important;       /* subtle blue accent */
}

/* High-contrast mode */
body.theme-contrast .case-item a,
body.theme-contrast .case-card a,
body.theme-contrast .case-name,
body.theme-contrast .case-name a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
}

body.theme-contrast .case-item a:hover,
body.theme-contrast .case-card a:hover,
body.theme-contrast .case-name a:hover {
  color: #ffea00 !important;
}