html, body {
    font-family: var(--pc-font, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-size: var(--pc-font-size, 1rem);
}

/* ── Design tokeni (Faza 1.2) ────────────────────────────────────────
   Semantički aliasi na --mud-palette-* + vlastite vrijednosti za
   razmak/radius/sjenu/tranziciju koje MudBlazor ne izlaže. Novi CSS
   PIŠE kroz ove tokene, ne kroz hardkodovane hex/px vrijednosti. ── */
:root {
    --pc-border: var(--mud-palette-divider);
    --pc-surface: var(--mud-palette-surface);
    --pc-radius-card: 10px;
    --pc-radius-input: 6px;
    --pc-space-1: 4px;
    --pc-space-2: 8px;
    --pc-space-3: 12px;
    --pc-space-4: 16px;
    --pc-space-6: 24px;
    --pc-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.12);
    --pc-duration-fast: 120ms;
    --pc-duration-base: 200ms;
    --pc-duration-slow: 300ms;
    --pc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Ikonografija (Faza 4.7) — vrijednosti poravnate s MudBlazor Size enumom
       (Small/Medium/Large) da budu zamjenjive u kontekstima gdje se ikona
       stilizuje kroz CSS (npr. .snp-* nav-panel) umjesto MudIcon Size
       parametra. Koristiti za NOVI kod; postojeći Size="Size.*" pozivi
       ostaju netaknuti. */
    --pc-icon-s: 20px;
    --pc-icon-m: 24px;
    --pc-icon-l: 35px;
}

/* ── Fokus vidljivost (Faza 4.5) ─────────────────────────────────────
   :focus-visible umjesto :focus — outline se ne pojavljuje na mouse-klik,
   samo na tastaturnu navigaciju (Tab), po WCAG 2.4.7. Primijenjeno globalno
   umjesto po-komponenti da pokrije i MudBlazor interne elemente koje ne
   kontrolišemo direktno. Selektor ponovljen (`:focus-visible:focus-visible`)
   radi specifičnosti (0-0-2) — MudBlazor.min.css nosi `button:focus {outline:
   none}` (0-1-1) koji bi inače pobijedio čist `*:focus-visible` (0-0-1) na
   dugmadima/linkovima; provjereno Playwright-om na Login.razor "Prijava"
   dugmetu prije ovog fixa (outline ostajao none i nakon Tab-a). */
*:focus-visible:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── Reduced motion (Faza 4.5) ───────────────────────────────────────
   prefers-reduced-motion: reduce gasi SVE transition/animation (uklj.
   opacity fade) za korisnike koji su to eksplicitno tražili u OS
   postavkama (vestibularni poremećaji i sl.) — WCAG 2.3.3. Standardni
   "0.01ms !important" obrazac umjesto potpunog uklanjanja transition-a
   jer JS koji sluša `transitionend` (ako ga ima) i dalje dobija event. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Globalni row highlight pattern ──────────────────────────────── */
/* Primjenjuje se na svim MudTable komponentama u aplikaciji          */
.selected-row td {
    /* Poluprozirna ružičasta: na svijetloj podlozi = topla ružičasta (kao #fce4ec),
       na tamnoj (dark mode) = suptilan ružičasti ton, nikad bijeli pojas. */
    background-color: rgba(233, 30, 99, 0.15) !important;
}
.selected-row:hover td {
    background-color: rgba(233, 30, 99, 0.28) !important;  /* malo tamnija na hover */
}
/* Ikone u akcijskoj koloni — vidljive SAMO na selektiranom redu (klik selektuje,
   dupli klik/EDIT dugme otvara izmjenu — Rule H, pragmacloud-ui-standards).
   NIKAD na hover — hover-only bio je nekonzistentan sa "jednostruki klik = selekcija"
   principom, dugmad su treperila pri prolasku miša preko reda bez namjere za akciju. */
.row-actions {
    visibility: hidden;
    white-space: nowrap;
}
.selected-row .row-actions {
    visibility: visible;
}
/* Kursor na svim klikabilnim redovima */
.cursor-pointer {
    cursor: pointer;
}

/* ── Role template kartice (Uloge.razor) ── */
.template-card {
    transition: transform var(--pc-duration-fast) var(--pc-ease),
                box-shadow var(--pc-duration-fast) var(--pc-ease),
                background var(--pc-duration-fast) var(--pc-ease);
    user-select: none;
}
.template-card:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    background: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
}

