/* Branding: konfigurovatelné CSS proměnné per instalace (viz claude/overview.md).
   Sidebar zůstává tmavě modrý gradient (OS KOVO placeholder, viz
   sql/migrations/010_seed_caaf_starter_data.sql), ale hlavní plocha stránek
   je teď světlá jako v KŘS (`--color-gray-50` tam), na uživatelovo přání --
   přesná paleta se doplní přes `settings.branding` (js/main.js:
   applyBranding), jakmile bude specifikace barev k dispozici. */
:root {
  /* Paleta (2026-09-26, sjednocení s tmavým režimem): šedé jen z jedné
     řady (Tailwind "slate" -- dřív se míchala se "gray" a Bootstrap
     #f8f9fa), každá barva mimo tenhle blok má svůj token. Tmavé hodnoty
     jsou v :root[data-theme="dark"] níže -- nová barva = token sem I tam,
     ne literál v pravidle. Výjimky, které záměrně zůstávají literálem:
     postranní panel (tmavý v obou režimech, poloprůhledná bílá na něm)
     a bílý text/ikony na sytých výplních (tlačítka, badge). */
  color-scheme: light;
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #1e3a8a;
  --content-bg: #f8fafc;
  --card-bg: #ffffff;
  --card-radius: 16px;
  /* Jemně odlišená plocha uvnitř karty (panel, minulý den v kalendáři) */
  --surface-subtle: #f8fafc;
  /* Neutrální podklad badge / stopa pruhu / zrušená položka */
  --surface-muted: #f1f5f9;
  /* Papír -- náhled dokumentu, podpisový pad; bílý i v tmavém režimu */
  --paper: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --primary: #1d4ed8;
  --primary-text: #ffffff;
  --primary-bg: #eff6ff;
  --info-text: #1e3a8a;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --error-bg: #fef2f2;
  --error-text: #b91c1c;
  /* Výplň "nebezpečných" prvků (smazat, počet notifikací) -- oddělená od
     --error-text, v tmavém režimu je text světle červený, výplň sytá. */
  --danger: #b91c1c;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-bg-strong: #dcfce7;
  --success-text: #166534;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --highlight-bg: #fef9c3;
  --highlight-text: #713f12;
  /* Areál s víc zápasy v jednom dni (#/nominations) -- každý areál vlastní
     tlumená výplň, text zůstává --text. */
  --venue-hl-0: #fef3c7;
  --venue-hl-1: #dcfce7;
  --venue-hl-2: #dbeafe;
  --venue-hl-3: #fce7f3;
  --venue-hl-4: #ede9fe;
  --venue-hl-5: #ffedd5;
  /* Text na sytých barevných výplních (success/warning/danger) */
  --on-accent: #ffffff;
  --overlay: rgba(15, 23, 42, 0.55);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 16px -4px rgba(15, 23, 42, 0.18),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
  --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.08), 0 12px 24px -6px rgba(15, 23, 42, 0.22),
    0 32px 64px -14px rgba(15, 23, 42, 0.32);
  --shadow-button: 0 1px 2px rgba(15, 23, 42, 0.1), 0 4px 10px -2px rgba(29, 78, 216, 0.35);
  --shadow-button-hover: 0 2px 4px rgba(15, 23, 42, 0.12), 0 8px 20px -4px rgba(29, 78, 216, 0.45);

  /* Font/icon audit (2026-09-23) -- appka dřív neměla žádnou pojmenovanou
     škálu, `font-size` se psalo natvrdo per komponenta (26 různých hodnot
     napříč souborem). Tady jen těch 7 nejčastěji použitých (dohromady
     ~90 % výskytů) -- zbytek jsou ojedinělé, přesně vyladěné hodnoty
     (např. dotykové cíle, KPI čísla), které by přejmenování na škálu jen
     zatemnilo, tak zůstávají jako literály. Hodnoty beze změny -- žádné
     viditelné zmenšení/zvětšení, jen pojmenování toho, co už existovalo. */
  --font-size-75: 0.75rem;
  --font-size-78: 0.78rem;
  --font-size-80: 0.8rem;
  --font-size-82: 0.82rem;
  --font-size-85: 0.85rem;
  --font-size-90: 0.9rem;
  --font-size-100: 1rem;
}

/* Tmavý režim (js/lib/theme.js nastaví data-theme podle volby uživatele,
   nebo systému). Jen přepsané barvy -- rozměry, písmo a vše ostatní jde
   z :root výše. Postranní panel je tmavý v obou režimech, beze změny.
   Kontrast ověřen proti --card-bg: --primary 5,8:1, --text-muted 5,7:1,
   --primary-text na --primary 7,1:1 (proto je v tmavém režimu primární
   modrá světlejší a text na tlačítkách tmavý, ne bílý). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --content-bg: #0b1120;
  --card-bg: #1e293b;
  --surface-subtle: #172033;
  --surface-muted: #334155;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --primary: #60a5fa;
  --primary-text: #0f172a;
  --primary-bg: #1a2b47;
  --info-text: #bfdbfe;
  --border: #334155;
  --border-strong: #475569;
  --error-bg: #3a1d24;
  --error-text: #fca5a5;
  --danger: #dc2626;
  --success-bg: #14291f;
  --success-bg-strong: #14532d;
  --success-text: #86efac;
  --warning-bg: #33260f;
  --highlight-bg: #3f3412;
  --highlight-text: #fde68a;
  --venue-hl-0: #3f3412;
  --venue-hl-1: #14361f;
  --venue-hl-2: #1a2e52;
  --venue-hl-3: #45182f;
  --venue-hl-4: #2e2257;
  --venue-hl-5: #45250f;
  --overlay: rgba(2, 6, 23, 0.7);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 16px -4px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 24px -6px rgba(0, 0, 0, 0.5);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-button-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 16px -4px rgba(96, 165, 250, 0.35);
}

* {
  box-sizing: border-box;
}

/* Atribut hidden musí vyhrát vždy -- bez tohohle ho přebije jakákoli
   třída s vlastním display (.link-button, .badge, ...), protože UA
   pravidlo [hidden]{display:none} má nižší prioritu než autorské CSS se
   stejnou specificitou. Reálně způsobovalo, že skryté tlačítko/formulář
   zůstávaly vidět (login "Zapomenuté heslo" přepínání). */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background-color: var(--content-bg);
  /* Jemný "zebří" vzor -- nepravidelné vlnité pruhy, skoro neviditelné
     (5% černá). background-attachment:fixed kotví vzor k VIEWPORTU, ne
     k boxu body -- díky tomu nikdy neuvidíš přechod/švy při rolování dolů,
     bez ohledu na to, jak vysoká stránka je (predchozí bug: `background`
     bez attachment se maloval jen do body boxu, který height:100% omezilo
     na výšku okna). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='none' stroke='rgba(15,23,42,0.03)' stroke-linecap='round'%3E%3Cpath d='M-20 30 Q 40 0 80 35 T 200 25' stroke-width='8'/%3E%3Cpath d='M20 80 Q 90 50 140 90 T 300 75' stroke-width='6'/%3E%3Cpath d='M-30 140 Q 30 170 90 145 T 220 155' stroke-width='9'/%3E%3Cpath d='M100 200 Q 160 230 210 195 T 340 210' stroke-width='5'/%3E%3Cpath d='M-10 260 Q 60 235 120 265 T 260 250' stroke-width='7'/%3E%3Cpath d='M180 -10 Q 220 40 200 90 T 230 160' stroke-width='6'/%3E%3Cpath d='M300 20 Q 340 70 320 130 T 350 200' stroke-width='5'/%3E%3Cpath d='M40 320 Q 100 300 150 330 T 300 315' stroke-width='8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
  min-height: 100%;
}

#app {
  min-height: 100%;
}

/* Odkazy v textu -- dřív bez pravidla, tedy prohlížečová modrá/fialová
   (navštívené), v tmavém režimu nečitelné. Třídy s vlastní barvou
   (.nav-item, .link-button, ...) mají vyšší specificitu a vyhrají. */
a {
  color: var(--primary);
}

.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Jen se skutečným hoverem (myš) -- na tabletu zůstala karta po klepnutí
   "zvednutá" a poskakovala při každém dotyku uvnitř. */
@media (hover: hover) {
  .card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
  }
}

/* --- Popup/modal (vzor z bugReportModal.js, teď jako sdílené třídy pro
   znovupoužití -- viz competitions.js "+ New competition" popup). --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  padding: 1rem;
  overflow-y: auto;
}

.modal-box {
  background: var(--card-bg);
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}

.modal-box--wide {
  max-width: 900px;
}

/* Náhled dokumentu (lib/documentPreview.js) -- široký modal, lišta se
   šipkami a stránkou, pod ní vykreslený list PDF / obrázek. */
.modal-box--preview {
  max-width: 960px;
}

.doc-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.doc-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.doc-preview-page {
  font-size: var(--font-size-90);
  color: var(--text-muted);
  min-width: 6rem;
  text-align: center;
}

.doc-preview-open {
  margin-left: auto;
}

.doc-preview-stage {
  background: var(--border);
  border-radius: 8px;
  padding: 8px;
  max-height: calc(100vh - 12rem);
  overflow: auto;
  text-align: center;
}

.doc-preview-stage canvas,
.doc-preview-stage img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  /* celý list se vejde na výšku (max-height stage minus padding 2x8 px) */
  max-height: calc(100vh - 12rem - 16px);
  width: auto;
  height: auto;
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.modal-header {
  position: sticky;
  top: 0;
  background: var(--primary);
  color: var(--primary-text);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px 12px 0 0;
}

.modal-close {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: var(--primary-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  filter: none;
  box-shadow: none;
  transform: none;
  opacity: 0.8;
}

.modal-body {
  padding: 1.1rem;
}

.modal-subheading {
  margin: 1.5rem 0 0.75rem;
  font-size: var(--font-size-90);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modal-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.import-mapping {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  margin: 1rem 0;
}

.import-mapping label {
  margin: 0 0 0.25rem;
}

.error-text {
  color: var(--error-text);
}

/* --- Auth --- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 360px;
}

.auth-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.auth-card h2 {
  margin: 0 0 1.25rem;
  font-size: var(--font-size-100);
  font-weight: 500;
  color: var(--text-muted);
}

/* Název appky vlevo, přepínač jazyka (.view-toggle) vpravo (2026-09-28). */
.auth-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Potvrzení odeslání odkazu pro obnovu hesla (2026-09-28) -- zelený box
   místo formuláře, ať je jasné, že žádost odešla. */
.auth-sent {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success);
}

.auth-sent strong {
  display: block;
  margin-bottom: 0.3rem;
}

.auth-sent p {
  margin: 0;
  font-size: var(--font-size-85);
  line-height: 1.45;
}

/* "Zapomenuté heslo?" dál od hlavního tlačítka (2026-09-28, "ať není tak
   blízko tlačítka přihlášení") -- vlastní řádek, vycentrovaný. */
.auth-forgot {
  margin-top: 1.25rem;
  text-align: center;
}

form label,
.field-label {
  display: block;
  font-size: var(--font-size-85);
  font-weight: 500;
  margin: 0.75rem 0 0.25rem;
}

/* Jednotný vzhled pro VŠECHNY textové vstupy, selecty a textarey v celé
   appce -- na typu prvku, ne na obalu (form/.inline-form/modal/...), ať
   je opravdu jedno, kde v HTML se pole nachází (viz KRS .form-control,
   stejný princip). */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-90);
  font-family: inherit;
  color: var(--text);
  background: var(--card-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: box-shadow 150ms ease, border-color 150ms ease;
  appearance: none;
  -webkit-appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  padding-right: 2rem;
  cursor: pointer;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

input[type="file"] {
  padding: 0.4rem 0.5rem;
  box-shadow: none;
}

input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-size: var(--font-size-82);
  font-weight: 500;
  background: var(--primary);
  color: var(--primary-text);
  margin-right: 0.6rem;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Zamčený stav (viz "pending approval" formulář profilu rozhodčího) se
   dřív vizuálně vůbec nelišil od aktivního -- jediné existující
   :disabled pravidlo bylo jen pro .schedule-table .cell-input. */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--content-bg);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* Editovatelná pole jemně podbarvená (2026-09-25, "občas se ztrácím
   s tím, co můžou rozhodčí vyplňovat... nebylo by dobré, aby buňky,
   které se mohou vyplnit, byly nějak podbarvené?") -- nejdřív
   vyzkoušeno jen na #/profile, po odsouhlasení rozšířeno na celou
   appku. Editovatelný input dřív měl stejné bílé pozadí jako karta
   kolem (jen tenký okraj je odlišoval), takže splýval -- jemný modrý
   nádech (--primary-bg, žádná nová barva, stejný token jako jinde
   v appce pro "info" kontext) tři stavy jasně odliší: prostý text =
   needitovatelné zobrazení, šedá (:disabled výš) = zamčeno, tahle
   modrá = vyplň mě. Checkbox/radio/file/color vynechané -- ty mají
   vlastní vizuální afordanci (přepínač/tlačítko/vzorník), podbarvení
   by tam nedávalo smysl. */
input[type="text"]:not(:disabled),
input[type="search"]:not(:disabled),
input[type="email"]:not(:disabled),
input[type="password"]:not(:disabled),
input[type="url"]:not(:disabled),
input[type="date"]:not(:disabled),
input[type="month"]:not(:disabled),
input[type="time"]:not(:disabled),
input[type="datetime-local"]:not(:disabled),
input[type="number"]:not(:disabled),
select:not(:disabled),
textarea:not(:disabled) {
  /* background-color, ne zkratka background -- ta mazala šipku selectu
     (background-image z pravidla select výše). */
  background-color: var(--primary-bg);
}

button:disabled {
  background: var(--border);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

button:disabled:hover {
  filter: none;
  box-shadow: none;
  transform: none;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-90);
  font-weight: 500;
  padding: 0.55rem 1rem;
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: var(--shadow-button);
  transition: box-shadow 150ms ease, transform 150ms ease, filter 150ms ease;
}

button:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

form button {
  width: 100%;
  margin-top: 1.25rem;
}

.error {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.65rem;
  background: var(--error-bg);
  color: var(--error-text);
  border-radius: 8px;
  font-size: var(--font-size-85);
}

/* --- App shell: levé menu (vzor z ČAAF KŘS) --- */

:root {
  --sidebar-width: 240px;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--bg-gradient-start) 0%, #142145 100%);
  z-index: 100;
  transition: transform 200ms ease;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-logo {
  padding: 1.25rem 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-text);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.4);
}

/* Nahrané logo -- bez vynuceného pozadí/rámečku (to je jen pro placeholder
   "R"), vždy celé uvnitř vyhrazeného prostoru bez oříznutí (contain, ne
   cover), šířka volná pro logo, co není čtvercové. */
.sidebar-logo-icon.has-logo {
  width: auto;
  max-width: 140px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.sidebar-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-logo-icon.has-logo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.settings-logo-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.4rem 0 0.6rem;
}

