/* ═══════════════════════════════════════════════════════
   DARK MODE — Stop & Think
   Activated by html[data-theme="dark"] attribute
   Set by /assets/theme.js (early inline + deferred toggle)
   ═══════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  /* === Surfaces === */
  --cream:       #14110e;   /* primary bg — warm dark */
  --cream-soft:  #1f1a15;   /* secondary bg */
  --paper:       #14110e;   /* book-page bg (was #ffffff) */
  --paper-dark:  #1f1a15;   /* book-page secondary bg (was #f7f7f7) */
  --line:        #2d251d;   /* borders / dividers */

  /* === Text === */
  --ink:         #ece6d8;   /* primary text */
  --muted:       #a89c8a;   /* secondary text */

  /* === Brand accents — KEEP ORIGINALS (per user pref 2026-05-04) ===
     Rust/copper/navy đủ contrast trên bg dark, không cần lighten. */
  /* --rust, --rust-deep, --copper, --copper-light, --navy, --navy-deep,
     --accent, --gold inherit from light mode. */

  color-scheme: dark;
}

/* Force smooth transition on theme switch (only on body, not children) */
html { transition: background-color 0.25s ease; }
body { transition: background-color 0.25s ease, color 0.25s ease; }

/* ─── Theme toggle button (injected by theme.js) ─── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(26, 20, 16, 0.2);
  cursor: pointer; padding: 0;
  color: inherit;
  transition: background 0.2s, border-color 0.2s;
  border-radius: 0;
  margin-left: 8px;
}
.theme-toggle:hover { background: rgba(26, 20, 16, 0.06); border-color: rgba(26, 20, 16, 0.4); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }

html[data-theme="dark"] .theme-toggle { border-color: rgba(236, 230, 216, 0.25); }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(236, 230, 216, 0.08); border-color: rgba(236, 230, 216, 0.5); }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* ─── Element-specific overrides for dark mode ─── */

/* Library search overlay — keep it usable in dark */
html[data-theme="dark"] .snst-overlay { background: rgba(0, 0, 0, 0.85); }
html[data-theme="dark"] .snst-modal { background: #1f1a15; border-color: #ece6d8; color: #ece6d8; }
html[data-theme="dark"] .snst-modal-head { background: #14110e; border-bottom-color: #2d251d; }
html[data-theme="dark"] .snst-search-bar { background: rgba(236, 230, 216, 0.06); border-color: rgba(236, 230, 216, 0.2); color: var(--ink); }
html[data-theme="dark"] .snst-search-bar:hover { background: rgba(236, 230, 216, 0.1); border-color: rgba(236, 230, 216, 0.4); }
html[data-theme="dark"] .snst-search-bar kbd { background: rgba(236, 230, 216, 0.08); border-color: rgba(236, 230, 216, 0.2); }

/* Selection */
html[data-theme="dark"] ::selection { background: var(--rust); color: var(--cream); }

/* Code blocks if any */
html[data-theme="dark"] code, html[data-theme="dark"] pre {
  background: rgba(236, 230, 216, 0.08);
  border-color: rgba(236, 230, 216, 0.15);
}

/* Form controls */
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background: var(--cream-soft);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted); }

/* Newsletter "Cảm ơn" page */
html[data-theme="dark"] .thanks-block .btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
html[data-theme="dark"] .thanks-block .btn-secondary { color: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .thanks-block .btn-secondary:hover { background: var(--ink); color: var(--cream); }

/* Buttons that have hardcoded ink/cream */
html[data-theme="dark"] .btn-primary { background: var(--rust); color: var(--cream); border-color: var(--rust); }
html[data-theme="dark"] .btn-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); }

/* Cards / shadows soften in dark */
html[data-theme="dark"] .book-card, html[data-theme="dark"] .latest-card, html[data-theme="dark"] .category-card {
  background: var(--cream-soft);
  color: var(--ink);
}

/* Category cards in dark mode — KEEP solid colored bg from light mode.
   Need to set BG too (else line above sets cream-soft for all .category-card).
   Force text to literal values (not vars) since --cream is dark in dark mode. */
