/* ============================================
   DARK MODE FIXES - Universal Overrides
   Fixes hardcoded colors in inline styles
   Uses html.dark + html[data-theme='dark'] for maximum specificity
   to beat Tailwind CDN injected styles and inline styles
   ============================================ */

/* ============================================
   BODY & MAIN CONTAINER BACKGROUNDS
   ============================================ */

html.dark body,
html[data-theme='dark'] body,
[data-theme='dark'] body {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  background-image: repeating-linear-gradient(0deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.02) 1px,
      rgba(255, 255, 255, 0.02) 2px) !important;
}

/* ============================================
   BENTO CARDS & COURSE INDEX CARDS
   ============================================ */

html.dark .bento-card,
html[data-theme='dark'] .bento-card,
[data-theme='dark'] .bento-card {
  background: #2A2A2A !important;
  color: #FFFFFF !important;
  border-color: #555555 !important;
  box-shadow: 6px 6px 0px #FFFFFF !important;
}

html.dark .bento-card.active,
html[data-theme='dark'] .bento-card.active,
[data-theme='dark'] .bento-card.active {
  background: linear-gradient(135deg, #3a2020 0%, #2A2A2A 100%) !important;
  border-color: #CC0000 !important;
}

html.dark .bento-card.coming-soon,
html[data-theme='dark'] .bento-card.coming-soon,
[data-theme='dark'] .bento-card.coming-soon {
  background: repeating-linear-gradient(45deg, #222, #222 10px, #2A2A2A 10px, #2A2A2A 20px) !important;
}

html.dark .card-title,
html[data-theme='dark'] .card-title,
[data-theme='dark'] .card-title { color: #FFFFFF !important; }

html.dark .card-description,
html[data-theme='dark'] .card-description,
[data-theme='dark'] .card-description { color: #CCCCCC !important; }

/* ============================================
   INTRO / HERO SECTIONS
   ============================================ */

html.dark .intro-section,
html[data-theme='dark'] .intro-section,
[data-theme='dark'] .intro-section {
  background: linear-gradient(135deg, #1a3a3a 0%, #2a2a1a 100%) !important;
  color: #FFFFFF !important;
}

html.dark .hero-section,
html[data-theme='dark'] .hero-section,
[data-theme='dark'] .hero-section {
  background-color: #2A2A2A !important;
  color: #FFFFFF !important;
}

/* ============================================
   HEADINGS - universal override
   ============================================ */

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html[data-theme='dark'] h1, html[data-theme='dark'] h2, html[data-theme='dark'] h3,
html[data-theme='dark'] h4, html[data-theme='dark'] h5, html[data-theme='dark'] h6,
[data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3,
[data-theme='dark'] h4, [data-theme='dark'] h5, [data-theme='dark'] h6 {
  color: #FFFFFF !important;
}

/* ============================================
   PARAGRAPHS & TEXT
   ============================================ */

html.dark p, html.dark li, html.dark span,
html[data-theme='dark'] p, html[data-theme='dark'] li, html[data-theme='dark'] span,
[data-theme='dark'] p, [data-theme='dark'] li {
  color: #CCCCCC !important;
}

/* Keep white text on colored backgrounds */
html.dark .card-day, html.dark [class*="badge"], html.dark [class*="tag"],
html[data-theme='dark'] .card-day, html[data-theme='dark'] [class*="badge"],
[data-theme='dark'] .card-day, [data-theme='dark'] [class*="badge"] {
  color: #FFFFFF !important;
}

html[data-theme='dark'] .container,
html[data-theme='dark'] .max-w-4xl,
html[data-theme='dark'] .max-w-3xl,
html[data-theme='dark'] .max-w-2xl,
[data-theme='dark'] .container,
[data-theme='dark'] .max-w-4xl,
[data-theme='dark'] .max-w-3xl,
[data-theme='dark'] .max-w-2xl {
  background-color: transparent !important;
}

/* ============================================
   CONCEPT CARDS & CONTENT BOXES
   ============================================ */

html[data-theme='dark'] .concept-card,
html[data-theme='dark'] .course-card,
html[data-theme='dark'] .notes-card,
html[data-theme='dark'] .content-card,
html[data-theme='dark'] .info-card,
html[data-theme='dark'] .practice-card,
html[data-theme='dark'] .example-card,
html[data-theme='dark'] .definition-card,
html[data-theme='dark'] .theorem-card,
html[data-theme='dark'] .proof-card,
html[data-theme='dark'] .note-box,
html[data-theme='dark'] .warning-box,
html[data-theme='dark'] .tip-box,
html[data-theme='dark'] .important-box,
[data-theme='dark'] .concept-card,
[data-theme='dark'] .course-card,
[data-theme='dark'] .notes-card,
[data-theme='dark'] .content-card,
[data-theme='dark'] .info-card,
[data-theme='dark'] .practice-card,
[data-theme='dark'] .example-card,
[data-theme='dark'] .definition-card,
[data-theme='dark'] .theorem-card,
[data-theme='dark'] .proof-card,
[data-theme='dark'] .note-box,
[data-theme='dark'] .warning-box,
[data-theme='dark'] .tip-box,
[data-theme='dark'] .important-box {
  background-color: #2A2A2A !important;
  color: #FFFFFF !important;
  border-color: #555555 !important;
  box-shadow: 4px 4px 0 #FFFFFF !important;
}

/* ============================================
   WHITE BACKGROUND FIXES (most common issue)
   ============================================ */

/* Fix for style="background-color: #ffffff" */
[data-theme='dark'] [style*="background-color: #ffffff"],
[data-theme='dark'] [style*="background-color:#ffffff"],
[data-theme='dark'] [style*="background-color: #FFFFFF"],
[data-theme='dark'] [style*="background-color:#FFFFFF"],
[data-theme='dark'] [style*="background-color: white"],
[data-theme='dark'] [style*="background-color:white"] {
  background-color: var(--nb-bg-white) !important;
}

/* Fix for style="background: #ffffff" */
[data-theme='dark'] [style*="background: #fff"],
[data-theme='dark'] [style*="background:#fff"],
[data-theme='dark'] [style*="background: white"],
[data-theme='dark'] [style*="background:white"] {
  background: var(--nb-bg-white) !important;
}

/* ============================================
   LIGHT BACKGROUND COLORS
   ============================================ */

/* Fix for style="background-color: #f8f7f2" */
[data-theme='dark'] [style*="background-color: #f8f7f2"],
[data-theme='dark'] [style*="background-color:#f8f7f2"] {
  background-color: var(--nb-bg-light) !important;
}

/* Fix for style="background-color: #e8e8e8" */
[data-theme='dark'] [style*="background-color: #e8e8e8"],
[data-theme='dark'] [style*="background-color:#e8e8e8"] {
  background-color: var(--nb-bg-alt) !important;
}

/* Fix for gray-50 backgrounds - high specificity to beat Tailwind CDN */
html[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] .bg-gray-50,
html[data-theme='dark'] [style*="background-color: #f9fafb"],
html[data-theme='dark'] [style*="background: #f9fafb"],
html[data-theme='dark'] [style*="background-color: rgb(249, 250, 251)"] {
  background-color: #2A2A2A !important;
  color: #FFFFFF !important;
}

/* Fix for gray-100 backgrounds */
html[data-theme='dark'] .bg-gray-100,
[data-theme='dark'] .bg-gray-100,
html[data-theme='dark'] [style*="background-color: #f3f4f6"],
html[data-theme='dark'] [style*="background: #f3f4f6"],
html[data-theme='dark'] [style*="background-color: rgb(243, 244, 246)"] {
  background-color: #333333 !important;
  color: #FFFFFF !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */

/* Fix for style="color: #2c2c2c" (dark text on light bg) */
[data-theme='dark'] [style*="color: #2c2c2c"],
[data-theme='dark'] [style*="color:#2c2c2c"],
[data-theme='dark'] [style*="color: #333"],
[data-theme='dark'] [style*="color:#333"],
[data-theme='dark'] [style*="color: #1a1a1a"],
[data-theme='dark'] [style*="color:#1a1a1a"],
[data-theme='dark'] [style*="color: #000"],
[data-theme='dark'] [style*="color:#000"],
[data-theme='dark'] [style*="color: black"],
[data-theme='dark'] [style*="color:black"] {
  color: var(--nb-text-primary) !important;
}

/* Gray text colors */
[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-500,
[data-theme='dark'] [style*="color: #6b7280"],
[data-theme='dark'] [style*="color: #9ca3af"],
[data-theme='dark'] [style*="color: rgb(107, 114, 128)"],
[data-theme='dark'] [style*="color: rgb(156, 163, 175)"] {
  color: var(--nb-text-secondary) !important;
}

/* ============================================
   TAILWIND CSS DARK MODE OVERRIDES
   ============================================ */

[data-theme='dark'] .bg-white {
  background-color: var(--nb-bg-white) !important;
}

[data-theme='dark'] .bg-black {
  background-color: var(--nb-bg-dark) !important;
}

[data-theme='dark'] .text-black {
  color: var(--nb-text-primary) !important;
}

[data-theme='dark'] .text-white {
  color: var(--nb-text-white) !important;
}

[data-theme='dark'] .border-black {
  border-color: var(--nb-border-dark) !important;
}

[data-theme='dark'] .border-gray-200,
[data-theme='dark'] .border-gray-300 {
  border-color: var(--nb-border-gray) !important;
}

/* ============================================
   CODE & PREFORMATTED TEXT
   ============================================ */

[data-theme='dark'] code,
[data-theme='dark'] pre,
[data-theme='dark'] .code-block,
[data-theme='dark'] .code-inline,
[data-theme='dark'] .highlight,
[data-theme='dark'] .highlighter-rouge {
  background-color: var(--nb-bg-alt) !important;
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-gray) !important;
}

[data-theme='dark'] pre {
  background-color: #1a1a1a !important;
  border: 1px solid var(--nb-border-gray) !important;
}

[data-theme='dark'] code {
  background-color: rgba(255, 255, 255, 0.1) !important;
  padding: 2px 6px;
  border-radius: 0;
}

/* ============================================
   MATH & SPECIAL CONTENT
   ============================================ */

[data-theme='dark'] .math,
[data-theme='dark'] .math-inline,
[data-theme='dark'] .math-block,
[data-theme='dark'] .katex,
[data-theme='dark'] .katex-display {
  color: var(--nb-text-primary) !important;
}

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

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
[data-theme='dark'] .chapter-title,
[data-theme='dark'] .section-title,
[data-theme='dark'] .subsection-title {
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-dark) !important;
}

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

[data-theme='dark'] a {
  color: var(--nb-accent-red) !important;
}

[data-theme='dark'] a:hover {
  color: var(--nb-text-primary) !important;
}

/* Keep white text on colored backgrounds */
[data-theme='dark'] a.home-button,
[data-theme='dark'] .summary-card a,
[data-theme='dark'] .bg-\[#e07a5f\] a,
[data-theme='dark'] .bg-\[#CC0000\] a,
[data-theme='dark'] button a {
  color: var(--nb-text-white) !important;
}

/* ============================================
   TABLES
   ============================================ */

[data-theme='dark'] table,
[data-theme='dark'] .table,
[data-theme='dark'] .data-table {
  background-color: var(--nb-bg-white) !important;
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-dark) !important;
}

[data-theme='dark'] th {
  background-color: var(--nb-bg-alt) !important;
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-dark) !important;
}

[data-theme='dark'] td {
  border-color: var(--nb-border-gray) !important;
}

[data-theme='dark'] tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme='dark'] tr:hover td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

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

[data-theme='dark'] ul,
[data-theme='dark'] ol,
[data-theme='dark'] li {
  color: var(--nb-text-primary) !important;
}

[data-theme='dark'] li::marker {
  color: var(--nb-text-secondary) !important;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

[data-theme='dark'] .home-button {
  background-color: var(--nb-comp) !important;
  color: var(--nb-text-white) !important;
}

[data-theme='dark'] .home-button:hover {
  background-color: var(--nb-accent-red-dark) !important;
}

[data-theme='dark'] .quiz-option,
[data-theme='dark'] .answer-option,
[data-theme='dark'] .choice-button {
  background-color: var(--nb-bg-white) !important;
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-dark) !important;
}

[data-theme='dark'] .quiz-option:hover,
[data-theme='dark'] .answer-option:hover,
[data-theme='dark'] .choice-button:hover {
  background-color: var(--nb-bg-alt) !important;
  border-color: var(--nb-accent-red) !important;
}

[data-theme='dark'] .quiz-option.selected,
[data-theme='dark'] .answer-option.selected,
[data-theme='dark'] .choice-button.selected {
  background-color: var(--nb-accent-red) !important;
  color: var(--nb-text-white) !important;
}

[data-theme='dark'] .quiz-option.correct,
[data-theme='dark'] .answer-option.correct {
  background-color: #1a5f1a !important;
  color: var(--nb-text-white) !important;
  border-color: #2a8f2a !important;
}

[data-theme='dark'] .quiz-option.incorrect,
[data-theme='dark'] .answer-option.incorrect {
  background-color: #5f1a1a !important;
  color: var(--nb-text-white) !important;
  border-color: #8f2a2a !important;
}

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

[data-theme='dark'] .summary-card,
[data-theme='dark'] .gradient-card,
[data-theme='dark'] [style*="linear-gradient"] {
  background: linear-gradient(135deg, var(--nb-comp) 0%, #99443a 100%) !important;
  color: var(--nb-text-white) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select {
  background-color: var(--nb-bg-white) !important;
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-dark) !important;
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: var(--nb-text-tertiary) !important;
}

[data-theme='dark'] input:focus,
[data-theme='dark'] textarea:focus,
[data-theme='dark'] select:focus {
  border-color: var(--nb-accent-red) !important;
  outline-color: var(--nb-accent-red) !important;
}

/* ============================================
   SPECIAL COMPONENTS
   ============================================ */

/* Solution/Answer boxes */
[data-theme='dark'] .solution,
[data-theme='dark'] .answer,
[data-theme='dark'] .answer-box {
  background-color: rgba(26, 95, 26, 0.2) !important;
  border-color: #2a8f2a !important;
  color: var(--nb-text-primary) !important;
}

/* Example boxes */
[data-theme='dark'] .example,
[data-theme='dark'] .example-box {
  background-color: rgba(0, 102, 204, 0.1) !important;
  border-color: #4488ff !important;
  color: var(--nb-text-primary) !important;
}

/* Warning boxes */
[data-theme='dark'] .warning,
[data-theme='dark'] .warning-box {
  background-color: rgba(204, 153, 0, 0.15) !important;
  border-color: #cc9900 !important;
  color: var(--nb-text-primary) !important;
}

/* ============================================
   SYNTAX HIGHLIGHTING (for code)
   ============================================ */

[data-theme='dark'] .keyword { color: #ff79c6 !important; }
[data-theme='dark'] .string { color: #f1fa8c !important; }
[data-theme='dark'] .comment { color: #6272a4 !important; }
[data-theme='dark'] .function { color: #50fa7b !important; }
[data-theme='dark'] .number { color: #bd93f9 !important; }
[data-theme='dark'] .operator { color: #ff79c6 !important; }
[data-theme='dark'] .punctuation { color: #f8f8f2 !important; }

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */

[data-theme='dark'] hr,
[data-theme='dark'] .divider,
[data-theme='dark'] .section-divider {
  border-color: var(--nb-border-dark) !important;
}

[data-theme='dark'] .border {
  border-color: var(--nb-border-dark) !important;
}

/* ============================================
   SPECIFIC PAGE FIXES
   ============================================ */

/* Fix for divs with inline background colors */
[data-theme='dark'] div[style*="background"],
[data-theme='dark'] section[style*="background"],
[data-theme='dark'] article[style*="background"],
[data-theme='dark'] aside[style*="background"] {
  /* Only override if it's a light color */
  --lightness: 0.9;
}

/* Breadcrumb fixes */
[data-theme='dark'] .breadcrumb,
[data-theme='dark'] .breadcrumbs {
  background-color: transparent !important;
  color: var(--nb-text-secondary) !important;
}

/* Navigation fixes */
[data-theme='dark'] nav,
[data-theme='dark'] .nav,
[data-theme='dark'] .navigation {
  background-color: var(--nb-bg-white) !important;
  border-color: var(--nb-border-dark) !important;
}

/* ============================================
   PRINT STYLES (preserve dark mode for printing)
   ============================================ */

@media print {
  [data-theme='dark'] body {
    background-color: white !important;
    color: black !important;
  }

  [data-theme='dark'] .concept-card,
  [data-theme='dark'] .course-card,
  [data-theme='dark'] .notes-card {
    background-color: white !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}