/* ====================================================================================
   NIT Software Solutions © 2026 — Sva prava zadržana.
   Projekat:  NITErp
   Fajl:      NITErp.Client/wwwroot/css/erp-ljuska.css
   Modul:     UI / Ljuska
   Opis:      Raspored ljuske (sidebar + rail + zaglavlje) po mockupu v2. Ovde je
              preseljen i ceo <style> blok iz MainLayout.razor (~160 linija sa
              hardkodovanim bojama) — sve boje su sada tokeni iz erp-tema.css.
              Rail režim vozi atribut data-erp-rail="1" na <html> (localStorage ključ
              erpRail, primenjuje ga head skripta u App.razor pre prvog iscrtavanja).
   Nastalo:   20.08.2026, faza 2 UI standarda.
   ==================================================================================== */

/* ------------------------------------------------------------------------------------
   ŠKOLJKA
   ------------------------------------------------------------------------------------ */
.erp-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.erp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ------------------------------------------------------------------------------------
   SIDEBAR — 248px, rail 56px. Boje isključivo iz --sidebar-* tokena: tema odlučuje
   da li je svetao (indigo) ili taman (okean, smaragd).
   ------------------------------------------------------------------------------------ */
/* N611 (vlasnik 25.09.2026: „malo bih i proširio meni jer mi je zbog zvezdice … dosta stavki prelomilo“):
   248 → 272px na desktopu; na telefonu fioka ostaje 248px (v. mobilni blok). */
.erp-sidebar {
    width: 272px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    transition: width .18s ease;
    overflow: hidden;
}

/* ⚠️ Ceo rail blok važi SAMO na desktopu (21.08.2026, prijava sa testiranja):
   atribut data-erp-rail stoji na <html> i na telefonu, pa je fioka preko sadržaja
   bila široka 248px a pokazivala samo ikonice — width je mobilni blok već gazio,
   ali skrivanje natpisa nije. Na telefonu je fioka UVEK puna. */
@media (min-width: 768px) {
    /* ☠️ N601 (vlasnik 25.09.2026): „skupi meni mi nema nikakvog smisla da korisnik pamti kakva je ikonica
       pa da klikne kao na nju" – izbor: „Nestaje, burger vraca". Uska traka od 56px sa ikonicama je ukinuta;
       skupljen meni NESTAJE, a vraca ga burger gore levo (jedina kontrola). Kljuc `erpRail` i atribut
       `data-erp-rail` su zadrzani, pa zapamceno stanje korisnika vazi i dalje. */
    html[data-erp-rail="1"] .erp-sidebar {
        width: 0;
        border-right: 0;
    }
}

/* --- brend --- */
.sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
}

    /* M-N689: brend je link na Radni centar - bez podvlacenja i plave boje linka, u boji menija. */
    a.sb-brand,
    a.sb-brand:hover {
        color: var(--sidebar-text);
        text-decoration: none;
    }

    a.sb-brand:hover .sb-tekst {
        color: var(--primary);
    }

    /* Znak ,oblak" (787x556): 26 px visine = 37 px sirine, ista visina reda kao stara kocka od 30 px. */
    .sb-brand .sb-logo {
        height: 26px;
        width: auto;
        flex: none;
    }

    .sb-brand .sb-logo-tamna {
        display: var(--sb-logo-tamna, block);
    }

    /* M-N689 (vlasnik: ,ovo treba da se centrira po visini"): znak ima oblak GORE a slova nit DOLE, pa mu je vizuelno
       teziste nize od sredine slike - natpis se spusta za 3 px da stoji u visini oblaka i slova zajedno. */
    .sb-brand .sb-tekst {
        position: relative;
        top: 3px;
    }

    .sb-brand .sb-logo-svetla {
        display: var(--sb-logo-svetla, none);
    }

/* --- navigacija --- */
.erp-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 10px 10px;
    /* ☠️ N376 (vlasnik): klizač je bela traka koja "bode oči" (Windows/Chrome podrazumevana traka
       ima belu podlogu bez obzira na temu sidebara). Tanak, u boji menija (--sidebar-border, malo
       svetliji/tamniji od pozadine u obe teme jer je izveden iz istog tokena po temi), bez bele
       podloge (`track: transparent`), pojačava se na prelazak mišem (--sidebar-hover, već korišćen
       za hover pozadinu drugde u meniju). SAMO ovaj element (`.erp-sidebar-nav`, obican omotač, ne
       Syncfusion — CSS izolacija bi radila, ali pravilo je namerno ovde uz ostatak sidebar CSS-a) —
       nije globalno pravilo, ne dodiruje ostale skrolujuće okvire u programu.
       Merljiva provera: `getComputedStyle(document.querySelector('.erp-sidebar-nav')).scrollbarWidth`
       mora da vrati `thin`. */
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

    .erp-sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .erp-sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .erp-sidebar-nav::-webkit-scrollbar-thumb {
        background: var(--sidebar-border);
        border-radius: 4px;
    }

        .erp-sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: var(--sidebar-hover);
        }

.sb-sekcija {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    font-weight: 700;
    margin: 12px 6px 4px;
    white-space: nowrap;
}

/* M-N620: "Nedavno" - mala prigusena kanta u naslovu brise ceo spisak. */
.sb-sekcija-nedavno {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sb-obrisi {
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--sidebar-muted);
    line-height: 1;
    cursor: pointer;
}

.sb-obrisi {
    padding: 2px 4px;
    font-size: 11px;
    opacity: .6;
}

    .sb-obrisi:hover,
    .sb-obrisi:focus-visible {
        opacity: 1;
        background: rgba(255, 255, 255, .08);
    }

.erp-menu-item {
    transition: background .15s ease;
    margin: 0 0 1px;
    border-radius: 8px;
}

    .erp-menu-item:hover {
        background: var(--sidebar-hover);
    }

.erp-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 9px !important;
    color: var(--sidebar-text) !important;
    border-radius: 8px;
    white-space: nowrap;
}

    /* ☠️ N376 VRAĆENO (vlasnik, izmereno uživo): treći nivo menija (stavke pod „Dokumenti") nosi
       ikonicu čije ime dolazi iz TIPA DOKUMENTA (baza) — SAMO specifična klasa (`bi-cash-stack`,
       `bi-truck`…), BEZ osnovne `bi` — `i.bi` (selektor po klasi) tu ne pogodi ništa, izmereno
       `margin-right: 0px`. `i:first-child` pogađa PRVI `<i>` u `.nav-link` po POZICIJI, ne po
       imenu klase — radi na sva tri nivoa bez obzira odakle ime ikonice dolazi (isti razmak kao
       .sb-grupa iznad, 12px — jedan `<i>` po stavci, margin-right ovde ne udvostručuje ništa,
       za razliku od .sb-grupa koja ima dve ikonice). */
    .erp-sidebar-nav .nav-link i:first-child {
        min-width: 18px;
        width: 18px;
        text-align: center;
        font-size: 14.5px;
        margin-right: 12px !important;
        color: var(--sidebar-muted) !important;
    }

/* Folderi — malo istaknutiji natpis, ista boja. */
.erp-sidebar-nav .nav-link.fw-bold {
    letter-spacing: .3px;
}

/* Aktivna stavka: prozirna primary pozadina + marker levo — sve izvedeno iz tokena. */
.erp-sidebar-nav .nav-link.active {
    background: var(--sidebar-active) !important;
    color: var(--sidebar-active-text) !important;
    border-left: 3px solid var(--primary) !important;
    border-radius: 0 8px 8px 0 !important;
    font-weight: 600;
}

    .erp-sidebar-nav .nav-link.active i.bi {
        color: var(--sidebar-active-text) !important;
    }

/* Podnivoi — tanka vođica i sitniji font. */
.erp-nav-deca {
    border-left: 1px solid var(--sidebar-border) !important;
    margin-left: 1.1rem !important;
    padding-left: .35rem !important;
}

    .erp-nav-deca .nav-link {
        font-size: 12.5px;
    }

    .erp-nav-deca .erp-nav-deca .nav-link {
        font-size: 12px;
        color: var(--sidebar-muted) !important;
    }

/* Strelica foldera. */
.erp-nav-strelica {
    transition: transform .2s ease-in-out;
    font-size: .8rem;
    color: var(--sidebar-muted);
}

/* N611 (vlasnik 25.09.2026, maketa MG8, izbor: levo 250px): folder se vidi na prvi pogled — blaga pozadina,
   broj stavki i jača strelica koja se okreće nadole kad je otvoren. Boje su izvedene iz --sidebar-text,
   pa rade i na tamnom i na svetlom meniju (tema „indigo“). */
.erp-sidebar-nav .nav-link.erp-nav-folder {
    background: color-mix(in srgb, var(--sidebar-text) 7%, transparent);
    margin: 2px 0;
}

.erp-sidebar-nav .erp-menu-item:hover .nav-link.erp-nav-folder {
    background: color-mix(in srgb, var(--sidebar-text) 11%, transparent);
}

.erp-nav-folder .erp-nav-strelica {
    font-size: .85rem;
    color: var(--sidebar-text);
    opacity: .75;
}

.erp-nav-folder.otvoren .erp-nav-strelica {
    transform: rotate(90deg);
}

.erp-nav-broj {
    margin-right: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sidebar-text) 9%, transparent);
    color: var(--sidebar-muted);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
}

/* N611: dug naziv se prelama u drugi red umesto „…“ („Kalkulacija maloprodaje EUROPROM“,
   „Nalog magacinu za izdavanje“); kratki ostaju u jednom redu. */
.erp-sidebar-nav .nav-link .erp-nav-natpis {
    white-space: normal;
    line-height: 1.25;
}

/* N612: „Skupi sve“ na dnu menija — van klizaca, tiho dugme preko cele širine. */
/* M-N620: "Skupi sve" i "Rasiri sve" jedno pored drugog na dnu menija. */
.erp-sb-folderi {
    display: flex;
    gap: 6px;
    flex: none;
    margin: 6px 10px 10px;
}

    .erp-sb-folderi .erp-sb-skupi {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        justify-content: center;
    }

.erp-sb-skupi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin: 6px 10px 10px;
    padding: 7px 10px;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .erp-sb-skupi:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-text);
    }

/* Zvezdice (omiljeni) — skrivene dok se ne pređe mišem preko stavke. */
.erp-zvezda {
    color: var(--warn);
    cursor: pointer;
}

.erp-star-hover {
    opacity: 0;
    transition: opacity .2s ease;
}

/* N611: zvezdica za DODAVANJE u omiljeno ne zauzima mesto u redu — leži preko desnog kraja stavke i vidi
   se samo na prelaz mišem. Do sada je nevidljiva zvezdica čuvala ~30px, pa se naziv prelamao ranije nego
   što mora. Zvezdica već omiljene stavke (puna) ostaje u redu. */
.erp-menu-item {
    position: relative;
}

    .erp-menu-item .erp-star-hover {
        position: absolute;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
        border-radius: 6px;
        background: color-mix(in srgb, var(--sidebar-bg) 88%, var(--sidebar-text));
    }

.erp-menu-item:hover .erp-star-hover {
    opacity: .5;
}

    .erp-menu-item:hover .erp-star-hover:hover {
        opacity: 1;
    }


/* ------------------------------------------------------------------------------------
   MOBILNI (<768px): sidebar postaje fioka preko sadržaja, sa zavesom.
   ------------------------------------------------------------------------------------ */
.erp-sidebar-zavesa {
    display: none;
}

@media (max-width: 767.98px) {
    .erp-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: 248px !important; /* rail nema smisla na telefonu */
    }

        .erp-sidebar.otvoren {
            transform: translateX(0);
        }

    .erp-sidebar-zavesa.on {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 13, 20, .4);
        z-index: 1040;
    }
}

/* ------------------------------------------------------------------------------------
   ZAGLAVLJE
   ------------------------------------------------------------------------------------ */
.erp-topbar {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

/* ☠️ N389 (vlasnik, maketa TB2 — merodavna): traka je TRI zone, ne dve. LEVO (burger, naslov,
   razdelnik) ne raste — prirodna veličina; SREDINA centrira pretragu u SLOBODNOM prostoru (raste/
   skuplja se ona, ne cela traka); DESNO (kontekst/korisnik) ne raste, i više ne treba `ms-auto` —
   sredina već popuni sve što preostane. `min-width:0` na levo/sredina je OBAVEZAN u flex redu: bez
   njega ni jedna zona ne bi smela da se stegne ispod sadržaja koji nosi, pa bi naslov/pretraga
   gurali ostale zone van reda umesto da se skupe/seku. */
/* ☠️ N581 (vlasnik, 25.09.2026): „kad se otvori chrome prvi put bude mi skuplje… ružno mi
   izgleda ovo na vrhu, preklapa se" — pretraga je nalegla PREKO naslova „Radni centar".
   ☠️ Uzrok nije širina pretrage nego DVE stvari zajedno:
     1. leva zona je bila `flex: 0 0 auto`, dakle nije smela da se skupi — pa je naslov drzao punu
        širinu i kad je nije bilo;
     2. srednja zona centrira sadržaj (`justify-content: center`), a centriran sadržaj koji je širi
        od svoje kutije prelazi preko OBE ivice — zato je išao levo, preko naslova, a ne desno.
   📌 Zato leva zona sada SME da se skupi: naslov ima svoju elipsu (`.erp-naslov-strane`) i
      ustupa mesto pre nego što išta izađe iz trake. Ispod 1200px pretraga se svodi na ikonicu —
      i dalje se klikne, i dalje radi Ctrl+K, samo ne troši 380px na užem prozoru. */
.erp-topbar-levo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.erp-topbar-sredina {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    /* ☠️ N601 (vlasnik: „Treba malo odvojiti pretragu od firme na skupljenom ekranu, mali gap"): kad se
       pretraga stegne da stane (1200-1400px) ili je samo ikonica (ispod 1200px), stajala je 4-10px od cipa firme -
       izmereno u pregledacu. Unutrasnji razmak desno + najmanja sirina zone (34px ikonica + 12px) drze je
       22px od firme na svakoj sirini; kad nema mesta, sece se naslov levo, ne pretraga. */
    padding-right: 12px;
    min-width: 46px;
}

.erp-topbar-desno {
    flex: 0 0 auto;
}

/* Naslov strane — sad ODMAH posle hamburgera (razdelnik ka pretrazi je `border-start` na ovom
   istom elementu, kako je i bilo). Seče se sa tri tačkice PRE nego što pretraga izgubi širinu —
   v. redosled zona iznad i `.erp-trazilica` ispod. */
.erp-naslov-strane {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ☠️ N389 (vlasnik, maketa TB2 — merodavna, treći put za ovo polje): mesto i padajuća lista
   ostaju (N377) — sada u SREDIŠNJOJ zoni, ne u levoj. `flex:0 1 auto` znači: NE raste preko svoje
   željene širine (380px) samo zato što ima mesta (`flex-grow:0`), ali SME da se stegne kad zona
   nema 380px na raspolaganju (`flex-shrink:1`), do granice od 170px — ispod toga se seče NASLOV
   (`.erp-naslov-strane` iznad), ne pretraga. `max-width:100%` čuva polje unutar sredine i na
   telefonskim širinama gde bi 380px bilo šire od same zone. */
.erp-trazilica {
    position: relative;
    width: 380px;
    min-width: 170px;
    max-width: 100%;
    flex: 0 1 auto;
}

/* Uži prozor: pretraga se svodi na ikonicu. Prag je 1200px jer je tu zbir zona (burger + naslov
   + čip firme + čip godine + pomoć + korisnik) počeo da gura pretragu preko naslova. */
@media (max-width: 1199.98px) {
    .erp-trazilica {
        width: 34px;
        min-width: 34px;
        flex: 0 0 auto;
    }

        .erp-trazilica input {
            padding: 0;
            color: transparent;
        }

            /* Natpis se gasi zasebno — `color` ne dira `::placeholder`, pa bi inače virio
               „Pretraži ekrane…" iz kutije od 34px. */
            .erp-trazilica input::placeholder {
                color: transparent;
            }

        .erp-trazilica kbd {
            display: none;
        }

        .erp-trazilica i {
            left: 50%;
            transform: translate(-50%, -50%);
        }
}

    .erp-trazilica input {
        width: 100%;
        height: var(--ctrl-h);
        padding: 0 60px 0 32px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: 12.5px;
        outline: none;
        cursor: pointer; /* okidač palete — ne kuca se ovde nego u paleti */
    }

        .erp-trazilica input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); /* M-N630: bilo 3px */
        }

    .erp-trazilica i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 13px;
    }

    .erp-trazilica kbd {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: var(--muted);
        border: 1px solid var(--border);
        border-radius: 5px;
        padding: 1px 5px;
        background: var(--surface);
    }

/* Čip — firma, godina. */
.erp-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    height: var(--ctrl-h);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text);
}

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

    /* ☠️ N389 (vlasnik, izmereno): čip firme je pokazivao PUN naziv u 340px i tako se sekao — sada
       pokazuje SkraceniNaziv, pa mu i sama širina ide na 220px (pun naziv ostaje kao `title`).
       ☠️ N416: čip je od SADA sâm birač (`MojComboBox` + `e-firma-combo`, ne prost `<span>`) — v.
       `.e-firma-combo` pravila ispod za širinu/izgled input-a. */
    .erp-chip.erp-chip-firma {
        max-width: 220px;
    }

    /* ☠️ N389 (vlasnik, izmereno): čip godine je bio 253px za samo četiri cifre. 96px je dovoljno
       za "2026" + ikonicu + strelicu; `align-items:center` (već na `.erp-chip`) sad stvarno centrira
       jer je `mb-1` skinut sa `MojComboBox` (v. taj fajl) — to je bio pravi uzrok „preklapanja".
       ☠️ N392 (vlasnik, izmereno u živoj aplikaciji): 96px NIJE bilo dovoljno — strelica padajuće liste
       sama uzima 31px, pa je tekstu ostajalo 24px za "2026" kom treba 39px (scrollWidth). `fit-content`
       + `min-width` umesto zakucanog broja, da nijedna četvorocifrena godina ne može da se odseče. */
    .erp-chip.erp-chip-godina {
        width: fit-content;
        min-width: 120px;
    }

/* Prazan padajući spisak — naš natpis umesto Syncfusion-ovog „No records found" (07.09.2026). */
.erp-combo-prazno {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* Čip firme koji se KLIKĆE (maketa F2, 07.09.2026) — do tada je firma bila samo ispis. */
.erp-chip.erp-chip-klik {
    cursor: pointer;
    user-select: none;
}

    .erp-chip.erp-chip-klik:hover {
        border-color: var(--primary);
    }

/* ☠️ N424/N426 (vlasnik, izmereno uživo — "dupli fokus", isto na cipu firme i godine): otkad je
   cip SAM birač (N416), fokus leži na UNUTRAŠNJEM Syncfusion input-u, ne na ovom `<div>` (nema
   `tabindex`) — stari `:focus-visible` na `.erp-chip-klik` je zato već MRTAV (nikad ne pogodi),
   dok Syncfusion ISTOVREMENO crta SVOJ prsten (`.e-input-focus`) sa DRUGIM oblikom/radijusom od
   cipa — otud izgled "dva prstena". Popravka: JEDAN prsten, na NIVOU CELOG CIPA, koji prati NJEGOV
   oblik (`:focus-within` — okine kad fokus ima BILO ŠTA unutra, ne cip sam), a Syncfusion-ov
   ugrađen prsten se gasi (v. `.e-input-focus` pravila kod `.e-custom-combo`/`.e-firma-combo`). */
.erp-chip:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-radius: 8px;
}

/* ===== N520: prsten fokusa se gasi dok je padajuca lista otvorena (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: „jel moze nekako da se skine ovaj plavi fokus oko polja kad kliknem i izadje mi
   padajuca lista?"
   ☠️ Prvo sam hteo `:focus-visible` (prsten samo kad se dodje tastaturom). IZMERENO u
   pregledacu, i NE VALJA: za polja u koja se kuca pregledac pali `:focus-visible` i na klik misem -
   oba slucaja vracaju `true`. Ta poluga ovde ne postoji.
   ☠️ Ali prsten i ne smeta uvek, nego bas DOK JE LISTA OTVORENA: tada spisak sam pokazuje gde
   se covek nalazi, pa je prsten visak. Signal za to vec postoji i vec mu verujemo -
   `App.razor` red 1058 gadja `closest('[aria-expanded="true"]')`, uz zabelezeno merenje iz 08.09:
   „Syncfusion te atribute drzi na OMOTACU". Omotac je unutar cipa, pa ga `:has()` vidi.
   ⚠️ Prsten NIJE uklonjen - ko ide tastaturom i dalje vidi gde je dok je lista zatvorena.
   Gasi se samo dok je spisak otvoren, jer tada ima ko da pokaze mesto umesto njega. */
.erp-chip:has([aria-expanded="true"]) {
    outline: none;
}

/* ===== N522: dok je lista otvorena, polje NEMA nikakav naglasak (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik, posle N520: „Moze da se na klik skloni sa svih polja kao i na godini".
   ☠️ Posle N520 je nas prsten nestao, ali su ostala jos DVA naglaska, pa je cip firme i dalje
   „slabije" svetleo dok je spisak otvoren - vlasnik je to i prijavio, i POTVRDIO merenjem koje sam
   trazio („nestane ivica kad sklonim mis"):
     1. plava ivica na prelazak misem (`.erp-chip.erp-chip-klik:hover`) - a dok je lista otvorena
        mis stoji bas nad cipom, pa je uvek upaljena. Cip GODINE je nema, jer nema `erp-chip-klik`;
        otud razlika koju je vlasnik uocio izmedju firme i godine.
     2. Syncfusion-ova sopstvena senka fokusa (`.e-input-focus`) - gasili smo je samo na ta dva
        cipa gore (N424/N426), pa je na poljima u formama ostajala.
   ☠️ Zato se sada gase SVA TRI, i to po istom uslovu kao N520 - dok je spisak otvoren. Van tog
   stanja se nista ne menja: hover i dalje kaze da je cip kliktabilan, prsten i dalje pokazuje gde
   je covek dosao tastaturom (pravilo 12, tacka 11). */
.erp-chip.erp-chip-klik:has([aria-expanded="true"]):hover {
    border-color: var(--border);
}

[aria-expanded="true"].e-input-group,
[aria-expanded="true"].e-control-wrapper,
[aria-expanded="true"] .e-input-group,
[aria-expanded="true"] .e-control-wrapper {
    box-shadow: none !important;
}

    .erp-chip .erp-chip-strelica {
        font-size: 10px;
    }

/* ☠️ N416 (vlasnik): panel "Promeni firmu" (bio `.erp-firma-panel`/`.erp-firma-zastor`/
   `.erp-firma-omotac`, popravljen za pozicioniranje u N412) je UKINUT U CELINI — čip je sad sam
   birač, Syncfusion-ov popup se pozicionira programski, bez ijedne od ovih klasa. Nijedna od njih
   se više ne koristi (provereno) — uklonjene, ne ostavljene kao mrtav kod. */

/* Godina: Syncfusion lista u čipu — bez sopstvene ivice (klase e-custom-combo).
   ☠️ N392: 64px zakucano je bilo deo uzroka sečenja "2026" — sad rasteže sa čipom (v. `.erp-chip-godina`
   iznad), a `min-width` na `.e-input` ispod garantuje da sam tekst nikad ne padne ispod 44px. */
.erp-chip .e-custom-combo {
    width: auto;
    min-width: 64px;
}

/* Avatar sa inicijalima. */
.erp-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: 11.5px;
    font-weight: 700;
}

/* Hamburger. */
.erp-burger {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text);
}

/* ------------------------------------------------------------------------------------
   PRESELJENO IZ MainLayout <style> BLOKA (20.08.2026) — tokenizovano.
   ------------------------------------------------------------------------------------ */

/* Kartice modula u dijalogu izbora podsistema. */
.erp-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    transition: .3s;
}

.erp-module-card.border-primary {
    border-width: 2px;
}

/* ☠️ N413 (koordinator, izmereno uživo — DRUGI put isti obrazac kao N411 istog dana): `e-custom-combo`
   stoji NA SAMOM `.e-input-group` (`class="e-ddl e-lib e-input-group e-control-container
   e-control-wrapper e-custom-combo ..."`), ne kao predak — svi selektori ispod su SPOJENI
   (bez razmaka), ne potomak-selektori. Dosad NIJEDAN od ovih pravila nije pogađao NIŠTA
   (ni uklanjanje rama), tačno kao `.erp-polje-*` pre spajanja. */
.e-input-group.e-custom-combo {
    border: none !important;
    background: transparent !important;
    padding-bottom: 0 !important;
}

.e-input-group.e-custom-combo::before,
.e-input-group.e-custom-combo::after {
    display: none !important;
}

/* ☠️ N400 (koordinator, izmereno uzivo): `min-width` NE SMANJUJE — sam `<input>` nema zadatu
   sirinu, pa je browser koristio podrazumevanih ~20 znakova (181px), `fit-content` na cipu je
   to POSTENO izmerio i cip je ispao 253px. Dokaz uzivo: `input.style.width='48px'` -> cip
   odmah 120px. Zato IZRICITA `width` (ne min-width) — cip se sam skupi oko stvarne sirine.
   ☠️ N413 (koordinator, izmereno uživo): ni TO nije bilo dovoljno — Syncfusion ima SVOJE
   pravilo `.e-input-group.e-control-wrapper input.e-input { width:100% }`, specifičnosti
   (0,3,1), naspram naše `.e-custom-combo .e-input` (0,2,0) — Syncfusion pobeđuje, `width:48px`
   se NIKAD nije primenio. Popravka: spojen selektor (isti element, `input.e-input`) DA BI
   specifičnost bila jednaka (0,3,1) — a `!important` osigurava da i pri IZJEDNAČENOJ
   specifičnosti naše pravilo (učitano POSLE Syncfusion-ove teme) pobedi bez nagađanja o
   redosledu učitavanja stilova. */
