/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --table-header-color: var(--clr-surface-alt);
  /* Výška hlavičky. 3,9rem (62,4 px) → 3,1rem (49,6 px) v T-398 — Dan 2. 8.:
     „můžem pak udělat header cca o řádek nižší". „Pak" = až chip přestane stát
     POD popiskem; do té doby držela výšku dvouřádková kostka Dashboardu
     (ikona nad popiskem). Ubráno 12,8 px ≈ jeden řádek popisku (0,8rem).
     Co se do 49,6 px musí vejít: dlaždice Dashboardu 2,2rem (35,2 px) → 7,2 px
     vzduchu nahoře i dole, avatar `--sm` 2,1rem (33,6 px) → 8 px. Kdo jde níž,
     musí zmenšit napřed je. Sticky offsety a `calc(100vh - …)` visí na tomhle
     tokenu, takže se srovnají samy. */
  --header-h:         3.1rem;
  --clr-indigo:       #6366f1;
  --clr-indigo-dark:  #4f46e5;
  --clr-indigo-alpha: rgba(99, 102, 241, 0.12);
  /* Zářivější indigo pro tmavé pozadí (v light = stejné jako indigo). */
  --clr-indigo-bright: #6366f1;
  --clr-surface:      #ffffff;
  --clr-surface-alt:  #f8fafc;
  --clr-bg:           #f0f2f5;
  --clr-border:       #e2e8f0;
  --clr-divider:      #cbd3de;
  --clr-text:         #1e293b;
  --clr-text-2:       #64748b;
  --clr-text-muted:   #94a3b8;
  --clr-info:         #1565c0;
  --clr-success:      #2e7d32;
  /* `--clr-warning` byl od `T-299` (27. 7.) bez konzumenta — `.button.warn` se
     smazala, token se ponechal záměrně „až bude potřeba varování". Od 4. 8. 2026
     ho čte `.setup-section__missing` („chybí: …" v hlavičce otevřeného boxu
     setupu náboru), takže ta poznámka „nepoužívá se nikde" už neplatí.
     Light hodnota má na bílém povrchu 5,02 — sedí. Dark verzi viz níž. */
  --clr-warning:      #b45309;
  --clr-danger:       #c62828;
  --clr-link:         #0a58ca;
  --radius-sm:        8px;
  --radius-md:        10px;

  /* Spacing — jednotná škála místo ad-hoc rem hodnot. */
  --space-xs:         0.25rem;
  --space-sm:         0.5rem;
  --space-md:         0.75rem;
  --space-base:       1rem;
  --space-lg:         1.5rem;
  --space-xl:         2rem;
  --space-2xl:        2.5rem;

  /* Jednotný vnitřní padding bílých boxů na split formech (edit-col--left/right,
     setup-sec náboru). Jeden zdroj pravdy → boxy nikde „necukají" při navigaci. */
  --split-card-pad:   1.5rem 2rem;

  /* Typografie — type scale (font-size). */
  --fs-xs:            0.75rem;
  --fs-sm:            0.85rem;
  --fs-base:          0.95rem;
  --fs-md:            1rem;
  --fs-lg:            1.25rem;
  --fs-xl:            1.7rem;

  /* Stíny — sémantické tokeny pro opakované hodnoty. */
  --shadow-panel:      2px 0 12px rgba(0, 0, 0, 0.05);
  --shadow-drawer:     -8px 0 24px rgba(0, 0, 0, 0.15);
  --shadow-dropdown:   0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-active-row: inset 3px 0 0 var(--clr-indigo, #6366f1);

  /* ── KANONICKÁ PALETA ENTIT A SEKCÍ (T-242) ─────────────────────────────
     JEDINÝ zdroj pravdy pro barvu entity v celé appce. Kanonická je paleta
     sekcí z PRIMÁRNÍ NAVIGACE — rozhodnutí Dana 26. 7. 2026, doslova:
     „barvy nesedi barvami sekci (nav dobre, kandidati jinak ve vypisu",
     a výslovně **Kandidáti = oranžová/amber**.
     Konzumenti (žádný z nich si barvu NEDEFINUJE sám): nav dropdowny přes
     `--nav-entity`, karty `.entity-card`, referenční čipy `.entity-chip`,
     vazba úkolu `.task-taskable`, kandidatura `--application-accent`
     a `searchable_select.css` přes `--entity-accent`.
     ⚠️ HISTORIE, AŤ SE NEVRÁTÍ: do R255 tu byly DVĚ mapy — nav
     (`--nav-entity-*`: Firmy teal / Kandidáti amber / Projekty purple /
     Výkazy blue) a kartová (`.entity-card`: firma zelená #10b981 / kandidát
     modrá #2563eb / zakázka amber #f59e0b), takže táž entita svítila v nav
     jinak než ve výpisu. `--nav-entity-*` tokeny jsou zrušené; kdo potřebuje
     barvu entity, bere ji ODSUD. Nový odstín se přidává SEM, ne u komponenty.
     Dark varianty jsou v `:root[data-theme="dark"]` níž = světlejší odstín
     téže barvy (čitelnost na tmavém pozadí, `INV-22`).
     Barva se vždy nese plným efektem (tint / rám / záře / ikona), NIKDY
     jednostranným proužkem (`T-243`, `INV-11`). */
  --entity-companies:    #0d9488; /* teal   — sekce Firmy */
  --entity-candidates:   #d97706; /* amber  — sekce Kandidáti (Danovo výslovné rozhodnutí) */
  --entity-projects:     #7c3aed; /* purple — sekce Projekty (= zakázky) */
  --entity-time_entries: #2563eb; /* blue   — sekce Výkazy */
  /* Entity BEZ vlastní sekce v primární nav (`T-249`). Kanonickou barvu nemají
     odkud vzít, ale patří do TÉŽE mapy, ne vedle ní. Odstíny jsou vybrané tak,
     aby se navzájem nepletly — pozn. u každé říká, proti čemu se vymezuje.
     ⚠️ `positions` bylo do `T-249` fialové `#8b5cf6`, tedy prakticky totéž co
     zakázka `#7c3aed`, kterou tam posadila kanonická nav paleta (`T-242`).
     Pozice a zakázka se potkávají v jednom panelu i ve stacku vazeb úkolu,
     takže dva skoro shodné fialové odstíny nešly nechat. */
  --entity-positions:    #db2777; /* pink   — daleko od purple zakázky */
  --entity-users:        #0ea5e9; /* sky */
  /* Kandidatura MĚLA týž `#0ea5e9` jako uživatel — dvě entity, jedna barva.
     Potkávají se na kartě úkolu s vazbou na VŘ (`.task-taskable`), kde jsou
     vedle sebe uživatelský a kandidaturní čip, a byly k nerozeznání.
     Nová barva není odhad podle stupňů na barevném kruhu: vybrána měřením
     CIE76 ΔE proti VŠEM ostatním entitám i sémantickým tokenům (indigo
     „vybráno", danger, success, warning) jako ta s největší minimální
     vzdáleností — `T-325`. */
  --entity-applications: #a21caf; /* fuchsia — ΔE 82,5 od users (bylo 0,0) */
  --entity-invoices:     #059669; /* emerald — peníze; zelenější než teal firem */
  --entity-activities:   #475569; /* slate  — ZÁMĚRNĚ tichá: aktivity jsou všude */
  --entity-notes:        #65a30d; /* lime   — „žlutý lepík" zamítnut, byl by 13°
                                     od amber kandidátů a pletl by se s ním */
  /* Úkol v mapě NENÍ schválně: barvu mu dává PRIORITA (`--task-priority-accent`)
     a po termínu `--clr-danger` — Danovo zadání v `T-249`, ne přehlédnutí. */
}

/* ── Dark mode ─────────────────────────────────────────────────────
   Přepínač je v hlavičce (Nastavení). Inline skript v <head> nastaví
   data-theme na <html> (light|dark) ještě před CSS → žádný záblesk;
   „auto" se řídí systémem přes theme.js. Flip sémantických tokenů
   pokryje většinu plochy; brand indigo zůstává (kvůli kontrastu bílého
   textu na primary tlačítkách). Hardcoded barvy mají dark varianty u
   svých komponent níže. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --clr-indigo-alpha: rgba(99, 102, 241, 0.24);
  --clr-indigo-bright: #818cf8;
  --clr-surface:      #1b2436;
  --clr-surface-alt:  #212c40;
  --clr-bg:           #0f1522;
  --clr-border:       #2c3852;
  --clr-divider:      #3a4763;
  --clr-text:         #e8edf5;
  --clr-text-2:       #a4b1c6;
  --clr-text-muted:   #7c8aa0;
  --clr-info:         #5aa2f0;
  --clr-success:      #5cc46a;
  /* ⚠️ Posvětleno 4. 8. 2026 z `#b45309`. Dark varianty ostatních sémantických
     barev se posvětlily už při zavedení dark módu (info #1565c0→#5aa2f0,
     success #2e7d32→#5cc46a, danger #c62828→#ef5350), ale warning zůstal na
     light hodnotě — protože ho `T-299` zbavila jediného konzumenta a nikdo
     tu díru neviděl. Změřeno na povrchu boxu `--clr-surface` #1b2436:
     #b45309 = **3,09** (pod AA 4,5 pro drobný text), #f59e0b = **7,23**,
     tedy vedle success (7,07) a nad danger (4,45). */
  --clr-warning:      #f59e0b;
  --clr-danger:       #ef5350;
  --clr-link:         #7db0ff;
  --shadow-panel:      2px 0 12px rgba(0, 0, 0, 0.35);
  --shadow-drawer:     -8px 0 24px rgba(0, 0, 0, 0.5);
  --shadow-dropdown:   0 2px 8px rgba(0, 0, 0, 0.5);
  /* Světlejší odstíny KANONICKÉ palety entit pro tmavé pozadí (T-242, INV-22).
     Od R255 je flipuje i karta/čip/vazba úkolu — do té doby měly natvrdo
     světlý hex i v dark módu (tmavě modrá #2563eb na tmavém povrchu). */
  --entity-companies:    #2dd4bf; /* teal-300 */
  --entity-candidates:   #fbbf24; /* amber-300 */
  --entity-projects:     #a78bfa; /* purple-300 */
  --entity-time_entries: #60a5fa; /* blue-300 */
  --entity-positions:    #f472b6; /* pink-400 */
  --entity-users:        #38bdf8; /* sky-400 */
  /* Fuchsia-400, ne -500: -500 měla proti zbytku sady větší odstup (ΔE 43,5
     vs 27,3), ale jako text na tmavém povrchu jen 4,49:1 proti 6,31:1 —
     a 27,3 je pořád nad minimem celé sady (20,5). Čitelnost vyhrála (T-325). */
  --entity-applications: #e879f9; /* fuchsia-400 — ΔE 77,5 od users (bylo 0,0) */
  --entity-invoices:     #34d399; /* emerald-400 */
  --entity-activities:   #94a3b8; /* slate-400 */
  --entity-notes:        #a3e635; /* lime-400 */
}

/* Přepínač motivu ve „Vzhled" dropdownu — popisek vlevo, nativní select vpravo. */
.nav-theme-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  color: var(--clr-text);
}
.nav-theme-select select {
  padding: 0.3rem 0.4rem;
  font-size: var(--fs-sm);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
}

/* ── Reset framework defaultů ─────────────────────────────────────
   Tato sekce přepisuje defaulty z framework gemu (Imagine CSS).
   Funguje bez !important díky pořadí v layoutu — application.css
   se loaduje POZDĚJI než všechny framework/*.css, takže stejná
   specificita stačí.

   Když gem zmizí (separátní vlna), celá tato sekce může jít taky. */

/* Nadpisy: framework dává h1/h2 border-bottom + padding-bottom.
   Aplikace si vlastní border-bottom řeší ad hoc (.page-wrap > h1,
   .edit-title, .settings-content h1…). */
h1, h2 {
  border-bottom: none;
  padding-bottom: 0;
}

/* Marginy: framework nasazuje margin-top: 1rem na section/nav. */
section,
nav {
  margin-top: 0;
}

/* .form: framework dává antiquewhite kartičku, my chceme bez. */
.form {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* Patička formuláře: destruktivní akce vlevo, submit vždy vpravo — míření
   na Uložit nesmí končit na Smazat. Submit bez delete se drží taky vpravo. */
.form-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.form-footer input[type="submit"],
.form-footer button[type="submit"],
.form-footer [data-form-submit] {
  margin-left: auto;
}

/* Hidden inputs: framework dává display: block všem inputům. */
input[type="hidden"] {
  display: none;
  margin: 0;
}

/* HTML atribut `hidden` má být display:none, ale framework forms.css
   ho přebíjí pravidlem `input:not([type='submit']) { display:block }`. */
[hidden] {
  display: none !important;
}

/* Marginy uvnitř formulářů: framework nasazuje margin-top na
   first-of-type label/fieldset/input. Resetujeme. */
label:first-of-type,
fieldset:first-child,
fieldset label,
fieldset input,
section label:first-child,
ol input,
ol fieldset {
  margin-top: initial;
}

form input,
form label,
form ol,
form section {
  margin-top: initial;
}

/* Inputy: framework forms.css je hodně basic. Sjednocený border,
   focus ring v indigo. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
input[type="date"],
textarea,
select {
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.93rem;
  color: var(--clr-text);
  background: var(--clr-surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: var(--clr-indigo);
  box-shadow: 0 0 0 3px var(--clr-indigo-alpha);
}

/* Formulářové labely: malý uppercase nadpis nad inputem. */
.form label,
label.field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Tabulky: framework table.css je decent, ale potřebujeme jiné
   barvy hlavičky, vlastní hover a sjednocené paddingy. */
table {
  width: 100%;
  margin-top: 0;
  border-collapse: collapse;
}

/* Hlavička minimalistická — bez šedého pruhu a verzálek; jen tišší popisek
   a jemný spodní oddělovač. */
table thead tr {
  border-bottom: 1px solid var(--clr-border);
}

table tr th {
  color: var(--clr-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  /* Sticky hlavička pro dlouhé tabulky. Podklad = surface (ne šedý pruh), ať
     při scrollu nesvítí obsah skrz. */
  position: sticky;
  top: -1px;
  background: var(--clr-surface);
  vertical-align: bottom;
  text-align: left;
}

/* Akce v posledním sloupci (Upravit/Smazat) vpravo. */
table tr th:last-child:has(a),
table tr td:last-child:has(a) {
  text-align: right;
}

/* Inline formuláře v tabulce (button_to) — bez block layoutu. */
table form {
  display: inline-block;
  margin-top: 0;
}

/* Řádky bez linek — oddělí je zebra (níž). */
table tr td {
  padding: 0.5rem 0.75rem;
  color: var(--clr-text);
  font-size: 0.92rem;
}

/* Zebra — střídavý podklad místo řádkových borderů. Hierarchické tabulky
   (report výkazů, projekt→pozice) mají vlastní členění řádků, ty vynecháme. */
table tbody tr:nth-child(even) td {
  background-color: var(--clr-surface-alt);
}
.report-timesheet tbody tr:nth-child(even) td,
.entity-projects-list tbody tr:nth-child(even) td {
  background-color: transparent;
}

/* Třída pro buňky s dlouhým textem — povolí zalomení. */
table tr td.wrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

table tbody tr:hover td {
  background-color: var(--clr-indigo-alpha);
}

/* HR: framework dává tlustou linku, my chceme jemnou. */
hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 1.25rem 0;
}

/* .archived — tlumený stav záznamu (uzavřený úkol, deaktivovaný řádek).
   Z framework/helpers.css; přejato kvůli vyhození toho souboru. */
.archived {
  color: var(--clr-text-muted);
}

.archived a {
  color: var(--clr-indigo);
}

.archived button,
.archived a.button {
  color: var(--clr-text-muted);
}

/* ── Base elementy přesunuté z framework/base.css ────────────────
   Universal box-sizing, margin systém pro typografii, h1-h6 weights,
   default nav layout, h1+akce grid layout, defenzivní img.

   Vynecháno z původního: aside.left-sidebar (nepoužité), dl grid
   (.profile-meta má vlastní layout), pre styling (.doc-viewer-text má vlastní). */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Margin systém pro typografii. Pozn.: section, nav z původního
   "div, section, table+h2, nav, img { margin-top: 1rem }" jsou
   vynechány — mBlue je řeší vlastním layoutem (flex/grid),
   dodatečný margin defaults nevyhovuje. */
*:first-child { margin-top: 0; }

h1, header:has(h1) { margin-top: 1.5rem; }
h2, header:has(h2) { margin-top: 1.2rem; }
h3, header:has(h3), h4 { margin-top: 1rem; }

header, h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }

header form, h1 form, h2 form, h3 form,
h4 form, h5 form, h6 form { margin-top: 0; }

p, ul, pre { margin-top: 1rem; margin-bottom: 0; }
ol, ul { margin-top: 0.5rem; margin-bottom: 0; }
table + h2, img { margin-top: 1rem; }
fieldset { margin-top: 1.5rem; }
dl { margin-bottom: 1rem; }

/* Typography defaults pro nadpisy. font-weight: normal je default
   z gemu — mBlue komponentní CSS pak řeší silnější weights tam,
   kde to chce. */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: wrap;
  font-weight: normal;
}

h4 { font-size: 1.1rem; }

/* Default link styling. */
a {
  color: var(--clr-link);
  text-decoration: none;
}

/* Navštívené odkazy NEodlišujeme barvou — jsme aplikace, ne web. Záměrně tu
   není žádné `a:visited { color }`: dřív zdejší pravidlo (specificita 0,1,1)
   přebíjelo komponentové barvy odkazů psané přes element-selektory (nav
   `span > a`, název úkolu `.task-checklist-link` apod.), takže navštívený
   odkaz měnil barvu. Bez :visited pravidla platí barva z `a` / `.x a` i pro
   navštívený stav (author pravidlo přebije UA fialovou), tedy všude jednotně. */
/* Odkazy se defaultně NEpodtrhávají ani na hover — jsme aplikace, ne web, a
   většina <a> je chrome (nav, kostka Dashboard, tlačítka-odkazy, karty, řádky).
   Podtržení na hover je opt-in u textových/prose odkazů, kde si ho komponenta
   deklaruje sama (.row-primary-link řadicí odkazy, obsah
   popisů…). Dřív globální `a:hover { underline }` (specificita 0,1,1) přebíjelo
   .nav-dash apod. a podtrhávalo i chrome. */

/* H1/H2/H3 s akcemi (div.buttons) nebo nav — grid layout pro
   hlavičky stránek se skupinou tlačítek. Konkrétně používáno např.
   "Výkazy <div class=buttons>Report Vykázat</div>". */
h1:has(div.buttons), h1:has(nav),
h2:has(div.buttons), h2:has(nav),
h3:has(div.buttons), h3:has(nav) {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: center;
}

h1 div.buttons, h2 div.buttons, h3 div.buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

h1 nav, h2 nav, h3 nav {
  grid-column: 1 / span 2;
  font-size: 1rem;
  margin-top: 0;
}

/* Hlavička index stránky.

   Layout (template-areas):
     ┌──────────┬──────────┬────────────┬─────────┐
     │ title    │ (spacer) │ filter     │ buttons │  ← row 1
     ├──────────┼──────────┴────────────┴─────────┤
     │ chips    │ (volné)                         │  ← row 2
     └──────────┴─────────────────────────────────┘

   Filter se přilepí těsně k buttonům (sloupce 3 a 4 jsou max-content,
   2. sloupec 1fr je spacer). Mezi filter a buttons je vertikální
   oddělovač přes border-left.  Chips slot pod h1 má min-height, aby
   přidání tagu nedrcnulo tabulkou dolů. */
.page-header {
  display: grid;
  /* Řádek 1: titulek (+ inline tag chips) vlevo, akční buttony vpravo.
     Řádek 2: filter řádek přes celou šířku — má víc místa, inputy wrappnou míň. */
  grid-template-columns: 1fr max-content;
  grid-template-areas:
    "title  buttons"
    "filter filter";
  column-gap: 1rem;
  row-gap: 0.85rem;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border);
}

/* Titulek + vybrané tag chips na jedné lince: „Kandidáti [tag1] [tag2]".
   Chips sem teleportuje JS (#page-header-chips), proto bez min-height —
   výška řádku drží titulek a chip se do ní vejde, layout neskáče. */
.page-header__title {
  grid-area: title;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  min-width: 0;
}

.page-header__title > h1 {
  margin: 0;
}

.page-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.page-header > .index-filter {
  grid-area: filter;
  margin: 0;
  min-width: 0;
}

.page-header > .buttons {
  grid-area: buttons;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

/* ── Breadcrumb v titulku (T-097) ──────────────────────────────────
   Cesta o úroveň výš je v NADPISU, ne v back-linku „Zpět na …" nad
   obsahem — ty appka nemá. Oba segmenty jsou odkaz: rodič je tlumený
   (naviguje výš), leaf drží plnou barvu nadpisu a míří sám na sebe.
   Rozestup drží vnitřní `.breadcrumb`, ne `h1` — nadpis si jinde nese
   vlastní flex layout s gapem 1rem (.edit-title, .settings-content > h1).
   INV-11: rozlišení segmentů je typografické, žádný barevný proužek. */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.breadcrumb__link:not(.breadcrumb__link--current) {
  color: var(--clr-text-muted);
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

/* `font-size` v `em`, ne `rem`: breadcrumb sedí v nadpisech různých velikostí
   (`.edit-title`, `.settings-content > h1`, `form.form > h1`) a separátor se musí
   zmenšit relativně ke KAŽDÉMU z nich. Na `h1` se `font-size` dávat nesmí —
   `edit_form.css` se načítá až za tímhle souborem a vyhrál by tie na specificitě. */
.breadcrumb__sep {
  color: var(--clr-text-muted);
  font-weight: 400;
  font-size: 0.75em;
}

/* Default nav layout (mBlue header nav má vlastní override). */
nav {
  display: flex;
  gap: 0.2rem 0.7rem;
  flex-wrap: wrap;
}

/* Defenzivní img default. */
img {
  max-width: 100%;
}

/* ── Forms baseline (přesunuto z framework/forms.css) ────────────
   mBlue specifické vstupy (border, focus ring, padding) jsou v reset
   sekci nahoře. Tady jen univerzální layout, fieldset, checkbox/radio
   wrapper, disabled state.

   Vynecháno z původního: form.inline / form.bold (nepoužité),
   form section/small styling (nepoužité), label+.multiselect (nepoužité),
   margin systém formulářů (mBlue ho vědomě potlačuje pro .field layout). */

/* Block layout default — formulářové prvky přes celou šíři kontejneru.
   mBlue v praxi wrapuje v .field/.edit-field-row pro grid layout. */
select,
input:not([type='submit']),
textarea {
  display: block;
  width: 100%;
}

/* Inline hint pod inputem (<input> <small>Tip</small>). */
input + small,
textarea + small,
select + small {
  display: block;
  margin-top: 0.1rem;
}

/* fieldset jako flex container — používá se v users/_form.html.erb. */
fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border: 0;
  padding: 0;
  padding-inline: 0;
  padding-block: 0;
  margin-inline: 0;
}

fieldset div,
fieldset select,
fieldset input:not([type='submit']),
fieldset textarea {
  flex: 1;
}

fieldset div {
  margin-top: 0;
}

fieldset:has(input[type='radio']),
fieldset:has(input[type='checkbox']) {
  gap: 0.5rem;
  align-items: center;
}

fieldset.grid {
  display: grid;
}

fieldset.grid input,
fieldset.grid select {
  width: 100%;
}

/* Custom checkbox/radio wrapper. Použito např. v users/_form.html.erb
   pro "Deaktivovaný" toggle. */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: var(--clr-surface);
  padding: 5px 11px;
  white-space: nowrap;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  cursor: pointer;
}

label:has(input[type="checkbox"]):has(input[disabled]),
label:has(input[type="radio"]):has(input[disabled]) {
  background-color: #fdf5eb;
  cursor: default;
}

label:has(input[type="checkbox"]):has(input:checked),
label:has(input[type="radio"]):has(input:checked) {
  border-color: var(--clr-indigo);
}

label:has(input[type="checkbox"]) input,
label:has(input[type="radio"]) input {
  margin-top: 0;
  width: auto;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  cursor: pointer;
}

/* Disabled/readonly state — beige bg (z frameworku). */
input[disabled],
textarea[disabled],
input[readonly="readonly"],
textarea[readonly="readonly"],
select[disabled],
select[readonly="readonly"],
trix-editor[disabled],
trix-editor[readonly="readonly"] {
  color: var(--clr-text-muted);
  background-color: #fdf5eb;
}

/* Rails .button_to wrapper — pro DELETE link helpery. */
.button_to {
  display: inline-block;
  margin-top: 0;
}

.button_to input[type="submit"] {
  margin-top: 0;
}

/* Defenzivní placeholder font-weight. */
::placeholder {
  font-weight: normal;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0px;
  background: var(--clr-bg);
  font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

main {
  /* Flex-column shell (T-218): body je flex column + min-height:100vh, main
     flex:1 vyplní přesně (viewport − header). Tím, že je main sám flex column
     a .page-wrap uvnitř má flex:1, vyplní bílý kontejner main PŘESNĚ bez
     viewportové matematiky — dřív .page-wrap forsoval min-height: calc(100vh-57px),
     kde 57 bylo zastaralé (reálně header 63 + main padding 32 = 95) → přetékal
     o ~38px a dělal zbytečný svislý scroll na každé stránce (Danův nález). */
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--clr-bg);
}

body > header {
  grid-column: 1 / span 2;
  padding: 0px;
  background-color: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  /* Lišta zůstává nahoře i při scrollu a nad náhledovým panelem, ať jsou
     sekce, kebab a avatar vždy po ruce. */
  position: sticky;
  top: 0;
  z-index: 60;
}

/* Lišta. Do T-398 byla kostka Dashboardu flush k levé hraně (stretch přes celou
   výšku) a levé odsazení proto nebylo; od T-398 je z ní odsazená dlaždice podle
   klientského návrhu, takže lišta musí odsadit i vlevo.
   Pravou skupinu (nav-secondary + aside) tlačí doprava margin-left:auto na
   nav-secondary. */
.nav-bar {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
  min-height: var(--header-h);
  padding: 0 1.5rem 0 1rem;
}

