/* ElecCal — ระบบคำนวณไฟฟ้าอาคาร */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface2:#eef1f5; --border:#d8dee6;
  --ink:#1a2330; --ink2:#4a5568; --muted:#8894a3;
  --accent:#1f6fd6; --accent-soft:#e3eefb;
  --good:#1e8a4c; --good-bg:#e3f4ea;
  --warn:#b97a00; --warn-bg:#fdf3dd;
  --bad:#c43d3d; --bad-bg:#fbe7e7;
  --bar:#4a90d9; --bar-track:#e6ebf1;
  --radius:10px; --shadow:0 1px 3px rgba(20,30,50,.08);
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#141a22; --surface:#1d242e; --surface2:#232c38; --border:#33404f;
  --ink:#e8edf4; --ink2:#b6c2d0; --muted:#7c8a9a;
  --accent:#5aa2f0; --accent-soft:#1d3350;
  --good:#4cc07d; --good-bg:#173225; --warn:#e0a63f; --warn-bg:#3a2e14;
  --bad:#e57373; --bad-bg:#3d1f1f; --bar:#5aa2f0; --bar-track:#2a3441;
  --shadow:0 1px 3px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141a22; --surface:#1d242e; --surface2:#232c38; --border:#33404f;
    --ink:#e8edf4; --ink2:#b6c2d0; --muted:#7c8a9a;
    --accent:#5aa2f0; --accent-soft:#1d3350;
    --good:#4cc07d; --good-bg:#173225; --warn:#e0a63f; --warn-bg:#3a2e14;
    --bad:#e57373; --bad-bg:#3d1f1f; --bar:#5aa2f0; --bar-track:#2a3441;
    --shadow:0 1px 3px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Sarabun",-apple-system,"Segoe UI",Tahoma,"Leelawadee UI",sans-serif;
  font-size:15px; line-height:1.55;
}
h1,h2,h3{line-height:1.3; margin:.2em 0 .4em}
h2{font-size:1.15rem} h3{font-size:1rem}
a{color:var(--accent)}
small,.muted{color:var(--muted)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
header.app{
  position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
  padding:10px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
header.app .logo{font-weight:800; font-size:1.12rem; white-space:nowrap}
header.app .logo .sub{font-weight:500; color:var(--ink2); font-size:.85rem; display:block; margin-top:-2px}
header.app .actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
main{max-width:1180px; margin:0 auto; padding:16px}
footer.app{max-width:1180px; margin:0 auto; padding:14px 16px 40px; color:var(--muted); font-size:.85rem}

/* ---------- tabs ---------- */
nav.tabs{
  display:flex; gap:4px; overflow-x:auto; margin:2px 0 14px; padding-bottom:2px;
  scrollbar-width:thin;
}
nav.tabs button{
  border:1px solid var(--border); background:var(--surface); color:var(--ink2);
  border-radius:999px; padding:7px 15px; cursor:pointer; white-space:nowrap; font:inherit; font-size:.92rem;
}
nav.tabs button.active{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.tabpane{display:none} .tabpane.show{display:block}

/* ---------- cards & grids ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px; margin-bottom:14px}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.grid{display:grid; gap:10px 14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.field label{display:block; font-size:.8rem; color:var(--ink2); margin-bottom:3px}
input,select,button,textarea{font:inherit; color:var(--ink)}
input[type=text],input[type=number],select{
  width:100%; padding:7px 9px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); min-height:36px;
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
button.btn{
  border:1px solid var(--border); background:var(--surface); border-radius:8px;
  padding:7px 14px; cursor:pointer; font-size:.92rem;
}
button.btn:hover{border-color:var(--accent); color:var(--accent)}
button.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.btn.primary:hover{filter:brightness(1.08); color:#fff}
button.btn.danger:hover{border-color:var(--bad); color:var(--bad)}
button.icon{border:none; background:none; cursor:pointer; color:var(--muted); padding:4px 6px; border-radius:6px}
button.icon:hover{color:var(--bad); background:var(--bad-bg)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto; margin:6px 0}
table.tbl{border-collapse:collapse; width:100%; font-size:.9rem}
table.tbl th,table.tbl td{border:1px solid var(--border); padding:6px 8px; text-align:left; vertical-align:middle}
table.tbl th{background:var(--surface2); font-weight:600; color:var(--ink2); white-space:nowrap}
table.tbl td.r,table.tbl th.r{text-align:right}
table.tbl td.c,table.tbl th.c{text-align:center}
table.tbl input,table.tbl select{min-width:64px; min-height:32px; padding:4px 6px}
table.tbl input.w-name{min-width:150px}
table.tbl tr.sum td{background:var(--surface2); font-weight:600}

/* ---------- stat tiles ---------- */
.tiles{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:8px 0}
.tile{background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px}
.tile .lbl{font-size:.78rem; color:var(--ink2)}
.tile .val{font-size:1.35rem; font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums}
.tile .unit{font-size:.8rem; color:var(--muted); font-weight:500}

/* ---------- status chips ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 10px;
  font-size:.8rem; font-weight:600; white-space:nowrap}
.chip.good{color:var(--good); background:var(--good-bg)}
.chip.warn{color:var(--warn); background:var(--warn-bg)}
.chip.bad{color:var(--bad); background:var(--bad-bg)}
.chip.info{color:var(--accent); background:var(--accent-soft)}

/* ---------- phase bars (single-hue, labels carry identity) ---------- */
.phaserow{display:grid; grid-template-columns:34px 1fr 170px; gap:8px; align-items:center; margin:4px 0}
.phaserow .plabel{font-weight:700; color:var(--ink2); font-family:var(--mono)}
.phaserow .pval{font-size:.85rem; color:var(--ink2); text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.bar{height:14px; background:var(--bar-track); border-radius:4px; position:relative; overflow:hidden}
.bar>i{position:absolute; inset:0 auto 0 0; background:var(--bar); border-radius:4px; min-width:2px}
.meter{height:16px; background:var(--bar-track); border-radius:5px; position:relative; overflow:hidden; margin:4px 0}
.meter>i{position:absolute; inset:0 auto 0 0; border-radius:5px; background:var(--bar)}
.meter>i.good{background:var(--good)} .meter>i.warn{background:var(--warn)} .meter>i.bad{background:var(--bad)}
.meter .tick{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--muted); opacity:.7}

/* ---------- panel cards ---------- */
.panelcard{border-left:4px solid var(--accent)}
.panelcard .phead{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:8px}
.panelcard .phead .field{min-width:130px}
.panelcard .phead .grow{flex:1 1 180px}
.result-strip{display:flex; gap:8px 18px; flex-wrap:wrap; background:var(--surface2);
  border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-top:10px; font-size:.9rem}
.result-strip b{font-family:var(--mono)}
.kv{display:flex; gap:6px; align-items:baseline; white-space:nowrap}
.kv .k{color:var(--ink2); font-size:.82rem}

/* ---------- misc ---------- */
.note{border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:6px;
  padding:8px 12px; font-size:.88rem; margin:8px 0; color:var(--ink)}
.note.warn{border-color:var(--warn); background:var(--warn-bg)}
.split{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
ul.checks{padding-left:20px; margin:6px 0}
ul.checks li{margin:4px 0}
.sld{width:100%; overflow-x:auto}
.sld svg text{font-family:"Sarabun",sans-serif}
hr.sep{border:none; border-top:1px solid var(--border); margin:12px 0}
.src{font-size:.8rem; color:var(--muted); margin-top:4px}
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink);
  color:var(--bg); padding:9px 18px; border-radius:999px; font-size:.9rem; opacity:0;
  pointer-events:none; transition:opacity .25s; z-index:99}
#toast.show{opacity:.95}

@media (max-width:640px){
  main{padding:10px}
  .phaserow{grid-template-columns:28px 1fr 118px}
  header.app{padding:8px 10px}
}

/* ---------- print (รายงาน) ---------- */
@media print{
  :root{--bg:#fff; --surface:#fff; --surface2:#f2f2f2; --border:#999; --ink:#000; --ink2:#222; --muted:#555; --shadow:none}
  header.app,nav.tabs,footer.app .no-print,.no-print{display:none !important}
  body{font-size:12px}
  main{max-width:none; padding:0}
  .tabpane{display:none} .tabpane#tab-report{display:block}
  .card{break-inside:avoid; box-shadow:none}
  a{color:#000; text-decoration:none}
}