/* HSS Prijava · Backoffice — iste boje kao aplikacija (plava #1F4E79) i mockup (docs/dizajn/mockup.html) */
:root {
  --plava: #1f4e79; --plava-2: #2d6aa3; --plava-sv: #e8f0f8;
  --zelena: #1e7b4a; --zelena-sv: #e3f4ea;
  --zuta: #8a5a00; --zuta-sv: #fff4d6;
  --crvena: #b42318; --crvena-sv: #fde8e6;
  --tekst: #1b1f24; --siva: #5f6b7a; --linija: #e2e6eb; --poz: #f4f6f9; --bela: #ffffff; --meni: #13314d;
  --senka: 0 1px 2px rgba(20, 40, 60, .06), 0 4px 16px rgba(20, 40, 60, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plava: #7fb0e0; --plava-2: #9cc4ea; --plava-sv: #172a3d;
    --zelena: #5fcf92; --zelena-sv: #14301f;
    --zuta: #e7b04c; --zuta-sv: #33280f;
    --crvena: #ff8a7e; --crvena-sv: #3a1b18;
    --tekst: #e4e9ee; --siva: #9aa7b4; --linija: #26313c; --poz: #0f151b; --bela: #151d25; --meni: #0b1117;
    --senka: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--poz); color: var(--tekst); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--plava); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--plava-2); outline-offset: 2px; }
.ucitava { padding: 40px; color: var(--siva); }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }

/* Raspored */
.okvir { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100%; }
.meni { background: var(--meni); color: #d7e3ee; display: flex; flex-direction: column; padding: 18px 12px; gap: 4px; position: sticky; top: 0; height: 100vh; }
.meni .brend { font-weight: 700; font-size: 16px; padding: 4px 10px 16px; color: #fff; display: flex; gap: 10px; align-items: center; }
.meni .brend small { display: block; font-weight: 400; font-size: 12px; color: #9fb6cc; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: #2d6aa3; display: grid; place-items: center; font-size: 15px; }
.meni a { color: #cfdcea; text-decoration: none; padding: 8px 10px; border-radius: 8px; display: flex; justify-content: space-between; gap: 8px; }
.meni a:hover { background: rgba(255, 255, 255, .06); }
.meni a.akt { background: #2d6aa3; color: #fff; }
.meni .dno { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: 12px 10px 0; font-size: 13px; color: #9fb6cc; display: grid; gap: 6px; }
.meni .dno button { background: none; border: 0; color: #cfdcea; text-align: left; padding: 0; cursor: pointer; }
.meni .dno button:hover { color: #fff; text-decoration: underline; }
.sadrzaj { padding: 24px 28px 60px; min-width: 0; }
.traka-mob { display: none; }

h1 { font-size: 24px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 10px; }
.naslov { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.naslov .levo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.podnaslov { color: var(--siva); margin: 2px 0 0; }
.nazad { font-size: 14px; text-decoration: none; display: inline-block; margin-bottom: 8px; }

/* Kartice i mreže */
.kartica { background: var(--bela); border: 1px solid var(--linija); border-radius: 12px; padding: 16px 18px; box-shadow: var(--senka); }
.mreza { display: grid; gap: 16px; }
.mreza.dve { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.pokazatelji { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pokazatelj { background: var(--bela); border: 1px solid var(--linija); border-radius: 12px; padding: 14px 16px; }
.pokazatelj .br { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pokazatelj .opis { color: var(--siva); font-size: 13px; }
.pokazatelj .detalj { font-size: 13px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.sekcija { margin-top: 16px; }

/* Tabele */
.tabela { overflow-x: auto; background: var(--bela); border: 1px solid var(--linija); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--linija); vertical-align: top; }
thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--siva); font-weight: 600; background: var(--poz); white-space: nowrap; }
tbody tr.klik { cursor: pointer; }
tbody tr.klik:hover { background: var(--plava-sv); }
td.br, th.br { text-align: right; font-variant-numeric: tabular-nums; }
td.poruka { max-width: 360px; color: var(--siva); }
tr.neaktivan td { opacity: .55; }
.prazno { padding: 22px; text-align: center; color: var(--siva); }

/* Oznake */
.oznaka { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; font-weight: 600; background: var(--poz); color: var(--siva); border: 1px solid var(--linija); }
.oznaka.zelena { background: var(--zelena-sv); color: var(--zelena); border-color: transparent; }
.oznaka.plava { background: var(--plava-sv); color: var(--plava); border-color: transparent; }
.oznaka.zuta { background: var(--zuta-sv); color: var(--zuta); border-color: transparent; }
.oznaka.crvena { background: var(--crvena-sv); color: var(--crvena); border-color: transparent; }

/* Forme */
.forma { display: grid; gap: 12px; }
.redovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
label.polje { display: grid; gap: 4px; font-size: 13px; color: var(--siva); }
label.polje span.pomoc { font-size: 12px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--linija); border-radius: 8px; background: var(--bela); color: var(--tekst); font-size: 15px;
}
input:focus, select:focus { border-color: var(--plava-2); outline: none; box-shadow: 0 0 0 3px var(--plava-sv); }
label.cek { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tekst); }
.dugmad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dugmad.dole { align-items: end; }
.uska { max-width: 460px; }
button.d { border: 1px solid var(--linija); background: var(--bela); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600; }
button.d:hover { border-color: var(--plava-2); }
button.d.glavno { background: var(--plava); border-color: var(--plava); color: #fff; }
@media (prefers-color-scheme: dark) { button.d.glavno { color: #0b1117; } }
button.d.opasno { color: var(--crvena); }
button.d.malo { padding: 3px 10px; font-size: 13px; }
button.d:disabled { opacity: .5; cursor: default; }
.greske { background: var(--crvena-sv); color: var(--crvena); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.greske ul { margin: 4px 0 0; padding-left: 18px; }
.napomena { background: var(--zuta-sv); color: var(--zuta); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.tiho { color: var(--siva); font-size: 13px; }
.filteri { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.filteri > * { flex: 1 1 170px; max-width: 260px; }

/* Sobe */
.sobe { display: flex; flex-wrap: wrap; gap: 6px; }
.soba { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linija); border-radius: 8px; padding: 3px 4px 3px 10px; font-variant-numeric: tabular-nums; background: var(--poz); }
.soba small { color: var(--siva); }
.soba button { border: 0; background: none; cursor: pointer; color: var(--siva); padding: 0 4px; font-size: 16px; line-height: 1; }

/* Grafikon */
.graf { width: 100%; height: 150px; display: block; }
.graf .osa { stroke: var(--linija); }
.graf .stub { fill: var(--plava-2); }
.graf .stub.problem { fill: var(--crvena); }
.graf text { fill: var(--siva); font-size: 10px; }

/* Tajna (ključ, token, lozinka) */
.tajna { display: flex; gap: 8px; align-items: stretch; }
.tajna code { flex: 1; background: var(--poz); border: 1px dashed var(--plava-2); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; font-size: 14px; user-select: all; }

/* Modal i poruka */
#modal { position: fixed; inset: 0; background: rgba(10, 20, 30, .45); display: grid; place-items: center; padding: 16px; z-index: 20; }
#modal[hidden] { display: none; }
.prozor { background: var(--bela); border-radius: 14px; padding: 20px; width: min(560px, 100%); max-height: 90vh; overflow: auto; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.prozor h2 { font-size: 18px; margin: 0; }
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #13314d; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 30; max-width: 92vw; }
#toast.greska { background: var(--crvena); color: #fff; }

/* Prijava */
.prijava { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.prijava .kartica { width: min(400px, 100%); display: grid; gap: 14px; padding: 26px; }
.prijava h1 { font-size: 20px; display: flex; gap: 10px; align-items: center; }

@media (max-width: 860px) {
  .okvir { grid-template-columns: minmax(0, 1fr); }
  .meni { position: fixed; inset: 0 30% 0 0; height: auto; z-index: 15; transform: translateX(-102%); transition: transform .2s; max-width: 280px; }
  .meni.otvoren { transform: none; }
  .traka-mob { display: flex; align-items: center; gap: 12px; background: var(--meni); color: #fff; padding: 10px 14px; position: sticky; top: 0; z-index: 10; }
  .traka-mob button { background: none; border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 8px; padding: 4px 10px; }
  .sadrzaj { padding: 16px 16px 60px; }
  .mreza.dve { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .meni { transition: none; } }

/* Nalog objekta: „uživo" */
.uzivo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--zelena); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .tacka { animation: puls 2s ease-in-out infinite; } }
@keyframes puls { 50% { opacity: .35; } }

/* API dokumentacija u glavnom delu (uputstvo ima svoj sadržaj i skrol) */
.dok-okvir { display: block; width: 100%; height: calc(100vh - 190px); min-height: 420px; border: 1px solid var(--linija); border-radius: 12px; background: var(--bela); }

/* QR za povezivanje telefona (uvek crno na belom, i u tamnoj temi) */
.qr-okvir { display: grid; justify-items: center; gap: 6px; margin: 8px 0 4px; }
.qr { width: 220px; height: 220px; border-radius: 8px; background: #fff; }