/* ============================================================
   CalcGor 2.0 — dizajn sustav
   ============================================================ */

:root {
  color-scheme: light;

  --p-50:#eef3ff; --p-100:#dbe5ff; --p-200:#bccfff; --p-300:#93b0ff;
  --p-400:#688cff; --p-500:#4f7cff; --p-600:#3a5fe0; --p-700:#2f4bb8;

  --pozadina:#f4f6fb;
  --pozadina-2:#eaeef7;
  --ploha:#ffffff;
  --ploha-2:#f8fafc;
  --ploha-3:#f1f5f9;
  --rub:#e3e8f0;
  --rub-jaci:#cfd7e6;

  --tekst:#0d1526;
  --tekst-2:#4a5670;
  --tekst-3:#7b869e;

  --uspjeh:#0ea472; --uspjeh-tinta:#e6f8f1;
  --opasnost:#e0384b; --opasnost-tinta:#fdecee;
  --upozorenje:#d97706; --upozorenje-tinta:#fef3e2;
  --info:#2563eb; --info-tinta:#e8f0fe;

  --sjena-1:0 1px 1px rgba(13,21,38,.04), 0 2px 4px rgba(13,21,38,.04), 0 0 0 1px rgba(13,21,38,.02);
  --sjena-2:0 1px 2px rgba(13,21,38,.05), 0 4px 10px rgba(13,21,38,.06), 0 10px 24px rgba(13,21,38,.05);
  --sjena-3:0 2px 4px rgba(13,21,38,.06), 0 12px 28px rgba(13,21,38,.12), 0 28px 60px rgba(13,21,38,.12);
  --rub-svjetlo:inset 0 1px 0 rgba(255,255,255,.7);

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --traka-v:64px;
  --prijelaz:180ms cubic-bezier(.4,0,.2,1);
}

html[data-tema="dark"], html[data-tema="auto"] {
  /* nadjačano medijskim upitom niže */
}

@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] { color-scheme: dark; }
  html[data-tema="auto"] {
    --pozadina:#080d18; --pozadina-2:#0d1424;
    --ploha:#111a2c; --ploha-2:#16203584; --ploha-3:#1b2740;
    --rub:#24304a; --rub-jaci:#34425f;
    --tekst:#eaf0fb; --tekst-2:#a4b1c9; --tekst-3:#7787a3;
    --uspjeh:#2ee0a5; --uspjeh-tinta:#0c3327;
    --opasnost:#ff6b7d; --opasnost-tinta:#3a1620;
    --upozorenje:#fbbf24; --upozorenje-tinta:#3a2a0c;
    --info:#7aa2ff; --info-tinta:#16233f;
    --p-500:#6b93ff; --p-600:#5a80f0;
    --sjena-1:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
    --sjena-2:0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
    --sjena-3:0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55);
    --rub-svjetlo:inset 0 1px 0 rgba(255,255,255,.05);
  }
}

html[data-tema="dark"] {
  color-scheme: dark;
  --pozadina:#080d18; --pozadina-2:#0d1424;
  --ploha:#111a2c; --ploha-2:#16203584; --ploha-3:#1b2740;
  --rub:#24304a; --rub-jaci:#34425f;
  --tekst:#eaf0fb; --tekst-2:#a4b1c9; --tekst-3:#7787a3;
  --uspjeh:#2ee0a5; --uspjeh-tinta:#0c3327;
  --opasnost:#ff6b7d; --opasnost-tinta:#3a1620;
  --upozorenje:#fbbf24; --upozorenje-tinta:#3a2a0c;
  --info:#7aa2ff; --info-tinta:#16233f;
  --p-500:#6b93ff; --p-600:#5a80f0;
  --sjena-1:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
  --sjena-2:0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
  --sjena-3:0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55);
  --rub-svjetlo:inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-tema="light"] { color-scheme: light; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--pozadina);
  color: var(--tekst);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80rem 40rem at 15% -10%, color-mix(in srgb, var(--p-500) 12%, transparent), transparent 60%),
    radial-gradient(60rem 34rem at 95% 0%, color-mix(in srgb, var(--uspjeh) 8%, transparent), transparent 55%);
}

.ico { width: 20px; height: 20px; flex: none; }

.preskoci {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--p-500); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-s) 0;
}
.preskoci:focus { left: 0; }

/* ---------- Traka ---------- */
.traka {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ploha) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rub);
  padding-top: env(safe-area-inset-top);
}
.traka-unutar {
  max-width: 1240px; margin: 0 auto; height: var(--traka-v);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
}

