/* DAMENO Aplikacija — stilovi
   Sve mjere su u rem (1rem = 16 px pri 100 %), pa se cijelo sučelje skalira
   iz veličine fonta na <html>, koju postavlja velicina.js. */

/* --- Font: Geomanist (Atipo, web licenca) --- */
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-thin-webfont.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-extralight-webfont.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-light-webfont.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-regular-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-book-webfont.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-medium-webfont.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-bold-webfont.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-black-webfont.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geomanist"; src: url("../fonts/geomanist-ultra-webfont.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* --- Tokeni (iz dameno-tokens.css i specifikacije) --- */
:root {
  --purple-400: #B471F4;
  --purple-500: #A04BF1;
  --purple-600: #8C25EF;

  --neutral-0: #FFFFFF;
  --neutral-100: #EDECEE;
  --neutral-200: #DBD9DD;
  --neutral-300: #B8B3BC;
  --neutral-400: #948D9A;
  --neutral-500: #736C7A;
  --neutral-600: #57515D;
  --neutral-700: #3D3842;
  --neutral-800: #28242B;
  --neutral-850: #1D1A20;
  --neutral-900: #161318;
  --neutral-950: #0E0C10;

  /* Funkcionalne boje: samo brisanje, greška i upozorenje */
  --danger-400: #EF6B73;
  --danger-600: #B3343F;
  --danger-rub: #5A2A30;
  --warning-300: #F2C27A;
  --warning-900: #3A2A12;

  --gradijent: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-900) 34%);

  --font: "Geomanist", "Segoe UI", system-ui, sans-serif;
  --r-sm: 0.375rem;   /* 6 px */
  --r-md: 0.625rem;   /* 10 px */
  --r-lg: 1rem;       /* 16 px */
  --prijelaz: 180ms ease-out;
}

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

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--neutral-950);
  color: var(--neutral-100);
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }

a { color: var(--purple-400); }

:focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px; }

.skriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ikona { width: 1rem; height: 1rem; flex-shrink: 0; }

/* --- Polja --- */
.polje-grupa { display: flex; flex-direction: column; min-width: 0; }

.oznaka {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-400);
}
.oznaka-dodatak { color: var(--neutral-500); }

.polje {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-sm);
  background: var(--neutral-950);
  color: var(--neutral-100);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--prijelaz);
}
.polje:focus { outline: none; border-color: var(--purple-500); }
.polje:disabled { background: var(--neutral-900); border-color: var(--neutral-800); color: var(--neutral-500); }
.polje.neispravno { border-color: var(--danger-400); }

/* --- Gumbi --- */
.gumb {
  height: 2.125rem;
  padding: 0 0.875rem;
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--prijelaz), color var(--prijelaz), border-color var(--prijelaz);
}
.gumb--primarni { background: var(--purple-600); color: var(--neutral-0); }
.gumb--primarni:hover { background: var(--purple-500); }
.gumb--sekundarni { border: 1px solid var(--neutral-700); background: var(--neutral-900); color: var(--neutral-200); }
.gumb--sekundarni:hover { background: var(--neutral-850); color: var(--neutral-100); }
.gumb--opasno { background: var(--danger-600); color: var(--neutral-0); }
.gumb:disabled,
.gumb:disabled:hover { border: none; background: var(--neutral-800); color: var(--neutral-500); cursor: not-allowed; }
.gumb--sirok { width: 100%; height: 2.375rem; margin-top: 0.25rem; }

.gumbi { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* --- Poruke --- */
.poruka { font-size: 0.875rem; color: var(--neutral-300); min-height: 1.3125rem; }
.poruka--greska { color: var(--danger-400); }
.poruka:empty { min-height: 0; }

/* --- Glavna traka --- */
body.aplikacija {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.traka {
  height: 3.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-800);
}
.traka-strana { flex: 1 1 0; display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.traka-strana--desno { justify-content: flex-end; }
.traka-strana form { display: contents; }
.traka-naslov { font-size: 1.125rem; font-weight: 500; white-space: nowrap; padding: 0 1rem; }

.traka-gumb {
  height: 2.125rem;
  padding: 0 0.875rem;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--neutral-400);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--prijelaz), color var(--prijelaz);
}
.traka-gumb--svijetli { color: var(--neutral-300); }
.traka-gumb:hover { background: var(--neutral-850); color: var(--neutral-100); }
.traka-gumb.aktivan { background: var(--neutral-800); color: var(--neutral-100); box-shadow: inset 0 -2px 0 var(--purple-500); }

/* --- Sadržaj ispod trake: vlastiti scroll --- */
.sadrzaj { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.prazno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--neutral-400);
  font-size: 0.875rem;
}
.prazno-naslov { font-size: 1.0625rem; font-weight: 500; color: var(--neutral-200); }

/* --- Okvir u stilu prozorčića: prijava, instalacija, poruke --- */
.prozor-okvir {
  background: var(--gradijent);
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-lg);
}

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

