/* ====================================================================================
   NIT Software Solutions © 2026 — Sva prava zadržana.
   Projekat:  NITErp
   Fajl:      NITErp.Client/wwwroot/css/erp-grid.css
   Modul:     UI / Grid
   Opis:      Izgled Syncfusion gridova po UI standardu (faza 3). Gustinu vozi korisnikov
              izbor iz panela personalizacije — tokeni --row-py/--cell-px/--grid-fs iz
              erp-tema.css (atribut data-erp-gustina na <html>). Promena deluje ODMAH,
              bez ponovnog iscrtavanja: menja se vrednost promenljive, ne komponenta.
              ⚠️ RowHeight na SfGrid namerno NIJE korišćen: fiksira visinu reda pa seče
              ćelije sa dva reda teksta — padding iz tokena isti posao radi bez sečenja.
   Nastalo:   20.08.2026, faza 3 UI standarda.
   ==================================================================================== */

/* ------------------------------------------------------------------------------------
   GUSTINA — redovi, zaglavlje kolona i filter red prate tokene.
   !important je nužan: Syncfusion tema piše padding direktno na iste selektore.
   Lokalni izuzeci (npr. .slajder-prava-pristupa u app.css) i dalje pobeđuju, jer se
   app.css učitava POSLE ovog fajla.
   ------------------------------------------------------------------------------------ */
.e-grid .e-rowcell,
.e-treegrid .e-rowcell {
    padding: var(--row-py) var(--cell-px) !important;
    font-size: var(--grid-fs) !important;
    line-height: 1.4 !important;
}

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

.e-grid .e-headercelldiv,
.e-treegrid .e-headercelldiv {
    font-size: var(--grid-fs) !important;
    /* ☠️ N375 (vlasnik, slika): dva duga naziva kolone ("Neto fakturna vrednost", "MP vrednost bez
       PDV") su se prelamala u TRI linije i vukla CEO red zaglavlja naniže — "jede ekran", i to zbog
       samo dve kolone od mnogo njih na istoj tabeli. Pravilo je OPŠTE (svaka duga kolona, svuda):
       zaglavlje sme da se prelama, ali NAJVIŠE u DVE linije — `max-height` je računat iz ISTE veličine
       fonta i razmaka koji tekst stvarno koristi, pa ne seče linije napola. Kolone koje stanu u jedan
       red ovim ničim ne gube — dobiju samo gornju granicu koju ionako ne dodiruju.
       ☠️ N375 dopuna (vlasnik: i posle skraćivanja se SEČE PO DNU): računato TAČNO na 2 linije
       (`1.25 × 2`) ostavlja NULA rezerve — slovni oblici sa spuštenim delom (č, ć, ž, descenderi) i
       zaokruživanje piksela u pregledaču traže malo viška, inače se donja linija seče baš na ivici.
       Dodatih `+2px` je i dalje DALEKO ispod visine treće linije (`1.25 × 3` = 50% veće od ove granice)
       — ne otvara vrata trećoj liniji, samo daje vazduha drugoj. */
    white-space: normal !important;
    line-height: 1.25 !important;
    max-height: calc(var(--grid-fs) * 1.25 * 2 + 2px) !important;
}

/* Red sa filterima ispod zaglavlja — zbijen, da ne troši visinu reda i po. */
/* M-N721 (vlasnik 28.10.2026: polje je uze nego naziv kolone - smanji da vidimo na sta lici): bocni razmak 4px
   umesto --cell-px (11px), pa polje ide skoro do ivica kolone. */
.e-grid .e-filterbarcell,
.e-treegrid .e-filterbarcell {
    padding: 2px 4px !important;
}

/* M-N686 (vlasnik: ,i ovo treba da se centrira po sirini", pa ,opet ne valja, sad otisla levo"): kucica izbora je
   22px, a celija je od razmaka (--cell-px, 11px sa obe strane) ostavljala 8px - kucica je ispadala levo iz zaglavlja,
   a u redu desno. Celije kolone izbora nemaju bocni razmak i kucicu drze na sredini. Izmereno u vlasnikovom Chrome-u. */
.e-grid .e-rowcell.e-gridchkbox,
.e-grid .e-headercell:has(.e-headerchkcelldiv) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

    .e-grid .e-headercell:has(.e-headerchkcelldiv) .e-headercell-container,
    .e-grid .e-headercell .e-headerchkcelldiv {
        width: 100%;
        justify-content: center;
    }

    /* Prazan natpis kucice nosi 8px levog razmaka - kucica je zbog njega stajala 4px levo od sredine. */
    .e-grid .e-gridchkbox .e-checkbox-wrapper .e-label,
    .e-grid .e-headerchkcelldiv .e-checkbox-wrapper .e-label {
        display: none !important;
    }