/* Dashboard = kotva vlevo. ⚠️ T-398 (Dan 2. 8.): „pro Dashboard/home/logo/ikonu
   aplikace použít verzi, co jsem viděl v návrzích budoucího dashboardu (najdi,
   je to od mBlue ze SharePointu)". Podklad je v repu jako
   `czechlist/dashboardy/HRP_navrh_nastenky.pdf` (+ `RC_…`) — mockup NAD naším UI,
   takže lištu ukazuje přímo. Návrh má místo dosavadní „kostky se šipkou" (široký
   blok s `clip-path`, ikona NAD popiskem) samostatnou ČTVERCOVOU DLAŽDICI s plným
   indigem a bílou mřížkou, a popisek „Dashboard" VEDLE ní jako běžnou položku lišty.
   Glyf mřížky 2×2 zůstává týž — mění se nosič, ne tvar (ověřeno na ~34 px, ne ve
   zvětšení: čtyři čtverečky s výraznou spárou se čtou i takhle malé).
   Dlaždice je schválně přesně tak velká jako avatar vpravo (2,1rem) — lišta pak
   má na obou koncích stejně těžkou kotvu.
   ⚠️ Návrhy jsou podle README té složky NÁSTŘELY (finál klient slíbil 10. 8.),
   takže odsud je převzatý JEN tvar ikony, nic z obsahu dashboardu. */
.nav-dash {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  align-self: center;
  color: var(--clr-text);
  text-decoration: none;
}
.nav-dash__tile {
  display: flex;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.62rem;
  background: var(--clr-indigo);
}
.nav-dash:hover .nav-dash__tile { background: var(--clr-indigo-dark); }
/* Aktivní stav = prstenec kolem dlaždice, ne jiná barva: dlaždice je plná indigo
   vždycky (je to logo aplikace, ne stavová plocha), tak se stav musí říct jinak.
   Prstenec jede na `--clr-indigo-alpha`, takže sedne v light i dark (`INV-22`). */
.nav-dash.is-active .nav-dash__tile { box-shadow: 0 0 0 3px var(--clr-indigo-alpha); }
/* Glyf = maska (jako trix ikony), bílá na indigu. Jeden zdroj, light i dark. */
.nav-dash__icon {
  width: 1.15rem;
  height: 1.15rem;
  margin: auto;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M20 6H8C6.9 6 6 6.9 6 8v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm20 0H28c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM20 26H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V28c0-1.1-.9-2-2-2zm20 0H28c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V28c0-1.1-.9-2-2-2z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M20 6H8C6.9 6 6 6.9 6 8v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm20 0H28c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM20 26H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V28c0-1.1-.9-2-2-2zm20 0H28c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V28c0-1.1-.9-2-2-2z'/></svg>") center / contain no-repeat;
}

/* Skupiny sekcí — hlavní tok vlevo, průřezové vpravo. Položky se roztahují
   přes celou výšku lišty (hover plocha až k hranám, dropdown navazuje bez
   mezery); text uvnitř centruje align-items na .nav-item. */
.nav-primary,
.nav-secondary {
  display: flex;
  align-items: stretch;
  gap: 1.35rem;
}
/* „Nezapomeň na prostor doprava, aby položka byla oddělena od následující"
   (Dan 2. 8., T-398). Micro chip stojí v ose zrušené šipky, takže sousední
   položky by se jinak slily — mezera v primární liště je proto větší než
   v sekundární, kde se nic nepřidává. */
.nav-primary { gap: 1.75rem; }
.nav-secondary {
  margin-left: auto;
  gap: 1.1rem;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-item:hover { color: var(--clr-indigo); }
/* Aktivní sekce = indigo text (jako odkaz), žádný banner ani změna layoutu.
   indigo-bright → výrazné i na tmavém pozadí. */
.nav-item.is-active { color: var(--clr-indigo-bright); }

/* Průřezové sekce vpravo jsou vizuálně tišší než hlavní tok. */
.nav-secondary .nav-item {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-text-2);
}
.nav-secondary .nav-item:hover { color: var(--clr-indigo); }
.nav-secondary .nav-item.is-active { color: var(--clr-indigo-bright); }

/* MICRO chip vybrané („připnuté") entity v OSE MINI ŠIPKY — T-282.1, přesunuto
   a zmenšeno v T-398 (Dan 2. 8.: „položky hlavní navigace mají vpravo mini šipku
   naznačující dropdown. Místo ní dejme micro chip entity (jen kolečko s iniciály)
   a nezapomeň na prostor doprava, aby položka byla oddělena od následující").
   ⚠️ Přebíjí umístění z `T-282.1` (chip POD položkou) i `INV-282-E` v části
   „bez připnutí se lišta nemění" — bez připnutí je slot dál `hidden`, ale
   s připnutím se položka rozšíří do strany, ne do výšky.

   Slot vykresluje server PRÁZDNÝ a `hidden`, plní ho `entity_selection.js` ze
   sessionStorage. `hidden` musí zhasnout explicitně: `.nav-selection` má
   display:flex, a to přebíjí UA pravidlo `[hidden] { display: none }`.
   `.nav-item__stack` je `display: contents` VŽDY (dřív se přepínal na sloupec):
   popisek i chip jsou tak přímé flex položky `<summary>` a stojí vedle sebe
   v jedné ose s mezerou `.nav-item { gap }`. Wrapper zůstává kvůli kotvě
   `.nav-item__stack > a` (uvnitř summary jsou DVA odkazy — popisek a chip). */
.nav-item__stack { display: contents; }
.nav-selection {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.nav-selection[hidden] { display: none; }
/* Pilulka je neutrální (jako user chip) — barvu nese jen kolečko, ať výběr
   nekřičí přes celou lištu. Kolečko používá recept z T-280: sytý tón typu
   ztmavený o 18 % + bílé tučné iniciály (na čistém akcentu má bílá jen
   2,1–2,5:1). Od T-398 chip NEOBSAHUJE jméno (nese ho `title` odkazu a řádek
   dropdownu), takže strop šířky měřený v JS už není potřeba — chip má pevnou,
   předvídatelnou šířku ≈ kolečko + `×`. */
/* Selektor MUSÍ nést i `.entity-chip` — základ chipu je v souboru níž (ř. ~3880),
   takže při stejné specificitě by přebil tenhle blok (padding, gap, barvu rámu). */
.entity-chip.nav-selection__chip {
  gap: 0.12rem;
  padding: 0.08rem 0.2rem 0.08rem 0.08rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  border-color: var(--clr-border);
  cursor: default;
}
/* Kolečko je od T-282.6 a6 zabalené v `.nav-selection__link` (klikací část
   chipu), takže selektory míří přes něj — `×` zůstalo sourozencem odkazu.
   Specificita 0,2,0 pořád přebíjí základ `.entity-chip__avatar` (ř. ~4204),
   proto nevadí, že tenhle blok je v souboru dřív. */
.nav-selection__link {
  display: flex;
  align-items: center;
  color: inherit !important;
  text-decoration: none !important;
}
a.nav-selection__link { cursor: pointer; }
a.nav-selection__link:focus-visible {
  outline: 2px solid var(--clr-indigo);
  outline-offset: 1px;
  border-radius: 999px;
}
.nav-selection__chip .entity-chip__avatar {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  font-size: 0.56rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--entity-accent) 82%, #0b1220);
  color: #fff;
}
a.nav-selection__link:hover .entity-chip__avatar {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--entity-accent) 45%, transparent);
}
.nav-selection__clear {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.nav-selection__clear:hover { color: var(--clr-text); }
.nav-selection__clear:focus-visible {
  outline: 2px solid var(--clr-indigo);
  outline-offset: 1px;
  border-radius: 999px;
}

/* Zrcadlo přišpendleného PROJEKTU pod Výkazy (T-401, Dan 2. 8.) — „automaticky
   stejný, ale dimmed pin projektu". Tlumení jede na `opacity`, ne na natvrdo
   zadané barvě: musí sednout v light i dark (`INV-22`) a barvu kolečka řídí
   `--entity-accent`. Přerušovaný rám odlišuje AUTOMATICKÝ pin od ručního,
   aby se nezdálo, že jsou Výkazy přišpendlené samostatně (nejsou — `INV-282-C`
   platí dál v tom smyslu, že Výkazy vlastní výběr nemají). */
.entity-chip.nav-selection__chip--dimmed {
  opacity: 0.55;
  border-style: dashed;
}
.entity-chip.nav-selection__chip--dimmed:hover,
.entity-chip.nav-selection__chip--dimmed:focus-within { opacity: 0.85; }

/* Badge s počty (živě z DB) = zároveň klikací zkratka „Přidat" té sekce.
   Aktivní sekci zvýrazní indigem; hover/focus signalizuje, že je akční. */
.nav-badge {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--clr-text-muted);
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  padding: 0.03rem 0.42rem;
  cursor: pointer;
}
.nav-badge:hover {
  color: #fff;
  background: var(--clr-indigo);
  border-color: transparent;
}
.nav-badge:focus-visible {
  outline: 2px solid var(--clr-indigo);
  outline-offset: 1px;
}
.nav-item.is-active .nav-badge {
  color: var(--clr-indigo-bright);
  background: var(--clr-indigo-alpha);
  border-color: transparent;
}
.nav-item.is-active .nav-badge:hover { color: #fff; background: var(--clr-indigo); }

.nav-staging-badge {
  align-self: center;
  font-size: 1.05rem;
  font-weight: 700;
  background-color: #fde047;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
}

/* Pravá strana hlavičky — staging badge + avatar. Doprava ji odsune
   margin-left:auto na .nav-secondary. */
.nav-aside {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Pravé dropdowny (Úkoly/Výkazy/Faktury/Reporty/Nastavení) — nativní <details>,
   summary = název sekce (styl .nav-item + šipka), menu jako dropdown panel. */
.nav-menu {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
/* Sekce se seznamem nese v summary odkaz na index (menu se otvírá hoverem,
   klik naviguje). Odkaz dědí barvu summary, ať fungují is-active/hover stavy. */
.nav-menu > summary a {
  color: inherit;
  text-decoration: none;
}
.nav-secondary .nav-menu > summary::after {
  content: '▾';
  font-size: 0.7em;
  color: var(--clr-text-muted);
}
.nav-menu[open] > summary,
.nav-menu > summary:hover { color: var(--clr-indigo); }
.nav-menu.is-active > summary { color: var(--clr-indigo-bright); }
.nav-menu__menu {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 13rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 70;
}
.nav-menu__menu a,
.nav-menu__menu button {
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  text-decoration: none;
  font-size: 0.9rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
/* Řádek, na kterém uživatel právě je (T-307) — tlumený indigo tint + tučnější
   text, ať se to nepere s plným indigo hoverem hned pod tímhle pravidlem
   (stejná specificita → rozhoduje pořadí, hover musí zůstat druhý). Barevnost
   jde přes pozadí a text, ne jednostranný proužek (INV-11). */
.nav-menu__menu a.is-active {
  background: color-mix(in srgb, var(--clr-indigo) 14%, transparent);
  color: var(--clr-indigo-bright);
  font-weight: 600;
}
.nav-menu__menu a:hover,
.nav-menu__menu button:hover { background: var(--clr-indigo); color: #fff; }
.nav-menu__sep {
  height: 1px;
  background: var(--clr-border);
  margin: 0.3rem 0.2rem;
}

/* „Zobrazit vše" v dropdownu sekundární nav (T-220/#220) = odkaz na index přes
   celý řádek; živý počet je vpravo jako SAMOSTATNÝ klikací cíl „Přidat" (nav.js,
   data-nav-add). `justify-content:space-between` + gap mu dá odstup, ať se klik na
   číslo neplete s klikem na řádek (Dan: „dát tomu prostor ať se netrefíš do celé
   položky"). Na indigo hoveru řádku pilulka zbělá, ať je pořád čitelná a čte se
   jako oddělený terč. */
.nav-menu__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-menu__all .nav-badge { flex: none; }
.nav-menu__all:hover .nav-badge {
  color: var(--clr-indigo);
  background: #fff;
  border-color: transparent;
}
.nav-menu__all:hover .nav-badge:hover { color: #fff; background: var(--clr-indigo-bright); }

/* „Projekty" v hlavní liště je dropdown typů (T-166) — první dropdown vlevo.
   Menu se kotví na LEVÝ okraj položky (extenduje doprava, ne jako pravá menu
   s `right:0`); summary dostane stejnou šipku jako v sekundární liště a pilulka
   aktivní sekce svítí indigem i uvnitř summary (styl `.nav-item.is-active
   .nav-badge` se sem nedědí — `is-active` je na <details>, ne na `.nav-item`). */
.nav-primary .nav-menu__menu {
  left: 0;
  right: auto;
}
/* ⚠️ Primární lišta ŠIPKU `▾` NEMÁ — T-398 (Dan 2. 8.): „položky hlavní navigace
   mají vpravo mini šipku naznačující dropdown. MÍSTO NÍ dejme micro chip entity."
   V té ose teď stojí `.nav-selection` (kolečko s iniciálami připnuté entity).
   Potvrzuje to i klientský návrh dashboardu (`czechlist/dashboardy/HRP_navrh_nastenky.pdf`):
   primární položky jsou tam bez šipek, sekundární (Úkoly/Výkazy/Reporty/Nastavení)
   s nimi. Šipka proto zůstává JEN sekundární liště (ř. ~1005) — je to zároveň
   druhé odlišení obou lišt vedle barevných ikon (`T-220`/`T-241`).
   Nezakládat ji tady znovu. */
.nav-menu.is-active > summary .nav-badge {
  color: var(--clr-indigo-bright);
  background: var(--clr-indigo-alpha);
  border-color: transparent;
}
.nav-menu.is-active > summary .nav-badge:hover { color: #fff; background: var(--clr-indigo); }

/* ── Primární nav = barevné ŘÁDKOVÉ dropdowny (T-241, varianta C, Dan 23.–24. 7.) ──
   Dan zamítl dlaždice („moc velké") → klasický kompaktní řádkový dropdown: každý
   řádek = IKONA VLEVO (v tónu entity) + popisek + POČET VPRAVO (v tónu entity).
   Barevnost jde přes IKONU/POČET/token `--nav-entity` (dle `data-entity`), NIKDY
   přes jednostranný barevný border (`T-243`/`feedback_no_single_side_border`).
   Mechanika `details.nav-menu` + `nav.js` je táž jako u sekundární nav; odlišení
   od střízlivých sekundárních řádků je barevná ikona + počet. Light i dark
   (`INV-22`). Selektory scopnuté pod `.nav-menu__menu--entity`, aby přebily
   globální `.nav-menu__menu a/button` (padding, indigo hover). */
/* `--nav-entity` je jen LOKÁLNÍ alias kanonického tokenu sekce (T-242) — nav
   si vlastní paletu nedrží, konzumuje tutéž mapu jako karty a čipy. */
.nav-menu--entity[data-entity="companies"]    { --nav-entity: var(--entity-companies); }
.nav-menu--entity[data-entity="candidates"]   { --nav-entity: var(--entity-candidates); }
.nav-menu--entity[data-entity="projects"]     { --nav-entity: var(--entity-projects); }
.nav-menu--entity[data-entity="time_entries"] { --nav-entity: var(--entity-time_entries); }

/* Sekce se na hoveru/aktivní obarví TÓNEM ENTITY (ne indigo jako secondary) —
   barevnost je znát ještě před rozbalením. */
.nav-menu--entity[open] > summary,
.nav-menu--entity > summary:hover,
.nav-menu--entity.is-active > summary { color: var(--nav-entity); }
/* (Obarvení šipky v tónu entity tu bylo do T-398; primární lišta šipku nemá,
   takže pravidlo mířilo do prázdna. Sekundární lišta šipku barvit nepotřebuje —
   je záměrně střízlivá.) */

.nav-menu__menu--entity { min-width: 14rem; }
.nav-menu__menu--entity .nav-menu__sep { margin: 0.25rem 0.2rem; }

/* Řádek pohledu: ikona | popisek (roztažitelný) | počet. Kompaktní (žádné dlaždice).
   Hover je v tlumeném tónu entity — ne bílý text na indigu jako u secondary. */
.nav-menu__menu--entity .nav-menu__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--clr-text);
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.nav-menu__menu--entity .nav-menu__row:hover {
  background: color-mix(in srgb, var(--nav-entity) 12%, var(--clr-surface));
  color: var(--clr-text);
}
.nav-menu__menu--entity .nav-menu__row:focus-visible {
  outline: 2px solid var(--nav-entity);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--nav-entity) 12%, var(--clr-surface));
}
.nav-menu__row-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--nav-entity);
}
.nav-menu__row-icon svg { display: block; width: 1.05rem; height: 1.05rem; }
.nav-menu__row-label { flex: 1 1 auto; line-height: 1.2; }
.nav-menu__row-count {
  flex: none;
  font-weight: 700;
  color: var(--nav-entity);
  font-variant-numeric: tabular-nums;
}

/* „+ Nová X" — týž řádek, popisek i ikona plně v tónu entity (výraznější akce). */
.nav-menu__menu--entity .nav-menu__row--add {
  color: var(--nav-entity);
  font-weight: 600;
}
.nav-menu__menu--entity .nav-menu__row--add:hover {
  background: color-mix(in srgb, var(--nav-entity) 16%, var(--clr-surface));
}

/* Řádek AKTUÁLNÍHO výběru (T-282.2) — první řádek dropdownu, když je něco vybrané:
   tónované pozadí a text v barvě sekce (`--nav-entity`), v ose ikon MINUS = odvybrat
   (klikací je celý řádek). Barevnost jde přes pozadí/ikonu, ne přes jednostranný
   border (`T-243`). Server řádek posílá prázdný a `hidden` (`INV-282-A`); vlastní
   `[hidden] { display: none }` tu NENÍ potřeba — UA pravidlo pro `[hidden]` je
   v Chromiu silnější než autorský `display: flex` z `.nav-menu__row` (změřeno
   v R217: `#probe-a { display: flex }` + `hidden` → computed `none`; přebije ho
   až `!important`). Dlouhá jména se ořezávají třemi tečkami (`min-width: 0` na
   řádku i popisku), ať dropdown nenaroste do šířky stránky. */
.nav-menu__menu--entity .nav-menu__row--selection {
  background: color-mix(in srgb, var(--nav-entity) 14%, var(--clr-surface));
  color: var(--nav-entity);
  font-weight: 600;
  min-width: 0;
  max-width: 20rem;
}
.nav-menu__menu--entity .nav-menu__row--selection:hover {
  background: color-mix(in srgb, var(--nav-entity) 22%, var(--clr-surface));
  color: var(--nav-entity);
}
.nav-menu__row--selection .nav-menu__row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grupa typů projektů v dropdownu (T-245): textový nadpis kategorie nad řádky
   („Normální projekty" / „Interní projekty") + řádky „vše"/typů. Rozlišení grup je
   TYPOGRAFICKÉ (tlumený uppercase nadpis), NE barva ani jednostranný proužek
   (`INV-11`/`T-243`). Druhá grupa má odstup nahoře. */
.nav-menu__menu--entity .nav-menu__group + .nav-menu__group { margin-top: 0.35rem; }
.nav-menu__group-heading {
  display: block;
  padding: 0.3rem 0.55rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* Kolaps hlavičky na úzku (T-053, upřesněno T-244). Lišta je jinak jeden
   neroztažitelný flex řádek (.nav-item má white-space:nowrap) → nad ~10 sekcemi
   + dropdowny + lupou a avatarem na úzkém okně PŘETÉKÁ a ořízne se. Pod stejným
   prahem, kde se split-view skládá pod sebe (820px, viz @media níže), hlavičku
   ZALOMÍME místo přetečení.

   T-244 (Dan 23. 7.) říká, JAK se má zalomit, doslova: „_na malych displejich
   dat kazde menu na radek zvlast, second pod primary a snazit se menu samotne
   nezalamovat, logo nechgat vedle primary na 1. rdku_". Tedy:
     · 1. řádek = logo + primární menu (+ lupa/avatar vpravo — ty musí zůstat
       po ruce nahoře, Dan je nezmiňuje ani jedním směrem),
     · 2. řádek = sekundární menu přes celou šířku,
     · UVNITŘ jednoho menu se NEZALAMUJE — menu je jeden celek.

   Jak to drží: `.nav-bar` zalamuje, ale `.nav-primary`/`.nav-secondary` mají
   `flex-wrap: nowrap`. Řádky určuje `order` + `flex-basis: 100%` na sekundární
   liště (flex položka se základem 100 % se na sdílený řádek nevejde, takže
   otevře nový a zabere ho celý).

   ⚠️ „Snažit se nezalamovat" je Danovo slovo a je v tom i strop: když se menu
   na daný viewport prostě nevejde, `.nav-bar` ho zalomí na vlastní řádek —
   raději o řádek víc než překryv. Horizontální scroll uvnitř menu by byl
   jediná alternativa, ale `overflow-x` na `.nav-primary` by OŘÍZL dropdowny
   (`.nav-menu__menu` je `position: absolute` uvnitř lišty), takže by se musely
   nejdřív přestavět na `position: fixed`. Nedělat to bez rozhodnutí.
   Dropdowny jinak zůstávají absolutní, takže se menu nerozbije. */
@media (max-width: 820px) {
  .nav-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    padding: 0.3rem 0.9rem;
  }
  /* Menu samotné NEZALAMOVAT (Dan) — proto nowrap, ne wrap jako do T-244. */
  .nav-primary,
  .nav-secondary {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.85rem;
  }
  /* `margin-left: 0` odpojí sekundární lištu od odtlačování doprava, `flex-basis`
     ji shodí na vlastní (druhý) řádek. Pořadí řádků drží `order`. */
  .nav-secondary { margin-left: 0; flex-basis: 100%; order: 3; }
  .nav-dash { order: 0; }
  .nav-primary { order: 1; }
  .nav-aside { order: 2; margin-left: auto; }
  /* Pozn.: popisek „Dashboard" se tu dřív schovával pod 768 px, aby uvolnil ~75 px
     primárnímu menu. Od `T-418` (Dan 2. 8., aplikováno 4. 8.) v markupu není vůbec,
     takže tu není co skrývat — pravidlo šlo pryč jako mrtvé. */
}

/* Avatar v hlavičce + obecná kulatá komponenta (i na profilu). */
.nav-avatar { display: inline-flex; border-radius: 50%; }
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: visible;
  background: linear-gradient(135deg, var(--clr-indigo), #6366f1);
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar--sm { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
.user-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.8rem; }
.nav-avatar:hover .user-avatar { box-shadow: 0 0 0 2px var(--clr-indigo); }

/* Profilová stránka (users#show) — hlavička s avatarem. */
.profile-head { display: flex; align-items: center; gap: 1.25rem; }

/* Oprava zarovnání posledního sloupce v tabulkách, pokud obsahuje odkazy */
table {
  & tr {
    & th, & td {
      &:last-child:has(a) {
        text-align: left;
      }
    }
  }
}

/* o pravu frameworku: submit tlačítko u hledání */
form input[type="submit"] {
  margin-top: initial;
}

/* Fix linky pod nadpisem v modálu */
dialog h1 {
  border-bottom: initial;
}

/* ── Chip ukazující předvyplněnou vazbu v modálu ─────────────────── */
.dialog-binding-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.65rem;
  background: var(--clr-indigo-alpha);
  color: var(--clr-indigo-dark);
  border: 1px solid color-mix(in srgb, var(--clr-indigo) 25%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.3;
}

.dialog-binding-chip[hidden] { display: none; }

.dialog-binding-chip-label {
  color: var(--clr-text-2);
  font-weight: 500;
}

.dialog-binding-chip-value {
  font-weight: 700;
}

a.plain { color: inherit; text-decoration: none; font-weight: 500; cursor: pointer; }

/* ── Tag ── molekula přesunuta do molecules.css (sdílené, linknutelné do
   shadow ostrovů — M5). Definice .tag / .tag--* žije tam. ── */

/* ── Kartový seznam po dnech (T-101) ──────────────────────────────────
   Index aktivit je kartový výpis jako ostatní entity, ale datum u komunikačního
   logu nese informaci — proto zůstalo seskupení po dnech: nadpis dne + vlastní
   .entity-card-list pod ním. Nadpis je typografický (INV-11 — žádný proužek) a
   převzal vzhled zrušeného .timeline__date, ať se čtení data nezměnilo. */
.card-list-group + .card-list-group {
  margin-top: var(--space-lg);
}

/* Ve skupině bývá i jediná karta. `auto-fit` by ji roztáhl přes celý řádek a
   každý den by měl jinak širokou kartu — `auto-fill` prázdné sloupce udrží,
   takže šířka karty je napříč dny stejná. */
.card-list-group .entity-card-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.card-list-group__date {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted);
  margin: 0 0 var(--space-sm);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--clr-border);
}

/* Karta aktivity: čas vedle typu, poznámka jako tělo. */
.activity-card__time {
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}

.activity-card__note {
  font-size: 0.9rem;
  color: var(--clr-text);
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

/* ── Dashboard ──────────────────────────────────────────────────
   2/1 grid (aktivity vlevo, úkoly vpravo), sekce nadpisy. */

/* <entity-list> ostrov = block kontejner seznamu (custom element je default inline). */
entity-list { display: block; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

.dashboard-section {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--clr-border);
  font-size: 1rem;
  font-weight: 600;
}

.dashboard-section--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-section--spaced {
  margin-top: 1.5rem;
}

/* Feed aktivit — karty (`shared/_activity_card`) místo dřívější tabulky
   `.activity-feed-table` (26. 7.). Použito v panelech entit, dashboardu
   a ve vazbách úkolu; ladí s kartami entit (surface + border, bez proužku). */
.activity-mini-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.activity-mini-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  padding: var(--space-sm) var(--space-md);
}

.activity-mini-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.activity-mini-card__head .tag { font-size: 0.7rem; }

.activity-mini-card__meta {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-mini-card__actions { margin-left: auto; }

.activity-mini-card__note {
  margin-top: var(--space-xs);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── Karta aktivity SE SUBJEKTEM: chip sbalený, text hned za ním (T-288) ──
   Dan 26. 7. (screenshot dashboardu): plný entity chip subjektu si bral celý
   vlastní řádek. Nově je z chipu jen kolečko a poznámka teče inline za ním.

   Sbalování si tu NEPÍŠEME — obal má třídu `.chip-stack`, která tu mechaniku
   vlastní od `T-280` (`__name` má `max-width: 0`, hover/fokus ho vydá).
   Schválně `max-width`, NE `display:none`: odkaz uvnitř jména zůstává ve
   stromu, takže `:focus-within` funguje z klávesnice. Jediný chip znamená
   žádný překryv, takže se z facepile dědí jen to sbalování. */
.activity-mini-card__line {
  margin-top: var(--space-xs);
}

.activity-mini-card__line .activity-mini-card__subject {
  --facepile-size: 1.5rem;  /* menší než v tabulce úkolů — sedí na účaří textu */
  /* Pevná šířka = kolečko + padding chipu. Rozbalený chip z ní VYTEČE a text
     překryje, místo aby ho odsunul: bez toho by se odstavec poznámky při
     každém přejetí myší přeskládal. Proto sem patří i `position/z-index` —
     `.chip-stack` má `isolation: isolate`, takže by se jinak pilulka kreslila
     POD text, který v inline flow následuje. */
  width: calc(var(--facepile-size) + 0.25rem);
  overflow: visible;
  position: relative;
  z-index: 2;
  margin-right: 0.35rem;
  vertical-align: -0.35rem;
}

/* Poznámka je inline pokračování řádku, ne vlastní blok. */
.activity-mini-card__note--inline {
  display: inline;
  margin-top: 0;
}

/* Krátký prázdný stav (světlejší než .empty-state, který má větší marginy). */
.muted-empty {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

/* Indexové tabulky — šířka a pomocné buňky (sjednoceno s candidates/companies). */
.invoices-index-table,
.projects-index-table {
  width: 100%;
}

.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.col-nowrap {
  white-space: nowrap;
}

.col-muted {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

/* ── Stránkování seznamů (shared/_pagination) ────────────────────
   Zobrazeno X–Y z N. · « Předchozí 1 2 … [6] … 12 Další » · Na stránku [50▾]
   Aktuální stránka = tmavě vyplněné tlačítko (v dark modu se invertuje). */
.paginator {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.paginator__info {
  color: var(--clr-text-2);
}

.paginator__pages {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.paginator__page.is-current {
  background: var(--clr-text);
  border-color: var(--clr-text);
  color: var(--clr-surface);
}

.paginator__page.is-disabled {
  color: var(--clr-text-muted);
  pointer-events: none;
}

.paginator__gap {
  color: var(--clr-text-muted);
  padding: 0 0.25rem;
}

.paginator__per-page {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--clr-text-2);
  white-space: nowrap;
}

.paginator__per-page select {
  width: auto;
  margin: 0;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

/* ── Timesheet (Výkazy) index tabulka ─────────────────────────── */

.timesheet-table-wrap {
  overflow-x: auto;
}

.timesheet-table {
  table-layout: fixed;
  width: 100%;
  min-width: 70rem;
}

.timesheet-table .col-date,
.timesheet-table .col-user,
.timesheet-table .col-duration,
.timesheet-table .col-actions {
  white-space: nowrap;
}

.timesheet-table th.col-date,
.timesheet-table td.col-date { width: 6rem; }

.timesheet-table th.col-user,
.timesheet-table td.col-user { width: 8rem; }

.timesheet-table th.col-project { width: 14rem; }

.timesheet-table th.col-tags { width: 8rem; }

.timesheet-table th.col-desc,
.timesheet-table td.col-desc { width: 24rem; }

.timesheet-table .col-duration {
  width: 5rem;
  text-align: right;
}

.timesheet-table td.col-duration {
  font-variant-numeric: tabular-nums;
}

.timesheet-table .col-actions {
  width: 5.5rem;
  text-align: right;
}

.timesheet-table td.col-date {
  color: var(--clr-text-2);
}

/* Sub-popisek (název firmy pod projektem) v projektovém sloupci. */
.timesheet-company-sub {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
}

/* ── Entity show stránka — sdílené layouty ───────────────────────
   Dvousloupcový grid pro show stránky (companies, projects…),
   key-value tabulka pro info (IČO, DIČ, email, telefon, web…). */

.entity-show-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.entity-info-table { width: 100%; }

.entity-info-table td:first-child {
  width: 3.5rem;
  font-weight: 500;
}

/* Řádek s vícenásobným obsahem (Poznámka): label nahoře, hodnota
   may wrap a má top padding. */
.entity-info-table tr.entity-info-row--top td {
  vertical-align: top;
  padding-top: 0.25rem;
}

.entity-info-note {
  color: var(--clr-text-2);
}

/* Modifikátor: tighter grid (gap 2rem 1.5rem) pro projects/show
   apod., kde 3rem je moc. */
.entity-show-grid--tight { gap: 2rem 1.5rem; }

.entity-info-link {
  color: var(--clr-link);
}

/* Sekce ohraničená nahoře (Kontakty, Aktivity… na show stránce). */
.entity-section--bordered {
  padding-top: 1.25rem;
  border-top: 1px solid var(--clr-border);
}

.entity-section-heading {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.entity-section-heading .muted-count {
  font-weight: normal;
}

/* Akce v nadpisu sekce (dnes „Zařadit na pozici" ve Výběrových řízeních, T-282.6)
   jde k PRAVÉMU okraji. Přes `margin-left: auto` na tlačítku, ne přes
   `justify-content` na nadpisu — `.entity-section-heading` nosí i sekce bez akce
   a `space-between` by jim rozhodilo vnitřní části nadpisu. */
.entity-section-heading > .button {
  margin-left: auto;
}

/* ⚠️ `.button--sm` tu BYLA (T-282.6 a8) a je smazaná: nikdy se neuplatnila a byla
   duplicitní. Menší tlačítko už projekt má jako `.button.sm` v `molecules.css`
   (včetně `.button.sm img { max-height: 15px }`) — jedna varianta, jeden zdroj.
   Nezakládat ji tady znovu: základ tlačítka v `molecules.css` cílí přes
   `button.button` (0,1,1) a načítá se až PO tomhle souboru, takže holá třída
   (0,1,0) v `application.css` prohraje specificitou i pořadím. */

/* Body popisku entity nad info tabulkou. */
.entity-description {
  padding: 1rem 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--clr-text-2);
  font-size: 0.9rem;
}

/* Meta atributy entity: klíč a hodnota na jednom řádku vedle sebe. */
.entity-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.entity-meta-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.entity-meta-row dt {
  flex: 0 0 9rem;
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.entity-meta-row dd {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  color: var(--clr-text);
}

/* Hierarchická tabulka: projekt → pozice jako sub-řádek. */
.entity-projects-list tr.is-child {
  color: var(--clr-text-2);
  font-size: 0.9rem;
}

.entity-projects-list tr.is-child td {
  padding-left: 1rem;
  padding-top: 0;
  padding-bottom: 0.2rem;
}

.entity-projects-list .entity-projects-arrow {
  color: var(--clr-text-muted);
  margin-right: 0.4rem;
}

.entity-projects-list tr.is-child a {
  color: var(--clr-text-2);
}

.entity-projects-list .entity-projects-name td {
  font-weight: 500;
  padding-bottom: 0.1rem;
}

.entity-projects-list .entity-projects-status {
  text-align: right;
  padding-top: 0;
  padding-bottom: 0.2rem;
}

.entity-projects-historical {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.tag-primary-mark {
  font-size: 0.7rem;
  margin-left: 0.4rem;
}

/* ── Company show v2 — karta firmy ───────────────────────────────
   Hlavička s KPI proužkem, dvousloupcový layout (vlevo zakázky +
   aktivity, vpravo info / kontakty / dokumenty). Panely = .show-card. */

.show-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.show-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.show-card__title {
  font-size: 1rem;
  font-weight: 500;
}

.show-card__title .muted-count {
  font-weight: normal;
  color: var(--clr-text-muted);
}

/* Sekce vkládané do karty (Úkoly, Dokumenty) si nesou vlastní border-top
   jako oddělovač — uvnitř .show-card je nadbytečný. */
.show-card > .entity-section {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.show-header {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.show-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.show-header__title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.show-header__title-row h1 {
  margin: 0;
  font-size: 1.5rem;
}

.show-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 0.5rem;
  color: var(--clr-text-2);
  font-size: 0.9rem;
}

.show-header__meta b {
  font-weight: 500;
  color: var(--clr-text);
}

.show-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Rozhodnutí výsledku fáze kandidatury (T-263 refinement) ────────────────
   Patička s tlačítky pod hlavičkou detailu kandidatury. Dan po R197 odmítl segment
   („vypadá jako tlačítko, ale je to jen nadpis formu"). Layout:
     [Nástup] [Neprošel]  ……  [↑] [Posunout → fáze]
   Primární „Posunout →" a malé sekundární icon-only vrácení tvoří pravý navigační
   cluster; vlevo zůstávají jen výjimečné výsledky.
   ⚠️ `T-334.4`: VŠECHNY ČTYŘI výsledky fáze berou vstup v MINI MODALU, inline
   v patičce nezůstalo nic. „Nástup"/„Neprošel" otevírají `.phase-outcome-dialog`
   (níž), obě navigační akce berou nepovinný komentář ke kroku přes
   `.step-note-dialog` (`T-334.3`, dřív window.prompt). Rozbalovací `.phase-panel`
   + třída `is-open` jsou ZRUŠENÉ, ne skryté — proto tu po nich není žádné pravidlo.
   INV-11: barevnost tlačítkem, ne proužkem. */
.phase-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.phase-actions__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-2);
}
/* Patička: výsledky vlevo, navigace funnelem odsazená doprava. */
.phase-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.phase-footer__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.phase-footer__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Inline formuláře funnel navigace obalují jen svůj submit — ať v patičce
   sedí jako prosté tlačítko, ne jako samostatný blok. */
.phase-inline-form { display: inline-flex; margin: 0; }
.phase-back-button {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  justify-content: center;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}
.phase-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.phase-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.phase-form__field > span {
  font-size: 0.8rem;
  color: var(--clr-text-2);
}
.phase-form__field input,
.phase-form__field select,
.phase-form__field textarea {
  width: 100%;
  box-sizing: border-box;
}
/* Jeden primární submit vpravo dole (feedback_buttons_submit_right); „Zrušit"
   vedle něj vlevo, ve vzoru `.step-note-dialog`. */
.phase-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ── Mini modal výsledku fáze (T-334.4) ─────────────────────────────
   „Nástup" (datum + mzda) a „Neprošel" (důvod / kdo / poznámka). Markup je
   v `applications/_detail`, tedy JEDEN pro modal i pro split-view panel
   (INV-10) — dřív to byly rozbalovací `.phase-panel` a toggle k nim držely
   DVA ostrovy. Užší než detail kandidatury (620 px) schválně: mini má být
   poznat jako vrstva nad ním, ne jako jeho pokračování. Nad velkým modalem
   stojí jako druhá vrstva, v panelu stojí sám — pořadí drží `dialog.js`
   (T-334.2). Barvu hlavičky a záři dává `data-entity="application"`. */
dialog.phase-outcome-dialog {
  width: 460px;
  top: 15vh;
}

.show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.show-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.show-owner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--clr-border);
}

.show-owner__avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--clr-indigo-alpha);
  color: var(--clr-indigo-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 500;
  flex-shrink: 0;
}

.show-owner__name { font-size: 0.9rem; }

.show-owner__role {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}

.show-info-table {
  width: 100%;
  font-size: 0.9rem;
}

.show-info-table td { padding: 0.22rem 0; }

.show-info-table td:first-child { color: var(--clr-text-2); }

.show-info-table td:last-child {
  text-align: right;
  color: var(--clr-text);
}

.proj-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
}

.proj-card + .proj-card { margin-top: 0.6rem; }

.proj-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.proj-card__name {
  font-size: 0.95rem;
  font-weight: 500;
}

.proj-card__name a { color: var(--clr-text); }

.proj-card__sub {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.8rem;
  color: var(--clr-text-2);
}

.proj-card__positions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Pravá strana hlavičky karty (stav / fáze + odkaz na detail) — stejný tvar
   jako .proj-pos-item__aside, jen na kartě. */
.proj-card__aside {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Úkoly navázané na kartu (výběrové řízení kandidáta, #202) — oddělené linkou,
   ať nesplynou s hlavičkou karty. */
.proj-card__tasks {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--clr-border);
}

.proj-card__tasks .task-checklist { margin-bottom: 0.4rem; }

.proj-card__tasks .muted-empty { margin: 0 0 0.4rem; }

.proj-pos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.proj-pos__name a { color: var(--clr-text); }

.proj-pos__detail {
  color: var(--clr-text-2);
  font-size: 0.82rem;
  margin-left: 0.4rem;
}

/* Kontakt v postranním panelu — kompaktní vertikální blok (ne tabulka,
   která se v úzkém sloupci ošklivě láme). */
.show-contact { font-size: 0.85rem; }

.show-contact + .show-contact {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--clr-border);
}

.show-contact__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.show-contact__name { font-weight: 500; }

.show-contact__top .button { margin-left: auto; }

.show-contact__role { color: var(--clr-text-2); }

.show-contact__line { display: block; }

@media (max-width: 900px) {
  .show-grid { grid-template-columns: 1fr; }
}

/* ── Index page helpers (filtry, souhrn, prázdný stav) ──────────── */

/* Filter bar pod h1 (užito tam, kde je víc filtrů než se vejde do .buttons) */
.index-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1rem;
  margin: 1rem 0;
}

.index-filters .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.index-filters label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clr-text-muted);
}

.index-filters input,
.index-filters select {
  font-size: 0.88rem !important;
  padding: 0.4rem 0.6rem !important;
}

.index-filters .index-filters__reset {
  align-self: flex-end;
  padding-bottom: 0.5rem;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  text-decoration: underline;
}

.index-filters .index-filters__reset:hover { color: var(--clr-indigo); }

/* Krátký souhrnový řádek nad tabulkou (počet, suma…) */
.list-summary {
  margin: 0 0 0.75rem !important;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}

.list-summary strong {
  color: var(--clr-text);
  font-weight: 600;
}

/* Prázdný stav (žádné záznamy / žádné hledání) */
.empty-state {
  margin: 1rem 0;
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

/* ── Patička s developer odkazy ─────────────────────────────────── */
.dev-footer {
  grid-column: 1 / -1;
  padding: 0.6rem 1.5rem;
  font-size: 0.7rem;
  color: var(--clr-text-muted);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.dev-footer span { margin-right: 0.4rem; opacity: 0.7; }

.dev-footer a {
  color: var(--clr-text-muted);
  text-decoration: none;
}

.dev-footer a:hover {
  color: var(--clr-indigo);
  text-decoration: underline;
}

/* ── Globální hledání (modal) ───────────────────────────────────── */
/* ── Dialog (base) ──────────────────────────────────────────────
   Náhrada za framework/dialog.css. Konkrétní dialogy si níže
   přepisují rozměry; tady je jen vzhled rámu, podklad a backdrop. */
dialog {
  width: 540px;
  max-width: 90vw;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--clr-surface);
  color: var(--clr-text);
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

/* ── Zakrytá vrstva se přihasne (T-334.5) ───────────────────────────
   Danova volba ze dvou (3. 8. 2026): prominenci mini nedělá mini, ale
   ZTLUMENÍ vrstvy pod ním. Značku `data-covered` sází zásobník vrstev
   v `dialog.js` (T-334.2) každému modalu, nad kterým stojí jiný — pravidlo
   je obecné, ne jmenný seznam dvou mini.

   ⚠️ Ztlumení jede přes PŘEKRYV (`::after`), ne přes `opacity` na dialogu:
   mini bývá DOM potomkem parenta (`T-334.4` ho schválně dala dovnitř
   `_detail`) a opacity rodiče je jeden z mála efektů, u kterých se
   prohlížeče u top-layer potomků neshodnou. Překryv se maluje jen uvnitř
   boxu parenta, takže se mini nemá jak dotknout.

   ⚠️ `--glow-accent` / `--sel-accent` se NESAHÁ (znamenají „položka otevřená
   v panelu", `T-287`) — bere se jen ta záře, kterou si dialog dává sám přes
   `dialog[data-entity][open]`, aby dvě záře nesoupeřily. To je přesně to
   Danovo „_bacha na glow a border zvýraznění_". */
dialog[data-covered] {
  position: fixed;
}
dialog[data-covered][data-entity] {
  border-color: var(--clr-border);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}
dialog[data-covered]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--clr-surface) 58%, transparent);
  pointer-events: none;
}

/* ── Toast (notifikace) ─────────────────────────────────────────
   Náhrada za framework/toasts.css + JS — viz toast.js. */
.toast {
  position: fixed;
  right: var(--space-base);
  bottom: var(--space-base);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 320px;
  padding: var(--space-md) var(--space-base);
  border-radius: var(--radius-sm);
  background: var(--clr-text);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s, transform 0.2s;
}

/* Inverzní look (tmavý box) v dark modu nefunguje — --clr-text je světlá,
   takže by vyšlo světlé pozadí s bílým textem. Ve tmě je toast plocha. */
:root[data-theme="dark"] .toast {
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}

/* Bohatá varianta v dark (`T-229`): pravidlo `:root[data-theme="dark"] .toast`
   výše má specificitu (0,3,0) a svým `border:` SHORTHANDEM přebíjelo
   `.toast--rich.toast--error { border-color }` (0,2,0) i `.toast--rich`
   background (0,1,0) → error toast ztrácel danger rámeček a dostal jen
   neutrální plochu surface-alt, takže na tmavém pozadí splýval a „působil
   průhledně". Obnovujeme opakní surface + danger rámeček ze STEJNÝCH danger
   tokenů (žádný třetí odstín), s dost vysokou specificitou, aby to shorthand
   nepřebil. Barevný identifikátor chyby (titulek + rámeček) tak drží i v dark. */
:root[data-theme="dark"] .toast--rich {
  background: var(--clr-surface);
}

:root[data-theme="dark"] .toast--rich.toast--error {
  border-color: var(--clr-danger);
}

.toast__close {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.toast__close:hover { opacity: 1; }

.toast--leaving {
  opacity: 0;
  transform: translateY(8px);
}

/* Chybový toast v PROSTÉ variantě (Dan 3. 8. 2026: „_Stačí toast, nemusí byt
   error dvakrat_" → „_ale s barvou_"). Ostrovy setupu hlásí chybu jednou a jen
   toastem, takže musí být na první pohled poznat, že je to chyba a ne potvrzení.
   Barvu nese rámeček + text z TÝCHŽ danger tokenů jako bohatá varianta
   (`.toast--rich.toast--error`) — žádný třetí odstín navíc. Plocha zůstává
   neutrální, aby text držel kontrast v obou theme. */
.toast--error:not(.toast--rich) {
  border-color: var(--clr-danger);
  color: var(--clr-danger);
}

/* Dark: `:root[data-theme="dark"] .toast` výš nastavuje `border:` SHORTHANDEM
   (specificita 0,3,0), takže by neutrální rámeček přebil danger — týž případ,
   kvůli kterému má obnovu i bohatá varianta o pár řádků výš (`T-229`). */
:root[data-theme="dark"] .toast--error:not(.toast--rich) {
  border-color: var(--clr-danger);
  color: var(--clr-danger);
}

/* Bohatší varianta (hlava + tělo + patka s akcí) — chyba, co říká kudy dál
   (`T-209`). Plocha místo inverzní barvy, ať je čitelná v obou theme; barvu
   nese jen levý pruh + titulek varianty. */
.toast--rich {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  max-width: 360px;
  padding: var(--space-base);
  background: var(--clr-surface);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}

.toast--rich.toast--error {
  border-color: var(--clr-danger);
}

.toast__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.toast__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.toast--error .toast__title { color: var(--clr-danger); }

.toast__body {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.4;
}

.toast__foot {
  display: flex;
  justify-content: flex-end;
}

.toast__action { font-size: var(--fs-sm); }

dialog.global-search-dialog {
  width: 600px;
  max-width: 90vw;
  height: fit-content;
  max-height: 80vh;
  top: 12vh;
  padding: 1.25rem 1.5rem;
}

dialog.global-search-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem 0;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--clr-border);
}