.marka {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit;
  min-width: 0; flex: 0 1 auto; overflow: hidden;
}
.marka-znak {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, var(--p-400), var(--p-600));
  color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--p-500) 40%, transparent);
}
.marka-znak .ico { width: 21px; height: 21px; }
.marka-tekst { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marka-tekst strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.35px; }
.marka-tekst small {
  font-size: .7rem; color: var(--tekst-3); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marka-tekst strong { white-space: nowrap; }

/* Na uskom zaslonu ime postaje već stoji u izborniku postaja,
   pa ga u marki izostavljamo da ne gura naziv aplikacije. */
@media (max-width: 720px) {
  .marka-tekst small { display: none; }
  .marka-tekst strong { font-size: .98rem; }
  .traka-unutar { gap: 9px; padding: 0 12px; }
  .traka-desno { gap: 6px; flex: 1 1 auto; min-width: 0; }
  /* Izbornik postaje preuzima slobodnu širinu da ime stane cijelo. */
  .postaja-izbor { flex: 1 1 auto; }
  .postaja-izbor select { max-width: none; width: 100%; font-size: .8rem; }
}
/* Ispod ove širine i sam naziv aplikacije smeta – ostaje samo znak. */
@media (max-width: 430px) {
  .marka-tekst { display: none; }
}

.nav-desktop { display: none; gap: 3px; margin-left: auto; }
.nav-link {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: var(--r-s);
  text-decoration: none; color: var(--tekst-2); font-weight: 600; font-size: .875rem;
  transition: var(--prijelaz); white-space: nowrap;
}
.nav-link .ico { width: 17px; height: 17px; }
.nav-link:hover { background: var(--ploha-3); color: var(--tekst); }
.nav-link.je-aktivan { background: color-mix(in srgb, var(--p-500) 14%, transparent); color: var(--p-500); }

.traka-desno { display: flex; align-items: center; gap: 7px; margin-left: auto; }
@media (min-width: 1000px) { .traka-desno { margin-left: 0; } }

.ikona-gumb {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--rub);
  background: var(--ploha-2); color: var(--tekst-2); display: grid; place-items: center;
  cursor: pointer; transition: var(--prijelaz); text-decoration: none;
}
.ikona-gumb:hover { background: var(--ploha-3); color: var(--tekst); border-color: var(--rub-jaci); }
.ico-moon { display: none; }
html[data-tema="dark"] .ico-sun { display: none; }
html[data-tema="dark"] .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] .ico-sun { display: none; }
  html[data-tema="auto"] .ico-moon { display: block; }
}

.korisnik-cip { display: none; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--ploha-3); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--p-400), var(--p-600)); color: #fff;
  font-weight: 700; font-size: .82rem; flex: none;
}
.korisnik-ime { font-size: .82rem; font-weight: 600; color: var(--tekst-2); }
@media (min-width: 640px) { .korisnik-cip { display: flex; } }
@media (min-width: 1000px) { .nav-desktop { display: flex; } }

/* ---------- Raspored ---------- */
.omot { max-width: 1240px; margin: 0 auto; padding: 22px 16px 110px; }
body.sirina-usko .omot { max-width: 640px; }
@media (min-width: 1000px) { .omot { padding-bottom: 48px; } }

.naslov-stranice {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.7px; margin-bottom: 4px;
}
@media (min-width: 700px) { .naslov-stranice { font-size: 1.9rem; } }

.podnaslov { color: var(--tekst-3); font-size: .9rem; margin-bottom: 22px; }

/* Na telefonu prostor iznad prve kartice treba biti što manji –
   aplikacija se koristi vani, na letvi, a ne za čitanje uvoda. */
@media (max-width: 560px) {
  .omot { padding: 14px 13px 100px; }
  .naslov-stranice { font-size: 1.38rem; margin-bottom: 2px; }
  .podnaslov { font-size: .82rem; margin-bottom: 14px; line-height: 1.45; }
  .mreza { gap: 13px; }
  .kartica + .kartica { margin-top: 13px; }
  .polje { margin-bottom: 13px; }
  label, .oznaka { font-size: .72rem; margin-bottom: 5px; }
  .traka-alata { gap: 9px; margin-bottom: 14px; }
  .mreza-spremnika { gap: 11px; }
  .spremnik { padding: 13px; }
  .mreza-stat { gap: 10px; }
}

/* ---------- Kartice ---------- */
.kartica {
  background: var(--ploha); border: 1px solid var(--rub); border-radius: var(--r-l);
  box-shadow: var(--sjena-1), var(--rub-svjetlo); padding: 22px;
  position: relative;
}
@media (max-width: 560px) { .kartica { padding: 17px 15px; border-radius: var(--r-m); } }
.kartica + .kartica { margin-top: 16px; }
.kartica-naslov {
  display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700;
  letter-spacing: -.3px; margin-bottom: 17px; padding-bottom: 13px;
  border-bottom: 1px solid var(--rub);
}
.kartica-naslov:only-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.kartica-naslov .ico { color: var(--p-500); }
.kartica-naslov .desno { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--tekst-3); }

