/* Kontrola — boje i razmaci po ai-control/panel-ui (README: pozadina #F3F5F7, meni #111827, akcenat #0F766E,
   nalozi A #4338CA, B #0E7490, C #C2410C; dobro, pažnja, kritično). Font Geist / Geist Mono. */
:root {
  --pozadina: #F3F5F7;
  --meni: #111827;
  --meni-2: #1F2937;
  --tekst: #101828;
  --tekst-2: #344054;
  --sivo: #5B6576;
  --sivo-2: #9CA3AF;
  --ivica: #E2E6EB;
  --ivica-2: #EEF1F4;
  --bela: #FFFFFF;
  --akcenat: #0F766E;
  --akcenat-tamni: #115E59;
  --nA: #4338CA;
  --nB: #0E7490;
  --nC: #C2410C;
  --dobro: #166534;
  --dobro-bg: #E7F6EE;
  --paznja: #92400E;
  --paznja-bg: #FEF3E2;
  --paznja-tacka: #D97706;
  --kriticno: #B42318;
  --kriticno-bg: #FDECEC;
  --kriticno-tekst: #7A1A12;
  --paznja-tekst: #6B3407;
  --neutralno: #475467;
  --neutralno-bg: #EEF1F4;
  --odluke-znacka: #B45309;
  --kriticno-ivica: #F3B4AE;
  --font: Geist, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--pozadina); color: var(--tekst); font-family: var(--font); font-size: 14px; line-height: 1.5; }
a { color: var(--akcenat); }
a:hover { color: var(--akcenat-tamni); }
h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 17px; font-weight: 700; }

