/* ===== Zákaznický portál stavu zakázek ===== */

.portal { padding: 40px 0 80px; }
.portal__h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin: 0 0 24px; color: var(--ink, #1a1a1a); }

/* --- přihlášení --- */
/* 520 px bylo na tyhle věty málo - lámaly se po třech čtyřech slovech
   a vypadalo to rozsekaně. 720 px je nechá na dvou řádcích a pořád drží
   řádek v pohodlné délce na čtení. Pole uvnitř formuláře si šířku
   omezují sama (níž), aby se e-mailový input neroztáhl přes celou kartu. */
.portal-login { max-width: 720px; }
.portal-login__lead { color: var(--muted, #666); font-size: 15px; line-height: 1.6; margin: 0 0 20px; text-wrap: pretty; }
.portal-login__form { display: flex; flex-direction: column; gap: 12px; background: var(--bg-soft, #fff1e6); border: 1px solid var(--line, #e6e6e6); border-radius: 12px; padding: 24px; }
.portal-login__form label { font-weight: 600; font-size: 14px; color: var(--ink, #1a1a1a); }
.portal-login__form input[type="text"] { font: inherit; font-size: 16px; font-family: monospace; padding: 12px 14px; border: 1px solid var(--line, #ccc); border-radius: 8px; width: 100%; box-sizing: border-box; }
.portal-login__form .btn { align-self: flex-start; }
.portal-login__help { font-size: 13px; color: var(--muted, #666); margin: 16px 0 0; line-height: 1.55; max-width: 620px; text-wrap: pretty; }

/* --- alerty --- */
.portal-alert { border-radius: 8px; padding: 14px 18px; margin: 0 0 18px; font-size: 14px; line-height: 1.55; }
.portal-alert--err  { background: #fdecea; border: 1px solid #f5c6c0; color: #7d1a14; }
.portal-alert--warn { background: #fff6e6; border: 1px solid #f3d9a6; color: #7a5300; }

/* --- toolbar --- */
.portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.portal-toolbar__title { font-size: 18px; font-weight: 700; color: var(--ink, #1a1a1a); }
.portal-count { display: inline-block; background: var(--accent, #ed7d31); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: middle; }
.portal-toolbar__actions { display: flex; gap: 8px; }
.btn--sm { padding: 7px 14px !important; font-size: 13px !important; }

/* --- ovládání tabulky --- */
.orders-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 14px; }
.orders-search { flex: 1 1 260px; font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--line, #ccc); border-radius: 8px; }
.orders-filter { display: inline-flex; border: 1px solid var(--line, #ccc); border-radius: 8px; overflow: hidden; }
.orders-filter__btn { background: #fff; border: none; padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; color: var(--muted, #666); }
.orders-filter__btn + .orders-filter__btn { border-left: 1px solid var(--line, #ccc); }
.orders-filter__btn.is-active { background: var(--accent, #ed7d31); color: #fff; font-weight: 600; }

/* --- tabulka --- */
.orders-table-wrap { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.orders-table th, .orders-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line, #eee); vertical-align: top; }
.orders-table th { background: var(--bg-soft, #f7f7f7); font-weight: 600; color: var(--ink, #1a1a1a); white-space: nowrap; position: sticky; top: 0; }
/* Řaditelná záhlaví - Zakázka, Projekt a Termín dodání. Bez šipek a bez
   dalších značek: zkoušely se (2026-09-01) a uživatel je zamítl, protože
   braly šířku a tabulka se přestala vejít.
   Že je sloupec klikací, prozradí kurzor a přebarvení při najetí.
   Stav se schválně NEŘADÍ. */
.orders-table th.is-sortable { cursor: pointer; user-select: none; }
.orders-table th.is-sortable:hover { color: var(--accent, #ed7d31); }
.orders-table th.is-sortable::after { content: "↕"; margin-left: 4px; font-size: 11px; opacity: .35; }
.orders-table th.is-asc::after { content: "▲"; opacity: 1; color: var(--accent, #ed7d31); }
.orders-table th.is-desc::after { content: "▼"; opacity: 1; color: var(--accent, #ed7d31); }
.orders-table th.num, .orders-table td.num { text-align: right; }
.orders-table .td-build { font-weight: 700; font-variant-numeric: tabular-nums; }
.orders-table .td-project { max-width: 320px; overflow-wrap: break-word; }
/* Kusy (2026-10-06): tabulková čísla vpravo; „více množství“ / „multiple quantities“ se smí zalomit */
.orders-table .td-qty { font-variant-numeric: tabular-nums; }
.orders-table .td-qty .qty-txt { display: inline-block; font-size: 12px; line-height: 1.3; color: var(--muted, #666); }
/* dodané kusy při částečné dodávce (2026-10-07): „50 / 200“ – dodaná část zvýrazněná */
.orders-table .td-qty .qty-dod { color: var(--accent, #ed7d31); font-weight: 700; cursor: help; }
.orders-row:hover { background: #fffaf4; }
.orders-table tr.orders-row { cursor: pointer; }
/* Pevné rozvržení: rozbalený detail (colspan) nesmí měnit šířky sloupců ani tabulky (majitel 2026-09-21).
   Šířky drží záhlaví, detail je mimo výpočet šířky (min-width 0, obsah se přizpůsobí buňce). */
.orders-table { table-layout: fixed; }
.orders-table thead th:nth-child(1) { width: 84px; }
.orders-table thead th:nth-child(3) { width: 80px; }     /* Kusy (2026-10-06); Komponenty a DPS o 2 % užší - Projekt */
.orders-table thead th:nth-child(4) { width: 200px; }   /* má dál ~190 px při šířce stránky 1180 px */
.orders-table thead th:nth-child(5) { width: 13%; }
.orders-table thead th:nth-child(6) { width: 12%; }
.orders-table thead th:nth-child(7) { width: 13%; }
.orders-table thead th:nth-child(8) { width: 120px; }
.orders-table thead th:nth-child(9) { width: 60px; }
/* tablet (2026-10-06, sloupec Kusy): pod touto šířkou by se Projekt drtil po písmenech - tabulka se radši posune
   vodorovně (orders-table-wrap overflow-x); Projekt má pak aspoň tolik jako dřív při okně 1024 px. Telefon má kartu. */
@media (min-width: 641px) { .orders-table { min-width: 1060px; } }
.orders-table th.col-in, .orders-table td.col-in { min-width: 0; }
.orders-detail-row > td { max-width: 0; overflow: visible; }
.orders-detail-row .od { width: 100%; min-width: 0; }
.orders-table tr.orders-row:focus-visible { outline: 2px solid var(--accent, #ed7d31); outline-offset: -2px; }
/* podbarvení rozbaleného řádku odvozené JEN ze stavu tlačítka +/− (jediný zdroj pravdy, 2026-09-21) */
.orders-table tr.orders-row:has(.orders-detail-toggle[aria-expanded="true"]) { background: #fff4ea; }
.col-detail { width: 1%; text-align: center; }

.orders-detail-toggle { width: 28px; height: 28px; border: 1px solid var(--line, #ccc); background: #fff; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--accent, #ed7d31); }
.orders-detail-toggle[aria-expanded="true"] { background: var(--accent, #ed7d31); color: #fff; }
.orders-detail-row > td { background: #fafafa; padding: 0 12px 12px; }

.orders-nomatch { text-align: center; color: var(--muted, #666); padding: 24px; font-size: 14px; }

/* --- detail grid (řádek i order karta) --- */
.order-detail-grid, .order-card__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 24px; margin: 12px 0 0; }
.order-detail-grid__row, .order-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #eee; }
.order-detail-grid dt, .order-card__row dt { color: var(--muted, #666); font-size: 13px; }
.order-detail-grid dd, .order-card__row dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: break-word; }

/* nadpis sekce v detailu (Stav výroby / Termíny) */
.order-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #666); margin: 20px 0 6px; }

/* --- order karta (order scope) --- */
.order-card { border: 1px solid var(--line, #e6e6e6); border-radius: 12px; padding: 24px; max-width: 760px; }
.order-card__head { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.order-card__build { font-size: 24px; font-weight: 800; color: var(--ink, #1a1a1a); }

/* --- stav (lifecycle): barevná tečka + text, žádná pilulka --- */
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot.dot-green   { background: #2f9e56; }
.status-dot.dot-amber   { background: #e08a2b; }
.status-dot.dot-blue    { background: #2f74c0; }
.status-dot.dot-neutral { background: #9aa4af; }
.status-dot.dot-hollow  { background: transparent; box-shadow: inset 0 0 0 1.5px #9aa4af; }  /* archivovaná nabídka */

/* --- sloupce vstupů (komponenty / šablona / DPS): čistý obarvený text --- */
.orders-table th.col-in { white-space: nowrap; }   /* jen hlavicka; hodnoty se zalamuji nize */
/* Status sloupce (Komponenty/Šablona/DPS) drží min. šířku, aby se krátké
   dvojslovné stavy ("K objednání", "Není potřeba") nelámaly na dva řádky.
   Dlouhé ("Předpokládané dodání: datum") se pořád zalomí - to je v pořádku. */
.orders-table th.col-in, .orders-table td.col-in { min-width: 140px; }
.cs-pos { color: #1f7a42; font-weight: 600; }
.cs-neg { color: #b3261e; font-weight: 600; }
.cs-wip { color: #b4611c; font-weight: 600; }
.cs-neutral { color: #444; }
.cs-na { color: #c4c4c4; }

/* Čipy stavu vstupů v tabulce (PORTCIPY 2026-10-08, majitel): pos zelená = skladem / dodáno, wip oranžová =
   objednáno / čeká na dodání, neg JEMNĚ červená (ne sytá) = ještě neobjednáno, neutral šedá = bez DPS, ověřujeme.
   Stejné odstíny jako štítky na časové ose detailu (.od-mini--*). */
/* PORTCIPY 2 (majitel: „něco rozumně velkého“): vždy JEDEN řádek, malé písmo, nejvýš šířka buňky; co se nevejde,
   končí „…“ a celý text je v bublině (title). */
.st-chip { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 1px 7px; border-radius: 6px;
           border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 18px; vertical-align: middle;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orders-table tr.orders-row > td.col-in { white-space: nowrap; overflow: hidden; }
.st-chip--pos     { color: #1f7a42; background: #eaf6ee; border-color: #c3e6cf; }
.st-chip--wip     { color: #9a5a17; background: #fff3e6; border-color: #f3d3ae; }
.st-chip--neg     { color: #a8423b; background: #fdf1f0; border-color: #f2d0cc; }
.st-chip--neutral { color: #555b62; background: #f3f4f6; border-color: #e3e5e8; font-weight: 500; }

/* barvení hodnot v detailu: pozitivní zelená, negativní červená, rozpracované oranžová */
.order-detail-grid dd.tone-pos, .order-card__row dd.tone-pos { color: #1f7a42; }
.order-detail-grid dd.tone-neg, .order-card__row dd.tone-neg { color: #b3261e; }
.order-detail-grid dd.tone-wip, .order-card__row dd.tone-wip { color: #b4611c; }

@media (max-width: 600px) {
  .order-detail-grid, .order-card__grid { grid-template-columns: 1fr; }
  .portal-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ---- Lišta testovacího režimu ----
   Schválně křiklavá. Kdyby testovací režim zůstal omylem zapnutý na ostrém
   provozu, musí to praštit do očí na první pohled. */
.portal-testbar {
  background: #7a1f1f;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 0 20px;
  border: 2px solid #ff4d4d;
}

/* ---- Přihlašovací obrazovky (e-mail + ověřovací kód) ---- */
.portal-login__h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.portal-login__form input[type="text"].portal-code-input {
  font-family: Consolas, Menlo, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-align: center;
  padding: 14px 12px;
  text-indent: 0.34em;   /* vyrovná mezeru za poslední číslicí */
}

/* Základní pravidlo výš (`.portal-login__form input[type="text"]`) cílí jen na
   text, takže pole na e-mail by jinak zůstalo ÚPLNĚ bez stylu - výchozí
   prohlížečové políčko uprostřed oranžové karty. Monospace tu nechceme,
   ta patří jen ke kódu. */
.portal-login__form input[type="email"] {
  font: inherit;
  font-size: 16px;       /* pod 16px iOS při fokusu zoomuje */
  padding: 12px 14px;
  border: 1px solid var(--line, #ccc);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.portal-login__help a {
  color: #ed7d31;
  text-decoration: underline;
}

.portal-login__help a:hover { color: #cf6620; }

/* ---- Doslovný propis dat z API ----
   Hodnoty ze systému bývají i celé věty ("Komplet; Neosazovat THT: SLW-106-01-G-S"),
   takže se buňky musí umět zalomit, jinak tabulka roztáhne stránku do šířky. */
.orders-table td.col-in,
.orders-table td.td-project {
  max-width: 260px;
  white-space: normal;
  /* break-word (ne anywhere): dlouhý řetězec bez mezer se zalomí, až když
     se do buňky nevejde. Krátká slova ("Skladem", "Připravena") zůstanou
     vcelku - anywhere je dřív lámalo doprostřed ("Sklade / m"), aby sloupec
     zúžilo. word-break: break-word odstraněno, dělalo totéž. */
  overflow-wrap: break-word;
  line-height: 1.4;
}

.order-card__grid dd {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ---- Komu zakázky patří / pod kterým e-mailem ---- */
.portal-whoami {
  font-size: 14px;
  color: var(--muted, #666);
  margin: -12px 0 20px;
  line-height: 1.6;
}
.portal-whoami strong { color: var(--ink, #1a1a1a); }
.portal-whoami__sep { margin: 0 6px; color: var(--line, #ccc); }
.portal-whoami__mail { display: inline-block; margin-left: 14px; }

@media (max-width: 600px) {
  .portal-whoami__mail { display: block; margin: 4px 0 0; }
}

/* Původní zápis z Excelu pod odvozeným stavem - detail zakázky. */
.order-note {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted, #666);
  margin-top: 2px;
}


/* ---- Šířka polí v širší přihlašovací kartě ----
   Karta je kvůli textům široká 720 px, ale roztáhnout na celou tuhle šířku
   políčko na e-mail nebo šestimístný kód by vypadalo divně. */
.portal-login__form input[type="email"] { max-width: 420px; }
.portal-login__form input[type="text"].portal-code-input { max-width: 300px; }

/* ---- Tlačítka pod kódem ---- */
/* Tlacitka "Poslat kod znovu" a "Zadat jiny e-mail" pod sebou.
   Driv to byl radek s odpoctem; odpocet zmizel (2026-09-01) a druhy odkaz
   byl jen nenapadny text v paticce, tak je z nej taky tlacitko. */
.portal-resend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
}

.portal-resend__btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #ed7d31;
  background: none;
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

.portal-resend__btn:hover:not(:disabled) { background: #fff1e6; border-color: #ed7d31; }

.portal-resend__btn:disabled {
  color: var(--muted, #999);
  cursor: not-allowed;
  opacity: .65;
}

.portal-resend__timer {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #666);
  font-variant-numeric: tabular-nums;   /* ať odpočet neposkakuje do šířky */
}
/* =====================================================================
   DETAIL ZAKÁZKY – redesign 2026-09-21
   Dominanta = deska ve skutečných barvách na neutrálně šedé ploše (u černé masky nesplývá).
   Identita → časová osa → desky TOP | BOT → technologie (štítky) → dokumenty (čipy).
   ===================================================================== */
.orders-detail-row > td { background: #f7f7f8; padding: 0 12px 18px; }
.od { --od-ink: var(--ink, #1a1a1a); --od-muted: var(--muted, #666); --od-line: #e3e3e6; --od-acc: var(--accent, #ed7d31);
      --od-ok: #1f8a4c; --od-stage: #d9dcdf; --od-stage2: #c9cdd2;
      display: grid; gap: 16px; padding-top: 14px; color: var(--od-ink); }

/* --- identita --- */
.od-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.od-id { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.od-zk { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.od-proj { font-size: 18px; font-weight: 700; color: var(--od-ink); overflow-wrap: anywhere; }
.od-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font-size: 14px; font-weight: 600; }
.od-meta span { font-weight: 400; color: var(--od-muted); margin-right: 3px; }
.od-meta--miss { color: #b3261e; }
.od-meta--cast { color: var(--od-acc); }      /* částečná dodávka „Dodáno 50 z 200 ks“ (2026-10-07) */

/* --- časová osa --- */
.od-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: od; }
.od-step { position: relative; padding: 22px 8px 0 0; font-size: 13px; color: var(--od-muted); }
.od-step::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: var(--od-line); border-radius: 3px; }
.od-step--done::before { background: var(--od-ok); }
.od-step--now::before { background: linear-gradient(90deg, var(--od-acc) 0 45%, var(--od-line) 45%); }
.od-step__dot { position: absolute; top: 2px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff;
                border: 3px solid var(--od-line); box-sizing: border-box; }
.od-step--done .od-step__dot { background: var(--od-ok); border-color: var(--od-ok); }
.od-step--done .od-step__dot::after { content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 6px;
                border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.od-step--now .od-step__dot { border-color: var(--od-acc); box-shadow: 0 0 0 4px rgba(237,125,49,.18); }
.od-step__lbl { display: block; font-weight: 600; }
.od-step--done .od-step__lbl { color: var(--od-ink); }
.od-step--now .od-step__lbl { color: var(--od-acc); }
.od-step__items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.od-mini { font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--od-line); background: #fff; cursor: default; }
.od-mini--ok { color: var(--od-ok); border-color: #b9e0c8; background: #eff9f3; }
.od-mini--ok::before { content: "✓ "; }
.od-mini--wait { color: #9a5a17; border-color: #f0d2b0; background: #fff6ec; }
/* PORTCIPY 2026-10-08: tón štítku = tón čipu v tabulce (wait zůstává pro starší šablonu) */
.od-mini--wip { color: #9a5a17; border-color: #f3d3ae; background: #fff3e6; }
.od-mini--neg { color: #a8423b; border-color: #f2d0cc; background: #fdf1f0; }
.od-mini--neutral { color: #555b62; border-color: #e3e5e8; background: #f3f4f6; }

/* --- desky: neutrálně šedá scéna, TOP | BOT vedle sebe --- */
.od-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 22px 16px;
            border-radius: 14px; background: radial-gradient(120% 140% at 50% 0%, var(--od-stage) 0%, var(--od-stage2) 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.06); }
.od-stage:has(.od-board:only-of-type) { grid-template-columns: 1fr; }
.od-board { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.od-board__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.od-board__btn:focus-visible { outline: 3px solid var(--od-acc); outline-offset: 4px; }
.od-board img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain;
                /* hrana desky i u černé masky: jemný stín a světlý obrys místo černé plochy */
                filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 10px 18px rgba(0,0,0,.28));
                transition: transform .25s ease; }
.od-board__btn:hover img { transform: translateY(-2px) scale(1.01); }
.od-board figcaption { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4a4f55; }
.od-stage__note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #4a4f55; text-align: center; }

/* --- technologie --- */
.od-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.od-tech li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 6px;
              background: #fff; border: 1px solid var(--od-line); color: var(--od-ink); white-space: nowrap; }
.od-tech i { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* --- dokumenty: čipy --- */
.od-docs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.od-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
           padding: 7px 13px; border-radius: 6px; text-decoration: none; line-height: 1.2; border: 1.5px solid; }
.od-chip--on { color: var(--od-ok); border-color: var(--od-ok); background: #fff; cursor: pointer; }
a.od-chip--on:hover, .od-chip--multi > summary:hover { background: #eff9f3; }
.od-chip--off { color: #a9adb3; border-color: #dcdfe3; border-style: dashed; background: transparent; font-weight: 500; }
.od-chip--track { color: #1f4f8f; border-color: #8fb1dd; }
a.od-chip--track:hover { background: #eef4fc; }
span.od-chip--track { cursor: default; }
.od-chip--track b { font-weight: 700; }
/* stav doručení zásilky (29.09.2026) */
.od-ship { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 8px;
           border-left: 1px solid #c9d7ea; font-weight: 600; white-space: nowrap; }
.od-ship i { font-style: normal; font-weight: 800; }
.od-ship--ok { color: #1e7d45; }
.od-ship--go { color: #1f4f8f; font-weight: 500; }
.od-ship--warn { color: #b3261e; }
.od-ship--warn i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
                   background: #b3261e; color: #fff; font-size: 11px; }
.od-chip--multi { display: inline-block; padding: 0; }
.od-chip--multi > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; cursor: pointer; }
.od-chip--multi > summary::-webkit-details-marker { display: none; }
.od-chip__n { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--od-ok); color: #fff; font-size: 11.5px; text-align: center; }
.od-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 260px; max-width: min(460px, 86vw);
           margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--od-line); border-radius: 10px;
           box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.od-menu a { display: block; padding: 7px 9px; border-radius: 7px; color: var(--od-ink); font-size: 13px; font-weight: 500;
             text-decoration: none; overflow-wrap: anywhere; }
.od-menu a:hover { background: #f3f4f6; color: var(--od-acc); }
/* karta dokladu ve výběru: číslo tučně, modul, štítky; položky oddělené čarou (majitel 2026-09-21) */
.od-menu li + li { border-top: 1px solid #eceef1; }
.od-menu a.od-mi { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; align-items: baseline;
                   padding: 9px 10px; overflow-wrap: normal; }
.od-mi__num { font-weight: 700; color: var(--od-ink); white-space: nowrap; }
.od-mi__mod { color: #3b4047; min-width: 0; overflow-wrap: anywhere; }
.od-mi__num + .od-mi__mod { }
.od-mi__mod:only-child { grid-column: 1 / -1; }
.od-mi__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.od-mi__tags i { font-style: normal; font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 6px;
                 background: #f1f3f5; color: #4a4f55; white-space: nowrap; }
.od-menu a.od-mi:hover .od-mi__num { color: var(--od-acc); }

/* --- filtr seznamu: je vidět, co je zapnuté --- */
.orders-filter__btn .n { font-weight: 400; opacity: .8; }
.orders-shown { font-size: 13.5px; color: var(--od-muted, #666); margin: -4px 0 12px; }
.orders-shown strong { color: var(--ink, #1a1a1a); }
.orders-shown button { font: inherit; color: var(--accent, #ed7d31); background: none; border: 0; padding: 0; cursor: pointer;
                       text-decoration: underline; font-weight: 600; }

/* --- zvětšení náhledu desky: sdílený prohlížeč (dps-prohlizec.css); tady jen zámek posuvu stránky --- */
html.odlb-open { overflow: hidden; }

/* --- telefon --- */
@media (max-width: 640px) {
  /* telefon: řádek zakázky jako karta (číslo · stav · detail, pod tím projekt a vpravo kusy „20 ks“), detail na celou
     šířku */
  .orders-table-wrap { overflow-x: visible; }
  .orders-table, .orders-table tbody { display: block; width: 100%; }
  .orders-table thead { display: none; }
  .orders-table tr.orders-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "b s d" "p p q";
                                align-items: center; column-gap: 10px; row-gap: 4px; padding: 10px 4px; border-bottom: 1px solid var(--line, #eee); }
  .orders-table tr.orders-row[hidden], .orders-table tr.orders-detail-row[hidden] { display: none; }
  .orders-table tr.orders-row > td { border: 0; padding: 0; max-width: none; min-width: 0; }
  .orders-table tr.orders-row > td:nth-child(1) { grid-area: b; }
  .orders-table tr.orders-row > td:nth-child(2) { grid-area: p; color: var(--muted, #666); }
  .orders-table tr.orders-row > td:nth-child(3) { grid-area: q; justify-self: end; white-space: nowrap; color: var(--muted, #666); }
  .orders-table tr.orders-row > td:nth-child(4) { grid-area: s; }
  .orders-table tr.orders-row > td:nth-child(9) { grid-area: d; width: auto; justify-self: end; }
  .orders-table tr.orders-row > :nth-child(n+5):nth-child(-n+8) { display: none; }
  .orders-table tr.orders-row > td.td-qty[data-unit]::after { content: "\00a0" attr(data-unit); }
  .orders-table tr.orders-row > td.td-qty:has(> .cs-na) { visibility: hidden; }
  .orders-table tr.orders-detail-row, .orders-table tr.orders-detail-row > td { display: block; }
  .od, .od > * { min-width: 0; }
  .od, .od > * { min-width: 0; }
  .od-tech li { white-space: normal; }
  .od-chip--multi { position: static; }
  .od-menu { left: 0; right: 0; min-width: 0; max-width: none; }
  .orders-detail-row > td { padding: 0 6px 14px; }
  .od-zk { font-size: 22px; }
  .od-proj { font-size: 15px; }
  .od-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .od-step { font-size: 11.5px; padding-right: 4px; }
  .od-step__items { display: none; }
  .od-step--now .od-step__items { display: flex; grid-column: 1 / -1; }
  .od-stage { grid-template-columns: 1fr; gap: 14px; padding: 16px 12px 12px; }
  .od-board img { max-height: 260px; }
  .od-chip { font-size: 13px; padding: 6px 11px; }
}