/* =====================================================
   Drug Tips — assets/css/theme.css  ธีมสบายตา + โหมดสว่าง/มืด (เจ้าของสั่ง 2026-10-27)
   โหลดหลัง <style> ใน _header.php · <html data-theme="light|dark"> ตั้งจาก ux.js (ค่าเริ่มต้น = ตามเครื่อง)
   หลัก: สีมีชีวิตชีวาแต่ไม่จัด, เงานุ่ม, มุมมน — ไม่เปลี่ยนโครงหน้า ไม่ซ่อนข้อมูล
   ===================================================== */

/* ── โหมดสว่าง: โทนพาสเทลนุ่ม ── */
:root{
  --bg:#f3f6fb; --card:#fff; --border:#e3e8f0;
  --text:#1f2a3d; --muted:#667489;
  --accent:#3b82c4; --accent-soft:#e8f1fb;
  --shadow:0 2px 10px rgba(31,42,61,.06);
  --input-bg:#fff;
  color-scheme:light;
}
body{background:linear-gradient(180deg,#eef4fb 0,var(--bg) 220px) no-repeat,var(--bg)}
.dt-topbar{background:linear-gradient(100deg,#1a2e4a,#24476e)}
.dt-menu-hero{background:linear-gradient(150deg,#1d3557,#2c5a83 60%,#3a7ca5)}
.dt-card,.dt-list-row,.dt-menu-card,.dt-hub-btn{box-shadow:var(--shadow);border-radius:14px}
.dt-menu-card{border:1px solid #edf1f7}
.dt-menu-card:hover,.dt-list-row:hover{box-shadow:0 4px 16px rgba(31,42,61,.09)}
.dt-btn{border-radius:10px;transition:transform .08s,filter .15s,background .15s}
.dt-btn:active{transform:scale(.97)}
.dt-btn-navy{background:linear-gradient(180deg,#26456b,#1d3557)}
.dt-btn-primary{background:linear-gradient(180deg,#3b82f6,#2563eb)}
.dt-input,.dt-select,.dt-textarea{background:var(--input-bg);border-radius:10px}
.dt-input:focus,.dt-select:focus,.dt-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,196,.15)}
.dt-alert{border-radius:12px}

/* ── สวิตช์ธีม/เสียง (หน้าบัญชี + ปุ่มลัดเมนูหลัก) ── */
.dt-pref-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0}
.dt-seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px}
.dt-seg button{font:inherit;font-size:14px;font-weight:700;border:0;background:transparent;color:var(--muted);
  padding:8px 12px;border-radius:9px;cursor:pointer;min-height:40px}
.dt-seg button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.dt-quick{display:flex;gap:8px;margin-top:12px}
.dt-quick button{font:inherit;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px;min-height:36px;cursor:pointer}

@media (prefers-reduced-motion: reduce){ .dt-btn,.dt-menu-card,.dt-list-row{transition:none} }

/* ── โหมดมืด ── */
html[data-theme="dark"]{
  --bg:#0f1724; --card:#18222f; --border:#2b3a4d;
  --text:#e3e9f2; --muted:#9aa8bb;
  --navy:#b9cff0; --navy2:#d3e2f7;     /* --navy ใช้เป็นสีตัวหนังสือหัวข้อ → สว่างขึ้นในโหมดมืด */
  --accent:#6aa9e0; --accent-soft:#1d3047;
  --shadow:0 2px 12px rgba(0,0,0,.35);
  --input-bg:#111a26;
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg)}
/* ที่ใช้ --navy เป็นพื้นหลัง → กำหนดสีเข้มเองแทน */
html[data-theme="dark"] .dt-topbar{background:linear-gradient(100deg,#0b1320,#14243a)}
html[data-theme="dark"] .dt-menu-hero{background:linear-gradient(150deg,#13243a,#1b3654 60%,#22476b)}
html[data-theme="dark"] .dt-btn-navy,html[data-theme="dark"] .cs-card-head,
html[data-theme="dark"] .rpt-group-head{background:linear-gradient(180deg,#2a4c75,#1f3a5c);color:#fff}
html[data-theme="dark"] .dt-menu-card{border-color:var(--border)}
html[data-theme="dark"] .dt-menu-arrow,html[data-theme="dark"] .dt-list-row .arrow{color:#4b5d74}
html[data-theme="dark"] .dt-btn-outline{color:var(--accent);border-color:var(--accent)}
html[data-theme="dark"] .dt-table th{background:#1f2b3a;color:var(--text)}
html[data-theme="dark"] .dt-table td{border-color:var(--border)}
html[data-theme="dark"] .dt-table tr:hover td{background:#223044;color:var(--text)}
/* index.php ฟอร์มแจ้งเบาะแส: ชิปชนิดยา/D22, แถบปุ่มล่าง, คำแนะนำข้าม, ปุ่มกล้อง */
html[data-theme="dark"] .dt-chip,html[data-theme="dark"] .wiz-nav,html[data-theme="dark"] .wiz-skip-hint,
html[data-theme="dark"] .dt-cam-btn{background:var(--card);color:var(--text)}
html[data-theme="dark"] .dt-chip:has(input:checked),html[data-theme="dark"] .dt-cam-btn:hover,
html[data-theme="dark"] .dt-cam-btn:active{background:#1e3a5f;border-color:var(--accent);color:#fff}
html[data-theme="dark"] .dt-cam-label{color:var(--text)}
html[data-theme="dark"] .dt-map-placeholder{background:#1f2b3a;color:var(--muted)}
html[data-theme="dark"] .dt-radio-btn input:checked+label{background:#1e3a5f;border-color:var(--accent);color:#fff}
html[data-theme="dark"] .dt-upload-zone{background:var(--card);color:var(--text)}
html[data-theme="dark"] .dt-upload-zone:hover,html[data-theme="dark"] .dt-upload-zone.dragover{background:#1e3a5f}
html[data-theme="dark"] .cs-card,html[data-theme="dark"] .cs-input,html[data-theme="dark"] .cs-select{background:var(--card);color:var(--text)}
html[data-theme="dark"] .dt-alert-error{background:#3a1717;color:#fecaca;border-color:#7f1d1d}
html[data-theme="dark"] .dt-alert-success{background:#10301f;color:#bbf7d0;border-color:#166534}
html[data-theme="dark"] .dt-alert-info{background:#132a45;color:#bfdbfe;border-color:#1e40af}
html[data-theme="dark"] .dt-alert-warn{background:#3a2a0d;color:#fde68a;border-color:#92400e}
html[data-theme="dark"] .dt-cq-track{background:#2b3a4d}
html[data-theme="dark"] .dt-cq-miss{color:#fdba74}
/* กล่อง/แถบที่เขียนสีพื้นขาวหรือพาสเทลไว้ในหน้า (inline style) → พื้นการ์ดมืด ตัวหนังสือสว่าง */
html[data-theme="dark"] [style*="background:#fff"],html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fafbfc"],html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],html[data-theme="dark"] [style*="background:#f0f9ff"]{
  background:var(--card)!important;color:var(--text)!important}
html[data-theme="dark"] .ib-row,html[data-theme="dark"] .ib-filter,html[data-theme="dark"] .ib-bulk,
html[data-theme="dark"] .ib-tabs a,html[data-theme="dark"] .cbp,html[data-theme="dark"] .rv-edit details,
html[data-theme="dark"] .rv-sus-edit,html[data-theme="dark"] .cbp-asg{background:var(--card);color:var(--text)}
html[data-theme="dark"] .ib-row.od{background:#2a1a1d}
html[data-theme="dark"] .ib-tag,html[data-theme="dark"] .cbp-tag{background:#243245;color:var(--text)}
html[data-theme="dark"] .ib-fgrid input,html[data-theme="dark"] .ib-fgrid select,
html[data-theme="dark"] .cbp-row input,html[data-theme="dark"] .cbp-row select,html[data-theme="dark"] .cbp-row textarea{
  background:var(--input-bg);color:var(--text)}
html[data-theme="dark"] footer{color:#5d6d82!important}
html[data-theme="dark"] img.dt-thumb{opacity:.92}
/* จุดอื่นที่ใช้ --navy เป็นพื้นหลัง (ค้นจาก background:var(--navy) ทั้งแอป 2026-10-27) */
html[data-theme="dark"] [style*="background:var(--navy)"],
html[data-theme="dark"] .dt-thumb-video,html[data-theme="dark"] .sm-mode-btn.active,html[data-theme="dark"] .vg-tabs a.on,
html[data-theme="dark"] .rp-table th,html[data-theme="dark"] .kpi-table th,html[data-theme="dark"] .rst-table thead th,
html[data-theme="dark"] thead .rst-sticky1,html[data-theme="dark"] thead .rst-sticky2,html[data-theme="dark"] .sv-card-head,
html[data-theme="dark"] .hero{background:#22476b!important;color:#fff!important;border-color:#22476b}
html[data-theme="dark"] .cbp-acts .hot{background:#3a2412;border-color:#c2410c}
html[data-theme="dark"] .cbp-acts .hot summary{color:#fdba74}
html[data-theme="dark"] .cbp-tag.d22,html[data-theme="dark"] .ib-tag.d22,html[data-theme="dark"] .ib-tag.od{background:#b91c1c;color:#fff}

/* ── โหมดมืด: การ์ด/ตาราง/ปุ่มที่เขียนพื้นขาวหรือพาสเทลไว้ในหน้า (สแกน contrast ทุกหน้า 2026-10-28) ──
   แดชบอร์ดผู้บริหาร · ตั้งค่า · หมู่บ้าน · คุณภาพข้อมูล · รายงาน · ติดตามบำบัด (KPI/รายงาน/ทะเบียน/บันทึก) · งานพื้นที่ · ตรวจสอบเรื่อง · แผนที่ · สรุป · สำรวจ */
html[data-theme="dark"] .ex-tile,html[data-theme="dark"] .ex-card,html[data-theme="dark"] .ex-soon,
html[data-theme="dark"] .setting-card,html[data-theme="dark"] .toggle-opt,html[data-theme="dark"] .rpt-empty,
html[data-theme="dark"] .dq-sum a,html[data-theme="dark"] .vg-chip,html[data-theme="dark"] .vg-tabs a,
html[data-theme="dark"] .kpi-table,html[data-theme="dark"] .rp-table,html[data-theme="dark"] .rp-kpi,
html[data-theme="dark"] .rst-table,html[data-theme="dark"] .rst-chart-card,
html[data-theme="dark"] .cs-choice label,html[data-theme="dark"] .cs-test-card,html[data-theme="dark"] .cs-tl-body,
html[data-theme="dark"] .ik-chips label,html[data-theme="dark"] .mf-btn,html[data-theme="dark"] .sm-mode-btn,
html[data-theme="dark"] .trk-card,html[data-theme="dark"] .trk-step,html[data-theme="dark"] .tk,html[data-theme="dark"] .tk-sec,
html[data-theme="dark"] .person-card,html[data-theme="dark"] .sv-card,html[data-theme="dark"] .sv-info-item,
html[data-theme="dark"] .pin-btn,html[data-theme="dark"] .top,html[data-theme="dark"] .ro-field{background:var(--card);color:var(--text)}
html[data-theme="dark"] .ex-soon,html[data-theme="dark"] .rpt-empty,html[data-theme="dark"] .ro-field{color:var(--muted)}
html[data-theme="dark"] .rst-table tbody tr:nth-child(even){background:#1c2735}
html[data-theme="dark"] .rp-table .tot td,html[data-theme="dark"] .rp-table tfoot td,html[data-theme="dark"] tr.tot td{background:#243245;color:var(--text)}
html[data-theme="dark"] .fn-bar,html[data-theme="dark"] .lv0{background:#2b3a4d}
html[data-theme="dark"] .ex-filters select,html[data-theme="dark"] .dq-row select,html[data-theme="dark"] .dq-row input{background:var(--input-bg);color:var(--text)}
html[data-theme="dark"] .tk.od{background:#2a1a1d}
/* สถานะที่เลือก: พาสเทล → น้ำเงินเข้ม ตัวขาว */
html[data-theme="dark"] .ik-chips label:has(input:checked),html[data-theme="dark"] .tk-res label:has(input:checked),
html[data-theme="dark"] .cv-opts label:has(input:checked),html[data-theme="dark"] .act-opt:has(input:checked),
html[data-theme="dark"] .trk-step.on{background:#1e3a5f;color:#fff}
html[data-theme="dark"] .cs-choice.cs-choice-pos input:checked+label,html[data-theme="dark"] .toggle-opt.active-yes,
html[data-theme="dark"] .role-check-item:has(input:checked){background:#3a1717;color:#fecaca}
html[data-theme="dark"] .cs-choice.cs-choice-neg input:checked+label,html[data-theme="dark"] .toggle-opt.active-no,
html[data-theme="dark"] .pin-btn.pinned{background:#10301f;color:#bbf7d0}
html[data-theme="dark"] .mf-btn.active{background:var(--mf-c,#22476b);color:#fff}
html[data-theme="dark"] .trk-step.done{color:#86efac}
/* ตัวหนังสือสีเข้มที่เขียนในหน้า (ไม่มีพื้นของตัวเอง) บนการ์ดมืด → โทนสว่างของสีเดิม */
html[data-theme="dark"] [style*="color:#9a3412"]:not([style*="background"]){color:#fdba74!important}
html[data-theme="dark"] [style*="color:#991b1b"]:not([style*="background"]){color:#fca5a5!important}
html[data-theme="dark"] [style*="color:#166534"]:not([style*="background"]){color:#86efac!important}
html[data-theme="dark"] [style*="color:#92400e"]:not([style*="background"]){color:#fcd34d!important}
html[data-theme="dark"] [style*="color:#065f46"]:not([style*="background"]){color:#6ee7b7!important}

/* การ์ดสถานะเรื่อง (2026-11-02) + แถวการ์ดกล่องเบาะแส (M1.1) */
html[data-theme="dark"] .rv-now.now-false{background:#475569}
html[data-theme="dark"] .rv-now.now-wait{background:#334155}
html[data-theme="dark"] .rv-ck.is-done .rv-ck-h{color:#86efac}
html[data-theme="dark"] .dt-tc.on,html[data-theme="dark"] .ib-chkrow a.on{background:#2a4c75;border-color:#60a5fa;color:#fff}
html[data-theme="dark"] .ib-chkrow a{color:var(--accent)}

/* M1.2 กล่องเบาะแส + ป้ายทั้งระบบ (2026-10-29) — โหมดมืด: พื้นเข้ม + ขอบ/ตัวหนังสือสี แทนพื้นพาสเทลสว่าง */
html[data-theme="dark"] .ib-row.od{background:var(--card);border-color:#94a3b8}
html[data-theme="dark"] .ib-pk{background:var(--card);border-color:var(--border)}
html[data-theme="dark"] .ib-pk b,html[data-theme="dark"] .ib-pk span em,html[data-theme="dark"] .ib-where{color:#dbeafe}
html[data-theme="dark"] .ib-pk.all{border-color:#60a5fa}
html[data-theme="dark"] .ib-must a{background:#1e293b;color:#e2e8f0;border-color:#475569}
html[data-theme="dark"] .ib-must a.on{background:#2a4c75;border-color:#60a5fa}
html[data-theme="dark"] .ib-tabs{background:var(--bg)}
html[data-theme="dark"] .ib-tag.pol{background:#1e2a4a;color:#c7d2fe}
html[data-theme="dark"] .ib-tag.trt{background:#123532;color:#99f6e4}
html[data-theme="dark"] .ib-tag.od,html[data-theme="dark"] .ib-tag.d22{background:#334155;color:#fff}
html[data-theme="dark"] .badge-pending,html[data-theme="dark"] .badge-need_info,html[data-theme="dark"] .badge-false_report,
html[data-theme="dark"] .badge-low,html[data-theme="dark"] .badge-medium,html[data-theme="dark"] .badge-high,
html[data-theme="dark"] .badge-dealer,html[data-theme="dark"] .badge-user,html[data-theme="dark"] .badge-hotspot,html[data-theme="dark"] .badge-gambling,
html[data-theme="dark"] .badge-cbtx,html[data-theme="dark"] .badge-unchecked{background:#1e293b;color:#e2e8f0;border-color:#475569}
html[data-theme="dark"] .badge-confirmed,html[data-theme="dark"] .badge-assigned,html[data-theme="dark"] .badge-responded,
html[data-theme="dark"] .badge-checked{background:#172554;color:#bfdbfe;border-color:#3b82f6}
html[data-theme="dark"] .badge-verified,html[data-theme="dark"] .badge-resolved{background:#0f2f2c;color:#99f6e4;border:1px solid #14b8a6}
html[data-theme="dark"] .badge-sent_police{background:#334155;color:#fff}

/* แท่งความครบของข้อมูล น้ำเงิน/เทา (2026-10-29) — โหมดมืดใช้เฉดสว่างขึ้นให้อ่านออก */
html[data-theme="dark"] .dt-cq.cq-good .dt-cq-head b{color:#93c5fd!important}
html[data-theme="dark"] .dt-cq.cq-good .dt-cq-fill{background:#3b82f6!important}
html[data-theme="dark"] .dt-cq.cq-ok .dt-cq-head b{color:#bfdbfe!important}
html[data-theme="dark"] .dt-cq.cq-ok .dt-cq-fill{background:#60a5fa!important}
html[data-theme="dark"] .dt-cq.cq-low .dt-cq-head b{color:#cbd5e1!important}
html[data-theme="dark"] .dt-cq.cq-low .dt-cq-fill{background:#94a3b8!important}
html[data-theme="dark"] .dt-cq-miss{color:#cbd5e1}
/* หน้ารายชื่อผู้ผ่านการบำบัด (cases/list.php): การ์ดตัวเลข + ผลตรวจล่าสุด */
html[data-theme="dark"] .cl-tile,html[data-theme="dark"] .cl-res{background:var(--card);color:var(--text)}
html[data-theme="dark"] .cl-tile.warn .v{color:#fdba74}
html[data-theme="dark"] .cl-tile.bad .v{color:#fca5a5}
html[data-theme="dark"] .cl-bar{background:#2b3a4d}
html[data-theme="dark"] .cl-rt.pos{background:#3a1717;color:#fecaca}
html[data-theme="dark"] .cl-rt.neg{background:#10301f;color:#bbf7d0}
html[data-theme="dark"] .cl-rt.na{background:#243245;color:var(--text)}
html[data-theme="dark"] .cl-chip{background:#1e3a5f;color:#fff}
html[data-theme="dark"] .cl-item{border-left-color:#4b5d74}
html[data-theme="dark"] .cl-item.pos{border-left-color:#ef4444}
html[data-theme="dark"] .cl-item.neg{border-left-color:#22c55e}

/* M1.5 แถบความคืบหน้าสถานะเรื่อง: สีสว่างขึ้นบนพื้นมืด */
html[data-theme="dark"] .rv-tr-s{--c:#64748b;--n:#64748b}
html[data-theme="dark"] .rv-tr-s.st-true{--c:#2563eb}html[data-theme="dark"] .rv-tr-s.st-false{--c:#64748b}html[data-theme="dark"] .rv-tr-s.st-done{--c:#0d9488}
html[data-theme="dark"] .rv-tr-s.next-true{--n:#2563eb}html[data-theme="dark"] .rv-tr-s.next-false{--n:#64748b}html[data-theme="dark"] .rv-tr-s.next-done{--n:#0d9488}