/* --portal-boja: osnovna boja iz Podešavanja (Izgled portala), postavlja je App.razor */
:root { --portal-boja: #1565c0; }

html, body { font-family: 'Roboto', sans-serif; margin: 0; }

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f7 0%, color-mix(in srgb, var(--portal-boja) 12%, white) 100%);
}

.fld { margin-bottom: 14px; display: flex; flex-direction: column; }
.fld label { font-size: .8rem; color: #555; margin-bottom: 4px; }
input.mud-like {
    padding: 10px 12px;
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
}
input.mud-like:focus { border-color: var(--portal-boja); box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-boja) 15%, transparent); }

.login-btn {
    width: 100%;
    margin-top: 8px;
    padding: 11px;
    background: var(--portal-boja);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}
.login-btn:hover { background: color-mix(in srgb, var(--portal-boja) 80%, black); }
.login-btn.sekundarno { background: transparent; color: var(--portal-boja); border: 1px solid var(--portal-boja); }
.login-btn.sekundarno:hover { background: color-mix(in srgb, var(--portal-boja) 8%, transparent); }

table.sums { border-collapse: collapse; min-width: 260px; }
table.sums td { padding: 3px 8px; }
table.sums td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.sums tr.tot td { font-weight: 700; border-top: 1px solid #ddd; padding-top: 6px; }

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #ffecec; color: #a00;
    padding: 10px 16px; box-shadow: 0 -1px 4px rgba(0,0,0,.2);
}

/* Stavke trebovanja: na telefonu ostaje tabela, bez kolona VP cena/Rabat/Cena */
.stavke-tbl .kol-polje { width: 120px; }
/* ikonica "Ponovi poslednje trebovanje" odmah iza količine, kolona samo koliko ikonica zauzima */
.stavke-tbl .mud-table-cell.kol-ponovi { width: 1%; padding-left: 0 !important; padding-right: 2px !important; }
.stavke-tbl .kol-ponovi .mud-icon-button { padding: 2px; }
@media (max-width: 599.98px) {
    .stavke-tbl .kol-cena { display: none; }
    .stavke-tbl .kol-polje { width: 84px; }
    .stavke-tbl .mud-table-cell { padding: 4px 6px !important; }
    .mud-main-content > .mud-container { padding: 8px !important; }
    .mud-main-content .mud-paper.pa-4 { padding: 10px !important; }
}

/* Gornja traka na telefonu: naziv, ☰ i ikonica Odjava */
.app-naslov { white-space: nowrap; }
/* traka osvežavanja podataka (OsvezenjeTraka) u gornjoj traci; na telefonu skrivena */
.osvezenje { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-right: 20px;
             font-size: .75rem; opacity: .9; white-space: nowrap; }
.osvezenje b { font-weight: 500; }
@media (max-width: 959.98px) { .osvezenje { display: none; } }
.nav-dugme { white-space: nowrap; }
@media (max-width: 599.98px) {
    .app-naslov { font-size: 1rem !important; margin-right: 8px !important; }
    .app-korisnik { display: none; }
    .nav-dugme { min-width: 0 !important; padding: 6px 8px !important; font-size: 0 !important; }
    .nav-dugme .mud-button-icon-start { margin: 0 !important; }
    .nav-dugme .mud-button-icon-start .mud-icon-root { font-size: 1.5rem; }
}

/* Tabele kupaca na početnoj (promet po nedeljama, potraživanja): kolona Kupac zamrznuta levo,
   desno se skroluju samo iznosi; zaglavlje i total zamrznuti, visina tačno 10 redova
   (naziv kupca najviše 2 reda). Širina tabele: --kt-min na samoj tabeli. */
