/* 
 * CSS Document: index.css
 * Premium Data Research Aesthetic: "Clean EU / Serious Public Intelligence"
 * Purpose: Global stylesheet for main pages (index)
 */

/* ==========================================================================
   1. DESIGN SYSTEM (CSS VARIABLES)
   ========================================================================== */
:root {
  /* Hrúbka akcentovej čiary pod nadpismi okien (globálne pre všetky stránky) */
  --title-underline-h: 1px;
  /* Core Colors */
  --bg-deep-midnight: #061e40; /* Svetlejšia námornícka modrá v štýle slovenskej vlajky */
  --surface-1: rgba(13, 22, 40, 0.78); /* Soft glass for cards — pevnejšie, menej „mliečne" */
  --surface-2: rgba(30, 41, 59, 0.85); /* Solid glass for headers */
  
  /* Accents (Original Brighter Slovak Colors) */
  --accent-blue: #0b4ea2;
  --accent-blue-glow: rgba(11, 78, 162, 0.4);
  --accent-red: #ee1c25;
  --accent-white: #f8fafc;
  
  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  /* Borders & Shadows */
  --border-glass: 1px solid rgba(255, 255, 255, 0.12);
  --border-light: 1px solid rgba(255, 255, 255, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.1); /* jemný border kariet (eu-hero-card a pod.) */
  --shadow-ambient: 0 3px 16px -6px rgba(0, 0, 0, 0.45);
  --shadow-elevation: 0 14px 32px -14px rgba(0, 0, 0, 0.6);
  
  /* Layout Metrics */
  --max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Display font — nadpisy a názvy okien (čísla a text ostávajú Inter) */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
/* Zabrániť Edge/Chrome forced dark mode — stránka si spravuje témy sama */
:root {
  color-scheme: light dark;
  forced-color-adjust: none;
}
meta[name="color-scheme"] { color-scheme: light dark; }

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

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-deep-midnight);
  /* Výraznejšie slovenské farby na pozadí */
  background-image:
    radial-gradient(circle at top right, rgba(11, 78, 162, 0.38) 0%, transparent 60%),
    radial-gradient(circle at bottom left, rgba(238, 28, 37, 0.20) 0%, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  /* Tabulárne číslice — hodnoty v kartách/tabuľkách sa zarovnajú do stĺpcov */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prístupnosť: rešpektuj systémové nastavenie obmedzeného pohybu */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Display font — hlavné nadpisy, názvy okien, logo (jemne stiahnuté medzery) */
h1, h2, h3,
#logo span,
.eu-section-title,
.sk-institutions__heading,
.author-statement__heading {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   3. PAGE LAYOUT
   ========================================================================== */
#page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  animation: fadeUpEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   4. HEADER (HERO)
   ========================================================================== */
#head {
  width: 100%;
  min-height: 280px;
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  /* Pure original image without vignette */
  background: url("img/header_bg.jpg") center 40% / cover no-repeat;
  border: var(--border-glass);
  box-shadow: var(--shadow-elevation);
  position: relative;
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 3.5rem;
}

/* EU page — iný header obrázok */
[data-page="eu-dashboard"] #head {
  background: url("../img/eu_bg.jpg") center 40% / cover no-repeat;
}

/* SK Panel page — iný header obrázok */
[data-page="sk-dashboard"] #head {
  background: url("../img/sk_bg.jpg") center 40% / cover no-repeat;
}

/* SK Regional page — iný header obrázok */
[data-page="sk-regional"] #head {
  background: url("../img/rg_bg.jpg") center 40% / cover no-repeat;
}

/* AI Výskum page — iný header obrázok */
[data-page="content"] #head {
  background: url("../img/ai_bg.jpg") center 40% / cover no-repeat;
}

[data-page="eu-states"] #head {
  background: url("../img/st_bg.jpg") center 40% / cover no-repeat;
}

[data-page="eu-security"] #head {
  background: url("../img/sc_bg.jpg") center 40% / cover no-repeat;
}

/* Funkcie — podstránky (Fiškálny simulátor / Grafy / Investovanie) */
[data-page="funkcie"] #head {
  background: url("../img/fs_bg.jpg") center 40% / cover no-repeat;
}
[data-page="funkcie-grafy"] #head {
  background: url("../img/ch_bg.jpg") center 40% / cover no-repeat;
}

/* Makroekonomika page — header obrázok */
[data-category="macro_public_finance"] #head {
  background: url("../img/me_bg.jpg") center 40% / cover no-repeat;
}

/* Životná úroveň page — header obrázok */
[data-category="living_income_housing"] #head {
  background: url("../img/zu_bg.jpg") center 40% / cover no-repeat;
}

/* Ľudský kapitál page — header obrázok */
[data-category="labour_education_humancapital"] #head {
  background: url("../img/lk_bg.jpg") center 40% / cover no-repeat;
}

/* Sociálna kapacita page — header obrázok */
[data-category="health_social_capacity"] #head {
  background: url("../img/zsc_bg.jpg") center 40% / cover no-repeat;
}

/* Infraštruktúra page — header obrázok */
[data-category="infrastructure_mobility_digital"] #head {
  background: url("../img/ir_bg.jpg") center 40% / cover no-repeat;
}

/* Energie page — header obrázok */
[data-category="energy_environment"] #head {
  background: url("../img/en_bg.jpg") center 40% / cover no-repeat;
}

/* Photo credit button — bottom-right corner of header */
.photo-credit-btn {
  position: absolute;
  bottom: 0.6rem;
  right: 0.8rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.photo-credit-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.photo-credit-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}
.photo-credit-tooltip.visible {
  display: block;
}
.photo-credit-tooltip a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.photo-credit-tooltip a:hover {
  color: #93c5fd;
}

/* Malé tlačidlo „O stránkach" — vedľa foťáčika (popis stránok v content-modáli) */
.about-pages-btn {
  position: absolute;
  bottom: 0.6rem;
  right: 3.1rem;
  z-index: 10;
  height: 26px;
  padding: 0 0.7rem;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.78);
  border: none;
  border-radius: 13px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.about-pages-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

#logo {
  position: relative;
  z-index: 10;
}

#logo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

#logo a {
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

#logo a:focus {
  outline: none;
}

#nav-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: var(--transition-smooth);
}

#logo a:hover #nav-logo {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
}

#logo span {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

/* ==========================================================================
   4b. MASCOT TOGGLE (hat button — top-right of header)
   ========================================================================== */
.mascot-toggle {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 15;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #fbbf24;
  opacity: 0.85;
}

.mascot-toggle:hover {
  opacity: 1;
  transform: scale(1.12) rotate(-8deg);
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.25);
}

.mascot-toggle:active {
  transform: scale(0.95);
}

/* Hat dimmed when mascot is hidden */
.mascot-hidden .mascot-toggle {
  opacity: 0.35;
  color: #64748b;
}
.mascot-hidden .mascot-toggle:hover {
  opacity: 0.7;
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: none;
}

/* Hide mascot when toggled off */
.mascot-hidden .corner-watermark {
  display: none !important;
}

@media (max-width: 768px) {
  .mascot-toggle {
    width: 36px;
    height: 36px;
    top: 1rem;
    right: 1rem;
  }
  .mascot-toggle svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 480px) {
  .mascot-toggle {
    width: 30px;
    height: 30px;
    top: 0.75rem;
    right: 0.5rem;
  }
  .mascot-toggle svg {
    width: 17px;
    height: 17px;
  }
}

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */
#navigation {
  position: relative;
  z-index: 10;
  margin-top: 2rem;
}

#navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#navigation a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  
  /* Pill design */
  background: rgba(15, 23, 42, 0.5);
  border: var(--border-glass);
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Top light reflection */
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  transition: var(--transition-smooth);
}

#navigation a:hover {
  color: var(--text-primary);
  background: rgba(30, 41, 59, 0.8);
  border-top-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(29, 78, 216, 0.3) inset; /* Subtle blue inner glow */
}

/* (nav-eu removed — Panel Európskej Únie uses same style as other nav buttons) */

/* ── EU Core Dashboard ── */

