/* BOTLINK Console. Layout: dark navy side rail (brand = CallBox TFT header) + light work surface; detail pages use a two-column grid with a live TFT replica. */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface2:#f8fafc; --ink:#0f172a; --ink2:#334155; --muted:#64748b; --line:#e3e8ef; --line2:#eef2f6;
  --brand:#2457d6; --brand-ink:#ffffff; --brand-soft:#ebf1fd; --brand-hover:#1d48b5;
  --rail:#0f172a; --rail2:#1b2539; --rail-ink:#cbd5e1; --rail-muted:#7c8aa3; --rail-on:#ffffff;
  --ok:#0f8a5f; --ok-bg:#e7f6ef; --warn:#a15c07; --warn-bg:#fdf3e2; --bad:#c2362f; --bad-bg:#fcebea; --idle:#5b6b82; --idle-bg:#eef1f5;
  --line-green:#06C755;
  --tft-bg:#0b1838; --tft-card:#162a57; --tft-blue:#4aa3ff; --tft-lime:#9be15d;
  --shadow:0 1px 2px rgba(15,23,42,.05);
  --f:"IBM Plex Sans Thai",system-ui,"Segoe UI",Tahoma,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:12px; --r-sm:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a1020; --surface:#111a30; --surface2:#0e1629; --ink:#e8edf7; --ink2:#c2cbe0; --muted:#8d9bba; --line:#223152; --line2:#1a2644;
  --brand:#4f84ff; --brand-soft:#16264d; --ok-bg:#0e2e22; --warn-bg:#33240b; --bad-bg:#3a1616; --idle-bg:#1b2643; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a1020;--surface:#111a30;--surface2:#0e1629;--ink:#e8edf7;--ink2:#c2cbe0;--muted:#8d9bba;--line:#223152;--line2:#1a2644;--brand:#4f84ff;--brand-soft:#16264d;--ok-bg:#0e2e22;--warn-bg:#33240b;--bad-bg:#3a1616;--idle-bg:#1b2643;--shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--f);-webkit-font-smoothing:antialiased;caret-color:transparent}
input,textarea,select,[contenteditable="true"]{caret-color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand)}
.ic{width:18px;height:18px;flex:none}
.line-logo{width:20px;height:20px}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:12.5px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
[hidden]{display:none!important}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;gap:18px;padding:20px 14px;padding-left:max(14px,env(safe-area-inset-left,0px));position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 6px}
.brand .mark{width:34px;height:34px;border-radius:10px;background:#2457d6;display:grid;place-items:center;color:#fff;font:700 13px/1 var(--f);letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.brand b{display:block;color:#fff;font-size:15px;letter-spacing:.08em}
.brand span{font-size:11.5px;color:var(--rail-muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .sec{font-size:11px;letter-spacing:.08em;color:var(--rail-muted);padding:12px 10px 4px;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--rail-ink);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--rail2);color:var(--rail-on)}
.nav a.on{background:var(--rail2);color:var(--rail-on);box-shadow:inset 3px 0 0 #5b8cff}
.nav a.on .ic{color:#8fb0ff}
.nav a .badge{margin-left:auto;font:600 11px/1 var(--mono);background:rgba(255,255,255,.1);padding:3px 7px;border-radius:999px}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--rail2)}
.me .av{width:32px;height:32px;border-radius:50%;background:#2a3d6e;display:grid;place-items:center;color:#fff;font-weight:600}
.me b{display:block;color:#fff;font-size:13px;line-height:1.2}
.me span{font-size:11.5px;color:var(--rail-muted)}
.me button{all:unset;cursor:pointer;margin-left:auto;color:var(--rail-muted);padding:6px;border-radius:6px}
.me button:hover{color:#fff;background:rgba(255,255,255,.08)}
.main{min-width:0;padding:26px 32px 48px;padding-right:max(32px,env(safe-area-inset-right,0px))}
.topbar{display:none}

/* ---------- page header ---------- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph h1{font-size:24px;line-height:1.25;margin:0;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.ph p{margin:4px 0 0;color:var(--muted)}
.crumb{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:13px;margin-bottom:8px}
.crumb:hover{color:var(--brand)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:var(--r-sm);padding:8px 14px;font-weight:600;font-size:13.5px;cursor:pointer;background:var(--brand);color:var(--brand-ink);white-space:nowrap;transition:filter .15s}
.btn:hover{background:var(--brand-hover)}
.btn.ghost:hover{color:var(--ink)}
.btn.line:hover{background:#05b04b}
.btn.danger:hover{background:#a82c26}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface2)}
.btn.danger{background:var(--bad)}
.btn.line{background:var(--line-green)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:focus-visible,.nav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label{font-size:12.5px;font-weight:600;color:var(--ink2)}
.field .hint{font-size:12px;color:var(--muted)}
input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;outline:none}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7894' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search{position:relative;min-width:220px}
.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{padding-left:34px}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card>.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.card>.hd h2{font-size:15px;margin:0;font-weight:700}
.card>.bd,#tab>.bd{padding:18px}
.card>.ft,#tab>.ft{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line2);background:var(--surface2);border-radius:0 0 var(--r) var(--r)}
.stack{display:flex;flex-direction:column;gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.kpi{padding:16px 18px;display:flex;gap:14px;align-items:center}
.kpi .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}
.kpi .ico.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent} .kpi .ico.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent} .kpi .ico.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.kpi .ico .ic{width:22px;height:22px}
.kpi b{display:block;font:600 24px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.kpi span{font-size:12.5px;color:var(--muted)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.5}
.pill.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:var(--ok-bg)} .pill.warn{color:var(--warn);background:var(--warn-bg)} .pill.bad{color:var(--bad);background:var(--bad-bg)} .pill.idle{color:var(--idle);background:var(--idle-bg)} .pill.brand{color:var(--brand);background:var(--brand-soft)}

/* tables */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface2)}
td{padding:12px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface2)}
td .t1{font-weight:600} td .t2{font-size:12.5px;color:var(--muted)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .ic{width:34px;height:34px;color:var(--line);margin-bottom:6px}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 10px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:12px 12px;color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--brand);border-color:var(--brand)}
.tab .ic{width:16px;height:16px}

