/* layout.css — FAZA 2: raspored + vizuelni sloj.
   Struktura i imena klasa su ista kao u fazi 1; ovde se dodaje samo izgled.
   Nijedna boja, senka, radijus ni razmak nisu upisani direktno —
   sve dolazi iz tokens.css kroz var(). */

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 { letter-spacing: var(--tracking-tight); }

button, input, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-field);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
  background-clip: content-box;
}

.skip-link { position: absolute; left: -9999px; }

.skip-link:focus {
  left: var(--s-3);
  top: var(--s-3);
  z-index: 10;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Ljuska: fiksan sidebar levo, glavna povrsina uvucena za njegovu sirinu
   --------------------------------------------------------------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 5;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-3);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-2) var(--s-1);
}

/* Plocica je i dalje CSS kvadrat, unutra stoji inline SVG sa tri stubica.
   Njegov viewBox je 96x96 kao kod favicona, pa odnosi ostaju isti. */
.sidebar__logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}

.sidebar__logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.sidebar__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.sidebar__nav { flex: 1; }

.nav { display: flex; flex-direction: column; gap: var(--s-1); }

.nav__link {
  position: relative;
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  color: var(--text-muted);
  font-weight: 500;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

/* Aktivna stavka: teal podloga, teal tekst i tanka sipka uz levu ivicu. */
.nav__link.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-weight: 600;
  box-shadow: var(--shadow-inset-sm);
}

.nav__link.is-active:hover { background: var(--accent-soft); }

.nav__link.is-active::before {
  content: "";
  position: absolute;
  left: var(--s-1);
  top: 50%;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.sidebar__foot { padding: 0 var(--s-3); }

.sidebar__meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Bez tokena nijedan poziv ne moze da prodje — oznaka to kaze odmah,
   pre nego sto prvi ekran ispise svoju gresku. */
.sidebar__meta.is-warning { color: var(--down); font-weight: 600; }

.main {
  margin-left: var(--sidebar-w);
  padding: var(--s-6) var(--s-6) var(--s-7);
  max-width: calc(var(--content-max) + var(--sidebar-w));
}

/* ---------------------------------------------------------------
   Zaglavlje ekrana i blokovi
   --------------------------------------------------------------- */

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  animation: screen-in var(--dur-slow) var(--ease) both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.screen__head { display: flex; flex-direction: column; gap: var(--s-1); }

.screen__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.screen__title:focus { outline: none; }

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

.block { display: flex; flex-direction: column; gap: var(--s-3); }

.block__head { display: flex; flex-direction: column; gap: 2px; }

.block__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.block__hint { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------
   Stat kartice — mali label iznad, veliki broj ispod
   --------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lifted);
}

.stat-card__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat-card__value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.stat-card__note { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------
   Filter traka
   --------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}

.filters__field { display: flex; flex-direction: column; gap: var(--s-2); }

.filters__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Udubljeno polje: bez ivice, dubinu daje inset senka. */
.filters__control {
  min-width: 158px;
  padding: var(--s-2) var(--s-6) var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-field);
  background: var(--surface-sunken) var(--icon-chevron) no-repeat right var(--s-3) center;
  box-shadow: var(--shadow-inset-sm);
  font-size: var(--fs-md);
  appearance: none;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease);
}

.filters__control:hover { box-shadow: var(--shadow-inset); }

.filters__actions { margin-left: auto; }

/* Recenica uz kontrolu, ne uz ceo ekran — objasnjava sta izbor menja. */
.filters__note {
  align-self: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Checkbox nema label iznad sebe kao ostala polja, pa se poravnava
   sa njihovim kontrolama, ne sa njihovim naslovima. */
.filters__field--check { justify-content: flex-end; }

.filters__check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 34px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.filters__check input { accent-color: var(--accent); cursor: pointer; }

.filters__check:hover { color: var(--text); }

/* ---------------------------------------------------------------
   Dugmad — izdignuta u miru, utisnuta na klik
   --------------------------------------------------------------- */

.btn {
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset-sm);
}

.btn--ghost { background: transparent; box-shadow: none; }

.btn--ghost:hover { background: var(--surface-raised); box-shadow: var(--shadow-sm); }

.btn--icon {
  display: grid;
  place-items: center;
  padding: 0;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: var(--fs-lg);
}

/* Akcija u redu tabele ("Dodaj") — jedino mesto gde dugme nosi akcenat. */
.btn--tiny {
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-xs);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.btn--tiny:hover { background: var(--accent-tint); color: var(--accent-strong); }

/* Glavna akcija forme ("Sacuvaj") — isti akcenat kao .btn--tiny,
   samo u punoj velicini dugmeta. */
