/* ============================================================================
   EPIC Academy — THEME DARK
   ----------------------------------------------------------------------------
   File ini HANYA berisi tampilan mode gelap. Mode terang tetap memakai
   token asli yang ada di blok <style> tiap halaman (:root).

   Cara kerja:
   - theme-toggle.js menaruh atribut  data-theme="dark"  dan
     data-bs-theme="dark"  di elemen <html>.
   - Selector html[data-theme="dark"] punya specificity lebih tinggi dari
     :root, jadi semua token brand di bawah ini otomatis menimpa versi terang.
   - data-bs-theme="dark" ditangani Bootstrap 5.3 sendiri (modal, form,
     dropdown, btn-close, dll ikut gelap tanpa CSS tambahan).

   ATURAN EDIT:
   - Jangan menaruh warna mode terang di sini.
   - Kalau ada komponen baru yang backgroundnya di-hardcode (#fff / white),
     tambahkan override-nya di bagian "PATCH KOMPONEN" paling bawah.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKEN WARNA MODE GELAP
   Nama variabel sengaja sama persis dengan versi terang supaya semua CSS
   lama (yang sudah memakai var(--ink), var(--cream), dst) langsung ikut.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Teal brand (dari kartu profil) dicerahkan supaya tetap terbaca di atas gelap */
  --primary-900: #041C24;
  --primary-800: #083845;
  --primary-700: #0F7A96;
  --primary-600: #2FA8C4;   /* warna aksi utama versi gelap */
  --primary-500: #4FC9E3;
  --primary-100: #0D3D4B;   /* dulu tint terang -> jadi panel gelap */
  --primary-50:  #0A303C;

  /* Aksen cyan-teal (turunan #3FB9D4) dicerahkan supaya kontras di background gelap */
  --accent-600: #4FC9E3;
  --accent-500: #4FC9E3;
  --accent-100: #0B3F4C;

  /* Netral / teks */
  --ink:       #E3EEF1;
  --ink-soft:  #A2BCC4;
  --ink-faint: #7A949C;
  --line:      #15404E;
  --cream:     #08222B;

  /* Permukaan (kartu, panel). Token baru — dipakai di bagian PATCH */
  --surface:   #0C2B36;
  --surface-2: #0F3844;
  --surface-3: #144757;

  /* Bayangan: di mode gelap shadow hitam nyaris tak terlihat,
     jadi dibuat lebih pekat + sedikit garis tepi */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .55);

  --brand-gradient: linear-gradient(135deg, #03181F 0%, #08485A 55%, #0C7089 100%);

  /* Variabel Bootstrap */
  --bs-body-bg: #061F27;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--primary-500);
  --bs-border-color: var(--line);
}

/* Transisi halus saat tombol tema ditekan.
   Dimatikan untuk pengguna yang memilih "reduce motion". */
