/* ====================================================================================
   NIT Software Solutions © 2026 — Sva prava zadržana.
   Projekat:  NITLpfrPortal
   Fajl:      src/Portal.Web/wwwroot/css/portal-ljuska.css
   Opis:      Raspored ljuske (bočni meni + zaglavlje) i sve zajedničke komponente
              stranica. Preuzet obrazac iz NITErp-a (`erp-ljuska.css`, UI standard §4–§5):
              tamni bočni meni 248 px, zaglavlje 50 px sa čipovima i avatarom, površine sa
              radijusom 10 px i mekom senkom, pill bedževi sa tačkom za stanja.

   ⛔ Nijedna boja ovde nije gotov ton — sve dolazi iz `portal-tema.css`. Kad se pojavi
      potreba za novom bojom, dodaje se TOKEN, ne heks u pravilo.

   Zašto bočni meni ostaje običan HTML (bez Syncfusion komponente): navigacija mora da radi
   na statički renderovanoj stranici, bez ijednog kilobajta JavaScript-a — portal je
   podrazumevano statički SSR (odluka O-P6), i prijava mora da radi i kad Blazor kolo padne.
   Nastalo:   23.08.2026.
   ==================================================================================== */

/* ------------------------------------------------------------------------------------
   ŠKOLJKA
   ------------------------------------------------------------------------------------ */
.portal {
    display: flex;
    min-height: 100vh;
}

/* ------------------------------------------------------------------------------------
   BOČNI MENI

   Napomena uz pravilo „nijedna boja nije gotov ton": belo (#fff) se u ovom bloku i u
   `.brend-panel` koristi namerno. Te dve površine su TAMNE u obe teme (`--sidebar-bg`,
   `--prijava-panel`), pa belo tu nije ton teme nego kontrast prema podlozi koja se ne menja.
   Sve ostalo — i tekst na dugmadima akcenta — ide kroz token `--na-primary`.
   ------------------------------------------------------------------------------------ */
.meni {
    width: 248px;
    flex: 0 0 248px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.meni .znak {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.15rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--sidebar-border);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

    .meni .znak i {
        font-size: 1.35rem;
        color: var(--primary);
    }

    .meni .znak span {
        display: block;
        font-weight: 400;
        font-size: .78rem;
        color: var(--sidebar-muted);
    }

/* Natpis sekcije — deli meni na celine umesto da bude spisak od trinaest stavki. */
.meni .sekcija {
    padding: .9rem 1.15rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
}

.meni a {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 .5rem;
    padding: .45rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.4;
}

    .meni a i {
        width: 1.1rem;
        font-size: .95rem;
        color: var(--sidebar-muted);
        text-align: center;
        flex: none;
    }

    .meni a:hover {
        background: var(--sidebar-hover);
        color: #fff;
    }

        .meni a:hover i {
            color: var(--sidebar-text);
        }

    /* Aktivna stavka nosi i traku sa leve strane: boja sama po sebi ne prolazi kod nekoga
       ko slabije razlikuje tonove, a traka se vidi uvek. */
    .meni a.active {
        background: color-mix(in srgb, var(--primary) 22%, var(--sidebar-hover));
        color: #fff;
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--primary);
    }

        .meni a.active i {
            color: #fff;
        }

/* ------------------------------------------------------------------------------------
   SADRŽAJ
   ------------------------------------------------------------------------------------ */
main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.strana {
    padding: 1.25rem 1.5rem 2.5rem;
}

main h1 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

    /* Ikonica naslova nosi boju akcenta — isto kao u ERP-u, gde `SectionContent TopPageHeader`
       stavlja `text-primary` na ikonu ekrana. Ona je i jedini brz način da se na dva otvorena
       prozora vidi koji je koji. */
    main h1 i {
        color: var(--primary);
        font-size: 1.15rem;
    }

main h2 {
    margin: 1.75rem 0 .75rem;
    font-size: 1.02rem;
    font-weight: 600;
}

main a {
    color: var(--primary);
}

/* ------------------------------------------------------------------------------------
   ZAGLAVLJE — čip sa nalogom, prekidač teme, odjava (ERP standard §4).
   ------------------------------------------------------------------------------------ */
