/* ============================================================================
   ASRW — ระบบดีไซน์ "Mission Control" (พอร์ตจาก v2 · v70 · 2026-06-22)
   ฟอนต์: IBM Plex Sans Thai (หัว/เนื้อความ) + IBM Plex Mono (ตัวเลข/เวลา/ไมล์/%)
   ผิว: control-room มืด = base (แอดมิน/ผจก. ค่าเริ่มต้น) · จอคนขับ = daylight สู้แดดเสมอ
   หลักการ: โทเคนเดียว · accent อั้น (ทีละจุด) · ตัวเลข mono ทั้งระบบ · hairline คม ไม่มี glow soup
   role accent: คนขับ=เขียวแบรนด์(urgency) · แอดมิน=ฟ้า/cyan signal(live) · ผู้จัดการ=ม่วง
   สีโดเมน: ตู้=อำพัน #E8961A · งาน=ม่วง · กะ=ฟ้า · เหตุการณ์=ชมพู · live=cyan #22D3EE
   ► คงทุก class ที่ JS ใช้ · รีสกินที่ชั้นโทเคน · logic เดิมไม่แตะ
   ========================================================================== */
:root{
  /* ---- type families (v2 "Mission Control" IBM Plex super-family) ---- */
  --ui:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'Cascadia Code',monospace;

  /* ---- neutrals = v2 daylight (ผิวสว่างสู้แดด · เป็น base + โหมด light ของแอดมิน) ---- */
  --bg:#EEF3F8; --bg-soft:#F4F7FA;
  --surface:#FFFFFF; --surface-2:#F4F7FA; --surface-3:#E8EEF5;
  --ink:#0B1721; --ink-2:#33424F; --muted:#51606E; --faint:#7A8794;
  --line:#D2DCE6; --line-2:#E4EAF0;

  /* ---- brand + สีความหมาย (v2 Mission Control hue) ---- */
  --brand:#0FB57E; --brand-strong:#077A54; --brand-bg:#E7F7F0;
  --mint:#0FB57E; --mint-strong:#077A54; --mint-bg:#E7F7F0;
  --mint2:#0C8A74; --mint2-bg:#D8F0EA;
  --blue:#3BA0F5; --blue-strong:#1F6FD0; --blue-bg:#E4F0FD;        /* shift = ฟ้า */
  --violet:#7C5CFF; --violet-strong:#5B3FD6; --violet-bg:#ECE7FE;  /* job = ม่วง (base เข้มพออ่านบนพื้นสว่าง) */
  --amber:#E8961A; --amber-ink:#A8650A; --amber-bg:#FDF3E0;        /* container = อำพัน (signature โดเมน) */
  --pink:#EC4899; --pink-strong:#C42E78; --pink-bg:#FCE7F2;        /* event = ชมพู */
  --signal:#0E9BB8; --signal-strong:#0A7E96; --signal-bg:#DDF3F7;  /* live/ติดตามสด (cyan · หอบังคับการ) */
  --red:#E5364B; --red-strong:#B11E30; --red-bg:#FDECEC;           /* danger/critical */
  --done:#0FA968; --done-bg:#E7F7F0;

  /* ---- urgency ramp (นาฬิกาปิดท่า) เขียว→อำพัน→แดง — ชั้น accent ของคนขับ ---- */
  --u-calm:#0FA968; --u-calm-strong:#0A7A52; --u-calm-soft:#E7F7F0;
  --u-tight:#E8961A; --u-tight-strong:#A8650A; --u-tight-soft:#FDF3E0;
  --u-critical:#E5364B; --u-critical-strong:#B11E30; --u-critical-soft:#FDECEC;

  /* ---- role accent (สลับตาม body.role-*) ---- */
  --accent:var(--brand); --accent-strong:var(--brand-strong); --accent-bg:var(--brand-bg);

  /* ---- เงา (v2 daylight · ink-tinted นุ่ม · ไม่มี glow สี) ---- */
  --sh-xs:0 1px 2px rgba(16,40,60,.06);
  --sh-sm:0 1px 2px rgba(16,40,60,.05),0 2px 8px rgba(16,40,60,.07);
  --sh-md:0 2px 6px rgba(16,40,60,.06),0 12px 28px rgba(16,40,60,.10);
  --sh-lg:0 20px 48px rgba(16,40,60,.16);
  --sh-sheet:0 -10px 44px rgba(16,40,60,.18);

  /* ---- รัศมี (v2 scale) ---- */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px;
}
body.role-admin{--accent:var(--blue);--accent-strong:var(--blue-strong);--accent-bg:var(--blue-bg)}
body.role-manager{--accent:var(--violet);--accent-strong:var(--violet-strong);--accent-bg:var(--violet-bg)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--ui);color:var(--ink);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--bg);
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 55% at 100% -10%, rgba(15,181,126,.05), transparent 55%)}
.muted{color:var(--muted)} .sm{font-size:13px} .pad{padding:10px 2px}
.row{display:flex;align-items:center;gap:8px} .between{justify-content:space-between}
.req{color:var(--red)}
.num,.kpi .num,.bar-val,.dl-v,.stat .v,.tbl td,.tbl th,.odo-num{font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ====================== topbar ====================== */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);opacity:.9}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.brand::before{content:"";width:26px;height:26px;border-radius:8px;background:var(--accent);box-shadow:var(--sh-xs);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8l9-5 9 5v8l-9 5-9-5z' fill='black'/><path d='M3 8l9 5 9-5M12 13v8' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8l9-5 9 5v8l-9 5-9-5z' fill='black'/><path d='M3 8l9 5 9-5M12 13v8' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat}
.brand span{color:var(--muted);font-size:13px;font-weight:400}
.top-actions{display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:4px 13px 4px 5px;font:600 13px var(--ui);color:var(--ink-2);cursor:pointer;transition:border-color .14s,box-shadow .14s}
.who:hover{border-color:var(--faint);box-shadow:var(--sh-xs)}
.who .av{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent)}
.who .av .ico{width:16px;height:16px}
.view{max-width:560px;margin:0 auto;padding:14px 14px 72px}

/* ====================== cards / text ====================== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-bottom:12px;box-shadow:var(--sh-sm)}
.big{font-size:19px;font-weight:700;letter-spacing:.1px}
.sec-title{font-weight:700;margin:20px 2px 10px;color:var(--ink);font-size:15px;display:flex;align-items:center;gap:7px}
.bn{font-weight:700;font-size:16px;letter-spacing:.2px}
.ct-line{margin:6px 0} .route{margin-top:5px}

/* ====================== buttons ====================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--r-sm);
  padding:12px 16px;font:600 16px var(--ui);color:#fff;cursor:pointer;width:100%;
  transition:background .14s,box-shadow .14s,transform .05s;box-shadow:var(--sh-xs)}
.btn:active{transform:translateY(1px)}
.btn.mint{background:var(--mint)} .btn.mint:hover{background:var(--mint-strong)}
.btn.violet{background:var(--violet)} .btn.violet:hover{background:var(--violet-strong)}
.btn.amber{background:var(--amber)} .btn.amber:hover{background:#C2780A}
.btn.blue{background:var(--blue)} .btn.blue:hover{background:var(--blue-strong)}
.btn.red{background:var(--red)} .btn.red:hover{background:var(--red-strong)}
.btn.done{background:var(--done)} .btn.done:hover{background:#368A2E}
.btn.pink{background:var(--pink)} .btn.pink:hover{background:#BE2F70}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--faint);background:var(--surface-2)}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none}
.btn.sm{padding:8px 13px;font-size:14px;width:auto;border-radius:9px}
.btn.wide{width:100%;margin-bottom:8px}
.big-btn{padding:18px;font-size:19px;border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.act-btn{margin:0}
.btn .ico{width:18px;height:18px}

.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.actions-grid .act-btn:first-child{grid-column:1/-1;padding:16px;font-size:17px}
.step-hint{font-size:13px;font-weight:600;color:var(--muted);margin:16px 2px 8px;letter-spacing:.2px}
.more-acts{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.more-acts>summary{list-style:none;cursor:pointer;padding:13px 15px;font:600 14px var(--ui);color:var(--ink-2);display:flex;align-items:center;gap:8px;background:var(--surface-2)}
.more-acts>summary:hover{background:var(--surface-3)}
.more-acts>summary::-webkit-details-marker{display:none}
.more-acts>summary .ma-label{color:var(--ink-2);flex:none}
.more-acts>summary .ma-hint{color:var(--muted);font-weight:400;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more-acts>summary::after{content:'';margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.more-acts[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.more-acts[open]>summary{background:var(--surface);border-bottom:1px solid var(--line)}
.more-grid{padding:12px}
.more-grid .act-btn:first-child{grid-column:auto;padding:13px 16px;font-size:16px}

/* ====================== แถบสลับตู้ (หลายตู้/เที่ยว) ====================== */
.legtabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.legtabs::-webkit-scrollbar{display:none}
.legtab{flex:0 0 auto;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 15px;font:600 14px var(--ui);color:var(--ink-2);cursor:pointer;transition:.14s}
.legtab:hover{border-color:var(--faint)}
.legtab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.more-jobs{padding:12px}
.more-jobs .card{margin-bottom:10px}

/* ====================== chips / tags ====================== */
.chip,.tag{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font:700 12px var(--ui);
  background:var(--surface-3);color:var(--muted);line-height:1.55;border:1px solid transparent}
.chip.violet,.tag.violet{background:var(--violet-bg);color:var(--violet-strong)}
.chip.mint,.tag.mint{background:var(--mint-bg);color:var(--mint-strong)}
.chip.mint2,.tag.mint2{background:var(--mint2-bg);color:var(--mint2)}
.chip.blue,.tag.blue{background:var(--blue-bg);color:var(--blue-strong)}
.chip.amber,.tag.amber{background:var(--amber-bg);color:var(--amber-ink)}
.chip.pink,.tag.pink{background:var(--pink-bg);color:var(--pink)}
.chip.red,.tag.red{background:var(--red-bg);color:var(--red-strong)}
.chip.done,.tag.done{background:var(--done-bg);color:var(--done)}

/* ====================== head card / status ====================== */
.head{display:flex;align-items:center;justify-content:space-between}
.head.on{border-color:var(--brand-bg);background:linear-gradient(180deg,var(--brand-bg) 0,var(--surface) 70%)}
.status-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.status-dot.green{background:var(--brand);box-shadow:0 0 0 4px var(--brand-bg)} .status-dot.gray{background:#C4CCD4;box-shadow:0 0 0 4px var(--surface-3)}
.job.mini{padding:11px 14px} .job-active{border:1px solid var(--brand-bg);background:linear-gradient(180deg,var(--surface) 0,var(--brand-bg) 360%)}

/* ====================== KPIs (พื้นสะอาด + แถบสี + เลขใหญ่) ====================== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.kpi{position:relative;border-radius:var(--r);padding:15px 16px 15px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .18s,transform .18s}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--faint)}
.kpi .num{font-size:28px;font-weight:700;line-height:1.12;color:var(--ink)} .kpi .lab{font-size:12.5px;color:var(--muted);margin-top:3px}
.kpi.mint::before{background:var(--mint)} .kpi.mint .num{color:var(--mint-strong)}
.kpi.amber::before{background:var(--amber)} .kpi.amber .num{color:var(--amber-ink)}
.kpi.blue::before{background:var(--blue)} .kpi.blue .num{color:var(--blue-strong)}
.kpi.violet::before{background:var(--violet)} .kpi.violet .num{color:var(--violet-strong)}
.kpi.red::before{background:var(--red)} .kpi.red .num{color:var(--red-strong)}
.kpi.done::before{background:var(--done)} .kpi.done .num{color:var(--done)}
.kpi.pink::before{background:var(--pink)} .kpi.pink .num{color:var(--pink)}

/* ====================== tabs (มือถือ=pills · เดสก์ท็อป=sidebar) ====================== */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 15px;font:600 14px var(--ui);color:var(--muted);cursor:pointer;transition:.14s}
.tab .ico{width:18px;height:18px;flex:0 0 auto}
.tab:hover{border-color:var(--faint);color:var(--ink-2)}
.tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab.on .ico{opacity:1}

