/* ============ CDS Monitoring Dashboard ============ */
:root{
  --primary:#0d7377; --primary-d:#0a5c5f; --primary-soft:#e3f0f0;
  --bg:#f3f5f6; --surface:#fff; --surface-2:#fafbfb;
  --ink:#1b2227; --ink-2:#515b64; --ink-3:#8a939c;
  --line:#e6e9ec; --line-2:#eef1f3;
  --r:12px; --r-sm:8px;
  --sh-sm:0 1px 2px rgba(20,30,40,.05),0 1px 3px rgba(20,30,40,.04);
  --sh:0 4px 16px rgba(20,30,40,.07),0 1px 3px rgba(20,30,40,.05);
  --sh-lg:0 20px 56px rgba(20,30,40,.18);
  --en:'Inter',system-ui,sans-serif; --th:'Noto Sans Thai','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--en);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.th{font-family:var(--th)}
.th-sub{font-family:var(--th);font-weight:500;color:var(--ink-3);font-size:.72em}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:color-mix(in srgb,var(--primary) 24%,transparent)}

/* top bar */
.mapp{min-height:100vh;display:flex;flex-direction:column}
.mtop{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:58px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line)}
.mbrand{display:flex;align-items:center;gap:11px}
.mlogo{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--primary);color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px}
.mbrand-t{display:flex;flex-direction:column;line-height:1.15}
.mbrand-n{font-weight:680;font-size:14.5px}
.mbrand-s{font-size:11px;color:var(--ink-3)}
.mtop-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.sync{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);margin-right:4px}

/* buttons */
.mbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;border-radius:9px;padding:8px 13px;white-space:nowrap;transition:.12s}
.mbtn:hover{background:var(--surface-2);border-color:#d7dce0}
.mbtn.sm{padding:7px 11px;font-size:12.5px}
.mbtn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--sh-sm)}
.mbtn-primary:hover{background:var(--primary-d);border-color:var(--primary-d)}
.mbtn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.mbtn-ghost:hover{background:var(--line-2);color:var(--ink)}

.mmain{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:22px 22px 70px}
.mtitle{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.mtitle h1{font-size:23px;font-weight:720;letter-spacing:-.4px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.msub{color:var(--ink-3);font-size:12.5px;margin-top:3px;font-family:var(--th)}

/* KPI strip */
.kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.kpi{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;box-shadow:var(--sh-sm);transition:.12s}
.kpi:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.kpi-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;flex-shrink:0}
.kpi-txt{display:flex;flex-direction:column;line-height:1.1}
.kpi-v{font-size:25px;font-weight:760;letter-spacing:-1px}
.kpi-l{font-size:12px;font-weight:600;color:var(--ink-2);display:flex;flex-direction:column}
.kpi-l i{font-style:normal;font-size:10.5px;color:var(--ink-3);font-family:var(--th)}

/* team workload */
.team{margin-bottom:18px}
.team-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.team-head h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:680;color:var(--ink)}
.team-head h2 svg{color:var(--primary)}
.team-hint{font-size:11.5px;color:var(--ink-3)}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tcard{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:10px;transition:.13s}
.tcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.tcard.on{border-color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--primary)}
.tcard-top{display:flex;align-items:center;gap:10px}
.av{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;font-family:var(--th);flex-shrink:0}
.tcard-id{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.tcard-name{font-size:13.5px;font-weight:650;color:var(--ink)}
.tcard-role{font-size:10.5px;color:var(--ink-3)}
.tcard-count{display:flex;flex-direction:column;align-items:center;line-height:1}
.tcard-big{font-size:23px;font-weight:780;letter-spacing:-1px;color:var(--primary-d)}
.tcard-unit{font-size:9.5px;color:var(--ink-3)}
.tcard-barwrap{margin-top:-2px}
.tcard-track{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.tcard-fill{display:block;height:100%;border-radius:3px;background:var(--primary)}
.mixbar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line-2);gap:1px}
.mixbar span{display:block}
.tcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tcard-flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:650}
.tcard-flag.urgent{color:#C62828}
.tcard-flag.ok{color:#2E7D32}
.tcard-sup{font-size:10.5px;color:var(--ink-3)}

/* toolbar */
.mtoolbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;box-shadow:var(--sh-sm);margin-bottom:13px}
.msearch{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 11px;height:36px;color:var(--ink-3)}
.msearch:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)}
.msearch input{flex:1;border:0;background:none;outline:none;font-size:13px;color:var(--ink);height:100%}
.msearch button{border:0;background:none;color:var(--ink-3);display:grid;place-items:center;padding:3px}
.mfilters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mchip{position:relative;display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 8px 0 10px;height:36px;color:var(--ink-2)}
.mchip:hover{border-color:#d7dce0}
.mchip-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.mchip select{appearance:none;border:0;background:none;outline:none;font-size:12.5px;color:var(--ink);font-weight:600;cursor:pointer;padding-right:14px;max-width:130px}
.mchip svg{position:absolute;right:8px;pointer-events:none;color:var(--ink-3)}
.today-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:12.5px;border-radius:9px;padding:0 12px;height:36px}
.today-toggle.on{background:#fff3e6;border-color:#f0c89a;color:#b5600e}
.mreset{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--primary);font-weight:600;font-size:12.5px}
.mgroup{position:relative;display:flex;align-items:center;gap:7px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));border-radius:9px;padding:0 8px 0 11px;height:36px;color:var(--primary-d);margin-left:auto}
.mgroup select{appearance:none;border:0;background:none;outline:none;font-size:12.5px;color:var(--primary-d);font-weight:650;cursor:pointer;padding-right:14px}
.mgroup>svg:last-child{position:absolute;right:8px;pointer-events:none}

