/* Sdílený design systém – barevné tokeny, tmavý/světlý motiv, základní
   layout prvky (masthead s logem, theme-toggle, back-link) společné napříč
   celou appkou (viz partials/masthead.blade.php). Stránkově specifické
   styly (rozvržení .wrap, velikost h1, komponenty jako harmonogram/
   hlasování/seznamy entit) jsou v landing.css a city.css, které se linkují
   vedle tohoto souboru. */
:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --border:         rgba(11,11,11,0.10);
  --grid:           #e1e0d9;
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;
  --status-muted:    #898781;
  --series-1:        #2a78d6;
  --series-2:        #7c5cbf;
  --series-3:        #0f9488;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --border:         rgba(255,255,255,0.10);
    --grid:           #2c2c2a;
    --status-good:     #0ca30c;
    --status-warning:  #fab219;
    --status-serious:  #ec835a;
    --status-critical: #e66767;
    --status-muted:    #898781;
    --series-1:        #3987e5;
    --series-2:        #a48ee0;
  }
}
/* Explicitní volba přebíjí systémové nastavení v obou směrech */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page:           #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --border:         rgba(255,255,255,0.10);
  --grid:           #2c2c2a;
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #e66767;
  --status-muted:    #898781;
  --series-1:        #3987e5;
  --series-2:        #a48ee0;
  --series-3:        #3fbfae;
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --border:         rgba(11,11,11,0.10);
  --grid:           #e1e0d9;
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;
  --status-muted:    #898781;
  --series-1:        #2a78d6;
  --series-2:        #7c5cbf;
  --series-3:        #0f9488;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Jednotná šířka stránky napříč celou appkou – landing i city-doména sdílí
   stejný .wrap/.masthead-inner max-width, ať mají stejnou šířku sloupce.
   Konkrétní padding (výška okrajů) zůstává stránkově specifický v
   landing.css/city.css. */
.wrap { max-width: 1320px; margin: 0 auto; }
.masthead-inner { max-width: 1320px; }

.subtitle { color: var(--text-secondary); font-size: 14px; }
.subtitle a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.subtitle a:hover { color: var(--text-primary); text-decoration-color: currentColor; }

.back-link {
  display: inline-block;
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 10px;
}
.back-link:hover { color: var(--text-primary); }

/* Odkaz "Přeskočit na obsah" (partials/masthead.blade.php) – mimo viewport,
   dokud ho uživatel nezaostří Tabem, pak se posune na viditelné místo v
   levém horním rohu, nad zbytkem stránky (z-index vyšší než .masthead). */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  transition: top .12s ease;
}
.skip-link:focus { top: 8px; }

/* --- Masthead (logo + přepínač motivu) – nad .wrap, na všech stránkách stejný --- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform .2s ease;
  /* Jemný modrý nádech (--series-1, stejná barva jako odkazy/akcenty) –
     samotné --surface-1 je od --page skoro nerozeznatelné (hlavně ve
     světlém motivu), tohle dá headeru čitelný odstín i tak. */
  background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.masthead.is-hidden { transform: translateY(calc(-100% - 8px)); }
.masthead:has(:focus-visible) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .masthead { transition: none; }
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 40px) 8px;
}
.masthead-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.masthead-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex: none;
}
.masthead-context { display: contents; }
/* Vybraná entita vedle loga – obec (partials/masthead.blade.php, $slug) nebo
   celostátní politický subjekt ($subjektNav). Stejný vzhled, liší se jen
   ikonka a cíl odkazu. */
.masthead-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.masthead-city:hover { color: var(--text-primary); }
.masthead-city.active { color: var(--text-primary); font-weight: 600; }
/* Jméno obce zůstává vlastní ellipsis box (ne .masthead-city samotné,
   od přidání ikonky domku vedle něj, viz partials/summary-icon.blade.php)
   – flex kontejner ellipsis na přímém text node/více dětech takhle
   spolehlivě nezvládne, `min-width: 0` na obou (i na .masthead-city výše)
   je nutné, aby se flex item vůbec směl zmenšit pod obsah, jinak by
   overflow/text-overflow neměly co ořezávat. */
.masthead-city-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ikonka dědí barvu odkazu (currentColor), stejný princip jako
   .masthead-nav .summary-card-icon níže. */
.masthead-city .summary-card-icon { width: 14px; height: 14px; color: currentColor; opacity: .8; flex-shrink: 0; }
.masthead-nav { display: flex; align-items: center; gap: 16px; }
/* Hlavička funguje i bez city.css (landing a informační stránky). */
.masthead .summary-card-icon { fill: currentColor; }
.masthead-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
}
.masthead-nav a:hover { color: var(--text-primary); }
.masthead-nav a.active { color: var(--text-primary); font-weight: 600; }
/* Ikonka dědí barvu odkazu (currentColor) – v .active/hover stavu tak
   ztmavne spolu s textem, žádná samostatná paleta navíc. */