.prijava {
  width: 23.75rem;
  max-width: 100%;
  padding: 1.75rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.prijava-logo { display: flex; justify-content: center; }
.prijava-logo img { width: 13.75rem; height: auto; display: block; }

/* --- Prozorčići --- */
.prozor {
  width: 26.25rem;
  max-width: calc(100vw - 1.75rem);
  padding: 1.5rem;
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-lg);
  background: var(--gradijent);
  color: var(--neutral-100);
}
.prozor[open] { display: flex; flex-direction: column; gap: 0.875rem; }
.prozor::backdrop { background: rgba(14, 12, 16, 0.72); }
.prozor-zaglavlje { display: flex; flex-direction: column; gap: 0.125rem; }
.prozor-naslov { font-size: 1.1875rem; font-weight: 500; }
.prozor-tekst { font-size: 0.9375rem; line-height: 1.5; color: var(--neutral-200); overflow-wrap: anywhere; }
.prozor-tekst strong { font-weight: 500; color: var(--neutral-100); }

/* --- Postavke --- */
.postavke {
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.kartica {
  width: 45rem;
  max-width: 100%;
  padding: 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--gradijent);
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-md);
}
.kartica-naslov { font-size: 1.125rem; font-weight: 500; }
.kartica-podnozje { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }

.mreza-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.mreza-2 .puna { grid-column: span 2; }

.odjeljak { display: flex; flex-direction: column; gap: 0.5rem; }
.odjeljak--uzak { gap: 0.375rem; }
.podnaslov { font-size: 0.9375rem; font-weight: 500; }
.opis { font-size: 0.875rem; line-height: 1.5; color: var(--neutral-300); }
.tekst { font-size: 0.9375rem; line-height: 1.5; color: var(--neutral-200); }
.priguseno { font-size: 0.875rem; color: var(--neutral-400); }
.crta { height: 1px; background: var(--neutral-800); }

.red-razmaknut { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.red-datoteka { display: flex; align-items: center; gap: 0.75rem; }

.datoteka-naziv {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--neutral-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.datoteka-naziv.odabrano { color: var(--neutral-100); }

.segmenti {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.1875rem;
  background: var(--neutral-950);
  border: 1px solid var(--neutral-800);
  border-radius: var(--r-md);
}
.segment {
  height: 2.125rem;
  padding: 0 0.875rem;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--neutral-400);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--prijelaz), color var(--prijelaz);
}
.segment:hover { color: var(--neutral-100); }
.segment[aria-pressed="true"] { background: var(--neutral-700); color: var(--neutral-100); }

/* =====================================================================
   Faza 2: Odrađeni posao
   ===================================================================== */

.iznos { font-variant-numeric: tabular-nums; }

mark { background: rgba(160, 75, 241, 0.32); color: inherit; border-radius: 2px; }

.oznaka-grupe {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.razmak { flex: 1 1 auto; }

/* --- Mali gumbi (Uredi, Arhiviraj, + Dodaj stavku…) --- */
.mali-gumb {
  height: 1.75rem;
  padding: 0 0.625rem;
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-sm);
  background: var(--neutral-850);
  color: var(--neutral-200);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--prijelaz), color var(--prijelaz), border-color var(--prijelaz);
}
.mali-gumb:hover { background: var(--neutral-800); color: var(--neutral-100); }
.mali-gumb:disabled { opacity: 0.35; cursor: not-allowed; }
.mali-gumb:disabled:hover { background: var(--neutral-850); color: var(--neutral-200); }
.mali-gumb--kvadrat { width: 1.75rem; padding: 0; }
.mali-gumb--napomena,
.mali-gumb--napomena:hover { font-size: 0.9375rem; color: var(--purple-400); }
.mali-gumb--crveni,
.mali-gumb--crveni:hover { color: var(--danger-400); }
.mali-gumb--brisanje { color: var(--danger-400); border-color: var(--danger-rub); }
.mali-gumb--brisanje:hover { color: var(--danger-400); background: var(--neutral-850); border-color: var(--danger-400); }
.mali-gumb--dodaj { border: 1px dashed var(--purple-500); color: var(--purple-400); }
.mali-gumb--dodaj:hover { color: var(--purple-400); background: var(--neutral-850); }
.mali-gumb--plus { width: 2.25rem; font-size: 1.0625rem; }

.gumb--neutralni { border: 1px solid var(--neutral-700); background: var(--neutral-850); color: var(--neutral-200); }
.gumb--neutralni:hover { background: var(--neutral-800); color: var(--neutral-100); }
.gumb[aria-disabled="true"],
.gumb[aria-disabled="true"]:hover { background: var(--neutral-850); color: var(--neutral-500); cursor: not-allowed; }

/* Crveni „−" za brisanje stavke ili reda */
.brisi-gumb {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: 1px solid var(--danger-rub);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--danger-400);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--prijelaz);
}
.brisi-gumb:hover { border-color: var(--danger-400); }

