/*
 * DynaSoft tema — vizuelno usklađivanje Payroll modula sa glavnom ERP aplikacijom
 * (DynaSoftWebApp koristi Bootswatch "Cerulean": plavi navbar #2fa4e7, font Roboto Condensed).
 * Cilj: korisnik ne sme da oseti da je prešao u drugu aplikaciju.
 */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=cyrillic');

:root {
    --dy-blue: #2fa4e7;
    --dy-blue-hover: #178acc;
    --dy-blue-dark: #157ab5;
    --dy-head-blue: #1aa0d2;
    --dy-head-blue-dark: #004b87;
    --dy-head-blue-soft: #eef8fc;
    --dy-border: #1995dc;
    --dy-text: #555555;

    /* Bootstrap 5 promenljive — da i ugrađene komponente prate temu */
    --bs-primary: #2fa4e7;
    --bs-primary-rgb: 47, 164, 231;
    --bs-link-color: #2fa4e7;
    --bs-link-color-rgb: 47, 164, 231;
    --bs-link-hover-color: #157ab5;
    --bs-link-hover-color-rgb: 21, 122, 181;
    --bs-body-color: #555555;
    --bs-body-font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;

    /* „Legacy piksel" — mera zaglavlja koja prati izabranu velicinu prikaza.
       Zasto postoji: legacy WebERP skalira ceo interfejs `zoom`-om na `body` (ds-legacy-ui-scale.css),
       pa mu traka raste zajedno sa tekstom. Moderni moduli skaliraju samo `html` font-size, a traka je
       namerno u px (legacy mere iz Bootstrap-a 3) — zato je na svakoj velicini osim „Sitno" ostajala
       niza i sitnija od legacy trake, sto se najjace videlo na telefonu.
       Sve mere zaglavlja idu kroz `calc(N * var(--ds-px))`, gde je N legacy vrednost u pikselima.
       `--ds-ui-scale` dolazi iz `ds-ui-scale.css`, koji od sada nosi ISTU tabelu kao legacy; ako se
       taj fajl ne ucita, rezervna vrednost 1 daje neskaliranu legacy meru. */
    --ds-px: calc(var(--ds-ui-scale, 1) * 1px);
}

body {
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    color: var(--dy-text);
    background-color: #f7f9fb;
}

/* Naslovi po legacy meri (Bootstrap 3, procitano iz `bootstrap.css`): 36/30/24/18/14/12px, tezina
   500, `line-height: 1.2`. Bootstrap 5 ide na 2.5/2/1.75/1.5/1.25/1rem — sto je kod h4-h6 osetno
   krupnije, a h1-h3 jos i skalira po sirini ekrana (RFS), pa je isti tekst u modernom modulu
   izgledao veci nego u WebERP-u. Osnovni tekst je i pre bio 14px u obe aplikacije. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

/* ============================================================
   Skala teksta — imena umesto brojeva
   ============================================================

   Popis 17.08.2026: tema je imala 45 deklaracija veličine fonta i 17 različitih
   stvarnih veličina, od kojih devet stisnutih između 10 i 13 px (10; 10,5; 11; 11,2;
   11,9; 12; 12,25; 12,6; 13). Razlike od pola piksela koje se ne razaznaju, a svaka je
   nečija odluka koju posle treba pogađati — otud i po pola dana merenja oko jednog
   natpisa.

   Vrednosti su u „legacy px" jedinici (`--ds-px`), pa prate podešavanje veličine.
   Pri podrazumevanom „Normalno" množilac je 1,0, pa je broj ovde ujedno i broj na ekranu.
   Stepeni su isti oni koje Bootstrap 3 izvodi iz osnove 16 (`Content/bootstrap.less`),
   da se dve aplikacije ne bi razišle: h1 41, h2 34, h3 28, h4 20, `small` 14.

   PRAVILO: nova veličina se ne uvodi bez imena. Ako nešto ne staje ni u jedan stepen,
   ili stepen fali, ili odluka nije dobra.

   Stepeni koji još nisu svuda sprovedeni (opseg 10–13 se svodi na `xs`/`sm` u zasebnom
   koraku, jer to menja piksele i traži pregled) su ovde ipak definisani, da postoji
   jedno mesto na koje se pokazuje. */
:root {
    --ds-text-xs: calc(12 * var(--ds-px));    /* značke, meta podaci, nadnaslov */
    --ds-text-sm: calc(14 * var(--ds-px));    /* pomoćni tekst, opisi, paginacija */
    --ds-text-base: calc(16 * var(--ds-px));  /* osnovni tekst, kontrole, tabele */
    --ds-text-lg: calc(20 * var(--ds-px));    /* h4 */
    --ds-text-xl: calc(28 * var(--ds-px));    /* h3 */
    --ds-text-2xl: calc(34 * var(--ds-px));   /* h2 */
    --ds-text-3xl: calc(41 * var(--ds-px));   /* h1 */
}

h1, .h1 { font-size: var(--ds-text-3xl); }
h2, .h2 { font-size: var(--ds-text-2xl); }
h3, .h3 { font-size: var(--ds-text-xl); }
h4, .h4 { font-size: var(--ds-text-lg); }
h5, .h5 { font-size: var(--ds-text-base); }
h6, .h6 { font-size: var(--ds-text-sm); }

/* ============================================================
   ZAGLAVLJE STRANE — naslov, podatak uz naslov, radnje desno
   ============================================================

   Jedan obrazac za obe aplikacije (isti blok stoji u `DynaSoftWebApp/Content/Site.css`).
   Struktura je uvek ista:

     <div class="ds-page-head">
       <h1 class="ds-page-title" title="opis strane">Troškovi</h1>
       <span class="ds-page-meta">otvoreno <strong>104.041,70</strong> · 62 troška
         <span class="ds-meta-secondary">· jul 2026</span></span>
       <span class="ds-page-actions"> ...dugmad... </span>
     </div>

   `<h1>` je obavezan i nije stvar ukusa: naslov strane je njen glavni naslov, jedan po strani.
   Veličinu nosi KLASA, ne tag — bez toga bi 20 px značilo obarati globalni `h1`, pa naslov unutar
   kartice, koji legitimno treba da bude krupan, više nema šta da uzme.

   Opis strane ide u `title` atribut. Svesna cena: tooltip ne postoji na dodir i ne dobija se
   tastaturom. Gde opis stvarno objašnjava stranu onome ko je prvi put vidi, dodaje se vidljiv znak
   (`ds-page-hint`), inače ga niko neće naći.

   ------------------------------------------------------------
   Zašto CONTAINER upiti, a ne media upiti
   ------------------------------------------------------------
   Merodavna je širina koju zaglavlje STVARNO ima, ne širina prozora: `.container` je uži od
   prozora, a legacy uz to skalira `zoom`-om pa je raspoloživi prostor još manji.

   `em` u media upitu ovo NE rešava, iako `docs/ui/adaptive-design.md` dugo tvrdi da rešava.
   Provereno 17.08.2026. u pregledaču: uz `html { font-size: 32px }` upit `@media (min-width: 30em)`
   pogađa na 640 px, dakle računa POČETNIH 16 px, a ne root. Media upit ne vidi našu skalu.
   `rem` u container upitu je vidi, jer se računa prema root-u.

   Granice su izvedene iz širina `.container`-a, ne iz širina ekrana — zaglavlje nikad nije široko
   koliko i prozor:

     nivo   ekran        .container (BS5 / BS3)   granica ovde
     1      < 768        366-540 / 366-750        -
     2      768-991      720 / 750                37,5rem (600 px)
     3      992-1199     960 / 970                53rem   (848 px)
     4-5    >= 1200      1140-1320 / 1170         65rem   (1040 px)
*/
.ds-page-head {
    container-type: inline-size;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* `space-between` je za strane BEZ meta linije: tamo nema cemu da se da `flex: 1`, pa bi se
       radnje slepile uz naslov. Kad meta postoji, ona uzme visak i ovo ne radi nista. */
    justify-content: space-between;
    gap: calc(12 * var(--ds-px));
    margin-bottom: calc(14 * var(--ds-px));
}

.ds-page-title,
h1.ds-page-title {
    margin: 0;
    font-size: var(--ds-text-lg);
    font-weight: 700;
    line-height: 1.2;
    /* Podebljana kondenzovana slova na 20 px stoje malo raštrkano; minus jedan procenat ih skupi
       taman toliko da naslov deluje kao jedna reč, a da se ne slepi. */
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Podatak uz naslov: uzima slobodan prostor izmedju naslova i dugmadi. `min-width: 0` je ovde
   sustina, ne stil — bez njega flex stavka ne sme da se skupi ispod svog sadrzaja, pa dugacka meta
   gura dugmad iz reda umesto da se sama skrati sa tri tacke. */
.ds-page-meta {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ds-text-base);
    color: #777777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-page-meta strong {
    font-weight: 700;
    color: var(--dy-text);
}

/* Najvise TRI dugmeta. Redosled je desno-nalevo po vaznosti: krajnje desno je glavna radnja, jer
   tamo oko zavrsava red i tamo je palac na telefonu. Kad radnji ima vise od tri, dve najvaznije
   ostaju zasebna dugmad, a trece — krajnje LEVO — postaje `ds-actions-more` i nosi ostatak.
   Preko tri dugmeta zaglavlje pocinje da guta naslov; mereno na „Obavezama", koje su ih imale cetiri. */
.ds-page-actions {
    display: flex;
    flex: none;
    gap: calc(8 * var(--ds-px));
}

/* ---- Grupno dugme: radnja + strelica koja otvara ostatak ----

   Nije vezano za zaglavlje strane — isti stil radi svuda gde nad jednim kontekstom stoji vise
   radnji nego sto ih vredi pokazati: red u tabeli, kartica, alatna traka iznad liste.

     <span class="ds-actions-more dropdown">
       <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
               data-bs-toggle="dropdown" aria-expanded="false">Još</button>
       <ul class="dropdown-menu dropdown-menu-end">
         <li><a class="dropdown-item" asp-page="/Obligations/Payroll">Payroll virmani</a></li>
       </ul>
     </span>

   Strelica je DEO dugmeta (`dropdown-toggle`), ne zaseban segment: podeljeno dugme trazi od
   korisnika da pogodi koja polovina sta radi, a ovde ceo potez ima jedno znacenje — „pokazi ostalo".

   Bootstrap 5 crta strelicu sam preko `::after`; u legacy-ju (Bootstrap 3) ide `<span class="caret">`
   i `data-toggle` umesto `data-bs-toggle`. Oba imaju svoj `.dropdown` JS, pa ovde nema nase skripte. */