.mreza { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .mreza-2 { grid-template-columns: 1fr 1fr; }
  .mreza-3 { grid-template-columns: repeat(3, 1fr); }
  .mreza-glavna { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Obrasci ---------- */
.polje { margin-bottom: 16px; }
.polje:last-child { margin-bottom: 0; }
label, .oznaka {
  display: block; font-size: .78rem; font-weight: 700; color: var(--tekst-3);
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: .5px;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--tekst);
  background: var(--ploha-2); border: 1.5px solid var(--rub); border-radius: var(--r-m);
  padding: 13px 15px; outline: none; transition: var(--prijelaz); appearance: none;
}
html[data-tema="dark"] input, html[data-tema="dark"] select, html[data-tema="dark"] textarea { background: var(--ploha-3); }
@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] input, html[data-tema="auto"] select, html[data-tema="auto"] textarea { background: var(--ploha-3); }
}
input:focus, select:focus, textarea:focus {
  border-color: var(--p-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-500) 18%, transparent);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input::placeholder { color: var(--tekst-3); opacity: .65; }
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b869e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 42px; cursor: pointer;
}
.pomoc { font-size: .76rem; color: var(--tekst-3); margin-top: 6px; }
.red-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Gumbi ---------- */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border: 1.5px solid transparent; border-radius: var(--r-m);
  font-family: inherit; font-size: .94rem; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: var(--prijelaz); white-space: nowrap;
  background: var(--ploha-3); color: var(--tekst);
}
.gumb:hover { transform: translateY(-1px); }
.gumb:active { transform: translateY(0) scale(.985); }
.gumb:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.gumb .ico { width: 18px; height: 18px; }

.gumb-glavni { background: linear-gradient(145deg, var(--p-400), var(--p-600)); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p-500) 35%, transparent); }
.gumb-uspjeh { background: linear-gradient(145deg, var(--uspjeh), color-mix(in srgb, var(--uspjeh) 75%, #000)); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--uspjeh) 32%, transparent); }
html[data-tema="dark"] .gumb-uspjeh { color: #06231a; }
.gumb-obris { background: transparent; border-color: var(--rub-jaci); color: var(--tekst-2); }
.gumb-obris:hover { background: var(--ploha-3); color: var(--tekst); }
.gumb-opasnost { background: transparent; border-color: color-mix(in srgb, var(--opasnost) 45%, transparent); color: var(--opasnost); }
.gumb-opasnost:hover { background: var(--opasnost-tinta); }
.gumb-puni { width: 100%; }
.gumb-mali { padding: 8px 13px; font-size: .82rem; border-radius: var(--r-s); }
.gumbi { display: flex; flex-wrap: wrap; gap: 10px; }
.gumbi > .gumb { flex: 1 1 180px; }

/* ---------- Spremnici ---------- */
.mreza-spremnika { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }

.spremnik {
  position: relative; display: flex; gap: 13px; align-items: stretch;
  background: var(--ploha); border: 1.5px solid var(--rub); border-radius: var(--r-l);
  padding: 15px; cursor: pointer; transition: var(--prijelaz); text-align: left;
  font-family: inherit; color: inherit; overflow: hidden; width: 100%;
}
.spremnik:hover { border-color: var(--rub-jaci); box-shadow: var(--sjena-2); transform: translateY(-2px); }
.spremnik:active { transform: translateY(0) scale(.99); }
.spremnik:focus-visible { outline: 3px solid color-mix(in srgb, var(--p-500) 50%, transparent); outline-offset: 2px; }
.spremnik.je-popunjen { border-color: color-mix(in srgb, var(--uspjeh) 45%, transparent); }
.spremnik.je-popunjen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(155deg, color-mix(in srgb, var(--uspjeh) 11%, transparent), transparent 58%);
}

/* Okomiti mjerač napunjenosti – staklena cijev s tekućinom */
.mjerac {
  width: 26px; flex: none; border-radius: 9px; position: relative; overflow: hidden;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tekst) 7%, transparent),
    color-mix(in srgb, var(--tekst) 2%, transparent) 40%,
    color-mix(in srgb, var(--tekst) 7%, transparent));
  border: 1px solid var(--rub);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--tekst) 10%, transparent);
}
.mjerac-punjenje {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--boja-goriva) 70%, #000 12%),
      var(--boja-goriva) 38%,
      color-mix(in srgb, var(--boja-goriva) 72%, #fff 28%) 62%,
      color-mix(in srgb, var(--boja-goriva) 78%, #000 10%));
  transition: height 780ms cubic-bezier(.22,.9,.24,1);
}
/* Zaobljena površina tekućine na vrhu stupca. */
.mjerac-punjenje::after {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--boja-goriva) 45%, #fff);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--boja-goriva) 55%, transparent);
}
.mjerac-crte { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0; z-index: 1; }
.mjerac-crte i {
  display: block; height: 1px; margin: 0 6px;
  background: color-mix(in srgb, var(--tekst-3) 30%, transparent);
}

