/* ============================================================
   WAR ROOM P4 — Dark Mode (v2)
   แนวทาง: "ห้องสั่งการยามค่ำ" — navy ลึก + สีทองเป็น accent
   Toggle: body.wr-dark
   ============================================================ */

/* ───────────────────────────────────────────────────────
   1) DESIGN TOKENS — เลเยอร์ระบบสีแบบ 3 ขั้น
   =================================================== */
body.wr-dark {
  /* Backgrounds (depth system) */
  --wr-d-bg:        #0a1220;   /* page ชั้นล่างสุด */
  --wr-d-surface:   #111a2e;   /* card / panel */
  --wr-d-surface-2: #18253f;   /* hover / striped */
  --wr-d-surface-3: #1f3056;   /* elevated / modal / dropdown */
  --wr-d-surface-4: #263c6c;   /* highest elevation */

  /* Borders */
  --wr-d-border:    #25385c;   /* subtle */
  --wr-d-border-2:  #334a73;   /* input / focus-ring fallback */

  /* Text */
  --wr-d-text:      #e6edf7;   /* primary */
  --wr-d-text-dim:  #a5b4cd;   /* secondary */
  --wr-d-text-muted:#6b7a97;   /* tertiary */

  /* Brand accents */
  --wr-d-gold:       #f5c842;
  --wr-d-gold-soft:  #c8960c;
  --wr-d-gold-glow:  rgba(245,200,66,.18);

  /* Interactive */
  --wr-d-blue:       #60a5fa;
  --wr-d-blue-glow:  rgba(96,165,250,.18);
  --wr-d-blue-hover: #3b82f6;

  /* Semantic */
  --wr-d-success:   #22d984;
  --wr-d-danger:    #f87171;
  --wr-d-warning:   #fbbf24;
  --wr-d-info:      #60a5fa;

  /* Override base theme tokens (ให้ component ที่ใช้ var(--wr-*) ยัง work) */
  --wr-bg:        var(--wr-d-bg);
  --wr-card-bg:   var(--wr-d-surface);
  --wr-border:    var(--wr-d-border);
  --wr-text:      var(--wr-d-text);
  --wr-muted:     var(--wr-d-text-muted);
  --wr-shadow:    0 2px 12px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02);
  --wr-shadow-lg: 0 12px 40px rgba(0,0,0,.5),  0 0 0 1px rgba(255,255,255,.03);

  background: var(--wr-d-bg) !important;
  color: var(--wr-d-text) !important;
}

/* ป้องกัน flash of light mode ก่อน JS โหลด */
html.wr-dark-loading { background: #0a1220; }
html.wr-dark-loading body { background: #0a1220 !important; color: #e6edf7 !important; }

/* ───────────────────────────────────────────────────────
   2) BODY + MAIN CONTAINERS
   =================================================== */
body.wr-dark .wr-main-content,
body.wr-dark main,
body.wr-dark .container,
body.wr-dark .container-fluid {
  background: transparent;
  color: var(--wr-d-text);
}

/* ───────────────────────────────────────────────────────
   3) TOPBAR — ยังเข้ม navy แต่เพิ่ม glow ทอง
   =================================================== */
body.wr-dark .wr-topbar {
  background: linear-gradient(135deg, #050912 0%, #0a1428 55%, #0e1e3f 100%) !important;
  border-bottom: 2px solid var(--wr-d-gold-soft);
  box-shadow:
    0 2px 24px rgba(0,0,0,.55),
    0 0 0 1px rgba(245,200,66,.12),
    inset 0 -1px 0 rgba(245,200,66,.08);
}
body.wr-dark .wr-topbar-title { color: #fff; text-shadow: 0 0 18px rgba(245,200,66,.15); }
body.wr-dark .wr-topbar-title span { color: var(--wr-d-gold); }
body.wr-dark .wr-topbar-subtitle { color: rgba(230,237,247,.6); }
body.wr-dark .wr-topbar .profile-btn {
  background: rgba(245,200,66,.08) !important;
  border-color: rgba(245,200,66,.25) !important;
  color: #fff !important;
}
body.wr-dark .wr-topbar .profile-btn:hover {
  background: rgba(245,200,66,.18) !important;
  border-color: rgba(245,200,66,.45) !important;
}

/* ───────────────────────────────────────────────────────
   4) SIDEBAR — deeper navy + gold active indicator
   =================================================== */
body.wr-dark .wr-sidebar {
  background: linear-gradient(180deg, #060b18 0%, #0a1326 50%, #071020 100%) !important;
  border-right: 1px solid rgba(245,200,66,.08);
  box-shadow: 2px 0 16px rgba(0,0,0,.5);
}
body.wr-dark .wr-sidebar-section-label {
  color: rgba(230,237,247,.28);
  font-weight: 800;
  letter-spacing: .14em;
}
body.wr-dark .wr-sidebar-item {
  color: rgba(230,237,247,.6);
  transition: all .2s;
}
body.wr-dark .wr-sidebar-item:hover {
  color: #fff;
  background: rgba(245,200,66,.06);
  border-left-color: rgba(245,200,66,.35);
}
body.wr-dark .wr-sidebar-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(245,200,66,.14) 0%, rgba(245,200,66,.02) 100%);
  border-left: 3px solid var(--wr-d-gold);
  box-shadow: inset 0 0 24px rgba(245,200,66,.05);
}
body.wr-dark .wr-sidebar-item.active i { color: var(--wr-d-gold); }
body.wr-dark .wr-sidebar-item--danger {
  color: rgba(248,113,113,.8);
}
body.wr-dark .wr-sidebar-item--danger:hover {
  color: #fecaca;
  background: rgba(248,113,113,.08);
}
body.wr-dark .wr-sidebar-footer { border-top-color: rgba(245,200,66,.1); }
body.wr-dark .wr-sidebar-user:hover { background: rgba(245,200,66,.06); }
body.wr-dark .wr-sidebar-user-name { color: #fff; }
body.wr-dark .wr-sidebar-user-role { color: rgba(230,237,247,.45); }
body.wr-dark .wr-sidebar-user-avatar { border-color: var(--wr-d-gold); }
body.wr-dark .wr-sidebar-user-fallback {
  background: rgba(245,200,66,.15);
  color: var(--wr-d-gold);
  border-color: rgba(245,200,66,.35);
}
body.wr-dark .wr-sidebar-logout-btn {
  background: rgba(248,113,113,.06);
  border-color: rgba(248,113,113,.2);
  color: rgba(252,165,165,.9);
}
body.wr-dark .wr-sidebar-logout-btn:hover {
  background: rgba(248,113,113,.18);
  color: #fca5a5;
  border-color: rgba(248,113,113,.4);
}

/* Hamburger / overlay */
body.wr-dark .wr-sidebar-toggle {
  background: rgba(230,237,247,.08);
  border-color: rgba(230,237,247,.15);
  color: #fff;
}
body.wr-dark .wr-sidebar-toggle:hover { background: rgba(230,237,247,.18); }
body.wr-dark .wr-sidebar-overlay { background: rgba(0,0,0,.65); }

/* ───────────────────────────────────────────────────────
   5) CARDS — subtle glass effect with gold border on focus
   =================================================== */
body.wr-dark .card,
body.wr-dark .form-section-card,
body.wr-dark .search-card,
body.wr-dark .cat-section,
body.wr-dark .filter-panel,
body.wr-dark .chart-card,
body.wr-dark .gis-panel-section,
body.wr-dark section.card {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
}
body.wr-dark .card:hover,
body.wr-dark .form-section-card:hover {
  border-color: var(--wr-d-border-2) !important;
}
body.wr-dark .card-header,
body.wr-dark .filter-panel-header,
body.wr-dark .section-header {
  background: linear-gradient(180deg, var(--wr-d-surface-2) 0%, var(--wr-d-surface) 100%) !important;
  border-bottom: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark .card-header h3,
body.wr-dark .card-header h4,
body.wr-dark .card-header h5,
body.wr-dark .card-title,
body.wr-dark .section-header h2 {
  color: #fff !important;
}
body.wr-dark .card-body { color: var(--wr-d-text-dim); }
body.wr-dark .card-footer {
  background: var(--wr-d-surface-2) !important;
  border-top: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text-dim) !important;
}

/* ───────────────────────────────────────────────────────
   6) FORM CONTROLS — inputs with subtle glow on focus
   =================================================== */
body.wr-dark .form-control,
body.wr-dark .form-select,
body.wr-dark textarea.form-control,
body.wr-dark input[type="text"],
body.wr-dark input[type="number"],
body.wr-dark input[type="email"],
body.wr-dark input[type="tel"],
body.wr-dark input[type="date"],
body.wr-dark input[type="password"],
body.wr-dark input[type="search"],
body.wr-dark select {
  background: var(--wr-d-bg) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
  transition: border-color .15s, box-shadow .15s;
}
body.wr-dark .form-control:hover,
body.wr-dark .form-select:hover {
  border-color: #4a6396 !important;
}
body.wr-dark .form-control:focus,
body.wr-dark .form-select:focus,
body.wr-dark textarea.form-control:focus,
body.wr-dark input:focus,
body.wr-dark select:focus {
  background: var(--wr-d-bg) !important;
  border-color: var(--wr-d-blue) !important;
  box-shadow: 0 0 0 3px var(--wr-d-blue-glow), 0 0 16px rgba(96,165,250,.12) !important;
  color: #fff !important;
}
body.wr-dark .form-control::placeholder,
body.wr-dark textarea::placeholder,
body.wr-dark input::placeholder {
  color: var(--wr-d-text-muted) !important;
  opacity: 0.7;
}
body.wr-dark .form-control:disabled,
body.wr-dark .form-select:disabled,
body.wr-dark input:disabled {
  background: #0f1830 !important;
  color: #536580 !important;
  opacity: 0.6;
}
body.wr-dark .form-label,
body.wr-dark label:not(.form-check-label):not(.severity-option) {
  color: var(--wr-d-text-dim) !important;
  font-weight: 500;
}
body.wr-dark .form-check-label { color: var(--wr-d-text) !important; }
body.wr-dark .form-text { color: var(--wr-d-text-muted) !important; }
body.wr-dark .input-group-text {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .input-group > .form-control:focus {
  z-index: 3;
}

/* Checkbox / Radio */
body.wr-dark .form-check-input {
  background-color: var(--wr-d-surface-2) !important;
  border: 1.5px solid var(--wr-d-border-2) !important;
}
body.wr-dark .form-check-input:checked {
  background-color: var(--wr-d-blue) !important;
  border-color: var(--wr-d-blue) !important;
}
body.wr-dark .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--wr-d-blue-glow) !important;
  border-color: var(--wr-d-blue) !important;
}

/* Date picker icon */
body.wr-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.wr-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.wr-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.2) saturate(2) hue-rotate(180deg);
  cursor: pointer;
  opacity: 0.75;
}
body.wr-dark input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ───────────────────────────────────────────────────────
   7) TABLES — striped with subtle gold accent on hover
   =================================================== */
