/**
 * Content Dark Mode Styles
 * Comprehensive dark mode styling for all content elements
 * Ensures proper readability in both light and dark themes
 */

/* ============================================================================
   TABLE STYLES
   ============================================================================ */

/* Light mode tables (default if no data-theme) */
[data-theme="light"] table,
table {
  background: white;
  color: #1f2937;
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] table thead,
table thead {
  background: #f3f4f6;
  color: #111827;
}

[data-theme="light"] table th,
table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  color: #111827;
}

[data-theme="light"] table td,
table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

[data-theme="light"] table tbody tr:hover,
table tbody tr:hover {
  background: #f9fafb;
}

/* Dark mode tables */
[data-theme="dark"] table,
:root:not([data-theme="light"]) table,
body[data-theme="dark"] table {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] table thead,
:root:not([data-theme="light"]) table thead,
body[data-theme="dark"] table thead {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-bottom: 2px solid #475569 !important;
}

[data-theme="dark"] table th,
:root:not([data-theme="light"]) table th,
body[data-theme="dark"] table th {
  color: #f1f5f9 !important;
  background: #0f172a !important;
  border-bottom: 2px solid #475569 !important;
  font-weight: 600;
}

[data-theme="dark"] table td,
:root:not([data-theme="light"]) table td,
body[data-theme="dark"] table td {
  color: #cbd5e1 !important;
  background: transparent !important;
  border-bottom: 1px solid #334155 !important;
}

[data-theme="dark"] table tbody tr:hover,
:root:not([data-theme="light"]) table tbody tr:hover,
body[data-theme="dark"] table tbody tr:hover {
  background: #334155 !important;
}

[data-theme="dark"] table tbody tr:hover td,
body[data-theme="dark"] table tbody tr:hover td {
  background: transparent !important;
}

/* Alternating row colors */
[data-theme="light"] table tbody tr:nth-child(even) {
  background: #fafafa;
}

[data-theme="dark"] table tbody tr:nth-child(even),
:root:not([data-theme="light"]) table tbody tr:nth-child(even),
body[data-theme="dark"] table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.5) !important;
}

/* Special case for learn-task content tables */
[data-theme="dark"] .content-container table,
body[data-theme="dark"] .content-container table,
[data-theme="dark"] #content-display table,
body[data-theme="dark"] #content-display table {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .content-container table td,
[data-theme="dark"] .content-container table th,
body[data-theme="dark"] .content-container table td,
body[data-theme="dark"] .content-container table th,
[data-theme="dark"] #content-display table td,
[data-theme="dark"] #content-display table th,
body[data-theme="dark"] #content-display table td,
body[data-theme="dark"] #content-display table th {
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

/* ============================================================================
   CONTENT BOXES / CARDS
   ============================================================================ */