.spremnik-tijelo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.spremnik-vrh { display: flex; align-items: baseline; gap: 7px; }
.spremnik-oznaka { font-size: 1.22rem; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
.spremnik-znak {
  width: 8px; height: 8px; border-radius: 50%; background: var(--boja-goriva); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--boja-goriva) 22%, transparent);
}
.spremnik-gorivo {
  font-size: .74rem; font-weight: 600; color: var(--tekst-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spremnik-litre {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.08rem; font-weight: 700;
  margin-top: auto; padding-top: 10px; letter-spacing: -.7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .spremnik-litre { font-size: 1.14rem; } }
.spremnik-litre small { font-size: .66rem; font-weight: 600; color: var(--tekst-3); margin-left: 3px; }
.spremnik-prazan {
  color: var(--tekst-3); font-weight: 600; font-size: .82rem;
  font-family: Inter, system-ui, sans-serif; letter-spacing: 0;
}
.spremnik-cm {
  font-size: .68rem; color: var(--tekst-3); font-weight: 600; margin-top: 2px;
  font-family: "JetBrains Mono", monospace; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.spremnik-kvacica {
  position: absolute; top: 10px; right: 10px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--uspjeh); color: #fff; display: grid; place-items: center; z-index: 2;
  opacity: 0; transform: scale(.4); transition: var(--prijelaz);
}
.spremnik-kvacica .ico { width: 13px; height: 13px; stroke-width: 3.4; }
.spremnik.je-popunjen .spremnik-kvacica { opacity: 1; transform: scale(1); }

/* ---------- Statistika ---------- */
.mreza-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 13px; }
.stat {
  background: var(--ploha); border: 1px solid var(--rub); border-radius: var(--r-m);
  padding: 15px 17px; box-shadow: var(--sjena-1), var(--rub-svjetlo);
  position: relative; overflow: hidden;
}
/* Tanka okomita traka lijevo nosi boju vrijednosti. */
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--p-500); opacity: .5;
}
.stat:has(.pozitivno)::before { background: var(--uspjeh); opacity: .75; }
.stat:has(.negativno)::before { background: var(--opasnost); opacity: .75; }
.stat-oznaka {
  font-size: .7rem; font-weight: 700; color: var(--tekst-3); text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 6px;
}
.stat-vrijednost {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.5rem; font-weight: 700;
  letter-spacing: -1.2px; line-height: 1.15; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .stat-vrijednost { font-size: 1.35rem; } }
.stat-nota { font-size: .74rem; color: var(--tekst-3); margin-top: 4px; font-weight: 500; }

.pozitivno { color: var(--uspjeh); }
.negativno { color: var(--opasnost); }
.neutralno { color: var(--tekst-2); }

