/* =========================================================
   § Advokat — "pravnički registar"
   Vizuelni identitet preuzet iz AdvokatskaTarifa.Web.
   Paleta: pergament #F7F5F0, mastilo #1C2430, čelik #5B6472,
           pečat-crvena #8C2F2F, linija #D8D3C8
   Sloj preko Bootstrap-a: palette + tokeni + chrome (masthead,
   panel, tabela, tema). Identity i modulske stranice ostaju
   Bootstrap, ali nasleđuju paletu i tipografiju.
   ========================================================= */
:root {
    --papir: #F7F5F0;
    --mastilo: #1C2430;
    --celik: #5B6472;
    --pecat: #8C2F2F;
    --linija: #D8D3C8;
    --belo: #FFFFFF;
    --uspeh: #2E6B3F;
    --graf-prihod: #1E8449;

    /* mapiranje na Bootstrap tokene (kohezija dugmadi/formi/tabela) */
    --bs-primary: var(--mastilo);
    --bs-body-bg: var(--papir);
    --bs-body-color: var(--mastilo);
    --bs-border-color: var(--linija);
    --bs-link-color: var(--pecat);
    --bs-link-hover-color: var(--mastilo);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--papir);
    color: var(--mastilo);
    font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
}

h1, h2, h3, .brand-title {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--mastilo);
}

h1 { font-size: 1.75rem; margin: 0 0 .35rem; }
/* `FocusOnNavigate Selector="h1"` (Routes.razor) posle svake navigacije stavlja tabindex="-1"
   na naslov i fokusira ga, da čitač ekrana pročita novu stranu. Naslov nije interaktivan i ne
   dobija se tabom, pa taj programski fokus ne treba da crta okvir oko naslova pri učitavanju. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .6rem; border-bottom: 1px solid var(--linija); padding-bottom: .3rem; }
h3 { font-size: 1rem; }

a { color: var(--pecat); text-decoration: none; }
a:hover { color: var(--mastilo); text-decoration: underline; }

.lead { font-size: 1.1rem; color: var(--celik); }
.text-muted, .muted { color: var(--celik) !important; }

/* ---------- zaglavlje (masthead) ---------- */
.masthead {
    position: sticky; top: 0; z-index: 100;
    background: var(--belo);
    border-bottom: 1px solid var(--linija);
    box-shadow: 0 6px 18px -14px rgba(28, 36, 48, .45);
}
/* tanka pečat-crvena linija na samom vrhu — „dosije" akcenat */
.masthead::before {
    content: ""; display: block; height: 3px;
    background: linear-gradient(90deg, var(--pecat), color-mix(in srgb, var(--pecat) 55%, var(--mastilo)));
}
.masthead-inner {
    max-width: 1320px; margin: 0 auto; padding: .7rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-mark {
    font-family: "Fraunces", serif; font-size: 1.65rem; line-height: 1;
    color: var(--pecat); border: 2px solid var(--pecat); border-radius: 50%;
    width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
    transition: transform .18s ease, color .18s ease, border-color .18s ease;
}
.brand:hover .brand-mark { transform: rotate(-5deg); color: var(--mastilo); border-color: var(--mastilo); }
.brand-title { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.2rem; letter-spacing: -.01em; }
.brand-sub { display: block; font-size: .68rem; color: var(--celik); letter-spacing: .08em; text-transform: uppercase; }

/* Navigacija: nekoliko grupa umesto duge liste linkova.
   Grupa = dugme + padajući panel; na mobilnom se panel „razvija" u sekciju. */
.masthead nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: .15rem; }
.nav-glavni { display: flex; align-items: center; gap: .1rem; min-width: 0; }

.masthead nav a, .nav-stavka, .nav-podstavka {
    position: relative; color: var(--celik); text-decoration: none;
    padding: .45rem .7rem; border-radius: 8px; font-weight: 500; white-space: nowrap;
    background: none; border: none; font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: color .12s ease, background-color .12s ease;
}
.masthead nav a:hover, .nav-stavka:hover, .nav-podstavka:hover {
    color: var(--mastilo); background: color-mix(in srgb, var(--mastilo) 6%, transparent); text-decoration: none;
}
.nav-stavka:focus-visible, .nav-podstavka:focus-visible, .nalog-dugme:focus-visible {
    outline: 2px solid var(--pecat); outline-offset: 2px;
}
.masthead nav a.active, .nav-grupa.aktivna > .nav-grupa-dugme { color: var(--pecat); }
.nav-glavni > a.active::after, .nav-grupa.aktivna > .nav-grupa-dugme::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .1rem;
    height: 2px; border-radius: 2px; background: var(--pecat);
}
.nav-strelica {
    width: .38rem; height: .38rem; flex: none; opacity: .65;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translate(-1px, -1px); transition: transform .16s ease;
}
.nav-grupa.otvoreno .nav-strelica { transform: rotate(-135deg) translate(-1px, -1px); }

.nav-grupa { position: relative; }
.nav-grupa-panel {
    display: none; position: absolute; top: calc(100% + .5rem); left: 0; z-index: 120;
    min-width: 12.5rem; padding: .35rem;
    background: var(--belo); border: 1px solid var(--linija); border-top: 2px solid var(--pecat);
    border-radius: 0 0 10px 10px; box-shadow: 0 18px 34px -16px rgba(28, 36, 48, .5);
}
.nav-grupa.otvoreno > .nav-grupa-panel { display: block; }
.nav-grupa-panel-desno { left: auto; right: 0; }
.nav-grupa-panel .nav-podstavka {
    display: flex; width: 100%; text-align: left; color: var(--mastilo);
    font-size: .9rem; font-weight: 400; padding: .5rem .65rem; border-radius: 7px;
}
.nav-grupa-panel .nav-podstavka.active { color: var(--pecat); font-weight: 600; }
.nav-grupa-panel .nav-podstavka.active::after { display: none; }
.nav-grupa-panel form { margin: 0; }
.nav-podela { display: block; height: 1px; margin: .35rem .3rem; background: var(--linija); }

/* nalog: sažet „čip" sa inicijalima umesto tri odvojena linka.
   Stoji u `masthead-alatke`, kao poslednja kontrola zaglavlja — desno od pretrage, uputstava
   i prekidača teme (na mobilnom je desno od njega još samo hamburger). */
.nav-nalog { flex: none; }
.nalog-dugme {
    display: inline-flex; align-items: center; gap: .5rem; max-width: 13rem;
    padding: .25rem .6rem .25rem .3rem; border: 1px solid var(--linija); border-radius: 999px;
    background: var(--belo); color: var(--celik); font: inherit; cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.nalog-dugme:hover { border-color: var(--pecat); color: var(--mastilo); }
.nav-nalog.aktivna .nalog-dugme { border-color: var(--pecat); color: var(--pecat); }
.nalog-avatar {
    width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--pecat) 12%, var(--belo)); color: var(--pecat);
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: .78rem; line-height: 1;
}
.nalog-ime { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nalog-zaglavlje {
    display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem .6rem;
    margin-bottom: .25rem; border-bottom: 1px solid var(--linija);
}
.nalog-zaglavlje-ime { font-size: .88rem; font-weight: 600; color: var(--mastilo); }
.nalog-zaglavlje-kancelarija { font-size: .75rem; color: var(--celik); }

/* gost: registracija je jedini istaknuti poziv na akciju */
.nav-glavni-gost { margin-left: auto; }
.masthead nav a.nav-stavka-cta {
    color: var(--belo); background: var(--pecat); font-weight: 600;
}
.masthead nav a.nav-stavka-cta:hover { color: var(--belo); background: color-mix(in srgb, var(--pecat) 85%, var(--mastilo)); }
.masthead nav a.nav-stavka-cta.active::after { display: none; }

.masthead-alatke { display: flex; align-items: center; gap: .4rem; flex: none; }

/* ---------- globalna pretraga (zaglavlje) ---------- */
.pretraga { position: relative; flex: none; }
.pretraga-polje {
    width: 13rem; max-width: 34vw; height: 2.15rem; padding: 0 .65rem;
    background: var(--belo); border: 1px solid var(--linija); border-radius: 8px;
    color: var(--mastilo); font: inherit; font-size: .88rem;
    transition: border-color .12s ease, width .16s ease;
}
.pretraga-polje::placeholder { color: var(--celik); }
.pretraga-polje:focus { outline: none; border-color: var(--pecat); width: 18rem; }
.pretraga-polje::-webkit-search-cancel-button { cursor: pointer; }

.pretraga-panel {
    position: absolute; top: calc(100% + .45rem); right: 0; z-index: 130;
    width: min(30rem, 88vw); max-height: min(30rem, 70vh); overflow-y: auto;
    padding: .35rem;
    background: var(--belo); border: 1px solid var(--linija); border-top: 2px solid var(--pecat);
    border-radius: 0 0 10px 10px; box-shadow: 0 18px 34px -16px rgba(28, 36, 48, .5);
}
.pretraga-poruka { margin: 0; padding: .7rem .65rem; font-size: .85rem; color: var(--celik); }
.pretraga-jos { border-top: 1px solid var(--linija); font-style: italic; }

.pretraga-grupa + .pretraga-grupa { margin-top: .3rem; border-top: 1px solid var(--linija); padding-top: .3rem; }
.pretraga-grupa-naslov {
    display: block; padding: .35rem .65rem .2rem; font-size: .68rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--celik);
}

.pretraga-red {
    display: flex; align-items: baseline; gap: .55rem; width: 100%; text-align: left;
    padding: .45rem .65rem; border: 0; border-radius: 7px; background: none;
    color: var(--mastilo); font: inherit; cursor: pointer;
}
.pretraga-red:hover, .pretraga-red.izabran { background: color-mix(in srgb, var(--mastilo) 6%, transparent); }
.pretraga-red.izabran { box-shadow: inset 2px 0 0 var(--pecat); }

.pretraga-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.pretraga-naslov { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pretraga-naslov mark { background: color-mix(in srgb, var(--pecat) 16%, transparent); color: inherit; padding: 0; }
.pretraga-podnaslov {
    font-size: .76rem; color: var(--celik);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pretraga-bedz {
    flex: none; align-self: center; min-width: 4.6rem; text-align: center;
    padding: .15rem .4rem; border-radius: 999px; font-size: .66rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid var(--linija); color: var(--celik); background: var(--papir);
}
.pretraga-bedz.pret-predmet, .pretraga-bedz.pret-klijent {
    color: var(--pecat); border-color: color-mix(in srgb, var(--pecat) 35%, transparent);
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
}
.pretraga-bedz.pret-faktura, .pretraga-bedz.pret-trosak {
    color: var(--uspeh); border-color: color-mix(in srgb, var(--uspeh) 35%, transparent);
    background: color-mix(in srgb, var(--uspeh) 7%, var(--belo));
}
/* Sudovi i tužilaštva su referentni podatak, a ne zapis kancelarije — bedž ostaje neutralan
   (mastilo), da se u panelu na prvi pogled razlikuje od pogotka u sopstvenim podacima. */
.pretraga-bedz.pret-sud, .pretraga-bedz.pret-tuzilastvo,
.pretraga-bedz.pret-izvrsitelj, .pretraga-bedz.pret-beleznik {
    color: var(--mastilo); border-color: color-mix(in srgb, var(--mastilo) 30%, transparent);
    background: color-mix(in srgb, var(--mastilo) 6%, var(--belo));
}
.pretraga-oznaka { flex: none; align-self: center; font-size: .72rem; color: var(--celik); white-space: nowrap; }

/* „Prikaži sve rezultate" — poslednji red panela, vodi na /pretraga */
.pretraga-sve {
    margin-top: .3rem; border-top: 1px solid var(--linija); border-radius: 0;
    justify-content: center; color: var(--pecat); font-size: .82rem; font-weight: 600;
}
.pretraga-sve:hover { background: color-mix(in srgb, var(--pecat) 7%, transparent); }

/* ---------- strana /pretraga ---------- */
.pret-filteri { display: flex; flex-wrap: wrap; gap: .4rem; }
.pret-cip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem; border: 1px solid var(--linija); border-radius: 999px;
    background: var(--belo); color: var(--celik); font: inherit; font-size: .82rem; cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.pret-cip:hover { border-color: var(--pecat); color: var(--mastilo); }
.pret-cip.aktivan {
    border-color: var(--pecat); color: var(--pecat); font-weight: 600;
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
}
.pret-cip-broj {
    min-width: 1.4rem; padding: 0 .3rem; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--mastilo) 8%, transparent); font-size: .72rem; font-weight: 600;
}
.pret-cip.aktivan .pret-cip-broj { background: color-mix(in srgb, var(--pecat) 15%, transparent); }

/* Red do kog je korisnik došao iz pretrage (`?istaknuto=…`). Pečat-crvena ivica sa strane i
   bledi ton — dovoljno da oko odmah padne na njega, a da red i dalje izgleda kao deo tabele.
   Boja ostaje dok se strana ne napusti: korisnik treba da vidi šta je našao i posle skrola. */