body.wr-dark .table {
  color: var(--wr-d-text-dim) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-bg: rgba(96,165,250,.08);
  --bs-table-border-color: var(--wr-d-border);
  --bs-table-color: var(--wr-d-text-dim);
  --bs-table-striped-color: var(--wr-d-text-dim);
}
body.wr-dark .table thead th,
body.wr-dark .table thead td {
  background: linear-gradient(180deg, var(--wr-d-surface-3) 0%, var(--wr-d-surface-2) 100%) !important;
  color: var(--wr-d-text) !important;
  border-bottom: 2px solid var(--wr-d-gold-soft) !important;
  font-weight: 700;
  letter-spacing: .02em;
}
body.wr-dark .table td,
body.wr-dark .table th {
  border-color: var(--wr-d-border) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,.015) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .table-hover > tbody > tr:hover > * {
  background: rgba(96,165,250,.08) !important;
  color: #fff !important;
}
body.wr-dark .table-bordered { border-color: var(--wr-d-border) !important; }
body.wr-dark .table-bordered > :not(caption) > * > * { border-color: var(--wr-d-border) !important; }
body.wr-dark .table-primary {
  --bs-table-bg: rgba(96,165,250,.1) !important;
  --bs-table-color: #93c5fd !important;
  color: #93c5fd !important;
}
body.wr-dark .table-light { --bs-table-bg: var(--wr-d-surface-2) !important; color: var(--wr-d-text) !important; }
body.wr-dark tfoot { background: var(--wr-d-surface-2) !important; }
body.wr-dark tfoot td, body.wr-dark tfoot th {
  color: var(--wr-d-gold) !important;
  border-top: 2px solid var(--wr-d-gold-soft) !important;
}

/* ───────────────────────────────────────────────────────
   8) BUTTONS — บางสี override ให้ดูสว่างพอในที่มืด
   =================================================== */
body.wr-dark .btn-outline-primary {
  border-color: var(--wr-d-blue) !important;
  color: #93c5fd !important;
}
body.wr-dark .btn-outline-primary:hover {
  background: var(--wr-d-blue) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--wr-d-blue-glow);
}
body.wr-dark .btn-outline-secondary {
  border-color: var(--wr-d-border-2) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .btn-outline-secondary:hover {
  background: var(--wr-d-surface-2) !important;
  color: #fff !important;
}
body.wr-dark .btn-light {
  background: var(--wr-d-surface-2) !important;
  border-color: var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark .btn-light:hover {
  background: var(--wr-d-surface-3) !important;
  color: #fff !important;
}
body.wr-dark .btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
body.wr-dark .btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: 0 4px 16px rgba(59,130,246,.4);
}
body.wr-dark .btn-success {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  border-color: #15803d !important;
}
body.wr-dark .btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #d97706 !important;
  color: #fff !important;
}
body.wr-dark .btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  border-color: #b91c1c !important;
}
body.wr-dark .btn-info {
  background: linear-gradient(135deg, #0891b2, #0e7490) !important;
  border-color: #0e7490 !important;
  color: #fff !important;
}
body.wr-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ───────────────────────────────────────────────────────
   9) DROPDOWNS / MENUS
   =================================================== */
