/* ============================================================================
   ClientPortal — stilovi

   Sve je ovde jer CSP zabranjuje <style> blokove i style="" atribute (O-06).
   Ako nesto izgleda neuobicajeno, prvo pogledaj konzolu pregledaca.

   Tema je namerno SAMO tamna. Time i ugradjeni birac datuma ostaje taman
   (color-scheme ispod) umesto da bude beo pravougaonik usred tamne strane.

   Mobile-first: osnovna pravila vaze za telefon, media upiti dodaju sirinu.
   ============================================================================ */

:root {
    color-scheme: dark;          /* ugradjene kontrole: kalendar, skrol, izbornici */

    --pozadina:    #0f1115;
    --povrsina:    #171a21;
    --povrsina-2:  #1e222b;
    --ivica:       #2a2f3a;
    --ivica-jaca:  #3b4250;

    --tekst:       #e8eaf0;
    --tekst-blaz:  #939aa8;
    --tekst-slab:  #6b7382;

    /* Glavna boja: prelaz iz tamnije u svetliju */
    --akcenat-1:   #D70652;
    --akcenat-2:   #FF025E;
    --akcenat-mek: rgba(255, 2, 94, .14);
    --gradijent:   linear-gradient(135deg, var(--akcenat-1) 0%, var(--akcenat-2) 100%);

    --greska:      #ff6b8a;
    --greska-poz:  rgba(215, 6, 82, .12);
    --uspeh:       #4ade80;
    --uspeh-poz:   rgba(74, 222, 128, .10);

    /* Statusi. Svaki korak toka ima svoju boju da se na prvi pogled vidi
       dokle je vozilo stiglo. Sve su namerno dalje od akcentne boje, da se
       oznaka ne stopi sa dugmadima. */
    --st-najavljeno:   #e5a33d;  --st-najavljeno-p:   rgba(229, 163, 61, .14);
    --st-nakapiji:     #22d3ee;  --st-nakapiji-p:     rgba(34, 211, 238, .14);
    --st-pristiglo:    #4a9fd4;  --st-pristiglo-p:    rgba(74, 159, 212, .14);
    --st-prijavljen:   #a78bfa;  --st-prijavljen-p:   rgba(167, 139, 250, .14);
    --st-utoku:        #2dd4bf;  --st-utoku-p:        rgba(45, 212, 191, .14);
    --st-zavrseno:     #4ade80;  --st-zavrseno-p:     rgba(74, 222, 128, .12);
    --st-otkazano:     #8b94a3;  --st-otkazano-p:     rgba(139, 148, 163, .14);
    --st-odbijeno:     #f87171;  --st-odbijeno-p:     rgba(248, 113, 113, .14);

    --radijus:   10px;
    --radijus-s: 7px;
    --senka:     0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .22);
    --senka-akc: 0 6px 18px rgba(215, 6, 82, .32);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tekst);
    background: var(--pozadina);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   PRIJAVA
   ============================================================================ */

.prijava-omot {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
}

/* Dva mekana kruga u pozadini koji polako plutaju. Cist CSS, bez slika —
   nista se ne preuzima, pa CSP i brzina ucitavanja ostaju netaknuti. */
.prijava-omot::before,
.prijava-omot::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.prijava-omot::before {
    width: 460px; height: 460px;
    background: var(--akcenat-1);
    top: -160px; left: -140px;
    animation: pluta 18s ease-in-out infinite;
}

.prijava-omot::after {
    width: 380px; height: 380px;
    background: var(--akcenat-2);
    bottom: -150px; right: -120px;
    opacity: .38;
    animation: pluta 22s ease-in-out infinite reverse;
}

@keyframes pluta {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.12); }
}

/* Postovanje sistemske postavke za smanjeno kretanje. */
@media (prefers-reduced-motion: reduce) {
    .prijava-omot::before,
    .prijava-omot::after { animation: none; }
    .prijava-kartica { animation: none; }
}

