/* ==========================================================================
   AM ERP — tema
   Nadgradnja na Bootstrap 5. Sve boje idu preko promenljivih, tako da
   svetla i tamna tema dele isti kod.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../vendor/fonts/inter-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../vendor/fonts/inter-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../vendor/fonts/inter-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../vendor/fonts/inter-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Promenljive
   -------------------------------------------------------------------------- */
:root {
    --sidebar-w: 264px;
    --topbar-h: 70px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-num: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /*
       Paleta prati AdminKit template (DESIGN/adminkit-dev): plavi akcenat
       umesto ranije ljubičaste, uglastiji radiusi (4/2/6 umesto 14/9/18).
    */
    --accent: #3b7ddd;
    --accent-h: #2f68ba;
    --accent-soft: #e8f0fc;
    --accent-ring: rgba(59, 125, 221, .25);

    /*
       Semantika. Osnovna boja je živa i služi za grafikone, trake i
       ikonice. Za tekst na svetloj podlozi (-soft) ista boja je previše
       bleda, pa postoji zatamnjena -tekst varijanta — inače pilule i
       upozorenja padaju ispod čitljivog kontrasta.
    */
    --ok: #1cbb8c;
    --ok-soft: #e3f8f1;
    --ok-tekst: #0f7a5c;
    --bad: #dc3545;
    --bad-soft: #fbe7e9;
    --bad-tekst: #a52834;
    --warn: #fcb92c;
    --warn-soft: #fef4e0;
    --warn-tekst: #8a5a03;
    --info: #17a2b8;
    --info-soft: #e3f5f8;
    --info-tekst: #0f6c7a;

    /* površine */
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #f5f7fb;
    --line: #e7eaf0;
    --line-strong: #d6dbe3;

    /* tekst — tri stepena, svaki još uvek čitljiv na beloj podlozi */
    --ink: #1c1f24;
    --ink-2: #556072;
    --ink-3: #7f8a9c;

    /* bočni meni — uvek taman, i u svetloj temi (AdminKit navy) */
    --side-bg: #222e3c;
    --side-bg-2: #2b3947;
    --side-ink: rgba(233, 236, 239, .55);
    --side-ink-2: rgba(233, 236, 239, .8);
    --side-active: #e9ecef;

    --shadow-sm: 0 1px 2px rgba(20, 24, 31, .05);
    --shadow: 0 0 .875rem 0 rgba(20, 24, 31, .07);
    --shadow-lg: 0 14px 40px rgba(20, 24, 31, .16);

    --r: 4px;
    --r-sm: 3px;
    --r-lg: 6px;
}

[data-tema="tamna"] {
    --accent-soft: #1b2a40;
    --ok-soft: #103328;
    --ok-tekst: #3ee2ab;
    --bad-soft: #3a151b;
    --bad-tekst: #ff8a94;
    --warn-soft: #332a10;
    --warn-tekst: #f3c95f;
    --info-soft: #0f2b30;
    --info-tekst: #5fd3e6;

    --bg: #161a22;
    --surface: #1e232c;
    --surface-2: #252b35;
    --line: #2d3440;
    --line-strong: #3b4351;

    --ink: #e9ecef;
    --ink-2: #aab2c0;
    --ink-3: #838da0;

    --side-bg: #171d26;
    --side-bg-2: #20272f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

/* Bootstrap promenljive vezujemo za naše */
:root {
    --bs-primary: var(--accent);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   2. Osnova
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;   /* sopstveni :active umesto sivog flasha */
    overscroll-behavior-y: contain;             /* povlačenje na dnu ne "gura" ceo prozor */
}

/* dodirna povratna informacija — zamena za hover koji na telefonu ne postoji */
.mobilna-stavka:active, .meni-stavka:active, .ikon-dugme:active {
    transform: scale(.94);
    transition: transform .08s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); text-decoration: underline; }

h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 650; letter-spacing: -.01em; margin: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; opacity: 1; }

/* Bootstrap-ov <code> je fiksno roze i u tamnoj temi pada ispod čitljivog */
code {
    font-family: var(--font-num);
    font-size: .9em;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 1px 5px;
}

