/* ============================================================
   monitor-grid.css  ·  Grid View — ธีมสว่าง สไตล์ iOS
   เพิ่มเป็น <link> ต่อจาก monitor-views.css
   ทุกคลาสขึ้นต้น gv- (ไม่ชนหน้าเดิม) · ใช้ token เดิม: --ink --line --surface --primary --th --r --sh-sm
   ============================================================ */

.gv-wrap{
  --gv-mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --gv-ok:#2E7D32;   --gv-ok-bg:#eaf7ee;
  --gv-att:#8A6D00;  --gv-att-bg:#fbf4d8;
  --gv-urg:#C2410C;  --gv-urg-bg:#fceadd;
  --gv-ovd:#C62828;  --gv-ovd-bg:#fce8e8;
  --gv-pre:#6d28d9;  --gv-pre-bg:#f1ecfe;
}

/* ---------- KPI strip (dashboard ย่อ) ---------- */
.gv-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:13px}
.gv-kpi{display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;box-shadow:var(--sh-sm);cursor:pointer;transition:.12s}
.gv-kpi:hover{border-color:#d7dce0}
.gv-kpi.on{box-shadow:inset 0 0 0 1.5px var(--primary);border-color:var(--primary)}
.gv-kpi-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--line-2);color:var(--ink-2);flex:none}
.gv-kpi-n{font-size:20px;font-weight:780;letter-spacing:-.5px;color:var(--ink);line-height:1}
.gv-kpi-l{display:flex;flex-direction:column;font-size:11.5px;font-weight:650;color:var(--ink-2);line-height:1.25}
.gv-kpi-l i{font-style:normal;font-size:10px;color:var(--ink-3);font-family:var(--th)}
.gv-kpi.t-ok   .gv-kpi-ic{background:var(--gv-ok-bg);color:var(--gv-ok)}
.gv-kpi.t-att  .gv-kpi-ic{background:var(--gv-att-bg);color:var(--gv-att)}
.gv-kpi.t-urg  .gv-kpi-ic{background:var(--gv-urg-bg);color:var(--gv-urg)}
.gv-kpi.t-ovd  .gv-kpi-ic{background:var(--gv-ovd-bg);color:var(--gv-ovd)}
.gv-kpi.t-pre  .gv-kpi-ic{background:var(--gv-pre-bg);color:var(--gv-pre)}
.gv-kpi.t-ink  .gv-kpi-ic{background:var(--primary-soft);color:var(--primary-d)}

/* ---------- toolbar ---------- */
.gv-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;box-shadow:var(--sh-sm);margin-bottom:13px}
.gv-search{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:0 11px;height:36px;color:var(--ink-3)}
.gv-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)}
.gv-search input{flex:1;border:0;background:transparent;font-size:13px;color:var(--ink);outline:none;font-family:var(--th)}
.gv-search button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;display:flex;padding:2px}
.gv-count{font-size:12px;font-weight:700;color:var(--primary-d);background:var(--primary-soft);padding:4px 10px;border-radius:999px;white-space:nowrap}
.gv-clear{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:11.5px;font-weight:600;border-radius:999px;padding:4px 10px;cursor:pointer;font-family:var(--th)}
.gv-clear:hover{background:var(--line-2)}
.gv-sp{flex:1}
.gv-groupsel,.gv-seg{display:inline-flex;align-items:center}
.gv-groupsel{gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:0 9px;height:34px;color:var(--ink-3)}
.gv-groupsel select{border:0;background:transparent;font-size:12.5px;font-weight:600;color:var(--ink);outline:none;cursor:pointer;font-family:var(--th);-webkit-appearance:none;appearance:none;padding-right:2px}
.gv-seg{gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.gv-seg button{border:0;background:transparent;padding:5px 13px;border-radius:7px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:var(--th)}
.gv-seg button.on{background:var(--surface);color:var(--primary-d);box-shadow:var(--sh-sm)}
.gv-colchips{display:inline-flex;gap:6px;flex-wrap:wrap}
.gv-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:650;color:var(--ink-2);cursor:pointer;font-family:var(--th)}
.gv-chip .gv-sw{width:8px;height:8px;border-radius:3px;background:var(--ink-3)}
.gv-chip.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.gv-chip.on .gv-sw{background:var(--primary)}

/* ---------- filter dropdown row (ใช้ .mchip เดิมจาก monitor.css) ---------- */
.gv-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-3px 0 13px}
.gv-daterange{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:5px 9px;height:34px}
.gv-dr-l{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3)}
.gv-dr-field{border:0;background:var(--surface-2);border-radius:6px;font-size:11.5px;font-weight:700;color:var(--primary-d);
  outline:none;cursor:pointer;font-family:var(--th);padding:3px 4px;-webkit-appearance:none;appearance:none}
.gv-daterange input[type=date]{border:0;background:transparent;font-size:12px;color:var(--ink);outline:none;font-family:var(--en);cursor:pointer;width:110px}
.gv-dr-sep{color:var(--ink-3);font-size:11px}
.gv-daterange button{border:0;background:var(--line-2);color:var(--ink-2);border-radius:6px;width:20px;height:20px;display:grid;place-items:center;cursor:pointer}
.gv-daterange button:hover{background:#e2e7ea}

/* ---------- table shell (iOS: rounded, soft, hairline) ---------- */
.gv-scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm)}
.gv-table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:12.5px}
.gv-table th,.gv-table td{white-space:nowrap;text-align:left;border-bottom:1px solid var(--line-2)}