.settings-logo-preview img {
  max-width: 160px;
  height: 56px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.sidebar-logo-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar-logo-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-logo-installation {
  font-size: var(--font-size-75);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 78, 216, 0.6) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(29, 78, 216, 0.6);
  border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.sidebar-nav::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

.nav-section {
  padding: 0.5rem 0;
}

.nav-section-label {
  display: block;
  padding: 0.75rem 1.125rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.125rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: var(--font-size-90);
  font-weight: 450;
  position: relative;
  transition: background-color 150ms ease, color 150ms ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 500;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 3px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item-button {
  width: 100%;
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: none;
  box-shadow: none;
  justify-content: flex-start;
  text-align: left;
}

.nav-item-button:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

.sidebar-viewas {
  padding: 0.75rem 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-viewas label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.3rem;
}

.sidebar-viewas select {
  width: 100%;
  padding: 0.4rem 1.75rem 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  color: #fff;
  font-size: var(--font-size-78);
}

.sidebar-viewas select option {
  color: var(--text);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-avatar.has-photo {
  background: none;
  overflow: hidden;
}

.sidebar-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-logout {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.3rem;
  box-shadow: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logout .nav-icon {
  width: 16px;
  height: 16px;
  opacity: 1;
}

.sidebar-logout:hover {
  color: #fff;
  filter: none;
  box-shadow: none;
  transform: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

/* ✕ v záhlaví vysunutého menu (2026-09-28, "po otevření menu nevidím
   button na skrytí menu") -- ☰ je pod overlayem, aby nezakrývalo logo,
   takže otevřené menu potřebuje vlastní zavírací tlačítko. Jen na mobilu. */
.sidebar-close {
  display: none;
  margin-left: auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-size: 1rem;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.16);
  filter: none;
  box-shadow: none;
  transform: none;
}

.app-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding-top: 1.5rem;
}

.sidebar-toggle {
  display: none;
  width: auto;
  margin: 0 0 1rem 1.5rem;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* Notifikační zvoneček -- fixed nezávisle na sidebaru/topbaru (RefOS
   žádný trvalý topbar nemá), ať je viditelný na mobilu i desktopu bez
   zásahu do responzivního chování .sidebar/.app-main. z-index nad
   sidebarem (100) i jeho overlayem (99), ale pod modálními okny (9500),
   ať modal správně překryje i panel notifikací. */
.top-actions {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.notif-wrap,
.lang-wrap,
.theme-wrap {
  position: relative;
}

/* Místo pro .top-actions (2026-09-26, "překrývá to datum na dashboardu"):
   tlačítka jsou fixed vpravo nahoře (top 1rem, výška 2.25rem) a obsah
   .container začíná hned pod 1.5rem odsazením. Pravý okraj obsahu
   (max 960px, vycentrovaný vedle 240px sidebaru) do nich zasahuje zhruba
   pod 1400px šířky okna, široké stránky (.container--wide) skoro vždy --
   tam obsah posunout pod tlačítka. Na mobilu (<=860px) sedí tlačítka na
   stejném řádku jako ☰ a místo netřeba. */
@media (min-width: 861px) and (max-width: 1400px) {
  .app-main {
    padding-top: 4rem;
  }
}

@media (min-width: 861px) {
  .app-main:has(.container--wide) {
    padding-top: 4rem;
  }
}

/* Výběr jazyka vedle zvonečku -- tlačítko i panel sdílí .notif-btn /
   .notif-panel, tady jen kód jazyka a položky nabídky. */
.lang-code {
  position: absolute;
  bottom: -3px;
  right: -4px;
  min-width: 1.1rem;
  height: 0.95rem;
  padding: 0 0.2rem;
  background: var(--primary);
  color: var(--primary-text);
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-panel.lang-panel,
.notif-panel.theme-panel {
  width: 220px;
}

/* Položka rozbalovací nabídky v horní liště (jazyk, vzhled). */
.menu-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.7rem 1rem;
  background: transparent;
  color: var(--text);
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  text-align: left;
  font-size: var(--font-size-85);
}

.menu-option:last-child {
  border-bottom: none;
}

.menu-option:hover {
  background: var(--surface-subtle);
  filter: none;
  box-shadow: none;
  transform: none;
}

.menu-option.selected {
  color: var(--primary);
  font-weight: 600;
}

.menu-option.selected::after {
  content: "✓";
}

.menu-option:disabled {
  background: transparent;
}

.notif-btn {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  padding: 0;
}

.notif-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.notif-btn svg {
  width: 18px;
  height: 18px;
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  background: var(--danger);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(320px, calc(100vw - 2rem));
  max-height: 400px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* Hlavička panelu -- nadpis + "Smazat vše", přilepená nahoře. */
.notif-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.notif-panel-title {
  font-size: var(--font-size-85);
  font-weight: 600;
  color: var(--text);
}

/* Položka = obsah (odkaz) + tlačítko ✕ vedle něj (tlačítko nesmí být v <a>). */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.notif-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.link-button.icon-only.notif-delete {
  width: 26px;
  height: 26px;
  padding: 0.25rem;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.link-button.icon-only.notif-delete:hover {
  background: var(--error-bg);
  border-color: var(--error-text);
  color: var(--error-text);
}

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

.notif-item.unread {
  background: var(--primary-bg);
}

.notif-item:has(a.notif-link:hover) {
  background: var(--content-bg);
}

.notif-title {
  font-size: var(--font-size-85);
  font-weight: 600;
  color: var(--text);
}

.notif-msg {
  font-size: var(--font-size-80);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.notif-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* Patička panelu: systémová upozornění na tomto zařízení (lib/push.js).
   Přilepená dole, ať je vidět i u dlouhého seznamu. */
.notif-push {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
}

.notif-push[hidden] {
  display: none;
}

.notif-push-text {
  flex: 1;
  font-size: var(--font-size-78);
  color: var(--text-muted);
}

.notif-empty {
  padding: 1rem;
  margin: 0;
  font-size: var(--font-size-85);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 860px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .sidebar-close {
    display: inline-flex;
  }
  /* Horní lišta (datum, téma, jazyk, zvoneček, z-index 500) by jinak
     překryla záhlaví otevřeného menu i s ✕ a logem. */
  .app-shell:has(.sidebar.mobile-open) .top-actions {
    display: none;
  }
  /* ☰ připnuté nahoře vlevo jako .top-actions vpravo (2026-09-28, "ať se
     hamburgerový button posouvá na vrchu obrazovky, stejně jako ostatní
     buttony") -- dřív součást obsahu, při scrollu odjel. z-index pod
     overlayem otevřeného menu (99), ať ho vysunutý sidebar překryje a
     nezakrývá logo; zavírá se klepnutím na overlay. Obsah začíná pod ním. */
  .app-main {
    margin-left: 0;
    padding-top: 4.25rem;
  }
  .sidebar-toggle {
    display: inline-flex;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 98;
    margin: 0;
    /* Stejná kulatá 2.25rem tlačítka jako .notif-btn vpravo. */
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }

  /* Mobile-compat nález 2026-09-23: .link-button má napříč celou appkou
     dotykovou plochu ~25px (padding 0.3rem + font-size 0.78rem), pod
     doporučeným 44px. Zvětšeno JEN na mobilu -- na desktopu by 44px
     vysoké akční tlačítko v každém řádku tabulky zbytečně nafouklo husté
     seznamy (Edit/Delete/Open v Games, Users, referee-categories, ...). */
  .link-button {
    padding: 0.6rem 0.85rem;
    min-height: 44px;
  }
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.container h2 {
  margin: 0 0 1rem;
  font-size: var(--font-size-90);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.kv dt {
  color: var(--text-muted);
  font-size: var(--font-size-90);
}

.kv dd {
  margin: 0;
  font-size: var(--font-size-90);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-90);
}

.data-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.5rem 0.4rem 0;
  /* Ukotvené záhlaví (bug report 2026-09-23, "ať se posouvá (ukotvi)") --
     .table-scroll řeší jen horizontální přetečení, svisle se posouvá
     celá stránka (RefOS nemá trvalý topbar, proto top:0 bez offsetu).
     Vlastní pozadí je nutné, jinak by řádky tabulky pod záhlavím
     prosvítaly/překrývaly text při scrollu. */
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 2;
}

.data-table td {
  padding: 0.4rem 0.5rem 0.4rem 0;
  border-bottom: 1px solid var(--border);
  /* Bez tohohle se buňky zarovnávaly nahoru -- na #/users nápadné u řádků,
     kde se jméno + odznak (creator) zalomí na dva řádky a vedlejší
     tlačítko "Open"/checkbox zůstane nahoře místo na střed řádku. */
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color 120ms ease;
}

.data-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--primary) 6%, transparent);
}


/* Zvýrazní řádek faulu, co se právě edituje ve formuláři pod tabulkou
   (#/matches/:id penalty report, 2026-09-21) -- ať je jasné, kam se
   předvyplněná data ve formuláři vážou. */
.data-table tbody tr.row-editing {
  background: var(--primary-bg);
}

.empty {
  color: var(--text-muted);
  font-size: var(--font-size-90);
  margin: 0;
}

/* Řádek se zápasy dne pod #/availability checklistem (2026-09-20) --
   menší odsazení a bez horního borderu, ať vizuálně "patří" k řádku
   data nad sebou místo aby vypadal jako samostatný záznam tabulky. */
.availability-matches-row td {
  padding-top: 0;
  padding-bottom: 0.5rem;
  border-top: none;
}

.availability-matches-row .hint-inline {
  margin: 0;
}

/* Zápasy dne jako štítky (2026-09-28) -- čas, zkratka soutěže, týmy. */
.avail-match-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.avail-match-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
  font-size: var(--font-size-80);
  color: var(--text);
  max-width: 100%;
}

.avail-match-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.avail-match-comp {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}

/* Jarní bonusový den (2026-09-23) -- hvězdička u data v #/availability
   checklistu, ať referee ví při nabídce termínů, které dny se počítají
   do jarního bonusu (KR je zadává na #/payroll/settings). */
.bonus-day-star {
  color: var(--warning);
}

.loading {
  color: var(--text-muted);
  text-align: center;
  padding: 3rem 1rem;
}

/* --- RBAC builder --- */

.container {
  max-width: 960px;
}

/* Stránky se širokou tabulkou (např. rozvrh soutěže) si smí vyžádat víc
   místa než běžný .container strop -- viz #view v layout.js, kam si
   view.js sama přidá tuto modifikační třídu. */
.container--wide {
  max-width: 1600px;
}

/* Nástěnka (#/bulletin, 2026-09-22) -- jednotlivé příspěvky jsou vlastní
   .card prvky uvnitř zvláštního obalu (ne přímé děti #view), takže bez
   vlastního gap by na sebe lepily beze mezery -- #view/.container má
   svůj display:flex/gap jen pro SVÉ přímé děti. */
.bulletin-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bulletin-post-body {
  line-height: 1.5;
}

/* Dlouhé URL/slova bez mezer (odkaz na meeting apod.) by jinak na mobilu
   vytlačila kartu za okraj obrazovky. */
.bulletin-post-body,
.bulletin-reply-body,
.bulletin-topic-title {
  overflow-wrap: anywhere;
}

/* renderRichText() (2026-09-23, "tučné písmo, nadpisy, kurzíva,
   obrázky") vrací skutečné <p>/<h4>/<img> bloky, ne holý escapovaný
   text -- white-space:pre-line už není potřeba (byl to náhradní trik za
   chybějící <br>, teď je zalomení řádků skutečné HTML). Reset marginů na
   první/poslední blok, ať tělo příspěvku nemá zbytečnou mezeru nahoře/dole
   navíc k marginu karty. */
.bulletin-post-body p,
.bulletin-reply-body p {
  margin: 0.5rem 0;
}

.bulletin-post-body > :first-child,
.bulletin-reply-body > :first-child {
  margin-top: 0;
}

.bulletin-post-body > :last-child,
.bulletin-reply-body > :last-child {
  margin-bottom: 0;
}

.bulletin-post-body h4,
.bulletin-reply-body h4 {
  margin: 0.75rem 0 0.35rem;
  font-size: var(--font-size-100);
  font-weight: 600;
}

.bulletin-post-body ul,
.bulletin-post-body ol,
.bulletin-reply-body ul,
.bulletin-reply-body ol {
  margin: 0.5rem 0;
  padding-left: 1.4rem;
}

.bulletin-post-body li,
.bulletin-reply-body li {
  margin: 0.15rem 0;
}

.bulletin-image {
  max-width: 100%;
  border-radius: 8px;
  margin: 0.4rem 0;
  display: block;
}

/* Komentáře k týmům na detailu zápasu (085_team_comments.sql,
   2026-09-22) -- dva sloupce (home/away tým), na mobilu se zabalí pod
   sebe (auto-fit), stejný vzor jako .eval-score-grid. */
.team-comment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.team-comment-column {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem;
}

.team-comment-list {
  margin: 0.5rem 0;
}

.team-comment-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.team-comment-entry:last-child {
  border-bottom: none;
}

.team-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.team-comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.team-comment-form button {
  width: auto;
  align-self: flex-start;
  margin-top: 0;
}

/* Karta hodnocení jednoho rozhodčího (#/referee-overview/:id, 2026-09-22)
   -- listování šipkami mezi rozhodčími "jako v knížce". Block div, ne
   .link-button přímo -- nepotřebuje align-self fix jako .bulletin-back-link
   o kus níž, block prvky se přes align-items:stretch na #view chovají
   normálně (100% šířka je jejich výchozí chování tak jako tak). */
.referee-card-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.referee-card-section {
  margin-top: 1rem;
}

.referee-card-section h4 {
  margin: 0 0 0.4rem;
  font-size: var(--font-size-80);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.referee-card-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.referee-card-entry:last-child {
  border-bottom: none;
}

/* Dashboard karty hodnocení (#/referee-overview/:id, 2026-09-22) --
   sloupce "skóre podle pozice". <=24px silné, 4px zaoblený konec, roste
   od jedné základny (marks-and-anatomy spec z dataviz skillu). */
.referee-position-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.referee-position-label {
  width: 130px;
  flex-shrink: 0;
  font-size: var(--font-size-80);
  color: var(--text-muted);
}

.referee-position-track {
  flex: 1;
  height: 18px;
  background: var(--content-bg);
  border-radius: 9px;
  overflow: hidden;
}

.referee-position-fill {
  height: 100%;
  border-radius: 9px;
  background: var(--primary);
}

.referee-position-fill--good {
  background: var(--success);
}

.referee-position-fill--poor {
  background: var(--error-text);
}

.referee-position-value {
  width: 42px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--font-size-80);
  font-weight: 600;
}

/* Srovnání s populací -- "meter": vyplnění nese závažnost, nevyplněná
   dráha je jen neutrální podklad (marks-and-anatomy meter spec). */
.referee-benchmark-track {
  position: relative;
  height: 10px;
  background: var(--content-bg);
  border-radius: 5px;
  margin: 0.6rem 0 0.4rem;
}

.referee-benchmark-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--primary-bg);
  border-radius: 5px;
}

.referee-benchmark-avg {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--text-muted);
  transform: translateX(-1px);
}

.referee-benchmark-marker {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  transform: translateX(-7px);
  background: var(--primary);
}

.referee-benchmark-marker--good {
  background: var(--success);
}

.referee-benchmark-marker--poor {
  background: var(--error-text);
}

.referee-benchmark-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-75);
  color: var(--text-muted);
}

/* Odkaz zpět na detailu tématu (#/bulletin/:id) -- .link-button jako
   přímé dítě #view/.container by jinak zdědilo align-items:stretch
   (viz .container výš) a natáhlo se přes celou šířku stránky. */
.bulletin-back-link {
  align-self: flex-start;
}

/* Seznam témat (#/bulletin) -- řádky uvnitř jedné karty, stejný vzor jako
   .notif-item (blokový odkaz, dělicí čára, hover podklad), jen s dvěma
   sloupci (titulek+náhled vlevo, autor/aktivita/počet odpovědí vpravo). */
.bulletin-topic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.bulletin-topic-row:last-child {
  border-bottom: none;
}

.bulletin-topic-row:hover {
  background: var(--content-bg);
}

/* Připnutá témata (2026-09-23, "chci přidat možnost připnout důležité
   oznámení nahoru") -- jemné zvýraznění, ať je vidět i mimo pořadí
   seznamu (řazení pinned nahoru řeší JS, tohle jen vizuálně odliší). */
.bulletin-topic-row--pinned {
  background: var(--warning-bg);
}

/* #/documents (2026-09-26) -- ikona typu souboru vlevo od titulku/popisku,
   stejný řádkový vzor jako Věstník (.bulletin-topic-row), jen s přidanou
   ikonou. Badge typu (PDF/Excel/Word/Link...) sedí hned za titulkem. */
.document-item-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.document-item-type {
  flex-shrink: 0;
}

/* Seznam: název · typ · popis v JEDNOM řádku (2026-09-28, "název
   dokumentu, popis a pdf formát dej u seznamu do jednoho řádku") --
   dlouhý popis se ořízne trojtečkou, pak teprve název. */
.document-item {
  flex-wrap: wrap;
}

.document-item .button-row {
  margin-left: auto;
}

/* flex-basis 220px: na desktopu se řádek vejde celý, na telefonu se
   tlačítka zalomí pod název místo toho, aby ho zmáčkla na nulu. */