tr.red-istaknut > td, tr.red-istaknut > th {
    background: color-mix(in srgb, var(--pecat) 9%, transparent) !important;
}
tr.red-istaknut > td:first-child, tr.red-istaknut > th:first-child {
    box-shadow: inset 3px 0 0 var(--pecat);
}
/* Isti ključ isticanja koristi i kalendar — tamo su „redovi" čipovi i blokovi u mreži. */
.kal-dogadjaj.red-istaknut, .kal-cip.red-istaknut {
    outline: 2px solid var(--pecat); outline-offset: 1px; z-index: 3;
}

.red-istaknut { animation: istaknuto-upad .5s ease both; }
@keyframes istaknuto-upad {
    from { background-color: color-mix(in srgb, var(--pecat) 28%, transparent); }
    to { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .red-istaknut { animation: none; }
}

.pret-red-naslov { display: block; }
.pret-red-naslov mark { background: color-mix(in srgb, var(--pecat) 16%, transparent); color: inherit; padding: 0; }
.pret-red-podnaslov { display: block; font-size: .8rem; color: var(--celik); }

button.tema {
    background: none; border: 1px solid var(--linija);
    border-radius: 8px; width: 2.15rem; height: 2.15rem; cursor: pointer;
    color: var(--celik); font-size: .95rem; line-height: 1; flex: none;
    display: grid; place-items: center;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
button.tema:hover { color: var(--pecat); border-color: var(--pecat); background: color-mix(in srgb, var(--pecat) 6%, transparent); }

/* hamburger dugme — vidljivo samo na malim ekranima (v. media upiti na dnu) */
.hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 2.5rem; height: 2.3rem; padding: 0 .55rem; flex: none;
    background: none; border: 1px solid var(--linija); border-radius: 8px; cursor: pointer;
    transition: border-color .12s ease;
}
.hamburger span { display: block; height: 2px; width: 100%; background: var(--mastilo); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hamburger:hover { border-color: var(--pecat); }
.hamburger:hover span { background: var(--pecat); }
.masthead.meni-otvoren .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.masthead.meni-otvoren .hamburger span:nth-child(2) { opacity: 0; }
.masthead.meni-otvoren .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- raspored ---------- */
.page { max-width: 1320px; margin: 1.75rem auto 3rem; padding: 0 1.5rem; }

/* ---------- podnožje (footer) ---------- */
.site-footer { border-top: 3px double var(--mastilo); background: var(--belo); margin-top: 3.5rem; }
.site-footer-inner {
    max-width: 1320px; margin: 0 auto; padding: 2.25rem 1.5rem 1.5rem;
    display: grid; grid-template-columns: 1.8fr repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem;
}
.foot-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.foot-mark {
    font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--pecat);
    border: 2px solid var(--pecat); border-radius: 50%; width: 2rem; height: 2rem;
    display: grid; place-items: center; flex: none;
}
.foot-title { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.05rem; color: var(--mastilo); }
.foot-opis { font-size: .85rem; color: var(--celik); margin: 0; max-width: 36ch; }
.site-footer h3 {
    font-family: inherit; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--celik); margin: 0 0 .8rem; border: none; padding: 0;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer li a { color: var(--mastilo); text-decoration: none; font-size: .9rem; }
.site-footer li a:hover { color: var(--pecat); text-decoration: none; }
.foot-donji {
    border-top: 1px solid var(--linija);
    max-width: 1320px; margin: 0 auto; padding: 1rem 1.5rem 2rem;
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; flex-wrap: wrap;
    font-size: .75rem; color: var(--celik);
}
.foot-donji .foot-disclaimer { flex: 1 1 28ch; max-width: 78ch; }
.foot-donji .foot-veze { display: flex; gap: 1rem; flex: none; }
.foot-donji .foot-veze a { color: var(--celik); }
.foot-donji .foot-veze a:hover { color: var(--pecat); text-decoration: none; }
.foot-donji .foot-copy { white-space: nowrap; flex: none; }

/* ---------- najava usluge „izrada sajtova" (početna, neulogovani) ----------
   Namerno u paleti prezentacione stranice /izrada-sajtova (tamno plavo + tirkiz),
   da se odmah vidi da vodi na drugu uslugu, a ne na deo aplikacije.
   Stoji na kraju početne, kao dodatak — ne preseca glavnu priču o aplikaciji.
   Samostalna je: /izrada-sajtova stil (prezentacija.css) ovde nije učitan. */
.pz-najava {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap;
    margin-top: 1.5rem; padding: 1.6rem 1.75rem; border-radius: 16px;
    background: linear-gradient(135deg, #101A2E 0%, #0A101D 55%, #0C1A22 100%);
    border: 1px solid #26355A;
    color: #EAF0FB;
}
.pz-najava::before {
    content: ""; position: absolute; inset: -60% 55% auto -10%; height: 22rem; pointer-events: none;
    background: radial-gradient(22rem 12rem at 40% 60%, rgba(91, 140, 255, .30), transparent 70%);
}
.pz-najava-tekst { position: relative; min-width: 16rem; flex: 1 1 24rem; }
.pz-najava-oznaka {
    display: inline-block; margin-bottom: .6rem; padding: .25rem .7rem; border-radius: 999px;
    border: 1px solid #33456E; background: rgba(91, 140, 255, .12);
    font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7DE2C3;
}
.pz-najava h2 {
    font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; color: #EAF0FB;
    margin: 0; padding: 0; border: 0;
}
.pz-najava p { margin: .5rem 0 0; font-size: .93rem; color: #A6B4CF; max-width: 46ch; }
.pz-najava-dugme {
    position: relative; flex: none;
    display: inline-flex; align-items: center; padding: .8rem 1.4rem; border-radius: 12px;
    background: linear-gradient(135deg, #5B8CFF, #7DE2C3); color: #06101E;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    box-shadow: 0 10px 26px -14px rgba(91, 140, 255, .95);
    transition: transform .14s ease, box-shadow .14s ease;
}
.pz-najava-dugme:hover {
    color: #06101E; text-decoration: none;
    transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(91, 140, 255, 1);
}
.pz-najava-dugme:focus-visible { outline: 2px solid #7DE2C3; outline-offset: 3px; }
@media (max-width: 620px) {
    .pz-najava { padding: 1.4rem; }
    .pz-najava-dugme { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pz-najava-dugme { transition: none; }
    .pz-najava-dugme:hover { transform: none; }
}

/* ---------- revizijski trag (ko je uneo / poslednji menjao zapis) ---------- */
.revizija-trag {
    margin-top: .75rem; padding-top: .5rem; border-top: 1px dashed var(--linija);
    font-size: .8rem; color: var(--celik); line-height: 1.5;
}
/* U tabeli trag stoji uz sam red, pa mu ne trebaju ni crta ni razmak iznad. */
td > .revizija-trag, .revizija-trag.uz-red {
    margin-top: .15rem; padding-top: 0; border-top: 0;
}
.revizija-razdvojnik { opacity: .6; }

/* ---------- straničar (paginacija ispod tabela) ---------- */
.stranicar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.25rem;
    margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--linija);
    font-size: .85rem; color: var(--celik);
}
.stranicar-info { margin-right: auto; font-variant-numeric: tabular-nums; }
.stranicar-strane { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.stranicar-dugme {
    min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 7px;
    background: none; border: 1px solid var(--linija); color: var(--mastilo);
    font: inherit; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.stranicar-dugme:hover:not(:disabled) { border-color: var(--pecat); color: var(--pecat); }
.stranicar-dugme:disabled { opacity: .4; cursor: default; }
.stranicar-dugme.aktivna {
    border-color: var(--pecat); background: var(--pecat); color: var(--belo); font-weight: 600;
}
.stranicar-dugme:focus-visible { outline: 2px solid var(--pecat); outline-offset: 2px; }
.stranicar-prekid { padding: 0 .15rem; color: var(--celik); }
.stranicar-velicina { display: flex; align-items: center; gap: .45rem; white-space: nowrap; margin: 0; }
.stranicar-velicina select { width: auto; min-width: 4.2rem; }

@media (max-width: 620px) {
    .stranicar { gap: .5rem .75rem; }
    .stranicar-info { flex: 1 1 100%; margin-right: 0; }
    .stranicar-strane { flex: 1 1 auto; }
}

/* ---------- aktivnosti predmeta: oznaka naplativosti ---------- */
.akt-znacka {
    display: inline-block; padding: .12rem .5rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    border: 1px solid var(--linija); color: var(--celik);
}
.akt-znacka.naplativa { border-color: var(--uspeh); color: var(--uspeh); background: color-mix(in srgb, var(--uspeh) 8%, transparent); }
.akt-znacka.nenaplativa { border-color: var(--linija); color: var(--celik); }
.akt-znacka.fakturisana { border-color: var(--pecat); color: var(--pecat); background: color-mix(in srgb, var(--pecat) 8%, transparent); }

/* ---------- dokumenti predmeta: indikator punomoćja ---------- */
.dok-znacka {
    display: inline-block; padding: .12rem .5rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
    border: 1px solid var(--linija); color: var(--celik);
}
.dok-znacka.prilozeno { border-color: var(--uspeh); color: var(--uspeh); background: color-mix(in srgb, var(--uspeh) 8%, transparent); }
/* Isprekidana linija: zapis stoji, ali iza njega nema datoteke. */
.dok-znacka.bez-datoteke { border-style: dashed; border-color: var(--celik); color: var(--celik); }
.dok-znacka.nema { border-color: var(--pecat); color: var(--pecat); background: color-mix(in srgb, var(--pecat) 8%, transparent); }

/* ---------- stavke fakture: prevlačenje (drag & drop) ---------- */
.stavke-tabela tbody tr.stavka-vucem { opacity: .45; }
.stavke-tabela tbody tr.stavka-cilj td { box-shadow: inset 0 2px 0 0 var(--pecat); }
.stavka-hvat {
    cursor: grab; color: var(--celik); font-size: 1.05rem; line-height: 1; text-align: center;
    user-select: none; letter-spacing: -.1em;
}
.stavka-hvat:active { cursor: grabbing; }
.stavka-hvat:hover { color: var(--pecat); }
.stavka-izvor {
    display: inline-block; margin-top: .25rem; font-size: .72rem; color: var(--celik);
}
@media (prefers-reduced-motion: reduce) {
    .stavke-tabela tbody tr.stavka-vucem { opacity: 1; }
}

/* ---------- početna: kontrolna tabla ---------- */
.dash-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.dash-hero .lead { margin: .3rem 0 0; }
.dash-hero-akcije { display: flex; gap: .5rem; flex-wrap: wrap; }

.stat-red { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 800px) { .stat-red { grid-template-columns: repeat(2, 1fr); } }
.stat-kutija {
    background: var(--belo); border: 1px solid var(--linija); border-top: 3px solid var(--pecat);
    padding: 1rem 1.25rem; text-decoration: none; color: inherit; display: block;
}
a.stat-kutija:hover { border-color: var(--pecat); text-decoration: none; }
.stat-broj { font-family: "Fraunces", Georgia, serif; font-size: 2rem; font-weight: 650; color: var(--mastilo); line-height: 1; }
.stat-oznaka { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--celik); margin-top: .35rem; }
.stat-jedinica { font-family: inherit; font-size: .85rem; font-weight: 500; color: var(--celik); }

/* ---------- kancelarija: logo na dokumentima ---------- */
.kanc-logo { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
/* Okvir je fiksne veličine: velika slika se uklapa unutra (contain), a ne razvlači stranu. */
.kanc-logo-pregled {
    background: var(--belo); border: 1px solid var(--linija); padding: .5rem;
    width: 9rem; height: 6rem; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.kanc-logo-pregled img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain;
}
.kanc-logo-znak {
    font-family: "Fraunces", Georgia, serif; font-size: 2rem; color: var(--pecat);
    border: 2px solid var(--pecat); border-radius: 50%; width: 3.2rem; height: 3.2rem;
    display: grid; place-items: center;
}
.kanc-logo-akcije { flex: 1 1 20rem; }

.modul-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .modul-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .modul-grid { grid-template-columns: 1fr; } }
.modul-kartica {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--belo); border: 1px solid var(--linija); padding: 1.25rem;
    text-decoration: none; color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.modul-kartica:hover { border-color: var(--pecat); box-shadow: 0 2px 10px rgba(28,36,48,.08); text-decoration: none; transform: translateY(-1px); }
.modul-ikona {
    font-size: 1.5rem; width: 3rem; height: 3rem; flex: none; display: grid; place-items: center;
    border: 2px solid var(--pecat); border-radius: 50%; color: var(--pecat);
    background: color-mix(in srgb, var(--pecat) 6%, var(--belo));
}
.modul-naslov { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.15rem; color: var(--mastilo); margin: 0 0 .2rem; }
.modul-opis { font-size: .85rem; color: var(--celik); margin: 0; }

.dash-kolone { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .dash-kolone { grid-template-columns: 1fr; } }

.panel-zaglavlje { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.panel-zaglavlje h2 { margin: 0; border: none; padding: 0; }
.panel-zaglavlje a { font-size: .8rem; }

.dash-lista { list-style: none; margin: 0; padding: 0; }
.dash-lista li { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--linija); }
.dash-lista li:last-child { border-bottom: none; }
.dash-primarno { color: var(--mastilo); font-weight: 500; }
.dash-sekundarno { font-size: .8rem; color: var(--celik); }
.dash-datum { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--celik); font-size: .85rem; text-align: right; }
.dash-datum.kasni { color: var(--pecat); font-weight: 600; }
.dash-datum.uskoro { color: var(--mastilo); font-weight: 600; }
.dash-prazno { color: var(--celik); font-style: italic; margin: .25rem 0 0; }
/* Panel koji ne prikazuje sve što bi trebalo (izvor nije odgovorio) — v. KAL-01. */
.dash-upozorenje {
    margin: .25rem 0 .5rem; padding: .4rem .6rem; font-size: .85rem;
    border-left: 3px solid var(--kal-rok, #F07800); color: var(--mastilo);
    background: color-mix(in srgb, var(--kal-rok, #F07800) 10%, transparent);
}
.brze-akcije { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- grafikoni (prosti bar-grafikoni, bez JS biblioteka) ---------- */
.graf-h { display: flex; flex-direction: column; gap: .55rem; }
.graf-h-red { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr minmax(4rem, auto); align-items: center; gap: .6rem; }
.graf-h-labela { font-size: .85rem; color: var(--celik); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.graf-h-traka { position: relative; height: 10px; border-radius: 5px; background: var(--linija); overflow: hidden; }
.graf-h-ispuna { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 5px; min-width: 4px; transition: width .3s ease; }
.graf-h-vrednost { font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--mastilo); white-space: nowrap; }

.graf-v-legenda { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .75rem; font-size: .8rem; color: var(--celik); }
.graf-v-legenda-stavka { display: inline-flex; align-items: center; gap: .4rem; }
.graf-v-legenda-boja { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.graf-v { overflow-x: auto; }
/* Grupe se ne razvlače preko cele širine — ostaju uske i zbijene jedna uz drugu (do 12 meseci). */
.graf-v-plot { display: flex; align-items: flex-end; justify-content: safe center; gap: .2rem; height: 140px; border-bottom: 1px solid var(--linija); padding-bottom: 2px; }
.graf-v-grupa { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.graf-v-par { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; width: 100%; }
.graf-v-stub { width: 13px; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .3s ease; }
.graf-v-labela { margin-top: .4rem; padding: 0 .2rem; font-size: .72rem; color: var(--celik); white-space: nowrap; }

/* ---------- panel (za Home, NemaPristup, buduće module) ---------- */
.panel {
    background: var(--belo); border: 1px solid var(--linija);
    padding: 1.5rem; box-shadow: 0 1px 2px rgba(28,36,48,.05);
}
.panel.narrow { max-width: 640px; margin: 0 auto; }
.panel + .panel { margin-top: 1.5rem; }
.panel.pecat { border-top: 4px solid var(--pecat); }

/* skica (preview) dokumenta — izgled papira */
.skica-papir {
    background: var(--belo); border: 1px solid var(--linija); border-radius: 2px;
    padding: 2rem 2.5rem; max-width: 46rem; margin: 0 auto;
    box-shadow: 0 1px 4px rgba(28,36,48,.08); line-height: 1.6;
}
.skica-papir p { white-space: pre-wrap; word-break: break-word; }
.skica-prazan { margin: 0; height: .6rem; }

/* skica izveštaja o praksi — prati raspored PDF-a (StazPdf) */
.staz-skica { font-size: .9rem; }
.staz-skica-zaglavlje {
    display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    border-bottom: 2px solid var(--mastilo); padding-bottom: .5rem; margin-bottom: 1rem;
}
.staz-skica-logo { display: block; width: auto; height: 2.2rem; max-width: 9rem; object-fit: contain; margin-bottom: .35rem; }
.staz-skica-kancelarija { font-size: 1.15rem; font-weight: 700; }
.staz-skica-podnaslov { color: var(--celik); }
.staz-skica-pripravnik { text-align: right; }
.staz-skica-ime { font-size: 1.05rem; font-weight: 600; }
.staz-skica-sitno { color: var(--celik); font-size: .8rem; }
.staz-skica-prazno { color: var(--celik); font-style: italic; }
.staz-skica-tabela { width: 100%; border-collapse: collapse; }
.staz-skica-tabela th {
    text-align: left; color: var(--celik); font-weight: 600; font-size: .8rem;
    border-bottom: 2px solid var(--mastilo); padding: .25rem .15rem;
}
.staz-skica-podaci td { padding: .5rem .15rem .1rem; vertical-align: top; }
.staz-skica-opis td { border-bottom: 1px solid var(--linija); padding: .1rem .15rem .55rem; }
.staz-skica-opis p { margin: .1rem 0 0; }
.staz-skica-oznaka {
    display: block; color: var(--celik); font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em;
}
.staz-skica-ukupno {
    display: flex; justify-content: space-between; gap: 1rem;
    margin: .9rem 0 0 auto; max-width: 16rem;
    border-top: 2px solid var(--mastilo); padding-top: .35rem;
    color: var(--pecat); font-size: 1.05rem;
}
.staz-skica-podnozje { margin-top: 3rem; }
.staz-skica-potpis {
    border-top: 1px solid var(--mastilo); max-width: 16rem;
    padding-top: .2rem; color: var(--celik); font-size: .8rem;
}
.staz-skica-podnozje p { margin: .5rem 0 0; }

/* naslov reda sa dugmetom desno */
.naslov-red { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.naslov-red h1 { margin: 0; }
/* Strana sa podtabovima naslov reda nosi u h2 (h1 je iznad tabova, v. /imenik). */
.naslov-red h2 { margin: 0; }

/* ---------- forma-zaglavlje: kreiranje vs. postojeći karton ---------- */
.forma-hero {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
    background: var(--belo); border: 1px solid var(--linija);
}
.forma-hero h1 { margin: 0; }
.forma-hero p { margin: .25rem 0 0; color: var(--celik); font-size: .9rem; }
.forma-hero-ikona {
    font-size: 1.55rem; width: 3.25rem; height: 3.25rem; flex: none;
    display: grid; place-items: center; border-radius: 50%; line-height: 1;
}
.forma-hero-akcija { margin-left: auto; align-self: flex-start; }
.forma-hero.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }

/* „nov unos" — zelenkast akcenat, isprekidana linija, znak plus */
.forma-hero--novo {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--uspeh) 45%, var(--linija));
    border-left: 4px solid var(--uspeh);
    background: color-mix(in srgb, var(--uspeh) 5%, var(--belo));
}
.forma-hero--novo .forma-hero-ikona {
    color: var(--uspeh); border: 2px dashed var(--uspeh);
    background: color-mix(in srgb, var(--uspeh) 8%, var(--belo));
}
.panel--novo { border-top: 3px solid var(--uspeh); }

/* „karton" — postojeći dosije: pečat-crveni akcenat, inicijali klijenta */
.forma-hero--dosije { border-top: 4px solid var(--pecat); }
.forma-hero--dosije .forma-hero-ikona {
    color: var(--pecat); border: 2px solid var(--pecat);
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.15rem;
}
.forma-oznaka {
    display: block; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--celik); margin-bottom: .15rem;
}
/* klikabilni redovi tabele */
.table tr[role="button"] { cursor: pointer; }

/* sortabilna zaglavlja tabele */
th.sortiraj { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortiraj:hover { color: var(--pecat); }
th.sortiraj .sort-ind { font-size: .78em; margin-left: .35em; color: var(--celik); opacity: .5; }
th.sortiraj.aktivna { color: var(--mastilo); }
th.sortiraj.aktivna .sort-ind { color: var(--pecat); opacity: 1; }

/* ---------- Bootstrap: dugmad u paleti ---------- */
.btn-primary {
    --bs-btn-bg: var(--mastilo); --bs-btn-border-color: var(--mastilo);
    --bs-btn-hover-bg: var(--pecat); --bs-btn-hover-border-color: var(--pecat);
    --bs-btn-active-bg: var(--pecat); --bs-btn-active-border-color: var(--pecat);
    --bs-btn-color: var(--belo); --bs-btn-hover-color: var(--belo); --bs-btn-active-color: var(--belo);
    font-weight: 600; letter-spacing: .02em; border-radius: 2px;
}
.btn-outline-primary {
    --bs-btn-color: var(--mastilo); --bs-btn-border-color: var(--mastilo);
    --bs-btn-hover-bg: var(--mastilo); --bs-btn-hover-border-color: var(--mastilo); --bs-btn-hover-color: var(--belo);
    --bs-btn-active-bg: var(--mastilo); --bs-btn-active-border-color: var(--mastilo);
    border-radius: 2px;
}
.btn-outline-secondary {
    --bs-btn-color: var(--celik); --bs-btn-border-color: var(--linija);
    --bs-btn-hover-bg: var(--celik); --bs-btn-hover-border-color: var(--celik); --bs-btn-hover-color: var(--belo);
    border-radius: 2px;
}
.btn-outline-danger {
    --bs-btn-color: var(--pecat); --bs-btn-border-color: var(--pecat);
    --bs-btn-hover-bg: var(--pecat); --bs-btn-hover-border-color: var(--pecat); --bs-btn-hover-color: var(--belo);
    --bs-btn-active-bg: var(--pecat); --bs-btn-active-border-color: var(--pecat);
    border-radius: 2px;
}
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--pecat);
    box-shadow: 0 0 0 .2rem rgba(140,47,47,.18);
}

/* ---------- Bootstrap: forme u paleti ---------- */
.form-label { font-size: .78rem; color: var(--celik); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.form-control, .form-select {
    border: 1px solid var(--linija); border-radius: 2px;
    background: var(--papir); color: var(--mastilo);
}
.form-control::placeholder { color: var(--celik); opacity: .7; }

/* ---------- Bootstrap: tabele "registar" izgled ---------- */
.table {
    --bs-table-bg: transparent; --bs-table-color: var(--mastilo);
    --bs-table-striped-bg: rgba(28,36,48,.03); --bs-table-striped-color: var(--mastilo);
    font-size: .92rem;
}
.table > thead th {
    text-align: left; font-size: .72rem; color: var(--celik);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 2px solid var(--mastilo);
}
.table > tbody td { border-bottom: 1px solid var(--linija); vertical-align: middle; }
.table .num, .table .text-end { font-variant-numeric: tabular-nums; }

/* ---------- Bootstrap: alerti u paleti ---------- */
.alert { border-radius: 2px; }
.alert-danger { --bs-alert-color: var(--pecat); --bs-alert-border-color: color-mix(in srgb, var(--pecat) 40%, transparent); --bs-alert-bg: color-mix(in srgb, var(--pecat) 8%, var(--belo)); }
.alert-success { --bs-alert-color: var(--uspeh); --bs-alert-border-color: color-mix(in srgb, var(--uspeh) 40%, transparent); --bs-alert-bg: color-mix(in srgb, var(--uspeh) 8%, var(--belo)); }
.alert-warning { --bs-alert-color: var(--mastilo); --bs-alert-border-color: var(--linija); --bs-alert-bg: var(--papir); }

/* ugnežđena forma (npr. brzi unos predmeta na kartonu klijenta) */
.ugnezdena-forma {
    border: 1px solid var(--linija); border-top: 3px solid var(--pecat);
    background: var(--papir); padding: 1.25rem;
}
.ugnezdena-forma h3 { font-size: 1rem; }

/* ---------- finansije: sažetak naplate fakture ---------- */
.finansije-sazetak {
    border: 1px solid var(--linija); border-radius: 2px; overflow: hidden;
}
.finansije-sazetak > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .5rem .85rem; border-bottom: 1px solid var(--linija);
}
.finansije-sazetak > div:last-child { border-bottom: none; }
.finansije-sazetak > div span { color: var(--celik); font-size: .85rem; }
.finansije-sazetak-preostalo { background: color-mix(in srgb, var(--pecat) 6%, var(--belo)); }
.finansije-sazetak-preostalo strong { color: var(--pecat); }

/* ---------- finansije: dokument fakture (za štampu / prikaz) ---------- */
.faktura-dokument {
    background: var(--belo); border: 1px solid var(--linija);
    padding: 2rem 2.25rem; max-width: 48rem; margin: 0 0 1.5rem;
    box-shadow: 0 1px 4px rgba(28,36,48,.08);
}
.fd-zaglavlje {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    border-bottom: 3px double var(--mastilo); padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.fd-izdavalac { display: flex; align-items: center; gap: .7rem; }
.fd-mark {
    font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; color: var(--pecat);
    border: 2px solid var(--pecat); border-radius: 50%; width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center; flex: none;
}
/* Logo kancelarije stoji na mestu znaka „§" — ista visina, da zaglavlje ne poskoči. */
.fd-logo { width: auto; height: 2.4rem; max-width: 9rem; object-fit: contain; flex: none; }
.fd-kancelarija { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.1rem; color: var(--mastilo); }
.fd-advokat { font-size: .85rem; color: var(--celik); }
.fd-broj { text-align: right; }
.fd-broj-labela { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--celik); }
.fd-broj-vrednost { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.25rem; color: var(--mastilo); margin-bottom: .3rem; }
.fd-meta {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem 1.5rem; margin-bottom: 1.25rem;
    font-size: .9rem; color: var(--mastilo);
}
.fd-meta-labela { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--celik); }
.fd-meta-sitno { font-size: .8rem; color: var(--celik); }
.fd-totali { margin: 1rem 0 .5rem; max-width: 22rem; margin-left: auto; }
.fd-totali > div { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--linija); }
.fd-totali > div span { color: var(--celik); }
.fd-totali-glavni { border-bottom: none !important; border-top: 2px solid var(--mastilo); font-size: 1.1rem; }
.fd-totali-glavni strong { color: var(--pecat); }
.fd-napomena { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--linija); font-size: .85rem; color: var(--celik); white-space: pre-wrap; }

/* podaci za plaćanje + IPS QR */
.fd-placanje {
    display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
    margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--linija);
    border-left: 3px solid var(--pecat); background: var(--papir); border-radius: 2px;
}
.fd-placanje-podaci { font-size: .88rem; color: var(--mastilo); }
.fd-placanje-podaci > div { padding: .1rem 0; }
.fd-placanje-podaci span { color: var(--celik); display: inline-block; min-width: 6.5rem; }
.fd-qr { text-align: center; flex: none; }
.fd-qr img { display: block; width: 150px; height: 150px; border: 1px solid var(--linija); background: #fff; }
.fd-qr-cap { font-size: .68rem; color: var(--celik); margin-top: .3rem; max-width: 150px; }
@media (max-width: 620px) { .fd-meta { grid-template-columns: 1fr; } .faktura-dokument { padding: 1.25rem; } .fd-placanje { flex-direction: column; align-items: flex-start; } }

/* skica (pregled pre čuvanja): isprekidan okvir + bledi kosi vodeni žig iza sadržaja */
.faktura-skica { position: relative; overflow: hidden; border-style: dashed; border-color: var(--celik); }
.faktura-skica > * { position: relative; z-index: 1; }
.faktura-skica::after {
    content: "SKICA"; position: absolute; inset: 0; z-index: 0;
    display: grid; place-items: center; transform: rotate(-22deg);
    font-family: "Fraunces", Georgia, serif; font-weight: 650;
    font-size: clamp(3.5rem, 11vw, 7rem); letter-spacing: .18em;
    color: color-mix(in srgb, var(--pecat) 9%, transparent);
    pointer-events: none; user-select: none;
}

/* ---------- kalkulator roka: rezultat, kalendar, praznici ---------- */

/* rezultat: dan događaja → istek */
.rok-rezultat {
    display: flex; align-items: stretch; gap: .75rem; flex-wrap: wrap;
    border-top: 1px solid var(--linija); padding-top: .85rem;
}
.rok-rezultat-stavka {
    flex: 1 1 12rem; background: var(--papir); border: 1px solid var(--linija);
    border-left: 4px solid var(--celik); padding: .6rem .85rem; border-radius: 2px;
    display: flex; flex-direction: column; gap: .1rem;
}
.rok-rezultat-stavka.istek {
    border-left-color: var(--pecat);
    background: color-mix(in srgb, var(--pecat) 5%, var(--belo));
}
.rok-rezultat-oznaka { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--celik); }
.rok-rezultat-datum {
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.05rem;
    color: var(--mastilo); text-transform: capitalize;
}
.rok-rezultat-strelica { align-self: center; color: var(--celik); font-size: 1.4rem; }

/* mini-kalendar */
.rok-kalendari { display: flex; flex-wrap: wrap; gap: 1rem; }
.rok-kalendar {
    background: var(--belo); border: 1px solid var(--linija); border-radius: 2px;
    padding: .75rem; width: 15.5rem; max-width: 100%;
}
.rok-kal-naslov {
    font-family: "Fraunces", Georgia, serif; font-weight: 650; color: var(--mastilo);
    text-align: center; margin-bottom: .5rem; text-transform: capitalize;
}
.rok-kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rok-kal-dow {
    text-align: center; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--celik); padding-bottom: .2rem; font-weight: 600;
}
.rok-kal-prazno { aspect-ratio: 1; }
.rok-kal-dan {
    aspect-ratio: 1; display: grid; place-items: center; font-size: .8rem;
    border-radius: 3px; color: var(--mastilo); font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.rok-kal-dan.neradan { color: var(--pecat); background: color-mix(in srgb, var(--pecat) 7%, transparent); }
.rok-kal-dan.uopsegu { background: color-mix(in srgb, var(--mastilo) 9%, transparent); }
.rok-kal-dan.uopsegu.neradan { background: color-mix(in srgb, var(--pecat) 13%, transparent); }
.rok-kal-dan.dogadjaj {
    background: var(--mastilo); color: var(--belo); font-weight: 700; border-color: var(--mastilo);
}
.rok-kal-dan.istek {
    background: var(--pecat); color: #fff; font-weight: 700; border-color: var(--pecat);
}

/* legenda */
.rok-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .78rem; color: var(--celik); }
.rok-legenda-stavka { display: inline-flex; align-items: center; gap: .35rem; }
.rok-uzorak { width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid var(--linija); display: inline-block; }
.rok-uzorak.dogadjaj { background: var(--mastilo); border-color: var(--mastilo); }
.rok-uzorak.istek { background: var(--pecat); border-color: var(--pecat); }
.rok-uzorak.uopsegu { background: color-mix(in srgb, var(--mastilo) 9%, transparent); }
.rok-uzorak.neradan {
    background: color-mix(in srgb, var(--pecat) 13%, transparent);
    border-color: color-mix(in srgb, var(--pecat) 30%, transparent);
}

/* pregled primenjenih praznika (čipovi) */
.praznici-pregled { border-top: 1px solid var(--linija); padding-top: .85rem; }
.praznici-naslov { font-weight: 600; color: var(--mastilo); font-size: .9rem; }
.praznici-god-blok { margin-top: .75rem; }
.praznici-god-zaglavlje { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.praznici-god-broj { font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.05rem; color: var(--mastilo); }
.praznici-znacka {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--celik);
    border: 1px solid var(--linija); border-radius: 999px; padding: .1rem .5rem; background: var(--papir);
}
.praznici-znacka.rezerva {
    color: var(--pecat); border-color: color-mix(in srgb, var(--pecat) 35%, transparent);
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
}
.praznik-cipovi { display: flex; flex-wrap: wrap; gap: .5rem; }
.praznik-cip {
    display: flex; align-items: stretch; gap: .5rem; background: var(--belo);
    border: 1px solid var(--linija); border-left: 3px solid var(--pecat); border-radius: 3px;
    padding: .3rem .55rem .3rem .5rem; min-width: 9.5rem;
}
.praznik-cip.vikend { border-left-color: var(--celik); }
.praznik-cip-datum {
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1rem; color: var(--mastilo);
    font-variant-numeric: tabular-nums; display: grid; place-items: center;
}
.praznik-cip-info { display: flex; flex-direction: column; justify-content: center; }
.praznik-cip-naziv { font-size: .82rem; color: var(--mastilo); line-height: 1.2; }
.praznik-cip-dan { font-size: .72rem; color: var(--celik); }

/* ročišta: značka statusa, čipovi podsetnika i inline panel radnje */
.rociste-znacka {
    display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px;
    border: 1px solid var(--linija); background: var(--papir); color: var(--celik);
}
.rociste-znacka.zakazano {
    color: var(--mastilo); border-color: color-mix(in srgb, var(--mastilo) 30%, transparent);
    background: color-mix(in srgb, var(--mastilo) 6%, var(--belo));
}
.rociste-znacka.odrzano {
    color: var(--uspeh); border-color: color-mix(in srgb, var(--uspeh) 35%, transparent);
    background: color-mix(in srgb, var(--uspeh) 8%, var(--belo));
}
.rociste-znacka.odlozeno {
    color: var(--pecat); border-color: color-mix(in srgb, var(--pecat) 35%, transparent);
    background: color-mix(in srgb, var(--pecat) 8%, var(--belo));
}
.rociste-znacka.otkazano { text-decoration: line-through; }
.rociste-podsetnik {
    display: inline-flex; align-items: center; gap: .15rem; margin: 0 .25rem .2rem 0;
    font-size: .72rem; color: var(--celik); background: var(--papir);
    border: 1px solid var(--linija); border-radius: 999px; padding: .05rem .35rem;
    white-space: nowrap;
}
.rociste-podsetnik-x {
    border: 0; background: none; padding: 0 0 0 .1rem; line-height: 1;
    color: var(--pecat); font-size: .9rem; cursor: pointer;
}
.rociste-podsetnik.za-klijenta {
    color: var(--pecat); border-color: color-mix(in srgb, var(--pecat) 35%, transparent);
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
}
.rociste-panel {
    background: var(--papir); border: 1px solid var(--linija);
    border-left: 3px solid var(--pecat); padding: .75rem .9rem; border-radius: 2px;
}

/* predmet: izbor vrsta obaveštenja klijentu, uvučen ispod glavnog prekidača */
.obavestenja-izbor {
    margin: .5rem 0 0 1.6rem; padding-left: .9rem;
    border-left: 2px solid var(--linija);
}
.obavestenja-izbor .form-check { margin-bottom: .4rem; }

/* praćenje: značka „dospeo" i paneli za unos statusa/podsetnik */
.pracenje-znacka {
    display: inline-block; margin-left: .4rem; font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; padding: .05rem .4rem; border-radius: 999px;
}
.pracenje-znacka.dospeo {
    color: var(--pecat); border: 1px solid color-mix(in srgb, var(--pecat) 35%, transparent);
    background: color-mix(in srgb, var(--pecat) 8%, var(--belo));
}
.pracenje-panel {
    background: var(--papir); border: 1px solid var(--linija);
    border-left: 3px solid var(--pecat); padding: .85rem 1rem; border-radius: 2px;
}
/* više prostora za kolonu „Sud / organ" u tabeli praćenja */
.table th.sud-organ, .table td.sud-organ { min-width: 15rem; }

/* ---------- imenik institucija: sudovi i tužilaštva (/imenik) ---------- */
.sud-naziv mark { background: color-mix(in srgb, var(--pecat) 16%, transparent); color: inherit; padding: 0; }

/* Kartica suda: labela u levoj koloni, vrednost u desnoj; na mobilnom jedna ispod druge. */
.sud-podaci {
    display: grid; grid-template-columns: 11rem 1fr; gap: .35rem 1rem; margin: 0;
}
.sud-podaci dt { color: var(--celik); font-weight: 600; font-size: .82rem; padding-top: .1rem; }
.sud-podaci dd { margin: 0; }

/* Kompaktna varijanta (karton predmeta): uža kolona labela, jer panel deli širinu sa ostalim
   delovima kartona i nosi samo adresu i kontakte. */
.sud-podaci.sud-podaci-kompaktna { grid-template-columns: 7rem 1fr; gap: .25rem 1rem; }

.sud-kontakti { list-style: none; margin: 0; padding: 0; }
.sud-kontakti li + li { margin-top: .2rem; }
.sud-oznaka { color: var(--celik); font-size: .82rem; }

/* Veza „Navigacija" uz adresu — sporedna radnja, pa je manja od adrese i ne prelama red.
   Koristi se i na kartici suda i u detaljima termina u kalendaru. */
.mapa-veza { margin-left: .5rem; font-size: .82rem; white-space: nowrap; }

/* Mapa sedišta suda (ugnježdeni OpenStreetMap). Visina je fiksna da okvir ne poskakuje
   dok se pločice učitavaju. */
.sud-mapa { margin-top: 1rem; }
.sud-mapa-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sud-mapa-okvir {
    display: block; width: 100%; height: 18rem; border: 1px solid var(--linija);
    border-radius: .4rem; margin-bottom: .4rem;
}

@media (max-width: 560px) {
    .sud-mapa-okvir { height: 14rem; }
}

@media (max-width: 560px) {
    .sud-podaci { grid-template-columns: 1fr; gap: .1rem; }
    .sud-podaci dd { margin-bottom: .55rem; }
}

/* =========================================================
   Kalendar — objedinjeni prikaz termina (scope: .kal-*)
   Mreža radnih sati 07:00–20:00, nedelja počinje ponedeljkom.
   Boja nosi tip događaja: ročište = crvena, rok = narandžasta,
   praćenje = plava, lični događaj = zelena.
   ========================================================= */
:root {
    /* Tipovi događaja: četiri jarka, međusobno daleka tona (crvena → narandžasta →
       zelena → plava) da se vrsta termina prepozna na prvi pogled. */
    --kal-rociste: #E01B24;
    --kal-rok: #F07800;
    --kal-pracenje: #1668E3;
    --kal-licni: #0FA958;
    --kal-slot: 1.35rem;      /* visina pola sata u mreži */
}
:root.tamna {
    /* Na tamnoj podlozi isti tonovi, samo svetliji — jarka boja tu inače „bliješti". */
    --kal-rociste: #FF6B6B;
    --kal-rok: #FFAE3A;
    --kal-pracenje: #63A8FF;
    --kal-licni: #3ED987;
}

.kal-panel { padding: 1rem 1.25rem 1.25rem; }

/* akcije u naslovu (izvoz + novi događaj) */
.kal-naslov-akcije { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.kal-izvoz { display: flex; align-items: center; gap: .35rem; }

/* ---------- alatna traka ---------- */
.kal-alatka {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.kal-kretanje { display: flex; align-items: center; gap: .35rem; }
.kal-naslov {
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1.15rem;
    color: var(--mastilo); margin-left: .5rem; text-transform: capitalize;
}

/* ---------- filteri po tipu ---------- */
.kal-filteri {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem;
    border-top: 1px solid var(--linija); border-bottom: 1px solid var(--linija);
    padding: .5rem 0; margin-bottom: .75rem; font-size: .85rem;
}
.kal-filter { display: inline-flex; align-items: center; gap: .4rem; color: var(--celik); cursor: pointer; }
.kal-filter.ukljucen { color: var(--mastilo); }
.kal-filter .form-check-input { margin: 0; }
.kal-uzorak {
    width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; flex: none;
    background: var(--kal-boja, var(--celik));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mastilo) 18%, transparent);
}
/* Isključen filter: uzorak prigušen, da se odmah vidi šta je sklonjeno. */
.kal-filter:not(.ukljucen) .kal-uzorak { opacity: .3; }
.kal-ucitavanje { color: var(--celik); font-size: .85rem; margin-left: auto; }

/* ---------- kalendari kolega (vlasnik i advokat) ---------- */
/* Filteri po tipu i kolege su jedna celina („šta se prikazuje") — razmak nosi samo poslednji red. */
.kal-izbor > :not(:last-child) { margin-bottom: 0; }

.kal-kolege {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem;
    border-bottom: 1px solid var(--linija); padding: .5rem 0; margin-bottom: .75rem;
    font-size: .85rem;
}
.kal-kolege-oznaka {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--celik);
}
.kal-kolega { display: inline-flex; align-items: center; gap: .4rem; color: var(--celik); cursor: pointer; }
.kal-kolega.ukljucen { color: var(--mastilo); }
.kal-kolega .form-check-input { margin: 0; }
.kal-kolega-ime { overflow: hidden; text-overflow: ellipsis; max-width: 12rem; white-space: nowrap; }
.kal-kolege-ocisti { margin-left: auto; padding: 0; font-size: .8rem; }