/* ---------- Značke ---------- */
.znacka {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.znacka .ico { width: 12px; height: 12px; stroke-width: 3; }
.znacka-uspjeh { background: var(--uspjeh-tinta); color: var(--uspjeh); }
.znacka-opasnost { background: var(--opasnost-tinta); color: var(--opasnost); }
.znacka-upozorenje { background: var(--upozorenje-tinta); color: var(--upozorenje); }
.znacka-info { background: var(--info-tinta); color: var(--info); }
.znacka-mirna { background: var(--ploha-3); color: var(--tekst-3); }

/* ---------- Poruke ---------- */
.poruka {
  display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--r-m); font-size: .88rem; font-weight: 500; margin-bottom: 16px;
  border: 1px solid transparent; line-height: 1.5;
}
.poruka .ico { flex: none; margin-top: 1px; }
.poruka-info { background: var(--info-tinta); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.poruka-uspjeh { background: var(--uspjeh-tinta); color: var(--uspjeh); border-color: color-mix(in srgb, var(--uspjeh) 25%, transparent); }
.poruka-opasnost { background: var(--opasnost-tinta); color: var(--opasnost); border-color: color-mix(in srgb, var(--opasnost) 25%, transparent); }
.poruka-upozorenje { background: var(--upozorenje-tinta); color: var(--upozorenje); border-color: color-mix(in srgb, var(--upozorenje) 28%, transparent); }
.poruka strong { font-weight: 800; }

.prazno { text-align: center; padding: 44px 20px; color: var(--tekst-3); }
.prazno .ico { width: 42px; height: 42px; margin: 0 auto 12px; opacity: .35; display: block; }
.prazno p { font-size: .92rem; font-weight: 500; }

/* ---------- Tablica ---------- */
.tablica-omot { overflow-x: auto; border: 1px solid var(--rub); border-radius: var(--r-m); background: var(--ploha); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 520px; }
table.tbl th {
  background: var(--ploha-3); font-size: .7rem; font-weight: 700; color: var(--tekst-3);
  text-transform: uppercase; letter-spacing: .6px; padding: 12px 14px; text-align: left;
  white-space: nowrap; position: sticky; top: 0;
}
table.tbl td { padding: 13px 14px; border-top: 1px solid var(--rub); font-size: .88rem; }
table.tbl tbody tr:hover { background: var(--ploha-2); }
table.tbl .broj { text-align: right; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
table.tbl th.broj { text-align: right; }
table.tbl tfoot td { border-top: 2px solid var(--rub-jaci); font-weight: 800; background: var(--ploha-2); }

/* ---------- Modal ---------- */
dialog.modal {
  /* `margin: auto` je nužan jer globalni reset poništava zadano centriranje dijaloga. */
  position: fixed; inset: 0; margin: auto;
  width: fit-content; height: fit-content;
  max-width: 100dvw; max-height: 100dvh;
  border: none; padding: 0; background: transparent; color: var(--tekst); overflow: visible;
}
dialog.modal::backdrop { background: rgba(6, 11, 22, .68); backdrop-filter: blur(6px); }
.modal-ploha {
  background: var(--ploha); border: 1px solid var(--rub); border-radius: var(--r-xl);
  box-shadow: var(--sjena-3); width: min(420px, calc(100vw - 32px)); padding: 24px;
  animation: modal-ulaz 240ms cubic-bezier(.2,.9,.3,1);
}
@keyframes modal-ulaz { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modal-ploha { animation: none; } }

.modal-vrh { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.modal-vrh h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.6px; }
.modal-pod { color: var(--tekst-3); font-size: .84rem; font-weight: 600; margin-bottom: 18px; }

.veliki-unos {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 2.1rem !important; font-weight: 700 !important; text-align: center;
  padding: 16px !important; letter-spacing: -1px;
}
.pretpregled {
  background: var(--ploha-3); border-radius: var(--r-m); padding: 14px; margin: 14px 0;
  text-align: center; min-height: 74px; display: grid; place-content: center; gap: 3px;
}
.pretpregled-litre {
  font-family: "JetBrains Mono", monospace; font-size: 1.6rem; font-weight: 700;
  letter-spacing: -1px; color: var(--uspjeh);
}
.pretpregled-nota { font-size: .74rem; color: var(--tekst-3); font-weight: 600; }
.pretpregled.je-greska .pretpregled-litre { color: var(--opasnost); font-size: .95rem; letter-spacing: 0; }

/* ---------- Obavijesti ---------- */
.obavijesti {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 90;
  bottom: calc(78px + env(safe-area-inset-bottom)); display: flex; flex-direction: column;
  gap: 8px; width: min(400px, calc(100vw - 24px)); pointer-events: none;
}
@media (min-width: 1000px) { .obavijesti { bottom: 24px; } }
.obavijest {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-m);
  background: var(--ploha); border: 1px solid var(--rub); box-shadow: var(--sjena-3);
  font-size: .87rem; font-weight: 600; animation: toast-ulaz 260ms cubic-bezier(.2,.9,.3,1);
  pointer-events: auto;
}
@keyframes toast-ulaz { from { opacity: 0; transform: translateY(16px); } }
.obavijest.odlazi { opacity: 0; transform: translateY(10px); transition: 260ms; }
.obavijest-uspjeh { border-left: 4px solid var(--uspjeh); }
.obavijest-greska { border-left: 4px solid var(--opasnost); }
.obavijest-info { border-left: 4px solid var(--info); }
.obavijest .ico { flex: none; }
.obavijest-uspjeh .ico { color: var(--uspjeh); }
.obavijest-greska .ico { color: var(--opasnost); }
.obavijest-info .ico { color: var(--info); }

/* ---------- Mobilni izbornik ---------- */
.nav-mobitel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--ploha) 90%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--rub); padding-bottom: env(safe-area-inset-bottom);
}
.nav-m-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px;
  text-decoration: none; color: var(--tekst-3); font-size: .63rem; font-weight: 700;
  transition: var(--prijelaz); position: relative;
}
.nav-m-link .ico { width: 21px; height: 21px; }
.nav-m-link.je-aktivan { color: var(--p-500); }
.nav-m-link.je-aktivan::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--p-500);
}
@media (min-width: 1000px) { .nav-mobitel { display: none; } }

/* ---------- Grafovi ---------- */
.graf-omot { position: relative; height: 300px; }
.graf-omot.nizak { height: 230px; }