.document-item-main {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.document-item-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-item-desc {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

/* Telefon: mobilní pravidlo Věstníku (.bulletin-topic-row pod 860 px, níž
   v souboru) přepíná řádek na sloupec -- u dokumentu se tím flex-basis
   220px z .document-item-main změnil na VÝŠKU a mezi ikonou, názvem a
   tlačítky zůstaly obří mezery. Dokument zůstává v řádku (ikona + název,
   tlačítka se zalomí pod ně), popis jde na vlastní řádek. Stojí PŘED
   dlaždicovými pravidly (.documents-grid .document-item), ta ho přebijí. */
@media (max-width: 860px) {
  .document-item.bulletin-topic-row {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem 0.75rem;
  }

  .document-item-main {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }

  .document-item-title {
    max-width: none;
  }

  .document-item-desc {
    flex-basis: 100%;
  }
}

/* Velká ikona s typem souboru uvnitř -- jen v dlaždicovém režimu. */
.document-thumb {
  display: none;
}

/* Přepínač seznam/dlaždice (2026-09-26, "dával bych lidem na výběr") --
   čistě zobrazovací preference tohohle prohlížeče (localStorage), ne
   appková data, proto stejný vzor jako .view-as-select apod. -- dvě malá
   tlačítka vedle sebe, aktivní zvýrazněné. */
.view-toggle {
  display: flex;
  gap: 0.25rem;
}

.view-toggle-btn {
  width: auto;
  padding: 0.35rem 0.6rem;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  border: 1px solid var(--border);
}

.view-toggle-btn.active {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary);
}

.view-toggle-btn:hover {
  filter: none;
  background: var(--content-bg);
}

/* Dlaždicový režim -- stejné řádky (.document-item), jen přeskládané do
   mřížky jako karty (vzor .mentor-tile-grid). Necílí .bulletin-topic-row
   obecně, jen uvnitř #/documents (`.documents-grid`), ať se nedotkne
   Věstníku, který stejnou třídu taky používá. */
.documents-grid .document-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

/* Čtvercová karta (2026-09-28, "udělej z toho čtvercovou kartu, ideálně
   s větším obrázkem a druh souboru umísti do toho obrázku") -- aspect-ratio
   drží čtverec, velká ikona (.document-thumb) si vezme zbylé místo; když se
   obsah nevejde (dlouhý název + 3 tlačítka), karta se radši protáhne, než
   aby se ořízla tlačítka. */
.documents-grid .document-item {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.6rem;
  aspect-ratio: 1;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
}

.documents-grid .document-item:last-child {
  border-bottom: 1px solid var(--border);
}

.documents-grid .document-item-icon,
.documents-grid .document-item-type {
  display: none;
}

.documents-grid .document-thumb {
  flex: 1 1 auto;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.document-thumb-emoji {
  font-size: 3rem;
  line-height: 1;
}

.document-thumb-label {
  font-size: var(--font-size-75);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.documents-grid .document-thumb--pdf {
  background: var(--error-bg);
  color: var(--error-text);
}

.documents-grid .document-thumb--word,
.documents-grid .document-thumb--link {
  background: var(--primary-bg);
  color: var(--primary);
}

.documents-grid .document-thumb--sheet {
  background: var(--success-bg);
  color: var(--success-text);
}

.documents-grid .document-thumb--slides {
  background: var(--warning-bg);
  color: var(--warning);
}

.documents-grid .document-item-main {
  flex: 0 0 auto;
  flex-direction: column;
  /* nowrap i na telefonu (mobilní výjimka seznamu výš dává wrap) -- ve
     sloupci s wrap by nowrap název roztáhl dlaždici za okraj. */
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.15rem;
}

.documents-grid .document-item-title {
  max-width: none;
}

.documents-grid .document-item-desc {
  flex: 0 0 auto;
}

.documents-grid .document-item .button-row {
  width: 100%;
  margin-left: 0;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.documents-grid .document-item .button-row .link-button {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 0.3rem;
}

/* Na telefonu je dlaždice přes celou šířku -- čtverec by zabral skoro
   celou obrazovku, takže tam jen pevně vysoká ikona místo aspect-ratio. */
@media (max-width: 480px) {
  .documents-grid .document-item {
    aspect-ratio: auto;
  }

  .documents-grid .document-thumb {
    min-height: 110px;
  }
}

.bulletin-topic-row--pinned:hover {
  background: var(--warning-bg);
  filter: brightness(0.97);
}

.bulletin-pin-icon {
  font-size: 0.85em;
}

.bulletin-topic-tags {
  display: flex;
  gap: 0.4rem;
  margin: 0.3rem 0;
}

/* Rulings index jako levé menu (2026-09-25, "ten index bych si
   představoval jako levé menu věstníku, než aby to bylo pod ním") --
   dřív samostatná karta pod hlavním seznamem, teď vedle něj. Sidebar má
   pevnou šířku a je sticky (zůstane vidět při scrollování dlouhého
   seznamu témat), hlavní karta bere zbytek -- pod .bulletin-breakpoint
   (860px, stejná hranice jako jinde v appce) se rozloží pod sebe. */
.bulletin-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.bulletin-sidebar {
  flex: 0 0 300px;
  position: sticky;
  top: 1rem;
}

.bulletin-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 860px) {
  /* stretch, ne flex-start -- ve sloupci by flex-start nechal kartu
     široké podle obsahu a jednořádkový náhled (.bulletin-topic-snippet,
     nowrap) by ji roztáhl daleko za okraj mobilu. */
  .bulletin-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .bulletin-sidebar {
    flex-basis: auto;
    width: 100%;
    position: static;
  }

  /* Autor/aktivita/štítky pod titulek místo pravého sloupce -- vedle
     sebe by na mobilu titulku zbylo jen pár desítek px. Meta selektor
     je složený, protože základní .bulletin-topic-meta stojí v souboru
     níž a jinak by tuhle výjimku přebil. */
  .bulletin-topic-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .bulletin-topic-row .bulletin-topic-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
  }
}

/* Rulings index (2026-09-23, "speciální otevírací menu... podle kategorií
   a čísle bude řadit automaticky k sobě") -- nativní <details>/<summary>
   accordion, jedna skupina na kategorii. */
.bulletin-rulings-group {
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0;
}

.bulletin-rulings-group:last-child {
  border-bottom: none;
}

.bulletin-rulings-group summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bulletin-rulings-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-left: 1.4rem;
}

.bulletin-rulings-item {
  color: var(--text);
  text-decoration: none;
}

.bulletin-rulings-item:hover {
  text-decoration: underline;
}

.bulletin-topic-main {
  min-width: 0;
}

.bulletin-topic-title {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.bulletin-topic-snippet {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--font-size-85);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulletin-topic-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
  text-align: right;
}

/* Odpověď komise vytažená nahoru diskuze (uživatelský požadavek
   2026-09-22, "finální doplnění k tématu") -- levý akcentní pruh +
   jemné primární pozadí, ať je vizuálně jasně odlišená od běžné
   diskuze pod tím, ne jen badge textem. */
.bulletin-reply {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.bulletin-reply:last-child {
  border-bottom: none;
}

.bulletin-reply--committee {
  padding-left: 0.85rem;
  border-left: 3px solid var(--primary);
  background: var(--primary-bg);
  border-radius: 0 8px 8px 0;
  margin-bottom: 0.75rem;
}

.bulletin-reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bulletin-reply-author {
  font-weight: 600;
  font-size: 0.88rem;
}

.bulletin-reply-body {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Toolbar nad textareou pro nové téma/odpověď (2026-09-23, "tučné písmo,
   nadpisy, kurzíva, vkládání obrázků") -- vkládá znaky přímo do textarey
   na pozici kurzoru (lib/richText.js), žádný contenteditable. Malé
   čtvercové tlačítko na styl, konzistentní s .link-button.icon-only. */
.richtext-toolbar {
  display: flex;
  gap: 0.3rem;
  margin: 0.3rem 0;
}

.richtext-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: var(--font-size-85);
  cursor: pointer;
}

.richtext-btn:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  /* Hlavičky s víc akcemi (např. #/profile -- Change password/Change
     details/Request deactivation + badge) se bez wrapu na užší obrazovce
     zaříznou -- .button-row uvnitř už wrap umí, ale rodič mu to musel
     dovolit. */
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.card-header h2,
.card-header h3 {
  margin: 0;
}

.match-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.map-search {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.map-search input {
  flex: 1;
}

.map-search button {
  width: auto;
  flex-shrink: 0;
}

.map-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.map-search-result {
  text-align: left;
  background: var(--surface-subtle);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 400;
  font-size: var(--font-size-82);
  padding: 0.4rem 0.6rem;
}

.map-search-result:hover {
  background: var(--primary-bg);
  filter: none;
  box-shadow: none;
  transform: none;
}

.venue-map-mount {
  height: 280px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 0.6rem;
  overflow: hidden;
}

/* Mapa tras posádky na stadion (matches.js "Zobrazení cest") -- vyšší než
   .venue-map-mount, ať se vejdou domácí adresy rozeseté po celém kraji. */
.routes-map-mount {
  height: 360px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 0.6rem;
  overflow: hidden;
}

.routes-map-legend {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
}

.routes-map-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-85);
}

.routes-map-legend-item--unavailable {
  color: var(--text-muted);
}

/* Klikací varianta (meeting point modal, "vybrat rozhodčího a přiblížit
   na jeho trasu") -- mobile-compat nález 2026-09-23, obyčejná
   .routes-map-legend-item nemá žádný padding, dotyková plocha byla jen
   výška řádku textu (~20px). Statická (needitovatelná) legenda pod
   "Driving distance" zůstává beze změny -- tahle třída se přidává jen
   navíc. */
.routes-map-legend-item--clickable {
  padding: 0.5rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

.routes-map-legend-item--clickable:hover {
  background: var(--primary-bg);
}

.routes-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.route-marker span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
}

.route-marker--venue {
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.map-thumb-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--primary);
  font-size: var(--font-size-78);
  font-weight: 500;
}

.map-thumb {
  width: 120px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.map-thumb-large {
  width: 100%;
  max-width: 480px;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 0.75rem;
}

.referee-photo-preview {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin: 0.4rem 0 0.8rem;
}

/* Aktuální a navržená fotka vedle sebe při schvalování žádosti o změnu. */
.referee-photo-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.referee-photo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.referee-photo-preview.pending {
  border: 2px solid var(--error-text);
}

/* Sroluté "My profile" (2026-09-26) -- kompaktní shrnutí místo celého
   formuláře, kdykoli je profil zamčený (čeká na posouzení nebo je
   aktivní a nikdo neklikl "Change details"). */
.profile-summary {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.profile-summary-fields {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.85rem;
}

.profile-summary-fields dt {
  color: var(--text-muted);
  font-weight: 500;
}

.profile-summary-fields dd {
  margin: 0;
}

/* Bug report 2026-09-26, "Confirm details & sign declaration tento button
   je nalepený na předchozím okně" -- `.button-row button` si dole v souboru
   natvrdo vynuluje margin-top (kvůli jiným místům, kde .button-row sedí
   hned pod .hint-inline, který si mezeru nese sám). Tady ale přímo před
   tlačítkem může být poslední pole formuláře (input/select bez
   margin-bottom) nebo skrytá #codex-section -- bez vlastní mezery se
   tlačítko lepí přímo na ně. */
#profile-form > .button-row {
  margin-top: 1.25rem;
}

/* Bug report 2026-09-23, "sekce se mi trochu překrývají" -- role-sekce se
   od zavedení hledání (#contacts-search) renderují do jednoho obalového
   <div id="contacts-results">, ne přímo jako děti .container (to je jediné,
   co dává sourozeneckým .card gap:1.25rem, viz .container výš). Bez
   vlastního gapu tu byly karty slepené na sebe, .card:hover (translateY +
   stín) pak vypadal jako přesah do sousední karty. */
.contacts-results {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Širší než výchozích 520px (.modal-box) -- fotka, údaje a QR vedle sebe
   ve třech sloupcích potřebují víc místa, jinak by se QR na běžnou šířku
   modalu zalomilo pod ně (uživatelův požadavek: vedle, ne pod). Na úzkém
   viewportu flex-wrap pořád spolehlivě zalomí. */
.contact-modal-box {
  max-width: 640px;
}

.contact-modal-grid {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contact-modal-photo {
  flex-shrink: 0;
}

.contact-modal-grid .kv {
  flex: 1;
  min-width: 200px;
  gap: 0.65rem 1rem;
}

/* Větší než výchozí .kv (0.9rem) -- v popupu vedle 140px fotky/QR kódu
   vizuálně splývá s celkem, ne aby zůstal jako drobný vedlejší text. */
.contact-modal-grid .kv dt {
  font-size: 1.05rem;
}

.contact-modal-grid .kv dd {
  font-size: 1.1rem;
}

.contact-photo-large {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.contact-photo-placeholder {
  background: var(--content-bg);
}

.contact-qr-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  width: 140px;
}

.contact-qr-section .hint-inline {
  margin: 0;
}

.signature-pad {
  display: block;
  width: 100%;
  max-width: 400px;
  height: 150px;
  background: var(--paper);
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin: 0.75rem 0;
  touch-action: none;
  cursor: crosshair;
}

/* Náhled prohlášení (nepodepsaný koncept) + políčko podpisu pod ním
   (2026-09-20) -- klik na políčko otevře openSignatureModal(). */
.declaration-preview-frame {
  display: block;
  width: 100%;
  height: 480px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0.75rem 0;
  background: var(--paper);
}

.declaration-sign-field {
  display: block;
  width: 100%;
  padding: 0.85rem;
  border: 2px dashed var(--primary);
  border-radius: 8px;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.declaration-sign-field:hover {
  background: var(--primary);
  color: var(--primary-text);
}

/* Prostý barevný odkaz na data uvnitř buňky (např. liga -> její rozvrh) --
   na rozdíl od .link-button tohle NENÍ akce/tlačítko, jen navigace k
   souvisejícímu záznamu, proto zůstává jako obyčejný text link. */
.table-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.table-link:hover {
  text-decoration: underline;
}

.map-link {
  margin-left: 0.6rem;
  font-size: var(--font-size-75);
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  vertical-align: middle;
}

.map-link:hover {
  text-decoration: underline;
}

.button-link {
  background: var(--primary);
  color: var(--primary-text);
  text-decoration: none;
  font-size: var(--font-size-85);
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  box-shadow: var(--shadow-button);
  transition: box-shadow 150ms ease, transform 150ms ease, filter 150ms ease;
}

.button-link:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

/* Malé "sekundární" akční tlačítko -- používané napříč celou appkou pro
   Edit/Delete/Cancel/Open v řádcích tabulek i vedle primary submitu ve
   formulářích (Cancel edit). Vždy vypadá jako tlačítko, nikdy jako
   podtržený text -- viz uživatelský požadavek "nechci buttny mít dělané
   jako text, ale jako hezké UX buttony (jednotně skrz systém)". Platí i
   pro holé <a> se stejnou třídou (Open/Edit odkazy v řádcích -- routují
   přes hash, ale vizuálně mají být nerozeznatelné od <button>).
   Světle modré pozadí (--primary-bg, 2026-09-20) místo bílého/--card-bg --
   uživatelské hlášení, že tlačítka na bílé kartě splývala s pozadím a
   nebyla dost vidět ("Mark all as available" konkrétně, ale platí to pro
   všechny .link-button). */
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-78);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  background: var(--primary-bg);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.link-button:hover {
  filter: none;
  box-shadow: none;
  transform: none;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
}

.link-button.danger {
  background: var(--error-bg);
  border-color: var(--error-text);
  color: var(--error-text);
}

/* Plné (ne obrysové) tlačítko pro potvrzení destruktivní akce --
   confirmDialog.js, stejný vzor jako .link-button.primary, jen v barvě
   chyby místo primary. */
.button-danger {
  background: var(--danger);
  border-color: var(--error-text);
  color: var(--on-accent);
}

.button-danger:hover {
  filter: brightness(1.08);
}

.link-button.danger:hover {
  background: var(--danger);
  border-color: var(--error-text);
  color: var(--on-accent);
}

/* Zvýrazněná varianta pro primární akci řádku (např. Save v editovatelné
   tabulce rozvrhu) -- plná barva místo obrysu, jinak stejné rozměry. */
.link-button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
}

.link-button.primary:hover {
  filter: brightness(1.08);
  color: var(--primary-text);
}

/* Ikonková varianta -- Save/Open/Cancel v rozvrhu soutěže (vzor z KŘS
   termínovky, kde jsou akce taky jen ikonky, ne text). */
.link-button.icon-only {
  padding: 0.35rem;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.link-button.icon-only svg {
  width: 16px;
  height: 16px;
}

/* Sjednocená velikost pro drobné SVG ikonky vložené přímo do textového
   toku (tabulkové hlavičky, popisky) -- bez tohohle měly různá místa
   natvrdo různé width/height atributy (14px vs. 16px) a navíc žádný
   vertical-align, takže seděly výš než okolní text ("rozházené nahoru
   dolů"). Velikost drží stejnou stopu jako .link-button.icon-only svg. */
.icon-inline {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  flex-shrink: 0;
}

/* ZÁMĚRNĚ ne display:flex -- na <td> to zruší přirozené natažení buňky
   na výšku řádku (flex/grid item si bere jen výšku obsahu), takže
   vertical-align:middle (.data-table td výše) na ni přestane působit a
   tlačítko/odkaz zůstane přilepené nahoře, jakmile sousední buňka v
   řádku zalomí na víc řádků (ověřeno živě -- getBoundingClientRect
   potvrdil, že .actions buňka byla nižší než řádek). Místo flexboxu
   normální inline tok + mezera mezi sourozenci přes margin-left. */
.data-table .actions {
  white-space: nowrap;
}

.data-table .actions > * + * {
  margin-left: 0.4rem;
}

/* Drag&drop řazení na #/competitions (2026-09-23, "možnost přetahování
   nahoru a dolů"). Úchyt samotný je draggable (ne celý řádek), ať
   nekoliduje s výběrem textu/kliky na Edit/Delete ve stejném řádku. */
.drag-handle-cell {
  width: 1.5rem;
  padding-right: 0;
}

.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 1.1rem;
  user-select: none;
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
}

tr.dragging {
  opacity: 0.4;
}

tr.drag-over {
  box-shadow: inset 0 2px 0 var(--primary);
}

.kit-swatch {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.kit-swatch-empty {
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--font-size-78);
}

.kit-cell {
  white-space: nowrap;
}

.tv-broadcast-cell {
  text-align: center;
}

/* Doprovodná činnost v termínové listině -- zaškrtávátko + počet míst. */
.support-slots-cell {
  white-space: nowrap;
}

.support-slots-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.schedule-table input.support-slots-input.cell-input {
  width: 3.6rem;
  min-width: 0;
}

/* Hrací den už přidaný jako bonusový (2026-09-24, #/payroll/settings
   seznam hracích dnů) -- stejné jemné zvýraznění jako připnutá témata
   věstníku, ať je vidět bez nutnosti hledat odznak "Added" v posledním
   sloupci. */
.bonus-day-row--added {
  background: var(--warning-bg);
}

/* Textový seznam dresů v selectu už uživatel vidět nepotřebuje -- jen
   barevnou grafiku, výběr "kdyžtak jako seznam" (uživatelský požadavek
   2026-09-20). Select zůstává plně funkční, jen je neviditelný
   (opacity:0) a položený přes celý barevný odznak -- klik na odznak tak
   ve skutečnosti klikne na select a otevře nativní nabídku k výběru
   (běžný trik "invisible select overlay", funguje i na dotyku/klávesnici,
   žádné vlastní JS UI navíc). */
.kit-picker {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.kit-picker .kit-swatch,
.kit-picker .kit-swatch-empty {
  pointer-events: none;
}

/* Select je v DOM PŘED odznakem (viz kitPickerHtml) -- díky
   position:absolute se vykreslí nad ním bez ohledu na pořadí (pravidla
   CSS "painting order": pozicované prvky se vždy kreslí nad statickými),
   pořadí v DOM je zvolené jen kvůli sousednímu selektoru níž
   (select:focus + .kit-swatch). */
.kit-picker select.cell-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.kit-picker select.cell-input:disabled {
  cursor: default;
}

.kit-picker select.cell-input:focus + .kit-swatch,
.kit-picker select.cell-input:focus + .kit-swatch-empty {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Games (2026-09-20): červený text místo černého u nedávno změněné
   termínové listiny (číslo/datum/čas/tým/hřiště) nebo konkrétní nominace
   (crew-cell) -- svítí týden od změny nebo do 'completed', viz
   isRecentlyChanged() v matches.js. Prázdný string ("" z .trim() na
   nezměněných buňkách) třídu jednoduše nepřidá. */
.text-changed {
  color: var(--error-text);
}

/* Kompaktní H/A hlavička s šedivou ikonkou dresu (Games) -- náhrada za
   "Home jersey"/"Away jersey" text, který dělal ty sloupce zbytečně
   široké. */
.th-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface-muted);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}

.notice {
  margin: 0 0 1rem;
  padding: 0.5rem 0.65rem;
  background: var(--primary-bg);
  color: var(--info-text);
  border-radius: 8px;
  font-size: var(--font-size-85);
}

/* Vyřešený spor na výplatnici (118, 2026-09-23) -- odlišit od otevřeného
   (.notice, modrá "vyžaduje pozornost") tlumenou šedou, ať se rozdíl
   pozná na první pohled v historii pod sebou. */
.notice-resolved {
  background: var(--surface-muted);
  color: var(--text-muted);
}

/* #/payroll/costs (2026-09-23) -- holé CSS bary, appka nemá žádnou
   sloupcovou grafovou knihovnu ani existující sloupcový vzor, jen výšku/
   šířku podle poměru k maximu, stejný princip jako .payroll-distance-cell
   sousedy. */
.cost-monthly-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 160px;
  padding-top: 0.5rem;
}

.cost-monthly-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.cost-monthly-bar-fill {
  width: 60%;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}

.cost-monthly-bar-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* Startovné vs čerpání po klubech (2026-09-26) -- dva pruhy pod sebou
   ve společném měřítku, legenda nad tabulkou. */
.club-balance-bars {
  min-width: 160px;
  width: 40%;
}

.club-balance-bar {
  height: 8px;
  border-radius: 4px;
  margin: 2px 0;
}

.club-balance-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 0.5rem;
  font-size: var(--font-size-85);
}

.club-balance-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}

