/* ============================================================
   export.components.css · Export Loads layer (ตู้/โหลดส่งออก ของผู้ส่งออก)
   ------------------------------------------------------------
   EXTENDS Atlas + trade.components.css. Loaded LAST, after
   supply.tokens.css → supply.components.css → shell.chrome.css →
   sourcing.components.css → trade.components.css. Every value
   resolves to a supply.tokens.css variable (no new colour/font/
   radius minted). Zero-dependency, greyscale-safe (glyph + edge
   cues, not colour alone).

   NEW here (everything else reuses live classes — see design notes §1):
     · load-status chips   .stchip + booked/in_transit/cleared/closed
       (the 4-stop CONTAINER lifecycle; cancelled reuses trade's)
     · load card           .el-loadcard  (a CONTAINER, not an order —
       borrows the .ordercard tempo, adds route + aggregate + trace-mini)
     · derived aggregate    .el-agg / .el-aggbar  (◇ open-diamond = a
       DERIVED roll-up, never a measured/claimed figure — honest-data)
     · status block         .el-statusblock  (lifeline + next-step acts)
     · member orders        .el-mem  (orders packed in a load + remove)
     · add-order picker      .el-pick  (settled orders available to pack)
     · GACC manifest        .el-trace / .el-tcard  (per-order traceability;
       PUBLIC-SAFE whitelist only, deal-gated — no orchard PII)
     · confirm + toast       .el-confacts / .el-toast  (.btn.danger)
   ============================================================ */

/* ============================================================
   LOAD-STATUS CHIPS — extend .stchip onto the container lifecycle.
   Maps to the provenance palette so meaning = colour + word, and the
   dashed border on the cancelled terminal reads in greyscale.
   booked(◷just-made→blue) → in_transit(moving→amber) →
   cleared(customs→brass) → closed(done→green) · cancelled = stale.
   ============================================================ */
.stchip.draft{ background:var(--surface2); color:var(--muted); border-color:var(--line2); }
.stchip.booked{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }
.stchip.in_transit{ background:var(--pv-est-bg); color:var(--pv-est); border-color:var(--pv-est-ln); }
.stchip.cleared{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.stchip.closed{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
/* .stchip.cancelled is inherited from trade.components.css (stale + dashed) */

/* ============================================================
   LOAD CARD — a CONTAINER, reuses .ordercard shell (head/foot) and
   adds a derived-aggregate body + a traceability-readiness mini.
   ============================================================ */
.el-loadgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:var(--s4); }
.el-loadcard{ cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .05s; }
.el-loadcard:hover{ border-color:var(--brand); box-shadow:var(--sh-md); }
.el-loadcard:active{ transform:translateY(1px); }
/* the destination title carries a small port glyph */
.el-loadcard .oc-ttl{ display:flex; align-items:center; gap:.45rem; }
.el-loadcard .oc-ttl .ic{ width:16px; height:16px; flex:0 0 16px; color:var(--brand2); display:inline-flex; }
.el-loadcard .oc-ttl .ic svg{ width:100%; height:100%; display:block; }
.el-loadcard .oc-ttl .zh{ font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-semi); }
.el-loadcard .oc-fig{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.el-loadcard .oc-fig .ic{ width:14px; height:14px; flex:0 0 14px; color:var(--muted); display:inline-flex; }
.el-loadcard .oc-fig .ic svg{ width:100%; height:100%; display:block; }

.el-loadbody{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap; padding:var(--s4); }

/* derived aggregate (card) — ◇ = a roll-up, NOT a measured figure */
.el-agg{ display:flex; align-items:baseline; gap:.4rem; min-width:0; }
.el-agg .ag-d{ align-self:center; color:var(--brand2); font-weight:var(--fw-x); font-size:1.05rem; }
.el-agg .ag-num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.55rem;
  font-weight:var(--fw-bold); letter-spacing:-.01em; line-height:1; color:var(--ink); }
.el-agg .ag-unit{ font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-semi); }
.el-agg .ag-sep{ color:var(--line2); margin:0 .1rem; }
.el-agg .ag-orders{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-sm);
  color:var(--ink2); font-weight:var(--fw-semi); }
.el-agg.empty .ag-num{ color:var(--muted); font-weight:var(--fw-semi); }

/* traceability-readiness mini chip (GACC certs present / total) */
.el-tracemini{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  font-size:var(--fs-2xs); color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line2); border-radius:var(--r-pill); padding:.2rem .55rem; }
.el-tracemini .tm-lbl{ color:var(--muted); }
.el-tracemini .tm-ok{ color:var(--pv-verified); font-weight:var(--fw-bold); font-family:var(--mono); }
.el-tracemini .tm-wait{ color:var(--pv-est); font-weight:var(--fw-bold); font-family:var(--mono); }

/* card foot — varieties summary (left) + open (right) */
.el-loadcard .oc-foot{ border-top:1px solid var(--line); }
.el-vsum{ flex:1; min-width:0; font-size:var(--fs-xs); color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.el-vsum.muted{ font-style:italic; }

/* ============================================================
   STATUS BLOCK (drawer) — the lifecycle stepper + the single next
   legal transition. Reuses .lifeline / .lstep / .ldot / .llab.
   ============================================================ */
.el-statusblock{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.el-statusblock .sb-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4); background:var(--surface2); border-bottom:1px solid var(--line); }
.el-statusblock .sb-top .sb-k{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:var(--fw-bold); }
.el-statusblock .sb-acts{ display:flex; gap:.5rem; flex-wrap:wrap; padding:var(--s3) var(--s4) var(--s4); }
.el-statusblock .sb-acts .btn{ flex:1; justify-content:center; min-width:120px; }
.el-cancelled-note{ display:flex; gap:.5rem; align-items:center; padding:.6rem var(--s4);
  background:var(--pv-stale-bg); color:var(--pv-stale); font-size:var(--fs-xs); font-weight:var(--fw-semi);
  border-top:1px dashed var(--pv-stale-ln); }

