/* DEZEMA web – doprava: dopravci, box Doprava u zakázky, denní výkaz, soupis, objednávka a protokol. Jen tokeny ze styles.css. */

/* MARK: Seznam dopravců */
.hl-table th { cursor: default; }
.hl-table th:hover { color: var(--text2); }
.hl-table td { vertical-align: middle; }
.hl-cellname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hl-minw { min-width: 0; flex: 1; }
.hl-normal { white-space: normal; font-weight: 500; }
.hl-rowact { text-align: right; }
.hl-chips { margin: 0 0 14px; }
.hl-star { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; flex: none; }
.hl-star:hover { background: var(--segment); }
.hl-staricon { color: var(--muted); flex: none; }
.hl-staricon.on { color: #e0a100; }
.btn.hl-fav { border-color: #e0a100; }
.hl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-vtag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--brownbg); color: var(--brown); white-space: nowrap; }
.hl-vtag.none { background: var(--segment); color: var(--text2); }

/* MARK: Karta dopravce */
.hl-small { font-size: 13px; }
.hl-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.hl-place { margin-top: 0; }
.hl-nomap { margin-left: auto; font-size: 12px; white-space: nowrap; font-weight: 500; }
.hl-round { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.hl-round.green { background: var(--green); color: #fff; }
.hl-round.big { width: 60px; height: 60px; }

/* MARK: Box Doprava u zakázky */
.hl-card .ctitle { flex-wrap: wrap; }
.hl-summary { font-size: 13px; font-weight: 550; }
.hl-route { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.hl-find { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 11px; margin-top: 8px; cursor: pointer; }
.hl-find:hover { border-color: var(--border2); background: var(--hover); }
.hl-find .pr-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--brownbg); color: var(--brown); display: flex; align-items: center; justify-content: center; flex: none; }
.hl-find .pr-main { flex: 1; min-width: 0; }
.hl-find .pr-sub { font-size: 12.5px; color: var(--text2); margin-top: 1px; }
.hl-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-name.big { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.hl-line { font-size: 12.5px; font-weight: 550; color: var(--brown); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.hl-line.red { color: var(--red); }
.hl-click { cursor: pointer; }
.hl-click:hover .hl-name { text-decoration: underline; }
.hl-haul { background: color-mix(in srgb, var(--brown) 4%, var(--card)); }
.hl-haul.paused { background: var(--subtle); }
.hl-haul.paused .hl-name { color: var(--text2); }
.hl-haul.paused .pr-icon { background: var(--segment); color: var(--muted); }
.hl-prog { display: flex; flex-direction: column; gap: 5px; padding: 2px 0 0; }
.hl-prog-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.hl-bar { height: 6px; border-radius: 3px; background: var(--segment); overflow: hidden; }
.hl-bar span { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.hl-trips { background: color-mix(in srgb, var(--green) 6%, var(--card)); border-color: color-mix(in srgb, var(--green) 22%, var(--border)); }
.hl-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* MARK: Okna */
.hl-under { margin-bottom: 8px; }
.hl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); align-items: start; margin-top: 8px; }
.card.hl-fcard { padding: 14px; }
.card.hl-fcard h3 { margin-bottom: 8px; }
.card.hl-fcard > .field:first-of-type { margin-top: 0; }
.hl-modalhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: -8px 0 12px; }
.hl-okhint { color: var(--green); font-weight: 600; }
.hl-picklist { max-height: 46vh; margin-top: 8px; }
/* Hlavní tlačítko je vidět i u dlouhého formuláře (jako v telefonu). */
.hl-foot { position: sticky; bottom: -20px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px -22px -20px; padding: 12px 22px; background: var(--bg); border-top: 1px solid var(--border); }
.hl-foot .savebar { flex: 1; margin-top: 0; }
.hl-foot .err { flex-basis: 100%; margin: 0; }
.hl-grow { flex: 1; justify-content: center; padding: 11px; }
.hl-dim { opacity: .45; }

/* Počty aut a fůrek */
.hl-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--subtle); margin-top: 6px; font-weight: 550; }
.hl-step { display: flex; align-items: center; gap: 8px; }
.hl-step button { width: 30px; height: 30px; border-radius: 50%; background: var(--segment); font-size: 17px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; }
.hl-step button:disabled { opacity: .45; cursor: default; }
.hl-step button.plus { background: var(--brown); color: #fff; }
.hl-step button.plus.green { background: var(--green); color: #fff; }
.hl-step > b { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text2); }
.hl-step > b.on { color: var(--brown); }
.hl-step input { width: 64px; text-align: center; font-weight: 700; padding: 5px 6px; font-variant-numeric: tabular-nums; }
.hl-step input.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--border2)); }
.hl-step.wide input { width: 120px; text-align: right; }
.hl-step.wide > b { min-width: 0; }