/* Plán vs skutečnost po měsících (2026-09-26) -- dva sloupce vedle sebe. */
.tracking-month-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 170px;
  padding-top: 0.5rem;
}

.tracking-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.tracking-month-bars {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.tracking-month-bar {
  width: 38%;
  max-width: 18px;
  border-radius: 3px 3px 0 0;
}

/* Součtový řádek pod tabulkami přehledu nákladů (2026-09-26). V tabulce
   s omezenou výškou (.cost-scroll-limited) zůstává přilepený dole. */
.data-table .cost-total-row td {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  font-weight: 600;
}

.cost-scroll-limited .cost-total-row td {
  position: sticky;
  bottom: 0;
  background: var(--card-bg);
}

.cost-hbar-track {
  background: var(--surface-muted);
  border-radius: 4px;
  height: 10px;
  min-width: 80px;
}

.cost-hbar-fill {
  background: var(--primary);
  height: 100%;
  border-radius: 4px;
}

/* Filtry přehledu nákladů (2026-09-25, soutěž × klub × typ) -- mřížka
   polí, na telefonu pod sebou. */
.cost-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 1rem;
  margin-top: 0.75rem;
}

.cost-filters select {
  width: 100%;
}

.cost-filters-reset {
  align-self: end;
}

/* #/payroll/costs/plan (2026-09-25) -- číselná pole v tabulce plánu úzká
   a zarovnaná doprava; záporné saldo / přečerpání červeně. Specificita
   input[type="number"].cost-plan-input (0,1,2) přebije obecné width:100%. */
input[type="number"].cost-plan-input {
  width: 5em;
  padding: 0.25rem 0.35rem;
  font-size: var(--font-size-85);
  text-align: right;
  -moz-appearance: textfield;
}

.cost-plan-input::-webkit-outer-spin-button,
.cost-plan-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cost-plan-table td,
.cost-plan-table th {
  white-space: nowrap;
  padding-right: 0.6rem;
}

/* Hlavičky se smí zalomit ("Entry fee / team") -- jinak by určovaly
   šířku sloupců a tabulka by zbytečně přetékala. th.num varianta (0,3,1) kvůli
   pozdějšímu .data-table th.num { white-space: nowrap }. */
.data-table.cost-plan-table th,
.data-table.cost-plan-table th.num {
  white-space: normal;
  vertical-align: bottom;
}

/* Dvouřádková buňka (částka + počet zápasů / % čerpání pod ní). */
.cost-plan-table td.cost-plan-stack {
  line-height: 1.25;
}

.cost-plan-table td:first-child {
  white-space: normal;
  min-width: 7rem;
}

.cost-plan-table tfoot td {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  font-weight: 600;
}

/* Složení schválené částky pod názvem řádku rozpočtu (poznámka řádku). */
.cost-plan-line-note {
  display: block;
  max-width: 26rem;
  white-space: normal;
  font-size: var(--font-size-78);
  margin-top: 0.15rem;
}

/* Rozpis rozpočtu KR na podkategorie a položky (2026-09-26). */
.cost-plan-breakdown {
  border-top: 1px solid var(--border);
  padding: 0.55rem 0;
}

.cost-plan-breakdown > summary {
  cursor: pointer;
}

.cost-plan-breakdown[open] > summary {
  margin-bottom: 0.5rem;
}

.cost-plan-items .cost-plan-group td {
  padding-top: 0.6rem;
  border-bottom: 1px solid var(--border);
}

input[type="text"].cost-plan-item-text {
  width: 16rem;
  padding: 0.25rem 0.4rem;
  font-size: var(--font-size-85);
}

input[type="text"].cost-plan-item-note {
  width: 20rem;
  padding: 0.25rem 0.4rem;
  font-size: var(--font-size-85);
}

.cost-plan-add-item input[type="text"] {
  min-width: 10rem;
  width: auto;
}

/* Druhý řádek v buňce (např. "incl. 2 individual" pod příjmem). */
.cost-plan-subnote {
  display: block;
}

.cost-plan-subnote:empty {
  display: none;
}

.cost-negative {
  color: var(--error-text);
}

.cost-plan-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.cost-plan-add select,
.cost-plan-add input[type="text"] {
  width: auto;
  min-width: 14rem;
  max-width: 100%;
}

/* "Stačí jich vidět prvních 5 a pak dále kdyžtak rolovat" (2026-09-25) --
   výška na záhlaví + 5 řádků, zbytek se posouvá uvnitř; záhlaví drží
   .data-table th { position: sticky }. */
.cost-scroll-limited {
  max-height: 13.25rem;
  overflow-y: auto;
}

/* #/mentor hub (2026-09-23) -- celá karta je odkaz, stejný princip jako
   sponzorské karty na dashboardu (celá karta = proklik, žádné podtržené
   textové odkazy). */
.mentor-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.mentor-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mentor-tile h3 {
  margin: 0 0 0.4rem;
}

.mentor-digest-entry {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.mentor-digest-entry:last-child {
  border-bottom: none;
}

.mentor-digest-entry p {
  margin: 0.2rem 0;
}

.mentor-digest-entry-meta {
  color: var(--text-muted);
  font-size: var(--font-size-85);
}

/* #/users Roles modal (2026-09-23) -- nahrazuje bývalý sloupec-per-roli
   checkbox mřížku, seznam rolí místo toho žije v popupu. */
.roles-modal-list {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.hint {
  color: var(--text-muted);
  font-size: var(--font-size-85);
  margin: 0;
}

.table-scroll {
  overflow-x: auto;
}

/* "Moje výplatnice" -- faktura buňka (2026-09-23, oprava dle screenshotu):
   odznak + native file input + tlačítko Upload na jeden řádek místo
   zalomení pod sebe. Input má omezenou šířku, ať se i s dlouhým
   "Vybrat soubor" popiskem vejde vedle tlačítka. */
.payroll-invoice-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.payroll-invoice-cell input[type="file"] {
  max-width: 150px;
  font-size: var(--font-size-80);
}

/* Výsledek automatické kontroly faktury (lib/invoiceCheck.js). */
.invoice-review-heading {
  margin: 1rem 0 0.4rem;
  font-size: var(--font-size-90, 0.9rem);
}

.invoice-ok-list {
  margin-top: 0.75rem;
}

.invoice-ok-list > summary {
  cursor: pointer;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.invoice-check-cell {
  min-width: 240px;
}

.invoice-check-method {
  margin-left: 0.35rem;
  font-size: var(--font-size-78);
  color: var(--text-muted);
  white-space: nowrap;
}

.invoice-check-details {
  margin-top: 0.3rem;
  font-size: var(--font-size-78);
}

.invoice-check-details summary {
  cursor: pointer;
  color: var(--text-muted);
}

.invoice-check-details ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  max-width: 420px;
}

.invoice-check-item {
  margin-bottom: 0.25rem;
  white-space: normal;
}

.invoice-check-item--error::marker {
  color: var(--error-text);
}

.invoice-check-item--warning::marker {
  color: var(--warning);
}

.invoice-check-values {
  display: block;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.schedule-table {
  min-width: 1360px;
}

/* #/matches po dnech (2026-09-28) -- bez sloupců Datum/Den je tabulka
   užší a pevných 1360px by každé kartě dne přidalo vlastní vodorovný
   posuvník. Šířku tu určí obsah: nic se nezalamuje (týmy/hřiště by se
   jinak lámaly na dva řádky, zatímco posádka měla volné místo) a sloupce
   posádky jsou široké jen jako příjmení (min-width 92px pryč, jména jsou
   nowrap stejně). Posuvník se objeví jen tam, kde se obsah nevejde. */
.match-day .schedule-table {
  min-width: 0;
}

.match-day .schedule-table th,
.match-day .schedule-table td {
  white-space: nowrap;
}

.match-day .schedule-table .crew-cell {
  min-width: 3.5rem;
}

/* #/matches na telefonu (2026-09-28) -- místo tabulky položky o třech
   řádcích (čas/soutěž/týmy/hřiště, posádka, dresy+TV), viz
   matchMobileItemHtml v matches.js. Na širší obrazovce skryté. */
.match-mobile-list {
  display: none;
}

@media (max-width: 600px) {
  .match-day .table-scroll {
    display: none;
  }

  .match-mobile-list {
    display: flex;
    flex-direction: column;
  }
}

.match-mobile-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0;
  color: var(--text);
  text-decoration: none;
}

.match-mobile-item + .match-mobile-item {
  border-top: 1px solid var(--border);
}

.match-mobile-item--link:active {
  background: var(--surface-subtle);
}

.match-mobile-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
}

.match-mobile-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.match-mobile-comp {
  color: var(--primary);
  font-weight: 700;
}

.match-mobile-teams {
  font-weight: 600;
}

.match-mobile-venue {
  color: var(--text-muted);
  font-size: var(--font-size-85);
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-mobile-crew {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.1rem;
  font-size: var(--font-size-85);
}

.match-mobile-crew-item {
  white-space: nowrap;
}

.match-mobile-crew-item b {
  color: var(--text-muted);
}

.match-mobile-crew-item.crew-cell--external {
  color: var(--text-muted);
  font-style: italic;
}

.match-mobile-extra,
.match-mobile-kits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
}

.match-mobile-extra {
  gap: 0.75rem;
}

/* Červené zvýraznění změn musí přebít tlumenou barvu hřiště výš. */
.match-mobile-item .text-changed {
  color: var(--error-text);
}

/* Dresy (+ TV) jako samostatný blok za posádkou (2026-09-28, "ať je
   trochu vizuálně oddělená část dresy od pozic rozhodčích"). */
.schedule-table .col-group-start {
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
}

/* Hodně sloupců na malý prostor -- mezery mezi buňkami na minimum, ať
   zbyde místo pro delší obsah (příjmení rozhodčích). */
.schedule-table th,
.schedule-table td {
  padding: 0.4rem 0.3rem 0.4rem 0;
}

.schedule-table [data-role="weekday"] {
  display: inline-block;
  min-width: 32px;
  white-space: nowrap;
}

/* Datum v Games (nezalamovat, zarovnat doprava jako číslo) -- jen holá
   buňka s textem, ne editovatelný <input>, ten se nezalamuje sám od sebe. */
.schedule-table td[data-role="date"],
.schedule-table th[data-role="date"] {
  white-space: nowrap;
  text-align: right;
}

/* Sloupce R/U/D/L/B/S/F (posádka zápasu) -- příjmení, případně
   "Příjmení Kři" při kolizi, potřebují víc místa než jedno písmeno v
   hlavičce naznačuje. */
.schedule-table .crew-cell {
  min-width: 92px;
  white-space: nowrap;
  text-align: center;
}

.schedule-table input[type="date"].cell-input,
.schedule-table input[type="time"].cell-input {
  min-width: 90px;
}

.schedule-table select[data-role="venue"].cell-input {
  min-width: 180px;
}

.schedule-table select[data-role="home"].cell-input,
.schedule-table select[data-role="away"].cell-input {
  min-width: 170px;
}

.schedule-table .cell-input {
  width: 100%;
  min-width: 110px;
  padding: 0.3rem 0.4rem;
  font-size: var(--font-size-82);
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}

.schedule-table .cell-input:hover,
.schedule-table .cell-input:focus {
  border-color: var(--border);
  background: var(--card-bg);
}

.schedule-table .cell-input:disabled {
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.schedule-table tfoot td {
  border-top: 2px solid var(--border);
  padding-top: 0.6rem;
}

.schedule-table tfoot .cell-input {
  border-color: var(--border);
}

.schedule-table tfoot button {
  width: auto;
  font-size: var(--font-size-80);
}

.permission-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
}

.permission-group legend {
  font-size: var(--font-size-80);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 0 0.3rem;
}

.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-weight: 400;
  cursor: pointer;
}