/* EU panel box — standalone glassmorphism container */
.eu-panel-box {
  margin-top: 2.5rem;
  padding: 3.5rem;
  background: var(--surface-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: var(--border-glass);
  box-shadow: var(--shadow-elevation);
}
@media (max-width: 768px) {
  .eu-panel-box { padding: 2rem 1.25rem; }
}
@media (max-width: 480px) {
  .eu-panel-box { padding: 1.25rem 0.75rem; border-radius: var(--radius-sm); }
}

/* Hero section */
.eu-hero {
  margin-bottom: 0;
}

/* EU section title — left-aligned with animated EU-colored underline */
.eu-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* 2rem = parita s nadpismi okien na Regionálnych dátach (#page_body h2);
     veľkosti čísel v okienkach (eu-hero-card__number) sa to nedotýka */
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  position: relative;
  /* ŽIADNY padding-bottom: gradient (background-clip:text) sa škáluje na celý box,
     takže padding by natiahol tmavý strieborný koniec POD text a nadpis by pôsobil
     belší/slabší. Bez paddingu = gradient-box = text-box -> plný strieborný rozsah
     ako .eu-states-title. Podčiarknutie držíme cez ::after (bottom: -1rem) + margin. */
  padding-bottom: 0;
  margin: 0 0 2.5rem;
}
.eu-section-logo {
  height: 1.6rem;
  width: auto;
  flex-shrink: 0;
}
.eu-section-title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 0;
  height: var(--title-underline-h);
  background: linear-gradient(90deg, #2563eb 0%, #2563eb 70%, transparent 70%, transparent 76%, #fbbf24 76%, #fbbf24 100%);
  border-radius: 2px;
  animation: underlineReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  width: 0;
  opacity: 0;
}

/* SK Panel — slovenské farby (modrá → červená) namiesto EU farieb */
[data-page="sk-dashboard"] .eu-section-title::after {
  background: linear-gradient(90deg, var(--accent-blue, #2563eb) 0%, var(--accent-blue, #2563eb) 70%, transparent 70%, transparent 76%, var(--accent-red, #dc2626) 76%, var(--accent-red, #dc2626) 100%);
}

/* SK Regional — medzera medzi logom a textom (flex gap nefunguje pre text node) */
[data-page="sk-regional"] .eu-section-logo {
  margin-right: 0.85rem;
}
/* Podkategórie pod hlavnými oknami — výrazne menšie ako hlavné nadpisy.
   Špecificita musí prekonať globálne #page_body h2 / h3 pravidlá. */
[data-page="sk-regional"] #page_body .eu-category-section__title {
  font-size: 0.95rem;
  font-weight: 600;
  padding-bottom: 0;
  margin-bottom: 0;
  letter-spacing: 0;
}
[data-page="sk-regional"] .eu-section-title::after {
  background: linear-gradient(90deg, var(--accent-blue, #2563eb) 0%, var(--accent-blue, #2563eb) 70%, transparent 70%, transparent 76%, var(--accent-red, #dc2626) 76%, var(--accent-red, #dc2626) 100%);
}
/* Regionálne Data — zjednotenie rozloženia s Panel SK/EU:
   na týchto stránkach sú okná (eu-panel-box) samostatné sekcie priamo v stránke.
   Na regionálnej boli vnorené do #page_body s panelovým štýlom -> okno v okne.
   Obaľovaciemu #page_body tu vypneme vzhľad — okná Vybrané Regionálne Metriky /
   Príjmy, inflácia a bývanie / Hlavné Metriky tak stoja samostatne, so zdieľaným
   eu-panel-box štýlom (jeden zdroj vizuálu pre všetky stránky). */
body[data-page="sk-regional"] #page_body {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}
body.light-mode[data-page="sk-regional"] #page_body {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Prvé okno si drží štandardný eu-panel-box margin-top (2.5rem) —
   rovnaký odstup od hlavičky ako prvé okno na Panel SK/EU. */
/* Hero karty — menšie číslo aby kompaktné hodnoty (3,2 mld., 2,6 mld.) sedeli */
[data-page="sk-regional"] .eu-hero-card__number,
[data-page="eu-states"] .eu-hero-card__number {
  font-size: 1.15rem;
}
[data-page="sk-regional"] .eu-hero-card__title,
[data-page="eu-states"] .eu-hero-card__title {
  font-size: 0.65rem;
}
/* Hero grid — 4 karty na celú šírku v jednom riadku */
[data-page="sk-regional"] .eu-hero-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  [data-page="sk-regional"] .eu-hero-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  [data-page="sk-regional"] .eu-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* Hero grid — compact cards */
.eu-hero-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1024px) {
  .eu-hero-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .eu-hero-grid { grid-template-columns: repeat(2, 1fr); }
}

.eu-disclaimer {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.eu-hero-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.eu-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Hero karta ako tlačidlo (Panel SK/EU) — otvorí metriku v „Hlavné Metriky".
   Modrý prstenec cez box-shadow (nekoliduje s inline border-color statusu). */
.eu-hero-card--link { cursor: pointer; }
.eu-hero-card--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(96, 165, 250, 0.55);
}
.eu-hero-card--link:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
/* Blik cieľovej metriky po prekliku z hero karty */
@keyframes heroTargetFlash {
  0%   { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); }
  20%  { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); }
}
.eu-indicator-card.is-hero-target { animation: heroTargetFlash 2s ease; }
.eu-hero-card__title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
  line-height: 1.3;
  min-height: 2em;
}
.eu-hero-card__value {
  margin-bottom: 0.35rem;
}
.eu-hero-card__number {
  /* 1.15rem = zhodné s Regionálnymi dátami (dlhé hodnoty ako „27 025 EUR/obyv."
     sa na mobile nelámu); pôvodných 1.35rem pôsobilo na Paneloch SK/EU priveľko */
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.eu-hero-card__unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.15rem;
}
.eu-hero-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Category accordion sections */
.eu-category-section {
  margin-bottom: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.eu-category-section__header {
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.eu-category-section__header:hover {
  background: var(--surface-3, rgba(255,255,255,0.03));
}
.eu-category-section__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.eu-category-section__signal {
  font-size: 1rem;
  flex-shrink: 0;
}
.eu-category-section__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.eu-category-section__chevron {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.eu-category-section.expanded .eu-category-section__chevron {
  transform: rotate(180deg);
}
.eu-category-section__headline {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0 1.5rem;
  line-height: 1.4;
}
.eu-category-section__counters {
  display: flex;
  gap: 0.75rem;
  margin: 0.5rem 0 0 1.5rem;
}
.eu-cat-count {
  font-size: 0.75rem;
  font-weight: 600;
}
.eu-cat-count.improving,
.eu-cat-count.stable,
.eu-cat-count.worsening {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.eu-cat-count.improving {
  color: #4ade80;
  background-image: linear-gradient(180deg, #86efac 0%, #4ade80 50%, #15803d 100%);
}
.eu-cat-count.stable {
  color: #60a5fa;
  background-image: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #1d4ed8 100%);
}
.eu-cat-count.worsening {
  color: #f87171;
  background-image: linear-gradient(180deg, #fca5a5 0%, #f87171 50%, #b91c1c 100%);
}

/* Accordion body — hidden by default */
.eu-category-section__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.eu-category-section.expanded .eu-category-section__body {
  max-height: 5000px;
}
.eu-category-section__indicators {
  padding: 0 1.25rem 1.25rem;
}

/* EU footer note — meta info pod kategóriami */
.eu-footer-note {
  text-align: center;
  padding: 2rem 1rem 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}
/* Intro pod „Hlavné Metriky" — priame čísla SR */
.sk-main-intro {
  margin: 0 0 1.1rem; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6;
}
.eu-footer-note__subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}
.eu-footer-note__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

/* EU indicator card — compact, always-open layout */
.eu-indicator-card {
  padding: 0.85rem 1rem;
}
.eu-indicator-card__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.eu-indicator-card__row .indicator-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
  min-width: 0;
}
.eu-indicator-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-shrink: 0;
}
.eu-indicator-card__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.eu-indicator-card__unit {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.eu-indicator-card__delta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.eu-indicator-card__delta .delta-value { font-weight: 600; }
.eu-indicator-card__delta .delta-period { color: var(--text-muted); font-size: 0.7rem; }
.eu-indicator-card__delta .delta-value {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.eu-indicator-card__delta.delta-positive .delta-value {
  color: #4ade80;
  background-image: linear-gradient(180deg, #86efac 0%, #4ade80 50%, #15803d 100%);
}
.eu-indicator-card__delta.delta-negative .delta-value {
  color: #f87171;
  background-image: linear-gradient(180deg, #fca5a5 0%, #f87171 50%, #b91c1c 100%);
}
.eu-indicator-card__delta.delta-neutral .delta-value {
  color: #60a5fa;
  background-image: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #1d4ed8 100%);
}

.eu-indicator-card__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.eu-indicator-card__period {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  background: var(--surface-3, rgba(255,255,255,0.05));
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
}
.eu-indicator-card__row .chart-btn {
  flex-shrink: 0;
}

/* Responsive fix — mobil ≤480 px: dlhé tituly indikátorov
   ("Priemerná denná maximálna teplota (mesiac)",
    "Počet samostatne zárobkovo činných osôb" atď.)
   sa nesmú orezávať. Zrušíme white-space:nowrap a dáme title
   vlastný riadok (flex-basis 100%), ostatné elementy idú pod neho.
   Postihne EU Panel, SK Panel, SK Regional karty s touto triedou. */
@media (max-width: 480px) {
  .eu-indicator-card__row .indicator-card__title {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    flex: 1 1 100%;
    line-height: 1.3;
  }
}
.eu-indicator-card__text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0.3rem 0 0;
  line-height: 1.4;
}

/* ── EU/SK Panel — rozkliknutie indikátora pre detailný popis ── */
.eu-indicator-card.is-expandable .eu-indicator-card__header {
  cursor: pointer;
  position: relative;
  user-select: none;
}
.eu-indicator-card.is-expandable .eu-indicator-card__header:hover {
  background: rgba(255, 255, 255, 0.02);
}
.eu-indicator-card.is-expandable .indicator-card__chevron {
  position: static;
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.eu-indicator-card.is-expandable.expanded .indicator-card__chevron {
  transform: rotate(180deg);
}
/* Body je v defaulte zatvorené, expanded ho otvorí — re-uses .indicator-card__body / __desc CSS */
.eu-indicator-card .indicator-card__body {
  margin-top: 0;
}
.eu-indicator-card.expanded .indicator-card__body {
  margin-top: 0.5rem;
  padding: 0 0 0.5rem;
}

/* ============================================================================
   SK Regional — provider badge, regions tabuľka, sparkline, YoY badge
   ============================================================================ */

/* Provider badge ("ŠÚ SR" / "CRZ" / "SHMÚ" / "Manuál") */
.sr-provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full, 999px);
  flex-shrink: 0;
}

/* Inline sparkline (zachované — ak by sa použilo niekde inde, napr. v hero karte) */
.sparkline {
  display: block;
  vertical-align: middle;
}
.sparkline--empty {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0 0.3rem;
}

/* YoY (rok-na-rok) badge — pre SHMÚ teploty */
.sr-yoy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sr-yoy-badge__label {
  color: var(--text-muted);
  font-size: 0.62rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sr-yoy-badge__value {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.sr-yoy-badge--positive .sr-yoy-badge__value {
  color: #4ade80;
  background-image: linear-gradient(180deg, #86efac 0%, #4ade80 50%, #15803d 100%);
}
.sr-yoy-badge--negative .sr-yoy-badge__value {
  color: #f87171;
  background-image: linear-gradient(180deg, #fca5a5 0%, #f87171 50%, #b91c1c 100%);
}
.sr-yoy-badge--neutral .sr-yoy-badge__value {
  color: #60a5fa;
  background-image: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #1d4ed8 100%);
}

/* NUTS3 / okresná tabuľka */
.sr-regions-table {
  margin: 0.65rem 0 0.4rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm, 8px);
}
.sr-regions-table__title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 0.45rem;
}
.sr-region-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(80px, 2fr) minmax(110px, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.22rem 0;
  font-size: 0.78rem;
}
.sr-region-row + .sr-region-row {
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.sr-region-row__name {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-region-row__bar-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full, 999px);
  overflow: hidden;
}
.sr-region-row__bar {
  height: 100%;
  /* Jednotná modrá — gradient ZDOLA-HORE (svetlý vrch → tmavý spodok), ako tier
     čiary na kategórnych stránkach. Farebná heat škála (červená→zelená) by pri
     „lower is better" ukazovateľoch (riziko chudoby, nezamestnanosť) klamala:
     najkratší bar = najlepší kraj, ale bol by červený. Preto jedna neutrálna farba. */
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #1d4ed8 100%);
  border-radius: inherit;
  transition: width 0.4s ease;
}
.sr-region-row__value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.sr-districts-info {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0.25rem 0 0;
}
/* Poradie SR + priemer — medzinárodné ukazovatele (WGI/CPI/PISA) */
.sr-rankavg {
  margin: 0.45rem 0 0; padding: 0.4rem 0.6rem;
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
  background: rgba(96, 165, 250, 0.07); border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: var(--radius-md);
}
.sr-rankavg strong { color: var(--text-primary); }

/* Celkový Vývoj — graf na hlavnej stránke (index.html) */
/* Nadpis a underline mirror #page_body h2 — rovnaký štýl ako "Slovensko v rámci EÚ" */
#overall-trend h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  display: block;
  position: relative;
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
}
#overall-trend h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: var(--title-underline-h);
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue) 70%, transparent 70%, transparent 76%, var(--accent-red) 76%, var(--accent-red) 100%);
  border-radius: 2px;
  opacity: 0;
  animation: underlineReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.overall-trend-chart-wrap {
  position: relative;
  height: 215px;
  margin: 1rem 0 0.75rem;
}
.overall-trend-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 4rem 1rem;
  font-size: 0.95rem;
}
@media (max-width: 768px) {
  .overall-trend-chart-wrap { height: 340px; }
}
@media (max-width: 480px) {
  .overall-trend-chart-wrap { height: 280px; }
}

/* Prepínač grafov (Celkový Vývoj + indexy, aj SK Regional Príjmy/inflácia/bývanie) */
.ot-header {
  position: relative;
}
/* Nadpis ostáva plná šírka → gradientová čiara (::after) sa tiahne cez celé okno;
   miesto pre šípky vyhradzuje padding-right, čiara nie je ním ovplyvnená. */
.ot-header h2 {
  padding-right: 6rem;
}
.ot-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
}
.ot-nav__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--border-glass, 1px solid rgba(127, 127, 127, 0.25));
  background: var(--surface-1, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.ot-nav__arrow:active {
  background: linear-gradient(135deg, #1d6fd0 0%, var(--accent-blue) 100%);
  color: #fff;
  transform: scale(0.92);
}
@media (hover: hover) {
  .ot-nav__arrow:hover {
    background: linear-gradient(135deg, #1d6fd0 0%, var(--accent-blue) 100%);
    color: #fff;
  }
}
.ot-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0.5rem 0;
}
.ot-dots__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--text-muted, #94a3b8);
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.ot-dots__dot.active {
  opacity: 1;
  transform: scale(1.25);
  background: var(--accent-blue, #2563eb);
}

/* ============================================================
   Slide karusel (AI Výskum) — coverflow so štvorcovými slidmi
   ============================================================ */
.slide-carousel-box {
  overflow: hidden; /* bočné slidy clip-nuté na okraji karty */
}
.slide-carousel {
  --slide-vp-h: 330px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.slide-carousel--loading,
.slide-carousel--empty {
  height: var(--slide-vp-h);
  align-items: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.slide-carousel__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--slide-vp-h);
}
.slide-carousel__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  will-change: transform;
}
.slide-item {
  flex: 0 0 auto;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  transform-origin: center center;
  cursor: pointer;
}
.slide-item.is-active {
  cursor: default;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}
.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.slide-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: var(--border-glass, 1px solid rgba(127, 127, 127, 0.25));
  background: var(--surface-1, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
/* Aktivácia šípky — jemný modrý prechod (na press funguje aj na mobile) */
.slide-carousel__arrow:active {
  background: linear-gradient(135deg, #1d6fd0 0%, var(--accent-blue) 100%);
  color: #fff;
  transform: translateY(-50%) scale(0.92);
}
/* Hover len pre zariadenia s myšou — na dotyku neostane „prilepené" zvýraznenie */
@media (hover: hover) {
  .slide-carousel__arrow:hover {
    background: linear-gradient(135deg, #1d6fd0 0%, var(--accent-blue) 100%);
    color: #fff;
  }
}
.slide-carousel__arrow--left { left: 4px; }
.slide-carousel__arrow--right { right: 4px; }
@media (max-width: 768px) {
  .slide-carousel { --slide-vp-h: 320px; }
}
@media (max-width: 480px) {
  .slide-carousel { --slide-vp-h: 260px; }
  .slide-carousel__arrow { width: 40px; height: 40px; }
}
/* Odsadenie nadpisu „Ai Výskum" (a obsahu pod ním) od slide karuselu */
body[data-content="ai_vyskum"] #content-header { margin-top: 40px; }

.sr-comp-chart-wrap {
  position: relative;
  height: 320px;
  margin-bottom: 0.75rem;
}
.sr-comp-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.5rem 0 0.25rem;
}
.sr-comp-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
/* ============================================================================
   CRZ Modal — Obstarávanie (zoznam zmlúv + Top dodávatelia)
   ============================================================================ */
.crz-modal__content {
  max-width: 1100px;
  width: 92vw;
}
.crz-modal__tabs {
  padding: 0.5rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.crz-modal__tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.crz-tabs-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.crz-tab {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full, 999px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.crz-tab:hover {
  background: rgba(96, 165, 250, 0.12);
  color: var(--text-primary);
  border-color: rgba(96, 165, 250, 0.4);
}
.crz-tab.active {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.6);
}
.crz-tab--alt { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); color: #fbbf24; }
.crz-tab--alt.active { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.6); color: #fbbf24; }
.crz-tab--back { background: transparent; border-color: rgba(255, 255, 255, 0.15); color: var(--text-muted); margin-left: auto; }

/* Vyhľadávanie v zmluvách */
.crz-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 320px;
  min-width: 220px;
}
.crz-search__field {
  position: relative;
  flex: 1;
  display: flex;
}
.crz-search__input {
  flex: 1;
  width: 100%;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 1.85rem 0.35rem 0.7rem;  /* padding-right pre × tlačidlo */
  border-radius: var(--radius-full, 999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.crz-search__clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.crz-search__clear:hover {
  background: rgba(96, 165, 250, 0.25);
  color: var(--text-primary);
}
/* × len keď je v poli text (placeholder skrytý) */
.crz-search__input:placeholder-shown ~ .crz-search__clear {
  display: none;
}
body.light-mode .crz-search__clear {
  background: rgba(0, 0, 0, 0.06);
}
body.light-mode .crz-search__clear:hover {
  background: rgba(37, 99, 235, 0.18);
}
.crz-search__input::placeholder { color: var(--text-muted); }
.crz-search__input:focus {
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(96, 165, 250, 0.06);
}
body.light-mode .crz-search__input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .crz-search__input:focus {
  border-color: rgba(37, 99, 235, 0.6);
  background: rgba(37, 99, 235, 0.06);
}

/* Search summary — 3 stĺpce (vs 5 pre mesačný view) */
.crz-summary--search { grid-template-columns: 1fr 1fr 2fr; }
.crz-summary__item--query .crz-summary__value {
  font-style: italic;
  color: #fbbf24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crz-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}
.crz-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 0.5rem;
}
.crz-modal__footer:empty { display: none; }

/* Summary blok */
.crz-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.crz-summary__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.crz-summary__label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crz-summary__value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.crz-list-info {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

/* Zoznam zmlúv */
.crz-list { display: flex; flex-direction: column; gap: 0.4rem; }
.crz-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.crz-row:hover {
  background: rgba(96, 165, 250, 0.06);
  border-color: rgba(96, 165, 250, 0.3);
}
.crz-row__main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.crz-row__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crz-row__meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.crz-row__date { font-variant-numeric: tabular-nums; }
.crz-row__price {
  grid-row: span 2;
  align-self: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #60a5fa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crz-row__parties {
  grid-column: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.crz-row__supplier { font-weight: 600; }
.crz-row__arrow { color: var(--text-muted); }
.crz-row__buyer { color: var(--text-muted); }

.crz-loading, .crz-empty, .crz-error {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.crz-error { color: #f87171; }

.crz-nav { background: rgba(255,255,255,0.05); }
.crz-nav[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Top suppliers / buyers / buckets */
.crz-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.crz-top__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.4rem 0;
}
.crz-top__list { display: flex; flex-direction: column; gap: 0.25rem; }
.crz-top-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm, 4px);
}
.crz-top-row__rank { color: var(--text-muted); font-weight: 700; }
.crz-top-row__name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crz-top-row__count { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.crz-top-row__amount { font-weight: 700; color: #60a5fa; font-variant-numeric: tabular-nums; white-space: nowrap; }

.crz-buckets { display: flex; flex-direction: column; gap: 0.3rem; }
.crz-bucket-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm, 4px);
}
.crz-bucket-row__label { color: var(--text-primary); font-weight: 600; }
.crz-bucket-row__count { color: var(--text-muted); }
.crz-bucket-row__amount { color: #60a5fa; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Mobile */
@media (max-width: 720px) {
  .crz-summary { grid-template-columns: repeat(2, 1fr); }
  .crz-row { grid-template-columns: 1fr; }
  .crz-row__price { grid-row: auto; align-self: start; }
  .crz-top { grid-template-columns: 1fr; }
}

/* Light mode */
body.light-mode .crz-tab {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .crz-tab.active {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.5);
}
body.light-mode .crz-summary__item,
body.light-mode .crz-row,
body.light-mode .crz-top-row,
body.light-mode .crz-bucket-row {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .crz-row:hover {
  background: rgba(37, 99, 235, 0.05);
  border-color: rgba(37, 99, 235, 0.3);
}

/* Empty kategória */
.eu-empty-cat {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem 1rem;
  font-style: italic;
}

/* Light mode úpravy pre SR regions tabuľku */
body.light-mode .sr-regions-table {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .sr-region-row + .sr-region-row {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .sr-region-row__bar-wrap {
  background: rgba(0, 0, 0, 0.06);
}
body.light-mode .sr-yoy-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Mobil — regionálna tabuľka stack pod sebou */
@media (max-width: 768px) {
  .sr-region-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .sr-region-row__bar-wrap {
    order: 3;
  }
  .sr-region-row__value {
    text-align: left;
  }
}

/* ── SK Panel — Regionálna NUTS2 mini-tabuľka ── */
.sk-region-table {
  margin: 0.6rem 0 0.3rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
}
.sk-region-table__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.22rem 0;
}
.sk-region-table__row:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sk-region-table__geo {
  font-weight: 600;
  min-width: 2.8rem;
  color: var(--text-secondary);
  font-size: 0.72rem;
}
.sk-region-table__name {
  flex: 1;
  color: var(--text-primary);
}
.sk-region-table__value {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.sk-region-disparity {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   6. MAIN CONTENT AREA (DASHBOARD PANELS)
   ========================================================================== */
#page_body {
  margin-top: 2.5rem;
  padding: 3.5rem;
  background: var(--surface-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: var(--border-glass);
  box-shadow: var(--shadow-elevation);
}

#page_body h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  display: block;
  position: relative;
  /* Bez padding-bottom — inak by padding natiahol strieborný gradient pod text a
     nadpis by pôsobil belší/slabší (napr. „AI Výskum"). Gradient-box = text-box ->
     plný rozsah. Podčiarknutie držíme cez ::after (bottom: -1.25rem) + margin. */
  padding-bottom: 0;
  margin-bottom: 3.75rem;
}

/* Elegant Slovak gradient underline with animated reveal */
#page_body h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1.25rem;
  left: 0;
  width: 0; /* starts at 0 for animation */
  height: var(--title-underline-h);
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue) 70%, transparent 70%, transparent 76%, var(--accent-red) 76%, var(--accent-red) 100%);
  border-radius: 2px;
  opacity: 0;
  animation: underlineReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

/* Content Blocks */
.content_placeholder {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.content_placeholder p {
  margin-bottom: 1.25rem;
}

/* Base styling for future data cards/tables to ensure they look premium */
.data-card {
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: var(--transition-smooth);
}

.data-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
#page_end {
  margin-top: auto;
  padding-top: 4rem;
  padding: 3rem 0;
  border-top: var(--border-glass);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-copyright {
  flex: 1;
}

.footer-copyright p {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.footer-links {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-links .separator {
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
}

/* ==========================================================================
   8. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 900px) {
  #head {
    padding: 2rem;
  }
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 600px) {
  #page_body {
    padding: 2rem 1.5rem;
  }
  #logo span {
    font-size: 1.5rem;
  }
  #navigation ul {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  #page {
    padding: 0 8px;
  }
  #page_body {
    padding: 1.5rem 0.75rem;
  }
  #logo span {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   9. ANIMATIONS
   ========================================================================== */
@keyframes fadeUpEnter {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes underlineReveal {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 0.8; }
}

/* ==========================================================================
   10. LOADING & ERROR STATES
   ========================================================================== */
.loading-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 1rem;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Skeleton loading shimmer — animovaný gradient sprava-doľava cez prázdne karty.
   Pridáva sa cez triedu .skeleton-card (kontajner) + .skeleton-line (jednotlivé pásy).
   Načítavanie sa potom zobrazí ako "obrysy" reálnych kariet s pohybujúcim sa svetlom. */
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
/* Po načítaní dát dashboard.js / category-page.js nastaví hidden=true.
   Bez tohto pravidla by display:grid prebíjal browser default [hidden]{display:none}
   a skeleton by zostal viditeľný pod reálnym obsahom. */
.skeleton-grid[hidden] { display: none !important; }

/* Responsive optimalizácie pre nové polish features */
@media (max-width: 768px) {
  /* Skeleton — kompaktnejšie karty, kratší gap, single column */
  .skeleton-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem;
    margin-top: 1rem;
  }
  .skeleton-card {
    padding: 1.25rem;
    min-height: 140px;
  }
  /* Hero glow — menej intenzívny na malých obrazovkách */
  .eu-hero-card__number {
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.20);
  }
  body.light-mode .eu-hero-card__number {
    text-shadow: 0 0 9px rgba(37, 99, 235, 0.18);
  }
  /* Stagger — kratší delay aby kaskáda nepôsobila vlečieho */
  .dashboard-card,
  body[data-page="category"] .indicator-card {
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  /* Globálny scrollbar — užší na mobile/tablete */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 480px) {
  /* Skeleton ešte kompaktnejší */
  .skeleton-card {
    padding: 1rem;
    min-height: 110px;
    gap: 0.5rem;
  }
  .skeleton-line {
    height: 0.7rem;
  }
  .skeleton-line--title {
    height: 0.95rem;
  }
  /* Stagger — najkratší delay na malých obrazovkách */
  .dashboard-card,
  body[data-page="category"] .indicator-card {
    animation-delay: calc(var(--i, 0) * 30ms);
  }
  /* Hero glow — najjemnejší na mobil (zachovať čitateľnosť) */
  .eu-hero-card__number {
    text-shadow: 0 0 6px rgba(96, 165, 250, 0.15);
  }
  /* Focus ring — menší offset, aby sa zmestil do viewportu */
  *:focus-visible {
    outline-offset: 2px;
  }
  /* Modal entrance — kratšia animácia (rýchlejšia odozva na mobile) */
  .content-modal.open .content-modal__content,
  .chart-modal.open .chart-modal__content,
  .crz-modal.open .crz-modal__content {
    animation-duration: 0.24s;
  }
}

/* Touch devices — nepotrebujú focus ring na ťukanie, len pre keyboard.
   :focus-visible to už automaticky rieši — toto je explicitne pre istotu. */
@media (hover: none) and (pointer: coarse) {
  *:focus-visible {
    outline-offset: 2px;
  }
}
.skeleton-card {
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.skeleton-line {
  height: 0.85rem;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s linear infinite;
}
.skeleton-line--title  { width: 60%; height: 1.1rem; margin-bottom: 0.6rem; }
.skeleton-line--bar    { width: 100%; height: 0.55rem; margin: 0.4rem 0; }
.skeleton-line--text   { width: 90%; }
.skeleton-line--short  { width: 40%; }
body.light-mode .skeleton-line {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.04) 100%
  );
  background-size: 200% 100%;
}

.error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #f87171;
  font-size: 0.95rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   11. DASHBOARD
   ========================================================================== */
.dashboard-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.dashboard-meta strong {
  color: var(--text-secondary);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}
.dashboard-note {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 1.5rem;
  font-style: italic;
}

.dashboard-warning {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Dashboard Card */
.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--band-color-light, var(--band-color, var(--accent-blue))) 0%,
    var(--band-color, var(--accent-blue)) 35%,
    transparent 100%);
  opacity: 0.75;
}

.dashboard-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-ambient);
}

.dashboard-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.dashboard-card__head h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.dashboard-card__band {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.dashboard-card__headline {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.dashboard-card__highlights {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dashboard-card__highlight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.highlight-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-card__highlight.positive .highlight-dot { background: #4ade80; }
.dashboard-card__highlight.negative .highlight-dot { background: #f87171; }

.dashboard-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: var(--border-glass);
  font-size: 0.8rem;
}

.dashboard-card__trend {
  font-weight: 600;
}

.dashboard-card__completeness {
  color: var(--text-muted);
}

/* ==========================================================================
   12. CATEGORY HEADER
   ========================================================================== */
.category-header {
  margin-bottom: 2rem;
}

.category-header__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.category-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 1rem;
}

.category-header h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--title-underline-h);
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue) 70%, transparent 70%, transparent 76%, var(--accent-red) 76%, var(--accent-red) 100%);
  border-radius: 2px;
  animation: underlineReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  width: 0;
  opacity: 0;
}

.category-header__meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.85rem;
}

.category-header__snapshot {
  color: var(--text-muted);
}

.category-header__badges {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.category-header__band {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.3rem 0.75rem;
  border: 1px solid;
  border-radius: var(--radius-full);
}

.category-header__trend {
  font-size: 0.85rem;
  font-weight: 600;
}

.category-header__completeness {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================================
   13. SCORE GAUGE
   ========================================================================== */
.score-gauge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.score-gauge__track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.score-gauge__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.score-gauge__value {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 3rem;
  text-align: right;
}

/* ==========================================================================
   14. SUMMARY PANEL
   ========================================================================== */
.summary-panel {
  background: rgba(255, 255, 255, 0.02);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 2rem;
}

.summary-panel__score-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--border-glass);
}

.summary-panel__score {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.summary-panel__band {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-panel__trend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.trend-icon {
  font-size: 0.85rem;
}

.summary-panel__completeness {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.completeness-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.completeness-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-panel__headline {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.summary-panel__overview {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.summary-panel__lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.summary-panel__list h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  color: var(--text-muted);
}

.summary-panel__list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.strength-item {
  font-size: 0.85rem;
  color: #4ade80;
  padding-left: 1rem;
  position: relative;
}
.strength-item::before {
  content: "●";
  position: absolute;
  left: 0;
  font-size: 0.5rem;
  line-height: 1.7;
}

.pressure-item {
  font-size: 0.85rem;
  color: #f87171;
  padding-left: 1rem;
  position: relative;
}
.pressure-item::before {
  content: "●";
  position: absolute;
  left: 0;
  font-size: 0.5rem;
  line-height: 1.7;
}

.watchpoint-item {
  font-size: 0.85rem;
  color: #fbbf24;
  padding-left: 1rem;
  position: relative;
}
.watchpoint-item::before {
  content: "●";
  position: absolute;
  left: 0;
  font-size: 0.5rem;
  line-height: 1.7;
}

.summary-panel__method {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.summary-panel__freshness {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ==========================================================================
   15. STATUS BADGE
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.freshness-badge {
  font-size: 0.72rem;
  font-weight: 500;
}

/* ==========================================================================
   16. INDICATOR CARD
   ========================================================================== */
.indicator-card {
  background: rgba(255, 255, 255, 0.02);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
}

.indicator-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   FINAL POLISH: globálny scrollbar, glow, pulse, focus, modal entrance
   ========================================================================== */

/* Globálny scrollbar (mimo modálov, tie majú vlastný styling) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(96,165,250,0.35);
  background-clip: padding-box;
}
html, body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
body.light-mode::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); background-clip: padding-box; }
body.light-mode::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.35); background-clip: padding-box; }
body.light-mode { scrollbar-color: rgba(0,0,0,0.18) transparent; }

/* Subtle glow na veľké hero čísla (EU/SK/Regional) */
.eu-hero-card__number {
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.28),
               0 0 6px rgba(255, 255, 255, 0.10);
}
body.light-mode .eu-hero-card__number {
  text-shadow: 0 0 14px rgba(37, 99, 235, 0.22);
}

/* Pulse animácia na "Aktuálne" freshness badge — implikuje "live data" */
@keyframes freshPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}
.freshness-badge[data-fresh="current"] {
  animation: freshPulse 2.6s ease-in-out infinite;
}

/* Vylepšené focus rings — viditeľný modrý outline pre keyboard navigation.
   :focus-visible reaguje len na klávesnicovú navigáciu (Tab), nie na myš.
   Skryje default browser outline a nahradí vlastným v štýle webu. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 0.15s ease;
}
body.light-mode *:focus-visible {
  outline-color: rgba(37, 99, 235, 0.85);
}
/* Pre tlačidlá s vlastným box-shadow potrebujeme aj shadow outline */
button:focus-visible, a:focus-visible {
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
}

/* Smooth modal entrance — slide-up + scale namiesto čistého fade-in */
@keyframes modalEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.content-modal.open .content-modal__content,
.chart-modal.open .chart-modal__content,
.crz-modal.open .crz-modal__content {
  animation: modalEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Reduced motion respekt — ak používateľ nechce animácie */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Stagger fade-in animácia — karty postupne vyplávajú zhora dole.
   Aplikované na dashboard-card (hlavná) a indicator-card (detail SK Snapshot).
   --i = index karty (set inline z JS-u), delay sa škáluje. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dashboard-card,
body[data-page="category"] .indicator-card {
  animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* Metalický text efekt — gradient cez clip-text. Použité na všetkých textoch
   s tier farbou (badge labels, percentile %, score gauge value, dashboard band).
   Inline `color` zostáva ako fallback pre browsery bez podpory background-clip. */
.metallic-text {
  background-image: var(--tier-gradient, none);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  /* Subtílny sheen efekt — drop-shadow zachová "metalickú" hĺbku */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}

/* Tier-color gradient pásik na vrchu karty (len SK Snapshot kategórie:
   makroekonomika, životná úroveň, ľudský kapitál, sociálna kapacita,
   infraštruktúra, energie). Farba dedená z --tier-color (inline na article),
   nastavená v indicator-card.js podľa percentileTier(). */
body[data-page="category"] .indicator-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--tier-color-light, var(--tier-color, var(--accent-blue))) 0%,
    var(--tier-color, var(--accent-blue)) 35%,
    transparent 100%);
  opacity: 0.8;
  pointer-events: none;
}
/* Mierne väčší odstup medzi kartami aby pásiky vizuálne dýchali */
body[data-page="category"] .indicator-card {
  margin-bottom: 1.25rem;
}

/* Hover efekt — rovnaký pattern ako .dashboard-card:hover na hlavnej stránke:
   svetlejšie pozadie, viditeľnejší okraj, lift hore, ambient shadow.
   Plus pásik nad kartou sa zvýrazni na plnú opacitu pre "color pop". */
body[data-page="category"] .indicator-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: var(--shadow-ambient);
}
body[data-page="category"] .indicator-card:hover::before {
  opacity: 1;
}

.indicator-card__header {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.indicator-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.indicator-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.indicator-card__rank {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  flex-shrink: 0;
}

.rank-badge {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.rank-total {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.indicator-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.indicator-card__values {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.indicator-card__val {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.val-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.val-number {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.val-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.delta-positive .val-number,
.delta-negative .val-number {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.delta-positive .val-number {
  color: #4ade80;
  background-image: linear-gradient(180deg, #86efac 0%, #4ade80 50%, #15803d 100%);
}
.delta-negative .val-number {
  color: #f87171;
  background-image: linear-gradient(180deg, #fca5a5 0%, #f87171 50%, #b91c1c 100%);
}
.delta-neutral .val-number { color: var(--text-secondary); }

.indicator-card__bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.percentile-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.percentile-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.percentile-value {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 3rem;
  text-align: right;
}

.indicator-card__badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.indicator-card__chevron {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.6rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.indicator-card.expanded .indicator-card__chevron {
  transform: rotate(180deg);
}

/* Expandable body */
.indicator-card__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.3s ease;
  padding: 0 1.5rem;
}

.indicator-card.expanded .indicator-card__body {
  max-height: 600px;
  padding: 0 1.5rem 1.5rem;
  border-top: var(--border-glass);
}

.indicator-card__commentary {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  padding-top: 1rem;
}

.indicator-card__notes {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
}

.indicator-card__desc {
  padding-top: 0.75rem;
  border-top: var(--border-glass);
}

.indicator-card__desc h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  margin-top: 0.75rem;
}

.indicator-card__desc h4:first-child {
  margin-top: 0;
}

.indicator-card__desc p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.indicator-card__source {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  margin-top: 0.75rem !important;
}

.indicator-card__unit-note,
.indicator-card__period {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
}

/* ==========================================================================
   17. RESPONSIVE — DATA COMPONENTS
   ========================================================================== */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .summary-panel__score-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .summary-panel__lists {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .indicator-card__values {
    flex-direction: column;
    gap: 0.5rem;
  }
  .indicator-card__header {
    padding: 1rem;
  }
  .summary-panel {
    padding: 1.25rem;
  }
  .dashboard-card {
    padding: 1.25rem;
  }
  .category-header h2 {
    font-size: 1.35rem;
  }
  .chart-modal__content {
    width: 95vw;
    max-height: 85vh;
  }
}

/* ==========================================================================
   18. CHART BUTTON
   ========================================================================== */

.indicator-card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.chart-btn:hover {
  background: rgba(96,165,250,0.15);
  border-color: rgba(96,165,250,0.4);
  color: #60a5fa;
  transform: scale(1.1);
}

/* ==========================================================================
   19. CHART MODAL
   ========================================================================== */

.chart-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.chart-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.chart-modal__content {
  position: relative;
  z-index: 1;
  width: 80vw;
  max-width: 900px;
  max-height: 80vh;
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.chart-modal__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0;
}

.chart-modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  font-size: 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chart-modal__close:hover {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}

.chart-modal__body {
  flex: 1;
  padding: 1.5rem;
  min-height: 300px;
  position: relative;
}

.chart-modal__body canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px;
}

.chart-modal__note {
  padding: 0.75rem 1.5rem;
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

/* ==========================================================================
   20. AUTHOR STATEMENT (Hlavná stránka — úvodné vyjadrenie)
   ========================================================================== */

#author-statement {
  max-width: var(--max-width);
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.author-statement__inner {
  background: var(--surface-1);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  line-height: 1.8;
  overflow: hidden;
}

/* Clickable header */
.author-statement__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}
.author-statement__header:hover {
  background: rgba(255,255,255,0.03);
}
.author-statement__heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.author-statement__chevron {
  color: var(--text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
#author-statement.open .author-statement__chevron {
  transform: rotate(180deg);
}

/* Collapsible body */
.author-statement__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 2rem;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
#author-statement.open .author-statement__body {
  max-height: 2000px;
  opacity: 1;
  padding: 0 2rem 1.5rem;
}
.author-statement__body p {
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.author-statement__body p:last-of-type {
  margin-bottom: 0;
}

.author-statement__body .content-link {
  color: #60a5fa;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.author-statement__body .content-link:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* Motto — always visible */
.author-statement__motto {
  margin: 0;
  padding: 1rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(11, 78, 162, 0.06);
}
.author-statement__motto p {
  font-size: 0.9rem;
  font-style: italic;
  color: #93c5fd;
  margin: 0;
}

@media (max-width: 768px) {
  .author-statement__header {
    padding: 1rem 1.25rem;
  }
  .author-statement__body {
    padding: 0 1.25rem;
  }
  #author-statement.open .author-statement__body {
    padding: 0 1.25rem 1.25rem;
  }
  .author-statement__motto {
    padding: 0.75rem 1.25rem;
  }
}
@media (max-width: 480px) {
  #author-statement {
    padding: 0 0.5rem;
  }
  .author-statement__header {
    padding: 0.85rem 0.75rem;
  }
  .author-statement__heading {
    font-size: 1.1rem;
  }
  .author-statement__body {
    padding: 0 0.75rem;
  }
  #author-statement.open .author-statement__body {
    padding: 0 0.75rem 1rem;
  }
  .author-statement__body p {
    font-size: 0.85rem;
  }
  .author-statement__motto {
    padding: 0.6rem 0.75rem;
  }
  .author-statement__motto p {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   20b. SLOVENSKÉ INŠTITÚCIE (accordion panel na index.html)
   ========================================================================== */
.sk-institutions {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
.sk-institutions__inner {
  background: var(--surface-1);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Header — clickable */
.sk-institutions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}
.sk-institutions__header:hover {
  background: rgba(255,255,255,0.03);
}
.sk-institutions__title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sk-institutions__logo {
  height: 1.5rem;
  width: auto;
  border-radius: 4px;
}
.sk-institutions__heading {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
}
.sk-institutions__chevron {
  color: var(--text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.sk-institutions.open .sk-institutions__chevron {
  transform: rotate(180deg);
}

/* Collapsible body */
.sk-institutions__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 2rem;
  transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease;
}
.sk-institutions.open .sk-institutions__body {
  max-height: 8000px;
  opacity: 1;
  padding: 1.5rem 2rem 2rem;
}

/* ── Bezpečnosť — karty inštitúcií (obrázok vľavo + popis + tlačidlo) ── */
.sec-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sec-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  align-items: flex-start;
}
.sec-card__img {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}
.sec-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sec-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}
.sec-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1rem;
}
.sec-card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.5rem 0.95rem;
  background: rgba(11, 78, 162, 0.15);
  border: 1px solid rgba(11, 78, 162, 0.4);
  border-radius: var(--radius-sm);
  color: #60a5fa;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}
.sec-card__btn:hover {
  background: rgba(11, 78, 162, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.sec-card__btn svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 600px) {
  .sec-card {
    flex-direction: column;
    align-items: stretch;
  }
  .sec-card__img {
    width: 100%;
    height: 150px;
  }
}

/* ==========================================================================
   ŠTÁTY EÚ — stránka eu_states.html
   ========================================================================== */
#eu-states-page,
#eu-security-page {
  /* plná šírka obsahu #page (1200px − 24px padding) ako ostatné stránky;
     #page už dáva bočný padding 24px, tu pridávame len vertikálny */
  padding: 2rem 0 3rem;
}
#eu-security-page .sec-cards {
  margin-top: 0.5rem;
}
.eu-states-head {
  margin: 0 0 1.5rem;
}
.eu-states-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  /* strieborný gradient (dark) — parita s nadpismi okien .eu-section-title;
     modrý efekt v light režime rieši theme-light.css */
  background: linear-gradient(to top, #8f97a3 0%, #dbe0e7 45%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eu-states-meta {
  /* spodná poznámka pod poslednými oknami — rozumné odsadenie, centrované */
  margin: 2rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}
.eu-states-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Karta krajiny */
.state-card {
  background: var(--surface-1);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.state-card__main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "flag body"
    "btn  body";
  grid-template-rows: auto 1fr;
  gap: 0.75rem 1.25rem;
  padding: 1.25rem;
}
.state-card__flag {
  grid-area: flag;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
}
.state-card__body {
  grid-area: body;
  min-width: 0;
}
.state-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  /* strieborný gradient (dark) ako nadpis stránky; modrý v light režime cez theme-light.css */
  background: linear-gradient(to top, #8f97a3 0%, #dbe0e7 45%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Farebná „načítacia" čiara pod názvom — vo farbách vlajky krajiny (gradient inline) */
.state-card__underline {
  display: block;
  height: 3px;
  width: 0;
  opacity: 0;
  border-radius: 2px;
  margin: 0 0 0.85rem;
  animation: underlineReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
/* Mriežka metrík — okienka v štýle „Vybrané Regionálne Metriky" (.eu-hero-card).
   4 stĺpce rovnakej šírky (4 + 4); prvý riadok je vyšší kvôli mesačnej mzde. */
.state-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 900px) {
  .state-card__metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .state-card__metrics { grid-template-columns: 1fr; }
}

/* Tlačidlo inštitúcií — v ľavom dolnom rohu pod vlajkou */
.state-card__inst-toggle {
  grid-area: btn;
  align-self: end;
  justify-self: start;
  margin-top: 0;
}

/* Krátky profil krajiny — pod metrikami */
.state-profile {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.state-profile__row {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.state-profile__row:last-child {
  margin-bottom: 0;
}
.state-profile__label {
  font-weight: 700;
  color: #60a5fa;
}

/* Rozbalenie inštitúcií */
.state-card__inst-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  background: rgba(11,78,162,0.12);
  border: 1px solid rgba(11,78,162,0.35);
  border-radius: var(--radius-sm);
  color: #60a5fa;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.state-card__inst-toggle:hover {
  background: rgba(11,78,162,0.22);
}
.state-card__inst-chevron {
  display: inline-flex;
  transition: transform 0.3s ease;
}
.state-card__inst-chevron svg {
  width: 14px;
  height: 14px;
}
.state-card.inst-open .state-card__inst-chevron {
  transform: rotate(180deg);
}
.state-card__inst {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.3s ease;
}
.state-card.inst-open .state-card__inst {
  max-height: 6000px;
  opacity: 1;
}
.state-card__inst-inner {
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.state-inst__pending {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}
@media (max-width: 600px) {
  .state-card__main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "flag"
      "body"
      "btn";
    grid-template-rows: auto auto auto;
  }
  .state-card__flag {
    width: 100%;
    height: 120px;
  }
  .state-card__inst-toggle {
    align-self: start;
    margin-top: 0.5rem;
  }
}

/* CTA na Paneli EÚ → stránky Štáty EÚ / Bezpečnosť (dve tlačidlá vedľa seba) */
/* Tlačidlá tesne pod oknom Inštitúcie EÚ (10px zhora), medzera k Vybraným metrikám ostáva */
#eu-institutions { margin-bottom: 10px; }
.eu-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 10px 0 2rem;
}
.eu-cta-row .eu-states-cta {
  margin: 0;
}
@media (max-width: 700px) {
  .eu-cta-row {
    grid-template-columns: 1fr;
  }
}
.eu-states-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(135deg, rgba(11,78,162,0.18), rgba(255,214,0,0.06));
  border: 1px solid rgba(11,78,162,0.4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-smooth);
}
.eu-states-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border-color: rgba(11,78,162,0.7);
}
.eu-states-cta__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.eu-states-cta__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.eu-states-cta__sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.eu-states-cta__arrow {
  width: 28px;
  height: 28px;
  color: #60a5fa;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.eu-states-cta:hover .eu-states-cta__arrow {
  transform: translateX(4px);
}

/* Loading & error */
.sk-institutions__loading {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 1rem 0;
}
.sk-inst-error {
  color: #f87171;
  font-size: 0.9rem;
}

/* Sekcia — group */
.sk-inst-group {
  margin-bottom: 1.5rem;
}
.sk-inst-group:last-child {
  margin-bottom: 0;
}
.sk-inst-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sk-inst-group__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-blue);
  opacity: 0.8;
}
.sk-inst-group__icon svg {
  width: 100%;
  height: 100%;
}
.sk-inst-group__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.sk-inst-group__count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  margin-left: auto;
}

/* Karty inštitúcií — grid */
.sk-inst-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 0.6rem;
}

/* Jedna karta */
.sk-inst-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
  align-items: flex-start;
}
.sk-inst-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(11, 78, 162, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Ikona odkazu */
.sk-inst-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 78, 162, 0.15);
  border-radius: 8px;
  margin-top: 2px;
}
.sk-inst-link-icon {
  width: 16px;
  height: 16px;
  color: #60a5fa;
  transition: color 0.2s;
}
.sk-inst-card:hover .sk-inst-link-icon {
  color: #93c5fd;
}

/* Obsah karty */
.sk-inst-card__content {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.sk-inst-card__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.sk-inst-card__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 0.3rem;
}
.sk-inst-card__url {
  font-size: 0.7rem;
  color: #60a5fa;
  opacity: 0.7;
  transition: opacity 0.2s;
  word-break: break-all;
}
.sk-inst-card:hover .sk-inst-card__url {
  opacity: 1;
}

@media (max-width: 768px) {
  .sk-institutions__header {
    padding: 1rem 1.25rem;
  }
  .sk-institutions__body {
    padding: 0 1rem;
  }
  .sk-institutions.open .sk-institutions__body {
    padding: 1.25rem 1rem 1.5rem;
  }
  .sk-inst-group__cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .sk-institutions__header {
    padding: 0.85rem 0.75rem;
  }
  .sk-institutions__heading {
    font-size: 1.1rem;
  }
  .sk-institutions__body {
    padding: 0 0.25rem;
  }
  .sk-institutions.open .sk-institutions__body {
    padding: 1rem 0.25rem 1.25rem;
  }
  .sk-inst-card {
    padding: 0.65rem 0.5rem;
    gap: 0.5rem;
  }
  .sk-inst-card__icon {
    width: 26px;
    height: 26px;
  }
  .sk-inst-link-icon {
    width: 14px;
    height: 14px;
  }
  .sk-inst-card__name {
    font-size: 0.8rem;
  }
  .sk-inst-card__desc {
    font-size: 0.73rem;
  }
}

/* ==========================================================================
   21. CONTENT PAGE (AI Výskum)
   ========================================================================== */

.content-page-header {
  text-align: center;
  margin-bottom: 2rem;
}
.content-page-header h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.content-page-stats {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.content-footer-stats {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

/* Content Toolbar Area — sits between header and main */
#content-toolbar-area {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
/* Samostatné pilulky v štýle CTA tlačidiel (Bezpečnosť / Štáty EÚ) — malé */
.content-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.6rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.content-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.7rem 1.4rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(11, 78, 162, 0.18), rgba(255, 214, 0, 0.06));
  border: 1px solid rgba(11, 78, 162, 0.4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.content-toolbar__btn:hover {
  color: var(--text-primary);
  border-color: rgba(11, 78, 162, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 400px) {
  .content-toolbar {
    flex-direction: column;
  }
}

/* Regionálne dáta — tlačidlá majú dlhší text (Verejné obstarávanie / Legislatíva),
   tak ich zasuň pod seba skôr (≤500px), nech sa neorežú. */
@media (max-width: 500px) {
  body[data-page="sk-regional"] .content-toolbar {
    flex-direction: column;
  }
}

/* Category sections */
.content-category {
  margin-bottom: 1.5rem;
}
.content-category__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: var(--border-glass);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-smooth);
}
.content-category__header:hover {
  background: rgba(30, 41, 59, 0.95);
}
.content-category.open .content-category__header {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.content-category__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}
.content-category.open .content-category__chevron {
  transform: rotate(180deg);
}
.content-category__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.content-category__title {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.content-category__count {
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

/* Topic cards — hidden by default (accordion) */
.content-category__topics {
  border: var(--border-glass);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.content-category.open .content-category__topics {
  max-height: 2000px;
  opacity: 1;
}
.content-topic-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface-1);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: var(--transition-smooth);
}
.content-topic-card:last-child {
  border-bottom: none;
}
.content-topic-card:hover {
  background: rgba(11, 78, 162, 0.15);
}
.content-topic-card__icon {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.content-topic-card:hover .content-topic-card__icon {
  color: #60a5fa;
}
.content-topic-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.content-topic-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.content-topic-card__subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-topic-card__meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.content-topic-card__arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}
.content-topic-card:hover .content-topic-card__arrow {
  opacity: 1;
  transform: translateX(0);
}
/* Link-variant kariet (sekcia „Odborné Zdroje") — <a> namiesto <button> */
a.content-topic-card {
  text-decoration: none;
}
.content-topic-card--link .content-topic-card__subtitle {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

/* ==========================================================================
   22. CONTENT MODAL (Article viewer)
   ========================================================================== */

.content-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.content-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

.content-modal__content {
  position: relative;
  z-index: 1;
  width: 92vw;
  max-width: var(--max-width);
  max-height: 90vh;
  background: linear-gradient(145deg, rgba(15,23,42,0.98), rgba(30,41,59,0.97));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.content-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.content-modal__header-text {
  flex: 1;
  min-width: 0;
}
.content-modal__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 0.2rem;
}
.content-modal__subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}
.content-modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #94a3b8;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.content-modal__close:hover {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}

/* Meta */
.content-modal__meta {
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.content-modal__meta-link { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }
.content-modal__meta-link:hover { color: #93c5fd; }

/* Article body */
.content-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  line-height: 1.7;
  color: #cbd5e1;
  font-size: 0.88rem;
}
.content-modal__body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.content-modal__body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #60a5fa;
  margin: 1.3rem 0 0.5rem;
}
.content-modal__body h5 {
  font-size: 0.88rem;
  font-weight: 600;
  color: #94a3b8;
  margin: 1rem 0 0.4rem;
}
.content-modal__body p {
  margin: 0.6rem 0;
}
.content-modal__body ul,
.content-modal__body ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}
.content-modal__body li {
  margin-bottom: 0.3rem;
}
.content-modal__body strong {
  color: #e2e8f0;
  font-weight: 600;
}
.content-modal__body em {
  font-style: italic;
  color: #d1d5db;
}
.content-modal__body u {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.content-modal__body s {
  text-decoration: line-through;
  opacity: 0.6;
}
.content-modal__body a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.content-modal__body a:hover {
  color: #93c5fd;
}
.content-modal__body h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 1.8rem 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.content-modal__body h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 1.6rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.content-modal__body hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 1.5rem 0;
}
.content-modal__body blockquote {
  border-left: 3px solid rgba(96,165,250,0.4);
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: rgba(96,165,250,0.05);
  border-radius: 0 4px 4px 0;
}
.content-modal__body blockquote p {
  margin: 0.3rem 0;
  font-style: italic;
  color: #94a3b8;
}
.content-modal__body sub,
.content-modal__body sup {
  font-size: 0.75em;
}
.content-modal__body ol {
  list-style-type: decimal;
}

/* Tables in articles */
.content-modal__body .content-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.8rem;
}
.content-modal__body .content-table th {
  background: rgba(11, 78, 162, 0.2);
  color: #93c5fd;
  font-weight: 600;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 2px solid rgba(96,165,250,0.3);
}
.content-modal__body .content-table td {
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #cbd5e1;
}
.content-modal__body .content-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.content-modal__body .content-table tr.highlight-row td {
  background: rgba(59,130,246,0.12);
  border-bottom-color: rgba(96,165,250,0.2);
}
.content-modal__body .content-table tr.highlight-row:hover td {
  background: rgba(59,130,246,0.18);
}
.content-modal__body .table-note {
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
  margin: 0.3rem 0 1rem;
}

/* Custom formatting directives from .docx */
.content-modal__body .content-spacer {
  height: 1em;
}

.content-modal__body .text-accent {
  color: #60a5fa;
}

/* Scrollbar — zjednotený štýl pre obsahové aj CRZ modálne okná */
.content-modal__body::-webkit-scrollbar,
.crz-modal__body::-webkit-scrollbar {
  width: 6px;
}
.content-modal__body::-webkit-scrollbar-track,
.crz-modal__body::-webkit-scrollbar-track {
  background: transparent;
}
.content-modal__body::-webkit-scrollbar-thumb,
.crz-modal__body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* Footer navigation */
.content-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.5);
}
.content-modal__nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: #94a3b8;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.content-modal__nav:hover:not(:disabled) {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
  border-color: rgba(96,165,250,0.3);
}
.content-modal__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.content-modal__nav .nav-arrow {
  font-size: 1rem;
}
.content-modal__position {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .content-modal__content {
    width: 98vw;
    max-height: 95vh;
  }
  .content-modal__body {
    padding: 1rem;
  }
  .content-modal__nav .nav-label {
    display: none;
  }
  .content-topic-card__subtitle {
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Cookie Consent Banner
   ═══════════════════════════════════════════════════════════════ */
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--surface-2, #1a2332);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
#cookie-consent-banner.visible {
  transform: translateY(0);
}
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.cookie-banner__text {
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #94a3b8;
}
.cookie-banner__text p {
  margin: 0;
}
.cookie-banner__link {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.78rem;
}
.cookie-banner__link:hover {
  color: #93c5fd;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-banner__btn {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.cookie-banner__btn:hover {
  transform: translateY(-1px);
}
.cookie-banner__btn--accept {
  background: #3b82f6;
  color: #fff;
}
.cookie-banner__btn--accept:hover {
  background: #2563eb;
}
.cookie-banner__btn--reject {
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.12);
}
.cookie-banner__btn--reject:hover {
  background: rgba(255,255,255,0.12);
  color: #cbd5e1;
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__btn {
    flex: 1;
  }
}

/* ==========================================================================
   CONTENT SECTION SWITCHER (In-place prepínanie sekcií)
   ========================================================================== */

/* Section title pod hlavným nadpisom */
.content-section-title {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-blue);
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
}

/* Section navigation (šípky + bodky) */
.section-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem 0 1.4rem;
}

.section-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: var(--border-light);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 0;
}

.section-nav__arrow:hover:not(:disabled) {
  background: rgba(11, 78, 162, 0.4);
  border-color: var(--accent-blue);
  transform: scale(1.1);
}

.section-nav__arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

.section-nav__dots {
  display: flex;
  gap: 0.5rem;
}

.section-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 0;
}