/* Inicijali kolege — uz kvačicu i uz svaki njen termin u mreži. */
.kal-inicijali {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .2rem; border-radius: 3px;
    font-size: .62rem; font-weight: 700; letter-spacing: .02em;
    background: color-mix(in srgb, var(--mastilo) 12%, transparent); color: var(--mastilo);
}
.kal-kolega:not(.ukljucen) .kal-inicijali { opacity: .45; }

/* Tuđ termin: isprekidana ivica i blaža podloga, da se na prvi pogled razlikuje od svog. */
.kal-dogadjaj.kal-tudje, .kal-cip.kal-tudje {
    border-style: dashed;
    border-left-style: solid;
    background: color-mix(in srgb, var(--kal-boja) 10%, var(--belo));
}
.kal-dogadjaj.kal-tudje:hover, .kal-cip.kal-tudje:hover {
    background: color-mix(in srgb, var(--kal-boja) 20%, var(--belo));
}
.kal-tudje .kal-inicijali {
    background: color-mix(in srgb, var(--kal-boja) 35%, var(--belo)); color: var(--kal-tekst);
    height: 1rem; min-width: 1rem; font-size: .58rem;
}

/* Boja po tipu — jedna promenljiva nosi i uzorak, i traku, i čip.
   --kal-tekst je ista boja povučena ka mastilu (na tamnoj temi ka svetlom), da sitan
   tekst na obojenoj podlozi ostane čitak iako je osnovni ton jarak. */