/* M-N685 (vlasnik uz sliku PIB-a: ,treba staviti i u filteru ako nije isti font"): polje u filter redu pise ISTIM
   slovima kao celija ispod njega - velicina iz --grid-fs i cifre iste sirine, pa se otkucano i vrednost u redu
   poklapaju znak po znak. */
.e-grid .e-filterbarcell input,
.e-grid .e-filterbarcell .e-input,
.e-treegrid .e-filterbarcell input {
    font-size: var(--grid-fs) !important;
    font-variant-numeric: tabular-nums;
}

/* M-N721 (vlasnik 28.10.2026, uz sliku polja ,Sve" u tamnoj temi: ,bas se slabo razlikuje na tamnoj temi ... da se
   jasnije vidi"): izmereno - ivica polja rgb(30,44,70) na celiji rgb(22,34,58), razlika skoro nula. Isti recept kao
   polja u formama (N482, erp-ljuska.css): boja ivice se MESA iz --text i --surface, pa se u tamnoj temi sama izvrne -
   nema posebnog pravila po temi. Vazi za filter red u SVIM gridovima (MojDataGrid i MojTreeGrid). Pravilo 17.
   Polje u fokusu (.e-input-focus) zadrzava Syncfusion-ovu boju fokusa - zato :not(). */
.e-grid .e-filterbarcell .e-input-group:not(.e-input-focus),
.e-treegrid .e-filterbarcell .e-input-group:not(.e-input-focus) {
    border-color: color-mix(in srgb, var(--text) 22%, var(--surface)) !important;
}

/* ☠️ N372 (vlasnik, kalkulacija): klizači na kalkulaciji (vodoravni na tabeli stavki, VERTIKALNI na
   celini stavki) su podrazumevani (široki, upadljivi) — „izbijaju oči" / „opet zapadaju u oči".
   Tanji su i tiši, iz promenljivih teme (nema nove boje), SAMO na kalkulaciji (`.st-telo`, ne
   globalno pravilo za sve gridove/omotače).
   ⚠️ Vodoravno pravilo je TRI PUTA promašilo cilj: prvo `.dok-telo` (pogrešan element — ne skroluje),
   pa `.dok-telo ::deep .e-content` i `.dok-telo .e-content` (izmereno UŽIVO, 18.09.2026: `.dok-telo`
   u tom trenutku NIJE bio u DOM-u — 0 elemenata; sklapanje zaglavlja dokumenta, `DokZatvoren`, ga
   uklanja iz DOM-a, ne samo sakriva). `.dok-telo` je zato NAPUŠTEN kao oslonac za ovo pravilo —
   `.st-telo` (potvrđeno u markupu, `DokumentUnos.razor`: direktno obavija `<MojDataGrid
   TValue="DokumentStavkaDto">`) NIKAD ne izlazi iz DOM-a dok je tabela stavki na ekranu, pa je
   pouzdaniji oslonac za OBA klizača (obe ose, kako nalog i traži — jedno pravilo, ne dva rešenja).
   Merljiva provera (F12 -> Elements -> Computed): `scrollbar-width: thin` na `.e-content` I na
   `.st-telo`. */
.st-telo,
.st-telo .e-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

    .st-telo::-webkit-scrollbar,
    .st-telo .e-content::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .st-telo::-webkit-scrollbar-track,
    .st-telo .e-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .st-telo::-webkit-scrollbar-thumb,
    .st-telo .e-content::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 4px;
    }

        .st-telo::-webkit-scrollbar-thumb:hover,
        .st-telo .e-content::-webkit-scrollbar-thumb:hover {
            background: var(--muted);
        }

/* ------------------------------------------------------------------------------------
   TELEFON — vertikalni (kartični) red (MojDataGrid postavlja RowRenderingMode=Vertical
   ispod 768px). Syncfusion tada naziv kolone upisuje u ćeliju kroz ::before
   (position:absolute, levo, širine 45%), a VREDNOST gura desno sa padding-left:55%
   (pravilo „…td[data-cell]" u bootstrap5.3 temi). Pravilo gustine iznad je taj padding
   gazilo svojim !important-om, pa su se naziv i vrednost ispisivali JEDNO PREKO DRUGOG
   — prijavljeno sa testiranja 21.08.2026.
   Ovde se leva rezerva vraća selektorom jačim od pravila gustine; gornji/donji padding
   i dalje vozi token gustine, pa personalizacija važi i na telefonu.
   ------------------------------------------------------------------------------------ */
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell],
.e-treegrid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell] {
    padding: var(--row-py) var(--cell-px) var(--row-py) 55% !important;
    position: relative;
}