/* ====================== page head ====================== */
.page-head{margin:2px 2px 18px}
.page-head h2{margin:0;font-size:22px;font-weight:700;letter-spacing:.1px}
.page-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* แถบส่งออกมาตรฐาน — ป้ายบอกชื่อรายงาน + ปุ่ม Excel/พิมพ์ (ใช้เหมือนกันทุกแท็บแอดมิน) */
.xbar{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 8px 5px 14px}
.xbar-cap{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.xbar .xbtn{border-radius:999px}
.sec-title .xbar{margin-left:auto}

/* ====================== panel + dashboard grid ====================== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:16px;box-shadow:var(--sh-sm)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-h h3{margin:0;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.panel-h .muted{font-size:12.5px}
.dash-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.dash-grid .panel{margin-bottom:0}

/* bars */
.bars{display:flex;flex-direction:column;gap:13px}
.bar-row{display:grid;grid-template-columns:104px 1fr 40px;align-items:center;gap:11px}
.bar-label{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:9px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:var(--brand);width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar-val{font-size:13.5px;font-weight:700;text-align:right}

/* segmented bar + legend */
.seg{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.seg span{display:block;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}
.legend-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
.legend-item b{font-weight:700}
.dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}

/* fills */
.f-mint{background:var(--mint)} .f-mint2{background:var(--mint2)} .f-blue{background:var(--blue)}
.f-violet{background:var(--violet)} .f-amber{background:var(--amber)} .f-red{background:var(--red)}
.f-done{background:var(--done)} .f-pink{background:var(--pink)} .f-gray{background:#C4CCD4}

/* stat tiles */
.stat-row{display:flex;gap:12px}
.stat{flex:1;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px}
.stat .v{font-size:22px;font-weight:700;line-height:1.2}
.stat .k{font-size:12px;color:var(--muted);margin-top:2px}

/* empty state */
.empty{text-align:center;color:var(--muted);padding:32px 16px}
.empty .ico{width:34px;height:34px;opacity:.4;margin-bottom:8px}
.empty .t{font-weight:600;color:var(--ink-2);font-size:14px}
.empty .s{font-size:13px;margin-top:2px}

/* toolbar + search */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.search{flex:1;min-width:170px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;font:400 15px var(--ui);background:var(--surface);color:var(--ink)}
.search::placeholder{color:var(--faint)}
.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}

/* ====================== table ====================== */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th{position:sticky;top:0;background:var(--surface-2);text-align:left;padding:11px 13px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);z-index:1;font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.tbl td{padding:12px 13px;border-bottom:none;vertical-align:middle}
.tbl tbody tr:nth-child(even) td{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr.tap{cursor:pointer;transition:background .1s}
.tbl td.num,.tbl th.num{text-align:right}
@media(hover:hover){.tbl tbody tr.tap:hover td{background:var(--surface-3)!important}}
/* N3 sticky first column — context row id always visible while scrolling horizontally */
.tbl th:first-child{left:0;z-index:2;box-shadow:2px 0 0 var(--line)}
.tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:2px 0 0 var(--line)}
.tbl tbody tr:nth-child(even) td:first-child{background:var(--surface-2)}
@media(hover:hover){.tbl tbody tr.tap:hover td:first-child{background:var(--surface-3)!important}}
/* UX-1 sticky action column — primary row action stays clickable when table overflows horizontally */
.tbl th.tbl-act,.tbl td.tbl-act{position:sticky;right:0;z-index:1;white-space:nowrap;background:var(--surface);box-shadow:-2px 0 0 var(--line)}
.tbl th.tbl-act{z-index:2;background:var(--surface-2)}
.tbl tbody tr:nth-child(even) td.tbl-act{background:var(--surface-2)}
@media(hover:hover){.tbl tbody tr.tap:hover td.tbl-act{background:var(--surface-3)!important}}

/* ====================== timeline / feed ====================== */
.tl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tl-row{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.tl-row:last-child{border-bottom:none}
.tl-row.alert{background:var(--red-bg)}
.tl-t{flex:0 0 46px;font-weight:700;color:var(--accent)}
.tl-d{color:var(--ink-2)}
.feed-scroll{max-height:420px;overflow:auto}
.mini-tag{font-size:11px;background:var(--amber-bg);color:var(--amber-ink);border-radius:6px;padding:1px 6px;font-weight:700}
.tl-row.tap{cursor:pointer} .tl-row.tap:active{background:var(--surface-2)}
@media(hover:hover){.tl-row.tap:hover{background:var(--surface-2)}}

.flag{border-left:4px solid var(--red)} .flag2{border-left:4px solid var(--amber)}
.ok-card{color:var(--done);background:var(--done-bg);border-color:var(--done-bg);text-align:center;font-weight:600}

/* ====================== forms / sheet ====================== */
.fld{display:block;margin:13px 0} .fld>span{display:block;font-size:14px;margin-bottom:6px;font-weight:600;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px;font:400 16px var(--ui);background:var(--surface);color:var(--ink);transition:border-color .14s,box-shadow .14s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.fld input[type=range]{padding:0}
.iso{font-size:12px} .iso.ok{color:var(--mint-strong)} .iso.warn{color:var(--amber-ink)}
.mini-select{border:1.5px solid var(--line);border-radius:9px;padding:6px 10px;font:600 13px var(--ui);background:var(--surface);color:var(--ink);max-width:60%}
.hide{display:none}
.chk{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:14px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.place-chip{background:var(--blue-bg);color:var(--blue-strong);border-radius:10px;padding:8px 12px;font-size:14px;margin:6px 0}
.contact-row{display:flex;gap:8px;margin-bottom:12px}
.contact-row .btn{flex:1}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.thumb{width:56px;height:56px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.thumb.big{width:92px;height:92px;cursor:zoom-in}

/* ====================== รายละเอียด checkpoint ====================== */
.dl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:8px 0;background:var(--surface)}
.dl-row{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.dl-row:last-child{border-bottom:none}
.dl-k{color:var(--muted);font-size:14px;flex:0 0 auto} .dl-v{text-align:right;font-weight:600;color:var(--ink)}
.sec-title.sm{font-size:14px;margin:14px 2px 6px}
.warnbar{background:var(--amber-bg);color:var(--amber-ink);border-radius:10px;padding:9px 12px;font-size:14px;margin:8px 0;font-weight:600}

/* ====================== banner / undo ====================== */
.banner{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:var(--r);padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-xs)}
.banner.warn{background:var(--amber-bg);border-color:#F0DCB0;color:var(--amber-ink)}
.banner.danger{background:var(--red-bg);border-color:#F3C9C6;color:var(--red-strong)}
.banner.good{background:var(--brand-bg);border-color:#A7E3CD;color:var(--mint-strong)}
.banner.notif{box-shadow:0 6px 18px rgba(14,159,110,.18)}
.banner.notif.danger{box-shadow:0 6px 18px rgba(214,69,69,.20)}
.banner .btn{flex:0 0 auto}
/* 😴 แบนเนอร์พัก (2B-1) — โทนฟ้าสงบ คอนทราสต์อ่านง่ายกลางแดด · .rest-cd = เลขนับถอยหลัง mono */
.rest-banner{background:#EAF2FF;border-color:#BFD6F5;color:#1E3A5F}
.rest-banner b{font-size:1.04rem}
.rest-banner .rest-cd{font-weight:700;letter-spacing:.5px}
/* ปุ่มข้อความสำเร็จรูป (ชีตส่งข้อความถึงคนขับ) */
.quickmsg{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.chip-btn{font-family:inherit;font-size:12.5px;line-height:1.3;text-align:left;padding:7px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip-btn:hover{border-color:var(--accent);color:var(--accent-strong)}
.undo-btn{margin-top:6px;color:var(--red);border-color:var(--red-bg)}

/* deadline chip */
.dl-chip{display:inline-block;font-weight:600}
.dl-chip.warn{color:var(--amber-ink)} .dl-chip.over{color:var(--red)}
.job-active .dl-chip{margin-top:9px;padding:6px 12px;border-radius:10px;background:var(--brand-bg);color:var(--mint-strong)}
.job-active .dl-chip.warn{background:var(--amber-bg);color:var(--amber-ink)}
.job-active .dl-chip.over{background:var(--red-bg);color:var(--red-strong)}

/* ====================== sheet / modal ====================== */
.backdrop{position:fixed;inset:0;background:rgba(16,33,50,.44);backdrop-filter:blur(3px) saturate(1.05);-webkit-backdrop-filter:blur(3px) saturate(1.05);
  display:flex;align-items:flex-end;justify-content:center;z-index:40;opacity:0;transition:opacity .2s}
.backdrop.show{opacity:1}
.sheet{width:100%;max-width:560px;background:var(--surface);border-radius:24px 24px 0 0;padding:8px 18px 26px;transform:translateY(100%);
  transition:transform .26s cubic-bezier(.2,.85,.25,1);max-height:92vh;overflow:auto;box-shadow:var(--sh-sheet),0 -1px 0 rgba(255,255,255,.6) inset}
.backdrop.show .sheet{transform:none}
.sheet-grip{width:42px;height:4px;border-radius:3px;background:var(--line);margin:6px auto 14px}
.sheet h3{margin:2px 0 2px;font-size:19px} .sheet-body{margin:8px 0}
.sheet-actions{display:flex;gap:10px;margin-top:18px} .sheet-actions .btn{flex:1}

/* ====================== photo lightbox ====================== */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:80;display:flex;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity .22s}
.lb-overlay.show{opacity:1}
.lb-img{max-width:100%;max-height:100dvh;object-fit:contain;cursor:default;border-radius:4px}
.lb-close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.lb-close:hover{background:rgba(255,255,255,.28)}

/* ====================== toast ====================== */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font:600 14px var(--ui);z-index:60;opacity:0;transition:.25s;box-shadow:var(--sh-lg);max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)} .toast.warn{background:var(--amber-ink)}

/* ====================== login ====================== */
.login-bg{background:var(--bg-soft)}
.login-bg::before{background:
  radial-gradient(90% 55% at 50% -10%, rgba(14,159,110,.10), transparent 60%),
  radial-gradient(80% 50% at 100% 110%, rgba(42,111,214,.08), transparent 55%)}
.login{max-width:440px;margin:0 auto;padding:48px 18px 56px}
.login-hero{text-align:center;margin:14px 0 30px}
.logo{display:inline-flex;align-items:center;gap:12px;font-size:42px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.logo::before{content:"";width:46px;height:46px;border-radius:13px;background:var(--brand);box-shadow:var(--sh-md);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8l9-5 9 5v8l-9 5-9-5z' fill='black'/><path d='M3 8l9 5 9-5M12 13v8' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8l9-5 9 5v8l-9 5-9-5z' fill='black'/><path d='M3 8l9 5 9-5M12 13v8' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat}
.tagline{color:var(--muted);font-size:14px;margin-top:10px}
.login-group{margin-top:22px}
.lg-title{font-weight:700;margin-bottom:10px;padding-left:4px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.lg-title::before{content:"";width:8px;height:8px;border-radius:3px;background:currentColor}
.lg-title.mint{color:var(--mint-strong)} .lg-title.blue{color:var(--blue-strong)} .lg-title.violet{color:var(--violet-strong)}
.login-card{display:flex;flex-direction:row;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:11px;cursor:pointer;box-shadow:var(--sh-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.login-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--faint)}
.login-card.mint{border-left:4px solid var(--mint)} .login-card.blue{border-left:4px solid var(--blue)} .login-card.violet{border-left:4px solid var(--violet)}
.lc-av{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;flex:0 0 auto;box-shadow:var(--sh-xs)}
.lc-av.mint{background:var(--mint)} .lc-av.blue{background:var(--blue)} .lc-av.violet{background:var(--violet)}
.lc-av .ico{width:25px;height:25px}
.lc-text{display:flex;flex-direction:column;min-width:0}
.lc-name{font-weight:700;font-size:17px} .lc-sub{font-size:13px;color:var(--muted)}
.login-foot{text-align:center;margin-top:26px}

/* ====================== เช็คลิสต์รูป/เอกสาร ====================== */
.pcheck-title{margin-top:14px}
.pchecklist{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.pslot{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface-2)}
.pslot-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pslot-label{font-size:14px;font-weight:600;line-height:1.3}
.pslot .btn.sm{flex:0 0 auto;white-space:nowrap}
.pslot-thumbs:empty{display:none}
.thumb-wrap{position:relative;display:inline-block}
.thumb-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:none;background:var(--red);color:#fff;font:700 14px var(--ui);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-xs)}
.pgroup{margin:8px 0} .pgroup-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px}

/* ====================== ค่าใช้จ่ายเพิ่มเติม ====================== */
.exp-list{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.exp-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:var(--surface-2)}
.exp-fields{display:flex;gap:8px}
.exp-note{flex:1;min-width:0} .exp-amt{flex:0 0 96px}
.exp-row input{border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font:400 15px var(--ui);background:var(--surface);color:var(--ink)}
.exp-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.exp-actions{display:flex;gap:8px;margin-top:8px}
.exp-thumbs:empty{display:none}

/* hint box (ปุ่มที่แอดมินสร้างเอง) */
.hint-box{background:var(--blue-bg);border:1px solid #CADFF8;border-radius:12px;padding:10px 12px;margin:2px 2px 12px;font-size:13px;color:var(--blue-strong);line-height:1.55}

/* ตรวจไมล์เทียบรูปหน้าปัด */
.odo-check{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.odo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .14s}
.odo-row:hover{border-color:var(--accent)}
.odo-info .odo-lab{font-size:13px;color:var(--muted)}
.odo-info .odo-num{font-size:20px;font-weight:700}
.odo-thumb img{width:84px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.odo-thumb .muted{display:inline-block;width:84px;text-align:center;font-size:12px}

/* ====================== เดสก์ท็อป: เว็บไซต์แอดมิน/ผู้จัดการ ====================== */
@media (min-width:900px){
  body.role-admin .view,body.role-manager .view{max-width:1600px;padding:24px 28px 80px}
  .adm,.mgr{display:grid;grid-template-columns:248px 1fr;gap:28px;align-items:start}
  /* sidebar */
  .tabs{position:sticky;top:80px;flex-direction:column;overflow:visible;gap:3px;padding:12px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
  .tab{width:100%;justify-content:flex-start;border:none;background:transparent;border-radius:10px;padding:11px 14px;color:var(--ink-2);font-size:14.5px}
  .tab .ico{opacity:.65}
  .tab:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
  .tab.on{background:var(--accent-bg);color:var(--accent-strong);font-weight:700} .tab.on .ico{opacity:1}
  #tabc,.mgr>#tabc{min-width:0}
  /* รายการการ์ดเป็นกริด */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .grid2 .card{margin-bottom:0}
  .dash-grid{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px}
  .kpi .num{font-size:30px}
  .sec-title{font-size:16px}
  .tbl{font-size:15px} .tbl th,.tbl td{padding:13px 15px}
  @media(hover:hover){.card.job:hover,.grid2 .card:hover{border-color:var(--faint);box-shadow:var(--sh-md)}}
  .card.job,.grid2 .card{transition:border-color .16s,box-shadow .16s}
}
@media (min-width:1240px){
  body.role-admin .grid2,body.role-manager .grid2{grid-template-columns:1fr 1fr 1fr}
}

/* hover elevation (เฉพาะอุปกรณ์ที่ชี้ได้) */
@media (hover:hover){
  .kpi:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
}

/* ============================================================================
   v26 — GLOW-UP: Aurora Glass (เดสก์ท็อป) · Dark mode · อนิเมชัน · เส้นทางสด · ฉลอง
   เจ้าของเคาะ 18 มิ.ย. 2026: "อลังการแบบฉลาด" — คอม=aurora glass · คนขับ=สว่างอ่านกลางแดด
   ทำด้วย CSS/JS ล้วน · คง Itim + สีความหมายเดิม · เพิ่ม token glass + ธีมมืด (ไม่รื้อของเดิม)
   ========================================================================== */
:root{
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.58); --glass-border:rgba(255,255,255,.85);
  --glass-blur:saturate(1.4) blur(16px);
  --aurora-1:rgba(14,159,110,.16); --aurora-2:rgba(42,111,214,.16); --aurora-3:rgba(106,77,224,.14);
}
html[data-theme="dark"]{
  /* v2 control-room ink — ผิวมืดหอบังคับการ (ค่าเริ่มต้นแอดมิน/ผจก.) */
  --bg:#0B1220; --bg-soft:#0E1626;
  --surface:#121C2E; --surface-2:#0E1626; --surface-3:#1B2840;
  --ink:#E6EDF5; --ink-2:#C4D2E6; --muted:#94A6BC; --faint:#64748B;
  --line:#243246; --line-2:#1B2536;
  /* ตัวอักษร/เลขสีความหมาย สว่างพออ่านบนพื้นมืด (v2 bright hue) */
  --brand-strong:#34D8A0; --mint-strong:#34D8A0; --mint2:#3FD3C0;
  --blue-strong:#7FC0FF; --violet-strong:#BBA6FF; --amber-ink:#F2B45C;
  --red-strong:#FF8E88; --done:#34D8A0; --pink:#F472B6; --pink-strong:#F9A8D4;
  --signal:#22D3EE; --signal-strong:#22D3EE; --signal-bg:rgba(34,211,238,.18);
  /* chip/แถบสีพื้นแบบโปร่งให้เข้ากับมืด */
  --brand-bg:rgba(15,181,126,.18); --mint-bg:rgba(15,181,126,.18); --mint2-bg:rgba(12,138,116,.22);
  --blue-bg:rgba(59,160,245,.20); --violet-bg:rgba(124,92,255,.24); --amber-bg:rgba(232,150,26,.18);
  --pink-bg:rgba(244,114,182,.20); --red-bg:rgba(229,54,75,.22); --done-bg:rgba(15,169,104,.20);
  --accent-bg:rgba(15,181,126,.18);
  --u-calm-soft:rgba(15,169,104,.18); --u-tight-soft:rgba(232,150,26,.18); --u-critical-soft:rgba(229,54,75,.20);
  --glass:rgba(18,28,46,.62); --glass-2:rgba(14,22,38,.5); --glass-border:rgba(255,255,255,.08);
  --aurora-1:rgba(15,181,126,.20); --aurora-2:rgba(34,211,238,.18); --aurora-3:rgba(124,92,255,.22);
  --sh-xs:0 1px 2px rgba(0,0,0,.45);
  --sh-sm:0 1px 2px rgba(0,0,0,.4),0 3px 10px rgba(0,0,0,.45);
  --sh-md:0 6px 16px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.55);
  --sh-lg:0 26px 64px rgba(0,0,0,.62);
  --sh-sheet:0 -10px 54px rgba(0,0,0,.65);
}
html[data-theme="dark"] .login-foot,html[data-theme="dark"] .who{color:var(--ink-2)}
html[data-theme="dark"] .head.on{background:linear-gradient(180deg,rgba(14,159,110,.22),var(--surface) 75%)}
html[data-theme="dark"] .job-active{background:linear-gradient(180deg,var(--surface) 0,rgba(14,159,110,.16) 360%)}
html[data-theme="dark"] .topbar{background:rgba(16,24,40,.72)}
html[data-theme="dark"] .ok-card{color:var(--done)}

/* ---------- ปุ่มสลับธีม (มืด/สว่าง) ---------- */
.theme-tg{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--surface);border-radius:50%;cursor:pointer;color:var(--ink-2);
  transition:transform .2s,border-color .14s,background .14s}
.theme-tg:hover{border-color:var(--faint);transform:rotate(-18deg)}
.theme-tg svg{width:19px;height:19px}
.login-theme{position:fixed;top:16px;right:16px;z-index:5}

/* ---------- Aurora background (login + เดสก์ท็อปแอดมิน/ผจก.) ---------- */
.login-bg::before,
body.role-admin::before,body.role-manager::before{
  background:
    radial-gradient(55% 48% at 8% 4%, var(--aurora-1), transparent 60%),
    radial-gradient(50% 45% at 95% 0%, var(--aurora-2), transparent 58%),
    radial-gradient(60% 55% at 82% 102%, var(--aurora-3), transparent 60%),
    radial-gradient(45% 40% at 25% 108%, var(--aurora-1), transparent 60%);
}
html[data-theme="dark"] body{background:var(--bg)}

/* ---------- Glass surfaces (เฉพาะเดสก์ท็อป ≥900px · คอม/ในออฟฟิศ) ---------- */
@media (min-width:900px){
  body.role-admin .panel,body.role-manager .panel,
  body.role-admin .tablewrap,body.role-manager .tablewrap,
  body.role-admin .kpi,body.role-manager .kpi,
  body.role-admin .tabs,body.role-manager .tabs{
    background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border-color:var(--glass-border)}
  body.role-admin .topbar,body.role-manager .topbar{background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  body.role-admin .panel,body.role-manager .panel{box-shadow:var(--sh-md)}
  html[data-theme="dark"] body.role-admin .tbl th,html[data-theme="dark"] body.role-manager .tbl th{background:rgba(255,255,255,.04)}
}

/* ---------- อนิเมชันเข้าหน้า (fade-up + stagger) ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.02)}100%{transform:scale(1)}}
.kpis .kpi{animation:fadeUp .5s both}
.kpis .kpi:nth-child(2){animation-delay:.06s} .kpis .kpi:nth-child(3){animation-delay:.12s}
.kpis .kpi:nth-child(4){animation-delay:.18s} .kpis .kpi:nth-child(5){animation-delay:.24s} .kpis .kpi:nth-child(6){animation-delay:.3s}
.dash-grid .panel{animation:fadeUp .55s both}
.login-card{animation:fadeUp .5s both}
.login-group:nth-child(3) .login-card{animation-delay:.06s} .login-group:nth-child(4) .login-card{animation-delay:.12s}
.login-hero{animation:fadeUp .6s both}

/* ปุ่มหลัก: ประกายไล่แสง + กดยุบ */
.big-btn{position:relative;overflow:hidden}
.big-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);
  animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,72%{left:-60%}88%{left:130%}100%{left:130%}}

/* ============================================================================
   เส้นทางสด (Live Route Tracker) — รถวิ่ง + จุดสว่างตามทาง (มอนิเตอร์แอดมิน)
   ========================================================================== */
.rt{margin-top:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px 15px 11px}
.rt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;font-size:13px}
.rt-phase{font-weight:700;color:var(--accent-strong);display:inline-flex;gap:6px;align-items:center;min-width:0}
.rt-phase .live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 1.6s infinite;flex:0 0 auto}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-bg)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rt-eta{color:var(--muted);white-space:nowrap;flex:0 0 auto}
.rt-eta.warn{color:var(--amber-ink);font-weight:700} .rt-eta.over{color:var(--red-strong);font-weight:700}
.rt-track{position:relative;height:28px;margin:0 17px}
/* ถนน: รางเทาอ่อน + เส้นประกลางถนน (ช่วงที่ยังไม่ถึง) */
.rt-rail{position:absolute;top:50%;left:0;right:0;height:9px;border-radius:999px;transform:translateY(-50%);
  background:var(--surface-3);box-shadow:inset 0 1px 2px rgba(16,33,50,.10)}
.rt-rail::after{content:"";position:absolute;top:50%;left:9px;right:9px;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--faint) 0 5px,transparent 5px 12px);opacity:.45}
/* ถนนช่วงที่ขับผ่านแล้ว: ฟ้าทึบเรียบ */
.rt-fill{position:absolute;top:50%;left:0;height:9px;border-radius:999px;transform:translateY(-50%);z-index:1;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.rt-node{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--surface);
  border:2px solid var(--line);transform:translate(-50%,-50%);z-index:2}
.rt-node.done{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.rt-node.cur{border-color:var(--accent);background:var(--surface);animation:pulse 1.6s infinite}
/* v68 — รถจริง(การ์ตูน Noto emoji) วิ่งบนราง → เรือปลายทาง (เจ้าของเลือก: รูปจริง ไม่ใช่ abstract) */
.rt-veh{position:absolute;top:50%;left:0;width:32px;height:32px;z-index:3;transform:translate(-50%,-58%) scaleX(-1);transition:left .9s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 2px 3px rgba(16,33,50,.28))}
.rt-veh .ill-svg{width:100%;height:100%}
.rt-ship{position:absolute;top:50%;right:-9px;transform:translateY(-50%);z-index:2;line-height:0}
.rt-ship .ill-svg,.rt-ship .ico{width:27px;height:27px}
.rt-labels{display:flex;justify-content:space-between;margin:12px 4px 0;font-size:11.5px;color:var(--muted);gap:6px}
.rt-labels span{flex:1;text-align:center} .rt-labels span:first-child{text-align:left} .rt-labels span:last-child{text-align:right}
.rt-labels span.done{color:var(--accent-strong);font-weight:700}
.rt.done .rt-fill{background:linear-gradient(90deg,var(--done),var(--done))}
.rt.done .rt-node.done{background:var(--done);border-color:var(--done);box-shadow:0 0 0 4px var(--done-bg)}

/* กำลังวิ่งตอนนี้ (แดชบอร์ด) */
.live-ops{display:grid;grid-template-columns:1fr;gap:12px}
.live-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface-2)}
.live-card .bn{font-size:15px}
@media (min-width:900px){.live-ops{grid-template-columns:1fr 1fr}}

/* การ์ดสรุปจบกะคนขับ (ฉลองนิด ๆ) */
.summary-done{border-color:var(--done-bg);background:linear-gradient(180deg,var(--done-bg),var(--surface) 62%)}
html[data-theme="dark"] .summary-done{background:linear-gradient(180deg,rgba(62,155,54,.16),var(--surface) 62%)}

/* หมวดหมู่งาน (filter pills หน้างาน) */
.jobcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:7px 15px;font:600 13.5px var(--ui);color:var(--muted);cursor:pointer;transition:.14s}
.pill:hover{border-color:var(--faint);color:var(--ink-2)}
.pill b{font-weight:700}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill.on b{color:#fff}
.tbl tfoot td{background:var(--surface-2);border-top:2px solid var(--line);padding:11px 13px}

/* แถบฟิลเตอร์ (ประวัติงานจบ) */
.fbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.fbar select,.fbar input[type=date]{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;font:600 13.5px var(--ui);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .14s,box-shadow .14s}
.fbar select:focus,.fbar input[type=date]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.fbar .search{flex:1;min-width:180px}
.hist-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* ===== 12 ส่วนเสริม (v31): net/bell/toggle/copy/legend ===== */
.kpi.tap{cursor:pointer} @media(hover:hover){.kpi.tap:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}}
.netbadge{display:inline-flex;align-items:center;gap:6px;background:var(--amber-bg);color:var(--amber-ink);border-radius:999px;padding:5px 12px;font:700 12px var(--ui)}
.netbadge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.iconbtn{position:relative;width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:50%;cursor:pointer;font-size:17px;line-height:1;transition:border-color .14s,transform .15s}
.iconbtn:hover{border-color:var(--faint);transform:translateY(-1px)}
.iconbtn .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font:700 11px var(--ui);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface)}
.alert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;margin-bottom:8px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.toggle{width:46px;height:27px;border-radius:999px;border:none;background:var(--line);position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s}
.toggle span{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:var(--sh-xs);transition:transform .2s}
.toggle.on{background:var(--brand)} .toggle.on span{transform:translateX(19px)}
.copybtn{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:6px;line-height:1;vertical-align:middle}
.copybtn:hover{color:var(--accent);background:var(--accent-bg)}
.board-legend{margin:0 2px 14px}
.feed-scroll .tl-t{flex:0 0 auto;min-width:74px;font-size:12px}