/* Dopravci kolem trasy */
.hl-fcard .hl-route { font-size: 14px; }
.hl-radius { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
input.hl-range { padding: 0; border: 0; background: none; accent-color: var(--brown); margin-top: 4px; }
input.hl-range:focus { outline: none; }
.hl-listhead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text2); }
.hl-row .pr-main .hl-tags { margin-top: 4px; }

/* Denní výkaz a soupis */
.hl-dayhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.hl-daypick { display: flex; flex-direction: column; justify-content: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.hl-daypick .lbl { margin: 0 0 4px; }
.hl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.hl-stat { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 0; }
.hl-stat-l { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text2); }
.hl-stat-l i { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.hl-stat b { font-size: 24px; font-weight: 750; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-stat small { font-size: 12px; color: var(--text2); }
.hl-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hl-cardhead > div { min-width: 0; }
.hl-daysum { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text2); white-space: nowrap; }
.hl-daysum.green { color: var(--green); }
.card.hl-days { padding: 2px 14px; }
.hl-dayrow { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 0; text-align: left; border-top: 1px solid var(--border); font-weight: 550; font-variant-numeric: tabular-nums; }
.hl-dayrow:first-child { border-top: 0; }
button.hl-dayrow:hover { color: var(--green); }
.hl-dayrow.on { color: var(--green); font-weight: 650; }
.hl-dayrow .right { font-weight: 650; }
.hl-dayrow small { font-size: 13px; color: var(--text2); min-width: 76px; text-align: right; font-weight: 500; }
.hl-rrow { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-top: 6px; cursor: pointer; }
.hl-rrow:hover { border-color: var(--border2); background: var(--hover); }
.hl-rtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hl-rtitle b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rtitle span { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Objednávka a protokol */
.hl-changes { background: var(--brownbg); border-radius: 10px; padding: 10px 12px; margin-top: 4px; }
.hl-changes-t { font-size: 13px; font-weight: 650; color: var(--brown); }
.hl-changes ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.hl-mail { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hl-mail input, .hl-mail textarea { border: 0; border-radius: 0; background: none; }
.hl-mail input { font-weight: 600; border-bottom: 1px solid var(--border); }
.hl-mail input:focus, .hl-mail textarea:focus { outline: none; }
.hl-sig { padding: 10px 12px; border-top: 1px solid var(--border); font-size: 13px; }
.hl-sig .lbl { margin: 0 0 4px; }
.hl-signstate { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; margin-bottom: 8px; }
.hl-signstate.brown { color: var(--brown); }
.hl-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 0 6px; }

/* Dokumenty */
.hl-docs .hicon.hl-pdf { background: var(--redbg); color: var(--red); }

@media (max-width: 800px) {
  .hl-cols, .hl-dayhead { grid-template-columns: minmax(0, 1fr); }
  .hl-haul { flex-wrap: wrap; }
}

/* MARK: Technika: stroje firem a hledání v okolí */
.tk-noterow { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.tk-noterow b { flex: none; min-width: 84px; font-weight: 600; }
.tk-noterow input { flex: 1; min-width: 0; }
.tk-pick { display: grid; grid-template-columns: 1fr 160px; gap: 10px; margin-top: 10px; }
.tk-pick select { width: 100%; }
.tk-net { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.tk-when { font-size: 12.5px; }
.tk-start { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.tk-result { align-items: flex-start; margin-top: 8px; }
.tk-rhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tk-ev { white-space: normal; margin-top: 3px; }
.tk-known { font-size: 12.5px; white-space: nowrap; align-self: center; }
.tk-missing { border-style: dashed; }
@media (max-width: 640px) { .tk-pick { grid-template-columns: 1fr; } }
.tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-rowtags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.hl-vtag.tk-both { background: color-mix(in srgb, var(--teal) 12%, var(--card)); color: var(--teal); }
.tk-unpriced { display: block; font-size: 12.5px; font-weight: 600; }

/* Soubory z jednoho e-mailu v Dokumentech zakázky */
.hl-docchev { flex: none; color: var(--muted); transition: transform .15s; }
.hl-docchev.on { transform: rotate(90deg); }
.hl-docfiles { margin-left: 18px; }