/* ============================================================
   MEMBER ORDERS (drawer) — orders packed in this load, with remove.
   reuses the .ledger tempo as a stacked list (narrow drawer).
   ============================================================ */
.el-aggbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.6rem .8rem; border-radius:var(--r);
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--brand-ink); font-size:var(--fs-sm); }
.el-aggbar .ab-d{ font-weight:var(--fw-x); color:var(--brand2); }
.el-aggbar .ab-num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); }
.el-aggbar .ab-note{ flex:1 0 100%; font-size:var(--fs-2xs); color:var(--brand2); }

.el-mem{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--line); }
.el-mem:first-child{ border-top:0; }
.el-mem .m-main{ flex:1; min-width:0; }
.el-mem .m-ref{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted); }
.el-mem .m-ttl{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink);
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:1px; }
.el-mem .m-meta{ font-size:var(--fs-2xs); color:var(--muted); margin-top:1px; }
.el-mem .m-qty{ text-align:right; white-space:nowrap; }
.el-mem .m-qty b{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold);
  font-size:var(--fs-sm); color:var(--ink); }
.el-mem .m-qty small{ display:block; font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); }
.el-mem .m-rm{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line2);
  background:var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:.9rem; }
.el-mem .m-rm:hover{ background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%, transparent); }

/* a compact grade chip (mono) */
.el-grade{ display:inline-flex; align-items:center; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  font-family:var(--mono); padding:.04rem .4rem; border-radius:var(--r-pill);
  background:var(--surface2); color:var(--ink2); border:1px solid var(--line2); }

/* ============================================================
   ADD-ORDER PICKER (drawer) — settled orders available to pack.
   add = direct (non-destructive, no confirm).
   ============================================================ */
.el-pick{ border:1.5px dashed var(--line2); border-radius:var(--r); background:var(--surface2); overflow:hidden; }
.el-pick .pk-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:.6rem var(--s4); border-bottom:1px solid var(--line); }
.el-pick .pk-head .pk-k{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:var(--fw-bold); }
.el-pickrow{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  border-top:1px solid var(--line); background:var(--surface); }
.el-pickrow:first-of-type{ border-top:0; }
.el-pickrow .pk-main{ flex:1; min-width:0; }
.el-pickempty{ padding:var(--s4); font-size:var(--fs-xs); color:var(--muted); text-align:center; }

/* ============================================================
   GACC TRACEABILITY MANIFEST (drawer) — per member order → source
   orchard credential. PUBLIC-SAFE whitelist ONLY (tambon-level,
   cert STATUS). Never coords / name / phone / cert-number (PDPA,
   deal-gated). Cert status uses the live .pv ladder (✓ ◷ 🔒).
   ============================================================ */
.el-manhead{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s2); }
.el-manhead .mh-rdy{ font-size:var(--fs-xs); color:var(--ink2); }
.el-manhead .mh-rdy b{ font-family:var(--mono); color:var(--pv-verified); }
.el-trace{ display:flex; flex-direction:column; gap:var(--s3); }
.el-tcard{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:var(--s3) var(--s4); box-shadow:var(--sh-sm); }
.el-tcard .tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); }
.el-tcard .tc-ref{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted); }
.el-tcard .tc-ttl{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink);
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:1px; }
.el-tcard .tc-qty{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-xs);
  color:var(--ink2); font-weight:var(--fw-semi); white-space:nowrap; }
.el-tcard .tc-src{ display:flex; align-items:center; gap:.4rem; margin-top:.4rem;
  font-size:var(--fs-xs); color:var(--ink2); }
.el-tcard .tc-src .ic{ width:14px; height:14px; flex:0 0 14px; color:var(--brand2); display:inline-flex; }
.el-tcard .tc-src .ic svg{ width:100%; height:100%; display:block; }
.el-tcard .tc-certs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--line); }
/* a labelled cert chip = the .pv ladder + a small caption above the glyph */
.el-cert{ display:inline-flex; flex-direction:column; gap:.2rem; }
.el-cert .ck{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }

/* ============================================================
   CONFIRM (destructive gate) + TOAST + danger button
   reuses .scrim / .sheet from supply.components.css
   ============================================================ */
.btn.danger{ background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.danger:hover{ background:color-mix(in srgb,var(--bad) 86%, #000); border-color:color-mix(in srgb,var(--bad) 86%, #000); box-shadow:var(--sh-sm); }
.btn.danger.ghost{ background:transparent; color:var(--bad); border-color:transparent; }
.btn.danger.ghost:hover{ background:var(--bad-bg); box-shadow:none; }

.el-confic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom:.6rem;
  background:var(--bad-bg); color:var(--bad); font-size:1.3rem; }
.el-confacts{ display:flex; gap:var(--s3); margin-top:var(--s5); }
.el-confacts .btn{ flex:1; justify-content:center; }

.el-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px); z-index:200;
  background:var(--ink); color:var(--surface); font-size:var(--fs-sm); font-weight:var(--fw-semi);
  padding:.6rem 1.05rem; border-radius:var(--r-pill); box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:90vw; text-align:center; }
.el-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   WBBODY scaffolding — list head + status filter (reuses .wbsec /
   .wbtab) + the create CTA.
   ============================================================ */
.el-listhead{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.el-listhead .lh-count{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink2); font-size:var(--fs-sm); }
.el-listhead .lh-count b{ color:var(--ink); }

@media (max-width:560px){
  .el-confacts{ flex-direction:column-reverse; }
  .el-statusblock .sb-acts .btn{ flex:1 1 100%; }
}