/* ---------- Pomoćno ---------- */
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.centar { text-align: center; }
.desno { text-align: right; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.sakrij { display: none !important; }
.traka-alata { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.traka-alata .polje { margin-bottom: 0; flex: 1 1 170px; }
.raspon { display: flex; align-items: center; gap: 8px; }
.tanko { color: var(--tekst-3); font-weight: 500; }

.ucitavanje { display: grid; place-items: center; padding: 40px; }
.vrtuljak {
  width: 26px; height: 26px; border: 3px solid var(--rub); border-top-color: var(--p-500);
  border-radius: 50%; animation: vrti .7s linear infinite;
}
@keyframes vrti { to { transform: rotate(360deg); } }

@media print {
  .traka, .nav-mobitel, .obavijesti, .gumbi, .preskoci, .traka-alata { display: none !important; }
  body { background: #fff; }
  .kartica { box-shadow: none; border-color: #ccc; }
}

/* ---------- Izbornik postaja ---------- */
.postaja-izbor {
  display: flex; align-items: center; gap: 6px; padding: 0 4px 0 11px;
  background: var(--ploha-3); border: 1px solid var(--rub); border-radius: 999px;
  height: 38px; flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.postaja-izbor .ico { width: 15px; height: 15px; color: var(--p-500); flex: none; }
.postaja-izbor select {
  border: none; background: transparent; padding: 0 26px 0 0; height: 36px;
  font-size: .82rem; font-weight: 700; color: var(--tekst); width: auto;
  max-width: 168px; background-position: right 6px center; border-radius: 0;
}
.postaja-izbor select:focus { box-shadow: none; }


/* ---------- Uvoz baždarnih tablica ---------- */
.zona-odlaganja {
  border: 2px dashed var(--rub-jaci); border-radius: var(--r-l); padding: 30px 20px;
  text-align: center; background: var(--ploha-2); transition: var(--prijelaz); cursor: pointer;
}
.zona-odlaganja:hover, .zona-odlaganja.je-aktivna {
  border-color: var(--p-500); background: color-mix(in srgb, var(--p-500) 7%, transparent);
}
.zona-odlaganja .ico { width: 34px; height: 34px; color: var(--p-500); margin-bottom: 10px; }
.zona-odlaganja p { font-weight: 600; font-size: .9rem; }
.zona-odlaganja small { color: var(--tekst-3); font-size: .78rem; display: block; margin-top: 5px; }

textarea.unos-tablice {
  min-height: 190px; font-family: "JetBrains Mono", monospace; font-size: .82rem;
  line-height: 1.6; resize: vertical;
}

.pregled-uvoza { max-height: 420px; overflow-y: auto; }
.pregled-uvoza table.tbl { min-width: auto; }
tr.redak-greska { background: var(--opasnost-tinta) !important; }
tr.redak-upozorenje { background: var(--upozorenje-tinta) !important; }

.koraci { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.korak {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: var(--ploha-3); color: var(--tekst-3); font-size: .8rem; font-weight: 700;
}
.korak.je-aktivan { background: color-mix(in srgb, var(--p-500) 16%, transparent); color: var(--p-500); }
.korak.je-gotov { background: var(--uspjeh-tinta); color: var(--uspjeh); }
.korak span.broj {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: currentColor; color: var(--ploha); font-size: .68rem; flex: none;
}

.slika-pregled { max-width: 100%; border-radius: var(--r-m); border: 1px solid var(--rub); }

/* ---------- Podizbornik postavki ---------- */
.podizbornik {
  display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto;
  background: var(--ploha-3); border: 1px solid var(--rub);
  border-radius: var(--r-m); padding: 5px; scrollbar-width: none;
}
.podizbornik::-webkit-scrollbar { display: none; }
.pod-link {
  display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px;
  text-decoration: none; color: var(--tekst-2); font-weight: 600; font-size: .86rem;
  white-space: nowrap; transition: var(--prijelaz); flex: none;
}
.pod-link .ico { width: 16px; height: 16px; }
.pod-link:hover { background: var(--ploha); color: var(--tekst); }
.pod-link.je-aktivan { background: var(--ploha); color: var(--p-500); box-shadow: var(--sjena-1); }

/* ---------- Polja s datumom ---------- */
/* Nativni prikaz datuma se lomi kad mu se ukloni zadani izgled, pa mu
   izrijekom zadajemo istu visinu i poravnanje kao ostalim poljima. */
/* Datum i padajući izbornik moraju biti točno iste visine, inače im se
   ne poklapaju ni gornji ni donji rub kad stoje jedan uz drugi. */
input[type="date"], select, .traka-alata > .gumb { height: 50px; }

input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
/* Nativna ikona kalendara lijepi se uz tekst i ne da se pomaknuti kroz
   shadow DOM, pa je skrivamo i crtamo vlastitu na desnom rubu — jednako
   kao strelicu na padajućem izborniku. Klik bilo gdje otvara kalendar. */
input[type="date"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }

input[type="date"] {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b869e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 44px;
  cursor: pointer;
}

/* Na mobitelu polja smiju narasti da tekst ostane čitljiv. */
@media (max-width: 560px) {
  input[type="date"], select, .traka-alata > .gumb { height: auto; min-height: 52px; }
}

/* Polja u traci alata moraju biti jednake širine i poravnata po dnu. */
.traka-alata { align-items: flex-end; }
.traka-alata .polje { flex: 1 1 200px; min-width: 0; }
.traka-alata > .gumb { min-height: 50px; flex: 0 0 auto; }

/* ---------- Redovi gumba ---------- */
.gumbi-red {
  display: grid; gap: 10px; margin-bottom: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.gumbi-red:last-child { margin-bottom: 0; }
.gumbi-red .gumb { width: 100%; }
.skupina-naslov {
  font-size: .72rem; font-weight: 700; color: var(--tekst-3); text-transform: uppercase;
  letter-spacing: .6px; margin: 18px 0 9px;
}
.skupina-naslov:first-child { margin-top: 0; }

/* ---------- Ovlasti korisnika ---------- */
.mreza-ovlasti {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.skupina-ovlasti {
  border: 1px solid var(--rub); border-radius: var(--r-m);
  padding: 14px 15px; background: var(--ploha-2);
}
.ovlast {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
  text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--tekst);
  font-weight: 500; margin: 0; cursor: pointer; border-top: 1px solid var(--rub);
}
.ovlast:first-of-type { border-top: none; }
.ovlast span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ovlast strong { font-weight: 700; font-size: .88rem; }
.ovlast small { color: var(--tekst-3); font-size: .76rem; line-height: 1.45; font-weight: 500; }

/* ---------- Prikaz dodijeljene lozinke ---------- */
.lozinka-prikaz {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--uspjeh-tinta); border: 1px solid color-mix(in srgb, var(--uspjeh) 35%, transparent);
  border-radius: var(--r-m); padding: 14px 16px;
}
.lozinka-prikaz code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 700; letter-spacing: .5px;
  color: var(--tekst); flex: 1 1 auto; word-break: break-all; user-select: all;
}

/* ---------- Traka alata na telefonu ---------- */
/* Dolazi na kraj namjerno: osnovno pravilo `.traka-alata .polje` definirano
   je niže u datoteci, pa bi inače nadjačalo ovo. Dva polja s datumom stoje
   jedno uz drugo — uštedi cijeli redak i odmah se vidi da su to dvije
   različite kontrole, a ne isto polje dvaput. */
@media (max-width: 560px) {
  .traka-alata .polje { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .traka-alata .polje input[type="date"] {
    padding: 0 30px 0 11px; background-position: right 8px center; background-size: 15px;
    font-size: .92rem;
  }
  .traka-alata .polje select {
    padding: 0 28px 0 11px; background-position: right 8px center; font-size: .92rem;
  }
  .traka-alata > .gumb { flex: 1 1 100%; }
}

/* ============================================================
   Završno dotjerivanje
   ============================================================ */

/* ---------- Prazna stanja ---------- */
.prazno { padding: 40px 20px; }
.prazno .ico {
  width: 30px; height: 30px; margin: 0 auto 14px; opacity: 1; display: block;
  color: var(--tekst-3); padding: 13px; box-sizing: content-box;
  border-radius: 50%; background: var(--ploha-3);
  border: 1px solid var(--rub);
}
.prazno p { font-size: .9rem; font-weight: 500; line-height: 1.6; color: var(--tekst-2); }
.prazno strong { color: var(--tekst); font-weight: 700; }

/* ---------- Gumbi ---------- */
.gumb {
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--sjena-1);
}
.gumb-obris { box-shadow: none; }
.gumb-glavni {
  box-shadow: 0 1px 2px rgba(13,21,38,.12), 0 4px 12px color-mix(in srgb, var(--p-500) 32%, transparent);
}
.gumb-uspjeh {
  box-shadow: 0 1px 2px rgba(13,21,38,.12), 0 4px 12px color-mix(in srgb, var(--uspjeh) 30%, transparent);
}
.gumb:disabled { box-shadow: none; }

/* Dosljedan fokus po cijeloj aplikaciji – važno za tipkovnicu. */
.gumb:focus-visible, .nav-link:focus-visible, .nav-m-link:focus-visible,
.pod-link:focus-visible, .ikona-gumb:focus-visible, .ovlast:focus-within {
  outline: 3px solid color-mix(in srgb, var(--p-500) 55%, transparent);
  outline-offset: 2px;
}

/* ---------- Tablice ---------- */
.tablica-omot { box-shadow: var(--sjena-1); }
table.tbl th {
  border-bottom: 1px solid var(--rub);
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--ploha-3) 92%, transparent);
  z-index: 1;
}
table.tbl tbody tr { transition: background 140ms; }

/* ---------- Mobilni izbornik ---------- */
.nav-mobitel { box-shadow: 0 -1px 0 var(--rub), 0 -8px 24px rgba(0,0,0,.06); }
.nav-m-link { -webkit-tap-highlight-color: transparent; }
.nav-m-link.je-aktivan .ico { transform: translateY(-1px); }
.nav-m-link .ico { transition: transform 180ms cubic-bezier(.2,.8,.2,1); }

/* ---------- Marka ---------- */
.marka-znak {
  box-shadow: 0 2px 4px color-mix(in srgb, var(--p-600) 28%, transparent),
              0 6px 16px color-mix(in srgb, var(--p-500) 32%, transparent),
              inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---------- Modal ---------- */
.modal-ploha { box-shadow: var(--sjena-3), var(--rub-svjetlo); }
.veliki-unos { box-shadow: inset 0 1px 3px color-mix(in srgb, var(--tekst) 8%, transparent); }
.pretpregled { border: 1px solid var(--rub); }

/* ---------- Telefon: veći dodirni ciljevi i čitljiviji brojevi ---------- */
@media (max-width: 560px) {
  .gumb { padding: 14px 18px; min-height: 48px; }
  .gumb-mali { padding: 9px 13px; min-height: 38px; }
  .ikona-gumb { width: 40px; height: 40px; }

  .kartica-naslov { font-size: .96rem; margin-bottom: 14px; padding-bottom: 11px; }
  .stat { padding: 13px 14px; }
  .stat-oznaka { font-size: .66rem; }

  table.tbl th { padding: 10px 12px; font-size: .66rem; }
  table.tbl td { padding: 11px 12px; font-size: .84rem; }

  .poruka { padding: 12px 13px; font-size: .84rem; }
  .znacka { font-size: .67rem; padding: 3px 8px; }

  .prazno { padding: 30px 16px; }
  .modal-ploha { padding: 20px 18px; }
  .veliki-unos { font-size: 1.9rem !important; }
}

/* ---------- Brojke u sažetku se ne smiju lomiti ---------- */
/* Na uskom zaslonu "+2.540,72 €" ne stane u pola širine, pa bi znak valute
   pao u novi redak. Umjesto loma, brojka se skupi na raspoloživu širinu. */
.stat-vrijednost { white-space: nowrap; }
@media (max-width: 560px) {
  .stat-vrijednost { font-size: clamp(.95rem, 4.4vw, 1.35rem); }
}
@media (max-width: 380px) {
  .stat-vrijednost { font-size: clamp(.88rem, 4.2vw, 1.2rem); }
}

/* ============================================================
   Kvačice i radio gumbi
   ------------------------------------------------------------
   Globalno pravilo za polja gasi nativni izgled svih `input`
   elemenata. Kvačice su time ostajale prazne i u označenom i u
   neoznačenom stanju, pa se nije vidjelo što je odabrano.
   Ovdje im se crta vlastiti, jasno vidljiv izgled.
   ============================================================ */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 21px; height: 21px; min-width: 21px; flex: none;
  margin: 0; padding: 0; cursor: pointer;
  display: inline-grid; place-content: center;
  border: 2px solid var(--rub-jaci); border-radius: 6px;
  background: var(--ploha);
  transition: background 140ms, border-color 140ms, box-shadow 140ms;
  vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]::before, input[type="radio"]::before {
  content: ""; width: 12px; height: 12px;
  transform: scale(0); transition: transform 140ms cubic-bezier(.2,.9,.3,1.2);
  background: #fff;
}
/* Kvačica se crta izrezivanjem oblika iz punog kvadrata. */
input[type="checkbox"]::before {
  clip-path: polygon(14% 45%, 0 62%, 40% 100%, 100% 22%, 84% 8%, 39% 70%);
}
input[type="radio"]::before { width: 9px; height: 9px; border-radius: 50%; }

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--p-500); border-color: var(--p-500);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) {
  border-color: var(--p-500);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--p-500) 50%, transparent);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  opacity: .5; cursor: not-allowed;
}

/* Cijeli redak s oznakom je dodirna meta, ne samo kvadratić. */
.ovlast { padding: 10px 6px; border-radius: 9px; margin: 0 -6px; }
.ovlast:hover { background: var(--ploha-3); }
.ovlast input[type="checkbox"] { margin-top: 1px; }

/* Oznaka uz kvačicu izvan popisa ovlasti. */
label:has(> input[type="checkbox"]) {
  display: flex; align-items: center; gap: 10px;
  text-transform: none; letter-spacing: 0; font-size: .9rem;
  font-weight: 500; color: var(--tekst); cursor: pointer;
  padding: 8px 6px; margin: 0 -6px; border-radius: 9px;
}
label:has(> input[type="checkbox"]):hover { background: var(--ploha-3); }

/* U tablicama kvačica stoji sama u sredini ćelije. */
table.tbl td > input[type="checkbox"] { display: inline-grid; }

@media (max-width: 560px) {
  input[type="checkbox"], input[type="radio"] { width: 23px; height: 23px; min-width: 23px; }
  input[type="checkbox"]::before { width: 13px; height: 13px; }
}