.tip-rociste, .tip-rok, .tip-pracenje, .tip-licni {
    --kal-tekst: color-mix(in srgb, var(--kal-boja) 68%, var(--mastilo));
}
.tip-rociste { --kal-boja: var(--kal-rociste); }
.tip-rok { --kal-boja: var(--kal-rok); }
.tip-pracenje { --kal-boja: var(--kal-pracenje); }
.tip-licni { --kal-boja: var(--kal-licni); }

/* ---------- mreža: dnevni / nedeljni prikaz ---------- */
.kal-omot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kal-mreza { min-width: 44rem; border: 1px solid var(--linija); background: var(--belo); }
.kal-red { display: grid; grid-template-columns: 3.6rem repeat(var(--kal-dana), minmax(0, 1fr)); }
.kal-red-zaglavlje { border-bottom: 1px solid var(--linija); background: var(--papir); }
.kal-red-celodnevni { border-bottom: 2px solid var(--linija); }

.kal-dan-zaglavlje {
    padding: .4rem .5rem; text-align: center; border-left: 1px solid var(--linija);
    display: flex; flex-direction: column; gap: .1rem;
}
.kal-dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--celik); }
.kal-datum {
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: 1rem;
    color: var(--mastilo); font-variant-numeric: tabular-nums;
}
.kal-dan-zaglavlje.danas { background: color-mix(in srgb, var(--pecat) 8%, var(--belo)); }
.kal-dan-zaglavlje.danas .kal-datum, .kal-dan-zaglavlje.danas .kal-dow { color: var(--pecat); }

