/* K6 dizajnu administrácie (V7, rozhodnutie K9-ORCH-8), od A8b vzhľad V6.2 (REDIZAJN-V6-2/PLAN.md riadok A8b): obrazovka Expedícia.
   Hodnoty z prototypu V6.2 (OTVORIT-PROTOTYP-V6.2.html riadky 841 až 843 a 4770 až 4790), farby z tokenov.
   Načítava sa za operations-v7.css, teda aj za operations-dispatch.css a dispatch-read-view.css; kit components-v62.css ide neskôr,
   jeho pravidlá prepisuje vyššia špecificita .dispatch-read. Všetko iba pod .dispatch-read. Bez !important, bez ID selektorov, bez vlastných tokenov. */
.dispatch-read{container:dispatch-read/inline-size}

/* Pás súhrnu: biely pruh s číslami v riadku (expstrip V6.2); vysvetlivka v ďalšom riadku pruhu. */
.dispatch-read>.dispatch-read-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;min-width:0;padding:10px 14px;
 border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:var(--text-sm);line-height:1.45;color:var(--ink-2)}
.dispatch-read .dispatch-read-fact{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;min-width:0}
.dispatch-read .dispatch-read-fact-value{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dispatch-read .dispatch-read-fact-note{color:var(--muted);font-size:var(--text-xs);overflow-wrap:anywhere}
.dispatch-read .dispatch-read-band-note{flex-basis:100%;margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--muted)}

/* Pohľady: dlaždice-filtre kitu (metricStrip), šesť v rade; popis sa zalomí namiesto orezania, číslo ostáva v jednej línii. */
.dispatch-read .v62-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;padding-bottom:0}
.dispatch-read .v62-tile-label{white-space:normal;overflow-wrap:anywhere}
.dispatch-read .v62-tile-value{margin-top:auto}

/* Panel zoznamu: Zobraziť všetko vpravo v hlavičke. */
.dispatch-read .dispatch-list .panel-head{flex-wrap:wrap}
.dispatch-read .dispatch-read-reset{flex:0 0 auto}

/* Zoznam ako tabuľka V6.2 (exptbl): hlavička stĺpcov a riadky v rovnakých stĺpcoch, bunky zarovnané hore, akcia vpravo.
   Dôvody kontroly idú cez celý riadok pod bunky. Mriežku a miesta buniek z operations-dispatch.css prepisuje vyššia špecificita. */
.dispatch-read .dispatch-list .dispatch-row,.dispatch-read .dispatch-read-head{
 grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,1.9fr) 152px;gap:6px 16px}
.dispatch-read .dispatch-list .dispatch-row{grid-template-areas:"id state method counts ship act";align-items:start;padding:12px var(--space-card)}
.dispatch-read .dispatch-read-head{display:grid;padding:9px var(--space-card);border-bottom:1px solid var(--line);background:var(--surface-2);
 color:var(--muted);font-size:var(--text-xs);font-weight:600;line-height:1.3}
.dispatch-read .dispatch-row>.dispatch-identity{grid-area:id;align-items:flex-start}
.dispatch-read .dispatch-row>.dispatch-state{grid-area:state;flex-direction:column;align-items:flex-start;gap:3px}
.dispatch-read .dispatch-row>.dispatch-method{grid-area:method;font-size:var(--text-sm);color:var(--ink-2)}
.dispatch-read .dispatch-row>.dispatch-counts{grid-area:counts}
.dispatch-read .dispatch-row>.dispatch-read-detail{grid-area:ship}
.dispatch-read .dispatch-row>.btn{grid-area:act;justify-self:end;white-space:nowrap}
.dispatch-read .dispatch-row>.dispatch-read-reasons{grid-column:1/-1}

/* Bunky: číslo objednávky ako odkaz, názov tlmene pod ním; zákazník nad stavom. */
.dispatch-read .dispatch-name>.text-link{font-weight:600;font-variant-numeric:tabular-nums}
.dispatch-read .dispatch-list .dispatch-name>h3{font-size:var(--text-xs);font-weight:400;line-height:1.4;color:var(--muted)}
.dispatch-read .dispatch-read-customer{font-size:var(--text-sm);color:var(--ink);overflow-wrap:anywhere}

/* Kusy: voľné kusy ako hlavný údaj (Hotové vo V6.2), ostatné počty ako riadok textu bez rámčekov. */
.dispatch-read .dispatch-row>.dispatch-counts{display:block;font-size:var(--text-xs);line-height:1.5;color:var(--muted)}
/* Popis počtu sa v úzkom stĺpci zalomí (nowrap z operations-dispatch.css iba na čísle), aby dlhé číslo neprečnievalo. */
.dispatch-read .dispatch-counts>.dispatch-count{display:inline-block;margin-right:10px;padding:0;border:0;background:none;white-space:normal}
.dispatch-read .dispatch-counts>.dispatch-count>strong{font-size:inherit;font-weight:600;color:var(--ink);white-space:nowrap}
.dispatch-read .dispatch-counts>.dispatch-count:first-child{display:block;margin-right:0;font-size:var(--text-sm);color:var(--ink-2)}
.dispatch-read .dispatch-counts>.dispatch-count:first-child>strong{font-size:var(--text-md);font-weight:700}

/* Užšia fronta: dlaždice v troch stĺpcoch, riadok v dvoch líniách a zásielky pod ním; hlavička stĺpcov sa skryje. */
@container dispatch-read (max-width:1099px){
 .dispatch-read .v62-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dispatch-read .dispatch-read-head{display:none}
 .dispatch-read .dispatch-list .dispatch-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) max-content;
  grid-template-areas:"id state counts act" "id method counts act" "ship ship ship ship"}
}
@container dispatch-read (max-width:759px){
 .dispatch-read .dispatch-list .dispatch-row{grid-template-columns:minmax(0,1fr) max-content;
  grid-template-areas:"id act" "state method" "counts counts" "ship ship"}
 .dispatch-read .dispatch-row>.dispatch-state{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
 .dispatch-read .dispatch-row>.dispatch-method{justify-self:end}
}
/* Pod 480 px: dlaždice v dvoch stĺpcoch, bunky pod sebou; dôvody kontroly a akcia idú za nimi v poradí DOM, akcia cez celú šírku. */
@container dispatch-read (max-width:479px){
 .dispatch-read .v62-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dispatch-read>.dispatch-read-band{gap:6px 14px;padding:10px 12px}
 .dispatch-read .dispatch-list .dispatch-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "state" "method" "counts" "ship"}
 .dispatch-read .dispatch-row>.dispatch-method{justify-self:start}
 .dispatch-read .dispatch-row>.btn{grid-area:auto;justify-self:stretch;min-height:44px}
}