/* Organelle cards and similar content cards */
[data-theme="dark"] .organelle-card,
body[data-theme="dark"] .organelle-card,
[data-theme="dark"] .content-box.box-story,
body[data-theme="dark"] .content-box.box-story,
[data-theme="dark"] .content-box.box-facts,
body[data-theme="dark"] .content-box.box-facts,
[data-theme="dark"] .content-box.box-diagram,
body[data-theme="dark"] .content-box.box-diagram,
[data-theme="dark"] .content-box.box-despesive,
body[data-theme="dark"] .content-box.box-despesive {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .organelle-card h3,
[data-theme="dark"] .organelle-card h4,
[data-theme="dark"] .organelle-card h5,
body[data-theme="dark"] .organelle-card h3,
body[data-theme="dark"] .organelle-card h4,
body[data-theme="dark"] .organelle-card h5 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .organelle-card ul,
[data-theme="dark"] .organelle-card li,
[data-theme="dark"] .organelle-card p,
body[data-theme="dark"] .organelle-card ul,
body[data-theme="dark"] .organelle-card li,
body[data-theme="dark"] .organelle-card p {
  color: #cbd5e1 !important;
}

/* Light mode content boxes */
[data-theme="light"] .content-box,
[data-theme="light"] .box-story,
[data-theme="light"] .box-deepdive,
[data-theme="light"] .box-facts,
[data-theme="light"] .box-tips,
[data-theme="light"] .box-equation,
[data-theme="light"] .box-diagram,
[data-theme="light"] .box-questions {
  background: white;
  border: 1px solid #e5e7eb;
  color: #1f2937;
}

/* Dark mode content boxes */
[data-theme="dark"] .content-box,
[data-theme="dark"] .box-story,
[data-theme="dark"] .box-deepdive,
[data-theme="dark"] .box-facts,
[data-theme="dark"] .box-tips,
[data-theme="dark"] .box-equation,
[data-theme="dark"] .box-diagram,
[data-theme="dark"] .box-questions,
:root:not([data-theme="light"]) .content-box,
:root:not([data-theme="light"]) .box-story,
:root:not([data-theme="light"]) .box-deepdive,
:root:not([data-theme="light"]) .box-facts,
:root:not([data-theme="light"]) .box-tips,
:root:not([data-theme="light"]) .box-equation,
:root:not([data-theme="light"]) .box-diagram,
:root:not([data-theme="light"]) .box-questions {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}

/* Special box backgrounds */
[data-theme="dark"] .box-story,
:root:not([data-theme="light"]) .box-story {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .box-deepdive,
:root:not([data-theme="light"]) .box-deepdive {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(6, 182, 212, 0.15));
  border-color: rgba(14, 165, 233, 0.4);
}

[data-theme="dark"] .box-facts,
:root:not([data-theme="light"]) .box-facts {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.15));
  border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="dark"] .box-tips,
:root:not([data-theme="light"]) .box-tips {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15));
  border-color: rgba(245, 158, 11, 0.4);
}

/* ============================================================================
   LISTS
   ============================================================================ */

[data-theme="light"] ul,
[data-theme="light"] ol {
  color: #374151;
}

[data-theme="dark"] ul,
[data-theme="dark"] ol,
:root:not([data-theme="light"]) ul,
:root:not([data-theme="light"]) ol {
  color: #cbd5e1;
}

[data-theme="light"] li {
  color: #374151;
}

[data-theme="dark"] li,
:root:not([data-theme="light"]) li {
  color: #cbd5e1;
}

/* List markers */
[data-theme="dark"] li::marker,
:root:not([data-theme="light"]) li::marker {
  color: #64748b;
}

/* ============================================================================
   DETAILS/SUMMARY (Collapsible sections)
   ============================================================================ */

[data-theme="light"] details {
  background: white;
  border: 1px solid #e5e7eb;
}

[data-theme="dark"] details,
:root:not([data-theme="light"]) details {
  background: #1e293b;
  border: 1px solid #334155;
}

[data-theme="light"] details summary {
  background: #f3f4f6;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
}

[data-theme="dark"] details summary,
:root:not([data-theme="light"]) details summary {
  background: rgba(99, 102, 241, 0.15);
  color: #f1f5f9;
  border-bottom: 1px solid #475569;
}

[data-theme="light"] details[open] summary {
  border-bottom: 1px solid #e5e7eb;
}

[data-theme="dark"] details[open] summary,
:root:not([data-theme="light"]) details[open] summary {
  border-bottom: 1px solid #475569;
}

/* ============================================================================
   BLOCKQUOTES
   ============================================================================ */

[data-theme="light"] blockquote {
  background: #f9fafb;
  border-left: 4px solid #6366f1;
  color: #4b5563;
  padding: 16px 20px;
  margin: 20px 0;
}

[data-theme="dark"] blockquote,
:root:not([data-theme="light"]) blockquote {
  background: rgba(99, 102, 241, 0.1);
  border-left: 4px solid #6366f1;
  color: #cbd5e1;
  padding: 16px 20px;
  margin: 20px 0;
}

/* ============================================================================
   CODE BLOCKS
   ============================================================================ */