.kal-osa {
    background: var(--papir); font-size: .68rem; color: var(--celik);
    font-variant-numeric: tabular-nums; text-align: right;
}
.kal-osa-oznaka {
    display: flex; align-items: center; justify-content: flex-end;
    padding: .2rem .35rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
}
.kal-osa-sat { height: calc(2 * var(--kal-slot)); padding: 0 .35rem; border-top: 1px solid var(--linija); }
.kal-osa-sat:first-child { border-top: none; }

.kal-celodnevni-celija {
    border-left: 1px solid var(--linija); padding: .2rem; min-height: 1.9rem;
    display: flex; flex-direction: column; gap: .15rem; cursor: pointer;
}
.kal-celodnevni-celija.danas { background: color-mix(in srgb, var(--pecat) 4%, transparent); }

/* --kal-slotova = broj polučasovnih redova; postavlja ga strana, jer se mreža širi na sate
   koje prikazani dani zaista traže (26 = podrazumevanih 07:00–20:00). */
.kal-dan-telo {
    position: relative; border-left: 1px solid var(--linija);
    display: grid; grid-template-rows: repeat(var(--kal-slotova, 26), var(--kal-slot));
    height: calc(var(--kal-slotova, 26) * var(--kal-slot));
}
.kal-dan-telo.danas { background: color-mix(in srgb, var(--pecat) 4%, transparent); }
.kal-slot { border-top: 1px dotted var(--linija); cursor: pointer; }
.kal-slot-pun { border-top: 1px solid var(--linija); }
.kal-dan-telo .kal-slot:first-child { border-top: none; }
.kal-slot:hover { background: color-mix(in srgb, var(--mastilo) 5%, transparent); }
/* Slot i mesečna ćelija su `role="button"` — bez vidljivog fokusa mreža sa tastature „nestaje". */
.kal-slot:focus-visible, .kal-celodnevni-celija:focus-visible, .kal-mesec-celija:focus-visible {
    outline: 2px solid var(--pecat); outline-offset: -2px;
    background: color-mix(in srgb, var(--pecat) 8%, transparent);
}

/* linija tekućeg vremena */
.kal-sada {
    position: absolute; left: 0; right: 0; height: 0; z-index: 3;
    border-top: 2px solid var(--pecat); pointer-events: none;
}
.kal-sada::before {
    content: ""; position: absolute; left: -1px; top: -4px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--pecat);
}

/* blok događaja u mreži */
.kal-dogadjaj {
    position: absolute; z-index: 2; overflow: hidden; cursor: pointer;
    padding: .1rem .3rem; border-radius: 3px; text-align: left;
    border: 1px solid color-mix(in srgb, var(--kal-boja) 55%, var(--belo));
    border-left: 4px solid var(--kal-boja);
    background: color-mix(in srgb, var(--kal-boja) 20%, var(--belo));
    color: var(--mastilo); font-size: .75rem; line-height: 1.25;
    display: flex; flex-direction: column;
}
.kal-dogadjaj:hover {
    background: color-mix(in srgb, var(--kal-boja) 32%, var(--belo));
    border-color: var(--kal-boja);
}
.kal-dog-vreme { font-variant-numeric: tabular-nums; color: var(--kal-tekst); font-weight: 700; font-size: .7rem; }
.kal-dog-naslov { overflow: hidden; text-overflow: ellipsis; }
.kal-dogadjaj[draggable="true"] { cursor: grab; }

/* oznaka ponavljajućeg događaja (↻) */
.kal-ponavljanje { color: var(--kal-tekst); font-size: .78em; margin-left: .15rem; flex: none; }

/* ručka za promenu trajanja (samo lični događaji) */
.kal-rucka {
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    cursor: ns-resize; background: var(--kal-boja); opacity: 0;
}
.kal-dogadjaj:hover .kal-rucka { opacity: .5; }

/* dok se vuče, blokovi ne smeju da presretnu ispuštanje na slot ispod */
.kal-vuce .kal-dogadjaj, .kal-vuce .kal-cip { pointer-events: none; }

/* ---------- čip događaja (ceo dan i mesečni prikaz) ---------- */
.kal-cip {
    display: flex; align-items: baseline; gap: .3rem; width: 100%;
    padding: .05rem .3rem; border-radius: 3px; text-align: left; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--kal-boja) 30%, transparent);
    border-left: 4px solid var(--kal-boja);
    background: color-mix(in srgb, var(--kal-boja) 20%, var(--belo));
    color: var(--mastilo); font: inherit; font-size: .73rem; line-height: 1.35;
    overflow: hidden; white-space: nowrap;
}
.kal-cip:hover {
    background: color-mix(in srgb, var(--kal-boja) 32%, var(--belo));
    border-color: color-mix(in srgb, var(--kal-boja) 60%, transparent);
    border-left-color: var(--kal-boja);
}
.kal-cip-vreme { color: var(--kal-tekst); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.kal-cip-naslov { overflow: hidden; text-overflow: ellipsis; }

/* ---------- mesečni prikaz ---------- */
.kal-mesec { min-width: 44rem; border: 1px solid var(--linija); background: var(--belo); }
.kal-mesec-dow, .kal-mesec-red { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-mesec-dow {
    background: var(--papir); border-bottom: 1px solid var(--linija);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--celik);
}
.kal-mesec-dow > div { padding: .35rem .5rem; text-align: center; border-left: 1px solid var(--linija); }
.kal-mesec-dow > div:first-child { border-left: none; }
.kal-mesec-red { border-top: 1px solid var(--linija); }
.kal-mesec-red:first-child { border-top: none; }
.kal-mesec-celija {
    min-height: 6.5rem; padding: .25rem; border-left: 1px solid var(--linija);
    display: flex; flex-direction: column; gap: .15rem; cursor: pointer;
}
.kal-mesec-celija:first-child { border-left: none; }
.kal-mesec-celija:hover { background: color-mix(in srgb, var(--mastilo) 3%, transparent); }
.kal-mesec-celija.van-meseca { background: color-mix(in srgb, var(--mastilo) 4%, transparent); }
.kal-mesec-celija.van-meseca .kal-mesec-broj { color: var(--celik); opacity: .7; }
.kal-mesec-celija.danas { background: color-mix(in srgb, var(--pecat) 6%, var(--belo)); }
.kal-mesec-zaglavlje { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem; }
.kal-mesec-broj {
    font-family: "Fraunces", Georgia, serif; font-weight: 650; font-size: .95rem;
    color: var(--mastilo); font-variant-numeric: tabular-nums;
}
.kal-mesec-celija.danas .kal-mesec-broj {
    color: var(--belo); background: var(--pecat); border-radius: 50%;
    width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: .8rem;
}
.kal-vise {
    background: none; border: none; padding: 0; font: inherit; font-size: .68rem;
    color: var(--pecat); cursor: pointer; text-decoration: underline;
}

/* ---------- detalji i forma (modal) ---------- */
.kal-detalji, .kal-forma { text-align: left; max-width: 34rem; }
.kal-detalji { border-top-color: var(--kal-boja); }
.kal-znacka {
    display: inline-block; font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; padding: .1rem .5rem; border-radius: 999px; margin-bottom: .5rem;
    color: var(--kal-tekst); border: 1px solid color-mix(in srgb, var(--kal-boja) 45%, transparent);
    background: color-mix(in srgb, var(--kal-boja) 14%, var(--belo));
}
.kal-detalji-lista { display: grid; grid-template-columns: 7rem 1fr; gap: .3rem .75rem; margin: .5rem 0 1rem; }
.kal-detalji-lista dt {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--celik); font-weight: 500;
}
.kal-detalji-lista dd { margin: 0; color: var(--mastilo); font-size: .9rem; }
.kal-detalji-opis { white-space: pre-wrap; }
.kal-detalji-napomena { margin: .75rem 0 0; font-size: .8rem; color: var(--celik); font-style: italic; }
.kal-detalji .app-modal-akcije, .kal-forma .app-modal-akcije { justify-content: flex-start; }
.kal-forma-telo { margin-top: .5rem; }
.kal-forma-napomena { margin: .6rem 0 0; font-size: .82rem; color: var(--celik); }

