/* Ukážkové dashboardy */

.dashboard {
  padding: var(--medzera-2);
  border: 1px solid var(--farba-okraj);
  border-radius: var(--zaoblenie-velke);
  background-color: var(--farba-biela);
  box-shadow: var(--tien);
}

@media (min-width: 768px) {
  .dashboard {
    padding: var(--medzera-4);
  }
}

/* Záložky */
.dashboard__zalozky {
  display: flex;
  gap: var(--medzera-1);
  margin-bottom: var(--medzera-3);
  border-bottom: 1px solid var(--farba-okraj);
  overflow-x: auto;
}

.dashboard__zalozka {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--farba-text-stlmeny);
  cursor: pointer;
}

.dashboard__zalozka:hover {
  color: var(--farba-primary);
}

.dashboard__zalozka[aria-selected="true"] {
  color: var(--farba-primary);
  border-bottom-color: var(--farba-primary);
}

.dashboard__obdobie {
  margin-bottom: var(--medzera-2);
  font-size: var(--velkost-mala);
  color: var(--farba-text-stlmeny);
}

/* KPI dlaždice */
.kpi-mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: var(--medzera-2);
  margin-bottom: var(--medzera-4);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: var(--medzera-2);
  border: 1px solid var(--farba-okraj);
  border-radius: var(--zaoblenie);
  background-color: var(--farba-biela);
}

.kpi__nazov {
  font-size: var(--velkost-mala);
  color: var(--farba-text-stlmeny);
}

.kpi__hodnota {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--farba-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi__zmena {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi__zmena--dobra {
  color: var(--farba-rast);
}

.kpi__zmena--zla {
  color: var(--farba-pokles);
}

.kpi__zmena--neutralna,
.kpi__porovnanie {
  font-weight: 500;
  color: var(--farba-text-stlmeny);
}

.kpi__trend {
  width: 100%;
  height: 32px;
  margin-top: var(--medzera-1);
  overflow: visible;
}

.kpi__trend-ciara {
  fill: none;
  stroke: var(--farba-secondary);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.kpi__trend-bod {
  fill: none;
  stroke: var(--farba-graf-1);
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Karta grafu */
.graf-karta {
  margin: 0;
}

.graf-karta__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
}

.graf-karta__nazov {
  font-weight: 600;
  color: var(--farba-primary);
}

.graf-karta__popis {
  font-size: var(--velkost-mala);
  color: var(--farba-text-stlmeny);
}

.graf__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--medzera-1) var(--medzera-3);
  margin-bottom: var(--medzera-2);
  font-size: 0.8125rem;
  color: var(--farba-text);
}

.graf__legenda li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Farebné značky (legenda, tooltip) – text sám nikdy nie je vo farbe série */
.graf__kluc {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.graf__kluc--1,
.graf__kluc--plus {
  background-color: var(--farba-graf-1);
}

.graf__kluc--2 {
  background-color: var(--farba-graf-2);
}

.graf__kluc--minus {
  background-color: var(--farba-pokles);
}

/* Graf */
.graf {
  position: relative;
  min-height: 160px;
  border-radius: var(--zaoblenie);
}

.graf:focus-visible {
  outline: 3px solid var(--farba-primary);
  outline-offset: 4px;
}

.graf__svg {
  display: block;
  overflow: visible;
  font-family: var(--pismo);
}

.graf__mriezka {
  stroke: var(--farba-okraj);
  stroke-width: 1;
}

.graf__nula,
.graf__zakladna {
  stroke: var(--farba-text-stlmeny);
  stroke-width: 1;
}

.graf__popis-osi {
  font-size: 12px;
  fill: var(--farba-text-stlmeny);
  font-variant-numeric: tabular-nums;
}

.graf__popis-kategorie {
  font-size: 13px;
  fill: var(--farba-text);
}

.graf__popis-hodnoty {
  font-size: 12px;
  font-weight: 600;
  fill: var(--farba-text);
  font-variant-numeric: tabular-nums;
}

.graf__plocha {
  fill: var(--farba-graf-1-plocha);
}

.graf__ciara {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.graf__ciara--1 {
  stroke: var(--farba-graf-1);
}

.graf__ciara--2 {
  stroke: var(--farba-graf-2);
}

/* Body majú prstenec vo farbe pozadia, aby boli čitateľné aj na čiare */
.graf__bod {
  stroke: var(--farba-biela);
  stroke-width: 2;
}

.graf__bod--1 {
  fill: var(--farba-graf-1);
}

.graf__bod--2 {
  fill: var(--farba-graf-2);
}

.graf__kurzor-ciara {
  stroke: var(--farba-text-stlmeny);
  stroke-width: 1;
}

.graf__pruh,
.graf__stlpec--plus {
  fill: var(--farba-graf-1);
}

.graf__stlpec--minus {
  fill: var(--farba-pokles);
}

.graf__pruh,
.graf__stlpec {
  transition: opacity 0.15s ease;
}

/* Pri prejdení myšou sa ostatné položky stíšia */
.graf__svg:has(.graf__polozka--aktivna) .graf__polozka:not(.graf__polozka--aktivna) .graf__pruh,
.graf__svg:has(.graf__polozka--aktivna) .graf__polozka:not(.graf__polozka--aktivna) .graf__stlpec {
  opacity: 0.45;
}

.graf__ciel {
  fill: transparent;
  cursor: default;
}

/* Tooltip */
.graf__tooltip {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--farba-okraj);
  border-radius: var(--zaoblenie);
  background-color: var(--farba-biela);
  box-shadow: var(--tien);
  font-size: 0.8125rem;
  pointer-events: none;
}

.graf__tooltip-nadpis {
  margin-bottom: 0.375rem;
  font-weight: 600;
  color: var(--farba-primary);
}

.graf__tooltip-nadpis::first-letter {
  text-transform: uppercase;
}

.graf__tooltip-riadok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--farba-text-stlmeny);
}

.graf__tooltip-riadok + .graf__tooltip-riadok {
  margin-top: 0.25rem;
}

.graf__tooltip-text {
  flex: 1;
}

.graf__tooltip-hodnota {
  font-weight: 600;
  color: var(--farba-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}