/* ===== PLO System - custom styles (mobile-first) ===== */
:root {
  --brand: #fa7921;

  /* ---- ธีมสี ---- */
  --bs-primary: #fa7921;
  --bs-primary-rgb: 250, 121, 33;
  --bs-info: #5ed6ff;
  --bs-info-rgb: 94, 214, 255;
  --bs-success: #10b981;
  --bs-success-rgb: 16, 185, 129;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;

  /* พื้นหลังอ่อน (ใช้กับ .bg-*-subtle) ผสมกับพื้นหลังปัจจุบัน ปรับตามธีมสว่าง/มืดอัตโนมัติ */
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 15%, var(--bs-body-bg));
  --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 15%, var(--bs-body-bg));
  --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 15%, var(--bs-body-bg));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 15%, var(--bs-body-bg));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 15%, var(--bs-body-bg));
}

/* ปุ่ม Bootstrap กำหนดสี hover/active ของตัวเองแบบตายตัว ไม่ได้อ้างอิงตัวแปรธีมด้านบน
   จึงต้อง override ต่อปุ่มที่ใช้จริงในระบบ (คำนวณสี hover/active ด้วย color-mix จากสีหลัก) */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, black);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 70%, black);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 70%, black);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-outline-warning {
  --bs-btn-color: color-mix(in srgb, var(--bs-warning) 60%, black);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

body {
  min-height: 100vh;
  font-family: "Sarabun", "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Prompt", "Segoe UI", sans-serif;
}

p {
  font-family: "Sarabun", "Segoe UI", sans-serif;
}

/* หน้า login เต็มจอ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(250,121,33,.12), rgba(255,193,7,.10));
}
.login-card {
  width: 100%;
  max-width: 420px;
}

/* การ์ดสรุปแดชบอร์ด */
.stat-card { border: none; box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
[data-bs-theme="dark"] .stat-card { box-shadow: 0 .25rem .75rem rgba(0,0,0,.4); }

/* progress ของ PLO */
.plo-bar { height: 1.25rem; font-size: .75rem; }

/* ตารางให้เลื่อนแนวนอนบนมือถือ */
.table-responsive { -webkit-overflow-scrolling: touch; }

.badge-achieved { background-color: var(--bs-success); }
.badge-not { background-color: var(--bs-danger); }

.btn-google {
  background: #fff; color: #444; border: 1px solid #dadce0;
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
}
.btn-google:hover { background: #f7f8f8; }
.btn-google img { width: 18px; height: 18px; }

/* spinner กลางจอ */
.center-spin { min-height: 50vh; display: grid; place-items: center; }

/* modal ฟอร์ม: ให้ checklist อ่านง่ายในโหมดมืด */
[data-bs-theme="dark"] .form-check .form-check-label { color: var(--bs-body-color); }