/* ---------- mobilni ---------- */
@media (max-width: 620px) {
    .kal-panel { padding: .9rem; }
    .kal-naslov { font-size: 1rem; margin-left: 0; }
    .kal-mesec-celija { min-height: 5rem; }
}

/* ---------- štampa ---------- */
@media print {
    .kal-omot { overflow: visible; }
    .kal-mreza, .kal-mesec { min-width: 0; }
    .kal-rucka, .kal-vise { display: none; }
}

/* ---------- podtabovi (Kancelarija) ---------- */
.pod-tabovi { display: flex; gap: .25rem; border-bottom: 1px solid var(--linija); }
.pod-tab {
    padding: .55rem .95rem; color: var(--celik); text-decoration: none; font-weight: 500;
    border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
    margin-bottom: -1px; transition: color .12s ease, background-color .12s ease;
}
.pod-tab:hover { color: var(--mastilo); background: color-mix(in srgb, var(--mastilo) 5%, transparent); text-decoration: none; }
.pod-tab.active {
    color: var(--pecat); background: var(--belo);
    border-color: var(--linija); border-bottom: 1px solid var(--belo);
}

/* ---------- upravljanje nalogom (/nalog/upravljanje) ----------
   Sva podešavanja stoje na jednoj strani, u odeljcima; prečice zamenjuju nekadašnji bočni meni. */
.nalog-sadrzaj { max-width: 60rem; }
.nalog-precice { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .9rem; }
.nalog-precice a {
    padding: .25rem .6rem; border: 1px solid var(--linija); border-radius: 999px;
    background: var(--belo); color: var(--celik); text-decoration: none;
}
.nalog-precice a:hover { border-color: var(--pecat); color: var(--pecat); text-decoration: none; }
/* Dugmad i forme u istom redu — svaka radnja je zaseban <form>, pa ih flex drži zajedno. */
.nalog-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---------- popup / modal (poziv na registraciju i sl.) ---------- */
.app-modal-overlay {
    position: fixed; inset: 0; z-index: 1000; padding: 1rem;
    background: color-mix(in srgb, var(--mastilo) 55%, transparent);
    display: grid; place-items: center;
    animation: app-modal-fade .15s ease;
}
.app-modal {
    background: var(--belo); border: 1px solid var(--linija); border-top: 4px solid var(--pecat);
    border-radius: 4px; max-width: 30rem; width: 100%; padding: 1.75rem; text-align: center;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
    animation: app-modal-pop .18s ease;
}
.app-modal-ikona {
    font-family: "Fraunces", Georgia, serif; font-size: 1.55rem; color: var(--pecat);
    border: 2px solid var(--pecat); border-radius: 50%; width: 3rem; height: 3rem;
    display: grid; place-items: center; margin: 0 auto .75rem; line-height: 1;
    background: color-mix(in srgb, var(--pecat) 7%, var(--belo));
}
.app-modal-naslov { font-family: "Fraunces", Georgia, serif; margin: 0 0 .5rem; }
.app-modal-tekst { color: var(--celik); font-size: .95rem; line-height: 1.55; margin: 0 0 1.25rem; }
.app-modal-akcije { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.app-modal-zatvori {
    display: block; margin: 1rem auto 0; background: none; border: none; padding: 0;
    color: var(--celik); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer;
}
.app-modal-zatvori:hover { color: var(--pecat); }
@keyframes app-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-modal-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- početna za neprijavljene ----------
   Hero je jedini blok koji „viče"; sve ispod je namerno tiše da strana ne deluje
   prenatrpano. Registracija i prijava su u zaglavlju, pa hero nema svoju dugmad —
   ceo donji deo panela zauzima tarifnik, jedino što gost dobija odmah i bez naloga.

   `--hero-pad-x/-b` drže vrednosti paddinga panela da bi zelena ploča mogla da ih
   poništi negativnom marginom i legne od ivice do ivice hero panela. Na mobilnom
   padding dolazi iz `.panel` (1.1rem), pa se i promenljive tamo menjaju. */
.gost-hero {
    --hero-pad-x: 1.75rem;
    --hero-pad-b: 2.25rem;
    padding: 2.25rem var(--hero-pad-x) var(--hero-pad-b);
}
.gost-hero h1 { font-size: 2.1rem; margin-bottom: .5rem; }
.gost-hero .lead { max-width: 56ch; margin: 0 0 1.35rem; }

/* Tarifnik kao mamac: puna zelena ploča sa belim tekstom preko cele širine panela —
   najglasniji element na strani. Boje su fiksne (ne `--uspeh`), jer je blok isti u svetloj
   i tamnoj temi: beo tekst na tamnozelenoj radi u obe, dok bi svetlozeleni tamni `--uspeh`
   obarao kontrast. */
.gost-tarifnik {
    --tarifnik-zelena: #24603A;
    display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
    margin: 2rem calc(-1 * var(--hero-pad-x)) calc(-1 * var(--hero-pad-b));
    padding: 2rem var(--hero-pad-x);
    background:
        radial-gradient(circle at 92% 130%, rgba(255, 255, 255, .14) 0 34%, transparent 35%),
        linear-gradient(135deg, var(--tarifnik-zelena) 0%, #2F7B4A 100%);
    border: 0;
    color: #FFFFFF; text-decoration: none;
    transition: filter .15s ease;
}
.gost-tarifnik:hover { color: #FFFFFF; text-decoration: none; filter: brightness(1.08); }
.gost-tarifnik:focus-visible { outline: 3px solid var(--mastilo); outline-offset: -3px; }
.gost-tarifnik-ikona {
    flex: none; width: 4rem; height: 4rem; display: grid; place-items: center;
    font-size: 2rem; line-height: 1; border-radius: 50%;
    color: var(--tarifnik-zelena); background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(20, 50, 32, .3);
}
.gost-tarifnik-tekst { flex: 1 1 22rem; }
.gost-tarifnik .besplatno-znacka {
    background: #FFFFFF; color: var(--tarifnik-zelena); border-color: transparent;
    font-size: .72rem;
}
.gost-tarifnik-naslov {
    display: block; margin-top: .45rem;
    font-family: "Fraunces", Georgia, serif; font-weight: 650;
    font-size: 1.65rem; line-height: 1.2; color: #FFFFFF;
}
.gost-tarifnik-opis {
    display: block; margin-top: .45rem; max-width: 62ch;
    font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .9);
}
.gost-tarifnik-cta {
    flex: none; white-space: nowrap;
    padding: .95rem 1.7rem; border-radius: 8px;
    background: #FFFFFF; color: var(--tarifnik-zelena);
    font-weight: 700; font-size: 1.1rem;
    box-shadow: 0 2px 10px rgba(20, 50, 32, .3);
}

@media (prefers-reduced-motion: reduce) {
    .gost-tarifnik { transition: none; }
}

/* Pregled modula bez „kartica": gostu nosi informaciju, ne poziv na klik. */
.gost-moduli {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 2rem;
}
@media (max-width: 900px) { .gost-moduli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gost-moduli { grid-template-columns: 1fr; } }
.gost-moduli li { display: flex; gap: .75rem; align-items: flex-start; }
.gost-modul-ikona {
    flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
    font-size: 1rem; line-height: 1; border-radius: 50%; color: var(--pecat);
    border: 1px solid color-mix(in srgb, var(--pecat) 40%, transparent);
    background: color-mix(in srgb, var(--pecat) 5%, var(--belo));
}
.gost-modul-naslov {
    display: block; font-family: "Fraunces", Georgia, serif; font-weight: 650;
    font-size: .98rem; color: var(--mastilo);
}
.gost-modul-opis { display: block; font-size: .82rem; color: var(--celik); }

@media (max-width: 620px) {
    /* Padding hero panela na mobilnom dolazi iz `.panel` (1.1rem) — ploča to prati
       da bi i dalje legla tačno na ivice panela. */
    .gost-hero { --hero-pad-x: 1.1rem; --hero-pad-b: 1.1rem; }
    .gost-hero h1 { font-size: 1.6rem; }
    .gost-hero .lead { font-size: 1rem; }
    /* Na uskom ekranu ikona i tekst idu jedno pored drugog, a dugme u pun red ispod. */
    .gost-tarifnik { align-items: flex-start; gap: 1rem; padding: 1.5rem var(--hero-pad-x); }
    .gost-tarifnik-ikona { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; }
    .gost-tarifnik-naslov { font-size: 1.3rem; }
    .gost-tarifnik-opis { font-size: .94rem; }
    .gost-tarifnik-cta { flex: 1 1 100%; text-align: center; }
}

.besplatno-znacka {
    align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--uspeh); border-radius: 999px; padding: .15rem .55rem;
    border: 1px solid color-mix(in srgb, var(--uspeh) 45%, transparent);
    background: color-mix(in srgb, var(--uspeh) 10%, var(--belo));
}

/* ---------- paketi pretplate (/pretplata i „Paketi i cene" na landing strani) ----------
   Tri kartice iste visine; tekući (ili preporučeni) paket dobija pečat-crveni okvir.
   Boje idu iz palete, pa kartice same prate i tamnu temu. */
.paketi {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch;
}
@media (max-width: 900px) { .paketi { grid-template-columns: 1fr; } }
.paket {
    position: relative; display: flex; flex-direction: column;
    background: var(--belo); border: 1px solid var(--linija); border-top: 3px solid var(--linija);
    padding: 1.25rem;
}
.paket-istaknut, .paket-tekuci { border-top-color: var(--pecat); }
.paket-tekuci { box-shadow: 0 2px 10px rgba(28,36,48,.08); }
.paket-oznaka {
    position: absolute; top: -.7rem; right: 1rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pecat); border-radius: 999px; padding: .15rem .55rem;
    border: 1px solid color-mix(in srgb, var(--pecat) 45%, transparent);
    background: color-mix(in srgb, var(--pecat) 8%, var(--belo));
}
.paket-oznaka-preporuka { color: var(--uspeh); border-color: color-mix(in srgb, var(--uspeh) 45%, transparent); }
.paket-naziv { margin: 0; font-size: 1.15rem; }
.paket-cena { font-family: "Fraunces", Georgia, serif; font-size: 1.6rem; font-weight: 650; line-height: 1.2; }
.paket-cena-dodatak { font-family: inherit; font-size: .78rem; font-weight: 400; color: var(--celik); }
.paket-namena { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--celik); margin: .1rem 0 .6rem; }
.paket-opis { font-size: .88rem; color: var(--celik); margin: 0 0 .75rem; }
.paket-prednosti { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .88rem; }
.paket-prednosti li { position: relative; padding-left: 1.25rem; margin-bottom: .4rem; }
.paket-prednosti li::before { content: "✓"; position: absolute; left: 0; color: var(--uspeh); font-weight: 700; }
.paket-akcija { margin-top: auto; }
.paket-napomena { font-size: .82rem; color: var(--celik); font-style: italic; }
.paketi-tabela { margin-top: 1.5rem; }
.paketi-tabela .paket-ima { color: var(--uspeh); font-weight: 700; }
.paketi-tabela .paket-nema { color: var(--celik); }

/* ---------- prava po ulogama (/kancelarija) ----------
   Ista azbuka kao tabela paketa: ✓ zeleno, — sivo. Kolona prijavljenog korisnika je blago
   podvučena bojom, da vlasnik u spisku od četiri uloge odmah nađe svoju. */
.prava-tabela .pravo-ima { color: var(--uspeh); font-weight: 700; }
.prava-tabela .pravo-nema { color: var(--celik); }
.prava-tabela th { white-space: nowrap; }
.prava-tabela .prava-moja { background: color-mix(in srgb, var(--pecat) 7%, transparent); }
.prava-tabela .prava-vi {
    display: block; font-size: .62rem; font-weight: 400; text-transform: uppercase;
    letter-spacing: .06em; color: var(--celik);
}
.prava-tabela .prava-grupa th {
    background: color-mix(in srgb, var(--celik) 10%, transparent);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
}
.prava-tabela .prava-zakljucan { font-size: .72rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--celik); margin-left: .5rem; }
.prava-tabela .prava-napomena { display: block; font-size: .78rem; color: var(--celik); }
.prava-tabela .prava-van-paketa td:first-child { opacity: .65; }

/* ---------- zaključani moduli (paket ih ne pokriva) ----------
   Modul se nikad ne sakriva: u meniju i na karticama nosi katanac, a strana modula
   prikazuje teaser (skica ekrana iza matiranog stakla + ponuda za nadogradnju). */
.nav-podstavka-zakljucan { color: var(--celik); }
.nav-podstavka-zakljucan:hover { color: var(--mastilo); }
.nav-lokot { font-size: .75em; margin-left: .35rem; opacity: .75; }

.modul-znacka {
    display: inline-block; margin-top: .3rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--celik); border-radius: 999px; padding: .1rem .5rem;
    border: 1px solid var(--linija); background: color-mix(in srgb, var(--celik) 6%, var(--belo));
}
.gost-modul-naslov .modul-znacka { margin: 0 0 0 .4rem; vertical-align: middle; }
.modul-kartica-zakljucana { opacity: .72; }
.modul-kartica-zakljucana .modul-ikona { border-color: var(--linija); color: var(--celik); background: none; }
.modul-kartica-zakljucana:hover { opacity: 1; border-color: var(--pecat); }

