/* ═══════════════════════════════════════════════════════════════════════════════════════════
   miniFolio — KUĆNI STIL (globalno, JEDAN izvor)

   Ovdje idu samo pravila koja vrijede za CIJELU aplikaciju i koja bi se inače ponavljala po
   ekranima (kućno pravilo: centralno, ne po formama). Dva zakona ove datoteke:

   1. BOJE ISKLJUČIVO IZ AKTIVNE PALETE — `var(--mud-palette-*)`, nikad fiksni hex: sve mora
      raditi na svih 8 tema × oba moda (svijetlo/tamno).
   2. Datoteka se učitava POSLIJE `MudBlazor.min.css` (v. App.razor), pa pravilo iste
      specifičnosti pobjeđuje MudBlazorovo bez `!important`. `!important` se koristi samo
      protiv INLINE stila koji komponenta sama upiše (v. tabovi).

   Stilovi app-shella (traka, meni, brand, naziv firme) ostaju u MainLayout.razor — oni su dio
   te komponente, a ne kućni standard ekrana.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Tabovi: kompaktni, „kao u Windowsima" ───────────────────────────────────────────────────
   MudTabs svakom tabu upisuje `min-width` INLINE (parametar `MinimumTabWidth`, tvornički
   160px), pa tabovi s kratkim natpisom („Uloge", „Računi") zauzimaju pola ekrana. Vanjski CSS
   inline stil ne pobjeđuje bez `!important` — zato je ovdje i samo ovdje dopušten.
   90px je i dalje dovoljno za dodir prstom na mobilnom, a scrollable tabovi rade normalno
   (uža ploha = manje potrebe za strelicama). */
.mud-tabs-tabbar .mud-tab {
    min-width: 90px !important;
    padding: 6px 12px;                                 /* MudBlazor default je 6px 14px */
}

/* ── Datumski/vremenski birač: popup ima SVOJU širinu ────────────────────────────────────────
   Simptom (prijava arhitekta, npr. Front office → Transakcije, filtar „Datum od"): popup je točno
   širok kao input i kalendar se prelomi na 4 od 7 stupaca. Nije vezano na preglednik — potvrđeno u
   Edgeu, Chromeu i Firefoxu.

   PRAVI UZROK (iz živog DOM-a, dijagnoza analize): `MudPicker` PROSLJEĐUJE `Style` komponente i na
   PAPIR popupa, pa `.mud-picker-paper.mud-picker-popover-paper` dobije INLINE `width:170px`. Zato
   ovdje treba `width` (ne samo `min-width`) i `!important` — protiv inline stila koji komponenta
   sama upiše; to je druga i jedina dopuštena iznimka u ovoj datoteci.

   Tri promašaja prije ovoga vrijedi zapamtiti, da se ne ponove:
   1. `.mud-picker .mud-popover` — ne radi: `<MudPopoverProvider />` renderira popup na dnu layouta,
      pa popup NIJE potomak pickera (u komponenti ostaje samo prazno sidro).
   2. `.mud-popover.mud-picker-inline-paper` — ne matcha: ta klasa stoji na zasebnom unutarnjem divu,
      a ne na popoveru.
   3. Mjerenje u Chromiumu i „harness" s ručno pisanim DOM-om lažu ako aproksimiraju stvarni DOM;
      dokaz je bio jedino živi DOM iz aplikacije.
   Uz to: NIKAD ne mješati `:has()` (ili drugi novi selektor) u istu selektorsku listu s klasičnim —
   lista je „sve ili ništa", pa nepodržan član odbacuje cijelo pravilo.

   Rješenje je centralno i ne dira ni jedan ekran; vrijedi za sve birače (datum, vrijeme, boja) i u
   dijalozima: širina inputa ostaje stvar ekrana, širina popupa je kućni standard. */
.mud-popover .mud-picker-paper,
.mud-picker-popover-paper {
    width: max-content !important;
    max-width: none !important;
}

/* Veliko brončano zaglavlje popupa („2026 / sub, 11 srp") je iz mobilnog dizajna: u filterima samo
   troši pola popupa, a datum se ionako vidi u inputu. Gasi se SAMO u popup varijanti — statični i
   dijaloški birač (gdje zaglavlje ima smisla) ostaju netaknuti. Nalog arhitekta 2026-08-12. */