.section-nav__dot:hover {
  background: rgba(255, 255, 255, 0.3);
}

.section-nav__dot.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  transform: scale(1.2);
}

/* Content fade transition */
#content-categories {
  transition: opacity 0.2s ease;
}

#content-categories.section-hidden {
  opacity: 0;
}

#content-categories.section-visible {
  opacity: 1;
}

/* Empty section placeholder */
.content-empty-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 300px;
  color: var(--text-muted);
  font-size: 1rem;
  text-align: center;
}

@media (max-width: 768px) {
  .section-nav__arrow {
    width: 30px;
    height: 30px;
  }
  .section-nav__arrow svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   CORNER WATERMARK (pnck.png — fixed bottom-right)
   ========================================================================== */
.corner-watermark {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 480px;
  height: auto;
  opacity: 0.35;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0.3s ease;
}

/* Hide when viewport is too small */
@media (max-width: 1700px) {
  .corner-watermark { display: none; }
}
@media (max-height: 700px) {
  .corner-watermark { display: none; }
}

/* ==========================================================================
   SILVER GRADIENT TEXT — dark mode only (headings)
   Bottom-up gradient: muted silver (#9ca3af) → white (#f8fafc)
   ========================================================================== */
#page_body h2,
#overall-trend h2,
.author-statement__heading,
.sk-institutions__heading,
.eu-section-title {
  background: linear-gradient(to top, #8f97a3 0%, #dbe0e7 45%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#logo span {
  background: linear-gradient(to top, #9ca3af 0%, #d0d5db 40%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   VIZUÁLNE VYLADENIE (2026-06-09) — KPI pás, nav-active, footer, counter
   ========================================================================== */

/* ── KPI kontrolky okna Celkový Vývoj — rad prístrojových hodnôt pod grafom ── */
.kpi-strip {
  margin: 1.1rem 0 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.kpi-strip__inner {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
}
.kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.kpi-item:hover {
  background: rgba(96, 165, 250, 0.06);
  border-color: rgba(96, 165, 250, 0.3);
}
.kpi-item__value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.kpi-item__number {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(to top, #60a5fa 0%, #f8fafc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-item__unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.kpi-item__label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}
.kpi-item__ref {
  font-size: 0.66rem;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .kpi-strip__inner { flex-wrap: wrap; }
  .kpi-item { flex: 1 1 30%; }
}
@media (max-width: 480px) {
  .kpi-item { flex: 1 1 45%; }
  .kpi-item__number { font-size: 1.25rem; }
}

/* ── Aktívna stránka v navigácii ── */
#navigation a.nav-active {
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(11, 78, 162, 0.55) 0%, rgba(29, 78, 216, 0.35) 100%);
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 0 14px rgba(11, 78, 162, 0.35);
}

/* ── Footer — čistejší zoznam bez oddeľovačov ── */
.footer-links .separator { display: none; }
.footer-links { gap: 0.35rem 0.5rem; }
.footer-links a {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}
.footer-links a:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Počítadlo slidov v karuseli (AI Výskum) ── */
.slide-carousel__counter {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: var(--border-glass);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.7rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ── SK Regional — bledomodré jemné rámiky okienok (parity s Panel SK/EU) ── */
.sr-indicator-card {
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.04);
}
.sr-indicator-card:hover {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.07);
}
[data-page="sk-regional"] .eu-hero-card,
[data-page="eu-states"] .eu-hero-card {
  border: 1px solid rgba(96, 165, 250, 0.25);
}
[data-page="sk-regional"] .eu-hero-card:hover,
[data-page="eu-states"] .eu-hero-card:hover {
  border-color: rgba(96, 165, 250, 0.5);
}

/* ── Štáty EÚ — filtračný panel (4 farebné okienka) ───────────────────────── */
.eu-filtersec { margin: 0 0 1.4rem; }
.eu-filtersec__hint { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }
.eu-filterbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
@media (max-width: 900px) { .eu-filterbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .eu-filterbar { grid-template-columns: 1fr; } }

.eu-filter {
  position: relative; background: var(--surface-1);
  border: 1px solid var(--cb, rgba(96, 165, 250, 0.3)); border-radius: var(--radius-md); padding: 0.5rem 0.55rem;
}
.eu-filter.is-c-green  { --c: #4ade80; --cb: rgba(74, 222, 128, 0.35); }
.eu-filter.is-c-red    { --c: #f87171; --cb: rgba(248, 113, 113, 0.35); }
.eu-filter.is-c-blue   { --c: #60a5fa; --cb: rgba(96, 165, 250, 0.35); }
.eu-filter.is-c-yellow { --c: #fbbf24; --cb: rgba(251, 191, 36, 0.35); }

.eu-filter__row { display: flex; align-items: stretch; gap: 0.4rem; }
.eu-filter__trigger {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  padding: 0.42rem 0.6rem; cursor: pointer; font-family: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--text-primary); background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 8px;
}
.eu-filter__trigger:hover { border-color: var(--c); }
.eu-filter__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-filter__chev { flex-shrink: 0; color: var(--c); transition: transform 0.15s ease; }
.eu-filter.is-open .eu-filter__chev { transform: rotate(180deg); }
.eu-filter__dir {
  flex-shrink: 0; width: 2.1rem; cursor: pointer; font-size: 0.95rem; font-weight: 700;
  color: var(--c); background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 8px;
}
.eu-filter__dir:hover:not(:disabled) { border-color: var(--c); background: rgba(255, 255, 255, 0.06); }
.eu-filter__dir:disabled { opacity: 0.35; cursor: default; }

.eu-filter__menu {
  display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; padding: 0.3rem;
  background: var(--surface-1); border: 1px solid var(--cb); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.eu-filter.is-open .eu-filter__menu { display: block; }
.eu-filter__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.83rem;
  color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px;
}
.eu-filter__opt:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.eu-filter__opt.is-sel { color: var(--c); font-weight: 700; }
.eu-filter__opt--clear { color: var(--text-muted); border-top: 1px solid rgba(148, 163, 184, 0.18); margin-top: 0.2rem; border-radius: 0; }

/* Zvýraznenie metriky vo všetkých kartách — farebný ring podľa filtra (prebije aj hover) */
[data-page="eu-states"] .eu-hero-card.is-hl-green  { border-color: rgba(74, 222, 128, 0.6);  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35); }
[data-page="eu-states"] .eu-hero-card.is-hl-red    { border-color: rgba(248, 113, 113, 0.6); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35); }
[data-page="eu-states"] .eu-hero-card.is-hl-blue   { border-color: rgba(96, 165, 250, 0.6);  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35); }
[data-page="eu-states"] .eu-hero-card.is-hl-yellow { border-color: rgba(251, 191, 36, 0.6);  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35); }
[data-page="sk-regional"] .eu-category-section {
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   PROFESIONÁLNE DETAILY (2026-06-11) — scrim, skip-link, mobile nav, reveal
   ========================================================================== */

/* ── Header scrim — jemný tmavý gradient za logom/navigáciou (kontrast na fotke) ── */
#head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(2, 8, 23, 0.55) 0%,
    rgba(2, 8, 23, 0.28) 45%,
    rgba(2, 8, 23, 0.05) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Skip-to-content — neviditeľný, kým nedostane focus klávesnicou ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.6rem 1.2rem;
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-ambient);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* ── Mobilná navigácia — 2-radový posuvný pás chipov (namiesto zalomenia do 4-5 riadkov) ── */
@media (max-width: 768px) {
  #navigation ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    justify-content: start;   /* NUTNÉ: center + overflow robí ľavé položky nedosiahnuteľné */
    gap: 0.5rem 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    padding: 0.25rem 1.25rem 0.5rem 0.25rem;
    /* Fade okraje — vizuálny signál, že pás pokračuje */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  #navigation ul::-webkit-scrollbar { display: none; }
  #navigation li { scroll-snap-align: start; }
  #navigation a {
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
    flex-shrink: 0;
    width: 100%;              /* vyplní stĺpec gridu — bez medzier pri krátkych názvoch */
    justify-content: center;
  }
}

/* ── Scroll-reveal — karty sa jemne objavia pri scrollovaní ── */
.reveal-init {
  opacity: 0;
  transform: translateY(14px);
}
.reveal-init.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Mobil: hlavné nadpisy okien jednotne 1.75rem na všetkých stránkach
   (= doterajšia veľkosť nadpisov Panel SK/EU). Zámerne NEzahŕňa
   author-statement__heading a sk-institutions__heading (1.3rem — už menšie)
   ani žiadne čísla/texty v okienkach. ── */
@media (max-width: 768px) {
  #page_body h2,
  #overall-trend h2,
  .eu-section-title {
    font-size: 1.75rem;
  }
}

/* ── Footer — Instagram ikona ── */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}
.footer-social__link:hover {
  color: var(--text-primary);
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.2);
}