.kupci-tbl { --kt-red: 42px; --kt-zag: 38px; }
.kupci-tbl .mud-table-container { max-height: calc(var(--kt-zag) * 2 + var(--kt-red) * 10); }
.kupci-tbl .mud-table-root { min-width: var(--kt-min, 900px); }
.kupci-tbl .mud-table-head .mud-table-cell,
.kupci-tbl .mud-table-foot .mud-table-cell { height: var(--kt-zag); }
.kupci-tbl .mud-table-body .mud-table-cell { height: var(--kt-red); }
.kupci-tbl .kol-kupac {
    position: sticky; left: 0; z-index: 1;   /* ispod zaglavlja (MudBlazor th: z-index 2) */
    background-color: var(--mud-palette-surface);
    min-width: 160px; max-width: 240px;
    box-shadow: inset -1px 0 0 var(--mud-palette-table-lines);
}
.kupci-tbl .kol-kupac .naziv,
.kupci-tbl .dva-reda {   /* najviše 2 reda, ceo tekst u title */
    font-size: .75rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kupci-tbl .mud-table-cell.kol-nbs { width: calc(7ch + 16px); min-width: calc(7ch + 16px); max-width: calc(7ch + 16px); padding-left: 8px !important; padding-right: 8px !important; white-space: nowrap; text-align: right; }   /* samo broj dana blokade */
.kupci-tbl .mud-table-cell.nbs-blok { background-color: var(--mud-palette-error); color: var(--mud-palette-error-text); font-weight: 600; }
.kupci-tbl .kol-kupac a.naziv { color: var(--mud-palette-primary); text-decoration: none; }
.kupci-tbl .kol-kupac a.naziv:hover { text-decoration: underline; }
.kupci-tbl .mud-table-root .mud-table-head .mud-table-cell.kol-kupac { z-index: 3; }   /* ugao: iznad zaglavlja i iznad kolone */
.kupci-tbl .mud-table-row:hover .kol-kupac {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}
/* iznosi istim sitnijim fontom kao naziv kupca */
.kupci-tbl .mud-table-body .mud-table-cell,
.kupci-tbl .mud-table-foot .mud-table-cell { font-size: .75rem; }
@media (max-width: 599.98px) {
    .kupci-tbl .kol-kupac { min-width: 110px; max-width: 40vw; }
}

/* Trebovanje: sitniji font u zaglavlju, porukama o dugu i predlozima (tabela stavki ostaje) */
.treb-zaglavlje .mud-input,
.treb-zaglavlje .mud-input-slot { font-size: .875rem; }
.treb-zaglavlje .mud-input-label { font-size: .875rem; }
.treb-zaglavlje .mud-grid-item { padding-top: 0 !important; padding-bottom: 0 !important; }
/* polja zaglavlja iste širine: na računaru dele red ravnopravno (4 bez mesta isporuke, 5 sa njim) */
@media (min-width: 960px) { .treb-zaglavlje .treb-polje { flex: 1 1 0; max-width: none; } }
.treb-poruka .mud-alert-message { font-size: .8rem; line-height: 1.35; }
.treb-predlozi .mud-alert-message { font-size: .8rem; line-height: 1.3; padding: 4px 0; }
.treb-predlozi .mud-alert { padding-top: 2px; padding-bottom: 2px; }
.treb-predlozi .detalj { font-size: .72rem; }
.dugme-2reda { line-height: 1.15; text-align: left; }

/* Katalog: kartice kategorija i proizvoda (slike sa sajta firme) */
.katalog-mreza { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.katalog-mreza.proizvodi { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.katalog-kartica {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 10px; border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); text-decoration: none;
    box-shadow: var(--mud-elevation-1); transition: box-shadow .15s;
}
.katalog-kartica:hover { box-shadow: var(--mud-elevation-4); }
.katalog-kartica .slika { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.katalog-mreza.proizvodi .katalog-kartica .slika { height: 90px; }
.katalog-kartica .slika img { max-width: 100%; max-height: 100%; object-fit: contain; }
.katalog-kartica .naziv {
    font-size: .8rem; font-weight: 500; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.katalog-kartica .broj { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
@media (max-width: 599.98px) {
    .katalog-mreza { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .katalog-mreza.proizvodi { grid-template-columns: repeat(2, 1fr); }
}

/* Porudžbine (nabavka): brojčane kolone desno, sporedne kolone se kriju na telefonu */
.kol-br { text-align: right !important; white-space: nowrap; }
.kol-akcije { width: 40px; }
.por-tbl .kol-polje { max-width: 130px; margin-left: auto; }
.oznaka-primarni {
    display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 10px;
    background: #2e7d32; color: #fff; font-size: .72rem; line-height: 1.45; vertical-align: middle; white-space: nowrap;
}
.samo-mob { display: none; }
/* zaglavlja kolona u jednom redu; sporedne kolone samo na širokom ekranu */
.stavke-tbl .mud-table-head .mud-table-cell { white-space: nowrap; }
.por-tbl .mud-table-cell { padding: 6px 8px; }
@media (max-width: 1300px) {
    .kol-sporedno { display: none !important; }
}
/* ćelija artikla: naziv, opis i cene — svaki u jednom redu (ostatak "…", ceo tekst u title) */
.art-naziv, .art-opis, .art-cene { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(26vw, 380px); }
/* treći red: cene; zeleno = kod drugog dobavljača je poslednja cena niža */
.art-cene { line-height: 1.4; color: #444; }
.art-cene .cena-niza { color: #2e7d32; font-weight: 500; }
.art-opis { line-height: 1.4; }
@media (max-width: 760px) {
    .kol-sporedno { display: none !important; }
    .samo-mob { display: inline-block; }
    .samo-desk { display: none !important; }
    /* forma porudžbine na telefonu: 1. red "primarni" + šifra, 2. red naziv; bez opisa ispod */
    .por-tbl .art-opis { display: none !important; }
    .por-tbl .art-naziv { font-size: .8rem; line-height: 1.3; white-space: normal; max-width: 28vw; }
    .por-tbl .art-cene { font-size: .68rem; max-width: 28vw; }
    .por-tbl .cena-oznaka, .por-tbl .cena-datum { display: none; }
    .por-tbl .art-ime { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
    .por-tbl .oznaka-primarni { font-size: .62rem; padding: 0 4px; margin: 0 4px 0 0; }
    .por-tbl .mud-input-numeric-spin { display: none !important; }
    .por-tbl .mud-table-cell { padding: 4px 3px !important; font-size: .8rem; }
    .por-tbl .kol-polje { max-width: 78px; }
}

/* Naslovi svih strana portala (MudText HtmlTag="h1" Class="naslov-strane"): jedna, manja veličina */
.naslov-strane { font-size: 1.2rem !important; font-weight: 500 !important; line-height: 1.3 !important;
                 letter-spacing: 0 !important; margin: 0 0 8px 0 !important; }
.d-flex > .naslov-strane, .pregled-naslov > .naslov-strane { margin: 0 !important; }

/* Forma porudžbine / prijemnice: količina pa JM (odvojeno), prazno umesto 0 */
.kol-unos { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.kol-unos .kol-jm { min-width: 2.2em; text-align: left; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.kol-unos .kol-polje { width: 92px !important; max-width: 92px !important; margin-left: 0 !important; }
@media (max-width: 760px) { .kol-unos .kol-polje { width: 70px !important; max-width: 70px !important; } }
/* prijemnica: zbijene kolone da cena stane (zaglavlja u dva reda, uža količina, sporedne kolone tek na širokom ekranu) */
.por-tbl .mud-table-head .mud-table-cell { white-space: normal; line-height: 1.2; }
.prij-tbl .mud-table-cell { padding: 4px 5px; }
.prij-tbl .art-naziv, .prij-tbl .art-opis, .prij-tbl .art-cene { max-width: min(22vw, 320px); }
.prij-tbl .kol-unos .kol-polje { width: 78px !important; max-width: 78px !important; }
.prij-tbl .kol-cena-unos { width: 104px; min-width: 104px; }
.prij-tbl .cena-polje { width: 100px; max-width: 100px; margin-left: auto; }
@media (max-width: 1600px) { .prij-tbl .kol-sporedno { display: none !important; } }
/* traka akcija forme: Predlog / Ponovi / Sačuvaj sitnijim fontom, tekst u dva reda; na telefonu tri jednaka dugmeta */
.forma-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.forma-akcije .mud-button-root { font-size: .72rem; line-height: 1.15; padding: 3px 10px; min-height: 36px; text-transform: none; }
.forma-akcije .mud-button-root .mud-button-label { white-space: normal; text-align: left; }
.forma-akcije .mud-button-icon-start .mud-icon-root { font-size: 1.1rem; }
.forma-akcije .akcije-tri { display: flex; flex-wrap: nowrap; gap: 6px; }
@media (max-width: 599.98px) {
    .forma-akcije .akcije-tri { flex: 1 1 100%; }
    .forma-akcije .akcija-glavna { flex: 1 1 0; min-width: 0; }
    .forma-akcije .akcija-glavna .mud-button-root { width: 100%; padding: 3px 6px; }
}
/* naslov strane Pregled (nabavka): manji, dugmad za nove dokumente odmah iza */
.pregled-naslov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.pregled-naslov .mud-button-root { font-size: .78rem; }
.red-bez-por td { color: var(--mud-palette-text-secondary); }
/* Podešavanja → Nabavka: tok dokumenata (koji dokument formira koji) */
.dok-tok { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.dok-cvor { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px 10px; min-width: 150px; }
.dok-cvor-naslov { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.dok-cvor-vrste { font-weight: 500; font-size: .9rem; }
.dok-strelica { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .68rem;
                color: var(--mud-palette-text-secondary); padding: 0 2px; }
/* Predlog nabavke: zaglavlja nedelja u dva reda i uži razmak, da tabela stane u prozor bez skrola u desno */
.izv-uzak .izv-tbl th { white-space: normal; vertical-align: bottom; padding: 5px 5px; }
.izv-uzak .izv-tbl td { padding: 4px 5px; }

/* Izveštaji magacina: tekstualni rezultat agenata (poravnate kolone) */
.izv-tekst {
    font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace; font-size: .8rem; line-height: 1.35;
    white-space: pre; overflow: auto; max-height: 70vh; margin: 8px 0 0; padding: 12px;
    background: color-mix(in srgb, var(--portal-boja) 3%, white); border: 1px solid #eee; border-radius: 4px;
}

/* Izveštaj Nabavne cene: kolona artikla i 4 dobavljača; dobavljač u 1. redu, cena u 2.; najniža cena zeleno */
.nc-omot { overflow-x: auto; margin-top: 8px; }
.nc-tbl { border-collapse: collapse; width: 100%; font-size: .85rem; }
.nc-tbl th { text-align: left; font-weight: 500; white-space: nowrap; padding: 6px 8px; border-bottom: 1px solid #e0e0e0; }
.nc-tbl td { padding: 5px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.nc-artikal { min-width: 180px; max-width: 320px; }
.nc-cena { min-width: 150px; max-width: 240px; }
.nc-naziv, .nc-dob { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-dob { font-size: .75rem; color: #555; }
.nc-sitno { font-size: .72rem; color: #888; }
.nc-najniza { background: #e8f5e9; }
.nc-najniza b { color: #2e7d32; }
@media (max-width: 760px) {
    .nc-tbl { font-size: .78rem; }
    .nc-artikal { min-width: 120px; max-width: 150px; }
    .nc-cena { min-width: 100px; max-width: 120px; }
}

/* Izveštaj Lager: redovi grupa, stanje desno, minus crveno */
.lg-grupa td { background: color-mix(in srgb, var(--portal-boja) 9%, white); font-weight: 500; }
.lg-br { text-align: right !important; white-space: nowrap; }
.lg-minus { color: #c62828; font-weight: 500; }
.lg-sifra { white-space: nowrap; width: 80px; }
.lg-naziv { max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .lg-naziv { max-width: 52vw; } }

/* Izveštaj Ispunjenje: puno ispunjeno zeleno, prijemnice u jednom redu */
.isp-puno { color: #2e7d32; font-weight: 500; }
.isp-prijemnice { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bočni meni po modulima (Layout/NavMenu.razor). Na telefonu se otvara dugmetom ☰ (#meni-prekidac, bez JS-a). */
.portal-meni {
    position: fixed; top: var(--mud-appbar-height); left: 0; bottom: 0; width: 240px; z-index: 1100;
    overflow-y: auto; padding: 8px 0 16px;
    background: var(--mud-palette-surface); border-right: 1px solid var(--mud-palette-lines-default);
}
.meni-grupa {
    padding: 14px 20px 4px; font-size: .72rem; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.meni-stavka {
    display: flex; align-items: center; gap: 14px; padding: 8px 20px; font-size: .9rem;
    color: var(--mud-palette-text-primary); text-decoration: none; border-left: 3px solid transparent;
}
.meni-stavka:hover { background: var(--mud-palette-action-default-hover); }
.meni-stavka.active {
    color: var(--portal-boja); font-weight: 500; border-left-color: var(--portal-boja);
    background: color-mix(in srgb, var(--portal-boja) 8%, transparent);
}
body:has(.portal-meni) .sadrzaj { margin-left: 240px; }
.meni-prekidac { position: absolute; opacity: 0; pointer-events: none; }
.meni-dugme { display: none; align-items: center; margin-right: 8px; cursor: pointer; }
a.app-naslov { color: inherit; text-decoration: none; font-size: 1.25rem; font-weight: 500; margin-right: 24px;
               display: inline-flex; align-items: center; gap: 10px; }
.app-logo { height: 36px; max-width: 140px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; }
.login-logo { max-height: 72px; max-width: 240px; object-fit: contain; }
.firma-slika { min-height: 80px; display: flex; align-items: center; justify-content: center;
               background: var(--mud-palette-background-gray); border-radius: 4px; padding: 8px; }
.firma-slika img { max-height: 120px; max-width: 100%; object-fit: contain; }
@media (max-width: 959.98px) {
    .meni-dugme { display: inline-flex; }
    .portal-meni { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--mud-elevation-8); }
    body:has(#meni-prekidac:checked) .portal-meni { transform: none; }
    body:has(.portal-meni) .sadrzaj { margin-left: 0; }
}

/* Bočni meni: drugi nivo (Izveštaji prodaje → izveštaj), <details> bez JS-a */
.meni-podmeni > summary { list-style: none; cursor: pointer; }
.meni-podmeni > summary::-webkit-details-marker { display: none; }
.meni-podmeni > summary .meni-strelica { margin-left: auto; transition: transform .15s; }
.meni-podmeni[open] > summary .meni-strelica { transform: rotate(180deg); }
.meni-podgrupa {
    padding: 8px 20px 2px 54px; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.meni-stavka.meni-stavka-2 { padding: 5px 20px 5px 54px; font-size: .84rem; }

/* Tabela izveštaja (TabelaPrikaz): zaglavlje ostaje gore, grupe preko cele širine, zbir podebljan */
.izv-omot { overflow: auto; max-height: 70vh; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
.izv-tbl { border-collapse: collapse; width: 100%; font-size: .82rem; }
.izv-tbl th {
    position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface); text-align: left; font-weight: 500;
    padding: 6px 8px; border-bottom: 2px solid var(--mud-palette-lines-default); white-space: nowrap;
}
.izv-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.izv-tbl .br { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.izv-tbl td.usko { width: 1%; white-space: nowrap; }
.izv-tbl td .dug { max-width: 360px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.izv-tbl tr.grupa td { background: color-mix(in srgb, var(--portal-boja) 7%, var(--mud-palette-surface)); font-weight: 500; padding-top: 8px; }
.izv-tbl tr.zbir td { font-weight: 700; border-top: 2px solid var(--mud-palette-lines-default); }
.izv-tbl tbody tr:not(.grupa):hover td { background: var(--mud-palette-table-hover); }
.izv-tbl tr.podzbir td { background: color-mix(in srgb, var(--portal-boja) 7%, var(--mud-palette-surface)); font-weight: 600; cursor: pointer; }
.izv-tbl tr.podzbir td.naziv { max-width: 420px; }
.izv-tbl tr.podzbir .znak {
    display: inline-block; width: 1.1em; margin-right: 6px; text-align: center; font-weight: 700; color: var(--portal-boja);
    border: 1px solid currentColor; border-radius: 3px; line-height: 1.05;
}

/* Gusta tabela izveštaja (Ukupna potraživanja): sitnija slova, manji razmaci, ćelija najviše dva reda */
.izv-gusto .mud-table-cell { font-size: .74rem; line-height: 1.2; padding: 2px 6px !important; }
.izv-gusto .mud-table-head .mud-table-cell { font-size: .72rem; font-weight: 600; }
.izv-gusto .mud-table-cell .mud-typography { font-size: inherit; line-height: inherit; }
.izv-gusto .kol-kupac-2 { min-width: 140px; max-width: 240px; }
.izv-gusto .mud-chip { height: 18px; font-size: .68rem; margin: 0; }
/* Kartica kupca: datumi, dokument i iznosi koliko im treba, opis dobija ostatak (najviše dva reda) */
.kartica-tbl .mud-table-cell.kol-usko { width: 1%; white-space: nowrap; }
.blokada-dani {
    display: inline-block; min-width: 2.2em; padding: 0 5px; border-radius: 3px; text-align: center; font-weight: 700;
    background: #c62828; color: #fff; font-variant-numeric: tabular-nums;
}

/* Naziv kupca u tabelama izveštaja: najviše dva reda (ceo naziv u title) */
.kol-kupac-2 { min-width: 160px; max-width: 280px; }
.dva-reda { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; white-space: normal; }

/* Grafikon fakturisano / naplaćeno (GrafikonFaktNapl): boje kao u PDF-u agenta, provereno za daltonizam */
.fn-grafikoni { --fn-fakt: #2563B0; --fn-napl: #D32F2F; --fn-dug: #B3261E; margin-bottom: 12px; }
.fn-zaglavlje { display: flex; align-items: center; gap: 16px; font-size: .78rem; color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.fn-legenda { display: inline-flex; align-items: center; gap: 6px; color: var(--mud-palette-text-primary); }
.fn-legenda i, .fn-oblacic i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.fn-opis { margin-left: auto; }
.fn-omot { position: relative; }
.fn-svg { width: 100%; height: auto; display: block; overflow: visible; }
.fn-svg .fn-mreza { stroke: #E3E7EE; stroke-width: 1; }
.fn-svg .fn-osnova { stroke: #B7C0CE; stroke-width: 1; }
.fn-svg .fn-osa { font-size: 10px; fill: var(--mud-palette-text-secondary); }
.fn-svg .fn-vrednost { font-size: 11px; font-weight: 600; fill: var(--mud-palette-text-primary); }
.fn-svg path.fn-fakt { fill: var(--fn-fakt); }
.fn-svg path.fn-napl { fill: var(--fn-napl); }
.fn-svg .fn-linija { fill: none; stroke: var(--fn-dug); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fn-svg .fn-tacka { fill: var(--fn-dug); stroke: var(--mud-palette-surface); stroke-width: 2; }
.fn-svg .fn-krst { stroke: #B7C0CE; stroke-width: 1; }
.fn-svg .fn-istaknuto { fill: color-mix(in srgb, var(--portal-boja) 6%, transparent); }
.fn-svg .fn-meta { fill: transparent; cursor: crosshair; }
i.fn-fakt { background: var(--fn-fakt); }
i.fn-napl { background: var(--fn-napl); }
i.fn-dug { background: var(--fn-dug); }
.fn-oblacic {
    position: absolute; top: 4px; z-index: 5; pointer-events: none; min-width: 210px; padding: 6px 10px; font-size: .75rem;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); color: var(--mud-palette-text-primary);
}
.fn-oblacic > div { display: flex; align-items: center; gap: 4px; }
.fn-oblacic > div b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.fn-oblacic-naslov { font-weight: 600; margin-bottom: 2px; }

/* CRM kalendar: mreža meseca, tačka = aktivnost (zeleno urađeno, plavo planirano), danas uokviren */
.crm-kal { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.crm-kal th { font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary); text-align: center; }
.crm-kal td { padding: 0; }
.crm-dan {
    position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 52px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; cursor: pointer;
}
.crm-dan:hover { background: var(--mud-palette-table-hover); }
.crm-dan.danas { border: 2px solid #c62828; font-weight: 700; }
.crm-dan.izabran { background: color-mix(in srgb, var(--portal-boja) 14%, var(--mud-palette-surface)); }
.tacka { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
.crm-dan .tacka { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); }
.tacka.uradjeno { background: #2e7d32; }
.tacka.plan { background: #1565c0; }

/* Svi izveštaji: prva kolona (naziv artikla / kupca) zamrznuta pri skrolu udesno.
   TabelaPrikaz (.izv-tbl) uvek; MudTable i ručne tabele unutar .izv-prva (stranice izveštaja prodaje i magacina). */
.izv-tbl th:first-child, .izv-tbl td:first-child,
.izv-prva table > thead > tr > th:first-child,
.izv-prva table > tbody > tr > td:first-child,
.izv-prva table > tfoot > tr > td:first-child {
    position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface);
    box-shadow: inset -1px 0 0 var(--mud-palette-lines-default);
}
.izv-tbl th:first-child, .izv-prva table > thead > tr > th:first-child { z-index: 3; }
.izv-tbl tr.grupa td:first-child, .izv-tbl tr.podzbir td:first-child { box-shadow: none; }
@media (max-width: 599.98px) {
    .izv-tbl td:first-child, .izv-prva table > tbody > tr > td:first-child { max-width: 42vw; }
}

/* Početna komercijaliste: KPI prometa vodi na izveštaj; Puta / Posl. uske da ikonice i SMS stanu u prozor */
.kpi-link { cursor: pointer; }
.kpi-link:hover { box-shadow: var(--mud-elevation-4); }
.nisu-tbl .kol-usko { width: 1%; white-space: nowrap; padding-left: 4px !important; padding-right: 4px !important; font-size: .75rem; }
.nisu-tbl .kol-usko .mud-icon-button { padding: 4px; }
@media (max-width: 599.98px) {
    .nisu-tbl .mud-table-cell { padding: 4px !important; font-size: .78rem; }
}

/* Akcijske cene kupca: šifra uz naziv; na telefonu sitnije, naziv u dva reda — cela tabela u širini ekrana */
.akc-tbl .akc-sifra { color: var(--mud-palette-text-secondary); font-size: .75em; }
.akc-tbl .akc-izvor { font-size: .72rem; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.akc-tbl .akc-a { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); }
.akc-tbl .akc-c { background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent); }
.akc-tbl .mud-table-cell { white-space: nowrap; }
.akc-tbl .mud-table-cell:first-child { white-space: normal; }
@media (max-width: 599.98px) {
    .akc-tbl .mud-table-cell { padding: 3px 4px !important; font-size: .72rem; }
    .akc-tbl .akc-naziv { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .akc-tbl .akc-sifra { display: block; }
    .akc-tbl .akc-izvor { font-size: .62rem; padding: 0 3px; }
}

/* Kupac detaljno: podaci u zaglavlju, traka starosti duga */
.kd-podaci { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .85rem; }
.kd-podaci b { font-weight: 500; color: var(--mud-palette-text-secondary); margin-right: 4px; }
.kd-starost { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; }
.kd-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.kd-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* Sortiranje kolona (MudTableSortLabel AppendIcon): ikonica iza naziva kolone, uvek vidljiva — ↕ dok kolona nije
   sortirana, strelica gore/dole kad jeste */
.mud-table-sort-label .mud-table-sort-label-icon:not(.mud-direction-asc):not(.mud-direction-desc) { display: none; }
.mud-table-sort-label:has(.mud-table-sort-label-icon:not(.mud-direction-asc):not(.mud-direction-desc))::after {
    content: "\2195"; margin-left: 4px; font-size: .95em; color: var(--mud-palette-text-secondary);
}

/* Svaki drugi red svetlo sivo (MudTable Class="zebra"), da se redovi vizuelno razdvoje; hover ostaje jači */
.zebra .mud-table-body .mud-table-row:nth-child(even) { background-color: #f3f3f3; }

/* Dokumenti magacina (porudžbina, prijemnica, povratnica, prenosna, UK, detalj porudžbine): kolona artikla zauzima
   sav slobodan prostor, naziv/opis/cene skraćeni tek na kraju ćelije. Telefon zadržava svoja pravila iznad. */
@media (min-width: 761px) {
    .art-puno .mud-table-body .mud-table-cell:first-child { width: 100%; max-width: 0; }
    .art-puno .art-naziv, .art-puno .art-opis, .art-puno .art-cene { max-width: none; }
}

/* Ispunjenje: prazan sivi red između dobavljača */
.nc-tbl tr.isp-razmak td { background: #e0e0e0; height: 10px; padding: 0; border: none; }