html[data-theme="dark"] .category-card.cat-bg-rust   { background: var(--rust);   color: #f5ede0; }
html[data-theme="dark"] .category-card.cat-bg-navy   { background: var(--navy);   color: #f5ede0; }
html[data-theme="dark"] .category-card.cat-bg-copper { background: var(--copper); color: #1a1410; }
/* rust + navy bg → light text */
html[data-theme="dark"] .category-card.cat-bg-rust .cat-title,
html[data-theme="dark"] .category-card.cat-bg-rust .cat-num,
html[data-theme="dark"] .category-card.cat-bg-rust .cat-arrow,
html[data-theme="dark"] .category-card.cat-bg-rust .cat-desc,
html[data-theme="dark"] .category-card.cat-bg-rust .cat-count,
html[data-theme="dark"] .category-card.cat-bg-navy .cat-title,
html[data-theme="dark"] .category-card.cat-bg-navy .cat-num,
html[data-theme="dark"] .category-card.cat-bg-navy .cat-arrow,
html[data-theme="dark"] .category-card.cat-bg-navy .cat-desc,
html[data-theme="dark"] .category-card.cat-bg-navy .cat-count { color: #f5ede0; }
/* copper bg → dark text (matches light mode pattern) */
html[data-theme="dark"] .category-card.cat-bg-copper .cat-title,
html[data-theme="dark"] .category-card.cat-bg-copper .cat-num,
html[data-theme="dark"] .category-card.cat-bg-copper .cat-arrow,
html[data-theme="dark"] .category-card.cat-bg-copper .cat-desc,
html[data-theme="dark"] .category-card.cat-bg-copper .cat-count { color: #1a1410; }
/* .cat-bg-cream is the lightest card — in dark mode treat differently:
   give it dark surface, use light text (mirrors light mode contrast) */
html[data-theme="dark"] .category-card.cat-bg-cream {
  background: var(--cream-soft);
  color: var(--ink);
}

/* About-portrait — lock to light-mode (rust bg + light text) */
html[data-theme="dark"] .about-portrait,
html[data-theme="dark"] a.about-portrait { background: #8b3a2b; color: #f5ede0; }
html[data-theme="dark"] .about-portrait * { color: #f5ede0; }
html[data-theme="dark"] .about-portrait .portrait-num { color: rgba(245,237,224,0.85); }
html[data-theme="dark"] .about-portrait .portrait-role { color: rgba(245,237,224,0.85); }

/* Hero books on index — lock to light-mode appearance.
   Brand colored covers should look identical in both themes. */
html[data-theme="dark"] .book-1 { background: #8b3a2b; color: #f5ede0; }
html[data-theme="dark"] .book-2 { background: #2d4a5c; color: #f5ede0; }
html[data-theme="dark"] .book-3 { background: #c4923c; color: #1a1410; }
html[data-theme="dark"] .book-4 { background: #f7f7f7; color: #1a1410; }
html[data-theme="dark"] .book-5 { background: #1a1410; color: #f5ede0; }


/* Nav bar — was hardcoded rgba(255,255,255,.92) */
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav-bar {
  background: rgba(20, 17, 14, 0.85);
  border-bottom-color: rgba(236, 230, 216, 0.1);
}

/* About section was using --ink as bg in light — invert */
html[data-theme="dark"] .about-compact { background: var(--cream-soft); color: var(--ink); }
html[data-theme="dark"] .about-compact * { color: var(--ink); }

/* Footer if it had white-on-ink */
html[data-theme="dark"] .footer { background: var(--cream-soft); color: var(--ink); }
html[data-theme="dark"] .footer a { color: var(--ink); }
html[data-theme="dark"] .footer-bottom { color: var(--muted); }

/* Reduce harsh contrast for big serif headings */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--ink); }

/* Hero books — they use rust/navy/copper as bg, cream as text — that still works
   because rust/navy/copper are vars (lightened) and cream is dark.
   But .book that uses cream as BG needs to have ink text (not cream which is now bg).
   Override book-3 (cream bg) text color: */
html[data-theme="dark"] .book[style*="background"] { /* if any inline style */ }

/* Subscribe section — typically had white inputs */
html[data-theme="dark"] .subscribe-block { background: var(--cream-soft); }
html[data-theme="dark"] .subscribe-input { background: var(--cream); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .subscribe-btn { background: var(--rust); color: var(--cream); border-color: var(--rust); }
html[data-theme="dark"] .subscribe-btn:hover { background: var(--rust-deep); }

/* Hero/section dividers softer */
html[data-theme="dark"] .section { border-bottom-color: var(--line); }
html[data-theme="dark"] .hero { border-bottom-color: var(--line); }

/* Comments form */
html[data-theme="dark"] .comment-form { background: var(--cream-soft); border-color: var(--ink); }
html[data-theme="dark"] .comment-item { background: var(--cream-soft); border-color: var(--line); }

/* ─── Book interactive widgets (hardcoded #f7f7f7 in inline styles) ─── */
/* These cards are repeated across all 19 books; each book inlines the same #f7f7f7 */
html[data-theme="dark"] .loop-node,
html[data-theme="dark"] .law-card,
html[data-theme="dark"] .percent-box,
html[data-theme="dark"] .flashcard-face,
html[data-theme="dark"] .flashcard-front,
html[data-theme="dark"] .flashcard-back,
html[data-theme="dark"] .quiz-container,
html[data-theme="dark"] .quiz-question,
html[data-theme="dark"] .quiz-option,
html[data-theme="dark"] .journal-help,
html[data-theme="dark"] .journal-textarea,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .principle,
html[data-theme="dark"] .fw-card,
html[data-theme="dark"] .compare-card,
html[data-theme="dark"] .insight,
html[data-theme="dark"] .takeaway,
html[data-theme="dark"] .note,
html[data-theme="dark"] .chap-card,
html[data-theme="dark"] .chapter-card,
html[data-theme="dark"] .identity-card,
html[data-theme="dark"] .myth-card,
html[data-theme="dark"] .reframe-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card {
  background: var(--cream-soft);
  color: var(--ink);
  border-color: var(--line);
}

/* Related-books widget (hardcoded #ebe1cf cream) */
html[data-theme="dark"] .snst-related {
  background: var(--cream-soft);
  color: var(--ink);
  border-top-color: var(--line);
}
html[data-theme="dark"] .snst-related-card { background: var(--cream); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .snst-related-card:hover { border-color: var(--rust); }

/* Quiz answered states */
html[data-theme="dark"] .quiz-option.is-correct { background: rgba(212, 168, 101, 0.18); border-color: var(--copper); }
html[data-theme="dark"] .quiz-option.is-wrong   { background: rgba(212, 113, 94, 0.15); border-color: var(--rust); }

/* Em accent in headings was using rust — keep but lightened (already via var) */

/* === ISSUE A: Inverted-bg sections (journal/etc) — text was hardcoded white === */
/* In light mode .journal-section has DARK bg + white text.
   In dark mode --ink becomes light → bg becomes LIGHT.
   But hardcoded rgba(255,255,255,*) text stays white → invisible on light bg.
   Force these to dark text. */
html[data-theme="dark"] .journal-section .section-intro,
html[data-theme="dark"] .journal-section .section-title { color: #1a1410 !important; }
html[data-theme="dark"] .journal-section .journal-prompt { background: rgba(0,0,0,0.06); border-left-color: var(--rust); }
html[data-theme="dark"] .journal-section .journal-prompt p,
html[data-theme="dark"] .journal-section .journal-prompt-hint { color: rgba(0,0,0,0.6); }
html[data-theme="dark"] .journal-section .journal-prompt-num { color: var(--rust); }

/* === ISSUE B: Compare cards / colored bg cards — color: var(--paper) becomes dark === */
/* These cards have brand colored bg + use var(--paper) for text.
   --paper flips to dark in dark mode → dark text on color bg = invisible. */
html[data-theme="dark"] .compare-card.a,
html[data-theme="dark"] .compare-card.b,
html[data-theme="dark"] .compare-card.a *,
html[data-theme="dark"] .compare-card.b * { color: #f5ede0 !important; }

/* Sapiens-style inline cards using var(--accent-2)/var(--navy) bg */
html[data-theme="dark"] [style*="background: var(--accent-2)"],
html[data-theme="dark"] [style*="background:var(--accent-2)"],
html[data-theme="dark"] [style*="background: var(--navy)"],
html[data-theme="dark"] [style*="background:var(--navy)"],
html[data-theme="dark"] [style*="background: var(--rust)"],
html[data-theme="dark"] [style*="background:var(--rust)"] { color: #f5ede0 !important; }
html[data-theme="dark"] [style*="background: var(--accent-2)"] *,
html[data-theme="dark"] [style*="background: var(--navy)"] *,
html[data-theme="dark"] [style*="background: var(--rust)"] * { color: inherit; }

/* === ISSUE C: Body p in dark mode — was using --muted (#a89c8a) too dim === */
/* Boost --muted contrast in book sections */
html[data-theme="dark"] .about-section p,
html[data-theme="dark"] .section p,
html[data-theme="dark"] section p { color: #c8bfae; }
html[data-theme="dark"] .section-intro,
html[data-theme="dark"] .about-section .intro { color: #c8bfae; }

/* === ISSUE D: Table body cells dim === */
html[data-theme="dark"] table td,
html[data-theme="dark"] .fic-table td,
html[data-theme="dark"] table tr { color: var(--ink); }
html[data-theme="dark"] .fic-table tr:hover { background: rgba(236, 230, 216, 0.06); }

/* === ISSUE E: Category hero tagline too faded === */
html[data-theme="dark"] .cat-hero-tagline { color: rgba(245, 237, 224, 0.95); opacity: 1; }

/* === Book covers cat-bg-* on category pages — text visibility === */
html[data-theme="dark"] .book-cover .book-cover-title,
html[data-theme="dark"] .book-cover.cover-rust *,
html[data-theme="dark"] .book-cover.cover-navy *,
html[data-theme="dark"] .cover-rust *,
html[data-theme="dark"] .cover-navy * { color: #f5ede0; }
html[data-theme="dark"] .cover-copper *,
html[data-theme="dark"] .cover-cream * { color: #1a1410; }

/* === MOBILE TABLE/GRID fixes (apply both light + dark mode) === */
@media (max-width: 640px) {
  /* Tables: stack rows as cards instead of squeezing columns */
  table.fic-table, table.lat-table, table.cross-table {
    display: block;
  }
  table.fic-table thead, table.lat-table thead, table.cross-table thead {
    display: none;  /* hide header row on mobile, use td-prefix instead */
  }
  table.fic-table tbody, table.lat-table tbody, table.cross-table tbody { display: block; }
  table.fic-table tr, table.lat-table tr, table.cross-table tr {
    display: block;
    margin-bottom: 24px;
    padding: 16px;
    border: 1.5px solid var(--ink);
    background: var(--paper-dark);
  }
  table.fic-table td, table.lat-table td, table.cross-table td {
    display: block;
    padding: 6px 0;
    border: none;
    font-size: 14px;
    line-height: 1.55;
  }
  table.fic-table td:first-child, table.lat-table td:first-child, table.cross-table td:first-child {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent, var(--rust));
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(26,20,16,0.15);
  }

  /* Inline grids with repeat(N, 1fr) where N>=3 → stack 2 cols or 1 col */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 400px) {
  /* Very narrow → single column for everything */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   MOBILE: 2-COL INLINE GRIDS (1fr 1fr) STACK VERTICALLY
   Catches Mindset comfort/stretch/panic zone (image left + text right)
   and any inline `grid-template-columns: 1fr 1fr` 2-col layout.
   Image/svg above, text below — better than narrow squeezed text column.
   ============================================================ */
@media (max-width: 700px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ============================================================
   MOBILE: SHRINK OVERSIZED STAT NUMBERS
   Thinking Fast and Slow .prospect-side .num is 36px desktop —
   "+ 1,000,000 đ" wraps to 3 lines on 390px viewport because
   the card padding + bold weight squeeze tokens onto separate lines.
   Reduce to 24px so it fits on one line.
   Same for any large stat-number display.
   ============================================================ */
@media (max-width: 700px) {
  .prospect-side .num,
  .prospect-side .num-label,
  .stat-number,
  .big-num,
  .num-display {
    font-size: 24px !important;
    line-height: 1.2 !important;
    word-spacing: -0.05em !important;
  }
  .prospect-side {
    padding: 18px !important;
  }
  .prospect-side .desc {
    font-size: 14px !important;
  }
  .prospect-viz {
    padding: 24px !important;
  }
}

/* ============================================================
   ISSUE G: Hero ".think" word — navy #2d4a5c invisible on dark bg
   Lighter navy #7da9c2 keeps "Stop & think." brand feel + passes WCAG
   ============================================================ */
html[data-theme="dark"] .think {
  color: #7da9c2 !important;
}