.permission-item input {
  margin-top: 0.2rem;
}

.permission-item code {
  font-size: var(--font-size-85);
}

.permission-item small {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-78);
}

.checkbox-cell {
  text-align: center;
}

.hint-inline {
  color: var(--text-muted);
  font-size: var(--font-size-85);
  margin: 0 0 1rem;
}

.match-teams {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.match-teams .vs {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--font-size-85);
  margin: 0 0.4rem;
}

.button-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.button-row button {
  /* stejný důvod jako u .inline-form button -- form button (globální
     pravidlo) by jinak přidalo 100% šířku a horní odsazení i sem. */
  width: auto;
  margin-top: 0;
}

.data-table .actions button {
  width: auto;
  font-size: var(--font-size-78);
  padding: 0.3rem 0.6rem;
}

.inline-form {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Skupina tlačítek v .inline-form -- drží se pohromadě vedle sebe; když se
   řádek formuláře nevejde, zalomí se celá skupina, ne jedno tlačítko. */
.inline-form-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: nowrap;
}

/* Telefon -- dvojice tlačítek je širší než displej, tady se smí zalomit. */
@media (max-width: 600px) {
  .inline-form-actions {
    flex-wrap: wrap;
  }
}

.inline-form select,
.inline-form input,
.inline-form textarea {
  width: auto;
}

/* Nápověda ke klávesovým zkratkám v penalty-form (matches.js) --
   flex-basis:100% ji v .inline-form (display:flex) zalomí na vlastní
   řádek hned pod select týmu, místo aby se cpala do řady vedle polí. */
.keyboard-hint {
  flex-basis: 100%;
  margin: 0;
  padding: 0.5rem 0.85rem;
  background: var(--primary-bg);
  border-radius: 8px;
  font-size: var(--font-size-85);
  color: var(--text-muted);
}

.keyboard-hint kbd {
  display: inline-block;
  font-family: inherit;
  font-size: var(--font-size-78);
  font-weight: 600;
  color: var(--primary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.05rem 0.45rem;
  margin: 0 0.1rem;
}

.inline-form button {
  /* form button (globální pravidlo) dává 100% šířku a horní odsazení --
     v inline řádku vedle sebe je to nechtěné, řádek to rozhazuje. */
  width: auto;
  margin-top: 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  margin: 0.9rem 0 0.15rem;
}

.checkbox-label input {
  width: auto;
}

/* Chip-button skupina pro radio/checkbox výběry, kde svislý sloupec
   holých .checkbox-label řádků (Season preferences, 2026-09-22
   uživatelské hlášení "vypadá to jak Google formulář") působí jako
   obyčejný formulář. Vstup zůstává skutečný radio/checkbox (žádná JS
   logika navíc, žádná ztráta klávesové ovladatelnosti), jen vizuálně
   schovaný -- zaškrtnutí/vybrání řeší čisté CSS :has(), stejně jako
   .toggle o kus výš řeší dvoustavový přepínač. */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--font-size-85);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  background: var(--primary-bg);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.choice-chip:hover {
  border-color: var(--primary);
}

/* Skrytý, ale pořád reálný a fokusovatelný input -- ne display:none
   (to by ho vyřadilo z tabulátoru), jen vizuálně mimo tok. */
.choice-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice-chip:has(input:checked) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.choice-chip:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.choice-chip:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Kompaktní skupina "kdo faul odmával" (R/U/D/L/B/S/F) v penalty-form
   (#/matches/:id, 2026-09-19) -- na rozdíl od běžného .checkbox-label
   (svislý formulář, nad checkboxem vlastní řádek) tohle sedí v jedné
   řadě vedle ostatních polí .inline-form. */
.penalty-called-by {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.penalty-called-by .checkbox-label {
  margin: 0;
  gap: 0.2rem;
  font-weight: 400;
  font-size: var(--font-size-85);
}

/* Select v řádkovém formuláři se roztáhne podle nejdelší volby -- u faulu
   "kód — celý popis" širší než telefon, celý penalty report pak přetékal
   (2026-09-28). Nikdy širší než řádek, text volby se zkrátí. */
.inline-form select {
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  /* Telefon: kód faulu, tým a poznámka na celý řádek, R/U/D/L/B/S/F
     se smí zalomit. */
  #penalty-form #penalty-code,
  #penalty-form #penalty-team,
  #penalty-form #penalty-note {
    flex: 1 1 100%;
  }

  .penalty-called-by {
    flex-wrap: wrap;
  }
}

/* Kdo potvrdil přečtení pregame sheetu (#/matches/:id, 2026-09-19).
   Zvýrazněno (2026-09-20, uživatelské hlášení "chtěl bych, aby to
   potvrzení přečtení bylo lépe vidět") -- potvrzený řádek dostane
   zelený zaškrtávací kroužek + jemný zelený podklad a badge, ne jen
   holý "✓" znak jako dřív, ať se to nedalo přehlédnout. */
.pregame-ack-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--font-size-90);
}

.pregame-ack-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.pregame-ack-item--confirmed {
  background: var(--success-bg);
  border-color: rgba(22, 163, 74, 0.25);
}

.pregame-ack-item .pregame-ack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
}

.pregame-ack-item--confirmed .pregame-ack-icon {
  background: var(--success);
  color: var(--on-accent);
}

.pregame-ack-item--confirmed .pregame-ack-icon .icon-inline {
  width: 13px;
  height: 13px;
  vertical-align: 0;
}

.pregame-ack-item:not(.pregame-ack-item--confirmed) .pregame-ack-icon {
  border: 2px dashed var(--border);
}

.pregame-ack-item-name {
  flex: 1;
}

.pregame-topic-row {
  margin: 0.4rem 0;
}

.pregame-meeting-time {
  margin: 0 0 0.75rem;
}

/* Sraz na zápas má vypadat výrazně -- je to první věc, co si posádka má
   při otevření pregame sheetu všimnout. */
.pregame-meeting-time strong {
  font-size: 1.15rem;
  font-weight: 700;
}

/* Jméno rozhodčího v "Topics per referee" -- sjednoceno s .crew-name
   (bug report 2026-09-23: samostatných 1.15rem/700 vedle sebe v jednom
   seznamu bylo nepřiměřeně velké, sraz na zápas zůstává jediný výrazný
   prvek na stránce). */
.pregame-topic-row strong {
  font-size: var(--font-size-100);
  font-weight: 600;
}

/* Transport chat (#/matches/:id, 2026-09-20) -- posádka si mezi sebou
   domlouvá cestu. Žádné bubliny/avatary, jen prostý seznam zpráv --
   vlastní zprávy jemně odlišené barvou pozadí, ať je snadné se v
   krátkém vlákně zorientovat, kdo psal co. */
.transport-chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.transport-message {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}

.transport-message--own {
  background: var(--content-bg);
  border-color: var(--primary);
}

.transport-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.15rem;
}

.transport-message p {
  margin: 0;
}

/* @zmínky v chatu (bug report 2026-09-23) -- zvýrazněné jméno v už
   odeslané zprávě. */
.mention {
  color: var(--primary);
  font-weight: 600;
}

/* Autocomplete dropdown pod textovým polem zprávy -- form má
   position:relative (inline style v matches.js), dropdown se vznáší nad
   zbytkem stránky. */
.mention-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  max-height: 180px;
  overflow-y: auto;
  min-width: 180px;
}

.mention-dropdown li {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
}

.mention-dropdown li:hover {
  background: var(--primary-bg);
}

.transport-distance-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--font-size-90);
}

/* Víc míst spojení na zápas (100, "pro různé počty rozhodčích") -- jeden
   řádek na místo, adresa/poznámka vlevo, akce vpravo, zalomí se na
   mobilu. */
.meeting-point-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.meeting-point-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.meeting-point-list li span {
  flex: 1;
  min-width: 160px;
}

.transport-distance-value {
  margin-left: 0.4rem;
}

.view-as-banner {
  max-width: 960px;
  margin: 0 auto 1rem;
  padding: 0.6rem 1.5rem;
  background: var(--highlight-bg);
  color: var(--highlight-text);
  font-size: var(--font-size-85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 10px;
}

/* Reálné přepnutí na jiného uživatele (impersonation.js) je závažnější
   než "Zobrazit jako role" simulace výše -- sytější červená, ať je
   nezaměnitelná i na první pohled. */
.impersonation-banner {
  max-width: 960px;
  margin: 0 auto 1rem;
  padding: 0.6rem 1.5rem;
  background: var(--error-bg);
  color: var(--error-text);
  font-weight: 600;
  font-size: var(--font-size-85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 10px;
  border: 1px solid var(--error-text);
}

.impersonation-banner button {
  background: var(--danger);
  color: var(--on-accent);
  font-size: var(--font-size-78);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  width: auto;
  flex-shrink: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  padding: 1rem 1.25rem;
}

/* IFAF-style hodnocení (matches.js "Referee evaluations") -- karta na
   každého člena posádky s koláčem + skóre + zařazením do skupiny. */
.eval-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.eval-score-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.eval-score-pie {
  flex-shrink: 0;
}

.eval-score-info {
  min-width: 0;
}

.eval-score-percent {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0.2rem 0;
}

.eval-score-legend {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  font-size: var(--font-size-80);
  color: var(--text-muted);
}

.eval-score-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0;
}

.eval-score-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.eval-group-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.3rem;
}

.eval-group-row select {
  width: auto;
  flex: 1;
  /* Flex položky se defaultně nesmrsknou pod svůj obsah (min-width: auto)
     -- select s dlouhými option texty tím vytlačoval tlačítko Save mimo
     kartu. min-width: 0 dovolí flex:1 skutečně fungovat. */
  min-width: 0;
}

.eval-group-row .eval-group-save {
  flex-shrink: 0;
}

.eval-group-note {
  margin-top: 0.4rem;
  font-size: var(--font-size-82);
  resize: vertical;
}

.eval-reply-list {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: var(--font-size-82);
}

.eval-reply-item {
  margin: 0.15rem 0;
  color: var(--text-muted);
}

/* Postgame dotazník (matches.js, mezi Transport a Penalty report) */
.postgame-review-grid {
  display: grid;
  /* min(..., 100%) -- na úzkém telefonu (360px) je mřížka užší než 280px
     a pevné minimum by karty vystrčilo přes okraj sekce (2026-09-28). */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
  margin: 0.75rem 0 1.25rem;
}

.postgame-review-card {
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  /* min-width:0 (2026-09-25, "v zápasech nám přetéká postgame
     hodnocení") -- grid položky mají defaultně min-width:auto, takže by
     karta odmítla zmenšit se pod min-content svého obsahu i se
     scrollovacím obalem uvnitř (viz .table-scroll u .postgame-rating-grid
     výš) -- bez tohohle by se problém jen přesunul o úroveň výš (celá
     karta/mřížka by přetékala místo jen tabulky uvnitř karty). */
  min-width: 0;
}

@media (max-width: 480px) {
  .postgame-review-card {
    padding: 0.6rem;
  }

  /* Vyšší specificita -- základní pravidlo mřížky je v souboru až níž. */
  .postgame-review-card .postgame-rating-grid th,
  .postgame-review-card .postgame-rating-grid td {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
}

/* Mřížka -1/0/+1/Nehodnotím se (radio), stejné rozložení jako vzorový
   Google Formulář -- uživatelský požadavek "udělej to hodnocení takto,
   ať je to přehlednější na vyplňování" (dřív select na kategorii). */
.postgame-rating-grid {
  /* width:100% (ne auto, 2026-09-25) -- tabulka vždycky vyplní přesně
     šířku karty, prohlížeč rozvrhne sloupce sám (radio sloupce zaberou
     jen co potřebují, popisek zbytek + zalomí, viz tbody th výš) --
     žádný scrollbar, žádné umělé minimum. */
  width: 100%;
  margin: 0.6rem 0;
  font-size: var(--font-size-80);
  /* Souvislé linky mezi řádky (bez mezer mezi buňkami). */
  border-collapse: collapse;
}

/* 2026-09-28, "některé rozdělovníky tabulek přetékají" -- s 0.6rem
   odsazením a nezalomitelným "Nehodnoceno" v záhlaví měla tabulka min.
   ~297px, karta v mřížce jen ~265px vnitřku, linky řádků čouhaly přes
   okraj karty. Menší boční odsazení -- zalamuje se jen popisek řádku. */
.postgame-rating-grid th,
.postgame-rating-grid td {
  padding: 0.3rem 0.25rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.postgame-rating-grid thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--font-size-75);
}

.postgame-rating-grid tbody th {
  /* 2026-09-25, "rozhodně nechci, aby byla posuvná lišta... musí být
     vidět celý" -- dřív nowrap, což nutilo tabulku k min. ~326px šířky
     (delší popisek jako "Game -- decision-making" se nesměl zalomit) a
     v úzké kartě to přetékalo. Bez nowrap se popisek zalomí na dva
     řádky, tabulka se vejde do libovolně úzké karty. */
  text-align: left;
  font-weight: 500;
}

.postgame-rating-grid input[type="radio"] {
  width: auto;
  margin: 0;
}

/* Referenční tabulka "Očekávání" podle kategorie (lib/postgameExpectations.js) --
   skrytá za tlačítkem, ať nezabírá místo, dokud si ji rater vyžádá. */
.postgame-expectations-table {
  font-size: var(--font-size-78);
  min-width: 900px;
}

.postgame-expectations-table th,
.postgame-expectations-table td {
  vertical-align: top;
  padding: 0.5rem 0.6rem;
}

.postgame-expectations-bullets {
  margin: 0;
  padding-left: 1.1rem;
}

.postgame-expectations-bullets li {
  margin: 0.15rem 0;
}

.postgame-comment {
  margin: 0.4rem 0;
  resize: vertical;
}

.postgame-notable-fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.75rem;
}

.postgame-notable-fieldset legend {
  font-size: var(--font-size-80);
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 0.4rem;
}

.postgame-notable-fieldset textarea {
  resize: vertical;
}

.postgame-notable-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.postgame-notable-meta select {
  width: auto;
  flex: 1;
}