dialog.global-search-dialog header h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
}

dialog.global-search-dialog header form[method="dialog"] {
  margin: 0;
}

dialog.global-search-dialog .dialog-close {
  background: transparent;
  color: var(--clr-text-muted);
  border: none;
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
}

dialog.global-search-dialog .dialog-close:hover {
  background: var(--clr-indigo-alpha);
  color: var(--clr-indigo);
  box-shadow: none;
}

.global-search-form {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
}

.global-search-form input[type="text"] {
  flex: 1;
}

.global-search-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--clr-text-muted);
}

/* ── Výkaz (modal + form) ───────────────────────────────────────── */
dialog.time-entry-dialog {
  width: 540px;
  max-width: 90vw;
  height: fit-content;
  max-height: 85vh;
  top: 10vh;
  padding: 1.25rem 1.5rem;
}

/* ── Mini modal „Komentář ke kroku" (T-334.3) ───────────────────────
   Nepovinný komentář k posunu kandidáta fází (#215) — dřív `window.prompt` na
   třech místech, teď jeden dialog v layoutu (`shared/_step_note_dialog`).
   Stojí buď SÁM (přetažení čipu ve funnelu), nebo jako druhá vrstva nad
   detailem kandidatury; pořadí vrstev řeší `dialog.js` (T-334.2). Užší než
   ostatní modaly schválně — je to jedno pole, ne formulář. */
dialog.step-note-dialog {
  width: 420px;
  top: 18vh;
}

dialog.time-entry-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem 0;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--clr-border);
}

dialog.time-entry-dialog header h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
}

dialog.time-entry-dialog header form[method="dialog"] {
  margin: 0;
}