/* ── MudDatePicker: popup minimum width 300px ── */
/* Sprečava da se kalendar prikazuje kao uski stub kad je input polje usko */
.mud-picker-content {
    min-width: 300px !important;
}
/* Input polje date pickera — min width da se prikaže dd.MM.yyyy */
.mud-input-control.mud-datepicker {
    min-width: 155px;
}

/* Desno poravnanje — Class="num-r" na outer div, text-align cascades na <input> */
.num-r,
.num-r input {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* Cifre u tabelama poravnate po širini (finansijski prikaz) */
.mud-table-cell {
    font-variant-numeric: tabular-nums;
}

/* ── Kompaktan mod — gušći prikaz tabela ─────────────────────────────── */
/* Toggle u MainLayout app baru, perzistira u localStorage (pragma_compact) */
.compact-mode .mud-table-dense .mud-table-cell,
.compact-mode .mud-table-cell.mud-table-cell-dense {
    padding: 2px 10px;
    font-size: 0.8125rem;
    line-height: 1.25;
}
.compact-mode .mud-table-toolbar,
.compact-mode .mud-table-pagination-toolbar {
    min-height: 40px;
}
.compact-mode .mud-chip-size-small {
    height: 20px;
    font-size: 0.6875rem;
    padding: 0 6px;
}

/* ── Super kompaktan mod — još gušći prikaz tabela ─────────────────── */
.super-compact-mode .mud-table-dense .mud-table-cell,
.super-compact-mode .mud-table-cell.mud-table-cell-dense {
    padding: 1px 4px !important;
    font-size: 0.75rem !important;
    line-height: 1.15 !important;
}
.super-compact-mode .mud-table-toolbar,
.super-compact-mode .mud-table-pagination-toolbar {
    min-height: 32px !important;
    height: 32px !important;
}
.super-compact-mode .mud-chip-size-small {
    height: 16px !important;
    font-size: 0.625rem !important;
    padding: 0 4px !important;
}
.super-compact-mode .mud-table-cell .mud-button,
.super-compact-mode .mud-table-cell .mud-icon-button {
    padding: 1px !important;
    margin: 0 !important;
}
.super-compact-mode .mud-table-cell .mud-icon-button .mud-icon-button-label .mud-icon {
    font-size: 1.1rem !important;
}

/* ── Kompaktne forme i inputi u compact i super-compact modu ───────── */
.compact-mode #edit-panel .mud-grid-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.compact-mode #edit-panel .mud-input-control {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.super-compact-mode #edit-panel .mud-grid-item {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
.super-compact-mode #edit-panel .mud-input-control {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.super-compact-mode #edit-panel .mud-input-helper-text {
    font-size: 0.65rem !important;
    margin-top: 0 !important;
}
.super-compact-mode #edit-panel .mud-input {
    font-size: 0.8125rem !important;
}
.super-compact-mode #edit-panel .mud-input-label {
    font-size: 0.8125rem !important;
}

/* ── Ultra kompaktan mod — najgušći prikaz tabela ────────────────────── */
/* Faza 4.6 (O4, 2026-08-09): font-size/line-height podignuti na WCAG
   čitljivi minimum (≥12px / 0.75rem, line-height ≥1.15) — prvobitne
   vrijednosti (11px/1.05) bile ispod praga, vidi
   docs/ui-dizajn-analiza-i-akcioni-plan.md nalaz V9. Visina reda i dalje
   najgušća od 4 moda (padding/min-height netaknuti), samo tekst čitljiviji. */
.ultra-compact-mode .mud-table-dense .mud-table-cell,
.ultra-compact-mode .mud-table-cell.mud-table-cell-dense {
    padding: 0px 3px !important;
    font-size: 0.75rem !important;
    line-height: 1.15 !important;
}
.ultra-compact-mode .mud-table-toolbar,
.ultra-compact-mode .mud-table-pagination-toolbar {
    min-height: 26px !important;
    height: 26px !important;
}
.ultra-compact-mode .mud-chip-size-small {
    height: 18px !important;
    font-size: 0.75rem !important;
    padding: 0 3px !important;
}
.ultra-compact-mode .mud-table-cell .mud-button,
.ultra-compact-mode .mud-table-cell .mud-icon-button {
    padding: 0px !important;
    margin: 0 !important;
}
.ultra-compact-mode .mud-table-cell .mud-icon-button .mud-icon-button-label .mud-icon {
    font-size: 0.95rem !important;
}