body.wr-dark .dropdown-menu {
  background: var(--wr-d-surface-3) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(245,200,66,.04) !important;
}
body.wr-dark .dropdown-item {
  color: var(--wr-d-text-dim) !important;
  transition: all .15s;
}
body.wr-dark .dropdown-item:hover,
body.wr-dark .dropdown-item:focus {
  background: rgba(96,165,250,.12) !important;
  color: #fff !important;
}
body.wr-dark .dropdown-item.active,
body.wr-dark .dropdown-item:active {
  background: var(--wr-d-blue) !important;
  color: #fff !important;
}
body.wr-dark .dropdown-divider { border-top-color: var(--wr-d-border) !important; }
body.wr-dark .dropdown-header { color: var(--wr-d-text-muted) !important; }

/* ───────────────────────────────────────────────────────
   10) MODALS — elevated with gold header accent
   =================================================== */
body.wr-dark .modal-content {
  background: var(--wr-d-surface-3) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(245,200,66,.06);
}
body.wr-dark .modal-header {
  border-bottom: 1px solid var(--wr-d-border) !important;
  background: linear-gradient(135deg, #0e1830 0%, #172448 100%) !important;
}
body.wr-dark .modal-footer {
  border-top: 1px solid var(--wr-d-border) !important;
  background: var(--wr-d-surface-2) !important;
}
body.wr-dark .modal-title { color: #fff !important; }
body.wr-dark .modal-backdrop.show { opacity: 0.8; }

/* ───────────────────────────────────────────────────────
   11) ALERTS — keep chromatic but on dark bg
   =================================================== */
body.wr-dark .alert {
  border-width: 1px !important;
  background: var(--wr-d-surface-2);
}
body.wr-dark .alert-info {
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.06)) !important;
  border-color: rgba(59,130,246,.35) !important;
  color: #93c5fd !important;
}
body.wr-dark .alert-warning {
  background: linear-gradient(135deg, rgba(234,179,8,.14), rgba(234,179,8,.06)) !important;
  border-color: rgba(234,179,8,.35) !important;
  color: #fde68a !important;
}
body.wr-dark .alert-danger {
  background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.06)) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #fca5a5 !important;
}
body.wr-dark .alert-success {
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.06)) !important;
  border-color: rgba(34,197,94,.35) !important;
  color: #86efac !important;
}
body.wr-dark .alert-primary {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(99,102,241,.06)) !important;
  border-color: rgba(99,102,241,.35) !important;
  color: #a5b4fc !important;
}
body.wr-dark .alert-secondary {
  background: var(--wr-d-surface-2) !important;
  border-color: var(--wr-d-border) !important;
  color: var(--wr-d-text-dim) !important;
}

/* ───────────────────────────────────────────────────────
   12) BADGES / PILLS
   =================================================== */
body.wr-dark .badge.bg-light { background: var(--wr-d-surface-3) !important; color: var(--wr-d-text) !important; }
body.wr-dark .badge.bg-secondary { background: var(--wr-d-surface-3) !important; color: var(--wr-d-text-dim) !important; }
body.wr-dark .badge.text-dark { color: var(--wr-d-text) !important; }

/* Severity pills — retuned for dark */
body.wr-dark .severity-pill {
  border-width: 1.5px;
  backdrop-filter: blur(4px);
}
body.wr-dark .severity-pill.red {
  color: #fca5a5 !important;
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.45) !important;
}
body.wr-dark .severity-pill.orange {
  color: #fdba74 !important;
  background: rgba(249,115,22,.12) !important;
  border-color: rgba(249,115,22,.45) !important;
}
body.wr-dark .severity-pill.yellow {
  color: #fde047 !important;
  background: rgba(234,179,8,.12) !important;
  border-color: rgba(234,179,8,.45) !important;
}
body.wr-dark .severity-pill.green {
  color: #86efac !important;
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.45) !important;
}
body.wr-dark .severity-option input:checked + .severity-pill {
  box-shadow: 0 0 0 2px currentColor, 0 0 18px rgba(255,255,255,.1);
}

/* ───────────────────────────────────────────────────────
   13) NAVS / TABS / PILLS
   =================================================== */
body.wr-dark .nav-tabs { border-bottom-color: var(--wr-d-border) !important; }
body.wr-dark .nav-tabs .nav-link {
  color: var(--wr-d-text-dim) !important;
  border-color: transparent !important;
  background: transparent !important;
}
body.wr-dark .nav-tabs .nav-link:hover {
  border-color: var(--wr-d-border) var(--wr-d-border) transparent !important;
  color: #fff !important;
  background: var(--wr-d-surface-2) !important;
}
body.wr-dark .nav-tabs .nav-link.active {
  background: var(--wr-d-surface) !important;
  border-color: var(--wr-d-border) var(--wr-d-border) var(--wr-d-surface) !important;
  color: #fff !important;
  border-bottom: 2px solid var(--wr-d-gold) !important;
}
body.wr-dark .nav-pills .nav-link { color: var(--wr-d-text-dim) !important; }
body.wr-dark .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
}

/* ───────────────────────────────────────────────────────
   14) ACCORDION
   =================================================== */
body.wr-dark .accordion {
  --bs-accordion-bg: var(--wr-d-surface);
  --bs-accordion-border-color: var(--wr-d-border);
  --bs-accordion-btn-bg: var(--wr-d-surface-2);
  --bs-accordion-btn-color: var(--wr-d-text);
  --bs-accordion-active-bg: var(--wr-d-surface);
  --bs-accordion-active-color: #fff;
  --bs-accordion-color: var(--wr-d-text-dim);
}
body.wr-dark .accordion-button { box-shadow: none !important; }
body.wr-dark .accordion-button:not(.collapsed) {
  background: var(--wr-d-surface) !important;
  box-shadow: inset 0 -1px 0 var(--wr-d-border) !important;
}
body.wr-dark .accordion-button::after { filter: invert(0.8) sepia(0.3); }

/* ───────────────────────────────────────────────────────
   15) LIST GROUPS
   =================================================== */
body.wr-dark .list-group-item {
  background: var(--wr-d-surface) !important;
  border-color: var(--wr-d-border) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .list-group-item:hover {
  background: var(--wr-d-surface-2) !important;
  color: #fff !important;
  border-color: rgba(96,165,250,.3) !important;
}
body.wr-dark .list-group-item.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────
   16) PAGINATION
   =================================================== */