.btn--accent {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.btn--accent:hover { background: var(--accent-tint); color: var(--accent-strong); }

/* Nepovratna akcija (brisanje, i potvrda tier-a koja odmah salje PATCH). */
.btn--danger { color: var(--down); }

.btn--danger:hover { background: var(--down-soft); color: var(--down); }

.btn[disabled] {
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-inset-sm);
}

/* ---------------------------------------------------------------
   Tabele — bez zebra redova, samo tanke linije.
   Red se pod misem blago podigne; zato border-collapse: separate,
   inace senka na <tr> ne bi bila iscrtana.
   --------------------------------------------------------------- */

/* Vertikalni razmak je tu da red ima gde da se podigne pod misem;
   bocnog nema, pa redovi idu od ivice do ivice kartice. */
.table-wrap {
  padding: var(--s-2) 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}

.data-table th,
.data-table td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background-clip: padding-box;
}

.data-table thead th {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.data-table th:first-child,
.data-table td:first-child { padding-left: var(--s-4); }

.data-table th:last-child,
.data-table td:last-child { padding-right: var(--s-4); }

.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr {
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.data-table tbody td {
  transition: background-color var(--dur) var(--ease);
}

/* Prva celija drzi ime — ona nosi tezinu reda. */
.data-table tbody td:first-child { font-weight: 500; }

.data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.data-table__sort:hover { color: var(--accent-strong); }

.data-table__arrow {
  font-size: 9px;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}

.data-table th[aria-sort="ascending"] .data-table__sort,
.data-table th[aria-sort="descending"] .data-table__sort { color: var(--accent-strong); }

.data-table th[aria-sort="ascending"] .data-table__arrow,
.data-table th[aria-sort="descending"] .data-table__arrow { color: var(--accent); }

.data-table th.is-num,
.data-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }

.data-table__row--clickable { cursor: pointer; }

.data-table__row--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-row);
}

.data-table__row--clickable:hover td { background: var(--surface-raised); }

.data-table__row.is-selected td { background: var(--accent-soft); }

.data-table__row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------------------------------------------------------------
   Sitne oznake u celijama
   --------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--flat-soft);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

.tag--a     { background: var(--accent-soft); color: var(--accent-strong); }
.tag--mine  { background: var(--accent-soft); color: var(--accent-strong); }
.tag--rival { background: var(--flat-soft); color: var(--text-muted); }

/* Rast zelenom, pad crvenom, bez promene neutralnom sivom. */
.delta {
  display: inline-block;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.delta--up   { background: var(--up-soft);   color: var(--up); }
.delta--down { background: var(--down-soft); color: var(--down); }

.delta--flat {
  background: transparent;
  color: var(--flat);
  font-weight: 400;
}

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

.muted { color: var(--text-faint); font-weight: 400; }

/* Dopunska oznaka uz glavnu vrednost u celiji (store/country, "moja"). */
.data-table td .muted:not(:first-child),
.data-table td .tag:not(:first-child) { margin-left: var(--s-2); }

/* ---------------------------------------------------------------
   Prazna stanja — ikona, naslov, recenica; sve centrirano
   --------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-4);
  text-align: center;
}

/* Ikona je maska, pa joj boju daje token, a ne sam SVG. */
.empty::before {
  content: "";
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-3);
  background: var(--text-faint);
  -webkit-mask: var(--icon-empty) no-repeat center / contain;
  mask: var(--icon-empty) no-repeat center / contain;
}

.empty__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.empty__text { font-size: var(--fs-sm); color: var(--text-muted); max-width: 46ch; }

/* ---------------------------------------------------------------
   Greska — ide u isti prostor u koji bi isli podaci, nikad u alert.
   Crvena je samo naslov i sipka uz levu ivicu; povrsina ne vristi.
   --------------------------------------------------------------- */

.error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--down-soft);
  box-shadow: inset 3px 0 0 var(--down);
}

.error__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--down);
  letter-spacing: var(--tracking-tight);
}

.error__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
  max-width: 62ch;
}

.error .btn { margin-top: var(--s-1); }

/* ---------------------------------------------------------------
   Potvrda pre slanja — inline, nikad confirm() dijalog
   --------------------------------------------------------------- */

.confirm {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-control);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-inset-sm);
}

.confirm__question { font-size: var(--fs-sm); line-height: var(--lh-base); }

.confirm__actions { display: flex; gap: var(--s-2); }

.confirm__error { font-size: var(--fs-xs); color: var(--down); }

/* Potvrda unutar celije tabele: red je uzak, pa se dugme zamenjuje parom
   dugmadi umesto da iskoci traka i pomeri celu tabelu. */