[data-theme="light"] code {
  background: #f3f4f6;
  color: #ec4899;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

[data-theme="dark"] code,
:root:not([data-theme="light"]) code {
  background: #0f172a;
  color: #f472b6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

[data-theme="light"] pre {
  background: #1f2937;
  color: #e5e7eb;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
}

[data-theme="dark"] pre,
:root:not([data-theme="light"]) pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #334155;
}

[data-theme="light"] pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

[data-theme="dark"] pre code,
:root:not([data-theme="light"]) pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ============================================================================
   FORMS
   ============================================================================ */

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: white;
  color: #111827;
  border: 1px solid #d1d5db;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) select {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #475569;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #6366f1;
  outline: 2px solid rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
:root:not([data-theme="light"]) input:focus,
:root:not([data-theme="light"]) textarea:focus,
:root:not([data-theme="light"]) select:focus {
  border-color: #6366f1;
  outline: 2px solid rgba(99, 102, 241, 0.3);
}

/* ============================================================================
   LINKS
   ============================================================================ */

[data-theme="light"] a {
  color: #2563eb;
}

[data-theme="light"] a:hover {
  color: #1d4ed8;
}

[data-theme="dark"] a,
:root:not([data-theme="light"]) a {
  color: #60a5fa;
}

[data-theme="dark"] a:hover,
:root:not([data-theme="light"]) a:hover {
  color: #93bbfc;
}

/* ============================================================================
   HEADINGS
   ============================================================================ */

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #111827;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) h4,
:root:not([data-theme="light"]) h5,
:root:not([data-theme="light"]) h6 {
  color: #f1f5f9;
}

/* ============================================================================
   PARAGRAPHS AND TEXT
   ============================================================================ */

[data-theme="light"] p {
  color: #374151;
}

[data-theme="dark"] p,
:root:not([data-theme="light"]) p {
  color: #cbd5e1;
}

[data-theme="light"] strong {
  color: #111827;
}

[data-theme="dark"] strong,
:root:not([data-theme="light"]) strong {
  color: #f1f5f9;
}

[data-theme="light"] em {
  color: #4b5563;
}

[data-theme="dark"] em,
:root:not([data-theme="light"]) em {
  color: #94a3b8;
}

/* ============================================================================
   HORIZONTAL RULES
   ============================================================================ */

[data-theme="light"] hr {
  border-color: #e5e7eb;
}

[data-theme="dark"] hr,
:root:not([data-theme="light"]) hr {
  border-color: #475569;
}

/* ============================================================================
   GRID LAYOUTS AND CARDS
   ============================================================================ */

/* Organelle grid and similar grids */
[data-theme="dark"] .organelle-grid,
body[data-theme="dark"] .organelle-grid {
  background: transparent !important;
}

[data-theme="dark"] .organelle-grid .organelle-card,
body[data-theme="dark"] .organelle-grid .organelle-card,
[data-theme="dark"] .content-container .organelle-card,
body[data-theme="dark"] .content-container .organelle-card,
[data-theme="dark"] #content-display .organelle-card,
body[data-theme="dark"] #content-display .organelle-card,
[data-theme="dark"] .content-grid .grid-card,
body[data-theme="dark"] .content-grid .grid-card {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure text in grid cards is visible */
[data-theme="dark"] .organelle-grid .organelle-card *,
body[data-theme="dark"] .organelle-grid .organelle-card * {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .organelle-grid .organelle-card h3,
[data-theme="dark"] .organelle-grid .organelle-card h4,
[data-theme="dark"] .organelle-grid .organelle-card h5,
body[data-theme="dark"] .organelle-grid .organelle-card h3,
body[data-theme="dark"] .organelle-grid .organelle-card h4,
body[data-theme="dark"] .organelle-grid .organelle-card h5 {
  color: #f1f5f9 !important;
}

/* Feature cards and bacterial features grid */
[data-theme="dark"] .feature-card,
body[data-theme="dark"] .feature-card,
[data-theme="dark"] .bacterial-features .feature-card,
body[data-theme="dark"] .bacterial-features .feature-card,
[data-theme="dark"] .content-container .feature-card,
body[data-theme="dark"] .content-container .feature-card,
[data-theme="dark"] #content-display .feature-card,
body[data-theme="dark"] #content-display .feature-card {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .feature-card h4,
[data-theme="dark"] .feature-card h5,
[data-theme="dark"] .feature-card ul,
[data-theme="dark"] .feature-card li,
[data-theme="dark"] .feature-card p,
body[data-theme="dark"] .feature-card h3,
body[data-theme="dark"] .feature-card h4,
body[data-theme="dark"] .feature-card h5,
body[data-theme="dark"] .feature-card ul,
body[data-theme="dark"] .feature-card li,
body[data-theme="dark"] .feature-card p {
  color: #cbd5e1 !important;
}

/* All div-based cards in content area - universal selector */
[data-theme="dark"] .content-container div[class*="card"],
body[data-theme="dark"] .content-container div[class*="card"],
[data-theme="dark"] #content-display div[class*="card"],
body[data-theme="dark"] #content-display div[class*="card"],
[data-theme="dark"] .content-container .cell-type,
body[data-theme="dark"] .content-container .cell-type,
[data-theme="dark"] #content-display .cell-type,
body[data-theme="dark"] #content-display .cell-type,
[data-theme="dark"] div[class*="-grid"]:not(.unified-header-grid) > div,
body[data-theme="dark"] div[class*="-grid"]:not(.unified-header-grid) > div {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

/* Ensure all text in any grid/card structure is visible */
[data-theme="dark"] div[class*="-grid"] div h3,
[data-theme="dark"] div[class*="-grid"] div h4,
[data-theme="dark"] div[class*="-grid"] div h5,
[data-theme="dark"] div[class*="-grid"] div p,
[data-theme="dark"] div[class*="-grid"] div ul,
[data-theme="dark"] div[class*="-grid"] div li,
body[data-theme="dark"] div[class*="-grid"] div h3,
body[data-theme="dark"] div[class*="-grid"] div h4,
body[data-theme="dark"] div[class*="-grid"] div h5,
body[data-theme="dark"] div[class*="-grid"] div p,
body[data-theme="dark"] div[class*="-grid"] div ul,
body[data-theme="dark"] div[class*="-grid"] div li {
  color: #cbd5e1 !important;
}

/* Headers in grid cards should be brighter */
[data-theme="dark"] div[class*="-grid"] div h3,
[data-theme="dark"] div[class*="-grid"] div h4,
[data-theme="dark"] div[class*="-grid"] div h5,
body[data-theme="dark"] div[class*="-grid"] div h3,
body[data-theme="dark"] div[class*="-grid"] div h4,
body[data-theme="dark"] div[class*="-grid"] div h5 {
  color: #f1f5f9 !important;
}

/* UNIVERSAL CONTENT SOLUTION - catches ALL content boxes and cards */
[data-theme="dark"] .specialized-cells-grid .cell-type,
body[data-theme="dark"] .specialized-cells-grid .cell-type,
[data-theme="dark"] .bacterial-features .feature-card,
body[data-theme="dark"] .bacterial-features .feature-card,
[data-theme="dark"] .organelle-grid .organelle-card,
body[data-theme="dark"] .organelle-grid .organelle-card,
[data-theme="dark"] .practical-method,
body[data-theme="dark"] .practical-method,
[data-theme="dark"] .content-container > div[class*="box"],
body[data-theme="dark"] .content-container > div[class*="box"],
[data-theme="dark"] #content-display > div[class*="box"],
body[data-theme="dark"] #content-display > div[class*="box"],
[data-theme="dark"] .content-container .content-box,
body[data-theme="dark"] .content-container .content-box,
[data-theme="dark"] #content-display .content-box,
body[data-theme="dark"] #content-display .content-box {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  padding: 20px !important;
  border-radius: 12px !important;
}

/* Ensure ALL text elements in content boxes are visible */
[data-theme="dark"] .practical-method *,
body[data-theme="dark"] .practical-method *,
[data-theme="dark"] .content-container > div[class*="box"] *,
body[data-theme="dark"] .content-container > div[class*="box"] *,
[data-theme="dark"] #content-display > div[class*="box"] *,
body[data-theme="dark"] #content-display > div[class*="box"] * {
  color: #cbd5e1 !important;
  background: transparent !important;
}

/* Lists in content areas */
[data-theme="dark"] .practical-method ol,
[data-theme="dark"] .practical-method ul,
[data-theme="dark"] .practical-method li,
body[data-theme="dark"] .practical-method ol,
body[data-theme="dark"] .practical-method ul,
body[data-theme="dark"] .practical-method li {
  color: #cbd5e1 !important;
  background: transparent !important;
}

/* Nested divs or sections should not have backgrounds */
[data-theme="dark"] .practical-method div,
body[data-theme="dark"] .practical-method div,
[data-theme="dark"] .content-box div,
body[data-theme="dark"] .content-box div {
  background: transparent !important;
}

/* CATCH-ALL for any content box we might have missed */
[data-theme="dark"] .content-container > div,
body[data-theme="dark"] .content-container > div,
[data-theme="dark"] #content-display > div,
body[data-theme="dark"] #content-display > div {
  /* Only apply if it looks like a content box (has padding and isn't transparent) */
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

/* But keep wrapper/layout divs transparent */
[data-theme="dark"] .content-container > div:empty,
body[data-theme="dark"] .content-container > div:empty,
[data-theme="dark"] #content-display > div:empty,
body[data-theme="dark"] #content-display > div:empty {
  background: transparent !important;
}

/* ============================================================================
   IMAGES WITH OVERLAYS
   ============================================================================ */

[data-theme="dark"] img,
:root:not([data-theme="light"]) img {
  opacity: 0.95;
}

/* ============================================================================
   GRID LAYOUTS
   ============================================================================ */

[data-theme="light"] .grid-container {
  background: white;
  border: 1px solid #e5e7eb;
}

[data-theme="dark"] .grid-container,
:root:not([data-theme="light"]) .grid-container {
  background: #1e293b;
  border: 1px solid #334155;
}

[data-theme="light"] .grid-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
}