/* ------------------------------------------------------------------------------------
   SAKRIVEN FILTER RED (21.08.2026) — čisto vizuelno: modul filtriranja u gridu OSTAJE
   uključen (AllowFiltering se više ne gasi sa redom), inače se zapamćeni filteri pri
   ulasku u aplikaciju uopšte ne primene na upit — čip kaže jedno, spisak drugo.
   ------------------------------------------------------------------------------------ */
.erp-grid-bez-filterreda .e-grid .e-filterbar {
    display: none;
}

/* ------------------------------------------------------------------------------------
   IMENOVANI POGLEDI — meni ispod ikonice obeleživača (21.08.2026).
   Otvaranje se vodi u C#-u, pa Bootstrap-ov popper ne pozicionira ništa: bez ovoga
   je meni iskakao van desne ivice ekrana (prijava sa testiranja 21.08). Sidri se uz
   DESNU ivicu dugmeta i raste ulevo; na uskim ekranima širinu ograničava viewport.
   ------------------------------------------------------------------------------------ */
.erp-pogledi {
    position: relative;
    display: inline-flex;
}

    .erp-pogledi .erp-pogledi-meni {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        left: auto;
        min-width: 270px;
        max-width: min(340px, calc(100vw - 24px));
    }

    /* Brojač sačuvanih pogleda u uglu ikonice — isti jezik kao bedževi obaveštenja. */
    .erp-pogledi .erp-pogledi-broj {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 15px;
        padding: 1px 4px;
        border-radius: 8px;
        background: var(--primary);
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 13px;
        text-align: center;
        pointer-events: none;
    }

/* ------------------------------------------------------------------------------------
   BROJEVI — cifre iste širine, da kolone iznosa stoje u ravnini (standard §5).
   Desno poravnanje i dalje određuje kolona (TextAlign), ovde samo oblik cifara.
   ------------------------------------------------------------------------------------ */