dialog.time-entry-dialog .dialog-close {
  background: transparent;
  color: var(--clr-text-muted);
  border: none;
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

/* ── Modal v barvě své entity (T-249) ───────────────────────────────
   Dan: „_modal muze mit header bg jako jeho releantni entita (new ukol narva
   ukolu). maji vsechny entity sve barvy? ať mají a dejme to do helpu_" a
   „_pridame gloew na modal, je to to hlavni ted nahore_".

   Mechanika: dialog nese `data-entity="<klíč>"`, který mu nastaví
   `--entity-accent` z KANONICKÉ mapy (`T-242`) — žádná další paleta, žádný
   inline style v šabloně. Hlavička dostane jemný tint téže barvy a modal
   záři, aby bylo poznat, že je to „to hlavní teď nahoře".

   Tint je JEMNÝ a text zůstává na `--clr-text` (kontrastní), ne bílý na sytém
   podkladu — sytá výplň by rozbila light mode a tloukla by se s indigo stavem
   „vybrané". Hlavička zůstává `<header>`, tedy dál tažné madlo (`modal.css`),
   a `×` v ní zůstává.

   Odsazení: hlavička krvácí do krajů modalu přes záporný margin, aby to byl
   PRUH, ne box v boxu. Padding modalu je proto v proměnných — kdo přidá dialog
   s jiným paddingem, přepíše je u své třídy a pruh sedne dál. */
dialog.time-entry-dialog,
dialog.notes-dialog {
  --dialog-pad-x: 1.5rem;
  --dialog-pad-y: 1.25rem;
}

dialog[data-entity="company"]     { --entity-accent: var(--entity-companies); }
dialog[data-entity="candidate"]   { --entity-accent: var(--entity-candidates); }
dialog[data-entity="project"]     { --entity-accent: var(--entity-projects); }
dialog[data-entity="position"]    { --entity-accent: var(--entity-positions); }
dialog[data-entity="time_entry"]  { --entity-accent: var(--entity-time_entries); }
dialog[data-entity="user"]        { --entity-accent: var(--entity-users); }
dialog[data-entity="application"] { --entity-accent: var(--entity-applications); }
dialog[data-entity="invoice"]     { --entity-accent: var(--entity-invoices); }
dialog[data-entity="activity"]    { --entity-accent: var(--entity-activities); }
dialog[data-entity="note"]        { --entity-accent: var(--entity-notes); }
/* Úkol barví PRIORITA, ne typ (Danův dovětek „_ukol muze i, to je dribnost,
   menit barvu podle prioroty_" + „_a deadline_"). Třídu `task-priority-*`
   i `is-overdue` přepíná `task_dialog.js` ŽIVĚ při změně pole ve formuláři —
   `--task-priority-accent` je tentýž token, jakým se barví karta úkolu, takže
   modal a karta nemůžou svítit jinak. */
dialog[data-entity="task"]             { --entity-accent: var(--task-priority-accent, #9ca3af); }
dialog[data-entity="task"].is-overdue  { --entity-accent: var(--clr-danger); }

/* JEN přímý potomek. `header:first-child` (jak to dělá modal.css pro kurzor)
   by u #application-dialog obarvil i hlavičku VYKRESLENÉHO DETAILU uvnitř těla
   — u kurzoru je to neškodné, u pozadí ne. */
dialog[data-entity] > header {
  margin: calc(-1 * var(--dialog-pad-y)) calc(-1 * var(--dialog-pad-x)) 1rem;
  padding: 0.85rem var(--dialog-pad-x) 0.7rem;
  background: color-mix(in srgb, var(--entity-accent) 14%, var(--clr-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--entity-accent) 38%, var(--clr-border));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  /* Barvu nese PLOCHA hlavičky, ne proužek na jedné straně (INV-11, T-243). */
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

/* Nadpis a křížek v tónu entity — text zůstává čitelný v obou motivech,
   protože podklad je jen 14% tint povrchu, ne sytá výplň. */
dialog[data-entity] > header h1 {
  color: color-mix(in srgb, var(--entity-accent) 62%, var(--clr-text));
}

dialog[data-entity] > header .dialog-close {
  color: color-mix(in srgb, var(--entity-accent) 55%, var(--clr-text-2));
}

/* ZÁŘE — „modal je to hlavní teď nahoře". Jen na otevřeném dialogu; barva je
   accent entity, takže i záře říká, čeho se modal týká. */
dialog[data-entity][open] {
  border-color: color-mix(in srgb, var(--entity-accent) 30%, var(--clr-border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--entity-accent) 26%, transparent),
    0 18px 48px color-mix(in srgb, var(--entity-accent) 34%, transparent);
}

.time-entry-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.time-entry-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.time-entry-form__row label {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}

.time-entry-form__row input,
.time-entry-form__row select,
.time-entry-form__row textarea {
  width: 100%;
}

.time-entry-form__duration {
  display: flex;
  gap: 0.5rem;
}

.time-entry-form__duration select {
  flex: 1;
}

.time-entry-form__hint {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
}

.time-entry-form__hint code {
  background: var(--clr-bg-alt, #f3f3f3);
  padding: 0 0.25rem;
  border-radius: 3px;
}

.time-entry-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
  width: 100%;
}

.time-entry-form__actions .time-entry-form__delete {
  margin: 0 auto 0 0;
}

/* Dvousloupcové řádky v dialozích (priorita/termín, pro koho/zadavatel…).
   flex: 1 1 0 a 0.9rem nemají token — necháváme literál. */
.time-entry-form__cols {
  display: flex;
  gap: var(--space-base);
}

.time-entry-form__col {
  flex: 1 1 0;
}

.time-entry-form__inline-options {
  display: flex;
  gap: var(--space-base);
  align-items: center;
}

/* Vyšší specificita než `.time-entry-form__row label`, aby option-label
   přepsal jeho font-size (dřív řešeno inline stylem). */
.time-entry-form__row label.time-entry-form__option-label {
  font-weight: normal;
  font-size: 0.9rem;
}

/* ── Time entry tag picker ─────────────────────────────────────── */
.te-tags {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.te-tags__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.te-tags__selected:empty {
  display: none;
}

/* Vybraný chip nikdy nepřeteče šířku pickeru (modál i filtr) — dlouhý název se
   ořízne ellipsis, plný je v title. Řádek se zalomí mezi chipy, ne uvnitř názvu. */
.te-tags__selected .te-tag-chip {
  max-width: 100%;
}

.te-tags__selected .te-tag-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.te-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--tag-color, #334155);
  border: 1px solid var(--tag-color, #334155);
  /* Text chipu: bílá je výchozí, ale světlé odstíny palety si přes
     `--tag-text-color` řeknou o tmavý text (helper `status_chip`, T-188). */
  color: var(--tag-text-color, #fff);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.te-tag-chip.is-hidden {
  display: none;
}

.te-tag-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.7;
}

.te-tag-chip__remove:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.te-tag-chip--static {
  cursor: default;
}

/* Toggle varianta — pro výběr ve formuláři (opacity přepínač) */
.te-tag-chip--toggle {
  cursor: pointer;
  user-select: none;
  opacity: 0.42;
  transition: opacity 0.12s, box-shadow 0.12s;
}

.te-tag-chip--toggle:hover {
  opacity: 0.78;
}

.te-tag-chip--toggle.is-selected {
  opacity: 1;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--tag-color, #334155) 55%, transparent),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

.te-tag-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.te-tag-list--stacked {
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}

/* Výpis výkazů: dlouhé tagy se zkrátí na šířku buňky (ellipsis),
   na hover se plný název rozbalí jako overlay nad ostatními řádky
   (mimo tok → výška řádku se nemění). */
.te-tag-list--stacked .te-tag-chip--static {
  position: relative;
  max-width: 100%;
}

.te-tag-list--stacked .te-tag-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.te-tag-list--stacked .te-tag-chip--static[data-name]:hover {
  z-index: 20;
}

.te-tag-list--stacked .te-tag-chip--static[data-name]:hover::after {
  content: attr(data-name);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 20;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--tag-color, #334155);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.te-tags__search {
  position: relative;
}

.te-tags__input {
  width: 100%;
}

.te-tags__dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border, #d4d4d4);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
}

.te-tags__dropdown[hidden] {
  display: none;
}

.te-tags__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-size: 0.88rem;
}

.te-tags__option::before {
  content: '';
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--tag-color, transparent);
}

/* Avatar režim (T-163.2): iniciály entity nahrazují barevný čtvereček —
   sdílená .entity-chip__avatar dělá vzhled shodný s var. 2 (searchable select). */
.te-tags[data-te-avatars] .te-tags__option::before {
  display: none;
}

.te-tags__option:hover,
.te-tags__option.is-focused {
  background: var(--clr-surface-alt);
}

.te-tags__option.is-checked {
  background: var(--clr-indigo-alpha);
  color: var(--clr-indigo-dark);
}

.te-tags__option.is-checked.is-focused {
  background: color-mix(in srgb, var(--clr-indigo) 22%, var(--clr-surface));
}

.te-tags__option-group {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--clr-text-muted, #888);
  font-size: 0.78rem;
}

/* Dlouhý název návrhu nezalamovat — ořízneme ellipsis na konci. Rozlišující
   prefix (skupina › začátek názvu) zůstává vidět, plný název je v title. */
.te-tags__option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.te-tags__empty {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  color: var(--clr-text-muted, #888);
}

/* ── Report výkazů ───────────────────────────────────────────────── */
.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-end;
  margin: 0.5rem 0 1.25rem;
}

.report-filters__label {
  display: block;
  font-size: 0.8rem;
  color: var(--clr-text-muted, #666);
  margin-bottom: 0.15rem;
}

.report-filters .report-filters__reset {
  align-self: flex-end;
  padding-bottom: 0.5rem;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  text-decoration: underline;
}

.report-filters .report-filters__reset:hover { color: var(--clr-indigo); }

.report-timesheet {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.report-timesheet th,
.report-timesheet td {
  padding: 0.35rem 0.9rem;
  border-bottom: 1px solid var(--clr-border);
}

.report-timesheet thead th {
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--clr-divider);
  color: var(--clr-text-muted, #555);
  /* Hlavička zůstává viditelná pod horní lištou při scrollu dlouhé tabulky.
     (Globální table tr th sticky míří na top: -1px, kde ji zakryje navbar.) */
  position: sticky;
  top: calc(var(--header-h) - 1px);
  z-index: 5;
  background: var(--clr-surface-alt);
}

/* Číselné sloupce vpravo i v hlavičce — přebíjí text-align: left výše. */
.report-timesheet thead th.report-timesheet__num {
  text-align: right;
}

.report-timesheet__num {
  text-align: right;
  white-space: nowrap;
}

.report-timesheet__group td {
  font-weight: 600;
}

.report-timesheet__detail td {
  color: var(--clr-text-2);
  font-weight: 400;
}

.report-timesheet__indent {
  padding-left: 1.8rem !important;
}

.report-timesheet__sub {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.report-timesheet__divider td {
  border-bottom: 1px solid var(--clr-text);
  padding: 0.15rem 0;
}

.report-timesheet__total td {
  font-weight: 700;
  border-top: 1px solid var(--clr-divider);
}

/* ── Dropdown menu (details/summary) ────────────────────────────── */
details.dropdown {
  position: relative;
  display: inline-block;
}

details.dropdown > summary {
  list-style: none;
  cursor: pointer;
}

details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown > summary::marker { content: ''; }

details.dropdown[open] > summary {
  box-shadow: 0 0 0 3px var(--clr-indigo-alpha) !important;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 180px;
  background: var(--clr-surface, #fff);
  border: 1px solid var(--clr-border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  padding: 0.25rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

/* Překlopení k levé hraně spouštěče. Nasazuje ho `dropdown_fit.js`, když by
   výchozí `right: 0` vytlačilo menu ven z detailního panelu — což je v úzkém
   draweru běžný stav, protože pod 30rem sedí akce u LEVÉ hrany a vnořené kebaby
   v obsahu tam sedí vždycky (`T-420`). Která strana je správná, závisí na pozici
   spouštěče v panelu, a to `@container` nezjistí — proto třída, ne media query. */
.dropdown__menu--flip {
  right: auto;
  left: 0;
}

.dropdown__item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--clr-text, #1e293b) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

/* „Přišpendlit / Odšpendlit" je jediná položka kebabu s ikonou (T-282.6 a5,
   Dan 2. 8.: „pak pin u Vybrat") — záměrně: ostatní položky navigují, tahle
   jediná přepíná stav, a dvojice pin/unpin ho nese líp než samotné slovo.
   Server neví, která varianta platí (INV-282-A), takže vykreslí OBĚ ikony
   a přepíná se tady podle `is-selected`, které dopisuje `entity_selection.js`. */
.dropdown__item--pin {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.dropdown__item-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--clr-text-muted);
}
.dropdown__item-icon svg { width: 1rem; height: 1rem; }
.dropdown__item--pin:hover .dropdown__item-icon { color: inherit; }
.dropdown__item--pin .dropdown__item-icon--unpin,
.dropdown__item--pin.is-selected .dropdown__item-icon--pin { display: none; }
.dropdown__item--pin.is-selected .dropdown__item-icon--unpin { display: inline-flex; }

/* Táž dvojice ikon jako TLAČÍTKO v hlavičce panelu (T-282.6, Dan 2. 8.: špendlík
   z kebabu ven, „jako primary vedle upravit"). Přišpendlené tlačítko drží
   `is-selected` — vizuálně se odliší jemně (tón entity), ne sytou výplní: vedle
   něj stojí „+ Aktivita" a „Upravit" a tři plné tlačítka by se praly. */
.button--pin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.button__icon { display: inline-flex; }
.button__icon svg { width: 1rem; height: 1rem; }
.button--pin .button__icon--unpin,
.button--pin.is-selected .button__icon--pin { display: none; }
.button--pin.is-selected .button__icon--unpin { display: inline-flex; }
.button--pin.is-selected {
  border-color: color-mix(in srgb, var(--clr-indigo) 55%, var(--clr-border));
  color: var(--clr-indigo);
}

.dropdown__form {
  margin: 0;
}

.dropdown__form .dropdown__item {
  appearance: none;
}

.dropdown__item:hover {
  background: var(--clr-indigo-alpha, #eef2ff);
  color: var(--clr-indigo, #4f46e5) !important;
}

.dropdown__item--danger {
  color: var(--clr-danger) !important;
}

.dropdown__item--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--clr-danger) !important;
}

/* Zamčená položka (např. akce jen pro admina) — zůstává vidět, ať je jasné, že
   funkce existuje, ale je neaktivní a bez hover reakce. */
.dropdown__item[disabled],
.dropdown__item:disabled {
  color: var(--clr-text-muted) !important;
  cursor: default;
}
.dropdown__item[disabled]:hover,
.dropdown__item:disabled:hover {
  background: transparent;
  color: var(--clr-text-muted) !important;
}

.actions-dropdown > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text-2);
  font-weight: 700;
  line-height: 1;
}

.actions-dropdown > summary:hover {
  color: var(--clr-indigo);
  border-color: var(--clr-indigo);
}

.actions-dropdown > summary:focus-visible {
  outline: none;
  color: var(--clr-indigo);
  border-color: var(--clr-indigo);
  box-shadow: 0 0 0 3px var(--clr-indigo-alpha);
}

/* ── Vysouvací výběr stavu (#219) ───────────────────────────────
   Chip stavu JE spouštěč dropdownu — žádný druhý ovládací prvek, stav zůstává
   tam, kde ho uživatel čte. Šipka je součástí chipu, ať je poznat, že je to
   ovladač a ne jen štítek. */
.status-dropdown > summary {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

.status-dropdown > summary:hover .te-tag-chip {
  filter: brightness(1.08);
}

.status-dropdown > summary:focus-visible {
  outline: 2px solid var(--clr-indigo);
  outline-offset: 2px;
}

.status-dropdown__caret {
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  border-left: 0.28rem solid transparent;
  border-right: 0.28rem solid transparent;
  border-top: 0.3rem solid currentColor;
  opacity: 0.85;
}

.status-dropdown[open] .status-dropdown__caret {
  transform: rotate(180deg);
}

/* Menu se zarovnává vlevo — chip stojí u názvu entity, ne u pravé hrany. */
.status-dropdown .dropdown__menu {
  right: auto;
  left: 0;
  min-width: 12rem;
}

.status-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-dropdown__item.is-current {
  font-weight: 700;
}

.status-dropdown__dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--tag-color);
}

/* Odvozený sufix za chip stavu firmy (#225, T-234): „aktivní (běží projekt)".
   Muted, oddělený pomlčkou — není klikací (chip mění status, tohle jen dopočítává).
   Tokeny → dark i light bez hexů. */
/* „Běží / neběží u firmy projekt" (#225, přepsáno T-416).
   Dan 2. 8. 2026: „_udělej record puntíkem se správnou barvou vedle, a zarovnán
   s, názvu_". Do R319 to byl tlumený TEXT za chipem stavu — nevešel se do řádku
   a na světlém podkladu propadal kontrastem (2,12:1, změřeno v T-415).

   ⚠️ Puntík kreslí PSEUDO-ELEMENT, ne znak v textu ani border — konvence
   z AGENTS.md („samostatný prázdný box ve stejné geometrii, typicky přes
   pseudo-element"). Element sám je prázdný; text nese `aria-label` + `title`
   (`role="img"`, viz helper), takže se pro čtečku nic neztratilo.

   ⚠️ `vertical-align` NE — řádek je `display:flex` s `align-items:center`
   (`.entity-card__title-row`), takže zarovnání s titulkem dělá flex. V tabulce
   je to inline kontext, proto `vertical-align: middle` jen tam (níž). */
.company-activity {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.company-activity::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--activity-dot, var(--clr-text-muted));
}

/* Barva podle stavu — oba tokeny se samy otočí v tmavém režimu. „Neběží"
   schválně NENÍ červená: je to klidový stav, ne chyba.

   ⚠️ Puntík je NOSITEL INFORMACE, takže musí splnit 3:1 proti podkladu
   (WCAG 1.4.11, netextový prvek). Změřeno v R319 proti bílé i proti nejsytějšímu
   entitnímu tintu, který v CSS je (16 %):
     success  #2e7d32 → 5,13 / 4,24 ✔   ·  dark #5cc46a → 7,07 / 5,04 ✔
     text-2   #64748b → 4,76 / 3,93 ✔   ·  dark #a4b1c6 ✔
   `--clr-text-muted` by NEPROŠEL (2,56 / 2,12 ve světlém) — je to týž token,
   který propadá i jako text, viz `T-415`. Nesahat sem po něm. */
.company-activity--active   { --activity-dot: var(--clr-success); }
.company-activity--inactive { --activity-dot: var(--clr-text-2); }

/* ── Aktivní puntík PULZUJE ZÁŘÍ (T-416) ───────────────────────────────────
   Dan 4. 8. 2026 doslova: „_Puntík doleva vedle jména a aktiovní pulsovat
   glow_". Pulzuje JEN aktivní stav — klidový šedý ne. Kdyby zářilo obojí,
   přestane to být informace a zbyde blikající seznam: pohyb má znamenat
   „tady se něco děje", a to je právě ta běžící zakázka.

   ⚠️ Záře je `box-shadow`, ne `width`/`transform`/`outline`:
   - `box-shadow` NEZABÍRÁ MÍSTO, takže puntík nehne řádkem názvu ani na kartě,
     ani v tabulce, ani v hlavičce panelu — a nic se nepřepočítává při každém
     snímku animace (kroužek u každé firmy ve výpisu by jinak byl layout thrash).
   - `outline` by nešel plynule rozpustit do průhledna a v dark módu by
     splynul s rámečkem karty.
   Barva se bere z `--activity-dot`, tedy z TÉHOŽ tokenu jako puntík sám —
   záře se odvozuje, nedá se rozejít s barvou stavu ani v dark módu.

   ⚠️ Předek nesmí mít `overflow: hidden`, jinak se kroužek ořízne. Dnes to
   sedí: `.entity-card` má `overflow: visible` schválně (kvůli kebab menu),
   `.entity-card__title-row` i `.company-preview-title-row` jsou obyčejné flexy. */
@keyframes company-activity-glow {
  0%   { box-shadow: 0 0 0 0      color-mix(in srgb, var(--activity-dot) 55%, transparent); }
  70%  { box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--activity-dot) 0%, transparent); }
  100% { box-shadow: 0 0 0 0      color-mix(in srgb, var(--activity-dot) 0%, transparent); }
}

.company-activity--active::before {
  animation: company-activity-glow 2.2s ease-out infinite;
}

/* Puntík zůstává čitelný i bez pohybu — barva nese informaci sama, pulz je
   jen zdůraznění. Vypnutí animace proto nic neubere. */
@media (prefers-reduced-motion: reduce) {
  .company-activity--active::before { animation: none; }
}

/* Tabulkový výpis je inline kontext (žádný flex), takže tam puntík srovnává
   `vertical-align` na střed písma. */
.entity-index-row .company-activity {
  vertical-align: middle;
}

/* ── Context menu (dropdown) ───────────────────────────────────── */
.context-menu {
  width: auto;
  min-width: 170px;
  padding: 0.3rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  /* Nad drawerem (.entity-index-right má z-index 50) i packou (60) — menu
     kontaktů se otevírá z panelu a nesmí skončit pod ním. */
  z-index: 70;
  font-size: 0.88rem;
}

.context-menu a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  text-decoration: none;
  transition: background 0.1s;
}

.context-menu a:hover {
  background: var(--clr-indigo-alpha);
  color: var(--clr-indigo);
}

.context-menu a.context-menu-danger {
  color: var(--clr-danger);
}

.context-menu a.context-menu-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--clr-danger);
}

.context-menu hr {
  margin: 0.3rem 0 !important;
  border-top: 1px solid var(--clr-border) !important;
}

.flash-message {
  position: fixed;
  inset: unset;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  margin: 0;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  max-width: min(90vw, 600px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.flash-message--leaving {
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
}

.flash-alert {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
}

.flash-notice {
  background: #d4edda;
  border: 1px solid #28a745;
  color: #155724;
}

.flash-close {
  background: transparent;
  border: none;
  border-radius: 4px;
  color: inherit;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  padding: 0.1rem 0.45rem;
  margin: 0;
  cursor: pointer;
  opacity: 0.65;
  box-shadow: none;
  transition: opacity 0.15s, background 0.15s;
}

.flash-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.form-errors {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
}

.form-errors ul {
  margin: 0.25rem 0 0 1rem;
  padding: 0;
}

/* ── Kartový seznam (entity-card) ────────────────────────────────────
   Sdílený vzhled kartového výpisu (kandidáti, firmy, pozice, projekty):
   náhled vlevo, tělo vpravo, patička s poslední aktivitou. Karta zároveň
   nese .entity-index-row (klávesnice, náhled, bulk-select ze
   split_view_table.js) — stavové styly (:hover/.is-active) řídí ta třída. */
/* Výpis karet: mřížka řízená šířkou levého výpisu (container entity-list), ne
   viewportem. Sloupce nejsou stropované — na velkých monitorech a při úzkém
   detail panelu smí vyrůst na 3+ sloupců, místo aby karty zbytečně tloustly.
   Přepínač v toolbaru přepne na tabulkový výpis. */
.entity-card-list {
  display: grid;
  /* Min šířka karty 22rem (T-250): vedle otevřeného panelu (list ~57 % okna)
     vychází na běžném širokém monitoru 2 širší karty místo 3 úzkých; plný
     viewport dál utáhne 3–4 sloupce. Držet ≥ 21.5rem, jinak se 1920px vrátí na 3
     sloupce (viz guard e2e cards_grid_min_width.spec.ts). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

/* Tabulkový výpis (druhý mód přepínače): karty se schovají, tabulka ukáže. */
.entity-index-table {
  display: none;
}

.entity-index-grid.is-table-view .entity-card-list {
  display: none;
}

.entity-index-grid.is-table-view .entity-index-table {
  display: table;
}

/* Kandidatury (T-246.2) — průřezový seznam nemá kartový mód (přepínač karty/
   tabulka jako pozice/firmy), takže se nepřepíná přes .is-table-view. Zdědí
   light styl .entity-index-table, ale je vidět vždy. (Pravidlo je za
   `.entity-index-table { display:none }` → při shodné specificitě vyhrává.) */
.applications-index-table {
  display: table;
}

/* Light tabulka výpisů — bez šedého headeru, jemnější linky než globální
   styl tabulek. */
.entity-index-table tr th {
  position: static;
  background: none;
  color: var(--clr-text-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  padding: 0.4rem 0.75rem;
}

.entity-index-table thead tr {
  border-bottom: 1px solid var(--clr-border);
}

/* Toolbar nad výpisem: vlevo „Označit vše" (+ bulk pruh u kandidátů), vpravo
   řazení a úplně napravo přepínač způsobu výpisu. */
.card-list-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.card-list-toolbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Vpravo (řazení + přepínač) — margin-left:auto ho drží u pravé hrany i když
   levá část chybí (firmy/projekty/pozice bez bulk výběru). */
.card-list-toolbar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* „Označit vše" — checkbox s popiskem místo osamoceného čtverečku. */
.bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clr-text-muted);
  cursor: pointer;
}

.bulk-select-all input {
  margin: 0;
}

/* Režim výběru (T-047): dokud uživatel neklikne „Vybrat", jsou zaškrtávátka
   (sloupec .col-check v kartě i v hlavičce tabulky) i „Označit vše" skryté —
   ať seznam není zaneřáděný checkboxy. Míří jen na výpisy, které split_view_table.js
   spravuje (přidá .has-bulk-mode); ostatní zůstávají beze změny. */
[data-bulk-scope].has-bulk-mode:not(.is-selecting) .col-check,
[data-bulk-scope].has-bulk-mode:not(.is-selecting) .bulk-select-all {
  display: none;
}

.card-list-layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  cursor: pointer;
}

.card-list-layout-toggle:hover {
  color: var(--clr-text);
}

/* margin:0 přebije owl flow margin (`* + *`), který druhé ikoně (tabulka) dával
   margin-top 1rem → seděla níž než první (mřížka). display:block ruší baseline
   mezeru. Obě ikony teď sedí identicky. Inline SVG (fill:currentColor) dědí
   barvu tlačítka (--clr-text-muted, na hover --clr-text) → viditelné v light
   i dark (T-226). Ikona bez opacity = stejná barva jako label vedle ní (dřívější
   opacity:0.5 byla vyladěná na natvrdo tmavý fill, s tokenem by ikonu v light
   režimu jen zesvětlila pod label). */
.card-list-layout-toggle svg {
  display: block;
  margin: 0;
}

/* Grid: avatar + identita nahoře vedle sebe, tagy celý řádek pod tím, poslední
   aktivita celý řádek úplně dole (pin ke spodní hraně přes 1fr mezeru → karty
   jsou stejně vysoké i bez kontaktu/tagů). Avatar je pevný obdélník. body má
   display:contents, takže main/tags/footer jsou přímé grid buňky. */
/* Karta = float layout: avatar plave vlevo, jméno/profese + kontakty obtékají
   nahoře, tagy tečou pod profesí vedle spodku avataru a přetečou pod něj.
   Poslední aktivita je clear:both pod vším. (Tabulkový view používá vlastní
   .entity-index-table, tady se neuplatní.) */
/* Kostra karty = grid: 1. řádek [avatar | identita+kontakt], 2. řádek [tagy přes
   celou šířku, flexuje 1fr], 3. řádek [poslední aktivita přes celou šířku].
   Prostřední 1fr řádek (tagy nebo prázdný spacer) natlačí aktivitu vždy dolů →
   karty s tagy i bez nich drží stejnou kostru. */
.entity-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "preview main"
    "tags    tags"
    "footer  footer";
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-base);
  row-gap: var(--space-sm);
  min-height: 9.5rem;
  padding: var(--space-base);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  --entity-card-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--entity-accent) 40%, transparent);
  box-shadow: var(--entity-card-shadow);
  transition: transform 0.12s ease-out;
}

/* Odlehčená karta bez avataru, bulk checkboxu i poznámky nemá prázdný
   preview sloupec ani jeho mezeru. */
.entity-card--without-preview {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "tags"
    "footer";
  column-gap: 0;
}

/* Otevřený kebab (⋮) i vysouvací stav (#219) musí „vylézt" z karty — jinak je
   overflow:hidden ořízne (stín, pravý okraj i spodní položky) a menu působí
   nalepené / rozbité. Po dobu otevření kartu odořízneme a zvedneme nad sousední
   karty. Selektor míří na KAŽDÝ otevřený dropdown v kartě, ať se na to nemusí
   myslet u další komponenty. */
.entity-card:has(details.dropdown[open]) {
  overflow: visible;
  z-index: 10;
}

/* Zdvih karty — na hover a trvale u zobrazené (panel) / vybrané (bulk).
   Transform nemění layout, mřížka zůstává na místě. */
.entity-card:hover,
.entity-card.is-active,
.entity-card.is-selected,
.entity-card:has(.col-check [data-bulk-item]:checked) {
  transform: translateY(-0.5rem);
}

/* Statická karta (T-101) = entita bez detailu i náhledu (aktivita). Nenese
   .entity-index-row, takže nemá kurzor ani fokus řádku; zdvih na hover se sundá
   taky, protože je to affordance kliku, který nikam nevede. Prokliky má karta
   uvnitř (autor, subjekt). */
.entity-card--static:hover {
  transform: none;
}

/* Profilovka; checkbox je absolutně v jejím levém horním rohu (nezabírá místo).
   Pevná výška (4.5rem obdélník), align-self:start = neroztahuje se do výšky karty. */
.entity-card__preview {
  grid-area: preview;
  align-self: start;
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
}

.entity-card__preview .col-check {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  width: auto;
  padding: 3px;
  line-height: 0;
  background: color-mix(in srgb, var(--clr-surface) 85%, transparent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entity-card__preview .col-check input {
  margin: 0;
  display: block;
}

/* Profilovka = fotka / silueta dle pohlaví / iniciály (fallback). Vyplní kartu. */
.entity-card__avatar {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--entity-accent) 14%, var(--clr-surface));
  border-radius: var(--radius-sm);
  color: var(--entity-accent);
  font-weight: 500;
  font-size: var(--fs-xl);
}

/* Fotka překryje siluetu; při selhání načtení se odstraní a prosvitne silueta. */
.entity-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0; /* zruší owl flow margin (je 2. potomek po siluetě), jinak by fotku srazil dolů */
  object-fit: cover;
}

/* Logo firmy (favicon webu) — celé viditelné na bílé, žádný cover ořez. */
.entity-card__photo--logo {
  object-fit: contain;
  background: #fff;
  padding: 22%;
  box-sizing: border-box;
}

/* Dark mód: podklad loga tlumenější než čistá bílá, ale pořád světlý —
   loga firem bývají tmavá na průhledném pozadí, na tmavém podkladu by zmizela
   (rozhodnutí Dan 16. 7. „tlumenější" ≠ tmavý, viz T-104). */
:root[data-theme="dark"] .entity-card__photo--logo {
  background: rgba(255, 255, 255, 0.85);
}

