/* =========================================================
   § 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;

    /* 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; }
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; }

.masthead nav { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; }
.masthead nav a, .masthead nav .link-btn {
    position: relative; color: var(--celik); text-decoration: none;
    padding: .4rem .7rem; border-radius: 7px; font-weight: 500;
    background: none; border: none; font: inherit; cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}
.masthead nav a:hover, .masthead nav .link-btn:hover {
    color: var(--mastilo); background: color-mix(in srgb, var(--mastilo) 6%, transparent); text-decoration: none;
}
.masthead nav a.active { color: var(--pecat); }
.masthead nav a.active::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .12rem;
    height: 2px; border-radius: 2px; background: var(--pecat);
}
.masthead nav form { display: inline-flex; }
.masthead nav .nav-razdvojnik { margin: 0 .45rem; width: 1px; height: 1.2rem; background: var(--linija); }

button.tema {
    margin-left: .45rem; 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.5rem 1.5rem 1.75rem;
    display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 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: 1rem 2rem; flex-wrap: wrap;
    font-size: .75rem; color: var(--celik);
}
.foot-donji .foot-disclaimer { max-width: 78ch; }
.foot-donji .foot-copy { white-space: nowrap; }

/* ---------- 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); }

.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; }
.brze-akcije { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- 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; }

/* 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; }

/* ---------- 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;
}
.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; } }

/* ---------- 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); }

/* 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; }

/* ---------- 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);
}

/* ---------- 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; } }

/* ---------- „Tarifnik je besplatan" istaknuti poziv (početna, neprijavljeni) ---------- */
.tarifnik-besplatno {
    display: flex; align-items: center; gap: .85rem 1.25rem; flex-wrap: wrap;
    border-left: 4px solid var(--uspeh);
    background: color-mix(in srgb, var(--uspeh) 5%, var(--belo));
}
.tarifnik-besplatno > div { flex: 1 1 18rem; }
.tarifnik-besplatno h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.tarifnik-besplatno p { margin: 0; color: var(--celik); }
.tarifnik-besplatno .btn { flex: none; }
.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));
}

/* 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;
    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 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 ---------- */
@media (max-width: 860px) {
    .site-footer-inner { grid-template-columns: 1fr 1fr; }
    .foot-brand-col { grid-column: 1 / -1; }
}

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

    /* Navigacija postaje padajući meni ispod zaglavlja. */
    .masthead nav {
        display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch;
        gap: .15rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linija);
    }
    .masthead.meni-otvoren nav { display: flex; }

    .masthead nav a, .masthead nav .link-btn {
        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 .nav-razdvojnik { display: none; }
    .masthead nav form { width: 100%; }
    .masthead nav .link-btn { text-align: left; }

    button.tema { width: 100%; height: 2.6rem; margin: .35rem 0 0; border-radius: 8px; }
}

/* ---------- 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: 1fr; gap: 1.5rem; }
    .foot-donji { flex-direction: column; gap: .5rem; }
    .foot-donji .foot-copy { white-space: normal; }
}