.prijava-kartica {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: rgba(23, 26, 33, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--ivica);
    border-radius: 16px;
    box-shadow: var(--senka);
    padding: 2.25rem 1.85rem;
    animation: ulaz .5s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes ulaz {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.prijava-znak {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--gradijent);
    box-shadow: var(--senka-akc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
}

.prijava-znak svg { width: 26px; height: 26px; }

.prijava-kartica h1 {
    margin: 0 0 1.65rem;
    font-size: 1.5rem;
    letter-spacing: -.015em;
}

/* ============================================================================
   ZAGLAVLJE I OKVIR
   ============================================================================ */

.zaglavlje {
    background: var(--povrsina);
    border-bottom: 1px solid var(--ivica);
    padding: .8rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 30;
}

.zaglavlje .naziv {
    font-weight: 600;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.zaglavlje .znak {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--gradijent);
    display: flex; align-items: center; justify-content: center;
    flex: none;
}

.zaglavlje .znak svg { width: 17px; height: 17px; }

.zaglavlje small {
    display: block;
    font-weight: 400;
    font-size: .78rem;
    color: var(--tekst-blaz);
}

.sadrzaj {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.15rem;
}

.sadrzaj-full {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: .45rem .75rem .65rem;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.app-full {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-full .zaglavlje {
    flex: none;
    position: relative;
}

.app-full .poruka {
    flex: none;
    margin-bottom: 0;
}

/* --- Kompaktna traka filtera ------------------------------------------- */

.toolbar {
    flex: none;
    background: linear-gradient(180deg, #1a1e27 0%, var(--povrsina) 100%);
    border: 1px solid var(--ivica);
    border-radius: 8px;
    padding: .38rem .55rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.toolbar-red {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
}

.toolbar-grupa {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: none;
}

.toolbar-gradovi {
    flex: 1 1 140px;
    min-width: 0;
}

.toolbar-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tekst-slab);
    flex: none;
    user-select: none;
}

.toolbar-sep {
    width: 1px;
    height: 1.5rem;
    background: linear-gradient(180deg, transparent, var(--ivica-jaca), transparent);
    flex: none;
    opacity: .85;
}

.select-kompakt {
    width: auto;
    min-width: 4.25rem;
    padding: .3rem .55rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 6px;
    margin: 0;
    border-color: var(--ivica-jaca);
    background: var(--povrsina-2);
}

.brzi-kompakt {
    display: flex;
    flex-wrap: wrap;
    gap: .22rem;
    flex: 1 1 auto;
    margin: 0;
    align-items: center;
    min-width: 0;
}

.brzi-kompakt .cip {
    padding: .2rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 5px;
    line-height: 1.3;
    background: transparent;
    border-color: transparent;
    color: var(--tekst-blaz);
}

.brzi-kompakt .cip:hover:not(:disabled) {
    background: var(--povrsina-2);
    border-color: var(--ivica);
    color: var(--tekst);
}

.brzi-kompakt .cip[aria-pressed="true"] {
    background: var(--akcenat-mek);
    border-color: rgba(255, 2, 94, .45);
    color: #fff;
    box-shadow: none;
}

/* Segmentirani status filter */
.status-segment {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    border-radius: 7px;
    padding: 2px;
    gap: 1px;
    max-width: 100%;
}

.status-segment .seg {
    margin: 0;
    padding: .22rem .55rem;
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.3;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--tekst-blaz);
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
}

.status-segment .seg:hover:not(:disabled) {
    color: var(--tekst);
    transform: none;
}

.status-segment .seg[aria-pressed="true"] {
    background: var(--gradijent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(215, 6, 82, .28);
}

.status-segment .seg:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--akcenat-mek);
}

.toolbar-akcije {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    flex: none;
    padding-left: .35rem;
    border-left: 1px solid var(--ivica);
}

.input-ruta {
    width: 4.4rem;
    padding: .28rem .4rem;
    font-size: .78rem;
    border-radius: 6px;
    margin: 0;
}

.dugme-kompakt {
    padding: .3rem .7rem;
    font-size: .78rem;
    border-radius: 6px;
    width: auto;
    margin: 0;
}

.izabrano-info {
    font-size: .7rem;
    font-weight: 650;
    color: var(--tekst-blaz);
    min-width: 1.35rem;
    text-align: right;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.izabrano-info::after {
    content: ' izabr.';
    font-weight: 500;
    color: var(--tekst-slab);
}

.panel-tabela {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tabela-zaglavlje {
    flex: none;
    padding: .45rem .85rem .15rem;
}

.tabela-zaglavlje h2 {
    margin: 0;
    font-size: .95rem;
}

.tabela-zaglavlje h2 small {
    font-weight: 500;
    color: var(--tekst-blaz);
    font-size: .85em;
}

.tabela-full {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border-radius: 0 0 var(--radijus) var(--radijus);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.tabela-full table {
    width: 100%;
    min-width: 900px;
}

@media (max-width: 900px) {
    .toolbar-sep { display: none; }
    .toolbar-akcije {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: .25rem;
        border-top: 1px solid var(--ivica);
        justify-content: flex-end;
    }
}

.kol-check {
    width: 3.4rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 650;
    color: var(--tekst-blaz);
}

.kol-expand {
    width: 2.2rem;
    text-align: center;
}

.check-nalog {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--akcenat-2);
    cursor: pointer;
}

.dugme-expand {
    background: transparent;
    border: none;
    color: var(--tekst);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .35rem;
    border-radius: 6px;
}

.dugme-expand:hover {
    background: var(--povrsina-2);
}

.red-ruta {
    background: rgba(255, 2, 94, .07);
    font-weight: 600;
}

.red-ruta.otvoreno {
    background: rgba(255, 2, 94, .11);
}

.red-dete td {
    color: var(--tekst-blaz);
    background: var(--povrsina-2);
    font-weight: 400;
}

.oznaka-ruta {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--gradijent);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.ruta-broj-naloga {
    font-weight: 500;
    color: var(--tekst-blaz);
    font-size: .9rem;
}

.oznaka-status {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
}

.oznaka-assigned {
    background: rgba(74, 222, 128, .14);
    color: var(--uspeh);
}

.status-prazan {
    color: var(--tekst-slab);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.panel {
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus);
    box-shadow: var(--senka);
    padding: 1.35rem;
    margin-bottom: 1.25rem;
}

.panel h2 {
    margin: 0 0 1.15rem;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

/* ============================================================================
   FORMA
   ============================================================================ */

.polje { margin-bottom: 1.05rem; }

.polje label {
    display: block;
    margin-bottom: .4rem;
    font-size: .855rem;
    font-weight: 500;
    color: var(--tekst);
}

/* Crvena zvezdica uz obavezna polja. Polja bez nje su neobavezna —
   zato se rec "neobavezno" vise ne pise u samom polju. */
.zvezdica {
    color: var(--akcenat-2);
    margin-left: .18rem;
    font-weight: 700;
}

.polje .pomoc {
    display: block;
    margin-top: .32rem;
    font-size: .78rem;
    color: var(--tekst-slab);
}

input, select, textarea {
    width: 100%;
    padding: .62rem .75rem;
    font: inherit;
    color: var(--tekst);
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus-s);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

input::placeholder, textarea::placeholder { color: var(--tekst-slab); }

/* Fokus je u akcentnoj boji, ne plav. */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--akcenat-2);
    box-shadow: 0 0 0 3px var(--akcenat-mek);
    background: var(--povrsina);
}

/* Ugradjena ikonica kalendara je podrazumevano tamna zbog color-scheme,
   ali je ovde jos malo posvetljena da se vidi na tamnoj podlozi. */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(.65);
    cursor: pointer;
}

input[type="date"]:focus::-webkit-calendar-picker-indicator { filter: invert(.85); }

textarea { resize: vertical; min-height: 76px; }

/* Registracije: uvek velika slova, bez razmaka. Slog je monospace da se
   slicni znakovi (0/O, 1/I) lakse razlikuju. */
.registracija {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.red-polja { display: grid; gap: 0; }

@media (min-width: 640px) {
    .red-polja { grid-template-columns: 1fr 1fr; gap: 0 1.15rem; }
}

/* --- Klizac: utovar / istovar ------------------------------------------- */

.klizac-omot {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    border-radius: 999px;
    padding: .28rem;
}

.klizac-omot input { position: absolute; opacity: 0; pointer-events: none; }

.klizac-opcija {
    padding: .42rem 1.15rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tekst-blaz);
    cursor: pointer;
    transition: color .18s, background .18s, box-shadow .18s;
    user-select: none;
}

.klizac-omot input:checked + .klizac-opcija {
    background: var(--gradijent);
    color: #fff;
    box-shadow: var(--senka-akc);
}

.klizac-omot input:focus-visible + .klizac-opcija {
    box-shadow: 0 0 0 3px var(--akcenat-mek);
}

/* --- Izbor klijenata (vise njih) ---------------------------------------- */

.cekiranja {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cekiranje {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .8rem;
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    border-radius: 999px;
    font-size: .875rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.cekiranje:hover { border-color: var(--ivica-jaca); }

.cekiranje input {
    width: auto;
    margin: 0;
    accent-color: var(--akcenat-2);
    cursor: pointer;
}

.cekiranje:has(input:checked) {
    border-color: var(--akcenat-2);
    background: var(--akcenat-mek);
}

/* ============================================================================
   DUGMAD
   ============================================================================ */

button {
    font: inherit;
    font-weight: 600;
    padding: .62rem 1.15rem;
    border-radius: var(--radijus-s);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s, box-shadow .18s, background .18s, color .18s, border-color .18s;
}

button:disabled { opacity: .55; cursor: progress; transform: none !important; }

.dugme-glavno {
    background: var(--gradijent);
    color: #fff;
    width: 100%;
    padding: .75rem 1.15rem;
    box-shadow: var(--senka-akc);
    position: relative;
    overflow: hidden;
}

.dugme-glavno:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255, 2, 94, .42);
}

.dugme-glavno:active:not(:disabled) { transform: translateY(0); }

.dugme-sporedno {
    background: var(--povrsina-2);
    color: var(--tekst-blaz);
    border-color: var(--ivica);
    padding: .48rem .9rem;
    font-size: .85rem;
    font-weight: 500;
}

.dugme-sporedno:hover:not(:disabled) {
    color: var(--tekst);
    border-color: var(--ivica-jaca);
}

.dugme-opasno {
    background: transparent;
    color: var(--greska);
    border-color: var(--ivica);
    padding: .34rem .7rem;
    font-size: .8rem;
}

.dugme-opasno:hover:not(:disabled) {
    background: var(--greska-poz);
    border-color: var(--greska);
}

/* ============================================================================
   PORUKE
   ============================================================================ */

.poruka {
    padding: .75rem .9rem;
    border-radius: var(--radijus-s);
    font-size: .89rem;
    margin-bottom: 1.05rem;
    animation: ulaz .25s ease both;
}

.poruka[hidden] { display: none; }

.poruka-greska { background: var(--greska-poz); color: var(--greska); border: 1px solid rgba(255, 107, 138, .4); }
.poruka-uspeh  { background: var(--uspeh-poz);  color: var(--uspeh);  border: 1px solid rgba(74, 222, 128, .4); }

/* ============================================================================
   BRZI FILTERI PO STATUSU
   ============================================================================ */

.brzi-filteri {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1rem;
}

.cip {
    padding: .38rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    color: var(--tekst-blaz);
}

.cip:hover:not(:disabled) { color: var(--tekst); border-color: var(--ivica-jaca); }

.cip[aria-pressed="true"] {
    background: var(--gradijent);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--senka-akc);
}

.cip .broj {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: .75rem;
}

/* ============================================================================
   TABELA
   ============================================================================ */

.filter {
    display: flex;
    gap: .85rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter .polje { margin-bottom: 0; flex: 1 1 150px; }

/* Okvir koji skroluje. Zaglavlje ostaje na mestu zahvaljujuci
   position: sticky na th — zato skrol mora biti na OVOM elementu,
   ne na celoj strani. */
.tabela-okvir {
    max-height: 640px;
    overflow: auto;
    border: 1px solid var(--ivica);
    border-radius: var(--radijus-s);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .855rem;
    white-space: nowrap;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--povrsina-2);
    text-align: left;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-blaz);
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--ivica);
}