.e-input-group.e-custom-combo input.e-input {
    font-weight: 500 !important;
    color: var(--text) !important;
    width: 48px !important;
}

/* ☠️ N424/N426 (vlasnik): Syncfusion-ov SOPSTVENI prsten fokusa (`.e-input-focus`) ima drugi
   oblik/radijus od cipa — gasi se ovde; JEDAN prsten sad crta `.erp-chip:focus-within` (iznad,
   oko celog cipa). Dva selektora (spojen i potomak) jer nismo uživo potvrdili na koji element
   Syncfusion TAČNO kači `.e-input-focus` za ovu kontrolu — isti oprez kao za `.e-popup` ispod. */
.e-input-group.e-custom-combo.e-input-focus,
.erp-chip-godina .e-input-focus {
    box-shadow: none !important;
    outline: none !important;
}

/* ☠️ N432 (vlasnik, izmereno uživo): spisak godine je bio i UŽI i POMEREN ULEVO u odnosu na
   polje iznad njega — uzrok je BAŠ ovaj ručni `margin-left: -29px` (N413, pretpostavka koja je
   od početka bila obeležena kao "čeka živu potvrdu" — i pokazala se NETAČNOM, ili bar
   nepotpunom). Umesto da se pogađa ČETVRTI put, popravka ide na IZVOR: `MojComboBox` sad nosi
   pravi `PopupWidth="100%"` (Syncfusion-ov sopstveni podrazumevani — v. `MojComboBox.razor`),
   koji spisak vezuje TAČNO za širinu i levu ivicu `.e-input-group` bez potrebe za ručnim
   pomakom. Ovo pravilo (koje je guralo popup u POGREŠNOM smeru kad širina više ne "beži")
   je zato UKLONJENO, ne dopunjeno novim brojem. */

/* ☠️ N416 — čip firme JE birač (`MojComboBox` + `e-firma-combo`, isti obrazac kao čip godine,
   NAMERNO druga klasa od `e-custom-combo`): da izbegnemo baš ono što nas je danas mučilo tri
   puta — deljena klasa značila bi da širina/pravilo za GODINU (48px) pogodi i FIRMU, ili obrnuto.
   Selektori su OD POČETKA spojeni (isti element) sa proverenom specifičnošću/`!important` — nema
   nagađanja ovog puta, isti princip koji je N413 razotkrio za `.e-custom-combo`.
   ⚠️ Širina input-a (150px) je PROCENA iz poznatih brojeva (čip max-width 220px minus ikonica,
   strelica, razmaci i unutrašnje popune — v. N389/N413 merenja), NIJE izmerena uživo na OVOM
   novom elementu — treba potvrditi da li "guta" prosečan skraćeni naziv (~17 znakova) bez
   sečenja i bez prelivanja čipa preko 220px. */
.e-input-group.e-firma-combo {
    border: none !important;
    background: transparent !important;
    padding-bottom: 0 !important;
}

.e-input-group.e-firma-combo::before,
.e-input-group.e-firma-combo::after {
    display: none !important;
}

.e-input-group.e-firma-combo input.e-input {
    font-weight: 600 !important;
    color: var(--text) !important;
    width: 150px !important;
}

/* ☠️ N431 (vlasnik: "fokus i sve OK, samo skupi dugme strelice") — Syncfusion-ova sopstvena
   ikonica strelice (`.e-input-group-icon.e-ddl-icon`, PRAVO DETE `.e-input-group`-a, ne sestra
   kao naša ikonica zgrade/kalendara — otud običan potomak-selektor, ne spojen) je nosila
   podrazumevanu (širu) ispunu. Sužena na ~22px, bočna ispuna smanjena — fokus/okvir/`.e-input-focus`
   NISU dirani (vlasnik izričito: "ne diraj ih"). */
.e-firma-combo .e-input-group-icon.e-ddl-icon {
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
}

/* Isti razlog kao za godinu — Syncfusion-ov prsten fokusa se gasi, jedinstven prsten je
   `.erp-chip:focus-within` oko celog cipa. */
.e-input-group.e-firma-combo.e-input-focus,
.erp-chip-firma .e-input-focus {
    box-shadow: none !important;
    outline: none !important;
}

/* ☠️ N432 (vlasnik): isti uzrok/popravka kao gore za godinu — `width: 280px !important` +
   `margin-left: -29px` (N425) su bili RUČNA procena, ne izmereni brojevi, i nalog sad traži
   TAČNO poklapanje sa `.e-input-group` (±1px), ne "šire od cipa". `PopupWidth="100%"` na
   `MojComboBox` (v. `MojComboBox.razor`) sad radi taj posao nativno — ovo pravilo je UKLONJENO.
   ⚠️ Posledica: spisak firme se VRAĆA na širinu input-a (150px + strelica), uži nego 280px —
   ako "ALUGUARD VALJEVO" (30 znakova, najduže u bazi) opet ne stane, N425 i N432 su u sukobu i
   treba nazad kod vlasnika (v. izveštaj), ne novo nagađanje ovde. */

/* ------------------------------------------------------------------------------------
   DINAMIČKA FORMA (ErpDynamicForm) — ujednačeno pakovanje polja: isti vertikalni
   ritam redova i iste labele na svim formama, umesto da svaka „diše" drugačije.
   ------------------------------------------------------------------------------------ */
.erp-forma .erp-forma-red {
    row-gap: 4px;
    margin-bottom: 12px;
    align-items: end; /* polja različitih visina (checkbox pored teksta) stoje na istoj liniji */
}

/* M-N695 (vlasnik 22.10.2026: „voleo bi da sabijemo malo po visini da se vide lepo dugmad odustani i sacuvaj"):
   izmereno na formi firme - svako polje je pod sobom cuvalo 20px praznog mesta za poruku o gresci (+4px), a red jos
   12px; sadrzaj 941 px u prozoru od 886 px, pa su dugmad bila ispod ivice. Isto kao forma 12 (v. `.erp-forma-12
   .erp-input-wrapper`): prazno mesto se gasi, ali red za poruku OSTAJE - kad greska postoji, poraste i vidi se.
   Vazi za sve dinamicke forme (slajderi). Posle: 886 px, dugmad u prozoru. */
.erp-forma .erp-input-wrapper {
    margin-bottom: 0 !important;
}

.erp-forma .erp-input-wrapper > .mt-1 {
    min-height: 0 !important;
    margin-top: 0 !important;
}

.erp-forma .erp-forma-red {
    margin-bottom: 8px;
}
    .erp-forma .erp-forma-red:last-child {
        margin-bottom: 0;
    }

.erp-forma .form-label,
.erp-forma label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 2px;
}

/* ------------------------------------------------------------------------------------
   N411 — FORMA ARTIKLA na maketu AF6, U CELINI (dve kartice sa ramom, red-po-red kao
   maketa) — zamenjuje N394/N393's ad-hoc `row mb-2` (koje je samo pozajmljivalo Bootstrap
   grid za razmak; sad postoji prava, namenska klasa). Isti --row-py/--cell-px tokeni koje
   grid već koristi (N393 ostaje na snazi) — nema novih promenljivih.
   ⚠️ Visina SAMIH kontrola (`.e-input-group`) i dalje NIJE zakucana ovde, iz istog razloga
   kao ranije (nema uvida u živu formu — v. N393 istorija ako zatreba). */
.erp-kartice-red {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .erp-kartice-red {
        grid-template-columns: 1fr;
    }
}

/* ☠️ N414 (koordinator): prelom je bio 1200px (moja greška — izvedeno iz merenja na 2048px,
   ne iz vlasnikove stvarne širine prozora ~1050px), sada 900px kao u maketi. `min-width: 0` je
   OBAVEZAN na grid stavkama: bez njega grid track ne sme da se stisne ispod PRIRODNE širine
   sadržaja (CSS grid default), pa bi kartica sa `.w-dugo` poljem (max-width 430px) NAMETNULA
   celoj koloni bar tu širinu i pokvarila `1.5fr/1fr` odnos ili prelila red — sa `min-width:0`
   polja (koja već imaju SVOJ `max-width`, ne fiksnu širinu) slobodno se stisnu s kolonom. */
.erp-kartica {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    overflow: hidden;
}