.ds-actions-more {
    display: inline-flex;
    flex: none;
}

/* Meni se otvara ulevo od dugmeta. Bez ovoga BS5 sidri levu ivicu menija uz levu ivicu dugmeta, pa
   dugacke stavke („Izvoz otvorenih stavki u XLSX") izadju iz ekrana na desnoj strani zaglavlja. */
.ds-actions-more .dropdown-menu {
    --bs-dropdown-min-width: calc(180 * var(--ds-px));
}

/* Radnje nad kontekstom van zaglavlja — red u tabeli, kartica, alatna traka. Ista mera razmaka kao
   u zaglavlju, ali sme da se prelomi, jer u tabeli nema ko da garantuje sirinu. */
.ds-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8 * var(--ds-px));
}

/* Vidljiv znak za opis — samo tamo gde opis nesto znaci. Nosi isti tekst kao `title` naslova. */
.ds-page-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(18 * var(--ds-px));
    height: calc(18 * var(--ds-px));
    margin-left: calc(8 * var(--ds-px));
    border: 1px solid #9aa5ad;
    border-radius: 50%;
    color: #6b757c;
    font-size: var(--ds-text-xs);
    font-weight: 400;
    line-height: 1;
    cursor: help;
    vertical-align: 2px;
}

/* Nivo 3: sporedni deo mete otpada. Sto je NAJVAZNIJE ide prvo u meti — ovo se skracuje s kraja. */
@container (max-width: 65rem) {
    .ds-page-meta .ds-meta-secondary { display: none; }
}

/* Nivo 2: naslov i radnje ostaju u redu, meta silazi ispod njih i vraca ceo tekst. */
@container (max-width: 53rem) {
    .ds-page-title { flex: 1 1 auto; }

    .ds-page-meta {
        flex: 1 1 100%;
        order: 3;
        margin-top: calc(2 * var(--ds-px));
    }

    .ds-page-meta .ds-meta-secondary { display: inline; }
}

/* Nivo 1: tri reda. Dugmad dele sirinu, jer na telefonu palac gadja povrsinu, ne ivicu. */
@container (max-width: 37.5rem) {
    .ds-page-title {
        flex: 1 1 100%;
        /* Dug naziv strane na telefonu mora da se prelomi, ne da izadje iz ekrana. */
        white-space: normal;
    }

    .ds-page-meta {
        order: 2;
        margin-top: 0;
        white-space: normal;
    }

    .ds-page-actions {
        order: 3;
        flex: 1 1 100%;
        margin-top: calc(4 * var(--ds-px));
    }

    .ds-page-actions > * { flex: 1 1 0; }
}

a {
    color: var(--dy-blue);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--dy-blue-dark);
    text-decoration: underline;
}

/* ---- App header: device-local režimi always / auto / hidden ---- */
.ds-app-header {
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    transform: translateY(0);
    transition: transform 160ms ease;
    z-index: 1035;
}

html[data-ds-header-mode="auto"][data-ds-header-state="concealed"] .ds-app-header {
    transform: translateY(-100%);
}

html[data-ds-header-mode="hidden"]:not([data-ds-header-peek="true"]) .ds-app-header {
    display: none;
}

html[data-ds-header-mode="hidden"][data-ds-header-peek="true"] .ds-app-header {
    box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.18);
    left: 0;
    margin-bottom: 0;
    max-height: 100vh;
    overflow-y: auto;
    position: fixed;
    right: 0;
}

.ds-header-reveal {
    align-items: center;
    background-color: var(--dy-head-blue);
    border: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    color: #ffffff;
    display: none;
    height: 1.75rem;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0;
    position: fixed;
    right: 0.75rem;
    top: 0;
    z-index: 1040;
}

.ds-header-reveal::before {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    height: 0.55rem;
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    width: 0.55rem;
}

html[data-ds-header-mode="hidden"]:not([data-ds-header-peek="true"]) .ds-header-reveal {
    display: flex;
}

/* Dok traje azuriranje poruka mora ostati na ekranu i kada je zaglavlje skriveno: sklanja se
   navigacija, a traka ostaje. Bez ovoga bi rezim „auto"/„hidden" odneo i obavestenje. */
html[data-ds-deploy-active="true"][data-ds-header-mode="auto"][data-ds-header-state="concealed"] .ds-app-header,
html[data-ds-deploy-active="true"][data-ds-header-mode="hidden"]:not([data-ds-header-peek="true"]) .ds-app-header {
    display: block;
    transform: none;
}

html[data-ds-deploy-active="true"][data-ds-header-mode="auto"][data-ds-header-state="concealed"] .ds-app-header > .navbar,
html[data-ds-deploy-active="true"][data-ds-header-mode="hidden"]:not([data-ds-header-peek="true"]) .ds-app-header > .navbar {
    display: none;
}

/* Strelica za otkrivanje zaglavlja stoji fiksno u gornjem desnom uglu — tada bi pala preko
   dugmeta „Osvezi", pa mu se pravi mesto. */
html[data-ds-deploy-active="true"][data-ds-header-mode="hidden"]:not([data-ds-header-peek="true"]) .ds-deploy-banner-inner {
    padding-right: 3.5rem;
}

@media (max-width: 61.999em) {
    .ds-app-header:has(.navbar-collapse.show) {
        max-height: 100vh;
        overflow-y: auto;
    }
}

.dropdown-item[data-ds-header-mode-option].active::after {
    content: "✓";
    float: right;
    margin-left: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .ds-app-header {
        transition: none;
    }
}

@media print {
    .ds-app-header,
    .ds-header-reveal {
        display: none !important;
    }
}

/* ---- Navbar: identičan plavi izgled kao glavna aplikacija ----
   Boja je ista kao legacy `.navbar-default` u Cerulean-u: #2fa4e7 (`--dy-blue`).
   Ranije je ovde stajao `--dy-head-blue` (#1aa0d2), pa je traka bila vidljivo tamnija od legacy. */
.navbar-dynasoft {
    background-color: var(--dy-blue) !important;
    /* Legacy `.navbar-fixed-top` ima donju liniju od 1px (`border-width: 0 0 1px`, boja #1995dc).
       Bootstrap 5 navbar nema okvir, pa je moderna traka zavrsavala bez te linije. */
    border-bottom: calc(1 * var(--ds-px)) solid var(--dy-border);
    box-shadow: none;
    min-height: calc(49 * var(--ds-px));
    padding-bottom: 0;
    padding-top: 0;
}

.navbar-dynasoft .navbar-brand {
    color: #ffffff;
    font-weight: 700;
    line-height: calc(22 * var(--ds-px));
    /* 13,5 = `@navbar-padding-vertical` iz legacy izvora, i vazi na SVIM sirinama, ne samo na
       desktopu. Prva verzija je 13,5 stavila samo u `@media (min-width: 992px)`, dok je legacy istu
       meru dobio bezuslovno — pa je moderna traka na telefonu bila 53,3px naspram legacy 51,2.
       Izmereno alatom `tools/Compare-Apps.ps1`, ne procenjeno. */
    padding-bottom: calc(13.5 * var(--ds-px));
    padding-top: calc(13.5 * var(--ds-px));
}

.navbar-dynasoft .navbar-brand:hover,
.navbar-dynasoft .navbar-brand:focus {
    color: #ffffff;
}

.navbar-dynasoft .navbar-brand .navbar-brand-sub {
    font-weight: 400;
    opacity: 0.85;
    font-size: var(--ds-text-sm);
}

.navbar-dynasoft .nav-link {
    color: #ffffff !important;
    line-height: calc(22 * var(--ds-px));
    padding-bottom: calc(15 * var(--ds-px));
    padding-top: calc(15 * var(--ds-px));
}

.navbar-dynasoft .nav-link:hover,
.navbar-dynasoft .nav-link:focus {
    color: #ffffff !important;
    background-color: var(--dy-blue-hover);
}

.navbar-dynasoft .nav-item .nav-link.active {
    color: #ffffff !important;
    background-color: var(--dy-head-blue-dark);
}

/* ==========================================================================
   Launcher i zone konteksta (ADR-0039)
   Znak sa zupcanicima otvara spisak aplikacija; naziv pokrenute aplikacije stoji odmah do njega.
   Desno je kontekst razlozen na zone (firma, godina, korisnik), jer se i menjaju odvojeno.
   ========================================================================== */

.ds-launcher {
    display: flex;
    /* `center`, ne `stretch`: uz `stretch` se dugme razvlaci na CELU visinu trake, pa mu je donja
       ivica nize od stavki trake — a meni se otvara bas od te ivice i pocinjao je 0,5px nize od
       ostalih menija. Sa `center` dugme ima svoju meru (49), istu kao svaka stavka. */
    align-items: center;
}

