/* ============================================================
   SeriFi Village Digital Literacy — Theme System
   ประกาศสี explicit ทั้ง light/dark theme เพื่อป้องกันปัญหา
   เบราว์เซอร์ auto-dark-mode บังคับกลับสี จนตัวอักษรมองไม่เห็น
   ============================================================ */

:root,
[data-bs-theme="light"] {
  --sv-green: #0b6e4f;
  --sv-green-dark: #084c37;
  --sv-gold: #d9a441;

  --sv-bg: #f6f8f7;
  --sv-text: #1c2b26;
  --sv-muted: #5c6b66;
  --sv-card-bg: #ffffff;
  --sv-card-text: #1c2b26;
  --sv-border: #e3e8e6;
  --sv-navbar-text: #ffffff;
  --sv-input-bg: #ffffff;
  --sv-input-text: #1c2b26;

  color-scheme: light;
}

[data-bs-theme="dark"] {
  --sv-green: #16a874;
  --sv-green-dark: #0a3d2c;
  --sv-gold: #e8bd63;

  --sv-bg: #101917;
  --sv-text: #eef3f1;
  --sv-muted: #a9b8b3;
  --sv-card-bg: #17221f;
  --sv-card-text: #eef3f1;
  --sv-border: #253833;
  --sv-navbar-text: #ffffff;
  --sv-input-bg: #1c2b27;
  --sv-input-text: #eef3f1;

  color-scheme: dark;
}

body {
  background-color: var(--sv-bg);
  color: var(--sv-text);
  font-family: 'Segoe UI', 'Noto Sans Thai', sans-serif;
  transition: background-color .15s ease, color .15s ease;
}

a { color: var(--sv-green); }
a:hover { color: var(--sv-green-dark); }
[data-bs-theme="dark"] a:hover { color: var(--sv-gold); }

.text-muted { color: var(--sv-muted) !important; }

/* ---------- Navbar (always dark bg, always light text — needs no theme switch) ---------- */
.main-navbar {
  background: linear-gradient(90deg, var(--sv-green-dark), var(--sv-green));
}
.main-navbar,
.main-navbar .nav-link,
.main-navbar .navbar-brand {
  color: var(--sv-navbar-text) !important;
}
.main-navbar .nav-link:hover,
.main-navbar .navbar-brand:hover {
  color: var(--sv-gold) !important;
}
.main-navbar .dropdown-menu {
  background-color: var(--sv-card-bg);
}
.main-navbar .dropdown-item {
  color: var(--sv-card-text);
}
.main-navbar .dropdown-item:hover,
.main-navbar .dropdown-item:focus {
  background-color: var(--sv-bg);
  color: var(--sv-card-text);
}
.main-navbar .form-control {
  background-color: rgba(255,255,255,.95);
  color: #1c2b26;
  border: none;
}
.main-navbar .form-control::placeholder { color: #6b7a75; }

/* ---------- Footer (always dark bg) ---------- */
.footer-main {
  background: var(--sv-green-dark);
  color: #fff;
}
.footer-main .text-white-50 { color: rgba(255,255,255,.65) !important; }

/* ---------- Hero ---------- */
.hero-section {
  background: linear-gradient(135deg, var(--sv-green-dark), var(--sv-green));
  color: #fff;
  border-radius: 0 0 24px 24px;
  padding: 60px 0;
}
.hero-section .badge-soft {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* ---------- Cards (theme-aware) ---------- */
.card {
  background-color: var(--sv-card-bg);
  color: var(--sv-card-text);
  border-color: var(--sv-border);
}

.level-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.level-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
}
.level-card .icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sv-green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.stat-card .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sv-green);
}

.passport-card {
  border-radius: 20px;
  background: linear-gradient(135deg, var(--sv-green-dark), var(--sv-green));
  color: #fff;
}
.passport-card .opacity-75 { color: rgba(255,255,255,.85); }

.badge-gold {
  background: var(--sv-gold);
  color: #3a2c00;
}

.product-card img, .course-thumb {
  height: 160px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  background: var(--sv-border);
}

.progress-thin {
  height: 8px;
  border-radius: 4px;
  background-color: var(--sv-border);
}

/* ---------- Forms (theme-aware, fixes invisible-input-text bug) ---------- */
.form-control, .form-select {
  background-color: var(--sv-input-bg);
  color: var(--sv-input-text);
  border-color: var(--sv-border);
}
.form-control:focus, .form-select:focus {
  background-color: var(--sv-input-bg);
  color: var(--sv-input-text);
  border-color: var(--sv-green);
  box-shadow: 0 0 0 .2rem rgba(11,110,79,.15);
}
.form-control::placeholder { color: var(--sv-muted); }
.form-control:disabled, .form-select:disabled {
  background-color: var(--sv-border);
  color: var(--sv-muted);
}

/* ---------- Tables ---------- */
.table {
  color: var(--sv-card-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--sv-card-text);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--sv-border);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-item, .breadcrumb-item a { color: var(--sv-muted); }
.breadcrumb-item.active { color: var(--sv-text); }

/* ---------- Admin sidebar (always dark bg) ---------- */
.admin-sidebar {
  min-height: calc(100vh - 56px);
  background: var(--sv-green-dark);
}
.admin-sidebar a {
  color: rgba(255,255,255,.85);
  padding: .6rem 1rem;
  display: block;
  border-radius: 8px;
  text-decoration: none;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* ---------- Dropdowns (global — covers ALL dropdown menus on every page, not just the navbar) ---------- */
.dropdown-menu {
  background-color: var(--sv-card-bg);
  color: var(--sv-card-text);
  border-color: var(--sv-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.dropdown-item {
  color: var(--sv-card-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sv-bg);
  color: var(--sv-card-text);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sv-green);
  color: #fff;
}
.dropdown-divider {
  border-top-color: var(--sv-border);
}

/* Navbar dropdowns sit on a dark gradient trigger button but the opened panel is always a light card,
   regardless of theme, for maximum readability against the dark navbar */

/* ---------- Buttons: ensure outline buttons stay legible in both themes ---------- */
.btn-outline-secondary {
  color: var(--sv-text);
  border-color: var(--sv-border);
}
.btn-outline-secondary:hover {
  background-color: var(--sv-border);
  color: var(--sv-text);
}
.btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.btn-outline-light:hover {
  background-color: rgba(255,255,255,.15);
  color: #fff;
}

/* ---------- Alerts: force readable text over their background in both themes ---------- */
[data-bs-theme="dark"] .alert-success { background-color: #113a2c; color: #b7f0d4; border-color: #1c5940; }
[data-bs-theme="dark"] .alert-warning { background-color: #4a3c10; color: #ffe293; border-color: #6b5717; }
[data-bs-theme="dark"] .alert-danger  { background-color: #4a1620; color: #ffb3c1; border-color: #6b1f2d; }
[data-bs-theme="dark"] .alert-info    { background-color: #123a4a; color: #a9e3ff; border-color: #1b566b; }

/* ---------- List groups (used by some Bootstrap widgets) ---------- */
.list-group-item {
  background-color: var(--sv-card-bg);
  color: var(--sv-card-text);
  border-color: var(--sv-border);
}

/* ---------- Theme toggle switch button ---------- */
.theme-toggle-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.28); color: #fff; }