.ultra-compact-mode #edit-panel .mud-grid-item {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.ultra-compact-mode #edit-panel .mud-input-control {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.ultra-compact-mode #edit-panel .mud-input-helper-text {
    font-size: 0.7rem !important;
    margin-top: 0 !important;
}
.ultra-compact-mode #edit-panel .mud-input {
    font-size: 0.75rem !important;
}
.ultra-compact-mode #edit-panel .mud-input-label {
    font-size: 0.75rem !important;
}

/* ── Kompaktne stavke otpremnice ────────────────────────────────────── */
.otpr-items-paper {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* ── Print layouts (@media print) ── */
@media print {
    /* Sakrij navigaciju, zaglavlja, popovere, dugmad, filtere i upozorenja */
    .mud-appbar,
    .mud-drawer,
    .mud-nav-menu,
    .mud-popover-provider,
    .mud-dialog-provider,
    .mud-snackbar-provider,
    .no-print,
    .mud-button,
    .mud-icon-button,
    .mud-icon,
    .mud-input-control,
    .mud-toolbar,
    .mud-input-underline,
    .mud-select,
    .mud-input,
    .mud-picker-content,
    .mud-alert,
    .mud-chip {
        display: none !important;
    }

    /* Proširi glavni sadržaj preko cijelog ekrana bez margina */
    .mud-main-content {
        padding-top: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    /* Osnovni print stilovi za dokument i tabele */
    body, html {
        background: white !important;
        color: black !important;
        font-family: 'Times New Roman', Times, serif !important;
        font-size: 9.5px !important;
        margin: 0.5cm !important;
        padding: 0 !important;
    }

    /* Osiguraj da se tabele prikazuju preko čitave širine i da se ne prelamaju ružno */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto !important;
        margin-top: 8px !important;
    }

    tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }

    th, td {
        border: 1px solid #111 !important;
        padding: 3px 5px !important;
        color: #111 !important;
        background: transparent !important;
        font-size: 9px !important;
    }

    th {
        font-weight: bold !important;
        background-color: #f0f0f0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        text-align: center !important;
    }

    /* Poravnanja za numeričke kolone u printu */
    .r, td[style*="text-align:right"], th[style*="text-align:right"] {
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
    }

    /* Subtotali i footer stilovi */
    .tot, tfoot tr, .mud-table-foot tr {
        font-weight: bold !important;
        background-color: #e8e8e8 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Sakrij paginaciju u tabelama */
    .mud-table-pagination {
        display: none !important;
    }
}

/* ── Navigacijski prijelaz — sprečava "fullscreen flash" stare stranice ──── */
/* Transition je uvijek aktivan; opacity se mijenja dodavanjem pc-navigating  */
/* klase na MudLayout. CSS animacija vidljiva je čak i kad je _navigating     */
/* aktivan samo 1-2 render frame-a. Trajanje --pc-duration-slow (namjerno    */
/* duže od --pc-duration-base koji koriste hover mikroanimacije).            */
.mud-main-content {
    transition: opacity var(--pc-duration-slow) var(--pc-ease);
}
.pc-navigating .mud-main-content {
    opacity: 0.45;
}

/* ── ModuleNavPanel — Synesis-stil 3-koloni meni ─────────────────────────── */

.snp {
    display: flex;
    height: 100%;
    overflow: hidden;
    font-size: 0.82rem;
}

/* ── Faza 2.5 — mobilna korekcija: setDrawerWidth("520px") (MainLayout.razor)
   postavlja --mud-drawer-width-left kao inline style na <html>, pa fiksni 520px
   ostaje čak i na ekranima užim od toga (drawer prelazi preko cijele širine +
   curi van viewporta). Ovo pravilo cilja stvarni .mud-drawer element (viša
   specifičnost od inline custom property na predaku) i skalira širinu na
   min(100vw, 520px) ispod 960px praga — isti prag koji MainLayout.OnNavLocationChanged
   koristi za auto-close drawera (N12 fix, Faza 2.2).
   SVAKAKO scope-ovano na .nav-drawer (lijevi meni, Anchor.Start) — generički
   .mud-drawer je pogađao i TodoDrawer (desni, Anchor.End, Width=390px) i mijenjao
   mu stvarnu širinu bez mijenjanja MudBlazorovog transform/translate offseta
   računatog za zatvoreno stanje, pa je zatvoreni TodoDrawer curio preko desnog
   ruba ekrana na svakoj stranici (nađeno 2026-08-08, mobile Home screenshot). ── */
@media (max-width: 960px) {
    .nav-drawer {
        width: min(100vw, 520px) !important;
    }
}

/* ── TodoDrawer (desni, Anchor.End, Width="390px" fiksno u TodoDrawer.razor) —
   na uređajima užim od 390px (i s manjim viewportom nego logička širina zbog
   pinch-zoom/URL bara u mobilnim browserima) fiksni 390px i dalje prelazi ekran
   i viri preko desnog ruba, isti simptom kao Faza 2.5 bug iznad, samo drugi
   drawer. width:100vw umjesto min(...,390px) jer je ovo Temporary drawer —
   MudBlazor translira po punoj deklarisanoj širini kad je zatvoren, pa širina
   MORA ostati jedna vrijednost (ne procenat koji se mijenja s viewportom nakon
   što je transform već primijenjen); 100vw je iole veći od 390px stvarnog
   sadržaja, pa se ništa ne siječe. ── */
@media (max-width: 420px) {
    .todo-drawer {
        width: 100vw !important;
    }
}

/* ── Lijeva kolona: Lista modula ── */
.snp-modules {
    flex: 0 0 auto;
    min-width: 112px;
    max-width: 145px;
    border-right: 2px solid var(--mud-palette-primary);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background-gray);
}