.zaglavlje {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-height: 50px;
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.cip {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: var(--ctrl-h);
    padding: 0 .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

    .cip i {
        color: var(--muted);
    }

.avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-soft-text);
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
}

/* Dugme u zaglavlju: ikonica bez natpisa, objašnjenje u `title`. */
.ikona-dugme {
    display: grid;
    place-items: center;
    width: var(--ctrl-h);
    height: var(--ctrl-h);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: .95rem;
    cursor: pointer;
    padding: 0;
}

    .ikona-dugme:hover {
        color: var(--text);
        border-color: var(--border-strong);
        background: var(--surface-2);
    }

.zaglavlje form {
    margin: 0;
}

/* ------------------------------------------------------------------------------------
   BROJKE (KPI pločice)
   ------------------------------------------------------------------------------------ */
.kartice-brojevi {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.brojka {
    flex: 1 1 150px;
    max-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: .8rem 1rem;
}

    .brojka .broj {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
    }

    .brojka .opis {
        font-size: .75rem;
        color: var(--muted);
        margin-top: .15rem;
    }

    /* „Pazi" nije samo crven broj nego i crvena traka: broj 0 u crvenom i broj 12 u crvenom
       izgledaju isto na brz pogled, a traka kaže da tu ima posla. */
    .brojka.pazi {
        border-color: color-mix(in srgb, var(--err) 35%, var(--border));
        box-shadow: inset 3px 0 0 var(--err), var(--shadow-sm);
    }

        .brojka.pazi .broj {
            color: var(--err);
        }

/* ------------------------------------------------------------------------------------
   POVRŠINE: tabele i obrasci
   ------------------------------------------------------------------------------------ */
.tabela {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: .35rem;
    overflow-x: auto;
}

.napomena {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.55;
    max-width: 68rem;
}

.obrazac {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    align-items: flex-end;
}

    .obrazac.uski {
        margin-bottom: .75rem;
    }

    .obrazac label {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        font-size: .76rem;
        font-weight: 600;
        color: var(--muted);
    }

    .obrazac input,
    .obrazac select,
    .obrazac textarea {
        height: var(--ctrl-h);
        min-width: 170px;
        padding: 0 .55rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: .85rem;
    }

    .obrazac textarea {
        height: auto;
        padding: .5rem .55rem;
        line-height: 1.5;
    }

    .obrazac input:focus,
    .obrazac select:focus,
    .obrazac textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: var(--fokus-prsten);
    }

    .obrazac label:has(input[type="checkbox"]) {
        flex-direction: row;
        align-items: center;
        gap: .45rem;
        color: var(--text);
        font-weight: 500;
        font-size: .85rem;
    }

    .obrazac input[type="checkbox"] {
        min-width: 0;
        width: 1rem;
        height: 1rem;
        accent-color: var(--primary);
    }

/* ------------------------------------------------------------------------------------
   DUGMAD — puna je radnja koja menja stanje, obrisana je sve ostalo (ERP standard §6).
   ------------------------------------------------------------------------------------ */
.obrazac button,
button.dugme,
a.dugme {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: var(--ctrl-h);
    padding: 0 .95rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--na-primary);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .obrazac button:hover,
    button.dugme:hover,
    a.dugme:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: var(--na-primary);
    }

    .obrazac button:focus-visible,
    button.dugme:focus-visible,
    a.dugme:focus-visible {
        outline: none;
        box-shadow: var(--fokus-prsten);
    }

    .obrazac button:disabled,
    button.dugme:disabled {
        background: color-mix(in srgb, var(--primary) 35%, var(--surface));
        border-color: transparent;
        cursor: default;
    }

/* Obrisano dugme — radnje koje ne menjaju ništa (izvoz, preuzimanje). */
a.dugme.obrisano,
button.dugme.obrisano {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--border-strong);
}

    a.dugme.obrisano:hover,
    button.dugme.obrisano:hover {
        background: var(--primary-soft);
        border-color: var(--primary);
        color: var(--primary-soft-text);
    }

/* ------------------------------------------------------------------------------------
   PORUKE
   ------------------------------------------------------------------------------------ */
.poruka,
.greska {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .85rem;
    line-height: 1.5;
    border: 1px solid;
}

.poruka {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    color: var(--ok);
}