.cell-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}

.cell-confirm__error {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--down);
}

/* ---------------------------------------------------------------
   Skeleton — shimmer traka, ne staticki sivi blok
   --------------------------------------------------------------- */

.skeleton {
  display: block;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--skeleton-gradient);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.4s var(--ease) infinite;
}

.skeleton--text  { width: 70%; }
.skeleton--short { width: 34%; }
.skeleton--value { height: 22px; width: 52%; border-radius: var(--r-control); }

/* Ista visina kao iscrtan graf, da panel ne skoci kad podaci stignu. */
.skeleton--chart { height: 200px; width: 100%; border-radius: var(--r-control); }

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}

@keyframes skeleton-shimmer {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--skeleton-base); }
}

/* ---------------------------------------------------------------
   Keywords: tabela + detalj panel
   --------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.split:has(.panel:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
}

.split__main { min-width: 0; }

.panel {
  position: sticky;
  top: var(--s-6);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
  animation: panel-in var(--dur-slow) var(--ease) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.panel__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.panel__meta { font-size: var(--fs-sm); color: var(--text-muted); }

.panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
}

.panel__section { display: flex; flex-direction: column; gap: var(--s-3); }

.panel__section-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Panel je vec izdignut, pa tabela u njemu ne nosi jos jednu senku. */
.panel .table-wrap {
  padding: 0;
  border-radius: var(--r-control);
  background: transparent;
  box-shadow: none;
}

/* Panel je uzak: celije smeju da prelome red i ne uvlace se dodatno,
   inace bi SERP tabela imala svoj horizontalni skrol. */
.panel .data-table th,
.panel .data-table td { white-space: normal; }

.panel .data-table th:first-child,
.panel .data-table td:first-child { padding-left: 0; }

.panel .data-table th:last-child,
.panel .data-table td:last-child { padding-right: 0; }

.panel .empty { padding: var(--s-5) var(--s-2); }
.panel .empty::before { width: 32px; height: 32px; }

/* ---------------------------------------------------------------
   Graf pozicije kroz vreme — inline SVG iz chart.js
   --------------------------------------------------------------- */

.chart { display: flex; flex-direction: column; gap: var(--s-3); }

/* Udubljena povrsina, ista kao ostala polja: graf je mesto gde se cita,
   ne kartica koja se podize. */
.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-control);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-inset);
}

.chart__gridline {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.chart__tick {
  fill: var(--text-faint);
  font-family: var(--font);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

/* Isprekidana linija odvaja traku "van opsega" od skale ranga — provera bez
   pozicije nije rang 101, samo je nema. */
.chart__lane-rule {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

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

.chart__dot {
  stroke: var(--surface-sunken);
  stroke-width: 1.5;
}

/* Tacka u traci "van opsega" je supljina, ne pun krug — provera postoji,
   pozicija ne. */
.chart__dot--off {
  fill: none;
  stroke-width: 1.4;
}

.chart__series.is-series-0 .chart__line { stroke: var(--series-0); }
.chart__series.is-series-1 .chart__line { stroke: var(--series-1); }
.chart__series.is-series-2 .chart__line { stroke: var(--series-2); }
.chart__series.is-series-3 .chart__line { stroke: var(--series-3); }

.chart__series.is-series-0 .chart__dot { fill: var(--series-0); }
.chart__series.is-series-1 .chart__dot { fill: var(--series-1); }
.chart__series.is-series-2 .chart__dot { fill: var(--series-2); }
.chart__series.is-series-3 .chart__dot { fill: var(--series-3); }

.chart__series.is-series-0 .chart__dot--off { stroke: var(--series-0); }
.chart__series.is-series-1 .chart__dot--off { stroke: var(--series-1); }
.chart__series.is-series-2 .chart__dot--off { stroke: var(--series-2); }
.chart__series.is-series-3 .chart__dot--off { stroke: var(--series-3); }

.chart__caption { font-size: var(--fs-xs); color: var(--text-faint); }

/* Legenda: jedna linija po pracenoj aplikaciji, poslednja pozicija desno. */
.chart__legend {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--fs-sm);
}

.chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.chart__legend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart__legend-value {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.chart__swatch {
  width: 10px;
  height: 3px;
  flex: none;
  border-radius: var(--r-pill);
}

.chart__swatch.is-series-0 { background: var(--series-0); }
.chart__swatch.is-series-1 { background: var(--series-1); }
.chart__swatch.is-series-2 { background: var(--series-2); }
.chart__swatch.is-series-3 { background: var(--series-3); }

/* ---------------------------------------------------------------
   Akcije nad kljucnom recju: tier prekidac i brisanje
   --------------------------------------------------------------- */

.panel__actions { display: flex; flex-direction: column; gap: var(--s-3); }

.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.action-row__label { font-size: var(--fs-sm); color: var(--text-muted); }

/* Dva stanja jedne stvari, pa dele jedno udubljeno lezisce. */
.tier-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-control);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-inset-sm);
}