.entity-card__silhouette {
  width: 68%;
  height: 68%;
  object-fit: contain;
  opacity: 0.8;
}

/* CV indikace jako badge v pravém spodním rohu profilovky (nezabírá výšku). */
.entity-card__preview-note {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  color: var(--clr-indigo);
  background: color-mix(in srgb, var(--clr-surface) 85%, transparent);
  border-radius: 4px;
}

/* Tělo je jen obálka — display:contents rozpustí ho a jeho děti (main, footer)
   jsou přímo grid buňky karty (main vedle avataru, footer přes celý řádek dole). */
.entity-card__body {
  display: contents;
}

.entity-card__actions {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
}

.entity-card__actions .actions-dropdown > summary {
  width: 1.8rem;
  height: 1.8rem;
  background: color-mix(in srgb, var(--clr-surface) 92%, transparent);
}

.entity-card:has(.entity-card__actions) .entity-card__main {
  padding-right: 2.25rem;
}

/* První řádek: jméno/profese vlevo, kontakty zarovnané k pravé hraně karty;
   tagy pod nimi přes celou šířku. Na úzkém se kontakty zabalí pod identitu. */
.entity-card__main {
  grid-area: main;
  min-width: 0;
}

.entity-card__identity {
  flex: 0 1 auto;
  min-width: 0;
}

.entity-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.entity-card .candidates-index-name {
  font-size: var(--fs-md);
}

.entity-card__meta {
  font-size: var(--fs-base);
  color: var(--clr-text-2);
  margin-top: 0.25rem;
}

.entity-card__contact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.entity-card__contact a {
  color: inherit;
  text-decoration: none;
}

.entity-card__contact a:hover {
  text-decoration: underline;
}

/* Kontakt kandidáta (T-281, varianta A odsouhlasená Danem): e-mail + telefon
   nesedí pod jménem, ale v PRAVÉM sloupci karty — pravá polovina karty byla
   prázdná a karta zbytečně vysoká. V úzké kartě (panel, mobil) spadne zpátky
   pod identitu = dnešní podoba (viz @container níž). Ikona + hodnota, hodnota
   se ořezává, aby dlouhý e-mail nerozhodil sloupce. */
.entity-card__contact--aside {
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.35rem;
  min-width: 0;
}

.entity-card__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  color: inherit;
}

.entity-card__contact-link svg {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.65;
}

.entity-card__contact-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CTA „Zavolat" je vidět JEN na dotykovém zařízení (feedback_mobile_tel_buttons):
   na mobilu se na holé číslo kliká omylem, takže tam z odkazu uděláme tlačítko
   a číslo schováme (v kartě na mobilu stejně není místo). Desktop = číslo. */
.entity-card__phone-cta {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .entity-card__contact-link--phone {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    background: var(--clr-surface-alt);
  }

  .entity-card__contact-link--phone .entity-card__contact-value {
    display: none;
  }

  .entity-card__phone-cta {
    display: inline;
  }
}

.entity-card__contact--sticker {
  position: absolute;
  top: 3.45rem;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  width: min(18rem, 42%);
  max-width: calc(100% - 5.5rem);
  min-width: 0;
  margin: 0;
  padding: 0.55rem var(--space-base) 0.6rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--clr-indigo) 38%, var(--clr-border));
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: color-mix(in srgb, var(--clr-indigo) 14%, var(--clr-surface));
  text-align: left;
  overflow-wrap: anywhere;
  /* Nálepka je součást karty, ne vysouvací šuplík: hover zvedá celou kartu,
     její pravý inset ani transform se ale nemění. `right: -1px` spolu s pevnou
     min-width dřív dovolilo nálepce v úzké kartě přetéct a při přejezdu působit,
     jako by se schovávala doprava (T-290). */
  transform: none;
}

/* Karta kandidáta je vlastní size container (T-281) — kontakt se stěhuje doprava
   podle šířky KARTY, ne šířky výpisu: mřížka je auto-fit, takže široký výpis může
   nést i úzké karty (3 sloupce) a úzký výpis jednu širokou. `entity-list` (šířka
   levého sloupce) by proto rozhodovalo špatně.
   Úzká karta = výchozí stav (identita → kontakt → tagy pod sebou = dnešní podoba),
   širší karta si dvousloupec zapne v @container níž.
   Tělo karty kandidáta nese i tagy, takže „tags" řádek karty zůstává prázdný —
   proto má kandidátská karta o řádek kratší kostru (jinak by přebývala mezera). */
.entity-card--candidate {
  container: entity-card / inline-size;
  grid-template-areas:
    "preview main"
    "footer  footer";
  grid-template-rows: 1fr auto;
}

.entity-card--candidate .entity-card__main {
  display: block;
}

/* 30rem šířky karty = po odečtení avataru (4.5rem), paddingů a místa na kebab
   zbývá na tělo ~23rem: identita ~12rem + kontakt ~11rem, což utáhne běžný
   e-mail bez ořezu. Níž by se e-mail ořezával víc, než kolik místa se ušetří.
   Tagy jsou vlastní řádek pod OBĚMA sloupci (span) — kdyby zůstaly zavřené jen
   v levém sloupci, lámaly by se do tří řádků a karta by byla VYŠŠÍ než před
   změnou (změřeno: 223 px vs. 185 px na 1920). Takhle začínají pod jménem
   v levém sloupci a tečou pod kontakt = karta se naopak zkrátí. */
@container entity-card (min-width: 30rem) {
  .entity-card--candidate .entity-card__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      "identity contact"
      "tags     tags";
    column-gap: var(--space-base);
    align-items: start;
  }

  .entity-card--candidate .entity-card__identity {
    grid-area: identity;
  }

  .entity-card--candidate .entity-card__contact--aside {
    grid-area: contact;
    align-items: flex-end;
    margin-top: 0;
    text-align: right;
  }

  .entity-card--candidate .entity-card__main .entity-card__tags {
    margin-top: var(--space-sm);
  }
}

.entity-card--company .entity-card__main {
  display: block;
}

.entity-card--company .entity-card__identity {
  min-width: 0;
}

.entity-card--company:has(.entity-card__contact--sticker) {
  min-height: 11rem;
}

.entity-card__contact-name {
  font-weight: 600;
}

.entity-card__contact-role {
  color: var(--clr-text-2);
  font-size: var(--fs-xs);
}

@container entity-list (max-width: 36rem) {
  .entity-card--company {
    min-height: 12.5rem;
  }

  .entity-card__contact--sticker {
    top: 5.35rem;
    width: calc(100% - 4.5rem - var(--space-base));
    max-width: none;
    min-width: 0;
  }
}

/* Tagy = vlastní řádek pod avatarem i identitou/kontakty, nad poslední aktivitou
   (grid-area tags přes obě sloupce). align-self:start → chipy sedí nahoře, zbytek
   1fr řádku je flexibilní výplň, co tlačí aktivitu dolů. */
.entity-card__tags {
  grid-area: tags;
  align-self: start;
  min-width: 0;
}

/* T-281: v kartě kandidáta tagy nejsou řádek KARTY, ale řádek TĚLA (jsou uvnitř
   .entity-card__main hned pod identitou i kontaktem) — v úzké kartě prostě tečou
   za kontaktem, v široké mají vlastní řádek přes oba sloupce (viz @container).
   `grid-area: tags` výš tím míří na mřížku těla, ne karty. */
.entity-card__main > .entity-card__tags {
  margin-top: 0.4rem;
}

.entity-card__tags .te-tag-list {
  gap: 0.3rem;
}

/* Menší tagy v kartě (Dan) — kompaktnější než výchozí .te-tag-chip. */
.entity-card__tags .te-tag-chip {
  font-size: 0.7rem;
  padding: 0.03rem 0.45rem;
}

.entity-card__tags .te-tag-chip__name {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Poslední aktivita = celý řádek dole přes obě sloupce (pod avatarem i identitou),
   oddělená linkou. min-height drží stejnou výšku i pro placeholder „Zatím žádná
   aktivita" jako pro reálnou aktivitu s chipem → karty mají identickou kostru. */
.entity-card__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  min-height: 2.15rem;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--clr-border);
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
}

.entity-card__activity-note {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--clr-text-muted);
}

/* Řadicí lišta nad kartovým seznamem (náhrada za klikací hlavičky tabulky). */
.card-list-sort {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
}

.card-list-sort__label {
  color: var(--clr-text-muted);
}

.card-list-sort a {
  color: var(--clr-text);
  text-decoration: none;
}

.card-list-sort a:hover {
  text-decoration: underline;
}

/* T-338: souhrn výkazů („Celkem v aktuálním filtru") stojí v jednom řádku
   s řazením, takže si vypíná vlastní spodní mezeru — tu drží toolbar.
   `!important` je tu nutné zlo, protože ho `.list-summary` má v základu taky
   (a bez něj by ho v tomhle kontextu nepřebilo nic pod specificitou 0,2,0). */
.card-list-toolbar > .list-summary {
  margin: 0 !important;
}

/* Svislý předěl mezi listem a detailem — plná výška, tažením mění šířku pravé
   sekce. Uprostřed úchop (dva pruhy). */
/* Předěl mezi půlkami: jen tenká svislá přerušovaná čára (o chlup šedivější
   než pozadí stránky), sám sloupec je průhledný → prosvítá pozadí. */
.pane-resize-handle {
  position: relative;
  cursor: col-resize;
  background: transparent;
}

.pane-resize-handle::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  border-left: 2px dashed var(--clr-divider, #cbd3de);
}

/* Madlo uprostřed = pilulka v barvě pozadí (přeruší čáru) s jednoduchým
   grip tvarem v barvě čáry. */
.pane-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 38px;
  border-radius: 8px;
  background:
    var(--clr-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='26'%3E%3Cg fill='%23cbd3de'%3E%3Ccircle cx='5.5' cy='7' r='1.7'/%3E%3Ccircle cx='5.5' cy='13' r='1.7'/%3E%3Ccircle cx='5.5' cy='19' r='1.7'/%3E%3C/g%3E%3C/svg%3E")
    center / 11px 26px no-repeat;
}

.pane-resize-handle:hover::before {
  border-left-color: var(--clr-indigo);
}

.pane-resize-handle:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='26'%3E%3Cg fill='%236366f1'%3E%3Ccircle cx='5.5' cy='7' r='1.7'/%3E%3Ccircle cx='5.5' cy='13' r='1.7'/%3E%3Ccircle cx='5.5' cy='19' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
}

body.is-col-resizing {
  cursor: col-resize;
  user-select: none;
}

/* Během tažení vypni interakci s obsahem (výběr textu, drag obrázku, pohlcení
   myši iframem CV náhledu), ať je změna šířky plynulá i nad drawerem. */
body.is-col-resizing .entity-index-right,
body.is-col-resizing .entity-index-left {
  pointer-events: none;
}

/* ── Kandidáti: split-view index ─────────────────────────────────── */
.candidates-index-toolbar {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

/* Sjednocený filter row pod h1 — kompaktní horizontální flex-wrap, jen
   placeholdery (žádné labely). Používá ho shared/_index_filter partial. */
.index-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin: 0.5rem 0 1rem;
}

.index-filter input,
.index-filter select {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

/* Datum od/do drží pohromadě jako jeden celek — na užších displejích spadnou
   na další řádek společně, nikdy se nerozdělí přes dva řádky. */
.index-filter__daterange {
  display: flex;
  gap: 0.3rem;
}

/* Fulltext + „Hledat" + „Zrušit" — týž vzor jako daterange výše (T-342, Dan
   30. 7. 2026: „_tyhle tri nikdy nezalamuj_"). V DOM stojí až za všemi filtry,
   takže jsou na konci řady; jako jeden flex item se ta trojice na užším
   displeji zalomí SPOLEČNĚ a nikdy se nerozdělí mezi sebou.
   `align-items: center` drží dnešní zarovnání — bez něj by se `stretch`
   natáhl button i odkaz „Zrušit" na výšku inputu. */
.index-filter__search {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

/* Tag picker rozložíme v rámci filtru: search input zůstane na hlavním
   řádku, vybrané chipy spadnou pod celý filtr na nový řádek (flex order
   + flex-basis 100% donutí wrap). */
.index-filter .te-tags {
  display: contents;
}

/* Tag picker v filtru: pevná šířka (nepřeskakuje při fokusu), ať se celý filtr
   vejde na jeden řádek. Dlouhé názvy skupin v dropdownu řeší middle-ellipsis. */
.index-filter .te-tags__search {
  position: relative;
  min-width: 12rem;
}

.index-filter .te-tags__selected {
  order: 99;
  flex-basis: 100%;
  margin-top: 0.2rem;
}

.index-filter .te-tags__selected:empty {
  display: none;
}

/* Stálý dvoupanel (po vzoru editace): full-bleed přes page-wrap, vlevo světlá
   sekce s listem + hlavičkou + filtry, uprostřed táhací svislý předěl, vpravo
   šedá sekce s detailem. Obě strany scrollují uvnitř; šířku pravé drží
   --drawer-width (mění předěl, ukládá localStorage). Obě strany se přizpůsobují
   přes container query (list = entity-list, detail = entity-drawer). */
.page-wrap:has(.entity-index-grid) {
  padding: 0;
  background: transparent;
  min-height: 0;
}

/* Žádný obalový box — obě půlky „plavou" přímo na šedém pozadí stránky
   (main = --clr-bg). Levá je jeden bílý box, pravá je víc boxů. Mezi nimi
   prosvítá pozadí a leží tam předěl (viz .pane-resize-handle). */
.entity-index-grid {
  /* Levý list má minimum (pohodlná karta bez sesypání vnitřku + místo na filtry).
     Panel ho tažením zužuje jen po tuhle hranici (karty přitom padají 3→2→1
     sloupec); za ní přepne na overlay a plave přes list, místo aby ho drtil (viz
     .is-drawer-overlay + JS). Pozn.: --list-min + packa + panel-min (22rem) se
     musí vejít nad bodem zalomení do stacku (820px), jinak grid přeteče. */
  --list-min: 27rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--list-min), 1fr) 22px minmax(22rem, var(--drawer-width, 40%));
  height: calc(100vh - var(--header-h) - 2rem);
}

/* Overlay režim: list zůstane na svém minimu, panel přes něj plave zprava a packa
   drží na jeho levé hraně. Přepíná split_view_table.js, jakmile by panel jinak
   stlačil list pod minimum. */
.entity-index-grid.is-drawer-overlay {
  grid-template-columns: var(--list-min) 0 0;
}
.entity-index-grid.is-drawer-overlay .entity-index-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--drawer-width);
  padding-left: 1rem;
  background: var(--clr-bg);
  box-shadow: var(--shadow-drawer);
  z-index: 40;
}
.entity-index-grid.is-drawer-overlay .pane-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--drawer-width);
  width: 22px;
  z-index: 41;
}

/* Levá světlá sekce = list; scrolluje uvnitř. Je container — počet sloupců
   karet se řídí JEHO šířkou (viz @container u .entity-card-list). Tažením
   předělu se zúží → mřížka spadne na míň sloupců. */
.entity-index-left {
  min-width: 0;
  overflow-y: auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem 1.75rem;
  container: entity-list / inline-size;
}

/* Vizitka: jméno jako primární odkaz (→ detail), pod ním pozice a kontakt
   (e-mail/telefon). Nikdy se nezalamuje ani nezkracuje. */
.col-vizitka {
  white-space: nowrap;
}

.candidates-index-name {
  font-weight: 500;
  text-decoration: none;
}

.candidates-index-name:hover {
  text-decoration: underline;
}

.candidates-index-vizitka-role {
  font-size: 0.85rem;
  color: var(--clr-text-2);
}

.candidates-index-table {
  width: 100%;
}

.entity-index-row {
  cursor: pointer;
  outline: none;
}

.entity-index-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* :focus-visible, ne :focus — po kliku myší zůstává řádek/karta fokusovaná
   a plné :focus by drželo indigo pozadí i po odznačení (#160). */
.entity-index-row:focus-visible {
  background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08));
  box-shadow: var(--shadow-active-row);
}

/* Aktivní (zobrazený) tabulkový řádek. Vnější záře (box-shadow na <tr>) se v
   tabulce ořezává buňkami — a přes zebru prosvítá jen u lichých řádků, což mate.
   Proto v tabulce žádný glow: čisté indigo pozadí na buňkách (přebije zebru) +
   levý accent proužek na první buňce. Záři má jen karta (blok, neořezává se). */
.entity-index-row.is-active > td {
  background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08));
}
.entity-index-row.is-active > td:first-child {
  box-shadow: var(--shadow-active-row);
}

/* ── T-357 — „tenhle úkol jsi ještě neviděl" ────────────────────────────────
   Třídu nasazuje `task_highlight.js` podle `data-task-created-at` vs. „viděno"
   v localStorage; server ji nerenderuje nikdy (bez JS = bez highlightu).

   ⚠️ PROČ PRSTEN A NE TÓNOVANÁ PLOCHA (změřeno v prohlížeči, ne odhad):
   plocha karty i řádku úkolu už PATŘÍ PRIORITĚ (`--task-priority-bg`, viz blok
   `.task-priority-*` níž) a nad ní se skládají další stavy — `is-closed`
   (zelená), `is-active`, `is-selected`. První verze tohohle pravidla dávala
   tónované pozadí jako `T-287`; v měření vyšlo nové i staré kartě STEJNÉ
   pozadí, protože `.entity-card.task-priority-*` má stejnou specificitu a je
   v souboru níž. A i kdyby vyhrálo, přebilo by prioritní barvu — tedy Danův
   vlastní signál. Prsten se do téhle skládačky nemíchá: `outline` na kartě
   ani na řádku úkolu nikdo jiný nenastavuje, takže „nové" a „hoří" můžou
   platit současně.

   Odstín zůstává tlumená primary (`--clr-indigo`) z `T-287`/`T-290` — žádný
   třetí odstín, jen jiný nosič. `outline-offset: -2px` kreslí dovnitř, aby
   prsten přežil `overflow: hidden` karty a nerozšířil řádek tabulky. */
.entity-card.is-new-task,
.tasks-index-row.is-new-task {
  outline: 2px solid color-mix(in srgb, var(--clr-indigo) 55%, transparent);
  outline-offset: -2px;
}

/* ── Stavy karty a řádku (zobrazené / vybrané) ─────────────────────
   Dvě zvýraznění:
   • „zobrazené" (.is-active) = položka otevřená v panelu → ZÁŘE (glow) kolem
     boxu + tón pozadí V BARVĚ ENTITY (--entity-accent z kanonické mapy sekcí,
     T-242: firma teal, kandidát amber, zakázka purple, pozice violet).
   • „vybrané" (.is-selected / zaškrtnutý bulk checkbox) = SYTĚ indigo výplň +
     bílý text, ať je na první pohled jasné, co mám vybrané.
   Stavy se sčítají; „vybrané" (solid) přebíjí barvu, „zobrazené" přidá záři okolo.
   Platí pro kartu (.entity-card) i tabulkový řádek (.entity-index-row — bez
   data atributů padá accent na indigo). */

/* Barvu karty dle typu entity bere z KANONICKÉ mapy sekcí (T-242) — táž barva,
   jakou má entita v primární nav. Do R255 tu byla druhá, vlastní paleta
   (kandidát modrá / firma zelená / zakázka amber) a Danovi se v UI rozcházela
   s nav; sjednoceno na nav paletu, Kandidáti = amber. Efekt zůstává plný
   (tint pozadí + záře + accent avataru), nikdy jednostranný proužek (INV-11). */
.entity-card[data-candidate-id] { --entity-accent: var(--entity-candidates); }
.entity-card[data-company-id]   { --entity-accent: var(--entity-companies); }
.entity-card[data-project-id]   { --entity-accent: var(--entity-projects); }
.entity-card[data-position-id]  { --entity-accent: var(--entity-positions); }
.entity-card[data-user-id]      { --entity-accent: var(--entity-users); }
.entity-card[data-invoice-id]   { --entity-accent: var(--entity-invoices); }
.entity-card[data-activity-id]  { --entity-accent: var(--entity-activities); }
.entity-card[data-time_entry-id] { --entity-accent: var(--entity-time_entries); }
.entity-card[data-note-id]      { --entity-accent: var(--entity-notes); }
/* Úkol je jediná entita, kterou nebarví TYP, ale PRIORITA (a po termínu
   `--clr-danger`) — Danovo zadání v `T-249`. Proto nečte kanonickou mapu. */