.mud-popover .mud-picker-datepicker-toolbar,
.mud-popover .mud-picker-timepicker-toolbar {
    display: none !important;
}

/* Sadržaj birača se ne smije stiskati na širinu okvira (MudBlazor mu daje `max-width:100%`, što uz
   uzak popup prelomi kalendar); vlastita širina kalendara je 310 px i mora se poštovati. */
.mud-popover .mud-picker-content,
.mud-popover .mud-picker-container {
    max-width: none !important;
}

/* ── Traka nad gridom: vizualno odvojena od tablice ──────────────────────────────────────────
   Traka (`ToolBarContent` u MudDataGridu — „Ukupno" + kreacijski gumbi) sjedi na istoj bijeloj
   plohi kao i tablica pa se stapa s njom. Rješenje je ton iz palete + tanka crta:

   • podloga = `Background` nanesen preko `Surface` kartice na 70 % (CSS `color-mix`, isto što i
     `Background` s alfom 0,70). PUN `Background` NE prolazi: outlined Primary gumb u traci piše
     Primary NA TOJ podlozi, a to u temama kadulja/morska-pjena pada na 4,49 / 4,39:1 (ispod AA
     4,5). Na 70 % je najniža vrijednost 4,51:1 — mjereno, i zaključano parom u WCAG gate testu
     („Primary/traka nad gridom" u TemaWcagTests).
   • prva deklaracija je fallback za preglednike bez `color-mix` (čisti `Background`).
   • donja crta = `LinesDefault` (ista crta kojom MudBlazor odvaja redove).

   Pager traka na dnu ima svoju klasu (`mud-table-pagination-toolbar`) pa ju ovo ne dira. */
