/* ธีมสว่าง — พื้นขาว ตัวหนังสือดำ
   สลับด้วยปุ่มบนแถบเมนู ค่าที่เลือกเก็บในคุกกี้ ธีมมืดยังเป็นค่าเริ่มต้น */

:root[data-theme="light"] {
  --bg:          #f4f6f8;
  --bg-grain:    #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f1f4f7;
  --line:        #cfd8e3;
  --line-soft:   #e4e9ef;

  --text:        #0d1117;
  --text-dim:    #47535f;
  --text-mute:   #6a7784;

  --up:          #07724a;
  --up-soft:     rgba(10, 143, 95, 0.14);
  --down:        #d42a3b;
  --down-soft:   rgba(212, 42, 59, 0.12);
  --accent:      #1d5fd6;
  --accent-soft: rgba(29, 95, 214, 0.12);
  --warn:        #b06f00;

  --shadow:      0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 24px -14px rgba(16, 24, 40, 0.25);
}

/* พื้นหลังของหน้า — ธีมมืดใช้ไล่สีเข้ม ธีมสว่างต้องล้างทิ้ง ไม่งั้นจะเป็นคราบเทา */
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 15% -10%, #e8eef7 0%, transparent 60%),
    var(--bg);
}

:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--line);
}

/* ปุ่มหลักเป็นพื้นน้ำเงินเข้ม ตัวหนังสือขาว จะได้คอนทราสต์พอบนพื้นขาว */
:root[data-theme="light"] .btn-primary {
  background: linear-gradient(180deg, #2f74e6, #1d5fd6);
  color: #ffffff;
}
:root[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(180deg, #3d80ee, #2568df);
}

:root[data-theme="light"] .btn-ghost { border-color: var(--line); color: var(--text-dim); }
:root[data-theme="light"] .btn-ghost:hover { border-color: #9fb0c4; color: var(--text); }

:root[data-theme="light"] .topbar nav a.on { background: var(--accent-soft); color: #14418f; }
:root[data-theme="light"] .chip.on { color: #123a86; }

/* แผงและตาราง: เส้นขอบต้องเห็นชัดกว่าเดิม เพราะไม่มีเงาเข้มมาช่วยแยกชั้น */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .filters,
:root[data-theme="light"] .mark-form,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .user-card { border-color: var(--line); }

:root[data-theme="light"] .hero {
  background:
    linear-gradient(135deg, rgba(29, 95, 214, 0.07), transparent 55%),
    var(--surface);
}

:root[data-theme="light"] .table tbody tr:hover { background: rgba(29, 95, 214, 0.05); }
:root[data-theme="light"] .metric-grid,
:root[data-theme="light"] .hero-stats,
:root[data-theme="light"] .stat-row { background: var(--line-soft); }

:root[data-theme="light"] .growth-dot { fill: var(--surface); }
:root[data-theme="light"] .bar-track { background: #dfe5ec; }

:root[data-theme="light"] .danger-zone {
  background: rgba(212, 42, 59, 0.05);
  border-color: rgba(212, 42, 59, 0.3);
}

:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] select,
:root[data-theme="light"] .mark-input {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

/* แถบแจ้งเตือน — ของเดิมเป็นสีอ่อนสำหรับพื้นมืด พอมาพื้นขาวจะจางจนอ่านไม่ออก */
:root[data-theme="light"] .flash-ok {
  background: rgba(7, 114, 74, 0.10);
  border-color: rgba(7, 114, 74, 0.35);
  color: #05563a;
}
:root[data-theme="light"] .flash-error {
  background: rgba(212, 42, 59, 0.09);
  border-color: rgba(212, 42, 59, 0.35);
  color: #a01421;
}
:root[data-theme="light"] .flash-warn {
  background: rgba(176, 111, 0, 0.10);
  border-color: rgba(176, 111, 0, 0.35);
  color: #7a4d00;
}

.theme-toggle { padding: 0.5rem 0.7rem; font-size: 1rem; line-height: 1; }