.entity-card[data-task-id]      { --entity-accent: var(--task-priority-accent, #64748b); }
.entity-card { --entity-accent: var(--clr-indigo); }

/* Tokeny záře (glow) — silný rozptyl i opacita, aby otevřená položka „zářila".
   Záře táhne na barvu entity (--sel-accent); syté „vybrané" zůstává indigo
   (--sel-indigo). */
.entity-card,
.entity-index-row {
  --sel-indigo:       var(--clr-indigo, #6366f1);
  --sel-accent:       var(--entity-accent, var(--clr-indigo, #6366f1));
  --glow-accent:      0 0 0 3px color-mix(in srgb, var(--sel-accent) 35%, transparent),
                      0 6px 22px color-mix(in srgb, var(--sel-accent) 45%, transparent);
}

/* „ZOBRAZENÉ" = otevřené v panelu (JEN JEDNO). Záře kolem celého boxu v barvě
   entity (bez barevného proužku — ten se tloukl se zářemi). Přebíjí .is-active
   řádku. */
.entity-card.is-active {
  background: color-mix(in srgb, var(--sel-accent) 7%, var(--clr-surface));
  border-color: var(--clr-border);
  box-shadow: var(--entity-card-shadow), var(--glow-accent);
}
.entity-card.is-active .entity-card__avatar {
  background: color-mix(in srgb, var(--entity-accent) 16%, var(--clr-surface));
  color: var(--entity-accent);
}

/* „PŘIŠPENDLENÉ" (.is-pinned) — TŘETÍ, na ostatních dvou nezávislý stav
   (T-282.6 a7, Dan 2. 8.: „na jeho kartě není vidět, že je přišpendlený").
   Třídu dopisuje `entity_selection.js` ze sessionStorage; server ji nezná
   (INV-282-A).
   ⚠️ Proč špendlík v rohu, a ne barva/rám: „zobrazené" už zabralo záři a tint,
   „vybrané" sytou indigo výplň — a všechny tři stavy mohou nastat NARÁZ na téže
   kartě. Čtvrtá barevná vrstva by byla nečitelná; ikona nese význam sama
   a přežije i pod indigo výplní (dědí barvu textu). Barevný proužek je navíc
   zakázaný (INV-11 + konvence v AGENTS.md).
   Maska místo `icon('pin')`: karta se vykresluje serverem bez znalosti stavu,
   takže značka musí být čistě v CSS. Tvar je 1:1 `app/assets/images/icons/pin.svg`. */
/* ⚠️ Poloha: VLEVO nahoře, ne vpravo — vpravo nahoře sedí kebab (`⋮`) a značka
   se pod ním schovala (změřeno na screenshotu při realizaci). Vlevo je roh
   náhledu/avataru, kde funguje jako badge a nic nepřekrývá. */
.entity-card.is-pinned::after,
.entity-index-row.is-pinned > td:first-child::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 0.95rem;
  height: 0.95rem;
  background-color: var(--sel-accent);
  -webkit-mask: var(--pin-mask) center / contain no-repeat;
  mask: var(--pin-mask) center / contain no-repeat;
  pointer-events: none;
}
.entity-card,
.entity-index-row {
  --pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.4 3.1 16.9 7.6M13.6 4.3 9.9 8l-3.4.6a1 1 0 0 0-.5 1.7l3.7 3.7a1 1 0 0 0 1.7-.5l.6-3.4 3.7-3.7M8.6 11.4l-4.5 4.5' stroke='%23000' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Řádek tabulky nemá `position: relative` (na `<tr>` se pseudo-element chytá
   nespolehlivě) — kotvíme na první buňku. */
.entity-index-row.is-pinned > td:first-child { position: relative; }
/* Pod sytou indigo výplní „vybraného" musí špendlík zesvětlat, jinak zmizí. */
.entity-card.is-pinned.is-selected::after,
.entity-card.is-pinned:has(.col-check [data-bulk-item]:checked)::after,
.entity-index-row.is-pinned.is-selected > td:first-child::after,
.entity-index-row.is-pinned:has(> .col-check [data-bulk-item]:checked) > td:first-child::after {
  background-color: #fff;
}

/* „VYBRANÉ" (bulk) — sytě indigo výplň + bílý text. Chytá se BUĎ přes explicitní
   .is-selected (styleguide / budoucí JS), NEBO reálně přes zaškrtnutý checkbox
   uvnitř řádku ([data-bulk-item]:checked) — JS jen přepíná .checked, ne třídu. */
.entity-card.is-selected,
.entity-card:has(.col-check [data-bulk-item]:checked),
.entity-index-row.is-selected,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) {
  background: var(--sel-indigo);
  border-color: var(--clr-border);
  color: #fff;
}

/* Text a odkazy uvnitř vybrané položky na bílo (na indigo výplni). Sekundární
   údaje jemně poloprůhledné, ať zůstane hierarchie. */
.entity-card.is-selected,
.entity-card.is-selected a,
.entity-card.is-selected .row-primary-link,
.entity-card.is-selected .candidates-index-name,
.entity-card:has(.col-check [data-bulk-item]:checked),
.entity-card:has(.col-check [data-bulk-item]:checked) a,
.entity-card:has(.col-check [data-bulk-item]:checked) .row-primary-link,
.entity-card:has(.col-check [data-bulk-item]:checked) .candidates-index-name,
.entity-index-row.is-selected,
.entity-index-row.is-selected a,
.entity-index-row.is-selected .row-primary-link,
.entity-index-row.is-selected .candidates-index-name,
.entity-index-row:has(> .col-check [data-bulk-item]:checked),
.entity-index-row:has(> .col-check [data-bulk-item]:checked) a,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .row-primary-link,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-name {
  color: #fff;
}
.entity-card.is-selected .entity-card__meta,
.entity-card.is-selected .entity-card__contact,
.entity-card.is-selected .entity-card__contact-role,
.entity-card.is-selected .entity-card__footer,
.entity-card.is-selected .entity-card__activity-note,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__meta,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__contact,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__contact-role,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__footer,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__activity-note,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-vizitka-role,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-contact-sub,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-activity,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .candidates-index-activity-note {
  color: rgba(255, 255, 255, 0.82);
}

/* VYBRANÉ v tabulce: indigo výplň musí sednout na buňky (<td>), jinak ji přebije
   zebra (tr:nth-child(even) td) → světlé pozadí + bílý text = nečitelné na sudých. */
.entity-index-row.is-selected > td,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) > td {
  background: var(--sel-indigo);
  border-color: color-mix(in srgb, var(--sel-indigo) 78%, #000);
}

/* Zelený „● v řízení" příznak na indigo výplni zaniká — na bílo, když je vybráno. */
.entity-card.is-selected .cand-index-rizeni,
.entity-card:has(.col-check [data-bulk-item]:checked) .cand-index-rizeni,
.entity-index-row.is-selected .cand-index-rizeni,
.entity-index-row:has(> .col-check [data-bulk-item]:checked) .cand-index-rizeni {
  color: #fff;
}
/* Oddělovací linka patičky i avatar/foto ať na sytém pozadí neruší. */
.entity-card.is-selected .entity-card__footer,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__footer {
  border-top-color: rgba(255, 255, 255, 0.28);
}
.entity-card.is-selected .entity-card__avatar,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__avatar {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.entity-card.is-selected .entity-card__contact--sticker,
.entity-card:has(.col-check [data-bulk-item]:checked) .entity-card__contact--sticker {
  right: 0;
  background: #fff;
  color: var(--clr-indigo);
  border-color: #fff;
  box-shadow: none;
}

/* „ZOBRAZENÉ + VYBRANÉ" současně = sytá indigo výplň (z pravidla výše) plus
   záře v barvě entity okolo (že je zároveň otevřené v panelu). Nejvýraznější stav. */
.entity-card.is-active.is-selected,
.entity-card.is-active:has(.col-check [data-bulk-item]:checked) {
  box-shadow: var(--entity-card-shadow), var(--glow-accent);
}

.entity-index-row.is-active.is-selected,
.entity-index-row.is-active:has(> .col-check [data-bulk-item]:checked) {
  box-shadow: var(--glow-accent);
}

/* Referenční čip — nejmenší forma karty (avatar + jméno) pro vazby
   v panelech/dialozích. Typ entity nese barva rámu/avataru + title. */
.entity-chip {
  --entity-accent: var(--clr-indigo);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.2rem 0.7rem 0.2rem 0.25rem;
  background: var(--clr-surface);
  border: 1px solid color-mix(in srgb, var(--entity-accent) 45%, var(--clr-border));
  border-radius: 999px;
  font-size: var(--fs-sm);
}
/* Barvy typů jdou ze stejné KANONICKÉ mapy jako karta i nav (T-242) — chip
   a karta téže entity nesmí svítit jinou barvou (u sytého facepile kolečka to
   bylo vidět na první pohled, T-280 kolo 2). `T-249` mapu dotáhl na VŠECHNY
   typy, které `entity_chip` umí vyrobit (`data-<singular>` z model_name) —
   kromě „úkolu", který barví priorita, ne typ, a padá tu na indigo fallback. */
.entity-chip[data-candidate] { --entity-accent: var(--entity-candidates); }
.entity-chip[data-company]  { --entity-accent: var(--entity-companies); }
.entity-chip[data-project]  { --entity-accent: var(--entity-projects); }
.entity-chip[data-position] { --entity-accent: var(--entity-positions); }
.entity-chip[data-application] { --entity-accent: var(--entity-applications); }
.entity-chip[data-user]     { --entity-accent: var(--entity-users); }
.entity-chip[data-invoice]  { --entity-accent: var(--entity-invoices); }
.entity-chip[data-activity] { --entity-accent: var(--entity-activities); }
.entity-chip[data-time_entry] { --entity-accent: var(--entity-time_entries); }
.entity-chip[data-note]     { --entity-accent: var(--entity-notes); }
.entity-chip__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--entity-accent) 16%, var(--clr-surface));
  color: var(--entity-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.entity-chip__name { font-weight: 500; }
.entity-chip--holding,
.entity-chip--holding:visited {
  color: var(--clr-text);
  text-decoration: none;
}
.entity-chip--holding:hover {
  border-color: var(--entity-accent);
  background: color-mix(in srgb, var(--entity-accent) 8%, var(--clr-surface));
}
/* Výpis členských firem holdingu v panelu (T-276) — víc entity-chipů vedle sebe,
   zalamují se s mezerou. Chip zůstává sdílená .entity-chip (INV-10), wrapper
   řeší jen rozložení. */
.entity-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Stack chipů (T-228): víc entity-chipů přes sebe jako vějíř karet — pro kompaktní
   výpisy vazeb (tabulka i karta úkolu) místo dřívějšího „+N". Opakní pozadí chipu
   (.entity-chip má --clr-surface) dělá překryv „kartový". Hover/fokus vytáhne chip
   nahoru (z-index) a nadzvedne → jde přečíst i kliknout; celé zůstává V BUŇCE
   (nadřazená buňka má overflow:hidden, Danův pokyn „nerozlévat mimo buňku"). Chip
   je sdílená komponenta — stack řeší jen obal, ne zásah do chipu (INV-10). */
.chip-stack {
  --facepile-size: 2rem;   /* průměr kolečka — jedno číslo pro kartu i tabulku */
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  isolation: isolate;      /* vlastní z-index kontext, ať zvednutý chip nepřeleze do jiného UI */
  padding-block: 0.15rem;  /* prostor pro nadzvednutí, ať ho buňka neořízne shora */
}
.chip-stack > .entity-chip:not(:first-child) {
  /* Překryv → kaskáda avatarů. T-280 ho zmenšil z -0.85rem: sbalený chip je jen
     kolečko s iniciálami, a při -0.85rem zbylo z „AČ" vidět jen „A(" — iniciály
     jsou přitom jediný rozlišovací znak sbaleného chipu.
     -0.5rem = ~⅔ kolečka vidět, což je běžný poměr facepile (Dan odklepl). */
  margin-left: -0.5rem;
}
.chip-stack .entity-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Facepile (T-280): ve stacku je KAŽDÝ chip jen kulaté kolečko s iniciálami —
   po Danově verify (26. 7.) se sbaluje i VRCHNÍ chip, plná pilulka nezůstává
   nikde. Důvod: v úzké buňce tabulky si pilulka ukusovala z titulku úkolu.
   Jméno má nulovou šířku (`overflow:hidden` výš ho ořízne) a vydá ho až
   hover/fokus; NE `display:none` — odkaz uvnitř `__name` zůstává ve stromu,
   takže `:focus-within` funguje z klávesnice.
   Kolečko je proti kolu 1 VĚTŠÍ a SYTĚ BAREVNÉ (Danův pokyn): avatar nese plnou
   barvu typu entity místo 16% tónu, bílé tučné iniciály a 2px prstenec v barvě
   podkladu, který v překryvu odděluje sousední kolečka (klasický facepile).
   Prstenec kreslí `box-shadow`, takže nezvětšuje box — padding chipu (0.125rem)
   je přesně na něj, aby chip zůstal kruh. */
.chip-stack > .entity-chip {
  position: relative;
  gap: 0;
  padding: 0.125rem;       /* místo přesně na prstenec avataru → chip je kruh */
  background: transparent; /* kolečko nese barvu samo, pilulka pod ním není */
  border-color: transparent;
  /* Když se stack tlačí do úzké buňky, chipy se SMRSKNOU (flex-shrink 1, min-width 0),
     ale kolečko uvnitř má pevnou velikost → z toho vznikne hustší překryv, ne ovál.
     Vrchní (poslední) chip se nesmršťuje, takže pravá hrana stacku = pravá hrana
     posledního kolečka a facepile se nikdy nevysype přes titulek úkolu. */
  flex: 0 1 auto;
  min-width: 0;
  transition: transform 120ms ease, box-shadow 120ms ease, gap 140ms ease,
              padding 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.chip-stack > .entity-chip:last-child { flex: 0 0 auto; }
.chip-stack > .entity-chip > .entity-chip__avatar {
  width: var(--facepile-size);
  height: var(--facepile-size);
  flex: 0 0 auto;          /* iniciály drží kruh i když se stack tlačí do úzké buňky */
  /* Sytá barva typu entity ztmavená o 18 % k tmavé — bílé iniciály na ní mají
     kontrast ≥ 3:1 i na nejsvětlejším akcentu (amber #f59e0b); čistý akcent by
     u zelené/amber spadl pod 2,6:1 a iniciály jsou u sbaleného chipu jediný
     rozlišovací znak. Prstenec je v barvě podkladu, ne bílý → sedí i v dark. */
  background: color-mix(in srgb, var(--entity-accent) 82%, #0b1220);
  color: #fff;
  font-size: calc(var(--facepile-size) * 0.375);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--clr-surface);
}
.chip-stack > .entity-chip > .entity-chip__name {
  max-width: 0;
  opacity: 0;
  transition: max-width 140ms ease, opacity 120ms ease;
}
.chip-stack > .entity-chip:hover,
.chip-stack > .entity-chip:focus-within {
  z-index: 3;              /* přeskládá se nahoru přes sousedy */
  transform: translateY(-0.15rem);
  gap: var(--space-sm);
  padding-right: 0.7rem;   /* kolečko + jméno = pilulka jen po dobu hoveru */
  /* Rozbalený chip se NESMRSKNE — jinak by ho v úzké buňce tabulky flex zase
     stlačil na kolečko a jméno by se neukázalo (změřeno: šířka jména 0 px).
     Smí proto přetéct přes titulek; buňka má overflow:hidden, takže se nerozlije
     do sousedních sloupců. Danem odklepnuto 26. 7. */
  flex: 0 0 auto;
  background: var(--clr-surface);
  border-color: color-mix(in srgb, var(--entity-accent) 45%, var(--clr-border));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--clr-text) 18%, transparent);
}
.chip-stack > .entity-chip:hover > .entity-chip__name,
.chip-stack > .entity-chip:focus-within > .entity-chip__name {
  max-width: 12rem;
  opacity: 1;
}

/* Sloučený role-chip filtru úkolů (T-164.3) — vybraný člověk vedle titulku se
   svojí rolí. Tři rozlišitelné stavy nese jednak text (`__role`), jednak barevný
   akcent `--role-accent`: řešitel = indigo, zadavatel = amber, oba = zelená.
   Základ (avatar + jméno) je 1:1 s `.entity-chip`, avatar se barví přes sdílený
   `--entity-accent`. Neutrální pilulka bez barvy (typ nese role, ne barva jména). */
.people-role-chip {
  --role-accent: var(--clr-indigo);
  --entity-accent: var(--role-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.2rem 0.35rem 0.2rem 0.25rem;
  background: var(--clr-surface);
  border: 1px solid color-mix(in srgb, var(--role-accent) 45%, var(--clr-border));
  border-radius: 999px;
  font-size: var(--fs-sm);
}
.people-role-chip--solver  { --role-accent: var(--clr-indigo); }
.people-role-chip--creator { --role-accent: #f59e0b; }
.people-role-chip--both    { --role-accent: #10b981; }
.people-role-chip__name { font-weight: 500; }
.people-role-chip__role {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--role-accent);
  background: color-mix(in srgb, var(--role-accent) 14%, var(--clr-surface));
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.people-role-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  text-decoration: none;
  color: var(--clr-text-muted);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.75;
}
.people-role-chip__remove:hover {
  opacity: 1;
  color: var(--role-accent);
  background: color-mix(in srgb, var(--role-accent) 16%, transparent);
}

/* Chip aktivního filtru uživatele za titulkem výpisu (T-259) — Firmy (zodpovědný)
   a Projekty (řešitel). Sám chip je nedotčená sdílená `.entity-chip` (avatar +
   jméno, INV-10); obal `.filter-chip` jen přisadí × na zrušení filtru a drží je
   na baseline vedle titulku/breadcrumbu. Žádný jednostranný barevný border (T-243). */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  vertical-align: middle;
}
.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  text-decoration: none;
  color: var(--clr-text-muted);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.75;
}
.filter-chip__remove:hover {
  opacity: 1;
  color: var(--clr-indigo);
  background: color-mix(in srgb, var(--clr-indigo) 16%, transparent);
}

/* Fork (b): pickery řešitele/zadavatele ve filtru úkolů svoje inline pilulky
   skryjí — jediné zobrazení výběru jsou sloučené role-chipy u titulku (výše).
   Scoped na filtr úkolů: styleguide ani ostatní `_multiselect`y beze změny.
   Skrývá jen vizuální chip list, hidden inputy (`data-te-inputs`) se nesou dál. */
.tasks-index-left .te-tags[data-input-name="user_id[]"] > .te-tags__selected,
.tasks-index-left .te-tags[data-input-name="creator_id[]"] > .te-tags__selected {
  display: none;
}

/* Karta vazby úkolu (T-026; kartová podoba 26. 7.) — u kandidáta
   telefon/e-mail/CV, u firmy kontakt a poslední komunikace (karty aktivit)
   rovnou v úkolu. Hlavička = kompaktní karta entity: kulatý avatar s barvou
   typu + název + chip typu vpravo; tatáž vizuální řeč jako .entity-card,
   žádný barevný proužek (INV-11). Akcenty bere z KANONICKÉ mapy sekcí (T-242),
   stejně jako .entity-card a .entity-chip (data atributy bez -id — viz
   entity_chip helper). */
.task-taskable {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.task-taskable + .task-taskable { margin-top: var(--space-md); }
.task-taskable[data-candidate]   { --entity-accent: var(--entity-candidates); }
.task-taskable[data-company]     { --entity-accent: var(--entity-companies); }
.task-taskable[data-project]     { --entity-accent: var(--entity-projects); }
.task-taskable[data-position]    { --entity-accent: var(--entity-positions); }
.task-taskable[data-application] { --entity-accent: var(--entity-applications); }
.task-taskable__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.task-taskable__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--entity-accent, var(--clr-indigo));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.task-taskable__name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-taskable__name a { text-decoration: none; color: inherit; }
.task-taskable__name a:hover { text-decoration: underline; }
.task-taskable__type {
  margin-left: auto;
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--entity-accent, var(--clr-indigo)) 14%, var(--clr-surface));
  color: var(--entity-accent, var(--clr-indigo));
}
.task-taskable__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  padding-left: 0.25rem;
}
.task-taskable__fact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.9rem;
}
.task-taskable__fact .edit-label { margin: 0; }
.task-taskable__history { padding-left: 0.25rem; }
.task-taskable__history .edit-label { display: block; margin: 0 0 0.2rem; }

.row-primary-link {
  font-weight: 500;
  text-decoration: none;
}

.row-primary-link:hover { text-decoration: underline; }

/* V kartě je interaktivní jednotka celá karta (hover = zvýraznění řádku) —
   název se proto při najetí NEpodtrhává jako odkaz. */
.entity-card .row-primary-link:hover,
.entity-card .candidates-index-name:hover { text-decoration: none; }

.col-check {
  width: 1.5rem;
  text-align: center;
  padding-right: 0;
}

.col-actions {
  white-space: nowrap;
  text-align: right;
}

/* Akční odkazy v seznamu kandidátů pod sebou, na střed, s click prostorem. */
.candidates-index-table td.col-actions {
  vertical-align: middle;
  text-align: center;
}

.candidates-index-table td.col-actions a {
  display: block;
  padding: 0.3rem 0.4rem;
}

/* Tagy v seznamu se vejdou tak na dva řádky — pak se zalomí. Užší než vizitka. */
.candidates-index-table .col-tags .te-tag-list {
  max-width: 13rem;
}

/* Dlouhý název tagu ořízneme ellipsis — ať chip nepřeteče přes sloupec Vizitka
   ani řádek filtru. (Náhrada za JS; čistě CSS, ellipsis na konci.) */
.candidates-index-table .te-tag-chip__name,
.page-header__chips .te-tag-chip__name {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-preview-btn {
  background: transparent;
  border: none;
  color: var(--clr-indigo, #2980b9);
  padding: 0;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  margin-right: 0.6rem;
}

.row-preview-btn:hover {
  text-decoration: underline;
}

.entity-index-row.is-active .row-preview-btn {
  font-weight: 600;
}

/* Search input v toolbaru (s inline clear ×). General — používá se
   v candidates/index, positions/index. */
.search-input-wrap {
  position: relative;
  display: inline-block;
}

.search-input-wrap input {
  margin-top: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--clr-border-strong, #ccc);
  border-radius: 3px;
  font-size: 0.85rem;
  width: 14rem;
}

.search-input-wrap.has-query input {
  padding-right: 1.6rem;
}

.search-input-clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

/* Drobný select v toolbar baru (status filtr v positions). */
.toolbar-select {
  margin-top: 0;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  width: auto;
}

/* Drobný filtr toolbar v h1 (search + select + clear). */
.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Quick dialog pro založení / úpravu firmy ─────────────────── */

.company-quick-form__field {
  margin-bottom: 1rem;
}

.company-quick-form__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-text-2);
}

.company-quick-form__field input[type="text"] {
  width: 100%;
}

.company-quick-form__duplicates {
  margin-top: 1rem;
}

.company-quick-form__actions {
  margin-top: 1.25rem;
}

/* ARES name autocomplete uvnitř modalu — držet se uvnitř formu, ne výchozích 400px. */
.company-quick-form__name { position: relative; }

.company-quick-form__types {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.company-quick-form__types-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #555;
}
.company-quick-form__check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.company-quick-form__check input[type="checkbox"] { margin: 0; }

/* Segmentovaný filtr typu firmy na indexu */
.company-type-filter .button.link.is-active {
  font-weight: 700;
  text-decoration: underline;
}

.company-quick-form__ares-dropdown {
  min-width: 0;
  width: 100%;
  left: 0;
  right: 0;
  top: calc(100% + 0.15rem);
}

/* ── Poslední zaměstnavatel: autocomplete picker s tlačítkem pro novou firmu ── */

.last-employer-picker {
  position: relative;
}

.last-employer-picker__row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.last-employer-picker__input {
  flex: 1;
}

.last-employer-picker.is-unconfirmed .last-employer-picker__input {
  border-color: var(--clr-amber, #d97706);
  background: var(--clr-amber-alpha, rgba(217, 119, 6, 0.06));
}

.last-employer-picker__hint {
  margin: 0.3rem 0 0;
  font-size: 0.85em;
  color: var(--clr-amber, #d97706);
}

.last-employer-picker__new-btn {
  flex: 0 0 auto;
  padding: 0 0.9rem;
  font-weight: 600;
}

.last-employer-picker__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 3.2rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: var(--shadow-dropdown);
}

.last-employer-picker__item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
}

.last-employer-picker__item:last-child { border-bottom: none; }
.last-employer-picker__item:hover { background: var(--clr-indigo-alpha); }

.last-employer-picker__item--create {
  color: var(--clr-indigo);
  font-weight: 500;
}

/* ── ARES autocomplete dropdown (companies/_form) ───────────────── */

.ares-dropdown {
  display: none;
  position: absolute;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
  min-width: 400px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: var(--shadow-dropdown);
}

.ares-dropdown.is-open { display: block; }

.ares-dropdown-empty {
  padding: 8px 12px;
  color: var(--clr-text-muted);
}

.ares-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
}

.ares-dropdown-item:last-child { border-bottom: none; }

.ares-dropdown-item:hover { background: var(--clr-indigo-alpha); }

.ares-dropdown-sub {
  color: var(--clr-text-2);
}

/* IČO input + ARES tlačítko v rohu. */
.ares-ico-wrap { position: relative; }

.ares-ico-wrap input { padding-right: 4.5rem; }