/* --- Dva stupca --- */
.stupci {
  --lijevi: 30%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.stupci.povlacenje { cursor: col-resize; user-select: none; }

.stupac { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.stupac--lijevi { flex: 0 0 var(--lijevi); min-width: 17.5rem; }
.stupac--desni { flex: 1 1 0; min-width: 30rem; }

.stupac-traka {
  height: 4.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1rem;
  background: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-800);
}
.stupac-traka--desna { padding: 0 1.25rem; }

.stupac-sadrzaj {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.875rem 0.75rem 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.stupac-sadrzaj--desni { padding: 1.125rem 1rem 1.125rem 1.25rem; gap: 1rem; }

.razdjelnik {
  width: 0.5rem;
  flex-shrink: 0;
  background: var(--neutral-800);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.razdjelnik span { width: 2px; height: 2.5rem; border-radius: 1px; background: var(--neutral-600); }
.razdjelnik:hover span,
.povlacenje .razdjelnik span { background: var(--purple-400); }

.prazno-stanje {
  margin: auto;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--neutral-400);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* --- Pretraga s brojačem i gumbom × --- */
.pretraga { position: relative; display: flex; align-items: center; }
.pretraga--rastegnuta { flex: 1 1 auto; min-width: 0; }
.pretraga--blokovi { width: 18.75rem; flex-shrink: 1; min-width: 10rem; }
.pretraga .polje { padding-right: 2.25rem; }
.pretraga .polje::-webkit-search-cancel-button { display: none; }
.pretraga-brojac {
  position: absolute;
  right: 2.25rem;
  font-size: 0.75rem;
  color: var(--neutral-400);
  pointer-events: none;
  white-space: nowrap;
}
.pretraga-ocisti {
  position: absolute;
  right: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--neutral-400);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.pretraga-ocisti:hover { color: var(--neutral-100); background: var(--neutral-850); }
.pretraga-ocisti[hidden] { display: none; }

.segmenti--tabovi { border: none; align-self: center; border-radius: 0.5rem; }
.segment[aria-selected="true"] { background: var(--neutral-700); color: var(--neutral-100); }

/* --- Kartice klijenata --- */
.stupac-sadrzaj > .oznaka-grupe:not(:first-child) { margin-top: 0.5rem; }

.kartica-klijenta {
  padding: 0.75rem 1rem;
  border: 1px solid var(--neutral-800);
  border-radius: var(--r-md);
  background: var(--neutral-900);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--prijelaz);
}
.kartica-klijenta--aktivna { background: var(--gradijent); border-color: var(--neutral-700); }
.kartica-klijenta--arhivirana { opacity: 0.5; border: 1px dashed var(--neutral-700); }
.kartica-klijenta:hover { border-color: var(--neutral-600); }
.kartica-klijenta.odabrana { border: 2px solid var(--purple-500); padding: calc(0.75rem - 1px) calc(1rem - 1px); }
.kartica-klijenta--arhivirana.odabrana { opacity: 0.7; }

.kartica-vrh { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kartica-ime-red { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.tocka-aktivnog { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--purple-500); flex-shrink: 0; }
.kartica-ime { font-size: 1rem; font-weight: 500; color: var(--neutral-200); overflow-wrap: anywhere; }
.kartica-klijenta--aktivna .kartica-ime { color: var(--neutral-100); }
.oznaka-bez-blokova { font-size: 0.75rem; font-weight: 500; color: var(--neutral-400); white-space: nowrap; }
.kartica-naziv { font-size: 0.875rem; color: var(--neutral-400); overflow-wrap: anywhere; }
.kartica-klijenta--aktivna .kartica-naziv { color: var(--neutral-300); }
.kartica-dno { display: flex; justify-content: space-between; align-items: center; gap: 0.375rem; margin-top: 0.375rem; }
.kartica-akcije { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }

/* --- Prozorčići: široki prozor, podnaslov --- */
.prozor--sirok { width: 48.75rem; }
.prozor-podnaslov { font-size: 0.875rem; color: var(--neutral-400); }
.prozor-tekst--napomena { white-space: pre-wrap; }
.kvacica-naplaceno.prozor-kvacica { align-self: flex-start; font-weight: 400; font-size: 0.9375rem; }

.obrazac-klijenta { display: flex; flex-direction: column; gap: 1rem; }
.mreza-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.raspon-1 { grid-column: span 1; }
.raspon-2 { grid-column: span 2; }
.raspon-3 { grid-column: span 3; }
.raspon-4 { grid-column: span 4; }
.raspon-6 { grid-column: span 6; }
.crta--jaka { background: var(--neutral-700); }
.polje--visetredno { height: 4.5rem; padding: 0.5rem 0.625rem; resize: vertical; line-height: 1.5; }
.polje--izbornik {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.875rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--neutral-400) 50%), linear-gradient(135deg, var(--neutral-400) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - 0.6875rem) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.polje--izbornik:disabled { opacity: 1; }

/* --- Blokovi --- */
.blok {
  padding: 1rem 1.125rem;
  border: 1px solid var(--neutral-800);
  border-radius: var(--r-md);
  background: var(--neutral-900);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}
.blok--otvoren { background: var(--gradijent); border-color: var(--purple-500); }

.blok-zaglavlje { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.blok-zaglavlje--desno { justify-content: flex-end; }
.blok-zaglavlje-lijevo,
.blok-zaglavlje-desno { display: flex; align-items: center; gap: 0.5rem; }
.blok-zaglavlje-desno { gap: 0.875rem; }
.blok-zaglavlje-desno .mali-gumb--brisanje { margin-right: -0.375rem; }
.blok-datumi { font-size: 0.875rem; color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.blok-datumi--blijedi { color: var(--neutral-500); }
.datum-zavrsetka { font-weight: 500; color: var(--purple-400); }

.spremljeno { font-size: 0.75rem; color: var(--neutral-400); opacity: 0; transition: opacity var(--prijelaz); }
.spremljeno.vidljivo { opacity: 1; }
.spremljeno--greska { color: var(--danger-400); }

/* Stupci stavki: opis | iznos · količina (160 px) | stavka (100 px) | „−" (28 px) */
.stavke-naslovi,
.stavka,
.stavka-red { display: flex; align-items: center; gap: 0.75rem; }
.stavke-naslovi { font-size: 0.75rem; font-weight: 500; color: var(--neutral-400); padding: 0 0.125rem; }
.stupac-opis { flex: 1 1 auto; min-width: 0; }
.stupac-iznos-kolicina { width: 10rem; flex-shrink: 0; }
.stupac-stavka { width: 6.25rem; flex-shrink: 0; text-align: right; }
.stupac-brisi { width: 1.75rem; flex-shrink: 0; }

.stavke { display: flex; flex-direction: column; gap: 0.5rem; }
.stavka-opis { flex: 1 1 auto; min-width: 0; }
.stavka-iznos { width: 6.25rem; flex-shrink: 0; text-align: right; font-size: 0.875rem; color: var(--neutral-300); }
.polje.pogodak { border-color: var(--purple-400); }

/* Polje iznosa s fiksnim „€" i količinom iza okomite crte */
.polje-iznos {
  height: 2.25rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-sm);
  background: var(--neutral-950);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--prijelaz);
}
.polje-iznos:focus-within { border-color: var(--purple-500); }
.polje-iznos.neispravno { border-color: var(--danger-400); }
.polje-iznos.iskljuceno { background: var(--neutral-900); border-color: var(--neutral-800); }
.polje-iznos--stavka { width: 10rem; }
.polje-iznos--usluga { width: 5.625rem; }
.polje-iznos input {
  height: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--neutral-100);
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.polje-iznos input:disabled { color: var(--neutral-500); }
.polje-iznos input[readonly] { cursor: default; }
.polje-iznos .iznos-unos { flex: 1 1 auto; width: 3rem; text-align: right; padding-left: 0.5rem; }
.polje-iznos .kolicina-unos { width: 2.75rem; flex-shrink: 0; padding-left: 0.25rem; }
.znak-eur { user-select: none; pointer-events: none; font-size: 0.875rem; color: var(--neutral-400); padding: 0 0.625rem 0 0.25rem; }
.znak-puta { user-select: none; pointer-events: none; font-size: 0.8125rem; color: var(--neutral-500); padding-left: 0.5rem; }
.polje-iznos-crta { width: 1px; height: 1.375rem; background: var(--neutral-700); flex-shrink: 0; }

.blok-podnozje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--neutral-800);
  padding-top: 0.625rem;
}
.blok-podnozje--bez-crte { border-top: none; padding-top: 0; }
.kvacica-naplaceno { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--neutral-200); cursor: pointer; }
input[type="checkbox"] { accent-color: var(--purple-500); width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; cursor: pointer; }
input[type="checkbox"]:disabled { cursor: default; }
.ukupno { display: flex; align-items: baseline; gap: 0.625rem; }
.iznos--ukupno { font-size: 1.5625rem; font-weight: 500; color: var(--neutral-100); }
.iznos--zavrseno { font-size: 1.4375rem; color: var(--neutral-200); }