/* badges */
.sbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:750;letter-spacing:.3px;padding:3px 8px;border-radius:6px;font-family:var(--en)}
.sbadge.sm{font-size:10px;padding:2px 6px}
.stepb{display:inline-flex;align-items:center;gap:7px}
.stepb-n{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:11.5px;flex-shrink:0}
.stepb-lbl{display:flex;flex-direction:column;line-height:1.1}
.stepb-lbl .th{font-size:12px;font-weight:600;color:var(--ink)}
.modetag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:650;color:var(--ink-2);background:var(--line-2);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* monitoring table */
.mt-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.mt-row{display:grid;grid-template-columns:32px 2.1fr 1.1fr 1.5fr .85fr .62fr .62fr .62fr 2fr 1.1fr;gap:12px;align-items:center;padding:0 16px}
.mt-head{position:sticky;top:58px;z-index:10;height:38px;background:var(--surface-2);border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3)}
.mt-body{display:flex;flex-direction:column}
.mt-item{text-align:left;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line-2);min-height:52px;padding-top:8px;padding-bottom:8px;transition:filter .1s}
.mt-item:hover{filter:brightness(.975)}
.mt-item:last-child{border-bottom:0;border-radius:0 0 var(--r) var(--r)}
.c-ref{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ref-no{font-weight:700;font-size:13px;letter-spacing:.2px}
.ref-sup{font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-po{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.po-main{font-weight:550}
.po-more{font-size:10px;color:var(--ink-3);background:var(--line-2);border-radius:5px;padding:1px 5px}
.sched{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sched.late{color:#C62828;font-weight:700}
.sched.ok{color:#2E7D32;font-weight:600}
.pend{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pend-act{font-size:12px;color:var(--ink);font-family:var(--th);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pend-meta{display:flex;align-items:center;gap:6px;margin-top:2px}
.pend-from{font-size:10px;font-weight:650;color:var(--ink-2);background:var(--line-2);border-radius:5px;padding:1px 6px}
.pend-by{font-size:10.5px;color:var(--ink-3);font-family:var(--th)}
.pend-by.late{color:#C62828;font-weight:700}
.pend-by.today{color:#b5600e;font-weight:700}
.pend-none{color:var(--ink-3)}
.c-staff{display:flex;align-items:center;gap:8px}
.c-chk{display:flex;align-items:center;justify-content:center}
.row-chk{width:18px;height:18px;border:1.6px solid #c4cbd2;border-radius:5px;background:var(--surface);display:grid;place-items:center;color:#fff;transition:.12s}
.c-chk:hover .row-chk{border-color:var(--primary)}
.row-chk.on{background:var(--primary);border-color:var(--primary)}
.mt-item.handled{opacity:.5}
.mt-item.handled .ref-no{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.mode-mini{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.fwd{font-size:10px;color:var(--ink-3);font-weight:600}

/* group rows */
.mt-group{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.mt-group-name{font-weight:700;font-size:12.5px;color:var(--ink);font-family:var(--th)}
.mt-group-meta{display:flex;align-items:center;gap:8px}
.mg-count{font-size:11px;font-weight:650;color:var(--ink-2);background:var(--line-2);border-radius:6px;padding:2px 8px}
.mg-u{font-size:11px;font-weight:700;color:#C62828}
.mg-o{font-size:11px;font-weight:700;color:#E65100}

/* legend */
.mlegend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding:0 4px}
.leg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-2);font-family:var(--en)}
.leg i{width:11px;height:11px;border-radius:3px}
.leg-sep{flex:1}
.leg-note{font-size:11px;color:var(--ink-3)}

/* empty */
.mempty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--ink-3);padding:56px 20px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.me-t{font-size:15px;font-weight:650;color:var(--ink)}
.me-s{font-size:12.5px}

/* ===== Drawer ===== */
.drawer-scrim{position:fixed;inset:0;z-index:70;background:rgba(20,28,36,.4);backdrop-filter:blur(3px);display:flex;justify-content:flex-end;animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{width:min(520px,100%);height:100%;background:var(--bg);box-shadow:var(--sh-lg);display:flex;flex-direction:column;animation:slideIn .26s cubic-bezier(.2,.8,.3,1)}
@keyframes slideIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.dh{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--surface);border-bottom:1px solid var(--line);border-top:3px solid var(--accent)}
.dh-back{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2)}
.dh-back:hover{background:var(--line-2);color:var(--ink)}
.dh-id{flex:1;min-width:0}
.dh-ref{font-weight:740;font-size:17px;letter-spacing:-.2px}
.dh-sup{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbody{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:13px}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh-sm)}
.dcard-h{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-2);margin-bottom:13px;display:flex;align-items:baseline;gap:8px}

/* step progress (vertical-wrap horizontal) */
.dp-steps{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px 0}
.dp-step{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;width:46px;flex-shrink:0}
.dp-knob{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:12px;background:var(--surface);border:2px solid var(--line);color:var(--ink-3);transition:.15s}
.dp-lbl{font-size:9px;text-align:center;color:var(--ink-3);line-height:1.15;height:24px;overflow:hidden}
.dp-bar{height:2px;flex:1;min-width:6px;background:var(--line);margin-top:13px}
.dp-bar.done{background:var(--primary)}
.dp-step.done .dp-knob{background:var(--primary);border-color:var(--primary);color:#fff}
.dp-step.active .dp-knob{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-d);box-shadow:0 0 0 4px var(--primary-soft)}
.dp-step.active .dp-lbl{color:var(--primary-d);font-weight:700}

/* vessel timeline */
.vtl{display:flex;justify-content:space-between}
.vtl-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;text-align:center}
.vtl-dot{width:13px;height:13px;border-radius:50%;background:var(--surface);border:2.5px solid var(--line);z-index:2}
.vtl-line{position:absolute;top:5px;left:50%;width:100%;height:2.5px;background:var(--line);z-index:1}
.vtl-stop.passed .vtl-dot{background:var(--primary);border-color:var(--primary)}
.vtl-stop.passed .vtl-line{background:var(--primary)}
.vtl-stop.done .vtl-dot{background:#2E7D32;border-color:#2E7D32}
.vtl-stop.late .vtl-dot{background:#C62828;border-color:#C62828}
.vtl-k{font-size:10px;font-weight:750;color:var(--ink-2);margin-top:3px;letter-spacing:.3px}
.vtl-d{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px;border:1px solid transparent;background:none;border-radius:6px;padding:2px 5px;color:inherit;cursor:pointer;transition:.12s}
.vtl-d:hover{border-color:var(--primary);background:var(--surface);color:var(--primary-d)}
.vtl-pen{opacity:0;transition:opacity .12s}
.vtl-d:hover .vtl-pen{opacity:.7}
.vtl-input{width:108px;font-size:11px;font-family:var(--en);border:1.5px solid var(--primary);border-radius:6px;padding:2px 4px;outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
.vtl-hint{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:11px;color:var(--ink-3)}
.vtl-hint svg{color:#9a6a12}
.vtl-stop.late .vtl-d{color:#C62828}
.vtl-th{font-size:9.5px;color:var(--ink-3)}

/* computed status banner in drawer */
.status-now{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-left-width:3px;border-radius:9px;padding:10px 13px;margin-bottom:12px;background:var(--surface-2)}
.status-reason{font-size:12.5px;color:var(--ink-2);font-weight:500}
.status-auto{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3);background:var(--line-2);border-radius:6px;padding:3px 7px}
/* user picker */
.user-pick{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:4px 10px 4px 6px}
.user-pick select{appearance:none;border:0;background:none;outline:none;font-size:12.5px;font-weight:600;color:var(--ink);font-family:var(--th);cursor:pointer;max-width:100px}
/* dirty dot in drawer header */
.dirty-dot{color:#e3711c;font-size:12px;margin-left:6px}
/* save button in drawer header */
.dh-save{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);font-weight:650;font-size:12.5px;border-radius:9px;padding:7px 13px;transition:.12s;flex-shrink:0}
.dh-save.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(13,115,119,.3)}
.dh-save:disabled{opacity:.45;cursor:not-allowed}
/* last modified bar */
.mod-bar{display:flex;align-items:center;gap:7px;padding:7px 18px;background:#f4f8f4;border-bottom:1px solid #d6eedd;font-size:11.5px;color:#2E7D32;font-family:var(--th)}
.mod-sep{color:var(--ink-3);margin:0 2px}
.mod-who{font-weight:650}
/* editable pending section */
.pend-edit{display:flex;flex-direction:column;gap:10px;margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:13px;background:var(--surface-2)}
.pe-row{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px}
.pe-lbl{display:flex;flex-direction:column;line-height:1.2}
.pe-lbl .th{font-size:12.5px;font-weight:600;color:var(--ink)}
.pe-lbl span:last-child{font-size:10px;color:var(--ink-3)}
.pe-sel{position:relative;display:flex;align-items:center}
.pe-sel select{appearance:none;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 28px 8px 10px;font-size:13px;color:var(--ink);outline:none;cursor:pointer;font-family:var(--th)}
.pe-sel select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.pe-sel svg{position:absolute;right:9px;pointer-events:none;color:var(--ink-3)}
.pe-inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);outline:none;font-family:var(--th)}
.pe-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
/* footer save */
.d-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface);border-top:1px solid var(--line);position:sticky;bottom:0;z-index:5}
.d-mod-info{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#2E7D32;font-family:var(--th)}
.d-mod-info b{font-weight:700}
.d-save-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3);font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 20px;transition:.14s;font-family:var(--th)}
.d-save-btn.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(13,115,119,.3)}
.d-save-btn:disabled{opacity:.4;cursor:not-allowed}
.pend-box{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.pb-act{font-size:13px;font-weight:600;font-family:var(--th);color:var(--ink)}
.pb-meta{display:flex;gap:14px;margin-top:7px}
.pb-from,.pb-by{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);font-family:var(--th)}

/* key info grid */
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.irow{display:flex;flex-direction:column;gap:2px;background:var(--surface);padding:9px 12px}
.ik{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-3);font-weight:650;display:flex;gap:5px;align-items:baseline}
.ik i{font-style:normal;font-size:10px;color:var(--ink-3);font-family:var(--th);text-transform:none;letter-spacing:0}
.iv{font-size:13px;font-weight:600;color:var(--ink)}

/* docs */
.docs-list{display:flex;flex-direction:column;gap:7px}
.doc-item{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);width:100%;text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.doc-item:hover{border-color:var(--primary);background:var(--surface)}
.doc-item.ok{background:#f1faf4;border-color:#cce9d6}
.doc-item.ok:hover{border-color:#a9dcc0}
.doc-chk{display:grid;place-items:center;width:19px;height:19px;border-radius:5px;border:1.5px solid #c4cbd2;background:var(--surface);color:#fff;flex-shrink:0}
.doc-item.ok .doc-chk{background:#2E7D32;border-color:#2E7D32}
.doc-en{font-size:13px;font-weight:600;color:var(--ink)}
.doc-th{font-size:11px;color:var(--ink-3);margin-left:auto}
.d-remark{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;font-family:var(--th);resize:vertical;outline:none;line-height:1.5}
.d-remark:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* delete button & confirm dialog */
.d-delete-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;border:1.5px solid #fbd8d8;background:#fff5f5;color:#C62828;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.d-delete-btn:hover{background:#fbd8d8}
.del-confirm-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:300}
.del-confirm{background:#fff;border-radius:14px;padding:28px 32px;text-align:center;max-width:340px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.del-confirm-icon{font-size:36px;margin-bottom:10px}
.del-confirm-title{font-size:17px;font-weight:700;margin-bottom:8px}
.del-confirm-sub{font-size:13px;color:#666;line-height:1.6;margin-bottom:20px;font-family:var(--th)}
.del-confirm-btns{display:flex;gap:10px;justify-content:center}
.mbtn{padding:8px 18px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.mbtn-ghost{border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.mbtn-ghost:hover{background:var(--surface-2)}
.mbtn-danger{background:#C62828;color:#fff;border:none}
.mbtn-danger:hover{background:#a81f1f}

/* toast */
.mtoast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:9px;background:#1b2227;color:#fff;font-size:13px;font-weight:550;font-family:var(--th);padding:11px 18px;border-radius:10px;box-shadow:var(--sh-lg);animation:toastUp .26s cubic-bezier(.2,.9,.3,1.2)}
.mtoast svg{color:#5fd99a}
@keyframes toastUp{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== Auth layer ===== */
.auth-wrap{display:flex;flex-direction:column;min-height:100vh}
.auth-bar{display:flex;align-items:center;gap:10px;padding:0 20px;height:42px;background:color-mix(in srgb,var(--primary) 6%,#fff);border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));font-size:12.5px;position:sticky;top:0;z-index:50}
.auth-welcome{display:flex;align-items:center;gap:8px;color:var(--primary-d);font-weight:550;font-family:var(--th)}
.auth-warn{display:flex;align-items:center;gap:7px;color:#b5600e;background:#fff3e6;border-radius:7px;padding:4px 10px;font-size:11.5px}
.auth-av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
.auth-right{margin-left:auto;position:relative}
.auth-user-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:600;font-family:var(--th);cursor:pointer}
.auth-user-btn:hover{background:var(--surface-2)}
.auth-dropdown{position:absolute;right:0;top:40px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-lg);min-width:220px;z-index:100;overflow:hidden}
.auth-dd-head{padding:12px 16px;border-bottom:1px solid var(--line-2)}
.auth-dd-name{font-weight:700;font-size:14px;font-family:var(--th)}
.auth-dd-email{color:var(--ink-3);font-size:12px;margin-top:2px}
.auth-logout{display:flex;align-items:center;gap:8px;width:100%;padding:11px 16px;border:0;background:none;color:#C62828;font-weight:600;font-size:13px;font-family:var(--th);cursor:pointer;text-align:left}
.auth-logout:hover{background:#fff5f5}
.auth-body{flex:1}
/* pushes topbar down when auth-bar is present */
.auth-wrap .mtop{top:42px}

/* login screen */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f5f4 0%,#f0f9f9 100%);font-family:var(--en)}
.login-card{background:var(--surface);border-radius:18px;padding:48px 40px;width:min(380px,94vw);box-shadow:0 8px 40px rgba(13,115,119,.14);text-align:center}
.login-logo{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--primary);color:#fff;font-size:20px;font-weight:800;margin-bottom:22px}
.login-title{font-size:22px;font-weight:740;margin:0 0 6px;color:var(--ink)}
.login-sub{color:var(--ink-3);font-size:14px;margin:0 0 30px}
.login-err{background:#fff5f5;border:1px solid #ffcdd2;border-radius:9px;padding:10px 14px;color:#C62828;font-size:13px;margin-bottom:18px;display:flex;align-items:center;gap:7px;font-family:var(--th);text-align:left}
.login-btn{width:100%;padding:13px 20px;background:#0078D4;color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:650;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .18s}
.login-btn:hover{background:#006CBE}
.login-note{color:#bbb;font-size:12px;margin-top:18px;font-family:var(--th)}
.login-spinner{width:36px;height:36px;border:3px solid #cde9e9;border-top-color:var(--primary);border-radius:50%;margin:0 auto;animation:lspin .8s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}

/* demo section */
.demo-tag{font-size:11px;color:#888;background:#f5f5f5;padding:2px 8px;border-radius:4px;margin-left:6px}
.demo-section{margin-top:22px;padding-top:18px;border-top:1px dashed #e0e0e0;text-align:left}
.demo-label{font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;text-align:center}
.demo-sel{width:100%;padding:9px 10px;border:1px solid #ddd;border-radius:8px;font-size:13px;margin-bottom:8px;color:#333;background:#fff;font-family:var(--th);outline:none}
.demo-sel:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.demo-btn{width:100%;padding:10px 20px;background:#f0f9f9;color:var(--primary-d);border:1.5px solid var(--primary);border-radius:8px;font-size:13px;font-weight:650;cursor:pointer;font-family:var(--th);transition:.12s}
.demo-btn:hover{background:var(--primary-soft)} */
.mbtn.disabled{opacity:.5;pointer-events:none}
.ns-scrim{position:fixed;inset:0;z-index:80;background:rgba(20,28,36,.45);backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px;animation:fade .18s}
.ns-modal{width:min(640px,100%);max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;animation:nsIn .24s cubic-bezier(.2,.8,.3,1)}
@keyframes nsIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.ns-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);border-top:3px solid var(--primary)}
.ns-htitle h3{font-size:18px;font-weight:740;display:flex;align-items:baseline;gap:8px}
.ns-htitle p{font-size:12px;color:var(--ink-3);margin-top:3px}
.ns-x{margin-left:auto;border:1px solid var(--line);background:var(--surface);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);flex-shrink:0}
.ns-x:hover{background:var(--line-2);color:var(--ink)}
.ns-body{padding:18px 20px;overflow-y:auto}
.ns-locks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.ns-lock{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:6px}
.ns-lock-k{font-size:10.5px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.3px}
.ns-lock-v{display:flex;align-items:center;gap:9px;font-weight:700}
.ns-lock-v.auto{justify-content:space-between;font-size:15px;color:var(--primary-d);letter-spacing:.2px}
.auto-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.4px;color:#fff;background:var(--primary);border-radius:6px;padding:3px 7px}
.ns-lock-note{font-size:10.5px;font-weight:500;color:#9a6a12}
.nf-locked{display:flex;align-items:center;gap:8px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));border-radius:9px;padding:8px 12px;font-size:13.5px;font-weight:600}
.nf-auto-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.3px;color:#fff;background:var(--primary);border-radius:6px;padding:3px 8px;margin-left:auto}
.ns-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nf{display:flex;flex-direction:column;gap:5px}
.nf.full{grid-column:1/-1}
.nf-l{display:flex;flex-direction:column;line-height:1.2}
.nf-l .th{font-size:12.5px;font-weight:600;color:var(--ink)}
.nf-en{font-size:10.5px;color:var(--ink-3);font-weight:500}
.req{color:#C62828;font-style:normal;margin-left:2px}
.nf-inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--ink);outline:none;font-family:var(--th)}
.nf-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.nf-sel{position:relative;display:flex;align-items:center}
.nf-sel select{appearance:none;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 30px 9px 11px;font-size:13.5px;color:var(--ink);outline:none;cursor:pointer;font-family:var(--th)}
.nf-sel select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.nf-sel svg{position:absolute;right:11px;pointer-events:none;color:var(--ink-3)}
.ns-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2)}
.ns-warn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#b5600e}
@media(max-width:560px){
  .ns-locks,.ns-grid{grid-template-columns:1fr}
}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .kpi-strip{grid-template-columns:repeat(3,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .mgroup{margin-left:0}
  /* table -> cards */
  .mt-head{display:none}
  .mt-wrap{background:none;border:0;box-shadow:none;overflow:visible}
  .mt-body{gap:10px}
  .mt-item{display:grid;grid-template-columns:1fr auto;gap:7px 12px;background:var(--surface)!important;border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);box-shadow:var(--sh-sm);padding:13px 15px 13px 42px;position:relative}
  .c-chk{position:absolute;left:13px;top:14px}
  .c-ref{grid-column:1}
  .c-status{grid-column:2;grid-row:1;justify-self:end}
  .c-step{grid-column:1/-1;border-top:1px solid var(--line-2);padding-top:8px}
  .c-po{grid-column:1/-1;font-size:11.5px}
  .c-date{display:none}
  .c-pend{grid-column:1/-1;border-top:1px solid var(--line-2);padding-top:8px}
  .c-staff{grid-column:1/-1;justify-content:flex-start;gap:10px}
  .mt-group{background:var(--surface);border-radius:9px;border:1px solid var(--line)}
}
@media(max-width:560px){
  .kpi-strip{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
  .mmain{padding:16px 13px 60px}
  .mtitle h1{font-size:19px}
  .drawer{width:100%}
  .msearch{min-width:100%}
  .vtl-th{display:none}
}

/* urgent days threshold control */
.urgent-days{display:flex;align-items:center;gap:6px;background:#fff5f5;border:1px solid #ffcdd2;border-radius:9px;padding:0 10px;height:36px;color:#C62828}
.urgent-days .th{font-size:11.5px;font-weight:650;white-space:nowrap}
.urgent-days select{appearance:none;border:0;background:none;outline:none;font-size:12.5px;color:#C62828;font-weight:700;cursor:pointer;padding:0 4px}

/* save validation error banner */
.save-err-bar{display:flex;align-items:center;gap:8px;background:#fff5f5;border:1px solid #ffcdd2;border-left:3px solid #C62828;border-radius:9px;padding:10px 14px;color:#C62828;font-size:12.5px;font-weight:600;font-family:var(--th);animation:toastUp .2s ease}

/* ===== MultiCombo — multi-select + free-text tag input =====
   วาง (paste) ต่อท้ายไฟล์ monitor.css ได้เลย */
.mcombo{position:relative;width:100%}
.mcombo-box{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  min-height:38px;width:100%;padding:5px 7px;
  border:1px solid var(--line);background:var(--surface);border-radius:9px;
  cursor:text;transition:border-color .12s,box-shadow .12s}
.mcombo-box:focus-within{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.mcombo-tag{display:inline-flex;align-items:center;gap:4px;
  background:var(--primary-soft);color:var(--primary-d);
  font-size:12px;font-weight:650;border-radius:7px;padding:3px 4px 3px 8px;
  font-family:var(--th);white-space:nowrap}
.mcombo-x{display:grid;place-items:center;border:0;background:transparent;
  color:var(--primary-d);opacity:.6;cursor:pointer;padding:1px;border-radius:5px}
.mcombo-x:hover{opacity:1;background:color-mix(in srgb,var(--primary) 18%,transparent)}
.mcombo-inp{flex:1;min-width:90px;border:0;outline:none;background:none;
  font-size:13.5px;color:var(--ink);font-family:var(--th);padding:3px 2px}
.mcombo-inp::placeholder{color:var(--ink-3)}

/* ตำแหน่ง (top/left/width) กำหนดจาก inline style แบบ position:fixed ในโค้ด
   เพื่อให้ลอยหลุดกรอบ overflow — ที่นี่เหลือแค่หน้าตา */
.mcombo-menu{z-index:200;right:auto;bottom:auto;max-width:min(340px,90vw);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--sh-lg);padding:5px;max-height:240px;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px}
/* SingleCombo (ช่องเลือก 1 ค่า เช่น Buyer) */
.mcombo-box.single{flex-wrap:nowrap;cursor:pointer;padding-right:30px;position:relative}
.mcombo-box.single .mcombo-inp{cursor:text}
.mcombo-chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none}
.mcombo-opt{display:flex;align-items:center;gap:7px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--ink);cursor:pointer;
  font-size:13px;font-family:var(--th);border-radius:7px;padding:7px 9px}
.mcombo-opt:hover{background:var(--line-2)}
.mcombo-opt svg{color:var(--ink-3)}
.mcombo-add{color:var(--primary-d);font-weight:650}
.mcombo-add svg{color:var(--primary)}

/* ===== PO duplicate validation (New Shipment) =====
   วาง (paste) ต่อท้ายไฟล์ monitor.css */
.nf-inp-err{border-color:#DC2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.nf-dupe{display:flex;align-items:flex-start;gap:5px;margin-top:6px;
  color:#C62828;font-size:12px;line-height:1.35;font-family:var(--th)}
.nf-dupe svg{flex-shrink:0;margin-top:1px}


/* ===== Detail panel → centered modal + editable Key Info =====
   วาง (paste) ต่อท้ายไฟล์ monitor.css */

/* ข้อ 4: เปิดหน้ารายละเอียดมาให้อยู่ตรงกลาง (เดิมชิดขวา) */
.drawer-scrim{justify-content:center;align-items:center;padding:20px}
.drawer{width:min(600px,100%);height:auto;max-height:88vh;
  border-radius:16px;overflow:hidden;
  animation:nsIn .24s cubic-bezier(.2,.8,.3,1)}

/* ข้อ 7: Key Info แบบแก้ไขได้ */
.kinfo-edit{display:flex;flex-direction:column;gap:11px}
.ke-2col{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ke-row{display:flex;flex-direction:column;gap:5px;min-width:0}
.ke-owner{display:flex;align-items:center;gap:7px;height:38px;padding:0 2px;
  font-size:13px;color:var(--ink)}

/* SingleCombo — ปุ่มลูกศร */
.mcombo-caret{display:grid;place-items:center;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;padding:0 4px;flex-shrink:0}
.mcombo-caret:hover{color:var(--ink)}

/* ข้อ 5 + 6: dropdown เห็นครบ ไม่โดนบัง (combo วางเต็มความกว้างแล้ว) */
.mcombo-menu{max-height:190px}


/* ===== Duplicate shipment (ก็อปงาน) =====
   วาง (paste) ต่อท้ายไฟล์ monitor.css */
.dh-dup{display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:12.5px;font-weight:600;font-family:var(--th);
  padding:6px 11px;border-radius:8px;cursor:pointer;transition:all .12s;margin-right:7px}
.dh-dup:hover{border-color:var(--primary);color:var(--primary-d);background:var(--primary-soft)}

.ns-dup-note{display:flex;align-items:flex-start;gap:7px;
  background:var(--primary-soft);color:var(--primary-d);
  border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);
  border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45;margin-bottom:14px}
.ns-dup-note svg{flex-shrink:0;margin-top:1px}
/* ===== Tabs (Dashboard | Insights) + Insights page =====
   วาง (paste) ต่อท้ายไฟล์ monitor.css */
.mtabs{display:flex;gap:4px;margin:4px 0 20px;border-bottom:1px solid var(--line-2)}
.mtab{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;
  font-size:14px;font-weight:650;color:var(--ink-3);font-family:var(--th);
  padding:9px 15px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
.mtab .th{font-weight:500;font-size:11.5px}
.mtab:hover{color:var(--ink)}
.mtab.on{color:var(--primary-d);border-bottom-color:var(--primary)}

.ins-wrap{display:flex;flex-direction:column;gap:16px}

.ins-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ins-stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.ins-stat-v{font-size:28px;font-weight:750;color:var(--ink);line-height:1}
.ins-stat-l{margin-top:6px;font-size:12px;font-weight:650;color:var(--ink-2);font-family:var(--th)}
.ins-stat-l .th{color:var(--ink-3);font-weight:500}
.ins-stat.bad  .ins-stat-v{color:#C62828}
.ins-stat.warn .ins-stat-v{color:#C2410C}
.ins-stat.good .ins-stat-v{color:#2E7D32}

.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.ins-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ins-card-h{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;cursor:pointer;
  padding:14px 16px;text-align:left;font-family:var(--th)}
.ins-card-t{font-size:14px;font-weight:700;color:var(--ink)}
.ins-card-t .th-sub{font-size:11.5px;font-weight:500;color:var(--ink-3);margin-left:5px}
.ins-card-total{margin-left:auto;font-size:12px;font-weight:700;color:var(--primary-d);
  background:var(--primary-soft);padding:2px 10px;border-radius:20px}
.ins-chev{color:var(--ink-3);transition:transform .18s;flex-shrink:0}
.ins-chev.open{transform:rotate(180deg)}

.ins-bars{display:flex;flex-direction:column;gap:9px;padding:2px 16px 16px}
.ins-empty{color:var(--ink-3);font-size:12.5px;padding:8px 0}
.ins-bar-row{display:flex;align-items:center;gap:10px}
.ins-bar-lbl{flex:0 0 122px;font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-bar-lbl i{font-style:normal;color:var(--ink-3);font-weight:500;font-size:11px}
.ins-bar-track{flex:1;height:9px;background:var(--line-2);border-radius:6px;overflow:hidden}
.ins-bar-fill{height:100%;border-radius:6px;min-width:2px;
  transition:width .45s cubic-bezier(.2,.8,.3,1)}
.ins-bar-n{flex:0 0 26px;text-align:right;font-size:13px;font-weight:700;color:var(--ink)}

@media(max-width:880px){
  .ins-stats{grid-template-columns:repeat(2,1fr)}
  .ins-grid{grid-template-columns:1fr}
}
/* ============================================================
   ADD-ONS · Pre-Booking + ETD-today reminder + buyer multi
   ============================================================ */

/* ETD = วันนี้ → เตือนสีแดง (ต้องตาม OBL + FRT INV จาก 3PL) */
.sched.etd-today{color:#C62828;font-weight:700;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15}
.sched-tag{font-family:var(--th);font-size:9px;font-weight:700;color:#fff;background:#C62828;border-radius:5px;padding:1px 5px;white-space:nowrap;letter-spacing:.2px}

/* Tab count badge (Pre-Booking) */
.mtab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:2px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

/* New-Shipment modal · Pre-Booking toggle */
.ns-prebook{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;border:1px dashed var(--line);background:var(--surface-2);border-radius:10px;padding:11px 13px;margin-bottom:12px;transition:.12s;cursor:pointer}
.ns-prebook:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.ns-prebook.on{border-style:solid;border-color:var(--primary);background:var(--primary-soft)}
.ns-prebook-check{flex-shrink:0;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;color:#fff;margin-top:1px}
.ns-prebook-check.on{background:var(--primary);border-color:var(--primary)}
.ns-prebook-txt{display:flex;flex-direction:column;gap:2px}
.ns-prebook-txt b{font-size:13px;color:var(--ink)}
.ns-prebook-txt .th{font-size:11px;color:var(--ink-3)}
.ns-stage0{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:7px;background:#8A6D00;color:#fff;font-size:12px;font-weight:700}

/* Drawer · Pre-Booking banner + convert button */
.prebook-banner{border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));background:var(--primary-soft);border-radius:var(--r);padding:13px 15px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.prebook-banner-t{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--primary-d)}
.prebook-banner-s{font-size:11.5px;color:var(--ink-2);line-height:1.5}
.prebook-convert{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:6px;border:0;background:var(--primary);color:#fff;font-weight:650;font-size:12.5px;border-radius:9px;padding:8px 13px;cursor:pointer;box-shadow:var(--sh-sm);transition:.12s}
.prebook-convert:hover{background:var(--primary-d)}

/* Pre-Booking page */
.pb-wrap{margin-top:6px}
.pb-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.pb-head-t{flex:1}
.pb-head-t h2{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink)}
.pb-head-t h2 svg{color:var(--primary)}
.pb-head-s{font-size:12px;color:var(--ink-3);margin-top:4px;max-width:640px;line-height:1.5}
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pb-card{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:.12s;box-shadow:var(--sh-sm);border-left:3px solid #8A6D00}
.pb-card:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));transform:translateY(-1px)}
.pb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-ref{font-weight:750;font-size:13.5px;color:var(--ink);letter-spacing:-.2px}
.pb-badge{font-size:10px;font-weight:700;color:#8A6D00;background:#fbf1cf;border-radius:6px;padding:2px 8px}
.pb-sup{font-size:12.5px;color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-pos{display:flex;flex-wrap:wrap;gap:5px}
.pb-po{font-size:11px;font-weight:650;color:var(--ink-2);background:var(--line-2);border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums}
.pb-po-empty{color:var(--ink-3);background:none;border:1px dashed var(--line);font-weight:500}
.pb-meta{display:flex;flex-wrap:wrap;gap:6px}
.pb-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.pb-tag i{font-style:normal;font-size:9.5px;color:var(--ink-3)}
.pb-remark{font-size:11.5px;color:var(--ink-3);line-height:1.5;border-top:1px dashed var(--line);padding-top:7px}
.pb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.pb-owner{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.pb-open{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--primary-d)}

/* ---- Pre-Booking page · organize (chips + toolbar) ---- */
.pb-chips{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pb-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 11px 6px 9px;cursor:pointer;transition:.12s;white-space:nowrap}
.pb-chip:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line));background:var(--surface-2)}
.pb-chip.on{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary)}
.pb-chip-n{font-size:15px;font-weight:780;color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.pb-chip-l{font-size:11.5px;color:var(--ink-2);font-weight:600}
.pb-chip.total{background:var(--primary);border-color:var(--primary)}
.pb-chip.total .pb-chip-n{color:#fff}
.pb-chip.total .pb-chip-l{color:#eafafa}
.pb-chip.total.on{box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--primary)}
.pb-chip.mine{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.pb-chip.mine.on{background:var(--primary-soft)}
.pb-chip-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 2px}

.pb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pb-search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:420px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 11px;height:36px;color:var(--ink-3)}
.pb-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)}
.pb-search input{flex:1;border:0;background:none;outline:none;font-size:13px;color:var(--ink);height:100%}
.pb-search button{border:0;background:none;color:var(--ink-3);display:grid;place-items:center;padding:3px;cursor:pointer}
.pb-sort{position:relative;display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 8px 0 11px;height:36px;color:var(--ink-2)}
.pb-sort select{appearance:none;border:0;background:none;outline:none;font-size:12.5px;color:var(--ink);font-weight:600;cursor:pointer;padding-right:14px}
.pb-sort > svg:last-child{position:absolute;right:8px;pointer-events:none;color:var(--ink-3)}
.pb-count{font-size:12px;color:var(--ink-3);margin-left:2px}

.pb-grid{grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.mempty.sm{padding:28px 16px;gap:8px}

/* ---- Pre-Booking · group-by + density + collapsible ---- */
.pb-chip.static{cursor:default}
.pb-chip.static:hover{background:var(--primary);border-color:var(--primary)}

.pb-sel{position:relative;display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 8px 0 11px;height:36px;color:var(--ink-2)}
.pb-sel-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.pb-sel select{appearance:none;border:0;background:none;outline:none;font-size:12.5px;color:var(--ink);font-weight:600;cursor:pointer;padding-right:14px}
.pb-sel > svg:last-child{position:absolute;right:8px;pointer-events:none;color:var(--ink-3)}

.pb-density{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;height:36px;background:var(--surface-2)}
.pb-den-btn{display:grid;place-items:center;width:36px;border:0;background:none;color:var(--ink-3);cursor:pointer;transition:.12s}
.pb-den-btn:hover{background:var(--line-2);color:var(--ink-2)}
.pb-den-btn.on{background:var(--primary);color:#fff}

.pb-expand{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.pb-expand button{border:0;background:none;color:var(--primary);font-weight:650;font-size:12px;cursor:pointer}
.pb-expand button:hover{text-decoration:underline}

/* group sections */
.pb-groups{display:flex;flex-direction:column;gap:10px}
.pb-group{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pb-group.open{box-shadow:var(--sh-sm)}
.pb-group-head{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:var(--surface-2);padding:11px 14px;cursor:pointer;transition:.12s}
.pb-group-head:hover{background:var(--line-2)}
.pb-group-chev{color:var(--ink-3);transition:transform .15s}
.pb-group-chev.open{transform:rotate(90deg);color:var(--primary)}
.pb-group-name{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-group-count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:10px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.pb-group-hint{font-size:11px;color:var(--ink-3);margin-left:auto}
.pb-group .pb-grid,.pb-group .pb-rows{padding:12px}

/* compact rows */
.pb-rows{display:flex;flex-direction:column;gap:6px}
.pb-rowitem{display:grid;grid-template-columns:minmax(150px,2fr) 1.1fr 1.2fr .7fr 1fr 22px;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid #8A6D00;background:var(--surface);border-radius:9px;padding:9px 12px;cursor:pointer;transition:.12s}
.pb-rowitem:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:var(--surface-2)}
.pbr-ref{display:flex;flex-direction:column;gap:1px;min-width:0}
.pbr-ref-no{font-weight:700;font-size:12.5px;color:var(--ink);letter-spacing:-.2px}
.pbr-sup{font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbr-po{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:0}
.pbr-more{font-size:10px;color:var(--ink-3);background:var(--line-2);border-radius:5px;padding:1px 5px}
.pbr-buyer{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbr-mode{min-width:0}
.pbr-owner{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);min-width:0}
.pbr-owner .th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbr-go{display:grid;place-items:center;color:var(--ink-3)}
.pbr-dim{color:var(--ink-3);font-style:normal}
.pb-tag.sm{font-size:10px;padding:1px 6px}

@media (max-width:820px){
  .pb-rowitem{grid-template-columns:minmax(120px,2fr) 1.2fr auto 22px}
  .pbr-buyer,.pbr-mode{display:none}
}

/* ============================================================
   SUPPLIERS DIRECTORY (dashboard + table + tabbed drawer)
   ============================================================ */
.sup-wrap{margin-top:6px}
.sup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.sup-head h2{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink)}
.sup-head h2 svg{color:var(--primary)}
.sup-head-s{font-size:12px;color:var(--ink-3);margin-top:4px;max-width:660px;line-height:1.5}

/* summary cards */
.sup-cards{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-bottom:16px}
.sup-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh-sm)}
.sup-card-h{display:flex;justify-content:space-between;margin-bottom:12px}
.sup-card-h b{font-size:13.5px;color:var(--ink);display:block}
.sup-card-h .th{font-size:11px;color:var(--ink-3)}
.sup-bars{display:flex;flex-direction:column;gap:8px}
.sup-bar-row{display:grid;grid-template-columns:140px 1fr 28px;align-items:center;gap:10px;cursor:pointer}
.sup-bar-row:hover .sup-bar-name{color:var(--primary-d)}
.sup-bar-name{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-bar-track{height:8px;background:var(--line-2);border-radius:5px;overflow:hidden}
.sup-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#12a3a0);border-radius:5px}
.sup-bar-n{font-size:12px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.sup-card.stat{display:flex;flex-direction:column}
.sup-bignum{font-size:40px;font-weight:800;color:var(--primary-d);line-height:1;letter-spacing:-1px;margin:2px 0 12px}
.sup-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.sup-stat{display:flex;flex-direction:column;gap:1px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.sup-stat-n{font-size:18px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.sup-stat-n.warn{color:#B45309}
.sup-stat .th{font-size:10.5px;color:var(--ink-3)}

/* toolbar */
.sup-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sup-tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.sup-tab{border:0;background:none;font-size:12.5px;color:var(--ink-2);font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.12s}
.sup-tab b{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.sup-tab:hover{color:var(--ink)}
.sup-tab.on{background:var(--surface);color:var(--primary-d);box-shadow:var(--sh-sm)}
.sup-tab.on b{color:var(--primary)}
.sup-search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:380px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 11px;height:36px;color:var(--ink-3)}
.sup-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)}
.sup-search input{flex:1;border:0;background:none;outline:none;font-size:13px;color:var(--ink)}
.sup-search button{border:0;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;padding:3px}

/* table */
.sup-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--sh-sm)}
.sup-thead,.sup-row{display:grid;grid-template-columns:2.2fr 2fr .5fr 1.1fr 1.5fr 24px;align-items:center;gap:12px}
.sup-thead{padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.sup-row{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-2);background:var(--surface);padding:11px 16px;cursor:pointer;transition:.12s}
.sup-row:last-child{border-bottom:0}
.sup-row:hover{background:var(--surface-2)}
.sup-c-name{display:flex;align-items:center;gap:10px;min-width:0}
.sup-ava{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#0a5c5f);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.sup-ava.lg{width:44px;height:44px;border-radius:12px;font-size:18px}
.sup-name-txt{display:flex;flex-direction:column;min-width:0}
.sup-name-txt b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-name-txt i{font-size:11px;color:var(--ink-3);font-style:normal}
.sup-c-prod{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.sup-chip{font-size:10.5px;color:var(--ink-2);background:var(--line-2);border-radius:6px;padding:2px 7px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.sup-chip.more{background:none;border:1px dashed var(--line);color:var(--ink-3)}
.sup-c-hs{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sup-c-ship{display:flex;align-items:center;gap:8px}
.sup-ship-track{flex:1;height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;max-width:80px}
.sup-ship-fill{display:block;height:100%;background:var(--primary);border-radius:4px}
.sup-c-ship b{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.sup-c-flags{display:flex;gap:5px;flex-wrap:wrap}
.sup-flag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}
.sup-flag.warn{color:#B45309;background:#FEF3C7}
.sup-flag.doc{color:var(--primary-d);background:var(--primary-soft)}
.sup-flag.todo{color:var(--ink-3);background:var(--line-2)}
.sup-c-go{color:var(--ink-3);display:grid;place-items:center}
.sup-dim{color:var(--ink-3)}

/* drawer overlay + panel */
.sup-ov{position:fixed;inset:0;background:rgba(20,28,36,.42);backdrop-filter:blur(2px);z-index:1000;display:flex;justify-content:flex-end;animation:supFade .15s ease}
@keyframes supFade{from{opacity:0}to{opacity:1}}
.sup-dw{width:min(600px,96vw);height:100%;background:var(--surface);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(20,30,40,.18);animation:supSlide .2s cubic-bezier(.2,.7,.3,1)}
@keyframes supSlide{from{transform:translateX(30px);opacity:.6}to{transform:translateX(0);opacity:1}}
.sup-dw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sup-dw-title{display:flex;align-items:center;gap:12px;min-width:0}
.sup-dw-title h3{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.sup-dw-sub{font-size:11.5px;color:var(--ink-3)}
.sup-dw-x{border:0;background:var(--surface-2);color:var(--ink-2);width:32px;height:32px;border-radius:9px;display:grid;place-items:center;cursor:pointer}
.sup-dw-x:hover{background:var(--line-2)}
.sup-dw-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.sup-dw-tab{border:0;background:none;padding:11px 12px;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent;white-space:nowrap;transition:.12s}
.sup-dw-tab:hover{color:var(--ink-2)}
.sup-dw-tab.on{color:var(--primary-d);border-bottom-color:var(--primary)}
.sup-tabn{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:var(--line-2);color:var(--ink-2);font-size:10px;font-weight:700}
.sup-tabn.warn{background:#FEF3C7;color:#B45309}
.sup-dw-body{flex:1;overflow-y:auto;padding:16px 18px}
.sup-dw-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
.sup-foot-note{font-size:11.5px;color:var(--ink-3)}

/* overview form */
.sup-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sup-f{display:flex;flex-direction:column;gap:5px}
.sup-f.full{grid-column:1/-1}
.sup-f-l{font-size:11px;font-weight:600;color:var(--ink-2)}
.sup-f input,.sup-f textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);background:var(--surface);outline:none;font-family:inherit;resize:vertical}
.sup-f input:focus,.sup-f textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sup-linked{grid-column:1/-1;margin-top:4px;border-top:1px dashed var(--line);padding-top:12px}
.sup-linked-h{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.sup-linked-list{display:flex;flex-wrap:wrap;gap:6px}
.sup-linked-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.sup-linked-item b{color:var(--ink);font-weight:650}
.sup-linked-item i{color:var(--ink-3);font-style:normal}
.sup-linked-item.more{color:var(--ink-3)}

/* tab panes (products / docs / constraints) */
.sup-tabpane{display:flex;flex-direction:column;gap:8px}
.sup-pane-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.sup-pane-head b{font-size:13px;color:var(--ink)}
.sup-pane-empty{font-size:12px;color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--line);border-radius:9px;padding:14px;text-align:center;line-height:1.5}
.sup-prow,.sup-drow,.sup-crow{display:flex;align-items:center;gap:8px}
.sup-prow input,.sup-drow input,.sup-crow input,.sup-crow select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--ink);background:var(--surface);outline:none;font-family:inherit}
.sup-prow input:focus,.sup-drow input:focus,.sup-crow input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sup-in-name{flex:1.4;min-width:0}
.sup-in-hs{width:110px;font-variant-numeric:tabular-nums}
.sup-in-note{flex:1;min-width:0}
.sup-del{flex-shrink:0;border:0;background:none;color:var(--ink-3);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;transition:.12s}
.sup-del:hover{background:#FEE2E2;color:#DC2626}
.sup-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.sup-sug{display:inline-flex;align-items:center;gap:4px;font-size:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:7px;padding:4px 9px;cursor:pointer;transition:.12s}
.sup-sug:hover{border-color:var(--primary);color:var(--primary-d);background:var(--primary-soft)}
.sup-reqtog{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;color:#fff;cursor:pointer}
.sup-reqtog.on{background:var(--primary);border-color:var(--primary)}
.sup-hint{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.sup-crow select{width:110px;flex-shrink:0;cursor:pointer}
.sup-crow{border-left:3px solid var(--line);padding-left:8px;border-radius:3px}
.sup-crow.lvl-warn{border-left-color:#EAB308}
.sup-crow.lvl-critical{border-left-color:#DC2626}
.sup-crow.lvl-info{border-left-color:#94A3B8}

/* add-supplier mini modal */
.sup-ov .sup-addbox{margin:auto;background:var(--surface);border-radius:var(--r);padding:22px;width:min(440px,92vw);box-shadow:0 20px 60px rgba(20,30,40,.3);animation:supPop .18s ease}
@keyframes supPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.sup-addbox h3{font-size:16px;font-weight:700;color:var(--ink)}
.sup-addbox p{font-size:12px;color:var(--ink-3);margin:6px 0 12px}
.sup-addbox input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13.5px;color:var(--ink);outline:none;font-family:inherit}
.sup-addbox input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sup-addbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

@media (max-width:860px){
  .sup-cards{grid-template-columns:1fr}
  .sup-thead,.sup-row{grid-template-columns:2fr 1fr 1.2fr 24px}
  .sup-thead span:nth-child(2),.sup-c-prod,.sup-thead span:nth-child(3),.sup-c-hs{display:none}
  .sup-form{grid-template-columns:1fr}
}
/* ============================================================
   SUPPLIER PROFILE (full-page, sub-nav + stats + charts)
   ============================================================ */
.sup-prof{position:fixed;inset:0;background:var(--bg);z-index:1000;overflow-y:auto;animation:supFade .16s ease}
.sp-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-sm)}
.sp-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:600;font-size:12.5px;border-radius:9px;padding:7px 12px;cursor:pointer;font-family:var(--th)}
.sp-back:hover{background:var(--surface-2)}
.sp-title{font-size:14.5px;color:var(--ink-2)}
.sp-title b{color:var(--ink);font-weight:700}
.sp-badge{font-size:11px;font-weight:700;color:#2E7D32;background:#e3f3e6;border-radius:7px;padding:3px 9px}
.sp-badge.warn{color:#B45309;background:#FEF3C7}
.sp-actions{margin-left:auto;display:flex;gap:8px}

.sp-grid{display:flex;gap:16px;padding:18px 20px;align-items:flex-start}
.sp-nav{width:210px;flex-shrink:0;position:sticky;top:74px;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:var(--sh-sm)}
.sp-navitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;color:var(--ink-2);font-size:12.5px;font-weight:600;padding:9px 10px;border-radius:8px;cursor:pointer;font-family:var(--th);transition:.12s}
.sp-navitem svg{color:var(--ink-3)}
.sp-navitem:hover{background:var(--surface-2);color:var(--ink)}
.sp-navitem.on{background:var(--primary-soft);color:var(--primary-d)}
.sp-navitem.on svg{color:var(--primary)}
.sp-navdot{width:7px;height:7px;border-radius:50%;background:var(--line);flex-shrink:0}
.sp-navitem.on .sp-navdot{background:var(--primary)}
.sp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.sp-rail{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}

.sp-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh-sm)}
.sp-card-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px}
.sp-card-h .th-sub{font-weight:400;font-size:11px;color:var(--ink-3);margin-left:4px}

/* summary card */
.sp-sumcard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-sm)}
.sp-sum-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.sp-sum-id{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-sum-id b{font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sum-id .th{font-size:12px;color:var(--ink-3)}
.sp-approved{font-size:12px;font-weight:700;color:var(--primary-d)}
.sp-sum-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 0}
.sp-sum-meta div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-sum-meta .th{font-size:10.5px;color:var(--ink-3)}
.sp-sum-meta b{font-size:12.5px;color:var(--ink);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-complete{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line-2);padding-top:12px}
.sp-step{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px}
.sp-step svg{color:var(--ink-3)}
.sp-step.done{color:#2E7D32;background:#e3f3e6;border-color:#bfe3c6}
.sp-step.done svg{color:#2E7D32}

/* stat circles */
.sp-stats{display:flex;flex-wrap:wrap;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh-sm);justify-content:space-between}
.sp-stat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:76px;flex:1}
.sp-statn{width:52px;height:52px;border-radius:50%;border:2px solid var(--primary);color:var(--primary-d);display:grid;place-items:center;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.sp-statn.warn{border-color:#EAB308;color:#B45309}
.sp-statl{font-size:10.5px;color:var(--ink-2);text-align:center}

.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-contact{font-size:12.5px;color:var(--ink-2);line-height:1.6;min-height:40px}

/* donut + mini bars */
.sp-donut{display:flex;align-items:center;gap:14px}
.sp-donut-n{font-size:20px;font-weight:800;fill:var(--ink);font-family:var(--en)}
.sp-donut-l{font-size:9px;fill:var(--ink-3);font-family:var(--th)}
.sp-donut-legend{display:flex;flex-direction:column;gap:5px;flex:1}
.sp-donut-legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.sp-donut-legend i{width:9px;height:9px;border-radius:3px}
.sp-donut-legend b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-minibars{display:flex;flex-direction:column;gap:8px}
.sp-mb-row{display:grid;grid-template-columns:38px 1fr 24px;align-items:center;gap:8px}
.sp-mb-l{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-mb-track{height:8px;background:var(--line-2);border-radius:5px;overflow:hidden}
.sp-mb-fill{display:block;height:100%;border-radius:5px}
.sp-mb-n{font-size:11.5px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

/* shipments list */
.sp-shiplist{display:flex;flex-direction:column;gap:6px}
.sp-shipitem{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;flex-wrap:wrap}
.sp-shipitem b{font-size:12.5px;color:var(--ink)}
.sp-ship-stage{font-size:11.5px;color:var(--ink-2);flex:1}

.sp-savebar{padding:10px 20px 22px;text-align:right}
.sp-savenote{font-size:11.5px;color:var(--ink-3)}

@media (max-width:1000px){
  .sp-grid{flex-direction:column}
  .sp-nav{width:100%;position:static;flex-direction:row;flex-wrap:wrap}
  .sp-rail{width:100%}
  .sp-sum-meta{grid-template-columns:repeat(2,1fr)}
  .sp-two{grid-template-columns:1fr}
}