/* two-tier sticky header */
.gv-table thead .gv-grp th{position:sticky;top:0;z-index:6;background:var(--surface-2);height:30px;
  padding:0 13px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line-2)}
.gv-table thead .gv-grp th .th{font-weight:500;color:#aeb7c0;font-size:9.5px;text-transform:none;margin-left:5px}
.gv-table thead .gv-grp th.g-ship{background:var(--primary-soft);color:var(--primary-d)}
.gv-table thead .gv-cols th{position:sticky;top:29px;z-index:5;background:var(--surface);
  padding:8px 13px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1.5px solid var(--line);border-left:1px solid var(--line-2)}

/* sticky first column (Owner · Shipper · PO#) */
.gv-table th.gv-id,.gv-table td.gv-id{position:sticky;left:0;min-width:248px;box-shadow:1px 0 0 var(--line)}
.gv-table thead .gv-grp th.gv-id{z-index:8}
.gv-table thead .gv-cols th.gv-id{z-index:7}
.gv-table td.gv-id{z-index:3;background:var(--surface);border-left:3px solid var(--line)}
.gv-table tbody tr:nth-child(even) td.gv-id{background:#fcfdfd}

/* body cells */
.gv-table tbody td{padding:9px 13px;border-left:1px solid var(--line-2);vertical-align:top}
.gv-row{cursor:pointer;transition:background .1s}
.gv-row:hover td{background:#f1f8f8 !important}

/* status accent + tint on sticky cell */
.gv-row td.gv-id{border-left-color:var(--acc)}
.gv-row.s-OVERDUE td.gv-id{background:var(--gv-ovd-bg)}
.gv-row.s-OVERDUE:nth-child(even) td.gv-id{background:#fbe2e2}

/* identity cell: owner (bold) -> shipper -> PO# */
.gv-owner{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:750;color:var(--ink);font-family:var(--th)}
.gv-sup{display:block;font-size:11.5px;color:var(--ink-2);margin-top:3px;font-family:var(--th);max-width:224px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-po{display:block;font-family:var(--gv-mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;max-width:224px;overflow:hidden;text-overflow:ellipsis}
.gv-ref-s{font-style:normal;color:#b7bfc7}
.gv-muted{color:var(--ink-3)}

.gv-date{font-family:var(--gv-mono);font-size:11.5px;color:var(--ink-2)}
.gv-date.late{color:var(--gv-ovd);font-weight:700}
.gv-date.today{color:var(--gv-att);font-weight:700}
.gv-date.ok{color:var(--gv-ok);font-weight:700}

.gv-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:7px;background:var(--line-2);color:var(--ink-2)}
.gv-pill.mode{background:#eef2ff;color:#4338ca}
.gv-pill.fwd{background:var(--primary-soft);color:var(--primary-d)}

/* docs dots */
.gv-docs{display:flex;gap:4px;align-items:center}
.gv-dc{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;font-size:9px;font-weight:800;
  background:var(--line-2);color:#aab2bb;border:1px solid var(--line);position:relative}
.gv-dc.on{background:var(--gv-ok-bg);color:var(--gv-ok);border-color:#bfe3c7}
.gv-dc.lock{background:#f4f5f7;color:#c9d0d8;border-style:dashed}
.gv-dc .gv-lk{position:absolute;right:-3px;top:-4px;font-size:8px;font-style:normal}
.gv-prog{margin-left:4px;font-family:var(--gv-mono);font-size:10px;font-weight:700;color:var(--ink-3)}
.gv-prog.full{color:var(--gv-ok)}

/* status chip (iOS pill) */
.gv-st{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.3px;
  padding:3px 9px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.gv-st i{width:7px;height:7px;border-radius:50%}

.gv-stage-pre{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--gv-pre-bg);color:var(--gv-pre);font-weight:800;font-size:11px}

.gv-pend{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:260px;font-size:11.5px;line-height:1.4;color:var(--ink);font-family:var(--th);white-space:normal}

/* group divider row */
.gv-grouprow td{position:sticky;left:0;background:var(--surface-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:8px 14px !important;font-size:12px;color:var(--ink);font-family:var(--th)}
.gv-grouprow b{color:var(--primary-d)}
.gv-gmeta{margin-left:10px;font-size:11px;color:var(--ink-3);font-weight:600}

.gv-empty{padding:56px 20px !important;text-align:center;color:var(--ink-3);border-left:0 !important}
.gv-empty div{margin-top:10px;font-family:var(--th)}

/* density (แน่น) */
.gv-wrap.compact .gv-table tbody td{padding:5px 13px}
.gv-wrap.compact .gv-sup{display:none}
.gv-wrap.compact .gv-pend{-webkit-line-clamp:1}

/* cargo columns (Qty / CBM) */
.gv-uom{font-style:normal;font-size:10px;color:var(--ink-3)}
.gv-cbm{font-family:var(--gv-mono);font-size:11.5px;color:var(--ink-2)}

/* drawer: ช่องจำนวน + หน่วย อยู่คู่กัน */
.ke-qty{display:flex;gap:7px}
.ke-qty input:first-child{max-width:90px}

/* show / hide column groups */
.gv-wrap.hide-pend  .col-pend,
.gv-wrap.hide-sched .col-sched,
.gv-wrap.hide-cargo .col-cargo,
.gv-wrap.hide-docs  .col-docs{display:none}

@media(max-width:860px){ .gv-kpis{grid-template-columns:repeat(3,1fr)} }
@media(max-width:720px){
  .gv-table th.gv-id,.gv-table td.gv-id{min-width:190px}
  .gv-colchips{width:100%}
}