/* Završen blok: stavke kao popis */
.stavke-popis { display: flex; flex-direction: column; gap: 0.375rem; }
.stavka-red { font-size: 0.9375rem; color: var(--neutral-200); padding: 0.375rem 0; border-bottom: 1px solid var(--neutral-800); }
.stavka-red .stupac-iznos-kolicina { font-size: 0.875rem; color: var(--neutral-400); }
.stavka-red .stupac-stavka { font-size: 0.875rem; }

/* --- Blok usluga --- */
.blok-usluga { padding: 0.875rem 1.125rem 1rem; gap: 0.375rem; }
.usluge-mreza { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); border-bottom: 1px solid var(--neutral-800); }
.usluge-odrzavanje { padding: 0.5rem 1.25rem 0.875rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.usluge-desno { padding: 0.5rem 0 0.875rem 1.25rem; border-left: 1px solid var(--neutral-800); display: flex; flex-direction: column; gap: 0.5rem; }
.usluge-naslov { font-size: 0.9375rem; font-weight: 500; }
.odrzavanje-popis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.875rem, 1fr)); column-gap: 1.25rem; }
.odrzavanje-stavka { display: flex; align-items: center; gap: 0.5rem; height: 1.875rem; font-size: 0.875rem; color: var(--neutral-400); cursor: pointer; }
.odrzavanje-stavka.oznaceno { color: var(--neutral-100); }
.blok--zavrsen .odrzavanje-stavka { cursor: default; }
.blok--zavrsen .odrzavanje-stavka.oznaceno { color: var(--neutral-300); }
.odrzavanje-naziv { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odrzavanje-iznos { color: var(--neutral-400); }
.usluge-iznos { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--neutral-800); display: flex; justify-content: space-between; align-items: baseline; }
.iznos--grupa { font-size: 1rem; font-weight: 500; color: var(--neutral-100); }
.blok--zavrsen .iznos--grupa,
.blok--zavrsen .iznos--ukupno { color: var(--neutral-200); }
.usluge-redovi { display: flex; flex-direction: column; gap: 0.5rem; }
.usluga-red { display: flex; align-items: center; gap: 0.5rem; }
.usluga-naziv { flex: 1 1 auto; min-width: 0; }
.crta--razmak { margin: 0.375rem 0; }