.snp-mod-hdr {
    padding: 7px 10px 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--mud-palette-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.snp-mod-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    transition: background var(--pc-duration-fast) var(--pc-ease);
    user-select: none;
}
.snp-mod-item:hover { background: var(--mud-palette-action-hover); }
.snp-mod-active {
    background: var(--mud-palette-primary) !important;
    color: #fff !important;
    font-weight: 700;
}
.snp-mod-ico {
    flex-shrink: 0;
    font-size: 1.05rem;
    opacity: 0.75;
    display: flex;
    align-items: center;
}
.snp-mod-active .snp-mod-ico { opacity: 1; }

/* ── Faza 3.2 — zaključan (bez pretplate) modul u koloni 1 ── */
.snp-mod-locked {
    color: var(--mud-palette-text-disabled);
}
.snp-mod-locked .snp-mod-ico { opacity: 0.4; }
.snp-mod-lock-ico {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.85rem !important;
    opacity: 0.5;
}
.snp-mod-locked.snp-mod-active {
    background: var(--mud-palette-action-hover) !important;
    color: var(--mud-palette-text-disabled) !important;
}

/* ── Faza 3.2 — upsell panel (klik na zaključan modul) ── */
.snp-upsell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    max-width: 380px;
    margin: auto;
}
.snp-upsell-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 6px;
}
.snp-upsell-body {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.snp-version {
    margin-top: auto;
    padding: 6px 10px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    text-align: center;
    flex-shrink: 0;
}

/* ── Section header icons ── */
.snp-sec-hdr {
    display: flex;
    align-items: center;
    gap: 4px;
}
.snp-sec-ico {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0.65;
    display: flex;
    align-items: center;
}

/* ── Desni dio: Ops + Reports ── */
.snp-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.snp-ops {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    border-right: 1px solid var(--mud-palette-divider);
}

.snp-ops:last-child {
    border-right: none;
}

.snp-rpt {
    flex: 0 0 162px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--mud-palette-background-gray);
}

/* ── Zaglavlje kolone (ops/rpt) — isti stil kao snp-mod-hdr ── */
.snp-col-hdr {
    padding: 7px 10px 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--mud-palette-primary);
    border-bottom: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* ── Sekcijska zaglavlja — plavi tekst, lagana pozadina ── */
