/* ====================================================================================
   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`.
   ------------------------------------------------------------------------------------ */
/* 01.10.2026 (Marko): meni je širok koliko najduži naziv (ne fiksnih 248px), a slova su veća. */
.meni {
    width: max-content;
    flex: 0 0 auto;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

/* 02.10.2026 (Marko): logo i natpis „L-PFR portal" su CENTRIRANI jedan ispod drugog. Natpis je do
   tada stajao uz levu ivicu ispod centriranog oblaka i delovao kao da je zalutao. */
.meni .znak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.15rem 1.15rem 1rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--sidebar-border);
    color: #fff;
    text-decoration: none;
}

    /* Logotip ima svoj `viewBox`, pa mu se zadaje samo ŠIRINA; visina ide iz odnosa stranica.
       Da se zada i visina, znak bi se izobličio čim se logotip jednom prepravi. */
    .meni .znak img {
        width: 128px;
        height: auto;
        display: block;
    }

    /* Pun logotip nosi ime firme; ovo ispod kaže KOJI je to njihov program. Veće od 02.10.2026
       (Marko) — natpis se jedva čitao ispod oblaka. */
    .meni .znak span {
        font-weight: 500;
        font-size: 1.1rem;
        letter-spacing: .02em;
        color: var(--sidebar-muted);
    }

    .meni .znak:hover span {
        color: #fff;
    }

/* Natpis sekcije — deli meni na celine umesto da bude spisak od trinaest stavki. */
.meni .sekcija {
    padding: .9rem 1.15rem .3rem;
    font-size: .72rem;
    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: .95rem;
    line-height: 1.4;
    padding-right: 1.1rem;
}

    .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 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-height: 50px;
    padding: 0 1.5rem 0 1rem;
    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;
}

/* Burger (02.10.2026): levo u zaglavlju, ostalo ostaje desno (`margin-right: auto`). Sakriven meni
   važi samo na RAČUNARU — na telefonu je meni fioka iz donjeg menija i burgera nema (vidi ispod). */
/* Burger je JEDNAKO udaljen od menija levo i od crte naslova desno (Marko, 02.10.2026): levo ga drži
   `padding-left` zaglavlja (1rem), desno njegova margina + razmak `flex`-a (.5rem + .5rem). */
.meni-burger {
    margin-right: .5rem;
    font-size: 1.15rem;
}

/* Naslov strane pored burgera, kao u NITErp-u (02.10.2026). Strana ga šalje kroz `SectionContent`;
   kad ga ne pošalje, mesto je prazno i ne zauzima ništa. */
.zag-naslov {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: .85rem;
    border-left: 1px solid var(--border);
}

    .zag-naslov:empty {
        display: none;
    }

    .zag-naslov h1 {
        margin: 0;
        font-size: 1.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* Blazor posle navigacije stavi fokus na `h1` (`FocusOnNavigate` u Routes.razor — čitač
           ekrana tako pročita gde je čovek stigao). Naslov nije kontrola, pa okvir fokusa oko njega
           samo zbunjuje („nekad ima okvir") — fokus ostaje, okvir ne. */
        .zag-naslov h1:focus {
            outline: none;
        }

@media (max-width: 600px) {
    .zag-naslov {
        padding-left: 0;
        border-left: 0;
    }

        .zag-naslov h1 {
            font-size: 1.05rem;
        }

        .zag-naslov h1 .naslov-pogleda {
            display: none;
        }
}

@media (min-width: 861px) {
    .portal.meni-skriven > .meni {
        display: none;
    }
}

@media (max-width: 860px) {
    .meni-burger {
        display: none;
    }
}

/* Naziv firme na sredini zaglavlja (02.10.2026). Prvo je bio na sredini CELOG zaglavlja (apsolutno),
   ali je tako delovao „pobegao udesno" — Marko: centrirati u prostoru između burgera i čipa
   Produkcija/Sandbox. Zato je sada običan član `flex`-a koji zauzme sav slobodan prostor i u njemu
   centrira tekst; dugačak naziv se skraćuje (`min-width: 0` + tri tačke), ne gura dugmad. */
.zaglavlje-firma {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1rem;
    text-align: center;
    font-size: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .01em;
}

/* ------------------------------------------------------------------------------------
   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). */
/* Ivica u boji akcenta (Marko, 03.10.2026): sa sivom ivicom koja se stapa sa pozadinom „obrisano"
   dugme je izgledalo NIŽE od punog do sebe, iako su iste visine (izmereno: oba `--ctrl-h`). */
a.dugme.obrisano,
button.dugme.obrisano {
    background: var(--surface);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 55%, 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,
.upozorenje {
    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 */
}

/* Upozorenje (02.10.2026): stanje koje je NAMERNO uključeno i traje — hitno izdanje. Nije greška,
   ali ne sme ni da izgleda kao obična potvrda, jer se mora isključiti kad posao završi. */
.upozorenje {
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 45%, transparent);
    color: var(--text);
}

    .upozorenje::before {
        font-family: 'bootstrap-icons';
        flex: none;
        line-height: 1.4;
        content: '\F46D'; /* lightning-charge */
        color: var(--warn);
    }

.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;
    }

    /* `middle`, ne `top` (Marko, 02.10.2026, Naplata): kvačica i tekst u redu stoje na istoj visini. */
    table.prosta.siroka td {
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
        vertical-align: middle;
    }

    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;
    }

    /* Kvačica nije polje za unos: bez visine polja (28 px) i okvira, inače red naraste i kvačica
       padne ispod teksta. */
    table.prosta.siroka input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        accent-color: var(--primary);
    }

    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);
}

/* Tekstura koda iza panela — kroz `::before`, a NE kao drugi sloj u `background`.
   ⛔ Razlog je konkretan: `--prijava-panel` nije boja nego PRELIV
   (`linear-gradient(150deg, #050d1a, #0b1f3a, #1570ef)`), pa `background-color: var(--prijava-panel)`
   nije važeća vrednost — deklaracija se odbaci i panel ostane providan. Nađeno 24.08.2026 tako što
   je izračunata boja panela u pregledaču bila `rgba(0,0,0,0)`, a panel je ipak izgledao tamno jer
   ga je pokrivao moj sloj preko njega. Preliv teme bi tako tiho nestao.
   Sloj preko preliva ne može da se prigne bez `opacity`, a `opacity` na `background` ne postoji —
   otuda pseudoelement. Deca dobijaju `z-index`, inače tekstura ide preko teksta. */
.brend-panel {
    position: relative;
    overflow: hidden;
    background: var(--prijava-panel);
    color: #fff;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
}

    .brend-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../brend/pozadina-kod-tamna.png") center / cover no-repeat;
        opacity: .25; /* odluka Neše 24.08.2026 — jače nego prvobitnih .16 */
        pointer-events: none;
    }

    /* Sadržaj iznad teksture. Bez ovoga bi tekstura, kao kasniji sloj, prekrila logotip i tekst. */
    .brend-panel > * {
        position: relative;
        z-index: 1;
    }

    .brend-panel .znak {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
        margin-bottom: .5rem;
    }

    .brend-panel .znak img {
        width: 230px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .brend-panel .znak span {
        font-size: .95rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .72);
    }

    .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;
        }

        /* Pločica proizvoda. Ne dobija `--primary-soft` podlogu kao ikonice pored nje: sama nosi
           svoju tamnu podlogu iz SVG-a, pa bi okvir u boji teme oko nje bio okvir oko okvira. */
        .prijava-vrh .plocica {
            width: 44px;
            height: 44px;
            flex: none;
            border-radius: 11px;
            display: block;
        }

        .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;
    }

/* ------------------------------------------------------------------------------------
   MENI NA TELEFONU (02.10.2026, Neša) — DONJI MENI kao u mobilnim aplikacijama: Početna,
   Kartice, Instalacije i „Više" (☰), koje izvlači meni kao fioku sa leve strane - po uzoru
   na NITErp (svetla traka, aktivna stavka u boji akcenta, zavesa preko ostatka). Distributer dole
   ima svoje tri stavke. Vidi GlavniIzgled.
   Na računaru se ništa ne menja: omotači ne postoje za raspored (`display: contents`),
   a donjeg menija nema.
   ------------------------------------------------------------------------------------ */