.tier-switch__btn {
  min-width: 30px;
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: var(--r-field);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tier-switch__btn:hover:not(.is-active) { color: var(--accent-strong); }

.tier-switch__btn.is-active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
  cursor: default;
}

/* Spisak aplikacija ne staje pored svog naslova kao tier prekidac,
   pa taj red ide u kolonu. */
.action-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
}

.track-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2);
  border-radius: var(--r-field);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-inset-sm);
}

.track-list__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-field);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.track-list__item:hover { color: var(--text); }

.track-list__item input { accent-color: var(--accent); cursor: pointer; }

.track-list__item input:disabled { cursor: progress; }

.track-list__note { font-size: var(--fs-sm); color: var(--text-muted); }

/* Greska pri kacenju stoji nad akcijama, gde je i klik bio. */
.track-list__error { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------
   Aplikacije: forma za dodavanje

   Isti recept kao filter traka — izdignuta povrsina, udubljena polja —
   samo su kontrole tekstualne, pa nemaju chevron. Forma stoji u toku
   stranice ispod dugmeta, ne preko nje.
   --------------------------------------------------------------- */

.app-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.app-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  animation: screen-in var(--dur) var(--ease) both;
}

.app-form__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4);
}

.app-form__field { display: flex; flex-direction: column; gap: var(--s-2); }

/* Cekboks ide u svoj red: da poruka o gresci iznad njega ne pomera
   njegovu visinu u odnosu na polja pored. */
.app-form__field--check { flex-basis: 100%; }

.app-form__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.app-form__control {
  min-width: 260px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-field);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-inset-sm);
  font-size: var(--fs-md);
  transition: box-shadow var(--dur) var(--ease);
}

.app-form__control::placeholder { color: var(--text-faint); }

.app-form__control:hover { box-shadow: var(--shadow-inset); }

/* Prazno obavezno polje: tanka crvena linija uz udubljenje, plus recenica
   ispod. Boja nikad nije jedini nosilac poruke. */
.app-form__control[aria-invalid="true"] {
  box-shadow: var(--shadow-inset-sm), 0 0 0 1px var(--down);
}

.app-form__note { font-size: var(--fs-xs); color: var(--down); max-width: 40ch; }

.app-form__foot { display: flex; gap: var(--s-2); }

.app-form__status:empty { display: none; }

/* ---------------------------------------------------------------
   Aplikacije: kartice
   --------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-4);
}

/* Kartice su inace razvucene na istu visinu, da im se podnozja poravnaju.
   Dok stoji potvrda brisanja to bi razvuklo ceo red zbog jedne kartice, pa
   tada svaka pada na svoju visinu. */
.card-grid:has(.confirm) { align-items: start; }

.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.app-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lifted);
}

.app-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.app-card__name {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.app-card__package {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  word-break: break-all;
}

.app-card__foot {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.app-card__count {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.app-card__count-label { font-size: var(--fs-sm); color: var(--text-muted); }

/* Broj vodi na filtriranu tabelu — podvlaci se tek na hover, da podnozje
   kartice ostane mirno dok se samo cita. */
.app-card__count-link {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-field);
  transition: color var(--dur) var(--ease);
}

.app-card__count-link:hover { color: var(--accent-strong); }

.app-card__count-link:hover .app-card__count-label { color: inherit; }

/* Brisanje stoji desno u podnozju, a potvrda pada ispod cele kartice. */
.app-card__delete { margin-left: auto; }

.app-card .confirm { margin-top: var(--s-3); }

/* ---------------------------------------------------------------
   Uze od 1200px — alat je desktop, ali ne sme da se lomi
   --------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --sidebar-w: 200px; --panel-w: 320px; }
  .main { padding: var(--s-5) var(--s-5) var(--s-6); }
  .stat-row { gap: var(--s-3); }
  .stat-card { padding: var(--s-4); }
  .stat-card__value { font-size: var(--fs-2xl); }
}

@media (max-width: 1000px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .split:has(.panel:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
  .filters__actions { margin-left: 0; }
}

@media (max-width: 900px) {
  .sidebar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
  }
  .sidebar__brand { padding: 0; }
  .sidebar__nav { flex: 1; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav__link.is-active::before { display: none; }
  .sidebar__foot { padding: 0; }
  .main { margin-left: 0; padding: var(--s-4); }
}