.masthead-nav .summary-card-icon { width: 15px; height: 15px; color: currentColor; opacity: .8; flex-shrink: 0; }

/* Přepínač volebního období (partials/period-switcher.blade.php) – vedle
   .masthead-city, stejný oddělovací styl (border-left), styl <select>
   odvozený od .dropdown-toggle v city.css (stejné ohraničení/pozadí/
   velikost písma, ať to vypadá jako součást stejné rodiny ovládacích
   prvků). Přesunuto sem z city.css, když se z page-level partialu stal
   trvalá součást masthead (viz diskuze v hlavní konverzaci) – jde teď o
   sdílený layout chrome, ne o city-doménovou specifiku. */
.period-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Druhý přepínač v řadě (období hned za typem voleb na profilu subjektu) –
   žádný vlastní oddělovač, aby typ + období četly jako jedna skupina. */
.period-switcher.attached { border-left: 0; padding-left: 0; margin-left: -4px; }
/* Ikonka místo textového popisku (viz partials/period-switcher.blade.php)
   – stejná velikost/tlumenost jako .masthead-nav výše, ne výchozí
   .summary-card-icon (18px, city.css) stavěná na summary karty. */
.period-switcher .summary-card-icon { width: 15px; height: 15px; color: currentColor; opacity: .8; flex-shrink: 0; }
.period-select {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.masthead-icon {
  display: block;
  height: 38px;
  width: auto;
  position: relative;
  bottom: 10px;
  left: 5px;
}
.masthead-wordmark {
  font-family: 'Righteous', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .01em;
  color: #6366f1;
}

.masthead-actions { display: flex; align-items: center; gap: 8px; flex: none; }

#theme-toggle {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#theme-toggle:hover { background: var(--grid); }

/* Hamburger – skrytý na desktopu (viz breakpoint níže), na mobilu nahrazuje
   .masthead-nav coby rozklikávací panel. 3 pruhy se na .open přeskládají do
   křížku (stejný vzor jako .notice > summary::after – jeden glyph/tvar,
   transformovaný, ne přepínání dvou různých ikon). */
.masthead-menu-toggle {
  display: none;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-1);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.masthead-menu-toggle:hover { background: var(--grid); }
.hamburger-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-primary);
  transition: transform .15s ease, opacity .15s ease;
}
.masthead-menu-toggle.open .hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.masthead-menu-toggle.open .hamburger-bar:nth-child(2) { opacity: 0; }
.masthead-menu-toggle.open .hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobil – .masthead-nav zůstává v DOM uvnitř .masthead-left (viz
   masthead.blade.php), ale od breakpointu se přes position:absolute vytrhne
   z flex flow a stane se rozklikávacím panelem přes celou šířku headeru;
   containing block je .masthead (position:relative, nastaveno trvale výše –
   ne jen tady v mediadotazu), ne bezprostřední .masthead-left, takže "right:0"
   sahá k okraji headeru, ne jen k okraji flex položky. Nad breakpointem
   naopak .masthead-menu-toggle zůstává schovaný a .masthead-nav se zobrazí
   inline v normálním layoutu (žádné position/display přepisy – to je jeho
   výchozí stav výše). */
@media (max-width: 640px) {
  .masthead-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
  }
  .masthead-left { display: contents; }
  .masthead-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .masthead-actions { grid-column: 2; grid-row: 1; }
  .masthead-context {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
  }
  /* Stránky bez kontextu mají pouze první řádek s logem a ovládáním. */
  .masthead-context:not(:has(.masthead-city, .period-switcher)) { display: contents; }
  .masthead-context .masthead-city {
    flex: 1 1 120px;
    max-width: 100%;
    padding-left: 0;
    border-left: 0;
  }
  .masthead-context .period-switcher {
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    border-left: 0;
    margin-left: 0;
  }
  .masthead-context .period-select { min-width: 0; max-width: 100%; flex: 1 1 auto; }
}

/* Na užším desktopu schovat odkazy, ale ponechat hlavičku v jednom řádku. */
@media (max-width: 1000px) {
  .masthead-menu-toggle { display: flex; }
  .masthead-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
    border-bottom: 1px solid var(--border);
    padding: 8px clamp(16px, 4vw, 40px) 14px;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
  }
  .masthead-nav.open { display: flex; }
  .masthead-nav a { padding: 8px 0; width: 100%; }
}

/* --- Footer (partials/footer.blade.php) – nad zápatím appky, na všech
   stránkách stejný, stejná šířka sloupce jako .wrap/.masthead-inner. --- */