/* ============================================================================
   Confetti + ป้ายฉลองตอนจบงาน
   ========================================================================== */
.cf-wrap{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.cf{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:.96;will-change:transform}
@keyframes cffall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(106vh) rotate(760deg)}}
.toast.win{background:linear-gradient(100deg,var(--brand),var(--blue));font-size:15px;padding:14px 22px;
  box-shadow:0 12px 30px rgba(14,159,110,.5)}

/* ภาพประกอบ empty state (รถน้อย ๆ) */
.empty .ill{width:74px;height:54px;margin:0 auto 10px;opacity:.9}
/* v51 — empty state ใช้ภาพจริง (unDraw recolor แบรนด์) แทนรถวาดมือ */
.empty-ill{width:138px;max-width:54%;margin:2px auto 8px} .empty-ill .ill-svg{width:100%;height:auto}

/* ============================================================================
   v51 — Login hero "แข่งกับเรือ" (asset จริง unDraw recolor แบรนด์ · 21 มิ.ย. 2026)
   เลิกฉากวาดมือ (rect+circle) → delivery-truck.svg + container-ship.svg (assets/img)
   inline ผ่าน ASRW.ill (illustrations.js) → recolor ตามธีมด้วยโทเคน --ill-* · มอชันเข้าครั้งเดียว ไม่ loop
   ========================================================================== */
:root{
  --ill-primary:var(--brand);   /* เขียวแบรนด์ */
  --ill-accent:#F59E0B;         /* อำพัน = สีตู้คอนเทนเนอร์ (แทนชมพู unDraw กัน "ดู stock") */
  --ill-ink:#3a4a5a; --ill-ink2:#24323e;
  --ill-paper:#dfe7ec; --ill-paper2:#eef3f6;
  --ill-hi:#ffffff; --ill-shade:#c3ced6;
}
html[data-theme="dark"]{
  --ill-primary:#2bd49a; --ill-accent:#fbbf24;
  --ill-ink:#cdd9e4; --ill-ink2:#e7eff6;       /* เส้นกลับเป็นสว่าง → ไม่จมพื้นมืด */
  --ill-paper:#33414f; --ill-paper2:#3e4e5d;
  --ill-hi:#dbe6f0; --ill-shade:#586977;
}
.ill-svg{display:block;width:100%;height:auto}

.login-scene{position:relative;width:min(420px,86vw);height:150px;margin:0 auto 12px}
.login-scene .ls-route{position:absolute;inset:0;width:100%;height:100%}
.ls-route path{animation:lsRouteFlow 1.3s linear .15s both}
.login-scene .ls-truck{position:absolute;left:-1%;bottom:0;width:42%;animation:lsTruckIn .9s cubic-bezier(.22,1,.36,1) .2s both}
.login-scene .ls-ship{position:absolute;right:-2%;top:-2px;width:52%;animation:lsShipIn 1.05s ease .35s both}
@keyframes lsTruckIn{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:translateX(0)}}
@keyframes lsShipIn{0%{opacity:0;transform:translateY(16px)}55%{opacity:1;transform:translateY(-6px)}78%{transform:translateY(-1px)}90%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes lsRouteFlow{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ls-route path,.login-scene .ls-truck,.login-scene .ls-ship{animation:none}}

/* ============================================================================
   v27 — รีดีไซน์จอคนขับ: "สะอาดสว่างแบบธนาคาร" (อ่านกลางแดด · 19 มิ.ย. 2026)
   พระเอก = นาฬิกานับถอยหลังปิดท่า · สีเน้นทีละจุด · typography+spacing คม · ไม่มี glow
   ฟอนต์ IBM Plex Sans Thai ทั้งจอ + IBM Plex Mono เฉพาะตัวเลข/เวลา/ไมล์ (Itim คงไว้ที่แอดมิน/ผจก./แบรนด์)
   scope: body.role-driver เท่านั้น — ไม่แตะแอดมิน/ผู้จัดการ
   ========================================================================== */
body.role-driver{
  font-family:'IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --ui:'IBM Plex Sans Thai',system-ui,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,SFMono-Regular,monospace;
}
/* ฟอนต์: ทับ font:Itim ที่ฮาร์ดโค้ดในคอมโพเนนต์ (เฉพาะจอคนขับ) */
body.role-driver button,body.role-driver input,body.role-driver select,body.role-driver textarea,
body.role-driver .btn,body.role-driver .legtab,body.role-driver .chip,body.role-driver .tag,
body.role-driver .pill,body.role-driver .more-acts>summary,body.role-driver .sheet,
body.role-driver .mini-select,body.role-driver .chip-btn{font-family:var(--ui)}
body.role-driver .mono,body.role-driver .tl-t,body.role-driver .odo-num,
body.role-driver .stat .v,body.role-driver .kpi .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.2px}
/* จอคนขับ = daylight instrument เสมอ (สู้แดด · ไม่มีวันมืด · บังคับทับธีมมืด) */
body.role-driver{
  --bg:#EEF3F8;--bg-soft:#F4F7FA;--surface:#FFFFFF;--surface-2:#F4F7FA;--surface-3:#E8EEF5;
  --ink:#0B1721;--ink-2:#33424F;--muted:#51606E;--faint:#7A8794;--line:#D2DCE6;--line-2:#E4EAF0;
  --sh-xs:0 1px 2px rgba(16,40,60,.06);
  --sh-sm:0 1px 2px rgba(16,40,60,.05),0 2px 8px rgba(16,40,60,.07);
  --sh-md:0 2px 6px rgba(16,40,60,.06),0 12px 28px rgba(16,40,60,.10);
}

/* ---------- แถบตัวตน (บาง) ---------- */
body.role-driver .drv-id{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;margin-bottom:14px;box-shadow:var(--sh-xs)}
body.role-driver .drv-id.on{border-color:var(--brand-bg)}
body.role-driver .drv-id-txt{flex:1;min-width:0}
body.role-driver .drv-id-line{font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.role-driver .id-icon{flex:0 0 auto;width:40px;height:40px;border:1.5px solid var(--line);background:var(--surface);
  border-radius:12px;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-2);display:flex;align-items:center;justify-content:center;padding:0}
body.role-driver .id-icon:hover{border-color:var(--faint)}
body.role-driver .id-sos{flex:0 0 auto;border:none;border-radius:12px;padding:10px 15px;font-weight:700;font-size:14px;
  background:var(--red);color:#fff;cursor:pointer;box-shadow:var(--sh-xs)}
body.role-driver .id-sos:active{transform:translateY(1px)}

/* ---------- ★ ก้อนงานปัจจุบัน (การ์ดเน้น accent ก้อนเดียวในจอ) ---------- */
body.role-driver .job-now{padding:0;overflow:hidden;border:2px solid var(--brand-bg);box-shadow:var(--sh-md)}

/* นาฬิกาปิดท่า (พระเอก) */
body.role-driver .dlh{padding:15px 16px 16px;border-bottom:1px solid var(--line-2);background:var(--surface);transition:background .4s}
body.role-driver .dlh-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px}
body.role-driver .dlh-lab{font-size:13px;font-weight:600;color:var(--ink-2)}
body.role-driver .dlh-end{font-size:13px;color:var(--muted);white-space:nowrap}
body.role-driver .dlh-num{font-size:46px;font-weight:700;line-height:1.04;letter-spacing:-0.02em;color:var(--ink)}
body.role-driver .dlh-bar{height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:11px}
body.role-driver .dlh-bar>span{display:block;height:100%;width:4%;border-radius:999px;background:var(--brand);transition:width .9s cubic-bezier(.2,.8,.2,1)}
body.role-driver .dlh.is-ok .dlh-num{color:var(--brand-strong)} body.role-driver .dlh.is-ok .dlh-bar>span{background:var(--brand)}
body.role-driver .dlh.is-warn{background:var(--amber-bg)} body.role-driver .dlh.is-warn .dlh-num{color:var(--amber-ink)}
body.role-driver .dlh.is-warn .dlh-bar>span{background:var(--amber)} body.role-driver .dlh.is-warn .dlh-lab{color:var(--amber-ink)}
body.role-driver .dlh.is-over{background:var(--red-bg)} body.role-driver .dlh.is-over .dlh-num{color:var(--red-strong)}
body.role-driver .dlh.is-over .dlh-bar>span{background:var(--red)} body.role-driver .dlh.is-over .dlh-lab{color:var(--red-strong)}
body.role-driver .dlh-none{padding:14px 16px;text-align:center;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line-2)}

/* นาฬิกาเวลาทำงาน (พระเอกใหม่ · นับขึ้น · banking-bright) — reuse .dlh · เลขเขียวสงบ ไม่กดดัน */
body.role-driver .dlh.wk-hero .dlh-num{color:var(--brand-strong)}
body.role-driver .dlh.wk-hero .dlh-end{display:inline-flex;align-items:center;gap:4px}
body.role-driver .dlh.wk-hero.is-ot{background:var(--amber-bg)}
body.role-driver .dlh.wk-hero.is-ot .dlh-num{color:var(--amber-ink)}
body.role-driver .wk-ot{margin-top:5px;font-size:18px;font-weight:700;color:var(--amber-ink);letter-spacing:.02em}

/* U3: ปุ่มข้อมูลออกใบเสร็จ */
body.role-driver .jn-billing{justify-content:center;font-size:14px}

/* U4: เอกสารจากคนดรอป (งานรับช่วงตู้ลอย) */
body.role-driver .jn-dropdoc{margin-top:10px;padding:10px 11px;border:1px solid var(--amber);background:var(--amber-bg);border-radius:12px}
body.role-driver .jn-dropdoc-lab{font:600 13px var(--ui);color:var(--amber-ink);margin-bottom:7px}
body.role-driver .jn-dropdoc-thumbs{display:flex;flex-wrap:wrap;gap:7px}
body.role-driver .jn-dropdoc-thumbs .thumb{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer}

/* meta: งาน/ตู้/เส้นทาง */
body.role-driver .jn-meta{padding:13px 16px}
body.role-driver .mono-bn{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.3px}
body.role-driver .jn-sub{margin:5px 0 9px}
body.role-driver .jn-routetxt{margin-top:7px;font-size:12px}
body.role-driver .jn-chassis{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:8px}
body.role-driver .jn-chassis b{color:var(--ink);font-family:var(--mono)}
body.role-driver .jn-chgch{margin-left:auto;border:1px solid var(--line);background:var(--surface);color:var(--brand-strong);font:600 13px var(--ui);padding:9px 14px;border-radius:10px;cursor:pointer;transition:transform .1s,border-color .12s}
/* ชีตเปลี่ยน/เพิ่มจุด: segmented toggle 2 ปุ่มใหญ่ + ลิงก์ขยายฟิลด์เสริม (จอคนขับ daylight) */
body.role-driver .seg2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
body.role-driver .seg-btn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:700 14px var(--ui);padding:11px 13px;border-radius:12px;cursor:pointer;min-height:52px;transition:border-color .12s,background .12s}
body.role-driver .seg-btn small{font:500 11px var(--ui);color:var(--ink-2)}
body.role-driver .seg-btn.on{border-color:var(--brand);background:var(--brand-bg,rgba(15,181,126,.1));color:var(--brand-strong)}
body.role-driver .seg-btn.on small{color:var(--brand-strong)}
body.role-driver .lnk-more{display:block;width:100%;text-align:left;background:none;border:none;color:var(--brand-strong);font:600 13px var(--ui);padding:10px 2px;cursor:pointer}
body.role-driver .jn-chgch:hover{border-color:var(--brand)} body.role-driver .jn-chgch:active{transform:scale(.97)}
body.role-driver .jn-routechg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:6px}
body.role-driver .jn-addstops{display:flex;flex-direction:column;gap:6px;margin-top:6px}
body.role-driver .addstop-chip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 13px var(--ui);color:var(--ink);background:var(--brand-bg,rgba(15,181,126,.1));border:1px solid var(--brand);border-radius:12px;padding:8px 11px}
body.role-driver .addstop-chip.done{opacity:.7;border-color:var(--line);background:var(--surface)}
body.role-driver .addstop-chip .xs-act{margin-left:auto;border:1px solid var(--brand);background:var(--brand-strong);color:#fff;font:700 13px var(--ui);padding:7px 13px;border-radius:9px;cursor:pointer;min-height:38px}
body.role-driver .addstop-chip .xs-act.mint{background:var(--mint-strong,#0E9F6E)}
body.role-driver .xs-x{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 12px var(--ui);padding:6px 10px;border-radius:8px;cursor:pointer}
body.role-driver .jn-repcancel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:6px}
body.role-driver .jn-repcancel .xs-x{margin-left:auto}

/* เส้นทาง 3 จุด (จุดสว่างตามความคืบหน้า) */
body.role-driver .drv-route{display:flex;align-items:center;gap:6px;margin-top:9px}
body.role-driver .rstep{display:flex;align-items:center;gap:5px;flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted)}
body.role-driver .rstep.done{color:var(--brand-strong)} body.role-driver .rstep.cur{color:var(--ink)}
body.role-driver .rdot{width:12px;height:12px;border-radius:50%;border:2px solid var(--faint);background:var(--surface);flex:0 0 auto}
body.role-driver .rstep.done .rdot{background:var(--brand);border-color:var(--brand)}
body.role-driver .rstep.cur .rdot{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
body.role-driver .rseg{flex:1;height:2px;min-width:10px;background:var(--line)}
body.role-driver .rseg.on{background:var(--brand)}
body.role-driver .drv-phase{margin-top:8px}

/* ขั้นถัดไป (ปุ่มหลักเด่นปุ่มเดียว) */
body.role-driver .jn-next{padding:13px 16px 16px;border-top:1px solid var(--line-2);background:var(--surface-2)}
body.role-driver .jn-next .step-hint{margin-top:0;color:var(--ink-2)}
body.role-driver .jn-next .actions-grid .act-btn:first-child{padding:17px;font-size:18px;border-radius:var(--r)}
body.role-driver .sw-hint{margin-bottom:7px}

/* ปุ่ม mint เข้มขึ้นนิด ให้คอนทราสต์ตัวอักษรขาวชัดกลางแดด */
html:not([data-theme="dark"]) body.role-driver .btn.mint{background:var(--brand-strong)}
html:not([data-theme="dark"]) body.role-driver .btn.mint:hover{background:#0A6B4B}

/* ---------- การ์ดงานในลิสต์ (ยังไม่เข้างาน / เข้างานแต่ยังไม่จับงาน) ---------- */
body.role-driver .drv-job{padding:13px 15px}
body.role-driver .drv-job .bn{font-size:15px} body.role-driver .drv-job .mono-bn{font-size:15px}
body.role-driver .jtags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
body.role-driver .drv-job-dl{margin:9px 0 7px}
body.role-driver .drv-job-sub{margin-bottom:3px}
body.role-driver .drv-job .route{margin-bottom:11px}
body.role-driver .drv-job.mine{border-color:var(--brand-bg);box-shadow:var(--sh-sm)}
body.role-driver .drv-job.paused{border-left:3px solid var(--amber)}
body.role-driver .drv-job.mini{padding:12px 15px}
body.role-driver .drv-job.mini .drv-job-dl{margin:8px 0 0}

/* คัตออฟพิล — สื่อความเหมือนนาฬิกาฮีโร่ (เขียว/เหลือง/แดง) */
body.role-driver .dl-pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--surface-3);color:var(--ink-2)}
body.role-driver .dl-pill .mono{font-weight:700}
body.role-driver .dl-pill.ok{background:var(--brand-bg);color:var(--brand-strong)}
body.role-driver .dl-pill.warn{background:var(--amber-bg);color:var(--amber-ink)}
body.role-driver .dl-pill.over{background:var(--red-bg);color:var(--red-strong)}
body.role-driver .dl-pill.none{color:var(--muted)}
/* ป้ายเวลานิ่ง (calm) — ไม่มีสีเร่งด่วน ตัดความกดดันจากจอคนขับ (Decision #1) */
body.role-driver .dl-pill.calm{background:var(--surface-3);color:var(--ink-2);font-weight:600}
body.role-driver .dl-pill.calm.none{background:transparent;color:var(--muted)}
body.role-driver .dl-chip.calm{color:var(--muted);font-weight:600}

/* ว่างงาน */
body.role-driver .empty-jobs{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:18px 16px;text-align:center;color:var(--muted);font-size:14px;margin-bottom:12px}

/* ============================================================================
   v32 — รีดีไซน์จอแอดมิน แท็บมอนิเตอร์: "ops console" (ดูงานวิ่งสด + แทรกแซง)
   เจ้าของเคาะ 19 มิ.ย. 2026 · เลนคนขับ (ปัญหาลอยบน) · alert bar ปักบน · การ์ดงาน · แผงแทรกแซง docked
   scope .mon เท่านั้น (อยู่ใต้ body.role-admin → accent=ฟ้า) · ใช้โทเคนเดิม · ไม่มี glow/พื้นดำ
   ฟอนต์ IBM Plex Sans Thai ทั้งแท็บ + IBM Plex Mono เฉพาะตัวเลข/เวลา/ไมล์ (ไม่แตะ Itim ของแท็บอื่น)
   ========================================================================== */
.mon{font-family:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif}
.mon button,.mon input,.mon select,.mon textarea{font-family:'IBM Plex Sans Thai',system-ui,sans-serif}
.mon .mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}