.greska {
    background: var(--err-soft);
    border-color: color-mix(in srgb, var(--err) 35%, transparent);
    color: var(--err);
}

    .poruka::before,
    .greska::before {
        font-family: 'bootstrap-icons';
        flex: none;
        line-height: 1.4;
    }

.poruka::before {
    content: '\F26B'; /* check-circle */
}

.greska::before {
    content: '\F33A'; /* exclamation-triangle */
}

/* ------------------------------------------------------------------------------------
   PILL BEDŽ SA TAČKOM — stanja kartica, prijava, zamena (ERP standard §5).
   Boja iz tokena statusa, pa bedž sam prati tamni režim. Klasu bira `PrikaznaImena.Klasa`.
   ------------------------------------------------------------------------------------ */
.bedz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

    .bedz::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: none;
    }

.bedz-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.bedz-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.bedz-err {
    background: var(--err-soft);
    color: var(--err);
}

.bedz-info {
    background: var(--info-soft);
    color: var(--info);
}

.bedz-primary {
    background: var(--primary-soft);
    color: var(--primary-soft-text);
}

.bedz-neutral {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}

/* ------------------------------------------------------------------------------------
   PROSTE TABELE (detalji zapisa i mali spiskovi)
   ------------------------------------------------------------------------------------ */
table.prosta {
    border-collapse: collapse;
    width: 100%;
}

    table.prosta th {
        text-align: left;
        padding: .45rem .7rem;
        width: 150px;
        color: var(--muted);
        font-weight: 600;
        font-size: .78rem;
    }

    table.prosta td {
        padding: .45rem .7rem;
        font-size: .85rem;
    }

    table.prosta.siroka th {
        width: auto;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    table.prosta.siroka td {
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
        vertical-align: top;
    }

    table.prosta.siroka tbody tr:hover {
        background: color-mix(in srgb, var(--primary) 4%, transparent);
    }

    table.prosta.siroka input,
    table.prosta.siroka select {
        height: 28px;
        padding: 0 .4rem;
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: .8rem;
    }

    table.prosta.siroka button {
        height: 28px;
        padding: 0 .7rem;
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        background: var(--surface);
        color: var(--primary);
        font: inherit;
        font-size: .78rem;
        font-weight: 600;
        cursor: pointer;
    }

        table.prosta.siroka button:hover {
            background: var(--primary-soft);
            border-color: var(--primary);
        }

    table.prosta code,
    table.prosta.siroka code {
        background: var(--surface-2);
        border: 1px solid var(--border);
        padding: .1rem .35rem;
        border-radius: 5px;
        font-size: .78rem;
    }

    table.prosta small {
        color: var(--muted);
    }

/* ------------------------------------------------------------------------------------
   PRIJAVA I JAVNE STRANICE — deljeni ekran: levo brend panel, desno obrazac (ERP §4).
   ------------------------------------------------------------------------------------ */
.prazno {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    min-height: 100vh;
    background: var(--bg);
}

.brend-panel {
    background: var(--prijava-panel);
    color: #fff;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
}

    .brend-panel .znak {
        display: flex;
        align-items: center;
        gap: .6rem;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .brend-panel .znak i {
        font-size: 1.8rem;
    }

    .brend-panel p {
        color: rgba(255, 255, 255, .78);
        font-size: .9rem;
        line-height: 1.6;
        max-width: 26rem;
        margin: 0;
    }

    /* Kratak spisak onoga što portal radi. Nije ukras: `/registracija` i `/zamena/{token}` otvara
       obveznik koji portal nikad nije video i koji ne zna da li je na pravom mestu. */
    .brend-panel ul {
        list-style: none;
        margin: .75rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .55rem;
    }

    .brend-panel li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        color: rgba(255, 255, 255, .82);
        font-size: .85rem;
        line-height: 1.5;
    }

        .brend-panel li i {
            color: #7cc4ff;
            font-size: .95rem;
            line-height: 1.4;
            flex: none;
        }

    .brend-panel .dno {
        margin-top: auto;
        padding-top: 2rem;
        color: rgba(255, 255, 255, .45);
        font-size: .72rem;
    }

.prazno-sadrzaj {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.prijava {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    width: 400px;
    max-width: 100%;
}

    .prijava.sirok {
        width: 560px;
    }

    /* Zaglavlje kartice: ikonica u mekom kvadratu, naslov, i podnaslov koji kaže šta se ovde radi.
       Podnaslov nije ukras — na prijavnim ekranima čovek najčešće ne zna zašto je baš tu stigao
       (istekla sesija? prisilno na TOTP?), pa jedan red ispod naslova štedi jedan telefonski poziv. */
    .prijava-vrh {
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        margin-bottom: 1.35rem;
    }

        .prijava-vrh .ikona {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            flex: none;
            border-radius: 11px;
            background: var(--primary-soft);
            color: var(--primary-soft-text);
            font-size: 1.15rem;
        }

        .prijava-vrh h1 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -.01em;
            line-height: 1.3;
        }

        .prijava-vrh .podnaslov {
            margin: .2rem 0 0;
            color: var(--muted);
            font-size: .82rem;
            line-height: 1.5;
        }

    .prijava h1 {
        margin: 0 0 1.15rem;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .prijava label {
        display: block;
        margin-bottom: .85rem;
        font-size: .74rem;
        font-weight: 600;
        letter-spacing: .01em;
        color: var(--muted);
    }

    .prijava input {
        display: block;
        width: 100%;
        height: 40px;
        margin-top: .35rem;
        padding: 0 .7rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: .9rem;
        transition: border-color .12s ease, box-shadow .12s ease;
    }

        .prijava input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--fokus-prsten);
        }

    .prijava button {
        width: 100%;
        height: 42px;
        margin-top: .5rem;
        border: 0;
        border-radius: var(--radius-sm);
        background: var(--primary);
        color: var(--na-primary);
        font: inherit;
        font-size: .92rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .12s ease;
    }

        .prijava button:hover {
            background: var(--primary-hover);
        }

        .prijava button:focus-visible {
            outline: none;
            box-shadow: var(--fokus-prsten);
        }

    .prijava code {
        background: var(--surface-2);
        border: 1px solid var(--border);
        padding: .3rem .5rem;
        border-radius: var(--radius-sm);
        font-size: 1rem;
        letter-spacing: .06em;
    }

    .prijava ol,
    .prijava p {
        font-size: .85rem;
        color: var(--muted);
        line-height: 1.6;
    }

    .prijava ol {
        padding-left: 1.2rem;
    }