/* teaser: skica ispod je čisto dekorativna (bez ijednog podatka) i zamućena */
.teaser { position: relative; }
.teaser-skica { filter: blur(4px); opacity: .5; pointer-events: none; user-select: none; }
.teaser-red { height: 1.1rem; border-radius: 3px; background: var(--linija); margin-bottom: .75rem; }
.teaser-red-naslov { width: 40%; height: 1.8rem; background: color-mix(in srgb, var(--mastilo) 25%, var(--linija)); }
.teaser-kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0; }
.teaser-kartica-skica { height: 5.5rem; border: 1px solid var(--linija); border-top: 3px solid var(--pecat); background: var(--belo); }
.teaser-tabela { background: var(--belo); border: 1px solid var(--linija); padding: 1rem; }
.teaser-tabela .teaser-red:last-child { margin-bottom: 0; width: 70%; }

.teaser-poklopac {
    position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
}
.teaser-poruka { max-width: 34rem; text-align: center; }
.teaser-znacka {
    display: inline-block; margin-bottom: .5rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pecat); border-radius: 999px; padding: .15rem .6rem;
    border: 1px solid color-mix(in srgb, var(--pecat) 45%, transparent);
    background: color-mix(in srgb, var(--pecat) 8%, var(--belo));
}
.teaser-prednosti { list-style: none; margin: 0 0 1rem; padding: 0; text-align: left; font-size: .9rem; }
.teaser-prednosti li { position: relative; padding-left: 1.25rem; margin-bottom: .35rem; }
.teaser-prednosti li::before { content: "✓"; position: absolute; left: 0; color: var(--uspeh); font-weight: 700; }
.teaser-tekuci { font-size: .85rem; color: var(--celik); }

@media (max-width: 620px) {
    .teaser-kartice { grid-template-columns: 1fr; }
    .teaser-poklopac { position: static; padding: 0; }
    .teaser-skica { display: none; }
}

/* ---------- 404 (strana ne postoji) ----------
   Isti „pečat" ton kao ostatak aplikacije: uzan panel, veliki broj kao vodeni žig
   i jasni putevi nazad (dugmad + spisak čestih strana). */
.nemastrane { position: relative; overflow: hidden; text-align: center; padding-top: 2rem; }
.nemastrane-broj {
    display: block; font-family: "Fraunces", Georgia, serif; font-weight: 650;
    font-size: clamp(3.5rem, 12vw, 5.5rem); line-height: 1; letter-spacing: -.04em;
    color: color-mix(in srgb, var(--pecat) 22%, transparent); margin-bottom: .25rem;
}
.nemastrane .lead { margin: 0 auto; max-width: 34rem; }
.nemastrane-adresa { margin: 1rem 0 0; font-size: .85rem; color: var(--celik); }
.nemastrane-adresa code {
    color: var(--mastilo); background: color-mix(in srgb, var(--celik) 8%, var(--belo));
    border: 1px solid var(--linija); border-radius: 3px; padding: .1rem .35rem;
    word-break: break-all;
}
.nemastrane-dugmad { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.nemastrane-savet { margin: 1.25rem auto 0; max-width: 34rem; font-size: .9rem; color: var(--celik); }
.nemastrane-savet kbd {
    font-size: .8em; background: var(--mastilo); color: var(--papir);
    border-radius: 3px; padding: .05rem .3rem;
}
.nemastrane-veze { margin-top: 1.5rem; border-top: 1px solid var(--linija); padding-top: 1rem; }
.nemastrane-veze-naslov {
    display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--celik); margin-bottom: .6rem;
}
.nemastrane-veze ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
}
.nemastrane-veze a {
    display: inline-block; font-size: .85rem; color: var(--mastilo);
    border: 1px solid var(--linija); border-radius: 999px; padding: .2rem .7rem;
    background: var(--belo);
}
.nemastrane-veze a:hover { border-color: var(--pecat); color: var(--pecat); text-decoration: none; }

/* ---------- najava gratis perioda (registracija kancelarije) ---------- */
.gratis-najava {
    border: 1px solid color-mix(in srgb, var(--uspeh) 35%, var(--linija));
    background: color-mix(in srgb, var(--uspeh) 6%, var(--belo));
    padding: 1rem 1.1rem; margin: 1rem 0;
}
.gratis-najava-naslov { margin: .5rem 0 .35rem; font-weight: 600; }
.gratis-najava-opis { font-size: .88rem; color: var(--celik); }

/* ---------- oznake (tagovi) predmeta ----------
   Isti čip nosi tri uloge: prikaz oznake u tabeli, prekidač u filteru na /predmeti i predlog
   na kartonu predmeta. Razlika je samo u stanju (.izabran) i modifikatoru (--predlog). */
.tag-red { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tag-cip {
    display: inline-flex; align-items: center; gap: .3rem;
    font: inherit; font-size: .74rem; line-height: 1.5;
    padding: .1rem .5rem; border-radius: 999px; cursor: default;
    color: var(--mastilo); background: color-mix(in srgb, var(--mastilo) 5%, var(--belo));
    border: 1px solid var(--linija);
}
button.tag-cip { cursor: pointer; }
button.tag-cip:hover { border-color: var(--pecat); color: var(--pecat); }
.tag-cip.izabran {
    color: var(--belo); background: var(--pecat); border-color: var(--pecat); font-weight: 500;
}
.tag-cip.izabran:hover { color: var(--belo); }
.tag-cip-broj { opacity: .65; font-variant-numeric: tabular-nums; }
.tag-cip--predlog { border-style: dashed; color: var(--celik); }
.tag-cip-x {
    background: none; border: none; padding: 0; margin-left: .1rem;
    font: inherit; line-height: 1; color: var(--celik); cursor: pointer;
}
.tag-cip-x:hover { color: var(--pecat); }

/* red čipova iznad tabele na /predmeti */
.tag-filter { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tag-filter-naslov {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--celik); font-weight: 500; margin-right: .2rem;
}

/* oznake u redu tabele — odvojene od naziva, ali u istoj ćeliji */
td .tag-red { margin-top: .2rem; }

/* izbor klijenta na formi predmeta — pretraga i „＋ Novi klijent" dele isti red */
.klijent-izbor-red { display: flex; gap: .5rem; align-items: flex-start; }
.klijent-izbor-red .form-control { flex: 1 1 auto; }

/* popup za unos klijenta bez napuštanja forme predmeta — forma je duža od poruke,
   pa se poravnava levo i skroluje kada ne stane u ekran */
.klijent-modal {
    text-align: left; max-width: 34rem;
    max-height: calc(100vh - 2rem); overflow-y: auto;
}
.klijent-modal .app-modal-tekst { margin-bottom: 1rem; font-size: .88rem; }

/* dugme koje izgleda kao veza (npr. „Unesi novog klijenta" ispod prazne pretrage) */
.veza-dugme {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--pecat); text-decoration: underline; cursor: pointer;
}
.veza-dugme:hover { color: var(--mastilo); }

/* upozorenje ispod polja (npr. nevažeći JMBG) — ne blokira čuvanje */
.polje-upozorenje {
    margin-top: .3rem; font-size: .82rem; font-weight: 500;
    color: color-mix(in srgb, #c79100 75%, var(--mastilo));
}

.error { color: var(--pecat); font-weight: 500; }
.success { color: var(--uspeh); font-weight: 500; }
.validation-message { color: var(--pecat); }
.invalid { outline: 1px solid var(--pecat); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--uspeh); }

/* ---------- tamna tema ---------- */
:root.tamna {
    --papir: #14181F;
    --mastilo: #E8E4DA;
    --celik: #9AA3B0;
    --pecat: #D06A5A;
    --linija: #333A46;
    --belo: #1C222C;
    --uspeh: #7FBF8E;
    --graf-prihod: #1F9E7A;
    color-scheme: dark;
}
:root.tamna .panel { box-shadow: none; }
:root.tamna .masthead { background: var(--belo); }

/* ---------- greška (Blazor) ---------- */
#blazor-error-ui {
    color-scheme: light only;
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--pecat); color: #fff; padding: .75rem 1.5rem; font-size: .9rem;
    box-shadow: 0 -2px 6px rgba(0,0,0,.2);
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: .75rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .9rem; top: .6rem; }

.blazor-error-boundary {
    background: var(--pecat); padding: 1rem 1.5rem; color: #fff;
}
.blazor-error-boundary::after { content: "Došlo je do greške."; }

/* =========================================================
   Tarifnik — kalkulator (scope: .tarifnik) — preuzeto iz AdvokatskaTarifa
   ========================================================= */
.tarifnik .calc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .tarifnik .calc-grid { grid-template-columns: 1fr; } }

.tarifnik h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
.tarifnik h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; border-bottom: 1px solid var(--linija); padding-bottom: .3rem; }
.tarifnik h2.mt-0 { margin-top: 0; }
.tarifnik .small, .tarifnik .muted.small { font-size: .8rem; }
.tarifnik .hint { font-size: .78rem; color: var(--pecat); margin: .4rem 0 0; }

.tarifnik .field { display: block; margin: .75rem 0; }
.tarifnik .field span { display: block; font-size: .78rem; color: var(--celik); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
/* Generičko stilizovanje polja u tabelama radnji/troškova. Bootstrap polja
   (.form-control/.form-select/.form-check-input) su izuzeta da bi forma unosa
   izgledala isto kao forme za klijenta i predmet. */
.tarifnik input:not(.form-control):not(.form-check-input),
.tarifnik select:not(.form-select) {
    width: 100%; padding: .5rem .6rem; font: inherit;
    border: 1px solid var(--linija); border-radius: 2px; background: var(--papir); color: var(--mastilo);
}
.tarifnik input:not(.form-control):not(.form-check-input):focus-visible,
.tarifnik select:not(.form-select):focus-visible,
.tarifnik button:focus-visible {
    outline: 2px solid var(--pecat); outline-offset: 1px;
}
.tarifnik input[type=checkbox]:not(.form-check-input) { width: auto; }
.tarifnik input:disabled { opacity: .4; }
.tarifnik .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: end; }
.tarifnik .row3 .field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarifnik .check { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; }
.tarifnik .check span { font-size: .9rem; }
.tarifnik .center { text-align: center; }

.tarifnik button.primary {
    margin-top: 1rem; width: 100%; padding: .75rem;
    background: var(--mastilo); color: var(--belo); border: none;
    font: inherit; font-weight: 600; letter-spacing: .03em; cursor: pointer; border-radius: 2px;
}
.tarifnik button.primary:hover { background: var(--pecat); }
.tarifnik button.ghost {
    background: none; border: 1px dashed var(--linija); color: var(--celik);
    cursor: pointer; font: inherit; padding: .2rem .55rem; border-radius: 2px;
}
.tarifnik button.ghost:hover { color: var(--pecat); border-color: var(--pecat); }
.tarifnik button.ghost:disabled { opacity: .4; cursor: default; }
.tarifnik button.ghost.add { margin-top: .5rem; }
.tarifnik button.ghost.mini { padding: .1rem .4rem; font-size: .8rem; margin-left: .15rem; }

.tarifnik .sablon-red { display: flex; gap: .5rem; margin-bottom: .6rem; }
.tarifnik .sablon-red select { flex: 1; }

.tarifnik table.stavke { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tarifnik table.stavke th { text-align: left; font-size: .72rem; color: var(--celik); text-transform: uppercase; letter-spacing: .05em; padding: .3rem .35rem; }
.tarifnik table.stavke td { padding: .25rem .35rem; vertical-align: middle; }
.tarifnik table.stavke td:first-child { width: 100%; }
.tarifnik table.stavke td:nth-child(2) input, .tarifnik table.stavke td:nth-child(3) input { width: 4rem; }
.tarifnik table.stavke select { min-width: 0; }
.tarifnik .akcije { white-space: nowrap; text-align: right; }
.tarifnik table.stavke.troskovi td:nth-child(2) input { width: 9rem; text-align: right; }
.tarifnik td.iznos input { width: 9rem; text-align: right; }

.tarifnik .obracun { border-top: 4px solid var(--pecat); }
.tarifnik .obracun-naslov { margin-top: 0; }
.tarifnik .obracun-akcije { margin-top: 1rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.tarifnik .predracun-zaglavlje {
    display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem;
    font-size: .9rem; margin-bottom: .75rem;
    border: 1px solid var(--linija); padding: .6rem .75rem; background: var(--papir);
}
.tarifnik .etiketa { color: var(--celik); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .3rem; }

.tarifnik .tarifa-oznaka {
    font-size: .82rem; color: var(--celik); line-height: 1.5;
    border-left: 3px solid var(--pecat); padding: .1rem .6rem; margin-bottom: .75rem;
}
.tarifnik .tarifa-oznaka strong { color: var(--mastilo); }
.tarifnik .tarifa-ranija {
    display: inline-block; margin-left: .4rem; padding: 0 .4rem;
    border: 1px solid var(--pecat); border-radius: 2px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pecat);
}

.tarifnik table.spec { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .5rem; }
.tarifnik table.spec th { text-align: left; border-bottom: 2px solid var(--mastilo); padding: .4rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--celik); }
.tarifnik table.spec td { border-bottom: 1px solid var(--linija); padding: .45rem .35rem; vertical-align: top; }
.tarifnik table.spec .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarifnik table.spec tfoot td { border-bottom: none; padding-top: .5rem; font-weight: 500; }
.tarifnik table.spec tr.podtotal td { border-top: 2px solid var(--mastilo); font-weight: 600; }
.tarifnik table.spec tr.total td { border-top: 3px double var(--mastilo); font-weight: 700; font-size: 1.05rem; color: var(--pecat); }
.tarifnik td.trosak { color: var(--celik); font-style: italic; }
.tarifnik .detalj { font-size: .78rem; color: var(--celik); }
.tarifnik .napomene { margin-top: 1.25rem; padding-left: 1.1rem; font-size: .8rem; color: var(--celik); }
.tarifnik .napomene li { margin-bottom: .25rem; }