/* chain picker (store -> robot -> point) */
.chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.chain .step{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface2);display:flex;flex-direction:column;gap:8px;min-width:0}
.chain .step .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.chain .step .lbl i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px}
.chain .meta{font-size:12px;color:var(--muted);min-height:18px}

/* checklist (LINE recipients) */
.picks{display:flex;flex-direction:column;gap:8px}
.pick{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.pick.on{border-color:var(--line-green);background:color-mix(in srgb,var(--line-green) 6%,var(--surface))}
.pick .av{width:34px;height:34px;border-radius:50%;background:var(--idle-bg);display:grid;place-items:center;overflow:hidden;font-weight:600;color:var(--muted)}
.pick .av img{width:100%;height:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;user-select:none;background:var(--surface)}
.chip input{margin:0;accent-color:var(--line-green)}
.chip.on{border-color:var(--line-green);color:var(--ok)}

.lav{width:32px;height:32px;border-radius:50%;background:var(--idle-bg);color:var(--muted);display:inline-grid;place-items:center;overflow:hidden;flex:none}
.lav img{width:100%;height:100%;object-fit:cover}
.lav .ic{width:18px;height:18px}
.pick .av{background:none}

/* timeline / log */
.tl{display:flex;flex-direction:column}
.tl .it{display:grid;grid-template-columns:118px 20px minmax(0,1fr);gap:10px;padding:8px 0;align-items:start}
.tl .it .tm{font:12px/1.6 var(--mono);color:var(--muted)}
.tl .it .dt{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--idle);justify-self:center}
.tl .it .dt.ok{background:var(--ok)} .tl .it .dt.bad{background:var(--bad)} .tl .it .dt.warn{background:var(--warn)}
.bar3d{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--idle-bg)}
.bar3d span{display:block;height:100%}
.bar3d .on{background:var(--ok)} .bar3d .off{background:var(--bad)} .bar3d .na{background:var(--idle-bg)}
.axis{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted);margin-top:4px}

