@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;550;600;650;700;750&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ==========================================================================
   FlexiLife Houses — firemní design systém
   Ink (grafitová z loga) + jantarová (firemní izometrický vzor) na bílé.
   Zelená/červená/modrá jsou vyhrazené pro sémantické stavy, ne pro branding.
   ========================================================================== */
:root {
    /* Grafitová a písková jsou odečtené přímo z loga — jinak by se značka na
       stránce rozešla s papírem, který jde klientovi. */
    --ink: #1d272f;
    --ink-2: #2a3947;
    --ink-3: #3a4b5c;
    --accent: #e1863b;
    /* Tmavší jantarová pro text. Drobné písmo na pískovém podkladu (--accent-tint) musí
       mít aspoň 4,5 : 1 — #b4560c mělo 4,48 : 1, tenhle odstín má 4,8 : 1 (na bílé 5,3 : 1). */
    --accent-strong: #ad520b;
    --accent-soft: #e4be8a;
    --accent-tint: #fdf3e7;
    --accent-line: #f0d9bd;
    --ok: #1e9c44;
    --ok-dark: #14753a;
    --ok-tint: #edf9f1;
    --text: #21262c;
    --text-muted: #66707b;
    --surface-subtle: #f5f6f8;
    --surface: #fff;
    --border: #e0e4e9;
    --border-soft: #eceff2;
    --danger: #b42318;
    --warning: #b76e00;
    --blue: #2563eb;
    --font-display: "Space Grotesk", Inter, system-ui, "Segoe UI", sans-serif;
    font-family: Inter, system-ui, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--surface-subtle);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

/* Titulky nesou charakter značky (Space Grotesk), texty zůstávají v Interu. */
h1, h2, h3 { font-family: var(--font-display); }

* { box-sizing: border-box; }
/* Pruh po posuvníku drží stránka pořád, i když zrovna žádný posuvník nemá.
   Otevřené okno zamyká rolování (níž u .modal-backdrop) a bez rezervovaného
   místa celá stránka při každém otevření i zavření uskočila do strany. */
