:root {
    --plava: #0f7cc1;
    --plava-tamna: #0b5f95;
    --tekst: #1e293b;
    --blijedo: #64748b;
    --rub: #e2e8f0;
    --podloga: #f1f5f9;
    --bijelo: #fff;
    --ok: #15803d;
    --ok-podloga: #dcfce7;
    --put: #0b5f95;
    --put-podloga: #dbeafe;
    --ceka: #92400e;
    --ceka-podloga: #fef3c7;
    --lose: #b91c1c;
    --lose-podloga: #fee2e2;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tekst);
    background: var(--podloga);
}

a { color: var(--plava); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
small { display: block; color: var(--blijedo); font-size: .85em; }

main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; }

.traka {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 10px 16px; background: #16202e; color: #fff;
}
.traka .znak { color: #fff; font-weight: 700; font-size: 1.1rem; }
.traka nav { display: flex; gap: 16px; flex: 1; }
.traka nav a { color: #cbd5e1; }
.traka form { display: flex; align-items: center; gap: 10px; margin: 0; }
.traka .ko { color: #94a3b8; font-size: .9em; }

.dugme {
    display: inline-block; border: 0; border-radius: 8px; padding: 9px 16px;
    background: var(--plava); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.dugme:hover { background: var(--plava-tamna); text-decoration: none; }
.dugme:disabled { opacity: .5; cursor: default; }
.dugme.tiho { background: transparent; color: var(--plava); border: 1px solid var(--rub); }
.traka .dugme.tiho { color: #cbd5e1; border-color: #334155; padding: 6px 12px; }

label { display: block; font-weight: 600; font-size: .9em; margin: 14px 0 4px; }
input:not([type=hidden]) {
    width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
    font: inherit; background: #fff; color: inherit;
}
input:focus { outline: 2px solid var(--plava); outline-offset: 0; border-color: var(--plava); }
form .dugme { margin-top: 16px; }

.kutija { background: var(--bijelo); border: 1px solid var(--rub); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.kutija.uska { max-width: 520px; }
.kutija.bez-ruba { padding: 0; overflow: hidden; }
.prazno { color: var(--blijedo); text-align: center; }
.sitno { color: var(--blijedo); font-size: .88em; }

.poruka { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.poruka.ok { background: var(--ok-podloga); color: var(--ok); }
.poruka.lose { background: var(--lose-podloga); color: var(--lose); }

/* Prijava */
body.prijava { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #1e293b, #0f172a); }
body.prijava main { width: 100%; max-width: 420px; padding: 16px; }
.kartica-prijave { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.kartica-prijave h1 { color: var(--plava); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.kartica-prijave .podnaslov { text-align: center; color: var(--blijedo); margin: 4px 0 20px; }
.kartica-prijave .dugme { width: 100%; margin-top: 22px; padding: 11px; }

/* Pregled */
.plocice { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.plocica { background: #fff; border: 1px solid var(--rub); border-radius: 12px; padding: 14px 16px; }
.plocica span { display: block; color: var(--blijedo); font-size: .85em; }
.plocica strong { font-size: 1.5rem; }
.plocica.upozorenje { border-color: #fca5a5; }
.plocica.upozorenje strong { color: var(--lose); }

.sinhronizacija {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--rub); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
}
.sinhronizacija.lose { border-color: #fca5a5; background: #fff7f7; }
.sinhronizacija span { display: block; color: var(--blijedo); font-size: .9em; }
.sinhronizacija .najava { color: var(--plava-tamna); }
.sinhronizacija form, .sinhronizacija .dugme { margin: 0; }

.alati { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kartice { display: flex; gap: 6px; flex-wrap: wrap; }
.kartice a { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--rub); color: var(--tekst); }
.kartice a.aktivna { background: var(--plava); border-color: var(--plava); color: #fff; }
.kartice em { font-style: normal; opacity: .7; margin-left: 4px; }
.pretraga { display: flex; gap: 8px; flex: 1; min-width: 240px; max-width: 420px; }
.pretraga .dugme { margin: 0; }

table.lista { width: 100%; border-collapse: collapse; }
.lista th { text-align: left; font-size: .8em; text-transform: uppercase; letter-spacing: .03em; color: var(--blijedo); background: #f8fafc; }
.lista th, .lista td { padding: 10px 14px; border-bottom: 1px solid var(--rub); vertical-align: top; }
.lista tr:last-child td { border-bottom: 0; }
.lista .desno { text-align: right; white-space: nowrap; }
.lista .glavno { font-weight: 600; }

.oznaka { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82em; font-weight: 600; white-space: nowrap; }
.oznaka.velika { font-size: .95em; padding: 5px 14px; }
.oznaka.ok { background: var(--ok-podloga); color: var(--ok); }
.oznaka.put { background: var(--put-podloga); color: var(--put); }
.oznaka.ceka { background: var(--ceka-podloga); color: var(--ceka); }
.oznaka.lose, .oznaka.kasni { background: var(--lose-podloga); color: var(--lose); }
.oznaka.sivo { background: #e2e8f0; color: #475569; }

.strane { display: flex; justify-content: center; align-items: center; gap: 16px; color: var(--blijedo); }

/* Pošiljka */
.nazad { margin: 0 0 12px; }
.zaglavlje-posiljke { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.zaglavlje-posiljke p { margin: 4px 0 0; color: var(--blijedo); }
.podaci { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; }
.podaci dt { color: var(--blijedo); font-size: .82em; }
.podaci dd { margin: 0; font-weight: 600; }

.tok { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--rub); }
.tok li { position: relative; padding: 0 0 18px 8px; }
.tok li::before {
    content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: #cbd5e1; border: 2px solid #fff;
}
.tok li:first-child::before { background: var(--plava); }
.tok li.ok::before { background: var(--ok); }
.tok time { display: block; color: var(--blijedo); font-size: .85em; }

@media (max-width: 760px) {
    .lista thead { display: none; }
    .lista tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--rub); }
    .lista td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
    .lista td::before { content: attr(data-naslov); color: var(--blijedo); font-size: .85em; text-align: left; flex-shrink: 0; }
    .pretraga { max-width: none; }
}