body.wr-dark .page-link {
  background: var(--wr-d-surface) !important;
  border-color: var(--wr-d-border) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .page-link:hover {
  background: var(--wr-d-surface-2) !important;
  color: #fff !important;
  border-color: var(--wr-d-border-2) !important;
}
body.wr-dark .page-item.active .page-link {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
body.wr-dark .page-item.disabled .page-link {
  background: var(--wr-d-surface) !important;
  color: var(--wr-d-text-muted) !important;
  opacity: 0.5;
}

/* ───────────────────────────────────────────────────────
   17) PROGRESS / SPINNERS
   =================================================== */
body.wr-dark .progress {
  background: var(--wr-d-surface-2) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
body.wr-dark .progress-bar {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  box-shadow: 0 0 8px rgba(96,165,250,.4);
}
body.wr-dark .spinner-border { color: var(--wr-d-gold); }

/* ───────────────────────────────────────────────────────
   18) TOOLTIPS / POPOVERS
   =================================================== */
body.wr-dark .tooltip-inner {
  background: var(--wr-d-surface-4) !important;
  color: #fff !important;
  border: 1px solid var(--wr-d-border-2);
}
body.wr-dark .popover {
  background: var(--wr-d-surface-3) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
body.wr-dark .popover-header {
  background: var(--wr-d-surface-4) !important;
  border-bottom-color: var(--wr-d-border) !important;
  color: #fff !important;
}
body.wr-dark .popover-body { color: var(--wr-d-text-dim) !important; }
body.wr-dark .popover .popover-arrow::before,
body.wr-dark .popover .popover-arrow::after { border-color: var(--wr-d-border-2) transparent !important; }

/* ───────────────────────────────────────────────────────
   19) BREADCRUMBS / HR / MISC
   =================================================== */
body.wr-dark .breadcrumb { background: transparent !important; }
body.wr-dark .breadcrumb-item a { color: var(--wr-d-blue) !important; }
body.wr-dark .breadcrumb-item.active { color: var(--wr-d-text-muted) !important; }
body.wr-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--wr-d-text-muted) !important; }
body.wr-dark hr { border-color: var(--wr-d-border) !important; opacity: 0.5; }

/* Text utilities */
body.wr-dark .text-dark { color: var(--wr-d-text) !important; }
body.wr-dark .text-muted { color: var(--wr-d-text-muted) !important; }
body.wr-dark .text-secondary { color: var(--wr-d-text-dim) !important; }
body.wr-dark .text-body { color: var(--wr-d-text) !important; }

/* bg utilities */
body.wr-dark .bg-white { background: var(--wr-d-surface) !important; }
body.wr-dark .bg-light { background: var(--wr-d-surface-2) !important; }
body.wr-dark .bg-body-tertiary { background: var(--wr-d-surface-2) !important; }

/* Borders */
body.wr-dark .border,
body.wr-dark .border-top,
body.wr-dark .border-bottom,
body.wr-dark .border-start,
body.wr-dark .border-end { border-color: var(--wr-d-border) !important; }

/* ───────────────────────────────────────────────────────
   20) SWEETALERT2
   =================================================== */
body.wr-dark .swal2-popup {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
body.wr-dark .swal2-title { color: #fff !important; }
body.wr-dark .swal2-html-container { color: var(--wr-d-text-dim) !important; }
body.wr-dark .swal2-input,
body.wr-dark .swal2-textarea {
  background: var(--wr-d-bg) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark .swal2-close { color: var(--wr-d-text-dim) !important; }
body.wr-dark .swal2-close:hover { color: #fff !important; }
body.wr-dark .swal2-loader { border-color: var(--wr-d-gold) transparent var(--wr-d-gold) transparent !important; }

/* ───────────────────────────────────────────────────────
   21) LEAFLET MAP
   =================================================== */
body.wr-dark .leaflet-container {
  background: var(--wr-d-bg) !important;
  outline: none;
}
/* ใช้ filter บน tile เพื่อทำให้แผนที่เข้ากับ dark — ใช้ class dark-tiles ใน basemap */
body.wr-dark .leaflet-tile-pane .dark-tiles,
body.wr-dark .leaflet-tile-container img.dark-tiles {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(0.95);
}
body.wr-dark .leaflet-popup-content-wrapper {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text) !important;
  border: 1px solid var(--wr-d-border-2);
  box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
}
body.wr-dark .leaflet-popup-tip { background: var(--wr-d-surface-3) !important; }
body.wr-dark .leaflet-tooltip {
  background: var(--wr-d-surface-4) !important;
  color: #fff !important;
  border: 1px solid var(--wr-d-border-2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}
body.wr-dark .leaflet-tooltip-top::before { border-top-color: var(--wr-d-border-2) !important; }
body.wr-dark .leaflet-control-zoom a,
body.wr-dark .leaflet-bar a {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text) !important;
  border-color: var(--wr-d-border-2) !important;
}
body.wr-dark .leaflet-control-zoom a:hover,
body.wr-dark .leaflet-bar a:hover { background: var(--wr-d-surface-4) !important; }
body.wr-dark .leaflet-control-attribution {
  background: rgba(10,18,32,.85) !important;
  color: var(--wr-d-text-muted) !important;
}
body.wr-dark .leaflet-control-attribution a { color: var(--wr-d-blue) !important; }

/* ───────────────────────────────────────────────────────
   22) PAGE-SPECIFIC — Search / Form view (warroom.html)
   =================================================== */
body.wr-dark #search-view .search-card {
  background: linear-gradient(135deg, var(--wr-d-surface) 0%, var(--wr-d-surface-2) 100%) !important;
  border-color: var(--wr-d-border) !important;
}
body.wr-dark .main-title { color: #fff !important; letter-spacing: .02em; }
body.wr-dark .sub-title { color: var(--wr-d-text-muted) !important; }
body.wr-dark #search-view .search-input-row .form-control-lg {
  background: var(--wr-d-bg) !important;
  border-color: var(--wr-d-border-2) !important;
  color: #fff !important;
}
body.wr-dark #search-results .list-group-item {
  background: var(--wr-d-surface) !important;
  border-color: var(--wr-d-border) !important;
  color: var(--wr-d-text) !important;
  transition: all .2s;
}
body.wr-dark #search-results .list-group-item:hover {
  background: var(--wr-d-surface-2) !important;
  border-color: rgba(96,165,250,.5) !important;
  box-shadow: 0 4px 20px rgba(96,165,250,.15) !important;
  transform: translateY(-1px);
}
body.wr-dark #search-results .list-group-item strong { color: #fff !important; }
body.wr-dark #search-results .list-group-item small { color: var(--wr-d-text-muted) !important; }
body.wr-dark .search-results-title { color: var(--wr-d-text) !important; }

/* Form view — left color bar on section cards */
body.wr-dark #form-view .form-section-card.section-1 > .card-header,
body.wr-dark #form-view .form-section-card.section-2 > .card-header,
body.wr-dark #form-view .form-section-card.section-3 > .card-header,
body.wr-dark #form-view .form-section-card.section-4 > .card-header,
body.wr-dark #form-view .form-section-card.section-5 > .card-header,
body.wr-dark #form-view .form-section-card.section-6 > .card-header {
  background: linear-gradient(90deg, var(--wr-d-surface-2) 0%, var(--wr-d-surface) 100%) !important;
}
body.wr-dark .form-page-header {
  background: linear-gradient(135deg, #050a16 0%, #0a1428 100%) !important;
  border-bottom: 2px solid var(--wr-d-gold-soft);
}
body.wr-dark .form-title-card {
  background: linear-gradient(135deg, #070d1f 0%, #0e1a38 100%) !important;
  border: 1px solid var(--wr-d-border);
}
body.wr-dark .form-action-bar {
  background: var(--wr-d-surface-2) !important;
  border-top: 2px solid var(--wr-d-gold-soft) !important;
  backdrop-filter: blur(8px);
}
body.wr-dark .war-room-badge {
  background: rgba(245,200,66,.08) !important;
  border: 1px solid rgba(245,200,66,.3) !important;
  color: var(--wr-d-gold) !important;
}

/* Inline editable labels (Section 6) */
body.wr-dark .wr-inline-label { color: #86efac !important; }
body.wr-dark .wr-inline-input {
  background: transparent !important;
  border-bottom-color: var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark .wr-inline-input:focus {
  border-bottom-color: var(--wr-d-success) !important;
  background: rgba(34,197,94,.05) !important;
}

/* ───────────────────────────────────────────────────────
   23) PAGE-SPECIFIC — Dashboards (Summary cards, Charts)
   =================================================== */
body.wr-dark .summary-card {
  background: linear-gradient(135deg, var(--wr-d-surface) 0%, var(--wr-d-surface-2) 100%) !important;
  border: 1px solid var(--wr-d-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark .summary-card--total {
  background: linear-gradient(135deg, #0e1e3f 0%, #1a2f6b 100%) !important;
  border-color: rgba(245,200,66,.2) !important;
}
body.wr-dark .summary-card .card-label,
body.wr-dark .summary-card .card-sub { color: var(--wr-d-text-dim) !important; }
body.wr-dark .summary-card .card-value { color: #fff !important; }

/* Chart cards */
body.wr-dark .chart-card {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
}
body.wr-dark .chart-title,
body.wr-dark .chart-card .chart-title {
  color: var(--wr-d-text) !important;
  border-bottom-color: var(--wr-d-border) !important;
}

/* Filter panels */
body.wr-dark .filter-col,
body.wr-dark .filter-col.active {
  background: var(--wr-d-surface-2) !important;
  border-color: var(--wr-d-border) !important;
}
body.wr-dark .filter-col-title { color: var(--wr-d-text) !important; }
body.wr-dark .filter-option {
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .filter-option:hover { background: var(--wr-d-surface-3) !important; color: #fff !important; }
body.wr-dark .filter-option.active {
  background: rgba(96,165,250,.12) !important;
  color: #fff !important;
}
body.wr-dark .filter-option .filter-count { color: var(--wr-d-text-muted) !important; }
body.wr-dark .filter-toggle-btn {
  background: linear-gradient(135deg, var(--wr-d-surface-2), var(--wr-d-surface-3)) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
body.wr-dark .filter-close-btn {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .filter-col-actions .btn-select-all {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
}
body.wr-dark .filter-col-actions .btn-clear {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}

/* Month filter (most-wanted) */
body.wr-dark .month-filter-group select {
  background: var(--wr-d-bg) !important;
  border-color: var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark .month-filter-group .btn-show-all {
  background: rgba(99,102,241,.15) !important;
  color: #a5b4fc !important;
  border-color: rgba(99,102,241,.3) !important;
}

/* Category / detail toggles */
body.wr-dark .cat-section-title {
  color: var(--wr-d-text) !important;
  border-bottom-color: var(--wr-d-border) !important;
}
body.wr-dark .detail-toggle {
  background: var(--wr-d-surface) !important;
  border-color: var(--wr-d-border) !important;
  color: var(--wr-d-text) !important;
}

/* ───────────────────────────────────────────────────────
   24) PAGE-SPECIFIC — Auth / Profile / Data management
   =================================================== */
body.wr-dark .auth-container {
  background:
    radial-gradient(ellipse at top, rgba(245,200,66,.08) 0%, transparent 50%),
    linear-gradient(135deg, #050912 0%, #0a1428 50%, #071020 100%) !important;
}
body.wr-dark .auth-card {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(245,200,66,.08) !important;
}
body.wr-dark .profile-card-main {
  background: var(--wr-d-surface) !important;
  border-color: var(--wr-d-border) !important;
}

body.wr-dark .import-zone,
body.wr-dark .drop-zone {
  background: var(--wr-d-surface-2) !important;
  border: 2px dashed var(--wr-d-border-2) !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .import-zone:hover,
body.wr-dark .drop-zone:hover,
body.wr-dark .drop-zone.dragover {
  background: var(--wr-d-surface-3) !important;
  border-color: var(--wr-d-blue) !important;
  color: #fff !important;
}

/* Activity logs */
body.wr-dark .log-entry {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text-dim);
}
body.wr-dark .log-entry:hover {
  border-color: var(--wr-d-blue) !important;
  box-shadow: 0 4px 12px var(--wr-d-blue-glow);
}

/* ───────────────────────────────────────────────────────
   25) LOADERS / OVERLAYS
   =================================================== */
body.wr-dark #loader-overlay,
body.wr-dark .full-page-loader {
  background: radial-gradient(ellipse at center, rgba(10,18,32,.96) 0%, rgba(5,9,18,.98) 100%) !important;
}
body.wr-dark .loader-text { color: var(--wr-d-gold) !important; }
body.wr-dark .loader-subtext { color: var(--wr-d-text-muted) !important; }
body.wr-dark .loader-bar-track {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border) !important;
}
body.wr-dark .loader-bar-fill {
  background: linear-gradient(90deg, var(--wr-d-gold-soft), var(--wr-d-gold)) !important;
  box-shadow: 0 0 16px rgba(245,200,66,.4);
}

/* ───────────────────────────────────────────────────────
   26) FLATPICKR / Other date libraries (if used)
   =================================================== */
body.wr-dark .flatpickr-calendar {
  background: var(--wr-d-surface-3) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.6) !important;
}
body.wr-dark .flatpickr-day {
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .flatpickr-day:hover {
  background: var(--wr-d-surface-4) !important;
  color: #fff !important;
}
body.wr-dark .flatpickr-day.selected,
body.wr-dark .flatpickr-day.today {
  background: var(--wr-d-blue) !important;
  color: #fff !important;
  border-color: var(--wr-d-blue) !important;
}

/* ───────────────────────────────────────────────────────
   27) SCROLLBARS (webkit)
   =================================================== */
body.wr-dark ::-webkit-scrollbar { width: 8px; height: 8px; }
body.wr-dark ::-webkit-scrollbar-track { background: var(--wr-d-bg); }
body.wr-dark ::-webkit-scrollbar-thumb {
  background: var(--wr-d-surface-3);
  border-radius: 4px;
  border: 1px solid var(--wr-d-surface-2);
}
body.wr-dark ::-webkit-scrollbar-thumb:hover { background: var(--wr-d-surface-4); }
body.wr-dark { scrollbar-color: var(--wr-d-surface-3) var(--wr-d-bg); scrollbar-width: thin; }

/* ───────────────────────────────────────────────────────
   28) INLINE-STYLE FALLBACKS
   — override หน้าที่มี style="background:#fff; color:#000"
   =================================================== */
body.wr-dark [style*="background: #fff"]:not(.severity-pill):not(.badge),
body.wr-dark [style*="background:#fff"]:not(.severity-pill):not(.badge),
body.wr-dark [style*="background-color: #fff"]:not(.severity-pill):not(.badge),
body.wr-dark [style*="background: white"]:not(.severity-pill):not(.badge),
body.wr-dark [style*="background-color: white"]:not(.severity-pill):not(.badge),
body.wr-dark [style*="background: #FFFFFF"]:not(.severity-pill):not(.badge),
body.wr-dark [style*="background:#FFFFFF"]:not(.severity-pill):not(.badge) {
  background: var(--wr-d-surface) !important;
}
body.wr-dark [style*="background: #f"]:not(.btn):not(.severity-pill):not(.badge) {
  /* (เบาๆ เผื่อมี #f8fafc, #f3f4f6 ฯลฯ) */
}
body.wr-dark [style*="color: #000"],
body.wr-dark [style*="color:#000"],
body.wr-dark [style*="color: #1"],
body.wr-dark [style*="color:#1"] {
  color: var(--wr-d-text) !important;
}

/* ───────────────────────────────────────────────────────
   29) PRINT / SCREEN adjustments
   =================================================== */
@media print {
  body.wr-dark {
    background: #fff !important;
    color: #000 !important;
  }
  body.wr-dark * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}

/* ───────────────────────────────────────────────────────
   30) THEME TOGGLE BUTTON (topbar)
   =================================================== */
.wr-theme-toggle {
  background: rgba(245,200,66,.10);
  border: 1px solid rgba(245,200,66,.25);
  color: var(--wr-gold-lt, #f5c842);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  font-size: 1.1rem;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.wr-theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(245,200,66,.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.wr-theme-toggle:hover {
  background: rgba(245,200,66,.18);
  border-color: rgba(245,200,66,.5);
  transform: rotate(15deg) scale(1.05);
}
.wr-theme-toggle:hover::before { opacity: 1; }
.wr-theme-toggle:active { transform: rotate(0) scale(.95); }
/* Light mode: show moon icon */
.wr-theme-toggle .bi-sun-fill { display: none; }
.wr-theme-toggle .bi-moon-stars-fill { display: inline; }
/* Dark mode: show sun icon */
body.wr-dark .wr-theme-toggle { color: #fbbf24; }
body.wr-dark .wr-theme-toggle .bi-sun-fill { display: inline; }
body.wr-dark .wr-theme-toggle .bi-moon-stars-fill { display: none; }

/* ───────────────────────────────────────────────────────
   30.5) LOCAL CSS-VAR OVERRIDES for page-level themes
   — หลายหน้ามี <style>:root{--primary:#...} ของตัวเอง
   เราจะ override ตัวแปรเหล่านั้นใน wr-dark เพื่อให้ฟอร์ม/UI
   ที่ใช้ var() ยังสวยในโหมดมืด (โดยไม่ต้องแก้ทุกหน้า)
   =================================================== */
body.wr-dark {
  /* ใช้ใน incident-report.html, profile.html, และหน้าอื่นที่ใช้ชื่อตัวแปรเหล่านี้ */
  --primary:         #60a5fa;
  --primary-light:   #93c5fd;
  --primary-lighter: #1e3a8a;
  --accent:          #60a5fa;
  --text:            var(--wr-d-text);
  --text-muted:      var(--wr-d-text-muted);
  --bg:              var(--wr-d-bg);
  --card-bg:         var(--wr-d-surface);
  --border:          var(--wr-d-border);
  --shadow:          0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
  --shadow-lg:       0 4px 6px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.45);

  /* semantic ให้เข้ม/สดขึ้นใน dark */
  --success:    #22d984;
  --success-bg: rgba(34,197,94,.12);
  --warning:    #fbbf24;
  --warning-bg: rgba(234,179,8,.12);
  --danger:     #f87171;
}

/* Step wizard (incident-report.html) — ปรับสีให้เข้าใน dark */
body.wr-dark .wizard-step .step-circle {
  background: var(--wr-d-surface-3);
  color: var(--wr-d-text-dim);
  border: 2px solid var(--wr-d-border-2);
}
body.wr-dark .wizard-step.active .step-circle {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.25), 0 4px 16px rgba(37,99,235,.35);
}
body.wr-dark .wizard-step.completed .step-circle {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-color: #15803d;
}
body.wr-dark .wizard-step.locked .step-circle {
  background: var(--wr-d-surface);
  color: var(--wr-d-text-muted);
  border-color: var(--wr-d-border);
}
body.wr-dark .step-label { color: var(--wr-d-text-dim); }
body.wr-dark .step-sublabel { color: var(--wr-d-text-muted); }
body.wr-dark .wizard-step.active .step-label { color: #fff !important; }
body.wr-dark .wizard-step.completed .step-label { color: #22d984 !important; }
body.wr-dark .step-line {
  background: var(--wr-d-border);
}
body.wr-dark .step-line.done { background: #22d984; }

/* Form section (incident-report.html) — ใช้ .form-section ไม่ใช่ .card */
body.wr-dark .form-section,
body.wr-dark .form-card .form-section {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
}
body.wr-dark .section-header {
  border-bottom-color: var(--wr-d-gold-soft) !important;
}
body.wr-dark .section-title { color: #fff !important; }
body.wr-dark .sub-header {
  background: var(--wr-d-surface-2);
  color: var(--wr-d-text);
  border-left: 3px solid var(--wr-d-blue);
}

/* Step progress bar */
body.wr-dark .step-progress {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border) !important;
}
body.wr-dark .step-progress-fill {
  background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
  box-shadow: 0 0 12px rgba(96,165,250,.4);
}
body.wr-dark .step-progress-text { color: var(--wr-d-text-dim) !important; }

/* Lookup result / messages in incident-report */
body.wr-dark .lookup-result {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text-dim) !important;
}

/* Navigation buttons in step wizard */
body.wr-dark .wizard-nav {
  background: var(--wr-d-surface) !important;
  border-top: 1px solid var(--wr-d-border) !important;
}

/* ═══════════════════════════════════════════════════════
   30.7) DASHBOARD ผู้ค้ายาเสพติด (drug-dealer-dashboard.html)
   — ปรับ card/flowchart/panel ให้เข้ากับ Dark Mode
   ═══════════════════════════════════════════════════════ */

/* Summary cards — เบาสีลงนิด + เพิ่ม inner highlight */
body.wr-dark .summary-card.sc--blue {
  background: linear-gradient(135deg, #0f2547 0%, #1a3d7a 100%) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
  border: 1px solid rgba(96,165,250,.25);
}
body.wr-dark .summary-card.sc--green {
  background: linear-gradient(135deg, #064022 0%, #0d6e42 100%) !important;
  box-shadow: 0 6px 20px rgba(5,150,105,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
  border: 1px solid rgba(34,197,94,.25);
}
body.wr-dark .summary-card.sc--red {
  background: linear-gradient(135deg, #5c1212 0%, #9e2020 100%) !important;
  box-shadow: 0 6px 20px rgba(220,38,38,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
  border: 1px solid rgba(239,68,68,.25);
}
body.wr-dark .summary-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: translateY(-3px);
}
body.wr-dark .summary-card .card-label { color: rgba(255,255,255,.85) !important; }
body.wr-dark .summary-card .card-value { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
body.wr-dark .summary-card .card-sub { color: rgba(255,255,255,.65) !important; }

/* Glass panel — เดิมเป็น white, ใน dark เปลี่ยนเป็น surface */
body.wr-dark .glass-panel {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
body.wr-dark .panel-title {
  color: #fff !important;
}
body.wr-dark .panel-title i { color: var(--wr-d-blue) !important; }

/* Mode toggle (ผู้ค้า/ผู้เสพ buttons) */
body.wr-dark .mode-toggle {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border-2) !important;
}
body.wr-dark .mode-toggle button {
  background: transparent !important;
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .mode-toggle button:hover:not(.active) {
  background: var(--wr-d-surface-3) !important;
  color: #fff !important;
}
body.wr-dark .mode-toggle button.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.4) !important;
}

/* Flowchart SVG lines — ต้องเห็นได้ใน bg มืด */
body.wr-dark .flow-svg line { stroke: var(--wr-d-border-2) !important; }

/* Flowchart boxes — เบาสี gradient ลงนิด */
body.wr-dark .fn {
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.08);
}
body.wr-dark .fn--blue { background: linear-gradient(135deg, #1a3d7a, #2563eb) !important; }
body.wr-dark .fn--green { background: linear-gradient(135deg, #064022, #0d9e5c) !important; }
body.wr-dark .fn--red { background: linear-gradient(135deg, #5c1212, #b91c1c) !important; }
body.wr-dark .fn--orange { background: linear-gradient(135deg, #6a2b04, #c2410c) !important; }
body.wr-dark .fn--purple { background: linear-gradient(135deg, #3d1078, #6d28d9) !important; }
body.wr-dark .fn--cyan { background: linear-gradient(135deg, #0c4a5e, #0891b2) !important; }
body.wr-dark .fn--pink { background: linear-gradient(135deg, #721240, #be185d) !important; }
body.wr-dark .fn--grad1 { background: linear-gradient(135deg, #78350f, #d97706) !important; }

/* Top 5 list */
body.wr-dark .top5-item {
  color: var(--wr-d-text-dim) !important;
  border-bottom-color: var(--wr-d-border) !important;
}
body.wr-dark .top5-name { color: var(--wr-d-text) !important; }
body.wr-dark .top5-val { color: var(--wr-d-blue) !important; }

/* Station Type Top 10 list */
body.wr-dark .station-type-list {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border) !important;
}
body.wr-dark .st-item {
  color: var(--wr-d-text-dim) !important;
  border-bottom-color: var(--wr-d-border) !important;
}
body.wr-dark .st-name { color: var(--wr-d-text) !important; }
body.wr-dark .st-val { color: var(--wr-d-blue) !important; }
body.wr-dark .st-rank {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text-dim) !important;
}

/* Dash footer */
body.wr-dark .dash-footer {
  color: var(--wr-d-text-muted) !important;
  border-top: 1px solid var(--wr-d-border) !important;
}

/* Loading overlay */
body.wr-dark .loading-overlay {
  background: rgba(10,18,32,.92) !important;
  color: var(--wr-d-text) !important;
}

/* Date inputs with INLINE style (ตัดขอบ + bg ตาม) */
body.wr-dark input[type="date"][style*="border"] {
  background: var(--wr-d-bg) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
}

/* Page title / subtitle ของ dashboard */
body.wr-dark #pageTitle, body.wr-dark h1, body.wr-dark h2 { color: #fff !important; }
body.wr-dark #subtitleInfo, body.wr-dark .page-subtitle { color: var(--wr-d-text-dim) !important; }

/* Filter bar container (inline style: background:#f1f5f9) */
body.wr-dark .date-filter,
body.wr-dark #dateFilter,
body.wr-dark [class="date-filter"],
body.wr-dark div[id="dateFilter"] {
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.2);
}

/* Select & date inputs inside filter bar — override inline styles */
body.wr-dark #filterProvince,
body.wr-dark #filterStartDate,
body.wr-dark #filterEndDate,
body.wr-dark .date-filter select,
body.wr-dark .date-filter input[type="date"],
body.wr-dark .date-filter input[type="text"] {
  background: var(--wr-d-bg) !important;
  border: 1px solid var(--wr-d-border-2) !important;
  color: var(--wr-d-text) !important;
}
body.wr-dark #filterProvince:focus,
body.wr-dark #filterStartDate:focus,
body.wr-dark #filterEndDate:focus {
  border-color: var(--wr-d-blue) !important;
  box-shadow: 0 0 0 2px var(--wr-d-blue-glow) !important;
  outline: none;
}

/* Labels & icons inside filter bar (inline color:#475569, #64748b) */
body.wr-dark .date-filter label,
body.wr-dark #dateFilter label {
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .date-filter i,
body.wr-dark #dateFilter > i {
  color: var(--wr-d-text-muted) !important;
}
body.wr-dark .date-filter span {
  /* separator | */
  color: var(--wr-d-border-2) !important;
}

/* ปุ่ม "ค้นหา" — gradient คงเดิม แต่เพิ่ม glow */
body.wr-dark .date-filter button[onclick*="applyDateFilter"] {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 2px 10px rgba(37,99,235,.4) !important;
  border: 1px solid rgba(96,165,250,.3) !important;
}

/* ปุ่ม "รีเซ็ต" (circular/arrow-counterclockwise) — inline background:#fff */
body.wr-dark .date-filter button[onclick*="resetDateFilter"],
body.wr-dark .date-filter button[title*="รีเซ็ต"] {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text-dim) !important;
  border: 1px solid var(--wr-d-border-2) !important;
}
body.wr-dark .date-filter button[onclick*="resetDateFilter"]:hover {
  background: var(--wr-d-surface-4) !important;
  color: #fff !important;
}

/* Page header container — ใช้ซ้ำในหลาย dashboard */
body.wr-dark .page-header {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
  color: var(--wr-d-text) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
body.wr-dark .page-header .icon-box {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
body.wr-dark .page-header h1 { color: #fff !important; }
body.wr-dark .page-header .subtitle { color: var(--wr-d-text-dim) !important; }

/* ═══════════════════════════════════════════════════════
   30.8) STRONG CATCH-ALL for inline white backgrounds
   — จัดการ style="background: #fff / #FFFFFF / white"
     ที่ยังหลุดอยู่ใน table cell / card / header
   ═══════════════════════════════════════════════════════ */

/* Inline backgrounds แบบต่างๆ (รองรับทั้ง lower/upper case + มี/ไม่มีช่องว่าง) */
body.wr-dark [style*="background: #fff"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background:#fff"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #FFF"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background:#FFF"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #ffffff"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background:#ffffff"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #FFFFFF"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background:#FFFFFF"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: white"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background:white"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background-color: #fff"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background-color:#fff"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background-color: #FFFFFF"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background-color: white"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: rgb(255, 255, 255)"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: rgba(255,255,255"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #f9fafb"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background:#f9fafb"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #F9FAFB"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #f3f4f6"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #F3F4F6"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #f1f5f9"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #F1F5F9"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #f8fafc"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="background: #F8FAFC"]:not(.severity-pill):not(.badge):not(.btn) {
  background: var(--wr-d-surface) !important;
}

/* Inline color: #000 / dark → ให้เห็นใน dark bg */
body.wr-dark [style*="color: #000"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="color:#000"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="color: black"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="color:black"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="color: #000000"]:not(.severity-pill):not(.badge):not(.btn),
body.wr-dark [style*="color:#000000"]:not(.severity-pill):not(.badge):not(.btn) {
  color: var(--wr-d-text) !important;
}

/* TD/TH ใน table ที่มี inline bg ขาว → เปลี่ยน */
body.wr-dark table td[style*="#fff"],
body.wr-dark table td[style*="#FFF"],
body.wr-dark table td[style*="white"],
body.wr-dark table th[style*="#fff"],
body.wr-dark table th[style*="#FFF"],
body.wr-dark table th[style*="white"] {
  background: var(--wr-d-surface) !important;
  color: var(--wr-d-text) !important;
}

/* Back button (back-to-search-btn*) ที่ inline background:#fff; color:#0d1b4b */
body.wr-dark [id^="back-to-search-btn"],
body.wr-dark a[href*="warroom.html"][style*="background:#fff"],
body.wr-dark a[href*="warroom.html"][style*="background: #fff"] {
  background: var(--wr-d-surface-3) !important;
  color: #fff !important;
  border: 1px solid var(--wr-d-border-2) !important;
}
body.wr-dark [id^="back-to-search-btn"]:hover {
  background: var(--wr-d-surface-4) !important;
  transform: translateX(-2px);
}

/* Leaflet map container (inline background:#fff) */
body.wr-dark #leafletMap,
body.wr-dark [id*="Map"][style*="#fff"] {
  background: var(--wr-d-bg) !important;
  border-color: var(--wr-d-border-2) !important;
}

/* rounded-3 p-3 bg-light / white panels */
body.wr-dark .rounded-3.p-3,
body.wr-dark .p-3.rounded,
body.wr-dark .p-4.rounded {
  background: var(--wr-d-surface-2) !important;
}

/* ═══════════════════════════════════════════════════════
   30.9) INCIDENT DASHBOARD (incident-dashboard.html)
   — summary-table + chart-card + inline dim text
   ═══════════════════════════════════════════════════════ */

/* Summary table body — default text color ต้องอ่านออก */
body.wr-dark .summary-table tbody td {
  background: var(--wr-d-surface) !important;
  color: var(--wr-d-text) !important;
  border-color: var(--wr-d-border) !important;
}
body.wr-dark .summary-table tbody tr:nth-child(even) td {
  background: var(--wr-d-surface-2) !important;
}
body.wr-dark .summary-table tbody tr:hover td {
  background: rgba(96,165,250,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.25) !important;
}
body.wr-dark .summary-table thead th {
  border-color: rgba(255,255,255,.08) !important;
}
/* Sub-header "ราย" */
body.wr-dark .summary-table .th-unit,
body.wr-dark .summary-table thead .th-unit {
  background: var(--wr-d-surface-3) !important;
  color: var(--wr-d-text-dim) !important;
}
/* Sticky header colors (th-navy/red/yellow/blue) - คงธีมเดิม เพราะเป็น navy อยู่แล้ว */
body.wr-dark .summary-table .th-navy,
body.wr-dark .summary-table .th-red,
body.wr-dark .summary-table .th-yellow,
body.wr-dark .summary-table .th-blue {
  background: linear-gradient(180deg, var(--wr-d-surface-3), var(--wr-d-surface-2)) !important;
  color: #fff !important;
  border-bottom: 2px solid var(--wr-d-gold-soft) !important;
}

/* Footer row — cleaner ใน dark */
body.wr-dark .summary-table tfoot td {
  background: linear-gradient(180deg, #050a16, var(--wr-d-bg)) !important;
  color: var(--wr-d-gold) !important;
  border-top: 2px solid var(--wr-d-gold-soft) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── inline color overrides ที่มองไม่เห็นใน dark ── */
/* color:#1a2f6b (navy, cols ข้อมูล บสต.) → blue สว่าง */
body.wr-dark [style*="color: #1a2f6b"],
body.wr-dark [style*="color:#1a2f6b"],
body.wr-dark [style*="color: #0d1b4b"],
body.wr-dark [style*="color:#0d1b4b"],
body.wr-dark [style*="color: #1e293b"],
body.wr-dark [style*="color:#1e293b"],
body.wr-dark [style*="color: #1F2937"],
body.wr-dark [style*="color:#1F2937"],
body.wr-dark [style*="color: #1f2937"],
body.wr-dark [style*="color:#1f2937"],
body.wr-dark [style*="color: #334155"],
body.wr-dark [style*="color:#334155"] {
  color: #93c5fd !important;
}
/* color:#c0392b (red, จำนวน) → red สด */
body.wr-dark [style*="color: #c0392b"],
body.wr-dark [style*="color:#c0392b"],
body.wr-dark [style*="color: #dc2626"],
body.wr-dark [style*="color:#dc2626"] {
  color: #fca5a5 !important;
}
/* color:#4b5563 / #64748b (mute) → text-dim */
body.wr-dark [style*="color: #4b5563"],
body.wr-dark [style*="color:#4b5563"],
body.wr-dark [style*="color: #64748b"],
body.wr-dark [style*="color:#64748b"],
body.wr-dark [style*="color: #6b7280"],
body.wr-dark [style*="color:#6b7280"],
body.wr-dark [style*="color: #475569"],
body.wr-dark [style*="color:#475569"] {
  color: var(--wr-d-text-dim) !important;
}
/* color:#94a3b8 (muted) → text-muted */
body.wr-dark [style*="color: #94a3b8"],
body.wr-dark [style*="color:#94a3b8"] {
  color: var(--wr-d-text-muted) !important;
}

/* Chart card + title */
body.wr-dark .chart-card {
  background: var(--wr-d-surface) !important;
  border: 1px solid var(--wr-d-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
body.wr-dark .chart-title {
  color: #fff !important;
}
body.wr-dark .timestamp {
  color: var(--wr-d-text-muted) !important;
}

/* table-card-header, date-range, search-period */
body.wr-dark .section-header h2 { color: #fff !important; }
body.wr-dark .section-header h2 i { color: var(--wr-d-blue) !important; }
body.wr-dark .inc-date-range,
body.wr-dark .inc-date-range span {
  color: var(--wr-d-text-dim) !important;
}
body.wr-dark .inc-search-period-info {
  color: var(--wr-d-text-dim) !important;
  background: var(--wr-d-surface-2) !important;
  border: 1px solid var(--wr-d-border) !important;
}
body.wr-dark .inc-search-period-info i { color: var(--wr-d-blue) !important; }
body.wr-dark .table-card-header,
body.wr-dark .table-card-header small { color: var(--wr-d-text-dim) !important; }

/* ───────────────────────────────────────────────────────
   31) TRANSITION — smooth change when toggling (scoped)
   — ใส่เฉพาะ element ที่เปลี่ยนสีเวลา toggle ไม่ทุก element
   =================================================== */
body,
body .card, body .form-section-card, body .search-card, body .chart-card,
body .modal-content, body .dropdown-menu, body .list-group-item,
body .form-control, body .form-select, body input, body textarea, body select,
body .table, body .table td, body .table th,
body .wr-sidebar, body .wr-sidebar-item,
body .wr-topbar, body .wr-topbar-title,
body .btn-outline-primary, body .btn-outline-secondary, body .btn-light,
body .alert, body .badge, body .nav-link {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}