.snp-sec-hdr {
    padding: 4px 10px 3px;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
    position: sticky;
    top: 28px;
    z-index: 1;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Linkovi ── */
.snp-lnk {
    display: block;
    padding: 3px 10px 3px 14px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--pc-duration-fast) var(--pc-ease);
}
.snp-lnk:hover { background: var(--mud-palette-action-hover); }
.snp-active {
    background: var(--mud-palette-primary-hover) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

/* ── Mobile: sakrij reports kolonu na uskim ekranima ── */
@media (max-width: 500px) {
    .snp-rpt { display: none; }
    .snp-ops { border-right: none; }
}

/* ── Faza 2.6 — Ctrl+K command palette (CommandPalette.razor) ── */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.cmdk-panel {
    width: min(600px, 92vw);
    max-height: 60vh;
    background: var(--mud-palette-surface);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.cmdk-results {
    overflow-y: auto;
    padding: 6px;
}

.cmdk-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.cmdk-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.cmdk-result-ico { opacity: 0.7; flex-shrink: 0; }

.cmdk-result-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cmdk-result-label {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-result-route {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-active {
    background: var(--mud-palette-primary-hover);
}
.cmdk-active .cmdk-result-label { color: var(--mud-palette-primary); font-weight: 600; }

/* ── Kalkulacija: sticky table header ──
   VAŽNO: border-collapse:collapse na tablici blokira position:sticky na <th> u svim
   browserima. Tablica mora koristiti border-collapse:separate;border-spacing:0. */
.kalk-stavke-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--mud-palette-surface) !important;
}

/* ── Kalkulacija: flexbox form rows ── */
.kalk-hdr-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
}

/* Flex items default to min-width:auto, which lets long unbroken content (e.g. a MudSelect's
   selected-item text) force the box WIDER than its flex-basis, breaking row-width math and
   causing unexpected wraps (discovered 2026-07-10: TipDokumenta's real BiH descriptions are
   40+ chars). min-width:0 lets the item shrink to its declared basis; MudBlazor's own
   text-overflow:ellipsis on .mud-input-slot then truncates the overflow visually instead of
   growing the box. Per-item inline min-width (e.g. Opis) still wins — inline beats class. */
.kalk-hdr-row > div {
    min-width: 0;
}

/* Izračunata (read-only) polja u zaglavlju kalkulacije — vizuelno se razlikuju od pravih
   unosnih polja (siva pozadina) da korisnik ne pomisli da su "zaključana" polja za unos.
   !important je potreban — MudBlazor-ov .mud-input-slot inače postavlja transparentnu
   pozadinu direktno na elementu (veća specifičnost/kasnije u cascade-u nego naša klasa). */
.kalk-calc-field .mud-input-slot {
    background-color: rgba(0, 0, 0, 0.06) !important;
    cursor: default;
}
@media (prefers-color-scheme: dark) {
    .kalk-calc-field .mud-input-slot {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
}

/* ── Kalkulacija: compact stavke table rows ── */
.kalk-stavke-table td {
    padding: 0 1px !important;
    vertical-align: middle;
}
.kalk-stavke-table td:first-child {
    padding-left: 3px !important;
}
.kalk-stavke-table .mud-input-control {
    margin-bottom: 0 !important;
}
/* Ista visina za sva polja: smanjujemo padding na outer div-u, fiksna visina na <input>.
   NAPOMENA: height:Npx na .mud-input-root ne funkcionira jer MudBlazor ima padding:10.5px
   na istom elementu (box-sizing:content-box → ukupno 49px+). Pravi pristup: padding → 3px. */
.kalk-stavke-table .mud-input-root {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
/* Input element — 22px + 3+3 padding = 28px ukupno za .mud-input-root */
.kalk-stavke-table input.mud-input {
    height: 22px !important;
    min-height: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.82rem !important;
    line-height: 22px !important;
}
/* Icon gumb (Search) u Article koloni — iste 28px */
.kalk-stavke-table .mud-icon-button {
    height: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 2px !important;
}

/* Duga labela u praznom/nefokusiranom polju (placeholder-stanje, nativno MudBlazor
   ponašanje) može se preklopiti sa unutrašnjom ikonom (kalendar, dropdown strelica)
   na kraju polja. Rezerviše prostor za ikonu i skraćuje tekst na "..." SAMO za
   polja koja imaju end-adornment ikonu, SAMO dok label nije u "shrink" (fokus/
   vrijednost) stanju — 2026-07-08, korisnik i dalje želi nativni placeholder-stil
   svugdje, samo ne kolizija sa ikonom kad je naziv predugačak. */
.mud-input-adorned-end label.mud-input-label-animated:not(.mud-shrink) {
    max-width: calc(100% - 44px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flex layout for MudTabs to propagate height constraint and enable inner scrolling */
.mud-tabs-panels {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.mud-tab-panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden;
}
/* Rule J (2026-08-15) — pc-tabs-panel-scroll: sadržaj tab panela se pomjera
   UNUTRAŠNJIM skrolom (zaglavlje stranice i red tabova ostaju na mjestu).
   Koristi se na stranicama čiji obrasci mogu biti viši od viewporta. */
.pc-tabs-panel-scroll .mud-tab-panel {
    overflow-y: auto !important;
}

/* Compliance kalendar (2026-08-20): MudCheckBox label u Dense tabeli renderuje se
   kao mud-typography-body1 (16px) iako je ostatak tabele 14px — vlasnikov nalaz.
   Dense na MudCheckBox smanjuje samo ikonu, ne i tipografiju labele. */
.kal-cb .mud-typography-body1 {
    font-size: inherit;
}
/* Rule J — pc-tabs-bordered: ista diskretna ivica kao kontejneri sadržaja
   (1px divider, radius 8px, npr. sabloni-sheme) — paneli ispod reda tabova
   dobijaju obrub, toolbar se zaokružuje gore (vlasnik, 2026-08-15). */
.pc-tabs-bordered .mud-tabs-panels {
    border: 1px solid var(--mud-palette-divider);
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.pc-tabs-bordered .mud-tabs-toolbar {
    border-radius: 8px 8px 0 0;
}

/* Prevent page-level scrollbar — full-viewport flex layout */
/* 100vh fallback for browsers without dvh support, 100dvh overrides for correct mobile viewport (address bar) */
html, body { height: 100vh !important; height: 100dvh !important; overflow: hidden !important; }
/* 2026-08-15 — overflow-y:auto umjesto hidden: sadržaj viši od viewporta mora se moći
   skrolati — bez ovoga su stranice bez vlastitog scroll kontejnera (npr.
   /gl/sabloni-sheme) trajno odsijecale sadržaj ispod folda na svim rezolucijama.
   html/body ostaju hidden — jedan scrollbar unutar glavnog sadržaja, appbar/drawer
   ostaju fiksni. Vidi docs/dizajn-layout-viewport-analiza-i-plan-2026-08-15.md. */
.mud-main-content { height: 100vh !important; height: 100dvh !important; overflow-y: auto !important; }

/* /gl/nalozi — force column widths to be respected instead of growing past the
   container (MudTable's Style prop lands on the wrapper div, not <table>, so
   table-layout must be set here). Opis column gets no explicit width — it's
   the one flexible column that absorbs remaining space. */
.nalozi-table table { table-layout: fixed; }

/* /partneri — isti obrazac (korisnikov nalaz 2026-08-17, "nepodnošljivo sporo
   loadovanje" + kolona Naziv/Sjedište bez table-layout:fixed se prelamala u
   više redova umjesto ellipsis, čineći svaki red vrlo visok kad je stranica
   dobila Virtualize="true" + strogo omeđenu visinu). */
.partneri-table table { table-layout: fixed; }

/* /robno/artikli — isti obrazac, korisnikov nalaz 2026-08-18 (tražio istu provjeru
   kao /partneri) — Naziv/Grupa kolone se prelamale (izmjereno: redovi 53px-213px na
   istim podacima), narušavajući Virtualize (traži ujednačenu visinu) + realan
   horizontalni overflow (854px tabela u 798px kontejneru). */
.artikli-table table { table-layout: fixed; }

/* ── pc-card dizajn jezik (Faza 1.3) ──────────────────────────────────
   Preseljeno iz Home.razor page-local <style> — sada dostupno svakoj
   stranici. Border umjesto sjene (skill pragmacloud-ui-standards
   stavka 12); sjena se pojavljuje samo na hover za klikabilne kartice. */
.pc-card {
    border-radius: var(--pc-radius-card);
    border: 1px solid var(--pc-border);
    transition: box-shadow var(--pc-duration-fast) var(--pc-ease),
                transform var(--pc-duration-fast) var(--pc-ease),
                border-color var(--pc-duration-fast) var(--pc-ease);
}
.pc-card-click:hover {
    box-shadow: var(--pc-shadow-hover) !important;
    transform: translateY(-2px);
}
.pc-kpi-label {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}
.pc-kpi-value {
    font-weight: 700;
    line-height: 1.15;
}
.pc-kpi-icon {
    font-size: 1.6rem;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
    margin-left: 12px;
}
.pc-action-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    position: relative;
}
.pc-action-icon {
    font-size: 1.9rem;
    color: var(--mud-palette-text-secondary);
}
.pc-action-pinned {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}
.pc-pin-badge {
    position: absolute;
    top: 6px; right: 10px;
    font-size: 12px;
    color: var(--mud-palette-primary);
    font-weight: 700;
}
.pc-last-used {
    flex-direction: row !important;
    justify-content: flex-start;
}
.pc-last-used:hover { border-color: var(--mud-palette-primary); }

/* ── glass-alert-* — subtle tinted empty-state/notice boxes (Faza 4.4) ──────
   Preseljeno iz 3 duplirana page-local <style> bloka (GL/SabloniShemeKontiranja,
   GL/KnjigeDokumenata, GL/DokumentPregledProknjizavanje) u globalni app.css —
   identičan CSS je bio kopiran u sva tri fajla umjesto dijeljen. Nizak-alfa
   rgba() tint je namjeran (Rule B izuzetak — translucent overlay, ne opaque
   boja), tekst boja ide kroz var(--mud-palette-*) za teme-svjesnost. */
.glass-alert-warning {
    background: rgba(255, 179, 0, 0.08);
    border: 1px solid rgba(255, 179, 0, 0.2);
    border-radius: 12px;
    color: var(--mud-palette-warning-darken);
}
.glass-alert-info {
    background: rgba(3, 169, 244, 0.08);
    border: 1px solid rgba(3, 169, 244, 0.2);
    border-radius: 12px;
    color: var(--mud-palette-info-darken);
}

/* ── pc-kpi-card — KPI kartica sa border+hover-lift (Faza 4.4) ──────────────
   Preseljeno iz 2 duplirana page-local <style> bloka (Backup.razor,
   HR/PlateObracun.razor) u globalni app.css. Rule B ispravka usput: originalni
   hardkodovan rgba(0,0,0,...) border/shadow (crna sjena vidljiva samo na
   svijetloj temi, nevidljiva/pogrešna na tamnoj) → var(--mud-palette-divider)
   border, tema-svjesna sjena. HR/PlateObracun.razor NIJE dirano (aktivan git
   worktree) — zadržava vlastiti (sada redundantan) lokalni blok dok se ne
   spoji, vidi project_ui_dizajn_analiza_akcioni_plan.md. */
.pc-kpi-card {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider) !important;
    background: var(--mud-palette-surface) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    padding: 16px !important;
    transition: transform var(--pc-duration-base, 0.2s) var(--pc-ease, ease),
                box-shadow var(--pc-duration-base, 0.2s) var(--pc-ease, ease);
}
.pc-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
}
.pc-icon-backdrop-purple { background: rgba(123, 31, 162, 0.08); }
.pc-icon-backdrop-blue { background: rgba(25, 118, 210, 0.08); }
.pc-icon-backdrop-green { background: rgba(56, 142, 60, 0.08); }
.pc-icon-backdrop-orange { background: rgba(245, 124, 0, 0.08); }

/* ── pc-login-* — pre-auth stranica shell (Faza 4.4) ─────────────────────────
   Preseljeno iz 5 duplirana page-local <style> bloka (Login, Login2fa, Signup,
   SignupSuccess, Account/SetPassword) u globalni app.css. Svaki fajl je nosio
   bajt-za-bajt identičnu .pc-login-bg/.pc-login-header definiciju (osim
   Login.razor 100dvh vs 100vh — normalizovano na 100dvh, sigurnije na mobile
   Safari toolbar-u). .pc-login-card max-width (400px Login/Login2fa vs 420px
   Signup/SignupSuccess/SetPassword) ostaje lokalna override per-fajl jer se
   stvarno razlikuje. .pc-login-footer font-size/color ovdje su iz 4/5-fajl
   većine — Login2fa.razor je imao propust (nedostajala oba svojstva), sad
   dobija iste kroz zajedničku klasu. */
.pc-login-bg {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary) 50%, var(--mud-palette-primary-lighten) 100%);
    padding: 16px;
}
.pc-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.3);
    overflow: hidden;
}
.pc-login-header {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
    padding: 32px 32px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pc-login-footer {
    text-align: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    padding: 12px 32px 18px;
    border-top: 1px solid var(--mud-palette-divider);
}