.ds-launcher-btn {
    background: transparent;
    border: 0;
    /* Znak pocinje tacno na liniji sadrzaja strane, a polje koje se boji na prelazu misem je
       jednako sa svih strana znaka — otud vodoravnih 10 uz -10 margine.

       Uspravno 9,5: stavka trake je visoka 49 (razmak 13,5 + red 22 + 13,5), pa je dugme sa 10 +
       plocica 30 + 10 = 50 bilo za 1px vise od suseda i vuklo traku na 51. Isti broj u legacy
       `Site.css` — menja se na oba mesta ili nigde. */
    padding: calc(9.5 * var(--ds-px)) calc(10 * var(--ds-px));
    margin-left: calc(-10 * var(--ds-px));
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Hover boji POLJE oko znaka, isto kao kod svake druge stavke trake (#178acc). Ranije je bojio samo
   plocicu u skoro belu, pa se promena nije ni videla. Dugme nema bocni razmak, pa obojeno polje
   prati sam znak. */
.ds-launcher-btn:hover,
.ds-launcher-btn:focus-visible,
.ds-launcher-btn[aria-expanded="true"] {
    background-color: var(--dy-blue-hover);
}

.ds-launcher-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

.ds-launcher-mark {
    width: calc(30 * var(--ds-px));
    height: calc(30 * var(--ds-px));
    border-radius: calc(5 * var(--ds-px));
    background: #ffffff;
    color: var(--dy-head-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ds-launcher-mark img {
    width: calc(22 * var(--ds-px));
    height: calc(22 * var(--ds-px));
    display: block;
}

/* Bootstrap 5 dropdown ispod trake ne sme imati zaobljen gornji ugao — legacy ga nema. */
.ds-launcher-menu,
.navbar-dynasoft .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ------------------------------------------------------------------
   Traka mora izgledati isto kao u legacy-ju. Vrednosti nisu procenjene nego PROCITANE iz
   `DynaSoftWebApp/Content/bootstrap.css` (Bootswatch Cerulean, Bootstrap 3.3.7):

     body            font-family "Roboto Condensed"; font-size 14px; line-height 1.42857143
     .navbar         min-height 50px
     .navbar-nav a   padding 15px 15px; line-height 20px
     .navbar-brand   padding 15px 15px; font-size 18px; line-height 20px; height 50px
     aktivna stavka  background #178acc

   Bootstrap 5 podrazumeva 16px i drugu aktivnu boju, pa se sve to ovde vraca na legacy meru.
   ------------------------------------------------------------------ */
/* VAZNO: Bootstrap 5 velicine i boje vuce iz SVOJIH CSS promenljivih (`--bs-nav-link-font-size`,
   `--bs-dropdown-*`). Golo `font-size` na roditelju se zato ne vidi — komponenta i dalje cita svoju
   promenljivu. Legacy mere se postavljaju kroz te promenljive, ne pored njih. */
.navbar-dynasoft {
    --bs-nav-link-font-size: var(--ds-text-base);
    --bs-nav-link-padding-x: calc(15 * var(--ds-px));
    --bs-nav-link-padding-y: calc(15 * var(--ds-px));
    /* Naziv aplikacije je na desktopu iste mere kao meni i osnovni tekst; izdvaja ga podebljanje i
       polozaj uz znak, ne velicina. Telefon zadrzava svojih 16 jedinica (media blok nize). */
    --bs-navbar-brand-font-size: var(--ds-text-base);
    --bs-navbar-padding-y: 0;

    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-size: var(--ds-text-base);
    line-height: 1.42857143;
    min-height: calc(49 * var(--ds-px));
}

/* Zamka: `.navbar-nav` u Bootstrap-u 5 SAM sebi postavlja `--bs-nav-link-padding-x: 0`, pa vrednost
   sa `.navbar-dynasoft` ne stize do stavki — razmak izmedju njih ispadne manji nego u legacy traci.
   Promenljiva se zato vraca na istom nivou na kom je i ponistena. */
.navbar-dynasoft .navbar-nav {
    --bs-nav-link-padding-x: calc(15 * var(--ds-px));
    --bs-nav-link-padding-y: calc(15 * var(--ds-px));
}

.navbar-dynasoft .nav-link {
    font-size: var(--ds-text-base);
    padding: calc(15 * var(--ds-px)) calc(15 * var(--ds-px));
    line-height: calc(22 * var(--ds-px));
    /* „Tipovi racuna" se u Bootstrap 5 prelamao u dva reda i dizao celu traku. */
    white-space: nowrap;
}

/* Bootstrap 5 podvlaci linkove na hover; Bootstrap 3 to ne radi, pa se stavke u traci ponasaju
   razlicito u dve aplikacije. Traka nigde ne podvlaci — ni stavke, ni zone, ni naziv aplikacije. */
.navbar-dynasoft .nav-link,
.navbar-dynasoft .navbar-brand,
.navbar-dynasoft .ds-zone,
.navbar-dynasoft .nav-link:hover,
.navbar-dynasoft .nav-link:focus,
.navbar-dynasoft .navbar-brand:hover,
.navbar-dynasoft .navbar-brand:focus,
.navbar-dynasoft .ds-zone:hover,
.navbar-dynasoft .ds-zone:focus,
.navbar-dynasoft .dropdown-item,
.navbar-dynasoft .dropdown-item:hover,
.navbar-dynasoft .dropdown-item:focus,
.ds-launcher-menu .dropdown-item,
.ds-launcher-menu .dropdown-item:hover,
.ds-launcher-menu .dropdown-item:focus {
    text-decoration: none;
}

/* Legacy mere naziva, ali kroz `--ds-px`. Ranije su ovde stajale gole px vrednosti i, posto je ovo
   pravilo NIZE u fajlu od onog gore (ista specificnost), gazilo je skalirane vrednosti — naziv i
   traka su na desktopu ostajali na 100% dok se ostatak strane smanjivao na 85%.
   `height` je namerno izbacen: `min-height` trake i sam padding daju istu visinu, a fiksna visina je
   ovde bila ta koja je traku drzala na 50px umesto na 42,5px. */
.navbar-dynasoft .navbar-brand {
    padding: calc(13.5 * var(--ds-px)) calc(15 * var(--ds-px));
    font-size: var(--ds-text-base);
    line-height: calc(22 * var(--ds-px));
}

/* Aktivna stavka je u legacy-ju svetlija plava, ne tamna: #178acc, ne #004b87. Tamna je izgledala
   kao da je stavka „ugasena", a ne izabrana. */
.navbar-dynasoft .nav-item .nav-link.active {
    background-color: var(--dy-blue-hover);
}

/* Sirina sadrzaja mora biti ista kao u legacy-ju (Bootstrap 3 `.container` = 1170px na desktopu),
   inace se pri prelasku iz WebERP-a u moderni modul traka i telo strane „pomere" u stranu.
   Bootstrap 5 ide do 1320px, pa se ovde vraca na legacy meru. */
.navbar-dynasoft > .container,
body > .container,
main > .container,
.ds-deploy-banner > .container,
.ds-app-header > .navbar > .container {
    max-width: 1170px;
    /* BS3 `.container` ima 15px bocnog razmaka, BS5 12px (gutter 1.5rem) — zato sadrzaj u dve
       aplikacije nije pocinjao na istoj liniji. Razmak prati velicinu prikaza, kao i sve ostalo. */
    --bs-gutter-x: calc(30 * var(--ds-px));
}

/* Bootstrap 3 daje `.container`-u fiksnu sirinu tek od 768px; ispod toga je uvek fluidan.
   Bootstrap 5 ga vec od 576px zakiva na 540px, pa je na vecem telefonu i manjem tabletu legacy
   koristio celu sirinu, a moderni modul ostavljao prazne trake sa strane. */
@media (max-width: 767.98px) {
    .navbar-dynasoft > .container,
    body > .container,
    main > .container,
    .ds-deploy-banner > .container,
    .ds-app-header > .navbar > .container {
        max-width: none;
    }
}

/* Nivo 5 (≥ 87.5em / 1400px): sadržaj ide do 1320px, Bootstrap 5 mere.
   Parity sa legacy-jem (1170px) vredi tamo gde se iz WebERP-a i prelazi — do nivoa 4. Na širokom
   monitoru je važnije da red stane nego da se dve aplikacije poklope na piksel: nalaz korisnika
   12.09.2026 je bio da je opis odsečen „čak i na najvećem ekranu". Traka i telo se šire ZAJEDNO,
   pa se unutar aplikacije ništa ne pomera; granica je u `em` (standard §4), kao i ostatak nivoa 5. */
@media (min-width: 87.5em) {
    .navbar-dynasoft > .container,
    body > .container,
    main > .container,
    .ds-deploy-banner > .container,
    .ds-app-header > .navbar > .container {
        max-width: 1320px;
    }
}

/* Dropdown-i prate legacy izgled. Vrednosti iz Bootstrap 3 (Cerulean):
   font 14px, stavka `3px 20px`, aktivna `#2fa4e7`, senka `0 6px 12px rgba(0,0,0,.175)`.
   Sve ide kroz `--bs-dropdown-*`, jer Bootstrap 5 svoje komponente cita odatle. */
.navbar-dynasoft .dropdown-menu,
.ds-launcher-menu {
    --bs-dropdown-font-size: var(--ds-text-base);
    --bs-dropdown-item-padding-x: calc(20 * var(--ds-px));
    --bs-dropdown-item-padding-y: calc(3 * var(--ds-px));
    --bs-dropdown-padding-y: calc(5 * var(--ds-px));
    --bs-dropdown-border-radius: 0 0 calc(4 * var(--ds-px)) calc(4 * var(--ds-px));
    --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-color: #333333;
    --bs-dropdown-link-hover-bg: #f5f5f5;
    --bs-dropdown-link-hover-color: #262626;
    --bs-dropdown-link-active-bg: #2fa4e7;
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-header-color: #999999;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    line-height: 1.42857143;
}

.navbar-dynasoft .dropdown-item,
.ds-launcher-menu .dropdown-item {
    font-size: var(--ds-text-base);
    padding: calc(3 * var(--ds-px)) calc(20 * var(--ds-px));
    line-height: 1.42857143;
}

.ds-launcher-menu {
    /* Bootstrap 3 `.dropdown-menu` ima 160px; 11rem (176px) je pravilo cinilo sirim od legacy. */
    min-width: calc(160 * var(--ds-px));
}

/* Naziv daje mali dodatak razmaku, a ostatak dolazi od same stavke (15px). Bez ijednog dodatka
   „Sales" i „Kupci" su se skoro dodirivali; sa 12px je rupa bila prevelika. */
.navbar-dynasoft .navbar-brand.ds-app-name {
    padding-left: calc(8 * var(--ds-px));
    padding-right: calc(8 * var(--ds-px));
    /* Naziv ostaje uz sam znak; hamburger se gura na desnu ivicu (`margin-left: auto` nize).
       Bez ovoga ga je `justify-content` na telefonu izbacivao u sredinu trake, dok u legacy-ju
       tamo ne stoji nista. */
    margin-right: auto;
}

/* Dok je hamburger vidljiv (<992px), znak + naziv + hamburger moraju stati u JEDAN red. Bez ovoga
   se na najkrupnijem prikazu (2,25x na uskom telefonu) traka prelamala u dva reda i bila dvostruko
   visa od legacy trake, koja u istoj situaciji samo skrati naziv.

   `min-width: 0` NIJE dovoljan, iako se tako cini: flex prvo raspodeli stavke po redovima koristeci
   njihovu PRIRODNU sirinu, pa tek onda skuplja ono sto je ostalo u redu. Naziv od 303px zato ode u
   drugi red pre nego sto se skupljanje uopste razmotri. Zato mu se ogranicava sirina: red mu daje
   sve osim mesta za znak (40px) i hamburger (44px), plus malo vazduha — isti racun kao u
   `DynaSoftWebApp/Content/Site.css` za `.ds-app-menu`. */
@media (max-width: 991.98px) {
    /* `flex-basis: 0` je ovde sustina, ne stil. Flex prvo raspodeli stavke po redovima koristeci
       njihovu PRIRODNU sirinu — naziv od 300px zato ode u drugi red pre nego sto se skupljanje
       uopste razmotri, i traka postane dvoredna. Sa bazom 0 naziv nikada ne lomi red, nego uzme
       ono sto pretekne od znaka, sitnog konteksta i hamburgera. Time nema ni magicnih rezervi u
       pikselima koje bi se raspale na najkrupnijem prikazu. */
    .navbar-dynasoft .navbar-brand.ds-app-name {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Telefon: ISTE mere kao legacy traka (`DynaSoftWebApp/Content/Site.css`, ista media granica).
   Bez ovoga ista traka ima dve velicine u dve aplikacije — legacy 16px, moderni 18px — a korisnik
   izmedju njih prelazi u istom poslu.

   Font 16px: naziv staje i uz najduzu oznaku konteksta, bez skracivanja.
   Levi razmak 5px: pravi jednak vazduh sa obe strane znaka. Izmereno u renderovanim pikselima
   (legacy skalira `zoom`-om, moderni preko `--ds-px`, pa se sirovi `font-size` NE sme porediti):
   plocica 20,3–60,8 u obe aplikacije, tekst pocinje na 81, razmak levo 20,3 = desno 20,3.

   Granica je 767.98px, ne 991.98px kao blok iznad, jer je to granica na kojoj legacy prelazi na
   svoj mobilni naziv. Do 991px moderni vec pokazuje hamburger, ali legacy jos ima punu traku —
   pomeranje ove granice na 991 razdvojilo bi dve aplikacije u pojasu 768-991. */
@media (max-width: 767.98px) {
    /* `font-size` ide DIREKTNO, ne kroz `--bs-navbar-brand-font-size`: `.navbar-dynasoft
       .navbar-brand` gore vec postavlja golu vrednost, pa BS5 promenljivu vise niko ne cita.
       Prva verzija ovoga menjala je promenljivu i nije se videla nista — izmereno, ne pretpostavljeno. */
    .navbar-dynasoft .navbar-brand.ds-app-name {
        /* 23,11 x 1,125 = 26,0 na ekranu — korisnicki izbor 17.08.2026 (koraci 18, 20 i 24 su
           redom bili premali). `line-height` 28: naziv ima `overflow: hidden` zbog tri tacke, pa bi
           tesniji red SEKAO kvacice („Obračun zarada"). Zbir ostaje 58 = visina sadrzaja trake:
           15 + 28 + 15. Ista mera u legacy `Site.css` — menja se na oba mesta ili nigde. */
        font-size: calc(23.11 * var(--ds-px));
        line-height: calc(28 * var(--ds-px));
        padding-top: calc(15 * var(--ds-px));
        padding-bottom: calc(15 * var(--ds-px));
        padding-left: calc(5 * var(--ds-px));
    }

    /* --- znak i hamburger: ista kvadratna mera, uz uze ivice ---
       Isti racun i isti brojevi kao u legacy `Site.css` (tamo stoji tabela). Moderna traka je flex
       sa centriranjem, pa se vertikalno poravnanje dobija samo — nema preracunavanja margina. */
    /* -8, ne -4: Bootstrap 5 daje kontejneru bocni razmak u `rem` (0,75rem = 13,5 na ekranu), koji
       NE prati `--ds-px`. Razmak dugmeta (4) plus ova margina daju neto -4 jedinice, pa plocica
       zavrsava na 9 od ivice — isto kao u legacy-ju. Izmereno, ne izracunato unapred. */
    .navbar-dynasoft .ds-launcher-btn {
        padding: calc(4 * var(--ds-px));
        margin-left: calc(-8 * var(--ds-px));
    }

    .navbar-dynasoft .ds-launcher-mark {
        width: calc(40 * var(--ds-px));
        height: calc(40 * var(--ds-px));
    }

    .navbar-dynasoft .ds-launcher-mark img {
        width: calc(30 * var(--ds-px));
        height: calc(30 * var(--ds-px));
    }

    /* Hamburger NIJE ovde: bazno `.navbar-dynasoft .navbar-toggler` stoji NIZE u fajlu i, uz istu
       specificnost, gazi sve odavde (media upit ne nosi specificnost). Njegov mobilni oblik je
       zato odmah ispod tog baznog pravila. Izmereno — prva verzija je bila ovde i nije radila. */

    /* Telefonska traka je VISA od desktop trake: 59 jedinica = 66,4 na ekranu posle mnozioca
       1,125, po korisnikovoj zeljenoj slici (izmereno ~66). Traka je flex sa centriranjem, pa se
       znak, naziv, mini kontekst i hamburger sami nameste po sredini — nema preracunavanja
       margina kao u legacy-ju. Isti broj u `Site.css` (59px) — menja se na oba mesta ili nigde. */
    .navbar-dynasoft {
        min-height: calc(59 * var(--ds-px));
    }
}

/* Flex stavka koja sme da se skupi do nule — u paru sa `text-truncate` daje „tekst u jednom redu,
   sa tri tacke".
   `flex-basis: 0` je ovde sustina, ne stil: flex prvo raspodeli stavke po redovima koristeci njihovu
   PRIRODNU sirinu, pa dugacak sadrzaj izbaci susede (iznos, dugme) u novi red pre nego sto se
   skupljanje uopste razmotri. `min-width: 0` sam po sebi to ne resava — on tek dozvoljava skupljanje
   posto je red vec prelomljen. */
.ds-flex-shrinkable {
    flex: 1 1 0;
    min-width: 0;
}

/* --- sitan kontekst pored hamburgera ---
   Dva reda po 11px sa `line-height: 1.1` daju 24px — nize od hamburgera (34px), pa traka ne raste. */
.ds-context-mini-wrap,
.ds-context-mini {
    display: none;
}

@media (max-width: 991.98px) {
    .ds-context-mini-wrap {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        margin-right: calc(8 * var(--ds-px));
        min-width: 0;
    }

    .ds-context-mini {
        display: flex;
        background: transparent;
        border: 0;
        /* Razmak postoji da bi POLJE koje se boji pri prelazu misem imalo povrsinu — bez njega se
           boja lepi za sama slova, a stavka treba da izgleda kao svaka druga u traci. Isti razmak
           i isto zaobljenje u legacy `Site.css`. */
        padding: calc(4 * var(--ds-px)) calc(6 * var(--ds-px));
        border-radius: calc(4 * var(--ds-px));
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        /* Gornja granica mora imati i deo vezan za EKRAN, ne samo za skalu. Na najkrupnijem prikazu
           (2,25x) bi 70px poraslo na 157px, a to je na telefonu od 390px vec dovoljno da znak, naziv
           i hamburger ne stanu u red — pa se traka prelomi u dva reda i bude dvostruko visa od
           legacy trake. `min()` cuva sitan prikaz, a na uskom ekranu popusta. */
        max-width: min(calc(70 * var(--ds-px)), 20vw);
        color: #ffffff;
        line-height: 1.1;
        text-align: right;
        white-space: nowrap;
    }
}

.ds-context-mini-line {
    /* Token `--ds-text-xs` = 12 jedinica (13,5 na ekranu telefona) — korisnicki izbor 17.08.2026,
       posle probe sa 11. Legacy nosi isti broj u `Site.css`. */
    font-size: var(--ds-text-xs);
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ds-context-mini-year {
    font-weight: 700;
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

/* Meni se otvara iz sitnog dugmeta uz desnu ivicu — poravnava se po DESNOJ strani (`dropdown-menu-end`
   u markupu), inace bi izlazio van ekrana. */
.ds-context-mini-menu {
    min-width: calc(200 * var(--ds-px));
    max-width: 92vw;
    /* Spisak firmi i godina ume da bude duzi od ekrana — bez ovoga se donje stavke ne mogu dohvatiti. */
    max-height: 80vh;
    overflow-y: auto;
}

/* Dugacki nazivi firmi se prelamaju umesto da guraju sirinu menija preko granice. */
.ds-context-mini-menu .dropdown-item,
.ds-context-mini-menu .dropdown-item-text {
    white-space: normal;
}

.ds-context-mini:hover,
.ds-context-mini:focus-visible,
.ds-context-mini[aria-expanded="true"] {
    background-color: var(--dy-blue-hover);
}

/* Naziv aplikacije je link kao i svaka stavka, pa se i ponasa tako na prelazu misem. */
.navbar-dynasoft .navbar-brand.ds-app-name:hover,
.navbar-dynasoft .navbar-brand.ds-app-name:focus {
    background-color: var(--dy-blue-hover);
}

/* --- zone konteksta --- */

/* Zone nose podatak, ne navigaciju: bez strelice, uzi razmak, i — vazno — SVE U JEDNOM REDU.
   Dvoredna firma je dizala tu zonu iznad ostalih i traka je izgledala krivo; baza je zato postala
   sitan prefiks u istom redu. Padding je isti kao kod ostalih `nav-link`-ova, da osnovna linija
   teksta bude ista kroz celu traku. */
.navbar-dynasoft .ds-zone {
    display: flex;
    align-items: baseline;
    gap: calc(5 * var(--ds-px));
    /* Isti vertikalni ritam i velicina kao svaka druga stavka trake (Bootstrap 3: 15px, 14px),
       uz uzi bocni razmak, jer su tri zone jedna do druge. */
    padding: calc(15 * var(--ds-px)) calc(10 * var(--ds-px));
    font-size: var(--ds-text-base);
    line-height: calc(22 * var(--ds-px));
    white-space: nowrap;
}

/* Poslednja zona zavrsava na 15px od ivice sadrzaja, isto kao poslednja stavka u legacy traci. */
.navbar-dynasoft .navbar-nav:last-child > .ds-zone-item:last-child > .ds-zone {
    padding-right: calc(15 * var(--ds-px));
}

.navbar-dynasoft .ds-zone::after {
    display: none;
}

.ds-zone-db {
    font-size: var(--ds-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Oznaka baze u spisku nedavnih parova (zona firme). NAMERNO nije `.ds-zone-db`: ta je mera za
   traku i nosi `max-width: 10ch` sa elipsom, a ovde je prefiks u stavci menija koji mora da drzi
   svoju kolonu da se sifre firmi ne razidju. Isto pravilo postoji i u legacy `Site.css`
   (`.ds-pair-db`) — menja se na oba mesta ili nigde. */
.ds-pair-db {
    display: inline-block;
    margin-right: 0.375rem;
    font-size: var(--ds-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
}

/* Stavka u spisku parova ostaje u JEDNOM redu. Mereno na 390px: naziv firme se prelamao u dva reda,
   a drugi red je počinjao uz levu ivicu, pa se spisak čitao kao da ima duplo više stavki nego što
   ima. Naziv je već skraćen na 20 znakova; ovo hvata ostatak (uska širina, uvećana `ds-ui-scale`). */
.ds-firm-menu .dropdown-item,
.ds-firm-menu .dropdown-item-text,
.ds-context-mini-menu .dropdown-item,
.ds-context-mini-menu .dropdown-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-zone-firmline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.ds-zone-firmname {
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-dynasoft .ds-zone-year {
    font-variant-numeric: tabular-nums;
}

/* Ispod `lg` navigacija se sklapa u hamburger i zone idu jedna ispod druge; tada baza samo troši
   širinu, pa ostaje šifra i naziv. */
@media (max-width: 991.98px) {
    .ds-zone-db {
        display: none;
    }
}

/* Ime baze stoji kao NADNASLOV iznad šifre firme — u praznom prostoru koji zona ionako ima iznad
   svog teksta, ne u redu pored njega.

   Kao prefiks u istom redu trošilo je 48,9 px — više nego šifra i skraćeni naziv firme zajedno — i
   držalo zonu na 173,3 px. Ovako zona pada na 119,4 px, tačno onoliko koliko bi bila i da baze
   uopšte nema. (Mereno na živoj traci, 1600 px, prijavljena sesija.)

   `position: absolute` je ovde suština, ne stil. Prva verzija je zonu pravila dvorednom
   (`flex-direction: column`) i time GURALA red firme naniže: „4 - TEST - DynaSoft" je padao 10 px
   ispod godine i korisnika. Van toka, red firme ostaje tačno tamo gde je bio — izmereno odstupanje
   prema godini i prema korisniku je 0,0 px, i to po konstrukciji, ne slučajno.

   Tri mere su vezane za zonu, ne prepisane kao brojevi:
     `left: 0` + `padding-left: inherit`  — ista leva ivica kao red firme (bočni razmak zone je
                                            7 px, ne 10 kako pravilo iznad sugeriše, pa se nasleđuje)
     `height` = padding-top zone (13,5 px) — tačno slobodan prostor iznad teksta
     `align-items: center` + `line-height: 1` — baza centrirana u tom prostoru (odstupanje 0,5 px)

   Granica je `min-width: 992px` jer ispod nje baza ionako nestaje (pravilo iznad). */
@media (min-width: 992px) {
    .navbar-dynasoft .ds-zone-firm {
        position: relative;
    }

    .navbar-dynasoft .ds-zone-firm .ds-zone-db {
        position: absolute;
        left: 0;
        padding-left: inherit;
        top: 0;
        height: calc(13.5 * var(--ds-px));
        display: flex;
        align-items: center;
        line-height: 1;
        /* 10 px prema 14 px reda firme. Ali velicina NIJE jedino sredstvo, i namerno:
           Chrome ima podesavanje „Minimum font size" koje svaki manji tekst podize na zadatu meru.
           Kod korisnika sa minimumom od 16 px sve nase velicine — 14 osnovni tekst, 12 `small`,
           10 sitan kontekst, 7 ovaj nadnaslov — postaju ISTIH 16 px i cela skala se slepi u jedan
           nivo. Provereno kod korisnika: `baza 16px | firma 16px`, uz ispravan `--ds-px`.

           Zato podredjenost nose i mala slova, tanji rez i prozirnost — to pregledac ne dira. */
        font-size: calc(10 * var(--ds-px));
        text-transform: none;
        letter-spacing: 0.02em;
        font-weight: 400;
        opacity: 0.6;
        /* Bez ovoga se tekst secka po visini kada ga pregledac podigne iznad visine trake. */
        overflow: visible;
        max-width: none;
    }
}

/* --- visina glavne trake na desktopu: 50 px na ekranu --- */

/* Kutija je 49 jedinica, plus 1 donje linije = 50 na ekranu (mnozilac na „Normalno" je 1,0).
   Razmak 13,5 iznad i ispod teksta cija je `line-height` 22 popunjava tih 49.

   Brojevi nisu izabrani ovde nego PREPISANI iz legacy izvora: u `Content/bootstrap.less` stoji
   `@navbar-height: 49px`, a Bootstrap iz njega izvodi `@navbar-padding-vertical` = (49 - 22) / 2.
   Menja se tamo, pa se prepise ovde — inace dve trake dobiju razlicitu visinu.

   Blok stoji OVDE, a ne uz ostala pravila trake, i to je bitno: `.navbar-brand` i `.ds-zone` gore
   postavljaju `padding` SKRACENO, pa bi svako pravilo iznad njih bilo pregazeno — media upit ne
   nosi specificnost. Isto vazi za red kojim se `--bs-nav-link-padding-y` vraca na `.navbar-nav`.

   Granica je 992px, ista na kojoj `navbar-expand-lg` sklapa traku u hamburger; ispod nje vazi
   mobilni raspored, koji se ne dira. Isti racun stoji u `DynaSoftWebApp/Content/Site.css` pod
   `data-ds-legacy-nav="desktop"` — menja se na oba mesta ili nigde, inace se dve trake raziđu. */
@media (min-width: 992px) {
    .navbar-dynasoft {
        min-height: calc(49 * var(--ds-px));
    }

    .navbar-dynasoft .navbar-nav {
        --bs-nav-link-padding-y: calc(13.5 * var(--ds-px));
    }

    /* `.navbar-brand` ovde vise ne stoji: istu meru nosi bezuslovno (gore), da bi i telefon dobio
       legacy razmak. Ostaju samo stavke koje na telefonu imaju SVOJ raspored. */
    .navbar-dynasoft .nav-link,
    .navbar-dynasoft .ds-zone {
        padding-top: calc(13.5 * var(--ds-px));
        padding-bottom: calc(13.5 * var(--ds-px));
    }
}

/* Hamburger po legacy meri (Bootstrap 3 `.navbar-toggle`, procitano iz `bootstrap.css`):
   okvir `padding: 9px 10px`, `border: 1px solid #178acc`, `border-radius: 4px`, `margin: 8px 0`,
   a unutra tri precke 22x2px sa razmakom od 4px — ukupno 44x34px, sto sa marginama daje tacno
   50px visine trake. Bootstrap 5 crta znak kao SVG u pozadini i meri ga u `em`, pa je bio i drugog
   oblika i druge velicine. */
.navbar-dynasoft .navbar-toggler {
    padding: calc(9 * var(--ds-px)) calc(10 * var(--ds-px));
    margin: calc(8 * var(--ds-px)) 0;
    /* Hamburger stoji na desnoj ivici sadrzaja, kao u legacy traci. */
    margin-left: auto;
    border: calc(1 * var(--ds-px)) solid var(--dy-blue-hover);
    border-radius: calc(4 * var(--ds-px));
    font-size: inherit;
    line-height: 1;
    box-shadow: none;
}

/* Telefon: hamburger je ISTI kvadrat kao plocica znaka (40 jedinica = 45 na ekranu), uz uzu ivicu.
   Blok MORA stajati posle baznog pravila iznad — media upit ne nosi specificnost, pa bi ga sinteza
   `margin` iz baznog pravila pregazila. Isti brojevi u legacy `Site.css`.

   `margin-right` je -4,5 jedinica: Bootstrap 5 daje kontejneru bocni razmak u `rem` (13,5 na
   ekranu, ne prati `--ds-px`), pa se ovim spusta na 9 — koliko ima i znak sa leve strane. */
@media (max-width: 767.98px) {
    .navbar-dynasoft .navbar-toggler {
        width: calc(40 * var(--ds-px));
        height: calc(40 * var(--ds-px));
        padding: 0;
        margin: 0 calc(-4.5 * var(--ds-px)) 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.navbar-dynasoft .navbar-toggler:focus {
    box-shadow: none;
}

/* `display: block` je ovde mera, ne stil. Bootstrap 5 crta znak kao `inline-block`, pa on sedi na
   liniji teksta: visina kutije postaje veca od same ikone za pola vodjice i za prostor ispod osnovne
   linije. Izmereno: ikona 14px, a dugme 36,3px umesto 34 — tacno 2,3px koje je moderna traka bila
   visa od legacy. Legacy Bootstrap 3 crta tri `.icon-bar` spana kao `block` i tog viska nema.
   `line-height: 1` uklanja ostatak vodjice. */
.navbar-dynasoft .navbar-toggler-icon {
    display: block;
    line-height: 1;
    width: calc(22 * var(--ds-px));
    height: calc(14 * var(--ds-px));
    background-image: linear-gradient(#ffffff, #ffffff),
                      linear-gradient(#ffffff, #ffffff),
                      linear-gradient(#ffffff, #ffffff);
    background-repeat: no-repeat;
    background-size: 100% calc(2 * var(--ds-px));
    background-position: top left, left center, bottom left;
}

/* Kontekst firme/korisnika na desnoj strani navbara (kao u glavnoj aplikaciji) */
.navbar-dynasoft .navbar-context {
    color: #ffffff;
    opacity: 0.95;
    white-space: nowrap;
}

.navbar-dynasoft .ds-license-label {
    border-radius: 0.25em;
    color: #ffffff;
    display: inline;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    padding: 0.2em 0.6em 0.3em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.navbar-dynasoft .ds-license-label-warning {
    background-color: #dd5600;
}

.navbar-dynasoft .ds-license-label-danger {
    background-color: #d9534f;
}

.navbar-dynasoft .ds-license-label-success {
    background-color: #5cb85c;
}

.navbar-dynasoft .ds-license-label-info {
    background-color: #5bc0de;
}

.navbar-dynasoft .ds-deploy-nav-badge {
    font-weight: 700;
    position: relative;
}

.navbar-dynasoft .ds-deploy-nav-badge::after {
    background-color: #f0ad4e;
    border: 2px solid #ffffff;
    border-radius: 999px;
    content: "";
    height: 0.65rem;
    position: absolute;
    right: 0.2rem;
    top: 0.65rem;
    width: 0.65rem;
}

.navbar-dynasoft .ds-deploy-nav-badge[data-ds-deploy-state="in-progress"]::after {
    background-color: #d9534f;
}

/* ---- Deploy status banner (moderni moduli) ---- */
/* Zivi unutar `.ds-app-header`, pa nasledjuje njegov sticky sloj. Puna pozadina je obavezna:
   ispod trake prolazi sadrzaj strane. */
/* Obavestenje o azuriranju je KARTICA u obe aplikacije (korisnicka odluka `2026-08-15`): okvir,
   zaobljenje 4px i razmak od sadrzaja. Boje i mere su zajednicke sa legacy-jem — #fff4cf / #4b3a08
   / #dfbd56, visina 42px, font 14px — da izgleda isto i u WebERP-u i u modernim modulima. */
.ds-deploy-banner {
    background-color: #ffffff;
    padding-top: calc(10 * var(--ds-px));
    padding-bottom: calc(10 * var(--ds-px));
    font-size: var(--ds-text-base);
}

.ds-deploy-banner-inner {
    align-items: center;
    background-color: #fff4cf;
    border: calc(1 * var(--ds-px)) solid #dfbd56;
    border-radius: calc(4 * var(--ds-px));
    color: #4b3a08;
    display: flex;
    flex-wrap: wrap;
    /* Iste mere kao `.ds-legacy-deploy-banner-inner`: 6px razmak, 42px visina, 9px gore/dole. */
    gap: calc(6 * var(--ds-px));
    min-height: calc(42 * var(--ds-px));
    padding: calc(9 * var(--ds-px)) calc(12 * var(--ds-px));
    font-size: var(--ds-text-base);
}

/* Tacka je bila svetlija i krupnija od legacy-jeve (#f0ad4e, 0.7rem) — sada iste boje i mere:
   9px, #b57900, prsten 3px. */
.ds-deploy-banner-dot {
    background-color: #b57900;
    border-radius: 50%;
    box-shadow: 0 0 0 calc(3 * var(--ds-px)) rgba(181, 121, 0, 0.16);
    flex: 0 0 calc(9 * var(--ds-px));
    height: calc(9 * var(--ds-px));
    width: calc(9 * var(--ds-px));
}

.ds-deploy-banner[data-ds-deploy-state="in-progress"] .ds-deploy-banner-inner {
    background-color: #eaf6fd;
    border-color: var(--dy-blue);
    color: #174f70;
}

.ds-deploy-banner[data-ds-deploy-state="in-progress"] .ds-deploy-banner-dot {
    background-color: var(--dy-blue);
    box-shadow: 0 0 0 0.2rem rgba(47, 164, 231, 0.16);
}

.ds-deploy-banner strong {
    white-space: nowrap;
}

/* Mere legacy `btn-xs`-a (Bootstrap 3: `padding: 1px 5px; font-size: 12px; line-height: 1.5;
   border-radius: 3px`). Bootstrap 5 tu velicinu nema — `btn-sm` je osetno krupniji, pa je dugme u
   modernom modulu bilo vece od istog dugmeta u WebERP-u. */
.ds-deploy-resume-action {
    margin-left: auto;
    white-space: nowrap;
    padding: calc(1 * var(--ds-px)) calc(5 * var(--ds-px));
    font-size: var(--ds-text-sm);
    line-height: 1.5;
    border-radius: calc(3 * var(--ds-px));
    border-width: calc(1 * var(--ds-px));
}

@media (max-width: 767.98px) {
    .ds-deploy-resume-action {
        margin-left: 0;
        width: 100%;
    }
}

/* „Azuriranje je zavrseno" je vest, ne prekid rada — na telefonu ne zasluzuje pun red kao
   najava i tok. Poruka („Mozete nastaviti rad na ovoj stranici") otpada, naslov i „Osvezi"
   staju u jednu usku liniju. Najava i tok ostaju puna traka: tada mozda treba da snimis rad. */
@media (max-width: 767.98px) {
    .ds-deploy-banner[data-ds-deploy-state="recently-completed"] .ds-deploy-banner-inner {
        flex-wrap: nowrap;
        font-size: var(--ds-text-sm);
        gap: calc(6 * var(--ds-px));
        min-height: 0;
        padding-bottom: calc(4 * var(--ds-px));
        padding-top: calc(4 * var(--ds-px));
    }

    .ds-deploy-banner[data-ds-deploy-state="recently-completed"] [data-ds-deploy-message] {
        display: none;
    }

    .ds-deploy-banner[data-ds-deploy-state="recently-completed"] strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Bez dodatnog stiskanja: dugme zadrzava `btn-xs` mere, isto kao u legacy-ju. */
    .ds-deploy-banner[data-ds-deploy-state="recently-completed"] .ds-deploy-resume-action {
        margin-left: auto;
        width: auto;
    }
}

/* ---- Dugmad ---- */
.btn-primary {
    color: #ffffff;
    background-color: var(--dy-blue);
    border-color: var(--dy-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff;
    background-color: var(--dy-blue-hover);
    border-color: var(--dy-blue-hover);
}

.btn-outline-primary {
    color: var(--dy-blue);
    border-color: var(--dy-blue);
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: var(--dy-blue);
    border-color: var(--dy-blue);
}

/* ---- Tabele: isti hover/selektovani red kao u glavnoj aplikaciji (Site.css) ----
   Boje su preuzete iz glavne aplikacije (#0d6efd hover, #198754 selektovan red).
   Ciljaju se i ćelije (> *) jer Bootstrap 5 boji pozadinu reda preko ćelija
   (--bs-table-bg-state), pa override samo na <tr> ne bi bio vidljiv. */
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #0d6efd;
    color: #fff;
}

.table > tbody > tr.row-selected > * {
    --bs-table-bg-state: #198754;
    color: #fff;
}

/* Leva linija selekcije — isti marker kao ds-mlist .is-selected, u tamnozelenoj da ne
   vibrira na zelenoj pozadini legacy konvencije. */
.table > tbody > tr.row-selected > td:first-child,
.table > tbody > tr.row-selected > th:first-child {
    box-shadow: inset 3px 0 0 #0a3622;
}

.table-hover > tbody > tr.row-selected:hover > * {
    --bs-table-bg-state: #157347;
    color: #fff;
}

.table-hover > tbody > tr:active > * {
    filter: brightness(1.05);
}

/* ---- Footer ---- */
.footer {
    line-height: normal;
    padding: 8px 0;
    font-size: var(--ds-text-xs);
}

/* =====================================================================
   Globalno poravnanje sa glavnom aplikacijom (Bootstrap 3 "Cerulean").
   Payroll ostaje na Bootstrap 5; ovde se podešavaju BS5 promenljive i
   komponente tako da izgled bude isti kao u glavnoj ERP aplikaciji,
   ne samo navbar/dugmad/tabele nego i tekst, forme, kartice itd.
   ===================================================================== */
:root {
    /* Cerulean koristi manji radijus (4px) nego BS5 podrazumevani */
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
    --bs-border-color: #dddddd;
}

/* Gušći tekst kao u glavnoj aplikaciji — poništava 16px iz site.css
   (Cerulean osnova je 14px na svim širinama). */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

/* ---- Forme: fokus i checkbox u plavoj temi (kao Cerulean) ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dy-blue);
    box-shadow: 0 0 0 0.2rem rgba(47, 164, 231, 0.25);
}

.form-check-input:checked {
    background-color: var(--dy-blue);
    border-color: var(--dy-blue);
}

/* ---- Tabele: svetli okvir i blago striping kao Cerulean ---- */
.table {
    --bs-table-border-color: #dddddd;
    --bs-table-striped-bg: #f9f9f9;
    --bs-table-striped-color: var(--dy-text);
}

.table > thead > tr > th {
    background-color: var(--dy-head-blue);
    border-color: var(--dy-head-blue);
    color: #ffffff;
    font-weight: 700;
    vertical-align: middle;
}

.table-sm > thead > tr > th {
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

/* ---- Kartice kao BS3 paneli: zaglavlje sa svetlom pozadinom ---- */
.card {
    border-color: #dddddd;
    background-color: #ffffff;
}

.card-header {
    background-color: var(--dy-head-blue);
    border-bottom-color: var(--dy-head-blue);
    color: #ffffff;
    font-weight: 700;
}

.card-header .btn-link,
.ds-filter-panel .ds-filter-toggle {
    color: #ffffff;
}

.card-header .btn-link:hover,
.card-header .btn-link:focus,
.ds-filter-panel .ds-filter-toggle:hover,
.ds-filter-panel .ds-filter-toggle:focus {
    color: #ffffff;
}

/* ---- Paginacija u plavoj temi ---- */
.page-link {
    color: var(--dy-blue);
}

.page-item.active .page-link {
    background-color: var(--dy-blue);
    border-color: var(--dy-blue);
}

/* ---- Badge/alert/list-group već prate temu preko --bs-primary (gore) ---- */

/* ---- Toolbar (ds-toolbar tag helper): kontejner akcija ---- */
.ds-toolbar {
    row-gap: 0.5rem;
}

/* PREVAZIDJENO — zamenjuje ga `.ds-page-head` (gore uz tekstualne tokene): naslov, podatak uz
   naslov i radnje u jednom redu, sa container upitima umesto media upita. Osam najcescih strana je
   prevedeno 17.08.2026; ostatak (77 fajlova) prelazi u zasebnom prolazu, jer svaka strana traži
   odluku SVOG podatka i svojih radnji. Ne dodavati nista novo ovde. */
.ds-page-heading {
    gap: 1rem;
}

.ds-page-heading > div:first-child {
    min-width: 0;
}

.ds-page-heading h1,
.ds-page-heading p {
    overflow-wrap: anywhere;
}

.ds-section-actions {
    gap: 0.5rem;
}

.ds-definition-list dd {
    overflow-wrap: anywhere;
}

/* ---- Lookup (ds-lookup tag helper): typeahead padajuća lista ---- */
.ds-lookup {
    position: relative;
}

.ds-lookup .ds-lookup-menu {
    max-height: 16rem;
    overflow-y: auto;
}

/* ---- Fox-like numeric inputi (_editmoney/_editinteger) ---- */
.ds-money-input,
.ds-number-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Dense matrix tables -----------------------------------------------
   Za pivot/matricne izvestaje gde je poredjenje kolona sustina. Ne pretvara
   redove u kartice; umesto toga zadrzava tabelu sa sticky prvom kolonom. */
.ds-matrix-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.ds-matrix-scroll table {
    width: max-content;
    min-width: 100%;
}

.ds-matrix-scroll th,
.ds-matrix-scroll td {
    white-space: nowrap;
}

.ds-matrix-scroll th:first-child,
.ds-matrix-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 1px 0 0 #dee2e6;
}

.ds-matrix-scroll thead th:first-child {
    z-index: 3;
}

.ds-matrix-scroll .table-striped > tbody > tr:nth-of-type(odd) > *:first-child {
    background-color: var(--bs-table-striped-bg, #f8f9fa);
}

/* ---- Lepljiva kolona akcija --------------------------------------------
   Gust ERP red ume da prebaci sirinu i na velikom monitoru — pogotovo uz
   ds-ui-scale. Kada se to desi, iz vidnog polja ispadne bas poslednja kolona,
   a u njoj su akcije („Otvori", „Prilozi") zbog kojih je korisnik i dosao.
   Zato se ona zakucava desno umesto da se oslanjamo na horizontalni skrol.
   Primenjuje se na .table-responsive omotac. */
.ds-sticky-actions > table > thead > tr > th:last-child,
.ds-sticky-actions > table > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
}

/* Lepljiva celija mora biti NEPROZIRNA, ali svaka u boji svog reda: zaglavlje
   zadrzava plavu iz teme (`.table > thead > tr > th`), telo uzima boju strane.
   Bez ovoga se plava traka zaglavlja prekida tacno nad akcijama. */
.ds-sticky-actions > table > tbody > tr > td:last-child {
    background-color: var(--bs-body-bg, #fff);
    box-shadow: -1px 0 0 var(--bs-border-color, #dee2e6);
}

.ds-sticky-actions > table > thead > tr > th:last-child {
    z-index: 3;
    background-color: var(--dy-head-blue);
    box-shadow: -1px 0 0 var(--dy-head-blue);
}

/* Bootstrap hover/striped crta preko akcenta, koji ispod neprozirne lepljive
   celije ne bi bio vidljiv — pa se boja reda ponavlja i na njoj. */
.ds-sticky-actions > table.table-hover > tbody > tr:hover > td:last-child {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

.ds-sticky-actions > table.table-striped > tbody > tr:nth-of-type(odd) > td:last-child {
    background-color: var(--bs-table-striped-bg, #f8f9fa);
}

.ds-report-list-item {
    flex-wrap: wrap;
}

.ds-report-list-copy {
    flex: 1 1 14rem;
    min-width: 0;
}

.ds-report-list-copy .small {
    overflow-wrap: anywhere;
}

.ds-code-scroll {
    max-height: 32rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .body-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .ds-page-heading,
    main > .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ds-page-heading h1,
    main > .d-flex.justify-content-between.align-items-start h1 {
        font-size: var(--ds-text-xl);
        line-height: 1.15;
    }

    .ds-page-heading-actions,
    .ds-page-heading-actions.ds-toolbar,
    main > .d-flex.justify-content-between.align-items-start > .ds-toolbar,
    main > .d-flex.justify-content-between.align-items-start > div:last-child {
        width: 100%;
    }

    .ds-table-search {
        min-height: 2.5rem;
        font-size: var(--ds-text-base);
    }

    .ds-toolbar {
        justify-content: flex-start !important;
        width: 100%;
    }

    .ds-toolbar .btn {
        white-space: normal;
    }

    .ds-filter-panel .card-header {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .ds-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 2.75rem;
        font-size: var(--ds-text-base);
    }

    .ds-filter-panel .card-body {
        padding: 0.75rem;
    }

    .ds-filter-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .ds-filter-actions .btn {
        width: 100%;
        margin-left: 0 !important;
    }

    .ds-mobile-tabs {
        border-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .ds-mobile-tabs .nav-item {
        flex: 1 1 auto;
    }

    .ds-mobile-tabs .nav-link {
        border: 1px solid #dddddd;
        border-radius: 0.2rem;
        min-height: 2.4rem;
        text-align: center;
        width: 100%;
    }

    .ds-section-actions {
        align-items: stretch !important;
        flex-direction: column;
    }

    .ds-section-actions .btn,
    .ds-section-actions .ds-button {
        width: 100%;
    }

    .ds-definition-list {
        margin-bottom: 0;
    }

    .ds-definition-list dt,
    .ds-definition-list dd {
        width: 100%;
    }

    .ds-definition-list dt {
        color: #777777;
        font-size: var(--ds-text-sm);
        margin-top: 0.55rem;
    }

    .ds-definition-list dd {
        border-bottom: 1px solid #eeeeee;
        margin-bottom: 0;
        padding-bottom: 0.45rem;
    }

    .ds-form-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .ds-form-actions .btn {
        margin-left: 0 !important;
        width: 100%;
    }

    .btn-group {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .btn-group > .btn {
        border-radius: 0.2rem !important;
        flex: 1 1 auto;
        min-width: max-content;
    }

    .form-control,
    .form-select,
    .btn {
        min-height: 2.4rem;
    }

    /* Minimum iznad pravi kutiju visu od sadrzaja, a `inline-block` (Bootstrap podrazumevano) sav
       visak ostavlja ISPOD teksta — pa dugme deluje neporavnato. Izmereno na „Dobavljaci"
       (Troskovi, 390px): 7,9px iznad teksta, 17,4px ispod. Sa `inline-flex` visak se deli:
       12,7 / 12,7, uz istu visinu i istu dodirnu povrsinu.

       Pravilo je opste, ne po dugmetu: minimum vazi za SVA dugmad, pa i posledica mora da se
       resava na istom mestu. Ranije je ovde stajao izuzetak samo za „Osvezi" u traci obavestenja. */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* „Osvezi" u traci obavestenja zadrzava legacy meru (29px): mobilni minimum je celu traku dizao
       na 58px umesto 42px. Sporedna radnja u obavestenju, ne radnja na formi. */
    .ds-deploy-resume-action.btn {
        min-height: 0;
    }
}

/* Objasnjenje uz dugme (npr. „Ulazni racuni (SEF)"): sitnije od osnovnog teksta, da se prelomi u
   dva reda UNUTAR visine jednog dugmeta. Ranije je stajalo kao `small` inline tekst iza dugmeta,
   delilo prvi red sa njim i prelamalo se ispod — red je bio 73,7px umesto 45,4. */
.ds-action-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75em;
    line-height: 1.25;
}

/* Strelica sklopivog panela pretrage: bez nje se sa ekrana ne vidi da panel uopste ima sadrzaj —
   izgleda kao obicno dugme. Okrece se preko klase `collapsed`, koju Bootstrap odrzava sam. */
.ds-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-filter-caret {
    margin-left: auto;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.15s ease-in-out;
    /* Kvadratic je zarotiran oko svog centra, pa mu vizuelna sredina bezi nadole; pomeraj vraca
       strelicu na sredinu reda. */
    margin-bottom: 0.15rem;
}

.ds-filter-toggle.collapsed .ds-filter-caret {
    transform: rotate(45deg);
    margin-bottom: 0;
    margin-top: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
    .ds-filter-caret {
        transition: none;
    }
}

/* ============================================================
   ds-proposal — stavka predloga: podaci levo (3/4), iznos i
   radnje u uskoj koloni desno (1/4), jedno ispod drugog.
   Ranije su iznos i dugmad bili ravnopravne flex stavke, pa je
   dug naziv dobavljaca gurao iznos u sredinu a dugmad u treci
   red: izmereno na 390px, leva kolona 110px od 334 (33%).
   ============================================================ */
.ds-proposal-main {
    flex: 3 1 0;
    /* Bez ovoga `text-truncate` na detetu nema efekta: flex stavka se podrazumevano ne skuplja
       ispod svoje najmanje prirodne sirine, pa dug naziv i dalje siri kolonu. */
    min-width: 0;
}

.ds-proposal-side {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    text-align: right;
    /* Minimum je SAMO zastita za vrlo uske ekrane i namerno NE sme da vezuje na 390px: sa 5.5rem
       je desna kolona bila 104px i leva je padala na 66% umesto trazenih 3/4. Sa 4rem minimum ne
       vezuje (isti rezultat kao bez njega), a dugmad se i dalje ne secu.
       Izmereno na 390px: levo 243,2 (73%), desno 81,1 — do punih 75% nedostaje razmak od 8px
       izmedju kolona, koji se i racuna u sirinu reda. */
    min-width: 4rem;
}

/* ============================================================
   ds-pager — paginacija tabelarnog pregleda, u JEDNOM redu
   Vidi DsPagerTagHelper. Meru diktira telefon: na 390px je
   raniji blok sa punim nazivima dugmadi zauzimao cetiri reda
   i 155px visine.
   ============================================================ */
.ds-pager {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0.75rem 0;
}

/* Strelice su kvadratne i jednake: `«` i `»` su siri od `‹` i `›`, pa bi bez fiksne sirine red
   igrao pri promeni strane. */
.ds-pager-step {
    flex: 0 0 auto;
    min-width: 2.2rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    line-height: 1;
}

.ds-pager-go {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

/* Sirina za cetvorocifren broj strane. Bez `min-width: 0` iznad, brojcano polje ne sme da se skupi
   i gura strelice iz reda. */
.ds-pager-input {
    width: 3.6rem;
    flex: 0 0 auto;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Brojcano polje u Chrome-u ima strelice koje kradu ~1rem sirine; ovde su suvisne jer se broj
   upisuje ili se koriste same strelice pagera. */
.ds-pager-input::-webkit-outer-spin-button,
.ds-pager-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ds-pager-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ds-pager-of {
    white-space: nowrap;
    color: var(--dy-muted, #6c757d);
    font-size: var(--ds-text-sm);
}

/* Ukupan broj zapisa je podatak, ne navigacija: prvi odlazi kada mesta nema. */
.ds-pager-count {
    white-space: nowrap;
    margin-left: auto;
}

@media (max-width: 420px) {
    .ds-pager-count {
        display: none;
    }
}

/* ============================================================
   ds-mlist — mobilni prikaz gustih tabela ("priority + expand")
   Kompaktan slog u 2 linije + native <details> detalj na tap.
   Namena: prikazati na malim ekranima (npr. Bootstrap d-md-none),
   dok se na >= md koristi klasicna tabela. Cisto aditivno.
   ============================================================ */
.ds-mlist {
    margin: 0;
    padding-left: 0;
    list-style: none;
    border-top: 1px solid #e4e9ee;
}

.ds-mlist-item {
    border-bottom: 1px solid #e4e9ee;
    background-color: #fff;
}

.ds-mlist-item.is-active {
    background-color: var(--dy-head-blue-soft);
    box-shadow: inset 3px 0 0 var(--dy-blue);
}

.ds-mlist details > summary {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    list-style: none; /* Firefox: sakrij default marker */
    -webkit-tap-highlight-color: transparent;
}

.ds-mlist details > summary::-webkit-details-marker {
    display: none; /* Safari/Chrome: sakrij default marker */
}

.ds-mlist-lead {
    min-width: 0; /* dozvoli ellipsis unutar flex kolone */
    flex: 1 1 auto;
}

.ds-mlist-title {
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Naslov + inline badge (npr. status) u istoj liniji: ime se skraćuje, badge ostaje. */
.ds-mlist-titlerow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.ds-mlist-titlerow .ds-mlist-title {
    flex: 0 1 auto;
}

.ds-mlist-titlerow .badge {
    flex: 0 0 auto;
}

.ds-mlist-meta {
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: var(--ds-text-xs);
    color: var(--bs-secondary-color, #6c757d);
}

.ds-mlist-trail {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

/* Opt-in za legitimno duge istaknute vrednosti (npr. cenovni model po obračunu). */
.ds-mlist-trail.ds-mlist-trail-wrap {
    flex: 0 1 55%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ds-mlist-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ds-mlist-cur {
    font-size: var(--ds-text-xs);
    color: var(--bs-secondary-color, #6c757d);
}

.ds-mlist-caret {
    flex: 0 0 auto;
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #9aa7b2;
    border-bottom: 2px solid #9aa7b2;
    transform: rotate(45deg); /* strelica na dole (zatvoreno) */
    transition: transform 0.15s ease-in-out;
}

.ds-mlist details[open] .ds-mlist-caret {
    transform: rotate(-135deg); /* strelica na gore (otvoreno) */
}

.ds-mlist-detail {
    padding: 0 0.75rem 0.75rem;
}

.ds-mlist-detail dl {
    margin: 0 0 0.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    font-size: var(--ds-text-sm);
}

/* Opt-in: akcija ide desno od podataka umesto ispod njih.
   Na telefonu je vertikalni prostor najskuplji, a dugme u sopstvenom redu trosi celu visinu reda
   iako mu treba samo sirina teksta. Ovako otvorena kartica bude niza za tacno toliko.
   `align-items: start` drzi dugme uz vrh, da ne "pluta" po sredini kad je opis dugacak, a
   `dl { margin-bottom: 0 }` uklanja razmak koji je postojao samo zbog dugmeta ispod. */
.ds-mlist-detail.ds-mlist-detail-inline {
    display: flex;
    align-items: start;
    gap: 0.75rem;
}

.ds-mlist-detail.ds-mlist-detail-inline > dl {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.ds-mlist-detail.ds-mlist-detail-inline > .btn {
    flex: 0 0 auto;
}

.ds-mlist-detail dt {
    font-weight: 400;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6c757d);
}

.ds-mlist-detail dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ds-mlist-money,
.ds-mlist-detail dl.ds-mlist-money {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.15rem 0.75rem;
    font-size: var(--ds-text-sm);
}

.ds-mlist-money dt {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 400;
    min-width: 0;
}

.ds-mlist-money dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Selektabilni red (multi-select liste, npr. dospele rate).
   Ceo red je <label> oko checkbox-a -> tap bilo gde bira ratu. */
.ds-mlist-select {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ds-mlist-select .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
}

.ds-mlist-item.is-selected {
    background-color: var(--dy-head-blue-soft);
    box-shadow: inset 3px 0 0 var(--dy-blue);
}

/* ---- Selektovan/aktivan red: isti marker na svim nivoima prikaza ----
 *
 * ds-mlist (nivo 1) nosi levu plavu liniju + blagu pozadinu (.is-active/.is-selected iznad).
 * Tabele na nivoima 2-5 označavaju isti pojam Bootstrap klasom .table-active — ovde dobijaju
 * identičan tretman, pa korisnik vidi isti vizuelni jezik bez obzira na širinu ekrana.
 * Linija ide na prvu ćeliju: box-shadow na samom <tr> se uz border-collapse ne renderuje pouzdano.
 */
.table tr.table-active {
    --bs-table-active-bg: var(--dy-head-blue-soft);
    --bs-table-active-color: var(--dy-text);
}

.table tr.table-active > td:first-child,
.table tr.table-active > th:first-child {
    box-shadow: inset 3px 0 0 var(--dy-blue);
}

/* Zbirni (footer) red mobilne liste */
.ds-mlist-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    background-color: #f1f5f8;
    border-bottom: 1px solid #e4e9ee;
    font-weight: 600;
}

.ds-mlist-foot .ds-mlist-amount {
    font-weight: 700;
}

/* Ne-proširiv red (kada nema sekundarnih polja ni akcija) — isti raspored kao summary. */
.ds-mlist-static {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
}

/* Akcije (dugmad) unutar detalja mobilnog reda. */
.ds-mlist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---- Odsečen tekst: dva reda umesto jednog ----
 *
 * `text-truncate` (jedan red + „…") je mera za ime, ne za opis. Nalaz korisnika 12.09.2026 na
 * Troškovima: „Deo detalja je čak na najvećem ekranu odsečeno". U dva reda staje oko dvostruko
 * više teksta, a red tabele i dalje ne raste u beskraj — razlika između „skraćeno" i „nedostupno"
 * je u tome da li se ostatak može videti bez otvaranja dokumenta.
 *
 * `-webkit-line-clamp` je jedini način koji radi u svim tekućim pregledačima (Chrome/Edge,
 * Firefox 68+, Safari) — zato `display: -webkit-box`. NE stavljaj klasu na `<td>`: prekida
 * raspored tabele; ide na `<div>` unutar ćelije. Uz nju obavezno `title` sa punim tekstom.
 */
.ds-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Širina ćelije sa opisom. Mera je u `rem` (prati korisničku skalu), a na nivou 5 ima mesta za
   više — standard §2: „dodatne kolone koje inače ne staju". */
.ds-cell-opis {
    max-width: 18rem;
}

@media (min-width: 87.5em) {
    .ds-cell-opis {
        max-width: 26rem;
    }
}

/* ---- Nivo 4 (>= 1200px): ograničenje širine sadržaja ----
 *
 * Standard: docs/ui/adaptive-design.md §2. Na širokom monitoru sadržaj se ne sme razvlačiti u
 * beskraj — razmak od pola ekrana između prve i poslednje kolone je greška, ne neutralno stanje.
 *
 * Klase su OPT-IN: nijedna postojeća stranica ih ne koristi, pa njihovo uvođenje ne menja
 * nijedan trenutni prikaz. Dodaj ih svesno na stranice kojima duga linija smeta.
 *
 * Mera je u `rem`/`ch`, ne u `px` — prati korisničku skalu (ds-ui-scale.css).
 */
.ds-page-narrow {
    max-width: 60rem;
}

/* Za tekstualne blokove: ~75 znakova je gornja granica udobnog čitanja. */
.ds-page-readable {
    max-width: 75ch;
}

/* Centriran sadržaj sa ograničenom širinom (forme, detalji, potvrde). */
.ds-page-narrow.ds-page-centered,
.ds-page-readable.ds-page-centered {
    margin-left: auto;
    margin-right: auto;
}

/* ---- Nivo 5 (≥87.5em / 1400px): master-detail raspored ----
 *
 * Standard: docs/ui/adaptive-design.md §2 — tek na nivou 5 ima dovoljno prostora za trajni
 * bočni panel bez žrtvovanja glavnog sadržaja. Opt-in klasa; ispod nivoa 5 deca ostaju u
 * normalnom toku (detalj iznad liste), pa se ponašanje nivoa 1–4 ne menja.
 *
 * Granica je u `em` (standard §4): prati korisničku ds-ui-scale, pa korisnik sa krupnim
 * prikazom dobija split tek kada za njega stvarno ima mesta.
 *
 * Grid se aktivira samo kada detalj postoji (:has) — lista bez selekcije zadržava punu širinu.
 */
@media (min-width: 87.5em) {
    .ds-page-split:has(> .ds-page-split-detail) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(26rem, 34rem);
        grid-template-areas: "main detail";
        gap: 1.5rem;
        align-items: start;
    }

    .ds-page-split:has(> .ds-page-split-detail) > .ds-page-split-main {
        grid-area: main;
        min-width: 0; /* dozvoli table-responsive skupljanje unutar grid kolone */
    }

    .ds-page-split:has(> .ds-page-split-detail) > .ds-page-split-detail {
        grid-area: detail;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    /* Otvoren detalj oduzima listi oko trećine širine, pa tabela koja je na punoj širini stajala
       počinje horizontalno da skroluje unutar svoje grid kolone. Formalno nema page overflow-a, ali
       poslednje kolone (status, akcija) ispadnu iz vidnog polja — što je za master-detail listu
       upravo ono što ne sme da nestane.

       `ds-split-hide` je opt-in za kolone koje detalj ionako prikazuje za izabrani slog (sporedni
       identifikatori: poziv na broj, izvor). Stranica sama bira šta je sporedno; tema samo daje
       pravilo. Ispod nivoa 5 i bez otvorenog detalja klasa ne radi ništa.

       `!important` je ovde neophodan, ne nemar: kolone nose Bootstrap utility `d-lg-table-cell`, a
       Bootstrap ga generiše kao `display: table-cell !important`. Bez `!important` naše pravilo gubi
       bez obzira na to što ima veću specifičnost. */
    .ds-page-split:has(> .ds-page-split-detail) > .ds-page-split-main .ds-split-hide {
        display: none !important;
    }
}

/* ── Unos datuma (ds-date / ds-datetime) ───────────────────────────────────────────────────────
   Par „tekst + uzak native picker" koji generise <ds-field type="Date"> iz DsFieldTagHelper-a.
   Goli <input type="date"> se ne koristi jer prikazuje datum po kulturi pretrazivaca; standard je
   uvek dd.MM.yyyy (AGENTS.md paragraf 0a). Ponasanje je u js/ds-date.js.

   Payroll, Admin i Sales imaju istovetna pravila jos u svom site.css — ova kopija u temi je za
   module koji nemaju svoj site.css i buduce objedinjavanje; identicna je, pa se ne sudaraju. */
.ds-date-control {
  flex-wrap: nowrap;
}

.ds-date-control .ds-date-input {
  min-width: 0;
  padding-left: .55rem;
  padding-right: .35rem;
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ds-date-control .ds-date-picker {
  flex: 0 0 1.45rem;
  width: 1.45rem;
  min-width: 1.45rem;
  padding: 0;
  text-align: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #fff;
}

.ds-date-control .ds-date-picker::-webkit-calendar-picker-indicator {
  margin: 0 auto;
  padding: 0;
  width: 1rem;
  height: 1rem;
}

.ds-date-control .ds-date-picker::-webkit-datetime-edit,
.ds-date-control .ds-date-picker::-webkit-date-and-time-value {
  display: none;
}

.ds-datetime-control {
  flex-wrap: nowrap;
}

.ds-datetime-control .ds-datetime-input {
  min-width: 0;
  padding-left: .55rem;
  padding-right: .35rem;
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ds-datetime-control .ds-datetime-picker {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  min-width: 1.55rem;
  padding: 0;
  text-align: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #fff;
}

.ds-datetime-control .ds-datetime-picker::-webkit-calendar-picker-indicator {
  margin: 0 auto;
  padding: 0;
  width: 1rem;
  height: 1rem;
}

.ds-datetime-control .ds-datetime-picker::-webkit-datetime-edit,
.ds-datetime-control .ds-datetime-picker::-webkit-date-and-time-value {
  display: none;
}