/* ============================================================
   Theme palette — Dark (default) & Light
   Neutral colors (background / border / text) ใช้ตัวแปรเหล่านี้
   ส่วนสี status/accent (เขียว แดง น้ำเงิน ฯลฯ) คงเดิมทั้ง 2 ธีม
   ============================================================ */
:root,
[data-theme="dark"] {
  --bg:           #0f172a;
  --bg-panel:     #1e293b;
  --border:       #334155;
  --text-faint:   #ffffff;
  --text-muted:   #ffffff;
  --text-soft:    #ffffff;
  --text:         #ffffff;
  --text-body:    #ffffff;
  --text-strong:  #ffffff;

  /* translucent surface variants */
  --panel-a44:    #1e293b44;
  --panel-a55:    #1e293b55;
  --panel-acc:    #1e293bcc;
  --bg-a44:       #0f172a44;
  --bg-a66:       #0f172a66;
  --bg-a99:       #0f172a99;
  --bg-add:       #0f172add;
  --border-soft:  #33415522;
  --border-faint: #47556966;

  /* shadows (dark — mostly invisible) */
  --shadow-sm:    0 1px 3px #00000066;
  --shadow-md:    0 4px 16px #00000066;
  --shadow-lg:    0 8px 32px #00000088;

  color-scheme: dark;
}

[data-theme="light"] {
  /* ── Base backgrounds ─────────────────────────── */
  --bg:           #eaf1fb;       /* page bg: soft blue-tinted white */
  --bg-panel:     #f7faff;       /* cards, sidebar, panels: white-blue */
  --border:       #d8e2f0;       /* dividers */

  /* ── Text hierarchy ───────────────────────────── */
  --text-faint:   #000000;
  --text-muted:   #000000;
  --text-soft:    #000000;
  --text:         #000000;
  --text-body:    #000000;
  --text-strong:  #000000;

  /* ── Translucent surfaces ─────────────────────── */
  --panel-a44:    #f7faffaa;
  --panel-a55:    #f7faffbb;
  --panel-acc:    #f7fafff0;
  --bg-a44:       #e2ebf966;
  --bg-a66:       #e2ebf999;
  --bg-a99:       #eaf1fbee;
  --bg-add:       #eaf1fbfc;
  --border-soft:  #d8e2f044;
  --border-faint: #bccde366;

  /* ── Shadows (light — visible depth) ─────────── */
  --shadow-sm:    0 1px 4px #1a2d3e14, 0 0 1px #1a2d3e0a;
  --shadow-md:    0 4px 16px #1a2d3e18, 0 1px 4px #1a2d3e0a;
  --shadow-lg:    0 8px 32px #1a2d3e22, 0 2px 8px #1a2d3e10;

  color-scheme: light;
}

/* ── Light-mode surface refinements ────────────────────── */
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #f9fbff 0%, #eef4fc 100%);
  border-right-color: #d8e2f0;
  box-shadow: 2px 0 12px #1a2d3e10;
}