.postgame-notable-meta input {
  flex: 2;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.stat-label {
  font-size: var(--font-size-82);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.bug-row {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.bug-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bug-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-85);
}

.bug-row-controls {
  display: flex;
  gap: 0.5rem;
}

.bug-row-controls select {
  width: auto;
  font-size: var(--font-size-78);
  padding: 0.25rem 0.5rem;
}

.bug-description {
  font-size: 0.88rem;
  white-space: pre-wrap;
  margin: 0 0 0.5rem;
}

.bug-screenshot {
  max-width: 220px;
  max-height: 140px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 0.5rem;
}

.bug-row textarea {
  font-size: var(--font-size-80);
  margin-bottom: 0.35rem;
}

.view-as-banner button {
  background: var(--highlight-text);
  color: var(--highlight-bg);
  font-size: var(--font-size-78);
  padding: 0.3rem 0.7rem;
  width: auto;
  flex-shrink: 0;
}

/* #/nominations a #/matches -- dny téhož víkendu (pá+so+ne) drží blízko u sebe (malá
   mezera uvnitř .weekend-group), mezi RŮZNÝMI víkendy/dny je znatelně
   větší odstup (základní .container gap + extra margin-top navíc) --
   uživatelské zadání "celý víkend bude u sebe blíže, tvoří páry". */
.weekend-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Dělicí čára mezi víkendy -- samotná mezera (i s .container gap) nebyla
   dost "opticky" znatelná, uživatelský postřeh 2026-09-18. */
.weekend-group + .weekend-group {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.nomination-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
}

.nomination-chip {
  cursor: grab;
  gap: 0.3rem;
}

/* Rozhodčí mimo RefOS (POL/IFAF/Guest, 2026-09-26) -- čárkovaný rámeček,
   ať je na první pohled jasné, že to není účet v RefOS. */
/* Rozpis zápasů: štítek POL/IFAF/host na pozici -- tlumeně a kurzívou. */
.crew-cell.crew-cell--external {
  color: var(--text-muted);
  font-style: italic;
}

.crew-card.crew-card--external {
  border-style: dashed;
}

/* Pomocná crew: nepotvrzená/zamítnutá přihláška (vidí jen KR). */
.crew-card.crew-card--pending {
  border-style: dashed;
  background: var(--surface-subtle);
}

.crew-card .button-row {
  margin-top: 0.5rem;
}

.card-header h2 .icon-inline {
  vertical-align: -0.1em;
}

/* Štítek jarního bonusového dne v nadpisu karty dne (#/matches,
   #/nominations, 2026-09-28) -- odsazený od dne v týdnu. */
.day-bonus-badge {
  margin-left: 0.5rem;
}

.nomination-chip.nomination-chip--external {
  border-style: dashed;
  background: var(--card-bg);
  color: var(--text-muted);
}

.nomination-chip:active {
  cursor: grabbing;
}

.nomination-chip.dragging {
  opacity: 0.4;
}

/* Ikonky (poznámka k dostupnosti / auto k dispozici) uvnitř chipu --
   .icon-inline (16px) by samo o sobě sedlo na text kolem, tady navíc
   nechceme podtrhávat/měnit barvu při hoveru na .link-button. */
.nomination-chip .chip-icon {
  color: var(--text-muted);
  pointer-events: none;
}

/* Nominovaní o odstín tišší než dostupní -- vizuálně jasné, že "tihle už
   mají práci", i když jsou pořád stejně tažitelní na další zápas. */
.nomination-chip-row--nominated .nomination-chip {
  background: var(--content-bg);
}

/* Bez tohohle "background: var(--content-bg)" nahoře (stejná specificita
   jako .link-button:hover, ale POZDĚJI v souboru) vyhrálo nad hoverem
   jen na vlastnosti "background" -- zůstalo světlé pozadí, ale text
   zbělal (color z .link-button:hover), takže nešel přečíst (uživatelské
   hlášení 2026-09-21). Vlastní hover pro .nomination-chip sjednotí obojí
   (pozadí i barvu textu) bez ohledu na to, jestli je chip v řádku
   dostupných, nebo nominovaných. */
.nomination-chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

/* Řádek "Dostupní" je zároveň drop-zóna pro odstranění z nominace
   (withdraw_day_assignments, 050) -- přetažení kohokoli zpátky sem. */
.nomination-available-row {
  border-radius: 8px;
  transition: background-color 150ms ease;
}

.nomination-available-row.drag-over {
  background: var(--primary-bg);
}

/* Skrýt/zobrazit sekce dne (#/nominations, 2026-09-18) -- ať se dva dny
   stejného víkendu dají snáz porovnat bez scrollování přes celý blok. */
.nomination-section-toolbar {
  margin-bottom: 0.5rem;
}

/* "+ Add referee" vedle nadpisu Available (#/nominations, 2026-09-20). */
.nomination-available-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nomination-available-header .modal-subheading {
  margin: 0;
}

.nomination-add-manual-select {
  width: auto;
  font-size: var(--font-size-80);
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
}

.role-slot {
  cursor: default;
  min-width: 70px;
}

.role-slot[data-match-id]:not(.role-slot--filled) {
  cursor: copy;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}

.role-slot[data-match-id].drag-over {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* Obsazený slot vykresluje jméno jako stejnou "pilulku"
   (.nomination-chip), co dostupní/nominovaní rozhodčí nahoře -- včetně
   cursor:grab a .dragging opacity, obojí zdědí z .nomination-chip níž.
   Od 2026-09-18 jde slot i přesouvat (move_match_assignment, 048),
   draggable jen mimo zveřejněný den, viz .day-block--locked. */
.role-slot--filled {
  text-align: center;
}

/* Zveřejněný den -- zamčeno, žádné přetahování (chipy/sloty se v JS
   nezapojují do drag&drop, tady jen vizuální ztišení, ať je zámek vidět
   i na první pohled). */
.day-block--locked .nomination-chip {
  cursor: default;
  opacity: 0.75;
}

.day-block--locked .role-slot[data-match-id]:not(.role-slot--filled) {
  cursor: default;
}

.nomination-publish-btn {
  width: auto;
  flex-shrink: 0;
  margin: 0;
}

.nomination-day-notes {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.nomination-day-notes textarea {
  margin-top: 0.5rem;
}

/* Šířka tabulky dne podle obsahu (2026-09-28, tablet) -- stejně jako
   .match-day na #/matches: pevných 1360px dávalo vodorovný posuvník i tam,
   kde se tabulka vejde. Nic se nezalamuje, posuvník jen když je potřeba. */
.day-block .schedule-table {
  min-width: 0;
}

.day-block .schedule-table th,
.day-block .schedule-table td {
  white-space: nowrap;
}

.day-block .schedule-table .crew-cell {
  min-width: 4.5rem;
}

/* Areál s víc zápasy v jednom dni -- barva patří areálu (venue-hl--N
   z venueHighlightMap v nominations.js). */
.schedule-table td.venue-hl {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 6px;
}

.venue-hl--0 { background: var(--venue-hl-0); }
.venue-hl--1 { background: var(--venue-hl-1); }
.venue-hl--2 { background: var(--venue-hl-2); }
.venue-hl--3 { background: var(--venue-hl-3); }
.venue-hl--4 { background: var(--venue-hl-4); }
.venue-hl--5 { background: var(--venue-hl-5); }

/* Výběr klepnutím (tablet, 2026-09-28) -- vybraný chip + zvýrazněné
   volné pozice, kam ho jde klepnutím umístit. */
.nomination-chip.nomination-chip--selected {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.nomination-selecting .day-block:not(.day-block--locked) .role-slot[data-match-id]:not(.role-slot--filled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
  cursor: pointer;
}

.nomination-selecting .day-block:not(.day-block--locked) .nomination-available-row {
  background: var(--surface-subtle);
}

.nomination-selection-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: fit-content;
  max-width: 40rem;
  margin: 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--primary);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  font-size: var(--font-size-90);
}

.nomination-selection-bar button {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* Zaoblené přepínací tlačítko (#/availability) -- vzor podle
   uživatelova referenčního obrázku: pilulka s textem (Ano/Ne) na jedné
   straně a kulatým "palcem" s ikonkou (fajfka/křížek) na druhé, co se
   posouvá + mění barvu podle stavu. Checkbox je skrytý, vše ostatní čistě
   CSS (sourozenecký + potomkovský selektor na :checked). */
.toggle {
  position: relative;
  display: inline-block;
  width: 76px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--danger);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.toggle input:checked + .toggle-track {
  background: var(--success);
}

.toggle-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--on-accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: none;
}

.toggle-label--yes {
  left: 9px;
}

.toggle-label--no {
  right: 9px;
}

.toggle input:checked + .toggle-track .toggle-label--yes {
  display: block;
}

.toggle input:not(:checked) + .toggle-track .toggle-label--no {
  display: block;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: transform 150ms ease;
}

.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(48px);
}

.toggle-icon {
  width: 13px;
  height: 13px;
  display: none;
}

.toggle-icon--yes {
  color: var(--success);
}

.toggle-icon--no {
  color: var(--error-text);
}

.toggle input:checked + .toggle-track .toggle-icon--yes {
  display: block;
}

.toggle input:not(:checked) + .toggle-track .toggle-icon--no {
  display: block;
}

.toggle input:disabled + .toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Krátký "✓ Uloženo" stav přímo v tlačítku po úspěšném uložení
   (#/availability) -- viz feedback_ui_buttons, žádné blikání jinam. */
.button-saved-flash {
  background: var(--success) !important;
}

.badge-success {
  color: var(--on-accent);
  background: var(--success);
}

/* Plné zelené tlačítko pro "potvrdit a odeslat" (modal hromadného průchodu
   výplatnicemi) -- stejný tvar jako výchozí <button>, jen barva úspěchu. */
.button-success {
  background: var(--success);
  color: var(--on-accent);
}

.button-success:hover {
  filter: brightness(1.08);
}

/* Modal hromadného průchodu výplatnicemi (payroll.js openBulkPayslipModal). */
.modal-box--payslip {
  max-width: 1200px;
}

.bp-counter {
  margin-left: auto;
  margin-right: 1rem;
  font-size: var(--font-size-90);
  opacity: 0.85;
}

.bp-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.bp-support {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
  font-size: var(--font-size-90);
}

.bp-total {
  margin: 0.75rem 0 0.25rem;
}

.bp-footer {
  position: sticky;
  bottom: -1.1rem;
  background: var(--card-bg);
  padding: 0.75rem 0;
  margin-bottom: -1.1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Nízké skóre hodnocení na #/referee-overview (2026-09-22) -- stejný
   vzor jako .badge-success, jen barva chyby. */
.badge-danger {
  color: var(--on-accent);
  background: var(--danger);
}

/* --- #/matches/:id redesign (2026-09-18) --------------------------------
   Hlavička s meta-řádkem (čas/místo/povrch/číslo), klikatelné dresy s
   certifikací, počasí, read-only crew karty s kontakty, placeholder karty
   pro pregame/dopravu/penalty report (fáze 2+). */

.match-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0.5rem 0;
}

.match-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-90);
  color: var(--text-muted);
}

.match-meta-item .icon-inline {
  flex-shrink: 0;
}

/* TV vysílání (2026-09-23, "kvůli vidoreview") -- odliší se od ostatních
   klidových meta položek (čas/hřiště/povrch), ať si ho referee/mentor
   všimne. */
.match-meta-item--tv {
  color: var(--warning);
  font-weight: 600;
}

/* Rozdělující lišta mezi pre-match sekcemi (Transport) a post-match
   sekcemi (Team comments/Postgame/Penalties/Evaluations) -- 2026-09-25,
   uživatelský požadavek. Plná barva (ne jen okraj), ať je vizuálně
   nezaměnitelná s běžnými kartami kolem. */
.section-divider {
  margin: 1.5rem 0 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--primary-text);
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--font-size-85);
  text-align: center;
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.kit-pick {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}

.kit-pick summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.kit-pick summary::-webkit-details-marker {
  display: none;
}

.kit-pick .kit-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kit-pick .kit-meta strong {
  font-size: var(--font-size-85);
  font-weight: 500;
}

