/* ============================================================
   SEMS — โหมดสว่าง / มืด
   โหลดไฟล์นี้ "หลัง" stylesheet อื่นทุกครั้ง
   ค่าเริ่มต้นคือโหมดมืด — โหมดสว่างทับด้วย [data-theme="light"]

   โหมดสว่าง = โทนขาว–น้ำเงิน
   ตัวแปร --amber ยังใช้ชื่อเดิมเพื่อไม่ต้องแก้ CSS ทุกไฟล์
   แต่ในโหมดสว่างถูกแทนค่าเป็นสีน้ำเงินแล้ว
   ============================================================ */

html{ color-scheme:dark; }
html[data-theme="light"]{ color-scheme:light; }

html[data-theme="light"],
html[data-theme="light"] :root,
html[data-theme="light"] body{
  --ink:#16202b;
  --ink-dim:#55677a;
  --ink-faint:#8798a9;

  --bg:#f4f7fb;
  --bg-panel:#ffffff;
  --bg-raised:#eef3f9;
  --line:#dbe4ee;
  --line-strong:#bfcedd;

  /* สีเน้น — น้ำเงิน */
  --amber:#1565c0;
  --amber-dim:#7fb0e8;
  --amber-glow:rgba(21,101,192,0.10);

  --blue:#1565c0;
  --blue-soft:#e8f1fb;
  --blue-deep:#0d47a1;

  --ok:#12805a;
  --danger:#c3372c;
  --info:#1565c0;
}

html[data-theme="light"] body{
  background:var(--bg);
  color:var(--ink);
}

/* ---- ส่วนที่ธีมมืดใช้สีตายตัว ---- */
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(13,71,161,.07);
}
html[data-theme="light"] .login-wrap{
  background:
    radial-gradient(1000px 560px at 50% -12%, rgba(21,101,192,0.13), transparent 70%),
    var(--bg);
}
html[data-theme="light"] .login-card,
html[data-theme="light"] .modal{
  box-shadow:0 18px 44px rgba(13,71,161,.16);
}
html[data-theme="light"] .overlay,
html[data-theme="light"] .modal-overlay{ background:rgba(16,32,52,0.44); }

html[data-theme="light"] .menu-card:hover{
  box-shadow:0 14px 32px rgba(13,71,161,.16);
  border-color:var(--amber-dim);
}
html[data-theme="light"] .menu-card .ico{ background:var(--blue-soft); }

html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .sems-btn.primary,
html[data-theme="light"] .seg-opt.on{ color:#ffffff; }

html[data-theme="light"] .btn.primary,
html[data-theme="light"] .sems-btn.primary{ background:var(--amber); border-color:var(--amber); }
html[data-theme="light"] .btn.primary:hover:not(:disabled),
html[data-theme="light"] .sems-btn.primary:hover:not(:disabled){ background:var(--blue-deep); border-color:var(--blue-deep); }

html[data-theme="light"] .tab-btn.active{ background:var(--amber); }
html[data-theme="light"] .seg-opt.on{ background:var(--amber); border-color:var(--amber); }

html[data-theme="light"] .sems-avatar,
html[data-theme="light"] .avatar{ background:var(--amber); color:#ffffff; }

html[data-theme="light"] .status-dot{ box-shadow:none; }
html[data-theme="light"] #toast{ box-shadow:0 10px 26px rgba(13,71,161,.20); }
html[data-theme="light"] tbody tr:hover{ background:var(--blue-soft); }
html[data-theme="light"] th{ background:var(--blue-soft); color:var(--ink-dim); }

html[data-theme="light"] .badge.good{ background:rgba(18,128,90,.10); }
html[data-theme="light"] .badge.bad{ background:rgba(195,55,44,.10); }

html[data-theme="light"] .modal-box{ box-shadow:0 18px 44px rgba(13,71,161,.18); }
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat,
html[data-theme="light"] .item-card{ box-shadow:0 1px 2px rgba(13,71,161,.06); }
html[data-theme="light"] .noimg{ color:var(--ink-faint); }

html[data-theme="light"] .mode-banner{
  background:var(--blue-soft);
  border-color:#c5dcf5;
}

/* ปุ่มสลับธีม */
.sems-btn.icon{
  width:34px; padding:0; display:inline-flex; align-items:center;
  justify-content:center; font-size:15px; line-height:1;
}

@media print{
  html[data-theme="light"] body, html body{ background:#fff !important; color:#000 !important; }
}