.mud-table-toolbar {
    background-color: var(--mud-palette-background);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Zaglavlje dijaloga ──────────────────────────────────────────────────────────────────────
   Traka s naslovom i X-om je potamnjena (arhitektu se svidjelo 2026-08-12): na bijeloj plohi se nije
   vidjelo gdje prestaje okvir a počinje sadržaj. Ton i crta su isti kao u traci nad gridom i u traci
   akcija forme — jedan kućni jezik.
   Fallback (bez `color-mix`) je čisti `Background`; oba su iz palete, dakle rade na svim temama. */
.mud-dialog-title {
    background-color: var(--mud-palette-background);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Traka akcija forme (desni rub) ──────────────────────────────────────────────────────────
   Uzor je INKA forma koju je arhitekt poslao 2026-08-13: gumbi u OKOMITOM stupcu uz desni rub,
   visinom forme, na blago potamnjenoj podlozi — zajedno sa zaglavljem dijaloga čine „ljusku" oko
   podataka. `align-self: stretch` daje visinu, unutarnji `mf-akcije-prilijepi` je `sticky` pa gumbi
   ostaju pri ruci i kod duge forme.

   NEMA negativnih margina (bleeda) — dvaput su nas koštale kruga: sadržaj dijaloga ima i okomitu
   traku za skrol (~15px), pa je traka gumba završavala POD njom i bila odrezana, a onda se pojavio i
   vodoravni skrol. Bez bleeda je zbir egzaktan: stupac (`flex:1 1 0`) + gap + traka = širina
   sadržaja, dakle prekoračenja ne može biti. Traka je zato zaobljena kartica uz desni rub — kao u
   INKA formi, gdje stupac gumba također stoji unutar forme, a ne zalijepljen na rub okna. */
.mf-forma-modal {
    gap: 6px;
    overflow-x: hidden;                        /* pojas i tregeri: polja se ionako prelamaju */
    /* Zrak na dnu: `.mud-dialog-content` ima samo 8px donjeg paddinga, pa je zadnja kartica (npr.
       tablica izvršenja) sjedala na sam rub i izgledala odrezano (prijava arhitekta 2026-08-13). */
    padding-bottom: 12px;
}

.mf-akcije-forme {
    /* 156px: najduži natpis („PROLONGIRAJ" s ikonom) staje u 136px unutarnje širine, a ostatak je
       namjerni zrak — arhitekt 2026-08-13 („smanji gumbe još malo"). */
    width: 156px;
    flex: 0 0 156px;
    align-self: stretch;
    border-radius: var(--mud-default-borderradius);
    padding: 8px 10px;
    background-color: var(--mud-palette-background);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
}

.mf-akcije-prilijepi {
    position: sticky;
    top: 8px;
}

/* Prazno mjesto veličine (malog) gumba — odvaja grupe akcija i spušta „Spremi" u ravninu s prvim
   redom podataka. Visina = MudButton Size.Small. */
.mf-prazni-gumb {
    height: 32px;
    flex: 0 0 32px;
}

/* ── BROJČANI STUPAC: podatak i ZAGLAVLJE poravnati isto ─────────────────────────────────────
   Kućno pravilo (arhitekt 2026-08-13): brojevi u gridu idu DESNO — i naslov stupca mora pratiti
   podatke, inače naslov visi na jednoj, a brojevi na drugoj strani. Sve ostalo ostaje lijevo.

   Zato JEDNA klasa umjesto tri `text-align` stila po stupcu; stupac je nosi na sva tri mjesta:
   `CellClass="mf-broj" HeaderClass="mf-broj" FooterClass="mf-broj"` (footer = suma, koja mora sjesti
   točno pod brojeve). Kod `MudTable`/`MudSimpleTable` isto vrijedi za par `MudTh`/`MudTd`. */
.mf-broj {
    text-align: right;
}

/* BROJ SE NE LOMI (arhitekt 2026-09-14): crtica ispred negativnog broja je za preglednik mjesto
   prijeloma, pa je u uskom prozoru minus ostajao u jednom redu, a „0,56" padao u drugi — prinos je
   izgledao kao dvije vrijednosti. Samo ĆELIJE podataka i zbroja (`td`); naslov stupca se i dalje
   smije prelomiti („Broj / udjela"), inače uski prozor dobije preširoke stupce. */
td.mf-broj {
    white-space: nowrap;
}

/* MudDataGrid naslov stupca NIJE običan tekst u ćeliji nego `span.column-header` s
   `display:flex; justify-content:space-between` — na flex kontejner `text-align` ne djeluje, pa je
   naslov ostajao lijevo (mjereno: 24 px prije ruba) dok su brojke stajale uz rub. Klasa je bila
   uredno postavljena i test ju je nalazio; razlika se vidjela samo okom (nalaz arhitekta
   2026-08-30). Zato se naslov gura na kraj — jedno pravilo za sve gridove u aplikaciji.

   Selektor je namjerno „dubok": MudBlazor gura `space-between` kroz
   `.mud-data-grid .mud-table-cell .column-header` (specifičnost 0,3,0), pa kraće pravilo gubi bez
   obzira što je naše. Umjesto `!important` (koji poslije nitko ne može nadjačati) pobjeđujemo
   specifičnošću — klasa `mf-broj` stoji NA ćeliji, pa se lijepi uz `.mud-table-cell`. */
.mud-data-grid .mud-table-cell.mf-broj .column-header,
.mud-data-grid .mud-table-cell.mf-broj .sortable-column-header {
    justify-content: flex-end;
}

/* Kolona koja MIJEŠA tekst i broj (npr. „TW_PRINOS: 0,0123") je po pravilu TEKST i ide lijevo.
   Klasa postoji da se ta odluka VIDI u markupu: bez nje čuvar poravnanja prijavljuje kolonu kao
   brojčanu bez `mf-broj`, pa bi se iznimka rješavala prešućivanjem umjesto deklaracijom. */
.mf-tekst {
    text-align: left;
}

/* ── GUSTOĆA TABLICA (visina retka) iz profila korisnika ─────────────────────────────────────
   Nalog arhitekta 2026-08-13: visina retka je stvar navike, pa je postavka profila
   (`app.korisnik.gustoca_grida`), a ne odluka po ekranu. MainLayout stavi klasu na omotač cijelog
   layouta (uključivo dijaloge), pa ovo hvata SVAKU tablicu bez ijedne izmjene po ekranima.

   Mjere se odnose na MudBlazorov `Dense` grid (tvornički padding 6px = ~37px redak); `normalno` zato
   ništa ne mijenja, a druga dva samo pomiču okomiti padding ćelija i zaglavlja. Vodoravni padding se
   NE dira — poravnanje stupaca ostaje isto u svim gustoćama. */
.mf-gustoca-zbijeno .mud-table-dense * .mud-table-row .mud-table-cell,
.mf-gustoca-zbijeno .mud-table-dense * tr th {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* „Prostrano" nosi i VEĆI FONT (nalog arhitekta 2026-08-13): kad je već izabrana udobnost čitanja,
   sam prored bez slova nije dovoljan. Zbijeno i normalno ostaju na tvorničkom fontu (`body2`). */
.mf-gustoca-prostrano .mud-table-dense * .mud-table-row .mud-table-cell,
.mf-gustoca-prostrano .mud-table-dense * tr th {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: var(--mud-typography-body1-size);
    line-height: var(--mud-typography-body1-lineheight);
}

/* ── ODABRANI redak ──────────────────────────────────────────────────────────────────────────
   Klik bilo gdje na redak ga oboji i tako ostane — to je orijentacija dok se radi (i nakon
   uređivanja u modalu), umjesto „wow" efekta koji se sam gasi.

   NALOG ARHITEKTA 2026-09-20 (screenshot Preuzimanja): na master gridovima se NIJE VIDJELO koji je
   redak odabran. Uzrok: ekrani su selekciju označavali klasom `mud-selected-row`, koja NIJE
   MudBlazorova i nitko je nije stilizirao — klasa je stajala na retku, a izgledalo je kao da
   selekcije nema. Pravilo je zato CENTRALNO i gađa sve pojavnosti odjednom: našu klasu fokusa
   (`mf-redak-fokus`), našu klasu selekcije (`mud-selected-row`) i MudBlazorove vlastite
   (`mud-selected-item` na MudTable, `selected` na MudDataGridu).

   Boja ide IZ PALETE, pa radi na svih osam tema i u tamnom modu; podloga se stavlja na ĆELIJE, jer
   hover MudBlazora boji redak, a ćelija se crta iznad njega. */
.mf-redak-fokus > td,
.mud-table-row.mud-selected-row > td,
.mud-table-row.mud-selected-item > td,
.mud-table-row.selected > td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* Lijevi rub u boji teme — traka koja se vidi i kad je podloga blijeda (tamni mod, niska gustoća).
   Ide SAMO na prvu ćeliju: inset sjena na svakoj ćeliji crtala je okomite crte po granicama
   stupaca (prijava arhitekta 2026-08-12), pa se ta greška ne ponavlja. */
.mf-redak-fokus > td:first-child,
.mud-table-row.mud-selected-row > td:first-child,
.mud-table-row.mud-selected-item > td:first-child,
.mud-table-row.selected > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

/* Modalni okvir: vlastiti X (ugradjeni MudBlazorov zaobilazi „Odustani" put — nalaz testera
   2026-08-29). Stoji u gornjem desnom kutu sadrzaja, iznad polja. */
.mf-modal-okvir {
    position: relative;
}

.mf-modal-x {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
}

/* ── KONTEKSTNA POMOĆ (recept 30-howto §6) ───────────────────────────────────────────────────
   Naslovi imaju razmak od vrha jer ih pozicioniranje gura pod fiksno zaglavlje, a ciljano
   poglavlje se istakne dovoljno da ga oko odmah nađe — ali bez fiksnih boja, da pomoć prati temu. */
.mf-pomoc h1,
.mf-pomoc h2,
.mf-pomoc h3 {
    scroll-margin-top: 88px;
}

.mf-pomoc h2 {
    margin-top: 1.6rem;
}

.mf-pomoc table {
    border-collapse: collapse;
    margin: .5rem 0 1rem;
}

.mf-pomoc th,
.mf-pomoc td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: .35rem .6rem;
}

.mf-pomoc code {
    background: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius);
    padding: .05rem .3rem;
}

.mf-pomoc-cilj {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: var(--mud-default-borderradius);
    box-shadow: -8px 0 0 color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    outline: none;
}