[data-theme="dark"] .grid-item,
:root:not([data-theme="light"]) .grid-item {
  background: #0f172a;
  border: 1px solid #475569;
  color: #cbd5e1;
}

/* ============================================================================
   DEFINITION LISTS
   ============================================================================ */

[data-theme="light"] dl {
  color: #374151;
}

[data-theme="dark"] dl,
:root:not([data-theme="light"]) dl {
  color: #cbd5e1;
}

[data-theme="light"] dt {
  color: #111827;
  font-weight: 600;
}

[data-theme="dark"] dt,
:root:not([data-theme="light"]) dt {
  color: #f1f5f9;
  font-weight: 600;
}

[data-theme="light"] dd {
  color: #4b5563;
  margin-left: 20px;
}

[data-theme="dark"] dd,
:root:not([data-theme="light"]) dd {
  color: #94a3b8;
  margin-left: 20px;
}

/* ============================================================================
   SCROLLBARS (Webkit browsers)
   ============================================================================ */

[data-theme="dark"] ::-webkit-scrollbar,
:root:not([data-theme="light"]) ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track,
:root:not([data-theme="light"]) ::-webkit-scrollbar-track {
  background: #1e293b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ============================================================================
   SPECIAL CONTENT CONTAINERS
   ============================================================================ */

/* Warning/Alert boxes */
[data-theme="light"] .alert,
[data-theme="light"] .warning {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

[data-theme="dark"] .alert,
[data-theme="dark"] .warning,
:root:not([data-theme="light"]) .alert,
:root:not([data-theme="light"]) .warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Info boxes */
[data-theme="light"] .info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

[data-theme="dark"] .info,
:root:not([data-theme="light"]) .info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93bbfc;
}

/* Success boxes */
[data-theme="light"] .success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

[data-theme="dark"] .success,
:root:not([data-theme="light"]) .success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

/* ============================================================================
   F-078: CONTENT EXCELLENCE - DARK MODE OVERRIDES
   These override the wildcard * rules (lines 638-647) that set all text to #cbd5e1
   ============================================================================ */

/* --- Box type heading colours (lighter variants for dark backgrounds) --- */
[data-theme="dark"] .content-box.box-definition h3,
[data-theme="dark"] .content-box.box-definition h4 {
  color: #60a5fa !important;
}

[data-theme="dark"] .content-box.box-mechanism h3,
[data-theme="dark"] .content-box.box-mechanism h4 {
  color: #5eead4 !important;
}

[data-theme="dark"] .content-box.box-calculation h3,
[data-theme="dark"] .content-box.box-calculation h4 {
  color: #a78bfa !important;
}

[data-theme="dark"] .content-box.box-misconception h3,
[data-theme="dark"] .content-box.box-misconception h4 {
  color: #f87171 !important;
}

[data-theme="dark"] .content-box.box-memory-aid h3,
[data-theme="dark"] .content-box.box-memory-aid h4 {
  color: #fbbf24 !important;
}

[data-theme="dark"] .content-box.box-exam-focus h3,
[data-theme="dark"] .content-box.box-exam-focus h4 {
  color: #facc15 !important;
}

[data-theme="dark"] .content-box.box-higher-only h3,
[data-theme="dark"] .content-box.box-higher-only h4 {
  color: #a78bfa !important;
}

[data-theme="dark"] .content-box.box-higher-only {
  border-left-color: #a78bfa !important;
}

[data-theme="dark"] .content-box.box-comparison h3,
[data-theme="dark"] .content-box.box-comparison h4 {
  color: #94a3b8 !important;
}

/* --- Practical box --- */
[data-theme="dark"] .content-box.box-practical h3,
[data-theme="dark"] .content-box.box-practical h4 {
  color: #34d399 !important;
}
[data-theme="dark"] .content-box.box-practical {
  border-left-color: #34d399 !important;
}

/* --- Must-memorise highlight --- */
[data-theme="dark"] .must-memorise {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.18)) !important;
  border-left: 3px solid #f87171 !important;
  color: #fecaca !important;
}