/* Na uskom ekranu brend panel pada iznad obrasca i stiša se na traku. */
@media (max-width: 860px) {
    .prazno {
        grid-template-columns: 1fr;
    }

    .brend-panel {
        padding: 1.5rem;
    }

        .brend-panel p {
            display: none;
        }

    .meni {
        width: 100%;
        flex: none;
    }

    .portal {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------------------------
   SYNCFUSION GRID — gustina iz tokena. `!important` je nužan: tema piše padding direktno
   na iste selektore. `RowHeight` se NAMERNO ne koristi (isto zaključak kao u ERP-u):
   fiksira visinu reda pa seče ćelije sa dva reda teksta.
   ------------------------------------------------------------------------------------ */
.e-grid .e-rowcell {
    padding: var(--row-py) var(--cell-px) !important;
    font-size: var(--grid-fs) !important;
    line-height: 1.45 !important;
}

.e-grid .e-headercell {
    padding-left: var(--cell-px) !important;
    padding-right: var(--cell-px) !important;
}

.e-grid .e-headercelldiv {
    font-size: var(--grid-fs) !important;
    font-weight: 600 !important;
}

.e-grid {
    border: 0 !important;
    border-radius: var(--radius) !important;
}

/* ------------------------------------------------------------------------------------
   UKLJUČIVANJE TOTP-a — koraci, QR kod, ključ za ručni unos, polje za kod.
   Ovo je jedini ekran koji čovek prolazi TAČNO JEDNOM, pod pritiskom (bez njega ne vidi
   portal), i najčešće sa telefonom u drugoj ruci. Zato je raspored razvučen umesto zbijen:
   svaki korak je odvojen blok, a ne rečenica u nizu teksta.
   ------------------------------------------------------------------------------------ */
/* QR i koraci stoje JEDAN PORED DRUGOG. U jednoj koloni je kartica bila viša od ekrana na
   laptopu (798 px na 720), pa se do polja za kod moralo skrolovati — a to je polje zbog kog
   je čovek uopšte na ovoj stranici. */
.totp-raspored {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    margin: 1.1rem 0;
}

@media (max-width: 560px) {
    .totp-raspored {
        grid-template-columns: 1fr;
    }
}

.koraci {
    list-style: none;
    counter-reset: korak;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

    .koraci li {
        counter-increment: korak;
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        font-size: .85rem;
        line-height: 1.5;
        color: var(--text);
    }

        .koraci li::before {
            content: counter(korak);
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            flex: none;
            border-radius: 50%;
            background: var(--primary-soft);
            color: var(--primary-soft-text);
            font-size: .72rem;
            font-weight: 700;
        }

/* ⛔ QR kod stoji na BELOJ podlozi i u tamnom režimu. Kod je crn na providnom, pa bi na
   tamnoj kartici bio crno na tamnom — čitljiv taman toliko da čovek pomisli da mu telefon
   ne radi. Bela je ovde vrednost sa značenjem, ne ton teme, pa je jedini opravdan heks. */
.qr-okvir {
    display: grid;
    place-items: center;
    margin: 0;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

    .qr-okvir img {
        display: block;
        width: 168px;
        height: 168px;
        image-rendering: pixelated; /* QR se ne sme mekšati pri skaliranju */
    }

/* Ključ za ručni unos — za telefon koji JESTE telefon na kom se pravi kod, pa QR ne može
   da se skenira. Razdvojen u grupe po četiri znaka, jer se prepisuje rukom. */
.kljuc-blok {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.2rem;
    padding: .6rem .7rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

    .kljuc-blok code {
        flex: 1;
        min-width: 0;
        font-size: .82rem;
        letter-spacing: .06em;
        word-break: break-all;
        color: var(--text);
        background: none;
        border: 0;
        padding: 0;
    }

    .kljuc-blok button {
        width: auto;
        height: 30px;
        margin: 0;
        padding: 0 .6rem;
        flex: none;
        border: 1px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface);
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600;
    }

        .kljuc-blok button:hover {
            background: var(--primary-soft);
            border-color: var(--primary);
            color: var(--primary-soft-text);
        }

/* Šestocifreni kod: veliko, razmaknuto, centrirano polje. Kod se prepisuje sa ekrana
   telefona pod vremenskim rokom, pa svaki znak mora da se vidi bez zagledanja. */
.kod-unos {
    text-align: center;
    font-size: 1.4rem !important;
    font-weight: 600;
    letter-spacing: .35em;
    text-indent: .35em; /* poništava razmak posle poslednjeg znaka, da tekst ostane centriran */
    height: 52px !important;
    font-variant-numeric: tabular-nums;
}

/* Red ispod kartice: povratni link, sitno i nenametljivo. */
.prijava-dno {
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
    font-size: .8rem;
    color: var(--muted);
}

/* Prekidač teme na javnim ekranima — u uglu, da ne odvlači pažnju sa obrasca. */
.prazno-sadrzaj {
    position: relative;
}

    .prazno-sadrzaj .ikona-dugme {
        position: absolute;
        top: 1.1rem;
        right: 1.25rem;
    }

/* ------------------------------------------------------------------------------------
   TRAKA UPOZORENJA — stanje sistema koje se mora popraviti, ne poruka o jednoj radnji.
   Stoji ispod zaglavlja na SVAKOJ stranici dok traje, jer se tiče celog portala
   (npr. „nema ključa za potpisivanje" — tada nijedna licenca ne može da se izda).
   ------------------------------------------------------------------------------------ */
.traka-upozorenje {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0;
    padding: .7rem 1.5rem;
    background: var(--warn-soft);
    color: var(--warn);
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    font-size: .84rem;
    line-height: 1.5;
}

    .traka-upozorenje i {
        font-size: 1rem;
        line-height: 1.4;
        flex: none;
    }

    .traka-upozorenje strong {
        display: block;
    }

    .traka-upozorenje code {
        background: color-mix(in srgb, var(--warn) 12%, transparent);
        padding: .05rem .3rem;
        border-radius: 4px;
    }