/* --- theme-system.css (dark tuning) --- */
:root { --bg:#0b1220; --card:#111827; --card-border:#223046; --muted:#9aa4b2; --muted-strong:#cbd5e1; }

html.dark body{background:var(--bg);color:#e5e7eb;}
/* กล่องพื้นฐาน */
html.dark .card,
html.dark .bg-white{ background:var(--card)!important; }
html.dark .border,
html.dark .border-neutral-200,
html.dark .border-neutral-300{ border-color:var(--card-border)!important; }
html.dark .hover\:bg-neutral-50:hover{ background:#0f172a!important; }

/* ตัวอักษรที่เดิมจางเกินไป */
html.dark .text-neutral-500{ color:var(--muted)!important; }
html.dark .text-neutral-600{ color:var(--muted-strong)!important; }
html.dark .text-neutral-700{ color:#e5e7eb!important; }
html.dark .text-neutral-800,
html.dark .text-neutral-900{ color:#e5e7eb!important; }

/* ป้าย/พื้นเทา */
html.dark .bg-neutral-100{ background:#162132!important; color:#d1d5db!important; }
html.dark .bg-neutral-200{ background:#223046!important; color:#e5e7eb!important; }
html.dark .text-emerald-600{ color:#34d399!important; } /* ค่าบน status bar ให้ตัดกับพื้น */

/* ฟอร์ม */
html.dark select,
html.dark input{ background:var(--card)!important; color:#e5e7eb!important; border-color:var(--card-border)!important; }

/* ป้องกันกล่องแสบตาในหน้า Priority/Auto-Temp */
html.dark .consolev2 .bg-white{ background:var(--card)!important; }
/* ===== Indigo theme additions (Console/Dashboard) ===== */
:root{
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe; --indigo-300:#a5b4fc;
  --indigo-400:#818cf8; --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca;
  --indigo-800:#3730a3; --indigo-900:#312e81;
  --ok-50:#ecfdf5; --ok-600:#059669;
}

.btn-primary{
  background: linear-gradient(180deg,var(--indigo-600),var(--indigo-700));
  color:#fff; border:0; border-radius:12px; padding:.65rem 1.25rem; font-weight:600;
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 8px 20px rgba(79,70,229,.15);
  transition:transform .05s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(79,70,229,.22); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.badge-primary{
  background: rgba(79,70,229,.12); color: var(--indigo-700); border-radius:10px; padding:.25rem .6rem; font-weight:600;
}
.badge-time{
  background: rgba(99,102,241,.12); color:var(--indigo-700); border-radius:10px; padding:.25rem .6rem; font-variant-numeric:tabular-nums;
}

/* Tabs */
.navtab{
  border-radius:12px; padding:.55rem 1rem; font-weight:600; border:1px solid #e5e7eb; color:#111827; background:#fff;
}
.navtab.active{
  background:var(--indigo-600); border-color:var(--indigo-600); color:#fff; box-shadow:0 6px 18px rgba(79,70,229,.25);
}

/* Cards/containers harmonize with Dashboard */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.card-muted { background:#fff; border:1px dashed #e5e7eb; border-radius:16px; }

/* ---- Universal SWITCH (checkbox → iOS-like) ---- */
.switch{
  display:inline-flex; align-items:center; gap:.5rem; user-select:none; cursor:pointer;
}
.switch > input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{
  width:44px; height:26px; background:#e5e7eb; border-radius:999px; position:relative; transition:background .2s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.switch .thumb{
  position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:999px;
  transition:transform .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.switch:has(input:checked) .track{ background: var(--indigo-600); }
.switch:has(input:checked) .thumb{ transform: translateX(18px); }

/* ---- Pill Toggle (checkbox → pill button) ---- */
.pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .8rem; border-radius:12px; cursor:pointer;
  border:1px solid #e5e7eb; background:#fff; color:#111827; font-weight:600; transition:all .15s ease;
}
.pill > input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; }
.pill:hover{ background:#f8fafc; }
.pill:has(input:checked){
  border-color: var(--indigo-600); background: rgba(79,70,229,.1); color: var(--indigo-700);
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.18);
}

/* Status bar metric color */
.metric-key{ font-size:.75rem; color:#6b7280; }
.metric-val{ font-weight:800; color:var(--indigo-600); }

/* Dark mode harmonize */
html.dark .card{ background:#0f172a; border-color:#1f2937; }
html.dark .card-muted{ background:#0b1220; border-color:#1f2937; }
html.dark .navtab{ border-color:#1f2937; background:#0b1220; color:#e5e7eb; }
html.dark .navtab.active{ background:var(--indigo-600); border-color:transparent; color:#fff; }
html.dark .pill{ background:#0b1220; border-color:#1f2937; color:#e5e7eb; }
html.dark .pill:hover{ background:#0e1627; }
html.dark .pill:has(input:checked){ background:rgba(79,70,229,.22); border-color:var(--indigo-600); color:#fff; }
html.dark .metric-key{ color:#94a3b8; }
html.dark .metric-val{ color:#a5b4fc; }

/* Small helpers */
.mt-6{ margin-top:1.5rem; }
.space-y-6 > * + *{ margin-top:1.5rem; }
.rounded-2xl{ border-radius:16px; }
.shadow-sm{ box-shadow:0 1px 2px rgba(0,0,0,.04); }
/* === Indigo accents (เข้มออกม่วง) ===================================== */
:root{
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe;
  --indigo-300:#a5b4fc; --indigo-400:#818cf8; --indigo-500:#6366f1;
  --indigo-600:#4f46e5; --indigo-700:#4338ca; --indigo-800:#3730a3; --indigo-900:#312e81;
  --ok:#10b981; --danger:#ef4444;
}

.btn-primary{
  background: linear-gradient(180deg,var(--indigo-600),var(--indigo-700));
  color:#fff; border:1px solid var(--indigo-700);
}
.btn-primary:hover{ background: linear-gradient(180deg,var(--indigo-600),var(--indigo-800)); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.btn-tab{ background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; }
.btn-tab.on{ background:var(--indigo-600); color:#fff; border-color:var(--indigo-700); }

.badge-soft{ background: var(--indigo-50); color: var(--indigo-700); border:1px solid var(--indigo-200); }

/* --- Switch (toggle) --------------------------------------------------- */
.switch{
  --h:28px; --w:48px;
  position:relative; display:inline-block; width:var(--w); height:var(--h);
}
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background:#d1d5db; border-radius:999px; transition:.2s;
  border:1px solid #cbd5e1;
}
.switch .thumb{
  position:absolute; top:2px; left:2px; width:24px; height:24px;
  background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:.2s;
}
.switch input:checked + .track{ background:var(--indigo-600); border-color:var(--indigo-700); }
.switch input:checked + .track + .thumb{ transform:translateX(20px); }

/* --- Pill toggle (ใช้แทน checkbox) ------------------------------------ */
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .8rem;
  border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#111827;
  user-select:none; cursor:pointer; transition:.15s;
}
.pill:hover{ background:#f9fafb; }
.pill.on{ background:var(--indigo-50); border-color:var(--indigo-300); color:var(--indigo-800); }
.pill .dot{ width:.6rem; height:.6rem; border-radius:999px; background:transparent; border:1.5px solid #9ca3af; }
.pill.on .dot{ background:var(--indigo-600); border-color:var(--indigo-600); }

/* --- Card/field harmony (ให้เข้ากับ Dashboard เดิม) ------------------- */
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; }
.field{ border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#111827; }
.field:focus{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.2); border-color:var(--indigo-400); }

/* --- List item hover --------------------------------------------------- */
.row-soft{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; transition:.12s; }
.row-soft:hover{ background:#f9fafb; }