/* andon-server — หน้าเว็บจัดการ (โทนเดียวกับ docs/andon-demo.html) */
:root{
  --bg:#12151a;--panel:#1b1f26;--panel2:#222731;--line:#2c323c;--text:#e8e6df;--muted:#9a9891;
  --navy:#1B3A6B;--teal:#00828A;--gold:#C8940A;
  --green:#7BB026;--yellow:#E5B72E;--red:#D64545;--done:#2E9E8C;
  --lamp-off:#2a2d33;--focus:#5fb3ff;
  --font:'Sarabun','Noto Sans Thai','Leelawadee UI','Tahoma',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','Consolas','DejaVu Sans Mono',monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45}
a{color:#6fd3db}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:13px}
.boot{padding:40px;text-align:center;color:var(--muted)}
[hidden]{display:none!important}

/* ---------- ส่วนหัว ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 18px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;white-space:nowrap}
.brand img{width:26px;height:26px}
.brand small{color:var(--muted);font-weight:400;font-size:13px}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.nav a{padding:7px 12px;border-radius:8px;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--panel2);color:var(--text)}
.nav a.on{background:var(--navy);color:#fff}
.top-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);
  font-size:12.5px;white-space:nowrap;background:var(--panel2)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill.ok i{background:var(--green)} .pill.bad i{background:var(--red)} .pill.warn i{background:var(--yellow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 14px;border-radius:8px;
  border:1px solid var(--line);background:#262b34;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--text)}
.btn:hover{border-color:#46505e}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.danger{border-color:#7a3333;color:#ff9c9c}
.btn.danger.confirm{background:var(--red);color:#fff;border-color:var(--red)}
.btn.sm{min-height:28px;padding:3px 10px;font-size:13px}
.btn.ghost{background:transparent}

main{padding:18px;max-width:1500px;margin:0 auto}
h1{font-size:20px;margin:4px 0 14px}
h2{font-size:16px;margin:22px 0 10px;color:#cfcdc6}
h3{font-size:14.5px;margin:16px 0 8px;color:#cfcdc6}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- แถบแจ้งเตือน ---------- */
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:10px;margin:0 0 12px;
  border:1px solid var(--line);background:var(--panel)}
.banner.warn{border-color:#6b5414;background:#2a2412}
.banner.bad{border-color:#6b2a2a;background:#2a1616}
.banner b{font-weight:700}

/* ---------- ภาพรวม ---------- */
.summary{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:120px}
.stat b{display:block;font-size:22px;font-family:var(--mono)}
.stat span{color:var(--muted);font-size:13px}
.stat.red b{color:var(--red)} .stat.green b{color:var(--green)} .stat.yellow b{color:var(--yellow)}
.site-head{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px}
.site-head h2{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lane-card{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;cursor:pointer;color:var(--text)}
.lane-card:hover{border-color:#46505e}
.lane-card.alert{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.lc-head{display:flex;align-items:center;gap:8px}
.lc-code{font-size:22px;font-family:var(--mono)}
.lc-name{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:11.5px;padding:1px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:#cfcdc6;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.st-on .dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.st-off .dot{background:var(--red)}
.st-never .dot{background:#555}
.lc-body{display:flex;gap:12px;align-items:center;margin-top:8px}
.lc-info{min-width:0;font-size:13.5px}
.lc-state{font-weight:600;font-size:15px}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.badge{font-size:11.5px;padding:1px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.b-red{background:var(--red);border-color:var(--red);color:#fff}
.b-gold{background:var(--gold);border-color:var(--gold);color:#1a1200}
.b-yellow{background:var(--yellow);border-color:var(--yellow);color:#241b00}
.b-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.b-line{border-color:#7a6a3a;color:#e9cf86}
.b-err{border-color:#7a3333;color:#ff9c9c}

/* เสาไฟ */
.tower{display:flex;flex-direction:column;gap:4px;padding:5px;background:#0b0b0b;border-radius:8px;border:1px solid #2a2a28;flex:none}
.tower .l{width:22px;height:22px;border-radius:50%;background:var(--lamp-off)}
.tower.lg .l{width:34px;height:34px}
.tower .l-red.on{background:var(--red);box-shadow:0 0 10px var(--red)}
.tower .l-yellow.on{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.tower .l-green.on{background:var(--green);box-shadow:0 0 10px var(--green)}
.tower .l.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.tower .l.blink{animation-duration:2s}}

/* ---------- แผงรายละเอียด Lane ---------- */
.drawer{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;justify-content:flex-end}
.drawer-panel{width:min(560px,100%);height:100%;overflow-y:auto;background:var(--bg);border-left:1px solid var(--line);
  padding:16px 18px 40px}
.drawer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.drawer-head h1{margin:0;flex:1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.panel h3{margin:0 0 10px}
.lamp-ctl{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.color-btns{display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:6px;flex:1;min-width:250px}
.cbtn{min-height:52px;border-radius:10px;border:2px solid var(--line);background:#262b34;cursor:pointer;font-weight:600}
.cbtn.c-green{border-color:#4d6b1a}.cbtn.c-yellow{border-color:#7a6418}.cbtn.c-red{border-color:#7a2a2a}
.cbtn.sel.c-off{background:#444;border-color:#999}
.cbtn.sel.c-green{background:var(--green);color:#132000;border-color:var(--green)}
.cbtn.sel.c-yellow{background:var(--yellow);color:#241b00;border-color:var(--yellow)}
.cbtn.sel.c-red{background:var(--red);color:#fff;border-color:var(--red)}
.checks{display:flex;gap:16px;margin:10px 0}
.checks label{display:flex;gap:6px;align-items:center;cursor:pointer}
.kv{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:4px 12px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.help-alert{background:#3a1515;border:1px solid var(--red);border-radius:12px;padding:12px 14px;margin-bottom:12px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.help-alert b{color:#ff8c8c;font-size:16px}

/* ---------- ตาราง ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;background:var(--panel2);white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:#20252e}
td.num,th.num{text-align:right;font-family:var(--mono)}

/* ---------- ฟอร์ม ---------- */
.form{display:grid;gap:12px}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sec h3{margin:0 0 4px}
.sec > p{margin:0 0 10px;color:var(--muted);font-size:13.5px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 14px}
.field label{display:block;font-size:13.5px;color:#cfcdc6;margin-bottom:3px}
.field input[type=text],.field input[type=number],.field input[type=password],.field select,.field textarea{
  width:100%;min-height:36px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#11141a}
.field input:focus,.field select:focus{border-color:var(--teal);outline:none}
.filters{margin-bottom:8px}
.filters select,.filters input{min-height:34px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:#11141a}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:3px}
.field.err input,.field.err select{border-color:var(--red)}
.field .errmsg{font-size:12.5px;color:#ff8c8c;margin-top:3px}
.field.check label{display:flex;align-items:center;gap:8px;margin-top:22px;cursor:pointer}
.radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.radio-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;background:#11141a}
.radio-card.sel{border-color:var(--teal);background:#0f2326}
.radio-card b{display:block}
.radio-card span{font-size:12.5px;color:var(--muted)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;padding:10px 0;background:linear-gradient(transparent,var(--bg) 30%)}
pre.code{background:#0b0d11;border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-x:auto;font-family:var(--mono);
  font-size:12.5px;line-height:1.5;margin:6px 0;white-space:pre}
.copyline{display:flex;gap:8px;align-items:stretch}
.copyline pre{flex:1;margin:0}

/* PLC */
.plc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.probe-slot{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:#11141a}
.probe-slot h4{margin:0 0 8px;font-size:14px}
.probe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.warnlist{margin:8px 0 0;padding-left:18px;color:#e9cf86;font-size:13.5px}
.ok-text{color:var(--green)} .bad-text{color:#ff8c8c}
.legend td:first-child{font-family:var(--mono);white-space:nowrap}

/* ---------- เข้าสู่ระบบ ---------- */
.login{max-width:380px;margin:9vh auto;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.login h1{display:flex;gap:10px;align-items:center}
.login .field{margin-bottom:12px}
.login .btn{width:100%;min-height:42px}
.errbox{color:#ff8c8c;margin:8px 0;min-height:1.4em}

/* ---------- แจ้งผล ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100% - 32px))}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:8px;padding:9px 12px;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.toast.bad{border-left-color:var(--red)}

@media (max-width:720px){
  .top{padding:8px 12px;gap:8px}
  .brand small{display:none}
  main{padding:12px 16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .lc-code{font-size:19px}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:6px}
}

/* ---------- แผนจัดส่ง ---------- */
table.plan{table-layout:fixed;min-width:1100px}
table.plan td{vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
table.plan th:nth-child(1){width:104px}table.plan th:nth-child(2){width:40px}table.plan th:nth-child(3){width:17%}
table.plan th:nth-child(4){width:64px}table.plan th:nth-child(5){width:72px}table.plan th:nth-child(6),table.plan th:nth-child(7){width:118px}
table.plan th:nth-child(8){width:19%}table.plan th:nth-child(9){width:200px}table.plan th:nth-child(11){width:130px}
table.plan tr.dragging td{opacity:.4}
td.handle{white-space:nowrap}
td.handle .grip{cursor:grab;font-size:18px;color:var(--muted);padding:0 4px}
td.handle .btn{min-height:24px;padding:0 6px}
.pl{display:inline-block;font-size:12.5px;padding:2px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.pl-green{background:#13210F;color:#C0DD97;border-color:#3B6D11}
.pl-yellow{background:#2A2007;color:#FAC775;border-color:#7A5200}
.pl-red{background:#2A1414;color:#F09595;border-color:#7A2323}
.pl-off{background:#151515;color:#9C9A92;border-color:#2A2A28}
.pl-done{background:#0f2a24;color:#9FE1CB;border-color:#2E9E8C}
textarea.paste{width:100%;font-family:var(--mono);font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#11141a}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#11141a;cursor:pointer}
.filters input[type=date]{min-height:34px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:#11141a}
.field input[type=time]{width:100%;min-height:36px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#11141a}
.hint{font-size:12.5px;color:var(--muted)}