[data-theme="light"] .topbar,
[data-theme="light"] header {
  background: linear-gradient(90deg, #f9fbff 0%, #eef4fc 100%);
  box-shadow: 0 1px 8px #1a2d3e12;
  border-bottom-color: #d8e2f0;
}

[data-theme="light"] .device-card,
[data-theme="light"] .card-panel,
[data-theme="light"] .stat-card,
[data-theme="light"] .info-card {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .device-card:hover,
[data-theme="light"] .stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #b8c7d8;
}

[data-theme="light"] .modal-box,
[data-theme="light"] .modal-inner {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .modal-overlay {
  background: #0d1d2b99;
}

[data-theme="light"] table th {
  background: #eaf1fb;
  color: var(--text-muted);
  border-bottom-color: #d8e2f0;
}
[data-theme="light"] table td {
  border-bottom-color: #edf0f4;
}
[data-theme="light"] table tr:hover td {
  background: #eef4fc;
}

[data-theme="light"] .nav-item.active {
  background: #2563eb18;
  border-left-color: #2563eb;
  color: #2563eb;
}
[data-theme="light"] .nav-item:hover {
  background: #eaf1fb;
  color: var(--text-body);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #f1f6fd;
  border-color: #c8d3df;
  color: var(--text-body);
  box-shadow: inset 0 1px 3px #1a2d3e08;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  background: #f7faff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #2563eb22;
}

[data-theme="light"] .btn-hd,
[data-theme="light"] .btn-logout,
[data-theme="light"] .btn-theme {
  background: #f7faff;
  border-color: #c8d3df;
  color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-hd:hover { border-color: #2563eb; color: #2563eb; box-shadow: 0 0 0 2px #2563eb22; }
[data-theme="light"] .btn-logout:hover { border-color: #dc2626; color: #dc2626; }
[data-theme="light"] .btn-theme:hover  { border-color: #2563eb; color: #2563eb; }

[data-theme="light"] .badge-nodata {
  background: #eaf1fb;
  color: var(--text-muted);
  border-color: #c8d3df;
}

[data-theme="light"] .page-content,
[data-theme="light"] .main-content {
  background: #eaf1fb;
}

/* Admin tabs */
[data-theme="light"] .tab-btn {
  background: #eaf1fb;
  border-color: #d8e2f0;
  color: var(--text-muted);
}
[data-theme="light"] .tab-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* Overview map container */
[data-theme="light"] .map-container {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-md);
}

/* ── Light-mode admin page overrides ───────────────────── */
[data-theme="light"] header {
  background: linear-gradient(90deg, #f9fbff 0%, #eef4fc 100%);
  box-shadow: 0 1px 8px #1a2d3e12;
}

[data-theme="light"] .btn-theme-admin {
  background: #eaf1fb;
  border-color: #c8d3df;
  color: var(--text-soft);
}
[data-theme="light"] .btn-theme-admin:hover {
  border-color: #2563eb;
  color: #1d4ed8;
  background: #2563eb12;
}

[data-theme="light"] .nav-tab {
  background: #eaf1fb;
  border-color: #d8e2f0;
  color: var(--text-muted);
}
[data-theme="light"] .nav-tab.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
[data-theme="light"] .nav-tab:hover:not(.active) {
  background: #e4eaf2;
  color: var(--text-body);
}

[data-theme="light"] .btn-primary {
  background: #2563eb18;
  color: #1d4ed8;
  border-color: #2563eb88;
}
[data-theme="light"] .btn-danger {
  background: #dc262618;
  color: #b91c1c;
  border-color: #dc262688;
}
[data-theme="light"] .btn-success {
  background: #16a34a18;
  color: #15803d;
  border-color: #16a34a88;
}
[data-theme="light"] .btn-warning {
  background: #d9770618;
  color: #c2410c;
  border-color: #d9770688;
}

[data-theme="light"] .content,
[data-theme="light"] .page-content {
  background: #eaf1fb;
}

[data-theme="light"] table {
  background: #f7faff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] th {
  background: #eaf1fb;
  color: #4f6478;
  font-weight: 700;
  border-bottom: 2px solid #d8e2f0;
}
[data-theme="light"] td {
  border-bottom-color: #edf1f6;
  color: var(--text-body);
}
[data-theme="light"] tr:hover td {
  background: #eef4fc;
}

[data-theme="light"] .modal,
[data-theme="light"] .overlay > div {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: 0 20px 60px #1a2d3e2a, 0 4px 16px #1a2d3e14;
}
[data-theme="light"] .overlay {
  background: #1a2d3e66;
  backdrop-filter: blur(4px);
}

[data-theme="light"] .check-list {
  background: #f1f6fd;
  border-color: #d8e2f0;
}
[data-theme="light"] .check-item:hover {
  background: #edf1f6;
}

/* ── Light-mode overview overrides ─────────────────────── */
[data-theme="light"] .stats-bar {
  background: #f7faff;
  border-bottom-color: #d8e2f0;
  box-shadow: 0 1px 4px #1a2d3e0a;
}
[data-theme="light"] .bulk-bar {
  background: #eef4fc;
  border-bottom-color: #d8e2f0;
}

[data-theme="light"] .map-section {
  background: transparent;
}
[data-theme="light"] .map-wrap {
  box-shadow: 0 4px 24px #1a2d3e20, 0 1px 6px #1a2d3e10;
  border: 1px solid #d8e2f0;
  border-radius: 12px;
}
[data-theme="light"] .map-wrap img {
  background: #eaf1fb;
}

[data-theme="light"] .pin-circle {
  background: radial-gradient(circle at 35% 35%, #e2e8f0, #c8d3df);
  border-color: #94a3b8;
  box-shadow: 0 2px 10px #1a2d3e30, inset 0 1px 2px #ffffff80;
}
[data-theme="light"] .pin-circle.on {
  background: radial-gradient(circle at 35% 35%, #dcfce7, #bbf7d0);
  border-color: #22c55e;
  box-shadow: 0 0 0 3px #22c55e28, 0 2px 10px #1a2d3e20;
}
[data-theme="light"] .pin-circle.offline {
  background: radial-gradient(circle at 35% 35%, #fee2e2, #fecaca);
  border-color: #ef4444;
  box-shadow: 0 0 0 3px #ef444428, 0 2px 10px #1a2d3e20;
}
[data-theme="light"] .pin-icon { filter: none; }
[data-theme="light"] .pin-status-text { color: #4f6478; }
[data-theme="light"] .pin-circle.on .pin-status-text { color: #15803d; }
[data-theme="light"] .pin-circle.offline .pin-status-text { color: #b91c1c; }

[data-theme="light"] .pin-label {
  background: #ffffffee;
  border-color: #c8d3df;
  color: #1a2d3e;
  box-shadow: 0 1px 4px #1a2d3e14;
}

[data-theme="light"] .device-card {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: 0 1px 4px #1a2d3e0e, 0 0 1px #1a2d3e08;
}
[data-theme="light"] .device-card:hover {
  box-shadow: 0 4px 16px #1a2d3e18;
  border-color: #2563eb88;
}
[data-theme="light"] .sensor-item {
  background: #eef4fc;
}

[data-theme="light"] .search-input {
  background: #f7faff;
  border-color: #c8d3df;
  box-shadow: inset 0 1px 3px #1a2d3e08;
}
[data-theme="light"] .filter-btn {
  background: #f7faff;
  border-color: #c8d3df;
  color: var(--text-muted);
  box-shadow: 0 1px 3px #1a2d3e0a;
}
[data-theme="light"] .filter-btn.active-f {
  background: #2563eb12;
  border-color: #2563eb;
  color: #1d4ed8;
}

[data-theme="light"] .section-divider span {
  color: var(--text-muted);
}
[data-theme="light"] .section-divider::before,
[data-theme="light"] .section-divider::after {
  background: #d8e2f0;
}

[data-theme="light"] .btn-edit-mode {
  background: #f7faff;
  border-color: #c8d3df;
  color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-edit-mode.active {
  background: #fbbf2418;
  border-color: #d97706;
  color: #b45309;
}

/* ── Light sidebar override ─────────────────────────────── */
[data-theme="light"] .sidebar-logo {
  border-bottom-color: #d8e2f0;
}
[data-theme="light"] .sidebar-footer {
  border-top-color: #d8e2f0;
}
[data-theme="light"] .sidebar-user {
  color: var(--text-soft);
}

/* ── Light-mode Plant Dashboard (index.html) ───────────── */
[data-theme="light"] .ctrl-panel {
  background: #f7faff;
  border-right-color: #d8e2f0;
  box-shadow: 2px 0 8px #1a2d3e0a;
}
[data-theme="light"] .ctrl-section h3 {
  color: #7a8fa6;
}

[data-theme="light"] .btn-power {
  background: #eaf1fb;
  border-color: #c8d3df;
  color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-power.on {
  background: #dcfce7;
  color: #15803d;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px #22c55e18, var(--shadow-sm);
}
[data-theme="light"] .btn-power.off {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #ef4444;
  box-shadow: 0 0 0 3px #ef444418, var(--shadow-sm);
}

[data-theme="light"] .btn-mode,
[data-theme="light"] .btn-speed {
  background: #eaf1fb;
  border-color: #c8d3df;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-mode.active {
  background: #2563eb14;
  color: #1d4ed8;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb18;
}
[data-theme="light"] .btn-speed.active {
  background: #6d28d914;
  color: #5b21b6;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px #7c3aed18;
}

[data-theme="light"] .sp-row input[type=number] {
  background: #f1f6fd;
  border-color: #c8d3df;
  color: var(--text-body);
  box-shadow: inset 0 1px 2px #1a2d3e08;
}
[data-theme="light"] .sp-row input[type=number]:focus {
  background: #f7faff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #2563eb22;
}
[data-theme="light"] .btn-set {
  background: #eaf1fb;
  border-color: #c8d3df;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .kpi-card {
  background: #f7faff;
  border-color: #7327F5;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .kpi-card:hover {
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .aqi-bar {
  background: #e8edf5;
}

[data-theme="light"] .chart-card {
  background: #f7faff;
  border-color: #7327F5;
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .tab {
  background: #eaf1fb;
  border-color: #c8d3df;
  color: var(--text-muted);
}
[data-theme="light"] .tab.active {
  background: #2563eb12;
  border-color: #2563eb;
  color: #1d4ed8;
}

[data-theme="light"] .hours-stat {
  background: #f7faff;
  border-color: #7327F5;
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .sensor-panel {
  background: #eaf1fb;
}

[data-theme="light"] .device-select,
[data-theme="light"] .btn-header {
  background: #f7faff;
  border-color: #c8d3df;
  color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-header:hover {
  border-color: #2563eb;
  color: #1d4ed8;
}
[data-theme="light"] .btn-header.admin {
  border-color: #7c3aed88;
  color: #5b21b6;
}

/* ── Light-mode login page ──────────────────────────────── */
[data-theme="light"] body::before {
  background: linear-gradient(135deg, #e0e7f3cc 0%, #c8d8eecc 100%);
}
[data-theme="light"] .card {
  background: #fffffff5;
  border: 1px solid #d8e2f0;
  box-shadow: 0 20px 60px #1a2d3e20, 0 4px 16px #1a2d3e10;
}

/* ── Light-mode plant-info page ─────────────────────────── */
[data-theme="light"] .pi-content {
  background: #eaf1fb;
}
[data-theme="light"] .pi-hero,
[data-theme="light"] .pi-card {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .pi-hero:hover,
[data-theme="light"] .pi-card:hover {
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .pi-hero-img-placeholder {
  background: #e8edf5;
}
[data-theme="light"] .pi-row {
  border-bottom-color: #edf1f6;
}

/* ── Light-mode alarm page ──────────────────────────────── */
[data-theme="light"] .alarm-toolbar {
  background: #f7faff;
  border-bottom-color: #d8e2f0;
  box-shadow: 0 1px 4px #1a2d3e0a;
}
[data-theme="light"] .alarm-content {
  background: #eaf1fb;
}
[data-theme="light"] .sum-card {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .alarm-card {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .alarm-card:hover {
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .alarm-card.active {
  border-left-color: #dc2626;
  background: #fff5f5;
}
[data-theme="light"] .alarm-card.acked {
  background: #f7fdf9;
}
[data-theme="light"] .filter-btn {
  background: #f7faff;
  border-color: #c8d3df;
  color: var(--text-muted);
  box-shadow: 0 1px 3px #1a2d3e0a;
}
[data-theme="light"] .filter-btn.active-f {
  background: #2563eb12;
  border-color: #2563eb;
  color: #1d4ed8;
}

/* ── Light-mode data-logs page ──────────────────────────── */
[data-theme="light"] .log-toolbar {
  background: #f7faff;
  border-bottom-color: #d8e2f0;
  box-shadow: 0 1px 4px #1a2d3e0a;
}
[data-theme="light"] .log-select,
[data-theme="light"] .log-input {
  background: #f1f6fd;
  border-color: #c8d3df;
  color: var(--text-body);
  box-shadow: inset 0 1px 2px #1a2d3e08;
}
[data-theme="light"] .log-select:focus,
[data-theme="light"] .log-input:focus {
  background: #f7faff;
  border-color: #2563eb;
}
[data-theme="light"] .summary-section {
  background: #eaf1fb;
}
[data-theme="light"] .sum-card {
  background: #f7faff;
  border-color: #d8e2f0;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .table-wrap {
  border-color: #d8e2f0;
  box-shadow: var(--shadow-sm);
  background: #f7faff;
}
[data-theme="light"] thead th {
  background: #eaf1fb;
  border-bottom: 2px solid #d8e2f0;
  color: #4f6478;
}
[data-theme="light"] td {
  border-bottom-color: #edf1f6;
}
[data-theme="light"] tr:hover td {
  background: #eef4fc;
}
[data-theme="light"] .chip-off {
  background: #e8edf5;
  color: #7a8fa6;
}

/* ── Dark-mode: ทุก font เป็นสีขาว (รวม Card ทุกประเภท) ── */
[data-theme="dark"] * { color: #ffffff !important; }
/* คืนสีพิเศษ (status / accent) */
[data-theme="dark"] .badge-online,
[data-theme="dark"] .stat-online,
[data-theme="dark"] .pi-live-badge.online  { color: #4ade80 !important; }
[data-theme="dark"] .badge-offline,
[data-theme="dark"] .stat-offline,
[data-theme="dark"] .pi-live-badge.offline { color: #f87171 !important; }
[data-theme="dark"] .badge-nodata,
[data-theme="dark"] .pi-live-badge.no_data { color: #94a3b8 !important; }

/* ── Light-mode: ทุก font เป็นสีดำ (รวม Card ทุกประเภท) ── */
[data-theme="light"] * { color: #000000 !important; }
/* คืนสีพิเศษ (status / accent) */
[data-theme="light"] .badge-online,
[data-theme="light"] .stat-online,
[data-theme="light"] .pi-live-badge.online  { color: #16a34a !important; }
[data-theme="light"] .badge-offline,
[data-theme="light"] .stat-offline,
[data-theme="light"] .pi-live-badge.offline { color: #dc2626 !important; }
[data-theme="light"] .badge-nodata,
[data-theme="light"] .pi-live-badge.no_data { color: #64748b !important; }
/* ปุ่มที่ใช้ background สีเข้ม ให้ตัวอักษรเป็นขาว */
[data-theme="light"] .tab-btn.active,
[data-theme="light"] .nav-tab.active,
[data-theme="light"] .btn-bulk,
[data-theme="light"] .sensor-kpi-card-head,
[data-theme="light"] .sensor-kpi-card-head * { color: #ffffff !important; }

/* smooth transition when switching */
body, .sidebar, .topbar, .page-wrapper, header,
.device-card, .modal, table, th, td,
input, select, .btn-hd, .btn-logout, .btn-theme,
.nav-item, .modal-box, .modal-inner,
.stats-bar, .bulk-bar, .map-wrap, .pin-circle,
.search-input, .filter-btn, .sensor-item,
.alarm-card, .alarm-toolbar, .sum-card,
.log-toolbar, .table-wrap {
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, box-shadow .25s ease;
}