/* Prva kolona ostaje vidljiva i pri vodoravnom skrolu. */
thead th:first-child,
tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--povrsina);
}

thead th:first-child { z-index: 3; background: var(--povrsina-2); }

tbody td {
    padding: .68rem .85rem;
    border-bottom: 1px solid var(--ivica);
    color: var(--tekst);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--povrsina-2); }
tbody tr:hover td:first-child { background: var(--povrsina-2); }

td.tablica {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: .04em;
}

td.blaz { color: var(--tekst-blaz); }
td.prazno-polje { color: var(--tekst-slab); }

/* ============================================================================
   OZNAKE STATUSA
   ============================================================================ */

.oznaka {
    display: inline-block;
    padding: .17rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.oznaka-najavljeno { background: var(--st-najavljeno-p); color: var(--st-najavljeno); }
.oznaka-nakapiji   { background: var(--st-nakapiji-p);   color: var(--st-nakapiji); }
.oznaka-pristiglo  { background: var(--st-pristiglo-p);  color: var(--st-pristiglo); }
.oznaka-prijavljen { background: var(--st-prijavljen-p); color: var(--st-prijavljen); }
.oznaka-utoku      { background: var(--st-utoku-p);      color: var(--st-utoku); }
.oznaka-zavrseno   { background: var(--st-zavrseno-p);   color: var(--st-zavrseno); }
.oznaka-otkazano   { background: var(--st-otkazano-p);   color: var(--st-otkazano); }
.oznaka-odbijeno   { background: var(--st-odbijeno-p);   color: var(--st-odbijeno); }

/* ============================================================================
   STRANICENJE
   ============================================================================ */

.stranicenje {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.stranicenje .broj-zapisa {
    margin-right: auto;
    font-size: .82rem;
    color: var(--tekst-blaz);
}

.strana {
    min-width: 36px;
    padding: .4rem .6rem;
    font-size: .85rem;
    font-weight: 600;
    background: var(--povrsina-2);
    border: 1px solid var(--ivica);
    color: var(--tekst-blaz);
}

.strana:hover:not(:disabled):not([aria-current="page"]) {
    color: var(--tekst);
    border-color: var(--ivica-jaca);
}

.strana[aria-current="page"] {
    background: var(--gradijent);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--senka-akc);
}

.strana-tackice {
    padding: .4rem .25rem;
    color: var(--tekst-slab);
    font-size: .85rem;
}

/* ============================================================================
   OSTALO
   ============================================================================ */

.prazno {
    text-align: center;
    color: var(--tekst-blaz);
    padding: 2.5rem 1rem;
    font-size: .9rem;
}

.skriveno { display: none; }

.kol-akcija {
    white-space: nowrap;
    width: 1%;
}

.akcije-red {
    display: inline-flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.dugme-akcija {
    margin: 0;
    padding: .2rem .5rem;
    font-size: .68rem;
    font-weight: 650;
    border-radius: 5px;
    border: 1px solid var(--ivica);
    background: var(--povrsina-2);
    color: var(--tekst-blaz);
    cursor: pointer;
}

.dugme-akcija:hover {
    color: var(--tekst);
    border-color: var(--ivica-jaca);
}

.dugme-akcija.opasno:hover {
    color: var(--greska);
    border-color: rgba(255, 107, 138, .45);
}

.kol-ruta-broj {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.modal-omot {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-omot[hidden] {
    display: none !important;
}

.modal-pozadina {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.modal-kartica {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus);
    box-shadow: var(--senka);
    padding: 1.15rem 1.2rem 1.25rem;
}

.modal-kartica h2 {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
}

.modal-podnaslov {
    margin: 0 0 1rem;
    color: var(--tekst-blaz);
    font-size: .85rem;
}

.modal-akcije {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    margin-top: 1rem;
}

.modal-akcije .dugme-glavno,
.modal-akcije .dugme-sporedno {
    width: auto;
    margin: 0;
}

/* Na telefonu tabela skroluje vodoravno; to je bolje od gnjecenja kolona. */
@media (max-width: 700px) {
    .app-full .tabela-okvir { max-height: none; }
    .sadrzaj { padding: .85rem; }
    .panel { padding: 1.05rem; }
    .toolbar-label { display: none; }
}