/* ============================================================
   CARGO OVERVIEW (super row cards) - tailor-made light theme
   Source: NEWUPDATES/ship-supplies-dashboard (2).html <style>
   Copied VERBATIM, then page-scoped under .cargo-board-root so the
   mockup's generic class names cannot collide with the app's global
   CSS. Surface white backgrounds routed through var(--card-bg) (==#fff
   in light) so the dark theme at the bottom is a clean token flip.
   DO NOT hand-edit the scoped light rules - re-run scope_css.py.
   ============================================================ */

/* page reset - this dashboard loads ONLY the mockup CSS (no app globals),
   so the whole <body> is wrapped in .cargo-board-root and the page bg +
   box-sizing live here. Keeps the look 100% identical to the mockup. */
html,body{margin:0;padding:0}
body{background:#f3f6f9;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}
[data-theme="dark"] body{background:#0d141b}
.cargo-board-root{min-height:100vh}


  .cargo-board-root{
    --nav-grad-a:#1a4d6e; --nav-grad-b:#2d6b8f;
    --ink:#1f3a4d; --ink-soft:#5a7689;
    --accent:#2d7dbd; --accent-deep:#1a4d6e;
    --green-pill-bg:#e3f4ea; --green-pill-ink:#1f7a4d;
    --instock-bg:#34c759; --instock-ink:#fff;
    --expected-bg:#dcebfb; --expected-ink:#2d7dbd;
    --line:#e2e8ee; --line-soft:#eef2f6;
    --card-bg:#ffffff; --page-bg:#f3f6f9;
    --field-bg:#f8fafc; --field-line:#d8e1e9;
    --ata-bg:#e8edf1;
    --shadow:0 1px 3px rgba(26,77,110,.06),0 6px 18px rgba(26,77,110,.05);
    --shadow-hover:0 4px 10px rgba(26,77,110,.12),0 14px 36px rgba(26,77,110,.12);
    --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
    --sans:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  }
  .cargo-board-root,.cargo-board-root *{box-sizing:border-box;margin:0;padding:0}
  .cargo-board-root{font-family:var(--sans);background:var(--page-bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;}

  /* ---------- TOP NAV ---------- */
  .cargo-board-root .topnav{
    display:flex;align-items:center;gap:6px;
    background:linear-gradient(180deg,var(--nav-grad-b),var(--nav-grad-a));
    padding:0 14px;height:42px;color:#fff;
    box-shadow:0 2px 8px rgba(26,77,110,.25);position:relative;z-index:30;
  }
  .cargo-board-root .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;
    letter-spacing:.2px;margin-right:14px;}
  .cargo-board-root .brand .brand-logo{width:26px;height:26px;display:grid;place-items:center;
    border-radius:7px;background:linear-gradient(135deg,#5db0e0,#2d7dbd)}
  .cargo-board-root .brand .brand-logo svg{width:22px;height:22px}
  .cargo-board-root .brand-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);
    font-size:9.5px;font-weight:700;letter-spacing:.3px;color:#eaf4fb;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
    border-radius:999px;padding:2px 9px;margin-right:8px}
  .cargo-board-root .brand-chip b{font-weight:800;color:#fff}
  .cargo-board-root .nav-item{display:flex;align-items:center;gap:6px;font-size:12.5px;
    padding:7px 11px;border-radius:7px;color:#cfe2ee;cursor:pointer;
    font-family:var(--mono);transition:.15s;white-space:nowrap;}
  .cargo-board-root .nav-item .ic{font-size:13px;display:inline-flex}
  .cargo-board-root .nav-item .ic svg{width:15px;height:15px}
  .cargo-board-root .nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
  .cargo-board-root .nav-item.active{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
  .cargo-board-root .nav-spacer{flex:1}
  .cargo-board-root .live{display:flex;align-items:center;gap:5px;font-family:var(--mono);
    font-size:10.5px;color:#bfe6cf;letter-spacing:1px;margin-right:8px}
  .cargo-board-root .live .dot{width:7px;height:7px;border-radius:50%;background:#34c759;
    box-shadow:0 0 0 0 rgba(52,199,89,.6);animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.6)}
    70%{box-shadow:0 0 0 6px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
  .cargo-board-root .swatch{width:18px;height:18px;border-radius:50%;margin-left:4px}
  .cargo-board-root .s-pink{background:#ec4899}.cargo-board-root .s-yellow{background:#facc15}
  .cargo-board-root .user{display:flex;align-items:center;gap:8px;margin-left:14px}
  .cargo-board-root .user .av{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.18);
    display:grid;place-items:center;font-size:10px;font-weight:700;font-family:var(--mono)}
  .cargo-board-root .user .meta{line-height:1.15}
  .cargo-board-root .user .meta b{font-size:11px;font-family:var(--mono)}
  .cargo-board-root .user .meta span{font-size:8.5px;color:#a9cae0;letter-spacing:1px;display:block}

  /* ---------- SUBNAV ---------- */
  .cargo-board-root .freeze{position:sticky;top:0;z-index:25;background:var(--card-bg);box-shadow:0 2px 8px rgba(20,45,65,.06)}
  .cargo-board-root .subnav{display:flex;align-items:center;gap:8px;padding:10px 16px;flex-wrap:wrap;
    background:var(--card-bg);border-bottom:1px solid var(--line)}
  /* stats grid (frozen header) */
  .cargo-board-root .stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
    border-bottom:1px solid var(--line)}
  .cargo-board-root .stat-cell{background:var(--card-bg);padding:9px 14px;display:flex;flex-direction:column;gap:2px}
  .cargo-board-root .stat-val{font-size:19px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--mono)}
  .cargo-board-root .stat-lbl{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft)}
  .cargo-board-root .stat-cell.s-stock .stat-val{color:#1f7a4d}
  .cargo-board-root .stat-cell.s-exp .stat-val{color:#c2691b}
  .cargo-board-root .stat-cell.s-today .stat-val{color:var(--accent)}
  @media(max-width:900px){ .cargo-board-root .stats-grid{grid-template-columns:repeat(3,1fr)} }
  /* filter cards */
  .cargo-board-root .filter-cards{display:flex;gap:8px}
  .cargo-board-root .fcard{display:flex;flex-direction:column;gap:1px;min-width:74px;padding:6px 14px;
    border:1px solid var(--field-line);border-radius:10px;background:var(--card-bg);cursor:pointer;
    transition:.15s}
  .cargo-board-root .fcard:hover{border-color:var(--accent)}
  .cargo-board-root .fcard.on{background:#eef6fc;border-color:var(--accent)}
  .cargo-board-root .fcard .fc-n{font-size:17px;font-weight:800;color:var(--ink);line-height:1}
  .cargo-board-root .fcard.on .fc-n{color:var(--accent)}
  .cargo-board-root .fcard .fc-l{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    color:var(--ink-soft)}
  .cargo-board-root .search{flex:1;min-width:220px;max-width:420px;font-size:12.5px;font-family:var(--sans);
    padding:8px 13px;border:1px solid var(--field-line);border-radius:9px;outline:none;
    background:var(--field-bg);transition:.15s}
  .cargo-board-root .search:focus{border-color:var(--accent);background:var(--card-bg)}
  .cargo-board-root .no-results{text-align:center;color:var(--ink-soft);font-size:13px;padding:40px;
    border:1.5px dashed var(--field-line);border-radius:12px}
  .cargo-board-root .tab{font-size:12px;padding:6px 12px;border:1px solid var(--field-line);
    border-radius:8px;background:var(--card-bg);color:var(--ink-soft);cursor:pointer;
    display:flex;align-items:center;gap:6px;transition:.15s}
  .cargo-board-root .tab:hover{border-color:var(--accent);color:var(--accent)}
  .cargo-board-root .tab.on{background:#eef6fc;border-color:var(--accent);color:var(--accent);font-weight:600}
  .cargo-board-root .subnav .grow{flex:1}
  .cargo-board-root .rows-count{font-family:var(--mono);font-size:11px;color:var(--ink-soft);
    background:var(--field-bg);border:1px solid var(--line);padding:5px 10px;border-radius:7px}
  .cargo-board-root .btn-save{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    padding:7px 14px;border:1px solid var(--field-line);border-radius:8px;background:var(--card-bg);
    color:var(--ink);cursor:pointer;transition:.15s}
  .cargo-board-root .btn-save:hover{border-color:var(--accent);color:var(--accent)}
  .cargo-board-root .btn-jarvis{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    padding:7px 15px;border-radius:8px;border:1px solid var(--field-line);background:var(--card-bg);
    color:var(--ink);cursor:pointer}
  .cargo-board-root .btn-jarvis:hover{border-color:#a855f7;color:#a855f7}
  .cargo-board-root .btn-newdos{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    padding:7px 15px;border-radius:8px;border:none;background:var(--accent);color:#fff;
    cursor:pointer;transition:.15s}
  .cargo-board-root .btn-newdos:hover{background:var(--accent-deep)}
  .cargo-board-root .sel-info{font-size:11.5px;font-weight:600;color:#7a5cff;background:#efeaff;
    border:1px solid #ddd2ff;padding:5px 11px;border-radius:999px;margin-left:10px;display:none}
  .cargo-board-root .sel-info.show{display:inline-block}

  /* ---------- BOARD ---------- */
  .cargo-board-root .board{max-width:1560px;margin:14px auto;padding:0 22px}
  /* compact Excel tool button (icon only) */
  .cargo-board-root .tool-excel{display:inline-flex;align-items:center;justify-content:center;
    padding:4px;border-radius:8px;border:1px solid #c9e8d6;background:var(--card-bg);cursor:pointer;
    transition:.15s;align-self:center}
  .cargo-board-root .tool-excel:hover{background:var(--green-pill-bg);border-color:#34c759}
  /* rows-per-view dropdown */
  .cargo-board-root .rows-per{display:inline-flex;align-items:center;gap:7px;align-self:center;margin-right:4px}
  .cargo-board-root .rows-per-lbl{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft)}
  .cargo-board-root .rows-per select{font-size:12px;font-weight:700;color:var(--ink);background:var(--card-bg);
    border:1px solid var(--field-line);border-radius:8px;padding:6px 9px;cursor:pointer}
  .cargo-board-root .rows-per select:focus{outline:none;border-color:var(--accent)}
  .cargo-board-root .xls-ic{width:22px;height:22px;border-radius:5px;background:#1f7a4d;color:#fff;
    display:grid;place-items:center;font-size:12px;font-weight:800}

  /* toast */
  .cargo-board-root .toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);z-index:400;
    background:#1f3a4d;color:#fff;font-size:13px;font-weight:600;padding:11px 18px;
    border-radius:10px;box-shadow:0 10px 30px rgba(20,45,65,.32);opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:9px}
  .cargo-board-root .toast.show{opacity:1;transform:translate(-50%,0)}
  .cargo-board-root .toast.ok{background:#1f7a4d}
  .cargo-board-root .toast .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;border-radius:50%;animation:tspin .7s linear infinite}
  @keyframes tspin{to{transform:rotate(360deg)}}
  .cargo-board-root .panel{background:linear-gradient(180deg,#fbfdfe,#f5f8fb);
    border:1px solid var(--line);border-radius:14px;padding:10px;
    box-shadow:var(--shadow)}

  .cargo-board-root .row{
    display:grid;
    grid-template-columns:24px 248px 212px 190px 224px 134px 116px 1fr;
    align-items:center;gap:14px;
    background:var(--card-bg);border:1px solid var(--line);border-radius:9px;
    padding:5px 14px 5px 6px;margin-bottom:5px;position:relative;
    box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,border-color .16s;
    overflow:hidden;
  }
  .cargo-board-root .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--accent),var(--accent-deep))}
  .cargo-board-root .row.expanded::before{background:linear-gradient(180deg,#34c759,#1f7a4d)}

  /* ribbon / chevron toggle */
  .cargo-board-root .ribbon{cursor:pointer;display:grid;place-items:center;width:28px;height:100%;
    color:var(--accent);transition:.2s}
  .cargo-board-root .ribbon svg{width:16px;height:16px;transition:transform .25s}
  .cargo-board-root .row.expanded .ribbon svg{transform:rotate(90deg);color:#1f7a4d}
  .cargo-board-root .row:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover);border-color:#cfe0ec;cursor:pointer}

  /* ID block: [status pill / mode]  [DOS pill / ref] side by side */
  .cargo-board-root .cell-id{display:flex;align-items:flex-start;gap:14px}
  .cargo-board-root .id-sub{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
  .cargo-board-root .id-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .cargo-board-root .mode-line{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
  .cargo-board-root .mode{font-size:11px;font-weight:600;color:var(--ink);font-family:var(--sans);
    padding-left:2px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cargo-board-root .mode-carrier{font-size:11px;font-weight:700;color:var(--accent);padding-left:2px}

  .cargo-board-root .cm-desc{font-size:11.5px;color:var(--ink-soft);line-height:1.3;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* selected rows (Ctrl/Cmd + click) */
  .cargo-board-root .row.selected{background:#eef6fc;border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent) inset, var(--shadow)}
  .cargo-board-root .row.selected::after{content:"\2713";position:absolute;top:7px;right:10px;width:18px;height:18px;
    background:var(--accent);color:#fff;border-radius:50%;font-size:11px;font-weight:700;
    display:grid;place-items:center;z-index:3}

  /* comment / flag bookmark chip over the ribbon */
  .cargo-board-root .flag-chip{position:absolute;top:-4px;left:0;z-index:4;width:22px;height:29px;
    display:grid;place-items:center;color:#fff;cursor:default;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
  .cargo-board-root .flag-chip svg{width:22px;height:29px}
  .cargo-board-root .flag-chip.flag{color:#7a5cff}.cargo-board-root .flag-chip.low{color:#2d7dbd}
  .cargo-board-root .flag-chip.medium{color:#f59e0b}.cargo-board-root .flag-chip.high{color:#ff3b30}

  /* finalized row */
  .cargo-board-root .row.finalized{opacity:.78}
  .cargo-board-root .row.finalized .fin-tag{display:inline-flex}
  .cargo-board-root .fin-tag{display:none;align-items:center;gap:4px;font-size:8.5px;font-weight:700;
    letter-spacing:.3px;text-transform:uppercase;color:var(--green-pill-ink);
    background:var(--green-pill-bg);border:1px solid #c9e8d6;padding:2px 8px;border-radius:999px}

  /* right-click context menu */
  .cargo-board-root .ctx{position:fixed;z-index:300;background:var(--card-bg);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 12px 36px rgba(20,45,65,.22);padding:5px;min-width:180px;display:none}
  .cargo-board-root .ctx.show{display:block}
  .cargo-board-root .ctx-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;
    font-size:12.5px;color:var(--ink);cursor:pointer}
  .cargo-board-root .ctx-item:hover{background:var(--field-bg)}
  .cargo-board-root .ctx-item .ic{font-size:13px;width:16px;text-align:center;color:var(--accent)}
  .cargo-board-root .ctx-item .ic svg{width:15px;height:15px;vertical-align:middle}
  .cargo-board-root .ctx-hint{margin-left:auto;font-size:9.5px;font-weight:600;color:var(--ink-soft);
    background:var(--field-bg);border:1px solid var(--line-soft);padding:1px 7px;border-radius:999px}
  .cargo-board-root .ctx-sep{height:1px;background:var(--line-soft);margin:4px 6px}

  /* comment popover */
  .cargo-board-root .cmt-pop{position:fixed;z-index:320;background:var(--card-bg);border:1px solid var(--line);
    border-radius:12px;box-shadow:0 16px 44px rgba(20,45,65,.26);padding:14px;width:260px;display:none}
  .cargo-board-root .cmt-pop.show{display:block}
  .cargo-board-root .cmt-pop h4{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--accent);margin-bottom:9px}
  .cargo-board-root .sev-row{display:flex;gap:6px;margin-bottom:10px}
  .cargo-board-root .sev{flex:1;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
    padding:6px 0;border-radius:7px;border:1px solid var(--field-line);background:var(--card-bg);
    cursor:pointer;text-align:center;color:var(--ink-soft)}
  .cargo-board-root .sev.on[data-sev="flag"]{background:#efeaff;border-color:#ddd2ff;color:#7a5cff}
  .cargo-board-root .sev.on[data-sev="low"]{background:#e3eefb;border-color:#bcd9f5;color:#2d7dbd}
  .cargo-board-root .sev.on[data-sev="medium"]{background:#fef3cd;border-color:#f6e3a0;color:#946200}
  .cargo-board-root .sev.on[data-sev="high"]{background:#ffe3e0;border-color:#ffc9c4;color:#c0271c}
  .cargo-board-root .cmt-pop textarea{width:100%;border:1px solid var(--field-line);border-radius:8px;
    padding:8px 10px;font-size:12px;font-family:var(--sans);resize:vertical;min-height:56px;outline:none}
  .cargo-board-root .cmt-pop textarea:focus{border-color:var(--accent)}
  .cargo-board-root .cmt-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
  .cargo-board-root .cmt-actions button{font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:7px;cursor:pointer}
  .cargo-board-root .cmt-cancel{background:var(--card-bg);border:1px solid var(--field-line);color:var(--ink-soft)}
  .cargo-board-root .cmt-save{background:var(--accent);border:none;color:#fff}

  /* comment thread popover */
  .cargo-board-root .thread-pop{position:fixed;z-index:330;background:var(--card-bg);border:1px solid var(--line);
    border-radius:12px;box-shadow:0 16px 44px rgba(20,45,65,.26);padding:13px;width:280px;
    display:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
  .cargo-board-root .thread-pop.show{opacity:1;transform:translateY(0)}
  .cargo-board-root .th-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .cargo-board-root .th-sev{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    padding:3px 9px;border-radius:999px}
  .cargo-board-root .th-sev.flag{background:#efeaff;color:#7a5cff}.cargo-board-root .th-sev.low{background:#e3eefb;color:#2d7dbd}
  .cargo-board-root .th-sev.medium{background:#fef3cd;color:#946200}.cargo-board-root .th-sev.high{background:#ffe3e0;color:#c0271c}
  .cargo-board-root .th-fin{font-size:9.5px;font-weight:700;color:var(--green-pill-ink);
    background:var(--green-pill-bg);border:1px solid #c9e8d6;padding:3px 8px;border-radius:999px}
  .cargo-board-root .th-list{display:flex;flex-direction:column;gap:8px;max-height:180px;overflow:auto;margin-bottom:9px}
  .cargo-board-root .th-msg{background:var(--field-bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
  .cargo-board-root .th-msg-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .cargo-board-root .th-msg-top b{font-size:11.5px;color:var(--ink)}
  .cargo-board-root .th-time{font-size:9.5px;color:var(--ink-soft)}
  .cargo-board-root .th-msg p{font-size:12px;color:#3c5466;margin-top:3px;line-height:1.4}
  .cargo-board-root .mention{color:var(--accent);font-weight:700;background:#eef6fc;border-radius:4px;padding:0 3px}
  .cargo-board-root .th-task{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;
    background:#efeaff;border:1px solid #ddd2ff;border-radius:7px;padding:5px 8px}
  .cargo-board-root .th-task.done{background:var(--green-pill-bg);border-color:#c9e8d6}
  .cargo-board-root .th-task-lbl{font-size:10.5px;font-weight:700;color:#7a5cff}
  .cargo-board-root .th-task.done .th-task-lbl{color:var(--green-pill-ink)}
  .cargo-board-root .th-done{font-size:10px;font-weight:700;border:1px solid #ddd2ff;background:var(--card-bg);color:#7a5cff;
    padding:3px 9px;border-radius:999px;cursor:pointer;white-space:nowrap}
  .cargo-board-root .th-task.done .th-done{border-color:#c9e8d6;color:var(--green-pill-ink);background:var(--green-pill-bg)}
  .cargo-board-root .at-pop{position:fixed;z-index:360;background:var(--card-bg);border:1px solid var(--line);
    border-radius:10px;box-shadow:0 12px 32px rgba(20,45,65,.22);padding:5px;max-width:280px;
    max-height:220px;overflow:auto}
  .cargo-board-root .at-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer}
  .cargo-board-root .at-item:hover{background:var(--field-bg)}
  .cargo-board-root .at-av{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
    display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
  .cargo-board-root .at-name{font-size:12.5px;font-weight:600;color:var(--ink);flex:1;white-space:nowrap}
  .cargo-board-root .at-h{font-size:10.5px;color:var(--ink-soft);font-family:var(--mono)}
  .cargo-board-root .th-reply{width:100%;border:1px solid var(--field-line);border-radius:8px;padding:7px 9px;
    font-size:12px;font-family:var(--sans);resize:vertical;min-height:42px;outline:none}
  .cargo-board-root .th-reply:focus{border-color:var(--accent)}
  .cargo-board-root .th-actions{display:flex;gap:7px;margin-top:9px}
  .cargo-board-root .th-btn{flex:1;font-size:11px;font-weight:600;padding:6px 8px;border-radius:7px;cursor:pointer;
    border:1px solid var(--field-line);background:var(--card-bg);color:var(--ink-soft)}
  .cargo-board-root .th-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .cargo-board-root .th-btn.danger:hover{border-color:#ff3b30;color:#ff3b30}
  .cargo-board-root .flag-chip.finalized{opacity:.55}

  /* multi-edit dialog */
  .cargo-board-root .medit-overlay{position:fixed;inset:0;z-index:380;background:rgba(20,40,58,.42);
    display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
  .cargo-board-root .medit-overlay.show{display:flex}
  .cargo-board-root .medit{width:724px;max-width:96vw;background:var(--card-bg);border-radius:14px;
    box-shadow:0 24px 70px rgba(20,45,65,.34);padding:20px 22px;animation:meditIn .18s ease}
  @keyframes meditIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .cargo-board-root .medit-head{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
  .cargo-board-root .medit-count{font-size:11px;font-weight:700;color:var(--accent);background:var(--expected-bg);
    border:1px solid #bcd9f5;padding:2px 9px;border-radius:999px}
  .cargo-board-root .medit-x{margin-left:auto;background:transparent;border:none;font-size:15px;color:var(--ink-soft);
    cursor:pointer;line-height:1;padding:3px 6px;border-radius:6px}
  .cargo-board-root .medit-x:hover{background:var(--field-bg);color:var(--ink)}
  .cargo-board-root .medit-note{font-size:11.5px;color:var(--ink-soft);margin:8px 0 14px;line-height:1.45}
  /* selected DOS feedback chips */
  .cargo-board-root .medit-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;max-height:78px;overflow:auto}
  .cargo-board-root .medit-chip{font-size:10.5px;font-weight:700;font-family:var(--mono);color:var(--accent);
    background:var(--expected-bg);border:1px solid #bcd9f5;padding:3px 9px;border-radius:999px}
  .cargo-board-root .medit-chip .mc-ref{color:var(--ink-soft);font-weight:600;margin-left:5px}
  /* tabs */
  .cargo-board-root .medit-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:12px 0 0}
  .cargo-board-root .me-tab{font-size:12px;font-weight:700;color:var(--ink-soft);background:transparent;border:none;
    padding:9px 13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .cargo-board-root .me-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
  .cargo-board-root .me-pane{display:none;padding-top:14px}
  .cargo-board-root .me-pane.active{display:block}
  /* segmented control */
  .cargo-board-root .seg{display:inline-flex;border:1px solid var(--field-line);border-radius:8px;overflow:hidden;background:var(--field-bg)}
  .cargo-board-root .seg-btn{font-size:11.5px;font-weight:700;color:var(--ink-soft);background:transparent;border:none;
    padding:7px 13px;cursor:pointer;border-right:1px solid var(--field-line)}
  .cargo-board-root .seg-btn:last-child{border-right:none}
  .cargo-board-root .seg-btn.active{background:var(--accent);color:#fff}
  .cargo-board-root .seg-btn.ok.active{background:#1f7a4d}
  .cargo-board-root .seg-btn.na.active{background:#5a7689}
  .cargo-board-root .seg-btn.blk.active{background:#c0271c}
  .cargo-board-root .seg-btn.smp.active{background:#b07400}
  /* cargo-compliance */
  .cargo-board-root .cc-label{font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:8px}
  /* inbound active-MRN table */
  .cargo-board-root .cc-table{border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .cargo-board-root .cc-trow{display:grid;grid-template-columns:28px 1fr 132px 1.2fr 92px 104px;align-items:center;
    gap:8px;padding:8px 11px;font-size:11.5px;border-top:1px solid var(--line-soft)}
  .cargo-board-root .cc-valid{color:var(--ink-soft)}
  .cargo-board-root .cc-out-tbl2 .cc-trow{grid-template-columns:1fr 1.1fr 1.1fr 1fr 1fr 76px}
  .cargo-board-root .cc-out-tbl2 .cc-seal-cell{font-size:11px;color:var(--ink)}
  .cargo-board-root .cc-out-tbl2 .cc-seal-cell b{color:#1f7a4d;font-weight:800}
  .cargo-board-root .cc-out-tbl2 .seal-no{color:#c0271c;font-weight:700}
  .cargo-board-root .cc-type-sel{font-size:11px;font-weight:600;padding:4px 6px;border:1px solid var(--field-line);
    border-radius:6px;background:var(--card-bg);color:var(--ink);width:100%}
  .cargo-board-root .cc-docst{display:flex;align-items:center;gap:6px}
  .cargo-board-root .doc-dot{font-size:11px;font-weight:800;color:#c8ccd2;line-height:1}
  .cargo-board-root .doc-dot.ok{color:#1f7a4d}
  .cargo-board-root .sib-tbl .cc-trow{grid-template-columns:1.1fr 54px 1fr 1fr 1fr 80px 74px}
  .cargo-board-root .sib-row{cursor:pointer}
  .cargo-board-root .sib-row:hover{background:#f3f8fc}
  .cargo-board-root .sib-row.cur{background:#eef6ff;box-shadow:inset 3px 0 0 var(--accent)}
  .cargo-board-root .cc-trow:first-child{border-top:none}
  .cargo-board-root .cc-thead{background:var(--field-bg);font-size:8.5px;font-weight:800;letter-spacing:.4px;
    text-transform:uppercase;color:var(--ink-soft)}
  .cargo-board-root .cc-trow .mono{font-family:var(--mono);color:var(--accent);font-weight:700}
  .cargo-board-root .cc-trow .mval{font-family:var(--mono);color:var(--ink)}
  .cargo-board-root .cc-tp{font-size:9px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:999px;text-align:center}
  .cargo-board-root .cc-tp.bonded{background:#fff1e0;color:#c2691b;border:1px solid #f4cf9e}
  .cargo-board-root .cc-tp.f4c{background:var(--expected-bg);color:var(--expected-ink);border:1px solid #bcd9f5}
  .cargo-board-root .cc-st{font-size:9px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:999px;text-align:center}
  .cargo-board-root .cc-st.active{background:var(--green-pill-bg);color:var(--green-pill-ink);border:1px solid #c9e8d6}
  .cargo-board-root .cc-st.open{background:#fff7e0;color:#9a7400;border:1px solid #ecd99a}
  .cargo-board-root .cc-st.closed{background:#eef2f6;color:#5a7689;border:1px solid var(--line)}
  .cargo-board-root .cc-st.missing{background:#ffe3e0;color:#c0271c;border:1px solid #f4b4ad}
  .cargo-board-root .cc-st.warn-pill{background:#fff3d6;color:#9a7400;border:1px solid #ecc873}
  .cargo-board-root .cc-st.waiting{background:#fff3d6;color:#9a7400;border:1px solid #ecc873}
  .cargo-board-root .cc-st.na{background:transparent;color:var(--ink-soft);border:none}
  .cargo-board-root .cc-inv-input{font-size:12px;padding:5px 8px;border:1px solid var(--field-line);border-radius:6px;background:var(--card-bg)}
  .cargo-board-root .cc-inwrap{position:relative;display:block}
  .cargo-board-root .cc-mrn-in{width:100%;font-size:12px;padding:5px 8px;border:1px solid var(--field-line);
    border-radius:6px;background:var(--card-bg);color:var(--ink)}
  .cargo-board-root .cc-mrn-in.locked{background:var(--field-bg);color:var(--ink-soft);padding-right:48px}
  .cargo-board-root .cc-editchip{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:9px;
    font-weight:700;color:var(--accent);background:var(--expected-bg);border:1px solid #bcd9f5;
    border-radius:999px;padding:1px 7px;cursor:pointer}
  .cargo-board-root .cc-out-tbl .cc-trow{grid-template-columns:1fr 1fr 78px 1.4fr 84px}
  /* set / update MRN */
  .cargo-board-root .cc-setmrn{display:flex;gap:8px;margin-top:10px}
  .cargo-board-root .cc-setmrn input{flex:1;font-size:13px;padding:8px 10px;border:1px solid var(--field-line);border-radius:8px;background:var(--card-bg);color:var(--ink)}
  .cargo-board-root .cc-setmrn-btn{font-size:12px;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:8px;padding:8px 16px;cursor:pointer}
  /* add procedure */
  .cargo-board-root .cc-addproc{display:flex;gap:8px}
  .cargo-board-root .cc-addproc select{font-size:13px;font-weight:700;padding:8px 10px;border:1px solid var(--field-line);border-radius:8px;background:var(--card-bg);color:var(--ink)}
  .cargo-board-root .cc-addproc input{flex:1;font-size:13px;padding:8px 10px;border:1px solid var(--field-line);border-radius:8px;background:var(--card-bg);color:var(--ink)}
  .cargo-board-root .cc-addproc-btn{font-size:12px;font-weight:700;color:var(--accent);background:var(--card-bg);border:1px dashed #bcd9f5;border-radius:8px;padding:8px 14px;cursor:pointer}
  .cargo-board-root .cc-addproc .cc-date{flex:0 0 168px}
  /* procedure summary */
  .cargo-board-root .cc-proc-summary{margin-top:11px;display:flex;flex-direction:column;gap:6px}
  .cargo-board-root .cc-proc-row{display:flex;align-items:center;gap:9px;font-size:11.5px;padding:7px 11px;
    background:var(--field-bg);border:1px solid var(--line-soft);border-radius:8px}
  .cargo-board-root .cc-proc-type{font-size:9.5px;font-weight:800;letter-spacing:.3px;padding:2px 9px;border-radius:999px;
    background:#1f7a4d;color:#fff}
  .cargo-board-root .cc-proc-type.exa{background:#7a5cff}
  .cargo-board-root .cc-proc-type.clr{background:#5a7689}
  .cargo-board-root .cc-proc-mrn{font-family:var(--mono);color:var(--ink);flex:1}
  .cargo-board-root .cc-proc-pos{font-size:10px;color:var(--ink-soft);font-weight:600}
  .cargo-board-root .cc-proc-eff{font-size:9.5px;font-weight:700;color:var(--green-pill-ink)}
  .cargo-board-root .cc-proc-del{background:transparent;border:none;color:var(--ink-soft);cursor:pointer;font-size:13px;padding:0 4px}
  /* classification grid */
  .cargo-board-root .cls-grid{display:flex;flex-direction:column;gap:10px}
  .cargo-board-root .cls-row{display:flex;align-items:center;gap:12px;
    padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;background:var(--field-bg)}
  .cargo-board-root .cls-name{font-size:12.5px;font-weight:700;color:var(--ink);width:96px;flex-shrink:0}
  .cargo-board-root .cls-ref{flex:1;font-size:12.5px;padding:7px 10px;border:1px solid var(--field-line);border-radius:7px;background:var(--card-bg);color:var(--ink)}
  /* notched-outline fields (like the row ETA/ATA inputs) */
  .cargo-board-root .ofld{position:relative;border:1px solid var(--field-line);border-radius:8px;padding:0;margin:0;
    flex:1;min-width:0;background:var(--card-bg)}
  .cargo-board-root .ofld legend{font-size:8.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    color:var(--ink-soft);margin-left:8px;padding:0 5px;line-height:1;background:transparent}
  .cargo-board-root .ofld .fv{display:block;padding:5px 10px 7px;font-size:12.5px;color:var(--ink);min-height:18px}
  .cargo-board-root .ofld .fv.ro{color:var(--ink-soft)}
  .cargo-board-root .ofld .fv[contenteditable="true"]{outline:none;background:#f0f7fc;border-radius:5px}
  .cargo-board-root .of-row{display:flex;gap:10px;margin-bottom:10px}
  .cargo-board-root .of{position:relative;border:1px solid var(--field-line);border-radius:8px;padding:0;margin:0;
    flex:1;min-width:0;background:var(--card-bg)}
  .cargo-board-root .of legend{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    color:var(--ink-soft);margin-left:8px;padding:0 5px;line-height:1}
  .cargo-board-root .of input,.cargo-board-root .of select{border:none;background:transparent;width:100%;height:38px;
    padding:4px 10px 8px;font-size:13px;color:var(--ink);outline:none}
  .cargo-board-root .of input:disabled{color:var(--ink-soft);cursor:not-allowed}
  .cargo-board-root .of.locked{background:var(--field-bg)}
  .cargo-board-root .of-w2{flex:2}
  /* inline edit chip on a locked field */
  .cargo-board-root .of-edit{position:absolute;right:7px;top:50%;transform:translateY(-30%);
    font-size:9.5px;font-weight:700;color:var(--accent);background:var(--expected-bg);
    border:1px solid #bcd9f5;border-radius:999px;padding:2px 9px;cursor:pointer}
  /* SYNC button next to Ref */
  .cargo-board-root .of-sync{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;
    font-size:10px;font-weight:800;letter-spacing:.2px;color:#1f7a4d;background:var(--card-bg);
    border:1px solid #c9e8d6;border-radius:8px;padding:0 9px;cursor:pointer}
  .cargo-board-root .of-sync:hover{background:var(--green-pill-bg);border-color:#34c759}
  .cargo-board-root .medit-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-soft);opacity:.8}
  .cargo-board-root .medit-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
  .cargo-board-root .medit-cancel{font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:8px;
    border:1px solid var(--line);background:var(--card-bg);color:var(--ink-soft);cursor:pointer}
  .cargo-board-root .medit-apply{font-size:12.5px;font-weight:700;padding:9px 18px;border-radius:8px;border:none;
    background:var(--accent);color:#fff;cursor:pointer}
  .cargo-board-root .medit-apply:hover{filter:brightness(1.05)}
  /* request-clearance mini modal */
  .cargo-board-root .clr-modal{width:560px;max-width:94vw}
  .cargo-board-root .clr-pane{display:none}
  .cargo-board-root .clr-pane.active{display:block}
  .cargo-board-root .clr-summary{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .cargo-board-root .clr-srow{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;font-size:12px;
    color:var(--ink-soft);border-top:1px solid var(--line-soft)}
  .cargo-board-root .clr-srow:first-child{border-top:none}
  .cargo-board-root .clr-srow b{color:var(--ink);font-weight:700}
  .cargo-board-root .clr-doclist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  .cargo-board-root .clr-doc{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink);
    border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer}
  .cargo-board-root .clr-doc .clr-dn{font-weight:600}
  .cargo-board-root .clr-doc .clr-df{margin-left:auto;color:var(--ink-soft);font-size:11px}
  .cargo-board-root .clr-drop{border:1.5px dashed #bcd9f5;border-radius:10px;padding:18px;text-align:center;
    font-size:12px;font-weight:600;color:var(--accent);background:var(--expected-bg);cursor:pointer}
  .cargo-board-root .clr-drop.over{background:#e3f0fb;border-color:var(--accent)}
  .cargo-board-root #clr-extra{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  .cargo-board-root .hint-pop{position:fixed;z-index:340;width:330px;background:rgba(253,246,216,.8);
    border:1px solid rgba(239,224,154,.85);border-radius:11px;
    box-shadow:0 10px 28px rgba(120,90,0,.20);padding:10px 13px;
    display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(4px);
    transition:opacity .2s,transform .2s;pointer-events:none;backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px)}
  .cargo-board-root .hint-pop.show{opacity:1;transform:translateY(0);pointer-events:auto}
  .cargo-board-root .hint-main{display:flex;align-items:center;gap:9px}
  .cargo-board-root .hint-ic{font-size:17px;flex-shrink:0;line-height:1}
  .cargo-board-root .hint-txt{font-size:12px;font-weight:600;color:#6b5800;line-height:1.3;white-space:nowrap}
  .cargo-board-root .hint-x{background:transparent;border:none;color:#a8902e;font-size:13px;
    cursor:pointer;line-height:1;padding:2px 4px;border-radius:5px;flex-shrink:0}
  .cargo-board-root .hint-x:hover{background:rgba(150,110,0,.12);color:#6b5800}
  .cargo-board-root .hint-dismiss{font-size:11px;color:#8a7400;display:flex;align-items:center;gap:6px;cursor:pointer;
    padding-left:61px}
  .cargo-board-root .hint-dismiss input{accent-color:#caa400;cursor:pointer}
  .cargo-board-root .stype{font-size:8.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
    color:#7a5cff;background:#efeaff;border:1px solid #ddd2ff;
    padding:2px 7px;border-radius:999px}
  .cargo-board-root .dos{font-family:var(--mono);font-size:10.5px;font-weight:600;
    background:var(--green-pill-bg);color:var(--green-pill-ink);
    border:1px solid #c9e8d6;
    padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
    line-height:1;letter-spacing:.5px;white-space:nowrap}
  .cargo-board-root .dos-none{font-family:var(--mono);font-size:10.5px;font-weight:700;
    background:#fff1e0;color:#c2691b;border:1px solid #f4cf9e;
    padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
    line-height:1;letter-spacing:.3px;white-space:nowrap}
  .cargo-board-root .ref-missing{color:#d33a2c;font-weight:700;font-style:italic}
  .cargo-board-root .pill{font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:3px 11px;
    border-radius:999px;text-transform:uppercase;line-height:1.2}
  .cargo-board-root .pill.expected{background:var(--expected-bg);color:var(--expected-ink);border:1px solid #bcd9f5}
  .cargo-board-root .pill.instock{background:var(--instock-bg);color:var(--instock-ink)}
  .cargo-board-root .ref{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600}
  .cargo-board-root .ref .lbl{color:var(--ink-soft);font-weight:700;font-family:var(--sans);
    font-size:10px;margin-right:5px;text-transform:uppercase;letter-spacing:.5px}
  .cargo-board-root .ref-sub{font-size:11px;margin-top:1px}
  .cargo-board-root .ref-sub .lbl{font-size:9px}
  /* container counter + multi-container group */
  .cargo-board-root .dos-line{display:flex;align-items:center;gap:7px}
  .cargo-board-root .cntr-badge{font-size:9px;font-weight:700;letter-spacing:.3px;color:var(--accent);
    background:#eef6fc;border:1px solid #cfe0ec;padding:2px 8px;border-radius:999px;
    width:fit-content}
  /* grouped rows stack into one connected block */
  .cargo-board-root .row.grp{margin-bottom:0;border-radius:0;border-top-color:var(--line-soft)}
  .cargo-board-root .row.grp-first{border-radius:11px 11px 0 0;border-top-color:var(--line)}
  .cargo-board-root .row.grp-last{border-radius:0 0 11px 11px;margin-bottom:7px}
  .cargo-board-root .row.grp:hover{transform:none}
  .cargo-board-root .row.grp::before{border-radius:0}
  .cargo-board-root /* a BL position that disassembled (ETA WHS differs) — normal full-width row, .cargo-board-root just separated */
  .row.grp-split{margin-top:7px}

  /* merged Cargo / Type / Qty column */
  .cargo-board-root .cargo-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
  .cargo-board-root .cm-row{display:flex;gap:14px}
  .cargo-board-root .lf.sm{flex:0 0 auto}
  .cargo-board-root .cargo-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;
    letter-spacing:.2px}
  .cargo-board-root .cg-gen{background:#eef2f6;color:#5a7689}
  .cargo-board-root .cg-ship{background:#efeaff;color:#7a5cff}
  .cargo-board-root .cg-dg{background:#ffe3e0;color:#c0271c}
  .cargo-board-root .cg-fresh{background:#e3f4ea;color:#1f7a4d}
  .cargo-board-root .cg-frozen{background:#e3eefb;color:#2d7dbd}
  .cargo-board-root .cg-chilled{background:#e0f4f6;color:#1d7d8a}
  .cargo-board-root .dg-meta{font-size:10.5px;font-weight:600;color:#c0271c;margin-left:6px;font-family:var(--mono)}

  /* label-LEFT field columns (Customer/Take-in Ref) + (Shipper/Cargo) */
  .cargo-board-root .col2{display:flex;flex-direction:column;gap:8px;min-width:0}
  .cargo-board-root .lf{display:flex;align-items:baseline;gap:9px;min-width:0}
  .cargo-board-root .lk{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--accent);
    text-transform:uppercase;white-space:nowrap;flex-shrink:0}
  .cargo-board-root .lv{font-size:14px;color:var(--ink);line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* small stacked fields (Type / Qty) */
  .cargo-board-root .field{display:flex;flex-direction:column;gap:2px;min-width:0}
  .cargo-board-root .field .k{font-size:9.5px;font-weight:700;letter-spacing:.5px;color:var(--ink-soft);
    text-transform:uppercase;line-height:1.1}
  .cargo-board-root .field .v{font-size:13px;color:var(--ink);line-height:1.25}
  .cargo-board-root .field.tiny .k{color:var(--ink-soft)}

  .cargo-board-root .compliance{display:flex;flex-direction:column-reverse;gap:6px;align-items:center}
  .cargo-board-root .compliance .k{font-size:9.5px;font-weight:700;letter-spacing:.5px;color:var(--accent);
    text-transform:uppercase;text-align:center}
  .cargo-board-root .dots{display:flex;gap:6px}
  .cargo-board-root .dot-c{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--field-line);
    background:var(--card-bg);transition:.18s;display:grid;place-items:center;position:relative;
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2736%27%20viewBox%3D%270%200%2034%2036%27%3E%3Cpath%20d%3D%27M11%203c-1%200-1.8%20.8-1.8%201.8v9.6L7.4%2012.7c-.7-.7-1.9-.7-2.6%200s-.7%201.9%200%202.6l4.7%204.8c.6%20.6%201.4%201%202.3%201h6c1.5%200%202.8-1%203.1-2.5l1.3-5.1c.3-1.2-.6-2.3-1.8-2.3H15V4.8C15%203.8%2014.2%203%2013.2%203z%27%20fill%3D%27white%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2726%27%20cy%3D%2727%27%20r%3D%277%27%20fill%3D%27%232d7dbd%27%20stroke%3D%27white%27%20stroke-width%3D%271.4%27%2F%3E%3Ctext%20x%3D%2726%27%20y%3D%2730.5%27%20font-size%3D%2710%27%20fill%3D%27white%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%27%20font-weight%3D%27bold%27%3E%3F%3C%2Ftext%3E%3C%2Fsvg%3E")%209%203,%20pointer}
  .cargo-board-root .dot-c:hover{transform:scale(1.12);box-shadow:0 2px 6px rgba(26,77,110,.25)}
  .cargo-board-root .dot-c.on{border-color:transparent}
  .cargo-board-root .dot-c.on.g{background:#34c759}.cargo-board-root .dot-c.on.a{background:#facc15}
  .cargo-board-root .dot-c.on.r{background:#ff3b30}.cargo-board-root .dot-c.on.b{background:#2d7dbd}
  /* plain dot fill only when no shield icon present */
  .cargo-board-root .dot-c.on:not(.has-icon)::after{content:"";width:7px;height:7px;border-radius:50%;
    background:var(--card-bg);opacity:.9}
  /* off-state icons render grey; amber circles use dark stroke for contrast */
  .cargo-board-root .dot-c svg{opacity:.95;display:block}
  .cargo-board-root .dot-c:not(.on) svg{stroke:#9fb3c2}
  .cargo-board-root .dot-c.on.a svg{stroke:#6b4e00}

  /* compliance hover tooltip */
  .cargo-board-root .tip{position:fixed;z-index:200;display:none;min-width:188px;max-width:260px;
    background:var(--card-bg);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 12px 36px rgba(20,45,65,.22);padding:9px 11px;
    opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;
    pointer-events:none}
  .cargo-board-root .tip.show{opacity:1;transform:translateY(0)}
  /* arrow pointing at the dot (white fill + border) */
  .cargo-board-root .tip::before,.cargo-board-root .tip::after{content:"";position:absolute;left:var(--arrow-x,50%);
    transform:translateX(-50%);width:0;height:0;
    border-left:7px solid transparent;border-right:7px solid transparent}
  .cargo-board-root .tip:not(.below)::before{bottom:-9px;border-top:9px solid var(--line)}
  .cargo-board-root .tip:not(.below)::after{bottom:-7px;border-top:8px solid #fff}
  .cargo-board-root .tip.below::before{top:-9px;border-bottom:9px solid var(--line)}
  .cargo-board-root .tip.below::after{top:-7px;border-bottom:8px solid #fff}
  .cargo-board-root .tip-head{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--accent);margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
  .cargo-board-root .tip-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:3px 0;font-size:12px}
  .cargo-board-root .tip-l{color:var(--ink)}
  .cargo-board-root .tip-s{font-size:10.5px;font-weight:700;white-space:nowrap;padding:1px 7px;border-radius:999px}
  .cargo-board-root .s-ok{background:var(--green-pill-bg);color:var(--green-pill-ink)}
  .cargo-board-root .s-na{background:#eef2f6;color:#7a8fa0}
  .cargo-board-root .s-bad{background:#ffe3e0;color:#c0271c}
  .cargo-board-root .s-warn{background:#fff3d6;color:#9a7400}
  .cargo-board-root .tip-pill{font-size:10.5px;font-weight:800;letter-spacing:.5px;white-space:nowrap;
    padding:2px 9px;border-radius:999px;background:var(--expected-bg);color:var(--expected-ink);
    border:1px solid #bcd9f5}
  .cargo-board-root .tip-pill.warn{background:#ffe3e0;color:#c0271c;border-color:#f4b4ad}
  .cargo-board-root .tip-s.warn{background:#ffe3e0!important;color:#c0271c!important}
  .cargo-board-root .tip-note{font-size:10.5px;font-weight:600;color:var(--ink-soft);font-family:var(--mono);white-space:nowrap}
  .cargo-board-root .tip-row.warn-row{justify-content:flex-start;color:#c0271c}
  .cargo-board-root .warn-tx{color:#c0271c!important}
  .cargo-board-root .tip-head.warn-head{color:#c0271c}

  /* combined compliance overview (3 columns, slides down) */
  .cargo-board-root .tip-all{position:fixed;z-index:210;display:none;background:rgba(255,255,255,.92);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    border:1px solid var(--line);
    border-radius:12px;box-shadow:0 14px 40px rgba(20,45,65,.22);padding:13px 15px;max-width:760px;
    opacity:0;transform:translateY(-6px);transition:opacity .16s,transform .16s}
  .cargo-board-root .tip-all.show{opacity:1;transform:translateY(0)}
  .cargo-board-root .tipall-head{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--accent);margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
  .cargo-board-root .tipall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 20px;align-items:start}
  .cargo-board-root .tipall-col{min-width:150px}
  .cargo-board-root .tipall-ct{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:6px}
  .cargo-board-root .tipall-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:3px 0;font-size:11.5px;color:var(--ink)}

  .cargo-board-root .dates{display:flex;flex-direction:column;gap:5px}
  .cargo-board-root .dfield{position:relative;border:1px solid var(--field-line);border-radius:7px;
    padding:5px 9px 3px;background:var(--field-bg)}
  .cargo-board-root .dfield .k{position:absolute;top:-6px;left:7px;background:var(--card-bg);
    padding:0 4px;font-size:8px;font-weight:700;letter-spacing:.4px;color:var(--ink-soft);
    text-transform:uppercase}
  .cargo-board-root .dfield .v{font-size:11px;color:var(--ink);font-family:var(--mono)}
  .cargo-board-root .ata-txt{margin:1px 0 0;padding:0 2px;font-size:10px;color:var(--ink-soft);
    font-family:var(--mono);white-space:nowrap}
  .cargo-board-root /* small calendar hint — matches the row hint, .cargo-board-root smaller + more transparent */
  .hint-pop.sm{width:auto;max-width:236px;background:rgba(253,246,216,.6);padding:8px 11px;gap:4px}
  .cargo-board-root .hint-pop.sm .hint-txt{font-size:11px}
  .cargo-board-root .hint-pop.sm .hint-ic{font-size:14px}
  .cargo-board-root .hint-pop.sm .hint-dismiss{font-size:10px;padding-left:42px}
  /* custom calendar popup */
  .cargo-board-root .cal-pop{position:fixed;z-index:9500;display:none;width:236px;background:var(--card-bg);
    border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(20,40,60,.22);
    padding:10px;font-family:var(--sans)}
  .cargo-board-root .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .cargo-board-root .cal-title{font-size:12.5px;font-weight:800;color:var(--ink)}
  .cargo-board-root .cal-nav{width:26px;height:26px;border:1px solid var(--line);background:var(--card-bg);border-radius:7px;
    cursor:pointer;font-size:14px;color:var(--accent);line-height:1}
  .cargo-board-root .cal-nav:hover{background:var(--expected-bg)}
  .cargo-board-root .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
  .cargo-board-root .cal-dow span{font-size:9px;font-weight:800;color:var(--ink-soft);text-align:center;text-transform:uppercase}
  .cargo-board-root .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .cargo-board-root .cal-d{height:28px;border:none;background:transparent;border-radius:7px;cursor:pointer;
    font-size:11.5px;font-weight:600;color:var(--ink)}
  .cargo-board-root .cal-d:hover{background:var(--accent);color:#fff}
  .cargo-board-root .cal-d.empty{visibility:hidden;cursor:default}
  .cargo-board-root .cal-foot{margin-top:7px;text-align:center}
  .cargo-board-root .cal-today{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--expected-bg);
    border:1px solid #bcd9f5;border-radius:999px;padding:4px 14px;cursor:pointer}
  .cargo-board-root .dfield.edit{padding:0}
  .cargo-board-root .dfield .dv-in{border:none;background:transparent;width:100%;font-size:11px;color:var(--ink);
    font-family:var(--mono);padding:5px 8px 4px;outline:none;border-radius:7px}
  .cargo-board-root .dfield .dv-in:focus{background:#f0f7fc}
  .cargo-board-root .dfield .dv-in.ro{color:var(--ink-soft);cursor:default}
  .cargo-board-root .dfield .dv-in.ro:focus{background:transparent}

  /* ---------- MODAL ---------- */
  .cargo-board-root .overlay{position:fixed;inset:0;background:rgba(20,45,65,.45);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;
    opacity:0;pointer-events:none;transition:opacity .22s}
  .cargo-board-root .overlay.show{opacity:1;pointer-events:auto}
  .cargo-board-root .modal{background:var(--card-bg);width:min(680px,100%);max-height:88vh;overflow:auto;
    border-radius:18px;box-shadow:0 24px 70px rgba(20,45,65,.4);
    transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .cargo-board-root .modal-wide{width:min(1040px,100%);max-height:90vh;display:flex;flex-direction:column;
    overflow:hidden}
  .cargo-board-root .overlay.show .modal{transform:translateY(0) scale(1)}
  .cargo-board-root .m-head{background:linear-gradient(135deg,var(--nav-grad-b),var(--nav-grad-a));
    color:#fff;padding:18px 24px 0;flex-shrink:0;z-index:5}
  .cargo-board-root .m-head-top{display:flex;justify-content:space-between;align-items:flex-start}
  .cargo-board-root .m-head-right{display:flex;align-items:center;gap:12px}
  .cargo-board-root .m-status-wrap{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
  .cargo-board-root .m-status-lbl{font-size:8.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    color:#bcd9ec}
  .cargo-board-root .m-status{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
    font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer;outline:none;
    font-family:var(--sans)}
  .cargo-board-root .m-status:hover{background:rgba(255,255,255,.22)}
  .cargo-board-root .m-status option{color:#1f3a4d;background:var(--card-bg)}
  .cargo-board-root .m-head h2{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px}
  .cargo-board-root .m-head .sub{font-family:var(--mono);font-size:11.5px;color:#bcd9ec;margin-top:6px}
  .cargo-board-root .m-head .sub b{color:#fff}
  .cargo-board-root .m-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;
    border-radius:8px;cursor:pointer;font-size:16px;line-height:1;transition:.15s}
  .cargo-board-root .m-close:hover{background:rgba(255,255,255,.3)}
  /* tabs */
  .cargo-board-root .m-tabs{display:flex;gap:4px;margin-top:16px}
  .cargo-board-root .m-tab{background:transparent;border:none;color:#bcd9ec;font-size:12.5px;font-weight:600;
    padding:10px 15px;cursor:pointer;border-radius:8px 8px 0 0;position:relative;
    font-family:var(--sans);transition:.15s}
  .cargo-board-root .m-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
  .cargo-board-root .m-tab.on{color:var(--nav-grad-a);background:var(--card-bg)}
  .cargo-board-root .m-body{padding:22px 24px 26px;overflow-y:auto;flex:1 1 auto;min-height:480px}

  /* details section headers with optional action button */
  .cargo-board-root .dt-head{display:flex;align-items:center;gap:8px;margin:0 0 11px}
  .cargo-board-root .sec-txt{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--accent);
    text-transform:uppercase;white-space:nowrap}
  .cargo-board-root .dt-head::after{content:"";flex:1;height:1px;background:var(--line)}
  .cargo-board-root .btn-edit{order:3;background:var(--card-bg);border:1px solid var(--field-line);color:var(--ink);
    font-size:11px;font-weight:600;padding:5px 12px;border-radius:7px;cursor:pointer;
    white-space:nowrap;transition:.15s}
  .cargo-board-root .btn-edit:hover{border-color:var(--accent);color:var(--accent)}
  .cargo-board-root .btn-edit.saving{background:#34c759;border-color:#34c759;color:#fff}

  .cargo-board-root .mrn-active{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:9px 12px;
    background:linear-gradient(90deg,#eef6ff,#f7fbff);border:1px solid #cfe3f5;border-radius:9px}
  .cargo-board-root .mrn-active .ma-k{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft)}
  .cargo-board-root .mrn-active .ma-v{font-size:13px;font-weight:700;color:var(--accent-deep)}
  .cargo-board-root .mrn-active .ma-tag{margin-left:auto;font-size:9.5px;font-weight:700;color:#1f7a4d;
    background:var(--green-pill-bg);border:1px solid #bfe6cc;border-radius:999px;padding:2px 9px}
  /* container field with seals on the right */
  .cargo-board-root .fld-cnt{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .cargo-board-root .fld-cnt .cnt-left{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .cargo-board-root .fld-cnt .cnt-seals{display:flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:flex-start;flex:0 0 auto}
  .cargo-board-root .fld-cnt .seal{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
    font-size:11px;font-weight:600;color:var(--ink);background:#fff7e6;border:1px solid #f0d79a;
    border-radius:7px;padding:3px 9px;white-space:nowrap}
  .cargo-board-root .fld-cnt .seal-k{font-family:var(--sans);font-size:8px;font-weight:800;letter-spacing:.4px;
    text-transform:uppercase;color:#9a6a12}
  .cargo-board-root .fld-cnt .fv-seal{outline:none}
  .cargo-board-root .fld-cnt .fv-seal[contenteditable="true"]{background:var(--card-bg);border:1px solid var(--accent);
    border-radius:5px;padding:0 5px;min-width:54px}
  .cargo-board-root .fld-cnt .seal.none{background:#f3f5f8;border-color:var(--line);color:var(--ink-soft)}
  .cargo-board-root .hdr-card{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;gap:20px;
    background:var(--field-bg);border:1px solid var(--line);border-radius:10px;
    padding:9px 14px;margin-bottom:4px}
  .cargo-board-root .hdr-card .fld{border-bottom:none;padding-bottom:0}
  .cargo-board-root .hdr-card .tval{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);font-size:14px}

  /* editing state */
  .cargo-board-root .dt-left.editing .fv:not(.ro){background:var(--card-bg);border:1px solid var(--accent);
    border-radius:6px;padding:3px 7px;outline:none;min-width:40px}
  .cargo-board-root .dt-left.editing .goods-box{border-color:var(--accent);background:var(--card-bg)}
  .cargo-board-root .dt-left.editing .fv.ro{opacity:.6}

  .cargo-board-root .sec-title{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--accent);
    text-transform:uppercase;margin:0 0 12px;display:flex;align-items:center;gap:8px}
  .cargo-board-root .sec-title::after{content:"";flex:1;height:1px;background:var(--line)}

  /* tab panes */
  .cargo-board-root .pane{display:none}
  .cargo-board-root .pane.on{display:block;animation:fade .2s ease}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  .cargo-board-root /* details: 2-col, .cargo-board-root left wider */
  .details-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}
  .cargo-board-root .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
  .cargo-board-root .fld-pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px;
    background:var(--field-bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
  .cargo-board-root .fld-pair .fld{border-bottom:none;padding-bottom:0}
  .cargo-board-root .fld-type{grid-column:1/-1;display:flex;align-items:center;gap:12px;
    border-bottom:1px dashed var(--line-soft);padding-bottom:8px}
  .cargo-board-root .fld-type .fld{border-bottom:none;padding-bottom:0}
  .cargo-board-root .fld-type .fv{font-size:15px;font-weight:700;color:var(--accent)}
  .cargo-board-root .type-sel{font-size:14px;font-weight:700;color:var(--accent);font-family:var(--sans);
    border:1px solid transparent;background:transparent;border-radius:6px;padding:2px 4px;
    cursor:default;-webkit-appearance:none;appearance:none}
  .cargo-board-root .type-sel:disabled{color:var(--accent);opacity:1}
  .cargo-board-root .dt-left.editing .type-sel{border-color:var(--accent);background:var(--card-bg);cursor:pointer;
    padding:3px 8px;-webkit-appearance:auto;appearance:auto}
  .cargo-board-root .dt-left.editing .fv.tval{opacity:1}
  .cargo-board-root .type-badge{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
    color:#7a5cff;background:#efeaff;border:1px solid #ddd2ff;padding:3px 9px;border-radius:999px;
    align-self:center}
  .cargo-board-root .fld-sub{grid-column:1/-1;font-size:9.5px;font-weight:800;letter-spacing:.8px;
    text-transform:uppercase;color:var(--ink-soft);margin:8px 0 -2px;
    display:flex;align-items:center;gap:8px}
  .cargo-board-root .fld-sub::after{content:"";flex:1;height:1px;background:var(--line-soft)}
  .cargo-board-root .fld-trip{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;
    border-bottom:1px dashed var(--line-soft);padding-bottom:7px}
  .cargo-board-root .fld-trip .fld{border-bottom:none;padding-bottom:0}
  .cargo-board-root .fld{display:flex;flex-direction:column;gap:2px;border-bottom:1px dashed var(--line-soft);
    padding-bottom:7px}
  .cargo-board-root .fk{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--ink-soft);
    text-transform:uppercase}
  .cargo-board-root .fv{font-size:13px;color:var(--ink);font-weight:500}
  .cargo-board-root .goods-box{background:var(--field-bg);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;font-size:12.5px;line-height:1.55;color:#3c5466}

  /* lines / order-lines table */
  .cargo-board-root .lines-table{border:1px solid var(--line);border-radius:11px;overflow:hidden}
  .cargo-board-root .lines-scroll{overflow-x:auto}
  .cargo-board-root .lines-inner{min-width:430px}
  .cargo-board-root .lt-head,.cargo-board-root .lt-row{display:grid;grid-template-columns:48px minmax(120px,1fr) 54px 38px 58px 70px;
    gap:7px;padding:8px 11px;align-items:center;font-size:11px}
  .cargo-board-root .lt-head{background:var(--field-bg);font-size:8.5px;font-weight:800;letter-spacing:.4px;
    text-transform:uppercase;color:var(--ink-soft)}
  .cargo-board-root .lt-row{border-top:1px solid var(--line-soft)}
  .cargo-board-root .lt-row .mono{font-family:var(--mono);font-size:10.5px;color:var(--accent)}
  .cargo-board-root .lt-row i{color:var(--ink-soft);font-style:italic}
  .cargo-board-root .lt-head .r,.cargo-board-root .lt-row .r{text-align:right}
  /* picklist: extra columns */
  .cargo-board-root .pick-inner{min-width:840px}
  .cargo-board-root .pick-counter{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);
    background:var(--field-bg);border:1px solid var(--field-line);border-radius:9px;padding:8px 13px;
    cursor:pointer;margin-bottom:12px;font-weight:500}
  .cargo-board-root .pick-counter b{color:var(--accent);font-weight:800}
  .cargo-board-root .pick-counter:hover{border-color:var(--accent)}
  .cargo-board-root .pc-caret{transition:transform .15s;color:var(--ink-soft);font-size:11px}
  .cargo-board-root .pc-sub{color:var(--ink-soft);font-weight:600;font-size:11.5px}
  .cargo-board-root .pick-counter.open .pc-caret{transform:rotate(180deg)}
  .cargo-board-root .pick-wrap.collapsed{display:none}
  /* order groups inside picklist */
  .cargo-board-root .ord-group{margin-bottom:14px}
  .cargo-board-root .ord-head{display:flex;align-items:center;gap:10px;padding:6px 2px 8px}
  .cargo-board-root .ord-head .order-link{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);
    cursor:pointer;text-decoration:none}
  .cargo-board-root .ord-head .order-link:hover{text-decoration:underline}
  .cargo-board-root .ord-meta{font-size:10.5px;color:var(--ink-soft);font-weight:600}
  .cargo-board-root .ord-pk-head,.cargo-board-root .ord-group .pk-row,
  .cargo-board-root .ord-inner .pk-head,.cargo-board-root .ord-inner .pk-row,
  .cargo-board-root .pk-head,.cargo-board-root .pk-row{grid-template-columns:46px minmax(120px,1fr) 50px 36px 56px 70px 110px 78px 86px}
  .cargo-board-root .pk-list-title{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;
    letter-spacing:.4px;margin:2px 0 8px}
  .cargo-board-root .no-order{font-size:10.5px;color:var(--ink-soft);font-style:italic}
  .cargo-board-root .order-link{color:var(--accent);font-family:var(--mono);font-size:10.5px;cursor:pointer;
    text-decoration:underline;text-underline-offset:2px}
  .cargo-board-root .order-link:hover{color:var(--accent-deep)}
  .cargo-board-root .pk-tag{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
    padding:2px 8px;border-radius:999px;white-space:nowrap}
  .cargo-board-root .pk-picked{background:var(--green-pill-bg);color:var(--green-pill-ink)}
  .cargo-board-root .pk-stock{background:#e3eefb;color:#2d7dbd}
  .cargo-board-root .pk-res{background:#fef3cd;color:#946200}
  .cargo-board-root .pk-disp{background:#efeaff;color:#7a5cff}

  /* documents */
  .cargo-board-root .doc-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:14px}
  /* list/cards toggle */
  .cargo-board-root .doc-toggle{display:flex;background:var(--field-bg);border:1px solid var(--field-line);
    border-radius:8px;padding:2px;gap:2px}
  .cargo-board-root .dtg{background:transparent;border:none;font-size:11.5px;font-weight:600;color:var(--ink-soft);
    padding:6px 12px;border-radius:6px;cursor:pointer;transition:.15s;font-family:var(--sans)}
  .cargo-board-root .dtg:hover{color:var(--accent)}
  .cargo-board-root .dtg.on{background:var(--card-bg);color:var(--accent);box-shadow:0 1px 3px rgba(26,77,110,.12)}
  /* archive: grouped bordered sections */
  .cargo-board-root .doc-gallery{display:flex;flex-direction:column;gap:14px}
  .cargo-board-root .arc-section{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .cargo-board-root .arc-head{background:var(--field-bg);padding:9px 14px;font-size:9.5px;font-weight:800;
    letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft);
    display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
  .cargo-board-root .arc-count{background:var(--card-bg);border:1px solid var(--line);border-radius:999px;
    padding:1px 8px;font-size:9px;color:var(--accent)}
  .cargo-board-root .arc-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:10px;padding:12px}
  .cargo-board-root .gal-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);
    border-radius:10px;padding:11px;background:var(--card-bg)}
  .cargo-board-root .gal-thumb{width:44px;height:44px;border-radius:9px;background:var(--field-bg);
    border:1px solid var(--line);display:grid;place-items:center;font-size:21px;flex-shrink:0}
  .cargo-board-root .gal-body{flex:1;min-width:0}
  .cargo-board-root .gal-name{font-size:12.5px;font-weight:700;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cargo-board-root .gal-file{font-family:var(--mono);font-size:10.5px;color:var(--accent);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cargo-board-root .gal-meta{font-size:10px;color:var(--ink-soft);margin-top:2px}
  .cargo-board-root .gal-dl{background:var(--accent);color:#fff;border:none;width:30px;height:28px;
    border-radius:7px;cursor:pointer;font-size:13px;flex-shrink:0}
  .cargo-board-root .gal-dl:hover{background:var(--accent-deep)}
  .cargo-board-root .arc-empty{grid-column:1/-1;color:var(--ink-soft);font-size:12px;padding:10px 4px}
  .cargo-board-root .doc-hint{font-size:11.5px;color:var(--ink-soft)}
  .cargo-board-root .btn-dlall{background:var(--accent);color:#fff;border:none;font-size:12px;font-weight:600;
    padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.15s}
  .cargo-board-root .btn-dlall:hover{background:var(--accent-deep)}
  .cargo-board-root .doc-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .cargo-board-root .doc-headrow{display:grid;grid-template-columns:1.4fr 1.2fr 1.3fr 50px;gap:10px;
    padding:9px 14px;background:var(--field-bg);font-size:9px;font-weight:800;
    letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft)}
  .cargo-board-root .doc-row{display:grid;grid-template-columns:1.4fr 1.2fr 1.3fr 50px;gap:10px;
    align-items:center;padding:11px 14px;border-top:1px solid var(--line-soft);
    font-size:12.5px;transition:.15s;cursor:pointer}
  .cargo-board-root .doc-row.filled{background:linear-gradient(90deg,#eef9f1,#fff);cursor:default}
  .cargo-board-root .doc-row.drag{background:#eef6fc;box-shadow:inset 0 0 0 2px var(--accent)}
  .cargo-board-root .doc-row:not(.filled):hover{background:#f7fafd}
  .cargo-board-root .doc-name{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
  .cargo-board-root .doc-name .lock{font-size:11px}
  .cargo-board-root .doc-file{font-family:var(--mono);font-size:11px;color:var(--accent)}
  .cargo-board-root .doc-meta{font-size:11px;color:var(--ink-soft)}
  .cargo-board-root .doc-drop{grid-column:2 / -1;color:var(--ink-soft);font-size:11.5px;
    border:1.5px dashed var(--field-line);border-radius:8px;padding:7px 12px;text-align:center}
  .cargo-board-root .doc-row.filled .doc-name{color:var(--green-pill-ink)}
  .cargo-board-root .dl-btn{background:var(--accent);color:#fff;border:none;width:30px;height:28px;
    border-radius:7px;cursor:pointer;font-size:13px}
  .cargo-board-root .dl-btn:hover{background:var(--accent-deep)}

  /* log */
  .cargo-board-root .log-list{display:flex;flex-direction:column}
  .cargo-board-root .log-row{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
  .cargo-board-root .log-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
  .cargo-board-root .log-row b{font-size:13px;display:block}
  .cargo-board-root .log-meta{font-size:11px;color:var(--ink-soft)}

  .cargo-board-root .comp-list{display:flex;flex-direction:column;gap:10px}
  .cargo-board-root .comp-item{display:flex;align-items:center;gap:13px;border:1px solid var(--line);
    border-radius:11px;padding:13px 15px;background:var(--card-bg)}
  .cargo-board-root .comp-item .badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
    font-size:16px;flex-shrink:0}
  .cargo-board-root .badge.ok{background:var(--green-pill-bg)}
  .cargo-board-root .badge.warn{background:#fef3cd}
  .cargo-board-root .badge.bad{background:#ffe3e0}
  .cargo-board-root .badge.pend{background:#e3eefb}
  .cargo-board-root .comp-item .body{flex:1}
  .cargo-board-root .comp-item .body b{font-size:13.5px;display:block;margin-bottom:2px}
  .cargo-board-root .comp-item .body span{font-size:11.5px;color:var(--ink-soft)}
  .cargo-board-root .status-tag{font-size:10px;font-weight:700;letter-spacing:.4px;padding:5px 11px;
    border-radius:999px;text-transform:uppercase;white-space:nowrap}
  .cargo-board-root .tag-ok{background:var(--green-pill-bg);color:var(--green-pill-ink)}
  .cargo-board-root .tag-warn{background:#fef3cd;color:#946200}
  .cargo-board-root .tag-bad{background:#ffe3e0;color:#c0271c}
  .cargo-board-root .tag-pend{background:#e3eefb;color:#2d7dbd}

  @media(max-width:920px){
    .cargo-board-root .row{grid-template-columns:28px 1fr;gap:12px}
    .cargo-board-root .row > .col2,.cargo-board-root .row > .cargo-meta,.cargo-board-root .row > .compliance,.cargo-board-root .row > .dates{grid-column:2}
    .cargo-board-root .details-grid{grid-template-columns:1fr}
    .cargo-board-root .field-grid{grid-template-columns:1fr 1fr}
  }


/* ============================================================
   DARK THEME - follows the global ThemeManager (data-theme on <html>).
   Mostly a token flip; the explicit overrides below catch surfaces and
   colors the mockup hardcoded (light-blue highlights, amber seal chip,
   dark-green text, gradients, translucent-white tooltip, active modal tab).
   ============================================================ */
[data-theme="dark"] .cargo-board-root{
  --nav-grad-a:#0f2c40; --nav-grad-b:#16435f;
  --ink:#e6eef5; --ink-soft:#93a7b6;
  --accent:#4ea3e0; --accent-deep:#2d7dbd;
  --green-pill-bg:#16331f; --green-pill-ink:#6fce92;
  --instock-bg:#2ea84e; --instock-ink:#08130b;
  --expected-bg:#13314a; --expected-ink:#7ec1f0;
  --line:#28333d; --line-soft:#1e2832;
  --card-bg:#151e27; --page-bg:#0d141b;
  --field-bg:#1a242e; --field-line:#2d3a46;
  --ata-bg:#1a242e;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.40);
  --shadow-hover:0 4px 10px rgba(0,0,0,.55),0 14px 36px rgba(0,0,0,.55);
}
/* surfaces / gradients the tokens don't reach */
[data-theme="dark"] .cargo-board-root .panel{background:linear-gradient(180deg,#121b23,#0e161d)}
[data-theme="dark"] .cargo-board-root .doc-row.filled{background:linear-gradient(90deg,#13241a,var(--card-bg))}
[data-theme="dark"] .cargo-board-root .mrn-active{background:linear-gradient(90deg,#13283c,#101c27);border-color:#27425b}
[data-theme="dark"] .cargo-board-root .tip-all{background:rgba(21,30,39,.94)}
[data-theme="dark"] .cargo-board-root .hint-pop{background:rgba(58,46,12,.86);border-color:rgba(120,95,24,.6)}
[data-theme="dark"] .cargo-board-root .hint-txt{color:#f0d98a}
[data-theme="dark"] .cargo-board-root .hint-x{color:#cdb058}
[data-theme="dark"] .cargo-board-root .hint-dismiss{color:#d2bd7e}
/* light-blue highlight surfaces -> dark blue tint */
[data-theme="dark"] .cargo-board-root .row.selected,
[data-theme="dark"] .cargo-board-root .fcard.on,
[data-theme="dark"] .cargo-board-root .tab.on,
[data-theme="dark"] .cargo-board-root .sib-row.cur,
[data-theme="dark"] .cargo-board-root .doc-row.drag,
[data-theme="dark"] .cargo-board-root .mention{background:var(--expected-bg)}
[data-theme="dark"] .cargo-board-root .sib-row:hover,
[data-theme="dark"] .cargo-board-root .doc-row:not(.filled):hover,
[data-theme="dark"] .cargo-board-root .dfield .dv-in:focus,
[data-theme="dark"] .cargo-board-root .ofld .fv[contenteditable="true"]{background:#1b2a39}
/* active modal tab: card-bg surface needs light text (was navy-on-white) */
[data-theme="dark"] .cargo-board-root .m-tab.on{color:var(--ink)}
/* KPI stat values: dark greens/oranges are unreadable on the dark card */
[data-theme="dark"] .cargo-board-root .stat-cell.s-stock .stat-val{color:#4fc77f}
[data-theme="dark"] .cargo-board-root .stat-cell.s-exp .stat-val{color:#e0934a}
/* amber seal chip + 'none' seal */
[data-theme="dark"] .cargo-board-root .fld-cnt .seal{background:#3a2f12;border-color:#5c4a1c;color:#f0d79a}
[data-theme="dark"] .cargo-board-root .fld-cnt .seal-k{color:#cdb058}
[data-theme="dark"] .cargo-board-root .fld-cnt .seal.none{background:var(--field-bg);border-color:var(--line);color:var(--ink-soft)}
/* hardcoded dark-green text -> readable on dark */
[data-theme="dark"] .cargo-board-root .of-sync{color:#5ace87;border-color:#2a5536}
[data-theme="dark"] .cargo-board-root .of-sync:hover{background:#16331f}
[data-theme="dark"] .cargo-board-root .cntr-badge{background:var(--expected-bg);border-color:#2d4a63}


/* ============================================================
   LIVE-COLLAB OVERLAYS on cards (peer locks + peer selections).
   Painted by js/cargo-collab.js; reuses the control-board lock/
   selection/poll backend. --lock-color / --peer-color are set inline
   per peer. Right:34px keeps clear of the .row.selected check badge.
   ============================================================ */
.cargo-board-root .row.cargo-locked{box-shadow:0 0 0 2px var(--lock-color,#a855f7) inset, var(--shadow);cursor:not-allowed}
.cargo-board-root .row.cargo-locked::before{background:var(--lock-color,#a855f7)}
.cargo-board-root .cargo-lock-chip{position:absolute;top:6px;right:34px;background:var(--lock-color,#a855f7);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:999px;z-index:6;
  text-transform:uppercase;pointer-events:none;white-space:nowrap}
.cargo-board-root .row.cargo-peer-sel{box-shadow:0 0 0 2px var(--peer-color,#2d7dbd) inset, var(--shadow)}
.cargo-board-root .row.cargo-peer-sel::before{background:var(--peer-color,#2d7dbd)}
.cargo-board-root .cargo-sel-chip{position:absolute;top:6px;right:34px;background:var(--peer-color,#2d7dbd);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:999px;z-index:6;
  text-transform:uppercase;pointer-events:none;white-space:nowrap}

/* nav theme toggle (this page doesn't load the app's crescent-toggle CSS) */
.cargo-board-root .cargo-theme-toggle{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0;margin-left:6px}
.cargo-board-root .cargo-theme-toggle:hover{background:rgba(255,255,255,.22)}
.cargo-board-root .cargo-theme-toggle svg{width:16px;height:16px}
.cargo-board-root .cargo-theme-toggle .moon{display:none}
[data-theme="dark"] .cargo-board-root .cargo-theme-toggle .sun{display:none}
[data-theme="dark"] .cargo-board-root .cargo-theme-toggle .moon{display:block}

/* ============================================================
   HEADER consistent with the app pages (Dossiers/Positions):
   solid #0a5989, 50px tall, JetBrains Mono (the app body font),
   centered menu, no link underline, light-blue active (not orange),
   bigger minimalist flat icons, real myon logo.
   ============================================================ */
.cargo-board-root .topnav{background:#0a5989 !important;height:50px;padding:0 1.5rem;gap:2px;font-family:'JetBrains Mono',ui-monospace,monospace}
.cargo-board-root .topnav .brand{margin-right:8px}
.cargo-board-root .topnav .brand-img{height:36px;width:auto;display:block;background:#fff;padding:4px 9px;border-radius:8px;box-sizing:border-box}
.cargo-board-root .topnav .nav-item{font-family:inherit;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.78);padding:.5rem .8rem;gap:.5rem;border-radius:8px;text-decoration:none}
.cargo-board-root .topnav .nav-item:hover{background:rgba(255,255,255,.15);color:#fff}
.cargo-board-root .topnav .nav-item.active{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.cargo-board-root .topnav .nav-item .ic svg{width:18px;height:18px;stroke-width:1.9}
.cargo-board-root .topnav .brand-chip{font-family:'JetBrains Mono',ui-monospace,monospace;margin-right:4px}

/* loading circle (same as the app pages' PageLoader) shown in #panel
   before the rows render, then faded out. */
.cargo-board-root .page-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;padding:3rem 1rem;width:100%;transition:opacity .3s}
.cargo-board-root .page-loader__circle{width:56px;height:56px;transform:rotate(-90deg)}
.cargo-board-root .page-loader__circle-track{fill:none;stroke:#d6e2ea;stroke-width:4;opacity:.4}
.cargo-board-root .page-loader__circle-arc{fill:none;stroke:#0a5989;stroke-width:4;stroke-linecap:round;stroke-dasharray:175.93;stroke-dashoffset:175.93}
.cargo-board-root .page-loader__status{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8rem;font-weight:500;color:#536579;letter-spacing:.02em;min-height:1.2em;text-align:center}
[data-theme="dark"] .cargo-board-root .page-loader__circle-track{stroke:#2c3a47}
[data-theme="dark"] .cargo-board-root .page-loader__circle-arc{stroke:#4ea3e0}
[data-theme="dark"] .cargo-board-root .page-loader__status{color:#93a7b6}