/* ---- pomoćne ---- */
.kolona { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.red { display: flex; align-items: center; gap: 10px; }
.red-omot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.red-omot.vrh { align-items: flex-start; gap: 24px; }
.red-izmedju { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.red-izmedju.osnova { align-items: baseline; }
.mali-razmak { gap: 6px; }
.rastegni { flex: 1 1 auto; min-width: 0; }
.desno { margin-left: auto; }
.desno-tekst { text-align: right; }
.nowrap { white-space: nowrap; }
.sivo { color: var(--sivo); }
.sivo-svetlo { color: var(--sivo-2); }
.sivo-tamno { color: var(--neutralno); }
.tamnije { color: var(--tekst-2); }
.boja-paznja { color: var(--paznja); }
.belo { color: var(--bela); }
.crveno { color: var(--kriticno); }
.zeleno { color: var(--dobro); }
.mono { font-family: var(--mono); }
.jako { font-weight: 700; font-size: 16px; }
.veci { font-size: 17px; }
.poluzadebljano { font-weight: 600; }
.srednje { font-weight: 500; }
.sitno { font-size: 13px; }
.sitnije { font-size: 12px; }
.brojevi { font-variant-numeric: tabular-nums; }
.prazno { padding: 14px 16px; }
.razmak-gore { margin-top: 12px; }

/* ---- okvir računar ---- */
.okvir { display: flex; flex-wrap: wrap; min-height: 100vh; }
.meni { flex: 1 1 232px; max-width: 100%; background: var(--meni); color: #CBD5E1; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) { .meni { flex: 0 0 232px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.logo-ime { font-weight: 700; font-size: 16px; color: var(--bela); }
.logo-pod { font-size: 12px; color: var(--sivo-2); }
.grupa { display: flex; flex-direction: column; gap: 4px; }
.grupa-naslov { padding: 0 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sivo-2); }
.stavka { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #CBD5E1; text-decoration: none; min-height: 24px; }
.stavka:hover { color: var(--bela); background: #18212F; }
.stavka.aktivna { background: var(--meni-2); color: var(--bela); font-weight: 600; }
.stavka.iskljucena { color: #6B7280; cursor: default; }
.stavka.iskljucena:hover { background: none; color: #6B7280; }
.faza { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; }
.znacka { margin-left: auto; color: var(--bela); font-size: 12px; font-weight: 700; padding: 0 8px; border-radius: 999px; }
.znacka.kriticno { background: var(--kriticno); }
.znacka.odluke { background: var(--odluke-znacka); }
.server-kutija { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 8px; background: var(--meni-2); font-size: 12px; }
.glavno { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 640px) { .glavno { padding: 20px 16px 40px; } }
.zaglavlje { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* ---- oznake ---- */
.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.kriticno { background: var(--kriticno-bg); color: var(--kriticno); }
.pill.paznja { background: var(--paznja-bg); color: var(--paznja); }
.pill.dobro { background: var(--dobro-bg); color: var(--dobro); }
.pill.neutralno { background: var(--neutralno-bg); color: var(--neutralno); }
.pill.akcenat { background: #E0F2F1; color: #0F5D57; }
.pill.drzi.dA { background: #E8E7FB; color: #2E2795; }
.pill.drzi.dB { background: #E0F2F5; color: #0B5566; }
.pill.drzi.dC { background: #FBEBDD; color: #8A2E07; }
.nalog-znak { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--bela); font-size: 12px; font-weight: 700; flex: none; }
.nalog-znak.srednji { width: 24px; height: 24px; }
.nalog-znak.veliki { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.nalog-znak.najveci { width: 36px; height: 36px; border-radius: 9px; font-size: 16px; }
.nalog-znak.tel { width: 28px; height: 28px; border-radius: 7px; font-size: 13px; }
.nA { background: var(--nA); }
.nB { background: var(--nB); }
.nC { background: var(--nC); }
.tacka { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.tacka.mala { width: 8px; height: 8px; }
.tacka.kriticno, .tacka.crvena { background: var(--kriticno); }
.tacka.paznja { background: var(--paznja-tacka); }
.tacka.zelena { background: #16A34A; }
.tacka.siva { background: #98A2B3; }

/* ---- trake limita ---- */
.traka { border-radius: 4px; background: var(--ivica-2); overflow: hidden; height: 8px; }
.traka.tanka { height: 6px; border-radius: 3px; }
.traka.debela { height: 10px; border-radius: 5px; }
.ispuna { height: 100%; border-radius: inherit; }
.ispuna.kriticno { background: var(--kriticno); }
.ispuna.paznja { background: var(--paznja-tacka); }

/* ---- upozorenja u traci ---- */
.traka-upozorenja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; }
.traka-upozorenja.kriticno { background: var(--kriticno-bg); color: var(--kriticno-tekst); }
.traka-upozorenja.paznja { background: var(--paznja-bg); color: var(--paznja-tekst); }
.traka-upozorenja.tel { padding: 10px 12px; gap: 10px; }
.traka-upozorenja .rastegni { flex: 1 1 320px; }
.traka-upozorenja.tel .rastegni { flex: 1 1 auto; }
.traka-upozorenja b { font-weight: 600; }
.traka-upozorenja .akcija { font-weight: 600; text-decoration: none; white-space: nowrap; }
.traka-upozorenja.kriticno .akcija { color: var(--kriticno); }
.traka-upozorenja.paznja .akcija { color: var(--paznja); }

/* ---- kartice, mreže, tabele ---- */
.sekcija { gap: 12px; }
.sirok { flex: 2 1 560px; }
.uzak { flex: 1 1 300px; }
.odnos-3-2 .sirok { flex: 3 1 520px; }
.odnos-3-2 .uzak { flex: 2 1 360px; }
.mreza { display: grid; gap: 16px; }
.mreza-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mreza-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mreza-340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.mreza-420 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.kartica { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 12px; background: var(--bela); border: 1px solid var(--ivica); color: var(--tekst); min-width: 0; }
.nalog-kartica { gap: 12px; padding: 18px; text-decoration: none; }
.nalog-kartica:hover { color: var(--tekst); border-color: #CBD2DA; }
.kartica.cekanje { border: 2px solid #F5C77E; }
.kartica.napomena { gap: 6px; font-size: 13px; }
.kartica.kanali { gap: 10px; padding: 16px; }
.podnozje { border-top: 1px solid var(--ivica-2); padding-top: 10px; }
.kutija { display: flex; flex-direction: column; background: var(--bela); border: 1px solid var(--ivica); border-radius: 12px; }
.kutija.unutra { border-color: var(--ivica-2); border-radius: 10px; }
.lista-red { padding: 12px 16px; border-top: 1px solid var(--ivica-2); }
.lista-red.prvi { border-top: none; }
.prozor-red { padding: 10px 12px; border-top: 1px solid var(--ivica-2); }
.prozor-red.prvi { border-top: none; }
.tabela-omot { overflow-x: auto; background: var(--bela); border: 1px solid var(--ivica); border-radius: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela thead tr { background: #F8FAFB; color: var(--sivo); text-align: left; }
.tabela th { padding: 10px 16px; font-weight: 600; }
.tabela td { padding: 12px 16px; border-top: 1px solid var(--ivica-2); }
.podnozje-tabele { padding: 12px 16px; border-top: 1px solid var(--ivica-2); }
.podnozje-tabele .rastegni { flex: 1 1 420px; }
.link-mali { font-size: 13px; font-weight: 600; text-decoration: none; }
.opis { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.opis.podnozje { padding-top: 12px; }
.opis dt { color: var(--sivo); }
.opis dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.broj-veliki { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.broj-srednji { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.veza { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.zakljucano { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--kriticno-bg); color: var(--kriticno-tekst); font-size: 12px; font-weight: 500; }
.problem { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.problem.kriticno { background: var(--kriticno-bg); color: var(--kriticno-tekst); }
.problem.paznja { background: var(--paznja-bg); color: var(--paznja-tekst); }
.predaja { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #F8FAFB; border: 1px solid var(--ivica-2); font-size: 13px; }
.predaja-mreza { display: grid; grid-template-columns: 76px 1fr; gap: 4px 10px; }
.predlog { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #E0F2F1; color: #0F3D3A; }
.predlog .rastegni { flex: 1 1 420px; }
.predlog-pod { color: #2F5E5A; }
.dugme-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid #D0D5DD; color: var(--tekst); font-weight: 600; font-size: 13px; text-decoration: none; background: var(--bela); }
.prekidac { flex: none; width: 44px; height: 26px; border-radius: 999px; padding: 3px; display: flex; background: #D0D5DD; justify-content: flex-start; }
.prekidac.ukljucen { background: var(--akcenat); justify-content: flex-end; }
.prekidac span { width: 20px; height: 20px; border-radius: 50%; background: var(--bela); }

/* ---- grafikon potrošnje ---- */
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--tekst-2); }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.kvadrat { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.grafikon { display: flex; align-items: flex-end; gap: 12px; height: 180px; padding-top: 8px; border-bottom: 1px solid var(--ivica); overflow-x: auto; }
.dan { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.stubici { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.stubic { width: 12px; border-radius: 3px 3px 0 0; }
.dani-nazivi { display: flex; gap: 12px; font-size: 12px; color: var(--sivo); }
.dan-naziv { flex: 1 0 64px; text-align: center; }

/* ---- telefon ---- */
body.tel { background: var(--pozadina); }
.tel-okvir { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--pozadina); line-height: 1.45; }
.tel-glava { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; background: var(--meni); color: var(--bela); position: sticky; top: 0; z-index: 2; }
.tel-sadrzaj { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 24px; }
.tel-sekcija { gap: 6px; }
.tel-h2 { font-size: 13px; font-weight: 600; color: var(--sivo); }
.tel-sadrzaj .lista-red { padding: 10px 12px; }
.tel-kartica { gap: 8px; padding: 12px 14px; }
.tel-sadrzaj .kartica.cekanje { gap: 10px; padding: 12px 14px; }
.zvono { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--bela); border-radius: 10px; background: var(--meni-2); flex: none; }
.zvono:hover { color: var(--bela); }
.zvono-broj { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--kriticno); color: var(--bela); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tel-meni { display: flex; justify-content: space-around; padding: 6px 8px 10px; background: var(--bela); border-top: 1px solid var(--ivica); position: sticky; bottom: 0; }
.tel-stavka { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 44px; justify-content: center; color: var(--sivo); text-decoration: none; font-size: 11px; font-weight: 500; }
.tel-stavka.aktivna { color: var(--akcenat); font-weight: 600; }

.van-veze .server-kutija, .van-veze .tel-glava { box-shadow: inset 0 0 0 2px var(--kriticno); }

/* ---- prijava: levo kao meni, desno forma; na telefonu meni postaje zaglavlje ---- */
.prijava-okvir { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 520px) 1fr; }
.prijava-strana { background: var(--meni); color: #CBD5E1; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.prijava-strana .logo { padding: 0; }
.prijava-adresa { font-size: 12px; color: var(--sivo); }
.prijava-glavno { background: var(--pozadina); display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.prijava-forma { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; border-radius: 14px; background: var(--bela); border: 1px solid var(--ivica); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06); }
.prijava-naslov { font-size: 24px; }
.prijava-red { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.prijava-polje { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #D0D5DD; font: inherit; font-size: 16px; font-weight: 400; color: var(--tekst); background: var(--bela); }
.prijava-polje::placeholder { color: var(--sivo-2); }
.prijava-polje:focus { outline: 2px solid var(--akcenat); outline-offset: 1px; border-color: var(--akcenat); }
.prijava-lozinka { position: relative; display: block; }
.prijava-lozinka .prijava-polje { padding-right: 84px; }
.prijava-prikazi { position: absolute; top: 6px; right: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--ivica-2); color: var(--tekst-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.prijava-prikazi:hover { background: var(--ivica); }
.prijava-greska { padding: 10px 12px; border-radius: 8px; background: var(--kriticno-bg); color: var(--kriticno-tekst); font-size: 13px; font-weight: 500; }
.prijava-dugme { min-height: 44px; border: 0; border-radius: 8px; background: var(--akcenat); color: var(--bela); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.prijava-dugme:hover { background: var(--akcenat-tamni); }
.prijava-dugme:disabled, .prijava-polje:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 899px) {
  .prijava-okvir { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .prijava-strana { padding: 20px 16px; }
  .prijava-adresa { display: none; }
  .prijava-glavno { align-items: flex-start; padding: 20px 16px 32px; }
  .prijava-forma { max-width: none; padding: 24px 20px; box-shadow: none; }
}

/* ---- odjava ---- */
.odjava { margin: 6px 0 0; }
.dugme-odjava { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--sivo-2); text-decoration: underline; cursor: pointer; }
.dugme-odjava:hover { color: var(--bela); }
.tel-odjava { display: flex; justify-content: center; padding: 8px 16px 16px; }
.tel-odjava .dugme-odjava { color: var(--sivo); font-size: 13px; }
.tel-odjava .dugme-odjava:hover { color: var(--tekst); }

/* ---- email naloga (iz .env, samo prikaz) ---- */
.nalog-email { font-size: 12px; color: var(--sivo); font-weight: 400; overflow-wrap: anywhere; }

/* ---- strane računara na telefonu: bez levog menija, zaglavlje i donji meni kao na telefonskim stranama ---- */
.mob-samo { display: none !important; }
@media (max-width: 899px) {
  body.racunar .meni { display: none; }
  body.racunar .tel-glava.mob-samo { display: flex !important; }
  body.racunar .tel-meni.mob-samo { display: flex !important; z-index: 2; }
  body.racunar .tel-odjava.mob-samo { display: flex !important; }
  body.racunar .okvir { min-height: 0; }
  body.racunar .tel-glava .zvono + .zvono { margin-left: -2px; }
  .tel-meni .tel-stavka { min-width: 56px; }
}
@media (max-width: 640px) {
  /* 7 dana grafikona staje u širinu telefona */
  .grafikon, .dani-nazivi { gap: 4px; }
  .dan, .dan-naziv { flex: 1 0 36px; }
  .stubici { gap: 2px; }
  .stubic { width: 8px; }
}

/* ---- poruke ---- */
.poruka-forma { gap: 12px; }
.polje-tekst { min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
select.prijava-polje { appearance: auto; }
.poruka-dugme { padding: 0 22px; }
.poruka-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 420px) { .tel-meni .tel-stavka { min-width: 0; flex: 1 1 0; font-size: 10px; } }

/* ---- odluke (Faza 2, samo prikaz) ---- */
.odluke-leva { flex: 3 1 560px; min-width: 0; }
.odluke-desna { flex: 2 1 340px; min-width: 0; }
.kartica.odluka { gap: 8px; }
.kartica.odluka.objava { border: 2px solid var(--kriticno-ivica); }
.odluka-naslov { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.odluka-detalj { color: var(--tekst-2); overflow-wrap: anywhere; }
.odluka-gde { padding: 8px 12px; border-radius: 8px; background: var(--neutralno-bg); color: var(--neutralno); font-size: 12px; font-weight: 500; }
.odluka-reseno { overflow-wrap: anywhere; }
.traka-odluka { text-decoration: none; }
@media (max-width: 640px) { .odluke-leva, .odluke-desna { flex-basis: 100%; } }

/* ---- čuvanje i provere (Faza 2, samo prikaz) ---- */
.cuvanje-kolona { flex: 1 1 460px; min-width: 0; }
.katanac { display: inline-flex; flex: none; align-self: flex-start; margin-top: 1px; }
.katanac.drzi { color: #0F766E; }
.katanac.slobodno { color: #98A2B3; }
.brava-red { align-items: flex-start; flex-wrap: wrap; }
.brava-red .pill { margin-left: auto; }
.cuvanje-traka { flex-wrap: nowrap; align-items: flex-start; }
.cuvanje-traka .tacka { margin-top: 5px; }
.cuvanje-traka .rastegni { flex: 1 1 0; }
.forma-red { margin: 0; }
button.dugme-link { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
button.dugme-link:hover { background: var(--neutralno-bg); }
@media (max-width: 640px) { .cuvanje-kolona { flex-basis: 100%; } }