/* brojevi poravnati po širini cifre */
.broj, td.broj, th.broj {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

::selection { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   2a. Ikonice (Feather, inline SVG — vidi core/Icons.php)

   Svaka ikonica ostaje umotana u <i>, baš kao ranije Font Awesome <i
   class="fa-solid fa-x">, pa sva postojeća pravila koja postavljaju
   veličinu/razmak na "i" (npr. ".btn i { font-size: … }") rade i dalje bez
   ijedne izmene. SVG je veličine 1em, pa prati font-size roditelja; boja
   ide preko currentColor, pa prati color roditelja.
   -------------------------------------------------------------------------- */
i.ikonica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
}
i.ikonica svg { width: 1em; height: 1em; }

.vrti svg { animation: vrti-se .9s linear infinite; transform-origin: center; }
@keyframes vrti-se { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   3. Raspored: sidebar + topbar + sadržaj
   -------------------------------------------------------------------------- */
.ljuska { min-height: 100vh; }

.bocna {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--side-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .22s ease;
}

.bocna-logo {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex: 0 0 auto;
}

.bocna-logo .znak {
    width: 34px; height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
}

.bocna-logo .ime {
    color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bocna-meni {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 10px 20px;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.bocna-meni::-webkit-scrollbar { width: 6px; }
.bocna-meni::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.meni-grupa {
    color: var(--side-ink-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 20px 14px 8px;
}
.meni-grupa:first-child { padding-top: 6px; }

/*
   AdminKit ne boji ceo red za aktivnu stavku — umesto toga levo stoji
   3px traka u boji akcenta, a pozadina je blag prelaz ka providnom.
   Traka je transparentna i na neaktivnim stavkama (samo bez boje) da se
   sadržaj ne bi pomerao kad stavka postane aktivna.
*/
.meni-stavka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 11px;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--side-ink);
    font-size: 14px;
    font-weight: 500;
    transition: background-color .1s, color .1s, border-color .1s;
}
.meni-stavka:hover { background: rgba(255, 255, 255, .04); color: var(--side-ink-2); text-decoration: none; }

.meni-stavka.aktivna,
.meni-stavka.aktivna:hover {
    background: linear-gradient(90deg, var(--accent-ring) 0%, rgba(59, 125, 221, .09) 55%, transparent 100%);
    border-left-color: var(--accent);
    color: var(--side-active);
    font-weight: 500;
}

.meni-stavka i { width: 18px; text-align: center; font-size: 15px; flex: 0 0 auto; opacity: .9; }
.meni-stavka.aktivna i { opacity: 1; }

/* modul koji tek dolazi — vidi se u meniju, ali se ne može kliknuti */
.meni-stavka.uskoro { opacity: .42; cursor: default; }
.meni-stavka.uskoro:hover { background: transparent; color: var(--side-ink); }
.meni-stavka.uskoro .znacka {
    background: transparent;
    border: 1px solid var(--side-ink-2);
    color: var(--side-ink-2);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.meni-stavka .znacka {
    margin-left: auto;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}
.meni-stavka.aktivna .znacka { background: rgba(0, 0, 0, .25); }
.meni-stavka .znacka.crvena { background: var(--bad); color: #fff; }

.bocna-dno {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: var(--side-ink-2);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- topbar ---- */
.glavna { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.gornja {
    height: var(--topbar-h);
    position: sticky; top: 0; z-index: 1020;
    background: var(--surface);
    box-shadow: 0 0 2rem rgba(20, 24, 31, .08);
    display: flex; align-items: center; gap: 14px;
    padding: 0 24px;
}

/*
   Naslov strane stoji u sadržaju (.strana-zaglavlje), pa ga u gornjoj
   traci prikazujemo tek na uskom ekranu — tamo se pretraga sklanja i
   traka bi inače ostala prazna.
*/
.naslov-omot { display: none; }
.gornja .naslov-strane { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.gornja .putanja { color: var(--ink-3); font-size: 12.5px; }

.gornja-desno { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.ikon-dugme {
    width: 40px; height: 40px;
    border: 0;
    background: var(--surface-2);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 15px;
    transition: background-color .15s, color .15s;
}
.ikon-dugme:hover { background: var(--accent-soft); color: var(--accent); }

.mobilna-pretraga-dugme { display: none; }

/* ---- pretraga u gornjoj traci ---- */
.gornja-pretraga { position: relative; width: 300px; }
.gornja-pretraga i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); font-size: 13px; pointer-events: none;
}
.gornja-pretraga input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 13.5px;
    font-family: inherit;
}
.gornja-pretraga input::placeholder { color: var(--ink-3); }
.gornja-pretraga input:focus {
    outline: 0; background: var(--surface);
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}

/* rezultati pretrage */
.pretraga-lista {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 5px;
    max-height: 340px; overflow-y: auto;
    z-index: 1050;
    display: none;
}
.pretraga-lista.vidljiva { display: block; }
.pretraga-lista a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; border-radius: var(--r-sm);
    color: var(--ink); font-size: 13.5px; text-decoration: none;
}
.pretraga-lista a:hover, .pretraga-lista a.istaknut { background: var(--surface-2); }
.pretraga-lista a i { width: 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.pretraga-lista a .grupa { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.pretraga-lista .prazno-malo { padding: 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

.korisnik-cip {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 4px 4px;
    border: 0;
    border-radius: 40px;
    background: var(--surface-2);
    cursor: pointer;
}
.korisnik-cip:hover { background: var(--accent-soft); }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-h), #128293);
    color: #fff; display: grid; place-items: center;
    font-size: 12px; font-weight: 600;
}
.korisnik-cip .ko { font-size: 13.5px; font-weight: 500; color: var(--ink); }

.dropdown-menu {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: 13.5px;
    padding: 5px;
}
.dropdown-item { color: var(--ink); border-radius: var(--r-sm); padding: 7px 11px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-divider { border-color: var(--line); }
.dropdown-header { color: var(--ink-3); font-size: 11.5px; }

/* ---- sadržaj ---- */
.sadrzaj { flex: 1 1 auto; padding: 22px; }

.strana-zaglavlje {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.strana-zaglavlje h1 { font-size: 21px; }
.strana-zaglavlje .podnaslov { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.strana-zaglavlje .alatke { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* mobilni */
.zastor {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1035;
}

/*
   Donja traka — glavni znak da ovo "radi kao aplikacija" na telefonu.
   U markup-u je uvek prisutna (app.php), ali se pokazuje samo ispod
   991px; iznad toga postoji bočni meni pa traka nema šta da radi.
*/
.mobilna-traka {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1040;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(20, 24, 31, .06);
}

@media (max-width: 991px) {
    .bocna { transform: translateX(-100%); }
    body.meni-otvoren .bocna { transform: none; }
    body.meni-otvoren .zastor { display: block; }
    .glavna { margin-left: 0; }
    .sadrzaj { padding: 14px 14px calc(78px + env(safe-area-inset-bottom)); }
    .gornja {
        padding: 0 14px;
        padding-top: env(safe-area-inset-top);
        height: calc(var(--topbar-h) + env(safe-area-inset-top));
    }
    .korisnik-cip .ko { display: none; }
    .gornja-pretraga { display: none; }
    .naslov-omot { display: block; min-width: 0; }
    .naslov-omot .naslov-strane { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mobilna-pretraga-dugme { display: grid; }

    /* dugme "lupa" razvuče pretragu preko cele gornje trake */
    .gornja.pretraga-otvorena .naslov-omot,
    .gornja.pretraga-otvorena .gornja-desno > *:not(.mobilna-pretraga-dugme) { display: none; }
    .gornja.pretraga-otvorena .gornja-pretraga {
        display: block; flex: 1 1 auto; width: auto;
    }

    .mobilna-traka { display: flex; align-items: stretch; gap: 2px; }

    /* Bootstrap dugmad i akcije u zaglavlju strane su za miš — na dodir
       im treba veći hvatljivi prostor, ne samo veći tekst. */
    .btn { --bs-btn-padding-y: 9px; --bs-btn-padding-x: 15px; min-height: 40px; }
    .btn-sm { --bs-btn-padding-y: 7px; --bs-btn-padding-x: 12px; min-height: 36px; }
    .btn-xs { padding: 7px 10px; min-height: 32px; }
    .ikon-dugme { width: 44px; height: 44px; }
    .meni-stavka { padding-top: 13px; padding-bottom: 13px; }
    .dropdown-item { padding: 11px 12px; }

    /* Input veći od 16px sprečava da iOS Safari uveća stranu pri fokusu. */
    .form-control, .form-select { font-size: 16px; min-height: 44px; }
    .form-control.form-control-sm, .form-select.form-select-sm { min-height: 38px; }
    .form-check-input { width: 20px; height: 20px; }

    /* Modal kao "bottom sheet" — kliže odozdo, ne otvara se na sredini ekrana. */
    .modal-dialog {
        margin: 0; max-width: none;
        display: flex; align-items: flex-end;
        min-height: 100dvh;
    }
    .modal-content {
        width: 100%;
        max-height: 92dvh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        border: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-body { max-height: calc(92dvh - 130px); overflow-y: auto; }
    .modal.fade .modal-dialog { transform: translateY(100%); }
    .modal.show .modal-dialog { transform: translateY(0); }
}

.mobilna-stavka {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border: 0; background: transparent;
    color: var(--ink-3);
    font-size: 10.5px; font-weight: 600;
    border-radius: var(--r-sm);
    min-height: 52px;
}
.mobilna-stavka i.ikonica svg { width: 20px; height: 20px; }
.mobilna-stavka:hover, .mobilna-stavka:focus { color: var(--ink-3); text-decoration: none; }
.mobilna-stavka.aktivna { color: var(--accent); }
body.meni-otvoren .mobilna-stavka#mobilnaVise { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Kartice
   -------------------------------------------------------------------------- */
/* AdminKit kartice nemaju ivicu — razdvajaju se samo blagom senkom */
.kartica {
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.kartica-vrh {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.kartica-vrh h2, .kartica-vrh h3 {
    font-size: 14.8px; font-weight: 700; margin: 0;
    color: var(--ink-2); letter-spacing: -.005em;
}
.kartica-vrh .opis { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.kartica-vrh .desno { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.kartica-telo { padding: 20px; }
.kartica-telo.zbijeno { padding: 0; }

.kartica-dno {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

/* ---- segmentna dugmad (ALL / 1M / 6M / 1Y) ---- */
.segment {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 3px;
    gap: 2px;
}
.segment button {
    border: 0; background: transparent;
    color: var(--ink-2);
    font-size: 12px; font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s, color .15s;
}
.segment button:hover { color: var(--ink); }
.segment button.aktivan {
    background: var(--surface);
    color: var(--accent);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
[data-tema="tamna"] .segment button.aktivan { background: var(--accent); color: #fff; }

/* obojena ivica na vrhu kartice */
.kartica.uspeh    { border-top: 3px solid var(--ok); }
.kartica.opasnost { border-top: 3px solid var(--bad); }
.kartica.pazi     { border-top: 3px solid var(--warn); }
.kartica.info     { border-top: 3px solid var(--info); }
.kartica.akcenat  { border-top: 3px solid var(--accent); }

/* --------------------------------------------------------------------------
   5. Statistika (info-box iz starog programa, samo lepše)
   -------------------------------------------------------------------------- */
.stat-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/*
   Grid od dva reda: gore tekst levo i ikonica desno, dole sparkline
   preko obe kolone. Prvi red guta višak visine, pa grafikon uvek sedi
   na dnu i pločice u istom redu ostaju iste visine bez obzira na to
   ima li neka od njih dodatni red teksta.

   U pogledima je ikonica napisana pre teksta; ovde je grid-om vraćamo
   na desnu stranu, pa nijedan pogled nije morao da se prepravlja.
*/
.stat {
    background: var(--surface);
    border-radius: var(--r);
    padding: 20px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    column-gap: 14px;
    transition: box-shadow .18s, transform .18s;
    overflow: hidden;   /* da sparkline ne pobegne preko zaobljenih uglova */
}
.stat:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.stat .telo  { grid-column: 1; grid-row: 1; min-width: 0; }
.stat .ikona { grid-column: 2; grid-row: 1; }

/* AdminKit ".stat" značka je pun krug — isti obrazac koristimo za našu .ikona */
.stat .ikona {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 16px;
}
.stat .ikona.plava  { background: var(--accent-soft); color: var(--accent); }
.stat .ikona.zelena { background: var(--ok-soft);     color: var(--ok-tekst); }
.stat .ikona.crvena { background: var(--bad-soft);    color: var(--bad-tekst); }
.stat .ikona.zuta   { background: var(--warn-soft);   color: var(--warn-tekst); }
.stat .ikona.tirkiz { background: var(--info-soft);   color: var(--info-tekst); }

.stat .oznaka {
    color: var(--ink-2); font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat .vrednost {
    font-size: 25px; font-weight: 700; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums; margin-top: 5px;
    line-height: 1.15;
}

/*
   Chart.js sa maintainAspectRatio:false meri roditelja platna, pa mu
   okvir mora imati određenu visinu i position:relative. Bez toga se
   grafikon ne skuplja kad se prozor suzi.
*/
.graf-okvir { position: relative; height: 240px; }
.graf-okvir.nizak { height: 190px; }
.graf-okvir canvas { display: block; }

/*
   Sparkline ide preko cele širine, do same ivice pločice. Zato mu
   dajemo širinu veću od sadržaja za oba padding-a i vraćamo ga
   negativnom marginom; kod pločice sa grafikonom donji padding pada
   na nulu da grafikon sedne na ivicu.
*/
.stat.sa-grafom { padding-bottom: 0; }
.stat .stat-graf {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 14px -20px 0;
    height: 56px;
    position: relative;
}
.stat .stat-graf canvas { display: block; }
.stat .vrednost .val { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
.stat .dodatak { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

/* --------------------------------------------------------------------------
   6. Merač limita (6M / 8M)
   -------------------------------------------------------------------------- */
.limit { padding: 15px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.limit + .limit { margin-top: 12px; }

.limit-vrh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.limit-vrh .naziv { font-weight: 650; font-size: 13.5px; }
.limit-vrh .procenat { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
/* boju procenta uzimamo iz -tekst niza; žive boje ostaju traci ispod */
.procenat.dobro    { color: var(--ok-tekst); }
.procenat.pazi     { color: var(--warn-tekst); }
.procenat.opasnost { color: var(--bad-tekst); }
.limit-dno .prekoracenje { color: var(--bad-tekst); font-weight: 650; }

.traka { height: 9px; border-radius: 20px; background: var(--line); overflow: hidden; }
.traka > span {
    display: block; height: 100%; border-radius: 20px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
    background: var(--ok);
}
.traka.pazi     > span { background: var(--warn); }
.traka.opasnost > span { background: var(--bad); }

.limit-dno {
    display: flex; justify-content: space-between; gap: 10px;
    margin-top: 8px; font-size: 12.5px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* upozorenje */
.upozorenje {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 13px 15px;
    border-radius: var(--r);
    border: 1px solid;
    margin-bottom: 14px;
    font-size: 13.5px;
}
.upozorenje i { font-size: 17px; margin-top: 1px; flex: 0 0 auto; }
.upozorenje b { display: block; margin-bottom: 2px; }
.upozorenje.pazi     { background: var(--warn-soft); border-color: rgba(180, 83, 9, .35);  color: var(--warn-tekst); }
.upozorenje.opasnost { background: var(--bad-soft);  border-color: rgba(220, 38, 38, .35); color: var(--bad-tekst); }
.upozorenje.info     { background: var(--info-soft); border-color: rgba(14, 116, 144, .35); color: var(--info-tekst); }
.upozorenje.uspeh    { background: var(--ok-soft);   border-color: rgba(21, 128, 61, .35); color: var(--ok-tekst); }
.upozorenje .tekst   { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Dugmad (nadgradnja Bootstrap-a)
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-size: 13.5px;
    --bs-btn-font-weight: 550;
    --bs-btn-border-radius: var(--r-sm);
    --bs-btn-padding-y: 6.5px;
    --bs-btn-padding-x: 13px;
    letter-spacing: -.005em;
    /* NIKAD "transition: .13s" — to znači "all" i animira i CSS promenljive,
       pa element ostane u staroj temi pri prebacivanju svetla/tamna. */
    transition: background-color .13s, border-color .13s, color .13s, transform .13s;
    display: inline-flex; align-items: center; gap: 6.5px;
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: 12.5px; }

/* Dugme koje je zapravo <a> nasleđuje globalno `a:hover { text-decoration: underline }`.
   Podvučeno dugme nigde ne treba — ni obično, ni pilula, ni stavka u padajućem meniju. */
.btn, .btn:hover, .btn:focus,
.pilula, .pilula:hover, .pilula:focus,
.ikon-dugme, .ikon-dugme:hover, .ikon-dugme:focus,
.dropdown-item, .dropdown-item:hover, .dropdown-item:focus { text-decoration: none; }

.btn-sm { --bs-btn-font-size: 12.5px; --bs-btn-padding-y: 4px; --bs-btn-padding-x: 9px; }
.btn-xs {
    font-size: 11.5px; padding: 3px 7px; border-radius: 5px;
    line-height: 1.4; display: inline-flex; align-items: center; gap: 5px;
    /* Samo debljina i stil — boju NE diramo, nju daje Bootstrap kroz
       --bs-btn-border-color. Skraćenica `border: 1px solid transparent`
       je gasila obrub svakom .btn-secondary.btn-xs (dugmad "otvori" i
       "izmeni" u svim tabelama su izgledala kao ikonice bez okvira). */
    border-width: 1px;
    border-style: solid;
}

.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-h); --bs-btn-hover-border-color: var(--accent-h); --bs-btn-active-bg: var(--accent-h); }
/*
   Bootstrap "success/warning/info" žive boje su prelagane za belo dugme
   (kontrast ispod 4.5:1), pa ovde stoje ručno zatamnjene varijante —
   izračunato tako da belo slovo ostane čitljivo (WCAG AA).
*/
.btn-success { --bs-btn-bg: #148362; --bs-btn-border-color: #148362; --bs-btn-color: #fff; --bs-btn-hover-bg: #106b4f; --bs-btn-hover-border-color: #106b4f; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #106b4f; }
.btn-danger  { --bs-btn-bg: var(--bad); --bs-btn-border-color: var(--bad); --bs-btn-color: #fff; --bs-btn-hover-bg: #b52d3a; --bs-btn-hover-border-color: #b52d3a; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #b52d3a; }
.btn-warning { --bs-btn-bg: #976f1a; --bs-btn-border-color: #976f1a; --bs-btn-color: #fff; --bs-btn-hover-bg: #7d5c15; --bs-btn-hover-border-color: #7d5c15; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #7d5c15; }
.btn-info    { --bs-btn-bg: #128293; --bs-btn-border-color: #128293; --bs-btn-color: #fff; --bs-btn-hover-bg: #0e6a78; --bs-btn-hover-border-color: #0e6a78; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0e6a78; }

.btn-secondary, .btn-default {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink);
}

/* Dugme-prekidač koje ostaje "pritisnuto" (npr. Cela godina na troškovima). */
.btn.aktivan {
    --bs-btn-bg: var(--accent-soft);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
}

.btn-tiho {
    background: transparent; border: 1px solid transparent; color: var(--ink-2);
    padding: 5px 9px; border-radius: var(--r-sm); font-size: 13px;
}
.btn-tiho:hover { background: var(--surface-2); color: var(--ink); }

.dugmad-grupa { display: inline-flex; gap: 4px; }

/* --------------------------------------------------------------------------
   8. Forme
   -------------------------------------------------------------------------- */
.form-label, label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }

.form-control, .form-select {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    border-radius: var(--r-sm);
    font-size: 13.5px;
    padding: 7px 11px;
    transition: border-color .13s, box-shadow .13s;
}
.form-control:focus, .form-select:focus {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--ink-2); }

.form-control-sm, .form-select-sm { font-size: 12.5px; padding: 4.5px 8px; }

.form-text { color: var(--ink-3); font-size: 11.5px; }

.polje { margin-bottom: 13px; }
.polje.greska .form-control, .polje.greska .form-select { border-color: var(--bad); }
.poruka-greska { color: var(--bad); font-size: 11.5px; margin-top: 3px; display: block; }

.input-group-text {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--ink-2);
    font-size: 13px;
}

.form-check-input { background-color: var(--surface); border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Tabele + DataTables
   -------------------------------------------------------------------------- */
table.dataTable, .tabela {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0 !important;
}

.tabela-omot { overflow-x: auto; }

table.dataTable thead th, .tabela thead th {
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line) !important;
    border-top: 0 !important;
    white-space: nowrap;
    vertical-align: middle;
}

table.dataTable tbody td, .tabela tbody td {
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    vertical-align: middle;
}

table.dataTable tbody tr:hover td, .tabela tbody tr:hover td { background: var(--surface-2); }

table.dataTable tfoot th, .tabela tfoot th {
    padding: 10px 12px;
    border-top: 2px solid var(--line-strong);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Tabele na telefonu — kartični prikaz

   Tabela sa 6-8 kolona se na 375px ekranu ili stisne u nečitljivo ili
   traži vodoravno klizanje kroz svaki red. Ispod 991px svaki red postaje
   zasebna kartica: prva kolona je naslov, ostale idu kao parovi
   "naziv → vrednost", a dugmad padaju na dno kartice.

   Nazive kolona upisuje JavaScript u data-labela (vidi oznaciCelije() u
   app.js) — CSS ih odatle čita preko ::before. Bez tog koraka bi kartice
   bile niz brojeva bez ijednog objašnjenja, jer se <thead> ne vidi.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /*
       Dovoljna je klasa .tabela: svaka tabela u programu je nosi, a
       DataTables joj samo dodaje svoju .dataTable klasu povrh toga.

       Ćelije se hvataju kao "td, th" jer neke tabele (stavke fakture)
       prvu ćeliju reda pišu kao <th> — bez toga bi taj red ostao
       neoznačen i prikazao se kao gola tabela usred kartica.
    */
    .tabela-omot { overflow-x: visible; }

    .tabela { display: block; }
    .tabela thead { display: none; }
    .tabela tbody { display: block; }

    .tabela tbody tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r);
        margin: 10px;
        padding: 4px 0;
        box-shadow: var(--shadow-sm);
    }
    .tabela tbody tr:hover td, .tabela tbody tr:hover th { background: transparent; }

    /*
       Naziv kolone ide kao float ulevo, a ne kao flex stavka: u flex-u bi
       svaki <span> u ćeliji ("55,000.00" + "din.") postao zasebna stavka i
       razleteo se na suprotne krajeve reda. Sa float-om sadržaj ćelije
       ostaje običan inline tok i drži se na okupu.
    */
    .tabela tbody td, .tabela tbody th {
        display: block;
        border: 0;
        padding: 6px 14px;
        text-align: right;
        line-height: 1.5;
        overflow: hidden;   /* zatvori float da ne curi u sledeću ćeliju */
    }

    .tabela tbody td::before, .tabela tbody th::before {
        content: attr(data-labela);
        float: left;
        margin-right: 16px;
        max-width: 45%;
        text-align: left;
        color: var(--ink-2);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
    }

    /* prazna ćelija bi ostavila naziv koji visi bez vrednosti */
    .tabela tbody .celija-prazna { display: none; }

    /* prva kolona je naslov kartice — preko cele širine, bez naziva */
    .tabela tbody .celija-naslov {
        display: block;
        text-align: left;
        font-size: 15px;
        font-weight: 650;
        padding: 10px 14px 8px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 4px;
    }
    .tabela tbody .celija-naslov::before { content: none; }

    /* dugmad na dno kartice, razvučena da se lakše pogode prstom */
    .tabela tbody .celija-akcije {
        display: block;
        padding: 10px 14px;
        margin-top: 4px;
        border-top: 1px solid var(--line);
    }
    .tabela tbody .celija-akcije::before { content: none; }
    .celija-akcije .dugmad-grupa { display: flex; width: 100%; gap: 6px; }
    .celija-akcije .dugmad-grupa > * { flex: 1 1 0; justify-content: center; min-height: 36px; }

    /*
       Zbirni red postaje jedna traka "Ukupno … iznos". Prazne <th> ćelije
       koje na desktopu samo poravnavaju kolone ovde bi bile sivi pravougaonici
       bez sadržaja, pa ih sklanjamo.
    */
    .tabela tfoot { display: block; }
    .tabela tfoot tr {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 14px;
        margin: 10px;
        border-radius: var(--r);
        background: var(--surface-2);
    }
    .tabela tfoot th {
        border: 0; background: transparent;
        text-align: left;
    }
    .tabela tfoot th:empty { display: none; }

    /* red "Nema zapisa" nije kartica nego poruka */
    .tabela tbody tr:has(> td.dataTables_empty) {
        border: 0; box-shadow: none; background: transparent;
    }
    td.dataTables_empty::before { content: none; }
}

/* --------------------------------------------------------------------------
   DataTables okolina

   Ne učitavamo DataTables-ov osnovni CSS (koristi float-ove i ne uklapa se
   u temu), pa raspored kontrola pravimo sami. U app.js je zadat `dom` koji
   gornje i donje kontrole pakuje u .dt-vrh i .dt-dno, a ovde ih poravnavamo:
   levo dužina/broj zapisa, desno pretraga/straničenje.
   -------------------------------------------------------------------------- */
.dataTables_wrapper { padding: 0; position: relative; }

.dt-vrh, .dt-dno {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
}
.dt-vrh { border-bottom: 1px solid var(--line); background: var(--surface); }
.dt-dno { border-top: 1px solid var(--line); background: var(--surface); }

.dt-vrh-desno, .dt-dno-desno { margin-left: auto; }

/* kad tabela nema pretragu/straničenje, traka se uklanja u app.js */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 0;
    margin: 0;
    float: none;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    padding: 5px 10px; margin: 0; background: var(--surface); color: var(--ink);
    min-width: 230px; font-size: 13px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    padding: 4px 7px; background: var(--surface); color: var(--ink); margin: 0;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_info {
    color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums;
}

.dataTables_wrapper .dataTables_paginate { display: flex; gap: 4px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px !important; margin: 0; border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important; background: var(--surface) !important;
    color: var(--ink-2) !important; font-size: 12.5px; cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-2) !important; color: var(--ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .4; cursor: default; background: var(--surface) !important; color: var(--ink-2) !important;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); box-shadow: var(--shadow); color: var(--ink-2);
    padding: 9px 16px; font-size: 13px;
}

@media (max-width: 575px) {
    .dt-vrh-desno, .dt-dno-desno { margin-left: 0; width: 100%; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
    .dataTables_wrapper .dataTables_filter label { width: 100%; }
}
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { color: var(--accent); }
table.dataTable tbody tr { background: transparent; }
td.dataTables_empty { color: var(--ink-3) !important; padding: 26px !important; text-align: center; }

/* --------------------------------------------------------------------------
   10. Značke / status pilule
   -------------------------------------------------------------------------- */
/* AdminKit značke su blago zaobljeni pravougaonici, ne pilule */
.pilula {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2.5px 9px;
    border-radius: var(--r-sm);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
    line-height: 1.5;
}
.pilula i { font-size: 9.5px; }
.pilula.zelena { background: var(--ok-soft);     color: var(--ok-tekst); }
.pilula.crvena { background: var(--bad-soft);    color: var(--bad-tekst); }
.pilula.zuta   { background: var(--warn-soft);   color: var(--warn-tekst); }
.pilula.plava  { background: var(--accent-soft); color: var(--accent); }
.pilula.tirkiz { background: var(--info-soft);   color: var(--info-tekst); }
.pilula.siva   { background: var(--surface-2);   color: var(--ink-2); border: 1px solid var(--line); }

.iznos.plus  { color: var(--ok-tekst);  font-weight: 650; }
.iznos.minus { color: var(--bad-tekst); font-weight: 650; }

/* --------------------------------------------------------------------------
   11. Modali
   -------------------------------------------------------------------------- */
.modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--line); padding: 15px 19px; }
.modal-title { font-size: 15.5px; font-weight: 650; }
.modal-body { padding: 19px; }
.modal-footer {
    border-top: 1px solid var(--line); padding: 13px 19px;
    background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
[data-tema="tamna"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* --------------------------------------------------------------------------
   12. Select2 uklapanje
   -------------------------------------------------------------------------- */
.select2-container { width: 100% !important; }

/* originalni <select> koji Select2 sakriva ne sme da širi stranicu */
.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
.select2-container--default .select2-selection--single {
    height: auto; padding: 4px 4px 4px 7px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 24px; font-size: 13.5px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-dropdown { background: var(--surface); border-color: var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--surface); color: var(--ink); border-color: var(--line-strong); border-radius: 5px; }
.select2-results__option { font-size: 13.5px; color: var(--ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); color: #fff; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }

/* --------------------------------------------------------------------------
   13. Poruke (toast)
   -------------------------------------------------------------------------- */
.poruke-stek {
    position: fixed; top: 14px; right: 14px; z-index: 2000;
    display: flex; flex-direction: column; gap: 9px;
    max-width: 360px;
}
.poruka {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--ink);
    animation: poruka-ulaz .22s ease;
}
.poruka.uspeh  { border-left-color: var(--ok); }
.poruka.greska { border-left-color: var(--bad); }
.poruka.pazi   { border-left-color: var(--warn); }
.poruka i.vodeca { margin-top: 2px; }
.poruka.uspeh  i.vodeca { color: var(--ok-tekst); }
.poruka.greska i.vodeca { color: var(--bad-tekst); }
.poruka.pazi   i.vodeca { color: var(--warn-tekst); }
.poruka .zatvori { margin-left: auto; background: 0; border: 0; color: var(--ink-3); cursor: pointer; padding: 0 2px; }

@keyframes poruka-ulaz { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   14. Prazno stanje / učitavanje
   -------------------------------------------------------------------------- */
.prazno { text-align: center; padding: 42px 20px; color: var(--ink-2); font-size: 13px; }
.prazno i { font-size: 34px; opacity: .35; display: block; margin-bottom: 12px; }
.prazno b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 4px; }

.skelet {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skelet 1.3s infinite;
    border-radius: 5px;
    height: 13px;
}
@keyframes skelet { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   15. Sitnice
   -------------------------------------------------------------------------- */
.mala { font-size: 12px; }
.prigusi { color: var(--ink-3); }
/* Bootstrap-ov .text-muted je vezan za svetlu temu — vežemo ga za našu paletu */
.text-muted { color: var(--ink-3) !important; }
.jaci { font-weight: 650; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-num); }

.razmak-8  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.razmak-12 { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.filter-traka {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.filter-traka .form-control, .filter-traka .form-select { width: auto; }

.mesec-nav {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    overflow: hidden; background: var(--surface);
}
.mesec-nav button { border: 0; background: transparent; color: var(--ink-2); padding: 5px 11px; cursor: pointer; }
.mesec-nav button:hover { background: var(--surface-2); color: var(--ink); }
.mesec-nav .tekuci {
    padding: 5px 13px; font-weight: 650; font-size: 13px;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    min-width: 150px; text-align: center;
}

/* ---- plan fakturisanja ---- */
.plan-mesec.zakljucan { opacity: .6; }
.plan-mesec.zakljucan .prazno i { font-size: 24px; }

.plan-redovi { display: grid; }

.plan-red {
    display: flex; gap: 8px; align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
}
.plan-red:last-child { border-bottom: 0; background: var(--surface-2); }
.plan-red:hover { background: var(--surface-2); }

.plan-red .plan-naziv { flex: 1; min-width: 0; }
.plan-red .plan-iznos { width: 140px; flex: 0 0 auto; }
.plan-red .btn { flex: 0 0 auto; }

.plan-mesec .kartica-dno { font-size: 12.5px; }
.plan-mesec .plan-zbir { font-size: 15px; }

@media (max-width: 575px) {
    .plan-red { flex-wrap: wrap; }
    .plan-red .plan-iznos { width: 110px; }
}

/* ---- članovi tima na projektu ---- */
.clan {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.clan:first-child { padding-top: 0; }
.clan:last-child { border-bottom: 0; padding-bottom: 0; }
.clan .avatar { width: 32px; height: 32px; font-size: 13px; flex: 0 0 auto; }
.clan .dugmad-grupa { opacity: 0; transition: opacity .13s; }
.clan:hover .dugmad-grupa { opacity: 1; }

/* ---- lista priloženih fajlova ---- */
.lista-fajlova { display: grid; gap: 7px; }
.fajl {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.fajl:hover { border-color: var(--line-strong); }
.fajl > i:first-child { font-size: 17px; color: var(--ink-3); flex: 0 0 auto; width: 19px; text-align: center; }
.fajl .dugmad-grupa { flex: 0 0 auto; }

/*
   Tamnoplava koja prati PDF ponude (namerno se ne diže sa ostatkom palete
   — PDF štampa uvek istu boju, bez obzira na temu aplikacije). Promenljiva
   postoji da bi inline stilovi u offers/show.php (koji doslovno prate
   raspored PDF-a) mogli da se čitaju i u tamnoj temi.
*/
:root { --pdf-akcenat: #113F74; }
[data-tema="tamna"] { --pdf-akcenat: #7ba7dd; }

/* naslov odeljka u prikazu ponude — prati izgled PDF-a */
.odeljak-naslov {
    color: var(--pdf-akcenat);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--line);
    padding-bottom: 5px;
    margin: 22px 0 10px;
}

/* ---- specifikacija ponude ---- */
.spec-red {
    display: flex; gap: 9px; align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
}
.spec-red:last-child { border-bottom: 0; }
.spec-red:hover { background: var(--surface-2); }
.spec-red input:first-child { flex: 0 0 34%; }
.spec-red input:nth-child(2) { flex: 1; }

/* ---- Summernote uklapanje ----

   Summernote-ov CSS se učitava kroz section('stilovi'), dakle POSLE
   app.css. Zato sva pravila ovde imaju `body` ispred: bez toga bi na
   istoj specifičnosti pobedio Summernote i uređivač bi u tamnoj temi
   ostao beo.
*/
body .note-editor.note-frame {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    margin: 0;
}
body .note-editor.note-frame .note-toolbar {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 5px 7px 7px;
}
body .note-editor.note-frame .note-editing-area .note-editable {
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
}
body .note-editor.note-frame .note-statusbar { background: var(--surface-2); border-top: 1px solid var(--line); }
body .note-editor.note-frame .note-editable[contenteditable="true"]:empty::before { color: var(--ink-3); }

body .note-btn {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-2);
}
body .note-btn:hover,
body .note-btn:focus,
body .note-btn.active { background: var(--surface-2); color: var(--ink); }
body .note-btn i, body .note-icon-caret { color: inherit; }

body .note-editor .dropdown-menu { font-size: 13px; }
body .note-editor .dropdown-menu,
body .note-editor .note-dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}
body .note-editor .note-dropdown-item:hover,
body .note-editor .dropdown-item:hover { background: var(--surface-2); color: var(--ink); }

/* Summernote-ovi sopstveni modali (link, slika, video, prečice) */
body .note-modal .note-modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
body .note-modal .note-modal-header,
body .note-modal .note-modal-footer { border-color: var(--line); }
body .note-modal .note-modal-title { color: var(--ink); }
body .note-modal label,
body .note-modal .note-form-label { color: var(--ink-2); }
body .note-modal .form-control,
body .note-modal .note-input {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}
body .note-modal .close { color: var(--ink-2); opacity: 1; }
body .note-modal kbd { background: var(--surface-2); color: var(--ink); }
body .note-placeholder { color: var(--ink-3); }

/* ---- hronologija beleški ---- */
.vremeplov { position: relative; padding-left: 26px; }
.vremeplov::before {
    content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
    width: 2px; background: var(--line);
}
.vremeplov-stavka { position: relative; padding-bottom: 18px; }
.vremeplov-stavka:last-child { padding-bottom: 0; }
.vremeplov-stavka::before {
    content: ""; position: absolute; left: -22px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--line);
}
.vremeplov-vrh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.vremeplov-vrh .ko { font-weight: 650; font-size: 13px; }
.vremeplov-vrh .kad { color: var(--ink-3); font-size: 11.5px; }
.vremeplov-tekst { font-size: 13.5px; white-space: pre-wrap; color: var(--ink); }
.vremeplov-stavka .alatke { opacity: 0; transition: opacity .13s; }
.vremeplov-stavka:hover .alatke { opacity: 1; }

/* ---- bogat tekst iz editora u prikazu ---- */
.tekst-sadrzaj { font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.tekst-sadrzaj p { margin: 0 0 9px; }
.tekst-sadrzaj p:last-child { margin-bottom: 0; }
.tekst-sadrzaj ul, .tekst-sadrzaj ol { margin: 0 0 9px; padding-left: 22px; }
.tekst-sadrzaj h3, .tekst-sadrzaj h4, .tekst-sadrzaj h5 { margin: 14px 0 7px; font-size: 14.5px; }
.tekst-sadrzaj table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.tekst-sadrzaj td, .tekst-sadrzaj th { border: 1px solid var(--line); padding: 6px 9px; }

/* prijava — ista tamna podloga kao bočni meni, da se poklope */
.prijava-ekran {
    min-height: 100vh; display: grid; place-items: center;
    background: var(--side-bg);
    padding: 20px;
    position: relative; overflow: hidden;
}
/* blagi plavi odsjaj iza kutije */
.prijava-ekran::before {
    content: '';
    position: absolute; inset: -20%;
    background:
        radial-gradient(closest-side, rgba(59, 125, 221, .30), transparent) 30% 20%/60% 60% no-repeat,
        radial-gradient(closest-side, rgba(23, 162, 184, .18), transparent) 75% 80%/55% 55% no-repeat;
}
.prijava-kutija {
    position: relative;
    width: 100%; max-width: 390px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    padding: 32px 30px;
}
/* isti vetrenjača-znak kao u meniju, samo veći */
.prijava-kutija .znak-veliki {
    width: 76px; height: 76px;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px;
}

/* štampa */
@media print {
    .bocna, .gornja, .strana-zaglavlje .alatke, .poruke-stek { display: none !important; }
    .glavna { margin-left: 0; }
    .kartica { border: 0; box-shadow: none; }
    body { background: #fff; }
}