.ares-ico-btn {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.4;
  background: var(--color-indigo-100, #f0f4ff);
  border: 1px solid var(--color-indigo-200, #c5cfe8);
  border-radius: 3px;
  color: var(--clr-indigo-dark);
  cursor: pointer;
  white-space: nowrap;
}

/* Globální button:hover/:active nastavuje transform: none, což by zrušilo
   vertikální vycentrování (translateY(-50%)). Proto ho na hover/active
   držíme. */
.ares-ico-btn:hover,
.ares-ico-btn:active {
  transform: translateY(-50%);
}

/* 2-col grid pro IČO + DIČ. */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

/* Drobný řádek nad tabulkou: počet nalezených pro hledaný výraz. */
.candidates-index-found {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin-bottom: 0.75rem;
}

/* Generic per-column styly pro index tabulky (created/closed/activity). */
.col-created,
.col-closed {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.col-activity {
  font-size: 0.85rem;
}

/* T-405 — trojice kontaktních sloupců (Kontakt / E-mail / Telefon) v tabulkovém
   výpisu firem je JEDEN blok a musí se i chovat jako jeden: stejné zarovnání,
   ať je v buňce jméno (holý text), `mailto:` odkaz nebo `tel:` odkaz.
   Zarovnání se pojistit MUSÍ: `table tr td:last-child:has(a)` (ř. 349–352)
   odsazuje poslední sloupec s odkazem doprava, takže jakákoli budoucí změna
   pořadí sloupců (třeba když z výpisu vypadne IČO) by z Telefonu udělala
   pravý sloupec a trojice by se tiše rozjela. */
.entity-index-table td.col-contact {
  text-align: left;
  vertical-align: middle;
}

.col-activity.is-stale,
.entity-card__footer .is-stale {
  color: var(--clr-danger);
}

.candidates-index-contact-sub {
  color: var(--clr-text-2);
  font-size: 0.85rem;
}

/* Sloupec "Poslední aktivita" — tag typu + datum + autor + krátká poznámka */
.candidates-index-activity {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.candidates-index-activity .tag {
  font-size: 0.65rem;
}

.candidates-index-activity-date {
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.candidates-index-activity-author {
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.candidates-index-activity-note {
  color: var(--clr-text-2);
  margin-top: 0.2rem;
  max-width: 30rem;
  overflow: hidden;
  /* delší popis — až dva řádky, pak ellipsis */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.candidates-index-activity-empty {
  color: var(--clr-text-muted);
}

/* Bulk pruh je inline hned za „Označit vše" — objeví se, až je něco vybráno
   (data-bulk-toolbar hidden). Pilulka, ať je odlišený od zbytku toolbaru. */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.6rem;
  background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08));
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.bulk-toolbar [data-bulk-count] {
  color: var(--clr-text-muted);
}

.bulk-toolbar .button.sm {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
}

/* Pravá šedá sekce = detail (show). Grid sloupec, scrolluje uvnitř; obsah je
   bílá karta (.entity-preview). Container pro adaptaci detailu (entity-drawer). */
/* Pravá půlka je průhledná — žádné druhé šedé pozadí pod boxy. Boxy leží
   přímo na šedém pozadí stránky, oddělené mezerou. */
.entity-index-right {
  min-width: 0;
  overflow-y: auto;
  background: transparent;
  padding: 0;
  container: entity-drawer / inline-size;
}

.entity-index-empty,
.entity-index-loading {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--clr-text-muted);
}

/* Historie naposledy otevřených detailů POD placeholderem (T-282.8 / T-291).
   Boxík „Zvolte firmu ze seznamu." zůstává beze změny, tohle je jeho sourozenec;
   vykresluje ho `split_view_table.js` z frontend-only storu, takže na šedém
   podkladu leží samostatně, bez druhého bílého boxu. */
.entity-index-history {
  margin-top: var(--space-md);
}

.entity-index-history__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: 0 0.15rem;
}

.entity-index-history__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text-2);
}

.entity-index-history__clear {
  font-size: var(--fs-sm);
}

.entity-index-history__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Ghost = TÁŽ karta výpisu v tlumené variantě (`shared/_entity_card`), ne třetí
   druh karty. Skládá ji JS, protože historie je frontend-only a server o ní neví
   — proto se přebírají jen třídy a geometrii je nutné zkrotit: karta výpisu má
   `min-height: 9.5rem` a barevný stín pro plný obsah, ghost je jeden řádek.
   ⚠️ Do R301 tu stálo „ghost nese jen jméno" — TO UŽ NEPLATÍ. `T-413` mu dal
   doplňkový údaj o entitě a `T-414` mu dalo rozvržení: řádek je DVOUSLOUPCOVÝ,
   jméno vlevo (`main`), doplňkový údaj vpravo (`meta`) a za ním „Zapomeň"
   (`footer`). Sloupec `meta` se smrskne dřív než jméno — `minmax(0, auto)` ho
   pustí pod šířku obsahu a zbytek dořeší ellipsis, takže dlouhý údaj neukousne
   to podstatné. Prázdný slot je legitimní (výpis, který `data-entity-meta`
   nesází, a store bez času návštěvy) a mřížka ho sesype na nulovou šířku.
   Tlumení dělá `opacity` + `--clr-text-2`, ne barevný proužek/border (INV-11);
   obojí jede na tokenech, takže platí v light i dark (INV-22). */
.entity-card--ghost {
  min-height: 0;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  row-gap: 0;
  column-gap: var(--space-sm);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  grid-template-areas: "main meta footer";
  grid-template-rows: auto;
  box-shadow: none;
  opacity: 0.68;
}

/* Zdvih karty výpisu (translateY 0.5rem) je na kompaktní řádek moc — affordance
   dělá zesílení z tlumené podoby. */
.entity-card--ghost:hover,
.entity-card--ghost:focus-within {
  transform: none;
  opacity: 1;
}

.entity-card__ghost-open {
  grid-area: main;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.entity-card__ghost-open:hover {
  color: var(--clr-text);
}

/* Pravý sloupec ghost karty (`T-414`). Tlumenější než jméno — je to kontext,
   ne primární akce; barva jde z tokenu, ať to sedí i v dark módu (INV-22).
   Co v něm stojí, říká `title` z JS: údaj o entitě (poslední aktivita), nebo
   čas mojí návštěvy, když ho výpis nedodá. */
.entity-card__ghost-meta {
  grid-area: meta;
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card__ghost-forget {
  grid-area: footer;
  flex: none;
  padding: 0 0.3rem;
  border: 0;
  background: none;
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--clr-text-muted);
  cursor: pointer;
}

.entity-card__ghost-forget:hover {
  color: var(--clr-danger);
}

/* Report otevřený v pravém panelu (Forecast / Funnel / Výkazy). Bílý box jako
   ostatní pravé boxy; kompaktní hlavička; široká tabulka scrolluje vodorovně,
   když je panel užší. */
.report-panel {
  overflow-x: auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
}

.report-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.report-panel__head h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

/* Detail už není jedna karta — je to sloupec boxů. Kontejner sám je průhledný,
   boxy (hlavička-karta + tělo) si nesou vlastní pozadí a mezeru. */
.entity-preview {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Kandidatura žije jen v pravém panelu /applications. Záhlaví nese stejný
   světle modrý accent jako chip kandidatury; plný rám, žádný jednostranný
   proužek. Tělo zůstává po sdíleném split-view vzoru jako samostatné boxy. */
.application-preview {
  --application-accent: var(--entity-applications); /* kanonická mapa, T-242 */
}

.application-preview > .show-header {
  margin: 0;
  background: color-mix(in srgb, var(--application-accent) 13%, var(--clr-surface));
  border-color: color-mix(in srgb, var(--application-accent) 35%, var(--clr-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--application-accent) 10%, transparent);
}

.application-preview > .entity-section {
  margin: 0;
  padding: 1.15rem 1.35rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}

.application-preview > .show-card {
  margin: 0;
}

/* Modal kandidatury (T-307) = DRUHÁ podoba TÉHOŽ partialu `_detail` vedle panelu
   výše — Dan po T-285: „Modal nechat, resp vratit". Rám tu nese dialog, takže
   vnitřní boxy jdou nahé a sekce se oddělí linkou (jinak by se karta v kartě
   tloukla). Jméno kandidáta je v hlavičce dialogu → v těle se skryje. Vodorovný
   scroll je vypnutý (T-263): rozbalený formulář fáze roste svisle, ne do stran. */
#application-dialog {
  width: 620px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-x: hidden;
  overflow-y: auto;
}

#application-dialog .show-header,
#application-dialog .entity-section,
#application-dialog .show-card {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#application-dialog [data-application-body] .show-header__title-row h1 { display: none; }

#application-dialog [data-application-body] > * + * {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--clr-border);
}

/* První box = karta vybrané věci (1:1 jako řádek v listu, jen výrazněji
   zvýrazněná): jemný indigo tint + silný indigo proužek vlevo. Uvnitř grid:
   velký titul + akce v prvním řádku, meta přes celou šířku ve druhém (headtext
   je display:contents → h2 a meta jdou přímo do gridu). */
.entity-preview-header {
  background: color-mix(in srgb, var(--clr-indigo) 13%, var(--clr-surface));
  border: 1px solid color-mix(in srgb, var(--clr-indigo) 28%, transparent);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
}

/* Tělo = průhledný kontejner sekcí-boxů. Grid má jeden sloupec (u firmy/pozice
   + postranní na širokém draweru, viz @container). Sloupce stackují jednotlivé
   sekce-boxy s mezerou mezi nimi. */
.entity-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.entity-preview-main,
.entity-preview-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Každá sekce v těle = samostatný bílý box na šedém pozadí. Staré linkové
   oddělovače (margin-top/border-top uvnitř jednoho těla) se ruší — mezeru
   teď dělá gap mezi boxy. */
.entity-preview-main > .entity-section,
.entity-preview-main > .entity-preview-section,
.entity-preview-main > .invoice-attributions,
.entity-preview-side > .entity-section,
.entity-preview-side > .entity-preview-section {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
  margin: 0;
  border-top: none;
}

/* ── Primární sekce panelu — TLUMENÁ, ne sytá (T-287) ──────────────
   Primární sekce = hlavní obsah panelu (VŘ u náboru/kandidáta, Zakázky
   u firmy, Nábor u zakázky). Max 1 na panel.

   Dan 26. 7. večer, doslova: „_už mi sere ta sytá primary barva_" —
   celoplošné syté indigo přes celý box řvalo víc než obsah, který má nést.
   Highlight zůstává, jen tlumený: tónované pozadí + indigo laděný rám +
   indigo akcent v nadpisu. Barvu nese PLOCHA a nadpis, ne jednostranný
   proužek (`INV-11`, `T-243`).

   ⚠️ HISTORIE, AŤ SE NEVRÁTÍ: dokud byl podklad sytě indigo, měla tahle
   sekce celou rodinu „white-on-indigo" overridů — bílé `.muted`, bílé
   odkazy, bílá tlačítka v hlavičce, prosvětlené `summary`, boxy v boxu
   s plným surface povrchem a vlastní funnel pásy (`funnel.css`). Po
   ztlumení jsou VŠECHNY tyhle overridy chyba: bílý text na světlém tintu
   v light módu zmizí. Zrušeny; obsah jede na normálních tokenech.
   Zůstal jen surface povrch skutečných karet v boxu, protože ten odlišuje
   jejich samostatný obsah od tónovaného podkladu. Krátké required empty-state
   (`.kop-required`) karta NENÍ a zůstává plochý, viz pravidlo níž (T-349). */
.entity-preview-main > .entity-section--primary,
.entity-preview-main > .entity-preview-section--primary {
  background: color-mix(in srgb, var(--clr-indigo) 14%, var(--clr-surface));
  border-color: color-mix(in srgb, var(--clr-indigo) 38%, var(--clr-border));
  color: var(--clr-text);
}

/* Nadpis nese indigo akcent — po ztlumení podkladu je on tím, co říká
   „tohle je hlavní sekce". */
.entity-preview-main > .entity-section--primary > .entity-section-heading,
.entity-preview-main > .entity-preview-section--primary > .entity-preview-section-head {
  color: var(--clr-indigo);
}

/* Boxy v boxu: vnitřní karty dostanou plný surface povrch, aby se odlepily
   od tónovaného podkladu (světlý režim bílá, tmavý tmavá). Rám zpátky na
   normální token — `transparent` dával smysl jen na sytém indigu. */
.entity-preview-main > .entity-section--primary .proj-pos-item,
.entity-preview-main > .entity-section--primary .proj-card,
.entity-preview-main > .entity-section--primary .section-list,
.entity-preview-main > .entity-section--primary .flow-picker,
.entity-preview-main > .entity-preview-section--primary .proj-pos-item,
.entity-preview-main > .entity-preview-section--primary .proj-card,
.entity-preview-main > .entity-preview-section--primary .section-list,
.entity-preview-main > .entity-preview-section--primary .flow-picker {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
}

/* Chybějící KOPS i chybějící fáze sdílejí jeden required empty-state.
   Je přímo obsahem tónované primární sekce, ne další kartou: bez vlastního
   povrchu a rámu proto nevzniká „bílý box v boxu" (T-349). */
.kop-required {
  margin: 0;
  padding: 0.35rem 0 0.2rem;
  border: 0;
  background: transparent;
  color: var(--clr-text);
}

.kop-required__body {
  display: grid;
  max-width: 48rem;
  gap: 0.65rem;
  justify-items: start;
}

.kop-required__title,
.kop-required__lead {
  margin: 0;
}

.kop-required__title {
  font-size: 1rem;
  line-height: 1.35;
}

.kop-required__lead {
  color: var(--clr-text-2);
  line-height: 1.5;
}

/* Seznam (VŘ kandidáta, uzavřená řízení) jako box potřebuje vlastní padding. */
.entity-preview-main > .entity-section--primary .section-list,
.entity-preview-main > .entity-preview-section--primary .section-list {
  padding: 0.25rem 0.85rem;
}

/* Nebezpečná akce (Smazat) jako samostatný box dole. */
.entity-preview-danger {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.35rem;
}

@container entity-drawer (min-width: 34rem) {
  .entity-preview-header {
    padding: 1.1rem 1.5rem 1.1rem calc(1.5rem + 4px);
  }
}

@container entity-drawer (min-width: 50rem) {
  /* Dva sloupce jen když panel má postranní sloupec (firma). Kandidát ho nemá
     → zůstává jednosloupcový i na širokém draweru. */
  .entity-preview-body:has(.entity-preview-side) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
  /* Postranní sloupec (soubory/kontakty) se drží na místě, zatímco hlavní
     sloupec scrolluje. */
  .entity-preview-side {
    position: sticky;
    top: 0;
    align-self: start;
  }
}

/* ── Kandidát: DVOUSLOUPCOVÝ ZIP JE ZRUŠENÝ (T-348) ────────────────────────
   ⚠️ NEZAKLÁDAT ZNOVU. Panel kandidáta sype sekce POD SEBE v jednom sloupci,
   jako všechny ostatní detaily — žádný `@container entity-drawer (min-width:
   56.25rem)` s `grid-template-columns` na `.entity-preview[data-candidate-id]
   .entity-preview-main`.

   Historie, ať se to nechodí stavět dokola:
   ~~Dan 31. 7. 2026: „_Adaptace na siroky prsotor detailu kandidata - nabor to
   uz napr ma, sekce jdou do dvou sloupcu v detailu_", k rozdělení 1. 8.:
   „_zip odzhora (dva co byli pod sebou budou vedle sebe na vetsim view_".~~
   Postaveno v R290 (`80fa340`) jako grid 3fr/2fr se `grid-auto-flow: row`.
   Dan 2. 8. při odklepu: „_Okna jsou cikcak a nevyplní cely prostor (dlouhe
   vedfle kratkeho -> dovol mansonry)_", a 4. 8. 2026 to uzavřel doslova:
   „_neni to mansory, takze vlevo vidim dlouhy box VŘ a vpravo něj jen malý box
   s prázdnými úkoly, ypis proste za sebou jako to mame jinde, prdime na zip_".

   PROČ TO NEJDE SPRAVIT MENŠÍM ZÁSAHEM: dva grid sloupce zalamují po ŘÁDCÍCH,
   takže dvojice sekcí je vždy tak vysoká jako ta vyšší z nich. Sekce panelu mají
   z principu různou výšku (dlouhá „Výběrová řízení" × prázdné „Úkoly"), takže
   díra vpravo je vlastnost toho zalomení, ne chyba nastavení — a masonry
   (`grid-template-rows: masonry`) je 2026 pořád jen za flagem ve Firefoxu,
   takže „dovol masonry" nemá v prohlížečích čím být splněno. Jediný sloupec
   žádnou díru nemá.

   Nábor (`nabor_setup.css`) dvousloupec MÁ DÁL a je to v pořádku: je to
   celostránkový SETUP formulář s předem známými, podobně vysokými bloky, ne
   seznam sekcí proměnné výšky. Nepřenášet ho zpátky sem. */

/* ⚠️ ÚZKÝ DRAWER SE ŘEŠÍ V JEDINÉM BLOKU NÍŽE (hledej „@container entity-drawer
   (max-width: 30rem)" za základními pravidly .entity-preview-actions /
   .entity-preview-meta). Sem se pravidla pro úzký panel NEVRACEJÍ — přesně tady
   stály od T-054 a byly celou dobu MRTVÉ: .entity-preview-actions o pár desítek
   řádků níž přepisuje `grid-column`/`grid-row` stejnou specificitou, takže
   pozdější deklarace vyhrála a hlavička zůstávala dvousloupcová i na 22rem
   (T-385). Container query nemá vyšší váhu než obyčejné pravidlo. */

.entity-preview-headtext {
  display: contents;
}

.entity-preview-header h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Akce vpravo: volitelná hlavní/sekundární workflow akce + kebab. Běžné editace
   a všechny delete akce patří do dropdownu. */
.entity-preview-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Ghost tlačítka (Upravit, Tisk do PDF, Aktivita…) v barevné hlavičce-kartě
   potřebují neprůhledné bílé pozadí a tmavší text — default transparent ghost
   by na indigo tintu splynul a text by nebyl vidět. Primary necháváme. */
.entity-preview-actions .button:not(.primary):not(.danger) {
  background: var(--clr-surface);
  border-color: color-mix(in srgb, var(--clr-indigo) 30%, var(--clr-border));
  color: var(--clr-text);
}

.entity-preview-actions .button:not(.primary):not(.danger):hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-indigo);
}

.entity-preview-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin-top: 0.35rem;
}

/* Meta složená ze spanů (firma: obor · web · HRP) — oddělovač mezi kousky.
   Kandidát skládá meta jako text, spanů se pravidlo nedotkne. */
.entity-preview-meta > span + span::before {
  content: '·';
  margin: 0 0.35rem;
}

/* Detail firmy má pod titulkem klidný stavový cluster, pod ním čtyři
   stejně skenovatelné fakty a kontaktní capsule (T-294). Všechny barvy jsou
   z tokenů, takže týž kontrakt funguje v light i dark motivu. */
.company-preview-status {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  min-width: 0;
}

/* T-416: `.company-preview-activity` (outline pilulka s textem „Neaktivní ·
   neběží projekt") je ZRUŠENÁ — nahradil ji puntík `.company-activity` u názvu,
   viz `_preview_header`. Byl to právě ten prvek z Danova screenshotu: text měl
   `--clr-text-2` na tónovaném podkladu a v úzkém panelu se lámal.
   Řádek názvu drží puntík na baseline s `<h2>`. */
.company-preview-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.company-preview-title-row h2 {
  margin: 0;
  min-width: 0;
}

.entity-preview-header:has(.company-preview-status) .entity-preview-meta {
  grid-row: 3;
  margin-top: 0.85rem;
}

.company-preview-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
}

.company-preview-fact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.company-preview-fact__label {
  color: var(--clr-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.company-preview-fact__value {
  min-width: 0;
  color: var(--clr-text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.company-preview-fact__value--identity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
}

/* Pilulka primárního kontaktu. `flex-wrap: wrap` NENÍ kosmetika (T-385):
   `__identity` má `min-width: 7rem` a smrštit se nedá, kdežto `__channels`
   má `min-width: 0` a jeho odkazy `overflow-wrap: anywhere` — jejich
   min-content je tím pádem JEDEN ZNAK. Bez zalomení proto flexbox v úzké
   pilulce zmáčkne kanály na nulovou šířku a e-mail i telefon se vysypou po
   písmenech ven z pilulky. Se zalomením spadnou kanály na vlastní řádek
   a dostanou celou šířku. */
.company-preview-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  min-width: 0;
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--clr-indigo) 24%, var(--clr-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--clr-indigo) 7%, var(--clr-surface));
}

.company-preview-contact__avatar {
  display: inline-flex;
  flex: 0 0 2.15rem;
  width: 2.15rem;
  height: 2.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--clr-indigo) 16%, var(--clr-surface));
  color: var(--clr-indigo);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.company-preview-contact__identity {
  display: flex;
  min-width: 7rem;
  flex: 0 1 auto;
  flex-direction: column;
  color: var(--clr-text);
  line-height: 1.25;
}

.company-preview-contact__identity > span {
  color: var(--clr-text-muted);
  font-size: var(--fs-xs);
}

