/* Kontex Ventes — Relevés livreurs (#/livreurs, Expédition card, Paramètres › Livreurs).
   Spec: design/13-phase2-spec.md §2.S. Kontex Design System only (tokens of /kontex.css): one amber element per
   screen at most (the page's, never here), Teal 700 actions, Plex Mono for money and refs, no horizontal scroll at
   390 px (tables become stacked cards under 768 px). Every class is prefixed "cod-". */

/* KPI money values: long amounts stay on one line in the tile */
.cod-kpi-money{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a word in a money tile (« Conforme ») is text, not a number: Poppins */
.cod-kpi-word{font-family:var(--kx-font-sans);font-variant-numeric:normal}
.cod-kpis{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
/* the statement's six tiles: two rows of three */
.cod-kpis--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.cod-nw{white-space:nowrap}
.cod-period{font-weight:500;color:var(--text3);font-size:18px}
.cod-late{color:var(--late-text)}

/* row actions: a wrapping cluster of small buttons */
.cod-acts{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* import drawer: drop zone, column mapping */
.cod-drop{display:flex;align-items:center;gap:12px;padding:16px;border:1px dashed var(--border-strong);border-radius:var(--kx-radius-sm);background:var(--bg);cursor:pointer;color:var(--brand-text);min-width:0}
.cod-drop:hover{background:var(--tint);border-color:var(--identity)}
.cod-drop:has(input:focus-visible){box-shadow:var(--focus)}
.cod-drop>span{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--text)}
.cod-drop b{font:600 14px/1.4 var(--kx-font-sans);overflow-wrap:anywhere}
.cod-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cod-drop{position:relative}
.kx-drawer.cod-drawer:focus,.kx-drawer.cod-drawer:focus-visible{outline:none;box-shadow:var(--kx-shadow-overlay)}
.cod-map,.cod-fold{min-width:0}
.cod-map>summary,.cod-fold>summary{cursor:pointer;list-style:none}
.cod-map>summary{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.4 var(--kx-font-sans);color:var(--brand-text)}
.cod-map>summary::before,.cod-fold>summary h2::before{content:"";width:6px;height:6px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(-45deg);display:inline-block;margin-inline-end:8px;transition:transform var(--kx-dur-micro) var(--kx-ease)}
.cod-map[open]>summary::before,.cod-fold[open]>summary h2::before{transform:rotate(45deg)}
.cod-map>summary::-webkit-details-marker,.cod-fold>summary::-webkit-details-marker{display:none}
.cod-map .form-grid{margin-top:12px}
.cod-fold>summary h2{display:inline-flex;align-items:center}

/* order card: the reference to paste, linked statement rows */
.cod-refbox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:var(--kx-radius-sm);background:var(--bg)}
.cod-refbox .mono{font:600 16px/1.4 var(--kx-font-mono);color:var(--brand-text)}
.cod-refline{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.cod-links,.cod-refused{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cod-links li{display:flex;gap:8px;align-items:flex-start;font:400 13px/1.5 var(--kx-font-sans);color:var(--text2)}
.cod-links li>span{display:inline-flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.cod-refused{padding:0 20px 20px}
.cod-refused li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font:400 13px/1.5 var(--kx-font-sans)}
.cod-refused .hint{flex-basis:100%}
.cod-jobship .cluster{gap:10px}
.cod-jobship .ico{color:var(--brand-text)}
.callout.cod-cancelled{background:var(--neu-bg);color:var(--neu-text)}

/* transfer split */
.cod-split .hint{margin-inline-start:6px}

/* courier settings: inputs sized for 3-decimal amounts */
.cod-couriers .kx-input.num{width:110px;height:36px;text-align:end;margin-inline-start:auto}

/* phones: tables become stacked cards (one card per row, label on the left, value on the right) */
@media (max-width:767px){
  .kx-table.cod-stack thead{display:none}
  .kx-table.cod-stack,.kx-table.cod-stack tbody,.kx-table.cod-stack tr{display:block;width:100%}
  .kx-table.cod-stack tbody tr{padding:8px 0;border-bottom:1px solid var(--border)}
  .kx-table.cod-stack tbody tr:last-child{border-bottom:none}
  .kx-table.cod-stack tbody td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;height:auto;padding:6px 16px;border-bottom:none;text-align:end;min-width:0;overflow-wrap:anywhere}
  .kx-table.cod-stack tbody td::before{content:attr(data-label);flex-shrink:0;max-width:45%;text-align:start;font:600 11px/1.6 var(--kx-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
  .kx-table.cod-stack tbody td>.cod-v{min-width:0;text-align:end}
  .kx-table.cod-stack tbody td.num{white-space:normal}
  .kx-table.cod-stack td .sub{text-align:end}
  .kx-table.cod-stack .chips{flex-wrap:wrap;justify-content:flex-end}
  .kx-table.cod-stack .kx-chip{white-space:normal;text-align:start;max-width:100%;height:auto;min-height:22px;padding:4px 8px;line-height:1.3}
  .kx-table.cod-stack td.actions{white-space:normal;justify-content:flex-start;flex-direction:column;align-items:stretch}
  .kx-table.cod-stack td.actions::before{display:none}
  .kx-table.cod-stack td.actions>.cod-v{text-align:start}
  .kx-table.cod-stack td.actions .cod-acts{justify-content:flex-start}
  .kx-table.cod-stack td.actions .kx-btn{min-height:40px}
  .kx-table.cod-stack tbody tr:hover td{background:transparent}
  .cod-couriers .kx-input.num{width:120px}
  .cod-kpis,.cod-kpis--6{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kx-table.cod-stack .cod-nw{white-space:normal}
  .cod-kpis .kx-kpi{padding:14px}
  .cod-kpi-money{font-size:18px}
  .cod-period{font-size:15px}
  .cod-drop{padding:14px 12px}
  /* order card: full-width touch targets */
  .cod-shipacts{flex-direction:column;align-items:stretch}
  .cod-shipacts .kx-btn{width:100%;justify-content:center}
}