.erp-kartica-naslov {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 10.4px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ☠️ N434 (vlasnik: "povecati nazive polja... skupiti malo prazan prostor") — nalog traži brojeve
   PRESLIKANE iz makete, ne procenjene: `.red { padding: 4px 0 }` (maketa, izmereno getComputedStyle-om
   uživo na `Mockup_AF6_FormaArtikla.html` — v. izveštaj) umesto dotadašnjeg `calc(var(--row-py)/2)`
   (2.5px, gustina "kompaktno") — literalna vrednost, ne token, jer maketa ovde NE koristi
   gustinu prikaza kao izvor. */
.erp-forma-12 .erp-forma-red {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding: 4px 12px;
}

    .erp-forma-12 .erp-forma-red:last-child {
        border-bottom: 0;
    }

    .erp-forma-12 .erp-forma-red.erp-forma-istaknut {
        background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    }

/* ☠️ N429 (vlasnik: "izgled dugmica i svega kao sa makete/kalkulacije") — maketa AF6 (`.red label`)
   traži font-size 11.2px za natpise, ovde je pre ove izmene stizao samo iz `--base-fs` (13-15px,
   gustina prikaza N393) preko Bootstrap-ovog `.form-label` — vidno veći nego na maketi. Širina
   (122px) je već zakucana ispod (N411); font-size joj se ovde pridružuje istim `!important`
   povodom (isti razlog: inline stil sa `MojTextBox`/`MojComboBox` inače nema svoj font-size, ali
   nasleđuje `--bs-body-font-size` sa `body`, veći od makete). */
.erp-forma-12 .form-label {
    width: 122px !important;
    font-size: 11.2px !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

/* ☠️ N394/N400 (koordinator, izmereno uzivo): `style="max-width:...` kroz `DodatniAtributi`
   STIŽE na sam `<input>` (potvrđeno — 9 elemenata, computed max-width tačan), ali VIDLJIVA
   kutija je omotač `.e-input-group` (kod Syncfusion-a uvek ŠIRI od 100% reda), koji tu širinu
   ne vidi — otud "tekst uzak, ram preko cele širine". `CssClass` (ovde: `DodatnaKlasa` na
   MojTextBox/MojComboBox/MojNumericTextBox) Syncfusion sam stavlja NA omotač — isti mehanizam
   koji već nosi `erp-obavezno` na osamdesetak mesta — pa širina ovde ide kroz klasu, ne stil.
   ☠️ N407 (koordinator, izmereno uzivo): selektor SA RAZMAKOM (`.erp-polje-kratko .e-input-group`)
   je potomak-selektor — traži `.e-input-group` UNUTAR elementa sa `erp-polje-kratko`, a
   Syncfusion `CssClass` stavlja OBE klase NA ISTI element (`class="erp-obavezno e-input-group
   e-control-container e-control-wrapper valid"`, isti obrazac kao postojeći `.erp-obavezno.
   e-input-group`). Selektor je zato pogađao NULU elemenata (computed max-width: none na svih
   9 polja) — popravka je SPOJENI selektor, bez razmaka. */
.e-input-group.erp-polje-kratko {
    max-width: 170px;
}

.e-input-group.erp-polje-srednje {
    max-width: 290px;
}

.e-input-group.erp-polje-dugo {
    max-width: 430px;
}

/* ☠️ N411: `ErpBirac` u stanju "prikaz izabranog" NIJE `SfComboBox` (nema `.e-input-group`) — samo
   ručni `<div>`, pa mu klasa stiže direktno na markup (v. `ErpBirac.razor`), ne kroz `CssClass`.
   Ista širina, opšti (jednostruki) selektor pokriva i taj slučaj bez sudara sa gornjim pravilima. */
.erp-polje-kratko {
    max-width: 170px;
}

.erp-polje-srednje {
    max-width: 290px;
}

.erp-polje-dugo {
    max-width: 430px;
}

/* ------------------------------------------------------------------------------------
   OBJEKAT-STRANICA (kontrola pristupa, kasnije i dokumenta — faza 5): zaglavlje sa
   avatarom, tabovi i kartice sadržaja. Klase erp-objekat-* su OPŠTE, ne samo za
   korisnika — object page standard §6 koristi isti skelet.
   ------------------------------------------------------------------------------------ */
.erp-objekat-zaglavlje {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.erp-avatar-veliki {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 15px;
}

.erp-objekat-naslovi b {
    display: block;
    font-size: 16px;
}

.erp-objekat-naslovi small {
    color: var(--muted);
    font-size: 12px;
}

.erp-objekat-tabovi {
    display: flex;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

    .erp-objekat-tabovi button {
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        padding: 0 2px 7px;
        cursor: pointer;
    }

        .erp-objekat-tabovi button.on {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            margin-bottom: -1px;
        }

        .erp-objekat-tabovi button:disabled {
            opacity: .45;
            cursor: default;
        }

.erp-objekat-kartice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
    align-items: start;
}

/* Kartica pristupa jednoj firmi. */
.erp-pristup-kartica {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}

.erp-pristup-vrh {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    font-size: 13px;
}

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

.erp-pristup-red {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 3px 0;
}

.erp-pristup-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

    .erp-pristup-x:hover {
        color: var(--err);
        background: var(--err-soft);
    }

/* Isprekidana kartica-poziv za dodelu u novoj firmi. */
.erp-pristup-nova {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 74px;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .erp-pristup-nova:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

/* Mali čip za podatke unutar kartica (modul, OJ, sektor). */
.erp-mini-cip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11.5px;
    color: var(--text);
    white-space: nowrap;
}

    .erp-mini-cip i {
        color: var(--muted);
        font-size: 11px;
    }

/* ------------------------------------------------------------------------------------
   VOĐENI TOK U KORACIMA (slajder „Dodeli pristup") — indikator 1—2—3 sa naslovima,
   napomena o dometu i pregled pred potvrdu. Korak koji je prošao ili je aktivan
   dobija akcenat; crta između koraka ostaje neutralna da ne liči na progress bar.
   ------------------------------------------------------------------------------------ */
.erp-koraci {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.erp-korak {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}

    .erp-korak span {
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid var(--border);
        font-size: 11.5px;
        font-weight: 600;
    }

    .erp-korak.on {
        color: var(--text);
        font-weight: 600;
    }

        .erp-korak.on span {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

.erp-korak-crta {
    flex: 1 1 16px;
    min-width: 16px;
    height: 1px;
    background: var(--border);
}

/* Rečenica-napomena ispod polja (domet, broj kombinacija). */
.erp-korak-napomena {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2, var(--bs-tertiary-bg));
    font-size: 12.5px;
    color: var(--text);
}

    .erp-korak-napomena i {
        color: var(--primary);
    }

/* Pregled pred potvrdu — redovi labela/vrednost, kao dok-panel ali u slajderu. */
.erp-pregled-dodele {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 14px;
}

    .erp-pregled-dodele .dok-red {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--border);
        font-size: 13px;
    }

        .erp-pregled-dodele .dok-red:last-child {
            border-bottom: 0;
        }

    .erp-pregled-dodele .dok-labela {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
    }

/* ------------------------------------------------------------------------------------
   SANDUČE SPREMNOSTI (RF-1, Radni centar) — dokumenta koja ne mogu na portal.
   Crta se SAMO kad ih ima; razlozi su klik-dugmad ka spisku.
   ------------------------------------------------------------------------------------ */
.erp-rc-sanduce {
    border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border));
    border-left: 4px solid var(--warn);
    border-radius: 12px;
    background: var(--warn-soft);
    padding: 10px 14px;
    margin-bottom: 16px;
}

    /* M-N707 (vlasnik 23.10.2026, ,ovo da se resi nekako"): broj i tekst u JEDNOM redu sa dugmetom,
       razlozi ispod kao mali cipovi koji se ne lome u dva reda (dug razlog dobija ,..." i ceo tekst u title). */
    .erp-rc-sanduce .vrh {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .erp-rc-sanduce .ikona {
        flex: none;
        color: var(--warn);
        font-size: 18px;
    }

    .erp-rc-sanduce .broj {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        flex: 1;
        min-width: 0;
    }

        .erp-rc-sanduce .broj b {
            font-size: 20px;
            line-height: 1.1;
            color: var(--warn);
        }

        .erp-rc-sanduce .broj span {
            font-size: 13px;
            color: var(--text);
        }

    .erp-rc-sanduce .erp-akcija {
        flex: none;
    }

    .erp-rc-sanduce .razlozi {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 8px 0 0 28px;
    }

        .erp-rc-sanduce .razlozi button {
            display: inline-block;
            max-width: 100%;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--surface);
            color: var(--text);
            font: inherit;
            font-size: 12.4px;
            line-height: 1.3;
            padding: 3px 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

            .erp-rc-sanduce .razlozi button:hover,
            .erp-rc-sanduce .razlozi button.izabran {
                border-color: var(--warn);
                background: color-mix(in srgb, var(--warn) 10%, var(--surface));
            }

            .erp-rc-sanduce .razlozi .koliko {
                font-weight: 700;
                color: var(--warn);
                margin-right: 5px;
            }

/* M-N707 (23.10.2026): spisak dokumenata koji ne mogu na portal - otvara se ispod kartice spremnosti,
   klik na red otvara dokument. Prepreke su u boji upozorenja, sve ostalo mirno. */
.erp-rc-nespremni {
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn);
    border-radius: 12px;
    background: var(--surface);
    margin: -6px 0 16px;
    overflow: hidden;
}

    .erp-rc-nespremni .zaglavlje {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px 8px 14px;
        border-bottom: 1px solid var(--border);
        color: var(--muted);
        font-size: 12.4px;
        font-weight: 600;
    }

    .erp-rc-nespremni .zatvori {
        border: 0;
        background: transparent;
        color: var(--muted);
        border-radius: 6px;
        padding: 2px 6px;
        cursor: pointer;
    }

        .erp-rc-nespremni .zatvori:hover {
            background: color-mix(in srgb, var(--primary) 8%, var(--surface));
            color: var(--text);
        }

    .erp-rc-nespremni .prazno {
        padding: 12px 14px;
        color: var(--muted);
        font-size: 12.8px;
    }

    .erp-rc-nespremni .lista {
        max-height: 340px;
        overflow-y: auto;
    }

    .erp-rc-nespremni .red {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(140px, 1.2fr) 2fr;
        gap: 12px;
        align-items: center;
        width: 100%;
        padding: 8px 14px;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 12.8px;
        text-align: left;
        cursor: pointer;
    }

        .erp-rc-nespremni .red:last-child {
            border-bottom: 0;
        }

        .erp-rc-nespremni .red:hover {
            background: color-mix(in srgb, var(--primary) 6%, var(--surface));
        }

    .erp-rc-nespremni .dok {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

        .erp-rc-nespremni .dok small {
            color: var(--muted);
            font-size: 11.4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .erp-rc-nespremni .dok b,
    .erp-rc-nespremni .komitent {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .erp-rc-nespremni .prepreke {
        color: var(--warn);
        font-size: 12.2px;
    }

@media (max-width: 1400px) {
    .erp-rc-nespremni .red {
        grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr);
    }

    .erp-rc-nespremni .prepreke {
        grid-column: 1 / -1;
    }
}


/* ------------------------------------------------------------------------------------
   POZADINSKI POSLOVI (RF-4, /sistem/radnici) — red po poslu: levo šta je i kako je
   prošao, desno šta sme da se menja. „Preostalo" je jedini broj koji raste kad
   nešto ne valja — zato jedini ima upozoravajuću boju.
   ------------------------------------------------------------------------------------ */
.erp-radnik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 10px;
}

    .erp-radnik.mrtav {
        opacity: .65;
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-radnik .naslov {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 14px;
    }

    .erp-radnik .opis {
        font-size: 12.5px;
        color: var(--muted);
        margin: 4px 0 8px;
    }

    .erp-radnik .stanje {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 12.5px;
        color: var(--muted);
    }

        .erp-radnik .stanje b {
            color: var(--text);
        }

        .erp-radnik .stanje .preostalo.ima {
            color: var(--err);
            font-weight: 600;
        }

            .erp-radnik .stanje .preostalo.ima b {
                color: var(--err);
            }

    .erp-radnik .greska {
        margin-top: 8px;
        font-family: monospace;
        font-size: 11.5px;
        color: var(--err);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.erp-radnik-podesavanja {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px dashed var(--border);
    padding-left: 16px;
    font-size: 12.5px;
}

    .erp-radnik-podesavanja label {
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: var(--muted);
    }

    .erp-radnik-podesavanja .prekidac {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        color: var(--text);
        cursor: pointer;
    }

    .erp-radnik-podesavanja input[type="number"],
    .erp-radnik-podesavanja input[type="text"],
    .erp-radnik-podesavanja select {
        height: 28px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 12.5px;
        padding: 0 8px;
    }

    .erp-radnik-podesavanja small {
        color: var(--muted);
        font-size: 11px;
        margin-top: -4px;
    }

    .erp-radnik-podesavanja .erp-akcija {
        align-self: flex-end;
    }

@media (max-width: 991px) {
    .erp-radnik {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-radnik-podesavanja {
        border-left: 0;
        padding-left: 0;
        border-top: 1px dashed var(--border);
        padding-top: 10px;
    }
}

/* ------------------------------------------------------------------------------------
   ODBIJENO SLANJE (RF-2, SeoDokumentDetalji) — trajni panel, ne toast: poruka sa
   servera nabraja SVE prepreke, prečice vode gde se koja popravlja.
   ------------------------------------------------------------------------------------ */
.erp-slanje-greska {
    border: 1px solid var(--err);
    border-radius: 10px;
    background: var(--err-soft);
    padding: 12px 14px;
    margin: 8px 0 14px;
}

    .erp-slanje-greska .vrh {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--err);
        font-size: 14px;
    }

        .erp-slanje-greska .vrh .erp-pristup-x {
            margin-left: auto;
        }

    .erp-slanje-greska p {
        margin: 8px 0;
        font-size: 13.5px;
        color: var(--text);
    }

    .erp-slanje-greska .precice {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 12.5px;
        color: var(--muted);
    }

/* ------------------------------------------------------------------------------------
   KARTON PRISTUPA (/core/admin/korisnici/{id}/karton) — štampani pregled. Na ekranu je
   kartica; pri štampi @media print skloni ljusku i ostavi samo karton.
   ------------------------------------------------------------------------------------ */
.erp-karton {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 20px 24px;
    max-width: 960px;
}

.erp-karton-vrh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid var(--border-strong);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

    .erp-karton-vrh h4 {
        margin: 0;
        font-size: 18px;
    }

    .erp-karton-vrh small {
        color: var(--muted);
        font-size: 12px;
    }

.erp-karton-zbir {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: right;
}

/* Dijagramski vrh kartona: četiri kartice KO→GDE→ŠTA SME→ŠTA VIDI, boje po ulozi
   kartice (usvojeni crtež od 21.08.2026). */
.erp-karton-dijagram {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 8px;
}

@media (max-width: 991px) {
    .erp-karton-dijagram {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.erp-karton-kartica {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
}

    .erp-karton-kartica .naslov {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 8px;
    }

    .erp-karton-kartica .stavka {
        padding: 5px 0;
        border-top: 1px dashed var(--border);
        line-height: 1.5;
    }

        .erp-karton-kartica .stavka b {
            color: var(--text);
            font-size: 12.5px;
        }

        .erp-karton-kartica .stavka.podnaslov {
            font-weight: 600;
            color: var(--text);
        }

        .erp-karton-kartica .stavka.prazno {
            font-style: italic;
        }

    .erp-karton-kartica.lj {
        border-color: rgba(var(--primary-rgb), .55);
    }

        .erp-karton-kartica.lj .naslov {
            color: var(--primary);
        }

    .erp-karton-kartica.zel {
        border-color: var(--ok);
    }

        .erp-karton-kartica.zel .naslov {
            color: var(--ok);
        }

    .erp-karton-kartica.nar {
        border-color: var(--warn);
    }

        .erp-karton-kartica.nar .naslov {
            color: var(--warn);
        }

    .erp-karton-kartica.siv .naslov {
        color: var(--muted);
    }

.erp-karton-naslov {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 18px 0 8px;
}

.erp-karton-firma {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    margin: 10px 0 6px;
}

.erp-karton-uloga {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 6px;
    font-size: 13.5px;
}

    .erp-karton-uloga small {
        color: var(--muted);
        font-size: 12px;
    }

.erp-karton-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-bottom: 8px;
}

    .erp-karton-tabela th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted);
        font-weight: 600;
        text-align: left;
        padding: 5px 8px;
        border-bottom: 1px solid var(--border-strong);
    }

    .erp-karton-tabela td {
        padding: 5px 8px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

    .erp-karton-tabela .c {
        text-align: center;
        width: 64px;
    }

.erp-karton-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.erp-karton-dno {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 11.5px;
    color: var(--muted);
}

/* Štampa: ostaje SAMO sadržaj — ljuska, tabovi i akcije se sklanjaju. */
@media print {
    .erp-sidebar,
    .erp-sidebar-zavesa,
    .erp-topbar,
    .erp-tabbar,
    .erp-bez-stampe {
        display: none !important;
    }

    /* Školjka drži sadržaj u skrol-kontejneru fiksne visine (100vh + overflow) —
       štampa tako vidi SAMO prvi ekran i nudi jednu stranu. Za štampu se visine
       otpuštaju i skrol gasi, pa se sadržaj prelama na onoliko strana koliko treba. */
    html, body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .erp-shell {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .erp-main {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .erp-karton {
        border: 0;
        max-width: none;
        padding: 0;
    }

    /* Red tabele se ne seče na prelazu strane. */
    .erp-karton-tabela tr,
    .erp-karton-kartica {
        break-inside: avoid;
    }
}

/* ------------------------------------------------------------------------------------
   STRANICA GRUPE (/core/admin/grupe/{id}) — paket pristupa levo, članovi desno.
   ------------------------------------------------------------------------------------ */
.erp-grupa-kolone {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 991px) {
    .erp-grupa-kolone {
        grid-template-columns: minmax(0, 1fr);
    }
}

.erp-kolona-naslov {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 8px;
}

/* Red člana grupe — avatar, ime, X za uklanjanje. */
.erp-clan-red {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}

    .erp-clan-red:last-of-type {
        border-bottom: 0;
    }

    .erp-clan-red .naziv {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ------------------------------------------------------------------------------------
   MATRICA ULOGA (/core/admin/uloge) — uloge kao spisak levo, velika matrica desno,
   prekidač smera „Po ulozi / Po ekranu". Usvojen raspored „leva strana + centralna
   velika" sa mockupa od 21.08.2026.
   ------------------------------------------------------------------------------------ */
.erp-mx {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.erp-mx-levo {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 8px;
}

.erp-mx-levo-naslov {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px 8px;
}

.erp-mx-uloga {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

    .erp-mx-uloga:hover {
        background: rgba(var(--primary-rgb), .08);
        color: var(--text);
    }

    .erp-mx-uloga.on {
        background: rgba(var(--primary-rgb), .14);
        color: var(--primary);
        font-weight: 600;
    }

    .erp-mx-uloga .naziv {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .erp-mx-uloga i {
        font-size: 12px;
        flex: none;
    }

/* Prekidač preko cele širine levog panela (Uloge / Ekrani). */
.erp-mx-smer-pun {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

    .erp-mx-smer-pun button {
        flex: 1;
    }

/* Pretraga iznad stabla ekrana. */
.erp-mx-stablo-trazi {
    width: 100%;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    padding: 0 10px;
    margin-bottom: 8px;
}

/* Grana stabla (grupa prava) — mirnija od stavke, da se hijerarhija vidi. */
.erp-mx-stablo-grupa {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

    .erp-mx-stablo-grupa:hover {
        color: var(--text);
    }

    .erp-mx-stablo-grupa .naziv {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Dete stabla (ekran ili specifična operacija) — uvučeno, ista silueta kao uloga. */
.erp-mx-uloga.dete {
    padding-left: 24px;
    font-size: 12.5px;
}

/* Rasklopljeni deo ispod uloge (spisak korisnika — do RB-5 samo najava). */
.erp-mx-korisnici {
    margin: 2px 6px 8px;
    padding: 8px 10px;
    border-left: 2px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}

.erp-mx-desno {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.erp-mx-vrh {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

    .erp-mx-vrh b {
        font-size: 14.5px;
    }

/* Prekidač smera — ista silueta kao pogledi na gridu, samo manji. */
.erp-mx-smer {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

    .erp-mx-smer button {
        border: 0;
        background: transparent;
        padding: 4px 14px;
        font: inherit;
        font-size: 12.5px;
        color: var(--muted);
        cursor: pointer;
    }

        .erp-mx-smer button.on {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
        }

.erp-mx-trazi {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .erp-mx-trazi input,
    .erp-mx-trazi select {
        height: 30px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 12.5px;
        padding: 0 10px;
        min-width: 190px;
    }

/* Žuta traka nesačuvanih izmena — isti jezik kao bedž „nesačuvano" kod korisnika. */
.erp-mx-izmene {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 13px;
}

    .erp-mx-izmene .erp-akcija {
        margin-left: 0;
    }

    .erp-mx-izmene .desno {
        margin-left: auto;
        display: flex;
        gap: 8px;
    }

/* Tabela matrice — čist HTML, bez grid komponente. */
.erp-mx-tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

    .erp-mx-tabela th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted);
        font-weight: 600;
        padding: 7px 10px;
        border-bottom: 1px solid var(--border);
        text-align: center;
    }

        .erp-mx-tabela th:first-child {
            text-align: left;
            padding-left: 14px;
        }

    .erp-mx-tabela td {
        padding: 5px 10px;
        border-bottom: 1px solid var(--border);
        text-align: center;
    }

        .erp-mx-tabela td:first-child {
            text-align: left;
            padding-left: 14px;
        }

    .erp-mx-tabela tr:hover td {
        background: rgba(var(--primary-rgb), .04);
    }

    .erp-mx-tabela input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: var(--primary);
        cursor: pointer;
    }

    .erp-mx-tabela select {
        height: 26px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 12px;
        padding: 0 6px;
        max-width: 100%;
    }

/* Zaglavlje grupe (harmonika) unutar matrice. */
.erp-mx-grupa {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

    .erp-mx-grupa .zbir {
        margin-left: auto;
        font-weight: 400;
        font-size: 12px;
        color: var(--muted);
    }

        /* Grupa koja NOSI bar jedno pravo — pill sa akcentom, da se vidi iz aviona. */
        .erp-mx-grupa .zbir.ima {
            background: rgba(var(--primary-rgb), .15);
            color: var(--primary);
            font-weight: 600;
            border-radius: 999px;
            padding: 1px 10px;
        }

.erp-mx-podnaslov {
    padding: 6px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.erp-mx-prazno {
    padding: 48px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}

/* ------------------------------------------------------------------------------------
   TRAKA STRANICE (ErpTrakaStranice) — red iznad grida: levo prečice (linkovi),
   desno akcije stranice. Silueta razdvaja: link je pill sa strelicom, akcija je
   zaobljeni pravougaonik na tamnijoj podlozi.
   ------------------------------------------------------------------------------------ */
.erp-traka-stranice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .erp-traka-stranice .erp-precice {
        margin-bottom: 0 !important;
    }

.erp-traka-desno {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Akcija stranice — RADI nešto (za razliku od prečice koja VODI negde). */
.erp-akcija {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s ease;
}

    .erp-akcija i {
        color: var(--muted);
        font-size: 13px;
    }

    .erp-akcija:hover:not(:disabled) {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--surface);
    }

        .erp-akcija:hover:not(:disabled) i {
            color: var(--primary);
        }

    .erp-akcija:disabled {
        opacity: .55;
        cursor: default;
    }

/* ------------------------------------------------------------------------------------
   PREČICE (ErpPrecice) — čipovi iznad grida, otvaraju radnu karticu.
   ------------------------------------------------------------------------------------ */
.erp-precica {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .12s ease;
}

    .erp-precica > i:first-child {
        color: var(--primary);
        font-size: 13px;
    }

    .erp-precica .erp-precica-strelica {
        color: var(--muted);
        font-size: 10px;
    }

    .erp-precica:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--primary-soft);
        box-shadow: var(--shadow-sm);
    }

        .erp-precica:hover .erp-precica-strelica {
            color: var(--primary);
        }

/* ------------------------------------------------------------------------------------
   RADNI CENTAR (UI standard §8, v1) — početna: pločice ekrana po modulu.
   ------------------------------------------------------------------------------------ */
/* N600 (vlasnik 25.09.2026, maketa MG6): dve kolone - levo sve sto se klikce, desno istorija;
   sabijeno po merama sa makete (plocica 34px, razmak 6px, cip "Ceka vas" 36px, bez praznog vrha). */
.erp-rc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

/* Na uzem ekranu istorija ide ISPOD - kolona od 360px pored plocica bi ih sabila na jednu u redu. */
@media (max-width: 1199.98px) {
    .erp-rc {
        grid-template-columns: minmax(0, 1fr);
    }
}

.erp-rc-glavno,
.erp-rc-desno {
    min-width: 0;
}

.erp-rc-sanduce {
    margin-bottom: 12px !important;
}

/* Naslov sekcije: bez gornjeg razmaka - prvi naslov stoji uz vrh (vlasnik: "gurnuli do vrha sa malim gap"),
   a razmak IZMEDJU sekcija nosi blok iznad (.erp-rc-blok, .erp-rc-ceka). */
.erp-rc-sekcija {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.4px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 6px;
}

    .erp-rc-sekcija i {
        font-size: 13px;
    }

    .erp-rc-sekcija::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

.erp-rc-blok {
    margin-bottom: 14px;
}

.erp-rc-plocice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 6px;
}

.erp-rc-plocica {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
}

    .erp-rc-plocica i {
        color: var(--primary);
        font-size: 14px;
        flex: 0 0 auto;
    }

    .erp-rc-plocica span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .erp-rc-plocica:hover {
        border-color: var(--primary);
        color: var(--text);
        background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    }

    /* M-N619 dopuna (vlasnik: "ovo na omiljeno ne znam sto je uokvireno"): plava ivica je skinuta - sekcija se
       vec zove "Omiljeno" i svaka plocica ima zvezdicu, pa je okvir samo dupli znak koji izgleda kao da je izabrano. */

/* M-N622: zvezdica na plocici Omiljenog je DUGME pored linka (skida iz omiljenih), ne ukras u linku. */
.erp-rc-plocica-omot {
    position: relative;
    min-width: 0;
}

    .erp-rc-plocica-omot .erp-rc-plocica {
        padding-right: 32px;
    }

.erp-rc-plocica-zvezda {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    padding: 3px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--warn);
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
}

    .erp-rc-plocica-zvezda:hover,
    .erp-rc-plocica-zvezda:focus-visible {
        background: color-mix(in srgb, var(--warn) 14%, var(--surface));
    }

/* "Ceka vas": cip nosi CEO natpis (ne sece se kao plocica), sirina po tekstu. */
.erp-rc-ceka {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.erp-rc-ceka-cip {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    min-width: 212px;
    padding: 0 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
}

    .erp-rc-ceka-cip i,
    .erp-rc-ceka-cip .br {
        color: var(--primary);
        font-size: 14.5px;
    }

    .erp-rc-ceka-cip .br {
        font-weight: 700;
    }

    .erp-rc-ceka-cip .tx {
        font-size: 13px;
        color: var(--text);
        white-space: nowrap;
    }

    .erp-rc-ceka-cip.upozorenje i,
    .erp-rc-ceka-cip.upozorenje .br {
        color: var(--err);
    }

    .erp-rc-ceka-cip:hover {
        border-color: var(--primary);
    }

/* M-N707 (vlasnik 23.10.2026, ,da se ovo centrira po visini"): ikonica, broj i tekst na istoj sredini - Bootstrap
   ikonica je spustena za -.125em, a raspon sa vecim slovima (broj) imao je visi red od teksta. */
.erp-rc-ceka-cip i,
.erp-rc-ceka-cip .br,
.erp-rc-ceka-cip .tx {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

    .erp-rc-ceka-cip i::before {
        vertical-align: 0;
    }

/* Istorija (desna kolona). M-N722 (vlasnik 28.10.2026, maketa RC4 - docs/05-UI/SEO_Makete.html): prvi red vreme +
   cip trenutnog stanja dokumenta, drugi red radnja jednom recju + broj (broj se sece sa ,..."), klik na red ga
   prosiri i pokaze opis; lupa desno otvara dokument. Mesto za klizac je rezervisano unapred (scrollbar-gutter),
   pa se sirina sadrzaja ne menja kad se klizac pojavi (vlasnik: ,da skrol bocni ne skuplja i ne siri polje"). */
.erp-rc-dogadjaji {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Mreza: levo dva reda (vreme+cip, radnja+broj), desno lupa preko oba reda, uvek na sredini po visini;
   opis (kad je red otvoren) ide ispod, preko cele sirine, pa lupa ostaje uz prva dva reda. */
.erp-rc-dogadjaj {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 3px;
    width: 100%;
    padding: 7px 10px 7px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: 12.4px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

    .erp-rc-dogadjaj:last-child {
        border-bottom: 0;
    }

    .erp-rc-dogadjaj:hover,
    .erp-rc-dogadjaj.otvoren {
        background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    }

    .erp-rc-dogadjaj:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    .erp-rc-dogadjaj .prvi {
        grid-column: 1;
        grid-row: 1;
    }

    .erp-rc-dogadjaj .drugi {
        grid-column: 1;
        grid-row: 2;
    }

    .erp-rc-dogadjaj .prvi,
    .erp-rc-dogadjaj .drugi {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .erp-rc-dogadjaj .drugi {
        gap: 5px;
    }

    .erp-rc-dogadjaj .kada {
        color: var(--muted);
        font-size: 11.4px;
        white-space: nowrap;
        flex: 0 0 auto;
        font-variant-numeric: tabular-nums;
    }

    .erp-rc-dogadjaj .erp-rc-stanje {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .erp-rc-dogadjaj .sta {
        font-weight: 600;
        white-space: nowrap;
        flex: 0 0 auto;
    }

        .erp-rc-dogadjaj .sta.neuspeh {
            color: var(--err);
        }

    .erp-rc-dogadjaj .tacka {
        color: var(--muted);
        flex: 0 0 auto;
    }

    .erp-rc-dogadjaj .broj {
        color: var(--primary);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        font-variant-numeric: tabular-nums;
    }

    .erp-rc-dogadjaj .opis {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 3px;
        padding: 4px 8px;
        border-left: 2px solid var(--border-strong);
        color: var(--text);
        font-size: 12px;
        word-break: break-word;
        cursor: text;
    }

/* Lupa: otvara dokument (isto znacenje kao ,Pregled" na spiskovima). Klik na nju ne prosiruje red. */
.erp-rc-lupa {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--text) 22%, var(--surface));
    border-radius: 7px;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    cursor: pointer;
}

    .erp-rc-lupa:hover {
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    }

/* M-N619 (vlasnik, maketa MG9 "harmonika"): mapa ekrana - svaki modul je traka preko cele sirine, jedan ispod
   drugog. Otvoren modul slaze grupe u kolone po sirini ekrana (column-width), pa nema fiksne sirine kartica ni
   skakanja levo-desno kad se neki modul skupi. Zamenjuje mrezu kartica N608/N611/M-N615. */
.erp-rc-mapa {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.erp-rc-kol {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

    /* Prevlacenje (erpMapaPrevlacenje u App.razor): vucena kartica bledi, ona nad kojom se spusta je oivicena. */
    .erp-rc-kol.vuce {
        opacity: .45;
    }

    .erp-rc-kol.cilj {
        outline: 2px dashed var(--primary);
        outline-offset: 2px;
    }

.erp-rc-kol-nasl {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px 0 6px;
    border-radius: 10px;
    color: var(--primary);
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

    .erp-rc-kol-nasl:hover {
        background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    }

    .erp-rc-kol-nasl:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    .erp-rc-kol-nasl .rucka {
        color: var(--muted);
        opacity: .5;
        font-size: 15px;
        cursor: grab;
    }

    .erp-rc-kol-nasl:hover .rucka {
        opacity: 1;
    }

    .erp-rc-kol-nasl .naziv {
        flex: 1;
        min-width: 0;
    }

    .erp-rc-kol-nasl .broj {
        padding: 1px 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--primary) 8%, var(--surface));
        color: var(--muted);
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0;
    }

    .erp-rc-kol-nasl .strelica {
        color: var(--muted);
        font-size: 12px;
        transition: transform .2s ease;
    }

.erp-rc-kol:not(.skupljena) .erp-rc-kol-nasl {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 10px 10px 0 0;
}

    .erp-rc-kol:not(.skupljena) .erp-rc-kol-nasl .strelica {
        transform: rotate(90deg);
    }

.erp-rc-kol-telo {
    column-width: 220px;
    column-gap: 18px;
    padding: 2px 12px 10px;
}

/* Razmak iznad grupe je PADDING, ne margina: margina na vrhu kolone se u visekolonskom rasporedu odseca u
   drugoj koloni, a u prvoj ostaje - pa je prva kolona bila nize od ostalih (vlasnik: "nije poravnato"). */
.erp-rc-kol-blok {
    break-inside: avoid;
    padding-top: 10px;
}

    /* Velika grupa (Dokumenti u Robnom) sme da se lomi preko vise kolona. */
    .erp-rc-kol-blok.velika {
        break-inside: auto;
    }

/* M-N619 dopuna (vlasnik: "nazive grupa bih nekako oznacio ili uokvirio ... ne vidim gde pocinju nove
   podgrupe"): naslov grupe je obojena traka sa akcentom levo, pa se odmah vidi gde grupa pocinje. */
.erp-rc-kol-grupa {
    display: flex;
    align-items: center;
    justify-content: center; /* M-N619 dopuna: vlasnik "da probamo nazive podgrupa centered" */
    min-height: 24px;
    margin: 0 0 4px;
    padding: 3px 8px;
    /* Centriran natpis sa akcentom samo levo deluje nakrivo - zato je okvir sada ravnomeran sa svih strana. */
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--surface));
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    color: color-mix(in srgb, var(--primary) 75%, var(--text));
    font-size: 11.4px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    break-after: avoid;
}

.erp-rc-red {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    min-width: 0;
    padding: 4px 7px;
    line-height: 1.25;
    break-inside: avoid;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
}

    .erp-rc-red i {
        flex: 0 0 auto;
        width: 17px;
        color: var(--primary);
        font-size: 15px;
        text-align: center;
    }

    /* N611: dug naziv se prelama u drugi red, kao u meniju. */
    .erp-rc-red span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .erp-rc-red:hover {
        background: color-mix(in srgb, var(--primary) 6%, var(--surface));
        color: var(--text);
    }

/* N614: "Skupi sve / Rasiri sve / Podrazumevani redosled" desno od naslova "Svi ekrani". */
.erp-rc-akcije {
    order: 2;
    display: flex;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
}

    .erp-rc-akcije button {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--muted);
        font: inherit;
        font-size: 11.5px;
        font-weight: 600;
        cursor: pointer;
    }

        .erp-rc-akcije button:hover {
            color: var(--primary);
        }

.erp-rc-red-omot {
    position: relative;
    break-inside: avoid;
}

    .erp-rc-red-omot .erp-rc-red {
        padding-right: 28px;
    }

.erp-rc-zvezda {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    padding: 2px 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--warn);
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease;
}

.erp-rc-red-omot:hover .erp-rc-zvezda,
.erp-rc-zvezda:focus-visible {
    opacity: .6;
}

    .erp-rc-zvezda:hover,
    .erp-rc-zvezda.puna {
        opacity: 1;
    }

/* N604: izbor spiska kad su stavke iz „Čeka vas“ na više spiskova e-dokumenata. */
.erp-rc-izbor-spiska {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -4px 0 12px;
}

    .erp-rc-izbor-spiska .naslov {
        color: var(--muted);
        font-size: 12.4px;
    }

    .erp-rc-izbor-spiska button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        font-size: 12.8px;
        cursor: pointer;
    }

        .erp-rc-izbor-spiska button b {
            color: var(--primary);
        }

        .erp-rc-izbor-spiska button:hover {
            background: color-mix(in srgb, var(--primary) 6%, var(--surface));
        }

/* N605 (vlasnik 25.09.2026): istorija ne ide preko visine ekrana. Koliko redova staje meri erpIstorijaStaje
   (App.razor); dok se meri, kartica je odsečena na visinu ekrana da strana ne skoči za trenutak.
   Kad se otvori cela (,,Prikaži više"), visinu joj daje stranica, a lista se skroluje u sebi. */
.erp-rc-dogadjaji.meri {
    max-height: calc(100vh - 120px);
}

.erp-rc-dogadjaji.sve {
    overflow-y: auto;
}

.erp-rc-vise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 32px;
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    font: inherit;
    font-size: 12.4px;
    font-weight: 600;
    cursor: pointer;
}

    .erp-rc-vise:hover {
        background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    }

/* ------------------------------------------------------------------------------------
   RADNI TABOVI (mockup v2, faza 4) — otvorene stranice kao kartice ispod zaglavlja.
   Aktivna kartica se boji u --primary trakom na vrhu i „utapa" u pozadinu sadržaja.
   ------------------------------------------------------------------------------------ */
/* ══════════════════════════════════════════════════ STRANICE PUNE VISINE (10.09.2026)
   ☠️ Vlasnik: „da li poslednja kartica može da bude zakovana za donji deo ekrana i da nema skrola
      uopšte stranice u zavisnosti od monitora i rezolucije, a da se može skrolovati samo grid sa
      stavkama tokom unosa?"
   Ekran dokumenta je od 04.09. tako i zamišljen, ali je visinu računao kao `100vh - 56px` — dakle
   POGAĐAO je koliko školjka zauzme. A iznad sadržaja stoje traka sa pretragom I traka radnih tabova,
   pa i unutrašnji razmak članka (`p-4`): zbir je znatno veći od 56 px. Razlika je izlazila kao skrol
   cele stranice, i to različit na svakoj rezoluciji — što je tačno ono što se videlo.

   ⚠️ Zato se visina više NE RAČUNA nego NASLEĐUJE: stranica koja nosi klasu `puna-visina` kaže
      školjci da joj da tačno onoliko koliko je preostalo, i da ugasi svoj skrol. Ništa se ne pogađa,
      pa nijedna rezolucija, zum ni skrivena traka tabova ne mogu da je razmaknu.
   ⛔ Radi kroz `:has()`, dakle SAMO na stranicama koje su to izričito tražile — ostali ekrani se
      ponašaju tačno kao pre. Pregledač koji `:has()` ne podržava jednostavno ostane na starom
      ponašanju (stranica se skroluje): gubi se udobnost, ne funkcija.
   ⛔ Unutrašnji razmak članka se gasi jer takva stranica sama nosi svoje razmake — inače bi
      `p-4` sa svake strane dodao 24 px i vratio skrol na mala vrata. */

/* D-178: sakrivena živa kartica se ne računa - inace bi njena `puna-visina` ugasila skrol vidljivoj stranici. */
.erp-main:has(.puna-visina:not(.erp-ziva-kartica[hidden] *)) {
    overflow: hidden;
}

.erp-page-content:has(> .puna-visina),
.erp-page-content:has(> .erp-ziva-kartica:not([hidden]) > .puna-visina) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}

    .erp-page-content:has(> .puna-visina) > .puna-visina,
    .erp-page-content > .erp-kartica > .puna-visina {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

.erp-tabbar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 12px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* M-N618: bez skrola - tabovi koji ne staju idu u meni "+N" (erpRasporediTabove, App.razor).
       `clip` a ne `hidden`: po vertikali mora da ostane vidljivo, da bi meni "+N" mogao da
       padne ispod trake i da aktivni tab i dalje "prelazi" preko donje ivice. */
    overflow-x: clip;
    overflow-y: visible;
    flex: none;
}

.erp-rtab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    max-width: 220px;
    flex: none; /* M-N618: tab se ne suzava - JS meri njegovu pravu sirinu */
}

    .erp-rtab.skriven {
        display: none;
    }

    .erp-rtab .erp-rtab-naslov {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .erp-rtab .x {
        border: 0;
        background: transparent;
        color: var(--muted);
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        cursor: pointer;
        padding: 0;
    }

        .erp-rtab .x:hover {
            background: var(--surface-2);
            color: var(--err);
        }

    .erp-rtab:hover {
        color: var(--text);
        background: var(--surface-2);
        border-color: var(--border);
    }

    .erp-rtab.on {
        color: var(--primary);
        background: var(--bg);
        border-color: var(--border);
        position: relative;
    }

        /* Traka u boji akcenta na vrhu aktivne kartice. */
        .erp-rtab.on::before {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            top: 0;
            height: 2px;
            border-radius: 0 0 2px 2px;
            background: var(--primary);
        }

        /* Prekriva donju ivicu trake, pa aktivna kartica „prelazi" u sadržaj. */
        .erp-rtab.on::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: var(--bg);
        }

/* M-N618: "+N" na desnom kraju trake i meni tabova koji ne staju. */
.erp-rtab-vise-omot {
    position: relative;
    margin-left: auto;
    flex: none;
    align-self: center;
    padding: 0 0 3px 6px;
}

    .erp-rtab-vise-omot.prazno {
        display: none;
    }

.erp-rtab-vise {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

    .erp-rtab-vise i {
        font-size: 11px;
        transition: transform .15s;
    }

    .erp-rtab-vise:hover,
    .erp-rtab-vise.otvoren {
        border-color: var(--primary);
        color: var(--primary);
    }

        .erp-rtab-vise.otvoren i {
            transform: rotate(180deg);
        }

/* Providna zavesa preko celog ekrana: klik bilo gde van menija ga zatvara. */
.erp-rtab-zavesa {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: transparent;
}

.erp-rtab-meni {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1061;
    min-width: 240px;
    max-width: 360px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
}

.erp-rtab-meni-stavka {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px 7px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
}

    .erp-rtab-meni-stavka:hover {
        background: var(--surface-2);
    }

    .erp-rtab-meni-stavka .erp-rtab-naslov {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .erp-rtab-meni-stavka .x {
        border: 0;
        background: transparent;
        color: var(--muted);
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        cursor: pointer;
        padding: 0;
    }

        .erp-rtab-meni-stavka .x:hover {
            background: var(--bg);
            color: var(--err);
        }

.erp-rtab-meni-sve {
    margin-top: 4px;
    padding: 8px 10px 4px;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .erp-rtab-meni-sve:hover {
        color: var(--err);
    }

/* ------------------------------------------------------------------------------------
   KOMANDNA PALETA (mockup v2, faza 4) — Ctrl+K: centrirana kartica preko zavese,
   pretraga ekrana svih modula. Komponenta ErpKomandnaPaleta.
   ------------------------------------------------------------------------------------ */
/* ☠️ N377 (vlasnik): spisak ekrana više NE iskače kao prozor na SREDINI ekrana — postaje
   padajuća lista ZAKAČENA ISPOD polja pretrage, iste širine kao polje. `.erp-cmdp` ostaje
   preko celog ekrana (`inset:0`) SAMO da hvata klik „napolju" za zatvaranje (`@@onclick="Zatvori"`
   na spoljnom div-u) — pozadina je zato providna (nema više zamračenog ekrana iza), a samo
   `.erp-cmd` je vidljiv, pozicioniran na TAČNU tačku koju izmeri `erpPozicionirajPaletu`
   (App.razor) kad se paleta otvori — i klikom na okidač i preko Ctrl+K, oba idu kroz istu
   `OtvoriAsync()`, pa merenje pokriva oba puta. */
.erp-cmdp {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1060; /* iznad panela personalizacije */
    display: none;
}

    .erp-cmdp.on {
        display: block;
    }

.erp-cmd {
    position: fixed;
    top: calc(var(--erp-paleta-top, 60px) * 1px);
    left: calc(var(--erp-paleta-left, 14px) * 1px);
    width: calc(var(--erp-paleta-sirina, 230px) * 1px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 70vh;
    overflow-y: auto;
}

    .erp-cmd input {
        width: 100%;
        padding: 15px 18px;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 15px;
        border-bottom: 1px solid var(--border);
    }

    .erp-cmd .st {
        padding: 12px 18px 6px;
        font-size: 10.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
    }

    .erp-cmd .it {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 18px;
        font-size: 13.5px;
        cursor: pointer;
        color: var(--text);
    }

        .erp-cmd .it:hover,
        .erp-cmd .it.on {
            background: var(--primary-soft);
        }

        .erp-cmd .it i {
            color: var(--muted);
            width: 18px;
            text-align: center;
        }

        .erp-cmd .it kbd {
            margin-left: auto;
            font-size: 10px;
            color: var(--muted);
            border: 1px solid var(--border);
            border-radius: 5px;
            padding: 1px 6px;
            background: var(--surface);
        }

    .erp-cmd .erp-cmd-prazno {
        padding: 16px 18px;
        color: var(--muted);
        font-size: 13px;
    }

    .erp-cmd .ft {
        padding: 9px 18px;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 11px;
    }

/* ------------------------------------------------------------------------------------
   PANEL PERSONALIZACIJE (mockup v2) — komponenta ErpPersonalizacija.

   ⚠️ NAMERNO globalno, ne scoped (.razor.css). Nađeno 20.08.2026: host bundle
   NITErp.Client.styles.css sadrži samo `@import 'NITErp.Client.Client.bundle.scp.css'`
   BEZ `_content/NITErp.Client.Client/` prefiksa, pa import u pretraživaču gađa koren
   sajta i vraća 404 — scoped CSS iz klijentske biblioteke NIKAD ne stigne do ekrana.
   Zato su i stari template .razor.css fajlovi delovali „nevidljivo". Dok se koren tog
   problema ne reši, stilovi komponenti idu ovde; klase nose erp- prefiks pa ne
   kolidiraju.
   ------------------------------------------------------------------------------------ */
.erp-zavesa {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 20, .4);
    z-index: 1040;
    display: none;
}

    .erp-zavesa.on {
        display: block;
    }

.erp-pers {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 95vw);
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    display: none;
    flex-direction: column;
}

    .erp-pers.on {
        display: flex;
    }

    .erp-pers .pers-h {
        padding: 15px 18px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .erp-pers .pers-h b {
            font-size: 15px;
        }

        .erp-pers .pers-h small {
            display: block;
            color: var(--muted);
            font-size: 11.5px;
        }

        .erp-pers .pers-h .pers-ikona {
            font-size: 17px;
            color: var(--primary);
        }

        .erp-pers .pers-h .x {
            margin-left: auto;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--muted);
            width: 30px;
            height: 30px;
            border-radius: 8px;
            cursor: pointer;
        }

    .erp-pers .pers-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 18px;
    }

    .erp-pers .p-sek {
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
        margin: 18px 0 9px;
    }

        .erp-pers .p-sek:first-child {
            margin-top: 0;
        }

    .erp-pers .tema-kartice {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .erp-pers .tema-k {
        border: 2px solid var(--border);
        border-radius: 10px;
        padding: 7px;
        cursor: pointer;
        text-align: center;
    }

        .erp-pers .tema-k.on {
            border-color: var(--primary);
        }

        .erp-pers .tema-k .pre {
            height: 44px;
            border-radius: 6px;
            display: flex;
            overflow: hidden;
            margin-bottom: 6px;
        }

            .erp-pers .tema-k .pre i {
                display: block;
            }

        .erp-pers .tema-k span {
            font-size: 11.5px;
            font-weight: 600;
        }

    .erp-pers .seg {
        display: flex;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 3px;
        gap: 3px;
    }

        .erp-pers .seg button {
            flex: 1;
            border: 0;
            background: transparent;
            color: var(--muted);
            font: inherit;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 0;
            border-radius: 7px;
            cursor: pointer;
        }

            .erp-pers .seg button.on {
                background: var(--surface);
                color: var(--text);
                box-shadow: var(--shadow-sm);
            }

    .erp-pers .akcenti {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
    }

    .erp-pers .akc {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        display: grid;
        place-items: center;
        color: #fff; /* kvačica na obojenom krugu — uvek bela, kao u mockupu */
        font-size: 12px;
    }

        .erp-pers .akc.on {
            border-color: var(--text);
        }

        /* Krug „boja teme": trobojni prelaz tri palete. Gotovi tonovi su namerni —
           krug predstavlja sve tri teme, ne trenutnu. */
        .erp-pers .akc-tema {
            background: conic-gradient(#1570ef, #4f46e5, #0f766e, #1570ef);
        }

    .erp-pers .pers-foot {
        padding: 12px 18px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--muted);
        font-size: 11.5px;
        gap: 8px;
    }

        .erp-pers .pers-foot span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

/* ------------------------------------------------------------------------------------
   PRIJAVNI EKRAN - M-N689 (21.10.2026), maketa docs/05-UI/Mockup_PR1_Prijava_PodeljenEkran.html.
   Podeljen ekran: levo brend panel u boji logoa ,Oblak" (isti u svim paletama i u obe teme),
   desno forma. Koristi ga AuthLayout, pa isti izgled dobijaju prijava, prva lozinka, izbor
   firme, zaboravljena i nova lozinka i demo registracija.
   Do 21.10: gradijent palete (--login-panel), logo u cosku, izbor palete u uglu.
   ------------------------------------------------------------------------------------ */
.erp-login-wrap {
    /* Prijava ima SVOJU boju (logo ,oblak"), ne paletu - paleta se bira tek u programu (vlasnik 21.10:
       ,ovo bih na prijavi izbacio, nek biraju u programu"). Bootstrap i Syncfusion promenljive su na
       <html> vec izracunate iz palete, pa se ovde vezuju ponovo - inace bi dugme i fokus polja ostali
       u boji palete. */
    --primary: #6c70d9;
    --primary-rgb: 108, 112, 217;
    --primary-hover: #5a5ec8;
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-hover);
    --bs-focus-ring-color: rgba(var(--primary-rgb), .25);
    --color-sf-primary: var(--primary);
    --color-sf-primary-bg-color: var(--primary);
    --color-sf-primary-border-color: var(--primary);
    --color-sf-primary-bg-color-hover: var(--primary-hover);
    --color-sf-primary-border-color-hover: var(--primary-hover);
    --color-sf-primary-bg-color-pressed: var(--primary-hover);
    --color-sf-primary-border-color-pressed: var(--primary-hover);
    --color-sf-primary-bg-color-focus: var(--primary-hover);
    --color-sf-primary-border-color-focus: var(--primary-hover);
    /* Levo 44 % (najmanje 380 px): forma dobija vise vazduha od brend panela. */
    display: grid;
    grid-template-columns: minmax(380px, 44%) 1fr;
    min-height: 100vh;
    background: var(--bg);
}

[data-bs-theme="dark"] .erp-login-wrap {
    --primary: #8589ee;
    --primary-rgb: 133, 137, 238;
    --primary-hover: #9a9df2;
}

.erp-login-left {
    position: relative;
    overflow: hidden;
    color: #e6e8f5; /* tekst na tamnom panelu - uvek svetao, u oba rezima */
    padding: 44px 52px;
    flex-direction: column;
    /* ,Oblak": boje logoa (#11163A podloga, #6C70D9 oblak), sjaj DOLE DESNO - gore oko logoa ostaje
       tamno (vlasnik: ,umesto gore iza logoa da bude dole desno svetlije da bi logo dosao do izrazaja").
       Ispod je tekstura koda iz brend paketa. */
    background:
        radial-gradient(ellipse at 95% 105%, rgba(108, 112, 217, .55), transparent 58%),
        linear-gradient(160deg, rgba(17, 22, 58, .97) 0%, rgba(17, 22, 58, .94) 55%, rgba(36, 40, 96, .92) 100%),
        url('../brend/za-sajt/pozadina-kod-tamna-1920x1080.png') center / cover;
}

.erp-login-hero {
    margin: auto 0;
}

/* Logo ,oblak" (787x612) uz naslov: 170 px visine = 219 px sirine. Ne vise od toga - veci pocinje da
   izgleda kao reklama, a ne kao prijava u program. -6 px levo: slika ima praznine sa leve strane, pa
   vidljiva ivica oblaka staje tacno iznad prvog slova naslova. */
.erp-login-logo {
    display: block;
    height: 170px;
    width: auto;
    margin: 0 0 30px -6px;
}

.erp-login-hero h1 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    max-width: 440px;
    margin: 0 0 14px;
}

.erp-login-hero p {
    color: #b3b8d4;
    max-width: 430px;
    line-height: 1.6;
    font-size: 15px;
    margin: 0;
}

.erp-login-feat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    color: #d3d6ea;
}

    .erp-login-feat > div {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .erp-login-feat i {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .08);
        color: #c9cbff;
        font-size: 16px;
        flex: none;
    }

    .erp-login-feat .erp-login-pot {
        margin-top: 16px;
        font-size: 12px;
        color: #8a90b0;
    }

.erp-login-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 32px 56px;
    /* Svetla tema: desna strana nije cisto bela - blag odsjaj boje logoa uz ivicu panela, da prelaz
       tamno/belo ne bode (vlasnik 21.10: ,na beloj mi malo cudno"). */
    background: radial-gradient(ellipse at 0% 60%, rgba(108, 112, 217, .11), transparent 55%), var(--bg);
}

[data-bs-theme="dark"] .erp-login-right {
    background: var(--bg);
}

/* Jezik i svetlo/tamno; desno od njih, u samom cosku, ,?" stranice (.erp-login-pomoc). */
.erp-login-alati {
    position: absolute;
    top: 18px;
    right: 66px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--muted);
}

    .erp-login-alati .form-select {
        width: auto;
    }

.erp-login-karta {
    width: 100%;
    max-width: 400px;
}

.erp-login-dole {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* Naslov ekrana: 20 px polu-podebljan (vlasnik 21.10: ,malo font i bold mi bode oci" - bilo 24 px / 800). */
.erp-login-naslov {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: 0;
    margin: 0 0 4px;
    color: var(--text);
}

.erp-login-pod {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 22px;
}

/* ,?" - uputstvo ekrana (ErpPomocPrijave), gornji desni cosak (.erp-login-right je pozicioniran). */
.erp-login-pomoc {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 20;
}

    .erp-login-pomoc > summary {
        list-style: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--border-strong);
        background: var(--surface);
        color: var(--muted);
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        user-select: none;
    }

        .erp-login-pomoc > summary::-webkit-details-marker {
            display: none;
        }

    .erp-login-pomoc[open] > summary,
    .erp-login-pomoc > summary:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

.erp-login-pomoc-tekst {
    position: absolute;
    right: 0;
    top: 42px;
    width: 320px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}

    .erp-login-pomoc-tekst b {
        display: block;
        margin-bottom: 4px;
    }

    .erp-login-pomoc-tekst p {
        margin: 0;
    }

    .erp-login-pomoc-tekst ul {
        margin: 6px 0 0;
        padding-left: 16px;
        color: var(--muted);
    }

/* Oko za lozinku - preko desnog kraja polja. 26 px od vrha = visina labele iznad polja (MojTextBox). */
.erp-login-lozinka {
    position: relative;
}

    .erp-login-lozinka .e-input-group input.e-input {
        padding-right: 38px;
    }

.erp-login-oko {
    position: absolute;
    right: 6px;
    top: 26px;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--muted);
    display: grid;
    place-items: center;
    z-index: 2;
    cursor: pointer;
}

    .erp-login-oko:hover {
        color: var(--primary);
    }

.erp-login-red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 18px;
    font-size: 13px;
}

    .erp-login-red label {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--muted);
        cursor: pointer;
        margin: 0;
    }

    .erp-login-red .form-check-input {
        margin: 0;
    }

.erp-login-demo {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

    .erp-login-demo a {
        font-weight: 650;
        color: var(--ok);
    }

/* Uslovi lozinke (ErpUsloviLozinke) - stikliraju se dok se kuca. */
.erp-lozinka-jacina {
    display: flex;
    gap: 4px;
    margin: -2px 0 6px;
}

    .erp-lozinka-jacina span {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
    }

        .erp-lozinka-jacina span.da {
            background: var(--ok);
        }

.erp-lozinka-uslovi {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--muted);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 12px;
}

    .erp-lozinka-uslovi li {
        display: flex;
        gap: 6px;
        align-items: center;
    }

        .erp-lozinka-uslovi li.da {
            color: var(--ok);
        }

    .erp-lozinka-uslovi i {
        font-size: 11px;
    }

/* Izbor firme - spisak sa pretragom (umesto padajuce liste). */
.erp-login-firme {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden auto;
    background: var(--surface);
    max-height: 300px;
    margin: 8px 0 16px;
}

.erp-login-firma {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

    .erp-login-firma:last-child {
        border-bottom: 0;
    }

    .erp-login-firma:hover {
        background: var(--surface-2);
    }

    .erp-login-firma.izab {
        background: rgba(var(--primary-rgb), .12);
        box-shadow: inset 3px 0 0 var(--primary);
    }

    .erp-login-firma .inicijali {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 12.5px;
        flex: none;
        background: rgba(var(--primary-rgb), .15);
        color: var(--primary);
    }

    .erp-login-firma .ime {
        font-weight: 600;
    }

    .erp-login-firma .cip {
        margin-left: auto;
        font-size: 11px;
        font-weight: 650;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), .14);
        color: var(--primary);
    }

.erp-login-firme .prazno {
    padding: 14px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* Uzak ekran: brend panel se sklanja (d-none d-lg-flex), forma dobija celu sirinu. */
@media (max-width: 991.98px) {
    .erp-login-wrap {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------------------
   DONJA NAVIGACIJA — telefon (UI standard §9, 21.08.2026).
   Ispod 768px bočni meni ne doseže palac; 5 odredišta stoji uz donju ivicu:
   Početna · dva omiljena ekrana · Novo (objave) · Više (fioka sa celim menijem).
   Na desktopu ne postoji. env(safe-area-inset-bottom) zbog telefona bez tastera.
   ------------------------------------------------------------------------------------ */
.erp-donja-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .erp-donja-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1039; /* ispod zavese (1040) — fioka menija ide PREKO trake */
        display: flex;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Sadržaj ne sme da se sakrije iza trake — poslednji red tabele ostaje dostupan. */
    .erp-main {
        padding-bottom: 64px;
    }
}

.erp-dn-stavka {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px 6px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

    .erp-dn-stavka i {
        font-size: 20px;
        line-height: 1;
    }

    .erp-dn-stavka span:last-child {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* NavLink sam dodaje .active na stavku čija je ruta otvorena. */
    .erp-dn-stavka.active {
        color: var(--primary);
    }

.erp-dn-ikona {
    position: relative;
    line-height: 1;
}

.erp-dn-znacka {
    position: absolute;
    top: -5px;
    right: -12px;
    min-width: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--err);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
}


/* ═══ N600: cip modula u vrhu menija – brza promena modula (maketa MG6, vlasnik 25.09.2026) ═══ */
.sb-modul-izbor {
    position: relative;
    padding: 0 10px 10px;
}

.sb-modul-cip {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    font: inherit;
    font-size: 13.4px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .sb-modul-cip i:first-child {
        font-size: 14.5px;
        min-width: 18px;
        text-align: center;
    }

    .sb-modul-cip .strelica {
        margin-left: auto;
        font-size: 11px;
        color: var(--sidebar-muted);
    }

    .sb-modul-cip:hover {
        border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    }

/* Zavesa preko celog ekrana: klik bilo gde van spiska ga zatvara. */
.sb-modul-zavesa {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.sb-modul-spisak {
    position: absolute;
    top: 42px;
    left: 10px;
    right: 10px;
    min-width: 210px;
    z-index: 1091;
    padding: 5px;
    border: 1px solid var(--sidebar-border);
    border-radius: 9px;
    background: var(--sidebar-bg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

    .sb-modul-spisak button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 7px 9px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--sidebar-text);
        font: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

        .sb-modul-spisak button i {
            min-width: 18px;
            text-align: center;
            color: var(--sidebar-muted);
        }

        .sb-modul-spisak button:hover,
        .sb-modul-spisak button.on {
            background: var(--sidebar-hover);
        }

        .sb-modul-spisak button.on i {
            color: var(--primary);
        }


/* ------------------------------------------------------------------------------------
   N439 / N440 (vlasnik, 22.09.2026) - cipovi firme i godine: jednaka strelica i spisak
   tacno preko celog cipa.

   IZMERENO u zivoj aplikaciji (getBoundingClientRect, ne procena):
     cip firme    x=1529 w=212 | ikona w=12 | .e-input-group x=1558 w=173 | strelica w=23
     cip godine   x=1750 w=120 | ikona w=12 | .e-input-group x=1779 w=79  | strelica w=31
     spisak firme (inline od Syncfusion-a): width 173px, left 1558.22px

   Iz toga slede tri stvari:
   1) strelice NISU jednake - 23px na firmi (N431 ih je suzio) naspram 31px na godini,
      jer je N431 pravilo vazilo samo za `.e-firma-combo`. Sada vazi za oba cipa.
   2) razmak od leve ivice cipa do `.e-input-group` je na OBA cipa isto 29px
      (10px ispune cipa + 12px ikonice + 6px razmaka, zaokruzeno na crtanju) - otud
      `margin-left: -29px` na spisku, isti broj za oba, ovog puta IZMEREN a ne pogodjen
      (v. N432, gde je isti broj bio procena i zato uklonjen).
   3) `PopupWidth="100%"` daje spisku sirinu `.e-input-group`-a (173px), a vlasnik trazi
      sirinu CELOG cipa (212px) - zato se sirina zadaje ovde, po izmerenom cipu.

   Sirina cipa firme je zakucana na izmerenih 212px (do sada `max-width`, pa je zavisila
   od sadrzaja) - bez toga bi suzavanje strelice pomerilo cip za 1px i spisak vise ne bi
   bio tacno preko njega. Cip godine vec ima `min-width: 120px` i ostaje 120px. */

.erp-chip i {
    width: 12px;
    min-width: 12px;
    text-align: center;
}

.erp-chip.erp-chip-firma {
    width: 212px;
    max-width: 212px;
}

.e-firma-combo .e-input-group-icon.e-ddl-icon,
.e-custom-combo .e-input-group-icon.e-ddl-icon {
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}

.e-popup.e-firma-combo {
    width: 212px !important;
    margin-left: -29px !important;
}

.e-popup.e-custom-combo {
    width: 110px !important;
    margin-left: -29px !important;
}

/* N441 (vlasnik, 22.09.2026) - cip godine: "2026" na sredinu, strelica jednako udaljena
   od desne ivice kao na cipu firme.

   IZMERENO: cip godine je bio 120px (`min-width`), a njegov sadrzaj samo ~110px - tih
   10px viska je stajalo IZMEDJU strelice i desne ivice cipa, pa je razmak desno bio 21px
   naspram 11px na cipu firme. Zato se `min-width` skida i cip hvata svoj sadrzaj (110px),
   isto kao firma: razmak desno sada 11px na oba.

   ?? N392 je 2026. uveo `min-width: 120px` jer se "2026" seklo kad je sirina bila zakucana
   na 96px. Provereno posle ove izmene, u zivoj aplikaciji: `input.scrollWidth` = 48 =
   `clientWidth`, dakle tekst se NE sece. Uzrok secenja je bio zakucan broj, ne nedostatak
   `min-width`-a - `width: fit-content` i dalje stoji i cip raste sa sadrzajem. */
.erp-chip.erp-chip-godina {
    min-width: 0;
}

.e-input-group.e-custom-combo input.e-input {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* N442 (vlasnik, 22.09.2026) - tri sitnice u gornjoj traci, sve tri izmerene u zivoj
   aplikaciji pre i posle izmene:

   1) godine u padajucem spisku idu na sredinu (kao i "2026" u samom polju, N441).
   2) strelica padajuce liste dobija punu visinu reda i `line-height: 1`, da glif stoji
      tacno na sredini svoje kutije a ne na osnovnoj liniji fonta ikonica.
   3) "?" dugme nije bilo na sredini izmedju cipa godine i crte ispred korisnickog menija:
      izmereno 8px levo naspram 16px desno. Uzrok: crta (`vr`) nosi `mx-2` (8px sa obe
      strane) PORED `gap-2` (8px) koji traka vec daje - desni razmak je zato bio dvostruk.
      Leva margina crte se gasi; izmereno posle izmene: 8px levo, 8px desno. */
.e-popup.e-custom-combo .e-list-item {
    text-align: center !important;
}

.e-firma-combo .e-input-group-icon.e-ddl-icon,
.e-custom-combo .e-input-group-icon.e-ddl-icon {
    height: 100% !important;
    line-height: 1 !important;
}

.erp-topbar-desno .vr {
    margin-left: 0 !important;
}

/* ======================================================================================
   PRAVILO 12 (vlasnik, 22.09.2026) - JEDAN IZGLED FORME ZA CEO ERP. Maketa: AF7
   (`docs/05-UI/Mockup_AF7_FormaArtikla.html`), pravilo: `docs/08-Programeri/17-Pravila-
   Koordinatora.md` tacka 12, nalaz N443/N444.

   Svi brojevi su PRESLIKANI iz makete i provereni uzivo na formi artikla (vlasnik je
   gledao svaki korak u pregledacu), nijedan nije procenjen.

   Kuka je zasad `.erp-forma-12` - forma artikla je PRVA forma prevedena na ovo
   pravilo. Kako se ostale forme prevode jedna po jedna, kuka se sire (ili se prebaci na
   `.erp-page-content` kad sve forme budu po pravilu); brojevi se ne menjaju.
   ====================================================================================== */

/* Vlasnik: "jos podigni gore tj sabij" - `container-fluid p-3` je davao 16px praznog
   iznad prvog reda. Samo vrh; leva/desna/donja ivica ostaju kako jesu. */
/* ===== N503: kuka pravila 12 vise nije vezana za formu artikla (vlasnik, 24.09.2026) ===== */
/* ☠️ Kad je pravilo 12 pisano, kuka je bila `.erp-forma-artikal`, uz zabelezenu nameru da se
   "siri kako se prevode ostale" (registar, N411). Prva sledeca forma - komitenti - pokazala je
   da sirenje spiskom (`.erp-forma-artikal, .erp-forma-komitent, ...`) raste bez kraja i da bi
   svaka nova forma tražila diranje tridesetak selektora. Zato je kuka preimenovana u
   `.erp-forma-12` - ime nosi PRAVILO, ne ekran.
   ⚠️ Forma artikla i dalje nosi i staru klasu `erp-forma-artikal`, da ne otkaze nista sto je
   na nju kacilo; izgled joj se ne menja jer nosi obe. Zamena je bila mehanicka, token za token. */
.erp-forma-12 {
    padding-top: 4px !important;
}

/* Red: 5px gore i dole (maketa `.red { padding: 5px 0 }`), bez bocnog uvlacenja - natpis
   nosi svoj razmak (v. nize). Zamenjuje N434 (4px 12px). */
.erp-forma-12 .erp-forma-red {
    padding: 5px 0;
    gap: 0;
}

/* Natpis polja: LEVO od polja, 150px, 13px, poravnat po SREDINI visine kontrole.
   `height: 34px` + `display: flex` su ono sto ga drzi u ravni sa poljem - bez toga natpis
   sedi na osnovnoj liniji teksta i vidno je visi od polja. `text-align: left` gazi inline
   `text-align: right` koji `MojTextBox` sam postavlja kad je labela levo (N-komponenta),
   zato `!important` - inline stil se drugacije ne moze nadjacati.
   Zamenjuje N429/N411 (122px / 11.2px). */
/* ☠️ N445: 150px -> 170px. Vlasnik trazi pune natpise ("Kataloska VP cena", "Preporucena MP
   cena") umesto skracenih; izmereno na 13px/600 najduzi je 138px, plus 12px uvlacenja = 150px
   taman do slova, bez vazduha. Boja: natpisi su bili sivi na neobaveznim poljima (Bootstrap
   `text-secondary`, izmereno rgb(108,117,125)) a crni na obaveznim - vlasnik trazi sve crno,
   pa `color` ovde gazi obe klase; podebljanje obaveznih ostaje kao jedina razlika. */
.erp-forma-12 .erp-forma-red label.form-label {
    width: 170px !important;
    min-width: 170px !important;
    color: var(--text) !important;
    flex: none !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Ispod polja se NE cuva prazan red za poruku o gresci. `MojTextBox` ga uvek iscrta sa
   `min-height: 20px` (v. N369) - visina se ovde gasi, ali se red NE sakriva: kad poruka
   stvarno postoji, div poraste sam i poruka se vidi. Razlika u odnosu na probni stil koji
   je vlasnik gledao (`height: 0; overflow: hidden`) - tako bi se GUBILE i prave greske. */
.erp-forma-12 .erp-input-wrapper {
    margin-bottom: 0 !important;
}

.erp-forma-12 .erp-input-wrapper > .mt-1 {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-left: calc(170px + 1rem) !important;
}

/* Kontrola: visina 34px, font 13.2px, zaobljenje 7px (maketa `--ctrl-h`, `.inp`). */
.erp-forma-12 .e-input-group {
    height: 34px;
    border-radius: 7px;
}

.erp-forma-12 .e-input-group input.e-input {
    font-size: 13.2px;
}

/* Tri sirine i nijedna vise. Vlasnik je trazio duzu Sifru, Kataloski broj i Jedinicu mere,
   a kracu Poresku stopu - posle merenja uzivo ispalo je da "kratko" i "srednje" na kraju
   nose ISTI broj (260px), pa se klase u `.razor`-u ne diraju. Ako neka forma ubuduce
   stvarno zatrazi trecu, uzu sirinu - prvo se menja pravilo 12, pa onda CSS.
   Zamenjuje N394/N400/N407 (170 / 290 / 430). */
/* ☠️ N445 (izmereno uzivo, sva polja redom): sirina zadata na SAMOJ kontroli nije uhvatila sve.
   "Tip artikla" (MojComboBox) je ostao 196px jer Syncfusion sam odredjuje sirinu svog omotaca, a
   "Master artikal" (ErpBirac u stanju "prikaz izabranog") 272px jer mu klasa `erp-polje-*` uopste
   ne stigne na iscrtan element - ErpBirac je tu obican `<div>`, ne Syncfusion kontrola.
   Zato sirinu sad nosi KOLONA polja (omotac `.flex-grow-1` koji prave sve Moj- i Erp- komponente),
   a kontrola u njoj ide na 100%. Tako je svejedno koja je komponenta u redu.
   Podrazumevano je red srednji (260px); dug red se obelezava na SAMOM redu (`erp-red-dugo`). */
.erp-forma-12 .erp-forma-red .erp-input-wrapper > .d-flex > .flex-grow-1 {
    flex: none !important;
    width: 260px !important;
}

.erp-forma-12 .erp-forma-red.erp-red-dugo .erp-input-wrapper > .d-flex > .flex-grow-1 {
    width: 420px !important;
}

/* ===== N512: cetvrta sirina reda - USKO (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: „Valuta moze da ide polje malo jer je to broj dana za valutu uglavnom je
   15,30,60,90 ali ostavljam izbor na operateru necemo ga ogranicavati".
   ☠️ Pravilo 12 tacka 5 je do sada znalo tri sirine (260 / 420 / puno). Komentar iznad je
   izricito trazio: ako neka forma zatrazi cetvrtu, PRVO se menja pravilo 12, pa onda CSS - tako je
   i uradjeno (v. pravilo 12, tacka 5).
   ⚠️ Suzava se SAMO polje. Unos se ne ogranicava - ni maksimumom, ni spiskom ponudjenih dana;
   vlasnik je to izricito rekao. 120px prima cetvorocifren broj bez seckanja. */
.erp-forma-12 .erp-forma-red.erp-red-usko .erp-input-wrapper > .d-flex > .flex-grow-1 {
    width: 120px !important;
}

    .erp-forma-12 .erp-forma-red .erp-input-wrapper > .d-flex > .flex-grow-1 > * {
        width: 100% !important;
        max-width: 100% !important;
    }

/* ===== N550: VISE POLJA U JEDNOM REDU ("grupa") — pravilo 12, tacka 5v ===== */
/* ☠️ Vlasnik, 24.09.2026, o unosu adrese: „ulica i broj mogu u jednu (liniju)… jel moguce da
   polje br pomerimo u levo i da zajedno polje ulica i broj budu sirine kao polje za Mesto / Grad".
   I odmah zatim: „ovaj nacin mozemo da zadrzimo za dosta slajdera gde ima manjih polja."

   ☠️ ZASTO IZUZETAK UOPSTE POSTOJI. Pravilo 12 trazi jedno polje po redu zato sto kolona natpisa
   (170px) daje formi mir. Ali adresa nije sest podataka nego JEDAN, koji se i popunjava kao jedan;
   kucni broj koji dobije isti red kao ulica izgleda kao zaseban podatak, a nije. Zato red sme da
   nosi vise polja - ali pod tri uslova, da izuzetak ne pojede pravilo:
     1. red i dalje ima TACNO JEDAN natpis levo, u istoj koloni kao svi ostali;
     2. sva polja u grupi zajedno zauzimaju sirinu JEDNOG propisanog polja (420px, ili 260px uz
        `erp-grupa-srednja`) - desna ivica grupe se poklapa sa desnom ivicom polja iznad i ispod;
     3. polja u grupi nemaju svoj natpis - nose ga kao bledi tekst u polju.

   ⚠️ Red sa grupom NE dobija `erp-red-dugo`/`erp-red-usko`: sirinu nosi sama grupa. Zato su
      selektori ovde za jednu klasu „tezi" od `erp-red-dugo` pravila iznad - da se ne ispostavi da
      polje u grupi svejedno skoci na 420px.
   ℹ️ Natpis je obican `<label class="form-label">` u redu, ne natpis kontrole - tako ga hvataju
      ista pravila (170px, 220px u kartici sa dugim natpisima) i kolona ostaje prava. */
.erp-forma-12 .erp-forma-red .erp-grupa-polja {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 420px;
}

    .erp-forma-12 .erp-forma-red .erp-grupa-polja.erp-grupa-srednja {
        width: 260px;
    }

    /* Deo grupe koji se RASTEZE (ulica), deo koji uzima jednak deo (ulaz/sprat/stan) i
       deo fiksne mere (kucni broj — tri-cetiri znaka, nema smisla da raste). */
    .erp-forma-12 .erp-forma-red .erp-grupa-polja > * {
        min-width: 0;
    }

    .erp-forma-12 .erp-forma-red .erp-grupa-polja > .erp-g-rasteze {
        flex: 1 1 auto;
    }

    .erp-forma-12 .erp-forma-red .erp-grupa-polja > .erp-g-deo {
        flex: 1 1 0;
    }

    .erp-forma-12 .erp-forma-red .erp-grupa-polja > .erp-g-broj {
        flex: 0 0 80px;
    }

/* Polje u grupi puni svoj deo umesto propisanih 260/420. Selektor je namerno duzi od
   `erp-red-dugo` pravila iznad (v. napomenu) i stoji POSLE njega. */
.erp-forma-12 .erp-forma-red .erp-grupa-polja .erp-input-wrapper > .d-flex > .flex-grow-1 {
    flex: 1 1 auto !important;
    width: 100% !important;
}

.erp-forma-12 .erp-forma-red .erp-grupa-polja .erp-input-wrapper {
    margin-bottom: 0 !important;
}

/* Kartice: fiksna sirina 660px i poravnate uz levu ivicu, da druga kartica ne "pliva"
   po ostatku ekrana kad je prva kratka (vlasnik: "nema poente ovoliko praznog prostora").
   Prelom na jednu kolonu ide POSLE ovog pravila, inace bi ga ovo gazilo (pravilo iz
   N414/@media 900px stoji ranije u fajlu, a kasnije pravilo pobeduje kod iste tezine). */
.erp-forma-12 .erp-kartica {
    max-width: 660px;
}

/* ☠️ N445: `p-3` je davao 16px levo, pa je leva ivica kartice bila 16px desno od leve ivice
   trake sa tabovima (izmereno: tab 288, kartica 304). Vlasnik: "nije poravnato po levoj strani". */
.erp-forma-12 .erp-kartice-red {
    grid-template-columns: 660px 660px;
    justify-content: start;
    padding-left: 0 !important;
}

@media (max-width: 1400px) {
    .erp-forma-12 .erp-kartice-red {
        grid-template-columns: minmax(0, 660px);
    }
}

/* Naslov kartice: crn i BEZ bold-a (vlasnik: "skidamo ovo bold sa Identifikacija artikla
   i Cene i status, ne svidja mi se" pa "stavi u crnu boju"). */
.erp-forma-12 .erp-kartica-naslov {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .3px;
    color: var(--text);
}

    .erp-forma-12 .erp-kartica-naslov i {
        color: var(--text);
    }

/* Kvacica u kartici nije smela da stoji na samoj ivici. */
.erp-forma-12 .erp-kartica .e-checkbox-wrapper {
    margin-left: 12px;
}

/* Tabovi. Preseljeno iz `<style>` bloka u `ArtikalForma.razor` (pravilo 12, tacka 8:
   izgled ne stoji u stranici). Velicina je sa 11.5px (N411) podignuta na 13.5px -
   vlasnik: "ovo malo da se poveca jel mi nije citljivo bas ovako". `text-transform: none`
   ostaje iz N411: Syncfusion-ova Bootstrap 5 tema sama kapitalizuje `.e-tab-text`. */
.erp-tab-style .e-tab-header {
    position: relative;
    z-index: 10 !important;
}

    .erp-tab-style .e-tab-header .e-toolbar-item .e-tab-wrap {
        display: flex;
        align-items: stretch;
        height: 100%;
    }

    .erp-tab-style .e-tab-header .e-tab-text {
        text-transform: none;
        font-size: 13.5px;
        font-weight: 600;
    }

/* --------------------------------------------------------------------------------------
   TRAKA IZNAD TABOVA (pravilo 12, tacke 1 i 2) - OPSTE klase, za svaku formu u ERP-u.
   Levo identitet sloga `SIFRA - Naziv`, desno `Odustani` pa `Sacuvaj`. Traka je VAN
   kontrole tabova, pa dugmad ostaju na istom mestu kad se menja tab (vlasnik: "kao sto je
   na Kalkulaciji maloprodaje, da budu uvek ovde ti dugmici... i onda se ne pomeraju").
   Identitet je ranije stajao u naslovu strane gore, gde se naziv sekao na duzem artiklu.
   -------------------------------------------------------------------------------------- */
.erp-forma-traka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2px 6px 2px;
}

.erp-forma-identitet {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

    .erp-forma-identitet .erp-identitet-sifra {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .2px;
        color: var(--text);
    }

    .erp-forma-identitet .erp-identitet-crta {
        font-size: 15px;
        color: var(--text);
        opacity: .55;
        padding: 0 2px;
    }

    /* Naziv se skracuje sa "..." umesto da gura dugmad - zato `min-width: 0` na omotacu. */
    .erp-forma-identitet .erp-identitet-naziv {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.erp-forma-traka .erp-forma-akcije {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: auto;
}

/* ☠️ N447 (vlasnik, 22.09.2026): stanje sloga (aktivan / neaktivan) kao mala oznaka ispred sifre,
   umesto velike zelene/crvene znacke u zaglavlju strane ("bas ruzno da stoji u zaglavlju").
   Zelen krug sa kvacicom = aktivan, crven krug sa belim x = neaktivan (vlasnik je crveno izricito
   trazio). Opsta klasa - vazi za svaku formu u ERP-u, ne samo za artikal. */
.erp-forma-identitet .erp-identitet-stanje {
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: none;
}

    .erp-forma-identitet .erp-stanje-aktivan {
        color: var(--success, #198754);
    }

    .erp-forma-identitet .erp-stanje-neaktivan {
        color: var(--danger, #dc3545);
    }

/* ☠️ N449 (vlasnik: "zasto mi je sad jedinica mere i Poreska opet razlicita sirina"):
   KOLONA jeste bila 260px na oba reda - ali KUTIJA KOJU OKO VIDI nije. `ErpBirac` u stanju
   "prikaz izabranog" crta svoj sivi okvir JOS JEDAN nivo dublje, i na NJEGA stize klasa
   `erp-polje-*` - pa ga je staro OPSTE pravilo (N394/N407: `.erp-polje-kratko { max-width: 170px }`,
   koje je i dalje u fajlu za ostale ekrane) seklo na 170px. Otud "Jedinica mere" 170px naspram
   "Poreska stopa" 260px (ona nosi `erp-polje-srednje`, cija je stara granica 290px, pa je
   proslo. Izmereno uzivo.
   ?? Moja jucerasnja provera je gledala PRVO dete kolone (omotac, 260px), a ne kutiju koju
   covek vidi - zato je pokazala 260 za oba reda i propustila ovo (N445 je bio tacan, provera
   plitka). Od sad se meri vidljiva kutija, ne omotac.
   Popravka: u redu forme sve sto nosi `erp-polje-*` popljuje svoju kolonu - sirina je na
   koloni (tacka 5 pravila 12), a stare granice vaze SAMO izvan formi po pravilu 12. */
.erp-forma-12 .erp-forma-red .erp-polje-kratko,
.erp-forma-12 .erp-forma-red .erp-polje-srednje,
.erp-forma-12 .erp-forma-red .erp-polje-dugo {
    width: 100% !important;
    max-width: 100% !important;
}

/* ☠️ N451 (pravilo 12, tacka 9): traka tabova kao spisak posla.
   Mala siva tackica = tab je prazan (podsetnik, ne upozorenje), pa je ikonica vidno manja i
   utisana od teksta taba. Narandzasti uzvicnik ostaje u punoj velicini - on jedini trazi nesto.
   Tab na kome je sve u redu NEMA ikonicu; Syncfusion ipak iscrta praznu kutiju za ikonicu (i
   ostavi razmak) - zato se prazna (ona bez nijedne `bi-*` klase) gasi. */
.erp-tab-style .e-tab-header .erp-tab-prazan,
.erp-tab-prazan {
    font-size: 7px;
    color: var(--muted, #6c757d);
    opacity: .55;
}

.erp-tab-style .e-tab-header .e-tab-icon:not([class*="bi-"]) {
    display: none !important;
}

/* ☠️ N451 dopuna (vlasnik: "samo bih vrlo malo smanjio ove krugove upozorenja"):
   ikonica taba je nasledjivala 16px od Syncfusion-ove `e-icons` teme (izmereno) - uzvicnik je
   tako bio krupniji od teksta taba (13.5px). Sad je 13px, taman ispod teksta: vidi se odmah,
   a ne nosi traku. Tackica za prazan tab ostaje 7px. */
.erp-tab-style .e-tab-header .e-tab-icon.bi-exclamation-circle-fill {
    font-size: 11.5px;
}

/* ☠️ N452 (vlasnik: "kad na Kataloski broj stavim fokus i pritisnem enter on mi preskoci
   jedinica mere i dva puta ode gore"): lanac Enter-a je trazio samo `input`/`select`, a
   `ErpBirac` u stanju "prikaz izabranog" UOPSTE NEMA `input` - samo `<div>` sa tekstom. Zato su
   "Jedinica mere" i "Poreska stopa" ispadale iz lanca, pa je Enter sa "Kataloski broj" skakao
   pravo na prvo polje DRUGE kartice - a ona je gore desno, pa izgleda kao da fokus "ide gore".
   Kutija biraca je sad dohvatljiva tastaturom (`tabindex="0"` + `.erp-fokus`), pa ulazi u lanac
   kao i svako drugo polje - i obican Tab je sad hlata, sto je i ranije falilo.
   Ovde joi ide samo PRIKAZ fokusa - bez okvira covek ne vidi gde se nalazi. */
.erp-fokus:focus-visible {
    outline: 2px solid var(--primary, #0d6efd);
    outline-offset: 1px;
}

/* ☠️ N454 (vlasnik: "ovo mozemo da povecamo jos malo"): identitet sloga u traci iznad tabova
   sa 15px na 16.5px. Oznaka stanja prati srazmerno (14px -> 15px), da ne zaostane za tekstom.
   Ide POSLE N447 bloka, pa ga gazi - ista tezina, kasnije pravilo pobeduje. */
.erp-forma-identitet .erp-identitet-sifra,
.erp-forma-identitet .erp-identitet-crta,
.erp-forma-identitet .erp-identitet-naziv {
    font-size: 16.5px;
}

.erp-forma-identitet .erp-identitet-stanje {
    font-size: 15px;
}

/* ☠️ N455 (vlasnik: "nazivi tabova da budu pravopisno ispravni... sva mala slova sem prvog"):
   tekst u kodu je VEC ispravan ("Osnovni podaci", "Mere i gabariti") - kapitalizovala ga je
   Syncfusion-ova Bootstrap 5 tema (`text-transform: capitalize`, izmereno u pregledacu).
   ?? Pravilo iz N411 je POSTOJALO, ali je GUBILO po tezini: nas selektor ima tri klase, a
   Syncfusion-ov pet (`.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text`). Isti razlog
   je gasio i nasu velicinu slova (izmereno 14px umesto 13.5px) i velicinu sive tackice
   (izmereno 16px umesto 7px) - uzvicnik je jedini radio, jer je njegov selektor SLUCAJNO
   nosio i `.e-tab-icon`. Zato se ovde ponavljaju sa punim Syncfusion-ovim putem.
   `!important` samo na `text-transform` - to je jedina osobina koju tema sama postavlja. */
.erp-tab-style .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
    text-transform: none !important;
    font-size: 13.5px;
    font-weight: 600;
}

.erp-tab-style .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon.erp-tab-prazan {
    font-size: 7px;
    color: var(--muted, #6c757d);
    opacity: .55;
}

.erp-tab-style .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon.bi-exclamation-circle-fill {
    font-size: 11.5px;
}

/* ☠️ N460 (vlasnik, 23.09.2026): zakljucano polje se do sada nije razlikovalo od pokvarenog - tiho je
   odbijalo unos i to je bilo sve. Sad nosi katanac uz desnu ivicu i objasnjenje u `title`.
   ?? Ikonica je IZNAD kontrole (`position: absolute`), pa ne pomera polje ni za piksel i ne ulazi u
   racun sirine iz pravila 12 tacka 5. `pointer-events: none` - da ne krade klik samom polju. */
.erp-zakljucano {
    position: relative;
}

    /* ☠️ N460 dopuna (vlasnik: ,,mnogo je blizu katanac, odvoj ga malo i malo povecaj"): katanac je
       stajao na 10px od desne ivice, tik uz strelicu padajuce liste. Sad je levo od strelice (20px, vlasnik precizirao)
       i za dva piksela veci. */
    .erp-zakljucano .erp-katanac {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        font-size: 13px;
        color: var(--muted, #6c757d);
        opacity: .75;
        pointer-events: none;
        width: auto !important;
        max-width: none !important;
    }

/* ===== N468: prikaz izabrane vrednosti u ErpBircu (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "smanjimo bih malo font od polja Jed mer i por stopa". IZMERENO na zivoj formi
   PRE izmene: "Jedinica mere" i "Poreska stopa" 14px / debljina 700, dok "Tip artikla" i "Naziv"
   (i sve ostale kontrole po pravilu 12) idu na 13.2px - zato su ta dva polja izgledala krupnije
   od suseda u istoj kartici. Sada nose istu velicinu kao i sve ostalo; podebljanje ostaje, da se
   izabrana vrednost i dalje izdvaja od praznog polja. */
.erp-fokus span {
    font-size: 13.2px;
}

/* ===== N469: padajuca lista prati sirinu polja (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "mozda da rasirimo padajucu listu da prati sirinu dugmeta i to da uvedemo kao
   pravilo". IZMERENO na otvorenom spisku "Jedinice mere": polje 260px, popup ima inline
   style width 260px - dakle Syncfusion ga je VEC postavio tacno - ali se crta 170px.
   Uzrok: Syncfusion prepisuje CssClass kontrole i na POPUP, pa popup nosi nasu klasu za sirinu
   polja (erp-polje-kratko), a njeno max-width: 170px pobedi inline sirinu.
   Isti rod greske kao N449: pravilo za sirinu polja zavrsi na necemu sto nije polje.
   Popravka NIJE zadavanje nove sirine popupu nego skidanje nase ograde sa njega - tada vazi
   inline sirina koju Syncfusion racuna iz polja, pa lista uvek prati polje, koliko god ono bilo. */
.e-popup[class*="erp-polje-"] {
    max-width: none !important;
    min-width: 0 !important;
}

/* ☠️ Vlasnik: "treba da padajuca lista lepo se preklopi sa poljem iznad, tj. da se ne preklopi
   nego gde se donji deo zavrsi tu lista pocinje, i to uvesti isto". IZMERENO na otvorenom spisku:
   Syncfusion popup dobije inline top TACNO na dnu polja (484.3px), ali mu je racunato
   margin-top: -3px, pa se iscrta 3px vise i popne se preko donje ivice polja.
   (U listovima stoji i .e-popup.e-ddl { margin-top: 3px }, ali ga tema nadjacava sa -3px -
   racunata vrednost je ono sto vazi, i nju merimo.) */
.e-popup.e-ddl {
    margin-top: 0 !important;
}
/* ===== N470: klizaci u celom ERP-u su tihi (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "sve skrolove da postavimo da budu kao i ono sto smo ispravljali da ne izbijaju
   ovoliko oci". Do sada je tanak klizac imao SAMO bocni meni (.erp-sidebar-nav, v. gore), i tamo
   je izricito pisalo da to nije globalno pravilo. Vlasnik je 23.09.2026 odlucio suprotno, pa je
   sada pravilo za CEO program. Time je pokriven i otvoreni nalaz o vodoravnom klizacu u gridu
   artikala.
   ☠️ Vodoravni klizac mora da ostane dohvatljiv misem, zato 8px a ne 6px kao u bocnom meniju
   (bocni meni zadrzava svojih 6px - njegovo pravilo je odredjenije od ovog). */
/* ☠️ N471 dopuna (vlasnik: "mozes li da posvetlis malo ovaj skrol od padajuce liste, previse je
   taman i opet upada u oci"). Bio je uzet token `--sidebar-border`, a to je #16345c - TAMNO PLAVA,
   napravljena za TAMAN bocni meni. IZMERENO na popupu: `scrollbar-color` je bio rgb(22, 52, 92).
   Na beloj podlozi to je crna crta. Sada stoji neutralno svetlo sivo #d0d5dd: vidi se da se moze
   povuci, ali ne vuce pogled. Tamnije (`--muted`) ostaje samo dok je mis na njemu.
   ☠️ Nema postojeceg tokena bas za ovo: `--border` (#e4e7ec) je presvetao da se klizac uopste
   primeti, a `--muted` (#667085) pretaman - zato je vrednost ovde zapisana izricito. */
/* ?? M-N716 dopuna (27.10.2026, vlasnik: ,ovaj skrol vertikalni treba da bude u boji teme"): fiksna #d0d5dd je u
   tamnoj temi bila svetla siva traka. Sada token teme --border-strong: u svetlim temama #cfd4dc / #d1d5db / #cbd5d1
   (prakticno ista boja kao do sada), u tamnim #2b3d5e / #343b49 / #31423d. Pravilo 14 (klizaci) i pravilo 17 (obe teme). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong, #d0d5dd) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong, #d0d5dd);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--muted, #adb5bd);
}

/* ===== N473: birac izgleda isto kao obican combobox (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "jel mozemo da napravimo uniformisan izgled polja sa padajucim listama da budu
   sva ista". IZMERENO, kutija `ErpBirac`-a naspram omotaca `MojComboBox`-a:
   visina 31 : 34px, radijus 6 : 7px (Bootstrap `rounded`), tekst 700 : 400, kvacica : nista.
   Odstupao je BIRAC - pravilo 12 tacka 4 zadaje 34px i radijus 7px. Visina, podebljanje i
   kvacica su sredjeni u samoj komponenti; radijus se ne moze, jer ga donosi Bootstrap klasa
   `rounded`, pa se nadjacava ovde. */
.erp-fokus {
    border-radius: 7px !important;
}

/* ===== N476: izabrana vrednost u padajucim poljima je podebljana (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "mozemo i ovako da vrednost u padajucem meniju bilo gde bude bold, da probamo tako
   pa da vidimo - ako nam se ne svidja da vratimo". U N473 je podebljanje SKINUTO sa birca, da bi
   birac i obican combobox izgledali isto; sada se vraca, ali na OBA - pa su i dalje isti.
   ⚠️ Ovo je PROBA, vlasnikovim recima. Ako se ne svidi, brise se cela ova sekcija i nista drugo
   se ne dira - zato stoji zasebno, a ne umetnuto u druga pravila.
   ☠️ `:not(:placeholder-shown)` je tu da se ne podebljaju ni prazno polje ni tekst koji se kuca
   dok se trazi - podebljano je samo ono sto je STVARNO izabrano. */
.erp-forma-red .e-ddl input.e-input:not(:placeholder-shown) {
    font-weight: 700;
}

.erp-fokus span:not(.text-muted) {
    font-weight: 700;
}

/* ===== N477: dugmad birca idu DESNO od polja, ne u njegovu sirinu (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "polje od Master artikla bi prosirio da bude isto kao srednje, npr. od sifre, a tek
   onda desno od tog polja da idu ova dva dugmeta". IZMERENO na formi artikla: kolona JESTE 260px
   po pravilu 12, ali dugmad (2 x 33px + razmaci) stoje u toj istoj koloni, pa polju ostane 187px.
   Zato je Master artikal izgledao uzi od Sifre, iako im je kolona ista.
   ☠️ Pravilo 12 i dalje drzi sirinu na KOLONI (pouka N445), samo se kolona vise ne deli sa
   dugmadima: red sa alatkama (`erp-birac-sa-alatkama`) siri se koliko mu treba, a sirinu nosi
   omotac samog polja. Birac bez dugmadi se ne dira. */
.erp-forma-red .erp-input-wrapper > .d-flex > .flex-grow-1:has(.erp-birac-sa-alatkama) {
    width: auto !important;
}

.erp-forma-red .erp-birac-sa-alatkama > .flex-grow-1 {
    flex: none !important;
    width: 260px !important;
}

.erp-forma-red .erp-birac-sa-alatkama:has(.erp-polje-kratko) > .flex-grow-1 {
    width: 170px !important;
}

/* ☠️ N578 (vlasnik, 25.09.2026, uz unos adrese): „Ovo moramo srediti." — dugme spiska pored
   birača je VISILO IZVAN polja i izlazilo iz slajdera.
   ⛔ IZMERENO u pregledaču (slajder „Lokacije isporuke", polje „Mesto / Grad"):
        kolona polja  1148 → 1568   (420px, po pravilu 12)
        samo polje    1148 → 1568   (420px — uzelo CELU kolonu)
        dugme         1572 → 1588   (dakle 20px PREKO desne ivice, van panela)
   ☠️ Uzrok je pravilo koje je ovde stajalo: polju je zakucavalo `width: 420px`, a dugme se onda
   DODAVALO na to. 420 + razmak + 34 = 458 u koloni od 420 — višak se prelio napolje.
   📌 Sada polje ne nosi širinu nego se RASTEŽE u ono što ostane: polje + razmak + dugme zajedno
   daju tačno propisanu širinu kolone, pa desna ivica stoji u ravni sa svim ostalim poljima.
   ℹ️ Važi za obe širine (260 i 420) i za obe grane birača (pretraga i prikaz izabranog), jer se
   veže za PRISUSTVO alatki, ne za širinu reda. */
/* ===== N590: potvrda brisanja u gridu imala je skrol (vlasnik) ===== */
/* ☠️ Vlasnik: „kad hoću da obrišem u bankovnim računima izbači poruku za brisanje i tekst od
   poruke ima scroll a ne bi trebao".
   ℹ️ To je Syncfusion-ov dijalog (`ShowDeleteConfirmDialog` u `MojDataGrid`), bez zaglavlja, sa
      jednom rečenicom. Njegov sadržaj je `overflow-y: auto` (izmereno), pa kad dobije visinu manju od
      svog teksta (21px reda + 2 × 12px ispune) pojavi se skrol za jednu rečenicu.
   📌 Sadržaj sada raste koliko mu tekst traži. Ovo je poruka od jedne rečenice — skrol u njoj
      nikad nije ispravan.
   ⚠️ Selektor je vezan za dijalog UNUTAR grida (izmereno: `.e-grid > .e-dlg-container > .e-dialog`),
      a ne za sve dijaloge — veliki dijalozi (uputstvo, rutiranje) moraju da zadrže skrol.
   ⚠️ NIJE izmereno otvoreno: u koordinatorovom tabu dijalog nije hteo da se otvori (verovatno bez
      prava brisanja na tom šifarniku), pa je struktura čitana iz zatvorenog dijaloga. */
.e-grid > .e-dlg-container > .e-dialog {
    max-height: none !important;
}

    .e-grid > .e-dlg-container > .e-dialog .e-dlg-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

/* ===== N591: dugmad potvrde RAZORNE radnje, isto na celom ERP-u (vlasnik) ===== */
/* ☠️ Vlasnik: „možeš da središ i to za dugmiće na nivou celog ERP-a".
   📌 Kad `ErpPotvrda.PotvrdiAsync(..., razorno: true)` pita za brisanje/uklanjanje/opoziv:
      – potvrda („Obriši", „Ukloni", „Opozovi") je CRVENA – ista boja kao `ErpDugme` varijanta Opasno
        (Bootstrap `danger`, #dc3545), da crveno znači isto u celom programu;
      – „Odustani" je dugme koje radi na Enter (`IsPrimary`), ali IZGLEDA neutralno – bez ove klase
        bi dobilo boju teme i izgledalo kao glavna radnja.
   ⚠️ Selektor ide preko `.e-footer-content` jer Syncfusion svom `e-primary` dugmetu daje boju teme
      sa većom specifičnošću; zato i `!important`. */
.e-dialog .e-footer-content .e-btn.erp-dlg-razorno {
    background-color: var(--danger, #dc3545) !important;
    border-color: var(--danger, #dc3545) !important;
    color: #fff !important;
}

    .e-dialog .e-footer-content .e-btn.erp-dlg-razorno:hover,
    .e-dialog .e-footer-content .e-btn.erp-dlg-razorno:focus {
        background-color: #b02a37 !important;
        border-color: #b02a37 !important;
    }

.e-dialog .e-footer-content .e-btn.erp-dlg-odustani {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

    .e-dialog .e-footer-content .e-btn.erp-dlg-odustani:hover,
    .e-dialog .e-footer-content .e-btn.erp-dlg-odustani:focus {
        background-color: color-mix(in srgb, var(--text) 6%, var(--surface)) !important;
    }

/* ===== N582: prsten fokusa u formi je bio predebeo (vlasnik) ===== */
/* ☠️ Vlasnik: „šta smo rekli za ovaj debeli outline kad kliknem da mi se otvori padajući meni?"
   ℹ️ Taj prsten NIJE naš — Syncfusion ga crta sam (`.e-input-focus`), u svojoj boji i svojoj
      debljini. Do sada smo ga gasili samo na dva čipa u gornjoj traci (N424/N426, N431).
   📌 Ovde se ne gasi nego STANJUJE i prevodi u našu boju: 2px umesto četiri, i `--primary`
      umesto lavande. Fokus mora da se vidi — čovek koji se kreće tastaturom bez njega ne zna gde je.
   ⚠️ Ograničeno na `.erp-forma-red`, da gridovi, trake i čipovi ostanu kakvi jesu. */
/* M-N630 (vlasnik: „svugde gde god radimo skinuo bih ovoliko debeli outline oko polja"): ograničenje
   na `.erp-forma-red` je SKINUTO - isti tanak prsten važi za svako polje u aplikaciji (trake filtera,
   birači, zaglavlja, gridovi). `:where()` drži težinu pravila na jednoj klasi, pa izuzeci koji prsten
   GASE (čipovi firme i godine - N424/N426, otvorena lista - N522) i dalje pobeđuju, jer su teži. */
:where(.e-input-group, .e-control-wrapper).e-input-focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent) !important;
    border-color: var(--primary) !important;
}

/* ===== N579: panel kategorizacije po pravilu 12 ===== */
/* ℹ️ Čip izabrane kategorije — nosi naziv i krstić za uklanjanje. Neutralan je namerno:
   izabrana kategorija je PODATAK, ne radnja, pa ne uzima boju glavne radnje ekrana. */
.erp-kat-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    font-size: 12px;
    color: var(--text);
}

    .erp-kat-cip .bi-x-lg {
        font-size: 10px;
        color: var(--muted);
        cursor: pointer;
    }

        .erp-kat-cip .bi-x-lg:hover {
            color: var(--danger, #e5484d);
        }

/* Red sa napomenom nije polje: nema crtu ispod i nema natpis, nego se UVLAČI tačno do leve ivice
   polja iznad. Vlasnik, N582/N583: „izravnjaj ovo i kao info sa poljem iznad po levoj strani".

   ⛔ IZMERENO u pregledaču, posle prvog pokušaja: polje počinje na 1147, a napomena je stajala na
      1159 — 12px udesno. Uzrok: prvi put sam uvlačenje računao kao „ispuna reda + natpis + razmak"
      i pretpostavio 12px ispune, a IZMERENO je da red u ovoj kartici ima ispunu 0.
   📌 Zato uvlačenje više ne dira ispunu REDA (koja se razlikuje od konteksta do konteksta) nego
      stoji kao margina na samom tekstu: natpis (170px) + razmak (1rem). Kolika god bila ispuna
      reda, napomena kreće tačno tamo gde i polje, jer polazi od iste tačke kao ono. */
.erp-forma-12 .erp-forma-red.erp-kat-napomena {
    border-bottom: 0;
    padding-top: 2px;
}

    .erp-forma-12 .erp-forma-red.erp-kat-napomena .form-text {
        margin-left: calc(170px + 1rem);
    }

/* U kartici sa dugim natpisima kolona je 220px — uvlačenje prati nju, inače bi napomena
   ispala iz ravni baš tamo gde su natpisi najduzi. */
.erp-forma-12 .erp-kartica-natpis-dug .erp-forma-red.erp-kat-napomena .form-text {
    margin-left: calc(220px + 1rem);
}

    .erp-forma-12 .erp-forma-red.erp-kat-napomena .form-text {
        font-size: 11.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ===== N580: slajder je širok koliko mu treba, ne koliko ima ekrana ===== */
/* ☠️ Vlasnik: „sužio bih celu širinu slajdera... koliko je najduže polje da se do njega raširi."
   ℹ️ Širinu daje `fit-content` na samom panelu (v. `ErpSlajder.Sirina`); ovde stoje samo granice.
   ⚠️ Bez DONJE granice panel sa dva kratka polja postane traka; bez GORNJE bi panel sa gridom
      unutra preleteo preko celog ekrana. */
.offcanvas.erp-slajder {
    min-width: 420px;
    max-width: 92vw;
}

.erp-forma-12 .erp-forma-red .erp-birac-sa-alatkama {
    width: 100%;
}

    .erp-forma-12 .erp-forma-red .erp-birac-sa-alatkama > .flex-grow-1 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
    }

/* Dugme uz birač je `.btn`, pa ga ne hvata pravilo za radijus polja (N479) — a pravilo 12
   tačka 4 traži 7px na SVEMU u redu. Izmereno: bilo je 4px. */
.erp-forma-red .erp-birac-sa-alatkama .btn {
    border-radius: 7px !important;
    flex: 0 0 auto;
}

/* ☠️ N578b: red sa GRUPOM (tačka 5v) je stajao 16px LEVO od svih ostalih polja.
   ⛔ IZMERENO u istom slajderu: obična polja počinju na 1148, a grupa „Ulica i broj" na 1132.
   ☠️ Uzrok: kod običnih polja natpis i kontrola su u istom `.d-flex gap-3`, što daje 16px
   između njih; red sa grupom ima natpis i grupu kao NEPOSREDNU decu reda, gde tog razmaka nema.
   Zato se zadaje ovde — ista mera (1rem), a ne „približno". */
.erp-forma-12 .erp-forma-red > label.form-label + .erp-grupa-polja {
    margin-left: 1rem;
}

/* ===== N479: isti ugao i ista strelica na svim poljima forme (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "koji je posao da svaki ovaj izgled dugmeta postavimo da bude potpuno isti, npr.
   kao od Jedinica mere". IZMERENO, birac naspram comboboxa: visina 34 : 34px (vec izjednaceno,
   N473), ali radijus 7 : 4px, pozadina siva : bela, i strelica obicna ikonica : zona od 31px sa
   CRTOM sa leve strane.
   ☠️ Po pravilu 12 tacka 4 radijus je 7px - dakle tu je BIRAC ispravan, a combobox je krsio
   pravilo. Zato se radijus ne "usaglasava" nego se ispravlja na propisanih 7px.
   ⚠️ Pozadina NIJE dirana, vlasnikovom odlukom: bela nije samo kod comboboxa nego i kod
   tekstualnih, numerickih i datumskih polja - da su comboboxi obojeni sivo, postali bi jedini
   sivi u formi. Ostaje kao otvorena stavka ako se predomisli.
   ☠️ Sve je ograniceno na `.erp-forma-red`, da gridovi, trake i slajderi ostanu netaknuti. */
.erp-forma-red .e-input-group,
.erp-forma-red .e-control-wrapper,
.erp-forma-red .e-input-group.e-control-wrapper {
    border-radius: 7px !important;
}

/* Strelica: bez crte koja je delila polje od ikonice, i ista boja kao kod birca. */
.erp-forma-red .e-ddl .e-ddl-icon {
    border-left: 0 !important;
    color: var(--muted, #667085) !important;
}

.erp-forma-red .erp-fokus .bi-chevron-down {
    color: var(--muted, #667085) !important;
}

/* ===== N515: zakljucano polje je sivo, ma koja kontrola bila (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: „opet interna sifra da se polje oboji u svetlo sivo kao da je zakljucano i to da
   uvedemo kao pravilo da se vidi da se ne moze menjati".
   ☠️ Zasto nije proradilo od N483: ono pravilo gadja `… .e-input-group.e-readonly`, a klasu
   `e-readonly` na omotac stavlja SAMO Syncfusion combobox. `SfTextBox` prosledjuje `readonly` na
   sam <input> i omotac ostaje bez te klase - pa je combo posiveo, a tekstualno polje nije.
   ☠️ Zato se sada oslanjamo na NASU kuku `erp-zakljucano`, koju od N510 nosi svako zakljucano
   polje (tekst, broj, datum, visestruki izbor, birac) - jedno pravilo za sve kontrole, umesto da se
   pogadja koja Syncfusion klasa gde stigne. Boja je ista kao u N483, da ne postoje dve nijanse
   „sivog zakljucanog". */
.erp-forma-12 .erp-zakljucano .e-input-group,
.erp-forma-12 .erp-zakljucano .e-control-wrapper,
.erp-forma-12 .erp-zakljucano.erp-fokus {
    background-color: color-mix(in srgb, var(--text) 7%, var(--surface)) !important;
}

    .erp-forma-12 .erp-zakljucano .e-input-group input.e-input,
    .erp-forma-12 .erp-zakljucano .e-control-wrapper input.e-input {
        background-color: transparent !important;
    }

/* ===== N505/N518: katanac stoji NA ISTOM ODSTOJANJU kod svih kontrola (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: „stavimo katanac i na sifra u osnovni podaci u artikli kad je auto generisano",
   pa zatim: „Vidim katanac ali opet si ga sabio uz polje, odmakni ga isto kao i kod tip artikla".
   ☠️ Bio sam uveo dve vrednosti - 20px kod polja sa strelicom, 10px kod onih bez nje - jer mi je
   izgledalo da bi 20px kod tekstualnog polja ostavilo rupu. Vlasnik gleda ZIVI ekran i kaze da
   nije tako; uz to su dve vrednosti za istu stvar upravo ono od cega bezimo. Ostaje JEDNA: 20px,
   ona koju je vlasnik vec prihvatio na „Tip artikla". Klasa `erp-katanac-polje` je obrisana. */

/* ===== N502: polje pretrage u bircu ima isti ugao kao i svako drugo polje (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: „Ovo polje sto je birac Kucaj sifru, naziv ili barkod bih zaoblio ivice kao i kod
   pretrage i to uveo kao pravilo".
   ☠️ Zašto postoji, kad N479 već zadaje 7px: N479 važi SAMO unutar `.erp-forma-red`. Birac
   ima DVE grane — „prikaz izabranog" (nosi `erp-fokus`, pa 7px od N473) i „pretraga" (crta je
   Syncfusion ComboBox, radijus dolazi iz Syncfusion teme). Van reda forme — kartica artikla,
   obuhvat, SEO prijemnica — ta druga grana je ostajala oštrih uglova, a vidi se baš ona, jer u
   njoj i stoji natpis „Kucaj šifru, naziv ili barkod...".
   ☠️ Zato kuka stoji na SAMOJ komponenti (`ErpBirac.CssKlasa`), a ne na stranici: pravilo važi
   za svaki birac u aplikaciji, ne za onaj koji je vlasnik slučajno otvorio.
   ⚠️ Vrednost je 7px — pravilo 12 tačka 4, ista kao kod svih ostalih polja. Ovde se ništa ne
   „usaglašava na oko"; prepisana je propisana vrednost. */
.erp-birac-pretraga,
.erp-birac-pretraga.e-input-group,
.erp-birac-pretraga.e-control-wrapper,
.erp-birac-pretraga .e-input-group,
.erp-birac-pretraga .e-control-wrapper {
    border-radius: 7px !important;
}

/* ===== N480: birac bez spiska nema nijednu strelicu (vlasnik, 23.09.2026) ===== */
/* ☠️ Vlasnik: "master artikal mi i dalje ima padajucu listu". IZMERENO na zivoj formi: nasa
   strelica JESTE sklonjena (N478), ali polje pretrage je Syncfusion ComboBox i on crta SVOJU
   strelicu (.e-ddl-icon) - SpisakNaKlik je nije ni dodirivao. Za veliki sifarnik je i ona
   pogresna: nudi spisak prvih dvadeset artikala, sto ne pomaze kad ih ima preko 25.000.
   ☠️ Spisak se i dalje otvara SAM cim se pocne kucati (Syncfusion filtriranje) - sklanja se
   samo dugme koje nudi neprosejan spisak. */
.erp-forma-red .e-ddl.erp-bez-spiska .e-ddl-icon {
    display: none !important;
}

/* ===== N480 dopuna: prikaz izabranog je bele pozadine, kao i sva ostala polja ===== */
/* ☠️ Vlasnik: "opet nisu isti combo boxovi". IZMERENO posle N479: visina, radijus i strelica
   su se poklopili, a ostala je JEDINO pozadina - birac rgb(233,236,239), combobox rgb(255,255,255).
   Bela je pobedila jer nije samo kod comboboxa nego i kod tekstualnih, numerickih i datumskih
   polja; da su comboboxi obojeni sivo, postali bi jedini sivi u formi.
   ☠️ Klasa je `bg-body`, a ne zakucana bela: `bg-body` prati temu, pa na tamnoj temi polje
   ostaje tamno umesto da zasvetli (ista pouka kao u app.css kod obaveznih polja). */
.erp-fokus {
    background-color: var(--surface, #fff) !important;
}

/* ☠️ Zasto NIJE Bootstrap klasa `bg-body`: IZMERENO u pregledacu - `--bs-body-bg` je #f5f7fa,
   pozadina STRANE, a ne polja; sa njom je birac ostajao svetlo siv naspram belog comboboxa, pa
   razlika ne bi ni nestala. `--surface` je nas token iz `erp-tema.css`: #fff na svetlim temama,
   a #111b2e / #181b22 / #131a18 na tamnim - dakle prati temu, po pravilu da se boja nikad ne
   zapisuje kao gotov ton. */

/* ===== N481: cekirano polje je red kao i svaki drugi (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik, prolazeci tab "Mere i gabariti": "da, jeste Meri se na vagi nekako izdvojeno" i
   "izjednaci i font na celom tabu naziva polja". IZMERENO - obe primedbe imaju ISTI uzrok:
   | red | natpis levo | sirina natpisa | kontrola pocinje | font natpisa |
   | JM za prikaz cene | 0 | 170px | 186px | 13px / 600 |
   | Meri se na vagi   | 12px | 113px | 12px | 13.6px / 400 |
   Cekirano polje uopste nije bilo u rescetki, a natpis mu je dolazio iz `<style>` bloka koji je
   stajao U `MojCheckBox.razor` (0.85rem = 13.6px, bez podebljanja) - protivno pravilu 12 tacka 8.
   ☠️ Vlasnik je izabrao resenje (a): natpis LEVO u istoj koloni od 170px kao i svi ostali, a u
   kontrolnoj koloni samo kvadratic. Zato se `.e-label` premesta ispred kvadratica (`order: -1`).
   ☠️ `margin-left: 12px` na `.e-checkbox-wrapper` dolazi iz Syncfusion teme i bas on je uvlacio
   ceo red - IZMERENO penjanjem uz roditelje, nije pogodjeno napamet.
   ☠️ Vazi za SVAKI red po pravilu 12 (`.erp-forma-red`), pa svih 17 cekiranih polja u formi
   artikla i sva ostala u ERP-u izgledaju isto - bez diranja 17 mesta u stranici. */
.erp-forma-red .erp-chk-wrapper {
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.erp-forma-red .e-checkbox-wrapper {
    margin: 0 !important;
}

    .erp-forma-red .e-checkbox-wrapper > label {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .erp-forma-red .e-checkbox-wrapper .e-label {
        order: -1;
        box-sizing: border-box;
        width: 170px !important;
        min-width: 170px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        text-align: left;
    }

    .erp-forma-red .e-checkbox-wrapper .e-frame {
        margin-left: 16px !important;
    }

/* Preseljeno iz `MojCheckBox.razor` (pravilo 12 tacka 8) - vazi SAMO van formi po pravilu 12,
   jer unutra pravila iznad daju 13px/600. */
.erp-chk-wrapper .e-checkbox-wrapper .e-label {
    font-size: 0.85rem;
    margin-top: 2px;
}

/* ===== N482: polja i naslovi sekcija su vidljiviji (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "jel moze nekako da se stavi neka senka oko kvadratica za check box ili malo da se
   podeblja outline od svih polja da budu malo vidljivija" i "malo bih dodao jos sive u polje od
   naziva tog segmenta, i kontra naravno u tamnoj temi".
   ☠️ VAZNO sto je merenje pokazalo: ivica polja VEC JESTE 1px. Pregledac je prijavljivao 0.8px
   samo zato sto je tab bio na 80% zuma - dakle debljanje ivice ne bi promenilo skoro nista.
   Ono sto polje stvarno cini vidljivim je BOJA ivice, koja je bila #e4e7ec (skoro bela).
   ☠️ Boja se ne zakucava nego se MESA iz `--text` i `--surface`. Tako se u tamnoj temi sama
   izvrne - tamo je `--text` svetao a `--surface` taman, pa mesanje podlogu POSVETLI, sto je bas
   ono "i kontra naravno u tamnoj temi" koje je vlasnik trazio. Nema drugog pravila za tamnu temu.
   ⚠️ `color-mix` trazi noviji pregledac. Ako ga nema, deklaracija se preskace i ostaje
   zatecena ivica - polje i dalje radi, samo je bledje. Zato se nista drugo ne oslanja na nju. */
.erp-forma-red .e-input-group,
.erp-forma-red .e-control-wrapper,
.erp-forma-red .erp-fokus,
.erp-forma-red .e-checkbox-wrapper .e-frame {
    border-color: color-mix(in srgb, var(--text) 22%, var(--surface)) !important;
}

/* Kvadratic je 14x14 - najsitnija kontrola u formi, pa uz jacu ivicu dobija i blagu senku. */
.erp-forma-red .e-checkbox-wrapper .e-frame {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10) !important;
}

/* Naslov sekcije dobija tihu traku, da se odvoji od tela kartice. */
.erp-kartica-naslov {
    background-color: color-mix(in srgb, var(--text) 5%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, var(--surface));
}

/* ===== N483: zakljucano polje je sivo CELO, ne samo unutra (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "nije bas sivo lepo leglo na polje od tip artikla, kao da je sivo pobeglo malo
   gore i vidi se belo". IZMERENO, i nije utisak nego geometrija:
       omotac (.e-ddl)  visina 34px, gore 226.3, dole 260.3, pozadina BELA
       input            visina 30px, gore 227.1, dole 257.1, pozadina SIVA
   Syncfusion sivilo za zakljucano polje crta na INPUT-u, a input je 4px nizi od omotaca i nije
   centriran: 0.8px razmaka gore, 3.2px dole. Otud sivo "pobegne" navise i ispod se vidi belo.
   ☠️ Zato sivilo prelazi na OMOTAC, koji drzi punu visinu od 34px, a input i ikonica postaju
   providni. Vazi za svako zakljucano polje u formi (Tip artikla, Sifra dok je auto-sifra...).
   ☠️ Ton se opet MESA iz `--text` i `--surface`, pa u tamnoj temi radi sam od sebe. */
.erp-forma-red .e-input-group.e-readonly,
.erp-forma-red .e-control-wrapper.e-readonly {
    background-color: color-mix(in srgb, var(--text) 7%, var(--surface)) !important;
}

    .erp-forma-red .e-readonly input.e-input,
    .erp-forma-red .e-readonly .e-ddl-icon {
        background-color: transparent !important;
    }

/* ===== N484: kartice u dve kolone koje se pune nezavisno (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "da pomerimo Zakonske regulative gore do Ambalaza i eko takse, a povezana ambalaza
   grid da ide odmah ispod njih". IZMERENO na tabu "Akcize i regulativa": kartice su stajale u
   resetki, a resetka PORAVNAVA REDOVE - "Akcizna roba" 216px, "Ambalaza i eko takse" 126px, pa je
   drugi red pocinjao tek ispod vise kartice i u desnoj koloni je zjapilo ~90px praznine.
   ☠️ Resetka to ne moze da izbegne. Zato tab koji to trazi koristi DVE KOLONE koje se pune
   nezavisno: svaka kartica krece odmah ispod prethodne u svojoj koloni, pa i grid ispod dolazi
   vise. Obican `.erp-kartice-red` (bez ove klase) ostaje netaknut na ostalim tabovima.
   ☠️ Sirina i razmak su isti kao kod resetke, da se dva rasporeda ne razlikuju po meri. */
.erp-kartice-red.erp-kartice-kolone {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .erp-kartice-kolone > .erp-kartica-kolona {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        flex: 0 0 660px;
        max-width: 660px;
    }

@media (max-width: 900px) {
    .erp-kartice-red.erp-kartice-kolone {
        flex-direction: column;
    }
}

/* ===== N486: cipovi u zaglavlju izgledaju kao polje u formi (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "i dalje me nerviraju ovi boxovi u vrhu gde je firma i godina, niti su isti niti su
   value na sredini po visini. Jel mozes da napravis izgled kao ovaj box" (uz snimak obicnog polja).
   ☠️ IZMERENO, i deo primedbe se nije potvrdio: dva cipa su MEDJUSOBNO bila identicna (oba 31px,
   radijus 8px, ista ivica i pozadina; razlikovala se samo sirina, a ona ide po sadrzaju). I
   centriranje je bilo tacno: sredina cipa 24.6, a sredina ikonice, vrednosti i strelice takodje
   24.6 - odstupanje 0. Utisak je dolazio od neceg treceg.
   ☠️ Stvarna razlika je bila prema POLJU U FORMI: cip 31px / radijus 8px / font 14px / bleda
   ivica, a polje 34px / radijus 7px / font 13.2px / pojacana ivica (N482). Cip je visinu uzimao iz
   tokena `--ctrl-h`, koji nosi visinu ostalih kontrola ljuske, dok pravilo 12 zadaje 34px.
   ⚠️ Token `--ctrl-h` NIJE diran: on drzi visinu i ostalim delovima ljuske (traka pretrage,
   dugmad), pa bi izmena tamo promenila mnogo vise od dva cipa. Poravnat je samo cip.
   ☠️ Debljina slova ostaje 600 (polje nosi 700): zaglavlje je pomocna traka i ne treba da bude
   teze od same forme. Ako vlasnik zatrazi, to je jedan broj. */
.erp-chip {
    height: 34px;
    border-radius: 7px;
    border-color: color-mix(in srgb, var(--text) 22%, var(--surface));
    font-size: 13.2px;
}

    .erp-chip input.e-input {
        font-size: 13.2px;
    }

/* ===== N487: strelica u cipu bez svetle linije, ikonica poravnata po mastilu (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "Opet ikonica od kalendara nije u istoj visini kao i 2026. / Ova strelica koja otvara
   padajuci meni nije na sredini svog polja ako je problem da se to izravnja onda skloni ovu svetli
   liniju levo od steice da je nema. lepse ce izgledati nego ovako da nije na sredini to vazi i za
   naziv firme i ikonicu zgradice"
   ☠️ IZMERENO na osvezenoj strani, i to po MASTILU glifa a ne po kutiji - kutija ume da bude tacno
   centrirana dok slovo u njoj nije. Zateceno stanje:
     cip            7.59 - 41.59   centar 24.59
     strelica       21.59 - 27.59  centar 24.59   <- odstupanje 0.00
     ikonica        18.09 - 31.09  centar 24.59   visina mastila 13px
     tekst "2026."  20.09 - 30.09  centar 25.09   visina mastila 10px
   ☠️ Strelica JESTE bila tacno na sredini, i u cipu i u formi. Ono sto oko vidi kao "nije na
   sredini" je LINIJA: `border-left` na `.e-ddl-icon` visok je 30px unutar cipa od 34px, pa lebdi -
   ne dodiruje ni gornju ni donju ivicu. N479 je tu liniju sklonio SAMO unutar `.erp-forma-red`;
   cipovi nisu u formi, pa je kod njih prezivela. Sad se sklanja i ovde.
   ☠️ "Ikonica nije u istoj visini kao 2026." nije bila greska polozaja nego VELICINE: glif iz
   bootstrap-icons popunjava ceo em, pa je na 13.2px crtao 13px mastila, dok cifre na istom mestu
   crtaju 10px. Ikonica je zato virila 2px iznad teksta i 1px ispod - nesimetricno, i oko to cita
   kao "visa je". Spusteno na 11px mastila i poravnato po sredini mastila, pa sad viri tacno 1px
   gore i 1px dole. `padding-top: 2px` je tu da pomeri mastilo za pola piksela BEZ `transform`-a -
   pomak preko `transform`-a na 0.5px bi razmazao glif jer ne pada na celu tacku ekrana.
   ⚠️ Uz to, ispravka N486: tamo je zapisano da je font cipa 13.2px, a u pregledacu je merio 14px.
   Pravilo `.erp-chip input.e-input` gubi od Syncfusion-ovog `.e-input-group input.e-input
   { font-size: inherit }` (ista tezina selektora, njihov list se ucitava kasnije), pa je polje
   nasledjivalo 14px sa omotaca. Velicina se zato zadaje OMOTACU, ciji je selektor teziji - bez
   `!important`. Posle toga mastilo teksta je 9px, a centri mastila ikonice i teksta su isti: 25.59.
   ⚠️ Ovo vazi za oba cipa - i firmu (zgradica) i godinu (kalendar), kako je vlasnik trazio. */
.erp-chip .e-ddl-icon,
.erp-chip .e-input-group-icon {
    border-left: 0 !important;
}

.erp-chip .e-input-group,
.erp-chip .e-control-wrapper {
    font-size: 13.2px;
}

.erp-chip i.bi {
    box-sizing: content-box;
    font-size: 11px;
    line-height: 1;
    padding-top: 2px;
}

/* ===== N488: kolone spojene, sekcija ispod kartica poravnata (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "OVo je sad dobro ali spoj levo i desno kao i na osnovni podaci i mozes jos malo
   da podignes povezana ambalaza do porekla"
   ☠️ IZMERENO na tabu "Akcize i regulativa", pre popravke:
     leva kolona   288 - 1134  (846px)   kartica u njoj  288 - 948  (660px)
     desna kolona 1146 - 1992  (846px)   kartica u njoj 1146 - 1806 (660px)
   Izmedju leve kartice (kraj 948) i desne (pocetak 1146) zjapilo je 198px.
   ☠️ Uzrok: N484 je resetku zamenio sa `display:flex` i dao kolonama `flex: 1 1 0`, pa je svaka
   kolona uzimala POLA raspolozive sirine (846px), dok je kartica u njoj ostajala 660px
   (`.erp-forma-12 .erp-kartica`). Resetka na "Osnovnim podacima" ima `660px 660px`, pa tamo
   praznine nema. Kolona sad nosi istu meru: `flex: 0 0 660px`. Posle toga: leva 288-948,
   desna 960-1620, razmak tacno 12px - kao na "Osnovnim podacima".
   ☠️ Grid "Povezana ambalaza" ispod: imao je `p-3 mt-2` PREKO `p-3` reda iznad, pa je naslov
   pocinjao na 534 iako se poslednja kartica zavrsavala na 494 - 40px praznine. Bez duplog
   razmaka naslov je na 510, tj. 16px ispod kartica. Sirina sekcije je uz to vezana za kartice
   (2 x 660 + 12 = 1332px), da grid ne bude siri od forme iznad njega.
   ⚠️ Prelom: resetka se lomi na jednu kolonu ispod 1400px (`.erp-forma-12 .erp-kartice-red`),
   a to pravilo gadja `grid-template-columns` koji pod `display:flex` ne radi nista - zato flex
   varijanta ima svoj prelom, na istih 1400px, da se dva rasporeda ne razilaze. */
@media (max-width: 1400px) {
    .erp-kartice-red.erp-kartice-kolone {
        flex-direction: column;
    }

    .erp-kartice-kolone > .erp-kartica-kolona {
        flex: 0 0 auto;
    }
}

.erp-sekcija-ispod-kartica {
    /* ☠️ N508 (vlasnik, 24.09.2026): „Prosiri ti do kraja ovaj grid Povezana ambalaza jer su svi
       ostali tabovi koji imaju samo grid preko cele sirine strane, jeste da ce da bude malo ruznije
       ali pratimo uniformisanje."
       Do sada je ovde stajalo `max-width: 1332px` (N488), da se grid poravna sa dve kartice iznad
       njega. Vlasnik je odlucio drugacije: merilo nije ova strana nego CEO ERP - svaki drugi tab
       koji nosi samo grid ide preko cele sirine, pa i ovaj. Kapa je skinuta; `padding-left: 0` iz
       N495 OSTAJE, jer se leva ivica i dalje poravnava sa karticama. */
    padding-top: 0 !important;
    margin-top: 0 !important;
    /* ☠️ N495 (vlasnik: "Treba da se pomeri i povezana ambalaza malo levo da bude u ravni levo").
       IZMERENO: kartice pocinju na 288, a naslov sekcije na 304 - tacno 16px razlike, koliko `p-3`
       daje sleva. N445 je istu stvar vec resio za red sa karticama (`padding-left: 0`), ali nova
       sekcija iz N488 to nije nasledila jer je zasebno pravilo. Sad su poravnate po levoj ivici. */
    padding-left: 0 !important;
}

/* ===== N491: druga propisana sirina natpisa, za karticu sa dugackim natpisom (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "a u isporuka i magacin je ok samo zadnji naziv polja stavi u jedan red
   'Prosecno vreme isporuke (dana)'"
   ☠️ IZMERENO na 13px/600: taj natpis trazi 189.5px teksta + 24px uvlacenja = 213.5px, a kolona
   natpisa je po pravilu 12 siroka 170px - zato se lomio u dva reda (visina natpisa 34px, red 44px).
   ☠️ Isti popis svih natpisa u formi pokazuje da je to JEDINI koji ne staje: sledeci po duzini je
   "Podrazumevani magacin" 144.1px, pa "Podleze uredbi o marzi" 141.6px - oba lepo staju u 146px
   slobodnog prostora. Zato se ne siri ceo ERP zbog jednog polja.
   ☠️ Resenje prati obrazac koji pravilo 12 vec ima za kontrolu (dve sirine: 260 i 420): natpis
   dobija drugu propisanu sirinu, 220px, i zadaje se na KARTICI - tako svi natpisi u toj kartici
   ostaju medjusobno poravnati, sto je ono sto oko zaista cita.
   ⚠️ Uz sirinu ide i pomeranje reda za poruku o gresci ispod polja (`> .mt-1`), inace bi poruka
   ostala uvucena po staroj meri od 170px. */
.erp-forma-12 .erp-kartica-natpis-dug .erp-forma-red label.form-label {
    width: 220px !important;
    min-width: 220px !important;
}

.erp-forma-12 .erp-kartica-natpis-dug .erp-input-wrapper > .mt-1 {
    margin-left: calc(220px + 1rem) !important;
}

/* ===== N492: plavo polje paginacije ide do vrha celije (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "Dole kod paginacije plavo ne ide do vrha polja i ima mali beli prostor."
   ☠️ IZMERENO na spisku artikala:
     `.e-pagercontainer`  866.35 - 890.75   (ram 1px sa svake strane, unutra 867.15 - 889.95)
     `.e-currentitem`     867.95 - 889.95   (visina 22px)
   Gore je ostajalo 0.8px bele (1px pre zumiranja), dole nista - odatle "mali beli prostor".
   ☠️ Uzrok nije boja nego RED: brojevi su `inline-block` u liniji teksta, pa im polozaj odredjuje
   OSNOVNA LINIJA, a ne visina celije - klasican razmak ispod `inline-block`-a, koji se ovde
   pojavio kao traka iznad plavog. Zato ni bojenje ni visina ne bi pomogli: trebalo je promeniti
   nacin slaganja.
   ☠️ Kontejner je zato `inline-flex` sa `align-items: stretch`, pa brojevi i strelice popune
   punu unutrasnju visinu. Posle popravke zazor je 0.00 i gore i dole, a sve strelice stoje na
   istoj visini kao brojevi (izmereno: sve 867.35 - 889.35).
   ⚠️ Vazi za SVE gridove u ERP-u - paginacija je ista komponenta svuda. */
/* ===== N536: birac broja redova je uzi, a broj u njemu centriran (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: „Da ide broj na sredinu i da se smanji po sirini polje, nema svrhe da bude
   ovoliko." U tom polju stoji najvise tri cifre (20 / 50 / 100), a Syncfusion mu daje punu sirinu
   padajuce liste - pa broj sedi levo, a desno zjapi prazno.
   ⚠️ Sirina ide na omotac (`.e-pagerdropdown`) i na samu kontrolu, jer Syncfusion postavlja
   svoju `width` inline na oba - zato `!important`; bez toga se uhvati samo jedno i polje ostane
   siroko (ista zamka kao N407 sa sirinama polja).
   ⚠️ `text-align` ide na `input`, ne na omotac: omotac je `span`, pa poravnanje na njemu ne
   pomera tekst u polju. */
/* ------------------------------------------------------------------------------------
   N543 (vlasnik): „Ovaj checkbox na vrhu treba da bude na sredini po visini."

   ⛔ Izmereno u pregledacu, ne procenjeno: celija zaglavlja je 42px, sam kvadratic
      (`.e-frame`) 14px, a stajao je 8px od vrha i 20px od dna. Uzrok nije razmak nego
      to sto je omotac kucice `display:block` sa `line-height:12px`, pa se kvadratic
      lepi uz vrh. Celije sa tekstom su uredno centrirane (13/16/13), zato je odudaralo.
   ℹ️ Dira se SAMO zaglavlje. U telu tabele je izmereno 9px iznad i 11px ispod - razlika
      od jednog piksela se ne vidi, a pravilo koje dira svaki red grida nije besplatno.
   ------------------------------------------------------------------------------------ */
.e-grid .e-gridheader .e-headerchkcelldiv {
    display: flex;
    align-items: center;
}

    .e-grid .e-gridheader .e-headerchkcelldiv .e-checkbox-wrapper {
        display: flex;
        align-items: center;
        line-height: normal;
    }

.e-pager .e-pagerdropdown,
.e-pager .e-pagerdropdown .e-input-group,
.e-pager .e-pagerdropdown .e-control-wrapper {
    width: 74px !important;
    min-width: 74px !important;
}

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

.e-pager .e-pagerconstant {
    margin-left: 6px;
}

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

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

    .e-pager .e-pagercontainer .e-numericitem,
    .e-pager .e-pagercontainer .e-first,
    .e-pager .e-pagercontainer .e-prev,
    .e-pager .e-pagercontainer .e-next,
    .e-pager .e-pagercontainer .e-last {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
    }

/* ===== N493: treca sirina reda - polje do kraja kartice (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "povecao bih polje gde pise proizvodjac, slobodno rasiri polje do kraja, znaci sa
   desne strane stoje ova tri dugmeta onda polje koliko moze siroko"
   ☠️ IZMERENO pre popravke, kartica "Proizvodjac" (288 - 948, unutra 289 - 947):
     natpis 289 - 459 | polje 475 - 735 (260px) | dugmad do 849 | NEISKORISCENO 849 - 947 (98px)
   Naziv komitenta je dugacak niz ("CARLSBERG SRBIJA D.O.O., CELAREVO"), pa se u 260px sekao
   iako je desno stajalo 98px prazno.
   ☠️ Pravilo 12 dosad je imalo dve sirine kontrole (260 / 420), obe ZAKUCANE. Ovo je treca, i
   ona nije broj nego PONASANJE: red se rasteze do kraja kartice, a dugmad ostaju uz desnu ivicu.
   Namenjena je poljima sa slobodnim tekstom neodredjene duzine (naziv firme, adresa) - ne treba
   je stavljati na sifre, datume i brojeve, jer bi tamo samo razvuklo prazno polje.
   ☠️ Desno je ostavljeno 12px, tacno koliko natpis ima uvlacenja levo, da dugmad ne nalegnu na
   ram kartice. IZMERENO posle: polje 475 - 821 (346px, 86px vise), dugmad 825 / 863 / 901 sa
   krajem na 935, ram kartice na 947.
   ⚠️ `.erp-forma-red` je `display: flex`, pa je `.erp-input-wrapper` unutar njega STAVKA i
   skuplja se na sadrzaj - zato mu se ovde izricito daje `flex: 1 1 auto`. Bez toga se red siri
   samo do sirine sadrzaja (izmereno: stao bi na 870 umesto na 947) i izgleda kao da pravilo
   ne radi. */
.erp-forma-red.erp-red-puno > .erp-input-wrapper {
    flex: 1 1 auto;
    width: 100%;
}

.erp-forma-12 .erp-forma-red.erp-red-puno .erp-input-wrapper > .d-flex > .flex-grow-1 {
    flex: 1 1 auto !important;
    width: auto !important;
}

.erp-forma-red.erp-red-puno .erp-birac-sa-alatkama {
    width: 100%;
    padding-right: 12px;
}

    .erp-forma-red.erp-red-puno .erp-birac-sa-alatkama > .flex-grow-1 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

/* ===== N499: ispravka N493 - dugacak naziv je izbacivao polje iz kartice (vlasnik, 24.09.2026) ===== */
/* ☠️ Vlasnik: "I sad sam proverio na random artiklu, ovo ne sme da nam se desava jer ni ja ne
   mogu da proverim sve i svaki artikal" (uz snimak artikla ART-000596, proizvodjac
   "PREDUZECE ZA SPOLJNU I UNUTRASNJU TRGOVINU ECOMEX DOO, BEOGRAD").
   ☠️ MOJA GRESKA u N493. IZMERENO sa tim nazivom, pre popravke:
     kartica         288 - 948
     polje           475 - 996   (izlazi 48px van kartice)
     kraj dugmadi          1110   (162px VAN kartice)
     tekst skracen?  NE - samo je gurao sve napolje
   ☠️ Uzrok je klasicna flex zamka: `flex: 1 1 auto` dozvoljava stiskanje, ali podrazumevani
   `min-width: auto` na flex stavki NE DA da se stavka stisne ispod PRIRODNE sirine svog sadrzaja.
   Zato `text-truncate` nije imao gde da preseca - kutija je rasla sa tekstom umesto da ga skrati.
   Lek je `min-width: 0` kroz ceo lanac stavki, do same kutije sa tekstom.
   ⚠️ Uz to: cim se stiskanje dozvoli, stisnu se i DUGMAD (izmereno: 34px -> 25px), jer su i
   ona flex stavke sa podrazumevanim `flex-shrink: 1`. Zato nose `flex: 0 0 auto` - stiska se samo
   polje, nikad alatke.
   ⚠️ POUKA (moja, i vredi je zapisati): meru sam proverio sa JEDNIM nazivom koji je slucajno
   stajao ("CARLSBERG SRBIJA D.O.O., CELAREVO", 346px). Sirina koja se rasteze mora da se proveri
   NAJDUZOM vrednoscu koja u bazi postoji, ne prvom koja se zatekne na ekranu. Posle popravke
   izmereno je oboje: i kratak i dugacak naziv daju ISTU geometriju - polje 475-821, dugmad 34px,
   kraj na 935, ram kartice na 948. */
.erp-forma-red.erp-red-puno .erp-input-wrapper > .d-flex > .flex-grow-1 {
    min-width: 0 !important;
}

.erp-forma-red.erp-red-puno .erp-birac-sa-alatkama {
    min-width: 0;
}

    .erp-forma-red.erp-red-puno .erp-birac-sa-alatkama > .btn {
        flex: 0 0 auto !important;
    }

    .erp-forma-red.erp-red-puno .erp-birac-sa-alatkama .erp-fokus > .d-flex {
        min-width: 0;
    }

/* ===== N595: Syncfusion kontrole pisu NASIM fontom (vlasnik) ===== */
/* ☠️ Vlasnik, slajder bankovnog racuna: "kao da mi nije isti font svuda a to moramo paziti,
   neozbiljno da bude veci manji font a isti slajder".
   ⛔ IZMERENO u pregledacu: natpisi (`label.form-label`) su Inter 13px/600, a natpis cekiranog polja
      je iste velicine i debljine, ali drugog PISMA - `system-ui` (na Windows-u Segoe UI). Isto je
      vazilo za SVE sto crta Syncfusion: tekst u poljima, kartice (tabovi), grid, dijalozi, spiskovi.
      Syncfusion tema (bootstrap5.3) donosi svoj niz fontova i ne gleda nas `--font`.
   📌 Zato se nas `--font` (Inter) namece Syncfusion-ovim kontrolama i tekstu u njima.
   ⚠️ Ikonice se NE diraju: Syncfusion ih crta pismom `e-icons` na `::before`, a pravila ispod
      gadjaju samo elemente. Izmereno posle izmene: 50 od 50 ikonica i dalje `e-icons`.
   ℹ️ Podebljana izabrana vrednost u padajucem polju NIJE ovo - to je vlasnikova proba N476. */
.e-control, .e-control-wrapper, .e-css,
input.e-control, input.e-input, textarea.e-input,
.e-input-group input, .e-input-group textarea, .e-float-input input,
.e-checkbox-wrapper .e-label, .e-radio-wrapper .e-label,
.e-tab .e-tab-header .e-tab-text, .e-tab .e-content,
.e-toolbar, .e-toolbar .e-tbar-btn-text,
.e-grid, .e-grid .e-rowcell, .e-grid .e-headercelldiv, .e-grid .e-headertext, .e-grid .e-groupdroparea,
.e-pager, .e-pager .e-pagecountmsg, .e-pager .e-numericitem, .e-pager .e-pagerdropdown,
.e-dialog, .e-dialog .e-dlg-header, .e-dialog .e-dlg-content,
.e-toast-container .e-toast .e-toast-title, .e-toast-container .e-toast .e-toast-content,
.e-popup .e-list-item, .e-popup .e-list-group-item, .e-dropdownbase .e-list-item, .e-dropdownbase .e-nodata,
.e-btn, .e-css.e-btn,
.e-chip-list .e-chip-text, .e-treeview .e-list-text,
.e-calendar, .e-calendar .e-day, .e-calendar .e-title,
.e-tooltip-wrap .e-tip-content,
.e-menu-wrapper .e-menu-item, .e-contextmenu-wrapper .e-menu-item,
.e-accordion .e-acrdn-header-content {
    font-family: var(--font) !important;
}

/* ==============================================================================
   FINANSIJE — nalog za knjiženje, redni unos po maketi FN2 „traka za pisanje" (D-172)
   Sto F - FIN UI, 27.09.2026. Stranica: Pages/Finansije/NalogUnos.razor.
   Zaglavlje je kartica po pravilu 12 (.erp-kartica/.erp-forma-red); pored nje kartica
   ravnoteže; ispod traka u kojoj se piše stavka (polja se pojavljuju po kontu), pa tabela.
   ===================================================================================== */
.fin-nalog-gore {
    display: grid;
    grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}
@media (max-width: 1100px) {
    .fin-nalog-gore { grid-template-columns: 1fr; }
}
.fin-vaga-kartica { max-width: none; }
.fin-vaga {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 10px;
}
.fin-vaga-k {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px 11px;
}
.fin-vaga-k small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.fin-vaga-k b {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.fin-vaga-razlika { border-color: color-mix(in srgb, var(--err) 40%, transparent); background: var(--err-soft); }
.fin-vaga-razlika b { color: var(--err); }
.fin-vaga-nula { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.fin-vaga-nula b { color: var(--ok); }
.fin-vaga-leg {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--muted);
}
.fin-traka {
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    padding: 10px 13px 12px;
    margin-bottom: 12px;
}
.fin-traka-naslov {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    margin-bottom: 8px;
}
.fin-traka-naslov > i { color: var(--primary); }
.fin-trazi {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--muted);
    font-size: 11px;
}
.fin-traka-polja {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}
.fin-pp { min-width: 0; }
.fin-pp-konto { width: 300px; }
.fin-pp-siroko { flex: 1 1 220px; }
.fin-pp-dugme { display: flex; gap: 6px; padding-bottom: 4px; }
.fin-pp .erp-input-wrapper { margin-bottom: 0 !important; }
.fin-traka-greska {
    margin-top: 8px;
    font-size: 12px;
    color: var(--err);
}
.fin-nalog-savet {
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
}

/* ---- FINANSIJE — kontni plan po maketi FK3 (kolone po nivou, neograničena dubina; D-175) ---- */
.fin-kp-traka {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fin-kp-skoci { width: 260px; }
.fin-kp-skoci .erp-input-wrapper,
.fin-kp-neaktivna .erp-input-wrapper { margin-bottom: 0 !important; }
.fin-kolone {
    display: flex;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 12px;
    scrollbar-width: thin;
}
.fin-kol {
    flex: 0 0 280px;
    min-height: 260px;
    max-height: 420px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}
.fin-kol:last-child { border-right: 0; }
.fin-kol-h {
    position: sticky;
    top: 0;
    display: flex;
    gap: 6px;
    padding: 7px 11px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
    z-index: 1;
}
.fin-kol-h-sf { margin-left: auto; font-family: ui-monospace, monospace; }
.fin-kol-st {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: 12.4px;
    cursor: pointer;
    white-space: nowrap;
}
.fin-kol-st:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.fin-kol-st.na-putu { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.fin-kol-st.izabrano { background: var(--primary); color: #fff; }
.fin-kol-st.izabrano .fin-kol-str,
.fin-kol-st.izabrano .text-muted { color: #fff !important; }
.fin-kol-st.neaktivno { opacity: .55; }
.fin-kol-sf { font-family: ui-monospace, monospace; font-weight: 700; min-width: 38px; }
.fin-kol-nz { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.fin-kol-str { color: var(--muted); font-size: 10px; }
.fin-kol-nova { color: var(--primary); font-weight: 600; }
.fin-kol-prazno { padding: 16px 11px; color: var(--muted); font-size: 12px; }
.fin-kartica-konta {
    display: grid;
    grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
@media (max-width: 1100px) {
    .fin-kartica-konta { grid-template-columns: 1fr; }
}
.fin-cinjenice > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--border);
}
.fin-kartica-dugmad { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.fin-savet { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ---- FINANSIJE — ishod instalacije/uvoza (IshodKontnogPlana) ---- */
.fin-ishod { margin-top: 14px; }
.fin-ishod-naslov { margin-bottom: 8px; }
.fin-ishod-brojevi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fin-ishod-brojevi > div { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.fin-ishod-brojevi small {
    display: block; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase;
}
.fin-ishod-brojevi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.fin-ishod-upozorenje { margin-top: 6px; font-size: 12px; color: var(--warn); }
.fin-ishod-razlike { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; max-height: 360px; overflow-y: auto; }
.fin-ishod-razlike-h {
    position: sticky; top: 0; padding: 6px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border);
}
.fin-ishod-red { display: flex; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.fin-ishod-red:last-child { border-bottom: 0; }
.fin-ishod-sf { font-family: ui-monospace, monospace; font-weight: 700; min-width: 60px; }
.fin-ishod-nz { flex: 1; min-width: 0; }
.fin-ishod-nz s { color: var(--muted); }
.fin-ishod-oz { font-size: 11px; font-weight: 700; white-space: nowrap; }
.fin-ishod-oz.novo { color: var(--ok); }
.fin-ishod-oz.izmena { color: var(--warn); }
.fin-ishod-oz.greska { color: var(--err); }
.fin-ishod-jos { padding: 6px 10px; font-size: 11px; color: var(--muted); }

/* ---- FINANSIJE — kontni okviri po maketi FO2 (pločice + računi po nivou + dokovan uvoz; D-175) ---- */
.fin-okviri {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: start;
}
.fin-okviri.dok-otvoren { grid-template-columns: 260px minmax(0, 1fr) 360px; }
@media (max-width: 1100px) {
    .fin-okviri, .fin-okviri.dok-otvoren { grid-template-columns: 1fr; }
}
.fin-plocica {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 9px;
    cursor: pointer;
}
.fin-plocica.izabrana { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.fin-plocica.neaktivna { opacity: .6; }
.fin-plocica-sf { font-family: ui-monospace, monospace; font-weight: 800; font-size: 14px; }
.fin-plocica-nz { font-size: 12px; margin: 3px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-plocica-br { display: flex; gap: 5px; flex-wrap: wrap; }
.fin-plocica-br span {
    font-size: 10.5px; border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; color: var(--muted);
}
.fin-plocica-nova { border-style: dashed; color: var(--muted); text-align: center; }
.fin-okviri-h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; min-width: 0; }
.fin-okviri-naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fin-okviri-filteri { display: flex; gap: 8px; margin-bottom: 8px; }
.fin-okviri-trazi { width: 260px; }
.fin-okviri-nivo { width: 170px; }
.fin-okviri-filteri .erp-input-wrapper { margin-bottom: 0 !important; }
.fin-okviri-prazno { padding: 24px; color: var(--muted); }
.fin-uvuceno { font-family: ui-monospace, monospace; font-weight: 700; }
.fin-nivo-2 { padding-left: 12px; }
.fin-nivo-3 { padding-left: 24px; }
.fin-nivo-4 { padding-left: 36px; }
.fin-nivo-5 { padding-left: 48px; }
.fin-nivo-6 { padding-left: 60px; }
.fin-nivo-naziv-1 { font-weight: 800; }
.fin-nivo-naziv-2 { font-weight: 700; }
.fin-dok { position: sticky; top: 12px; }
.fin-dok-rucka {
    width: 44px;
    min-height: 200px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    cursor: pointer;
}
.fin-dok-rucka span { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; }
.fin-dok-telo { max-width: none; }
.fin-dok-h { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.fin-dok-fajl { margin: 8px 0; }

/* ---- FINANSIJE — traka iznad liste (pregled naloga, šifarnici) ---- */
.fin-lista-traka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---- FINANSIJE — birač valute u traci naloga (samo oznaka, npr. EUR) ---- */
.fin-pp-valuta { width: 150px; }

/* ---- FINANSIJE — izveštaji glavne knjige (dnevnik, bruto bilans, kartica konta, period) ---- */
.fin-filter-traka { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fin-filter-traka .erp-input-wrapper { margin-bottom: 0 !important; }
.fin-filter-siroko { min-width: 320px; }
.fin-filter-zbir { font-size: 12px; color: var(--muted); }
.fin-filter-zbir b { color: var(--text); font-variant-numeric: tabular-nums; }
.fin-ok { color: var(--ok) !important; font-weight: 600; }
.fin-greska { color: var(--err) !important; font-weight: 600; }
.fin-bilans-noga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(8, 125px);
    gap: 0;
    padding: 8px 10px;
    margin-top: -1px;
    border: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    background: var(--surface);
    font-size: 12.8px;
}
.fin-bilans-noga b { text-align: right; font-variant-numeric: tabular-nums; padding-right: 8px; }

/* ---- FINANSIJE — zaključenje perioda ---- */
.fin-period { display: grid; grid-template-columns: 260px minmax(0, 660px); gap: 14px; align-items: start; }
@media (max-width: 900px) { .fin-period { grid-template-columns: 1fr; } }
.fin-blokada { border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.fin-blokada p { color: var(--err); font-size: 12.5px; white-space: pre-line; }
.fin-otisak { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.fin-otisak span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- FINANSIJE — saldakonti (kartica komitenta, otvoreno, starost, IOS, avansi, kompenzacije) ---- */
.fin-filter-konto { width: 300px; }
.fin-saldo-traka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.fin-saldo-traka-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fin-saldo-traka > div { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; }
.fin-saldo-traka small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.fin-saldo-traka b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fin-saldo-lose b { color: var(--err); }
.fin-veza { color: var(--primary); cursor: pointer; }
.fin-veza:hover { text-decoration: underline; }
.fin-ios { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .fin-ios { grid-template-columns: 1fr; } }
.fin-ios-stavke { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
.fin-ios-stavke th { text-align: left; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.fin-ios-stavke td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.fin-ios-stavke .num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-ios-slanje { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed var(--border); font-size: 12.5px; cursor: pointer; }
.fin-ios-slanje span:first-of-type { flex: 1; color: var(--muted); }
.fin-ios-slanje.izabrano { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.fin-ios-odgovor { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.fin-komp-stavke { max-width: none; margin-bottom: 12px; }

/* ---- Šifarnik sa dokovanim uvozom (zaposleni, DF-002 — isti obrazac panela kao FO2) ---- */
.fin-sifarnik-dok { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: start; }
.fin-sifarnik-dok.dok-otvoren { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 1100px) { .fin-sifarnik-dok, .fin-sifarnik-dok.dok-otvoren { grid-template-columns: 1fr; } }
.fin-sifarnik-grid { min-width: 0; }
.fin-kolone-uvoza { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.fin-kolone-uvoza small { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-right: 4px; }

/* ---- FINANSIJE — novčani tok (jednostavan grafik završnog stanja) ---- */
.fin-tok-grafik { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 8px 10px 0; margin-bottom: 10px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.fin-tok-stub { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.fin-tok-traka { width: 100%; background: var(--primary); opacity: .75; border-radius: 3px 3px 0 0; }
.fin-tok-traka.minus { background: var(--err); }

/* ---- FINANSIJE — izvodi (FI2 + sve stavke, DF-005) ---- */
.fin-izvod-uvoz { width: 320px; }
.fin-izvorno { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.fin-izvorno b { color: var(--text); }
.fin-pp-cek { padding-bottom: 6px; }
.fin-izvod-fakture { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.fin-izvod-faktura { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border: 1px solid var(--border-strong);
    border-radius: 8px; background: var(--surface); font-size: 12px; }
.fin-izvod-faktura .erp-input-wrapper { margin-bottom: 0 !important; }

/* ---- FINANSIJE — kartica konta (KK4, DF-003): zaključeni deo i dokovan pregled konta ---- */
.fin-filter-oj { width: 240px; }
.fin-zakljucano { color: var(--muted); }
.fin-zakljucano .bi { font-size: 10px; margin-right: 3px; }
.fin-dok-podnaslov { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }
.fin-tok-mali { height: 80px; }
.fin-saldo-kraj { border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important; }

/* ---- FINANSIJE — kartica komitenta (KK6): stanje stavke ---- */
.fin-stanje { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--surface-2, var(--surface)); color: var(--muted); }
.fin-stanje.otvoreno { color: var(--err); background: var(--err-soft); }
.fin-stanje.delimicno { color: var(--warn, #b7791f); background: color-mix(in srgb, var(--warn, #b7791f) 14%, transparent); }

/* ---- FINANSIJE — zatvaranje po komitentu (FZ4, DF-004) ---- */
.fin-nacini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fin-nacini-naslov { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.fin-nacin { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--border-strong);
    border-radius: 16px; background: var(--surface); font-size: 12px; color: var(--muted); }
.fin-nacin > b { font-size: 11px; }
.fin-nacin.ukljucen { border-color: var(--primary); color: var(--text); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.fin-nacin .erp-input-wrapper { margin-bottom: 0 !important; }
.fin-zatv-dve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .fin-zatv-dve { grid-template-columns: 1fr; } }
.fin-zatv-dve .erp-input-wrapper { margin-bottom: 0 !important; }
.fin-par-traka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); position: sticky; bottom: 0; z-index: 2; }
.fin-par-deo { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fin-par-cip { padding: 2px 9px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 12px; font-variant-numeric: tabular-nums; }
.fin-par-cip small { color: var(--muted); }
=======
/* M-N621 (vlasnik: "i sta je ovo?" - "Ukupno bez PDV: 2110" levo od strana, i kad filtera vise nema): Syncfusion
   ispisuje poslednji filter reda u poruku pored strana, a zapamceno stanje grida je tu poruku vracalo i posle
   skinutog filtera. Aktivni filteri se vide u cipovima iznad grida - poruka se ne prikazuje nigde. */
.e-gridpager .e-pagerexternalmsg {
    display: none !important;
}

/* M-N626 (maketa MG10, varijanta B): filteri spiska u traci iznad tabele - ErpFilterTraka. */
.erp-filter-traka {
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

    .erp-filter-traka .eft-zag {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        padding: 4px 8px 4px 6px;
        border-radius: 12px;
        cursor: pointer;
        user-select: none;
    }

        .erp-filter-traka .eft-zag:hover {
            background: color-mix(in srgb, var(--primary) 3%, var(--surface));
        }

        .erp-filter-traka .eft-zag:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: -2px;
        }

    .erp-filter-traka .eft-naslov {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
        padding: 4px 6px;
        color: var(--text);
        font-size: 13.5px;
    }

        .erp-filter-traka .eft-naslov > i {
            color: var(--primary);
        }

    .erp-filter-traka .eft-broj {
        padding: 0 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        color: color-mix(in srgb, var(--primary) 80%, var(--text));
        font-size: 11px;
        font-weight: 700;
    }

    .erp-filter-traka .eft-aktivni {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        min-width: 0;
    }

        .erp-filter-traka .eft-aktivni span {
            padding: 1px 9px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--muted);
            font-size: 11.5px;
            white-space: nowrap;
        }

    .erp-filter-traka .eft-desno {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    .erp-filter-traka .eft-strelica {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--muted);
    }

        .erp-filter-traka .eft-strelica i {
            display: inline-block;
            transition: transform .2s ease;
        }

    .erp-filter-traka.skupljena .eft-strelica i {
        transform: rotate(180deg);
    }

    /* Vlasnik: "da se izravnaju po visini i ovi buttons" - polja se ravnaju po VRHU (natpisi u istoj liniji,
       svi natpisi su iste visine), a sve kontrole su iste visine, 32px. */
    .erp-filter-traka .eft-telo {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 16px;
        padding: 10px 12px 12px;
        border-top: 1px solid var(--border);
    }

        /* Polja u traci nemaju validaciju, a kontrole cuvaju red od 20px za poruku o gresci ispod sebe. */
        .erp-filter-traka .eft-telo .mt-1 {
            min-height: 0 !important;
            margin-top: 0 !important;
        }

        .erp-filter-traka .eft-telo .erp-date-wrapper,
        .erp-filter-traka .eft-telo .erp-date-wrapper .erp-date-input {
            height: 32px !important;
        }

        /* Dugmad biraca (spisak sifarnika) imaju ugradjenih 34px - u traci su iste visine kao polje. */
        .erp-filter-traka .eft-telo .btn {
            width: 32px !important;
            height: 32px !important;
            /* Izmereno: polje i dugme su ISTE visine i istog vrha, ali dugme je imalo tamnu ivicu (#6c757d) i senku
               od 2px nadole, pa je izgledalo nize i krupnije od polja. U traci nosi istu ivicu i ugao kao polje. */
            border-color: var(--border) !important;
            border-radius: 7px !important;
            background: var(--surface) !important;
            box-shadow: none !important;
            color: var(--muted) !important;
        }

            .erp-filter-traka .eft-telo .btn:hover {
                border-color: var(--primary) !important;
                color: var(--primary) !important;
            }

/* M-N669 (vlasnik: „da uniformišemo i filter traku kao na kalkulacijama"): izgled polja u traci filtera je
   ZAJEDNIČKI - do sada je stajao samo u DokumentiLista.razor.css, pa bi svaki drugi spisak imao svoj.
   Grupa = natpis iznad + čipovi; par = dva polja u istom redu (period od-do). */
.erp-filter-traka .eft-telo .f-grupa {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .erp-filter-traka .eft-telo .f-grupa > label {
        font-size: 14px;
        line-height: 21px;
    }

    .erp-filter-traka .eft-telo .f-grupa > .cipovi {
        margin-top: 3px;
    }

.erp-filter-traka .eft-telo .cipovi {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.erp-filter-traka .eft-telo .cip {
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 3px 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.6;
}

    .erp-filter-traka .eft-telo .cip.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));
    }

.erp-filter-traka .eft-telo .f-par {
    display: flex;
    gap: 8px;
}

/* Radnje u zaglavlju trake (M-N669) - u visini zaglavlja, bez sopstvenog razmaka. M-N672: stoje uz strelicu na
   stalnom mestu; kad se levo od njih pojavi ,Ocisti filtere", odvaja ih tanka crta. */
.erp-filter-traka .eft-akcije {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .erp-filter-traka .eft-akcije.sa-crtom {
        margin-left: 6px;
        padding-left: 10px;
        border-left: 1px solid var(--border);
    }

/* M-N671 (vlasnik: ,Jel si ispostovao razmak od tabova do filtera kao sto smo napisali u pravilu?"): pravilo 12
   tacka 2a / N382 - 10px iznad prvog reda stranice. Stranica bez korena `.container-fluid.mt-3` (npr. SEO spisak)
   ciji je prvi red traka stranice ili traka filtera dobija 2px na 8px rasporeda = 10px. */
article.erp-page-content > :is(.erp-traka-stranice, .erp-filter-traka):first-child,
article.erp-page-content > .erp-ziva-kartica > :is(.erp-traka-stranice, .erp-filter-traka):first-child {
    margin-top: 2px;
}

/* ===== M-N631: natpis iznad spiska birača (vlasnik: „kako će operater da zna da treba da kuca?") ===== */
/* Birač kaže ŠTA nudi pre kucanja („Nedavno korišćeni – kucaj za ostale"). Kad natpisa nema, birač crta samo
   oznaku `erp-combo-bez-naslova`, pa se Syncfusion-ov okvir zaglavlja gasi - inače bi stajala prazna traka. */
.e-ddl-header:has(.erp-combo-bez-naslova) {
    display: none;
}

.erp-combo-naslov {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

    .erp-combo-naslov i {
        color: var(--info, var(--primary));
    }

/* ===== M-N632: datum u redu po pravilu 12 (vlasnik: „polja od datuma" – maketa ND1) ===== */
/* MojDatePicker ne pravi `.flex-grow-1` kolonu kao ostale kontrole, pa ga pravilo širine (tačka 5,
   `.erp-input-wrapper > .d-flex > .flex-grow-1`) ne hvata – ostajao je globalno uzak (app.css, pravljen za
   trake filtera i grid). U redu forme datum je polje kao i svako drugo: 260px i 34px visine (tačka 4). */
/* M-N633 (vlasnik 28.09.2026: „sva datumska polja suziti jer nema svrhe da budu ovoliko", pa „stavi ga da bude
   širine kao polje Rok plaćanja"): datum je širine USKOG polja, 120px (pravilo 12 tačka 5a). Izmereno na
   13.2px: „28.09.2026" 72px, bledi „dd.mm.gggg" 79px - staje uz ikonicu od 24px i 2px desnog uvlačenja
   (ostaje 84px za tekst). Sa ikonicom od 28px i 8px uvlačenja bledi tekst se sekao na „dd.mm.gg…". */
.erp-forma-12 .erp-forma-red .erp-date-wrapper {
    width: 120px !important;
    height: 34px !important;
    border-radius: 7px;
}

    .erp-forma-12 .erp-forma-red .erp-date-wrapper .erp-date-input {
        width: 0 !important;
        flex: 1 1 0 !important;
        min-width: 0;
        height: 32px !important;
        font-size: 13.2px;
        padding-right: 2px !important;
    }

    /* Izmereno (M-N632): app.css drži ikonicu kalendara na 3px (`.erp-date-wrapper .e-input-group-icon`), a
       sam znak (14px) se crta preko - u uskom polju to prolazi jer unos ne ispuni omotač. Kad unos uzme ceo
       ostatak, znak pada preko desne ivice polja. Ovde ikonica dobija svojih 28px, unos uzima ostatak. */
    .erp-forma-12 .erp-forma-red .erp-date-wrapper .erp-date-cal-icon {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        display: grid !important;
        place-items: center;
    }

/* ===== M-N637: obavezno prazno polje zadržava Enter - kratko se zatrese (pravilo 12 t.11) ===== */
@keyframes erp-trese {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

.erp-trese {
    animation: erp-trese .4s ease-in-out;
}

/* ===== M-N639: traka radnji (plavo dugme gore desno) - JEDNAK razmak iznad i ispod, 10px (vlasnik 28.09.2026) ===== */
/* Vlasnik: „stavi kao pravilo da iznad plavog dugmeta i ispod bude jednak razmak, ne mogu da pazim na svakoj
   stranici". Iznad je 10px zajednički (raspored stranice, N382: 8px + 2px). Ispod je propisana klasa
   `erp-traka-stranice` (10px), ali su mnoge liste traku pisale sa Bootstrap `mb-3` (16px). Zato se, kao i kod
   N382, pravilo primenjuje na SEMU, ne ekran po ekran: prvi red stranice koji je traka (`d-flex` + `mb-3`) dobija
   10px ispod. Nov ekran koristi `erp-traka-stranice` (pravilo 12 tačka 2a). */
article.erp-page-content > .container-fluid > .d-flex.mb-3:first-child,
article.erp-page-content > .erp-ziva-kartica > .container-fluid > .d-flex.mb-3:first-child {   /* D-178 */
    margin-bottom: 10px !important;
}

/* M-N639 dopuna - ista mera i na formama (artikal, komitent): IZMERENO 12px iznad i 6px ispod trake sa
   Odustani/Sačuvaj (koren `container-fluid p-3` dobija 8px od stranice + 4px od `erp-forma-12`, a traka je imala
   svojih 6px ispod). Pravilo 12 tačka 2a: 10/10 - forma koja na vrhu ima traku radnji dobija 2px (8 + 2 = 10),
   traka 10px ispod. Izmereno posle: 10.0 / 10.0. */
.erp-forma-12:has(> .erp-forma-traka) {
    padding-top: 2px !important;
}

.erp-forma-12 > .erp-forma-traka {
    padding-bottom: 0;
    margin-bottom: 10px;
}

/* M-N655 (vlasnik: „Tab prelazi i neće da nastavi izvan tog“, alternativna JM na artiklu): IZMERENO - lanac JESTE
   išao na kučicu (`MojCheckBox` = Syncfusion `SfCheckBox`), ali je njen input 1x1px i nevidljiv, a Syncfusion
   ne crta nikakav znak fokusa kad fokus stigne tastaturom - pa je izgledalo da je fokus stao. Sada kučica sa
   fokusom sa tastature dobija isti prsten kao ostala polja (2px, boja teme). Razmak u kučici i dalje menja čekiranje. */
.e-checkbox-wrapper:has(input:focus) .e-frame {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* D-178 (M-N656): živa radna kartica. Omot oko stranice ne sme da menja raspored - vidljiva kartica je
   `display: contents` (kao da omota nema), sakrivena je `hidden` (Bootstrap: display:none !important). */
/* M-N684: omotac zive kartice ima SVOJE ime - ,erp-kartica" je klasa odeljaka formi i `display: contents` ih je
   razmontirao (vlasnik 29.09: ,nije bio ovakav raspored, bila su dva odvojena prozora jedan levo drugi desno"). */
.erp-ziva-kartica:not([hidden]) {
    display: contents;
}

/* ------------------------------------------------------------------------------------
   EKRAN ZA UCITAVANJE - M-N691 (21.10.2026). Jedan izgled od starta programa do trenutka
   kad je spreman: staticki #app-loading-screen (App.razor, dok se WebAssembly spusta) i
   komponenta ErpEkranUcitavanja (Routes, Login, MainLayout) nose ISTU klasu, pa se prelaz
   ne vidi. Znak ,oblak" u verziji za temu (data-bs-theme se postavlja pre prvog crtanja).
   ------------------------------------------------------------------------------------ */
.erp-ucitavanje {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--bg, #f5f7fa);
}

.erp-ucitavanje-znak {
    height: 72px;
    width: auto;
}

    .erp-ucitavanje-znak.tamna {
        display: none;
    }

[data-bs-theme="dark"] .erp-ucitavanje-znak.tamna {
    display: block;
}

[data-bs-theme="dark"] .erp-ucitavanje-znak.svetla {
    display: none;
}

.erp-ucitavanje-krug {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(108, 112, 217, .22);
    border-top-color: #6c70d9;
    animation: erp-ucitavanje-vrti .8s linear infinite;
}

@keyframes erp-ucitavanje-vrti {
    to {
        transform: rotate(360deg);
    }
}

/* Samo kad sesija istekne (App.razor upisuje tekst); prazan se ne crta. */
.erp-ucitavanje-poruka {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--err, #d92d20);
}

    .erp-ucitavanje-poruka:empty {
        display: none;
    }

/* M-N691b: napomena posle 4 s cekanja (,Server se pokrece...") - nije greska, zato miran ton, ne crveno. */
.erp-ucitavanje-napomena {
    margin: 0;
    font-size: 13px;
    color: var(--muted, #667085);
    animation: erp-ucitavanje-pojava .4s ease-out;
}

    .erp-ucitavanje-napomena:empty {
        display: none;
    }

@keyframes erp-ucitavanje-pojava {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .erp-ucitavanje-krug {
        animation-duration: 2.4s;
    }
}

/* ------------------------------------------------------------------------------------
   KORISNICKI MENI - M-N693 (21.10.2026). Vlasnik: ,malo bih skupio ove stavke, cini mi
   se da je veliki padajuci meni". Uzi, sitnija slova, manji razmaci i ikonice.
   ------------------------------------------------------------------------------------ */
.erp-korisnicki-meni {
    min-width: 208px;
    padding: 5px 0;
    border-radius: 8px;
    font-size: .9rem;
}

    .erp-korisnicki-meni .dropdown-item {
        padding: 7px 16px;
        gap: 10px;
    }

        .erp-korisnicki-meni .dropdown-item > i {
            font-size: 1.05rem;
            width: 18px;
            text-align: center;
        }

    .erp-korisnicki-meni .dropdown-divider {
        margin: 4px 0 !important;
    }

/* ------------------------------------------------------------------------------------
   MOJ PROFIL / PROMENA LOZINKE - M-N693 (21.10.2026).
   ------------------------------------------------------------------------------------ */
.erp-profil {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.erp-profil-kartica {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e7ec);
    border-radius: 10px;
    padding: 18px 20px;
}

.erp-profil-uska {
    max-width: 440px;
}

.erp-profil-glava {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.erp-profil-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 1.2rem;
}

.erp-profil-ime {
    font-size: 1.1rem;
    font-weight: 600;
}

.erp-profil-sitno {
    color: var(--muted, #667085);
    font-size: .85rem;
}

.erp-profil-podaci {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 12px;
    margin: 0;
}

    .erp-profil-podaci dt {
        font-weight: 500;
        color: var(--muted, #667085);
    }

    .erp-profil-podaci dd {
        margin: 0;
        word-break: break-word;
    }

.erp-profil-napomena {
    margin: 12px 0 0;
}

.erp-profil-naslov {
    font-weight: 600;
    margin-bottom: 6px;
}

.erp-profil-red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--border, #e4e7ec);
}

    .erp-profil-naslov + .erp-profil-red {
        border-top: 0;
    }

.erp-profil-izbor {
    min-width: 160px;
}

@media (max-width: 576px) {
    .erp-profil-podaci {
        grid-template-columns: 1fr;
    }

    .erp-profil-red {
        flex-wrap: wrap;
    }
}

/* M-N693: sadrzaj desno UNUTAR polja (MojTextBox DodatakDesno) - npr. oko za lozinku. Centrira se po
   visini samog polja, ne od vrha bloka sa labelom (staro .erp-login-oko ima fiksni top za prijavu). */
.erp-polje-sa-dodatkom {
    position: relative;
}

    .erp-polje-sa-dodatkom .e-input-group input.e-input {
        padding-right: 38px;
    }

.erp-polje-dodatak {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
}

.erp-polje-oko {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted, #667085);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .erp-polje-oko:hover {
        color: var(--primary);
    }

/* M-004 (vlasnik 22.10.2026: „ne secam se da mi je ovoliko bio prozor sirok"): slajder je `fit-content` (N580 -
   sirok koliko najduze POLJE), a dugacak red pomoci uz logo ga je razvukao do kraja ekrana. Sadrzaj koji nije polje
   (ErpDynamicForm.DodatniSadrzaj) zato NE ucestvuje u sirini: width 0 + min-width 100% = uzme sirinu forme, a sam je
   ne siri. `.erp-firma-logo` je tu i da pravilo vazi i pre restarta (klasa omotaca je nova u razor-u). */
.erp-forma-dodatno,
.erp-firma-logo {
    width: 0;
    min-width: 100%;
}
/* M-004 (22.10.2026): blok „Logo" na formi firme (FirmaLogo.razor). Prikaz je belo polje i u tamnoj temi -
   logoi firmi su crtani za svetlu podlogu, a tako izgledaju i u mejlu kupcu. */
.erp-firma-logo-naslov {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.erp-firma-logo-blok {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    border: 1px dashed var(--border-strong, #d1d5db);
    border-radius: 8px;
    padding: 12px;
}

.erp-firma-logo-prikaz {
    width: 230px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

    .erp-firma-logo-prikaz img {
        max-width: 220px;
        max-height: 56px;
    }

.erp-firma-logo-prazno {
    font-size: .8rem;
    color: #98a2b3;
}

.erp-firma-logo-akcije {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 220px;
}

.erp-firma-logo-pomoc {
    font-size: .78rem;
    color: var(--muted);
}

/* M-004: „Postavi/Promeni logo" je <label> (otvara izbor fajla), a natpisi polja u formi imaju svoj sitniji font -
   izmereno 12px naspram 14px na dugmetu „Ukloni" pored njega. Vraca se font dugmeta. */
.erp-firma-logo-akcije label.btn {
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    text-transform: none;
    letter-spacing: normal;
}

/* M-N719 (27.10.2026): razlog otkazivanja / storna na Osnovnim podacima SEO dokumenta. Boje iz teme (pravilo 17 (obe teme)). */
.erp-razlog-zatvaranja {
    background: var(--err-soft);
    border-left: 3px solid var(--err);
    color: var(--text);
    font-size: 13px;
}

/* svetla tema: --err-soft (#fef3f2) je skoro bela - vlasnik: ,na svetloj temi je bas crvena pozadina bleda"). 12% kao cipovi - pravilo 17 tacka 5. */
html:not([data-bs-theme="dark"]) .erp-razlog-zatvaranja {
    background: color-mix(in srgb, var(--err) 12%, var(--surface));
}