/* ---------- alert bar (ปักบนสุด เหนือทุกอย่าง: แดง=SOS/รถเสีย · เหลือง=ปิดท่า/ตู้ลอย) ---------- */
.mon-alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.mon-alert{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;font-size:13.5px;font-weight:600;border:1px solid var(--line)}
.mon-alert.sos{background:var(--red-bg);color:var(--red-strong);border-color:#F0CBC8;--_ink:var(--red-strong)}
.mon-alert.late{background:var(--amber-bg);color:var(--amber-ink);border-color:#EFDCAC;--_ink:var(--amber-ink)}
.mon-alert.info{background:var(--blue-bg);color:var(--blue-strong);border-color:#C5DAF5;--_ink:var(--blue-strong)}
.mon-alert .a-ic{font-size:16px;flex:0 0 auto;line-height:1}
.mon-alert .a-tx{min-width:0}
.mon-alert .a-tx b{font-weight:700}
.mon-alert .a-sub{font-weight:500;font-size:12px;opacity:.85;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-alert .a-pill{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.06);flex:0 0 auto}
.mon-alert .a-act{margin-left:auto;display:flex;gap:7px;flex:0 0 auto}
.mon-alert .a-btn{border:1px solid currentColor;background:transparent;color:inherit;padding:5px 12px;border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:.14s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.mon-alert .a-btn:hover{background:rgba(0,0,0,.06)}
.mon-alert .a-btn.solid{background:var(--_ink,currentColor);border-color:var(--_ink,currentColor);color:var(--surface)}
.mon-alert .a-btn.solid span{color:var(--surface)}

/* ---------- toolbar (ชื่อ + ฟิลเตอร์ + ค้นหา) ---------- */
.mon-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.mon-bar h2{font-size:16px;font-weight:700;color:var(--ink)}
.mon-bar h2 b{color:var(--blue)}
.mon-chips{display:flex;gap:7px}
.mon-chip{padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.14s}
.mon-chip:hover{border-color:var(--faint);color:var(--ink-2)}
.mon-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.mon-chip.alert.on{background:var(--red);border-color:var(--red)}
.mon-search-box{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--faint);font-size:13px;min-width:200px}
.mon-search-box input{border:none;outline:none;background:transparent;color:var(--ink);font-size:13.5px;flex:1;min-width:0}

/* ---------- layout: เลน (ซ้าย) + แผงแทรกแซง (ขวา docked) ---------- */
.mon-layout{display:block;margin-top:4px}
.mon-main{min-width:0}

/* ---------- เลนคนขับ (ซ้าย=คนขับ · ขวา=การ์ดงานของเขา) ---------- */
.mon-lane{display:grid;grid-template-columns:178px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.mon-lane:first-child{border-top:none;padding-top:6px}
.mon-drv{position:sticky;top:10px;align-self:start}
.mon-drv-row{display:flex;align-items:center;gap:10px}
.mon-ava{width:40px;height:40px;border-radius:11px;flex:0 0 auto;background:var(--mint-bg);color:var(--mint-strong);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.mon-lane.alert .mon-ava{background:var(--red-bg);color:var(--red-strong)}
.mon-nm{font-weight:700;font-size:14.5px;color:var(--ink)}
.mon-meta{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-top:1px}
.mon-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:9px;padding:4px 10px;border-radius:999px;background:var(--mint-bg);color:var(--mint-strong)}
.mon-state .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.mon-state.red{background:var(--red-bg);color:var(--red-strong)}
.mon-state.amber{background:var(--amber-bg);color:var(--amber-ink)}
.mon-state.blue{background:var(--blue-bg);color:var(--blue-strong)}
.mon-state.gray{background:var(--surface-3);color:var(--muted)}
.mon-count{font-size:12px;color:var(--faint);margin-top:8px}

.mon-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;min-width:0}

/* ---------- การ์ดงาน ---------- */
.mon-job{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px;cursor:pointer;transition:border-color .14s,box-shadow .14s;overflow:hidden}
.mon-job:hover{border-color:var(--blue);box-shadow:0 6px 18px -12px rgba(42,111,214,.5)}
.mon-job.sel{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}
.mon-job.flag{border-color:var(--red)}
.mon-job.flag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.mon-job.flag.sel{box-shadow:0 0 0 2px var(--red-bg)}
.mj-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}
.mj-bk{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;color:var(--violet-strong);background:var(--violet-bg);padding:3px 8px;border-radius:6px}
.mj-cd{text-align:right;flex:0 0 auto;background:var(--surface-2);border-radius:6px;padding:5px 8px}
.mj-cd-v{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:15.5px;font-variant-numeric:tabular-nums;color:var(--mint-strong);line-height:1.1}
.mj-cd-l{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.mj-cd.warn .mj-cd-v{color:var(--amber-ink)}
.mj-cd.crit .mj-cd-v,.mj-cd.over .mj-cd-v{color:var(--red-strong)}
.mj-nodl{font-size:11px;color:var(--faint);font-weight:600;padding-top:3px}
.mj-route{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:7px;line-height:1.35}
.mj-route .arr{color:var(--amber);margin:0 4px;font-weight:700}
.mj-ctn{display:inline-flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--amber-ink);background:var(--amber-bg);padding:3px 8px;border-radius:6px;margin-bottom:10px;max-width:100%}
.mj-now{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;margin-bottom:9px}
.mj-now .ic{flex:0 0 auto}
.mj-now .nx{color:var(--muted);font-weight:500;font-size:11px;margin-left:auto;white-space:nowrap;flex:0 0 auto}
.mj-mile{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:11px;font-family:'IBM Plex Mono',monospace}
.mj-mile .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-weight:700;flex:0 0 auto;white-space:nowrap}
.mj-mile.ok .badge{background:var(--mint-bg);color:var(--mint-strong)}
.mj-mile.warn .badge{background:var(--amber-bg);color:var(--amber-ink)}
.mj-mile.bad .badge{background:var(--red-bg);color:var(--red-strong)}
.mj-mile.na .badge{background:var(--surface-3);color:var(--muted)}
.mj-mile .nums{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-acts{display:flex;gap:6px}
.mj-acts>*{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 6px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;transition:.14s}
.mj-acts>*:hover{background:var(--surface-2);border-color:var(--faint)}
.mj-acts .iv{flex:1.4;background:var(--blue);border-color:var(--blue);color:#fff}
.mj-acts .iv:hover{background:var(--blue-strong);color:#fff}
.mj-acts .iv .ss{width:7px;height:7px;border-radius:50%;background:#8BE0B8;flex:0 0 auto}
.mj-acts .iv.risky .ss{background:#FFD27A}
.mj-acts .iv.blocked .ss{background:#FF9B95}

/* ---------- แผงแทรกแซง (docked ขวา · sticky) ---------- */
.mon-aside{position:sticky;top:10px;align-self:start;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:15px;max-height:calc(100vh - 86px);overflow:auto}
.mon-aside h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:3px;color:var(--ink)}
.mon-iv-sub{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);margin-bottom:14px}
.mon-safe{display:flex;gap:9px;padding:11px;border-radius:11px;margin-bottom:15px;border:1px solid var(--line)}
.mon-safe .e{font-size:17px;line-height:1.1;flex:0 0 auto}
.mon-safe .tx{font-size:12px;line-height:1.45}
.mon-safe .tx b{display:block;margin-bottom:1px}
.mon-safe.safe{background:var(--mint-bg);border-color:#BFE6D3}.mon-safe.safe .tx{color:var(--mint-strong)}
.mon-safe.risky{background:var(--amber-bg);border-color:#EFDCAC}.mon-safe.risky .tx{color:var(--amber-ink)}
.mon-safe.blocked{background:var(--red-bg);border-color:#F0CBC8}.mon-safe.blocked .tx{color:var(--red-strong)}
.mon-aside .fld{margin-bottom:12px}
.mon-warnbar{background:var(--red-bg);color:var(--red-strong);border:1px solid #F0CBC8;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;margin-bottom:13px}
.mon-iv-note{font-size:11px;color:var(--faint);line-height:1.5;margin:2px 0 13px;display:flex;gap:6px}
.mon-iv-acts{display:flex;gap:9px}
.mon-iv-acts .btn{flex:1}.mon-iv-acts .btn.blue{flex:1.6}

/* ---------- แผงแทรกแซง = โมดัลกลางจอ (เปิดเมื่อเลือกการ์ด · กว้าง แก้สบาย) ---------- */
.mon-modal-back{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:rgba(16,33,50,.46);backdrop-filter:blur(3px) saturate(1.05);-webkit-backdrop-filter:blur(3px) saturate(1.05);opacity:0;transition:opacity .18s}
.mon-modal-back.show{opacity:1}
.mon-modal{position:relative;width:100%;max-width:600px;max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px 22px 22px;box-shadow:var(--sh-lg);animation:modalIn .22s cubic-bezier(.2,.85,.25,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.mon-modal-x{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s;z-index:1}
.mon-modal-x:hover{border-color:var(--faint);color:var(--ink);background:var(--surface-2)}
.mon-modal h3{font-size:18px;font-weight:700;display:flex;align-items:center;gap:7px;margin:0 34px 5px 0;color:var(--ink)}
.mon-modal .fld{margin-bottom:13px}
.mon-modal .mon-iv-acts{margin-top:6px;position:sticky;bottom:0;background:var(--surface);padding-top:10px}

/* ---------- สรุปด่วน (แสดงตอนยังไม่เลือกการ์ด) ---------- */
.mon-sum{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:13px;background:var(--line)}
.mon-sum-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2)}
.mon-sum-row .v{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.mon-sum-row.red .v{color:var(--red-strong)}
.mon-sum-row.amber .v{color:var(--amber-ink)}
.mon-sum-row.blue .v{color:var(--blue-strong)}
.mon-pick{text-align:center;font-size:12.5px;color:var(--muted);padding:13px 10px;border:1px dashed var(--line);border-radius:11px;line-height:1.5}

/* ---------- ว่าง (ไม่มีงานวิ่ง) ---------- */
.mon-empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- ชั้นจัดลำดับ: "ต้องลงมือ" (เต็มใบ) + "ปกติ" (พับเป็นแถว) — สเกล 20 คน ---------- */
.mon-tier{font-size:12px;font-weight:700;color:var(--red-strong);letter-spacing:.02em;display:flex;align-items:center;gap:7px;margin:2px 0 0;padding-top:4px}
.mon-calm{margin-top:14px;border-top:1px solid var(--line);padding-top:4px}
.mon-calm-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--mint-strong);padding:10px 2px 9px}
.mch-hint{font-weight:500;font-size:11.5px;color:var(--faint)}
.mon-calm-row{display:grid;grid-template-columns:32px minmax(110px,1fr) auto auto auto 18px;align-items:center;gap:13px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;margin-bottom:6px;transition:border-color .12s,background .12s}
.mon-calm-row:hover{border-color:var(--blue);background:var(--surface-2)}
.mcr-ava{width:30px;height:30px;border-radius:9px;background:var(--mint-bg);color:var(--mint-strong);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.mcr-nm{font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcr-truck{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.mcr-jobs{font-size:12px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.mcr-dl{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--mint-strong);background:var(--surface-2);border-radius:5px;padding:2px 7px;white-space:nowrap}
.mcr-dl.none{font-family:'IBM Plex Sans Thai',sans-serif;color:var(--faint);font-weight:500;background:transparent;padding:0}
.mcr-exp{color:var(--faint);font-size:12px;text-align:center}
.mon-calm-expanded{border:1px dashed var(--line-2);border-radius:12px;padding:2px 11px 0;margin-bottom:8px;background:var(--surface-2)}
.mon-calm-expanded .mon-lane{border-top:none;padding-top:12px}
.mon-collapse-btn{margin:0 0 11px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 13px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:.12s}
.mon-collapse-btn:hover{border-color:var(--faint);color:var(--ink-2)}

/* ---------- responsive: แคบลง → แผงลงล่าง, เลนสแต็ก ---------- */
@media (max-width:1024px){
  .mon-layout{grid-template-columns:1fr}
  .mon-aside{position:static;max-height:none}
}
@media (max-width:620px){
  .mon-calm-row{grid-template-columns:30px 1fr auto 16px;gap:10px}
  .mon-calm-row .mcr-truck{display:none}
}
@media (max-width:560px){
  .mon-lane{grid-template-columns:1fr;gap:10px}
  .mon-drv{position:static}
  .mon-search-box{margin-left:0;width:100%}
}

/* ============================================================================
   v28 — จอแอดมิน "แท็บภาพรวม" รีดีไซน์ (ops console · scope .adash เท่านั้น)
   3 ชั้น: เตือน(งานเสี่ยง) → ปฏิบัติการสด(KPI+คนขับวิ่งสด) → วิเคราะห์/สะสม
   ทิศทาง: คอนโซลนิวทรัลสะอาด · การ์ดขาวบนพื้นออฟไวต์ · ฟ้าใช้ทีละจุด · ไม่มี glow
   ฟอนต์: หัวข้อไทย IBM Plex Sans Thai · ตัวเลข/% /ระยะ/เวลา JetBrains Mono (ไม่แตะ Itim แท็บอื่น)
   ========================================================================== */
.adash{font-family:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif}
.adash h2,.adash h3,.adash .sec-title,.adash button,.adash input{font-family:'IBM Plex Sans Thai',system-ui,sans-serif;letter-spacing:0}
.adash .mono,.adash .k-num,.adash .lv-cd,.adash .risk-cd,.adash .rk-n,.adash .hp-v,.adash .hp-sub,
.adash .stat .v,.adash .bar-val,.adash .tbl td.num,.adash .tbl th.num{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}

/* ---------- ชั้น 1: การ์ดงานเสี่ยง (เด่นสุด · เลย=แดง · ใกล้=เหลือง) ---------- */
.dash-alert{margin-bottom:18px}
.risk-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  background:var(--red-bg);border:1px solid var(--red);border-left:5px solid var(--red-strong);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:16px 20px}
.risk-card.near{background:var(--amber-bg);border-color:var(--amber);border-left-color:var(--amber-ink)}
.rk-left{text-align:center;min-width:118px}
.rk-ic{font-size:22px;line-height:1}
.rk-n{font-size:40px;font-weight:700;line-height:1.04;color:var(--red-strong)}
.risk-card.near .rk-n{color:var(--amber-ink)}
.rk-cap{font-size:12.5px;font-weight:600;color:var(--red-strong)}
.risk-card.near .rk-cap{color:var(--amber-ink)}
.rk-body{min-width:0;border-left:1px solid rgba(16,33,50,.10);padding-left:18px}
.rk-head{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:9px}
.rk-rows{display:flex;flex-direction:column;gap:6px}
.rk-row{display:grid;grid-template-columns:minmax(110px,1.3fr) 1fr 1.2fr auto;gap:14px;align-items:center;font-size:13px}
.rk-bk{font-size:12px;font-weight:700;color:var(--ink)}
.rk-drv{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-dest{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.risk-cd{text-align:right;font-weight:700;color:var(--amber-ink);background:var(--amber-bg);border-radius:6px;padding:3px 8px;white-space:nowrap}
.risk-cd.over,.risk-cd.crit{color:var(--red-strong);background:var(--red-bg)} .risk-cd.warn{color:var(--amber-ink)}
.rk-more{font-size:12px;color:var(--muted);margin-top:5px}
.rk-cta{align-self:center;white-space:nowrap;border:1px solid var(--red-strong);background:var(--surface);
  color:var(--red-strong);font:600 13px 'IBM Plex Sans Thai',sans-serif;padding:9px 16px;border-radius:var(--r-sm);cursor:pointer;transition:.14s}
.risk-card.near .rk-cta{border-color:var(--amber-ink);color:var(--amber-ink)}
.rk-cta:hover{background:var(--red-strong);color:#fff}
.risk-card.near .rk-cta:hover{background:var(--amber-ink);color:#fff}
.calm-card{display:flex;align-items:center;gap:12px;background:var(--done-bg);border:1px solid var(--done);
  border-radius:var(--r);padding:12px 16px}
.calm-card .cc-ic{font-size:18px}
.cc-t{font-size:14px;font-weight:700;color:var(--mint-strong)}
.cc-s{font-size:12.5px;color:var(--ink-2)}

/* ---------- ชั้น 2: การ์ด KPI (เลขใหญ่ mono · ป้ายสีความหมายเส้นซ้าย · เดลต้าเทียบเมื่อวาน) ---------- */
.lv-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.k-card{display:flex;flex-direction:column;min-height:98px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  padding:13px 16px;box-shadow:var(--sh-sm);transition:box-shadow .16s,transform .16s}
.k-card.tap{cursor:pointer}
@media(hover:hover){.k-card.tap:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}}
.k-lab{font-size:12.5px;color:var(--muted)}
.k-num{font-size:27px;font-weight:700;line-height:1.1;color:var(--ink);margin-top:4px}
.k-unit{font-size:13px;font-weight:500;color:var(--faint);margin-left:3px}
.k-delta,.k-delta-sp{margin-top:auto;padding-top:7px;min-height:18px;font-size:11.5px;display:flex;align-items:baseline;gap:7px}
.k-delta .mono{font-weight:700}
.k-delta.good .mono{color:var(--done)} .k-delta.bad .mono{color:var(--red-strong)} .k-delta.flat .mono{color:var(--muted)}
.kd-base{color:var(--faint)}
.k-mint{border-left-color:var(--mint)} .k-amber{border-left-color:var(--amber)}
.k-done{border-left-color:var(--done)} .k-blue{border-left-color:var(--blue)} .k-violet{border-left-color:var(--violet)}

/* ---------- ชั้น 2: บล็อกคนขับวิ่งสด (แถวแน่น · ค้น/กรอง · ความคืบหน้า 3 จุด) ---------- */
.lv-panel{padding:0;overflow:hidden}
.lv-headbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line)}
.lv-title{font-size:14.5px;font-weight:700;color:var(--ink)}
.lv-title b{color:var(--blue-strong);margin:0 3px}
.lv-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lv-search{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:13px;color:var(--muted)}
.lv-search input{border:none;background:transparent;outline:none;font:inherit;color:var(--ink);width:228px;max-width:46vw}
.lv-chips{display:flex;gap:6px}
.lv-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 12.5px 'IBM Plex Sans Thai',sans-serif;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.12s}
.lv-chip:hover{border-color:var(--faint)}
.lv-chip.on{background:var(--blue-bg);border-color:var(--blue);color:var(--blue-strong)}
.lv-chip.alert.on{background:var(--red-bg);border-color:var(--red);color:var(--red-strong)}
.lv-scroll{max-height:392px;overflow:auto}
.lv-row{display:grid;grid-template-columns:1.5fr 0.8fr 1.15fr 1.95fr 0.95fr;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.lv-row:last-child{border-bottom:none}
.lv-colhead{position:sticky;top:0;z-index:2;background:var(--surface-2);font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding-top:9px;padding-bottom:9px}
.lv-row[data-leg]{cursor:pointer;transition:background .1s}
@media(hover:hover){.lv-row[data-leg]:hover{background:var(--surface-2)}}
.lv-row.flag{box-shadow:inset 3px 0 0 var(--red)}
.lv-cd-h{text-align:right}
.lv-drv{display:flex;align-items:center;gap:9px;min-width:0}
.lv-ava{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;color:#fff;background:var(--blue)}
.lv-ava.amber{background:var(--amber)} .lv-ava.red{background:var(--red)}
/* อวตารคนขับ (จอแอดมิน) = เลขประจำตัว + พวงมาลัยจางๆ เป็นพื้นหลัง */
.lv-ava,.mon-ava,.mcr-ava{position:relative;overflow:hidden}
.ava-wheel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.2;pointer-events:none}
.ava-wheel .ico{width:78%;height:78%}
.ava-no{position:relative;z-index:1;font-family:'IBM Plex Mono',monospace;font-weight:700;line-height:1}
.lv-nm{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-truck{font-size:12.5px;color:var(--ink-2)}
.lv-ctn{justify-self:start;max-width:100%;font-size:11.5px;font-weight:600;color:var(--amber-ink);background:var(--amber-bg);
  padding:3px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-ctn.na{color:var(--faint);background:var(--surface-3)}
.lv-cd{text-align:right;font-size:13px;font-weight:700;color:var(--mint-strong);background:var(--surface-2);border-radius:6px;padding:3px 8px;white-space:nowrap}
.lv-cd.warn{color:var(--amber-ink);background:var(--amber-bg)} .lv-cd.crit,.lv-cd.over{color:var(--red-strong);background:var(--red-bg)}
.lv-cd.none{font-size:12px;font-weight:500;color:var(--faint);background:transparent;padding:0}
.lv-prog{min-width:0}
.lp-phase{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-live{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pulse 1.6s infinite}
.lp-track{position:relative;height:6px;margin:6px 6px 0;background:var(--surface-3);border-radius:999px}
.lp-fill{position:absolute;left:0;top:0;height:100%;background:var(--blue);border-radius:999px;transition:width .5s}
.lp-track.done .lp-fill{background:var(--done)}
.lp-node{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line);transform:translate(-50%,-50%)}
.lp-node.done{background:var(--blue);border-color:var(--blue)}
.lp-track.done .lp-node.done{background:var(--done);border-color:var(--done)}
.lp-node.cur{background:var(--surface);border-color:var(--blue);animation:pulse 1.6s infinite}
.lp-labels{display:flex;justify-content:space-between;gap:6px;margin-top:5px;font-size:10.5px;color:var(--faint)}
.lp-labels span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-labels span:nth-child(2){text-align:center} .lp-labels span:last-child{text-align:right}
.lp-labels span.done{color:var(--blue-strong);font-weight:600}
.lp-labels span.cur{color:var(--ink-2);font-weight:600}

/* ---------- ชั้น 3: วิเคราะห์/สะสม (พระเอก = ส่งทันเวลา %) ---------- */
.an-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;align-items:stretch}
.an-hero{margin-bottom:0;box-shadow:inset 3px 0 0 var(--blue)}
.hero-pct{display:flex;align-items:baseline;gap:12px;margin:8px 0 12px}
.hp-v{font-size:46px;font-weight:700;line-height:1;color:var(--blue-strong)}
.hp-sub{font-size:14px;color:var(--muted)}
.hp-bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.hp-bar span{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.an-stats{display:grid;gap:16px}
.an-stats .stat{margin:0;display:flex;flex-direction:column;justify-content:center}
.adash .dash-grid-3{grid-template-columns:1fr}
.adash .tablewrap{max-height:444px;overflow:auto}
@media(hover:hover){.adash .tbl tbody tr:hover{background:var(--surface-2)}}

/* ---------- responsive (≥900px = แอดมินจอกว้าง · ตรงกับ breakpoint ของแอป) ---------- */
@media(min-width:900px){
  .lv-kpis{grid-template-columns:repeat(5,1fr)}
  .an-grid{grid-template-columns:1.5fr 1fr}
  .an-stats{grid-template-rows:1fr 1fr}
  .adash .dash-grid-3{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:760px){
  .lv-row{grid-template-columns:1.5fr 1.2fr 0.9fr;gap:9px}
  .lv-row .lv-truck,.lv-row .lv-prog{display:none}
  .lv-colhead span:nth-child(2),.lv-colhead span:nth-child(4){display:none}
  .risk-card{grid-template-columns:1fr;gap:14px}
  .rk-body{border-left:none;padding-left:0}
  .rk-cta{justify-self:start}
}
@media(max-width:480px){.lv-kpis{grid-template-columns:1fr}}

/* ---------- v28b: Watchlist เฝ้ารถวิ่งสด (แดชบอร์ด · เลือก ≤3 + route tracker) ---------- */
.lv-sub{font-size:12px;font-weight:500;color:var(--muted)}
.watch-panel{padding:0;overflow:hidden}
.watch-sel{display:flex;flex-direction:column;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.watch-hint{font-size:12px;color:var(--muted)}
.watch-chips{display:flex;flex-wrap:wrap;gap:8px}
.watch-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 12.5px 'IBM Plex Sans Thai',sans-serif;padding:4px 12px 4px 4px;border-radius:999px;cursor:pointer;transition:.12s}
.watch-chip .lv-ava{width:24px;height:24px;font-size:10.5px}
.watch-chip:hover{border-color:var(--faint)}
.watch-chip.on{border-color:var(--blue);background:var(--blue-bg);color:var(--blue-strong)}
.watch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px;padding:16px}
.watch-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.watch-card.red{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.watch-card.amber{box-shadow:inset 3px 0 0 var(--amber)}
.wt-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.wt-id{flex:1;min-width:0}
.wt-nm{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-truck{font-size:12px;color:var(--muted)}
.wt-acts{display:flex;gap:6px;flex:0 0 auto}
.wt-act{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 12px 'IBM Plex Sans Thai',sans-serif;padding:5px 11px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:.12s}
.wt-act:hover{border-color:var(--accent);color:var(--accent-strong)}
.wt-leg{margin-top:10px}
.wt-bkrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wt-bk{font-size:11.5px;font-weight:700;color:var(--violet-strong);background:var(--violet-bg);padding:3px 8px;border-radius:6px}
.wt-ctn{font-size:11px;font-weight:600;color:var(--amber-ink)}
.watch-more{width:100%;border:none;border-top:1px solid var(--line);background:var(--surface-2);color:var(--blue-strong);font:600 13px 'IBM Plex Sans Thai',sans-serif;padding:11px;cursor:pointer;transition:.12s}
.watch-more:hover{background:var(--blue-bg)}

/* ---------- v28c: แท็บสถานะคนขับ (roster ทุกคน + การ์ดรายละเอียด) ---------- */
.ds-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.ds-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ds-stat .ds-n{font-size:24px;font-weight:700;color:var(--ink);line-height:1.05}
.ds-stat .ds-l{font-size:12px;color:var(--muted)}
.ds-stat.run{box-shadow:inset 3px 0 0 var(--mint)} .ds-stat.run .ds-n{color:var(--mint-strong)}
.ds-stat.idle{box-shadow:inset 3px 0 0 var(--blue)} .ds-stat.idle .ds-n{color:var(--blue-strong)}
.ds-stat.paused{box-shadow:inset 3px 0 0 var(--amber)} .ds-stat.paused .ds-n{color:var(--amber-ink)}
.ds-stat.off{box-shadow:inset 3px 0 0 var(--faint)}
.ds-stat.flag{box-shadow:inset 3px 0 0 var(--red)} .ds-stat.flag .ds-n{color:var(--red-strong)}
.ds-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ds-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--sh-sm)}
.ds-card.ds-clickable{cursor:pointer;transition:border-color .12s,transform .1s} .ds-card.ds-clickable:hover{border-color:var(--accent)} .ds-card.ds-clickable:active{transform:scale(.995)}
.ds-card.sev-red{box-shadow:inset 3px 0 0 var(--red),var(--sh-sm)}
.ds-card.sev-amber{box-shadow:inset 3px 0 0 var(--amber),var(--sh-sm)}
.ds-head{display:flex;align-items:center;gap:10px}
.ds-id{flex:1;min-width:0}
.ds-nm{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-truck{font-size:12px;color:var(--muted)}
.ds-badge{flex:0 0 auto;font:700 11.5px 'IBM Plex Sans Thai',sans-serif;padding:3px 10px;border-radius:999px;white-space:nowrap}
.ds-badge.run{background:var(--mint-bg);color:var(--mint-strong)}
.ds-badge.idle{background:var(--blue-bg);color:var(--blue-strong)}
.ds-badge.paused{background:var(--amber-bg);color:var(--amber-ink)}
.ds-badge.off{background:var(--surface-3);color:var(--muted)}
/* 😴 บล็อกพักในการ์ดคนขับ (2B-1) — โทนฟ้าสงบ · นับถอยหลัง mono · ปุ่มปรับ/แจ้งเตือน */
.ds-rest{margin-top:11px;background:#EAF2FF;border:1px solid #BFD6F5;border-radius:var(--r-sm);padding:9px 12px}
.ds-rest-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ds-rest-lbl{font-size:12.5px;font-weight:700;color:#1E3A5F}
.ds-rest-cd{font-size:13px;font-weight:700;color:#1E3A5F}
.ds-rest-meta{margin-top:5px;font-size:11.5px;color:#33567E}
.ds-rest-meta b{color:#1E3A5F}
.ds-rest-sent{color:var(--mint-strong);font-weight:600}
.ds-rest-acts{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.ds-job{margin-top:11px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px}
.ds-job.empty-job{display:flex;flex-direction:column;gap:3px;justify-content:center;min-height:62px}
.ds-jobrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ds-bk{font-size:11.5px;font-weight:700;color:var(--violet-strong);background:var(--violet-bg);padding:3px 8px;border-radius:6px;cursor:pointer}
.ds-more2{margin-left:5px;font-size:10px;color:var(--violet-strong);opacity:.85}
.ds-ctn{font-size:11.5px;font-weight:600;color:var(--amber-ink);margin-top:7px}
.ds-prog{margin-top:9px}
.ds-idle{font-size:13px;font-weight:600;color:var(--ink-2)}
.ds-seen{font-size:11.5px;color:var(--muted)}
.ds-foot{margin-top:11px;display:flex;flex-direction:column;gap:9px}
.ds-mini{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.ds-mini b{color:var(--ink)}
.ds-flag{color:var(--red-strong);font-weight:700}
.ds-okmile{color:var(--done)}
.ds-acts{display:flex;gap:6px;flex-wrap:wrap}
.ds-act{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 12px 'IBM Plex Sans Thai',sans-serif;padding:5px 11px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:.12s}
.ds-act:hover{border-color:var(--accent);color:var(--accent-strong)}
@media(max-width:620px){.ds-sum{grid-template-columns:repeat(2,1fr)} .ds-grid{grid-template-columns:1fr}}
@media(min-width:900px){.ds-sum{grid-template-columns:repeat(6,1fr)}}
.ds-htools{margin-left:auto;display:flex;gap:8px}
.ds-htools .btn.sm{font-size:12.5px;padding:6px 13px}
.ds-hfilter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ds-hdates{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.ds-hdates input{font:inherit;font-family:'IBM Plex Mono',monospace;border:1px solid var(--line);border-radius:9px;padding:5px 9px;color:var(--ink);background:var(--surface)}
.ds-hdates input:focus{outline:none;border-color:var(--accent)}
.adash .tbl tr.hr-open td{background:var(--amber-bg)} .adash .tbl tr.hr-open td:first-child{color:var(--amber-ink);font-weight:600}

/* ============================================================================
   v50 — เทมเพลตเว็บแอดมิน/ผจก. "มืออาชีพขนส่ง" (เจ้าของเคาะ 19 มิ.ย. 2026)
   1) นำทาง 2 ชั้น: sidebar 5 กลุ่มตามเฟสงาน → segmented sub-tab ในกลุ่ม (ยุบจาก 9 แท็บ)
   2) ฟอนต์ทั้งจอ = IBM Plex Sans Thai · ตัวเลข/เวลา/ไมล์/% = JetBrains Mono
      Itim เหลือเฉพาะ "แบรนด์ + Excel + login" (ตามของล็อก) — ทำที่ชั้นธีม ไม่แตะ global token
   ========================================================================== */
/* ---- ฟอนต์: ยกทั้งจอแอดมิน/ผจก.เป็น IBM Plex Sans Thai · เลข mono · แบรนด์คง Itim ---- */
body.role-admin,body.role-manager{--ui:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace}
body.role-admin,body.role-manager{font-family:var(--ui)}
body.role-admin .btn,body.role-manager .btn,
body.role-admin .tab,body.role-manager .tab,
body.role-admin .who,body.role-manager .who,
body.role-admin .chip,body.role-admin .tag,body.role-manager .chip,body.role-manager .tag,
body.role-admin .search,body.role-manager .search,
body.role-admin .mini-select,body.role-manager .mini-select,
body.role-admin .fld input,body.role-admin .fld select,body.role-admin .fld textarea,
body.role-manager .fld input,body.role-manager .fld select,body.role-manager .fld textarea,
body.role-admin .fbar,body.role-admin .fbar select,body.role-admin .fbar input,
body.role-manager .fbar,body.role-manager .fbar select,body.role-manager .fbar input,
body.role-admin .more-acts>summary,body.role-manager .more-acts>summary,
body.role-admin .legtab,body.role-manager .legtab,
body.role-admin .netbadge,body.role-manager .netbadge,
body.role-admin .toast,body.role-manager .toast{font-family:var(--ui)}
body.role-admin .brand,body.role-manager .brand{font-family:var(--ui);font-weight:700;letter-spacing:-.01em}
body.role-admin .num,body.role-admin .mono,body.role-admin .kpi .num,body.role-admin .bar-val,body.role-admin .stat .v,body.role-admin .tbl .num,body.role-admin .odo-num,
body.role-manager .num,body.role-manager .mono,body.role-manager .kpi .num,body.role-manager .stat .v,body.role-manager .tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- นำทาง 2 ชั้น ---- */
.adm-main{min-width:0}
.tab-badge,.subtab-badge{font-family:var(--mono,monospace);font-size:11px;font-weight:700;line-height:1;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
@media(min-width:900px){.tab.gtab .tab-badge{margin-left:auto}}
.subtabs{display:flex;gap:5px;flex-wrap:nowrap;margin:0 0 18px;padding:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;border:none;background:transparent;border-radius:999px;padding:8px 15px;font:600 13.5px var(--ui);color:var(--muted);cursor:pointer;transition:.14s}
.subtab .ico{width:16px;height:16px;opacity:.7}
.subtab:hover{color:var(--ink-2)}
.subtab.on{background:var(--surface);color:var(--accent-strong);box-shadow:var(--sh-xs);font-weight:700}
.subtab.on .ico{opacity:1;color:var(--accent-strong)}
html[data-theme="dark"] .subtab.on{background:var(--surface-3)}
.subtab.on .subtab-badge{background:var(--red);color:#fff}
/* ---- P2-4 Unified countdown chip (.cd) — replaces lv-cd/risk-cd/rb-cd/mcr-dl ---- */
.cd{display:inline-flex;align-items:center;font:700 13px/1.1 'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em;background:var(--surface-2);color:var(--brand-strong);border-radius:6px;padding:3px 8px;white-space:nowrap;flex:0 0 auto}
.cd.sm{font-size:12px;padding:2px 7px}
.cd.lg{font-size:15.5px;padding:5px 8px}
.cd.warn{color:var(--amber-ink);background:var(--amber-bg)}
.cd.crit,.cd.over{color:var(--red-strong);background:var(--red-bg)}
.cd.amber{color:var(--amber-ink);background:var(--amber-bg)}
.cd.amber.crit,.cd.amber.over{color:var(--red-strong);background:var(--red-bg)}
.cd.none{background:transparent;color:var(--faint);font-weight:500}
/* ---- CTA หน้าหลัก → แท็บวิเคราะห์ (หลังย้ายบล็อกวิเคราะห์ออก · เฟส C) ---- */
.dash-more{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--accent-strong);font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:border-color .14s,background .14s,box-shadow .14s}
.dash-more span{color:var(--muted);font-weight:400;font-size:13px}
.dash-more:hover{border-color:var(--accent);background:var(--accent-bg);box-shadow:var(--sh-sm)}
/* ---- ศูนย์ส่งออก: การ์ดรายงาน (เฟส D) ---- */
.rep-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:6px}
@media(min-width:760px){.rep-grid{grid-template-columns:1fr 1fr}}
.rep-card{display:flex;flex-direction:column;gap:12px;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px 17px;box-shadow:var(--sh-xs)}
.rep-h{display:flex;align-items:flex-start;gap:12px}
.rep-ic{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:20px;border-radius:11px;background:var(--accent-bg);color:var(--accent)}
.rep-ic .ico{width:22px;height:22px;stroke-width:1.7}
.rep-tx{min-width:0}
.rep-t{font-weight:700;font-size:15.5px;color:var(--ink)}
.rep-d{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.45}
.rep-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ===== v58 — บอร์ดงานเสี่ยงตกเรือ (มอนิเตอร์ · รวมด่วน→ช้า + ลงมือ) + ธงคนขับเงียบ stale ===== */
/* สีบอร์ดสะท้อนความจริง: เหลือง=มีงานเสี่ยงแต่ยังไม่เลยปิดท่า · แดง (.crit) = มี overdue/ไม่มีคนขับเลยปิดท่า */
.rb{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;box-shadow:var(--sh-sm);margin-bottom:14px;overflow:hidden}
.rb-head{display:flex;align-items:center;gap:9px;padding:10px 15px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,var(--amber-bg),var(--surface) 150%)}
.rb-ic{font-size:17px;line-height:1}
.rb-head h3{margin:0;font-size:14.5px;font-weight:800;color:var(--ink)}
.rb-head h3 b{font-family:'IBM Plex Mono',monospace;color:var(--amber-ink);margin-left:3px}
.rb.crit{border-left-color:var(--red)}
.rb.crit .rb-head{background:linear-gradient(180deg,var(--red-bg),var(--surface) 150%)}
.rb.crit .rb-head h3 b{color:var(--red-strong)}
.rb-over{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--red-strong);background:var(--red-bg);border:1px solid var(--red);border-radius:7px;padding:2px 8px}
.rb-hint{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:500}
.rb-list{max-height:344px;overflow:auto}
.rb-row{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--line-2)}
.rb-row:last-child{border-bottom:0}
.rb-row.red{background:linear-gradient(90deg,var(--red-bg),transparent 64%)}
.rb-row.amber{background:linear-gradient(90deg,var(--amber-bg),transparent 64%)}
.rb-ric{font-size:16px;flex:0 0 auto;line-height:1}
.rb-tx{min-width:0;flex:1}
.rb-t{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;min-width:0}
.rb-tag{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:1.5px 7px;border-radius:6px;color:#fff}
.rb-tag.red{background:var(--red)}
.rb-tag.amber{background:var(--amber-ink)}
.rb-s{font-size:12px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-s .arr{color:var(--faint);margin:0 4px}
.rb-warn{color:var(--red-strong)}
.rb-cd{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;color:var(--amber-ink);flex:0 0 auto;min-width:52px;text-align:right;background:var(--amber-bg);border-radius:6px;padding:3px 7px}
.rb-cd.crit,.rb-cd.over{color:var(--red-strong);background:var(--red-bg)}
.rb-acts{display:flex;gap:6px;flex:0 0 auto}
.rb-act{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:5px 11px;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:.14s}
.rb-act:hover{border-color:var(--faint);background:var(--surface-2)}
.rb-act.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.rb-act.solid:hover{background:var(--accent-strong)}
.mj-stale{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--amber-ink);background:var(--amber-bg);border-radius:8px;padding:5px 10px;margin-top:7px}
@media(max-width:760px){
  .rb-hint{display:none}
  .rb-row{flex-wrap:wrap}
  .rb-cd{order:3}
  .rb-acts{margin-left:auto}
}

/* ===== v59 — นำเข้างานจาก Excel (sheet พรีวิว + เทมเพลต) ===== */
.imp-drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;background:var(--surface-2);position:relative;margin:8px 0 14px;cursor:pointer;transition:.14s}
.imp-drop:hover{border-color:var(--accent);background:var(--accent-bg)}
.imp-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.imp-drop-hint{font-weight:700;color:var(--accent-strong);font-size:14px}
.imp-sum{font-size:13.5px;color:var(--ink-2);background:var(--accent-bg);border-radius:10px;padding:10px 13px;margin-bottom:10px}
.imp-sum b{font-family:'IBM Plex Mono',monospace;color:var(--accent-strong)}
.imp-tbl{max-height:300px;overflow:auto;margin-bottom:4px}
.imp-warn{color:var(--amber-ink);font-size:11px;font-weight:600;white-space:nowrap}
.imp-x{color:var(--red-strong);font-weight:600}
tr.imp-skip{background:var(--red-bg)}

/* ===== v61 — แก้ should-fix: คนขับงานหลายตู้ ป้าย "กำลังทำตู้ไหน" เด่นเหนือปุ่ม (banking-bright) ===== */
.job-now.multi .jn-curctn{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 12px;padding:9px 13px;border-radius:11px;background:var(--accent-bg);border:1.5px solid var(--accent);color:var(--accent-strong);font-size:14px;font-weight:700;line-height:1.3}
.jn-curctn b{font-family:'IBM Plex Mono',monospace;font-size:15px}
.jn-curctn .mono{font-family:'IBM Plex Mono',monospace}
.jn-curctn-hint{margin-left:auto;font-size:11.5px;font-weight:500;opacity:.75}
.legtab.on{box-shadow:0 2px 9px -3px var(--accent)}
@media(max-width:760px){.jn-curctn-hint{width:100%;margin-left:0;text-align:left}}

/* ============================================================================
   v62 — ยกระดับดีไซน์ "precise + warm" (เจ้าของขับ /brain · 2026-06-20)
   direction-proof = จอแอดมินหน้าหลัก (dash) · ตั้ง component กลางให้ reuse จอถัดไป
   (1) eyebrow + หัวเพจไอคอนแบดจ์  (2) เลขใหญ่ tracking ติดลบ ให้ "แน่น"
   (3) emoji เชิงโครงสร้าง → ไอคอนเส้น  (4) การ์ด KPI/risk มี "ตัวนำสายตาเดียว"
   ไม่แตะ: ชื่อโทเคน · จอคนขับ/นาฬิกาฮีโร่ (.dlh-num) · login (.logo) · สีความหมาย
   ========================================================================== */
/* ขนาดไอคอนเส้นมาตรฐาน (เสริม .ico ที่ฮาร์ดโค้ด 20px) */
.ico.ic-xs{width:14px;height:14px} .ico.ic-sm{width:16px;height:16px} .ico.ic-lg{width:24px;height:24px}

/* eyebrow — ป้ายกำกับเล็กนำหน้าหัวข้อ (เติมชั้นลำดับ · ตอบ Usability N4 "อยู่ตรงไหน") */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1;margin-bottom:7px}

/* หัวเพจ: ไอคอนแบดจ์ + eyebrow + ชื่อแน่น (แทนอิโมจินำหน้า) */
.page-head .ph-l{display:flex;align-items:flex-start;gap:13px;min-width:0}
.page-head .ph-tx{min-width:0}
.ph-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);color:var(--accent-strong);margin-top:2px}
.ph-ic .ico{width:21px;height:21px}
body.role-admin .page-head h2,body.role-manager .page-head h2{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.14}
@media(min-width:900px){body.role-admin .page-head h2,body.role-manager .page-head h2{font-size:28px}}

/* เลขใหญ่: tracking ติดลบ ให้แน่นแบบ Linear/Stripe (เฉพาะ admin · ไม่แตะ .dlh-num/.logo) */
.adash .k-num,.adash .rk-n,.adash .hp-v,.adash .kpi .num,.adash .ds-stat .ds-n{letter-spacing:-.022em}

/* KPI การ์ด: หัวแถว = label + ไอคอนจาง (ตัวนำสายตา = ตัวเลข · N1 งบสีต่อการ์ด) */
.k-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.k-ic{flex:0 0 auto;color:var(--faint);display:flex;line-height:0}
.k-ic .ico{width:18px;height:18px}
@media(hover:hover){.k-card.tap:hover .k-ic{color:var(--ink-2)}}

/* risk-card ฮีโร่: ไอคอน alert ตามความรุนแรง (แดง/เหลือง) + pin จิ๋วใน dest */
.risk-card .rk-ic{color:var(--red-strong);display:flex;justify-content:center;line-height:0}
.risk-card .rk-ic .ico{width:26px;height:26px}
.risk-card.near .rk-ic{color:var(--amber-ink)}
.rk-dest .ico{vertical-align:-2px;opacity:.7}

/* calm-card: ไอคอน check แทน ✅ */
.calm-card .cc-ic{color:var(--mint-strong);display:flex;line-height:0}
.calm-card .cc-ic .ico{width:20px;height:20px}

/* CTA วิเคราะห์: ไอคอน report นำหัวข้อ (คงโครง column — ไม่กระทบ pendBanner ที่ใช้ .dash-more เหมือนกัน) */
.dash-more .dm-h{display:inline-flex;align-items:center;gap:9px;color:var(--accent-strong);font-weight:600;font-size:15px}
.dash-more .dm-h .ico{width:18px;height:18px;flex:0 0 auto}

/* ---- โรลทิศทุกจอ (เจ้าของเคาะ 20 มิ.ย.) ---- */
/* ตาราง P2-5: เพิ่มแอร์แนวตั้งเดสก์ท็อป (อ่านสบายแบบ Stripe · เลขชิดขวาเดิม) */
@media(min-width:900px){
  body.role-admin .tbl th,body.role-manager .tbl th{padding:13px 16px}
  body.role-admin .tbl td,body.role-manager .tbl td{padding:15px 16px}
}
/* login wordmark: Itim (แบรนด์) + tracking คมขึ้น */
.logo{font-family:'Itim',var(--ui);letter-spacing:-.02em}
/* eyebrow บนพื้น aurora/glass เดสก์ท็อป — กันจางเกิน */
@media(min-width:900px){body.role-admin .eyebrow,body.role-manager .eyebrow{color:var(--ink-2);opacity:.8}}
/* มอนิเตอร์ P1-3: ไอคอนเส้นแทน emoji (สีตาม alert/safe-state เดิม ผ่าน currentColor) */
.mon-alert .a-ic{display:inline-flex;line-height:0}
.mon-alert .a-ic .ico{width:19px;height:19px}
.mon-safe .e{display:inline-flex;line-height:0}
.mon-safe .e .ico{width:20px;height:20px}
.mon-safe.safe .e{color:var(--mint-strong)} .mon-safe.risky .e{color:var(--amber-ink)} .mon-safe.blocked .e{color:var(--red-strong)}

/* ============================================================================
   v66 — Cutoff Race = abstract track + ไอคอน (ผ่านกฎ real-assets · เลิกฉากวาดมือ)
   แทร็กความคืบหน้า abstract + ไอคอนรถ(ชุดเดียว)วิ่งไป "ธงปิดท่า" · สีตามความด่วน เขียว→เหลือง→แดง
   คนขับ[hero] + มอนิเตอร์[mini] ใช้ component เดียว · เลข/สีคงอยู่ · reduced-motion=นิ่ง
   ========================================================================== */
.race{position:relative}
.race.hero{height:40px;margin:8px 0 12px}
.race.mini{height:24px;margin:8px 0 4px}
.race-rail{position:absolute;left:3px;right:3px;top:50%;transform:translateY(-50%);height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.race.mini .race-rail{height:6px}
.race-fill{position:absolute;left:0;top:0;bottom:0;width:var(--prog,6%);border-radius:999px;background:var(--brand);transition:width 1s cubic-bezier(.2,.8,.2,1)}
/* v68 — รถจริง(การ์ตูน) วิ่งบนราง → เรือปลายทาง (แทน abstract marker · เจ้าของเลือกรูปจริง) */
.race-veh{position:absolute;top:50%;left:var(--prog,6%);transform:translate(-50%,-52%) scaleX(-1);z-index:2;transition:left 1s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 1px 2px rgba(16,33,50,.25))}
.race-veh .ill-svg{width:100%;height:100%}
.race-port{position:absolute;top:50%;right:-3px;transform:translateY(-50%);line-height:0}
.dlh.is-warn .race-fill,.race.is-warn .race-fill{background:var(--amber)} .dlh.is-over .race-fill,.race.is-over .race-fill{background:var(--red)}
.dlh.is-won .race-veh{left:93%}
.race.hero .race-veh{width:30px;height:30px} .race.hero .race-port .ill-svg,.race.hero .race-port .ico{width:24px;height:24px}
.race.mini .race-veh{width:22px;height:22px} .race.mini .race-port .ill-svg,.race.mini .race-port .ico{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.race-fill,.race-veh{transition:none!important}}
/* v68 — route-tracker (จอคนขับ scope): รถการ์ตูนวิ่งบนราง → เรือปลายทาง */
.rt-ship .ill-svg,.rt-ship .ico{width:28px;height:28px}

/* ============================================================================
   v64 — ออร่ามีชีวิตตามช่วงวัน (ds-ideate concept 2 · รอบสร้างสรรค์ 2)
   พื้น aurora (login + เดสก์ท็อปแอดมิน/ผจก.) อุ่น→เย็นตามเวลาจริง: รุ่ง/วัน/เย็น/ค่ำ
   ทำที่โทเคน --aurora-* (ไม่แตะโครง) · เฉพาะโหมดสว่าง (มืดคงเดิม) · เปลี่ยนนุ่ม 1.2s
   ========================================================================== */
.login-bg::before,body.role-admin::before,body.role-manager::before{transition:background 1.2s ease}
html:not([data-theme="dark"])[data-daypart="dawn"]{--aurora-1:rgba(255,184,122,.20);--aurora-2:rgba(255,142,160,.15);--aurora-3:rgba(150,170,255,.13)}
html:not([data-theme="dark"])[data-daypart="dusk"]{--aurora-1:rgba(255,150,86,.20);--aurora-2:rgba(184,120,224,.17);--aurora-3:rgba(92,120,214,.13)}
html:not([data-theme="dark"])[data-daypart="night"]{--aurora-1:rgba(60,92,200,.16);--aurora-2:rgba(112,82,214,.16);--aurora-3:rgba(22,122,140,.12)}
/* day = ค่าเริ่มต้นเดิม (เขียว/ฟ้า/ม่วง) — ไม่ override */

/* ============================================================================
   v71 — Mission Control polish (gap-closure · 2026-06-22)
   (1) สงวน cyan --signal สำหรับ "live/วิ่งสด" เท่านั้น (ตัวบ่งชี้กำลังวิ่ง)
   (2) แก้สีฮาร์ดโค้ดพาสเทลที่หลุดบนพื้นมืด → โทนตามธีม
   ========================================================================== */
/* (1) live signal = cyan (เด่นบน control-room มืด · v2 signature) */
.rt-phase .live{background:var(--signal)}
.lp-live{background:var(--signal)}
.lp-node.cur{border-color:var(--signal)}
.rt-node.cur{border-color:var(--signal)}
.lv-ava{position:relative}
/* pulse ring ของจุด live ให้เป็นเฉด cyan (สงวน accent-bg เดิมไว้ที่อื่น) */
@keyframes pulseSignal{0%{box-shadow:0 0 0 0 var(--signal-bg)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rt-phase .live,.lp-live,.lp-node.cur,.rt-node.cur{animation:pulseSignal 1.6s infinite}

/* (2) เส้นขอบพาสเทลฮาร์ดโค้ดบนพื้นมืด → ใช้เฉดสีความหมายโปร่ง (อ่านชัดไม่หลุด) */
html[data-theme="dark"] .mon-safe.safe{border-color:rgba(52,216,160,.35)}
html[data-theme="dark"] .mon-safe.risky{border-color:rgba(242,180,92,.35)}
html[data-theme="dark"] .mon-safe.blocked{border-color:rgba(255,142,136,.35)}
html[data-theme="dark"] .mon-warnbar{border-color:rgba(255,142,136,.35)}
html[data-theme="dark"] .mon-alert.sos{border-color:rgba(255,142,136,.4)}
html[data-theme="dark"] .mon-alert.late{border-color:rgba(242,180,92,.4)}
html[data-theme="dark"] .mon-alert.info{border-color:rgba(127,192,255,.4)}
/* ปุ่ม/พิลในแถบเตือน: ฟีดแบ็ก hover บนมืดให้เห็น (เดิมเป็น black 6% มองไม่ออก) */
html[data-theme="dark"] .mon-alert .a-pill{background:rgba(255,255,255,.10)}
html[data-theme="dark"] .mon-alert .a-btn:hover{background:rgba(255,255,255,.10)}

/* ============================================================================
   v72 — หอบังคับการ: แผนที่จริง + รถวิ่ง (Leaflet · พอร์ตจาก v2 ControlTower · 2026-06-22)
   ศูนย์ติดตามใช้แผนที่ + รถ (แบบ v2) · หน้าต่างแก้ไข/แทรกแซง = ของ v1 เดิม (.mon-modal)
   ► z-index: ห่อแผนที่เป็น stacking context (z:0) กัน leaflet controls (z~1000) บังโมดัลแทรกแซง (z:45)
   ========================================================================== */
.mon-map-wrap{position:relative;margin:2px 0 16px}
.mon-map{position:relative;z-index:0;height:clamp(240px,42vh,420px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-sm);background:var(--surface-2)}
@media(min-width:900px){.mon-map{height:clamp(320px,48vh,460px)}}
.mon-map-off{display:none}
.mon-map-wrap.off .mon-map{display:none}
.mon-map-wrap.off .mon-map-off{display:flex;align-items:center;justify-content:center;text-align:center;
  height:160px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2);color:var(--muted);font-size:13.5px;padding:16px}
/* รถบนแผนที่ = asset จริง (Noto lorry) ในวงสีตามความด่วน (เขียว/อำพัน/แดง) */
.mon-mk{display:flex;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(2,8,16,.5);transition:transform .12s}
.mon-mk .ill-svg,.mon-mk svg,.mon-mk img{width:66%;height:66%;display:block}
.mon-mk.sel{outline:3px solid currentColor;outline-offset:2px;transform:scale(1.04)}
/* leaflet บนธีมมืด: ปุ่มซูม/แอตทริบิวต์เข้าโทน control-room */
.leaflet-container{background:var(--surface-2);font-family:var(--ui)}
.leaflet-control-zoom a{background:var(--surface);color:var(--ink);border-color:var(--line)}
.leaflet-control-zoom a:hover{background:var(--surface-2);color:var(--accent-strong)}
.leaflet-bar{border-color:var(--line);box-shadow:var(--sh-sm)}
.leaflet-tooltip{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-sm);
  font-family:var(--ui);font-size:12px;font-weight:600;border-radius:8px}
.leaflet-tooltip-top::before{border-top-color:var(--line)}

/* ============================================================================
   v73 — หอบังคับการ: master–detail 2 แพเนล + ผูก map↔list↔filter + โชว์ภารกิจ (2026-06-22)
   ซ้าย=แผนที่ sticky สูงเต็ม · ขวา=รายการเลื่อน (เรียงด่วน) · ของแก้ไข=โมดัล v1 เดิม
   ========================================================================== */
.mon-bar h2{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.mon-grid{display:block}                 /* มือถือ: แผนที่บน → รายการล่าง */
.mon-mapcol{margin-bottom:14px}
.mon-listhead{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.mon-listhead .mon-search-box{margin-left:0;width:100%}
.mon-listbody{min-width:0}
@media(min-width:900px){
  .mon-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr);gap:18px;align-items:start}
  .mon-mapcol{position:sticky;top:80px;margin-bottom:0}
  .mon-mapcol .mon-map{height:calc(100vh - 188px);min-height:430px}
  .mon-listcol{min-width:0}
  .mon-listhead{position:sticky;top:80px;z-index:6;background:var(--bg);padding:4px 0 10px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .mon-listhead .mon-chips{flex:1 1 auto}
  .mon-listhead .mon-search-box{width:auto;min-width:180px;flex:1 1 180px}
}
/* หรี่พื้นแผนที่ (มืด) ให้รถ/เส้น/ปลายทางเด่น = ฟีลหอบังคับการ ไม่ใช่ Google Maps */
html[data-theme="dark"] .mon-map .leaflet-tile-pane{filter:brightness(.82) saturate(.82) contrast(1.03)}
/* legend ความหมายสี/รูปทรง (a11y) มุมแผนที่ */
.mon-legend{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;gap:11px;flex-wrap:wrap;align-items:center;
  background:var(--glass,var(--surface));backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);
  border:1px solid var(--glass-border,var(--line));border-radius:999px;padding:6px 13px;font-size:11px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-sm)}
.mon-legend .lg-i{display:inline-flex;align-items:center}
.mon-legend .d{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
.mon-legend .d.calm{background:#0FA968}.mon-legend .d.tight{background:#E8961A}.mon-legend .d.crit{background:#E5364B}
.mon-legend .d.dest{background:var(--ink-2);width:8px;height:8px;border-radius:2px;transform:rotate(45deg)}
/* รถบนแผนที่: ตำแหน่งสัมพัทธ์ (รองรับ badge) */
.mon-mk{position:relative}
.mon-mk-badge{position:absolute;top:-8px;right:-11px;font-size:9.5px;font-weight:700;color:#fff;padding:1px 5px;border-radius:999px;
  border:1.5px solid var(--surface);line-height:1.35;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.45)}
/* ตัวที่เลือก = วง cyan "live" เต้น (สงวน signal = วิ่งสด/โฟกัส) */
.mon-mk.sel{outline:3px solid var(--signal);outline-offset:2px;animation:monMkPulse 1.6s infinite}
@keyframes monMkPulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.5)}70%{box-shadow:0 0 0 12px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
/* ปลายทาง = เพชร abstract (รูปทรงบอกชนิด · ไม่พึ่งสี) */
.mon-dest{width:13px;height:13px;background:var(--dc,var(--ink-2));border:2px solid #fff;transform:rotate(45deg);border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.mon-mk.sel{animation:none}}

/* ============================================================================
   v75 — หน้าเข้าสู่ระบบ ดีไซน์ใหม่ (2026-06-23 · owner: "ดูมืออาชีพกว่า")
   เลือกบทบาทจากการ์ด (พร้อมคำอธิบาย) → เลือกคนจาก dropdown → ปุ่มเข้าระบบ
   สเกลได้ (คนขับหลายคนไม่ล้นจอ) · ใช้โทเคนเดิมล้วน → ธีมมืด/สว่างได้อัตโนมัติ
   ========================================================================== */
/* ── ตัวเลือกคน (dropdown) ── */
.login-pick{margin-top:8px}
.lp-label{display:block;font-weight:700;font-size:14px;margin:0 0 8px 2px;color:var(--ink)}
.lp-label .muted{font-weight:500}
.select-wrap{position:relative}
.login-select{appearance:none;-webkit-appearance:none;width:100%;font:600 16px var(--ui);color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:14px 42px 14px 15px;cursor:pointer;
  box-shadow:var(--sh-xs);transition:border-color .16s,box-shadow .16s}
.login-select:hover{border-color:var(--faint)}
.login-select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.select-wrap .sel-chev{position:absolute;right:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* ── เลือกบทบาท ── */
.login-roles{margin-top:22px}
.lr-head{font-weight:700;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:0 0 10px 2px}
.role-cards{display:flex;flex-direction:column;gap:11px}
.role-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:13px 15px;
  box-shadow:var(--sh-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;animation:fadeUp .5s both}
.role-cards .role-card:nth-child(2){animation-delay:.05s}
.role-cards .role-card:nth-child(3){animation-delay:.1s}
.role-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--faint)}
.rc-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;box-shadow:var(--sh-xs)}
.rc-ic .ico,.rc-ic svg{width:25px;height:25px}
.rc-ic.mint{background:var(--mint)} .rc-ic.blue{background:var(--blue)} .rc-ic.violet{background:var(--violet)}
.rc-text{display:flex;flex-direction:column;min-width:0;flex:1}
.rc-text b{font-weight:700;font-size:17px;color:var(--ink)}
.rc-text small{font-size:13px;color:var(--muted);margin-top:1px}
.rc-check{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s}
.rc-check.mint{background:var(--mint)} .rc-check.blue{background:var(--blue)} .rc-check.violet{background:var(--violet)}
.rc-check svg{width:15px;height:15px}
/* การ์ดที่เลือก: แถบสีซ้าย + เน้นกรอบ/พื้น + โชว์ติ๊ก */
.role-card.active{border-color:var(--accent);background:var(--accent-bg)}
.role-card.active.mint{border-color:var(--mint);box-shadow:inset 4px 0 0 var(--mint),var(--sh-md)}
.role-card.active.blue{border-color:var(--blue);box-shadow:inset 4px 0 0 var(--blue),var(--sh-md)}
.role-card.active.violet{border-color:var(--violet);box-shadow:inset 4px 0 0 var(--violet),var(--sh-md)}
.role-card.active .rc-check{opacity:1;transform:scale(1)}

/* ── ปุ่มเข้าระบบ (เขียวแบรนด์) ── */
.login-go{margin-top:22px;font-size:17px;padding:15px;background:var(--brand);box-shadow:var(--sh-sm)}
.login-go:hover{background:var(--brand-strong)}

/* ── v76 Slice B — driver job card details ── */
.drv-job-details{display:flex;flex-wrap:wrap;gap:6px 12px;margin:4px 0 6px;font-size:12px;color:var(--muted)}
.drv-job-details span{white-space:nowrap}
.drv-job-details b{color:var(--ink);font-weight:600}
.jn-jobname{font-size:17px;font-weight:700;color:var(--ink);font-family:var(--font-body)}
.rstep{font-size:15px}

/* ── v76 Slice C — photo capture buttons row ── */
.pcap-btns{display:flex;gap:5px;flex-shrink:0}
.pcap-btns .btn{padding:5px 9px;font-size:12px}

/* ── v81 jobs driver-centric roster + grouped table ── */
.jb-roster{padding:10px 0 2px}
.jb-eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.jb-roster-inner{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.jb-card{flex:0 0 auto;min-width:140px;max-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .1s}
.jb-card:hover{border-color:var(--accent);box-shadow:var(--sh-sm)}
.jb-card:active{transform:scale(.98)}
.jb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:5px}
.jb-name{font-size:.83rem;font-weight:600;font-family:var(--font-body);line-height:1.3;flex:1;word-break:break-word}
.jb-load{font-size:.75rem;color:var(--ink-2);font-family:var(--mono)}
.tbl.jb-grp .jb-sect td{background:var(--surface-2,#f8fafc);font-size:.8rem;font-weight:700;padding:7px 12px;border-top:2px solid var(--line);color:var(--ink-2)}
.tbl.jb-grp .jb-sect.jb-sect-warn td{background:var(--amber-bg,#fffbeb);color:var(--amber-ink,#92400E);border-top-color:var(--amber,#F59E0B)}
[data-theme=dark] .tbl.jb-grp .jb-sect td{background:var(--surface-2,#1e2537)}
[data-theme=dark] .tbl.jb-grp .jb-sect.jb-sect-warn td{background:rgba(245,158,11,.08)}

/* ── roster collapsible toggle ── */
.jb-roster-toggle{all:unset;display:flex;align-items:center;gap:7px;width:100%;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:6px 0 4px;border-radius:6px;box-sizing:border-box}
.jb-roster-toggle:hover{color:var(--fg)}
.jb-roster-arrow{font-size:10px;transition:transform .15s;display:inline-block}
.jb-roster-body{margin-top:4px}
/* ── manage() 3-column grid ── */
.mg-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.mg-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.mg-col-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2,rgba(0,0,0,.025));gap:6px}
.mg-list{flex:1;overflow-y:auto;max-height:220px}
.mg-row{display:flex;align-items:center;gap:6px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:.82rem;min-width:0}
.mg-row:last-child{border-bottom:none}
.mg-row:hover{background:var(--surface-2,rgba(0,0,0,.025))}
.mg-row-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-family:var(--font-body)}
.mg-row-sub{font-size:.73rem;color:var(--ink-2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;flex-shrink:0}
.mg-row-dim{opacity:.5}.mg-row-dim .mg-row-name{text-decoration:line-through}
@media(max-width:1100px){.mg-3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.mg-3col{grid-template-columns:1fr}}
/* ── jobs table full-width + section collapse ── */
.tbl.jb-grp{width:100%}
.tbl.jb-grp .mini-select{width:100%;max-width:160px;box-sizing:border-box}
.tbl.jb-grp .jb-sect td{cursor:pointer}
/* ── v52 STATUS DOTS (แทน emoji สี 🟢🔵🟡⚪) ── */
.st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;vertical-align:middle;flex-shrink:0}
.st-dot.run{background:#0FB57E}
.st-dot.idle{background:#22D3EE}
.st-dot.paused{background:#E8B84B}
.st-dot.off{background:var(--ink-3,#6B7280)}
.st-dot.red{background:#EF4444}
.st-dot.amber,.st-dot.warn{background:#E8961A}
.st-dot.green{background:#0FB57E}
.ct-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:3px}
.ct-dot.amber{background:#E8961A}
.sect-arrow{display:inline-block;width:13px;font-size:10px;margin-right:3px;transition:transform .12s}
/* ── jobs table: ตัดข้อความไม่ให้ตก + status ไม่ตัดคำ ── */
.td-loc{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.td-nowrap{white-space:nowrap}
.td-nowrap .tag,.td-nowrap .chip{white-space:nowrap}
.tbl.jb-grp th{white-space:nowrap}
.tbl.jb-grp td{vertical-align:middle}
/* ── v89 monitor lane collapse · daily matrix ── */
.mon-lane.lane-collapsed .mon-jobs{display:none}
.mon-drv[data-coldrv]{cursor:pointer;user-select:none}
/* matrix: daily check table */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid var(--line)}
.matrix-table{border-collapse:collapse;font-size:11.5px;white-space:nowrap;min-width:900px;width:100%}
.matrix-table th,.matrix-table td{padding:7px 10px;border:1px solid var(--line);text-align:center}
.matrix-table th{background:var(--accent);color:#fff;font-weight:600;position:sticky;top:0;z-index:2}
.matrix-table td.sticky-1,.matrix-table th.sticky-1{position:sticky;left:0;z-index:3;background:var(--surface);text-align:left;min-width:100px}
.matrix-table td.sticky-2,.matrix-table th.sticky-2{position:sticky;left:100px;z-index:3;background:var(--surface);text-align:left;min-width:130px}
.matrix-table th.sticky-1,.matrix-table th.sticky-2{background:var(--accent);color:#fff}
.matrix-table td.mc-done{color:#0FB57E;font-weight:600}
.matrix-table td.mc-done.mc-xday{color:#F59E0B;font-weight:600;font-size:10px}
.matrix-table td.mc-miss{color:var(--red,#EF4444);font-weight:600}
.matrix-table td.mc-na{color:var(--ink-3,#9CA3AF)}
.matrix-table tr:nth-child(even) td:not(.sticky-1):not(.sticky-2){background:var(--accent-bg)}
.daily-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.daily-toolbar label{font-size:13px;font-weight:600;color:var(--ink-2)}

/* ── Schedule Live (.sl-*) ── */
.sl-list{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.sl-driver{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.sl-drv-head{display:flex;align-items:center;gap:7px;padding:10px 14px;cursor:pointer;user-select:none;background:var(--surface-2);transition:.12s}
.sl-drv-head:hover{background:var(--surface-3)}
.sl-drv-arrow{font-size:10px;color:var(--ink-2);flex-shrink:0;width:10px}
.sl-drv-name{font-size:13.5px;font-family:'Anuphan',sans-serif}
.sl-drv-cnt{margin-left:auto;font-size:12px;flex-shrink:0}
.sl-drv-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px}
.sl-empty{padding:4px 0;font-size:12px}
.sl-leg{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.sl-leg.active{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
.sl-leg.done{border-color:var(--done);opacity:.7}
.sl-leg-head{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.sl-phase{font-size:11.5px;color:var(--ink-2);margin-bottom:7px;font-style:italic}
.sl-route{display:flex;align-items:flex-start;overflow-x:auto;padding:2px 0 4px;gap:0}
.sl-node{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;min-width:72px;max-width:100px}
.sl-here{font-size:8px;color:var(--blue-strong,#2A6FD6);height:12px;line-height:12px;font-weight:700}
.sl-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);background:var(--surface);margin:1px auto;transition:.2s}
.sl-node.done .sl-dot{background:var(--accent);border-color:var(--accent)}
.sl-node.cur .sl-dot{background:var(--surface);border-color:var(--blue-strong,#2A6FD6);box-shadow:0 0 0 3px var(--accent-bg);animation:pulse 1.6s infinite}
.sl-lbl{font-size:10px;color:var(--faint);text-align:center;margin-top:3px;line-height:1.3;padding:0 4px}
.sl-node.done .sl-lbl{color:var(--accent-strong);font-weight:600}
.sl-node.cur .sl-lbl{color:var(--blue-strong,#2A6FD6);font-weight:700}
.sl-line{flex:1 1 20px;min-width:16px;height:2px;background:var(--line);margin-top:17px;align-self:flex-start}
.sl-line.done{background:var(--accent)}
.sl-eta{margin-left:auto;display:flex;align-items:center;gap:3px}
/* ── Import grid (inline สร้างงานเป็นชุด) ── */
.sheet-wide .sheet{max-width:820px !important;width:96vw !important}
.imp-modes{display:flex;gap:6px;margin-bottom:12px}
.imp-mode-btn{all:unset;padding:6px 14px;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:13px;color:var(--ink-2);transition:.12s}
.imp-mode-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.imp-mode-btn:hover:not(.on){background:var(--surface-2)}
.imp-grid-wrap{overflow:auto;max-height:340px;border:1px solid var(--line);border-radius:10px}
.imp-grid{border-collapse:collapse;font-size:12.5px;width:100%}
.imp-grid th{background:var(--surface-2);padding:5px 8px;border:1px solid var(--line);font-weight:600;white-space:nowrap;text-align:left;position:sticky;top:0;z-index:1;font-size:11.5px}
.imp-grid td{border:1px solid var(--line);padding:0;background:var(--surface)}
.imp-grid td:focus-within{background:var(--accent-bg)}
.imp-grid input{border:none;outline:none;background:transparent;font:inherit;padding:5px 8px;width:100%;min-width:70px;box-sizing:border-box;font-size:12.5px}
.imp-grid input:focus{background:transparent}
.del-row{all:unset;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);font-size:12px;border-radius:4px}
.del-row:hover{color:var(--red-strong,#DC2626);background:var(--red-bg,#FEF2F2)}
.imp-paste-hint{font-size:11.5px;color:var(--ink-2);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.imp-paste-hint b{font-family:'JetBrains Mono',monospace;color:var(--fg)}

/* ── Plan งาน (.plan-*) v91 ── */
.plan-datebar{display:flex;align-items:center;gap:10px;padding:10px 0 8px;flex-wrap:wrap}
.plan-date-lbl{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.plan-date-inp{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--surface);color:var(--ink-1)}
.plan-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:4px;background:var(--surface)}
.plan-tbl{border-collapse:collapse;width:100%;min-width:680px;font-size:13px}
.plan-tbl thead th{background:var(--surface-2);padding:8px 10px;text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:1}
.plan-tbl tbody tr{border-bottom:1px solid var(--line)}
.plan-tbl tbody tr:nth-child(odd){background:var(--surface)}
.plan-tbl tbody tr:nth-child(even){background:var(--surface-2)}
.plan-tbl tbody tr:focus-within{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.plan-td{padding:3px 5px;border-right:1px solid var(--line)}
.plan-td-sm{min-width:85px}.plan-td-xs{min-width:54px;width:54px}
.plan-td-del{padding:2px 4px;border:none;width:30px;text-align:center}
.plan-inp{border:none;outline:none;background:transparent;font-family:'Anuphan',sans-serif;font-size:13px;padding:5px 7px;width:100%;min-width:70px;color:var(--ink-1)}
.plan-inp.mono{font-family:'JetBrains Mono',monospace}
.plan-inp:focus{background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:5px}
.plan-sel{border:none;outline:none;background:transparent;font-family:'Anuphan',sans-serif;font-size:13px;padding:5px 4px;width:100%;color:var(--ink-1);cursor:pointer}
.plan-del{all:unset;cursor:pointer;color:var(--ink-3);font-size:12px;padding:4px 7px;border-radius:5px;transition:.12s;line-height:1}
.plan-del:hover{color:var(--red-strong,#c0392b);background:color-mix(in srgb,var(--red-strong,#c0392b) 10%,transparent)}
.plan-footer{display:flex;align-items:center;gap:8px;padding:12px 2px 4px;flex-wrap:wrap}
.plan-clr{color:var(--ink-3) !important}
.plan-clr:hover{color:var(--red-strong,#c0392b) !important}
.plan-tpl-wrap{position:relative;display:inline-block}
.plan-tpl-drop{position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:210px;box-shadow:0 6px 20px rgba(0,0,0,.13);padding:5px}
.plan-tpl-item{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:7px;transition:.1s}
.plan-tpl-item:hover{background:var(--surface-2)}
.plan-tpl-name{flex:1;font-size:13px;cursor:pointer;padding:2px 4px;color:var(--ink-1)}
.plan-tpl-del{all:unset;cursor:pointer;color:var(--ink-3);font-size:11px;padding:2px 6px;border-radius:4px;line-height:1}
.plan-tpl-del:hover{color:var(--red-strong,#c0392b)}
/* Plan summary modal */
.plan-sum-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.plan-stat{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 18px;min-width:74px}
.plan-stat b{font-size:22px;line-height:1;font-family:'JetBrains Mono',monospace}
.plan-stat span{font-size:11px;color:var(--ink-2);white-space:nowrap}
.plan-stat.mint{border-color:var(--accent);background:var(--accent-bg)}
.plan-stat.mint b{color:var(--accent-strong)}
.plan-stat.blue2{border-color:var(--blue,#3b82f6);background:color-mix(in srgb,var(--blue,#3b82f6) 8%,transparent)}
.plan-stat.blue2 b{color:var(--blue,#3b82f6)}
.plan-stat.amber2{border-color:var(--amber-strong,#d97706);background:color-mix(in srgb,var(--amber-strong,#d97706) 8%,transparent)}
.plan-stat.amber2 b{color:var(--amber-strong,#d97706)}
/* Plan งาน — drop zone */
.plan-drop{display:flex;align-items:center;gap:10px;border:2px dashed var(--line);border-radius:12px;padding:13px 18px;margin-top:10px;color:var(--ink-3);font-size:13px;transition:.15s;cursor:default}
.plan-drop-icon{font-size:20px;flex-shrink:0}
.plan-drop-txt{flex:1;line-height:1.4}
.plan-drop:hover{border-color:var(--accent);background:var(--accent-bg)}
.plan-drop.drag-on{border-color:var(--accent);border-style:solid;background:var(--accent-bg);color:var(--accent-strong);transform:scale(1.01)}
/* Plan งาน — existing jobs section */
.plan-existing{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.plan-ex-head{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-1)}
.plan-ex-tbl th{font-size:11.5px !important;padding:6px 10px !important;white-space:nowrap}
.plan-ex-tbl td{font-size:12.5px;padding:6px 10px;vertical-align:middle}

/* ===== v90 — Chunk 2A: ระบบแทรกแซงงานวิ่ง (admin UI) — force-finish · ย้อนสถานะ · เตือนชน · ล็อกจุดถึงแล้ว · reconcile ===== */
/* sub-sheet ที่เปิดจากในโมดัลแทรกแซง (.mon-modal z-index:45) ต้องอยู่เหนือ */
.backdrop.iv-over{z-index:60}
/* แถบจัดการขั้นสูง ในโมดัลแทรกแซง (.mon-modal) */
.iv-danger{border:1px solid var(--amber-strong,#d97706);background:var(--amber-bg,#fef6e7);border-radius:11px;padding:10px 12px;margin:6px 0 13px}
.iv-danger-hd{font-size:11.5px;font-weight:700;color:var(--amber-ink,#92600a);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.iv-danger-acts{display:flex;gap:8px}
.iv-danger-acts .btn{flex:1}
/* ล็อกจุดที่ถึงแล้ว (route edit · future-only) */
.iv-lock{font-size:10px;font-weight:700;color:var(--red-strong,#c0392b);margin-left:6px}
.mon-modal select[data-locked]{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
.iv-route-note{font-size:11px;color:var(--ink-2);line-height:1.5;background:var(--accent-bg);border-radius:9px;padding:7px 10px;margin-bottom:11px}
.iv-route-note b{color:var(--accent-strong)}
/* force-finish — เลือกปลายทางตู้ (fate) */
.iv-fates{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.iv-fate{display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:start;border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;transition:.12s}
.iv-fate:hover:not(.disabled){border-color:var(--accent);background:var(--accent-bg)}
.iv-fate input{grid-row:1/3;align-self:center;width:16px;height:16px;accent-color:var(--amber-strong,#d97706)}
.iv-fate-b{font-size:13.5px;font-weight:700;color:var(--ink)}
.iv-fate-h{font-size:11px;color:var(--ink-2);line-height:1.4}
.iv-fate.disabled{opacity:.5;cursor:not-allowed;background:var(--surface-2)}
.iv-fate.disabled .iv-fate-h{color:var(--red-strong,#c0392b)}
/* reverse-status — เลือก event จาก timeline */
.iv-rev-list{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px;max-height:240px;overflow:auto}
.iv-rev-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;transition:.12s}
.iv-rev-row:hover{border-color:var(--accent);background:var(--accent-bg)}
.iv-rev-row input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--red-strong,#c0392b)}
.iv-rev-lbl{font-size:13px;font-weight:600;color:var(--ink);flex:1}
.iv-rev-t{font-size:11.5px;color:var(--ink-2);flex:0 0 auto}
/* conflict warnbar (เคส 5 · addJobForm) */
.iv-conflict{border:1px solid var(--amber-strong,#d97706);background:var(--amber-bg,#fef6e7);border-radius:11px;padding:11px 13px;margin:4px 0 13px}
.iv-cf-hd{font-size:12.5px;font-weight:700;color:var(--amber-ink,#92600a);margin-bottom:7px}
.iv-cf-line{font-size:12px;color:var(--ink-1);line-height:1.6}
.iv-conflict .fld{margin:9px 0 4px}
.iv-conflict .chk{margin-top:8px;font-size:12.5px}
/* reconcile / stale block (เคส 9 · review tab) */
.iv-stale{border:1px solid var(--red-strong,#c0392b);background:var(--red-bg,#fdecea);border-radius:10px;padding:9px 11px;margin-top:9px}
.iv-stale-hd{font-size:12px;font-weight:700;color:var(--red-strong,#c0392b);margin-bottom:6px}
.iv-stale-row{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-top:1px dashed color-mix(in srgb,var(--red-strong,#c0392b) 30%,transparent)}
.iv-stale-row:first-of-type{border-top:none}
.iv-stale-lbl{font-size:12.5px;font-weight:600;color:var(--ink-1)}
.iv-stale-meta{font-size:10.5px;color:var(--ink-2)}
html[data-theme="dark"] .iv-danger{border-color:rgba(242,180,92,.4)}
html[data-theme="dark"] .iv-conflict{border-color:rgba(242,180,92,.4)}
html[data-theme="dark"] .iv-stale{border-color:rgba(255,142,136,.4)}

/* ============================================================================
   === CUSTOMER TRACK (Chunk 3 · Pass 3-PUBLIC) ===
   หน้าติดตามลูกค้า · scope body.role-track เท่านั้น (ไม่แตะ shared token แอดมิน/คนขับ)
   ทิศทาง A (RESEARCH): single column · light-locked · ≥16px · touch ≥44px · vertical stepper
   ฟอนต์ = ของจริงที่ app.css โหลด: IBM Plex Sans Thai + IBM Plex Mono (เลข/เวลา)
   เขียว approved=#0E9F6E · accent current · เทา pending
   ========================================================================== */
body.role-track{
  --trk-green:#0E9F6E; --trk-green-d:#0A7C55; --trk-green-bg:#E9F8F1; --trk-green-line:#BfE8D6;
  --trk-amber:#E8961A;
  --trk-ink:#16242E; --trk-muted:#5B6A77; --trk-faint:#8A98A4;
  --trk-bg:#F3F6F8; --trk-card:#FFFFFF; --trk-line:#E3EAEF; --trk-line-2:#EEF2F5;
  --trk-ui:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --trk-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  background:var(--trk-bg);color:var(--trk-ink);
  font-family:var(--trk-ui);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;margin:0;min-height:100vh;
}
body.role-track #app{display:block}
body.role-track .num{font-family:var(--trk-mono);font-variant-numeric:tabular-nums;letter-spacing:.2px}

.trk-wrap{max-width:520px;margin:0 auto;padding:14px 16px 40px;display:flex;flex-direction:column;gap:14px;
  animation:trkIn .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes trkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* หัวแบรนด์บาง */
.trk-brand{display:flex;align-items:center;gap:10px;padding:6px 2px 2px}
.trk-logo{font-family:'Itim',var(--trk-ui);font-weight:700;font-size:21px;letter-spacing:.5px;color:var(--trk-green);
  background:var(--trk-green-bg);border-radius:10px;padding:3px 12px;line-height:1.25}
.trk-brand-name{font-size:13.5px;font-weight:600;color:var(--trk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* หัวเรื่อง (จากเทมเพลต) */
.trk-head{padding:0 2px}
.trk-head-title{font-size:19px;font-weight:700;color:var(--trk-ink);line-height:1.35}
.trk-head-sub{font-size:13.5px;color:var(--trk-muted);margin-top:3px;line-height:1.45}

/* HERO การ์ดสถานะ (พระเอก) */
.trk-hero{display:flex;gap:14px;align-items:flex-start;background:var(--trk-card);border:1px solid var(--trk-line);
  border-radius:18px;padding:18px 18px;box-shadow:0 1px 2px rgba(16,40,30,.04),0 8px 24px rgba(16,40,30,.05)}
.trk-hero.moving{background:linear-gradient(180deg,var(--trk-green-bg),#fff 70%);border-color:var(--trk-green-line)}
.trk-hero.wait{background:var(--trk-card)}
.trk-hero.done{background:var(--trk-green);border-color:var(--trk-green-d);box-shadow:0 10px 30px rgba(14,159,110,.28)}
.trk-hero-ic{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.trk-hero.moving .trk-hero-ic{background:var(--trk-green);color:#fff}
.trk-hero.wait .trk-hero-ic{background:var(--trk-green-bg);color:var(--trk-green-d)}
.trk-hero.done .trk-hero-ic{background:rgba(255,255,255,.22);color:#fff}
.trk-hero-main{flex:1;min-width:0}
.trk-hero-status{font-size:21px;font-weight:700;line-height:1.3;color:var(--trk-ink)}
.trk-hero.done .trk-hero-status{color:#fff}
.trk-hero-sub{font-size:13px;color:var(--trk-muted);margin-top:3px}
.trk-hero.done .trk-hero-sub{color:rgba(255,255,255,.92)}
.trk-hero-bk,.trk-hero-eta{display:flex;align-items:baseline;gap:8px;margin-top:11px}
.trk-hero-bk-k,.trk-hero-eta-k{font-size:11.5px;font-weight:600;color:var(--trk-faint);text-transform:uppercase;letter-spacing:.4px;flex:0 0 auto}
.trk-hero.done .trk-hero-bk-k,.trk-hero.done .trk-hero-eta-k{color:rgba(255,255,255,.78)}
.trk-hero-bk-v{font-size:16px;font-weight:700;color:var(--trk-ink)}
.trk-hero-eta-v{font-size:14px;font-weight:600;color:var(--trk-green-d)}
.trk-hero.done .trk-hero-bk-v{color:#fff}

/* route from → to */
.trk-route{display:flex;align-items:center;gap:8px;background:var(--trk-card);border:1px solid var(--trk-line);
  border-radius:13px;padding:11px 14px;font-size:14px;flex-wrap:wrap}
.trk-route-pt{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--trk-ink);min-width:0}
.trk-route-pt .trk-route-ic{color:var(--trk-faint);flex:0 0 auto}
.trk-route-pt.to .trk-route-ic{color:var(--trk-green)}
.trk-route-arr{color:var(--trk-faint);display:inline-flex;flex:0 0 auto}

/* vertical timeline */
.trk-timeline{background:var(--trk-card);border:1px solid var(--trk-line);border-radius:16px;padding:6px 16px 8px}
.trk-step{display:flex;gap:14px;position:relative}
.trk-step-rail{flex:0 0 auto;width:22px;display:flex;flex-direction:column;align-items:center;padding-top:16px}
.trk-dot{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;position:relative;z-index:1}
.trk-dot.approved{background:var(--trk-green)}
.trk-dot.current{background:#fff;border:3px solid var(--trk-green)}
.trk-dot.current .trk-dot-pulse{position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--trk-green);
  animation:trkPulse 1.8s ease-out infinite;opacity:0}
@keyframes trkPulse{0%{transform:scale(.85);opacity:.5}100%{transform:scale(2.1);opacity:0}}
.trk-dot.pending{background:#fff;border:2px solid var(--trk-line)}
.trk-line{flex:1;width:2px;background:var(--trk-line);margin:4px 0 -4px;min-height:18px}
.trk-step.approved .trk-line,.trk-step.current .trk-line{background:var(--trk-green)}
.trk-step.pending .trk-line{background:repeating-linear-gradient(to bottom,var(--trk-line) 0 4px,transparent 4px 8px)}
.trk-step-body{flex:1;min-width:0;padding:14px 0 16px;border-bottom:1px solid var(--trk-line-2)}
.trk-step.last .trk-step-body{border-bottom:none;padding-bottom:8px}
.trk-step-label{font-size:16px;font-weight:600;color:var(--trk-ink);line-height:1.35}
.trk-step.pending .trk-step-label{color:var(--trk-faint);font-weight:500}
.trk-step.current .trk-step-label{font-weight:700}
.trk-step-now{font-size:12.5px;font-weight:700;color:var(--trk-green-d);margin-top:4px;letter-spacing:.2px}
.trk-step-time{font-size:13px;color:var(--trk-muted);margin-top:4px;font-weight:600}
.trk-step.approved .trk-step-time{color:var(--trk-green-d)}

/* รูป proof */
.trk-photos{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.trk-photo{width:74px;height:74px;border-radius:11px;background:var(--trk-line-2) center/cover no-repeat;
  border:1px solid var(--trk-line);cursor:pointer;flex:0 0 auto;transition:transform .12s,box-shadow .12s;
  position:relative;overflow:hidden}
.trk-photo:not(.ready){background:linear-gradient(110deg,var(--trk-line-2) 8%,#f7fafb 18%,var(--trk-line-2) 33%);
  background-size:200% 100%;animation:trkShimmer 1.3s linear infinite}
.trk-photo.ready:hover,.trk-photo.ready:focus-visible{transform:scale(1.04);box-shadow:0 4px 14px rgba(16,40,30,.18);outline:none}
@keyframes trkShimmer{to{background-position:-200% 0}}

/* ปุ่มติดต่อ */
.trk-contact{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  background:var(--trk-green-bg);border:1px solid var(--trk-green-line);border-radius:14px;
  color:var(--trk-green-d);font-size:15px;font-weight:600;text-decoration:none;padding:10px 16px;transition:.12s}
.trk-contact:hover{background:#dff4ea}
.trk-contact:active{transform:scale(.99)}
.trk-contact b{font-weight:700;color:var(--trk-green-d)}

/* footer */
.trk-foot{text-align:center;padding:6px 0 0;display:flex;flex-direction:column;gap:5px}
.trk-foot-pub{font-size:12px;color:var(--trk-faint)}
.trk-foot-brand{font-size:12.5px;font-weight:600;color:var(--trk-muted)}

/* states: error / empty */
.trk-state{background:var(--trk-card);border:1px solid var(--trk-line);border-radius:18px;padding:38px 24px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:18px}
.trk-state-ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:var(--trk-line-2);color:var(--trk-faint);margin-bottom:4px}
.trk-state-err .trk-state-ic{background:#FDECEC;color:#B11E30}
.trk-state-t{font-size:19px;font-weight:700;color:var(--trk-ink)}
.trk-state-s{font-size:14px;color:var(--trk-muted);line-height:1.5;max-width:300px}

/* skeleton loading */
.trk-skel{border-radius:14px;background:linear-gradient(110deg,var(--trk-line-2) 8%,#f7fafb 18%,var(--trk-line-2) 33%);
  background-size:200% 100%;animation:trkShimmer 1.3s linear infinite}
.trk-skel-hero{height:110px}
.trk-skel-line{height:46px}
.trk-skel-tl{background:var(--trk-card);border:1px solid var(--trk-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px}
.trk-skel-step{height:36px}

/* lightbox (self-contained) */
.trk-lb{position:fixed;inset:0;z-index:9999;background:rgba(8,16,12,.86);display:grid;place-items:center;
  padding:20px;opacity:0;transition:opacity .2s}
.trk-lb.show{opacity:1}
.trk-lb-img{max-width:100%;max-height:88vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.trk-lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.trk-lb-x:hover{background:rgba(255,255,255,.28)}

@media (max-width:400px){
  .trk-wrap{padding:12px 13px 36px}
  .trk-hero-status{font-size:19px}
  .trk-head-title{font-size:18px}
}

/* ==========================================================================
   === CUSTOMER PANEL (Chunk 3 · Pass 3-ADMIN-UI) ===
   แผงจัดการลิงก์ลูกค้าในจอแอดมิน · preview ใช้ .trk-* เดิม (ต้อง redeclare token
   --trk-* บน .cust-preview เพราะ component rule อ้าง var ที่เดิม scope body.role-track)
   ========================================================================== */
.cust-sheet{max-width:980px}
.cust-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:760px){.cust-grid{grid-template-columns:1fr}}
.cust-sec{background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.cust-link{margin-top:8px;background:var(--accent-bg);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;font-size:12px;word-break:break-all;color:var(--ink)}
.cust-photo{position:relative;display:inline-flex;flex-direction:column;gap:4px;margin:0 6px 6px 0}
.cust-photo img{width:84px;height:84px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer}
.cust-photo-x{font-size:11px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:3px 6px;cursor:pointer;color:#B11E30}
.cust-photo-x:hover{background:#FDECEC}
#custPhotos{display:flex;flex-wrap:wrap}
.cust-ms-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-2,#eef2f5)}
.cust-ms-row:last-child{border-bottom:none}
.cust-ms-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;background:#fff;border:2px solid var(--line)}
.cust-ms-dot.approved{background:#0E9F6E;border-color:#0E9F6E}
.cust-ms-dot.current{background:#fff;border-color:#0E9F6E;box-shadow:0 0 0 3px rgba(14,159,110,.18)}
.cust-ms-lab{flex:1;min-width:0;font-size:13.5px}
/* preview pane — จำลอง body.role-track ภายในกล่องเดียว */
.cust-preview{background:#F3F6F8;border:1px solid var(--line);border-radius:14px;padding:4px;max-height:560px;overflow:auto;
  --trk-green:#0E9F6E;--trk-green-d:#0A7C55;--trk-green-bg:#E9F8F1;--trk-green-line:#BfE8D6;--trk-amber:#E8961A;
  --trk-ink:#16242E;--trk-muted:#5B6A77;--trk-faint:#8A98A4;
  --trk-bg:#F3F6F8;--trk-card:#FFFFFF;--trk-line:#E3EAEF;--trk-line-2:#EEF2F5;
  --trk-ui:'IBM Plex Sans Thai',system-ui,sans-serif;--trk-mono:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--trk-ink)}
.cust-preview .trk-wrap{max-width:none;padding:10px 12px 18px}
.cust-preview .num{font-family:var(--trk-mono);font-variant-numeric:tabular-nums;letter-spacing:.2px}