.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1));
}
.site-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.site-footer-brand {
  color: var(--text-muted);
  text-decoration: none;
  font-family: 'Righteous', system-ui, sans-serif;
  letter-spacing: .01em;
}
.site-footer-brand:hover { color: var(--text-primary); }
.site-footer-note { margin-left: auto; }
.site-footer-sitemap {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  text-align: center;
  padding-top: 8px;
}
.site-footer-sitemap-title {
  flex-basis: 100%;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-footer-sitemap a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer-sitemap-separator { color: var(--text-faint); }
.site-footer-sitemap a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.site-footer-disclaimer {
  flex-basis: 100%;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
  text-align: center;
}
.site-footer-disclaimer a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.site-footer-disclaimer a:hover { color: var(--text-primary); text-decoration-color: currentColor; }

/* Sloupec „Povolání" v tabulce na subjekt/lide – volný text (i dlouhý,
   „student … VOŠ zdravotnické a životního prostředí …"). `.data-table td`
   je jinak `white-space: nowrap`, což by tabulku roztáhlo; tady omezit
   šířku a nechat zalamovat. */
#lide-table .col-povolani {
  max-width: 240px;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Nesortovatelná hlavička (např. „Výsledek voleb") nemá dělat, že je klikací. */
#lide-table th:not([data-sort]) { cursor: default; }
#lide-table th:not([data-sort]):hover { color: var(--text-muted); }
/* Sloupec „Výsledek voleb" skrytý při 1 vybraném stavu (subjekt-lide.js). */
#lide-table-view.hide-vysledek .col-vysledek { display: none; }

/* Skupina checkboxů „Zobrazit:" v .toggle-row na subjekt/lide – užší mezera
   uvnitř trojice než parent .toggle-row (gap 20px), ať se čte jako celek. */
.toggle-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.toggle-cluster-label { font-size: 13px; color: var(--text-muted); }

/* ── Klikací pruh „Povolání zvolených" (subjekt/lide) ─────────────────────
   partials/subjekt-povolani-bar.blade.php + subjekt-lide.js. Kategorie
   0..17 (App\Support\PovolaniKategorie), --pk-na = Neuvedeno. Kategorická
   paleta – mid-tone, čitelná na světlém i tmavém povrchu, proto bez
   samostatných tmavých variant (stejně jako barvy stran). */
:root {
  --pk-0:  #9a988f;  --pk-1:  #5a9e3f;  --pk-2:  #d8574e;
  --pk-3:  #d67ba8;  --pk-4:  #3d7fd0;  --pk-5:  #1f9e8f;
  --pk-6:  #6b62c4;  --pk-7:  #7a7f95;  --pk-8:  #e0982f;
  --pk-9:  #2fa6c4;  --pk-10: #e0742f;  --pk-11: #a05cc0;
  --pk-12: #9bb63f;  --pk-13: #c9a72c;  --pk-14: #a9784f;
  --pk-15: #5fb0e0;  --pk-16: #e08fb0;  --pk-17: #6f6d66;
  --pk-na: #b8b6ad;
}

.pk-bar { margin: 16px 0 20px; }
.pk-bar-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.pk-bar-title { font-weight: 600; font-size: 13px; }
.pk-bar-clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: 12px;
  text-decoration: underline; text-underline-offset: 2px;
}
.pk-bar-clear:hover { color: var(--text-primary); }

.pk-bar-strip {
  display: flex; width: 100%; height: 14px;
  border-radius: 3px; overflow: hidden;
  background: var(--grid);
}
.pk-seg {
  flex: var(--w, 0) 0 0; min-width: 2px;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background: var(--c, var(--pk-na));
  transition: filter .12s, opacity .12s;
}
.pk-seg:hover { filter: brightness(1.12); }
.pk-seg:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
/* Aktivní filtr – zvýrazni vybraný, ztlum ostatní */
.pk-bar.is-filtered .pk-seg { opacity: .4; }
.pk-bar.is-filtered .pk-seg[aria-pressed="true"] { opacity: 1; }

.pk-bar-legend {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 6px;
}
.pk-leg {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 3px 5px; margin: 0;
  border-radius: 4px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text-secondary);
}
.pk-leg:hover { background: var(--grid); color: var(--text-primary); }
.pk-leg:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.pk-leg[aria-pressed="true"] { background: var(--grid); color: var(--text-primary); font-weight: 600; }
.pk-bar.is-filtered .pk-leg:not([aria-pressed="true"]) { opacity: .55; }
.pk-sw {
  width: 10px; height: 10px; border-radius: 2px; flex: none;
  background: var(--pk-na);
}
.pk-leg-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pk-leg-pct { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pk-leg[aria-pressed="true"] .pk-leg-n,
.pk-leg[aria-pressed="true"] .pk-leg-pct { color: inherit; }
/* Obarvený rámeček s ikonkou vykřičníku – partials/note-callout.blade.php */
.note-callout[hidden] { display: none; }  /* jinak `display:flex` níž přebije UA [hidden] */
.note-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--status-warning) 40%, var(--border));
  background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-1));
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.note-callout-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--status-warning);
}