html { min-width: 320px; background: var(--surface-subtle); scrollbar-gutter: stable; }
body { min-height: 100vh; margin: 0; background: var(--surface-subtle); color: var(--text); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
h1:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.main-content a:not([class]) { color: var(--accent-strong); text-decoration-color: var(--accent-soft); }
.main-content a:not([class]):hover { text-decoration-color: var(--accent-strong); }

.page-loading { min-height: 55vh; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--text-muted); font-size: 13px; }
.page-loading span { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Ikony -------------------------------------------------------------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: block; width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- Záhlaví stránky ---------------------------------------------------- */
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.page-heading > * { min-width: 0; }
.page-date { color: var(--text-muted); font-size: 13px; }
.page-heading h1 { margin: 6px 0 6px; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; letter-spacing: -1.1px; }
.page-heading h1 span { color: var(--accent-strong); font-weight: 520; }
.page-heading p { margin: 0; color: var(--text-muted); font-size: 14px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 7px; color: var(--accent-strong); font-size: 10px; font-weight: 800; letter-spacing: 1.45px; }
.heading-actions { display: flex; gap: 10px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; text-decoration: none; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.button .ico { width: 18px; height: 18px; }
.button-primary { background: var(--accent-soft); color: var(--ink); }
.button-primary:hover { background: var(--accent); color: #fff; }
.button-secondary { border-color: var(--border); background: #fff; color: var(--text); }
.button-secondary:hover { border-color: var(--accent); color: var(--accent-strong); }
.button-tertiary { min-height: 32px; padding: 0 12px; border-color: var(--border); background: #fafbfc; color: var(--text); font-size: 11.5px; }
.button-tertiary:hover { border-color: var(--accent); background: #fff; color: var(--accent-strong); }
.button-tertiary.danger { border-color: #efc1bc; background: #fff5f4; color: var(--danger); }
.button-tertiary:disabled { opacity: .55; cursor: not-allowed; }

/* --- KPI karty ---------------------------------------------------------- */
.panel, .kpi-card { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
/* Bez samostatného řádku s odkazem dlaždice o ten prostor nepotřebuje být vyšší. */
.kpi-card { position: relative; min-height: 128px; padding: 20px 22px; display: flex; flex-direction: column; overflow: hidden; }
.kpi-label { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; }
.kpi-badge .ico { width: 20px; height: 20px; }
.kpi-badge.danger { background: #fdeced; color: #c0392f; }
.kpi-badge.warning { background: #fdf1e0; color: #b5741a; }
.kpi-badge.info { background: #eaf1fb; color: #2f66b5; }
.kpi-card > strong { display: block; margin: 14px 0 6px; font-size: 34px; line-height: 1; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.kpi-card > p { margin: 0; color: var(--text-muted); font-size: 13px; }
.kpi-card > a { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-strong); text-decoration: none; font-size: 12.5px; font-weight: 650; }
.kpi-card > a .ico { width: 15px; height: 15px; }
/* Dlaždice přehledu se otevírá dvojklikem. touch-action: manipulation vypne
   přiblížení dvojitým ťuknutím — bez toho se na dotyku neotevře vůbec. */
/* Dokument se dá přetáhnout do jiné složky spisu. Uchopení musí být poznat,
   jinak se lidé nedovtípí, že to jde. */
/* Přetažení fotek rovnou do galerie; ukládají se do složky Fotodokumentace. */
.gallery-drop { position: relative; margin: 0 22px 12px; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-muted); font-size: 12.5px; font-weight: 650; }
.gallery-drop:hover, .gallery-drop.dragover { border-color: var(--accent); color: var(--accent-strong); background: #fffdf9; }
.gallery-drop.busy { opacity: .6; }
.gallery-drop .ico { width: 16px; height: 16px; }
.gallery-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Pole je průhledné, takže by jeho obrys fokusu nebyl vidět. Zónu, do které klávesnice
   (nebo „+ Přidat → Přidat fotky“) fokus pošle, proto zvýrazní celou — jen při ovládání
   klávesnicí, klik myší ji nerozsvítí. */
.gallery-drop:has(input:focus-visible) { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; color: var(--accent-strong); }

/* Prohlížeč fotek. Otevírání v nové kartě vytrhlo člověka z rozpracované stránky. */
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 32px; overflow: hidden auto; background: rgba(16, 22, 28, .88); }
.lightbox figure { max-width: min(1100px, 92vw); max-height: 88vh; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lightbox img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 12px; background: #0d1216; }
.lightbox figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: #fff; }
.lightbox figcaption strong { font-size: 14px; }
.lightbox figcaption small { color: #b6c0ca; font-size: 12px; }
.lightbox figcaption em { margin-left: auto; color: #8b95a0; font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .24); }
.lightbox-close { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 15px; }
.lightbox-prev, .lightbox-next { top: 50%; width: 46px; height: 46px; margin-top: -23px; font-size: 26px; line-height: 1; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 680px) {
    .lightbox { padding: 14px; }
    .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
}

/* Galerie domu: fotodokumentace stavby a fotky od servisu na jednom místě.
   Fotky stojí za sebou jako karty ve výstavce — prostřední barevná a vepředu,
   sousedé natočení do stran a zšedlí. Mřížka miniatur dělala ze stavby
   i z reklamací stejně nezajímavé dlaždice. */
.coverflow { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px; perspective: 1400px; outline: none; }
.coverflow:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 12px; }
.cf-stage { position: relative; flex: 1 1 auto; height: 360px; transform-style: preserve-3d; }
.cf-item {
    position: absolute; left: 50%; top: 50%; width: 210px; height: 290px; margin: -145px 0 0 -105px;
    padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface-subtle);
    box-shadow: 0 10px 26px -10px rgba(23, 28, 35, .4); cursor: pointer;
    transition: transform .38s cubic-bezier(.22, .68, .36, 1), opacity .38s ease, filter .38s ease, box-shadow .38s ease;
    transform-style: preserve-3d;
}
.cf-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.86); transition: filter .38s ease; user-select: none; }
.cf-item.aktivni { box-shadow: 0 26px 54px -16px rgba(23, 28, 35, .62); cursor: zoom-in; }
.cf-item.aktivni img { filter: none; }
.cf-item:not(.aktivni):hover img { filter: grayscale(.45) brightness(.95); }
.cf-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cf-nav {
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; padding: 0 0 3px;
    border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--accent-strong);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.cf-nav:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.cf-nav:disabled { opacity: .3; cursor: default; }
.cf-popis { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 22px 0; text-align: center; }
.cf-popis strong { font-size: 13px; }
.cf-popis small { color: var(--text-muted); font-size: 11.5px; }
.cf-popis em { color: var(--text-muted); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.cf-tecky { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 10px 22px 18px; }
.cf-tecky button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--border); cursor: pointer; }
.cf-tecky button:hover { background: var(--accent-line); }
.cf-tecky button.aktivni { background: var(--accent); }

/* Fotky na stránce leží vedle sebe; velká je až výstavka po kliknutí. */
.galerie-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 4px 22px 20px; }
.galerie-dlazdice { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.galerie-dlazdice img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 10px; background: var(--surface-subtle); box-shadow: 0 10px 22px -14px rgba(23, 28, 35, .55); transition: transform .18s ease, box-shadow .18s ease; }
.galerie-dlazdice:hover img { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(23, 28, 35, .6); }
.galerie-dlazdice span { color: var(--text-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-dlazdice:focus-visible img { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Fotky pozemku ve spisu poptávky: menší dlaždice, mřížka sedí do karty. */
.house-gallery .galerie-mrizka, .panel > .galerie-mrizka { padding: 4px 22px 8px; }
.panel > .galerie-mrizka { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.fotky-poznamka { padding: 0 22px 16px; margin: 0; }

/* Výstavka: karty se natáčejí v prostoru, takže perspektiva patří na obal. */
/* „safe“: v nízkém okně se výstavka odroluje, místo aby horní kus fotky
   utekl nad okraj obrazovky, kam se dostat nedá. */
.lightbox.vystavka { grid-auto-flow: row; align-content: safe center; justify-items: center; gap: 4px; perspective: 1500px; }
.vystavka .cf-stage { width: min(420px, 74vw); height: min(62vh, 540px); }
/* Karta se řídí výškou scény. Pevných 470 px v okně nižším než 745 px
   přečnívalo přes název fotky i puntíky pod ní. */
.vystavka .cf-item { --karta: min(470px, calc(62vh - 24px)); width: calc(var(--karta) * .7234); height: var(--karta); margin: calc(var(--karta) / -2) 0 0 calc(var(--karta) * -.3617); }
.vystavka .cf-item:not(.aktivni) img { filter: grayscale(.75) brightness(.62); }
.vystavka .cf-item:not(.aktivni):hover img { filter: grayscale(.4) brightness(.8); }
.vystavka .cf-popis strong { color: #fff; font-size: 14px; }
.vystavka .cf-popis small { color: #b6c0ca; }
.vystavka .cf-popis em { color: #8b95a0; }
.vystavka .cf-tecky { padding-bottom: 0; }
.vystavka .cf-tecky button { background: rgba(255, 255, 255, .32); }
.vystavka .cf-tecky button:hover { background: rgba(255, 255, 255, .6); }
.vystavka .cf-tecky button.aktivni { background: var(--accent); }
/* Šipky drží fotku po stranách, ne u okrajů obrazovky. */
.vystavka-scena { display: flex; align-items: center; gap: 12px; }
.vystavka-scena .cf-nav { position: relative; z-index: 20; width: 44px; height: 44px; border-color: transparent; background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; }
.vystavka-scena .cf-nav:hover:not(:disabled) { border-color: transparent; background: rgba(255, 255, 255, .3); }
.vystavka-zvetseno { margin: 0; display: grid; place-items: center; }
.vystavka-zvetseno img { max-width: min(1100px, 78vw); max-height: 72vh; object-fit: contain; display: block; border-radius: 12px; background: #0d1216; cursor: zoom-out; }
/* Číslo dokladu je odkaz do náhledu, ne obyčejné tlačítko formuláře. */
.doklad-cislo { padding: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
/* Fotka domu v katalogu je tlačítko do náhledu, ne jen obrázek. */
.katalog-fotka { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.katalog-fotka img { width: 100%; height: 100%; object-fit: cover; display: block; }
.katalog-fotka:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Název šablony vede do náhledu; zůstává na řádku knihovny, ne jako tlačítko formuláře. */
button.library-file-name { padding: 0; border: 0; background: none; text-align: left; }
/* Náhled dokumentu ze spisu: obrázek i PDF se kreslí přímo v okně. */
.dokument-nazev { padding: 0; font-size: 13.5px; font-weight: 700; text-align: left; }
/* Okno náhledu má pevnou výšku a tlačítka dole napevno, stejně jako náhled
   dokladu. Dřív drželo tělo 62 % výšky obrazovky a k tomu se přičetla hlavička
   s tlačítky — na notebooku tak „Stáhnout“ i „Zavřít“ spadly pod okraj a kolečko
   nad PDF posouvalo dokument, ne okno. */
.modal-card.dokument-nahled { width: min(940px, 100%); display: flex; flex-direction: column; overflow: hidden; }
/* Výška se počítá z dynamického viewportu: na telefonu se 100vh měří bez lišty
   prohlížeče, takže okno vyšlo vyšší než viditelná plocha a po vycentrování se
   uřízla hlavička i řada tlačítek. První řádek zůstává jako záloha pro
   prohlížeče, které dvh neznají. */
.modal-card.dokument-nahled:has(.dokument-nahled-telo) { height: min(calc(100vh - 48px), 1100px); height: min(calc(100dvh - 48px), 1100px); max-height: none; }
.modal-card.dokument-nahled > * { flex: 0 0 auto; }
.dokument-nahled-popis { padding: 0 22px 8px; }
.dokument-nahled-zprava { padding: 4px 22px 12px; }
.modal-card.dokument-nahled > .dokument-nahled-telo { flex: 1 1 auto; min-height: 0; padding: 4px 20px 8px; display: flex; align-items: center; justify-content: center; overflow: auto; }
.dokument-nahled-telo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 10px; background: var(--surface-subtle); }
.dokument-nahled-telo object { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); }
@media (max-width: 760px) {
    .vystavka .cf-stage { height: min(54vh, 420px); }
    .vystavka .cf-item { --karta: min(290px, calc(54vh - 24px)); }
}
@media (max-width: 620px) {
    .cf-stage { height: 250px; }
    .cf-item { width: 150px; height: 210px; margin: -105px 0 0 -75px; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-item { transition: none; }
}

/* Fotky u servisního případu — doklad závady i opravy. */
.case-photos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.case-photo { position: relative; display: inline-block; }
.case-photo img { width: 74px; height: 56px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; display: block; }
.case-photo-remove { position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; cursor: pointer; }
.case-photo-remove:hover { background: var(--danger); }
.case-photo-add { position: relative; margin-top: 8px; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-size: 11.5px; font-weight: 650; cursor: pointer; }
.case-photo-add:hover { border-color: var(--accent); color: var(--accent-strong); }
.case-photo-add .ico { width: 13px; height: 13px; }
.case-photo-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.odarchivovat { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.odarchivovat input { min-height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 11.5px; }

.folder-doc.draggable { cursor: grab; }
.folder-doc.draggable:active { cursor: grabbing; }
.folder-doc.is-dragged { opacity: .45; }

.kpi-card--clickable { cursor: pointer; touch-action: manipulation; }
.kpi-card--clickable:hover { border-color: var(--accent); }
.kpi-card--clickable:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.kpi-card--feature { color: #fff; background: var(--brand-pattern), linear-gradient(150deg, var(--ink), var(--ink-2)); border-color: var(--ink); justify-content: center; }
.kpi-card--feature .kpi-label { color: #c3ccd5; }
.kpi-card--feature > .kpi-body { position: relative; z-index: 1; }
.kpi-card--feature strong { display: block; margin: 12px 0 6px; font-size: 40px; line-height: 1; letter-spacing: -1.4px; }
.kpi-card--feature p { margin: 0; color: #aab4be; font-size: 13px; }
.kpi-art { position: absolute; right: -6px; bottom: -10px; width: 128px; height: 128px; color: var(--accent-soft); opacity: .55; stroke-width: 1.1; }

/* --- Portfolio 0→100 ---------------------------------------------------- */
/* flex-wrap + min-width: 0 — bez nich se hlavička nezmenší pod svůj obsah
   a roztáhne celou stránku do stran na úzkých displejích. */
.panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 22px; }
.panel-heading > * { min-width: 0; }
.panel-heading h2 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.35px; overflow-wrap: anywhere; }
.panel-heading > a { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-strong); text-decoration: none; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.panel-heading > a .ico { width: 15px; height: 15px; }
.panel-heading.compact { border-bottom: 1px solid #eef1f4; }
.phase-panel { margin-bottom: 18px; }
.phase-rail { display: grid; grid-template-columns: repeat(8, 1fr); align-items: stretch; gap: 0; padding: 20px 22px 22px; margin: 0; list-style: none; }
.phase-step { position: relative; display: flex; }
.phase-step + .phase-step::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; border-top: 1.5px dashed #d9dfe6; transform: translate(-50%, -50%); z-index: 0; }
.phase-card { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 92px; margin: 0 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.phase-card .ico { width: 22px; height: 22px; color: #a7b0ba; }
.phase-card strong { position: absolute; top: 14px; right: 16px; font-size: 21px; line-height: 1; color: #9aa4ae; font-variant-numeric: tabular-nums; }
.phase-card span { margin-top: auto; color: #8b95a0; font-size: 12.5px; }
.phase-step.occupied .phase-card { border-color: var(--accent-line); background: #fdf6ee; }
.phase-step.occupied .phase-card .ico { color: var(--ink-2); }
.phase-step.occupied .phase-card strong { color: var(--ink); }
.phase-step.occupied .phase-card span { color: var(--text); font-weight: 600; }

/* --- Spodní mřížka dashboardu ------------------------------------------- */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 16px; align-items: start; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: #f7f8fa; }
.segmented button { min-height: 30px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.segmented button.active { background: #fff; color: var(--accent-strong); box-shadow: 0 1px 2px rgba(29,39,49,.08); }
.quarantine-release { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.quarantine-release input { min-height: 30px; min-width: 160px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 11px; }
.document-kpi-button { display: flex; align-items: center; gap: 13px; padding: 16px 18px; text-align: left; font: inherit; cursor: pointer; }
.document-kpi-button:hover { border-color: var(--accent); }
.document-kpi-button.active { border-color: var(--accent); background: var(--accent-tint); }
.table-empty { padding: 26px 13px; color: var(--text-muted); text-align: center; }
.row-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #9aa3ad; }
.row-arrow:hover { background: var(--surface-subtle); color: var(--accent-strong); }
.row-arrow .ico { width: 17px; height: 17px; }

.tabs { display: flex; gap: 20px; padding: 12px 22px 0; border-bottom: 1px solid #eef1f4; }
.tabs button { position: relative; padding: 6px 0 12px; border: 0; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.tabs button.active { color: var(--accent-strong); }
.tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.task-feed { list-style: none; padding: 6px 12px; margin: 0; }
.task-feed > li > a { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.task-feed > li > a:hover { background: #fafbfc; }
.task-marker { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid #cbd3db; border-radius: 50%; }
.task-marker.priority-high { border-color: #d38b19; }
.task-marker.priority-critical { border-color: var(--danger); }
.task-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-copy strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-copy small { margin-top: 3px; color: var(--text-muted); font-size: 11.5px; }
.task-feed time { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.task-feed time.overdue { color: var(--danger); font-weight: 650; }
.task-empty { padding: 30px 12px; color: var(--text-muted); font-size: 13px; text-align: center; }
.panel-footer-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-top: 1px solid #eef1f4; color: var(--accent-strong); text-decoration: none; font-size: 12.5px; font-weight: 650; }
.panel-footer-link .ico { width: 15px; height: 15px; }

@media (max-width: 1240px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .phase-rail { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
    .phase-step:nth-child(5)::before { display: none; }
}
@media (max-width: 1080px) {
    /* minmax(0,1fr): holé 1fr se nezmenší pod obsah tabulky a roztáhne stránku. */
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .page-heading { align-items: flex-start; flex-direction: column; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { min-height: 124px; padding: 15px 16px; }
    .kpi-card > strong, .kpi-card--feature strong { font-size: 27px; }
    .phase-rail { grid-template-columns: repeat(2, 1fr); }
    .phase-step::before { display: none !important; }
    .phase-card { margin: 0 4px; }
}

/* --- Validace a chybové stavy ------------------------------------------ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.blazor-error-boundary { padding: 1rem; border-radius: 7px; background: #b32121; color: #fff; }
.blazor-error-boundary::after { content: "Došlo k chybě."; }

/* Zbytky responzivních pravidel starého dashboardu byly odstraněny: mířily na
   prvky, které už neexistují (.project-row, .project-stage), přebíjely novou
   mřížku a .phase-rail { min-width: 720px } roztahovalo celou stránku do stran. */

/* --- Sdílené datové plochy --------------------------------------------- */
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; overflow: hidden; }
.summary-strip > div { padding: 17px 21px; border-right: 1px solid var(--border); }
.summary-strip > div:last-child { border: 0; }
.summary-strip small, .detail-stat-grid small, .service-stat small { display: block; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.summary-strip strong { display: block; margin-top: 7px; font-size: 19px; font-variant-numeric: tabular-nums; }
.text-danger { color: var(--danger) !important; }

.portfolio-panel { overflow: hidden; }
.filter-bar { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.table-search { min-width: 240px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #fafbfc; color: var(--text-muted); }
.table-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12.5px; }
.filter-bar select, .inline-create select, .inline-create input:not([type=checkbox]) { height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font-size: 12.5px; }
.result-count { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.data-table-wrap, .table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { padding: 11px 13px; border-bottom: 1px solid var(--border); background: #f7f8fa; color: #78828c; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-align: left; white-space: nowrap; }
.data-table td { padding: 13px; border-bottom: 1px solid #eef1f4; color: #46505a; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:not(.risk-note-row):hover td { background: #fafbfc; }
/* :not(.table-project) — jinak by obecné pravidlo přebilo specificitou řádkové
   uspořádání a kód modelu by skočil nad název projektu. */
.table-project > span:last-child, .stacked-cell, .data-table td > a:not(.table-project) { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.table-project { min-width: 190px; display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.table-project strong, .stacked-cell strong { font-size: 12px; color: var(--text); }
.table-project small, .stacked-cell small, .data-table td > a small { margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.table-progress { min-width: 130px; }
.table-progress > div { display: flex; justify-content: space-between; gap: 10px; }
.table-progress strong { color: var(--text); font-size: 11px; }
.table-progress span { color: var(--text-muted); font-size: 10px; }
.table-progress > i { display: block; height: 5px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: #e8ecf0; }
.table-progress em { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.table-arrow { display: grid !important; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: #f2f4f6; font-size: 17px; }
.risk-note-row td { padding: 8px 13px 8px 63px; background: #fff9ed; color: #7c5815; font-size: 11px; }
.risk-note-row td span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; background: #d38b19; color: #fff; font-weight: 800; }
.back-link { display: inline-block; margin-bottom: 13px; color: var(--text-muted); text-decoration: none; font-size: 12px; font-weight: 650; }
.back-link:hover { color: var(--accent-strong); }
/* Akce v kartách a řádcích. Dřív to byl holý text, který splýval s obsahem —
   „Upravit" nebo „Zapsat" se v odstavci ztratilo. Vzhled tlačítka je tišší než
   primární akce, ale je na první pohled poznat, že se dá zmáčknout. */
.link-button,
.catalog-body footer button,
.gate-stream button,
.gate-evidence-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--accent-strong);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.link-button:hover,
.catalog-body footer button:hover,
.gate-stream button:hover,
.gate-evidence-row button:hover { border-color: var(--accent); background: var(--accent-tint); }
.link-button:active { background: var(--accent-line); }
.link-button:disabled,
.gate-stream button:disabled,
.gate-evidence-row button:disabled { opacity: .5; cursor: not-allowed; }
.link-button:focus-visible,
.catalog-body footer button:focus-visible,
.gate-stream button:focus-visible,
.gate-evidence-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Detail projektu 0→100 --------------------------------------------- */
/* Hlavička, postup, záložky a boční panel spisu V2 mají izolované styly v
   Components/Projects. Tady jsou jen prvky, které sdílí víc karet spisu: karta
   s ikonou a nadpisem, odkaz v hlavičce karty, tlačítko na patě karty a pruh. */
.spis-karta { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
/* Odkaz v hlavičce karty se v úzké kartě zalomí pod nadpis — nadpis se nesmí lámat po písmenech. */
.spis-karta-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin-bottom: 12px; }
.spis-karta-hlava h2 { flex: 1 1 8em; min-width: 0; margin: 0; color: var(--ink); font-size: 15px; letter-spacing: -.2px; }
.spis-karta-ikona { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-tint); color: var(--accent-strong); }
.spis-karta-ikona .ico { width: 18px; height: 18px; }
.spis-odkaz { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; padding: 0 2px; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap; text-decoration: none; cursor: pointer; }
.spis-odkaz:hover { text-decoration: underline; text-underline-offset: 2px; }
.spis-odkaz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.spis-odkaz:disabled { opacity: .55; cursor: not-allowed; text-decoration: none; }
.spis-tlacitko { min-height: 40px; display: flex; align-items: center; justify-content: center; margin-top: auto; padding: 0 14px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-tint); color: var(--accent-strong); font: inherit; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.spis-tlacitko:hover { border-color: var(--accent); background: #fbe8d2; }
.spis-tlacitko:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spis-pruh { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #e8ecf0; }
.spis-pruh > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.spis-pruh.hotovo > i { background: var(--ok); }
.spis-prazdne { margin: 4px 0 8px; color: var(--text-muted); font-size: 12.5px; }
@media (pointer: coarse) {
    .spis-odkaz { min-height: 44px; }
}
.context-tabs { display: flex; gap: 4px; padding: 0 5px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.context-tabs button { padding: 11px 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 650; }
.context-tabs button.active { border-color: var(--accent); color: var(--accent-strong); }
.context-tabs button span { min-width: 18px; height: 18px; display: inline-grid; place-items: center; margin-left: 5px; border-radius: 9px; background: #eaeef2; font-size: 10px; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.detail-stat-grid article { padding: 14px 16px; }
.detail-stat-grid strong { display: block; margin: 7px 0 3px; font-size: 17px; }
.detail-stat-grid span { color: var(--text-muted); font-size: 10px; }
.milestone-list { padding: 8px 17px 14px; }
.milestone-row { position: relative; min-height: 66px; display: grid; grid-template-columns: 27px 1fr auto; gap: 11px; align-items: center; }
.milestone-row:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 43px; bottom: -20px; width: 1px; background: #dde3e9; }
.milestone-marker { position: relative; z-index: 1; width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #dde3e9; border-radius: 50%; background: #fff; color: #7b8590; font-size: 10px; font-weight: 800; }
.milestone-row.completed .milestone-marker { border-color: var(--ok); background: var(--ok-tint); color: var(--ok-dark); }
.milestone-row.blocked .milestone-marker { border-color: var(--danger); background: #fff0ee; color: var(--danger); }
.milestone-row div { display: flex; flex-direction: column; }
.milestone-row small { color: var(--accent-strong); font-size: 9.5px; font-weight: 700; }
.milestone-row strong { margin-top: 3px; font-size: 11.5px; }
.milestone-row p { margin: 3px 0 0; color: var(--text-muted); font-size: 10px; }
.check-list { padding: 8px 16px 15px; }
.check-list > div { display: flex; gap: 10px; align-items: center; min-height: 50px; border-bottom: 1px solid #eef1f4; }
.check-list > div:last-child { border: 0; }
.check-list > div > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: var(--ok-tint); color: var(--ok-dark); font-size: 11px; font-weight: 800; }
.check-list > div.missing > span { background: #fff0ee; color: var(--danger); }
.check-list > div.warning > span { background: #fff5df; color: #a66d12; }
.check-list p { display: flex; flex-direction: column; margin: 0; }
.check-list strong { font-size: 11.5px; }
.check-list small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.section-table { overflow: hidden; }
.doc-state { display: inline-flex; padding: 5px 8px; border-radius: 5px; background: #eff2f4; color: #5e6771; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.state-approved, .state-issued, .state-signed, .state-resolved, .state-closed { background: #eaf8ef; color: #16763c; }
.state-review, .state-inprogress, .state-triaged, .state-visitplanned { background: #fff4da; color: #97630e; }
.state-draft, .state-new { background: #edf3ff; color: #315fae; }
.state-contacted { background: #eef4ff; color: #2f5aa8; }
.state-qualified, .state-visitplanned, .state-offerprepared { background: #fff4da; color: #97630e; }
.state-waitingforfinancing { background: #f3edfa; color: #7445a3; }
.state-contractagreed { background: #eaf8ef; color: #16763c; }
.state-lost, .state-rejected { background: #fff0ee; color: #8e1d16; }
.journal-entry.cancelled { opacity: .72; }
.journal-cancelled { text-decoration: line-through; }
.card-note { margin: 8px 0 0; padding: 8px 10px; border-radius: 7px; background: var(--surface-subtle); font-size: 11.5px; line-height: 1.5; }
.conversion-summary { color: var(--text-muted); font-size: 10.5px; }
.state-nurture { background: #f5f6f8; color: #5c6570; }
.state-waitingforpart { background: #f1eefb; color: #5b47a8; }
.empty-module { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.empty-module > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--ink); color: var(--accent-soft); font-size: 22px; }
.empty-module h2 { margin: 7px 0 0; }
.empty-module p { max-width: 520px; margin: 0 0 8px; color: var(--text-muted); font-size: 12.5px; }

/* --- Obchod ------------------------------------------------------------ */
.report-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
.report-metrics article { padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 7px; background: #fff; }
.report-metrics small { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .8px; }
.report-metrics strong { display: block; margin: 7px 0 3px; font-size: 19px; }
.report-metrics span { color: var(--text-muted); font-size: 10px; }
/* Sloupců je šest; při pevném počtu čtyř se zbylé dva zalomily pod desku
   a vypadalo to jako dvě rozpadlé tabulky, ne jako kanban. */
.kanban-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 11px; overflow-x: auto; }
.kanban-column { min-width: 230px; }
.kanban-column > header { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 10px; }
.kanban-column > header > div { display: flex; align-items: center; gap: 7px; }
.kanban-column header strong { font-size: 12.5px; }
.kanban-column header em { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 10px; background: #e7ebef; font: normal 10.5px/1 inherit; }
.kanban-cards { min-height: 360px; padding: 8px; border-radius: 9px; background: #eceff2; }
.lead-card { padding: 13px; margin-bottom: 8px; }
.status-pill { height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 12px; background: var(--surface-subtle); color: var(--text-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.success { background: var(--ok-tint); color: var(--ok-dark); }
.status-pill.warning { background: #fdf1e0; color: #96601a; }
.status-pill.danger { background: #fdeced; color: var(--danger); }
.status-pill.neutral { background: var(--surface-subtle); color: #5c6570; }
.model-tile { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0 4px; border-radius: 8px; background: var(--ink); color: var(--accent-soft); font-size: 9.5px; font-weight: 800; text-align: center; line-height: 1.15; }
/* Typ dokumentu je slovo, ne kód domu — do čtverce 40×40 se nevejde a text
   z něj lezl přes název vedle. Roste proto do šířky a nezalamuje se. */
.kind-tile { min-width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0 9px; border-radius: 8px; background: var(--ink); color: var(--accent-soft); font-size: 9.5px; font-weight: 800; text-align: center; line-height: 1.15; white-space: nowrap; }
.source-tag { display: inline-flex; padding: 4px 7px; border-radius: 4px; background: var(--accent-tint); color: var(--accent-strong); font-size: 9.5px; font-weight: 700; }
.lead-card h3 { margin: 11px 0 4px; font-size: 13px; }
.lead-card > p { margin: 0; color: var(--text-muted); font-size: 10px; }
.lead-card footer { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-muted); font-size: 10px; }
.kanban-empty { display: grid; place-items: center; min-height: 100px; color: #8b949e; font-size: 11px; }

/* --- Plánovač ---------------------------------------------------------- */
.planner-toolbar { min-height: 57px; display: flex; align-items: center; gap: 20px; padding: 9px 13px; margin-bottom: 11px; }
.planner-toolbar > div:first-child { display: flex; align-items: center; gap: 9px; }
.planner-toolbar button { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.planner-toolbar strong { min-width: 145px; text-align: center; font-size: 12.5px; }
.planner-toolbar .table-search { margin-left: auto; }
.legend { display: flex; gap: 10px; }
.legend span { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 10px; }
.legend i { width: 6px; height: 6px; border-radius: 50%; background: #a0a9b2; }
.legend i.critical { background: var(--danger); }
.legend i.normal { background: var(--ok); }
.legend i.low { background: #a0a9b2; }
/* Legenda vysvětluje „Vysokou“ prioritu; třída .waiting se v plánovači nepoužívá. */
.legend i.high { background: #d38b19; }

/* Tečka priority v pruhu propadlých neměla styl vůbec, takže se nevykreslila. */
.priority-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.priority-dot.priority-critical { background: var(--danger); }
.priority-dot.priority-high { background: #d38b19; }
.priority-dot.priority-normal { background: var(--ok); }
.priority-dot.priority-low { background: #a0a9b2; }
.priority-dot.priority-termin { background: var(--blue); }
.overdue-strip { padding: 14px 16px; margin-bottom: 11px; border-color: #f2c4bf; background: #fff8f7; }
.overdue-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.overdue-head > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; }
.overdue-head strong { font-size: 12.5px; color: var(--danger); }
.overdue-head small { color: var(--text-muted); font-size: 11px; }
/* Pruh propadlých ukazuje všechno; při delším seznamu roluje místo useknutí. */
.overdue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; max-height: 208px; overflow-y: auto; }
.overdue-task { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 0; color: var(--text); text-decoration: none; border-top: 1px solid #f6dedb; }
.overdue-task > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.overdue-task strong { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overdue-task small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.overdue-task time { color: var(--danger); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.week-board { display: grid; grid-template-columns: repeat(7, minmax(115px, 1fr)); margin-bottom: 13px; overflow-x: auto; }
.day-column { position: relative; min-width: 115px; min-height: 335px; border-right: 1px solid var(--border); }
.day-column:last-child { border: 0; }
.day-column.today { background: #fdf8f1; }
.day-column header { height: 52px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.day-column header small { color: var(--text-muted); font-size: 9.5px; }
.day-column header strong { grid-row: 2; font-size: 13px; }
.day-column header span { grid-row: 1 / span 2; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 9px; background: #e6eaee; font-size: 10px; }
.day-column.today header span { background: var(--accent-strong); color: #fff; }
.day-column > div { padding: 6px; }
.calendar-task { display: flex; flex-direction: column; min-height: 74px; padding: 8px; margin-bottom: 6px; border: 1px solid var(--border-soft); border-left: 3px solid var(--ok); border-radius: 5px; text-align: left; font: inherit; background: #fff; box-shadow: 0 1px 2px rgba(29, 39, 49, .08); color: var(--text); text-decoration: none; }
.calendar-task.task-critical { border-color: var(--danger); }
.calendar-task.task-high { border-color: #d38b19; }
.calendar-task.task-low { border-color: #a0a9b2; }
.calendar-task small { color: var(--text-muted); font-size: 9px; }
.calendar-task strong { margin: 5px 0; font-size: 10.5px; line-height: 1.35; }
.calendar-task span { color: var(--text-muted); font-size: 9px; }
/* Přetažení úkolu v kalendáři: sloupec dne je cíl pro zachovaný čas,
   časová pásma uvnitř nastaví i hodinu. Pásma se ukazují jen při tažení. */
/* Akce a přeřazení přímo v přehledu dokumentů. */
.document-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.refile-row td { background: var(--surface-subtle); }
.refile-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 6px 0; }
.refile-editor label { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 11.5px; }
.refile-editor select { min-height: 34px; min-width: 190px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; font-size: 12.5px; }

/* Stránka výsledků hledání. */
.search-box { padding: 16px 20px; margin-bottom: 13px; }
.search-box .table-search { width: 100%; }
.search-box input { width: 100%; }
.search-group { margin-bottom: 13px; }
.search-results { display: flex; flex-direction: column; padding: 2px 20px 16px; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef1f4; color: var(--text); text-decoration: none; }
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover strong { color: var(--accent-strong); }
.search-results .stacked-cell { flex: 1; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Akce u milníků, servisních případů a editor údajů zakázky. */
.milestone-actions, .case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Sloupec smí být užší než nejdelší volba výběru: výběr domu („FL-26025 · A3S · Libouchec 412, …“)
   jinak roztáhl formulář vady za okraj okna a na telefonu uřízl pole i tlačítko Zapsat. */
.details-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 4px 20px 18px; }
.details-editor label { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 12px; }
.details-editor input:not([type=checkbox]) { min-height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 13px; }
/* Výběry v oknech vypadaly jako výchozí prvek prohlížeče vedle stylovaných polí. */
.details-editor select { max-width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 13px; }
/* Jen textová pole: přepínač by dostal bledý obrys s kontrastem 1,3 : 1 místo výrazného
   :focus-visible a rámeček se na něm nevykreslí — fokus by na něm nebyl vidět. */
.details-editor input:not([type=checkbox]):not([type=radio]):focus, .details-editor select:focus { outline: 2px solid rgba(225, 134, 59, .25); border-color: var(--accent); }
.details-editor .checkbox-label { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 12.5px; }
.details-editor .document-upload-actions { display: flex; gap: 8px; margin-top: 4px; }
/* Nová poptávka v okně: krátká pole po dvou, ať se celý kontakt vejde bez rolování;
   na telefonu pod sebou. */
.details-editor.nova-poptavka { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.details-editor.nova-poptavka > .wide { grid-column: 1 / -1; }
.details-editor.nova-poptavka .document-upload-actions { justify-content: flex-end; }
.details-editor .validation-message { color: #b42318; font-size: 11px; letter-spacing: 0; }
.details-editor .quiet-note { margin: 0; }
.modal-card:has(.nova-poptavka) { width: min(620px, 100%); }
@media (max-width: 620px) {
    .details-editor.nova-poptavka { grid-template-columns: 1fr; }
}

/* Přetahování poptávek mezi sloupci obchodní desky. */
.lead-card.draggable { cursor: grab; }
.lead-card.draggable:active { cursor: grabbing; }
.lead-card.is-dragged { opacity: .4; }
/* Dvojklik otevře spis. Tažná karta si drží "grab", u role bez zápisu by ale
   kurzor nenaznačil vůbec nic. */
.kanban-cards .lead-card:not(.draggable) { cursor: pointer; }
.kanban-board.busy { pointer-events: none; opacity: .7; }
.kanban-column.dragover { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
.lead-closing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-bottom: 13px; }
.lead-drop { display: flex; flex-direction: column; gap: 2px; min-height: 66px; padding: 13px 16px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-subtle); }
.lead-drop strong { font-size: 13.5px; }
.lead-drop small { color: var(--text-muted); font-size: 11.5px; }
.lead-drop.nedostupne { opacity: .4; border-style: dotted; }
.lead-drop.dragover { border-style: solid; border-color: var(--accent); background: var(--accent-tint); }
.lead-drop.danger.dragover { border-color: var(--danger); background: #fdeeec; }

/* Rozcestník pro přihlášeného uživatele bez oprávnění k dané sekci. */
.access-denied { padding: 20px 22px; }
.access-denied-label { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.access-denied-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.access-denied-links a { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); text-decoration: none; }
.access-denied-links a:hover { border-color: var(--accent); background: var(--accent-tint); }
/* ::deep patří jen do scoped *.razor.css. V globálním souboru je to neplatný
   selektor a prohlížeč zahodí CELÉ pravidlo — ikony proto zůstávaly grafitové. */
.access-denied-links .ico { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent-strong); }
.access-denied-links span { display: flex; flex-direction: column; min-width: 0; }
.access-denied-links strong { font-size: 13.5px; }
.access-denied-links small { margin-top: 2px; color: var(--text-muted); font-size: 11.5px; }
.access-denied-note { margin: 16px 0 0; color: var(--text-muted); font-size: 12.5px; }
.gate-readonly { color: var(--text-muted); font-size: 12px; }
.evidence-submit.override input { border-color: var(--accent); }
/* Odbavení úkolu přímo z kalendáře i z detailu projektu. */
.overdue-row { display: flex; align-items: center; gap: 6px; }
.overdue-row .overdue-task { flex: 1; min-width: 0; }
.task-done { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ok); font-size: 12px; cursor: pointer; }
.task-done:hover:not(:disabled) { border-color: var(--ok); background: #eef8f1; }
.task-done:disabled { opacity: .5; cursor: default; }
.task-list { display: flex; flex-direction: column; padding: 2px 20px 14px; }
.task-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.task-row:last-child { border-bottom: 0; }
.task-row > div { min-width: 0; display: flex; flex-direction: column; }
.task-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-row small { margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.task-row time { color: var(--text-muted); font-size: 10.5px; white-space: nowrap; }
.task-row .task-done { width: 30px; height: 30px; margin-left: 8px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ok-dark); font-size: 13px; cursor: pointer; }
.task-row .task-done:hover { border-color: var(--ok); background: var(--ok-tint); }
.task-row .task-done:disabled { opacity: .5; cursor: not-allowed; }
.calendar-task.draggable, .overdue-task.draggable { cursor: grab; }
.calendar-task.draggable:active, .overdue-task.draggable:active { cursor: grabbing; }
.calendar-task.is-dragged { opacity: .4; }
.week-board.busy { pointer-events: none; opacity: .7; }
.week-board.is-dragging .day-column { background: #fbfcfd; }
.week-board.is-dragging .day-column.today { background: #fdf8f1; }
.day-column.dragover { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); }
.drop-slots { position: absolute; inset: 42px 0 0; z-index: 2; display: grid; align-content: start; gap: 3px; padding: 6px; background: rgba(255, 255, 255, .93); }
.drop-slot { display: grid; place-items: center; min-height: 26px; border: 1px dashed var(--border); border-radius: 5px; background: #fff; color: var(--text-muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.drop-slot.active { border-style: solid; border-color: var(--accent); background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.day-empty { margin: 20px 0; color: #a0a9b2; font-size: 10px; text-align: center; }
.planner-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.dependency-list { padding: 8px 17px 14px; }
.dependency { min-height: 54px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #eef1f4; }
.dependency > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--ok-tint); color: var(--ok-dark); font-size: 10.5px; font-weight: 800; }
.dependency.danger > span { background: #fff0ee; color: var(--danger); }
.dependency.warning > span { background: #fff5df; color: #a66d12; }
.dependency p { display: flex; flex-direction: column; margin: 0; }
.dependency strong { font-size: 11px; }
.dependency small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.dependency em { font: normal 700 10px/1 inherit; color: var(--text-muted); }

/* --- Dokumenty --------------------------------------------------------- */
.document-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.document-kpis article { display: flex; gap: 12px; align-items: center; padding: 14px; }
.document-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--accent-tint); color: var(--accent-strong); font-size: 13px; font-weight: 800; }
.document-icon.review { background: #fff5df; color: #9a650d; }
.document-icon.signed { background: #edf3ff; color: #315fae; }
.document-icon.package { background: #f0f2f4; color: var(--ink-3); }
.document-kpis small { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.document-kpis strong { display: block; margin: 3px 0; font-size: 18px; }
.document-kpis p { margin: 0; color: var(--text-muted); font-size: 10px; }
/* Dlaždice-filtr (DlazdiceFiltru) má v tlačítku jen spany: text a popis jsou blokové tady. */
.document-kpi-button .kpi-text { display: block; min-width: 0; }
.document-kpi-button .kpi-popis { display: block; margin: 0; color: var(--text-muted); font-size: 10px; }
.file-cell { min-width: 200px; display: flex; align-items: center; gap: 9px; }
.file-cell > span { width: 31px; height: 36px; display: grid; place-items: center; border-radius: 5px; background: #eff2f4; color: #636f7a; font-size: 9px; font-weight: 800; }
.file-cell > div { display: flex; flex-direction: column; }
.file-cell strong { color: var(--text); font-size: 12px; }
.file-cell small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.version-badge { padding: 4px 7px; border-radius: 4px; background: #f0f2f4; font-size: 10px; font-weight: 700; }
.document-rule { display: flex; gap: 11px; align-items: center; padding: 13px 16px; margin-top: 11px; border-color: var(--accent-line); }
.document-rule > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent-strong); font-size: 11px; font-weight: 800; }
.document-rule strong { font-size: 11px; }
.document-rule p { margin: 3px 0 0; color: var(--text-muted); font-size: 10px; }

.document-upload { padding: 20px; margin-bottom: 14px; border-color: var(--accent-line); }
.document-upload-intro h2 { margin: 6px 0; font-size: 18px; }
.document-upload-intro p { margin: 0 0 17px; color: var(--text-muted); font-size: 12px; }
.document-upload-grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr .55fr; gap: 12px; align-items: end; }
.document-upload-grid label { display: grid; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 750; }
.document-upload-grid input, .document-upload-grid select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.document-file-picker { grid-column: 1 / -1; }
.document-upload-grid .document-upload-actions { grid-column: 1 / -1; }
.document-file-picker input { padding: 7px; }
.document-file-picker small { min-height: 14px; color: #747f8a; font-weight: 500; }
.document-upload-actions { display: flex; gap: 8px; justify-content: flex-end; }
.document-upload-actions .button:disabled { cursor: not-allowed; opacity: .55; }
.upload-feedback { margin-top: 14px; padding: 10px 12px; border-radius: 7px; font-size: 12px; font-weight: 650; }
.upload-feedback.success { background: var(--ok-tint); color: #126934; }
.upload-feedback.error { background: #fff0ee; color: #a92318; }
/* Stažení bylo jen barevným textem, takže vypadalo jako odkaz mezi odkazy a lidé
   ho přehlíželi. Vypadá teď jako tlačítko, ale zůstává odkazem — stažení souboru
   musí jít i pravým tlačítkem a v nové kartě. */
.document-download { min-height: 30px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text) !important; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.document-download:hover { border-color: var(--accent); color: var(--accent-strong) !important; background: #fffdf9; }
.document-download .ico { width: 15px; height: 15px; }
.file-availability { display: inline-flex; padding: 5px 8px; border-radius: 5px; background: #eff2f4; color: #68717b; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.file-availability.status-quarantined { background: #fff4da; color: #97630e; }

/* --- Šablony a dokumentový strom zakázky -------------------------------- */
.lang-tag { padding: 4px 7px; border-radius: 4px; background: #edf3ff; color: #315fae; font-size: 9.5px; font-weight: 800; }
.checkbox-inline { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; }
.checkbox-inline input { width: 15px; height: 15px; accent-color: var(--accent-strong); }
.folder-tree { padding: 6px 16px 14px; }
.folder-node { padding: 4px 0; }
.folder-node:not(:last-child) { border-bottom: 1px solid #f2f4f6; }
.folder-head { display: flex; align-items: center; gap: 9px; min-height: 42px; }
.folder-head > span { color: var(--accent); font-size: 13px; }
.folder-head strong { font-size: 12.5px; }
.folder-head em { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px; background: #eaeef2; color: #5c6672; font: normal 700 10.5px/1 inherit; }
.folder-node.empty .folder-head { opacity: .5; }
.folder-node.empty .folder-head em { background: transparent; }
/* Drop zóna složky: neviditelný input type=file překrývá celý řádek hlavičky,
   takže přetažení souboru na složku (i kliknutí) spustí nahrání právě do ní. */
.folder-drop { position: relative; border-radius: 7px; padding: 0 8px; margin: 0 -8px; border: 1px dashed transparent; }
.folder-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.folder-drop input[type="file"]:disabled { cursor: progress; }
.folder-drop .drop-hint { margin-left: auto; color: var(--text-muted); font-size: 10.5px; font-weight: 650; opacity: .45; white-space: nowrap; }
.folder-drop:hover, .folder-drop:focus-within, .folder-drop.dragover { background: var(--accent-tint); border-color: var(--accent-line); }
.folder-drop:hover .drop-hint, .folder-drop.dragover .drop-hint, .folder-drop.busy .drop-hint { opacity: 1; color: var(--accent-strong); }
.folder-drop.dragover { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(225, 134, 59, .15); }
/* „Nahrát soubor“ u záznamu bez souboru: neviditelné pole pro soubor překrývá popisek, fokus
   z klávesnice se ukáže na celém popisku. */
.doplnit-soubor { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.doplnit-soubor input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.doplnit-soubor input[type="file"]:disabled { cursor: progress; }
.doplnit-soubor:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.folder-drop.busy { background: var(--accent-tint); }
.folder-node.empty .folder-drop { opacity: .75; }
.tree-message { margin: 12px 16px 0; }
.folder-doc { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 0 4px 30px; border-top: 1px dashed #eef1f4; }
.folder-doc .stacked-cell { flex: 1; min-width: 0; }
.subfolder-tag { padding: 4px 7px; border-radius: 4px; background: var(--accent-tint); color: var(--accent-strong); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 680px) {
    .folder-doc { flex-wrap: wrap; padding-left: 14px; }
    /* Název dokumentu se mezi štítky a akcemi scvrkl na pár znaků — dostane celý řádek. */
    .folder-doc .stacked-cell { flex: 1 1 100%; }
}

/* --- Servis ------------------------------------------------------------ */
/* Pět dlaždic (otevřené + čtyři čísla) v jednom řádku — se třemi sloupci za úvodní
   dlaždicí padaly digitální pasy samy na druhý řádek. */
.service-summary { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.service-focus, .service-stat { padding: 16px; }
.service-focus-top { display: flex; align-items: center; gap: 11px; }
.service-symbol { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--ink); color: var(--accent-soft); font-size: 17px; }
.service-focus small, .service-stat small { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.service-focus strong { display: block; margin-top: 3px; font-size: 19px; }
.service-focus > p { margin: 10px 0 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.service-stat strong { display: block; margin: 10px 0 4px; font-size: 23px; }
.service-stat span { color: var(--text-muted); font-size: 10px; }
.service-stat.danger { border-color: #f2c4bf; background: #fff7f6; }
.service-stat.danger strong { color: var(--danger); }
.quiet-note { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; }
.service-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .55fr); gap: 13px; }
.service-side { display: flex; flex-direction: column; gap: 13px; }
.case-list { padding: 5px 14px 12px; }
.case-row { min-height: 82px; display: grid; grid-template-columns: 30px 1fr 120px 90px 15px; gap: 10px; align-items: center; border-bottom: 1px solid #eef1f4; }
.case-row:last-child { border: 0; }
.case-priority { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #eef1f4; color: #636f7a; font-size: 10.5px; font-weight: 800; }
.case-priority.priority-critical { background: #fdeced; color: #b3261e; box-shadow: inset 0 0 0 1px #f3c2bd; }
.case-priority.priority-high { background: #fff3da; color: #9a6408; }
.case-priority.priority-normal { background: #eaf1fb; color: #2f66b5; }
.case-priority.priority-low { background: #eef1f4; color: #6b7681; }
.case-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--text-muted); font-size: 9.5px; }
.case-legend .case-priority { width: 20px; height: 20px; font-size: 9px; }
.case-legend .case-priority:not(:first-child) { margin-left: 7px; }
.case-main > div { display: flex; align-items: center; gap: 5px; }
.case-tags { flex-wrap: wrap; }
.case-row.highlighted { background: var(--accent-tint); border-radius: 8px; box-shadow: inset 3px 0 0 var(--accent); }
.case-note { margin: 5px 0 0 !important; padding: 6px 8px; border-radius: 6px; background: #f7f8fa; color: var(--text) !important; font-size: 10.5px !important; line-height: 1.45; white-space: pre-line; }
.case-note.done { background: #f0f8f3; }
.case-note.visit { background: var(--accent-tint); }
.case-note.visit strong { color: var(--accent-strong); }
.case-note strong { color: #16763c; }
.sla-breach { padding: 4px 6px; border-radius: 4px; background: #fdeced; color: #b3261e; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.case-close-form { display: grid; gap: 7px; margin-top: 8px; }
.case-close-form label { display: grid; gap: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.case-close-form textarea { width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 11.5px; resize: vertical; }
.case-close-form textarea:focus { outline: 2px solid rgba(225, 134, 59, .25); border-color: var(--accent); }
.case-sla small + strong { margin-top: 4px; }
.case-sla small:last-child { margin-top: 3px; letter-spacing: 0; }
.filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 14px; padding: 9px 12px; border-radius: 7px; background: var(--accent-tint); color: var(--text); font-size: 11px; }
.case-number { color: var(--accent-strong); font-size: 9.5px; font-weight: 800; }
.warranty-tag { padding: 4px 6px; border-radius: 4px; background: #f3edfa; color: #7445a3; font-size: 9px; font-weight: 700; }
.case-main h3 { margin: 6px 0 3px; font-size: 12.5px; }
.case-main p { margin: 0; color: var(--text-muted); font-size: 10px; }
.case-owner, .case-sla { display: flex; flex-direction: column; }
.case-owner small, .case-sla small { color: var(--text-muted); font-size: 9px; letter-spacing: .6px; }
.case-owner strong, .case-sla strong { margin-top: 5px; font-size: 11px; }
.case-row > a { color: #87919b; text-decoration: none; font-size: 17px; }
.passport-card { padding: 17px; text-align: center; }
.passport-card h2 { margin: 6px 0 14px; font-size: 16px; }
.passport-ring { position: relative; width: 95px; height: 95px; display: grid; place-items: center; align-content: center; margin: 0 auto 14px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--accent-line) 0); }
.passport-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.passport-ring strong { position: relative; font-size: 20px; }
.passport-ring span { position: relative; color: var(--text-muted); font-size: 9.5px; }
.passport-card ul { padding: 0; margin: 0 0 14px; list-style: none; text-align: left; }
.passport-card li { display: flex; gap: 7px; padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: 11px; }
.passport-card li span { color: var(--ok); font-weight: 800; }
.passport-card li.pending { color: var(--text-muted); }
.passport-card li.pending span { color: var(--accent-strong); }
.passport-card .button { width: 100%; }

/* --- Výroba, katalog, reporty, nastavení -------------------------------- */
.factory-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 20px; margin-bottom: 12px; background: var(--brand-pattern), linear-gradient(110deg, var(--ink), var(--ink-2)); color: #fff; }
.factory-banner h2 { margin: 5px 0; }
.factory-banner p { margin: 0; color: #a9b3bd; font-size: 11px; }
.factory-kpis { display: flex; gap: 30px; }
.factory-kpis span { display: flex; flex-direction: column; text-align: right; }
.factory-kpis small { color: #919ca7; font-size: 10px; letter-spacing: .7px; }
.factory-kpis strong { margin-top: 5px; color: var(--accent-soft); font-size: 18px; }
.production-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.production-lane { overflow: hidden; }
.production-lane > header { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--border); }
.production-lane header > div { display: flex; align-items: center; gap: 8px; }
.production-lane header span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--ink); color: var(--accent-soft); font-size: 10px; font-weight: 800; }
/* Krok dráhy je nadpis (h3), vzhledem dál drobný popisek v hlavičce. */
.production-lane header h3 { margin: 0; font-family: inherit; font-size: 11.5px; letter-spacing: 0; }
.production-lane header em { font: normal 11px/1 inherit; }
.production-cards { min-height: 230px; padding: 8px; background: #f3f5f7; }
.production-lane.dragover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(225, 134, 59, .15); }
.production-lane.dragover .production-cards { background: var(--accent-tint); }
.production-lane.busy { opacity: .7; }
.production-card.draggable { cursor: grab; }
.production-card.draggable:active { cursor: grabbing; }
.production-card { display: block; padding: 11px; margin-bottom: 7px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); text-decoration: none; }
.production-card > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.production-card h4 { margin: 10px 0 4px; font-family: var(--font-display); font-size: 11.5px; }
.production-card > p { margin: 0 0 10px; color: var(--text-muted); font-size: 10px; }
.production-card .table-progress > div small { color: var(--text-muted); font-size: 10px; }
.lane-empty { margin: 60px 0; color: #909aa4; font-size: 11px; text-align: center; }
.quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.quality-checks, .transport-list { padding: 7px 16px 13px; }
.quality-checks > a, .transport-list > a { color: inherit; text-decoration: none; }
.quality-checks > a:hover, .transport-list > a:hover { border-radius: 7px; background: var(--surface-subtle); }
.quality-checks > a, .transport-list > a { min-height: 56px; display: grid; grid-template-columns: 25px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid #eef1f4; }
.quality-checks > a > span.pending { background: #fdeced !important; color: var(--danger) !important; }
.quality-checks > a > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--ok-tint); color: var(--ok-dark); font-size: 11px; font-weight: 800; }
.quality-checks p, .transport-list p { display: flex; flex-direction: column; margin: 0; }
.quality-checks strong, .transport-list strong { font-size: 11px; }
.quality-checks small, .transport-list small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.quality-checks em { color: var(--text-muted); font: normal 700 10px/1 inherit; }
.transport-list > a { grid-template-columns: 43px 1fr auto; }
.transport-list time { color: var(--accent-strong); font-size: 11.5px; font-weight: 800; }
.catalog-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 13px; }
.catalog-card { overflow: hidden; }
/* Dům, ze kterého jde rovnou začít poptávku, na to musí vypadat — jinak dvojklik
   nikdo nezkusí. */
.catalog-card.otevira-poptavku { cursor: pointer; }
.catalog-card.otevira-poptavku:hover { border-color: var(--accent); }
.catalog-card.otevira-poptavku .catalog-body button, .catalog-card.otevira-poptavku .catalog-body a { cursor: pointer; }
.catalog-card.archived { opacity: .62; }
.catalog-card.archived .catalog-visual { filter: grayscale(1); }
.catalog-card.archived footer span { color: var(--warning); font-weight: 700; }
.catalog-visual { position: relative; height: 108px; display: grid; place-items: center; background: linear-gradient(#f4f1ec 65%, #e8e4dd 65%); }
.catalog-visual > span { position: relative; z-index: 2; width: 70px; height: 42px; display: grid; place-items: center; margin-top: 20px; border: 3px solid var(--ink-2); border-radius: 2px; background: #fbfaf8; color: var(--accent-strong); font-weight: 800; }
.catalog-visual i { position: absolute; z-index: 1; width: 55px; height: 55px; top: 16px; border: 3px solid var(--ink-2); border-right: 0; border-bottom: 0; transform: rotate(45deg); }
.catalog-visual i.roof-plocha { width: 76px; height: 8px; top: 50px; transform: none; border-right: 3px solid var(--ink-2); }
/* Když je nahraná fotka domu, ustoupí jí kreslená předloha i její pozadí. */
.catalog-visual.s-fotkou { background: none; }
.catalog-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ovládání fotky se drží u spodní hrany karty a nezakrývá dům. */
.foto-vlozit { position: absolute; z-index: 3; left: 8px; bottom: 8px; min-height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 8px; background: rgba(29, 39, 49, .82); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.foto-vlozit:hover { background: var(--ink); }
.foto-vlozit .ico { width: 13px; height: 13px; }
.foto-vlozit input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-odebrat { position: absolute; z-index: 3; right: 8px; bottom: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(29, 39, 49, .82); color: #fff; font-size: 12px; cursor: pointer; }
.foto-odebrat:hover { background: var(--danger); }
.foto-vlozit input:disabled, .foto-odebrat:disabled { cursor: not-allowed; opacity: .5; }

.catalog-body { padding: 12px; }
.catalog-body > div { display: flex; justify-content: space-between; align-items: center; }
.catalog-body h2 { margin: 10px 0 5px; font-size: 13px; }
.catalog-body p { min-height: 46px; margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.catalog-body > strong { display: block; margin: 9px 0; color: var(--accent-strong); font-size: 15px; }
/* Popisek a akce stály v jedné řádce. Jakmile ke „Upravit“ přibylo „Použít
   v nabídce“, zbylo na text „evidovaná ceníková cena“ šedesát bodů a lámal se
   na tři řádky. Stojí proto nad tlačítky, ta pod sebou přes celou šířku. */
.catalog-body footer { display: grid; gap: 6px; padding-top: 9px; border-top: 1px solid #eef1f4; }
.catalog-body footer span { color: var(--text-muted); font-size: 9px; }
.catalog-body footer button, .catalog-body footer .link-button { width: 100%; }
.report-grid { display: grid; grid-template-columns: 1.8fr .7fr; gap: 13px; margin-bottom: 13px; }
.report-main { overflow: hidden; }
.duration-chart { padding: 14px 18px 19px; }
.duration-chart > div { display: grid; grid-template-columns: 130px 1fr 46px; gap: 10px; align-items: center; min-height: 44px; }
.duration-chart span { font-size: 11px; }
.duration-chart i { height: 9px; overflow: hidden; border-radius: 5px; background: #e8ecf0; }
.duration-chart em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); }
.duration-chart strong { font-size: 11px; text-align: right; }
.report-side { padding: 19px; background: var(--brand-pattern), linear-gradient(145deg, var(--ink), var(--ink-2)); color: #fff; }
.report-side > strong { display: block; margin-top: 20px; color: var(--accent-soft); font-size: 42px; }
.report-side h2 { margin: 4px 0 8px; font-size: 16px; }
.report-side p { color: #aab4be; font-size: 11px; }
.report-side a { display: inline-block; margin-top: 17px; color: var(--accent-soft); text-decoration: none; font-size: 11px; font-weight: 700; }

/* --- Transakční formuláře a expediční gate ------------------------------ */
.inline-create { display: grid; grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(180px, 1fr)); gap: 18px; align-items: end; margin-bottom: 22px; padding: 22px; border-color: var(--accent-line); }
.inline-create > div:first-child { grid-row: span 2; align-self: start; }
.inline-create h2 { margin: 5px 0 7px; font-size: 20px; }
.inline-create p { margin: 0; color: var(--text-muted); line-height: 1.5; font-size: 12px; }
.inline-create label { display: grid; gap: 7px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.inline-create input:not([type=checkbox]), .inline-create select, .evidence-submit input { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); padding: 9px 11px; font: inherit; }
.inline-create input:not([type=checkbox]):focus, .inline-create select:focus, .evidence-submit input:focus { outline: 2px solid rgba(225, 134, 59, .25); border-color: var(--accent); }
.inline-create label.wide { grid-column: 2 / -1; }
/* Vysvětlivka pod polem: patří k němu, ne mezi popisky.  */
.inline-create .field-hint { color: var(--text-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }

/* Dlouhý text nemá utíkat doprava. Pole na volný text roste s obsahem dolů,
   zobrazená hodnota se zalomí — i když je to jedno dlouhé slovo bez mezer. */
textarea { field-sizing: content; overflow-wrap: anywhere; }
.details-editor textarea, .inline-create textarea, .modal-card textarea {
    width: 100%; min-height: 64px; max-height: 42vh; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 7px; background: #fff;
    color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.details-editor textarea:focus, .inline-create textarea:focus, .modal-card textarea:focus {
    outline: 2px solid rgba(225, 134, 59, .25); border-color: var(--accent);
}
.fact-list strong, .fact-list small, .stacked-cell strong, .stacked-cell small,
.card-note, .detail-stat-grid strong, .detail-stat-grid span, .data-table td,
.contract-step strong, .contract-step small, .cf-popis strong, .cf-popis small {
    overflow-wrap: anywhere;
}
.inline-create textarea { width: 100%; min-height: 72px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; resize: vertical; }
.inline-create textarea:focus { outline: 2px solid rgba(225, 134, 59, .25); border-color: var(--accent); }
.inline-create .checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 9px; letter-spacing: 0; }
/* Čtverec, ne obdélník přes celou výšku řádku — pravidla pro textová pole
   zaškrtávátko protahovala a vypadalo jako cizí prvek ve formuláři. */
.inline-create .checkbox-label input { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; accent-color: var(--accent-strong); }
.inline-create .validation-message { color: #b42318; font-size: 11px; letter-spacing: 0; }
.operation-message { margin: 0 0 18px; padding: 12px 15px; border-radius: 7px; font-size: 12px; font-weight: 650; }
.operation-message.success { color: #116530; background: #ecf9ef; border: 1px solid #bde5c8; }
.operation-message.error { color: #8e1d16; background: #fff0ee; border: 1px solid #f2c4bf; }

.dispatch-gate-card { margin: 20px 0; padding: 22px; }
.gate-release-note { display: grid; gap: 3px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--ok); border-radius: 8px; background: var(--ok-tint); }
.gate-release-note.override { border-left-color: var(--warning); background: #fdf6ea; }
.gate-release-note strong { font-size: 12px; }
.gate-release-note span { color: var(--text-muted); font-size: 10.5px; }
.gate-release-note p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; }
.gate-stream select { min-height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 11px; }
.evidence-by { color: var(--ok-dark); font-size: 10px; font-weight: 650; white-space: nowrap; }
.milestone-block-reason { margin: 5px 0 0 !important; padding: 6px 8px; border-radius: 6px; background: #fff4f3; color: var(--danger) !important; font-size: 10.5px !important; line-height: 1.45; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-actions input[type="date"] { min-height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 11.5px; }
.data-table td .quiet-note { margin-top: 2px; }
.gate-streams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.gate-stream { display: flex; align-items: center; gap: 11px; min-height: 78px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; }
.gate-stream > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eef1f4; font-weight: 800; }
.gate-stream > div { display: grid; gap: 3px; flex: 1; }
.gate-stream small { color: var(--text-muted); font-size: 9.5px; letter-spacing: .08em; }
.gate-stream strong { font-size: 11.5px; }
.gate-stream button, .gate-evidence-row button { flex: 0 0 auto; }
.gate-stream.ready { border-color: #bde5c8; background: #f2fbf4; }
.gate-stream.ready > span { color: #116530; background: #dff4e4; }
.gate-stream.blocked { border-color: #f2c4bf; background: #fff7f6; }
.gate-stream.blocked > span { color: #b42318; background: #ffe4e0; }
.gate-stream.progress > span { color: #9a5b00; background: #fff1d2; }
.gate-evidence-list { border-top: 1px solid var(--border); }
.gate-evidence-head, .gate-evidence-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.gate-evidence-head { justify-content: space-between; color: var(--text-muted); font-size: 11px; }
.gate-evidence-row > div { display: grid; gap: 3px; flex: 1; }
.gate-evidence-row strong { font-size: 11.5px; }
.gate-evidence-row small { color: var(--text-muted); font-size: 11px; }
.evidence-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; }
.evidence-mark.verified { color: #116530; background: #dff4e4; }
.evidence-mark.submitted { color: #9a5b00; background: #fff1d2; }
.evidence-mark.missing { color: #b42318; background: #ffe4e0; }
.evidence-submit { display: flex; gap: 10px; margin-top: 14px; }
.gate-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.gate-actions > div { display: grid; gap: 3px; }
.gate-actions small { color: var(--text-muted); font-size: 9.5px; letter-spacing: .08em; }

/* --- Veřejný obal pro nepřihlášené (přihlášení má vlastní izolované CSS) --- */
.public-shell { min-height: 100vh; }

/* --- Identity (Account) stránky ------------------------------------------
   Scaffoldované stránky používají bootstrapové třídy; Bootstrap se neservíruje,
   proto zde žije minimální kompatibilní vrstva ve firemním stylu. */
.form-control { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.form-control:focus { outline: 2px solid rgba(225, 134, 59, .25); border-color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 700; text-decoration: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); }
.btn-lg { min-height: 46px; font-size: 14px; }
.btn-link { background: transparent; color: var(--accent-strong); }
.btn-danger { background: #fff2f0; border-color: #efc1bc; color: var(--danger); }
.btn-secondary, .btn-outline-primary { background: #fff; border-color: var(--border); color: var(--text); }
.w-100 { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 28px; }
.row > [class^="col-"] { flex: 1 1 320px; min-width: 0; max-width: 560px; }
.form-floating { position: relative; display: grid; gap: 6px; }
.form-floating > label { order: -1; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.form-label { color: var(--text-muted); font-size: 12px; font-weight: 650; }
.mb-3 { margin-bottom: 14px; }
.mt-2 { margin-top: 8px; }
.mx-auto { margin-inline: auto; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.text-secondary { color: var(--text-muted); font-size: 11px; letter-spacing: .08em; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--accent-strong); }
.checkbox label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.alert { padding: 12px 15px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font-size: 12.5px; }
.alert-danger { border-color: #f2c4bf; background: #fff0ee; color: #8e1d16; }
.alert-success { border-color: #bde5c8; background: #ecf9ef; color: #116530; }
.alert-warning, .alert-info { border-color: #f0d9bd; background: var(--accent-tint); color: #6f5a3f; }
.nav.nav-pills { display: flex; padding: 0; margin: 0 0 16px; list-style: none; gap: 4px; }
.nav.nav-pills.flex-column { flex-direction: column; }
.nav-pills .nav-link { display: block; padding: 9px 12px; border-radius: 7px; color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.nav-pills .nav-link:hover { background: var(--surface-subtle); color: var(--text); }
.nav-pills .nav-link.active { background: var(--accent-tint); color: var(--accent-strong); }
.recovery-code { display: inline-block; padding: 6px 9px; margin: 3px; border: 1px dashed var(--accent-line); border-radius: 5px; background: #fff; font-weight: 700; letter-spacing: .05em; }
article[id] h1, main h1 { letter-spacing: -.8px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

@media (max-width: 1180px) {
    .inline-create { grid-template-columns: 1fr 1fr 1fr; }
    .inline-create > div { grid-column: 1 / -1; }
    .report-metrics, .document-kpis { grid-template-columns: repeat(2, 1fr); }
    .production-board { grid-template-columns: repeat(2, 1fr); }
    .catalog-grid { grid-template-columns: repeat(3, 1fr); }
    /* Úvodní dlaždice přes celý řádek, čtyři čísla pod ní dvě a dvě (jinak jedno zbude samo). */
    .service-summary { grid-template-columns: repeat(2, 1fr); }
    .service-summary > .service-focus { grid-column: 1 / -1; }
    .case-row { grid-template-columns: 30px 1fr 90px 15px; }
    .case-owner { display: none; }
}
@media (max-width: 900px) {
    .summary-strip, .detail-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .service-grid, .planner-lower-grid, .quality-grid, .report-grid { grid-template-columns: 1fr; }
    /* week-board a kanban-board mají overflow-x:auto samy na sobě; minimální šířku
       drží minmax() sloupců, takže se posouvá obsah panelu, ne celá stránka. */
    .production-board { grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; }
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .inline-create { grid-template-columns: 1fr 1fr; }
    .inline-create > div { grid-column: 1 / -1; }
    .gate-streams { grid-template-columns: 1fr; }
    .document-upload-grid { grid-template-columns: 1fr 1fr; }
    .document-file-picker { grid-column: 1 / -1; }
    .document-upload-actions { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .summary-strip, .detail-stat-grid, .report-metrics, .document-kpis, .service-summary, .catalog-grid { grid-template-columns: 1fr; }
    .summary-strip > div { border-right: 0; border-bottom: 1px solid var(--border); }
    .filter-bar { flex-wrap: wrap; }
    .table-search { min-width: 100%; }
    .filter-bar select { flex: 1; }
    .result-count { width: 100%; margin: 0; }
    .context-tabs { overflow-x: auto; }
    .context-tabs button { white-space: nowrap; }
    .inline-create { grid-template-columns: 1fr; }
    .inline-create > div { grid-column: auto; }
    /* label.wide drží druhý sloupec i v jednosloupcovém rozvržení — formulář
       servisu se tím rozpadl na 92px a 191px vedle sebe. */
    .inline-create label.wide { grid-column: auto; }
    .factory-banner { align-items: flex-start; flex-direction: column; }
    .factory-kpis { width: 100%; justify-content: space-between; }
    .catalog-grid { grid-template-columns: 1fr; }
    .case-row { grid-template-columns: 28px 1fr 14px; }
    .case-sla { display: none; }
    .planner-toolbar { flex-wrap: wrap; }
    .planner-toolbar .table-search { width: 100%; margin: 0; }
    .legend { display: none; }
    .document-upload-grid { grid-template-columns: 1fr; }
    .document-file-picker, .document-upload-actions { grid-column: auto; }
    .document-upload-actions .button { flex: 1; }
    /* Řádky s tlačítky na konci se musí zalomit, jinak akce mizí za okrajem. */
    .heading-actions { flex-wrap: wrap; }
    .dispatch-gate-card { padding: 16px; }
    .gate-stream { flex-wrap: wrap; }
    .gate-stream > div { flex: 1 1 140px; }
    /* Zarovnat pod text proudu, ne pod kolečko se stavem (32 px + mezera 11 px). */
    .gate-stream button, .gate-stream select { margin-left: 43px; }
    .gate-evidence-head, .gate-evidence-row { flex-wrap: wrap; gap: 8px 10px; }
    .gate-evidence-row > div { flex: 1 1 140px; }
    .gate-actions { align-items: stretch; flex-direction: column; gap: 12px; }
    .gate-actions .button { width: 100%; }
    .folder-head { flex-wrap: wrap; }
    .folder-drop .drop-hint { white-space: normal; text-align: right; }
    /* Zkrácení názvu úkolu na jeden řádek nechá na telefonu jen pár slov. */
    .task-copy strong, .task-row strong { overflow: visible; white-space: normal; }

}

/* --- Správa uživatelů --------------------------------------------------- */
.admin-create-form, .user-access-editor { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 22px; padding: 22px; margin-bottom: 16px; }
.admin-create-form > label { display: grid; align-content: start; gap: 7px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.admin-create-form > label input { min-height: 42px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; }
.role-selector { grid-column: 1 / -1; padding: 0; border: 0; }
.role-selector legend { margin-bottom: 9px; color: var(--text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.role-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-options > label { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: #fafbfc; cursor: pointer; }
.role-options input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent-strong); }
.role-options label > span { display: grid; gap: 3px; }
.role-options strong { font-size: 11.5px; }
.role-options small { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.form-actions, .user-editor-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }
.temporary-credential { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 18px 20px; margin-bottom: 16px; border-color: #e1b54e; background: #fffaf0; }
.temporary-credential h2 { margin: 5px 0; font-size: 16px; }
.temporary-credential p { margin: 0; color: var(--text-muted); font-size: 11px; }
.quarantine-release { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.quarantine-release input { min-height: 30px; min-width: 160px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 11px; }
.document-kpi-button { display: flex; align-items: center; gap: 13px; padding: 16px 18px; text-align: left; font: inherit; cursor: pointer; }
.document-kpi-button:hover { border-color: var(--accent); }
.document-kpi-button.active { border-color: var(--accent); background: var(--accent-tint); }
.table-empty { padding: 22px 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
.warning-note { margin: 0 0 12px !important; padding: 10px 13px; border-radius: 8px; border: 1px solid #f0d9bd; background: var(--accent-tint); color: #8a4b06 !important; text-align: left !important; }
.temporary-credential code { padding: 10px 13px; border: 1px dashed #c88b13; border-radius: 6px; background: #fff; color: #5b3a00; font-size: 15px; font-weight: 800; letter-spacing: .06em; user-select: all; }
.security-trail { grid-column: 1 / -1; margin-top: 4px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); }
.security-trail ul { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.security-trail li { display: grid; grid-template-columns: 118px 1fr; gap: 3px 11px; align-items: baseline; font-size: 11.5px; }
.security-trail time { color: var(--text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.security-trail small { grid-column: 2; color: var(--text-muted); font-size: 10.5px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chips span { padding: 4px 7px; border-radius: 4px; background: #eef1f4; color: #3b4854; font-size: 9.5px; font-weight: 700; }
.admin-users-table .selected-row td { background: var(--accent-tint) !important; }
.compact-button { min-height: 30px; padding: 0 9px; }
.button-danger { border-color: #efc1bc; background: #fff2f0; color: var(--danger); }
/* Zrušení zakázky — nevratná akce má být poznat. */
.link-button.danger { border-color: #efc1bc; color: var(--danger); }
.text-muted { color: var(--text-muted); font-size: 11px; }
.user-access-editor > div:first-child h2 { margin: 5px 0; }
.user-access-editor > div:first-child p { margin: 0; color: var(--text-muted); font-size: 12px; }
/* Oprávnění rolí: matice „co která skupina smí“. Sloupec rolí musí zůstat čitelný
   i na telefonu, proto se tabulka posouvá do strany ve svém obalu, ne celá stránka. */
.opravneni-roli { display: grid; gap: 14px; margin-top: 18px; }
.opravneni-roli-hlavicka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.opravneni-roli-hlavicka h2 { margin: 5px 0; }
.opravneni-roli-hlavicka p { margin: 0; max-width: 68ch; color: var(--text-muted); font-size: 12px; }
.opravneni-roli-prepinac { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 11.5px; cursor: pointer; }
.opravneni-roli-tabulka th[scope="col"] { min-width: 132px; text-align: center; vertical-align: bottom; }
.opravneni-roli-tabulka th[scope="col"]:first-child { min-width: 260px; text-align: left; }
.opravneni-roli-role { display: block; color: var(--text); font-size: 11.5px; letter-spacing: 0; }
.opravneni-roli-tabulka th[scope="col"] small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.opravneni-roli-tabulka th[scope="row"] { font-weight: 500; text-align: left; }
.opravneni-roli-tabulka td { text-align: center; }
.opravneni-roli-tabulka td input { width: 17px; height: 17px; accent-color: var(--accent-strong); cursor: pointer; }
.opravneni-roli-cast th { padding-top: 14px; background: #f6f7f9; color: var(--text-muted); font-size: 9.5px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.opravneni-roli-akce { display: grid; justify-items: center; gap: 4px; }

@media (max-width: 900px) {
    .admin-create-form, .user-access-editor { grid-template-columns: 1fr; }
    .temporary-credential { grid-template-columns: 1fr; }
    .role-options { grid-template-columns: 1fr; }
}

/* --- Poctivé stavy akcí pro modulové stránky ---------------------------- */
.button:disabled { cursor: not-allowed; opacity: .48; }

/* Firemní vzor: kaskáda obrysů modulů se zaoblenými rohy (podle brand podkladu).
   Varianta pro tmavé plochy (nižší krytí) a pro světlé pozadí (jemné linky). */
:root {
    --brand-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='210' viewBox='0 0 190 210'%3E%3Cg fill='none' stroke='%23e4be8a' stroke-opacity='.22' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M96 8 150 39v62l-54 31-54-31V39Z'/%3E%3Cpath d='M42 39l54 31 54-31M96 70v62'/%3E%3Cpath d='M150 128l34 20v40l-34 20-34-20v-40Z'/%3E%3Cpath d='M116 148l34 20 34-20M150 168v40'/%3E%3Cpath d='M8 150l30 17v35l-30 17-30-17v-35Z'/%3E%3C/g%3E%3C/svg%3E");
    --brand-pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='210' viewBox='0 0 190 210'%3E%3Cg fill='none' stroke='%23e4be8a' stroke-opacity='.35' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M96 8 150 39v62l-54 31-54-31V39Z'/%3E%3Cpath d='M42 39l54 31 54-31M96 70v62'/%3E%3Cpath d='M150 128l34 20v40l-34 20-34-20v-40Z'/%3E%3Cpath d='M116 148l34 20 34-20M150 168v40'/%3E%3Cpath d='M8 150l30 17v35l-30 17-30-17v-35Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Karty obchodního případu (záložky Dům, Pozemek, Financování) --- */
.lead-card .panel-heading.compact { align-items: center; }

.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px 16px; padding: 4px 20px 18px; }
.fact-list div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact-list small { color: var(--text-muted); font-size: 10.5px; letter-spacing: .06em; }
.fact-list strong { font-size: 13.5px; font-weight: 600; }

.survey-strip { display: flex; align-items: center; gap: 14px; margin: 0 20px 18px; padding: 13px 16px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-subtle); }
.survey-strip.done { border-style: solid; border-color: var(--ok); background: var(--ok-tint); }
.survey-strip div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.survey-strip small { color: var(--text-muted); font-size: 11.5px; }

.contract-strip { display: flex; flex-direction: column; gap: 8px; padding: 4px 20px 18px; }
.contract-step { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.contract-step > span { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-subtle); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.contract-step div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contract-step small { color: var(--text-muted); font-size: 11.5px; }
.contract-step.done { border-color: var(--ok); background: var(--ok-tint); }
.contract-step.done > span { background: var(--ok); color: #fff; }
.contract-step.pending { border-color: var(--accent); background: var(--accent-tint); }
.contract-step.pending > span { background: var(--accent); color: #fff; }
@keyframes vyzva-tep {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225, 134, 59, 0); }
    50% { box-shadow: 0 0 0 7px rgba(225, 134, 59, .16); }
}
.contract-step.vyzva { animation: vyzva-tep 2.6s ease-in-out infinite; }
.contract-step.vyzva .link-button { font-weight: 750; }
@media (prefers-reduced-motion: reduce) {
    .contract-step.vyzva { animation: none; box-shadow: 0 0 0 3px rgba(225, 134, 59, .18); }
}

.journal-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.journal-kinds button { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.journal-kinds button.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }

/* Odkaz na přeskočení navigace: schovaný, dokud na něj někdo netabuluje. */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 100; padding: 11px 16px; border-radius: 0 0 9px 9px; background: var(--ink); color: #fff; text-decoration: none; font-size: 13px; font-weight: 650; transition: top .15s ease; }
.skip-link:focus { top: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-card:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Zrušené úkoly zakázky: schované, ale dosažitelné — jinak z nich nevede cesta zpět. */
.cancelled-tasks { padding: 0 20px 14px; }
.cancelled-tasks summary { cursor: pointer; color: var(--text-muted); font-size: 11.5px; font-weight: 650; padding: 8px 0; }
.cancelled-tasks .task-list { padding: 0; }
.cancelled-tasks .task-row strong { text-decoration: line-through; color: var(--text-muted); }

/* --- Provozní záznam pro správce --------------------------------------- */
.log-table td { vertical-align: top; }
.log-table .stacked-cell strong { font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
.log-category { color: var(--text-muted); font-size: 10.5px; overflow-wrap: anywhere; }
.log-table tr.log-error td { background: #fff7f6; }
.log-exception { margin-top: 6px; }
.log-exception summary { cursor: pointer; color: var(--accent-strong); font-size: 11px; font-weight: 650; }
.log-exception pre { margin: 7px 0 0; padding: 10px 12px; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
main:focus { outline: none; }
/* Pokyn „přetáhněte" je na dotykovém displeji nesplnitelný, protože HTML5
   drag&drop se tam nevyvolá vůbec. Každé takové místo proto má i druhou větu
   pro dotyk a ke každé akci vede tlačítko. */
.jen-dotyk { display: none; }
@media (pointer: coarse) {
    .jen-mysi { display: none; }
    .jen-dotyk { display: inline; }
    /* Zavírací zóny případu jsou jen cíl přetažení — na dotyku by to byly mrtvé
       plochy, které vypadají jako tlačítka. Uzavřít jde z karty tlačítkem. */
    .lead-closing { display: none; }
}
.text-ok { color: var(--ok-dark); }
.text-warning { color: var(--warning); }

/* Obchodní termín v kalendáři plánovače — odliší se od úkolů zakázky. */
.calendar-meeting { border-left: 3px solid var(--blue); background: #f4f7ff; }
.calendar-meeting strong { color: var(--ink); }

/* Tlačítka v hlavičkách karet a v řádcích potřebují po zvětšení vlastní rozestup,
   aby se nelepila na nadpis ani na sebe. */
.panel-heading.compact { align-items: center; gap: 12px; }
.panel-heading .link-button { flex: 0 0 auto; }
.milestone-actions, .case-actions, .document-actions { gap: 8px; margin-top: 8px; }
.survey-strip .link-button, .contract-step .link-button { flex: 0 0 auto; }
.details-editor .document-upload-actions { gap: 10px; }
/* Zavřít a Zrušit jsou ústupové akce — drží tvar tlačítka, ale bez akcentní barvy. */
.link-button.quiet { color: var(--text-muted); }
.link-button.quiet:hover { border-color: var(--border); background: var(--surface-subtle); color: var(--text); }

/* --- Průtok práce v plánovači ------------------------------------------
   Řádky neměly žádný styl, takže se název proudu slepoval s fází
   („Projektanti + inženýringPovolování“) a počet padal na další řádek. */
.capacity-list { display: flex; flex-direction: column; padding: 2px 20px 6px; }
.capacity-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.capacity-row:last-child { border-bottom: 0; }
.capacity-row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.capacity-row strong { font-size: 13.5px; font-weight: 650; }
.capacity-row small { color: var(--text-muted); font-size: 11.5px; }
.capacity-row .source-tag { flex: 0 0 auto; }

/* --- Auditní stopa ------------------------------------------------------
   Stejná vada: hlavička s hledáním a tabulka neměly styl vůbec. */
.audit-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 13px; }
.audit-toolbar .table-search { flex: 1 1 260px; }
.audit-toolbar .source-tag { margin-left: auto; }
.audit-table { min-width: 900px; }
.audit-table td { vertical-align: top; }
.audit-table .stacked-cell { gap: 3px; }
.audit-reason { color: var(--accent-strong); }

/* Okno pro rychlé zadání úkolu z kalendáře. */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(29, 39, 49, .45); }
.modal-card { width: min(520px, 100%); max-height: 88vh; overflow-y: auto; border-radius: 14px; background: var(--surface); box-shadow: 0 24px 60px -20px rgba(29, 39, 49, .5); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 4px; }
.modal-head h2 { margin: 2px 0 0; font-size: 19px; }
/* Jen první písmeno: názvy dnů chodí z kultury malým písmem, ale název úkolu
   se velkými písmeny uprostřed věty rozbíjel. */
.modal-head h2::first-letter { text-transform: uppercase; }
.modal-card .details-editor { padding: 12px 22px 22px; }
/* Dlouhé okno (pozemek, doklad k záloze) se roluje pod hlavičkou a nad
   tlačítky. Dřív s formulářem odjelo obojí a „Uložit“ bylo pod okrajem
   obrazovky; kolečko navíc točilo stránkou pod oknem. */
.modal-card { overscroll-behavior: contain; }
.modal-card > .modal-head { position: sticky; top: 0; z-index: 3; padding-bottom: 10px; background: var(--surface); }
/* Hláška v okně má stejné odsazení jako hlavička a formulář pod ní — jinak sedí na doraz k hraně karty. */
.modal-card > .operation-message, .modal-card > .okno-hlaseni > .operation-message { margin: 0 22px 14px; }
.modal-card:not(.doklad-nahled) .document-upload-actions,
.modal-card:not(.doklad-nahled) .form-actions { position: sticky; bottom: 0; z-index: 3; padding: 10px 0 4px; background: var(--surface); box-shadow: 0 0 0 22px var(--surface); clip-path: inset(-6px -22px -22px -22px); }
body:has(.modal-backdrop), body:has(.lightbox) { overflow: hidden; }
/* Okna dokladů nemají obal s odsazením — tlačítka ležela na hraně karty.
   Hláška o chybě stojí v patě hned u tlačítka, takže je vidět vždycky. */
.modal-card:not(.doklad-nahled) > .form-actions { flex-wrap: wrap; padding: 12px 22px 18px; }
.modal-card .form-actions > .operation-message { flex: 1 1 100%; margin: 0; }
/* Delší poznámka v okně roste s textem; posouvá se okno, ne třetí posuvník v poli. */
.modal-card .details-editor textarea, .modal-card textarea { max-height: none; }
/* Popis případu povýšeného z vady má řádky (popis, místo, odkud) — ať se neslepí. */
.case-row .case-note { white-space: pre-line; }

/* Náhled dokladu: list papíru v okně nad stránkou, ne další formulář. */
/* Okno náhledu je široké tak, aby se do něj vešel celý list A4 i s okraji;
   na užší obrazovce se papír zmenší, ale poměr stran zůstane. */
/* Náhled dokladu ukazuje celý list, ne jeho horní třetinu: okno má pevnou
   výšku, papír se do zbylého místa zmenší a tlačítka zůstanou na očích.
   Kdo si chce text přiblížit, přepne na skutečnou velikost — teprve pak se
   okno roluje. */
.modal-card.doklad-nahled { width: min(232mm, 100%); height: min(96vh, 1500px); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal-card.doklad-nahled .modal-head, .modal-card.doklad-nahled .modal-akce { flex: 0 0 auto; }
.doklad-nahled-telo { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; gap: 0; padding: 10px 6mm; overflow: auto; background: var(--surface-subtle); }
.doklad-nahled-telo .faktura { flex: 0 0 auto; max-width: none; box-shadow: 0 2px 10px -4px rgba(29, 39, 49, .35); }

/* Měřítko po krocích podle výšky okna. Bez skriptu se přesný zlomek spočítat
   nedá (CSS neumí dělit délky), takže je každý krok raději o kousek menší —
   radši úzký proužek místa navíc než papír, který zase přeteče. */
.doklad-nahled-telo--prizpusobit .faktura { zoom: .34; }
@media (min-height: 660px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .43; } }
@media (min-height: 760px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .51; } }
@media (min-height: 860px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .60; } }
@media (min-height: 960px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .68; } }
@media (min-height: 1060px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .77; } }
@media (min-height: 1160px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .85; } }
@media (min-height: 1260px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: .94; } }
@media (min-height: 1360px) { .doklad-nahled-telo--prizpusobit .faktura { zoom: 1; } }

/* Na úzké obrazovce se papír nevejde ani na šířku. Musí to být screen: bez
   typu média platí dotaz i pro tisk a stránka A4 má 794 px — doklad by
   z tiskárny vyjel zmenšený na 70 % včetně okrajů a písma. */
@media screen and (max-width: 900px) { .doklad-nahled-telo .faktura, .tisk-plocha .faktura { zoom: .7; } }
@media screen and (max-width: 640px) { .doklad-nahled-telo .faktura, .tisk-plocha .faktura { zoom: .48; } }
.doklad-nahled-chyba { padding: 4px 22px 12px; }
.modal-akce { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; }
.doklad-radek { cursor: zoom-in; }

/* Výběr, co vystavit: každý řádek je jedna nabídka, ne formulář. */
.vyber-dokladu { display: flex; flex-direction: column; gap: 8px; padding: 12px 22px 22px; }
.vyber-radek {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: inherit; text-align: left; cursor: pointer;
}
.vyber-radek:hover { border-color: var(--accent); background: var(--accent-tint); }
.vyber-radek strong { font-size: 13.5px; }
.vyber-radek small { color: var(--text-muted); font-size: 11.5px; }
.vyber-radek span[aria-hidden] { color: var(--accent-strong); font-size: 16px; }
.vyber-dokladu .quiet-note { margin: 0; }
/* Zamčená konečná faktura (zálohy zdaněné mimo CRM, neuvedená hodnota): vidět, ale s důvodem. */
.vyber-radek:disabled { cursor: not-allowed; background: var(--surface-subtle); }
.vyber-radek:disabled:hover { border-color: var(--border); background: var(--surface-subtle); }
.vyber-radek:disabled small { color: var(--text); }

/* Spis zakázky — zpětný zápis. Výzva k zápisu první zálohy nad platbami: rozjetá zakázka
   z obchodu stojí ve fázi Smlouva jen proto, že úhrada zálohy v CRM není. */
.vyzva-zalohy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 20px 14px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-tint); }
.vyzva-zalohy > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 16rem; }
.vyzva-zalohy strong { color: var(--ink); font-size: 13.5px; }
.vyzva-zalohy span { color: var(--text); font-size: 12px; line-height: 1.45; }
.vyzva-zalohy .button { flex: 0 0 auto; }
/* Doklad k platbě vystavený mimo CRM: číslo místo tlačítka „Vystavit daňový doklad“. */
.doklad-mimo strong { color: var(--text); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.doklad-mimo small { color: var(--text-muted); font-size: 10.5px; }
.doklad-mimo .link-button { align-self: flex-start; padding: 0; }
/* Nápověda pod polem v oknech spisu (den události, číslo dokladu, smluvní hodnota). */
.details-editor .field-hint { color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
@media (max-width: 640px) {
    .vyzva-zalohy { margin: 0 14px 12px; }
    .vyzva-zalohy .button { width: 100%; }
}
.day-column { cursor: pointer; }
.day-column .calendar-task, .day-column .drop-slot { cursor: default; }
.day-column.draggable .calendar-task { cursor: grab; }

/* Okno úkolu v plánovači. */
.task-modal-body { display: flex; flex-direction: column; gap: 14px; padding: 8px 22px 22px; }
/* Pole ve formulářích uvnitř oken drží stejný tvar jako v kartách. */
.task-modal-body label { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.task-modal-body textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; text-transform: none; letter-spacing: normal; resize: vertical; }
.task-modal-body .fact-list { padding: 0; }
.task-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.task-modal-actions .button-primary { margin-left: auto; min-height: 32px; padding: 0 14px; font-size: 12.5px; }
/* Úkol v kalendáři je tlačítko, ale drží vzhled karty. */
button.calendar-task { width: 100%; text-align: left; font: inherit; }
/* Modrý pruh vlevo je jediné, co termín odlišuje od úkolu — tlačítkový rám ho nesmí přebít. */
button.calendar-meeting { border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
button.overdue-task { width: 100%; text-align: left; font: inherit; background: none; border: 0; border-top: 1px solid #f6dedb; cursor: pointer; }

/* Doptání před nevratným uzavřením servisního případu. */

/* Archivovaný model se v katalogu nenabízí; bez odlišení vypadal jako aktivní. */
.catalog-card.archived { opacity: .62; border-style: dashed; }
.catalog-card.archived .catalog-visual { filter: grayscale(1); }

/* iOS Safari skokem přiblíží celou stránku, jakmile se klepne do políčka s písmem
   menším než 16 px — a po odklepnutí ji nevrátí zpět; pod 40 px se navíc na dotyku
   špatně trefuje. Nestačí max-width: telefon naležato má přes 800 px na šířku a
   pravidlo by přestalo platit zrovna při psaní. Rozhoduje proto hrubý ukazatel.
   Na desktopu zůstává hustota formulářů beze změny. */
@media (max-width: 680px), (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]),
    select:not([size]):not([multiple]),
    textarea:not([readonly]):not([disabled]) { font-size: 16px; }
    input:not([type=checkbox]):not([type=radio]):not([type=file]),
    select:not([size]):not([multiple]) { min-height: 40px; }
    /* Vyhledávací pole je rámeček kolem inputu — musí povyrůst s ním. */
    .table-search { height: 44px; }
}

/* Zápis úhrady přímo v řádku platby: datum z výpisu a částka, která reálně
   přišla. Dřív to byl jeden klik k dnešnímu dni bez částky — a na daňovém
   dokladu je datum přijetí penězi datem zdanitelného plnění. */
.uhrada-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uhrada-radek input { min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12.5px; }
.uhrada-radek input[type="number"] { width: 110px; }
.uhrada-radek .button, .uhrada-radek .link-button { flex: 0 0 auto; }

/* --- Doklad k tisku ------------------------------------------------------
   V řešení není žádná knihovna na PDF, takže první verze faktury je
   tisknutelná stránka — uživatel dá Uložit jako PDF a prohlížeč ho vyrobí. */
.tisk-plocha { background: var(--surface-subtle); color: #16202a; min-height: 100vh; padding: 20px; }
.tisk-lista { display: flex; flex-wrap: wrap; gap: 8px; width: 210mm; max-width: 100%; margin: 0 auto 18px; }
/* Doklad je list A4, ne pružný panel: 210 × 297 mm i na obrazovce, aby náhled
   ukazoval přesně to, co vyjede z tiskárny. Okraje nese papír sám (@page má
   nulu), takže se při tisku nesčítají s okrajem stránky. */
.faktura { position: relative; overflow: hidden; box-sizing: border-box; width: 210mm; min-height: 297mm; margin: 0 auto; padding: 16mm 15mm; border: 1px solid #dde1d8; background: #fff; }
/* Vzor sedí v pravém dolním rohu a přetéká přes okraj papíru, aby vypadal
   jako na tiskovinách. Je pod textem a tak světlý, aby se přes něj četlo. */
.faktura-vzor { position: absolute; right: -14mm; bottom: -10mm; width: 68mm; height: auto; opacity: .55; pointer-events: none; }
.faktura-storno { margin: -10px 0 18px; padding: 8px 12px; border: 1px solid var(--danger); border-radius: 6px; color: var(--danger); font-weight: 800; letter-spacing: .08em; }
.faktura-hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
/* Na dokladu je celý firemní podpis (značka i nápis), ne jen symbol — papír jde klientovi do ruky. */
.faktura-logo { flex: 0 0 auto; width: 148px; height: auto; display: block; }

/* Hláška u pole v ručních editorech (karty, okna). Stejná řeč jako validace
   formulářů na EditFormu — jen bez modelu, protože ta pole žádný nemají. */
/* Firemní izometrická řada návrh → výroba → doprava → dům. Kresba pochází
   z podkladu tiskovin, barvu bere z rodiče (currentColor), takže funguje
   na světlém i grafitovém podkladu. Styl je globální, protože komponentu
   sdílí víc stránek a izolované CSS rodiče dovnitř nedosáhne. */
.proces-znacky { display: flex; gap: 16px; padding: 0; margin: 24px 0 0; list-style: none; }
.proces-znacky li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.proces-obrazek { display: block; height: 40px; }
.proces-obrazek svg { display: block; height: 100%; width: auto; }
.proces-znacky strong { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.proces-znacky small { font-size: 11px; line-height: 1.35; opacity: .75; }
/* --- Vady a nedodělky ---------------------------------------------------- */
.vady-panel { display: flex; flex-direction: column; gap: 12px; }
/* Ovládání v hlavičce panelu (přepínač Moje / Všechny, vyřešené) vedle „Zapsat vadu“. */
.vady-hlava-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.vady-souhrn { display: flex; flex-wrap: wrap; gap: 18px; padding: 0 2px; color: var(--text-muted); font-size: 12.5px; }
.vady-souhrn strong { color: var(--text); font-size: 15px; font-weight: 700; margin-right: 4px; }
.vady-souhrn .je-po-terminu strong, .vada-radek .je-po-terminu { color: var(--danger); }
.vady-seznam { display: flex; flex-direction: column; gap: 10px; }
.vada { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; background: var(--surface); }
.vada.je-uzavrena { opacity: .72; }
.vada.zavaznost-critical { border-left-color: var(--danger); }
.vada.zavaznost-high { border-left-color: var(--warning); }
.vada.zavaznost-normal { border-left-color: var(--accent); }
.vada.zavaznost-low { border-left-color: var(--border); }
.vada header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vada header strong { display: block; font-size: 14.5px; }
.vada header small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.vada-stav { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-subtle); color: var(--text-muted); }
.vada-stav.stav-inprogress { background: var(--accent-tint); color: var(--accent-strong); }
.vada-stav.stav-fixed { background: var(--ok-tint); color: var(--ok-dark); }
.vada-stav.stav-rejected { background: #f6f0f0; color: var(--danger); }
.vada-popis { margin: 0; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.vada-reseni { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-subtle); font-size: 12.5px; overflow-wrap: anywhere; }
.vada-radek { display: flex; flex-wrap: wrap; gap: 18px; }
.vada-radek span { display: flex; flex-direction: column; }
.vada-radek small { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.vada-radek strong { font-size: 13px; font-weight: 600; }
.vada-fotky { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vada-akce { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 2px; }
.vady-prepinac { display: inline-flex; gap: 2px; margin-top: 10px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); }
.vady-prepinac button { padding: 5px 12px; border: 0; border-radius: 7px; background: none; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vady-prepinac button.active { background: var(--surface); color: var(--text); }
.service-defects { margin-top: 14px; }
/* Vada v kalendáři — jiná barva než úkol i výjezd. */
.calendar-task.calendar-vada { display: block; border-left: 3px solid var(--warning); text-decoration: none; color: inherit; }

/* Přepínač „Můj plán / Celý tým“ v plánovači. */
.planner-rezim { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); white-space: nowrap; }
/* Šipky týdne mají v liště pevných 30×30; přepínač režimu se tomu musí vymanit. */
.planner-rezim button { flex: 0 0 auto; width: auto; height: auto; white-space: nowrap; padding: 6px 12px; border: 0; border-radius: 7px; background: none; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.planner-rezim button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(29, 39, 49, .12); }
.planner-rezim span { padding: 6px 12px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
/* Servisní výjezd v kalendáři — jiná barva než úkol, ať se nepletou. */
.calendar-task.calendar-vyjezd { display: block; border-left: 3px solid var(--ok); text-decoration: none; color: inherit; }

.pole-chyba { display: block; margin-top: 4px; color: var(--danger); font-size: 11.5px; font-weight: 550; line-height: 1.35; }
/* Ruční editory nemají InputText, který by si třídu „invalid“ dal sám: pole s chybou
   nese aria-invalid a podle něj se i orámuje. */
.details-editor input[aria-invalid="true"], .details-editor select[aria-invalid="true"], .details-editor textarea[aria-invalid="true"] { border-color: var(--danger); }
/* Povinné pole se pozná slovem u popisku, ne až z chyby po odeslání. Tlumeně: červená
   patří skutečné chybě pod polem — vyplněné povinné pole nemá vypadat, že něco hlásí.
   Popisek a značka stojí v jednom <span>, jinak by je sloupec labelu dal pod sebe. */
.povinne { margin-left: 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.faktura-nazev { text-align: right; }
.faktura-nazev h1 { margin: 0; font-size: 21px; }
.faktura-nazev .faktura-cislo { margin: 3px 0 0; font-size: 22px; }
/* Razítko a podpis: prázdné místo, ne rámeček, který by se tiskl přes obsah. */
.faktura-podpis { margin-top: 26px; text-align: right; }
.faktura-podpis span { display: inline-block; min-width: 220px; padding-top: 6px; border-top: 1px solid #c9cec4; color: var(--text-muted); font-size: 11px; }
.faktura-vystaveno { margin: 26px 0 0; text-align: center; color: var(--text-muted); font-size: 10.5px; }
.faktura-hlava h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.faktura-cislo { margin: 4px 0 0; color: var(--accent-strong); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.faktura-firma { display: flex; flex-direction: column; text-align: right; font-size: 12px; line-height: 1.5; }
.faktura-strany { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid #e6e9e2; }
.faktura-strany > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.faktura-strany small { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; margin-bottom: 4px; }
.faktura-strany strong { font-size: 15px; }
.faktura-udaje { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 20px; padding: 18px 0; border-bottom: 1px solid #e6e9e2; }
.faktura-udaje small { display: block; color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .09em; }
.faktura-udaje strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.faktura-polozky { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
.faktura-polozky th { padding: 8px 10px; border-bottom: 1px solid var(--ink); text-align: left; font-size: 10px; letter-spacing: .09em; color: var(--text-muted); }
.faktura-polozky td { padding: 12px 10px; border-bottom: 1px solid #eef1ea; vertical-align: top; }
.faktura-polozky small { color: var(--text-muted); font-size: 11px; }
.faktura-polozky .cislo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Součet a QR platba stojí vedle sebe: kód vlevo dole, čísla vpravo. */
.faktura-zaver { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.faktura-zaver .faktura-soucet { flex: 0 0 auto; }
.faktura-qr { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.faktura-qr small { color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
.faktura-qr span { color: var(--text-muted); font-size: 9.5px; }
.faktura-qr-obraz { width: 30mm; height: 30mm; }
.faktura-qr-obraz svg { display: block; width: 100%; height: 100%; }
.faktura-soucet { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 16px 10px 0; font-size: 13.5px; }
.faktura-soucet > div { display: flex; justify-content: space-between; gap: 30px; min-width: 260px; font-variant-numeric: tabular-nums; }
.faktura-soucet .celkem { margin-top: 8px; padding-top: 9px; border-top: 2px solid var(--ink); font-size: 17px; }
.faktura-soucet .celkem strong { color: var(--accent-strong); }
.faktura-pata { margin-top: 26px; padding-top: 16px; border-top: 1px solid #e6e9e2; color: var(--text-muted); font-size: 11.5px; line-height: 1.6; }
.faktura-pata p { margin: 0 0 4px; }
.faktura-pata .vystavil { margin-top: 10px; }
.storno-duvod { min-height: 32px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12.5px; min-width: 160px; }

@media print {
    /* Na papíře žádný posuvník není — rezervovaný pruh by jen ubral ze šířky listu. */
    html { scrollbar-gutter: auto; }
    /* Na papír patří doklad, ne ovládání aplikace. */
    .tisk-lista { display: none; }
    .tisk-plocha { padding: 0; }
    /* Papír má vlastní okraje, stránka proto žádné — jinak by se sečetly.
       Měřítko je na papíře vždy 1 : 1, ať se na obrazovce zmenšuje jakkoli. */
    .faktura, .tisk-plocha .faktura, .doklad-nahled-telo .faktura { zoom: 1; }
    .faktura { width: auto; min-height: 0; border: 0; box-shadow: none; }
    @page { size: A4; margin: 0; }
}
.doklady-bunka { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Odpočet zálohy na konečné faktuře jde do minusu — ať je to na papíře poznat. */
.faktura-polozky tr.odpocet td { color: var(--text-muted); }
.faktura-polozky tr.odpocet .cislo { color: var(--danger); }

/* --- Vozový park --------------------------------------------------------
   Modul stojí na jediné otázce: co propadá. Barva stavu lhůty proto musí být
   stejná v dlaždici, ve frontě, v seznamu vozidel i ve spisu auta — jinak si
   dispečink zvykne na jednu a na druhé obrazovce ji přehlédne. Odstíny se
   drží na jednom místě jako proměnné; kdyby si je psal každý prvek sám,
   rozešly by se při první úpravě. Prefix vozovy-park / vozidlo je tu proto,
   aby se obecná jména („karta“, „sada“) nepotkala s jiným modulem. */
.vozovy-park-dlazdice, .vozovy-park-lhuta, .vozidlo-lhuta, .vozidlo-karta {
    --lhuta-barva: var(--text-muted);
    --lhuta-podklad: var(--surface-subtle);
    --lhuta-linka: var(--border);
}
.vozovy-park-dlazdice.stav-platna, .vozovy-park-lhuta.stav-platna, .vozidlo-lhuta.stav-platna, .vozidlo-karta.stav-platna {
    --lhuta-barva: var(--ok-dark); --lhuta-podklad: var(--ok-tint); --lhuta-linka: #bde5c8;
}
.vozovy-park-dlazdice.stav-blizi-se, .vozovy-park-lhuta.stav-blizi-se, .vozidlo-lhuta.stav-blizi-se, .vozidlo-karta.stav-blizi-se {
    --lhuta-barva: #96601a; --lhuta-podklad: #fdf1e0; --lhuta-linka: var(--accent-line);
}
.vozovy-park-dlazdice.stav-propadla, .vozovy-park-lhuta.stav-propadla, .vozidlo-lhuta.stav-propadla, .vozidlo-karta.stav-propadla {
    --lhuta-barva: var(--danger); --lhuta-podklad: #fdeced; --lhuta-linka: #f2c4bf;
}

/* Souhrn nahoře. Propadlé a blížící se jdou první, protože kvůli nim se sem
   chodí; počty aut a řidičů jsou kontext, ne úkol. */
.vozovy-park-souhrn { display: grid; grid-template-columns: repeat(2, minmax(0, 1.25fr)) repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.vozovy-park-dlazdice { padding: 16px; }
.vozovy-park-dlazdice small { display: block; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.vozovy-park-dlazdice strong { display: block; margin: 10px 0 4px; font-size: 23px; font-variant-numeric: tabular-nums; }
.vozovy-park-dlazdice span { color: var(--text-muted); font-size: 10px; }
/* Zabarví se jen dlaždice, která hlásí problém. Nula propadlých lhůt je dobrá
   zpráva a nemá svítit na půl obrazovky. */
.vozovy-park-dlazdice.stav-blizi-se, .vozovy-park-dlazdice.stav-propadla { border-color: var(--lhuta-linka); background: var(--lhuta-podklad); }
.vozovy-park-dlazdice.stav-blizi-se strong, .vozovy-park-dlazdice.stav-propadla strong { color: var(--lhuta-barva); }

.vozovy-park-lhuty, .vozovy-park-vozidla { overflow: hidden; margin-bottom: 13px; }
.vozovy-park-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.vozovy-park-legenda .vozidlo-lhuta { font-size: 9px; }
.vozovy-park-fronta { padding: 5px 14px 12px; }

/* Řádek fronty: značka stavu, koho se to týká, a termín vpravo. Samotné datum
   nestačí, proto je pod ním i „za kolik dnů“. */
.vozovy-park-lhuta { min-height: 62px; display: grid; grid-template-columns: 86px minmax(0, 1fr) 130px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1f4; }
.vozovy-park-lhuta:last-child { border-bottom: 0; }
.vozovy-park-lhuta.stav-propadla { padding-left: 10px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--lhuta-barva); }
.vozovy-park-lhuta-hlavni { min-width: 0; }
.vozovy-park-lhuta-hlavni h3 { margin: 0 0 3px; font-size: 13px; }
.vozovy-park-lhuta-hlavni p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; }
.vozovy-park-lhuta-hlavni a { color: var(--accent-strong); text-decoration: none; font-weight: 650; }
.vozovy-park-lhuta-hlavni a:hover { text-decoration: underline; }
.vozovy-park-predmet { padding: 3px 6px; border-radius: 4px; background: var(--surface-subtle); color: #5e6771; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.vozovy-park-termin { display: flex; flex-direction: column; }
.vozovy-park-termin small { color: var(--text-muted); font-size: 9px; letter-spacing: .6px; }
.vozovy-park-termin strong { margin: 5px 0 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.vozovy-park-termin small:last-child { letter-spacing: 0; }

/* Značka stavu lhůty. Jedna třída pro všechna místa, kde se stav ukazuje —
   pilulka ve frontě, štítek v tabulce vozidel i u pojistky ve spisu. */
.vozidlo-lhuta { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: var(--lhuta-podklad); color: var(--lhuta-barva); font-size: 10px; font-weight: 700; white-space: nowrap; }
.vozidlo-lhutky { display: flex; flex-wrap: wrap; gap: 4px; }

/* SPZ se čte jako na autě: velkými písmeny a v rámečku. V tabulce je to navíc
   to jediné, podle čeho dispečink auto pozná. */
.vozidlo-spz { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.vozidlo-spz.velka { padding: 9px 14px; border-color: var(--ink); background: var(--ink); color: var(--accent-soft); font-size: 17px; }
.vozidlo-radek { min-width: 190px; display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }

/* --- Spis vozidla ------------------------------------------------------- */
.vozidlo-hlavicka { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 22px 24px 17px; margin-bottom: 11px; overflow: hidden; }
.vozidlo-hlavicka::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.vozidlo-hlavicka-hlavni { display: flex; align-items: center; gap: 16px; }
.vozidlo-hlavicka h1 { margin: 5px 0; font-size: 25px; letter-spacing: -.6px; }
.vozidlo-hlavicka p { margin: 0; color: var(--text-muted); font-size: 12.5px; }
.vozidlo-hlavicka-meta { display: flex; align-items: center; gap: 18px; }
.vozidlo-hlavicka-meta > div { display: flex; flex-direction: column; padding-left: 18px; border-left: 1px solid var(--border); }
.vozidlo-hlavicka-meta small { color: var(--text-muted); font-size: 9.5px; letter-spacing: .8px; }
.vozidlo-hlavicka-meta strong { margin-top: 5px; font-size: 13px; }
.vozidlo-hlavicka-meta span { margin-top: 2px; color: var(--text-muted); font-size: 10.5px; }
/* Vyřazené auto je uzavřená historie — ať je to poznat dřív, než někdo začne
   hledat, proč nejdou zapsat kilometry. */
.vozidlo-vyrazeno { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 0; padding: 9px 12px; border-radius: 7px; background: var(--surface-subtle); color: var(--text-muted); font-size: 12px; }
.vozidlo-vyrazeno span { color: var(--danger); font-weight: 800; }
.vozidlo-akce { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Čtyři lhůty, kvůli kterým modul vznikl. Barva sedí v levém pruhu a v poznámce
   pod datem; samotné datum zůstává v běžné barvě, aby se dalo číst. */
.vozidlo-karty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.vozidlo-karta { padding: 14px 16px; border-left: 3px solid var(--lhuta-barva); }
.vozidlo-karta small { display: block; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.vozidlo-karta strong { display: block; margin: 9px 0 4px; font-size: 17px; font-variant-numeric: tabular-nums; }
.vozidlo-karta span { color: var(--lhuta-barva); font-size: 10.5px; font-weight: 600; }
.vozidlo-poznamka { margin: 0; padding: 0 20px 18px; color: var(--text); font-size: 12.5px; white-space: pre-line; overflow-wrap: anywhere; }
.vozidlo-poznamka-radek td { padding: 8px 13px; background: var(--surface-subtle); color: var(--text-muted); font-size: 11px; white-space: pre-line; }

/* Sady pneumatik jsou karty, ne řádky tabulky: u každé se rozhoduje zvlášť
   (přezout, změřit, vyřadit) a tlačítka se do buňky nevejdou. */
.vozidlo-sady { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; padding: 5px 20px 18px; }
.vozidlo-sada { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--border); border-radius: 12px; background: var(--surface); }
/* Nasazená sada je ta, na které auto právě jezdí — musí být poznat na první pohled. */
.vozidlo-sada.nasazena { border-left-color: var(--accent); }
.vozidlo-sada.vyrazena { opacity: .66; }
.vozidlo-sada header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vozidlo-sada header strong { display: block; font-size: 14px; }
.vozidlo-sada header small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11.5px; }
.vozidlo-sada-stav { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-muted); font-size: 10.5px; font-weight: 700; }
.vozidlo-sada-stav.stav-mounted { background: var(--accent-tint); color: var(--accent-strong); }
.vozidlo-sada-radek { display: flex; flex-wrap: wrap; gap: 16px; }
.vozidlo-sada-radek span { display: flex; flex-direction: column; }
.vozidlo-sada-radek small { color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; }
.vozidlo-sada-radek strong { margin-top: 3px; font-size: 12.5px; font-weight: 600; }
.vozidlo-sada-varovani { margin: 0; padding: 7px 10px; border-radius: 7px; background: #fdeced; color: var(--danger); font-size: 11.5px; font-weight: 600; }
.vozidlo-sada-poznamka { margin: 0; padding: 7px 10px; border-radius: 7px; background: var(--surface-subtle); font-size: 11.5px; white-space: pre-line; overflow-wrap: anywhere; }
.vozidlo-sada-akce { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kniha jízd se zatím nevede. Panel je tišší než ostatní, aby bylo vidět,
   že tu zatím není co dělat — ale aby se na ni ani nezapomnělo. */
.vozidlo-kniha-jizd { margin-top: 13px; border-style: dashed; background: var(--surface-subtle); }
.vozidlo-kniha-jizd-telo { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 18px; }
.vozidlo-kniha-jizd-telo p { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }

@media (max-width: 1080px) {
    .vozovy-park-souhrn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vozidlo-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Hlavička spisu se skládá pod sebe dřív než ostatní: tři údaje vedle SPZ
       se do jednoho řádku nevejdou a rozsekaly by se na jednotlivá písmena. */
    .vozidlo-hlavicka { grid-template-columns: minmax(0, 1fr); }
    .vozidlo-hlavicka-meta { flex-wrap: wrap; }
}
@media (max-width: 680px) {
    .vozovy-park-souhrn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vozidlo-karty { grid-template-columns: minmax(0, 1fr); }
    /* Termín pod text, ne vedle něj: na telefonu by na něj zbylo pár pixelů. */
    .vozovy-park-lhuta { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .vozovy-park-termin { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; }
    .vozovy-park-termin strong { margin: 0; }
    .vozidlo-hlavicka-meta > div { padding-left: 0; border-left: 0; }
    .vozidlo-sady { padding: 5px 14px 14px; }
}

/* Cíl odkazu a fokusu po akci (expediční seznam z výrobní desky, název složky spisu,
   nadpisy a sekce s tabindex="-1") nesmí skončit pod lepicí horní lištou — nadpis
   „EXPEDIČNÍ BRÁNA“ a štítek „Chybí 2 z 6“ byly uříznuté. Lišta má 74 px, na telefonu 64 px. */
:target, [tabindex="-1"] { scroll-margin-top: 88px; }
@media (max-width: 680px) {
    :target, [tabindex="-1"] { scroll-margin-top: 76px; }
}