/* health tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface2)}
.tile .k{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.tile .k .ic{width:15px;height:15px}
.tile .v{font:600 18px/1.3 var(--mono);margin-top:4px}

/* TFT replica 240x320 (matches firmware V9.2E2 layout) */
.tftcard{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px}
.tft{width:240px;height:320px;max-width:100%;background:var(--tft-bg);border-radius:4px;box-shadow:0 0 0 10px #05070d,0 0 0 11px #1c2235,0 16px 32px rgba(0,0,0,.28);color:#fff;font:10px/1 var(--mono);position:relative;overflow:hidden}
.tft .lg{height:44px;display:grid;place-items:center;font:700 16px/1 var(--f);letter-spacing:.22em;background:#0a1430;border-bottom:1px solid var(--tft-blue)}
.tft .r{height:16px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;border-bottom:1px solid var(--tft-blue);background:#0d1c44}
.tft .cd{margin:10px 12px;border-radius:6px;background:var(--tft-card);height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:8px}
.tft .cd small{color:var(--tft-blue);letter-spacing:.06em}
.tft .cd b{font:700 18px/1.15 var(--f);letter-spacing:.03em}
.tft .ft{position:absolute;left:0;right:0;bottom:0;height:21px;display:grid;place-items:center;font:700 11px/1 var(--f);color:#0b1838;background:var(--tft-lime)}

.screen{padding:10px;background:#05070d;border-radius:14px;box-shadow:0 0 0 1px #1c2235,0 16px 32px rgba(0,0,0,.25);line-height:0;max-width:100%}
.screen img{display:block;width:240px;height:320px;max-width:100%;height:auto;image-rendering:pixelated;border-radius:3px}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(8,14,30,.45);display:grid;place-items:center;padding:20px;z-index:50}
.modal{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto}
#toasts{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--ink);color:var(--surface);padding:11px 16px;border-radius:10px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);display:flex;gap:8px;align-items:center;max-width:380px}
.toast.err{background:var(--bad);color:#fff}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--ink2);font-size:13px}
.note.warn{background:var(--warn-bg)}
.note .ic{color:var(--brand);margin-top:1px} .note.warn .ic{color:var(--warn)}
.secret{display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px dashed var(--warn);border-radius:var(--r-sm);background:var(--warn-bg);font-family:var(--mono);word-break:break-all}

/* login */
#app{min-height:100%}
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.login .art{background:var(--rail);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login .art h2{font-size:34px;line-height:1.2;margin:0 0 12px;max-width:16ch;text-wrap:balance}
.login .art p{color:#b9c6e6;max-width:44ch}
.login .form{display:grid;place-items:center;padding:32px 20px}
.login .form .card{width:min(400px,100%)}

/* report */
.chart{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;height:220px;align-items:end}
.chart .col{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;min-width:0}
.chart .stk{flex:1;width:min(38px,100%);display:flex;flex-direction:column;justify-content:flex-end;border-radius:6px 6px 2px 2px;overflow:hidden;background:var(--line2)}
.chart .stk span{display:block;width:100%}
.chart .done{background:var(--ok)} .chart .norx{background:#f0a020} .chart .fail{background:var(--bad)}
.chart .v{font-size:11px;color:var(--ink2);min-height:14px}
.chart .lb{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rate{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--line2);overflow:hidden;vertical-align:middle;margin-right:8px}
.rate span{display:block;height:100%;background:var(--ok)}
.route{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.route .pill{font-weight:500}
.printonly{display:none}
input[type=date]{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
@media print{
  .rail,.topbar,.noprint,#toasts{display:none!important}
  .shell{display:block} .main{padding:0}
  body{background:#fff;color:#000;font-size:11px}
  .card{box-shadow:none;break-inside:avoid;border-color:#ccc}
  .kpis{grid-template-columns:repeat(4,1fr)!important} .grid2{grid-template-columns:1fr 1fr!important}
  .printonly{display:block}
  .chart .done,.chart .norx,.chart .fail,.pill,.rate span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:12mm}
}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.detail{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:264px;z-index:40;transform:translateX(-105%);transition:transform .2s}
  .rail.open{transform:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--rail);color:#fff;padding:10px max(16px,env(safe-area-inset-left,0px))}
  .topbar button{all:unset;cursor:pointer;padding:6px}
  .main{padding:18px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  .chain,.grid2{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}.login .art{display:none}
}
@media (max-width:520px){.kpis{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr}.tl .it{grid-template-columns:92px 16px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}