html.theme-transition,
html.theme-transition body,
html.theme-transition * {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transition, html.theme-transition * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   2. DASAR HALAMAN
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body {
  background: var(--bs-body-bg) !important;
  color: var(--ink);
}

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 { color: var(--ink); }

html[data-theme="dark"] p { color: var(--ink-soft); }

/* Utility Bootstrap yang memaksa background terang */
html[data-theme="dark"] .bg-white { background: var(--surface) !important; }
html[data-theme="dark"] .bg-light { background: var(--cream) !important; }
html[data-theme="dark"] .btn-light {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .btn-light:hover { background: var(--surface-3); color: #fff; }

html[data-theme="dark"] .btn-outline-secondary {
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
  color: #fff;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom { border-color: var(--line) !important; }

/* ---------------------------------------------------------------------------
   3. NAVBAR & FOOTER
   Navbar sudah gelap di mode terang, jadi hanya dituakan sedikit.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] #mainNavbar {
  background: #083845 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
}
@media (max-width: 991.98px) {
  html[data-theme="dark"] #mainNavbar .navbar-collapse {
    background: #083845;
    border-color: #0F4E60;
  }
}
html[data-theme="dark"] footer.site-v2 { background: #04222B; }
html[data-theme="dark"] footer.site-v2 .foot-bottom { border-top-color: var(--line); }

/* ---- GEMS-language layer (gems-style-system.css) di mode gelap ---- */
html[data-theme="dark"] .epic-navbar-inner{
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.7);
}
html[data-theme="dark"] #mainNavbar.scrolled .epic-navbar-inner{
  background: rgba(4,34,43,.97);
}
html[data-theme="dark"] .hero-v2::after,
html[data-theme="dark"] .roadmap-hero::after,
html[data-theme="dark"] .quiz-hero::after,
html[data-theme="dark"] .stories-hero::after,
html[data-theme="dark"] .contact::after,
html[data-theme="dark"] .alumni::after{ opacity:.22; }

/* ---------------------------------------------------------------------------
   4. PATCH KOMPONEN
   Daftar selector di bawah ini adalah komponen yang di CSS aslinya menulis
   warna terang secara hardcode (background:#fff / white / #F1F6F8) sehingga
   TIDAK ikut berubah lewat token. Tambahkan selector baru di sini kalau
   nanti kamu bikin kartu baru dengan background putih.
   --------------------------------------------------------------------------- */

/* --- Homepage (welcome.blade.php + home-v2.css) --- */
html[data-theme="dark"] .prog-card-big,
html[data-theme="dark"] .prog-card-sm,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .vm-col,
html[data-theme="dark"] .testi-card,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .about-copy-panel,
html[data-theme="dark"] .hero-badge-card,
html[data-theme="dark"] .detail-meta,
html[data-theme="dark"] .meta-chip,
html[data-theme="dark"] .tab-feats li {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .prog-card-big:hover,
html[data-theme="dark"] .prog-card-sm:hover,
html[data-theme="dark"] .why-card:hover,
html[data-theme="dark"] .story-card:hover,
html[data-theme="dark"] .program-card:hover { box-shadow: var(--shadow-md); }

html[data-theme="dark"] .prog-card-big .prog-flag-badge,
html[data-theme="dark"] .testi-avatar .flag-corner,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .about-logo { background: var(--surface-2) !important; }

html[data-theme="dark"] .testi-nav-btn {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .testi-nav-btn:hover { background: var(--primary-700) !important; color: #fff; }

html[data-theme="dark"] .stamp {
  background: var(--primary-100);
  border-color: var(--primary-800);
  color: var(--primary-500);
}

html[data-theme="dark"] .readmore-btn { color: var(--primary-500); }

/* --- Roadmap (roadmap.blade.php + roadmap.css) --- */
html[data-theme="dark"] .flow-node,
html[data-theme="dark"] .legend-grid,
html[data-theme="dark"] .program-card,
html[data-theme="dark"] .timeline-marker {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .flow-section { background: var(--cream); }
html[data-theme="dark"] .filter-btn {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft);
}
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-btn:hover {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: #fff;
}
html[data-theme="dark"] .flow-legend-hint { color: var(--ink-faint); }

/* --- Quiz (quiz.blade.php + quiz.css) --- */
html[data-theme="dark"] .quiz-container,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .option-label,
html[data-theme="dark"] .results-summary,
html[data-theme="dark"] .results-actions,
html[data-theme="dark"] .result-program-card,
html[data-theme="dark"] .score-comparison,
html[data-theme="dark"] .share-btn {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .option-label:hover,
html[data-theme="dark"] .option-input:checked + .option-label {
  background: var(--primary-100) !important;
  border-color: var(--primary-600) !important;
}
html[data-theme="dark"] .progress { background: var(--surface-2); }

/* --- Success Stories (success-stories.blade.php + success-stories.css) --- */
html[data-theme="dark"] .story-card,
html[data-theme="dark"] .stories-count {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .story-card .story-quote { color: var(--ink-soft); }
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--ink-faint); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--primary-600);
  box-shadow: 0 0 0 .2rem rgba(47,168,196, .25);
}

/* --- Modal (dipakai homepage & roadmap) --- */
html[data-theme="dark"] .modal-content {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--line); }

/* ---------------------------------------------------------------------------
   5. GAMBAR
   Logo dan bendera dibiarkan apa adanya. Hanya screenshot/ilustrasi yang
   diberi kelas .dim-on-dark yang diredupkan sedikit supaya tidak menyilaukan.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .dim-on-dark { filter: brightness(.88) contrast(1.02); }

/* ---------------------------------------------------------------------------
   6. CETAK / EKSPOR PDF
   pdf-export.js memotret elemen apa adanya. Supaya PDF selalu terbaca,
   proses ekspor memaksa tema terang lewat kelas .force-light (lihat
   theme-toggle.js), dan saat mencetak tema gelap dinonaktifkan.
   --------------------------------------------------------------------------- */
@media print {
  html[data-theme="dark"] body { background: #fff !important; color: #111 !important; }
  html[data-theme="dark"] .modal-content,
  html[data-theme="dark"] .story-card,
  html[data-theme="dark"] .program-card,
  html[data-theme="dark"] .result-program-card { background: #fff !important; color: #111 !important; }
}

/* ---------------------------------------------------------------------------
   7. PENYELARASAN PALET TEAL — mode gelap
   Token tambahan dari gems-style-system.css juga perlu versi gelapnya,
   dan tombol solid putih di hero (yang di mode terang dibalik) dikembalikan
   ke teal terang supaya tidak menyilaukan di layar gelap.
   --------------------------------------------------------------------------- */
html[data-theme="dark"]{
  --primary-400: #3FB9D4;
  --primary-300: #7FCFE0;
  --accent-700:  #2FA8C4;
  --brand-gradient-deep: linear-gradient(160deg, #03181F 0%, #083845 45%, #0F5A70 100%);
}
html[data-theme="dark"] .hero-v2 .btn-gold,
html[data-theme="dark"] .roadmap-hero .btn-gold,
html[data-theme="dark"] .quiz-hero .btn-gold,
html[data-theme="dark"] .stories-hero .btn-gold,
html[data-theme="dark"] .cta-bar .btn-gold,
html[data-theme="dark"] .contact .btn-gold,
html[data-theme="dark"] .alumni .btn-gold,
html[data-theme="dark"] .epic-nav-cta.btn-gold{
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: #04222B !important;
}
html[data-theme="dark"] .hero-v2 .btn-gold:hover,
html[data-theme="dark"] .roadmap-hero .btn-gold:hover,
html[data-theme="dark"] .quiz-hero .btn-gold:hover,
html[data-theme="dark"] .stories-hero .btn-gold:hover,
html[data-theme="dark"] .cta-bar .btn-gold:hover,
html[data-theme="dark"] .contact .btn-gold:hover,
html[data-theme="dark"] .alumni .btn-gold:hover,
html[data-theme="dark"] .epic-nav-cta.btn-gold:hover{
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #04222B !important;
}
html[data-theme="dark"] footer.site,
html[data-theme="dark"] footer.site-v2{ background: #04222B; }
html[data-theme="dark"] .stamp{
  background: var(--primary-100); border-color: var(--primary-800); color: var(--primary-500);
}
html[data-theme="dark"]{ scrollbar-color: var(--primary-700) var(--surface); }
html[data-theme="dark"] ::-webkit-scrollbar-track{ background: var(--surface); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: var(--primary-700); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: var(--primary-600); }