/* ---------- štampa ---------- */
@media print {
    /* Ukloni podrazumevano zaglavlje/podnožje pregledača (URL, datum, broj strane). */
    @page { margin: 0; }
    .no-print, .masthead, .site-footer, #blazor-error-ui { display: none !important; }
    body { background: #fff; }
    .page { margin: 0; max-width: none; padding: 1.4cm; }
    .panel { border: none; box-shadow: none; padding: 0; }
    .faktura-dokument { border: none; box-shadow: none; padding: 0; max-width: none; margin: 0; }
    :root.tamna {
        --papir: #fff; --mastilo: #1C2430; --celik: #5B6472;
        --pecat: #8C2F2F; --linija: #D8D3C8; --belo: #fff;
    }
}

/* ---------- responsivnost zaglavlja i podnožja ---------- */

/* Uži desktop: sklanjamo dopunski tekst da navigacija ne bi prelamala red. */
@media (max-width: 1150px) {
    .brand-sub { display: none; }
    .uput-prekidac-tekst { display: none; }
    .uput-prekidac { padding: 6px 9px; }
    .nav-stavka { padding: .45rem .55rem; }
    .nav-glavni > a.active::after, .nav-grupa.aktivna > .nav-grupa-dugme::after { left: .55rem; right: .55rem; }
    .nalog-ime { display: none; }
    .nalog-dugme { padding: .25rem .45rem .25rem .3rem; }
    .pretraga-polje { width: 9.5rem; }
    .pretraga-polje:focus { width: 14rem; }
}

/* Pretraga na užim ekranima: polje se skuplja, a panel se otvara preko cele trake
   (`position: static` ga vezuje za `.masthead`, koji je sticky, dakle pozicioniran). */
@media (max-width: 900px) {
    .pretraga-polje { width: 7.5rem; }
    .pretraga-polje:focus { width: 10rem; }
}

@media (max-width: 620px) {
    .pretraga { position: static; }
    .pretraga-polje { width: 6.5rem; }
    .pretraga-polje:focus { width: 8.5rem; }
    .pretraga-panel { width: calc(100vw - 2rem); right: 1rem; border-radius: 10px; }

    /* Na uskoj traci čip naloga se svodi na sam avatar — ime je već sakriveno,
       pa strelica i okvir samo troše prostor koji treba hamburgeru. */
    .nav-nalog .nav-strelica { display: none; }
    .nalog-dugme { padding: .2rem; border-radius: 999px; }
}

@media (max-width: 1000px) {
    .site-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot-brand-col { grid-column: 1 / -1; }
}

/* ---------- mobilni: hamburger meni ---------- */
@media (max-width: 900px) {
    .hamburger { display: flex; }
    .masthead-inner { flex-wrap: wrap; gap: .5rem; }
    .brand { margin-right: auto; }
    .brand-sub { display: none; }

    /* Navigacija postaje padajući meni ispod zaglavlja; grupe se prikazuju kao
       naslovljene sekcije (bez dodatnog otvaranja) da bi sve bilo na jedan dodir. */
    .masthead nav {
        display: none; order: 3; flex: 1 1 100%; flex-direction: column; align-items: stretch;
        gap: .15rem; margin-top: .3rem; padding-top: .6rem; border-top: 1px solid var(--linija);
        max-height: calc(100vh - 5.5rem); overflow-y: auto; overscroll-behavior: contain;
    }
    .masthead.meni-otvoren nav { display: flex; }
    .nav-glavni { flex-direction: column; align-items: stretch; gap: .1rem; }
    .nav-glavni-gost { margin-left: 0; }

    .masthead nav a, .nav-stavka, .nav-podstavka {
        width: 100%; text-align: left; padding: .7rem .75rem; border-radius: 8px; font-size: 1rem;
    }
    .masthead nav a.active { background: color-mix(in srgb, var(--pecat) 8%, transparent); }
    .masthead nav a.active::after { display: none; }
    .masthead nav a.nav-stavka-cta { justify-content: center; }

    /* Dugme grupe postaje naslov sekcije, panel je uvek otvoren.
       Pravila su vezana za `.masthead nav`, jer čip naloga živi van navigacije (u
       `masthead-alatke`) i mora da ostane običan padajući meni i na mobilnom. */
    .masthead nav .nav-grupa { position: static; }
    .masthead nav .nav-grupa-dugme {
        pointer-events: none; width: 100%; padding: .9rem .75rem .3rem; font-size: .7rem;
        font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--celik);
    }
    .masthead nav .nav-grupa.aktivna > .nav-grupa-dugme { color: var(--pecat); }
    .masthead nav .nav-grupa.aktivna > .nav-grupa-dugme::after { display: none; }
    .masthead nav .nav-grupa-dugme .nav-strelica { display: none; }
    .masthead nav .nav-grupa-panel,
    .masthead nav .nav-grupa.otvoreno > .nav-grupa-panel {
        display: block; position: static; min-width: 0; padding: 0;
        background: none; border: 0; border-radius: 0; box-shadow: none;
    }
    .masthead nav .nav-grupa-panel form { width: 100%; }
    .masthead nav .nav-podela { display: none; }
}

/* ---------- mobilni: sadržaj, tabele, razmaci ---------- */
@media (max-width: 620px) {
    .page { padding: 0 1rem; margin-top: 1.25rem; }
    .panel { padding: 1.1rem; }
    h1 { font-size: 1.45rem; }
    .naslov-red { flex-wrap: wrap; }

    /* Široke tabele se skroluju horizontalno umesto da razbiju raspored. */
    .table, .tarifnik table.stavke, .tarifnik table.spec {
        display: block; width: max-content; max-width: 100%;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }

    .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
    .foot-donji { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .foot-donji .foot-copy { white-space: normal; }
}

@media (max-width: 380px) {
    .site-footer-inner { grid-template-columns: 1fr; }
}

/* =========================================================
   Režim uputstava — "marginalija" (plavo mastilo)
   Izgled prati skica-rezim-uputstava.html: serifni panel (kao beleška
   na margini podneska), plava se ne sudara sa zelenom/crvenom/amber.
   ========================================================= */
:root {
    --plavo: #26418f;
    --plavo-svetlo: #eef1fa;
    --plavo-linija: #b9c4e6;
    --uput-tekst: #22293a;
    --uput-tekst-tiho: #3a4256;
    --uput-sirina: 340px;
    --uput-vrh: 70px; /* rezerva; JS je usklađuje sa stvarnom visinom .masthead */
    /* Serif namerno različit od aplikacije (Fraunces) — signal „ovo nije deo aplikacije". */
    --uput-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Tamna tema: isto plavo mastilo, ali na tamnoj podlozi — panel ne sme da blješti. */
:root.tamna {
    --plavo: #9db4ea;
    --plavo-svetlo: #1a2133;
    --plavo-linija: #38466e;
    --uput-tekst: #dde4f4;
    --uput-tekst-tiho: #aab6d3;
}

/* prekidač u zaglavlju */
.uput-prekidac {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 11px; height: 2.15rem;
    border: 1px solid var(--linija); border-radius: 999px;
    background: var(--belo); color: var(--celik); font: inherit; font-size: 13.5px;
    cursor: pointer; flex: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.uput-prekidac .znak { font-family: var(--uput-serif); font-weight: 700; font-size: 15px; line-height: 1; }
.uput-prekidac:hover { color: var(--plavo); border-color: var(--plavo-linija); }
.uput-prekidac:focus-visible { outline: 2px solid var(--plavo); outline-offset: 2px; }
.uput-prekidac[aria-pressed="true"] { background: var(--plavo); border-color: var(--plavo); color: var(--belo); }

/* traka: jasno kaže da je režim uključen */
.uput-traka {
    position: fixed; top: var(--uput-vrh); left: 0; right: var(--uput-sirina); z-index: 90;
    display: flex; align-items: center; gap: 10px;
    background: var(--plavo-svetlo); border-bottom: 1px solid var(--plavo-linija);
    color: var(--plavo); padding: 7px 18px; font-size: 13px;
    font-family: var(--uput-serif);
}

/* panel sa uputstvom (marginalija) */
.uput-panel {
    position: fixed; top: var(--uput-vrh); right: 0; bottom: 0; width: var(--uput-sirina); z-index: 95;
    background: var(--plavo-svetlo); border-left: 1px solid var(--plavo-linija);
    padding: 20px 20px 28px; overflow: auto;
    font-family: var(--uput-serif); color: var(--uput-tekst);
}
.uput-oznaka {
    display: inline-block; font-family: "Inter", system-ui, sans-serif; font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--plavo);
    border: 1px solid var(--plavo-linija); border-radius: 3px; padding: 2px 7px; margin-bottom: 12px;
}
.uput-panel h2 {
    font-family: var(--uput-serif); font-size: 19px; margin: 0 0 6px;
    font-weight: 600; letter-spacing: .2px; color: var(--uput-tekst); border: 0; padding: 0;
}
.uput-panel .uvod { font-size: 14.5px; color: var(--uput-tekst-tiho); font-style: italic; margin: 0 0 16px; }
.uput-panel .koraci { list-style: none; margin: 0; padding: 0; border-left: 2px dashed var(--plavo-linija); }
.uput-panel .koraci li { position: relative; margin-left: 12px; padding: 0 0 16px 34px; font-size: 14.5px; line-height: 1.55; }
.uput-panel .koraci li b { font-weight: 600; }
.uput-panel .koraci li .broj {
    position: absolute; left: -13px; top: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--plavo); color: var(--belo); font-family: "Inter", system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.uput-panel .saveti { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--plavo-linija); }
.uput-panel .saveti h3 {
    font-family: "Inter", system-ui, sans-serif; font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--plavo); margin: 0 0 8px; font-weight: 600;
}
.uput-panel .saveti p { margin: 0 0 8px; font-size: 13.8px; color: var(--uput-tekst-tiho); }
.uput-zatvori {
    margin-top: 18px; background: none; border: 1px solid var(--plavo-linija); color: var(--plavo);
    border-radius: 6px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13.5px;
}
.uput-zatvori:hover { background: color-mix(in srgb, var(--plavo) 8%, transparent); }
.uput-zatvori:focus-visible { outline: 2px solid var(--plavo); outline-offset: 2px; }

/* desktop: sadržaj se sužava da ne bude prekriven panelom */
@media (min-width: 900px) {
    body.uputstva-ukljucena .page,
    body.uputstva-ukljucena .site-footer-inner {
        padding-right: calc(var(--uput-sirina) + 1.5rem);
    }
    body.uputstva-ukljucena .page { margin-top: calc(1.75rem + 2.35rem); } /* prostor za traku */
}

/* mobilni: panel je donja fioka, traka se sklanja */
@media (max-width: 899.98px) {
    .uput-traka { display: none; }
    .uput-panel {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 52vh;
        border-left: 0; border-top: 2px solid var(--plavo); border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 24px rgba(28, 36, 48, .18);
    }
}

/* štampa: sloj uputstava se ne prikazuje i sadržaj zauzima punu širinu */
@media print {
    .uput-panel, .uput-traka, .uput-prekidac { display: none !important; }
    body.uputstva-ukljucena .page,
    body.uputstva-ukljucena .site-footer-inner { padding-right: 0; }
    body.uputstva-ukljucena .page { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .uput-prekidac { transition: none; }
}

/* ---------- markeri na kontrolama (Faza B) ---------- */
/* JS na kontrole sa data-uputstvo dodaje klasu .uputstvo-oznaceno i data-uputstvo-broj;
   krug i isprekidani okvir crta CSS (JS ne pravi DOM elemente). Vidljivo samo kad je režim uključen. */
body.uputstva-ukljucena .uputstvo-oznaceno {
    position: relative;
    outline: 2px dashed var(--plavo-linija);
    outline-offset: 5px;
    border-radius: 6px;
}
body.uputstva-ukljucena .uputstvo-oznaceno::after {
    content: attr(data-uputstvo-broj);
    position: absolute; top: -11px; left: -13px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--plavo); color: var(--belo);
    font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(38, 65, 143, .35);
    animation: uput-upad .22s ease both;
    z-index: 2;
}
@keyframes uput-upad {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    body.uputstva-ukljucena .uputstvo-oznaceno::after { animation: none; }
}
@media print {
    .uputstvo-oznaceno { outline: 0 !important; }
    .uputstvo-oznaceno::after { content: none !important; }
}