/* ── Eurofondy okno — info karta (skladba + príspevky) ── */
.euf-info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.5rem 0.25rem 0;
  min-height: 200px;
}
.euf-info__block { }
.euf-info__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.euf-info__approx, .euf-info__unit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}
.euf-info__funds {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
  line-height: 1.6;
}
.euf-info__sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0.2rem 0 0;
}
.euf-info__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.euf-info__row strong { color: var(--text-primary); font-size: 1.05rem; }
.euf-info__row--net {
  border-bottom: none;
  margin-top: 0.2rem;
}
.euf-info__row--net span { color: var(--text-primary); font-weight: 600; }
.euf-info__row--net strong {
  font-size: 1.3rem;
  background: linear-gradient(to top, #60a5fa 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Štátna správa — karty zamestnancov ── */
.ps-intro {
  /* spodná poznámka okna — oddelená čiarou ako v ostatných oknách */
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.ps-card__stats {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: 0.75rem;
}
.ps-stat { font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; }
.ps-stat strong { color: var(--text-primary); font-size: 1.05rem; }
.ps-stat--wage strong {
  background: linear-gradient(to top, #fbbf24 0%, #fcd34d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ps-card__note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.ps-card__switch { display: flex; justify-content: center; margin-bottom: 0.5rem; }
.ps-dots { gap: 0.5rem; }
.ps-dots .ot-dots__dot {
  width: auto;
  height: auto;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  transform: none;
}
.ps-dots .ot-dots__dot.active {
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.45);
  color: var(--text-primary);
  transform: none;
}
.ps-chart-wrap { position: relative; height: 240px; margin-top: 0.5rem; }
/* Rozbalenie karty — väčší max-height aby sa zmestil graf (default 600px tesný) */
.ps-card.indicator-card.expanded .indicator-card__body {
  max-height: 480px;
  padding: 0 1.25rem 1.25rem;
}
/* Header — zarovnaný padding + počet/mzdy do pevných stĺpcov */
.ps-card .eu-indicator-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  cursor: pointer;
}
.ps-card .indicator-card__title { margin: 0; flex: 1 1 auto; }
.ps-card__stats {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex: 0 0 auto;
}
.ps-stat {
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: right;
  min-width: 9.5rem;
}
.ps-stat strong { color: var(--text-primary); font-size: 1.1rem; }
@media (max-width: 680px) {
  .ps-card .eu-indicator-card__header { flex-wrap: wrap; }
  .ps-card__stats { width: 100%; justify-content: space-between; gap: 0.5rem; }
  .ps-stat { min-width: 0; }
}

/* ── Rozloženie obyvateľstva — riadky v záložke ── */
.pop-rows {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 1.25rem;   /* bočné odsadenie ako .eu-category-section__indicators */
}
.pop-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pop-row__label { flex: 0 0 38%; font-size: 0.92rem; color: var(--text-secondary); }
.pop-row__bar-wrap {
  flex: 1 1 auto;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pop-row__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(96,165,250,0.5), rgba(96,165,250,0.9));
  border-radius: var(--radius-full);
}
.pop-row__value {
  flex: 0 0 5rem;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Pracujúci — zvýraznený riadok */
.pop-row--work .pop-row__label { color: var(--text-primary); font-weight: 700; }
.pop-row--work .pop-row__bar { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.pop-row--work .pop-row__value { font-size: 1.05rem; color: #fbbf24; }
/* Pod-riadky (breakdown pracujúcich) */
.pop-subrows {
  margin: 0.1rem 0 0.4rem 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(251,191,36,0.3);
}
.pop-row--sub { padding: 0.3rem 0.25rem; border-bottom: none; }
.pop-row--sub .pop-row__label { flex-basis: 36%; font-size: 0.82rem; color: var(--text-muted); }
.pop-row--sub .pop-row__bar { background: rgba(148,163,184,0.5); }
.pop-row--sub .pop-row__value { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
/* Poznámky */
.pop-caveats { margin: 1rem 1.25rem 0; padding: 0.75rem 0 1.25rem; border-top: 1px solid rgba(255,255,255,0.07); }
.pop-caveats__title { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin: 0 0 0.35rem; }
.pop-caveats ul { margin: 0; padding-left: 1.1rem; }
.pop-caveats li { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.2rem; }
.pop-caveats__src { font-size: 0.72rem; color: var(--text-muted); margin: 0.5rem 0 0; opacity: 0.8; }
@media (max-width: 600px) {
  .pop-row__label { flex-basis: 50%; }
  .pop-row__bar-wrap { display: none; }
}

/* ══ Mapa regiónov (SK Data Lake — sk-region-map.js) ═══════════════════════ */
.sr-map__controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.9rem;
}
.sr-map__metrics { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sr-map__metric-btn {
  font: 600 0.76rem/1 'Inter', sans-serif; letter-spacing: 0.2px;
  color: var(--text-secondary); background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-full, 999px);
  padding: 0.42rem 0.9rem; cursor: pointer; transition: all 0.2s ease;
}
.sr-map__metric-btn:hover { border-color: rgba(96, 165, 250, 0.5); color: var(--text-primary); }
.sr-map__metric-btn.active {
  color: #fff; background: rgba(11, 78, 162, 0.35);
  border-color: rgba(96, 165, 250, 0.65);
}
.sr-map__period { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.sr-map__below {
  /* minmax(0, 1fr) — bez min:auto by sa stĺpce nedali zmenšiť pod min-obsah
     (Chart.js dáva canvasu pevnú px šírku), grid by pretiekol z okna a pravé
     okno KRAJE by vypadlo. minmax(0,…) umožní stĺpcom zmenšiť sa a Chart.js
     canvas sa korektne preškáluje pri zužovaní/rozťahovaní obrazovky. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem; align-items: stretch; margin-top: 1.1rem;
}
/* Doplnkové accordion sekcie presunuté pod mapu (Rozloženie obyvateľstva,
   Regionálne rozdiely, Demografia) — rovnaký vizuál ako v Hlavných ukazovateľoch. */
.sr-map__extra { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
/* podokienka pod mapou — rovnaký vizuál ako hero karty */
.sr-map__chart-col, .sr-map__data-col {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: transform 0.15s, box-shadow 0.15s;
  min-width: 0; /* umožní zmenšenie pod obsah (canvas/riadky) — bez pretečenia okna */
}
.sr-map__chart-col:hover, .sr-map__data-col:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sr-map__map-wrap {
  position: relative; border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg, 14px); padding: 0.9rem;
  /* JEDNOFAREBNÉ pozadie — rovnaké ako graf v okne „Príjmy, inflácia a bývanie"
     (a ako grafové okienko vedľa). Theme-aware cez --surface-1, bez gradientu. */
  background: var(--surface-1);
}
.sr-map__svg { width: 100%; height: auto; max-height: 520px; display: block; margin: 0 auto; }
.sr-map__kraj { cursor: pointer; transition: filter 0.15s ease; }
.sr-map__kraj:hover { filter: brightness(1.25); }
.sr-map__kraj.selected { filter: brightness(1.15) drop-shadow(0 0 6px rgba(147, 197, 253, 0.45)); }
.sr-map__city { fill: rgba(226, 232, 240, 0.9); stroke: rgba(15, 23, 42, 0.6); stroke-width: 1; pointer-events: none; }
.sr-map__citylabel {
  font: 500 13px 'Inter', sans-serif; fill: rgba(203, 213, 225, 0.85);
  paint-order: stroke; stroke: rgba(15, 23, 42, 0.55); stroke-width: 2.5px; pointer-events: none;
}
.sr-map__legend { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.7rem; }
.sr-map__legend-bar { flex: 0 1 180px; height: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); }
.sr-map__legend-val { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sr-map__tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.76rem; color: #e2e8f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); white-space: nowrap;
}

.sr-map__detail-head { display: flex; align-items: center; justify-content: space-between; }
.sr-map__detail-title { font-size: 1.02rem; margin: 0 0 0.2rem; color: var(--text-primary); }
.sr-map__back {
  background: none; border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-muted);
  border-radius: 8px; width: 26px; height: 26px; font-size: 0.95rem; line-height: 1;
  cursor: pointer; transition: all 0.2s ease;
}
.sr-map__back:hover { color: var(--text-primary); border-color: rgba(96, 165, 250, 0.5); }
.sr-map__detail-big {
  font: 700 1.6rem/1.1 'Space Grotesk', 'Inter', sans-serif; color: var(--text-primary);
  margin: 0.15rem 0 0.7rem; font-variant-numeric: tabular-nums;
}
.sr-map__detail-big span { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.sr-map__detail-sr { margin-left: 0.7rem; }
.sr-map__chart-wrap {
  height: 290px;
  box-sizing: border-box;
  position: relative;
  margin-top: 0.4rem;
  padding: 0.5rem;
  border-radius: 10px;
  /* JEDNOFAREBNÉ pozadie — presne ako graf v okne „Príjmy, inflácia a bývanie"
     (panelový podklad, bez gradientu). Theme-aware cez --surface-1. */
  background: var(--surface-1);
}
/* Ikonka „zväčšiť graf" — v pravom hornom rohu detailu, priamo pod × (návrat na SR) */
.sr-map__chart-col { position: relative; }
.sr-map__chart-zoom {
  position: absolute;
  top: 2.9rem;
  right: 1rem;
  z-index: 3;
  width: 26px;
  height: 26px;
  opacity: 0.75;
}
.sr-map__chart-zoom:hover {
  opacity: 1;
}
.sr-map__okresy-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 0 0 0.4rem;
}
/* pevná výška pravého stĺpca — dimenzovaná na kraj s najviac okresmi (13),
   aby okno pri preklikávaní krajov nemenilo výšku */
.sr-map__rows--fixed { height: 336px; overflow-y: auto; padding-right: 0.35rem; }
.sr-map__okres-row {
  grid-template-columns: minmax(110px, 1.2fr) minmax(50px, 1.4fr) minmax(58px, 0.7fr) minmax(52px, 0.6fr);
}
.sr-map__row { cursor: pointer; }
.sr-map__row:hover .sr-region-row__name { color: var(--text-primary); }
.sr-map__delta { font-size: 0.72rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sr-map__delta.pos { color: #4ade80; }
.sr-map__delta.neg { color: #f87171; }
.sr-map__hint { font-size: 0.74rem; color: var(--text-muted); margin: 0.7rem 0 0; }

@media (max-width: 860px) {
  .sr-map__below { grid-template-columns: minmax(0, 1fr); }
  .sr-map__rows--fixed { height: auto; max-height: 336px; }
  .sr-map__citylabel { font-size: 16px; }
}
.sr-map__row.current .sr-region-row__name { color: var(--text-primary); font-weight: 700; }
.sr-map__row.current .sr-region-row__bar { background: linear-gradient(180deg, #dbeafe 0%, #93c5fd 50%, #3b82f6 100%); }

/* ==========================================================================
   VYHĽADÁVANIE — panel na hlavnej stránke (nad oknom „Celkový vývoj")
   ========================================================================== */
/* Zdvihni celý panel nad neskoršie okná (tie majú backdrop-filter = vlastný
   stacking context), inak by dropdown výsledkov zmizol za oknom „Celkový vývoj". */
#site-search {
  position: relative;
  z-index: 30;
}
/* Podčiarknutie nadpisu „Vyhľadávanie" — modro-ČERVENÁ (ako okno „Celkový vývoj"),
   nie modro-žltá (tá je len na Paneli EÚ). Scopnuté výhradne na tento panel. */
#site-search .eu-section-title::after {
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue) 70%, transparent 70%, transparent 76%, var(--accent-red) 76%, var(--accent-red) 100%);
}
.search-panel__hint {
  margin: -0.6rem 0 1.1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.search-panel__bar {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.search-panel__field {
  position: relative; /* kotva pre absolútny dropdown výsledkov */
  flex: 1 1 auto;
  min-width: 0;
}
.search-panel__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.search-panel__input::placeholder { color: var(--text-muted); }
.search-panel__input:focus {
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(96, 165, 250, 0.06);
}
.search-panel__btn {
  flex: 0 0 auto;
  padding: 0 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.search-panel__btn:hover { filter: brightness(1.12); }
.search-panel__btn:active { transform: translateY(1px); }

/* Dropdown výsledkov — absolútne umiestnený, prekrýva obsah pod panelom (nič
   neposúva, aj keď je výsledkov veľa — vnútri sa scrolluje). */
.search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.4rem;
  /* PLNE nepriehľadné pozadie (bez priehľadnosti/blur) — malé texty výsledkov
     musia byť dobre čitateľné. Týka sa VÝHRADNE tohto dropdownu výsledkov. */
  background: #141d33;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.search-results__empty {
  padding: 0.9rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s ease;
}
.search-result:hover,
.search-result:focus { background: rgba(96, 165, 250, 0.12); }
.search-result__badge {
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.search-result__badge--page { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.search-result__badge--cat  { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
.search-result__badge--ind  { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.search-result__text { display: flex; flex-direction: column; min-width: 0; }
.search-result__label {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result__label mark {
  background: rgba(251, 191, 36, 0.35);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.search-result__ctx {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .search-panel__bar { flex-direction: column; }
  .search-panel__btn { padding: 0.8rem; }
}

/* Deep-link zvýraznenie cieľa (po skoku z vyhľadávania) — dočasný modrý pulz.
   Outline sa nekreslí do layoutu ani ho neoreže overflow rodiča. */
@keyframes deeplinkFlash {
  0%   { outline-color: rgba(96, 165, 250, 0.9); }
  70%  { outline-color: rgba(96, 165, 250, 0.9); }
  100% { outline-color: rgba(96, 165, 250, 0); }
}
.deeplink-flash {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 3px;
  animation: deeplinkFlash 2.6s ease-out forwards;
}
/* Badge typu „Okno" vo výsledkoch vyhľadávania (fialová) */
.search-result__badge--win { background: rgba(168, 85, 247, 0.18); color: #c4b5fd; }

/* ==========================================================================
   Zarovnanie detailov kartičiek ukazovateľov DOPRAVA — LEN DESKTOP
   Okná „Hlavné ukazovatele" (Panel SK/EU + Regionálne dáta). Názov/hodnota/delta
   ostávajú vľavo; skupina badge (status, zdroj, rok, ikonka grafu) + šípka idú
   doprava k okraju → sú zarovnané pod sebou naprieč rôzne dlhými názvami.
   Na mobile/tablete (≤768px) ostáva pôvodné rozloženie (skupina hneď za textom).
   ========================================================================== */
@media (min-width: 769px) {
  .eu-indicator-card__row > .eu-indicator-card__badges {
    margin-left: auto;
  }
  /* Šípku už netlačíme vlastným auto-marginom (posúva ju doprava celá skupina);
     dva auto-marginy by inak rozdelili priestor a vznikla by medzera pred šípkou. */
  .eu-indicator-card.is-expandable .indicator-card__chevron {
    margin-left: 0;
  }
}