.e-grid .e-rowcell,
.e-treegrid .e-rowcell {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------------------
   ZAGLAVLJE GRIDA (varijanta A + statusni pogledi, 20.08.2026) — zamena za Syncfusion
   toolbar: naslov + broj levo, pogledi u sredini, alati kao ikonice, „Novo" naglašeno.
   ------------------------------------------------------------------------------------ */
.erp-grid-zaglavlje {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    flex-wrap: wrap;
}

.erp-grid-naslov {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

    .erp-grid-naslov b {
        font-size: 13.5px;
        white-space: nowrap;
    }

    .erp-grid-naslov small {
        color: var(--muted);
        font-size: 11.5px;
        white-space: nowrap;
    }

/* Statusni pogledi i pill prekidači (mockup v2 .pill): aktivan je PUN akcenat, da se
   ne utapa u grid. Iste klase (.erp-pil-grupa/.erp-pil) koriste i prekidači u
   FilterTraci — jedan izgled za sve prekidače. */
.erp-grid-pogledi,
.erp-pil-grupa {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

    /* M-N673 (vlasnik: ,Postavio bih i ova 4 dole filtera da budu kao i vrsta dokumenta - neznija plava i isprekidan
       okvir"): pogledi grida i pil prekidaci izgledaju kao cipovi u traci filtera - isprekidan okvir, a izabran je
       NEZNA plava (12% ispune, pun okvir), ne puna plava. Puna plava ostaje samo glavnoj radnji ekrana (N541). */
    .erp-grid-pogledi button,
    .erp-pil {
        border: 1px dashed var(--border-strong);
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 14px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: all .12s ease;
    }

        .erp-grid-pogledi button:hover,
        .erp-pil:hover {
            color: var(--primary);
            border-color: var(--primary);
        }

        .erp-grid-pogledi button.on,
        .erp-pil.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-grid-alati {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.erp-grid-trazi {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .erp-grid-trazi i {
        position: absolute;
        left: 8px;
        color: var(--muted);
        font-size: 12px;
        pointer-events: none;
    }

    .erp-grid-trazi input {
        height: calc(var(--ctrl-h) - 4px);
        border: 1px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: 12px;
        padding: 0 8px 0 26px;
        width: 170px;
        outline: none;
    }

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

/* Ikonica-dugme u zaglavlju grida. */
.erp-grid-ikb {
    width: calc(var(--ctrl-h) - 4px);
    height: calc(var(--ctrl-h) - 4px);
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

    .erp-grid-ikb:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

    .erp-grid-ikb.on {
        color: var(--primary);
        background: var(--primary-soft);
        border-color: transparent;
    }

/* Jedino naglašeno dugme. */
.erp-grid-novo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: calc(var(--ctrl-h) - 4px);
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .erp-grid-novo:hover {
        background: var(--primary-hover);
    }

/* Grid se vizuelno nastavlja na zaglavlje. */
.erp-grid-zaglavlje + .e-grid,
.erp-grid-filtri + .e-grid {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Traka filtera stranice — drugi red zaglavlja, isto mesto na svim listama. */
.erp-grid-filtri {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 1px dashed var(--border);
    border-bottom: 0;
}

    .erp-grid-filtri .form-label {
        margin-bottom: 2px;
    }

/* ------------------------------------------------------------------------------------
   AKCIJE REDA NA HOVER (varijanta C) — nevidljive dok se ne pređe mišem preko reda.
   ------------------------------------------------------------------------------------ */
/* M-N678 (vlasnik: ,ako pomerim skrol ... vidim samo olovcicu ali ne i kantu" / ,imacemo na dosta mesta"): kolona
   radnji reda (MojDataGrid, klasa `erp-kol-akcije`) je LEPLJIVA uz desnu ivicu.
   Kad tabela staje po sirini pravilo ne radi nista; kad ne staje, podaci se skroluju ispod nje. Jedna tabela - ne
   Syncfusion Freeze (dve tabele, sinhronizacija visine i prelaza misem). Pozadina je potrebna da se podaci ispod ne
   vide; izabran red i prelaz misem Syncfusion boji jacim pravilom, pa oni ostaju kako jesu. */
/* Filter red i red zbirova nemaju klasu kolone (Syncfusion je ne prenosi na njih) - kolona radnji je uvek POSLEDNJA
   (kolone stranice idu pre nje), pa se u gridu koji je ima lepi i poslednja celija tih redova. */
.e-grid .erp-kol-akcije,
.e-grid:has(.e-headercell.erp-kol-akcije) .e-filterbar .e-filterbarcell:last-child,
.e-grid:has(.e-headercell.erp-kol-akcije) .e-summaryrow .e-summarycell:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--surface);
}

    /* Vlasnik (uz sliku): ,trba samo i ovo naslov polje posiviti kao i ostalo zaglavlje" - ista promenljiva teme
       kojom Syncfusion boji zaglavlje (`.e-grid .e-headercell`), ne bela pozadina redova. */
    .e-grid .e-headercell.erp-kol-akcije {
        z-index: 3;
        background-color: var(--color-sf-content-bg-color-alt1);
    }

    /* Naslov kolone akcija (vlasnik: ,Radnje ce ih buniti, mozda bolje Akcije ... i neku ikonicu"). */
    .e-grid .erp-kol-akcije-naslov i {
        margin-right: 4px;
        color: var(--muted);
    }

/* M-N683 (vlasnik: ,kad sam suzio web prozor u artiklima mi je nestao naziv"): tabela zaglavlja i sadrzaja ima
   najmanju sirinu koju grid izracuna iz kolona (MojDataGrid, --erp-min-sirina) - uzi grid dobija skrol, a rastegljiva
   kolona (Naziv) zadrzi donju granicu. Syncfusion MinWidth to sam ne radi (izmereno: Naziv 0px na 760px). */
.erp-grid-min .e-gridheader .e-table,
.erp-grid-min .e-gridcontent .e-table {
    min-width: var(--erp-min-sirina);
}

.erp-red-akcije {
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .12s ease;
}

.e-grid .e-row:hover .erp-red-akcije {
    opacity: 1;
}

.erp-red-akcije button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

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

    .erp-red-akcije button.opasno:hover {
        color: var(--err);
        border-color: var(--err);
        background: var(--err-soft);
    }

/* ------------------------------------------------------------------------------------
   PILL BEDŽ SA TAČKOM (standard §5, mockup v2) — statusi i enumi u gridu.
   Boja iz tokena statusa, pa bedž prati temu i tamni režim; tačka je currentColor.
   Klasu bira ErpBedz.Klasa (Helpers) iz Bootstrap oznake sa DTO-a.
   ------------------------------------------------------------------------------------ */
.erp-bedz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: calc(var(--grid-fs) - 1px);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

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

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

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

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

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

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

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

/* Bedzevi stanja u zaglavlju detalja dokumenta (M-N709): malo veci od grida,
   oznaka ("Portal:", "Interno:") prigusena, stanje u boji. */
.erp-bedz.erp-bedz-zaglavlje {
    font-size: .8rem;
    padding: 3px 10px;
    /* svetla tema: meka pozadina je skoro bela, pa cip bez okvira nestaje - okvir u boji stanja (pravilo 17 (obe teme)) */
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

/* Svetla tema: meka pozadina (--*-soft) je skoro bela - cip u zaglavlju dobija malo jacu nijansu svoje boje.
   Tamna tema ostaje kakva je (vlasnik 27.10.2026: tamna ,skroz ok"). Pravilo 17 (obe teme). */
html:not([data-bs-theme="dark"]) .erp-bedz.erp-bedz-zaglavlje {
    background: color-mix(in srgb, currentColor 12%, var(--surface));
}

/* Sifra artikla u stavkama SEO dokumenta (vlasnik 28.10.2026: puna zelena znacka ,previse", treba ,malo uocljivije").
   Meki cip kao u zaglavlju, bez tacke (sifra nije stanje); boja nosi znacenje: zeleno = upareno sa nasim
   sifarnikom, sivo (neutral) = nije. Cifre iste sirine, pa se sifre poravnaju u koloni. Pravilo 17 (obe teme). */
.erp-bedz.erp-bedz-sifra {
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

    .erp-bedz.erp-bedz-sifra::before {
        display: none;
    }

    .erp-bedz.erp-bedz-sifra.erp-bedz-ok {
        border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    }

html:not([data-bs-theme="dark"]) .erp-bedz.erp-bedz-sifra.erp-bedz-ok {
    background: color-mix(in srgb, currentColor 12%, var(--surface));
}

.erp-bedz-oznaka {
    color: var(--muted);
    font-weight: 500;
    /* Vlasnik 28.10.2026: tooltip na cipu ,se samo pojavi i nestane" kad je mis na ,Interno:", a na ,Otkazan" stoji.
       Oznaka je poseban <span> u cipu, pa prelaz misa oznaka <-> cip pravi mouseout/mouseover i Syncfusion tooltip
       zatvara pa ponovo otvara. Bez pointer-events oznaka se ponasa kao obican tekst cipa - mis je uvek na cipu. */
    pointer-events: none;
}

/* ------------------------------------------------------------------------------------
   FILTER-ČIPOVI (standard §5, mockup v2) — aktivni filteri iznad grida, isprekidana
   ivica, X za uklanjanje. Crta ih MojDataGrid kad ima aktivnih filtera.
   ------------------------------------------------------------------------------------ */
.erp-filter-cipovi {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.erp-filter-cipovi-naslov {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: calc(var(--grid-fs) - .5px);
    font-weight: 600;
}

.erp-filter-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 2px 6px 2px 11px;
    font-size: calc(var(--grid-fs) - .5px);
    white-space: nowrap;
}

    .erp-filter-cip b {
        font-weight: 600;
        color: var(--muted);
    }

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

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

/* Dugme „Ukloni sve" — isti oblik, malo naglašenije. */
.erp-filter-cip-sve {
    cursor: pointer;
    color: var(--primary);
    border-style: dashed;
    padding: 2px 11px;
    font-weight: 600;
}

    .erp-filter-cip-sve:hover {
        border-color: var(--primary);
    }

/* ------------------------------------------------------------------------------------
   DOK-PANEL PREGLEDA (standard §5, mockup v2) — detalji izabranog reda desno od grida.
   Zatvoren zauzima 0 širine; otvoren klizi na 330px i gura grid, ne prekriva ga.
   ------------------------------------------------------------------------------------ */
.erp-dok-raspored {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

    .erp-dok-raspored .erp-dok-grid {
        flex: 1;
        min-width: 0;
    }

.erp-dok {
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    transition: width .18s ease, min-width .18s ease;
    border: 0 solid var(--border);
    border-radius: var(--radius);
    align-self: flex-start;
    max-height: 100%;
}

    .erp-dok.otvoren {
        width: 330px;
        min-width: 330px;
        margin-left: 10px;
        border-width: 1px;
        box-shadow: var(--shadow-sm);
    }

    /* Panel sa LEVE strane grida (maketa FT3, filteri spiska). Redosled u DOM-u odlucuje ko je levo;
       ovde se samo okrece razmak, da ne ostane praznina sa pogresne strane. */
    .erp-dok.levo.otvoren {
        margin-left: 0;
        margin-right: 10px;
    }

/* ---- Sklopljen panel koji ostaje uz ivicu kao uska traka (FT3, izbor vlasnika 06.09) ----
   Panel filtera nema okidac koji bi ga vratio (dok-panel pregleda ima izbor reda), pa zatvoren
   ne sme da nestane bez traga. */
.erp-dok.traka {
    width: 44px;
    min-width: 44px;
    overflow: visible;
    border-width: 1px;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    box-shadow: var(--shadow-sm);
}

    .erp-dok.traka.levo {
        margin-right: 10px;
    }

    .erp-dok.traka .tr-kv {
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: var(--primary-soft);
        color: var(--primary-soft-text);
        font-size: 13px;
        cursor: pointer;
    }

    .erp-dok.traka .tr-broj {
        font-size: 9.6px;
        font-weight: 800;
        background: var(--primary);
        color: var(--surface);
        border-radius: 999px;
        padding: 0 5px;
    }

    /* Uspravan natpis — traka je uska, a bez imena je samo ikonica koja nista ne obecava. */
    .erp-dok.traka .tr-natpis {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
    }

    .erp-dok .dok-h {
        padding: 11px 14px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .erp-dok .dok-h .ik {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 9px;
            background: var(--primary-soft);
            color: var(--primary-soft-text);
            display: grid;
            place-items: center;
            font-size: 14px;
        }

        .erp-dok .dok-h .dok-naslovi {
            min-width: 0;
        }

            .erp-dok .dok-h .dok-naslovi b {
                display: block;
                font-size: 13.5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .erp-dok .dok-h .dok-naslovi small {
                color: var(--muted);
                font-size: 11px;
            }

        .erp-dok .dok-h .alat {
            margin-left: auto;
            display: flex;
            gap: 5px;
        }

            .erp-dok .dok-h .alat button {
                border: 1px solid var(--border);
                background: var(--surface);
                color: var(--muted);
                width: 26px;
                height: 26px;
                border-radius: 7px;
                cursor: pointer;
                font-size: 11px;
                display: grid;
                place-items: center;
            }

                .erp-dok .dok-h .alat button.pin.on {
                    color: var(--primary);
                    border-color: var(--primary);
                    background: var(--primary-soft);
                }

    .erp-dok .dok-telo {
        flex: 1;
        overflow-y: auto;
        padding: 10px 14px;
    }

    .erp-dok .dok-foot {
        border-top: 1px solid var(--border);
        padding: 10px 14px;
        display: flex;
        gap: 8px;
    }

/* Red podatka u podrazumevanom sadržaju: labela levo, vrednost desno. */
.erp-dok .dok-red {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--grid-fs);
}

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

.erp-dok .dok-labela {
    color: var(--muted);
    font-size: calc(var(--grid-fs) - 1px);
    white-space: nowrap;
}

.erp-dok .dok-vrednost {
    text-align: right;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.erp-dok .dok-prazno {
    color: var(--muted);
    font-size: var(--grid-fs);
    margin: 8px 0;
}

/* Na telefonu panel ne staje pored tabele — mobilni pregled rešava faza sa karticama. */
@media (max-width: 767.98px) {
    .erp-dok.otvoren {
        display: none;
    }
}

/* ------------------------------------------------------------------------------------
   PAGINACIJA — visina
   ☠️ Vlasnik 10.09.2026: „jedina stvar koja mi bode oči je ova prevelika visina od
      MojDataGrida za paginaciju". Syncfusion podnožju daje visinu za dodir (48 px reda +
      dugmad 32 px + razmaci), a ceo ostatak grida vozi našu gustinu iz `--row-py`. Na
      ekranu dokumenta, koji je zakovan za visinu prozora, ta traka jede prostor tabeli —
      dakle ono jedino što tu sme da raste.
   ⚠️ Vrednosti su vezane za `--row-py`, a ne fiksne: gustina „kompaktno / udobno" iz
      panela personalizacije mora da vozi i paginaciju, inače se u udobnom režimu podnožje
      stisne uz redove koji su porasli.
   ⛔ `!important` je nužan iz istog razloga kao gore: Syncfusion tema piše iste selektore.
   ------------------------------------------------------------------------------------ */
/* ☠️ IZBOR BROJA REDOVA PO STRANI JE PADAO U DRUGI RED (vlasnik 10.09.2026: „štrči mi ovaj broj po
   stranici"). Syncfusion ga postavlja apsolutno, računajući na podnožje visoko za dodir; kad je
   podnožje snižено, za njega nije ostalo mesta pa je ispao ispod dugmadi i traka je opet bila u dva
   reda — dakle popravka koja vraća isti problem na druga vrata.
   ⚠️ Zato podnožje postaje običan REDNI raspored (flex): dugmad, izbor broja redova i natpis stoje u
      istoj liniji i sami se poravnaju, bez ijedne računate pozicije. */
.e-grid .e-gridpager {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: calc(var(--row-py) + 1px) 8px !important;
    min-height: 0 !important;
}

    .e-grid .e-gridpager .e-pagercontainer {
        margin: 0 !important;
        min-height: 0 !important;
    }

    /* Brojevi strana i strelice: kvadratić umesto dugmeta za dodir. */
    .e-grid .e-gridpager .e-numericitem,
    .e-grid .e-gridpager .e-icons {
        height: 22px !important;
        min-height: 22px !important;
        line-height: 22px !important;
        padding: 0 6px !important;
        font-size: calc(var(--grid-fs) - .5px) !important;
    }

    /* ☠️ N373 VRACENO (vlasnik: i dalje nije u vinklu). Prva popravka je gasila SAMO `border-left-width`
       — nedovoljno: tema (`bootstrap5.css`/`bootstrap5-dark.css`) tekućoj strani daje `.e-currentitem`
       pravilo koje postavlja `border` na SVE ČETIRI strane (`border: 3px solid ...`), ne samo levu.
       Gašenje jedne strane je ostavljalo kvadratić ASIMETRIČAN (0 levo, 3px gore/desno/dole) — otud
       "iskrivljeno". Izmereno u šablonu teme: obični brojevi/strelice nose SAMO `border-right: 1px`
       (nemaju levu/gornju/donju ivicu), a `.e-currentitem` dodaje sopstvenu punu 3px ivicu i DRUGAČIJI
       padding — oboje se ovde gasi na sve strane i vraća na ISTI oblik kao ostali kvadratići (samo
       desna 1px ivica, ista boja iz promenljive teme, bez nove boje). */
    .e-grid .e-gridpager .e-numericitem.e-currentitem,
    .e-grid .e-gridpager .e-currentitem {
        border: 0 !important;
        border-right: 1px solid var(--border-strong) !important;
    }

    /* ☠️ N373 dopuna (vlasnik): oblik je sad ispravan, ali pozadina tekuće strane (iz teme, siva
       `#e9ecef`/tamni ekvivalent) je premalo izražena da bi se na prvi pogled prepoznala. Umesto NOVE
       boje, koristi se POSTOJEĆI `--primary-rgb` (isti kao plavi tekst koji Syncfusion već crta na ovom
       broju) kao providan preliv preko pozadine — malo tamnije, prepoznatljivo bojom sistema, a ne
       samo nijansom sive; radi u obe teme jer se `--primary-rgb` menja sa temom. */
    .e-grid .e-gridpager .e-numericitem.e-currentitem,
    .e-grid .e-gridpager .e-currentitem {
        background-color: rgba(var(--primary-rgb), .16) !important;
    }

    /* „1 od 1 stranica (2 stavki)" i izbor veličine strane. */
    .e-grid .e-gridpager .e-parentmsgbar {
        padding: 0 !important;
        margin: 0 !important;
        font-size: calc(var(--grid-fs) - .5px) !important;
    }

    /* ⛔ `position: static` je ovde ključ: Syncfusion ga drži apsolutno pozicioniranim. */
    .e-grid .e-gridpager .e-pagerdropdown {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: 24px !important;
        margin: 0 4px !important;
        display: flex !important;
        align-items: center;
    }

    .e-grid .e-gridpager .e-pagesizes .e-input-group,
    .e-grid .e-gridpager .e-pagerdropdown .e-input-group {
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
    }

        .e-grid .e-gridpager .e-pagerdropdown .e-input-group input {
            height: 22px !important;
            line-height: 22px !important;
            font-size: calc(var(--grid-fs) - .5px) !important;
        }

    .e-grid .e-gridpager .e-pagerconstant {
        position: static !important;
        margin: 0 4px !important;
    }

/* ☠️ REDOSLED SE MORA ZADATI (vlasnik 10.09.2026: „sada štrči na desnoj strani"). U DOM-u izbor broja
   redova stoji POSLE natpisa, a natpis gura sve do desne ivice — pa je izbor završio zalepljen skroz
   desno, preko ivice. Dok je bio apsolutno pozicioniran to se nije videlo; čim je ušao u red, videlo
   se gde zaista stoji.
   ⚠️ `order` je jedini način da se to ispravi bez diranja Syncfusion markupa: dugmad, pa izbor broja
      redova uz njih (tu se i gleda), pa natpis koji jedini ide na desnu ivicu. */
.e-grid .e-gridpager .e-pagercontainer {
    order: 1;
    flex: none;
}

/* ☠️ PRAVI KRIVAC ZA VISINU (izmereno u pregledaču 10.09.2026, dok je vlasnik gledao): omotač
   `.e-pagesizes` je bio visok 45 px iako mu je sadržaj 24 px — Syncfusion mu zadaje visinu za dodir.
   Podnožje je zbog njega ostajalo 58 px ma koliko se stezalo sve ostalo, a i izbor je zbog te razlike
   plivao gore-dole. Sa ovim je podnožje 38 px.
   ⚠️ `order: 2` stoji OVDE, na omotaču — dete (`.e-pagerdropdown`) nije direktan potomak podnožja, pa
      njegov `order` ne znači ništa. To je i bio razlog zašto je izbor i dalje bežao na kraj reda. */
.e-grid .e-gridpager .e-pagesizes {
    order: 2;
    flex: none;
    display: flex !important;
    align-items: center;
    height: 24px !important;
    min-height: 0 !important;
}

.e-grid .e-gridpager .e-pagerdropdown {
    flex: none;
    align-self: center;
}

.e-grid .e-gridpager .e-pagerconstant {
    order: 3;
    flex: none;
    align-self: center;
}

    /* Natpis „1 od 1 stranica (2 stavki)" ide na desnu ivicu, kao i do sada. */
    .e-grid .e-gridpager .e-parentmsgbar {
        order: 4;
        flex: none;
        align-self: center;
        margin-left: auto !important;
    }

/* ------------------------------------------------------------------------------------
   FILTER LISTA U ZAGLAVLJU GRIDA (vlasnik 27.10.2026: da se vidi ceo naziv u padajucem meniju).
   Izuzetak od pravila 14 tacka 1 (lista siroka koliko i polje): filter u zaglavlju nije polje forme.
   Lista je siroka koliko trazi najduzi naziv, najmanje 160px, NAJVISE 200px; duzi naziv se skracuje sa
   tri tacke i ceo se vidi u tooltipu (title na stavci, MojDataGrid ItemTemplate). Syncfusion prenosi
   CssClass i na popup, pa se gadja .e-popup.erp-filter-lista; sirinu popup-a pise inline, otuda !important.
   Sve ispod vazi SAMO za taj popup - ostali padajuci meniji u ERP-u nemaju klasu erp-filter-lista.
   ------------------------------------------------------------------------------------ */
.e-popup.erp-filter-lista {
    width: auto !important;
    min-width: 160px;
    max-width: 200px;
}

/* Red "Stikliraj sve" i redovi stavki imaju ISTI raspored: kucica pa 8px pa tekst, od 12px od leve ivice.
   Syncfusion ih slaze razlicito (text-indent + margin + razmak izmedju elemenata), pa je "Stikliraj sve"
   bezalo par piksela udesno. Flex ne racuna razmake izmedju elemenata, pa su oba reda poravnata. */
    .e-popup.erp-filter-lista .e-selectall-parent,
    .e-popup.erp-filter-lista .e-list-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 12px;
        text-indent: 0;
    }

    .e-popup.erp-filter-lista .e-selectall-parent .e-checkbox-wrapper,
    .e-popup.erp-filter-lista .e-list-item .e-checkbox-wrapper {
        flex: none;
        margin: 0;
        bottom: 0;
    }

/* Skracivanje sa tri tacke radi SAM tekst (flex stavka sa min-width: 0). Napomena: dok je span bio
   inline-block u obicnom <li>, tri tacke na <li> su gutale ceo span i ostajalo je samo "..."
   (Fizicki prijem (Isporuceno), 27.10.2026). */
    .e-popup.erp-filter-lista .e-all-text,
    .e-popup.erp-filter-lista .erp-filter-stavka {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

/* Prazna kucica je u svetloj temi bila skoro nevidljiva (vlasnik 27.10.2026: "pojacati senku na checkbox").
   Isto kao kucice u formama (N482, erp-ljuska.css): ivica se mesa iz --text i --surface, pa se u tamnoj
   temi sama izvrne, i blaga senka. Stiklirana kucica zadrzava boju teme (:not(.e-check)). */
    .e-popup.erp-filter-lista .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
        border-color: color-mix(in srgb, var(--text) 30%, var(--surface));
    }

    .e-popup.erp-filter-lista .e-checkbox-wrapper .e-frame {
        box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    }