.blok-usluga-podnozje { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-top: 0.5rem; flex-wrap: wrap; }
.datumi-usluge { display: flex; gap: 1.5rem; align-items: flex-end; }
.datum-obnove-grupa { padding-bottom: 0.5rem; }
.datum-obnove { font-size: 1rem; color: var(--neutral-100); font-variant-numeric: tabular-nums; }
.blok--zavrsen .datum-obnove { color: var(--neutral-200); }

.polje-datum {
  width: 10.625rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--purple-500);
  border-radius: var(--r-sm);
  background: var(--neutral-950);
  overflow: hidden;
}
.polje-datum.iskljuceno { background: var(--neutral-900); border-color: var(--neutral-800); }
.polje-datum.neispravno { border-color: var(--danger-400); }
.datum-unos {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--neutral-100);
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  padding: 0 0 0 0.625rem;
}
.datum-unos:disabled { color: var(--neutral-500); }
.datum-gumb {
  height: 100%;
  padding: 0 0.625rem;
  border: none;
  background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.datum-gumb:hover:not(:disabled) { color: var(--neutral-100); }
.datum-gumb:disabled { cursor: default; }

/* Olovka lijevo od datuma bloka i prozorčić „Uredi datume" */
.blok-zaglavlje-desno .mali-gumb--olovka { margin-right: -0.375rem; color: var(--neutral-300); }
.uredi-datume { display: flex; flex-direction: column; gap: 0.5rem; }
.uredi-datume-polja { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* Prozorčić „Blok usluga nije spremljen" */
.popis-nedostaje { margin-top: 0.5rem; }
.nedostaje-red { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0; border-top: 1px solid var(--neutral-800); }
.nedostaje-znak {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  border: 1px solid var(--danger-400);
  color: var(--danger-400);
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Kalendar --- */
.kalendar {
  position: fixed;
  z-index: 20;
  width: 20rem;
  padding: 1rem;
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-lg);
  background: var(--gradijent), var(--neutral-900);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.kalendar-zaglavlje { display: flex; align-items: center; justify-content: space-between; }
.kalendar-mjesec { font-size: 1rem; font-weight: 500; }
.kalendar-mreza { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kalendar-dan-naziv { font-size: 0.75rem; color: var(--neutral-500); text-align: center; padding-bottom: 0.25rem; }
.kalendar-dan {
  height: 2.125rem;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--neutral-200);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.kalendar-dan:hover { background: var(--neutral-800); }
.kalendar-dan.danas { outline: 1px solid var(--neutral-600); outline-offset: -1px; }
.kalendar-dan.odabran { background: var(--purple-600); color: var(--neutral-0); }
.kalendar-podnozje { display: flex; justify-content: space-between; }

/* --- Traka za poništavanje --- */
.tost {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-md);
  background: var(--neutral-850);
  font-size: 0.875rem;
  color: var(--neutral-200);
}
.tost-gumb {
  border: none;
  background: transparent;
  color: var(--purple-400);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
}
.tost-gumb:hover { background: var(--neutral-800); }

/* =====================================================================
   Faza 3: Cjenik usluga
   ===================================================================== */

/* Dva stupca po 50 %, sadržaj najviše oko 1600 px, centriran */
.stupci--cjenik { width: 100%; max-width: 100rem; margin: 0 auto; }
.stupac--pola { flex: 1 1 0; }
.razdjelnik--nepomican { cursor: default; }

.blok-cjenika { padding: 0.875rem 1.125rem 1rem; }
.blok-cjenika-naslov { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex-wrap: wrap; }
.naslov-bloka { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; }
.naslov-unos { width: 16.25rem; max-width: 100%; font-size: 1rem; font-weight: 500; }
.oznaka-povezan {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-400);
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-md);
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}
.blok-zaglavlje-desno--usko { gap: 0.5rem; }
.blok-zaglavlje-desno--usko .mali-gumb--brisanje { margin-right: 0; }
.mali-gumb--brisanje:disabled,
.mali-gumb--brisanje:disabled:hover { color: var(--neutral-200); border-color: var(--neutral-700); }

.stavke-cjenika { display: flex; flex-direction: column; gap: 0.5rem; }
.stavka-cjenika { display: flex; align-items: center; gap: 0.5rem; }
.stavka-cjenika.povlaci { opacity: 0.6; }
.polje-iznos--cjenik { width: 8.125rem; }
.rucka {
  width: 1.25rem;
  flex-shrink: 0;
  color: var(--neutral-600);
  font-size: 0.9375rem;
  letter-spacing: -2px;
  text-align: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.rucka:hover { color: var(--neutral-300); }
.povlaci .rucka { cursor: grabbing; }
.dodaj-stavku-cjenika { padding-left: 1.75rem; }

/* =====================================================================
   Faza 4: Evidencija naplate
   ===================================================================== */

/* Pulsirajuća točka (10 px), polagan ritam */
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
.puls {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: puls 2.8s ease-in-out infinite;
}
.puls--uskoro { color: var(--warning-300); }
.puls--hitno { color: var(--danger-400); }
@media (prefers-reduced-motion: reduce) { .puls { animation: none; } }

.kartica-oznake { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.evidencija { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.evidencija-sadrzaj { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.125rem 1rem 1.125rem 1.25rem; }
.evidencija-popis { max-width: 100rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.875rem; }
.evidencija-napomena { font-size: 0.8125rem; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Filteri: kvačice u bojama stanja */
.filteri {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--neutral-800);
  flex-shrink: 0;
}
.filteri-crta { width: 1px; height: 1.25rem; background: var(--neutral-800); }
.filter { position: relative; display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--neutral-200); cursor: pointer; white-space: nowrap; }
.filter input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.filter input:checked { background: currentColor; }
.filter-znak { position: absolute; left: 3px; top: 50%; margin-top: -5px; pointer-events: none; display: none; }
.filter input:checked + .filter-znak { display: block; }
.filter--uredno input { color: var(--neutral-100); }
.filter--uskoro input { color: var(--warning-300); }
.filter--hitno input { color: var(--danger-400); }
.filter--naplaceno { color: var(--neutral-400); }
.filter--naplaceno input { color: var(--purple-400); }

/* Blok evidencije: 5 stupaca 22 · 15 · 25 · 18 · 20 % */
.evidencija-blok {
  display: grid;
  grid-template-columns: 22% 15% 25% 18% 20%;
  background: var(--gradijent);
  border: 1px solid var(--neutral-700);
  border-radius: var(--r-md);
  flex-shrink: 0;
  transition: opacity var(--prijelaz);
}
.evidencija-blok--uskoro { border-color: var(--warning-300); }
.evidencija-blok--hitno { border-color: var(--danger-400); }
.evidencija-blok--naplaceno { opacity: 0.5; }
.evidencija-blok.nestaje { opacity: 0; transition: opacity 2.5s ease-out; }

.evidencija-stupac { padding: 0.875rem 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.evidencija-stupac + .evidencija-stupac { border-left: 1px solid var(--neutral-800); }
.evidencija-ime { font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.evidencija-subjekt { font-size: 0.875rem; color: var(--neutral-300); overflow-wrap: anywhere; }
.evidencija-kvacica { margin-top: auto; }
.evidencija-stavka { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; color: var(--neutral-200); }
.evidencija-naziv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.evidencija-iznos { color: var(--neutral-400); flex-shrink: 0; }
.mali-gumb--vise { align-self: flex-start; height: 1.5rem; border-style: dashed; color: var(--purple-400); }
.mali-gumb--vise:hover { color: var(--purple-400); }
.evidencija-zbroj {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--neutral-800);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.evidencija-naplata-vrh { display: flex; justify-content: space-between; align-items: center; min-height: 0.875rem; }
.evidencija-red { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; }
.evidencija-red--dana { align-items: baseline; }
.priguseno-tekst { color: var(--neutral-400); }
.evidencija-nenaplaceno { color: var(--danger-400); }
.evidencija-dana { font-size: 1.4375rem; font-weight: 500; }
.evidencija-dana--uredno { color: var(--neutral-100); }
.evidencija-dana--uskoro { color: var(--warning-300); }
.evidencija-dana--hitno { color: var(--danger-400); }
.evidencija-ukupno { font-size: 1.3125rem; font-weight: 500; }

/* =====================================================================
   Faza 5: mobilni prikaz i veliki ekrani
   ===================================================================== */

/* Elementi samo za jedan prikaz */
@media (min-width: 768px) {
  .samo-mobitel { display: none !important; }
}
.traka-razdvajac { display: none; }
.segmenti--puni { display: flex; align-self: stretch; }
.segmenti--puni .segment { flex: 1 1 0; }

/* Veliki ekrani: dva stupca Odrađenog posla rastu do razumne granice, ostatak je pozadina */
#odradeno { width: 100%; max-width: 112.5rem; margin: 0 auto; }

/* Mobitel: ispod 768 px. Nema unutarnjih scrollova, pomiče se cijela stranica;
   glavna traka ostaje pričvršćena na vrhu. */
@media (max-width: 767px) {
  .samo-racunalo { display: none !important; }

  body.aplikacija { display: block; height: auto; min-height: 100vh; overflow: visible; }
  .sadrzaj,
  .stupac-sadrzaj,
  .evidencija-sadrzaj { overflow: visible; }

  /* --- Glavna traka: pet gumba jednake širine, ikona i ime ispod --- */
  .traka {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 3.75rem;
    padding: 0.375rem;
    gap: 0.125rem;
  }
  .traka-strana,
  .traka-strana--desno { display: contents; }
  .traka-naslov { display: none; }
  .traka-gumb {
    flex: 1 1 0;
    min-width: 0;
    height: 3rem;
    padding: 0;
    border-radius: 0.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.1875rem;
    font-size: 0.6875rem;
  }
  .traka-gumb .ikona { width: 1.25rem; height: 1.25rem; }
  .traka-razdvajac { display: block; width: 1px; height: 1.75rem; background: var(--neutral-800); align-self: center; flex-shrink: 0; }

  .mobilni-naslov { display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.5rem 0.875rem; }
  .mobilni-naslov-tekst { flex: 1 1 auto; min-width: 0; font-size: 1.125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* --- Stupci postaju jedan ispod drugog --- */
  .stupci { display: block; }
  .stupac { min-width: 0; }
  .razdjelnik { display: none; }
  .stupac-traka { height: auto; padding: 0 0.875rem 0.625rem; background: transparent; border: none; }
  .stupac-sadrzaj,
  .stupac-sadrzaj--desni { padding: 0.25rem 0.875rem 1rem; gap: 0.625rem; }

  /* --- Odrađeni posao u dva koraka: popis klijenata, zatim klijent --- */
  #odradeno .stupac--desni { display: none; }
  body.klijent-otvoren .mobilni-naslov { display: none; }
  body.klijent-otvoren #odradeno .stupac--lijevi { display: none; }
  body.klijent-otvoren #odradeno .stupac--desni { display: flex; }

  .mobilni-klijent { display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.5rem 0.875rem; }
  .mali-gumb--natrag { width: 2rem; height: 2rem; padding: 0; font-size: 1.1875rem; }
  .mobilni-klijent-tekst { flex: 1 1 auto; min-width: 0; }
  .mobilni-klijent-ime { font-size: 1.125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobilni-klijent-naziv { font-size: 0.8125rem; color: var(--neutral-400); }
  .mobilni-klijent-naziv:empty { display: none; }

  /* Prekidač Posao / Usluge preko cijele širine, ispod njega Kreiraj i pretraga */
  .stupac-traka--desna { flex-wrap: wrap; gap: 0.5rem; }
  .stupac-traka--desna .segmenti--tabovi {
    order: -1;
    width: 100%;
    background: var(--neutral-900);
    border: 1px solid var(--neutral-800);
  }
  .segmenti--tabovi .segment { flex: 1 1 0; }
  .stupac-traka--desna .razmak { display: none; }
  .pretraga--blokovi { flex: 1 1 0; width: auto; min-width: 0; }

  /* Blok posla */
  .blok { padding: 0.75rem; gap: 0.625rem; }
  .blok-posla .blok-zaglavlje { flex-direction: column; align-items: stretch; gap: 0.625rem; }
  .blok-posla .blok-zaglavlje-desno { order: -1; gap: 0.5rem; }
  .blok-posla .blok-zaglavlje-lijevo { justify-content: flex-start; }
  .blok-datumi { font-size: 0.8125rem; margin-right: auto; }
  .mali-gumb--brisanje { width: 2.125rem; height: 2.125rem; padding: 0; }
  .blok-zaglavlje-desno .mali-gumb--brisanje { margin-right: 0; }
  .stavke-naslovi { display: none; }
  .stavke { gap: 0.625rem; }
  .stavka { flex-wrap: wrap; gap: 0.375rem 0.5rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--neutral-800); }
  .stavka-opis { flex-basis: 100%; }
  .polje-iznos--stavka { flex: 1 1 auto; width: auto; }
  .stavka-iznos { width: 4.75rem; }
  .blok--otvoren .blok-podnozje { border-top: none; padding-top: 0; }
  .iznos--ukupno { font-size: 1.4375rem; }
  .stavka-red { justify-content: space-between; font-size: 0.875rem; padding: 0.25rem 0; }
  .stavka-umnozak { flex-shrink: 0; }

  /* Blok usluga u jednom stupcu: Hosting, Domene, Održavanje */
  .blok-usluga { gap: 0.5rem; }
  .usluge-mreza { display: flex; flex-direction: column; border-bottom: none; }
  .usluge-desno { order: -1; padding: 0; border-left: none; }
  .usluge-odrzavanje { padding: 0.5rem 0 0; margin-top: 0.25rem; border-top: 1px solid var(--neutral-800); }
  .odrzavanje-popis { grid-template-columns: 1fr; }
  .odrzavanje-stavka { height: 2.125rem; gap: 0.625rem; font-size: 0.9375rem; }
  .usluge-iznos { margin-top: 0; padding: 0.5rem 0; }
  .blok-usluga-podnozje { flex-direction: column; align-items: stretch; gap: 0.5rem; border-top: 1px solid var(--neutral-800); }
  .datumi-usluge { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
  .polje-datum { width: 100%; }
  .blok-usluga-podnozje .ukupno { justify-content: flex-end; }

  /* --- Cjenik: prekidač Funkcionalni / Obični umjesto dva stupca --- */
  .mobilni-prekidac { padding: 0 0.875rem 0.625rem; }
  .mobilni-prekidac .segmenti { background: var(--neutral-900); border-color: var(--neutral-800); }
  .stupci--cjenik .stupac-traka { display: none; }
  .stupci--cjenik.mob-lijevi .stupac-cjenik--desni,
  .stupci--cjenik.mob-desni .stupac-cjenik--lijevi { display: none; }
  .blok-cjenika { padding: 0.75rem; gap: 0.5rem; }
  .blok-cjenika .blok-zaglavlje { flex-wrap: nowrap; gap: 0.5rem; }
  .blok-cjenika-naslov { flex: 1 1 auto; }
  .naslov-unos { width: 100%; }
  .oznaka-povezan { display: none; }
  .stavka-cjenika { gap: 0.375rem; }
  .polje-iznos--cjenik { width: 6rem; }
  .dodaj-stavku-cjenika { padding-left: 1.625rem; }
  .stavke-cjenika-popis { display: flex; flex-direction: column; }
  .stavka-cjenika-red {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--neutral-800);
    font-size: 0.9375rem;
    color: var(--neutral-300);
  }

  /* --- Evidencija: pretraga preko cijele širine, filteri kao okrugli gumbi --- */
  .evidencija { display: block; }
  .evidencija-traka { padding: 0 0.875rem 0.5rem; }
  #pretraga-evidencije { flex: 1 1 auto; width: 100%; }
  .filteri-mobitel {
    display: flex;
    gap: 0.375rem;
    padding: 0.125rem 0.875rem 0.625rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filteri-mobitel::-webkit-scrollbar { display: none; }
  .filter-gumb {
    flex-shrink: 0;
    height: 1.875rem;
    padding: 0 0.75rem;
    border: 1px solid var(--neutral-700);
    border-radius: 0.9375rem;
    background: transparent;
    color: var(--neutral-400);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
  }
  .filter-gumb--uredno.ukljucen { background: var(--neutral-100); border-color: var(--neutral-100); color: var(--neutral-950); }
  .filter-gumb--uskoro.ukljucen { background: var(--warning-300); border-color: var(--warning-300); color: var(--neutral-950); }
  .filter-gumb--hitno.ukljucen { background: var(--danger-400); border-color: var(--danger-400); color: var(--neutral-950); }
  .filter-gumb--naplaceno.ukljucen { background: var(--purple-400); border-color: var(--purple-400); color: var(--neutral-950); }

  .evidencija-sadrzaj { padding: 0.25rem 0.875rem 1rem; }
  .evidencija-popis { gap: 0.625rem; }
  .evidencija-blok-mob {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: var(--gradijent);
    border: 1px solid var(--neutral-700);
    border-radius: var(--r-md);
    transition: opacity var(--prijelaz);
  }
  .mob-vrh { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
  .mob-klijent { min-width: 0; }
  .mob-subjekt { font-size: 0.8125rem; color: var(--neutral-300); }
  .mob-naplata { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.5rem; }
  .mob-datumi { display: flex; flex-direction: column; gap: 0.125rem; }
  .mob-datum { font-size: 0.8125rem; color: var(--neutral-400); }
  .mob-datum.evidencija-nenaplaceno { color: var(--danger-400); }
  .mob-dana { text-align: right; }
  .mob-dana-oznaka { font-size: 0.75rem; color: var(--neutral-400); }
  .mob-dana-broj { font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
  .mob-grupa { display: flex; flex-direction: column; padding: 0.5rem 0 0.25rem; border-top: 1px solid var(--neutral-800); }
  .mob-grupa-vrh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; }
  .mob-grupa-zbroj { font-size: 0.9375rem; font-weight: 500; }
  .mob-stavka { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.1875rem 0; font-size: 0.875rem; color: var(--neutral-200); }
  .mali-gumb--vise.mob-prosiri { width: 100%; height: 2rem; align-self: stretch; }
  .mob-dno { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--neutral-800); }

  /* --- Postavke i prijava: jedan stupac, rub 14 px --- */
  .postavke { padding: 0.25rem 0.875rem 1.25rem; }
  .mreza-2 { grid-template-columns: 1fr; }
  .mreza-2 .puna { grid-column: auto; }
  .red-datoteka { flex-wrap: wrap; }
  .datoteka-naziv { flex-basis: 100%; }
  .kartica-podnozje { flex-direction: column; align-items: stretch; }

  /* --- Prozorčići --- */
  .prozor { padding: 1.125rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .mreza-6 { grid-template-columns: 1fr; }
  .mreza-6 > * { grid-column: auto; }
  .mreza-6 > div:empty { display: none; }
}