.kit-pick .kit-cert-detail {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.kit-pick--empty {
  display: flex;
  align-items: center;
}

/* -2h/-1h/kickoff/+1h/+2h časová osa (2026-09-19, nahradilo dřívější
   "teď velké + 3h po" rozložení) -- flex-wrap, ať se na užší obrazovce
   sloupce nemačkají, jen zalomí na víc řádků. */
.weather-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.weather-point {
  flex: 1;
  min-width: 68px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
}

.weather-point--kickoff {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.weather-point .w-offset {
  font-size: var(--font-size-75);
  font-weight: 600;
  color: var(--text-muted);
}

.weather-point--kickoff .w-offset {
  color: var(--primary);
}

.weather-point .w-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.weather-point .w-icon {
  font-size: 1.4rem;
}

.weather-point .w-temp {
  font-weight: 600;
  margin: 0.3rem 0;
}

.weather-point .w-precip {
  font-size: var(--font-size-75);
  color: var(--primary);
}

.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Bug report 2026-09-23: "udělej crew-grid tak, aby se vešlo všech 7
   pozic vedle sebe na jeden řádek (na počítači)" -- 7 pevných sloupců na
   desktop (nad jediný breakpoint appky, 860px, viz .sidebar níž), ať se
   posádka (R/U/D/L/B/S/F) nikdy nezalomí na víc řádků bez ohledu na šířku
   okna. Pod 861px se necháva auto-fill/minmax, ať karty na mobilu
   zůstanou čitelné, ne vynucené na 1/7 šířky. */
@media (min-width: 861px) {
  .crew-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  /* Pomocná crew nemá 7 pevných pozic -- běžná šířka karet. */
  .crew-grid.crew-grid--support {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.crew-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.crew-card .crew-role {
  font-size: var(--font-size-75);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
}

.crew-card .crew-name {
  font-size: var(--font-size-100);
  font-weight: 600;
  margin: 0.2rem 0 0.5rem;
}

.crew-contact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--font-size-85);
}

.crew-contact a {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.crew-contact a:hover {
  color: var(--primary);
}

.crew-card .link-button {
  margin-top: 0.6rem;
}

.placeholder-card {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  color: var(--text-muted);
}

.placeholder-card p {
  margin: 0.3rem 0;
}

/* #/payroll -- matice rozhodčí×areál pro 1. výpočet km (bug report
   2026-09-23, "odeber v buňkách šipky nahoru a dolu, budou se tam
   vepisovat jen hodnoty") -- jen tahle konkrétní matice, ne number
   inputy obecně v appce. */
/* input[type="number"] (řádek ~226) má specificitu (0,1,1), vyšší než
   holá .payroll-distance-cell (0,1,0) -- jeho width:100% proto dřív
   vyhrával navzdory pozdějšímu pořadí v souboru a buňky zůstávaly úzké
   podle sloupce tabulky (bug report 2026-09-23, "stále jsou některé
   buňky užší než na 3 číslice"). input[type="number"].payroll-distance-cell
   má specificitu (0,1,2), vyhraje bez ohledu na pořadí. */
input[type="number"].payroll-distance-cell {
  width: 3.4em;
  max-width: 3.4em;
  text-align: center;
  -moz-appearance: textfield;
}

.payroll-distance-cell::-webkit-outer-spin-button,
.payroll-distance-cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Ukotvený první sloupec (jméno rozhodčího) na matici rozhodčí×areál
   (2026-09-23, "u té matice rozhodčí areál zase potřebuji ukotvit první
   řádek a první sloupec") -- první řádek (hlavička) je díky
   `.data-table th { position:sticky; top:0 }` ukotvený už teď, tohle
   doplňuje vodorovné ukotvení jména při scrollu doprava přes desítky
   sloupců areálů. `th.payroll-matrix-name-col` zdědí z `.data-table th`
   VYŠŠÍ z-index (2 > 1 tady), takže roh zůstane nad ukotvenými
   buňkami jmen i při svislém scrollu. */
.payroll-matrix-name-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-bg);
}

/* #/dashboard přestavba (2026-09-23) -- kompaktní klikací řádky
   upozornění, ne karty/tabulka. Levý barevný pruh (--primary) odlišuje
   od běžných .link-button odkazů, ať je na první pohled jasné, že tohle
   je "je třeba zareagovat", ne obyčejná navigace. */
.dashboard-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* Karty nahoře na dashboardu: instalace appky (lib/installPrompt.js) a
   systémová upozornění (lib/pushPrompt.js). */
.device-prompt {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}

.device-prompt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
}

.device-prompt-icon svg {
  width: 20px;
  height: 20px;
}

.device-prompt-body {
  flex: 1;
  min-width: 0;
}

.device-prompt-title {
  display: block;
  color: var(--text);
}

.device-prompt-text {
  margin: 0.2rem 0 0;
  font-size: var(--font-size-85);
  color: var(--text-muted);
}

.device-prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.device-prompt-actions:empty {
  display: none;
}

@media (max-width: 640px) {
  .device-prompt {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .device-prompt-body {
    flex-basis: calc(100% - 3.5rem);
  }
  .device-prompt-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  /* Stejná výška obou tlačítek, dotykový cíl 44 px. */
  .device-prompt-actions > button {
    min-height: 44px;
  }
}

.dashboard-alert-row {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--primary-bg);
  border-left: 3px solid var(--primary);
  color: var(--text);
  text-decoration: none;
  font-size: var(--font-size-90);
}

.dashboard-alert-row:hover {
  filter: brightness(0.97);
}

.dashboard-alert-row--static {
  cursor: default;
}

.dashboard-alert-row--static:hover {
  filter: none;
}

.dashboard-alerts--scheduler {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.dashboard-alerts--scheduler .dashboard-alert-row {
  background: transparent;
  border-left-color: var(--text-muted);
  padding-left: 0.5rem;
  font-size: var(--font-size-82);
  color: var(--text-muted);
}

.dashboard-footer-card {
  text-align: center;
}

/* Vizuální přestavba #/dashboard (2026-09-23, uživatelský požadavek
   "grafiky mnohem propracovanější, minimálně stejně dobře jako u KŘS" --
   uživatel poslal screenshot KŘS dashboardu jako referenci). Barvy a
   tvary jsou appky VLASTNÍ paleta (--primary/--warning/--success),
   nekopíruje KŘS 1:1 -- jen stejný princip (2sloupcová mřížka karet,
   barevné "dny zbývají" pilulky, uvítací řádek s rolemi, datum vpravo
   nahoře). */
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dashboard-header-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.dashboard-date-badge {
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--font-size-82);
  font-weight: 600;
  white-space: nowrap;
}

/* Narozeniny rozhodčích v následujících 7 dnech vedle data (2026-09-26) --
   stejná pilulka jako datum, jen jemnější (--warning-bg), ať vizuálně
   nesoutěží s hlavním datem, a smí se zalomit na víc řádků/zalamovat text,
   pokud je jmen víc (na rozdíl od datumové pilulky, co je vždycky krátká). */
.dashboard-birthday-badge {
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: var(--font-size-78);
  font-weight: 500;
  max-width: 320px;
  text-align: right;
}

.dashboard-grid {
  display: grid;
  /* minmax(0, 1fr), ne holé 1fr -- grid track bez explicitního minima má
     minimum "auto" (= min-content šířka svého obsahu), takže široký
     obsah (7sloupcová mřížka kalendáře dostupnosti, 2026-09-23) dokázal
     protlačit svůj sloupec přes polovinu šířky a rozhodit 50/50 dělení
     (živě naměřeno: 874px/468px místo rovných polovin). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

/* minmax(0, 1fr) i v jednom sloupci (bug report 2026-09-28, "dostupnost
   a sponzoři jsou na telefonu široké, musím přejíždět do stran") -- holé
   1fr bralo jako minimum min-content karty, a sponzorský karusel (sloupce
   po 200px vedle sebe) ho roztáhl na součet všech sloupců. Karusel si
   má scrollovat sám uvnitř karty, ne rozšířit celou stránku. */
@media (max-width: 860px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Font/icon audit (2026-09-23) -- KPI dlaždice (payrollCosts.js) měly
   font-size/padding natvrdo v `style=""` na každé kartě zvlášť, teď
   sdílená třída. */
.kpi-card {
  padding: 0.85rem;
}

.kpi-value {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-card-link {
  font-size: var(--font-size-80);
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.dashboard-card-link:hover {
  text-decoration: underline;
}

.dashboard-empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  color: var(--text-muted);
}

.dashboard-empty-icon {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}

.dashboard-empty-state strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Každý nadcházející zápas jako samostatná karta (2026-09-28, "potřeboval
   bych je mít od sebe viditelně oddělené") -- rámeček + podklad jako
   dlaždice v #/documents, hover zvýrazní okraj. */
.dashboard-list-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  text-decoration: none;
  color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}

.dashboard-list-item:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
}

/* flex: 1 1 0 -- s flex-wrap na mobilu (viz níž) by delší text zápasu
   jinak celý spadl POD pilulku s počtem dní místo vedle ní. */
.dashboard-list-item-body {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.dashboard-list-item-body strong {
  font-size: var(--font-size-90);
}

/* Pregame sraz + vlastní téma přímo v řádku nadcházejícího zápasu
   (2026-09-23, "bylo by super vidět zadanou pregame... čas a místo
   srazu") -- zobrazí se JEN když už je pregame sheet zadaný, jinak
   řádek zůstává stejný jako dřív (žádné prázdné místo navíc). */
.dashboard-pregame-line {
  font-size: var(--font-size-78);
  color: var(--primary);
}

.dashboard-pregame-topic {
  font-size: var(--font-size-78);
  color: var(--text-muted);
  font-style: italic;
}

/* Náhled dostupnosti na dashboardu jako čtvercový kalendář (2026-09-23,
   "vizuálně bych to udělal jako náhled čtvercového kalendáře, ve kterém
   by šlo přepínat ano/ne") -- nahradilo dřívější seznam řádků (bug
   report: "u zápasů odeber informaci o členech crew" zase odstranil
   krátce předtím přidané .dashboard-crew-chip* -- appka to zkusila a
   uživatel to nakonec nechtěl). Dny týdne + mřížka 7 sloupců, buňka bez
   dat je jen číslo (needitovatelný kandidátní den), zamčená buňka má
   šedý text, aktivní kandidátní den je <button> přepínatelné kliknutím
   (viz wireRichTextToolbar-style click handler v dashboard.js). */
.dashboard-calendar-month {
  margin: 0.5rem 0 0.3rem;
  font-weight: 600;
  text-transform: capitalize;
}

.dashboard-calendar-weekdays,
.dashboard-calendar-grid {
  display: grid;
  /* minmax(0, 1fr) -- stejná chyba jako .dashboard-grid výš (2026-09-23):
     holé "1fr" bere minimum tracku jako "auto" (min-content buňky), takže
     kalendář v půlšířkové kartě přetékal mimo svou sekci místo aby se 7
     sloupců zmenšilo na dostupnou šířku (živě potvrzeno screenshotem --
     víkendové sloupce vykukovaly za okraj karty). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.dashboard-calendar-weekdays {
  margin-bottom: 0.3rem;
}

.dashboard-calendar-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.dashboard-calendar-cell {
  /* Uživatelský požadavek 2026-09-23: "výšku buněk zmenši na cca 1/3, ať
     se to lépe vejde na stránku" -- z čtvercových (1/1) na široký
     obdélník (3/1), šířku dál řídí 7sloupcová mřížka, výška teď vychází
     na cca třetinu původní. 2026-09-28: aspect-ratio 3/1 nahrazeno pevnou
     výškou -- v užší kartě (tablet, sidebar vedle) z poměru vycházel ~18px
     proužek a v kombinaci s min-height prohlížeč dopočítal šířku 3× výšky
     a buňky přetékaly; 1.75rem ≈ to, co 3/1 dávalo na širokém desktopu. */
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
  font-size: var(--font-size-85);
  border: 1px solid transparent;
}

/* Rolující okno (2026-09-23, "následující měsíc ode dnes") přechází přes
   hranici měsíce uprostřed mřížky -- den "1" dostává navíc zkratku měsíce
   (viz calendarDayCellHtml), menší font, ať se "1 Oct" vejde do stejně
   široké buňky jako holé číslo. */
.dashboard-calendar-cell--month-start {
  font-size: var(--font-size-75);
  white-space: nowrap;
}

/* padding: 0 + min-width: 0 (bug report 2026-09-28, "tlačítka pro
   dostupnost přetékají na užším zobrazení") -- globální `button` dává
   padding 0.55rem 1rem, tj. min. ~32px vodorovně jen na odsazení; úzká
   buňka 7sloupcové mřížky pak nemohla jít pod tuhle šířku a přetékala
   přes sousední sloupce i okraj karty. Obsah centruje flex výš. */
button.dashboard-calendar-cell {
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  background: var(--content-bg);
  padding: 0;
  min-width: 0;
  box-shadow: none;
}

/* Na telefonu je buňka jen ~30-40px široká -- vyšší dotyková plocha, a
   "1. říj" na přelomu měsíce se zalomí pod sebe místo přetečení. */
@media (max-width: 600px) {
  .dashboard-calendar-cell {
    min-height: 2.25rem;
  }

  .dashboard-calendar-cell--month-start {
    white-space: normal;
    line-height: 1.05;
    text-align: center;
  }
}

.dashboard-calendar-cell--empty {
  visibility: hidden;
}

.dashboard-calendar-cell--muted {
  color: var(--text-muted);
  opacity: 0.4;
}

.dashboard-calendar-cell--locked {
  color: var(--text-muted);
  background: var(--content-bg);
  cursor: not-allowed;
}

/* button.dashboard-calendar-cell (element+třída, 0,1,1) by jinak
   přebilo tyhle stavové třídy (jen třída, 0,1,0) bez ohledu na pořadí
   ve stylu -- živě naměřeno getComputedStyle: barvy se vůbec
   neprojevily, buňka zůstala na základní šedé. Requalifikace na
   button.dashboard-calendar-cell--available/unavailable vyrovná
   specificitu, pořadí ve stylu (tahle pravidla jsou NÍŽ) pak rozhodne. */
button.dashboard-calendar-cell--available {
  background: var(--success-bg);
  color: var(--success);
  font-weight: 600;
}

button.dashboard-calendar-cell--unavailable {
  background: var(--error-bg);
  color: var(--error-text);
}

button.dashboard-calendar-cell:hover {
  border-color: currentColor;
}

.dashboard-calendar-dot {
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* Jarní bonusový den (2026-09-23) -- horní roh, ať se nepřekrývá s
   .dashboard-calendar-dot (zápasový den) dole uprostřed. */
.dashboard-calendar-bonus-star {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 0.6rem;
  color: var(--warning);
  line-height: 1;
}

.dashboard-weather {
  margin-left: auto;
  padding-left: 0.5rem;
  flex-shrink: 0;
  font-size: var(--font-size-85);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Mobilní nález (2026-09-23, "otestuj to i na mobilu") -- na 375px
   `margin-left:auto` na .dashboard-weather bez flex-wrap zmáčklo
   .dashboard-list-item-body na ~72px, text zápasu se lámal skoro po
   znacích. Na malé obrazovce počasí radši spadne na vlastní řádek pod
   text (odsazené o šířku pilulky+mezery, ať vizuálně navazuje na text
   nahoře), než aby mu ukrajovalo místo. */
@media (max-width: 860px) {
  .dashboard-list-item {
    flex-wrap: wrap;
  }

  .dashboard-weather {
    flex-basis: 100%;
    box-sizing: border-box;
    /* margin-left by tlačilo box PŘES 100% šířku ven z karty (živě
       naměřeno -- na 375px přesahovalo o ~15px), padding s border-box
       zůstane uvnitř rodičovské šířky a jen odsadí text. */
    margin-left: 0;
    padding-left: 3.3rem;
  }
}

.dashboard-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 8px;
  line-height: 1.1;
}

.dashboard-pill strong {
  font-size: var(--font-size-100);
}

.dashboard-pill small {
  font-size: 0.6rem;
  text-transform: uppercase;
  opacity: 0.8;
}

.dashboard-pill--urgent {
  background: var(--error-bg);
  color: var(--error-text);
}

.dashboard-pill--soon {
  background: var(--warning-bg);
  color: var(--warning);
}

.dashboard-pill--later {
  background: var(--success-bg);
  color: var(--success);
}

.carousel-controls {
  display: flex;
  gap: 0.4rem;
}

.carousel-controls .link-button {
  padding: 0.3rem 0.7rem;
  font-size: var(--font-size-100);
  line-height: 1;
}

/* Sponzoři zpátky vedle náhledu dostupnosti, poloviční šířka (2026-09-23,
   "Your availability i our sponsors mají být každá na půl stránky šířky
   vedle sebe" -- oprava předchozí verze, co je dala přes celou šířku).
   "Výška 2 karet" teď znamená DVĚ ŘADY karet ve vodorovně scrollovatelném
   carouselu (grid, ne flex) -- karty samotné jsou zpátky v PŮVODNÍ
   (menší) velikosti, "moc vysoké" byla verze s jednou zvětšenou řadou. */
.sponsor-carousel {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Bez viditelného posuvníku (2026-09-28, "posuvnou lištu zde nechci") --
     listuje se šipkami v hlavičce (dokola, viz dashboard.js), na dotykovém
     displeji dál i přejetím prstem. */
  scrollbar-width: none;
}

.sponsor-carousel::-webkit-scrollbar {
  display: none;
}

.sponsor-product-card {
  display: block;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
  text-align: center;
  /* Karta samotná je teď proklikávací odkaz (2026-09-23, "nemusí tam být
     tlačítko visit, udělej z celé buňky odkaz") -- reset odkazových
     výchozích stylů, ať vypadá stejně jako dřívější .sponsor-product-card
     bez tlačítka Visit. */
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Sponzor bez produktů nemá pod sebou s kým tvořit pár (viz
   fetchCarouselItems v dashboard.js) -- zabere celý sloupec, ať se
   sponzor/produkt páry v dalších sloupcích neposunou o řadu. */
.sponsor-identity-card--solo {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a.sponsor-product-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.sponsor-product-image {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  margin-bottom: 0.4rem;
}

/* Podkladová barva za logo (2026-09-23, "pokud je logo nižší nebo
   hubenější, dej ho do středu karty a zbytek vyplň podkladovou barvou")
   -- rámeček přes celou šířku karty s pevnou výškou, logo se v něm
   flexboxem vycentruje bez ohledu na poměr stran, barva vyplní zbytek
   místo tenkého paddingu těsně kolem loga. */
.sponsor-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 0.5rem;
  border-radius: 8px;
  margin-bottom: 0.4rem;
}

.sponsor-logo-frame-image {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}

.sponsor-product-price {
  font-weight: 700;
  color: var(--primary);
  margin: 0.2rem 0;
}

.sponsor-code {
  font-size: var(--font-size-85);
  margin: 0.3rem 0;
}

/* #/sponsors -- náhled nahraného loga v řádku správy (2026-09-23,
   "vkládat logo ručně nahráním z počítače"). Veřejná karta na dashboardu
   používá .sponsor-product-card/.sponsor-product-image (carousel). */
.sponsor-logo-cell {
  min-width: 210px;
}

.sponsor-logo-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sponsor-logo-thumb {
  max-width: 60px;
  max-height: 40px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
}

/* Kompaktní varianta .checkbox-label uvnitř tabulkové buňky loga --
   výchozí margin (0.9rem shora) je určený pro formulářový tok, v úzkém
   sloupci #/sponsors akorát zbytečně natahuje výšku řádku. */
.sponsor-logo-bg-toggle {
  margin: 0.4rem 0 0.3rem;
  font-size: var(--font-size-80);
  font-weight: 400;
}

.sponsor-logo-bg-toggle input[type="checkbox"] {
  width: auto;
}

.sponsor-products-panel {
  background: var(--surface-subtle);
  border-radius: 8px;
  padding: 0.85rem;
  margin: 0.75rem 0 0;
}

.sponsor-products-panel .modal-subheading {
  margin-top: 0;
}

/* Karta na sponzora místo tabulkového řádku (bug report 2026-09-23,
   "předělej zobrazení políček, ať je to lépe přehledné") -- 7 polí +
   logo s barvou pozadí se do jednoho úzkého sloupce tabulky nevešlo
   čitelně (viz screenshot: "http:", uťaté "C..." u kódu). Každé pole má
   teď vlastní popisek nad sebou a orámovaná karta ho vizuálně odděluje
   od sousedního sponzora. */
.sponsor-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.sponsor-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.sponsor-card-name {
  flex: 1 1 220px;
  font-weight: 600;
}

.sponsor-card-active {
  margin: 0;
  flex-shrink: 0;
}

.sponsor-card-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.sponsor-card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.25rem 1.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

/* Obecný vzor "popisek nad polem" mimo <form> (stejné odsazení jako
   `form label`/.field-label, jen bez závislosti na obalujícím <form>
   tagu) -- znovupoužitelné kdekoli v appce, kde se stejný problém s
   nahuštěnou tabulkou objeví příště. */
.field-group {
  display: block;
  margin-bottom: 0.5rem;
}

.field-group .field-label {
  margin-top: 0;
}

.sponsor-card-description {
  grid-column: 1 / -1;
}

/* Výkazy hodin mentorů (#/mentor/work, /reports, /costs -- 2026-09-23). */
.badge-warning {
  color: var(--on-accent);
  background: var(--warning);
}

.data-table th.num,
.data-table td.num {
  text-align: right;
  white-space: nowrap;
}

.error-inline {
  color: var(--error-text);
  font-size: var(--font-size-85);
}

.mentor-tile-count {
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* #/mentor hub rozdělený na sekce (2026-09-24) -- větší odstup mezi
   dlaždicemi jedné sekce a lištou další, ať je dělení vidět. Lišta sama
   (`.section-divider`, 2026-09-26 -- dřív celá karta `.mentor-hub-section`,
   teď stejná úzká modrá lišta jako "Postgame" na detailu zápasu) má jen
   1.5rem, tady se to pro sled víc sekcí za sebou zvětší. */
.mentor-tile-grid + .section-divider {
  margin-top: 2rem;
}

/* #/mentor/work kalendář událostí (2026-09-24) -- 3 měsíce vedle sebe,
   na užší obrazovce pod sebou. Dny jsou klikací (role=button), události
   uvnitř skutečná tlačítka (.mentor-cal-chip). */
.mentor-cal-toolbar {
  align-items: center;
  margin: 0;
}

.mentor-cal-toolbar .checkbox-label {
  margin: 0 0.5rem 0 0;
}

.mentor-cal-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 1100px) {
  .mentor-cal-months {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mentor-cal-month h3 {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-100);
  text-transform: capitalize;
}

.mentor-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.mentor-cal-weekday {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 0.2rem;
}

.mentor-cal-day {
  min-height: 4.4rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.mentor-cal-day:hover,
.mentor-cal-day:focus-visible {
  border-color: var(--primary);
  outline: none;
}

.mentor-cal-day.is-empty {
  border: none;
  background: transparent;
  cursor: default;
}

.mentor-cal-day.is-past {
  background: var(--surface-subtle);
}

.mentor-cal-day.is-today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.mentor-cal-daynum {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mentor-cal-day.is-today .mentor-cal-daynum {
  color: var(--primary);
}

.mentor-cal-chip {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.1rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: var(--primary);
  background: var(--primary-bg);
}

.mentor-cal-chip.is-done {
  color: var(--success-text);
  background: var(--success-bg-strong);
}

.mentor-cal-chip.is-cancelled {
  color: var(--text-muted);
  background: var(--surface-muted);
  text-decoration: line-through;
}

.mentor-cal-chip.is-mine {
  border-color: currentColor;
  font-weight: 700;
}

.mentor-cal-more {
  font-size: 0.66rem;
  color: var(--text-muted);
  padding-left: 0.2rem;
}

.mentor-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.mentor-cal-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.75rem;
}

.mentor-cal-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--primary);
}

.mentor-cal-dot.is-done {
  background: var(--success);
}

.mentor-cal-dot.is-cancelled {
  background: var(--border-strong);
}

.mentor-cal-dot.is-mine {
  border-color: var(--text);
}

.mentor-day-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.mentor-day-event p {
  margin: 0.2rem 0 0;
}

.mentor-event-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 1rem;
}

.mentor-event-people {
  display: grid;
  gap: 0.25rem;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.mentor-event-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mentor-event-person .checkbox-label {
  margin: 0;
}

.mentor-event-person input[type="number"] {
  width: 5.5rem;
}

/* Buňky dne jsou při 3 měsících vedle sebe úzké (~40 px při 1280 px
   šířce okna) -- text události se nevejde, proto se tam události
   ukazují jako barevné tečky (název v tooltipu, detail po kliknutí na
   den). Když je měsíc široký (pod sebou na menší obrazovce nebo velký
   monitor), vrací se názvy. */
.mentor-cal-month {
  container-type: inline-size;
}

.mentor-cal-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@container (max-width: 520px) {
  .mentor-cal-day {
    min-height: 2.9rem;
  }

  .mentor-cal-chips {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
  }

  .mentor-cal-day .mentor-cal-chip {
    width: 0.7rem;
    height: 0.7rem;
    padding: 0;
    border-radius: 50%;
    border-width: 2px;
    background: var(--primary);
  }

  .mentor-cal-day .mentor-cal-chip.is-done {
    background: var(--success);
  }

  .mentor-cal-day .mentor-cal-chip.is-cancelled {
    background: var(--border-strong);
  }

  .mentor-cal-day .mentor-cal-chip.is-mine {
    border-color: var(--text);
  }

  .mentor-cal-day .mentor-cal-chip-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Kalendář + "My upcoming events" jsou dvě .card uvnitř obalu
   #mentor-calendar (ne přímé děti #view), takže gap z .container na ně
   nedosáhne -- stejný problém/řešení jako .bulletin-list. */
.mentor-calendar-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Účastníci flagového turnaje (lib/tournamentTeamsEditor.js) -- řádek
   [tým][číslo družstva][odebrat], stejný vzor tlačítek jako .button-row. */
.tournament-teams-editor {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.tournament-teams-editor [data-role="tt-rows"] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.tournament-team-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
}

.tournament-team-row select {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.tournament-team-row input[data-role="tt-squad"] {
  width: 4.5rem;
  flex: 0 0 auto;
  margin: 0;
}

.tournament-team-row button,
.tournament-teams-editor [data-role="tt-add"],
.tournament-teams-editor [data-role="crew-add"] {
  width: auto;
  margin-top: 0;
}

.tournament-teams-cell {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.match-tournament-teams {
  margin: 0.25rem 0 0.5rem;
}

/* Statistiky rozhodčích (views/refereeStats.js) -- filtry bez horní čáry
   .inline-form (je hned pod nápovědou karty), seznam milníků jako řádky. */
.referee-stats-filters {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

.referee-stats-filters .field-label {
  margin: 0;
}

.referee-stats-filters .checkbox-label {
  margin: 0;
}

.milestone-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.milestone-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.milestone-list li:last-child {
  border-bottom: 0;
}

/* Plovoucí upozornění na online meeting (2026-09-24, lib/meetingBanner.js)
   -- zelený podklad, dole uprostřed, celé je jedno tlačítko (klik = odkaz
   na meeting). Leží v <body> mimo #app, proto vlastní z-index pod
   modaly (.modal-overlay 9500). Body dostane odsazení, ať banner nezakryje
   poslední tlačítka na stránce. */
.meeting-banner {
  position: fixed;
  /* left+right+auto margin místo left:50% + translate -- s tím by
     shrink-to-fit šířka dostala jen polovinu okna a text se zbytečně
     zkracoval. */
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  margin: 0 auto;
  padding: 0.7rem 0.8rem 0.7rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: var(--success);
  color: var(--on-accent);
  font-size: var(--font-size-85);
  text-align: left;
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.35);
  cursor: pointer;
}

.meeting-banner:hover {
  background: #15803d;
}

.meeting-banner:focus-visible {
  outline: 3px solid #86efac;
  outline-offset: 2px;
}

.meeting-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.meeting-banner-join {
  flex-shrink: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

/* Během meetingu jemně pulzuje -- rozliší "začíná za X min" od "běží". */
.meeting-banner.is-live::before {
  content: "";
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff;
  animation: meeting-banner-pulse 1.6s ease-in-out infinite;
}

@keyframes meeting-banner-pulse {
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-banner.is-live::before {
    animation: none;
  }
}

body.has-meeting-banner {
  padding-bottom: 4.5rem;
}

/* TOP 3 aktuální sezony na #/referee-stats -- tři sloupce (tackle/flag/
   celkem), na úzkém displeji pod sebou. */
.top-referees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.top-referees-column .modal-subheading {
  margin-top: 0.5rem;
}

.top-referees-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-referees-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.top-referees-list li:last-child {
  border-bottom: 0;
}

.top-referees-rank {
  color: var(--text-muted);
  min-width: 1.5rem;
}

.top-referees-name {
  flex: 1 1 auto;
}

/* Zájemci o roli rozhodčího (prospects.js, 2026-09-25) -- časová osa
   komunikace a rozbalovací "všechny odpovědi z formuláře". */
.prospect-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prospect-event {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.prospect-event:last-child {
  border-bottom: none;
}

.prospect-event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}

.prospect-event-head .link-button {
  margin-left: auto;
}

.prospect-event-body {
  margin-top: 0.35rem;
  padding-left: 1.6rem;
  font-size: var(--font-size-90);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prospect-form-answers {
  margin-top: 1rem;
}

.prospect-form-answers summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-size-90);
  margin-bottom: 0.5rem;
}

/* Hromadná pozvánka zájemců na školení (prospects.js). */
.prospect-invite-reminder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.prospect-invite-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.prospect-invite-list {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.prospect-invite-list .checkbox-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
}

/* Dotykové obrazovky (tablet/telefon, 2026-09-28) -- malá tlačítka
   (.link-button 0.3rem padding, akce v tabulkách, chipy nominací) měla
   ~26px na výšku, prstem se špatně trefovala. Na hrubém ukazateli
   minimálně 36px; zaškrtávátka větší. Myš/touchpad beze změny. */
@media (pointer: coarse) {
  .link-button,
  .data-table .actions button,
  .nomination-chip {
    min-height: 2.25rem;
  }

  .link-button.icon-only {
    min-width: 2.25rem;
  }

  .link-button.icon-only.notif-delete {
    width: 2.25rem;
    height: 2.25rem;
  }

  /* Skryté vstupy přepínačů (.toggle, .choice-chip) nechat být. */
  input[type="checkbox"]:not(.toggle input, .choice-chip input),
  input[type="radio"]:not(.toggle input, .choice-chip input) {
    width: 1.25rem;
    height: 1.25rem;
  }

  .nomination-add-manual-select {
    min-height: 2.25rem;
  }
}

/* Zebra -- avatar rozhodčího (2026-09-28, lib/zebra.js). Kresba má pevné
   barvy (bílá zebra s tmavým obrysem sedí na světlé i tmavé kartě), tokeny
   jen pro bublinu a podklady. */
.zebra-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.zebra-figure {
  flex: 0 0 auto;
  width: 200px;
}

.zebra-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.zebra-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--highlight-bg);
  color: var(--highlight-text);
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  font-size: var(--font-size-90);
  line-height: 1.4;
}

/* Ocásek bubliny míří doprava na zebru */
.zebra-bubble::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right: 0;
  border-left: 10px solid var(--border-strong);
}

.zebra-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.75rem 0 0;
  font-size: var(--font-size-85);
  color: var(--text-muted);
}

.zebra-meta strong {
  color: var(--text);
}

/* Stránka Dostupnost: zebra nad tabulkou termínů */
.zebra-panel--availability {
  margin: 0.75rem 0 0;
}

#availability-zebra .zebra-meta {
  margin: 0.5rem 0 1rem;
}

.zebra-panel--availability .zebra-figure {
  width: 170px;
}

/* Hlavička zebry u člena crew na detailu zápasu -- pruhy nevidí nikdo
   kromě majitele, tady jen nálada a čepice podle pozice. */
.crew-card--zebra {
  position: relative;
}

.crew-card--zebra .crew-role,
.crew-card--zebra .crew-name {
  padding-right: 2.5rem;
}

.crew-zebra {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-muted);
  overflow: hidden;
}

.crew-zebra svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Animace: šťastná vrtí ocasem a poskakuje, otevřené oči mrkají, Zzz stoupá */
.zebra-tail {
  transform-origin: 84px 148px;
}

.zebra--happy .zebra-tail {
  animation: zebra-wag 1.2s ease-in-out infinite;
}

.zebra--happy .zebra-body {
  animation: zebra-bounce 1.6s ease-in-out infinite;
}

.zebra-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: zebra-blink 5s infinite;
}

.zebra-zzz text {
  animation: zebra-float 2.4s ease-in-out infinite;
}

@keyframes zebra-wag {
  50% {
    transform: rotate(14deg);
  }
}

@keyframes zebra-bounce {
  50% {
    transform: translateY(-4px);
  }
}

@keyframes zebra-blink {
  0%,
  95%,
  100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}

@keyframes zebra-float {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zebra * {
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .zebra-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .zebra-figure,
  .zebra-panel--availability .zebra-figure {
    width: 170px;
    align-self: center;
  }

  /* Na úzkém displeji je bublina nad zebrou, ocásek míří dolů */
  .zebra-bubble::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -10px;
    margin: 0 0 0 -8px;
    border: 8px solid transparent;
    border-bottom: 0;
    border-top: 10px solid var(--border-strong);
  }
}

/* Horní řada přehledu se zebrou: tři karty na třetiny (Čeká na vás,
   Nadcházející zápasy, Tvoje zebra). Pod 1100 px dvě a dvě, pod 860 px
   jeden sloupec (pravidlo .dashboard-grid výš). */
.dashboard-grid--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .dashboard-grid--thirds {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .dashboard-grid--thirds {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Úzká karta: bublina nad zebrou, ocásek míří dolů */
.zebra-panel--stacked {
  flex-direction: column;
  align-items: stretch;
}

.zebra-panel--stacked .zebra-figure {
  width: 190px;
  align-self: center;
}

.zebra-panel--stacked .zebra-bubble::after {
  right: auto;
  left: 50%;
  top: auto;
  bottom: -10px;
  margin: 0 0 0 -8px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top: 10px solid var(--border-strong);
}

/* Akce v bublině zebry (odkaz / Uložit) -- pod textem */
.zebra-bubble .zebra-bubble-action {
  display: inline-flex;
  margin-top: 0.5rem;
}

.zebra-bubble > span {
  display: block;
}

/* Zebra v rohu -- nápověda, novinky, prohlídka appky (lib/zebraGuide.js).
   Leží v <body> mimo #app; pod meeting bannerem (9000) a modaly (9500). */
.zebra-guide {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  pointer-events: none;
}

.zebra-guide > * {
  pointer-events: auto;
}

body.has-meeting-banner .zebra-guide {
  bottom: 5rem;
}

.zebra-guide-toggle {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.zebra-guide-toggle:hover {
  transform: translateY(-2px);
}

.zebra-guide-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.zebra-guide-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  font-size: var(--font-size-75);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.zebra-guide.is-open .zebra-guide-dot {
  display: none;
}

.zebra-guide-panel {
  position: relative;
  width: min(340px, calc(100vw - 2rem));
  background: var(--highlight-bg);
  color: var(--highlight-text);
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 0.8rem 0.9rem 0.7rem;
  font-size: var(--font-size-90);
  line-height: 1.45;
}

/* Ocásek bubliny míří dolů na zebru */
.zebra-guide-panel::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -10px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top: 10px solid var(--border-strong);
}

.zebra-guide-panel p {
  margin: 0 0 0.5rem;
}

.zebra-guide-body {
  padding-right: 1.4rem;
}

.zebra-guide-kicker {
  font-size: var(--font-size-75);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

.zebra-guide-link {
  display: inline-flex;
  margin-bottom: 0.5rem;
}

.zebra-guide-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 0.9rem;
  line-height: 1;
}

.zebra-guide-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.zebra-guide-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.zebra-guide-spacer {
  flex: 1 1 auto;
}

/* Prohlídka appky: zvýrazněná položka menu / zvoneček */
.zebra-tour-highlight {
  outline: 3px solid #facc15;
  outline-offset: 2px;
  border-radius: 8px;
  animation: zebra-tour-pulse 1.4s ease-in-out infinite;
}

@keyframes zebra-tour-pulse {
  50% {
    outline-color: rgba(250, 204, 21, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zebra-tour-highlight {
    animation: none;
  }
}

@media print {
  .zebra-guide {
    display: none;
  }
}