/* --- Definition cards (dark mode) --- */
[data-theme="dark"] .content-box.box-definition dl > div {
  background: rgba(96, 165, 250, 0.06) !important;
  border-color: rgba(96, 165, 250, 0.12) !important;
}
[data-theme="dark"] .content-box.box-definition dl > div.must-memorise {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.18)) !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
  border-left-color: #f87171 !important;
}

/* --- Exam badges (already use rgba backgrounds, just brighten text) --- */
[data-theme="dark"] .exam-badge.very-high {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .exam-badge.high {
  background: rgba(251, 146, 60, 0.2) !important;
  color: #fdba74 !important;
}
[data-theme="dark"] .exam-badge.medium {
  background: rgba(250, 204, 21, 0.2) !important;
  color: #fde047 !important;
}

/* --- Grade pills --- */
[data-theme="dark"] .grade-pill.higher {
  background: rgba(167, 139, 250, 0.2) !important;
  color: #c4b5fd !important;
}
[data-theme="dark"] .grade-pill.extension {
  border-color: #a78bfa !important;
  color: #c4b5fd !important;
}

/* --- Knowledge organiser (preserve dark navy theme, override wildcard transparent) --- */
[data-theme="dark"] .box-knowledge-organiser {
  background: #1a1a2e !important;
  border-color: #4a90d9 !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .box-knowledge-organiser h4 {
  color: #ffffff !important;
  border-bottom-color: #4a90d9 !important;
}
[data-theme="dark"] .ko-section {
  background: #16213e !important;
}
[data-theme="dark"] .ko-section h5 {
  color: #4a90d9 !important;
}
[data-theme="dark"] .ko-section li,
[data-theme="dark"] .ko-section p {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .ko-table th {
  background: #0f3460 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .ko-table td {
  border-color: #2a3a5e !important;
  color: #e0e0e0 !important;
}

/* --- Misconception items (inside content) --- */
[data-theme="dark"] .misconception-item {
  background: rgba(248, 113, 113, 0.1) !important;
  border-left-color: #f87171 !important;
}
[data-theme="dark"] .misconception-item * {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .misconception-correction {
  color: #94a3b8 !important;
}

/* --- Quick-check widget --- */
[data-theme="dark"] .quick-check {
  background: rgba(92, 107, 192, 0.15) !important;
  border-color: #7986cb !important;
}
[data-theme="dark"] .quick-check * {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .quick-check-reveal {
  background: #5c6bc0 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .quick-check-answer {
  background: rgba(92, 107, 192, 0.25) !important;
  color: #e2e8f0 !important;
}

/* --- Formula box --- */
[data-theme="dark"] .formula-box {
  background: rgba(33, 150, 243, 0.12) !important;
  border-color: #42a5f5 !important;
}
[data-theme="dark"] .formula-box * {
  color: #e2e8f0 !important;
}

/* --- Tip boxes --- */
[data-theme="dark"] .tip {
  background: rgba(65, 105, 225, 0.12) !important;
  border-color: #6382e9 !important;
}
[data-theme="dark"] .tip * {
  color: #e2e8f0 !important;
}

/* --- Comparison table (in content) --- */
[data-theme="dark"] .comparison-table th {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .comparison-table td {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

/* --- Box comparison table --- */
[data-theme="dark"] .content-box.box-comparison th {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .content-box.box-comparison td {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

/* --- Organelle/feature/cell-type cards (inline content elements) --- */
[data-theme="dark"] .organelle-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .cell-type {
  background: #0f172a !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .organelle-card.plant-specific {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
}

/* --- Explain-back widget --- */
[data-theme="dark"] .explain-back {
  background: rgba(92, 107, 192, 0.1) !important;
  border-color: #7986cb !important;
}
[data-theme="dark"] .explain-back * {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .explain-toggle {
  background: #5c6bc0 !important;
  color: #ffffff !important;
}

/* ==================== */
/* HISTORY-SPECIFIC BOX TYPES (dark mode) */
/* ==================== */

/* --- Causation boxes (amber → warm amber) --- */
[data-theme="dark"] .content-box.box-causation h3,
[data-theme="dark"] .content-box.box-causation h4 {
  color: #f59e0b !important;
}
[data-theme="dark"] .content-box.box-causation {
  border-left-color: #f59e0b !important;
}

/* --- Significance boxes (purple → light purple) --- */
[data-theme="dark"] .content-box.box-significance h3,
[data-theme="dark"] .content-box.box-significance h4 {
  color: #c084fc !important;
}
[data-theme="dark"] .content-box.box-significance {
  border-left-color: #c084fc !important;
}

/* --- Interpretation boxes (ocean blue → sky blue) --- */
[data-theme="dark"] .content-box.box-interpretation h3,
[data-theme="dark"] .content-box.box-interpretation h4 {
  color: #38bdf8 !important;
}
[data-theme="dark"] .content-box.box-interpretation {
  border-left-color: #38bdf8 !important;
}

/* --- Source analysis boxes (crimson → rose) --- */
[data-theme="dark"] .content-box.box-source-analysis h3,
[data-theme="dark"] .content-box.box-source-analysis h4 {
  color: #fb7185 !important;
}
[data-theme="dark"] .content-box.box-source-analysis {
  border-left-color: #fb7185 !important;
}

/* --- Quote boxes inside history content (dark mode) --- */
[data-theme="dark"] .quote-box {
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
[data-theme="dark"] .quote-text {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .quote-source {
  color: #94a3b8 !important;
}