.meni-prekidac {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.meni-vrh,
.meni-stavke {
    display: contents;
}

.donji-meni,
.meni-zavesa {
    display: none;
}

/* Na uskom ekranu brend panel pada iznad obrasca i stiša se na traku. */
@media (max-width: 860px) {
    .portal {
        --donji-visina: 58px;
    }

    /* Bočni meni je FIOKA sa leve strane (kao NITErp): „Više" je izvlači preko sadržaja, zavesa
       zatamni ostatak, dodir na zavesu je vraća. `visibility` da zatvorena fioka ne prima Tab. */
    .meni {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(300px, 85vw);
        z-index: 1045;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .2s ease, visibility .2s;
    }

    .meni-prekidac:checked ~ .meni {
        transform: translateX(0);
        visibility: visible;
    }

    .meni-prekidac:checked ~ .meni-zavesa {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(10, 13, 20, .4);
        cursor: pointer;
    }

    .meni-vrh {
        display: flex;
        align-items: center;
    }

        .meni-vrh .znak {
            flex-direction: row;
            align-items: center;
            gap: .6rem;
            padding: .6rem .9rem;
            margin: 0;
            border-bottom: 0;
        }

            .meni-vrh .znak img {
                width: 60px;
                height: auto;
            }

    .meni-stavke {
        display: block;
        padding-bottom: .75rem;
        border-top: 1px solid var(--sidebar-border);
    }

    /* Donji meni: uvek na dnu, palcem dostupan. Svetla traka kao u NITErp-u (prati temu), ispod
       zavese (1040) - otvorena fioka i zavesa idu PREKO nje. */
    .donji-meni {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1039;
        height: calc(var(--donji-visina) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
    }

        .donji-meni a,
        .donji-meni label {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 6px 4px 5px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

            .donji-meni a i,
            .donji-meni label i {
                font-size: 20px;
                line-height: 1;
            }

            .donji-meni span {
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* NavLink sam dodaje `.active` stavci čija je strana otvorena. */
            .donji-meni a.active {
                color: var(--primary);
                font-weight: 600;
            }

        .donji-meni .ikona-zatvori {
            display: none;
        }

    .meni-prekidac:checked ~ .donji-meni .ikona-otvori {
        display: none;
    }

    .meni-prekidac:checked ~ .donji-meni .ikona-zatvori {
        display: inline;
    }

    .meni-prekidac:checked ~ .donji-meni label {
        color: var(--primary);
    }

    .meni-prekidac:focus-visible ~ .donji-meni label {
        outline: 2px solid var(--primary);
        outline-offset: -4px;
    }

    /* Sadržaj se ne sme sakriti iza donjeg menija. */
    main {
        padding-bottom: calc(var(--donji-visina) + env(safe-area-inset-bottom, 0px));
    }

    .prazno {
        grid-template-columns: 1fr;
    }

    .brend-panel {
        padding: 1.5rem;
    }

        .brend-panel p {
            display: none;
        }

        /* Na telefonu panel je traka iznad obrasca — logotip ostaje (jedini je znak čiji je
           portal), ali se stiša da ne pojede pola ekrana pre nego što se vidi polje za ime. */
        .brend-panel .znak img {
            width: 160px;
        }

    .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;
}

/* JEDAN FONT svuda (Marko, 02.10.2026): Syncfusion svojim kontrolama zadaje sistemski font (Segoe UI),
   a pregledač poljima i dugmadima Arial — portal je Inter (`--font`, portal-tema.css). Ikonice
   (`e-icons`, `bootstrap-icons`) imaju svoj font i ovo ih ne dira: one ga zadaju na sebi ili na
   `::before`, a ovde se ne gađaju. Provereno u pregledaču: posle ovoga nijedan vidljiv element na
   Karticama nije u drugom fontu osim ikonica i monospace polja. */
.e-grid,
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-groupcaption,
.e-grid .e-gridheader,
.e-grid .e-content,
.e-pager,
.e-pager div:not(.e-icons),
.e-pager a,
.e-pager span:not(.e-icons),
.e-input-group,
.e-input-group input.e-input,
input.e-input,
.e-ddl,
.e-popup,
.e-list-item,
.e-dialog,
.e-btn,
.e-tooltip-wrap,
.e-checkbox-wrapper .e-label,
.e-filter-popup,
.e-excelfilter,
.e-columnchooser,
input,
button,
select,
textarea {
    font-family: var(--font) !important;
}

/* Kolone popune celu širinu grida (Marko, 02.10.2026: „podaci na pola, ostatak prazan"). Syncfusion
   tabeli upiše širinu = zbir kolona; sa `100%` i fiksnim rasporedom tabela je široka KOLIKO JE VEĆE od
   to dvoje — mali grid se raširi (višak se podeli kolonama), a širok i dalje skroluje. Zaglavlje i
   sadržaj su dve tabele sa istim kolonama, pa obe dobijaju isto pravilo i ostaju poravnate. */
.e-grid .e-gridheader .e-table,
.e-grid .e-gridcontent .e-table {
    width: 100% !important;
}

/* ------------------------------------------------------------------------------------
   GRID NA TELEFONU - red kao kartica (`PrikazGrida`, Neša 02.10.2026).
   Syncfusion piše naziv kolone ispred vrednosti (`td::before` iz `data-cell`) i za to mu treba levi
   razmak u ćeliji. Gustina iznad (`padding ... !important`) ga je brisala, pa su naziv i vrednost
   padali jedan preko drugog. Ovde je ćelija red sa dve kolone: naziv (38 %) | vrednost.
   ------------------------------------------------------------------------------------ */
/* ⚠ Tabela nosi širinu zbira kolona (Instalacije: ~3000 px, širine iz sačuvanog pogleda) - u kartici
   bi naziv zauzeo ceo ekran, a vrednost otišla desno van vidika. Kartica je široka koliko i ekran. */
.e-grid.e-row-responsive .e-gridcontent table.e-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

.e-grid.e-row-responsive .e-gridcontent tr.e-row {
    display: block;
    margin: 0 0 .6rem;
    padding: .35rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.e-grid.e-row-responsive .e-gridcontent td.e-rowcell:not(.e-hide) {
    display: flex !important;
    align-items: baseline;
    gap: .75rem;
    width: auto !important;
    min-height: 0 !important;
    padding: .28rem .85rem !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
}

    .e-grid.e-row-responsive .e-gridcontent td.e-rowcell::before {
        position: static !important;
        flex: 0 0 38%;
        width: auto !important;
        padding: 0 !important;
        color: var(--muted);
        font-size: .78rem;
        font-weight: 500;
        white-space: normal;
    }

    /* Kvacičica za izbor nema naziv - ne zauzima levu kolonu. */
    .e-grid.e-row-responsive .e-gridcontent td.e-gridchkbox::before {
        display: none;
    }

/* ------------------------------------------------------------------------------------
   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. */
/* „Zaboravljena lozinka?" ispod dugmeta za prijavu (02.10.2026). */
.prijava-link {
    margin: .85rem 0 0;
    text-align: center;
    font-size: .85rem;
}

.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;
    }

/* ------------------------------------------------------------------------------------
   KLIZNI PANEL (slide-over) — unos i izmena, umesto obrasca ispod tabele.

   ⛔ Sve boje idu kroz tokene teme (`--surface`, `--border`, `--text`…), pa panel radi u
      svetloj i tamnoj temi bez ijedne dodatne linije. Zapisano jer je bilo primamljivo
      ukucati `#fff` — a to je tačno ono što se posle pola godine vidi kao beli pravougaonik
      u tamnoj temi.

   ⚠️ `position: fixed` a ne `absolute`: panel mora da stoji preko cele visine prozora bez
      obzira na to koliko je stranica ispod njega skrolovana.
   ------------------------------------------------------------------------------------ */

.klizni-zastor {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    backdrop-filter: blur(2px);
    z-index: 1200;
    animation: klizni-utapanje .16s ease-out;
}

.klizni-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: klizni-ulazak .2s cubic-bezier(.32, .72, 0, 1);
}

/* Siroka varijanta: obrasci sa mnogo polja (npr. „Novo izdanje").
   Na 560px se takav obrazac mora skrolovati, pa se izgubi pregled — a bas taj panel
   potpisuje manifest, gde se sadrzaj proverava OKOM pre potpisa.
   `92vw` drzi zastor vidljivim, da se i dalje vidi da je panel iznad strane. */
.klizni-panel--siroko {
    width: min(920px, 92vw);
}

/* Dok je klizni panel otvoren, strana iza njega ne skroluje — inače su to dva skrola jedan pored
   drugog (Marko, 03.10.2026). `scrollbar-gutter` čuva mesto, da se strana ne pomeri u stranu. */
html:has(.klizni-panel) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Naslov kliznog panela, „?" i X — centrirani po visini (Marko, 03.10.2026). */
.klizni-panel > .klizni-zaglavlje {
    align-items: center;
}

.klizni-desno {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

.klizni-zaglavlje {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem .9rem;
    border-bottom: 1px solid var(--border);
}

    .klizni-zaglavlje h3 {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 650;
        color: var(--text);
    }

.klizni-podnaslov {
    margin: .3rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 42rem;
}

.klizni-zatvori {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .klizni-zatvori:hover {
        background: var(--surface-2);
        color: var(--text);
    }

/* ⚠️ Telo je jedino što skroluje. Zaglavlje i podnožje ostaju vidljivi — inače se dugme
   „Sačuvaj" izgubi ispod ivice na dugom obrascu, što je čest način da neko pomisli da ga nema. */
.klizni-telo {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
}

    /* Obrazac u panelu ide u JEDNU kolonu: panel je uzak, a red po red se čita brže od
       rasutih polja. Zato se ovde poništava `flex-wrap` iz `.obrazac`. */
    .klizni-telo .obrazac {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .95rem;
    }

    /* U SIROKOM panelu obrazac ide u DVE kolone.
       Sirina sama po sebi nista ne resava: polja su i dalje jedno ispod drugog, pa je panel samo
       postao siri i jednako dug. Tek dve kolone prepolove visinu, a bas visina je terala skrolovanje
       na ekranu na kom se pred potpis OKOM proverava sadrzaj manifesta (28.08.2026).
       ⛔ Polja koja nose dugacak tekst (adrese, textarea) ostaju preko obe kolone — polovina sirine bi
          im pokvarila citljivost, a to je ono zbog cega se panel i sirio. */
    .klizni-panel--siroko .klizni-telo .obrazac {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.15rem;
        row-gap: .95rem;
        align-items: start;
    }

        .klizni-panel--siroko .klizni-telo .obrazac > label.puna-sirina {
            grid-column: 1 / -1;
        }

/* Na uskom ekranu se dve kolone gube — 460px po koloni nije kolona nego procep. */
@media (max-width: 900px) {
    .klizni-panel--siroko .klizni-telo .obrazac {
        display: flex;
        flex-direction: column;
    }
}

        .klizni-telo .obrazac label {
            width: 100%;
        }

        .klizni-telo .obrazac input,
        .klizni-telo .obrazac select,
        .klizni-telo .obrazac textarea {
            width: 100%;
            min-width: 0;
        }

.klizni-podnozje {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

@keyframes klizni-ulazak {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes klizni-utapanje {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ⚠️ Ko je isključio animacije u sistemu, ne dobija ih ni ovde. */
@media (prefers-reduced-motion: reduce) {
    .klizni-panel,
    .klizni-zastor {
        animation: none;
    }
}

/* Na telefonu panel zauzima ceo ekran — 560px na 390px širine nema smisla. */
@media (max-width: 640px) {
    .klizni-panel,
    .klizni-panel--siroko {
        width: 100vw;
        border-left: 0;
    }
}

/* Traka sa radnjama iznad tabele — mesto na kom stoje dugmad koja otvaraju klizni panel. */
.traka-radnji {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 .85rem;
}

/* Objašnjenja koja su ranije stajala uz obrazac ostaju na stranici, ispod tabele.
   ⚠️ Namerno NISU premeštena u panel: pravilo („bez telefona i e-maila licenca se ne izdaje")
   mora da se vidi i onome ko ništa ne dodaje, jer objašnjava šta na spisku znači prazna ćelija. */
.napomene-ekrana {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--border);
}

/* ⛔ NEMA novog rečnika za dugmad. Portal već ima konvenciju (ERP standard §6, gore):
   `.dugme` je PUNA radnja koja menja stanje, `.dugme.obrisano` je sve ostalo. Prva verzija
   kliznog panela uvela je `.dugme.primarno` — drugi naziv za isto — pa je uklonjena.
   ⚠️ Dva imena za istu stvar su isti oblik greške kao `deb` naspram `linux-x64`. */


/* Sitna dugmad u redu tabele — radnje nad zapisom (upari, prebaci, skini). */
button.dugme.sitno {
    height: 26px;
    padding: 0 .55rem;
    font-size: .74rem;
    margin-right: .3rem;
}

/* ------------------------------------------------------------------------------------
   PREGLED — naslovi grupa i pločica koja vodi dalje (01.10.2026)
   Brojke instalacija i „Flota po verzijama" su preseljene ovamo sa `/instalacije`.
   ------------------------------------------------------------------------------------ */
h2.naslov-grupe {
    font-size: .95rem;
    font-weight: 600;
    margin: 1.1rem 0 .55rem;
}

a.brojka {
    color: inherit;
    text-decoration: none;
}

    a.brojka:hover {
        border-color: var(--primary);
    }

/* Pločica kao dugme (Novčanik, 04.10.2026): izgleda kao `.brojka`, klik bira distributera. */
button.brojka {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    button.brojka:hover {
        border-color: var(--primary);
    }

    .brojka.on {
        border-color: var(--primary);
        box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm);
    }

    .brojka .broj small {
        font-size: .9rem;
        font-weight: 600;
        color: var(--muted);
    }

/* Brojevi u prostoj tabeli desno, i NASLOV kolone desno (pravilo vlasnika iz ERP standarda §5:
   naziv levo nad brojevima desno razdvaja glavu od tela tabele). */
table.prosta th.broj,
table.prosta td.broj {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------------------
   MENI — podstavke (Instalacije → Produkcija, Sandbox)
   ------------------------------------------------------------------------------------ */
.meni a.podstavka {
    margin-left: 1.65rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .9rem;
}

    .meni a.podstavka i {
        font-size: .85rem;
    }

/* ------------------------------------------------------------------------------------
   POGLEDI — prekidači u traci grida (Sve / Produkcija / Sandbox), isto kao ERP
   `erp-grid-pogledi` (M-N673): isprekidan obrub, izabran je NEŽNA plava (12% ispune, pun
   obrub), ne puna — puna plava ostaje samo glavnoj radnji ekrana.
   ------------------------------------------------------------------------------------ */
.pogledi {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pogled {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all .12s ease;
    font-family: inherit;
    cursor: pointer;
}

    .pogled i {
        font-size: .8rem;
    }

    .pogled b {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .pogled:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

    .pogled.on {
        border-style: solid;
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        color: color-mix(in srgb, var(--primary) 80%, var(--text));
    }

h1 .naslov-pogleda {
    font-weight: 400;
    color: var(--muted);
    margin-left: .2rem;
}

    h1 .naslov-pogleda::before {
        content: '— ';
    }

/* ------------------------------------------------------------------------------------
   TRAKA IZNAD GRIDA (ERP standard §5, „zaglavlje grida"): broj levo, pretraga, radnje desno.
   Traka i grid su JEDNA površina — traka nema donju ivicu, a grid ispod nema gornje uglove.
   ------------------------------------------------------------------------------------ */
.traka-grida {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: .6rem .75rem;
}

    .traka-grida + .tabela {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.traka-grida-broj {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--muted);
}

    .traka-grida-broj strong {
        color: var(--text);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
    }

/* Alati desno (ERP `erp-grid-alati`): pretraga pa ikonice. */
.traka-grida-alati {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.traka-grida-trazi {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

    .traka-grida-trazi i {
        position: absolute;
        left: 9px;
        color: var(--muted);
        font-size: .8rem;
        pointer-events: none;
    }

    .traka-grida-trazi input {
        height: calc(var(--ctrl-h) - 4px);
        width: 210px;
        padding: 0 8px 0 28px;
        border: 1px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: .8rem;
        outline: none;
    }

        .traka-grida-trazi input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
        }

/* Ikonica-dugme u traci (ERP `erp-grid-ikb`); `.on` = uključeno (npr. red za filtere). */
button.ikona-alat {
    width: calc(var(--ctrl-h) - 4px);
    height: calc(var(--ctrl-h) - 4px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--muted);
    font-size: .85rem;
    cursor: pointer;
}

    button.ikona-alat:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

    button.ikona-alat.on {
        color: var(--primary);
        background: var(--primary-soft);
        border-color: transparent;
    }

/* Radnja nad izabranim redom (ERP `ErpDugme` varijanta Primarno, slika sa Komitenata): obrub i
   tekst u akcentu, bez ispune — vidi se kao radnja, a ne takmiči se sa podacima ispod. */
button.dugme.obrisano.akcija-trake {
    height: calc(var(--ctrl-h) - 4px);
    border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
    font-size: .8rem;
}

    button.dugme.obrisano.akcija-trake:disabled {
        background: transparent;
        color: var(--muted);
        border-color: var(--border);
    }

/* Red za filtere sakriven ikonicom levka — sakriva se SAMO prikaz, filteri i dalje važe. */
.grid-bez-filterreda .e-grid .e-filterbar {
    display: none;
}

/* ------------------------------------------------------------------------------------
   OKRUŽENJE — prekidač Produkcija / Sandbox u zaglavlju (02.10.2026, kao firma u NITErp-u).
   Zamenio je grupu „Instalacije → Produkcija, Sandbox" u meniju (isporuka 28).
   ⛔ Sandbox mora da se vidi NA PRVI POGLED, i to ne samo na prekidaču: cela traka zaglavlja i
      gornja ivica strane dobijaju boju upozorenja. Ko greškom radi u Sandbox-u misleći da je u
      Produkciji, napraviće radnju koju niko neće tražiti tamo gde treba.
   ------------------------------------------------------------------------------------ */
/* Čip okruženja i meni korisnika (02.10.2026 uveče, kao NITErp): `<details>` sa spiskom koji
   visi ispod čipa, desno poravnat. Bez JavaScript-a se otvara i zatvara klikom na čip; `js/tema.js`
   ga još zatvara klikom pored, klikom na stavku i Escape-om. */
.zag-izbor {
    position: relative;
}

    .zag-izbor > summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: .45rem;
        height: var(--ctrl-h);
        padding: 0 .7rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font-size: .82rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
    }

        .zag-izbor > summary::-webkit-details-marker {
            display: none;
        }

        .zag-izbor > summary:hover {
            border-color: var(--border-strong);
            background: var(--surface-2);
        }

        .zag-izbor > summary i {
            color: var(--muted);
        }

    .zag-izbor .zag-strelica {
        font-size: .7rem;
        transition: transform .15s;
    }

    .zag-izbor[open] .zag-strelica {
        transform: rotate(180deg);
    }

/* Meni korisnika: bez okvira, ime i uloga desno poravnati, pa krug — kao „Sistem / Radnik" u NITErp-u. */
.korisnik-izbor > summary {
    height: auto;
    padding: .2rem .25rem;
    border-color: transparent;
    background: transparent;
    gap: .55rem;
}

.korisnik-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

    .korisnik-tekst strong {
        font-size: .85rem;
    }

    .korisnik-tekst small {
        font-size: .7rem;
        font-weight: 400;
        color: var(--muted);
    }

/* „?" — pomoć za stranu (02.10.2026). Krug bez natpisa; panel je širi i nosi tekst, ne stavke. */
.pomoc-izbor > summary {
    width: var(--ctrl-h);
    padding: 0;
    justify-content: center;
    font-size: 1rem;
}

.pomoc-izbor:has(.pomoc-lista:empty) {
    display: none;
}

.pomoc-lista {
    width: min(440px, 90vw);
    padding: .85rem 1rem;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--text);
}

    .pomoc-lista p {
        margin: 0 0 .5rem;
    }

        .pomoc-lista p:last-child {
            margin-bottom: 0;
        }

/* Forma oko „Odjava" u meniju korisnika ne sme da menja raspored stavki. */
.zag-lista .zag-forma {
    display: contents;
}

.zag-razdelnik {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 .25rem;
}

.zag-lista {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: .35rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}

    .zag-lista a,
    .zag-lista button {
        display: flex;
        align-items: center;
        gap: .75rem;
        width: 100%;
        padding: .5rem 1rem;
        border: 0;
        background: none;
        color: var(--text);
        font: inherit;
        font-size: .9rem;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

        .zag-lista a:hover,
        .zag-lista button:hover {
            background: color-mix(in srgb, var(--primary) 8%, var(--surface));
        }

        .zag-lista a i,
        .zag-lista button i {
            width: 1.2rem;
            font-size: 1.1rem;
            color: var(--muted);
        }

    .zag-lista hr {
        margin: .3rem 0;
        border: 0;
        border-top: 1px solid var(--border);
    }

    .zag-lista .zag-ik-upoz {
        color: var(--warn);
    }

    .zag-lista .zag-odjava,
    .zag-lista .zag-odjava i {
        color: var(--err);
        font-weight: 700;
    }

    .zag-lista a.izabrano {
        background: var(--primary-soft);
    }

        .zag-lista a.izabrano i {
            color: var(--primary-soft-text);
        }

.zag-stavka-tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .zag-stavka-tekst small {
        font-size: .72rem;
        color: var(--muted);
    }

/* Strana „Promena lozinke" (02.10.2026): uska karta sa obrascem jedno polje ispod drugog. */
.uska-karta {
    max-width: 460px;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.obrazac-uspravno {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

    .obrazac-uspravno label {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        font-size: .85rem;
        font-weight: 600;
    }

    .obrazac-uspravno button {
        align-self: flex-start;
    }

/* Sandbox mora da se vidi NA PRVI POGLED: čip je u boji upozorenja, kao i cela traka (ispod). */
.okruzenje-sandbox .okruzenje-izbor > summary,
.okruzenje-sandbox .okruzenje-izbor > summary i {
    color: var(--na-primary);
    background: var(--warn);
    border-color: var(--warn);
}

.okruzenje-sandbox .zaglavlje {
    background: var(--warn-soft);
    border-bottom: 2px solid var(--warn);
}

/* ------------------------------------------------------------------------------------
   GRID — čitljivost (01.10.2026, posle slike sa `/instalacije` u tamnoj temi)
   ⚠️ Važi za SVE gridove portala, ne samo za instalacije: ista pravila, jedno mesto.
   ------------------------------------------------------------------------------------ */
.tabela-grid {
    padding: 0;
}

/* Dno tabele prati POSLEDNJI RED (Marko, 02.10.2026, kao NITErp): visina vezana za prozor je sada
   NAJVIŠA visina, ne stalna. Sa 12 redova po strani tabela je visoka 12 redova i straničenje je
   odmah ispod njih — ranije je ostajala prazna površina do dna prozora. Kad redova ima više nego
   što staje, tabela skroluje unutar sebe kao i do sada (vodoravna traka i zaglavlje ostaju na
   mestu). Najviša visina dolazi iz `Height` grida, kroz `--grid-visina` na omotaču. */
.tabela-grid .e-grid .e-gridcontent > .e-content {
    height: auto !important;
    max-height: var(--grid-visina, none);
}

/* Oko na kraju reda (Instalacije, 02.10.2026): kolona ZALEPLJENA uz desnu ivicu tabele — vidi se i
   kad je tabela odskrolovana skroz levo. Pozadina mora da bude puna, inače bi se kroz nju videle
   ćelije koje prolaze ispod; hover i izbor dobijaju istu boju kao ostatak reda. */
.e-grid td.kol-oko,
.e-grid th.kol-oko {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--surface);
    box-shadow: inset 1px 0 0 var(--border);
}

/* Zaglavlje kolone oka je iste boje kao ostatak zaglavlja grida (Marko, 02.10.2026) — mora biti
   NEPROVIDNO (lepljiva ćelija se crta preko ostalih dok se skroluje), pa se boja uzima od teme. */
.e-grid th.kol-oko {
    background-color: var(--surface-2);
}

.e-grid th.kol-oko .e-headercelldiv {
    color: var(--muted);
}

.e-grid tr.e-row:hover > td.kol-oko {
    background-color: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.oko-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

    .oko-dugme:hover,
    .oko-dugme:focus-visible {
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, transparent);
    }

/* Filter red ispod zaglavlja — zbijen, da ne troši visinu reda i po (isto kao NITErp). */
.e-grid .e-filterbar .e-filterbarcell {
    padding: 4px var(--cell-px) !important;
}

    .e-grid .e-filterbar .e-filterbarcell input,
    .e-grid .e-filterbar .e-filterbarcell .e-input-group input.e-input {
        height: 26px !important;
        font-size: var(--grid-fs) !important;
    }

/* Izabran red: akcenat teme, ne podrazumevano plava Syncfusion-a — u tamnoj temi je ona bila
   jedina svetla površina na ekranu. */
.e-grid td.e-rowcell.e-selectionbackground,
.e-grid td.e-rowcell.e-active {
    background-color: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
    color: var(--text) !important;
}

/* Instalacija koja ćuti: crvena traka levo u prvoj ćeliji reda. Ne boji se ceo red — crven
   ceo red se čita kao „greška u podatku", a ovo je stanje uređaja. */
.e-grid .e-row.red-cuti td.e-rowcell:first-child {
    box-shadow: inset 3px 0 0 var(--err);
}

/* Red na kome je fokus (strelice ga pomeraju, ali ga ne biraju — 02.10.2026): blago istaknut, da se
   vidi gde si. Izabran red (kvačica) ima svoju, jaču boju i ona ima prednost (`!important` gore). */
.grid-ctrl-izbor .e-grid tr.e-row:has(> td.e-focused) > td.e-rowcell {
    background-color: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

/* Kružić u koloni „Poslednji ping" (Marko, 01.10.2026): zelen = javila se u poslednjih 10 min,
   crven = nije. Isti prag kao prekidač „Aktivni / Neaktivni" iznad tabele. */
.tacka-pinga {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: middle;
}

.tacka-pinga.aktivna {
    background: var(--ok);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent);
}

.tacka-pinga.neaktivna {
    background: var(--err);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--err) 25%, transparent);
}

/* ------------------------------------------------------------------------------------
   SKROL — jedan izgled u CELOM portalu (Marko, 03.10.2026)
   Kao na gridu Instalacija: palac u boji teme na podlozi površine. Do sada je bio samo na
   gridovima i `.tabela` u tamnoj temi — paneli (Nadogradnja instalacije, istorija), liste i
   stranica su imali sistemski BELI skrol. U svetloj temi palac je svetliji od ivica, da se
   jedva primeti.
   ℹ️ Standardna svojstva (`scrollbar-color`), ne `::-webkit-scrollbar`: Chrome i Edge od verzije
      121 tada ignorišu `-webkit-` pravila, pa bi dva sistema samo smetala jedan drugom.
   ------------------------------------------------------------------------------------ */
:root {
    --skrol-palac: #d9dee6;
}

[data-bs-theme="dark"] {
    --skrol-palac: var(--border-strong);
}

* {
    scrollbar-color: var(--skrol-palac) transparent;
}

/* Sistemske kontrole (strelice u polju za broj, otvoren padajući spisak, kalendar) prate temu —
   u tamnoj su bile bele (Marko, 03.10.2026). */
[data-bs-theme="dark"] {
    color-scheme: dark;
}

[data-bs-theme="light"] {
    color-scheme: light;
}

/* Dugmad, polja i padajuće liste u istom redu su ISTE VISINE (Marko, 03.10.2026, PORTAL-01 §8):
   visina uključuje ivicu — polje za unos je po podrazumevanom imalo 2 px više od dugmeta. */
button,
input,
select,
textarea {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------
   PADAJUĆA LISTA — strelica sa razmakom od desne ivice, svuda (Marko, 03.10.2026: „strelica mi je
   preblizu desnog kraja polja"). Sistemska strelica se ne da pomeriti, pa se crta naša.
   ------------------------------------------------------------------------------------ */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.1rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238195b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 12px 12px !important;
}

/* ------------------------------------------------------------------------------------
   BROJ IZNAD GRIDA, IZBOR, SAČUVANI POGLEDI (01.10.2026)
   ------------------------------------------------------------------------------------ */
.grid-nadnaslov {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .55rem;
    font-size: .9rem;
    color: var(--muted);
}

    .grid-nadnaslov > strong {
        color: var(--text);
        font-size: 1.1rem;
        font-variant-numeric: tabular-nums;
    }

.grid-izabrano strong {
    color: var(--primary);
}

/* Dugme koje izgleda kao veza — za sporedne radnje u tekstu („poništi izbor"). */
button.link-dugme {
    border: 0;
    background: none;
    padding: 0 .2rem;
    color: var(--primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Traka sačuvanih pogleda — drugi red trake grida (ERP `erp-grid-filtri`): isprekidana gornja ivica. */
.traka-pogleda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 1px dashed var(--border);
    border-bottom: 0;
}

    .traka-pogleda + .tabela {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.napomena-inline {
    color: var(--muted);
    font-size: .8rem;
}

.sacuvan-pogled {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    overflow: hidden;
}

    .sacuvan-pogled button {
        border: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: .78rem;
        cursor: pointer;
    }

    .sacuvan-pogled .ime {
        padding: 3px 4px 3px 12px;
        font-weight: 600;
    }

    .sacuvan-pogled .x {
        padding: 3px 8px 3px 4px;
        color: var(--muted);
    }

    .sacuvan-pogled .ime:hover {
        color: var(--primary);
    }

    .sacuvan-pogled .x:hover {
        color: var(--err);
    }

.novi-pogled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

    .novi-pogled input {
        height: calc(var(--ctrl-h) - 4px);
        width: 180px;
        padding: 0 8px;
        border: 1px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: .8rem;
    }

/* Kolona sa kvačicama — uska i centrirana. */
.e-grid .kol-izbor {
    text-align: center;
}

/* Spisak instalacija u panelu za više njih — ograničena visina, da dugmad ostanu na ekranu. */
.spisak-cilja {
    max-height: 260px;
    overflow: auto;
    margin-bottom: .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------------------------
   KVAČICE U GRIDU (izbor više redova) — 01.10.2026, Marko: „na tamnoj temi se baš ne vidi".
   Syncfusion crta okvir kvačice svojom tamnom bojom ivice, koja se na tamnoj podlozi gubi.
   Okvir ide na `--muted` (svetao u tamnoj, srednje siv u svetloj temi), a izabrana kvačica je
   PUNA u boji akcenta — da se izabrani redovi vide i kad se tabela samo preleti pogledom.
   ------------------------------------------------------------------------------------ */
.e-grid .e-checkbox-wrapper .e-frame {
    border: 1.5px solid var(--muted) !important;
    background-color: var(--surface) !important;
    border-radius: 4px;
}

.e-grid .e-checkbox-wrapper:hover .e-frame {
    border-color: var(--primary) !important;
}

.e-grid .e-checkbox-wrapper .e-frame.e-check,
.e-grid .e-checkbox-wrapper .e-frame.e-stop {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--na-primary) !important;
}

/* Pager: bez natpisa „redova po strani" pored izbora veličine strane (Marko, 01.10.2026). */
.e-pager .e-pagesizes .e-pagerconstant {
    display: none;
}

/* Pager: dugmad stranica i izbor broja redova iste visine (Marko, 02.10.2026) — visina kontrole
   iz teme (`--ctrl-h`), kao i sva ostala polja portala. Ranije je grupa dugmadi bila viša od
   padajuće liste pored nje, pa je red izgledao neravno. */
/* 02.10.2026 (Marko): pager je malo niži od ostalih polja — 28 px (`--pager-h`). */
.e-pager {
    --pager-h: 28px;
}

.e-pager .e-pagercontainer {
    display: inline-flex;
    align-items: stretch;
    height: var(--pager-h);
    overflow: hidden;
    vertical-align: top;
}

    .e-pager .e-pagercontainer .e-numericcontainer {
        display: inline-flex;
        align-items: stretch;
    }

    /* Uža dugmad stranica (Marko, 02.10.2026: „malo da skupiš"). */
    .e-pager .e-pagercontainer .e-numericitem,
    .e-pager .e-pagercontainer > .e-icons {
        min-width: 24px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1;
    }

/* Poravnanje po VRHU, ne po sredini (Marko, 02.10.2026: „nije centrirano po visini"): obe grupe
   su iste visine (`--ctrl-h`), ali `middle` ih ravna po sredini SLOVA u redu, pa je lista stajala
   2 px više od dugmadi. Kad su iste visine, isti vrh znači i istu sredinu. */
.e-pager .e-pagesizes,
.e-pager .e-pagerdropdown {
    vertical-align: top;
    margin-top: 0;
}

    /* Lista „po strani" uska koliko treba za „100", broj na sredini (Marko, 02.10.2026). */
    .e-pager .e-pagerdropdown {
        width: 68px !important;
        min-width: 0 !important;
        height: var(--pager-h);
    }

    .e-pager .e-pagerdropdown .e-input-group {
        width: 68px !important;
        height: var(--pager-h);
        min-height: 0;
    }

        .e-pager .e-pagerdropdown .e-input-group input.e-input {
            text-align: center !important;
            padding-left: 6px !important;
            padding-right: 0 !important;
        }

        .e-pager .e-pagerdropdown .e-input-group .e-input-group-icon {
            width: 22px !important;
            min-width: 22px !important;
        }

        /* Tema zadaje polju i strelici svoju visinu i razmak; bez ovoga lista ne bi htela da se skupi. */
        .e-pager .e-pagerdropdown .e-input-group input.e-input,
        .e-pager .e-pagerdropdown .e-input-group .e-input-group-icon {
            height: calc(var(--pager-h) - 2px) !important;
            min-height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

/* Razdelnik između grupa prekidača (stanje | platforma). */
.pogledi-razdelnik {
    width: 1px;
    height: 18px;
    background: var(--border-strong);
    margin: 0 2px;
}

/* Radnja nad izborom stoji gore desno, u redu sa brojem instalacija. */
.grid-nadnaslov-radnja {
    margin-left: auto;
}

/* ------------------------------------------------------------------------------------
   TELEFON (02.10.2026) — zaglavlje, razmaci, traka grida. Meni je iznad (traka sa ☰).
   ------------------------------------------------------------------------------------ */
@media (max-width: 600px) {
    .strana {
        padding: 1rem .75rem 2rem;
    }

    main h1 {
        flex-wrap: wrap;
        font-size: 1.2rem;
        gap: .4rem;
    }

    /* Zaglavlje mora da stane u 360–390 px: ime i uloga se kriju (inicijali u krugu ostaju), a
       čip okruženja ostaje ceo — on je ovde najvažniji. */
    .zaglavlje {
        padding: .45rem .75rem;
        gap: .35rem;
    }

        .zaglavlje .korisnik-tekst,
        .zaglavlje .zag-razdelnik,
        .zaglavlje-firma {
            display: none;
        }

    /* Traka grida: pretraga preko cele širine, alati ispod nje; prekidači se prelamaju. */
    .traka-grida {
        padding: .5rem;
    }

    .traka-grida-alati {
        margin-left: 0;
        width: 100%;
    }

    .traka-grida-trazi {
        flex: 1 1 100%;
    }

        .traka-grida-trazi input {
            width: 100%;
        }

    /* Radnje nad izborom idu u svoj red, ispod broja. */
    .grid-nadnaslov-radnja {
        margin-left: 0;
    }

    span.grid-nadnaslov-radnja {
        flex-wrap: wrap;
        width: 100%;
    }

    /* Pločice Pregleda: dve u redu. */
    .brojka {
        flex: 1 1 140px;
    }
}

/* Poruke podrške (02.10.2026): podnaslovi i parovi „naziv — vrednost" u kliznom panelu. */
.podnaslov-panela {
    margin: 1.1rem 0 .45rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.opis-polja {
    display: grid;
    grid-template-columns: minmax(110px, 30%) 1fr;
    gap: .3rem .9rem;
    margin: 0;
    font-size: .9rem;
}

    .opis-polja dt {
        color: var(--muted);
    }

    .opis-polja dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

/* Znak nerešene poruke podrške pored serijskog broja (Instalacije). */
.znak-podrske {
    margin-left: .4rem;
    text-decoration: none;
}

/* Grid čiji red se otvara klikom (`PortalGrid.Klik` — Greške, 02.10.2026). */
.grid-klik .e-gridcontent tr.e-row {
    cursor: pointer;
}

/* Ceo tekst poruke u panelu „sva vremena" (Greške) — prelama se, ne seče. */
.poruka-greske {
    margin: 0 0 .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2, var(--surface));
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Filter sa Pregleda (02.10.2026): strana otvorena klikom na pločicu kaže koji filter važi. */
.filter-sa-pregleda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .55rem;
    padding: .4rem .7rem;
    border: 1px dashed var(--primary);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    font-size: .85rem;
    color: var(--text);
}

    .filter-sa-pregleda i {
        color: var(--primary);
    }

/* Broj redova u traci grida, levo (Marko, 02.10.2026) — sitno i sivo; ranije veliki broj u posebnom
   redu iznad grida. */
.traka-broj {
    color: var(--muted);
    font-size: .85rem;
    white-space: nowrap;
    margin-right: .35rem;
}

    .traka-broj strong {
        color: var(--text);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* Prozor sa pitanjem pre radnje (`PotvrdaProzor`, Nalozi — Marko 02.10.2026). Iznad kliznog panela
   (1200/1201), jer pitanje može da stigne i iz njega. */
.prozor-zastor {
    position: fixed;
    inset: 0;
    z-index: 1210;
    background: rgba(0, 0, 0, .45);
}

.prozor {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1211;
    width: min(460px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}

.prozor-zaglavlje {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.2rem .4rem;
}

    .prozor-zaglavlje i {
        color: var(--warn);
        font-size: 1.35rem;
    }

    .prozor-zaglavlje h3 {
        margin: 0;
        font-size: 1.05rem;
    }

.prozor-telo {
    padding: .4rem 1.2rem .6rem;
    font-size: .92rem;
}

    .prozor-telo p {
        margin: 0 0 .6rem;
    }

.prozor-polje {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0 0 .7rem;
    font-size: .85rem;
    color: var(--muted);
}

    .prozor-polje input {
        padding: .45rem .6rem;
        border: 1px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: .95rem;
    }

.prozor-podnozje {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .6rem 1.2rem 1rem;
}

/* Više radnji odjednom (Kartice: Prebaci + Skini, 02.10.2026) — u jednom omotaču, jedna pored druge. */
span.grid-nadnaslov-radnja {
    display: inline-flex;
    gap: .5rem;
}

/* ------------------------------------------------------------------------------------
   POČETNA (02.10.2026) — kartice sa izborom prikaza (`PregledKarta`) i mreža kartica.
   Boje serija su stalne (magnituda: jedna plava; stanje: crvena/zelena/žuta), sve ostalo
   prati temu kroz promenljive, pa grafikoni rade i u tamnoj temi.
   ------------------------------------------------------------------------------------ */
.pocetna-glava {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

    .pocetna-glava h1 {
        margin-bottom: 0;
    }

.pocetna-radnje {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.pocetna-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pocetna-siroka {
    grid-column: span 2;
}

@media (max-width: 760px) {
    .pocetna-siroka {
        grid-column: auto;
    }
}

.pocetna-tabela-skrol {
    overflow-x: auto;
}

.pocetna-malo {
    padding: .25rem .6rem;
    font-size: .78rem;
    white-space: nowrap;
}

.pocetna-nula {
    color: var(--muted);
}

.pocetna-od {
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
}

.pocetna-cinjenice {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .85rem;
}

    .pocetna-cinjenice > a,
    .pocetna-cinjenice > div {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        color: var(--text);
        text-decoration: none;
    }

.pk-karta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: .9rem 1.1rem 1rem;
    min-width: 0;
}

.pk-glava {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .8rem;
}

.pk-naslov {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

    .pk-naslov small {
        font-size: .75rem;
        font-weight: 400;
        color: var(--muted);
    }

.pk-prikazi {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    flex: none;
}

.pk-prikaz {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}

    .pk-prikaz:hover {
        background: var(--surface);
        color: var(--text);
    }

    .pk-prikaz:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }

    .pk-prikaz.izabran {
        background: var(--surface);
        color: var(--primary);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
    }

@media (max-width: 767.98px) {
    .pk-prikaz {
        width: 40px;
        height: 40px;
    }
}

.pk-ik {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-prazno,
.pk-napomena {
    margin: .8rem 0 0;
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.45;
}

.pk-prazno {
    margin-top: 0;
    padding: 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.pk-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

    .pk-tabela th {
        text-align: left;
        font-weight: 600;
        font-size: .75rem;
        color: var(--muted);
        padding: .35rem .5rem;
        border-bottom: 1px solid var(--border);
    }

    .pk-tabela td {
        padding: .4rem .5rem;
        border-bottom: 1px solid var(--border);
    }

    .pk-tabela tr:last-child td {
        border-bottom: 0;
    }

    .pk-tabela .br {
        text-align: right;
    }

.pk-vrednost {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pk-udeo {
    text-align: right;
    font-size: .75rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pk-trake {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.pk-traka-red {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 2.6rem;
    gap: .6rem;
    align-items: center;
    font-size: .82rem;
    color: var(--text);
    text-decoration: none;
}

    a.pk-traka-red[href]:hover .pk-ime {
        color: var(--primary);
        text-decoration: underline;
    }

.pk-ime {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-staza {
    height: 10px;
    border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
}

.pk-puno {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.pk-stubovi {
    display: grid;
    gap: 6px;
    align-items: end;
    height: 160px;
    border-bottom: 1px solid var(--border-strong);
}

.pk-stub-kol {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    height: 100%;
    min-width: 0;
}

.pk-stub {
    display: block;
    width: 100%;
    max-width: 40px;
    border-radius: 4px 4px 0 0;
}

.pk-stub-broj {
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}

.pk-oznake {
    display: grid;
    gap: 6px;
    margin-top: .35rem;
}

    .pk-oznake span {
        text-align: center;
        font-size: .7rem;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
    }

.pk-linija {
    position: relative;
    height: 160px;
    border-bottom: 1px solid var(--border-strong);
}

    .pk-linija svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .pk-linija polyline {
        fill: none;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

.pk-tacka {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pk-tacka::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pk-boja, #2a78d6);
        box-shadow: 0 0 0 2px var(--surface);
    }

.pk-tacka-oznaka {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.pk-krug-red {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.pk-krug {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-krug-sredina {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .pk-krug-sredina b {
        font-size: 1.3rem;
        line-height: 1.1;
    }

    .pk-krug-sredina span {
        font-size: .68rem;
        color: var(--muted);
    }

.pk-legenda {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.pk-legenda-red {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 2.4rem 2.6rem;
    gap: .45rem;
    align-items: center;
    font-size: .8rem;
}

.pk-kvadrat {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

@media (max-width: 400px) {
    .pk-krug-red {
        flex-direction: column;
        align-items: stretch;
    }

    .pk-krug {
        align-self: center;
    }
}

/* ------------------------------------------------------------------------------------
   STRANA KARTICE (02.10.2026, Marko — kao ekran L-PFR programa): levo kartica kao pametna
   kartica sa podacima ispod, desno „monitor" sa podacima računara iz check-in-a.
   ⚠️ Ekran monitora je TAMAN u obe teme — to je slika ekrana, ne površina portala.
   ------------------------------------------------------------------------------------ */
/* Gornji deo strane kartice (Marko, 02.10.2026, maketa F): CENTRIRAN, u jednom redu i iste visine —
   kartica (bezbednosni element), podaci, monitor, licence. Na užem ekranu se prelama u više redova. */
/* Maketa A4 (Marko, 03.10.2026): SVE u jednom redu — lokacija, kartica, monitor, licence nad
   instalacijama, računi u PU bez stavki. Svi stubovi su TAČNO visine kartice (`--kd-visina`, kao
   `.be`): ono što ne stane skroluje se unutar svog panela (licence, instalacije, računi, ekran).
   Monitor dobija najviše širine (ružan je uzak), lokacija i stub licenci su uži. Kad ne stane,
   red se lomi. */
.kd-gore {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    --kd-visina: 395px;
}

    .kd-gore > * {
        height: var(--kd-visina);
    }

.kd-be-kol {
    flex: 0 0 250px;
    display: flex;
    align-items: center;
}

.kd-desno {
    flex: 3 1 480px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Lokacija sažeto: naziv i adresa gore, ostalo u dve kolone sa malim natpisima. */
.kd-lokacija {
    flex: 1 1 290px;
    max-width: 380px;
    overflow: auto;
}

.kd-lok {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1rem 1.1rem;
}

.kd-lok-naziv {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.kd-lok-sitno {
    font-size: .78rem;
    color: var(--muted);
}

.kd-lok-mreza {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1rem;
    margin: 0;
}

    .kd-lok-mreza dt {
        margin-bottom: .15rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .kd-lok-mreza dd {
        margin: 0;
        font-size: .88rem;
        overflow-wrap: anywhere;
    }

        .kd-lok-mreza dd.kd-lok-sitno {
            font-size: .78rem;
        }

/* Stub: licence gore (dobijaju ostatak visine), instalacije ispod koliko im treba. */
.kd-kolona {
    flex: 1 1 330px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

    /* Instalacije koliko im treba, ali najviše pola stuba — više njih se skroluje. */
    .kd-kolona > .kd-panel {
        flex: 0 1 auto;
        max-height: 50%;
    }

        .kd-kolona > .kd-panel > .kd-panel-lista {
            min-height: 0;
            overflow-y: auto;
        }

    .kd-kolona .kd-licence-lista {
        min-height: 110px;
    }

/* Računi bez stavki: uzak stub, širok koliko mu trebaju tri kolone. */
.kd-racuni {
    flex: 0 0 auto;
    max-width: 100%;
}

    .kd-racuni > .kd-redovi {
        min-height: 0;
        overflow-y: auto;
    }

    .kd-desno .kd-monitor {
        flex: 1;
        min-height: 0;
    }

        /* Ekran se rasteže do visine reda; podaci su na sredini ekrana. */
        .kd-desno .kd-monitor .kd-ekran {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

            .kd-desno .kd-ekran .kd-ekran-podaci {
                margin-block: auto;
            }

            .kd-desno .kd-ekran .kd-ekran-prazno {
                flex: 1;
            }

/* Bezbednosni element: podloga je slika, podaci su tekst preko nje (`BezbednosniElement`). Kartica je
   bela u obe teme, kao prava, pa ni boje teksta na njoj ne prate temu. */
.be {
    position: relative;
    width: 250px;
    height: 395px;
    flex: 0 0 auto;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .4));
    font-family: var(--font);
}

[data-bs-theme="light"] .be {
    filter: drop-shadow(0 12px 20px rgba(20, 30, 60, .18));
}

    .be-podloga {
        display: block;
        width: 250px;
        height: 395px;
    }

    .be > span {
        position: absolute;
    }

    /* Značke na samom vrhu kartice, svetle u OBE teme (Marko, 02.10.2026: tamna „Aktivna" je ružna
       na beloj kartici) — boja stanja je u tekstu i tački, podloga je uvek bela. */
    .be-stanje,
    .be-aplet {
        top: 12px;
        font-size: .7rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    }

    .be .be-stanje {
        background: #ffffff;
        color: #2b5aa8;
    }

    .be .be-stanje.bedz-ok { color: #15803d; }
    .be .be-stanje.bedz-warn { color: #b45309; }
    .be .be-stanje.bedz-err { color: #dc2626; }

    .be-stanje {
        left: 10px;
    }

    .be-aplet {
        right: 10px;
        padding: .15rem .45rem;
        border-radius: 999px;
        background: #ffffff;
        color: #2b5aa8;
        font-weight: 600;
    }

    /* Naziv i PIB: blok ispod natpisa, sadržaj centriran po visini (M-014, 03.10.2026). */
    .be-ime {
        position: absolute;
        left: 14px;
        right: 14px;
        top: 295px;
        height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-align: center;
    }

    /* Do dva reda, pa tri tačke; ceo naziv je u hintu (`title`). */
    .be-obveznik {
        max-width: 100%;
        font-size: 12.5px;
        line-height: 14px;
        font-weight: 700;
        color: #1f2a44;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .be-pib {
        max-width: 100%;
        font-size: 12.5px;
        font-weight: 600;
        color: #55607a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Kopiranje klikom: neupadljivo — tačkasto podvlačenje i kursor tek pod mišem, kvačica posle. */
    .be-kopija {
        cursor: copy;
        border-radius: 3px;
    }

        .be-kopija:hover {
            text-decoration: underline dotted;
            text-underline-offset: 2px;
        }

        .be-kopija.kopirano::after {
            content: " ✓";
            color: #15803d;
        }

    .be-datum,
    .be-jid {
        top: 366px;
        font-size: 12px;
        font-weight: 600;
        color: #2b5aa8;
    }

    .be-datum {
        left: 21px;
    }

    .be-jid {
        right: 21px;
        font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
        letter-spacing: .04em;
    }

/* Licence (L1 „sertifikati"): papir u svetloj temi, tamni list sa zlatnim dugmetom u tamnoj. Kolona
   ne diže visinu reda (`contain: size`), duži spisak se skroluje unutra. */
.kd-licence {
    --papir: linear-gradient(160deg, #1b2846 0%, #15203a 100%);
    --papir-tekst: #e6ecf7;
    --papir-meta: #9aa8c4;
    --papir-ivica: #2a3a5c;
    --sert-dugme-bg: rgba(217, 180, 74, .14);
    --sert-dugme-fg: #e3c25c;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    overflow: hidden;
}

[data-bs-theme="light"] .kd-licence {
    --papir: linear-gradient(160deg, #fbf8ef 0%, #efe7d3 100%);
    --papir-tekst: #2a2418;
    --papir-meta: #6b5f45;
    --papir-ivica: #e2d8bf;
    --sert-dugme-bg: #2a2418;
    --sert-dugme-fg: #f7f3e8;
}

.kd-licence-vrh {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

    .kd-licence-vrh i {
        color: var(--primary);
    }

/* Broj ide ODMAH do naslova, „?" skroz desno — u svim panelima (Marko, 03.10.2026). */
.kd-licence-broj {
    margin-left: .15rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .75rem;
}

.kd-licence-lista {
    flex: 1 1 auto;
    min-height: 160px;
    contain: size;
    overflow-y: auto;
    padding: .7rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.kd-sert {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem .9rem .8rem 1.2rem;
    border: 1px solid var(--papir-ivica);
    border-radius: 12px;
    background: var(--papir);
    color: var(--papir-tekst);
    overflow: hidden;
}

    .kd-sert::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: #6b7a99;
    }

.kd-sert-full::before { background: #2e9e5b; }
.kd-sert-provisional::before, .kd-sert-trial::before { background: #d48806; }
.kd-sert-demo::before { background: #4c6fd8; }

.kd-sert-istekla {
    opacity: .62;
}

.kd-sert-red {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
}

.kd-sert-broj {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 600;
    font-size: .88rem;
}

.kd-sert-preuzmi {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 8px;
    background: var(--sert-dugme-bg);
    color: var(--sert-dugme-fg) !important;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.kd-sert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .75rem;
    color: var(--papir-meta);
}

.kd-sert-razlog {
    padding-right: 2.6rem;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.kd-sert-pecat {
    position: absolute;
    right: .75rem;
    bottom: .5rem;
    opacity: .22;
}

/* Vrsta licence kao značka: puna zeleno, privremena i probna žuto, demo (Sandbox) plavo. */
.kd-vrsta {
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--muted);
}

.kd-vrsta-full {
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #22c55e;
}

.kd-vrsta-provisional,
.kd-vrsta-trial {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #d48806;
}

.kd-vrsta-demo {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}

/* Izbor kolona se otvara GORE DESNO u gridu, odmah ispod dugmeta „Kolone" (Marko, 02.10.2026).
   Syncfusion ga bez koordinata stavlja na dno grida, pa je ispadao ispod tabele i deo se nije
   video bez skrolovanja strane. Pozicija je u odnosu na sam grid (`e-grid` mu je `offsetParent`). */
.e-grid .e-ccdlg.e-popup-open {
    top: 6px !important;
    left: auto !important;
    right: 6px !important;
}

/* „Poslednji neuspeh" na Instalacijama: kratka značka koja je dugme (klik otvara panel sa detaljima). */
.neuspeh-dugme {
    border: 0;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

/* Razmaci na strani kartice su ISTI svuda — 1.25rem između gornjeg dela, tabela i ručnih radnji
   (Marko, 02.10.2026: „smanji malo razmak i uniformiši"). */
.kd-gore {
    margin-bottom: 0;
}

.kd-gore ~ h2 {
    margin-top: 1.25rem;
}

/* Ručne radnje GORE LEVO, iznad gornjeg reda (Marko, 03.10.2026: desno se ne vide). */
.kd-radnje {
    justify-content: flex-start;
    margin: 0 0 .75rem;
}

/* ------------------------------------------------------------------------------------
   PANELI STRANE KARTICE (M-011, Marko, 03.10.2026): Lokacija, Instalacije i Računi u PU bez
   stavki u stilu „Licence"; stavke su male kartice sa trakom levo. Od A4 su svi u gornjem redu.
   ------------------------------------------------------------------------------------ */
.kd-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.kd-licence-vrh .pomoc-mala {
    margin-left: auto;
}

.kd-panel-upozorenje .kd-licence-vrh > i {
    color: #f87171;
}

.kd-broj-crven {
    background: color-mix(in srgb, #ef4444 18%, transparent);
    color: #f87171;
}

/* Računi bez stavki: kompaktni redovi (Marko, 03.10.2026) — kolone poravnate preko svih redova. */
.kd-redovi {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-content: start;
    align-items: center;
    padding: .35rem .7rem .6rem;
}

.kd-red {
    display: contents;
}

    .kd-red > * {
        padding: .45rem .9rem .45rem 0;
        border-bottom: 1px solid var(--border);
        font-size: .82rem;
        color: var(--muted);
        white-space: nowrap;
    }

    .kd-red > .kd-sert-broj {
        color: var(--text);
    }

    .kd-red > .bedz {
        justify-self: start;
        margin: .3rem 0;
        padding: .1rem .55rem;
        border-bottom: 0;
    }

    .kd-red i {
        margin-right: .25rem;
    }

    .kd-red:last-child > * {
        border-bottom: 0;
    }

/* „Prikaži još N" ispod spiska računa. */
.kd-vise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    padding: .55rem;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

    .kd-vise:hover {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
    }

.kd-red-greska > .kd-sert-broj {
    color: #f87171;
}

.kd-panel-lista {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .7rem;
}

.kd-panel-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.kd-stavka {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem .9rem .7rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    overflow: hidden;
}

    .kd-stavka::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: #6b7a99;
    }

.kd-stavka {
    max-width: 100%;
}

/* Serijski i OS značka zajedno, levo (Marko, 03.10.2026). */
.kd-stavka-vrh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.kd-stavka-ziva::before {
    background: #2e9e5b;
}

.kd-stavka-greska::before {
    background: #ef4444;
}

.kd-stavka .kd-sert-meta {
    color: var(--muted);
    gap: .3rem .9rem;
}

    .kd-stavka .kd-sert-meta i {
        margin-right: .2rem;
    }

/* ------------------------------------------------------------------------------------
   RUČNE RADNJE (strana kartice, maketa A, Marko 03.10.2026): svaka radnja svoja kartica.
   ------------------------------------------------------------------------------------ */
.rr {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.rr-kartica {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.rr-vrh {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

    .rr-vrh > i {
        color: var(--primary);
    }

    .rr-vrh .pomoc-mala {
        margin-left: auto;
    }

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

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

/* Rok i trajanje: uska polja (Marko: „12 meseci" ne treba celu širinu). */
.rr select {
    width: 150px;
}

.rr select.rr-puno {
    width: 100%;
}

/* Razlog odjave: jedan red, a duži tekst sam proširi polje. */
.rr textarea.rr-tekst {
    width: 100%;
    min-height: var(--ctrl-h);
    height: auto;
    padding: .55rem .6rem;
    line-height: 1.35;
    resize: none;
    field-sizing: content;
    font: inherit;
    font-size: .85rem;
}

.rr input.rr-usko {
    width: 90px;
}

.rr-red {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
}

.rr-rastegni {
    flex: 1 1 180px;
    min-width: 0;
}

    .rr-rastegni input,
    .rr-rastegni select {
        width: 100%;
    }

.rr-dugmad {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
}

    /* „Produži" odmah do polja „Za dana" (Marko, 03.10.2026). */
    .rr-dugmad.rr-uz {
        margin-left: 0;
    }

.rr-opasno {
    border-color: color-mix(in srgb, #ef4444 45%, var(--border));
    background: color-mix(in srgb, #ef4444 6%, var(--surface-2));
}

    .rr-opasno .rr-vrh > i {
        color: #ef4444;
    }

button.dugme.opasno {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

    button.dugme.opasno:hover {
        background: #b91c1c;
        border-color: #b91c1c;
    }

/* „?" uz naslov panela (komponenta `Pomoc`): mali krug, tekst iskače ispod, desno poravnat. */
.pomoc-mala > summary {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    font-size: .8rem;
}

    /* Uočljiviji (Marko, 03.10.2026): boja akcenta, ne siva. */
    .pomoc-mala > summary i {
        color: var(--primary);
    }

    .pomoc-mala > summary:hover {
        background: color-mix(in srgb, var(--primary) 24%, transparent);
    }

.pomoc-mala .pomoc-lista {
    font-weight: 400;
    text-align: left;
}

/* Tekst objašnjenja odmaknut od ivica (Marko, 03.10.2026): `.zag-lista` (spisak stavki) nosi samo
   gornji i donji razmak, pa je tekst u „?" lepio uz levu ivicu. */
.zag-lista.pomoc-lista {
    padding: .85rem 1.1rem;
}

    /* U naslovu celine panela „?" stoji uz desnu ivicu. */
    .celina-naslov .pomoc-mala {
        margin-left: auto;
    }

/* Kartica i podaci ispod nje imaju ISTU podlogu, ivicu i senku (Marko, 02.10.2026: „sredi na
   sličan način i ovu ispod", boje su se razlikovale). */
.kd-kartica,
.kd-podaci {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.kd-kartica {
    padding: 1.1rem 1.25rem 1rem;
}

.kd-kartica-vrh {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .9rem;
}

.kd-cip {
    width: 46px;
    height: 34px;
}

    .kd-cip rect {
        fill: #d9b44a;
        stroke: #a8862c;
        stroke-width: 1.4;
    }

    .kd-cip path {
        fill: none;
        stroke: #a8862c;
        stroke-width: 1.4;
    }

.kd-kartica-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.35;
}

.kd-jid {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--text);
}

.kd-obveznik {
    margin-top: .55rem;
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    line-height: 1.3;
}

.kd-kartica-dno {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
}

.kd-pib {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
    color: var(--muted);
    letter-spacing: .04em;
}

.kd-podaci {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .35rem 1rem;
    margin: 1rem 0 0;
    padding: 1rem 1.25rem;
    font-size: .88rem;
}

    .kd-podaci dt {
        color: var(--muted);
        font-weight: 600;
        font-size: .8rem;
    }

    .kd-podaci dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.kd-masine {
    margin-bottom: .6rem;
}

/* Monitor: širok koliko i pravi ekran uz karticu (Marko, 02.10.2026: bio je preširok). Boje ekrana su
   promenljive `--ekran-*`: u tamnoj temi tamna slika, u SVETLOJ svetla — okvir i postolje ostaju
   tamni u obe teme, kao pravi monitor. */
.kd-monitor {
    --ekran-pozadina: radial-gradient(ellipse at top, #16203d 0%, #0b1020 70%);
    --ekran-tekst: #dbe3ff;
    --ekran-jako: #ffffff;
    --ekran-oznaka: #8a96bd;
    --ekran-tiho: #9aa6c8;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-bs-theme="light"] .kd-monitor {
    --ekran-pozadina: radial-gradient(ellipse at top, #ffffff 0%, #eaf0fa 75%);
    --ekran-tekst: #1f2a44;
    --ekran-jako: #0b1220;
    --ekran-oznaka: #64708f;
    --ekran-tiho: #64708f;
}

.kd-ekran {
    width: 100%;
    min-height: 300px;
    padding: 1rem 1.25rem 1.1rem;
    border: 10px solid #1b1f2b;
    border-bottom-width: 18px;
    border-radius: 14px;
    background: var(--ekran-pozadina);
    color: var(--ekran-tekst);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.kd-vrat {
    width: 70px;
    height: 34px;
    background: linear-gradient(#2a3040, #1b1f2b);
    clip-path: polygon(22% 0, 78% 0, 90% 100%, 10% 100%);
}

.kd-postolje {
    width: 210px;
    height: 10px;
    border-radius: 6px 6px 3px 3px;
    background: #1b1f2b;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

.kd-ekran-vrh {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.kd-tacka {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8a93ad;
}

.kd-tacka-ok {
    background: #3ddc84;
    box-shadow: 0 0 8px #3ddc84;
}

.kd-ekran-sat {
    margin-left: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    color: var(--ekran-tiho);
}

.kd-ekran-serijski {
    margin: .5rem 0 .75rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.35rem;
    letter-spacing: .05em;
    color: var(--ekran-jako);
}

.kd-ekran-podaci {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .3rem 1rem;
    margin: 0;
    font-size: .85rem;
}

    .kd-ekran-podaci dt {
        color: var(--ekran-oznaka);
    }

    .kd-ekran-podaci dd {
        margin: 0;
        font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
        font-size: .8rem;
        overflow-wrap: anywhere;
    }

.kd-ekran-dno {
    margin-top: .8rem;
    font-size: .72rem;
    color: var(--ekran-oznaka);
}

.kd-ekran-prazno {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 260px;
    color: var(--ekran-tiho);
    text-align: center;
}

    .kd-ekran-prazno i {
        font-size: 2.4rem;
    }

@media (max-width: 960px) {
    .kd-desno,
    .kd-lokacija,
    .kd-kolona,
    .kd-racuni {
        flex-basis: 100%;
        max-width: none;
    }

    .kd-gore > .kd-lokacija,
    .kd-gore > .kd-racuni {
        height: auto;
    }
}

/* ------------------------------------------------------------------------------------
   PANEL NADOGRADNJA — tri celine (Neša, 03.10.2026): podaci o instalaciji (gore, sklapa se),
   podešavanje (sredina), istorija nadogradnje (dole, sklapa se). Istorija nema vodoravni
   skrol: build ide u drugi red ćelije, a tabela se drži širine panela.
   ------------------------------------------------------------------------------------ */
.panel-celina {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .9rem;
}

.celina-naslov {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .8rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.celina-naslov.staticno {
    cursor: default;
}

.celina-naslov .celina-broj {
    margin-left: .15rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 400;
}

.celina-telo {
    padding: 0 .8rem .8rem;
}

.celina-telo > .obrazac {
    box-shadow: none;
}

/* Bez sopstvenog skrola (Marko, 03.10.2026: „tri skrola"): lista raste, a skroluje telo panela. */
.istorija-lista {
    overflow-x: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.istorija-lista table {
    width: 100%;
    table-layout: fixed;
}

.istorija-lista td {
    vertical-align: top;
}

.istorija-lista td.kada {
    width: 8.5rem;
    color: var(--muted);
    font-size: .82rem;
    white-space: nowrap;
}

.istorija-lista .bedz {
    white-space: normal;
}

.istorija-lista .dogadjaj-ko {
    color: var(--muted);
    font-size: .8rem;
}

.istorija-lista .dogadjaj-build {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: .25rem;
    font-size: .78rem;
    word-break: break-all;
}