.company-preview-contact__channels {
  display: flex;
  min-width: 0;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.company-preview-contact__channels > a {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@container entity-drawer (min-width: 34rem) {
  .company-preview-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container entity-drawer (min-width: 50rem) {
  .company-preview-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── ÚZKÝ DRAWER — jediné místo, kde se panel skládá pod 30rem ─────────────
   Drawer se tahá packou a má minimum 22rem (viz .entity-index-grid), takže
   úzký panel je běžný provozní stav, ne okrajový.

   Hlavička je jinak grid `1fr auto` a akce (primary + Upravit + kebab) mají
   `flex-shrink: 0` → vedle titulu se nesmrští. Pod 30rem proto jde hlavička
   na JEDEN sloupec: titul, pod ním zalomené akce, pak stav a meta. Řídí se
   šířkou DRAWERU (container), ne viewportu — reaguje na tažení packou. (T-054)

   ⚠️ TENHLE BLOK MUSÍ ZŮSTAT ZA základními pravidly `.entity-preview-actions`
   a `.entity-preview-meta`. Container query NEZVYŠUJE specificitu: dokud blok
   stál nad nimi (T-054 ho psalo hned pod `.entity-preview-header`), přebíjelo
   pozdější `.entity-preview-actions { grid-column: 2; grid-row: 1 }` a pravidlo
   bylo mrtvé. Následek na 22rem draweru byl změřený: akce si držely vlastní
   implicitní sloupec 224px, na titul + meta zbylo 70px z 352px, a kontaktní
   „pilulka" v hlavičce se rozsypala po jednom znaku na řádek (T-385).
   Hlídá `test/entity_drawer_narrow_guard_test.rb`. */
@container entity-drawer (max-width: 30rem) {
  .entity-preview-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .entity-preview-actions {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    margin-top: 0.6rem;
  }

  .entity-preview-meta {
    grid-row: 3;
  }

  .company-preview-status {
    grid-row: 3;
  }

  .entity-preview-header:has(.company-preview-status) .entity-preview-meta {
    grid-row: 4;
  }

  /* ⚠️ `.company-preview-contact` SEM NEPATŘÍ — a je to zadání, ne opomenutí.
     Dan 4. 8. 2026 při odklepu `T-294` doslova: „_OK, ale company-preview-contact
     netransformovat - nechat stable velikost chipu_", a 2. 8. k témuž:
     „_chip se nemá přizpůsoboat velikosti tak detail panelu - ted blbne_".
     ~~Do R320 tu pilulka na úzkém panelu měnila tvar: `align-items: flex-start`
     + `border-radius: var(--radius-md)`, tedy z kapsle se stal obdélník.~~
     Kontaktní pilulka má teď JEDNU geometrii na všech šířkách panelu (`T-447`).
     Zalomení obsahu (`flex-wrap: wrap` v základním pravidle) zůstává — to není
     transformace chipu, ale jediná obrana proti tomu, aby se e-mail a telefon
     vysypaly po písmenech ven z pilulky (`T-385`, hlídá
     `entity_drawer_narrow_guard_test.rb`). */
}

/* Datové tabulky v detailním panelu si scrollují samy (`T-420`).
   Panel je drawer tažený packou s minimem 22rem, takže úzký stav je běžný
   provozní stav — a čtyřsloupcová tabulka (úkoly, výkazy, finanční plány
   v panelu uživatele) se do 352 px nevejde. Změřeno: na 22rem přetékala
   o 70 px, na 26rem o 6 px, a protahovala s sebou celou `.entity-preview`,
   takže se „rozbíjela karta". Scroll uvnitř vlastního boxu je levnější než
   přestavovat tabulky na kartičky a nemění pořadí ani obsah.
   `.show-info-table` je VÝJIMKA schválně: je to dvousloupcový klíč–hodnota
   s `width: 100%`, který se smrskává, ne přetéká — `display: block` by mu
   rozbil zarovnání hodnoty doprava. */
.entity-preview table:not(.show-info-table) {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.entity-preview-section {
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--clr-border);
}

.entity-preview-section h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Nadpisy sekcí v panelu jednotné — malé a tučné. „Úkoly" (entity-section-heading,
   jinde 1rem/bold) srovnáme na týž vzhled jako ostatní sekce (O pozici, VŘ, …). */
.entity-preview .entity-section-heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.entity-preview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.entity-preview-section-head h3 {
  margin: 0;
}

/* Popis: rich text, defaultně sbalený s fadeout maskou; odkaz na konci rozbalí. */
.candidate-desc {
  font-size: 0.9rem;
  color: var(--clr-text-2);
  line-height: 1.5;
}

.candidate-desc.is-collapsed {
  max-height: 4.6em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.candidate-desc-toggle {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

/* CV/soubor vykreslený přímo v náhledu (index). Plátno uvnitř spoléhá na
   flex:1 + výšku rodiče — v úzkém panelu mu ji proto dáme napevno. */
.candidate-preview-name-link {
  color: inherit;
  text-decoration: none;
}

.candidate-preview-name-link:hover {
  color: var(--clr-indigo);
  text-decoration: underline;
}

.muted-count {
  color: var(--clr-text-muted);
  font-weight: normal;
  font-size: 0.85rem;
}

.muted {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
}

/* Na mobilu dvoupanel nedává smysl — stack pod sebe (list, pak detail), bez
   předělu, normální scroll stránky. */
@media (max-width: 820px) {
  .page-wrap:has(.entity-index-grid) {
    padding: 1rem;
  }
  /* Pod tímhle bodem se split rozpadne na stack — list-min + panel-min by se
     jinak nevešly a grid by přetekl. Overlay se sem nedostane (JS: mobile). */
  .entity-index-grid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }
  .pane-resize-handle {
    display: none;
  }
  /* Levý box zůstává bílým boxem i na mobilu, jen scrolluje s celou stránkou. */
  .entity-index-left {
    height: auto;
    overflow: visible;
    padding: 1rem;
  }
  .entity-index-right {
    background: transparent;
    padding: 1rem 0 0;
    overflow: visible;
    height: auto;
  }
}

/* ── Úkoly: chip vazby, soubory, dashboard seznam ──────────────────── */
.tasks-index-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.tasks-index-attachment {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  font-size: 0.75rem;
  color: var(--clr-text);
  text-decoration: none;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-index-attachment::before {
  content: "📎";
  margin-right: 0.25rem;
  font-size: 0.7rem;
}

.tasks-index-attachment:hover {
  background: var(--clr-border);
}

/* Vodorovný scroll jen kolem tabulky (T-216) — v úzkém split-view panelu se
   8 sloupců nevejde; odroluje se tabulka, ne filtry/hlavička nad ní. */
.tasks-index-table-scroll {
  overflow-x: auto;
}

.tasks-index-table {
  width: 100%;
  margin-top: 1rem;
  /* Fixní layout: sloupec „Úkol" dostane zbylou šířku a dlouhý text se
     ořízne uvnitř buňky místo roztažení tabulky přes okraj stránky. */
  table-layout: fixed;
  /* Dolní mez, aby se v úzkém panelu sloupec „Úkol" nesmrskl na 0 a titulek
     nezmizel — pod tuhle šířku se tabulka odroluje (T-216).
     ⚠️ T-297 tuhle konstantu ZÁMĚRNĚ NESNIŽUJE, i když sloučení „Termín" +
     „Dokončeno" ubralo z pevných šířek 4.5rem (13rem → 8.5rem). Snížení by ten
     zisk v úzkém split-pane vrátilo vodorovnému scrollu místo titulku: při
     50rem má „Úkol" na spodní mezi 50 − (2.5+6+8.5+10+4+4) = 15rem, kdežto
     při 44rem jen 9rem — tedy MÍŇ než 10.5rem, co měl před sloučením. Konstanta
     zůstává, celý uvolněný prostor jde titulku (Dan 26. 7.: „_titulek úkolu
     není v řádku skoro vidět, je useknuty, děj sloupci mnohem větší prostor_")
     a okamžik, kdy se tabulka začne odrolovávat, se nemění. */
  min-width: 50rem;
}

.tasks-index-table tr.archived {
  color: var(--clr-text-muted);
}

/* Per-column widths a styly v tasks index tabulce. */
/* Řešitel + zadavatel v jednom sloupci (T-216) — dřív 2× 8rem, teď 1× 10rem,
   uvolněná šířka jde sloupci „Úkol". */
.tasks-index-table th.col-people,
.tasks-index-table td.col-people { width: 10rem; }
.tasks-index-table td.col-people { overflow: hidden; }

/* Záhlaví se nesmí přelít do sousedního sloupce, když se tabulka zúží
   (split-view, ~1024px): radši oříznout text „…" než ho nechat narazit do
   sousedního nadpisu („Úkol" + „Priorita" → „Úkolita"). (T-216) */
.tasks-index-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-index-table th.col-state,
.tasks-index-table td.col-state {
  width: 4rem;
  white-space: nowrap;
}

.tasks-index-table th.col-check { width: 2.5rem; }

.tasks-index-table th.col-priority,
.tasks-index-table td.col-priority { width: 6rem; }

/* T-297 — sloučený „Termín / dokončeno": 6rem + 7rem (zrušený `col-closed`)
   → 8.5rem. Do primární linky se musí vejít „31. 7. 2026 (-1)", do sekundární
   „dokončeno 30. 7. 2026" na drobném písmu; 4.5rem z původních dvou sloupců
   je tím uvolněných pro „Úkol". `white-space: nowrap` je na buňce, ne na
   `.tasks-index-deadline` — ta je flex sloupec a lámat se musí MEZI úrovněmi,
   ne uvnitř data. */
.tasks-index-table th.col-deadline,
.tasks-index-table td.col-deadline { width: 8.5rem; white-space: nowrap; }

.tasks-index-deadline {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tasks-index-deadline > * {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Datum dokončení je sekundární úroveň — týž tvar, jaký má „zadal X" pod
   řešitelem (T-216), aby obě sloučené dvojice vypadaly stejně. */
.tasks-index-closed-at {
  display: block;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.tasks-index-table th.col-actions,
.tasks-index-table td.col-actions { width: 4rem; }

.tasks-index-table td.col-task {
  /* „Úkol" je jediný sloupec bez pevné šířky → dostane zbytek (nad `min-width`
     tabulky). `overflow: hidden` je pojistka: chip i název se ořežou na hranici
     buňky a nepřetečou přes sousední sloupce (T-216). */
  overflow: hidden;
}

/* Hlavička řádku (vazby + název úkolu) na jedné lince, název v normální
   velikosti písma jako zbytek tabulky (ne zmenšený jako .button.link). */
.tasks-index-row-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.tasks-index-title {
  color: var(--clr-text);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* V kartovém výpisu je titulek hlavní informace karty — zalomí se a ořízne až
   na 2 řádcích místo jednořádkového „…", které řezalo i při volném místě (T-217).
   Velikost jako u ostatních entity karet; tabulkový mód zůstává jednořádkový. */
.entity-card .tasks-index-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  font-size: var(--fs-md);
}

/* Stack vazeb se v úzké buňce smrskne a jména se ořežou „…" místo přetečení přes
   sousední sloupce (T-216, nález na atelonu — chip 354px v buňce 92px; T-228 stack).
   Pevná max šířka drží místo pro titulek úkolu vpravo; avatar každého chipu zůstane
   vidět, aby žádná vazba úplně nezmizela.
   T-280 tu opravil dvě věci:
   · `min-width: 0` je pryč — s ním se stack smrskl POD šířku svých avatarů (změřeno
     26. 7.: box stacku 20,6 px na tři chipy à 30,4 px), chipy přetekly ven a překryly
     začátek titulku („Zavolat" nebylo vidět). `min-width: auto` = automatické minimum
     flex položky, tedy min(vlastní obsah, `max-width`) → stack se nikdy nesmrskne pod
     to, co v něm reálně je.
   · strop 60 % → 40 % → (kolo 2) 50 %. Strop je přímo dělítko mezi vazbami a titulkem:
     v ÚZKÉ buňce (~207 px v split-view) se do něj vejde jen facepile koleček, v široké
     je nad přirozenou šířkou stacku a nedělá nic. Když kolo 2 kolečka zvětšilo, měřil
     sbalený facepile tří vazeb 86 px a do 40 % (73 px) se nevešel → chipy se smrskly
     do hustšího překryvu a z iniciál zbylo „A(", tedy přesně to, na co si Dan stěžoval
     u překryvu. 50 % (92 px) ho pobere v plném překryvu −0.5rem a titulku pořád zbývá
     polovina buňky. Víc vazeb se dál zhušťuje (viz `flex` u chipů výš), takže strop
     drží i pro 6 koleček. Jméno je v úzké buňce dostupné hoverem/fokusem — rozbalený
     chip smí přes titulek přetéct (Dan 26. 7. odklepl).
   Kolo 2 přidalo i `--facepile-size` 1.75rem: 2rem kolečko z karty dělá hustý řádek
   tabulky zbytečně vysoký (+10 px), 1.75rem = 34 px chip je proti kolu 1 (28,4 px)
   pořád výrazně větší a řádek roste jen o ~5,6 px. */
.tasks-index-row-head .chip-stack {
  flex: 0 1 auto;
  min-width: auto;
  max-width: 50%;
}
.tasks-index-table .chip-stack { --facepile-size: 1.75rem; }
.tasks-index-table .entity-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Sloučený sloupec Řešitel/zadavatel: řešitel nahoře, „zadal X" pod ním
   drobně a ztlumeně; obojí se v úzkém sloupci ořízne (T-216). */
.tasks-index-people {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.tasks-index-people a.plain,
.tasks-index-creator {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.tasks-index-creator {
  display: block;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Title není odkaz na pohled — žádná barva ani podtržení v hoveru,
   ani v uzavřených (archived) řádcích, kde by `.archived a` obarvilo indigo. */
.tasks-index-title:hover,
.tasks-index-table tr.archived .tasks-index-title {
  color: var(--clr-text);
  text-decoration: none;
}

/* Checkboxy ve výpisu úkolů v normální velikosti (default render bývá drobný). */
.tasks-index-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--clr-indigo, #6366f1);
  cursor: pointer;
}

.priority-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.8rem;
  background: #f1f3f4;
  color: #555;
}
.priority-chip.priority-medium { background: #fff3cd; color: #8a6d3b; }
.priority-chip.priority-high   { background: #f8d7da; color: #a94442; }

.overdue { color: var(--clr-danger); font-weight: 500; }

/* ── T-296 — červený pill s vykřičníky za dny po termínu ────────────────────
   Dan 26. 7., doslova: „_co den to vykřičník v červeným pillu_". Je to PLNÝ
   červený pill, ne světlý tint: chip musí na kartě přebít i barevné chipy
   vazeb, jinak nedělá to, co má („_termíny běžné hořím, já je chci nahoře_").

   ⚠️ Text se PŘEKLÁPÍ s tématem a je to nutnost, ne kosmetika. Bílá na světlém
   `--clr-danger` (#c62828) dává 5,6:1, ale na tmavém, výrazně světlejším
   `--clr-danger` (#ef5350) jen 3,5:1 — pod prahem. V dark módu proto text jde
   na `--clr-bg` (#0f1522), což dává 5,2:1. Přesně tohle je past, na kterou
   dojelo `T-345`/`T-356` (komentář „změřeno nad 4,5" u barvy, která tam nebyla).

   Počet vykřičníků NENÍ zastropovaný (zadání: jeden za každý započatý den),
   proto se pilulka smí ZALOMIT — jinak by 20 dní po termínu roztáhlo meta
   řádek karty a vytlačilo jméno řešitele. */
.task-overdue-chip {
  display: inline-block;
  max-width: 9rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--clr-danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: baseline;
}

:root[data-theme="dark"] .task-overdue-chip { color: var(--clr-bg); }

/* T-297 — relativní počet dní v závorce za termínem. Neutrální je jen doplněk
   (drobné sekundární písmo), po termínu se rozsvítí týmž `--clr-danger`, jaký
   nese `.overdue` — druhá červená by tvrdila, že jde o jinou věc. */
.task-deadline-rel {
  color: var(--clr-text-2);
  font-size: var(--fs-xs);
}

.task-deadline-rel--overdue {
  color: var(--clr-danger);
  font-weight: 600;
}

/* Inline bulk-akce form (Rails form_with -> form wrapper). */
.bulk-form-inline { display: inline; }

/* Drobný "× Zrušit filtr" link v h1 hlavičce tasks. */
.tasks-clear-filter {
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.tasks-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0 0;
}

/* Reset baseline pro inputy a selecty (display: block; width: 100%)
   přebije přirozenou inline šíři ve flex kontejneru — vrátíme auto,
   aby filtry seděly horizontálně, ne pod sebou. Původně řešeno přes
   form.inline pravidlo z framework/forms.css. */
.tasks-filter select,
.tasks-filter input {
  width: auto;
}

.tasks-filter__search {
  min-width: 16rem;
}

/* Dashboard — prázdný stav sekce „Moje úkoly". Samotné úkoly používají
   beze změn sdílenou grid kartu z výpisu /tasks. */
.dashboard-tasks-empty {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

/* ── T-304: „tadá" po odškrtnutí úkolu na dashboardu ─────────────────────────
   Dan chtěl „_lehkou verzi, ale milou_", ne velkoplošné konfety: pár drobných
   teček, které se rozletí okolo místa kliknutí a zmizí „do ztracena".
   Overlay je fixed + pointer-events:none, takže NEMĚNÍ layout ani neblokuje
   klikání — to je podmínka zadání, ne detail. Vzdálenost, velikost a zpoždění
   dodává JS jako custom properties, protože každá částice letí jinam; keyframe
   je pro všechny jeden.
   Barva jde z --clr-indigo (tlumená primary z T-287/T-290), ne z nové palety. */
.task-tada {
  position: fixed;
  z-index: 1200;
  width: 0;
  height: 0;
  pointer-events: none;
}

.task-tada__bit {
  position: absolute;
  inset: 0;
  width: var(--size, 4px);
  height: var(--size, 4px);
  margin: calc(var(--size, 4px) / -2) 0 0 calc(var(--size, 4px) / -2);
  border-radius: 50%;
  background: var(--clr-indigo);
  opacity: 0;
  animation: task-tada-fly var(--tada-ms, 460ms) cubic-bezier(.15, .8, .3, 1) var(--delay, 0ms) forwards;
}

/* Každá druhá je zelená („hotovo"), ať to není jednobarevná šmouha. */
.task-tada__bit:nth-child(2n) {
  background: #10b981;
}

@keyframes task-tada-fly {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0.9; }
  70%  { opacity: 0.85; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 0; }
}

/* Bez pohybu = bez konfet. JS je sice ani nevytvoří, ale pravidlo tu je pro
   případ, že by se overlay do DOMu dostal jinudy (např. z testu). */
@media (prefers-reduced-motion: reduce) {
  .task-tada { display: none; }
}

/* Tasks index — split-view + preview pane (mirror candidates-index) */
.tasks-index-grid {
  /* Grid má nad sebou 1rem odsazení, ale dědí height: calc(100vh - header - 2rem)
     z .entity-index-grid → margin se přičte K výšce a grid přeteče viewport přesně
     o ten 1rem (~17px svislý scroll navíc, Danův nález T-218). Výšku o margin
     zkrátíme, ať sedí do flex-fill page-wrap. */
  margin-top: 1rem;
  height: calc(100vh - var(--header-h) - 2rem - 1rem);
}

.tasks-index-left {
  min-width: 0;
}

.tasks-index-row {
  outline: none;
}

.tasks-index-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tasks-index-row:focus,
.tasks-index-row.is-active {
  background: var(--clr-indigo-alpha, rgba(99, 102, 241, 0.08));
  box-shadow: var(--shadow-active-row);
}

.task-priority-low {
  --task-priority-bg: color-mix(in srgb, #9ca3af 7%, var(--clr-surface));
  --task-priority-border: color-mix(in srgb, #9ca3af 34%, var(--clr-border));
  --task-priority-accent: #9ca3af;
  --task-priority-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--task-priority-accent) 40%, transparent);
}

.task-priority-medium {
  --task-priority-bg: color-mix(in srgb, #f59e0b 13%, var(--clr-surface));
  --task-priority-border: color-mix(in srgb, #d97706 38%, var(--clr-border));
  --task-priority-accent: #d97706;
  --task-priority-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--task-priority-accent) 40%, transparent);
}

.task-priority-high {
  --task-priority-bg: color-mix(in srgb, #ef4444 12%, var(--clr-surface));
  --task-priority-border: color-mix(in srgb, #dc2626 42%, var(--clr-border));
  --task-priority-accent: #dc2626;
  --task-priority-shadow: 0.22rem 0.22rem 0 color-mix(in srgb, var(--task-priority-accent) 40%, transparent);
}

.entity-card.task-priority-low,
.entity-card.task-priority-medium,
.entity-card.task-priority-high {
  background: var(--task-priority-bg);
  border-color: var(--task-priority-border);
  box-shadow: var(--task-priority-shadow);
}

.entity-card.task-priority-low.is-active,
.entity-card.task-priority-medium.is-active,
.entity-card.task-priority-high.is-active {
  background: color-mix(in srgb, var(--sel-accent) 7%, var(--task-priority-bg));
  box-shadow: var(--task-priority-shadow), var(--glow-accent);
}

.entity-card.task-priority-low.is-closed,
.entity-card.task-priority-medium.is-closed,
.entity-card.task-priority-high.is-closed {
  --task-closed-bg: color-mix(in srgb, #10b981 16%, var(--task-priority-bg));
  --task-closed-border: color-mix(in srgb, #10b981 48%, var(--task-priority-border));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, #10b981 22%, transparent) 0,
      transparent 42%),
    var(--task-closed-bg);
  border-color: var(--task-closed-border);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #10b981 18%, transparent),
    var(--task-priority-shadow);
}

.entity-card.task-priority-low.is-closed .tasks-index-title,
.entity-card.task-priority-medium.is-closed .tasks-index-title,
.entity-card.task-priority-high.is-closed .tasks-index-title {
  color: color-mix(in srgb, var(--clr-text) 78%, #10b981);
}

.entity-card.task-priority-low.is-closed .task-card__description,
.entity-card.task-priority-medium.is-closed .task-card__description,
.entity-card.task-priority-high.is-closed .task-card__description {
  background: color-mix(in srgb, #10b981 12%, var(--clr-surface));
  color: color-mix(in srgb, var(--clr-text) 76%, #10b981);
}

.entity-card.task-priority-low.is-closed:not(:has(.col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box,
.entity-card.task-priority-medium.is-closed:not(:has(.col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box,
.entity-card.task-priority-high.is-closed:not(:has(.col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box,
.tasks-index-row.is-closed:not(:has(> .col-check [data-bulk-item]:checked)) .task-check.is-checked .task-check-box {
  background: #10b981;
  border-color: color-mix(in srgb, #10b981 72%, var(--task-priority-accent));
}

.entity-card.task-priority-low.is-closed.is-active,
.entity-card.task-priority-medium.is-closed.is-active,
.entity-card.task-priority-high.is-closed.is-active {
  background: color-mix(in srgb, var(--sel-accent) 7%, var(--task-closed-bg));
  border-color: color-mix(in srgb, var(--sel-accent) 35%, var(--task-closed-border));
  box-shadow: var(--task-priority-shadow), var(--glow-accent);
}

.entity-card.task-priority-low.is-closed.is-selected,
.entity-card.task-priority-medium.is-closed.is-selected,
.entity-card.task-priority-high.is-closed.is-selected,
.entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked),
.entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked),
.entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) {
  background: var(--sel-indigo);
  border-color: color-mix(in srgb, var(--sel-indigo) 78%, #000);
  color: #fff;
  box-shadow: var(--task-priority-shadow), var(--glow-accent);
}

.entity-card.task-priority-low.is-closed.is-selected .tasks-index-title,
.entity-card.task-priority-medium.is-closed.is-selected .tasks-index-title,
.entity-card.task-priority-high.is-closed.is-selected .tasks-index-title,
.entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked) .tasks-index-title,
.entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked) .tasks-index-title,
.entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) .tasks-index-title,
.entity-card.task-priority-low.is-closed.is-selected .task-card__description,
.entity-card.task-priority-medium.is-closed.is-selected .task-card__description,
.entity-card.task-priority-high.is-closed.is-selected .task-card__description,
.entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description,
.entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description,
.entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description {
  color: #fff;
}

.entity-card.task-priority-low.is-closed.is-selected .task-card__description,
.entity-card.task-priority-medium.is-closed.is-selected .task-card__description,
.entity-card.task-priority-high.is-closed.is-selected .task-card__description,
.entity-card.task-priority-low.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description,
.entity-card.task-priority-medium.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description,
.entity-card.task-priority-high.is-closed:has(.col-check [data-bulk-item]:checked) .task-card__description {
  background: rgba(255, 255, 255, 0.14);
}

.tasks-index-row.task-priority-low:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td,
.tasks-index-row.task-priority-medium:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td,
.tasks-index-row.task-priority-high:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td {
  background: var(--task-priority-bg);
  border-top-color: var(--task-priority-border);
  border-bottom-color: var(--task-priority-border);
}

.tasks-index-row.task-priority-low.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td,
.tasks-index-row.task-priority-medium.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td,
.tasks-index-row.task-priority-high.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td {
  background: color-mix(in srgb, #10b981 13%, var(--task-priority-bg));
  border-top-color: color-mix(in srgb, #10b981 45%, var(--task-priority-border));
  border-bottom-color: color-mix(in srgb, #10b981 45%, var(--task-priority-border));
}

.tasks-index-row.task-priority-low:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child,
.tasks-index-row.task-priority-medium:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child,
.tasks-index-row.task-priority-high:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child {
  border-left: 1px solid var(--task-priority-border);
}

.tasks-index-row.task-priority-low.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child,
.tasks-index-row.task-priority-medium.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child,
.tasks-index-row.task-priority-high.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:first-child {
  border-left: 1px solid color-mix(in srgb, #10b981 45%, var(--task-priority-border));
}

.tasks-index-row.task-priority-low:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child,
.tasks-index-row.task-priority-medium:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child,
.tasks-index-row.task-priority-high:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child {
  border-right: 1px solid var(--task-priority-border);
}

.tasks-index-row.task-priority-low.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child,
.tasks-index-row.task-priority-medium.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child,
.tasks-index-row.task-priority-high.is-closed:not(.is-active):not(:has(> .col-check [data-bulk-item]:checked)) > td:last-child {
  border-right: 1px solid color-mix(in srgb, #10b981 45%, var(--task-priority-border));
}

.task-card__taskables {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.task-card__files-count {
  margin-top: 0.2rem;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.task-card__bottom {
  align-items: stretch;
  min-height: 4rem;
}

.task-card__description {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  min-height: 3.6rem;
  background: color-mix(in srgb, var(--clr-indigo) 7%, var(--clr-surface));
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-weight: 500;
  line-height: 1.45;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}

.task-card__description-text {
  flex: 1;
  min-width: 0;
}

/* Karta bez popisku (T-217): pilulka zůstává (check nevisí osamoceně v prázdném
   pruhu), ale tlumená — čárkovaný obrys místo výplně a akční text místo popisku. */
.task-card__description--empty {
  background: transparent;
  border: 1px dashed var(--clr-border);
}

.task-card__state-hint {
  color: var(--clr-text-muted);
  font-weight: 400;
  font-size: var(--fs-sm);
}

.task-card__state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.task-card__state .task-check {
  width: 2.15rem;
  height: 2.15rem;
}

.task-card__state .task-check-box {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 6px;
}

.task-card__state .task-check.is-checked .task-check-box::after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
}

.task-preview-document .doc-viewer {
  min-height: 28rem;
}

.task-preview-document .doc-viewer-canvas {
  min-height: 24rem;
}

.task-preview .entity-description {
  margin: 0;
  padding: 0.15rem 0 0;
  color: color-mix(in srgb, var(--clr-text) 86%, #fff);
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 500;
}

:root[data-theme="dark"] .task-preview .entity-description {
  color: color-mix(in srgb, var(--clr-text-2) 84%, var(--clr-text));
}

/* Úkoly: checklist (entity section + dashboard) — bez rámečků, velký checkbox */
.task-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.task-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.9rem;
}

.task-checklist-item:last-child {
  border-bottom: none;
}

.task-checklist-item.is-closed {
  color: var(--clr-text-muted);
}

.task-checklist-item.is-closed .tasks-section-desc {
  text-decoration: line-through;
}

/* T-219: úkoly v boxu pravého detail pane entity (kandidát/firma/zakázka/
   pozice, i seskupené pod VŘ) sladit s výpisem /tasks — barevný řádek dle
   priority. Stejně jako řádky ve výpisu: plné pozadí + plný rámeček dle
   priority na VŠECH stranách (žádný jednostranný barevný proužek). Proměnné
   --task-priority-* definuje sdílený blok .task-priority-{low,medium,high}
   výše (týž zdroj jako .tasks-index-row / .entity-card). Třídu nese jen `<li>`
   z partialu tasks/_checklist, který renderuje pouze OTEVŘENÉ úkoly, takže
   dashboard, uzavřená sekce ani proj-card (bez třídy) nejsou dotčeny. */
.task-checklist-item.task-priority-low,
.task-checklist-item.task-priority-medium,
.task-checklist-item.task-priority-high {
  background: var(--task-priority-bg);
  border: 1px solid var(--task-priority-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
}

.task-checklist-item.task-priority-low:last-child,
.task-checklist-item.task-priority-medium:last-child,
.task-checklist-item.task-priority-high:last-child {
  margin-bottom: 0;
}

.task-checklist-item-main {
  flex: 1;
  min-width: 0;
}

.task-checklist-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.task-checklist .entity-chip,
.tasks-index-table .entity-chip,
.page-header__title .entity-chip {
  margin-right: 0.2rem;
  font-size: var(--fs-xs);
}

.task-checklist .entity-chip__avatar,
.tasks-index-table .entity-chip__avatar,
.page-header__title .entity-chip__avatar {
  width: 1.25rem;
  height: 1.25rem;
}

/* Klikatelný řádek úkolu u entity (vede na detail úkolu). */
.task-checklist-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--clr-text);
}

.task-checklist-link:hover .tasks-section-desc {
  color: var(--clr-indigo, #6366f1);
  text-decoration: underline;
}

.tasks-section-desc {
  font-weight: 500;
}

.tasks-section-excerpt {
  color: var(--clr-text-2);
  font-size: 0.85rem;
  overflow-wrap: break-word;
}

.tasks-section-attrs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tasks-section-deadline {
  color: var(--clr-text-muted);
  font-size: 0.8rem;
}

.tasks-section-meta {
  color: var(--clr-text-muted);
  font-size: 0.8rem;
}

/* Přílohy uvnitř klikatelného řádku jsou statické (ne odkazy). */
.task-checklist-link .tasks-index-attachment {
  cursor: pointer;
}

/* Velký checkbox jako tlačítko (form se posílá po kliku). */
.task-check-form {
  display: inline-flex;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.task-check-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-border, #d1d5db);
  border-radius: 4px;
  background: var(--clr-surface);
  transition: border-color 0.12s, background 0.12s;
  position: relative;
}

.task-check:hover .task-check-box {
  border-color: var(--clr-indigo, #6366f1);
}

.task-check:focus-visible {
  outline: none;
}

.task-check:focus-visible .task-check-box {
  border-color: var(--clr-indigo, #6366f1);
  box-shadow: 0 0 0 3px var(--clr-indigo-alpha);
}

.task-check:hover .task-check-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--clr-indigo, #6366f1);
  opacity: 0.15;
  border-radius: 2px;
}

.task-check.is-checked .task-check-box {
  background: var(--clr-indigo, #6366f1);
  border-color: var(--clr-indigo, #6366f1);
}

.task-check.is-checked .task-check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Jazyky kandidáta (nested form řádky) ─────────────────────── */
.language-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.language-row__select {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Dark mode: sémantické tinty ───────────────────────────────────
   Statusové/tintové plochy (warning/success/danger/indigo) mají v light
   světlé pozadí s tmavým textem — na dark by zůstaly svítivě bílé a
   nečitelné. Tady je pro dark překreslíme na tlumené průsvitné varianty
   se světlejším textem. Light zůstává beze změny (pravidla 2, 3, 4).
   Blok kryje tinty napříč komponentami (application.css se loaduje jako
   poslední, takže přebije definice z ostatních .css). */
:root[data-theme="dark"] {
  /* Sémantické tint tokeny — používané níže i případně jinde. */
  --tint-warn-bg:    rgba(250, 199, 117, 0.15);
  --tint-warn-brd:   rgba(250, 199, 117, 0.34);
  --tint-warn-text:  #f0c07a;
  --tint-danger-bg:  rgba(239, 83, 80, 0.16);
  --tint-danger-brd: rgba(239, 83, 80, 0.34);
  --tint-danger-text:#ef8a88;
  --tint-ok-bg:      rgba(92, 196, 106, 0.15);
  --tint-ok-brd:     rgba(92, 196, 106, 0.34);
  --tint-ok-text:    #7fd68b;
}

/* Flash zprávy + form-errors (application.css). */
:root[data-theme="dark"] .flash-alert,
:root[data-theme="dark"] .form-errors {
  background: var(--tint-warn-bg);
  border-color: var(--tint-warn-brd);
  color: var(--tint-warn-text);
}
:root[data-theme="dark"] .flash-alert { border-left-color: var(--tint-warn-text); }
:root[data-theme="dark"] .form-errors { border: 1px solid var(--tint-warn-brd); }
:root[data-theme="dark"] .flash-notice {
  background: var(--tint-ok-bg);
  border-left-color: var(--tint-ok-text);
  color: var(--tint-ok-text);
}

/* Priorita úkolu (application.css). Base = neutrál, medium = amber, high = red. */
:root[data-theme="dark"] .priority-chip {
  background: var(--clr-surface-alt);
  color: var(--clr-text-2);
}
:root[data-theme="dark"] .priority-chip.priority-medium {
  background: var(--tint-warn-bg);
  color: var(--tint-warn-text);
}
:root[data-theme="dark"] .priority-chip.priority-high {
  background: var(--tint-danger-bg);
  color: var(--tint-danger-text);
}

/* Disabled/readonly inputy — beige v light; na dark jen tlumená plocha. */
:root[data-theme="dark"] input[disabled],
:root[data-theme="dark"] textarea[disabled],
:root[data-theme="dark"] input[readonly="readonly"],
:root[data-theme="dark"] textarea[readonly="readonly"],
:root[data-theme="dark"] select[disabled],
:root[data-theme="dark"] select[readonly="readonly"],
:root[data-theme="dark"] trix-editor[disabled],
:root[data-theme="dark"] trix-editor[readonly="readonly"],
:root[data-theme="dark"] label:has(input[type="checkbox"]):has(input[disabled]),
:root[data-theme="dark"] label:has(input[type="radio"]):has(input[disabled]) {
  background-color: var(--clr-surface-alt);
}

/* Duplicitní kandidát / interní poznámka (edit_form.css) — amber karta. */
:root[data-theme="dark"] .duplicates-zone-row,
:root[data-theme="dark"] .candidate-internal-note {
  background: var(--tint-warn-bg);
  border-color: var(--tint-warn-brd);
}
:root[data-theme="dark"] .candidate-internal-note { color: var(--tint-warn-text); }
:root[data-theme="dark"] .duplicates-zone-tag {
  background: var(--tint-warn-bg);
  border-color: var(--tint-warn-brd);
  color: var(--tint-warn-text);
}

/* „z CV" zvýrazněný input (edit_form.css) — indigo tint. */
:root[data-theme="dark"] .edit-field.has-from-cv-badge input,
:root[data-theme="dark"] .edit-field.has-from-cv-badge select,
:root[data-theme="dark"] .edit-field.has-from-cv-badge textarea {
  background: var(--clr-indigo-alpha);
}

/* Smazat soubor — danger hover (edit_form.css). */
:root[data-theme="dark"] .file-remove-btn:hover {
  background: var(--tint-danger-bg) !important;
  color: var(--tint-danger-text) !important;
}

/* Poznámkový banner doc-vieweru — amber (edit_form.css). */
:root[data-theme="dark"] .doc-viewer-note {
  background: var(--tint-warn-bg);
  border-color: var(--tint-warn-brd);
  color: var(--tint-warn-text);
}

/* KOP koeficient badge + cenová karta (kop.css) — success/danger/indigo tinty. */
:root[data-theme="dark"] .kop-coef-badge.is-positive {
  background: var(--tint-ok-bg);
  color: var(--tint-ok-text);
}
:root[data-theme="dark"] .kop-coef-badge.is-negative {
  background: var(--tint-danger-bg);
  color: var(--tint-danger-text);
}
:root[data-theme="dark"] .kop-price {
  background: var(--tint-ok-bg);
  border-color: var(--tint-ok-brd);
}
:root[data-theme="dark"] .kop-price-label { color: var(--tint-ok-text); }
:root[data-theme="dark"] .kop-price-side { color: var(--tint-ok-text); }
:root[data-theme="dark"] .kop-price.is-overridden {
  background: var(--clr-indigo-alpha);
  border-color: color-mix(in srgb, var(--clr-indigo) 45%, transparent);
}

/* KOP chip u pozice (funnel.css) — fialový tint. */
:root[data-theme="dark"] .kop-chip {
  background: var(--clr-indigo-alpha);
  color: var(--clr-link);
}
:root[data-theme="dark"] .kop-chip:hover {
  background: color-mix(in srgb, var(--clr-indigo) 28%, transparent);
}

/* Náborový trychtýř (funnel.css): světlé hsl pásy → na dark tmavší, ať
   text (var(--clr-text)) i počty zůstanou čitelné. Hue se zachová. */
:root[data-theme="dark"] .funnel__band {
  background: hsl(var(--h) 30% 18%);
  border-color: hsl(var(--h) 28% 26%);
}
:root[data-theme="dark"] .funnel__fill {
  background: hsl(var(--h) 40% 30%);
}
:root[data-theme="dark"] .funnel__band.is-empty .funnel__fill {
  background: hsl(var(--h) 16% 22%);
}
:root[data-theme="dark"] .funnel__band.is-empty .funnel__count {
  background: hsl(var(--h) 22% 28%);
  color: hsl(var(--h) 30% 78%);
}