/* ============================================================================
   Symphony DMS — dizajn sistem po symphony.is brendu.
   Tamna tema, Poppins, ljubičasta #726BFF + cijan + purpur, pill dugmad,
   staklene kartice, blage animacije (uz poštovanje prefers-reduced-motion).
   ========================================================================== */

:root, [data-bs-theme="dark"] {
    /* Symphony tokeni (hsl vrijednosti sa symphony.is) */
    --sy-bg: hsl(220 13% 9%);
    --sy-bg-soft: hsl(220 13% 11%);
    --sy-card: hsl(220 13% 12%);
    --sy-card-hover: hsl(220 13% 14%);
    --sy-muted: hsl(220 13% 15%);
    --sy-border: hsl(220 13% 18%);
    --sy-border-strong: hsl(220 13% 24%);
    --sy-fg: hsl(0 0% 98%);
    --sy-fg-muted: hsl(220 8% 65%);
    --sy-primary: hsl(243 100% 71%);      /* #726BFF */
    --sy-primary-soft: hsla(243 100% 71% / .14);
    --sy-cyan: hsl(200 100% 60%);
    --sy-purple: hsl(280 100% 65%);
    --sy-coral: hsl(14 100% 70%);
    --sy-green: hsl(150 65% 52%);
    --sy-odabran: hsl(154 34% 20%);       /* podloga odabranog reda u listi */
    --sy-yellow: hsl(42 95% 60%);
    --sy-red: hsl(0 84% 62%);
    /* Novi UI 1b (Damir 16.10.2026.): boja kad je TEKST. U tamnoj temi ista kao osnovna (tu prolazi kontrast); svijetla je tamnija. */
    --sy-primary-tekst: var(--sy-primary);
    --sy-green-tekst: var(--sy-green);
    --sy-yellow-tekst: var(--sy-yellow);
    --sy-red-tekst: var(--sy-red);
    /* Novi UI korak 2 (Damir 16.10.2026.): podloga JEDNE indigo kartice Početne (Suada A1) — bijeli tekst ~8:1. */
    --sy-indigo-kartica: hsl(243 55% 48%);
    --sy-gradient: linear-gradient(100deg, var(--sy-primary), var(--sy-cyan) 55%, var(--sy-purple));
    --sy-radius: .75rem;

    /* Bootstrap preslikavanje */
    --bs-body-bg: var(--sy-bg);
    --bs-body-color: var(--sy-fg);
    --bs-secondary-color: var(--sy-fg-muted);
    --bs-tertiary-color: var(--sy-fg-muted);
    --bs-border-color: var(--sy-border);
    --bs-emphasis-color: #fff;
    --bs-secondary-bg: var(--sy-muted);
    --bs-tertiary-bg: var(--sy-bg-soft);
    --bs-link-color: var(--sy-primary);
    --bs-link-hover-color: hsl(243 100% 78%);
    --bs-body-font-family: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-radius: var(--sy-radius);
}

html { font-size: 14px; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 15px; } }

html { position: relative; min-height: 100%; }

body {
    margin-bottom: 64px;
    background:
        radial-gradient(60rem 40rem at 110% -20%, hsla(243 100% 71% / .08), transparent 60%),
        radial-gradient(50rem 34rem at -20% 115%, hsla(280 100% 65% / .07), transparent 60%),
        var(--sy-bg);
    background-attachment: fixed;
    color: var(--sy-fg);
    letter-spacing: .1px;
}

::selection { background: hsla(243 100% 71% / .35); }

/* ---------- Tipografija ---------- */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.sy-naslov-gradient {
    background: var(--sy-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

code { color: var(--sy-cyan); background: hsla(200 100% 60% / .08); padding: .1em .35em; border-radius: .35rem; }

.text-muted { color: var(--sy-fg-muted) !important; }

/* ---------- Navigacija ---------- */
.sy-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: hsla(220 13% 9% / .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--sy-border);
}

.sy-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: 1.15rem;
    color: #fff !important;
    text-decoration: none;
}

.sy-brand .znak {
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    background: var(--sy-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 0 18px hsla(243 100% 71% / .45);
}

.sy-brand .dms { color: var(--sy-fg-muted); font-weight: 500; }

/* Traka s ikonicama (Damir 11.09.): inline-flex + gap umjesto razmaka u markupu, da ikonica i
   tekst dijele istu osnovnu liniju bez obzira na visinu simbola. Padding je zbijeniji nego prije
   (.8rem umjesto 1rem) — s ikonicom stavka i dalje bude čitljiva, a traka uža, pa priority+
   kasnije počne seliti u „Više". */
.sy-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--sy-fg-muted);
    border-radius: 999px;
    padding: .42rem .8rem;
    font-weight: 500;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

/* Ikonica je u mirnom stanju prigušenija od teksta; na hoveru i kad je stavka aktivna dobija punu
   boju. To aktivnu stavku odvaja jače nego sama podloga, a ne traži drugu boju teksta. */
.sy-nav .nav-link .sy-ik { opacity: .7; transition: opacity .18s ease, color .18s ease; }

.sy-nav .nav-link:hover { color: #fff; background: hsla(0 0% 100% / .06); transform: translateY(-1px); }
.sy-nav .nav-link:hover .sy-ik { opacity: 1; }

.sy-nav .nav-link.aktivan {
    color: #fff;
    background: var(--sy-primary-soft);
    box-shadow: inset 0 0 0 1px hsla(243 100% 71% / .35);
}

.sy-nav .nav-link.aktivan .sy-ik { opacity: 1; color: var(--sy-primary-tekst); }

/* Značke (Računi, Odobravanja): ista veličina bez obzira na boju — plava i žuta su prije davale
   različito široke pilule jer je "3" uže od "12", pa su stavke poskakivale pri osvježavanju broja. */
.sy-nav .sy-znacka {
    min-width: 1.25rem;
    padding: .12rem .35rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 999px;
    text-align: center;
}

/* Stavka preseljena u „Više" (site.js mijenja nav-link → dropdown-item, sam <li> se premješta pa
   ikonica ide s njim): isti razmak ikonica–tekst kao u traci. */
.sy-vise-meni .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.sy-vise-meni .dropdown-item .sy-ik { opacity: .7; }

/* Profil kao ikonica (Damir 30.09.: „Naziv maila ili username neka isto bude ikonica"): u traci je samo krug s inicijalom
   (.sy-avatar), a prikazno ime i mail su u tooltipu linka. Bez paddinga: okvir od 1 px obujmi krug (1,6rem, v. ispod), pa je
   prsten visok ~26 px, koliko i susjedna dugmad (zvonce, tema ~25,4 px), a ne viši od njih. Isti okvir i podloga kao prije. */
.sy-korisnik {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 1px solid var(--sy-border);
    border-radius: 999px;
    background: hsla(0 0% 100% / .04);
}

/* Priority+ traka (06.09.): desni blok se ne stiska, stavke koje ne stanu žive u dropdownu „Više" (isti stil kao admin
   meni). Ime korisnika više nije u traci (30.09.), pa mu ne treba ni elipsa. */
.sy-desno { flex-shrink: 0; }

/* Dorade koraka 2 (Damir 17.10.2026.): traka po ulozi nema više priority+ seljenja, pa mora stati sama. Mjereno pravim renderom (sve uloge u
   dva entiteta, svi moduli): bez ovoga stranica je vodoravno prelazila do ~1555 px. Na 1200–1599 px stavke gube ikonicu (natpis ostaje) i dio
   razmaka; ispod 1280 px naziv entiteta ostaje samo u tooltipu (šifra se vidi). Sigurnosna mreža: lista stavki se prelama u drugi red umjesto
   vodoravnog skrola cijele stranice (npr. kad se pojavi i „Kontrola računa"). */
@media (min-width: 1200px) {
    .sy-nav { flex-wrap: wrap; row-gap: .25rem; }
}
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .sy-nav .nav-link { padding: .42rem .6rem; }
    .sy-nav .nav-link > .sy-ik { display: none; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
    .sy-entitet-naziv { display: none; }
}
.sy-vise-meni { min-width: 12rem; }
.sy-vise-meni .dropdown-item { white-space: nowrap; }

.sy-avatar {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--sy-gradient);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Krug u traci (Damir 30.09.): 1,6rem (24 px) umjesto 1,7rem — uz okvir od 1 px i bez paddinga prsten je 26 px, na ~0,6 px od
   susjednih dugmadi (s 1,7rem bi bio 27,5 px, 2,1 px viši). */
.sy-korisnik .sy-avatar { width: 1.6rem; height: 1.6rem; }

/* Meni avatara (Novi UI korak 2, Damir 16.10.2026., spec §2): krug je dugme — bez Bootstrapove podloge dugmeta, isti prsten kao
   ranije link; stavke kao „Više" (ikona prigušena, natpis), stanje teme desno i prigušeno. */
button.sy-korisnik { color: inherit; cursor: pointer; }
button.sy-korisnik:focus-visible { outline: 2px solid var(--sy-primary); outline-offset: 2px; }
.sy-korisnik-meni { min-width: 15rem; }
.sy-korisnik-meni .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.sy-korisnik-meni .dropdown-item .sy-ik { opacity: .7; }
.sy-korisnik-meni .sy-tema-stanje { margin-left: auto; padding-left: .75rem; color: var(--sy-fg-muted); font-size: .85em; }
/* Ime i uloge pišu se kako jesu („Suada Ćosović · Finansije"), ne velikim slovima kao naslovi grupa admin menija. */
.sy-admin-meni .dropdown-header.sy-korisnik-zaglavlje { white-space: normal; max-width: 20rem; text-transform: none; letter-spacing: normal; font-size: .85rem; }

/* Čip entiteta (Novi UI korak 2, spec §3): jedan entitet — šifra i naziv kao na dugmetu izbora, bez strelice i bez klika. */
.sy-entitet-cip {
    display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 20rem;
    padding: .2rem .6rem; border: 1px solid var(--sy-border); border-radius: 999px; font-size: .875rem; color: var(--sy-fg-muted);
}
.sy-entitet-cip code { color: inherit; font-size: .8rem; font-weight: 600; }
.sy-entitet-cip.sy-entitet-drugi { border-color: var(--sy-yellow); }

/* ---------- Dugmad (pill, Symphony) ---------- */
/* Dugmad (Damir 07.09.: „poraditi na izgledu dugmeta"): mirniji radijus umjesto pilule, zbijenije, isti ritam svuda. */
.btn { border-radius: .75rem; font-weight: 600; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; line-height: 1.25; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn:not(.btn-sm) { padding: .55rem 1.15rem; }
.btn-sm { border-radius: .55rem; padding: .32rem .7rem; }
/* Dugme samo s ikonicom (07.09.): kvadratasto, ikonica malo veća, tekst je u tooltipu/aria-label. */
.sy-ikona-dugme { padding: .3rem .62rem !important; font-size: 1.15rem; line-height: 1; }
.sy-ikona-dugme:not(.btn-sm) { padding: .38rem .72rem !important; font-size: 1.35rem; }
/* Novi UI 5-8a (Suada E4): „Učitaj" je jedno dugme u redu naslova liste; izbor fajla je skriven. „Novi dokument" kao padajuća ostaje
   samo u ličnom prostoru (Prostori), u listi Dokumenata je u „⋯". */
.sy-upload-dugme { white-space: nowrap; }
.sy-novi-dok-grupa .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    .sy-novi-dok-grupa { width: 100%; }
    .sy-novi-dok-grupa .btn { flex: 1 1 auto; }
}
/* „⋯" liste: dovoljno širok za padajuće Grupiši i Sortiraj. */
.sy-lista-vise-meni { min-width: 16rem; }
.sy-lista-naslov-tekst { font-weight: 600; }
/* Novi UI 5-9a: iznos računa u listi dokumenata — cifre poravnate, valuta tiše. */
table.sy-lista td[data-k="iznos"] { font-variant-numeric: tabular-nums; }
/* U karticama je svaka ćelija red „Naslov: vrijednost" — iznos tu ide lijevo kao i ostali (text-end je za kolonu tabele). */
table.sy-lista.sy-prikaz-grid td[data-k="iznos"] { text-align: left !important; }
.sy-valuta { color: var(--sy-fg-muted); font-size: .85em; }

/* Novi UI 5-10 (Suada E13): dijalog „Premjesti u…" — AI prijedlog kao prva ponuda, pa pretraga i stablo foldera (radio, uvučeno po nivou). */
.sy-ai-dijalog-kutija.sy-pd-kutija { max-width: 34rem; width: calc(100vw - 2rem); }
.sy-pd-podnaslov { color: var(--sy-fg-muted); font-size: .9rem; margin: -.25rem 0 .75rem; overflow-wrap: anywhere; }
.sy-pd-ai { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: .6rem; background: var(--sy-primary-soft);
    border: 1px solid var(--sy-border); margin-bottom: .75rem; }
.sy-pd-ai-tekst { flex: 1 1 auto; min-width: 0; }
.sy-pd-ai-cilj { font-weight: 600; overflow-wrap: anywhere; }
.sy-pd-ai-razlog { color: var(--sy-fg-muted); font-size: .85rem; }
.sy-pd-ai :is(.sy-pd-tamo, .sy-pd-ai-trazi) { white-space: nowrap; }
.sy-pd-ili { text-align: center; color: var(--sy-fg-muted); font-size: .85rem; margin: .25rem 0 .5rem; }
.sy-pd-stablo { max-height: min(45vh, 22rem); overflow-y: auto; margin: .5rem 0; }
.sy-pd-folder { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: .4rem; cursor: pointer; margin: 0; }
.sy-pd-folder:hover { background: var(--sy-bg-soft); }
.sy-pd-folder:has(input:checked) { background: var(--sy-odabran); color: var(--sy-green-tekst); font-weight: 600; }
.sy-pd-folder .form-check-input { margin: 0; flex-shrink: 0; }
/* Završni pregled 5-10a (I2): predak kojeg nema u listi (trenutni folder, folder bez prava) — sivo, ne bira se, samo drži stablo tačnim. */
.sy-pd-folder.sy-pd-predak { color: var(--sy-fg-muted); cursor: default; padding-top: .2rem; padding-bottom: .2rem; }
.sy-pd-folder.sy-pd-predak:hover { background: transparent; }
.sy-pd-prazno { color: var(--sy-fg-muted); font-size: .9rem; padding: .5rem; }
.sy-pd-greska { color: var(--sy-red-tekst); font-size: .9rem; margin-bottom: .5rem; }
@media (max-width: 575.98px) {
    .sy-pd-ai { flex-wrap: wrap; }
    .sy-pd-ai .sy-pd-tamo { width: 100%; }
}

/* Novi UI 5-10: poruka poslije premještanja s „Poništi" (10 s) — dole u sredini, da ne pokrije panel učitavanja (dole lijevo) ni chat (desno). */
.sy-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1085; display: flex; align-items: center; gap: .75rem;
    max-width: calc(100vw - 2rem); padding: .6rem .9rem; border-radius: .6rem; background: var(--sy-card); color: var(--sy-fg);
    border: 1px solid var(--sy-border); box-shadow: 0 .5rem 1.5rem hsla(220 13% 3% / .35); }
.sy-toast-ponisti { font-weight: 600; padding: 0 .25rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-bg: var(--sy-primary);
    --bs-btn-border-color: var(--sy-primary);
    --bs-btn-hover-bg: hsl(243 100% 66%);
    --bs-btn-hover-border-color: hsl(243 100% 66%);
    --bs-btn-active-bg: hsl(243 100% 62%);
    --bs-btn-active-border-color: hsl(243 100% 62%);
    /* Blagi sjaj odozgo + mekša sjena (07.09.): dugme djeluje „ispupčeno", ne kao ravna ljubičasta pločica. */
    background-image: linear-gradient(180deg, hsla(0 0% 100% / .14), hsla(0 0% 100% / 0));
    box-shadow: 0 2px 10px hsla(243 100% 71% / .32), inset 0 1px 0 hsla(0 0% 100% / .18);
}

.btn-primary:hover { box-shadow: 0 6px 18px hsla(243 100% 71% / .45), inset 0 1px 0 hsla(0 0% 100% / .22); }

.btn-success {
    --bs-btn-bg: var(--sy-green);
    --bs-btn-border-color: var(--sy-green);
    --bs-btn-hover-bg: hsl(150 65% 46%);
    --bs-btn-hover-border-color: hsl(150 65% 46%);
    box-shadow: 0 4px 18px hsla(150 65% 52% / .3);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sy-fg-muted);
    --bs-btn-border-color: var(--sy-border-strong);
    --bs-btn-bg: hsla(0 0% 100% / .035);   /* „staklo" umjesto potpuno prozirnog (07.09.) */
    --bs-btn-hover-bg: hsla(0 0% 100% / .07);
    --bs-btn-hover-border-color: hsl(220 13% 34%);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: hsla(0 0% 100% / .1);
}

.btn-outline-primary {
    --bs-btn-color: var(--sy-primary);
    --bs-btn-border-color: hsla(243 100% 71% / .45);
    --bs-btn-hover-bg: var(--sy-primary-soft);
    --bs-btn-hover-border-color: var(--sy-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sy-primary-soft);
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem hsla(243 100% 71% / .35);
    border-color: var(--sy-primary);
    outline: none;
}

/* ---------- Kartice i stakleni paneli ---------- */
.card, .sy-panel {
    background: linear-gradient(180deg, hsla(0 0% 100% / .03), transparent 40%), var(--sy-card);
    border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.card-header {
    background: hsla(0 0% 100% / .03);
    border-bottom: 1px solid var(--sy-border);
    font-weight: 600;
}

.card:hover { border-color: var(--sy-border-strong); }

.sy-panel { padding: 1.1rem 1.25rem; }

.bg-light { background: var(--sy-muted) !important; }
.border, .border-top, .border-bottom { border-color: var(--sy-border) !important; }
.border.rounded { background: var(--sy-bg-soft); }

/* Kartica-link (početna) */
.sy-kartica-link {
    display: block;
    text-decoration: none;
    color: var(--sy-fg);
    padding: 1.4rem 1.5rem;
    height: 100%;
}

.sy-kartica-link:hover { color: #fff; }

.sy-kartica-link .ikona {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--sy-primary-soft);
    box-shadow: inset 0 0 0 1px hsla(243 100% 71% / .3);
    margin-bottom: .8rem;
}

a.card:hover, .sy-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px hsla(220 13% 4% / .55), 0 0 0 1px hsla(243 100% 71% / .25);
}

/* ---------- Tabele ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sy-fg);
    --bs-table-border-color: var(--sy-border);
    --bs-table-striped-bg: hsla(0 0% 100% / .02);
    --bs-table-hover-bg: hsla(243 100% 71% / .06);
    margin-bottom: 0;
}

.table thead th {
    color: var(--sy-fg-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-bottom: 1px solid var(--sy-border-strong);
    padding-top: .7rem;
    padding-bottom: .7rem;
    white-space: nowrap;
}

.table td { padding-top: .65rem; padding-bottom: .65rem; vertical-align: middle; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: hsla(243 100% 71% / .05); }
.table-light, .table .table-light td { background: hsla(0 0% 100% / .025) !important; color: var(--sy-fg); }

.table-responsive { border: 1px solid var(--sy-border); border-radius: var(--sy-radius); background: var(--sy-card); padding: .35rem .85rem .85rem; }

/* ---------- Forme ---------- */
.form-control, .form-select {
    background: var(--sy-bg-soft);
    border: 1px solid var(--sy-border-strong);
    color: var(--sy-fg);
    border-radius: .6rem;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:hover, .form-select:hover { border-color: hsl(220 13% 30%); }
.form-control:focus, .form-select:focus { background: var(--sy-bg-soft); color: #fff; }
.form-control::placeholder { color: hsl(220 8% 45%); }
.form-label { color: var(--sy-fg-muted); font-size: .85rem; font-weight: 500; margin-bottom: .3rem; }
.form-check-input { background-color: var(--sy-bg-soft); border-color: var(--sy-border-strong); }
.form-check-input:checked { background-color: var(--sy-primary); border-color: var(--sy-primary); }

/* ---------- Bedževi ---------- */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .38em .75em; }
.badge.bg-success { background: hsla(150 65% 52% / .16) !important; color: var(--sy-green-tekst); box-shadow: inset 0 0 0 1px hsla(150 65% 52% / .4); }
.badge.bg-primary { background: var(--sy-primary-soft) !important; color: hsl(243 100% 80%); box-shadow: inset 0 0 0 1px hsla(243 100% 71% / .4); }
.badge.bg-warning { background: hsla(42 95% 60% / .15) !important; color: var(--sy-yellow-tekst) !important; box-shadow: inset 0 0 0 1px hsla(42 95% 60% / .4); }
.badge.bg-danger { background: hsla(0 84% 62% / .15) !important; color: var(--sy-red-tekst); box-shadow: inset 0 0 0 1px hsla(0 84% 62% / .4); }
.badge.bg-secondary { background: hsla(0 0% 100% / .07) !important; color: var(--sy-fg-muted); box-shadow: inset 0 0 0 1px var(--sy-border-strong); }

/* ---------- Alerti ---------- */
.alert { border-radius: var(--sy-radius); border: 1px solid; backdrop-filter: blur(6px); }
.alert-success { background: hsla(150 65% 52% / .1); border-color: hsla(150 65% 52% / .35); color: hsl(150 60% 72%); }
.alert-danger { background: hsla(0 84% 62% / .1); border-color: hsla(0 84% 62% / .35); color: hsl(0 90% 78%); }
.alert-info { background: hsla(200 100% 60% / .1); border-color: hsla(200 100% 60% / .35); color: hsl(200 95% 75%); }
.alert-warning { background: hsla(42 95% 60% / .1); border-color: hsla(42 95% 60% / .35); color: hsl(42 95% 72%); }

/* ---------- Prijava (hero) ---------- */
.sy-auth {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sy-auth-kartica {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: 2.2rem 2.2rem 1.8rem;
    background: hsla(220 13% 12% / .78);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid hsla(0 0% 100% / .09);
    border-radius: 1.15rem;
    box-shadow: 0 30px 80px hsla(220 13% 3% / .6);
}

.sy-auth-kartica::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, hsla(243 100% 71% / .55), transparent 35%, transparent 65%, hsla(280 100% 65% / .45));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Lebdeće gradient mrlje u pozadini */
.sy-mrlje { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sy-mrlja {
    position: absolute;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .32;
    animation: sy-lebdi 22s ease-in-out infinite alternate;
}

.sy-mrlja.m1 { background: hsl(243 100% 55%); top: -12rem; right: -8rem; }
.sy-mrlja.m2 { background: hsl(280 100% 45%); bottom: -14rem; left: -10rem; animation-delay: -8s; animation-duration: 28s; }
.sy-mrlja.m3 { background: hsl(200 100% 40%); top: 45%; left: 55%; width: 22rem; height: 22rem; opacity: .18; animation-delay: -15s; }

@keyframes sy-lebdi {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(4rem, 2.5rem, 0) scale(1.15); }
}

/* QR kod mora na bijelu pločicu — skener na tamnoj podlozi ne čita */
.sy-qr { background: #fff; border-radius: .9rem; padding: .9rem; display: inline-block; }
.sy-qr img, .sy-qr svg, .sy-qr canvas { display: block; }

/* ---------- Animacije ulaska ---------- */
main.sy-ulaz > * { animation: sy-fade-up .5s ease-out backwards; }   /* both bi TRAJNO ostavio transform → stacking context → modal ispod backdropa (24.08.) */
main.sy-ulaz > *:nth-child(2) { animation-delay: .06s; }
main.sy-ulaz > *:nth-child(3) { animation-delay: .12s; }
main.sy-ulaz > *:nth-child(4) { animation-delay: .18s; }
main.sy-ulaz > *:nth-child(5) { animation-delay: .24s; }
main.sy-ulaz > *:nth-child(n+6) { animation-delay: .3s; }

@keyframes sy-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* Prazan sažetak validacije ne prikazuje crvenu kutiju */
.validation-summary-valid { display: none; }

/* ---------- Stablo foldera (lijevi vertikalni panel, obrazac Skenore) ---------- */
.sy-stablo { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

.sy-folder {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .55rem;
    margin: .1rem 0;
    border-radius: .55rem;
    color: var(--sy-fg-muted);
    text-decoration: none;
    font-size: .92rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.sy-folder .ikona { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--sy-primary-tekst); opacity: .8; }

a.sy-folder:hover { background: hsla(0 0% 100% / .06); color: #fff; transform: translateX(2px); }

.sy-folder.aktivan {
    background: var(--sy-primary-soft);
    color: #fff;
    box-shadow: inset 0 0 0 1px hsla(243 100% 71% / .35);
}

.sy-folder.aktivan .ikona { opacity: 1; }

.sy-folder.zakljucan { opacity: .45; cursor: not-allowed; }
.sy-folder.zakljucan .ikona { color: var(--sy-fg-muted); }

/* Boja foldera (Damir 06.09.): dvotonska ikonica prati --sy-folder-boja s linka, bez nje ljubičastu teme. */
.sy-folder .ikona.sy-fikona { color: var(--sy-folder-boja, var(--sy-primary)); opacity: .95; }
.sy-folder.aktivan .ikona.sy-fikona { opacity: 1; }

/* Paleta boja foldera u dijalogu: kvadratići + „zadana" (↺) */
.sy-boje { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.sy-boja {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: .55rem;
    border: 2px solid transparent;
    background: var(--sy-folder-boja, var(--sy-primary));
    color: #fff;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.sy-boja:hover, .sy-boja:focus-visible { transform: scale(1.1); border-color: var(--sy-fg); outline: none; }
.sy-boja.aktivna { border-color: var(--sy-fg); box-shadow: inset 0 0 0 2px var(--sy-card); }
.sy-boja.zadana::after { content: "↺"; }

/* Oblici ikonice u dijalogu „Izgled foldera": crtaju se u izabranoj boji (živi pregled) */
.sy-izgled-kutija { max-width: 34rem; }
.sy-izgled-natpis { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sy-fg-muted); margin-bottom: .35rem; }
.sy-oblici { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; color: var(--sy-folder-boja, var(--sy-primary)); }
.sy-oblik {
    width: 3rem;
    height: 3rem;
    padding: .35rem;
    border-radius: .55rem;
    border: 2px solid transparent;
    background: var(--sy-bg-soft);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.sy-oblik .sy-fikona { width: 100%; height: 100%; }
.sy-oblik:hover, .sy-oblik:focus-visible { transform: scale(1.08); border-color: var(--sy-fg); outline: none; }
.sy-oblik.aktivna { border-color: var(--sy-fg); background: var(--sy-card); }
[data-bs-theme="light"] .sy-oblik { background: hsl(220 25% 94%); }

/* ---------- Traka podfoldera iznad liste (Damir 06.09.): sklopivo zaglavlje + pločice ---------- */
.sy-podfolderi { border: 1px solid var(--sy-border); border-radius: var(--sy-radius); background: var(--sy-bg-soft); }
.sy-podfolderi-toggla {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .45rem .8rem;
    background: none;
    border: none;
    border-radius: var(--sy-radius);
    color: var(--sy-fg-muted);
    font-size: .85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.sy-podfolderi-toggla:hover { color: var(--sy-fg); background: hsla(0 0% 100% / .04); }
.sy-podfolderi-strelica { display: inline-block; font-size: .75rem; transition: transform .18s ease; }
.sy-podfolderi.otvorena .sy-podfolderi-strelica { transform: rotate(90deg); }
.sy-podfolderi-mreza { display: flex; flex-wrap: wrap; gap: .5rem; padding: .2rem .8rem .8rem; }
a.sy-plocica {
    flex-direction: column;
    width: 7.4rem;
    margin: 0;
    padding: .6rem .4rem .5rem;
    gap: .3rem;
    text-align: center;
    border: 1px solid transparent;
    background: var(--sy-card);
}
a.sy-plocica:hover { transform: translateY(-2px); border-color: var(--sy-border-strong); background: var(--sy-card-hover); color: var(--sy-fg); }
a.sy-plocica .ikona.sy-fikona { width: 2.6rem; height: 2.6rem; }
.sy-plocica-naziv {
    font-size: .8rem;
    line-height: 1.2;
    color: var(--sy-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
a.sy-plocica.sy-drop-cilj { border-color: var(--sy-primary); }
[data-bs-theme="light"] .sy-podfolderi-toggla:hover { background: hsla(220 30% 10% / .04); }

/* Sklopivo stablo: chevron + ugniježđene grane */
.sy-toggla {
    width: 1.1rem;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--sy-fg-muted);
    font-size: .7rem;
    padding: 0;
    cursor: pointer;
    transform: rotate(90deg);
    transition: transform .18s ease, color .18s ease;
}

.sy-toggla:hover { color: #fff; }
.sy-toggla.zatvoren { transform: rotate(0deg); }
.sy-toggla.prazna { cursor: default; display: inline-block; }

.sy-grana { margin-left: 1.05rem; border-left: 1px solid var(--sy-border); padding-left: .35rem; }
.sy-grana.zatvorena { display: none; }

/* ---------- Desni panel kolona grida (TuzlaFarm obrazac: + na zaglavlju) ---------- */
.sy-kolone-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20rem;
    z-index: 1040;
    padding: 1.1rem 1.2rem;
    background: hsla(220 13% 12% / .97);
    backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid var(--sy-border);
    box-shadow: -18px 0 44px hsla(220 13% 4% / .55);
    overflow-y: auto;
    animation: sy-uklizi .22s ease-out;
}

@keyframes sy-uklizi {
    from { transform: translateX(1.5rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.sy-kolona-red { border-bottom: 1px solid var(--sy-border); }
.sy-kolona-red:last-child { border-bottom: none; }

/* ---------- Footer ---------- */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 48px;
    color: var(--sy-fg-muted);
    border-top: 1px solid var(--sy-border) !important;
    background: hsla(220 13% 9% / .8);
}

/* ===== Komentari na dokumentu (25.08.): desni klizni panel ===== */
.sy-kom-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24rem;
    max-width: 92vw;
    z-index: 1040;
    padding: 1.1rem 1.2rem;
    background: hsla(220 13% 12% / .97);
    backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid var(--sy-border);
    box-shadow: -18px 0 44px hsla(220 13% 4% / .55);
    overflow-y: auto;
    animation: sy-uklizi .22s ease-out;
}

.sy-kom-red {
    padding: .45rem .6rem;
    border: 1px solid var(--sy-border);
    border-radius: .5rem;
    margin-bottom: .45rem;
    background: hsla(220 13% 16% / .6);
}

.sy-kom-odgovor { background: hsla(220 13% 19% / .55); }

.sy-kom-autor { font-weight: 600; font-size: .82rem; }

.sy-kom-tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; margin: .15rem 0; }

.sy-kom-broj { position: absolute; top: -.45rem; right: -.45rem; font-size: .62rem; }

.sy-kom-emojiji { display: flex; gap: .25rem; }

/* ===== „Detalji + AI sažetak" (25.08.): desni panel s razgovorom o dokumentu ===== */
.sy-det-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26rem;
    max-width: 94vw;
    z-index: 1040;
    padding: 1.1rem 1.2rem;
    background: hsla(220 13% 12% / .97);
    backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid var(--sy-border);
    box-shadow: -18px 0 44px hsla(220 13% 4% / .55);
    overflow-y: auto;
    animation: sy-uklizi .22s ease-out;
    display: flex;
    flex-direction: column;
}

.sy-det-naslov { font-weight: 600; }

.sy-det-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .9rem;
    font-size: .85rem;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--sy-border);
    border-radius: .5rem;
    background: hsla(220 13% 16% / .6);
}

.sy-det-info dt { color: hsla(220 10% 65% / 1); font-weight: 500; }
.sy-det-info dd { margin: 0; }

.sy-det-poruke {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: .6rem;
}

/* Textarea pitanja (29.08.): raste kroz JS, ručna drška bi se tukla s time. */
.sy-det-unos { resize: none; overflow-y: auto; max-height: 170px; }

/* Kontekst meni stabla foldera (29.08.) — desni klik na folder. */
.sy-kontekst {
    position: fixed;
    z-index: 1060;
    min-width: 15rem;
    padding: .35rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

.sy-kontekst-stavka {
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem .6rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    font-size: .9rem;
}

.sy-kontekst-stavka:hover { background: var(--bs-secondary-bg-subtle, #f1f3f5); }
/* Novi UI 1b (Damir 16.10.2026.): Lucide ikona + tekst kao u meniju „Više" (.sy-vise-meni) — isti razmak, ikona prigušenija od teksta;
   boju nasljeđuje od stavke, pa „Obriši" (text-danger) ostaje crven i s ikonom. */
.sy-kontekst-stavka { display: flex; align-items: center; gap: .5rem; }
.sy-kontekst-stavka .sy-ik-l { flex: none; width: 20px; height: 20px; opacity: .75; }
.sy-kontekst-crta { border-top: 1px solid var(--bs-border-color, #dee2e6); margin: .3rem 0; }

/* Dijalozi znaju nositi višelinijski tekst (statistika foldera). */
.sy-ai-dijalog-tekst { white-space: pre-line; }

/* Traka grupnih akcija nad listom dokumenata (29.08.) — lijepi se za dno dok je nešto označeno. */
.sy-grupno-traka {
    position: sticky;
    bottom: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .6rem .8rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25);
    z-index: 5;
}

/* AI generator strukture foldera (29.08.) — razgovor kao kod chat botova: korisnik desno,
   AI lijevo, vlastiti scroll s automatskim dnom. */
.sy-genai-poruke { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; padding-right: .25rem; }
.sy-genai-poruka { border-radius: .75rem; padding: .5rem .75rem; max-width: 44rem; border: 1px solid var(--bs-border-color, #dee2e6); }
.sy-genai-korisnik { background: var(--bs-primary-bg-subtle, #e7f1ff); align-self: flex-end; border-bottom-right-radius: .25rem; }
.sy-genai-ai { background: var(--bs-secondary-bg-subtle, #f1f3f5); align-self: flex-start; border-bottom-left-radius: .25rem; }
.sy-genai-sistem { background: var(--bs-success-bg-subtle, #e8f5e9); align-self: flex-start; }
.sy-genai-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }

.sy-det-poruka {
    padding: .45rem .65rem;
    border-radius: .65rem;
    font-size: .9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 92%;
}

.sy-det-pitanje { align-self: flex-end; background: hsla(226 71% 40% / .55); }

.sy-det-odgovor { align-self: flex-start; background: hsla(220 13% 19% / .8); border: 1px solid var(--sy-border); }

.sy-det-ceka { opacity: .6; font-style: italic; animation: sy-pulsira 1.1s ease-in-out infinite; }

@keyframes sy-pulsira {
    0%, 100% { opacity: .35; }
    50% { opacity: .8; }
}

.sy-det-chipovi { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ===== Dropdown „Administracija" (25.08.) — Symphony tamni stil ===== */
.sy-admin-meni {
    background: hsla(220 13% 13% / .98);
    backdrop-filter: blur(14px);
    border: 1px solid var(--sy-border);
    border-radius: .6rem;
    box-shadow: 0 18px 44px hsla(220 13% 4% / .55);
    padding: .4rem;
    min-width: 13rem;
}

/* Popup dozvoljenih zemalja (27.08.): pretraga + skrolabilna lista checkboxa. */
.sy-zemlje { min-width: 14rem; }
.sy-zemlje-dugme { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.sy-zemlje-meni { width: 19rem; }
.sy-zemlje-lista { max-height: 16rem; overflow-y: auto; }
.sy-zemlja-red { padding: .15rem .25rem; border-radius: .3rem; cursor: pointer; }
.sy-zemlja-red:hover { background: hsla(220 13% 22% / 1); }

/* Padajuće unutar tabele (27.08.): .table-responsive ih siječe (overflow) pa se vide odsječene
   sa skrolbarom — dok je meni otvoren, kontejner privremeno pušta preljev (klasa iz site.js). */
.table-responsive.sy-drop-otvoren { overflow: visible; }
.sy-premjesti-meni { max-height: 18rem; overflow-y: auto; min-width: 14rem; }

/* Vlastiti AI dijalog (27.08.) — umjesto sirove browser notifikacije. */
.sy-ai-dijalog { position: fixed; inset: 0; background: hsla(220 13% 5% / .6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1080; }
.sy-ai-dijalog-kutija { background: hsla(220 13% 13% / .98); border: 1px solid var(--sy-border); border-radius: .8rem; box-shadow: 0 18px 44px hsla(220 13% 4% / .6); padding: 1.1rem 1.25rem; max-width: 26rem; width: calc(100% - 2rem); }
.sy-ai-dijalog-naslov { font-weight: 600; margin-bottom: .35rem; }
.sy-ai-dijalog-tekst { color: hsla(220 10% 72% / 1); font-size: .9rem; margin-bottom: .9rem; overflow-wrap: anywhere; }
.sy-ai-dijalog-dugmad { display: flex; gap: .5rem; justify-content: flex-end; }
/* Lista izbora u dijalogu (Damir 06.10.2026., konto → šifra artikla): dugme po ponudi, lijevo poravnato; duga lista se skrola. */
.sy-ai-dijalog-izbori { display: flex; flex-direction: column; gap: .35rem; max-height: 50vh; overflow-y: auto; margin-bottom: .75rem; }
.sy-ai-izbor { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }   /* .btn je u ovoj temi flex, centriran */
.sy-ai-dijalog-napomena { color: hsla(220 10% 72% / 1); font-size: .8rem; margin: -.4rem 0 .75rem; }
.sy-prijave-kutija { max-width: 42rem; }

.sy-admin-meni .dropdown-header {
    color: hsla(220 10% 60% / 1);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .35rem .75rem .2rem;
}

.sy-admin-meni .dropdown-item {
    color: hsla(220 15% 88% / 1);
    border-radius: .4rem;
    padding: .35rem .75rem;
    font-size: .9rem;
}

.sy-admin-meni .dropdown-item:hover,
.sy-admin-meni .dropdown-item:focus {
    background: hsla(226 71% 40% / .35);
    color: #fff;
}

.sy-admin-meni .dropdown-item.aktivan {
    background: hsla(226 71% 40% / .5);
    color: #fff;
}

.sy-admin-meni .dropdown-divider { border-color: var(--sy-border); opacity: 1; margin: .3rem 0; }

/* ===== Vanjski link — dijeljenje dokumenata (26.08.) ===== */
.sy-dijeli-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26rem;
    max-width: 94vw;
    z-index: 1040;
    padding: 1.1rem 1.2rem;
    background: hsla(220 13% 12% / .97);
    backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid var(--sy-border);
    box-shadow: -18px 0 44px hsla(220 13% 4% / .55);
    overflow-y: auto;
    animation: sy-uklizi .22s ease-out;
}

.sy-dijeli-red {
    padding: .5rem .65rem;
    border: 1px solid var(--sy-border);
    border-radius: .5rem;
    margin-bottom: .5rem;
    background: hsla(220 13% 16% / .6);
}

.sy-dijeli-kod {
    padding: .65rem .75rem;
    border: 1px solid hsla(142 70% 45% / .5);
    border-radius: .6rem;
    background: hsla(142 70% 20% / .25);
}

.sy-dijeli-broj {
    font-size: 1.3rem;
    letter-spacing: .35em;
    font-weight: 700;
}

/* ===== Admin offcanvas + side-nav (obrazac TuzlaFarm, 26.08.) ===== */
.sy-ik { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }
/* Lucide ikone (novi UI 1b, Damir 16.10.2026., spec §4): linijske, crta 1.5 na mreži 24 — simboli l-* nemaju vlastite atribute crte, pa
   ih nosi ova klasa (naslijeđeno kroz <use>); boja je boja teksta stavke. Tačke s fill="currentColor" (paleta, ključ) ostaju pune. */
.sy-ik-l { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.sy-offcanvas {
    background: hsla(220 13% 11% / .98);
    backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid var(--sy-border);
    color: hsl(220 15% 88%);
    width: 20rem;
}

.sy-offcanvas .offcanvas-header { border-color: var(--sy-border) !important; }

.sy-side-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: hsl(220 10% 55%);
    margin: .2rem 0 .45rem;
}

.sy-side-nav { display: flex; flex-direction: column; gap: .15rem; }

.sy-side-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: .55rem;
    color: hsl(220 15% 82%);
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.sy-side-link:hover { background: hsla(0 0% 100% / .06); color: #fff; }

.sy-side-link.aktivan {
    background: linear-gradient(135deg, hsla(226 71% 55% / .35), hsla(268 75% 60% / .3));
    color: #fff;
}

.sy-side-link .sy-ik { opacity: .85; }

/* Admin nav (05.09.): podstavke ugniježđene pod roditeljem — ista komponenta u offcanvasu i lijevoj koloni. */
.sy-side-pod {
    margin-left: 1.25rem;
    padding: .3rem .7rem .3rem .85rem;
    border-left: 2px solid var(--sy-border);
    border-radius: 0 .5rem .5rem 0;
    font-size: .88rem;
    color: hsl(220 12% 68%);
}
.sy-side-pod.aktivan { border-left-color: var(--sy-primary); }
.sy-admin-kolona { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

.sy-nav .nav-link { white-space: nowrap; }

/* ============================================================================
   SVIJETLA TEMA (30.08.) — bira se po korisniku (ApplicationUser.SvijetlaTema),
   default ostaje tamna. Blok je ADITIVAN: prvo preslika --sy-* tokene, pa cilja
   pravila iznad koja nose hardkodirane tamne boje. Tamna tema se ne dira.
   ========================================================================== */
[data-bs-theme="light"] {
    /* Novi UI 1b (Damir 16.10.2026., spec 2026-10-16-ui-1b-izgled §2): A5 paleta — jedna boja za radnju, tri za status, ostalo bijelo i sivo. */
    --sy-bg: #F6F6F9;
    --sy-bg-soft: hsl(220 25% 94%);
    --sy-card: #FFFFFF;
    --sy-card-hover: hsl(220 30% 98%);
    --sy-muted: hsl(220 20% 91%);
    --sy-border: #E6E6EC;                  /* razdjelnici, ivice kartica i tabela */
    --sy-border-strong: #82828F;           /* ivica kontrola (polja, select, checkbox, sekundarna dugmad): 3,8:1 na bijeloj */
    --sy-fg: #0B0B14;
    --sy-fg-muted: #5A5A6B;
    --sy-primary: #6C69FF;                 /* indigo za ne-tekst: ikone, okvir, fokus, crta taba, ispuna pilule */
    --sy-primary-soft: #F2F1FF;
    --sy-cyan: hsl(200 95% 38%);
    --sy-purple: hsl(280 70% 48%);
    --sy-coral: hsl(14 85% 48%);
    --sy-green: #18A957;
    --sy-odabran: hsl(145 55% 89%);       /* podloga odabranog reda u listi */
    --sy-yellow: #C77700;                  /* A5 „pažnja" */
    --sy-red: #D6334B;                     /* A5 „blokada" */
    /* Kad je boja TEKST (ili podloga bijelog teksta): ista boja, tamnije — ≥ 4,5:1 na bijeloj, podlozi i podlozi pilule (Damir 16.10.: „da"). */
    --sy-primary-tekst: #5C59D9;
    --sy-green-tekst: #127B40;
    --sy-yellow-tekst: #995C00;
    --sy-red-tekst: #C12E44;
    --sy-indigo-kartica: var(--sy-primary-tekst);   /* #5C59D9 — bijeli tekst 5,4:1 */

    --bs-body-bg: var(--sy-bg);
    --bs-body-color: var(--sy-fg);
    --bs-secondary-color: var(--sy-fg-muted);
    --bs-tertiary-color: var(--sy-fg-muted);
    --bs-border-color: var(--sy-border);
    --bs-emphasis-color: hsl(220 30% 6%);
    --bs-secondary-bg: var(--sy-muted);
    --bs-tertiary-bg: var(--sy-bg-soft);
    --bs-link-color: var(--sy-primary-tekst);
    --bs-link-hover-color: color-mix(in srgb, var(--sy-primary-tekst) 85%, black);
    /* Završni pregled 1b: Bootstrap 5.3 boji `a` preko -rgb varijante (rgba(var(--bs-link-color-rgb), …)) — bez nje su linkovi
       ostajali plavi #0d6efd. Iste boje kao gore: #5C59D9 i 85 % od nje. */
    --bs-link-color-rgb: 92, 89, 217;
    --bs-link-hover-color-rgb: 78, 76, 184;
    /* Spec §2: „--sy-gradient → jednobojni indigo" — svaka upotreba (Provjera polja: ikona, traka napretka) postaje jednobojna. */
    --sy-gradient: var(--sy-primary);

    /* Novi UI 1b (Damir 16.10.: „da"): Bootstrap boje na A5 — plava i cyan postaju indigo. Tekst-nijanse, jer Bootstrap istu boju koristi
       i za tekst (.text-*, -rgb) i za ispunu; podloga = 13 % osnovne A5 boje, ivica = 40 %. */
    --bs-primary: #5C59D9;
    --bs-primary-rgb: 92, 89, 217;
    --bs-primary-text-emphasis: #5C59D9;
    --bs-primary-bg-subtle: #ECECFF;
    --bs-primary-border-subtle: #C4C3FF;
    --bs-info: #5C59D9;
    --bs-info-rgb: 92, 89, 217;
    --bs-info-text-emphasis: #5C59D9;
    --bs-info-bg-subtle: #ECECFF;
    --bs-info-border-subtle: #C4C3FF;
    --bs-success: #127B40;
    --bs-success-rgb: 18, 123, 64;
    --bs-success-text-emphasis: #127B40;
    --bs-success-bg-subtle: #E1F4E9;
    --bs-success-border-subtle: #A3DDBC;
    --bs-warning: #995C00;
    --bs-warning-rgb: 153, 92, 0;
    --bs-warning-text-emphasis: #995C00;
    --bs-warning-bg-subtle: #F8EDDE;
    --bs-warning-border-subtle: #E9C999;
    --bs-danger: #C12E44;
    --bs-danger-rgb: 193, 46, 68;
    --bs-danger-text-emphasis: #C12E44;
    --bs-danger-bg-subtle: #FAE4E8;
    --bs-danger-border-subtle: #EFADB7;
}

/* Novi UI 1b (spec 2026-10-16-ui-1b §2): svijetla tema bez gradijenata, mrlja i obojenih sjena — jednobojne podloge. */
[data-bs-theme="light"] body { background: var(--sy-bg); }
[data-bs-theme="light"] .sy-naslov-gradient { background: none; color: var(--sy-fg); }
[data-bs-theme="light"] .sy-avatar { background: var(--sy-primary-tekst); }
[data-bs-theme="light"] .card, [data-bs-theme="light"] .sy-panel { background: var(--sy-card); }
[data-bs-theme="light"] .sy-auth-kartica::before { display: none; }

[data-bs-theme="light"] ::selection { background: hsla(243 75% 56% / .22); }

[data-bs-theme="light"] h1, [data-bs-theme="light"] h2, [data-bs-theme="light"] h3,
[data-bs-theme="light"] h4, [data-bs-theme="light"] h5,
[data-bs-theme="light"] .h1, [data-bs-theme="light"] .h2, [data-bs-theme="light"] .h3,
[data-bs-theme="light"] .h4, [data-bs-theme="light"] .h5 { color: hsl(220 30% 9%); }

/* Klase koje na tamnoj podlozi glume „isticanje" — na svijetloj bi nestale. */
[data-bs-theme="light"] .text-white { color: var(--sy-fg) !important; }
[data-bs-theme="light"] .text-white-50 { color: var(--sy-fg-muted) !important; }
[data-bs-theme="light"] .btn-close-white { filter: none; }

/* Navigacija */
[data-bs-theme="light"] .sy-navbar { background: hsla(0 0% 100% / .85); }
[data-bs-theme="light"] .sy-brand { color: hsl(220 30% 9%) !important; }
[data-bs-theme="light"] .sy-brand .znak { background: var(--sy-primary); box-shadow: none; }
[data-bs-theme="light"] .sy-nav .nav-link:hover { color: var(--sy-fg); background: hsla(220 30% 10% / .05); }
[data-bs-theme="light"] .sy-nav .nav-link.aktivan { color: var(--sy-primary-tekst); }
[data-bs-theme="light"] .sy-korisnik { background: hsla(220 30% 10% / .03); }

/* Dugmad */
[data-bs-theme="light"] .btn-outline-secondary {
    --bs-btn-bg: hsla(220 30% 10% / .03);
    --bs-btn-hover-bg: hsla(220 30% 10% / .07);
    --bs-btn-hover-border-color: hsl(220 14% 62%);
    --bs-btn-hover-color: var(--sy-fg);
    --bs-btn-active-bg: hsla(220 30% 10% / .08);
    --bs-btn-active-color: var(--sy-fg);   /* inače ostaje Bootstrapovo #fff na skoro bijelom — aktivni „⚡ Brzi" bio 1,18:1 (29.09.) */
}

[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: var(--sy-primary-tekst);
    --bs-btn-border-color: var(--sy-primary-tekst);
    --bs-btn-hover-color: var(--sy-primary-tekst);
    --bs-btn-active-color: var(--sy-primary-tekst);
}

/* Novi UI 1b: primarno dugme nosi bijeli tekst, pa mu je podloga tekst-nijansa indiga (5,4:1), ne svijetli A5 #6C69FF (4,1:1). */
[data-bs-theme="light"] .btn-primary {
    --bs-btn-bg: var(--sy-primary-tekst);
    --bs-btn-border-color: var(--sy-primary-tekst);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sy-primary-tekst) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sy-primary-tekst) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--sy-primary-tekst) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--sy-primary-tekst) 78%, black);
    --bs-btn-disabled-bg: var(--sy-primary-tekst);
    --bs-btn-disabled-border-color: var(--sy-primary-tekst);
    background-image: none;   /* bez sjaja i obojene sjene (spec §2) */
    box-shadow: none;
}
[data-bs-theme="light"] .btn-primary:hover { box-shadow: none; }

/* Kartice, tabele, forme */
[data-bs-theme="light"] .card-header { background: hsla(220 30% 10% / .02); }
[data-bs-theme="light"] a.card:hover, [data-bs-theme="light"] .sy-hover-lift:hover {
    box-shadow: 0 14px 34px hsla(220 30% 25% / .12), 0 0 0 1px hsla(243 75% 56% / .2);
}
[data-bs-theme="light"] .sy-kartica-link:hover { color: hsl(220 30% 9%); }
[data-bs-theme="light"] .table { --bs-table-striped-bg: hsla(220 30% 10% / .02); }
[data-bs-theme="light"] .table-light, [data-bs-theme="light"] .table .table-light td {
    background: hsla(220 30% 10% / .03) !important;
}
[data-bs-theme="light"] .form-control:hover, [data-bs-theme="light"] .form-select:hover { border-color: hsl(220 14% 66%); }
[data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { color: var(--sy-fg); }
[data-bs-theme="light"] .form-control::placeholder { color: hsl(220 8% 58%); }

/* Bedževi, obavještenja i dugmad — Novi UI 1b (Damir 16.10.: „da"): A5 boje; podloga 13 %, ivica 40 % osnovne boje, tekst u tekst-nijansi.
   --sy-b (osnovna) i --sy-bt (tekst) bira klasa, zajedničko pravilo ih primijeni. */
[data-bs-theme="light"] .alert-info, [data-bs-theme="light"] .badge.bg-primary, [data-bs-theme="light"] .badge.bg-info { --sy-b: var(--sy-primary); --sy-bt: var(--sy-primary-tekst); }
[data-bs-theme="light"] .alert-success, [data-bs-theme="light"] .badge.bg-success { --sy-b: var(--sy-green); --sy-bt: var(--sy-green-tekst); }
[data-bs-theme="light"] .alert-warning, [data-bs-theme="light"] .badge.bg-warning { --sy-b: var(--sy-yellow); --sy-bt: var(--sy-yellow-tekst); }
[data-bs-theme="light"] .alert-danger, [data-bs-theme="light"] .badge.bg-danger { --sy-b: var(--sy-red); --sy-bt: var(--sy-red-tekst); }
[data-bs-theme="light"] .alert-info, [data-bs-theme="light"] .alert-success, [data-bs-theme="light"] .alert-warning, [data-bs-theme="light"] .alert-danger {
    background: color-mix(in srgb, var(--sy-b) 13%, white);
    border-color: color-mix(in srgb, var(--sy-b) 40%, white);
    color: var(--sy-bt);
}
[data-bs-theme="light"] .badge.bg-primary, [data-bs-theme="light"] .badge.bg-info, [data-bs-theme="light"] .badge.bg-success,
[data-bs-theme="light"] .badge.bg-warning, [data-bs-theme="light"] .badge.bg-danger {
    background: color-mix(in srgb, var(--sy-b) 13%, white) !important;
    color: var(--sy-bt) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sy-b) 40%, white);
}
/* Završni pregled 1b: .text-bg-warning/.text-bg-info nose Bootstrapov crni tekst (!important) preko --bs-*-rgb, a te boje su sada
   tamne A5 nijanse — crno na njima je ~3,9:1, bijelo 5,2–5,9:1 (Admin → Folderi, Pravila). */
[data-bs-theme="light"] .text-bg-warning, [data-bs-theme="light"] .text-bg-info { color: #fff !important; }
/* Završni pregled 1b, odluka 1 („plava → indigo"): Bootstrap komponente s kompajliranom plavom (#0d6efd) — aktivni tab (nav-pills),
   aktivna stavka padajućeg menija i list-group, aktivna stranica paginacije (bijeli tekst → tekst-nijansa), traka napretka i klizač. */
[data-bs-theme="light"] .nav-pills { --bs-nav-pills-link-active-bg: var(--sy-primary-tekst); }
[data-bs-theme="light"] .dropdown-menu { --bs-dropdown-link-active-bg: var(--sy-primary-tekst); }
[data-bs-theme="light"] .list-group { --bs-list-group-active-bg: var(--sy-primary-tekst); --bs-list-group-active-border-color: var(--sy-primary-tekst); }
[data-bs-theme="light"] .pagination {
    --bs-pagination-active-bg: var(--sy-primary-tekst);
    --bs-pagination-active-border-color: var(--sy-primary-tekst);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sy-primary) 25%, transparent);
}
[data-bs-theme="light"] .progress, [data-bs-theme="light"] .progress-stacked { --bs-progress-bar-bg: var(--sy-primary); }
[data-bs-theme="light"] .form-range::-webkit-slider-thumb { background-color: var(--sy-primary); }
[data-bs-theme="light"] .form-range::-moz-range-thumb { background-color: var(--sy-primary); }

[data-bs-theme="light"] .btn-info, [data-bs-theme="light"] .btn-outline-info { --sy-b: var(--sy-primary-tekst); }
[data-bs-theme="light"] .btn-success, [data-bs-theme="light"] .btn-outline-success { --sy-b: var(--sy-green-tekst); }
[data-bs-theme="light"] .btn-warning, [data-bs-theme="light"] .btn-outline-warning { --sy-b: var(--sy-yellow-tekst); }
[data-bs-theme="light"] .btn-danger, [data-bs-theme="light"] .btn-outline-danger { --sy-b: var(--sy-red-tekst); }
[data-bs-theme="light"] .btn-info, [data-bs-theme="light"] .btn-success, [data-bs-theme="light"] .btn-warning, [data-bs-theme="light"] .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sy-b);
    --bs-btn-border-color: var(--sy-b);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--sy-b) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sy-b) 85%, black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--sy-b) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--sy-b) 78%, black);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sy-b);
    --bs-btn-disabled-border-color: var(--sy-b);
    box-shadow: none;
}
[data-bs-theme="light"] .btn-outline-info, [data-bs-theme="light"] .btn-outline-success, [data-bs-theme="light"] .btn-outline-warning,
[data-bs-theme="light"] .btn-outline-danger {
    --bs-btn-color: var(--sy-b);
    --bs-btn-border-color: var(--sy-b);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sy-b);
    --bs-btn-hover-border-color: var(--sy-b);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sy-b);
    --bs-btn-active-border-color: var(--sy-b);
    --bs-btn-disabled-color: var(--sy-b);
    --bs-btn-disabled-border-color: var(--sy-b);
}

/* Prijava + pozadinske mrlje */
[data-bs-theme="light"] .sy-auth-kartica {
    background: hsla(0 0% 100% / .82);
    border-color: hsla(220 30% 10% / .08);
    box-shadow: 0 30px 80px hsla(220 30% 30% / .18);
}
[data-bs-theme="light"] .sy-mrlja { display: none; }   /* Novi UI 1b: bez obojenih mrlja u pozadini */

/* Stablo foldera */
[data-bs-theme="light"] a.sy-folder:hover { background: hsla(220 30% 10% / .05); color: var(--sy-fg); }
[data-bs-theme="light"] .sy-folder.aktivan { color: var(--sy-primary-tekst); }
[data-bs-theme="light"] .sy-toggla:hover { color: var(--sy-fg); }

/* Desni fiksni paneli (kolone, komentari, detalji, dijeljenje) */
[data-bs-theme="light"] .sy-kolone-panel,
[data-bs-theme="light"] .sy-kom-panel,
[data-bs-theme="light"] .sy-det-panel,
[data-bs-theme="light"] .sy-dijeli-panel {
    background: hsla(0 0% 100% / .97);
    box-shadow: -18px 0 44px hsla(220 30% 25% / .14);
}

[data-bs-theme="light"] .sy-kom-red, [data-bs-theme="light"] .sy-dijeli-red { background: hsla(220 25% 96% / .8); }
[data-bs-theme="light"] .sy-kom-odgovor { background: hsla(220 22% 93% / .7); }
[data-bs-theme="light"] .sy-det-info { background: hsla(220 25% 96% / .8); }
[data-bs-theme="light"] .sy-det-info dt { color: var(--sy-fg-muted); }
[data-bs-theme="light"] .sy-det-pitanje { background: hsla(226 85% 92% / .9); }
[data-bs-theme="light"] .sy-det-odgovor { background: hsl(220 22% 95%); }
[data-bs-theme="light"] .sy-dijeli-kod { background: hsla(142 70% 45% / .1); }

/* Admin meni, offcanvas, dijalozi */
[data-bs-theme="light"] .sy-admin-meni { background: hsla(0 0% 100% / .98); box-shadow: 0 18px 44px hsla(220 30% 25% / .16); }
[data-bs-theme="light"] .sy-admin-meni .dropdown-header { color: var(--sy-fg-muted); }
[data-bs-theme="light"] .sy-admin-meni .dropdown-item { color: var(--sy-fg); }
[data-bs-theme="light"] .sy-admin-meni .dropdown-item:hover,
[data-bs-theme="light"] .sy-admin-meni .dropdown-item:focus { background: hsla(226 71% 50% / .1); color: var(--sy-primary-tekst); }
[data-bs-theme="light"] .sy-admin-meni .dropdown-item.aktivan { background: hsla(226 71% 50% / .16); color: var(--sy-primary-tekst); }

[data-bs-theme="light"] .sy-offcanvas { background: hsla(0 0% 100% / .98); color: var(--sy-fg); }
[data-bs-theme="light"] .sy-side-label { color: var(--sy-fg-muted); }
[data-bs-theme="light"] .sy-side-link { color: hsl(220 20% 28%); }
[data-bs-theme="light"] .sy-side-link:hover { background: hsla(220 30% 10% / .05); color: var(--sy-fg); }
[data-bs-theme="light"] .sy-side-pod { color: hsl(220 15% 40%); }
[data-bs-theme="light"] .sy-side-link.aktivan {
    background: var(--sy-primary-soft);   /* Novi UI 1b: indigo svijetlo umjesto gradijenta */
    color: var(--sy-primary-tekst);
}

[data-bs-theme="light"] .sy-zemlja-red:hover { background: hsl(220 22% 92%); }
[data-bs-theme="light"] .sy-ai-dijalog { background: hsla(220 30% 25% / .35); }
[data-bs-theme="light"] .sy-ai-dijalog-kutija { background: #fff; box-shadow: 0 18px 44px hsla(220 30% 25% / .2); }
[data-bs-theme="light"] .sy-ai-dijalog-tekst { color: var(--sy-fg-muted); }
[data-bs-theme="light"] .sy-ai-dijalog-napomena { color: var(--sy-fg-muted); }
/* Serverski <dialog> popup („Rasporedi po pravilima") — bez ovoga je u svijetloj temi bio crn na crnom (07.09.). */
[data-bs-theme="light"] .sy-modal { box-shadow: 0 18px 44px hsla(220 30% 25% / .2); }
[data-bs-theme="light"] .sy-modal::backdrop { background: hsla(220 30% 25% / .35); }
[data-bs-theme="light"] .sy-kontekst { box-shadow: 0 .5rem 1.5rem hsla(220 30% 25% / .18); }
[data-bs-theme="light"] .sy-grupno-traka { box-shadow: 0 .25rem 1rem hsla(220 30% 25% / .14); }

/* Podnožje */
[data-bs-theme="light"] .footer { background: hsla(0 0% 100% / .8); }

/* ===== Tok odobravanja: graditelj + dijagram (Damir 30.08.) ===== */
.sy-tok-kandidati { border: 1px dashed var(--bs-border-color); border-radius: .5rem; padding: .5rem; min-height: 8rem; display: flex; flex-direction: column; gap: .3rem; }
.sy-tok-kandidati.meta { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.sy-tok-osoba { border: 1px solid var(--bs-border-color); border-radius: 2rem; padding: .25rem .7rem; font-size: .85rem; cursor: grab; user-select: none; display: flex; align-items: center; gap: .35rem; background: var(--bs-body-bg); transition: transform .12s ease, box-shadow .12s ease; }
.sy-tok-osoba:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.sy-tok-osoba.vucem { opacity: .45; }
.sy-tok-osoba.izabrana { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35); }
.sy-tok-ukloni { border: 0; background: transparent; color: var(--bs-danger); font-weight: 700; margin-left: auto; cursor: pointer; line-height: 1; }
.sy-tok-linije { display: flex; flex-direction: column; gap: .25rem; }
.sy-tok-linija { border: 2px dashed var(--bs-border-color); border-radius: .6rem; padding: .5rem; min-height: 3.2rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; transition: border-color .15s ease, background .15s ease; }
.sy-tok-linija.meta { border-color: var(--bs-success); background: rgba(var(--bs-success-rgb), .08); }
.sy-tok-linija-oznaka { width: 100%; font-size: .78rem; color: var(--bs-secondary-color); }
.sy-tok-strelica { text-align: center; color: var(--bs-secondary-color); font-size: .9rem; line-height: 1; }
.sy-tok-strelica.aktivna { color: var(--bs-primary); animation: sy-tok-pulse 1.4s ease-in-out infinite; }
@keyframes sy-tok-pulse { 0%, 100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }
.sy-tok-prikaz { display: flex; flex-direction: column; gap: .3rem; }
.sy-tok-linija-kartica { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .55rem .8rem; transition: box-shadow .2s ease; }
.sy-tok-linija-kartica.aktivna { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25); }
.sy-tok-linija-kartica.zakljucana { opacity: .55; }
.sy-tok-linija-naslov { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.sy-tok-clan { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
/* Hub Odobravanja */
.sy-odo-broj { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.sy-odo-red { transition: background .12s ease; border-radius: .4rem; }
.sy-odo-red:hover { background: rgba(var(--bs-primary-rgb), .07); }
.sy-tok-kt { width: 100%; display: flex; align-items: center; gap: .35rem; margin-top: .25rem; padding-top: .3rem; border-top: 1px dotted var(--bs-border-color); }
.sy-tok-kt .form-select { width: auto; min-width: 8rem; font-size: .75rem; padding: .1rem 1.6rem .1rem .4rem; }

/* Aktivni procesi (Damir 31.08.): stepper faza — ✓ prošla, ● aktivna (pulsira), ○ čeka. */
.sy-proces-traka { gap: 0; }
.sy-faza { min-width: 9rem; max-width: 14rem; text-align: center; padding: 0 .3rem; }
.sy-faza-krug {
    width: 2rem; height: 2rem; line-height: calc(2rem - 4px); border-radius: 50%; margin: 0 auto;
    border: 2px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color);
    font-weight: 700;
}
.sy-faza-ok .sy-faza-krug { border-color: var(--bs-success); background: var(--bs-success); color: #fff; }
.sy-faza-ne .sy-faza-krug { border-color: var(--bs-danger); background: var(--bs-danger); color: #fff; }
.sy-faza-preskok .sy-faza-krug { border-color: var(--bs-secondary); color: var(--bs-secondary-color); border-style: dashed; }
.sy-faza-aktivna .sy-faza-krug {
    border-color: var(--bs-primary); color: var(--bs-primary);
    animation: sy-faza-puls 1.6s ease-in-out infinite;
}
@keyframes sy-faza-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .45); }
    50% { box-shadow: 0 0 0 .45rem rgba(var(--bs-primary-rgb), 0); }
}
.sy-faza-naziv { font-size: .78rem; margin-top: .2rem; font-weight: 600; }
.sy-faza-ceka .sy-faza-naziv { color: var(--bs-secondary-color); font-weight: 400; }
.sy-faza-osoba { font-size: .74rem; line-height: 1.25; }
.sy-faza-spojnica {
    flex: 1 1 2rem; min-width: 1.2rem; height: 2px; background: var(--bs-border-color); margin-top: 1rem;
}
.sy-faza-spojnica.prosla { background: var(--bs-success); }

/* ===== Dijagram editor toka: boje kroz tema-varijable (Damir 30.08. — crno na tamnom se nije vidjelo) ===== */
.sy-graf-platno { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-tertiary-bg); overflow: hidden; }
.sy-graf-svg { display: block; width: 100%; touch-action: none; }
.sy-graf-svg.crtam { cursor: crosshair; }
.sy-graf-kutija { fill: var(--bs-body-bg); stroke: var(--bs-border-color); stroke-width: 1.5; }
.sy-graf-cvor { cursor: grab; }
.sy-graf-cvor.izabran .sy-graf-kutija { stroke: var(--bs-primary); stroke-width: 2.5; }
.sy-graf-naslov { fill: var(--bs-body-color); font-size: .8rem; font-weight: 600; }
.sy-graf-osoba { fill: var(--bs-body-color); font-size: .78rem; cursor: pointer; }
.sy-graf-osoba:hover { fill: var(--bs-danger); }
.sy-graf-prazno { fill: var(--bs-secondary-color); font-size: .75rem; font-style: italic; }
.sy-graf-fiksni rect { stroke-width: 1.5; }
.sy-graf-fiksni text { font-size: .78rem; font-weight: 700; fill: #fff; }
.sy-graf-fiksni.start rect { fill: var(--bs-primary); stroke: var(--bs-primary); }
.sy-graf-fiksni.ok rect { fill: var(--bs-success); stroke: var(--bs-success); }
.sy-graf-fiksni.ne rect { fill: var(--bs-danger); stroke: var(--bs-danger); }
.sy-graf-port { stroke: var(--bs-body-bg); stroke-width: 2; cursor: crosshair; }
.sy-graf-port.ok { fill: var(--bs-success); }
.sy-graf-port.ne { fill: var(--bs-danger); }
.sy-graf-port:hover { stroke: var(--bs-body-color); }
.sy-graf-port-oznaka { fill: #fff; font-size: .6rem; font-weight: 700; pointer-events: none; }
.sy-graf-veza { fill: none; stroke-width: 2; opacity: .85; }
.sy-graf-veza.ok { stroke: var(--bs-success); }
.sy-graf-veza.ne { stroke: var(--bs-danger); }
.sy-graf-veza.start { stroke: var(--bs-secondary-color); stroke-dasharray: 5 4; }
.sy-graf-veza.privremena { stroke-dasharray: 6 5; opacity: .6; }
/* Desni klik meni dijagram editora (Damir 30.08.) */
.sy-graf-platno { position: relative; }
.sy-graf-meni { position: absolute; z-index: 30; min-width: 13rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 6px 22px rgba(0,0,0,.3); padding: .25rem; display: flex; flex-direction: column; }
.sy-graf-meni-stavka { border: 0; background: transparent; color: var(--bs-body-color); text-align: left; padding: .4rem .6rem; border-radius: .35rem; font-size: .85rem; cursor: pointer; }
.sy-graf-meni-stavka:hover { background: rgba(var(--bs-primary-rgb), .12); }
.sy-graf-meni-stavka.opasna { color: var(--bs-danger); }
/* Ručno povezivanje + kontrola ispravnosti (Damir 30.08.) */
.sy-graf-port.start { fill: var(--bs-primary); }
.sy-graf-port.prazan { fill: var(--bs-body-bg); stroke: var(--bs-secondary-color); stroke-dasharray: 2 2; }
.sy-graf-cvor.greska .sy-graf-kutija { stroke: var(--bs-danger); stroke-width: 2.5; animation: sy-graf-greska .9s ease-in-out 2; }
@keyframes sy-graf-greska { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }

/* ◇ Logički romb (16.09.): smjer bira izraz nad meta podacima, ne čovjek. Oblik ga na prvi pogled
   razdvaja od kocke — narandžasta je rezervisana za „ovdje odlučuje pravilo, ne osoba". */
.sy-graf-romb-g { cursor: grab; }
.sy-graf-romb { fill: var(--bs-body-bg); stroke: var(--bs-warning); stroke-width: 1.8; }
.sy-graf-romb-g.izabran .sy-graf-romb { stroke: var(--bs-primary); stroke-width: 2.8; }
.sy-graf-romb-naslov { fill: var(--bs-body-color); font-size: .78rem; font-weight: 600; pointer-events: none; }
.sy-graf-port.grana { fill: var(--bs-warning); }
/* Oznaka grane stoji IZVAN romba, na podlozi platna — bijela (kao .sy-graf-port-oznaka) bi nestala. */
.sy-graf-grana-oznaka { fill: var(--bs-secondary-color); font-size: .6rem; font-weight: 700; pointer-events: none; }
.sy-graf-veza.grana { stroke: var(--bs-warning); }
.sy-graf-romb-panel { background: var(--bs-tertiary-bg); }
/* Unosi linije (16.09.): panel ispod panela romba i oznaka 📝N gore desno na kocki (klik otvara panel). */
.sy-graf-unosi-panel { background: var(--bs-tertiary-bg); }
.sy-graf-unosi-znak { cursor: pointer; font-size: .8rem; }
/* Odluka romba u prikazu toka (16.09.) — zašto je tok skrenuo tu gdje je skrenuo. */
.sy-tok-romb { border-left: 3px solid var(--bs-warning); background: var(--bs-tertiary-bg);
    border-radius: .35rem; padding: .3rem .5rem; margin: .25rem 0; }

/* ▶ Run simulacija (Damir 31.08.): aktivna tačka pulsira, prošle ✓/✗, panel s pitanjem. */
.sy-graf-cvor.sim-aktivan .sy-graf-kutija { stroke: var(--bs-primary); stroke-width: 3; animation: sy-graf-greska 1.2s ease-in-out infinite; }
.sy-graf-romb-g.sim-aktivan .sy-graf-romb { stroke: var(--bs-primary); stroke-width: 3; animation: sy-graf-greska 1.2s ease-in-out infinite; }
.sy-graf-cvor.sim-ok .sy-graf-kutija { stroke: var(--bs-success); stroke-width: 2.5; }
.sy-graf-cvor.sim-ne .sy-graf-kutija { stroke: var(--bs-danger); stroke-width: 2.5; }
.sy-graf-svg.sim-tece .sy-graf-cvor, .sy-graf-svg.sim-tece .sy-graf-port,
.sy-graf-svg.sim-tece .sy-graf-fiksni { pointer-events: none; }

/* Pan praznom površinom (Damir 31.08.): pogled se vuče kao papir. */
.sy-graf-svg { cursor: grab; }
.sy-graf-svg.pomjeram { cursor: grabbing; }
.sy-graf-svg .sy-graf-cvor { cursor: move; }
.sy-graf-svg .sy-graf-port { cursor: crosshair; }
.sy-graf-osoba-x { cursor: pointer; font-weight: 700; }
.sy-graf-osoba-x:hover { fill: var(--bs-danger); }

/* Paleta boja linije u kontekst meniju (Damir 31.08.). */
.sy-graf-meni-boje { display: flex; gap: .3rem; padding: .35rem .75rem; border-top: 1px solid var(--bs-border-color); }
.sy-graf-boja {
    width: 1.15rem; height: 1.15rem; border-radius: .3rem; border: 1px solid var(--bs-border-color);
    padding: 0; line-height: 1; font-size: .8rem; color: var(--bs-body-color); background: transparent;
}
.sy-graf-boja:hover { transform: scale(1.15); }
.sy-sim-panel {
    position: sticky; bottom: 3.2rem; z-index: 21; margin: 0 auto; width: fit-content; max-width: 92%;
    background: var(--bs-body-bg); border: 1px solid var(--bs-primary); border-radius: .7rem;
    padding: .6rem .9rem; box-shadow: 0 6px 22px rgba(0,0,0,.3);
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.sy-sim-naslov { font-weight: 700; width: 100%; }
.sy-sim-tekst { font-size: .85rem; color: var(--bs-secondary-color); width: 100%; }
.sy-graf-provjera-poruke .ok { color: var(--bs-success); }
/* Zoom + obojeni prazni portovi (Damir 30.08.) */
.sy-graf-platno { overflow: auto; max-height: 660px; }
.sy-graf-svg { display: block; }
.sy-graf-zoom { position: sticky; bottom: .5rem; margin-left: .5rem; float: left; display: inline-flex; align-items: center; gap: .3rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 2rem; padding: .15rem .5rem; box-shadow: 0 3px 12px rgba(0,0,0,.25); z-index: 20; }
.sy-graf-zoom button { border: 0; background: transparent; color: var(--bs-body-color); font-size: 1.05rem; font-weight: 700; width: 1.6rem; height: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.sy-graf-zoom button:hover { background: rgba(var(--bs-primary-rgb), .15); }
.sy-graf-zoom-oznaka { font-size: .75rem; color: var(--bs-secondary-color); min-width: 2.6rem; text-align: center; cursor: pointer; }
/* Prazan port zadržava SVOJU boju (prozirnije + isprekidan obrub) umjesto bezbojnog. */
.sy-graf-port.prazan { stroke-dasharray: 2 2; fill-opacity: .35; }
.sy-graf-port.prazan.ok { fill: var(--bs-success); stroke: var(--bs-success); }
.sy-graf-port.prazan.ne { fill: var(--bs-danger); stroke: var(--bs-danger); }
.sy-graf-port.prazan.start { fill: var(--bs-primary); stroke: var(--bs-primary); }

/* Sef (Damir 31.08.): pregled s vodenim žigom — iframe + overlay koji se ne da kliknuti. */
.sy-sef-pregled { position: relative; height: 70vh; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.sy-sef-pregled iframe { width: 100%; height: 100%; border: 0; }
.sy-sef-zig { position: absolute; inset: 0; pointer-events: none; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; overflow: hidden; }
.sy-sef-zig span { transform: rotate(-28deg); opacity: .16; font-size: 1rem; color: var(--bs-danger); white-space: nowrap; user-select: none; }

/* Timski prostori (Damir 31.08.): folderi kao na Windowsu — grid kartica sa žutom mapom. */
.sy-pr-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.sy-pr-folder { position: relative; width: 108px; padding: .55rem .3rem .45rem; text-align: center; border-radius: .55rem; border: 1px solid transparent; }
.sy-pr-folder:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.sy-pr-folder a { text-decoration: none; color: var(--bs-body-color); display: block; }
.sy-pr-folder .sy-pr-naziv { display: block; font-size: .82rem; line-height: 1.15; margin-top: .3rem; word-break: break-word; }
.sy-pr-folder svg { width: 58px; height: 46px; display: block; margin: 0 auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.sy-pr-folder .sy-pr-obrisi { position: absolute; top: 2px; right: 4px; border: 0; background: none; color: var(--bs-danger); font-size: .95rem; line-height: 1; padding: .1rem .25rem; border-radius: .3rem; opacity: 0; }
.sy-pr-folder:hover .sy-pr-obrisi { opacity: 1; }
.sy-pr-folder .sy-pr-obrisi:hover { background: var(--bs-danger-bg-subtle); }
.sy-pr-tip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px; border-radius: 4px; font-size: .5rem; font-weight: 700; color: #fff; margin-right: .45rem; vertical-align: middle; letter-spacing: .02em; }
.sy-pr-tip.pdf { background: #d93025; }
.sy-pr-tip.slika { background: #7b1fa2; }
.sy-pr-tip.doc { background: #1a56b8; }
.sy-pr-tip.tabela { background: #1e7b45; }
.sy-pr-tip.tekst { background: #5f6b7a; }
.sy-pr-tip.ostalo { background: #8a6d3b; }
/* Moji dokumenti (Damir 06.09.): lična kartica na vrhu liste prostora + lista odredišta u dijalogu premještanja. */
.sy-pr-moji { border-left: 3px solid var(--bs-primary); }
.sy-pr-odrediste-izbor { margin: .25rem 0 .9rem; }
.sy-pr-odrediste-izbor optgroup { font-style: normal; font-weight: 600; }
.sy-pr-odrediste-izbor option { padding: .15rem .4rem; }

/* Slika dijagrama na zahtjevu (Damir 31.08.): read-only, uklopljena, max visina. */
.sy-tok-slika { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-tertiary-bg); }
.sy-tok-slika-svg { display: block; width: 100%; max-height: 24rem; }

/* Pregled dokumenta (Damir 31.08.): veliki viewer + desni info panel. */
/* Flex dijete koje smije biti uže od sadržaja (truncate unutra) — Bootstrap ovu klasu nema; koriste je zaglavlje dokumenta (5-5a),
   Provjera polja i veze računa. Završni pregled 5-5a: bez nje dug naziv fajla razvlači zaglavlje u stranu na telefonu. */
.min-w-0 { min-width: 0; }
/* Novi UI 5-5a (E12): zaglavlje stranice dokumenta — „← folder", naziv s čipovima, siva linija podataka, dva dugmeta i „⋯". */
.sy-dok-nazad { color: var(--sy-fg-muted); }
.sy-dok-nazad:hover, .sy-dok-nazad:focus-visible { color: var(--bs-link-hover-color); }
.sy-dok-nazad .sy-ik-l, .sy-dok-zaglavlje .btn .sy-ik-l { width: 16px; height: 16px; vertical-align: -3px; }
.sy-dok-naslov { font-weight: 600; }
.sy-dok-cip { font-weight: 500; }
.sy-dok-podaci { color: var(--sy-fg-muted); }
/* Novi UI 5-7 (E8): Prijem — red malih brojeva iznad Dnevnika prijema (umjesto četiri velike kartice) i zaglavlje dana s brojem. */
.sy-prijem-broj strong { display: block; font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sy-prijem-broj span { font-size: .8rem; color: var(--sy-fg-muted); }
.sy-prijem-dan > td { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--sy-fg-muted); }
.sy-prijem-tabela .sy-ik-l, .sy-prijem-dnevnik .sy-ik-l { width: 15px; height: 15px; vertical-align: -3px; opacity: .8; }
.sy-dok-viewer { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-tertiary-bg); overflow: hidden; min-height: 70vh; }
.sy-dok-viewer iframe { display: block; width: 100%; height: 78vh; border: 0; }
.sy-dok-viewer img { display: block; max-width: 100%; margin: 0 auto; }
.sy-dok-meta { max-height: 22rem; overflow-y: auto; }

/* AI podaci tabela na pregledu dokumenta (Damir 31.08.). */
.sy-dok-tabela td { padding: .35rem .4rem; border-color: var(--bs-border-color); }
.sy-dok-tabela .sy-dok-labela { white-space: nowrap; font-size: .82rem; }

/* ── Office read-only pregled (Damir 01.09.) ─────────────────────────── */
/* Dokument je „papir" — bijela podloga i u tamnoj temi, kao PDF viewer. */
.sy-office-pregled { background: #fff; color: #1a1a1a; border-radius: .5rem; max-height: 78vh; overflow: auto; padding: .5rem; }
.sy-office-pregled .docx-wrapper { background: #f0f0f0; padding: 1rem 0; }
.sy-office-pregled .docx-wrapper > section.docx { box-shadow: 0 0 .5rem rgba(0,0,0,.25); margin-bottom: 1rem; }
.sy-xlsx-tabovi { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem; position: sticky; top: 0; background: #fff; z-index: 2; }
.sy-xlsx-tabovi .btn.aktivan { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.sy-xlsx-sadrzaj table { border-collapse: collapse; font-size: .85rem; }
.sy-xlsx-sadrzaj td { border: 1px solid #d5d5d5; padding: .15rem .45rem; white-space: nowrap; color: #1a1a1a; }

/* ---------- Administracija kao ikonica (Damir 29.09.) ----------
   Isti okvir kao zvonce i tema (btn-outline-secondary) i ista visina (~25 px, zato manji vertikalni padding), a ikonica
   konzole malo veća: 1,3rem (~20 px) umjesto ~14 px kod susjeda. Na Admin/Postavke stranicama nosi primarnu boju, kao
   aktivna stavka trake; .sy-desno podiže specifičnost iznad svijetle teme za btn-outline-secondary. Isti izgled aktivne
   ikonice ima i AI asistent (.sy-ai-dugme, Damir 30.09.) na /Asistent; njegova ikonica je veličine susjeda (zvonce, tema). */
/* Dorade koraka 2 (17.10.2026.): stil ikonice važi samo za dugme direktno u desnom bloku. Damir 19.10.2026.: „Administracija" je opet
   samostalna ikonica konzole u desnom bloku, ispred avatara (kao prije koraka 2). */
.sy-desno > .sy-admin-dugme { display: inline-flex; align-items: center; justify-content: center; padding-top: .1rem; padding-bottom: .1rem; }
.sy-desno > .sy-admin-dugme .sy-ik { width: 1.3rem; height: 1.3rem; vertical-align: 0; }
.sy-desno .sy-admin-dugme.aktivan,
.sy-desno .sy-ai-dugme.aktivan {
    --bs-btn-color: var(--sy-primary);
    --bs-btn-border-color: hsla(243 100% 71% / .45);
    --bs-btn-bg: var(--sy-primary-soft);
    --bs-btn-hover-color: var(--sy-primary);
    --bs-btn-hover-bg: var(--sy-primary-soft);
    --bs-btn-hover-border-color: var(--sy-primary);
}

/* ---------- Radni entitet u traci (Damir 30.09., spec 2026-09-30-radni-entitet-u-traci-dizajn §5) ----------
   Isti okvir kao zvonce i tema (btn-outline-secondary): šifra + naziv, naziv skraćen trotačkom. Gornja granica širine (20rem) i
   min-width: 0 stoje na omotaču .sy-entitet, jer je on flex-stavka u .sy-desno (na dugmetu min-width: 0 ne bi imao dejstva);
   dugme dobija samo max-width: 100 % omotača. Tako se kontrola na monitoru od ~5100 px ne razvuče, a kad je .sy-desno uže od
   sadržaja (uska traka pod hamburgerom) omotač se skupi i naziv dobije trotačku umjesto preljeva. U raširenoj traci .sy-desno
   ostaje flex-shrink: 0 (desni blok se ne stiska, priority+), pa tamo kontrola drži širinu do 20rem.
   Kad stranica radi u drugom entitetu od radnog, OKVIR dugmeta je narandžast (--sy-yellow, ≥ 3:1 prema unutrašnjosti dugmeta:
   tamna 10,0:1, svijetla hsl 38 92% 38% 3,4:1). TEKST ostaje boja susjeda (btn-outline-secondary): jantarni tekst bi u svijetloj
   temi bio 3,4:1, a za sitan tekst treba 4,5:1. .sy-desno podiže specifičnost iznad svijetle teme. */
.sy-entitet { min-width: 0; max-width: 20rem; }
.sy-entitet-dugme { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; min-width: 0; }
.sy-entitet-dugme code { color: inherit; font-size: .8rem; font-weight: 600; }
.sy-entitet-naziv { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Damir 30.09.: na 1200–1399 px naziv entiteta je kraći (5rem, trotačka) — admin sa svim modulima i dva entiteta inače dobije
   horizontalni skrol trake (na 1280 px 80 px preko, iako je u „Više" već sve što se smije seliti). Šifra i naziv ostaju uvijek
   vidljivi; pun naziv je u tooltipu dugmeta. Od 1200 px je traka raširena (navbar-expand-xl), od 1600 px ima mjesta za pun naziv (dorade koraka 2, 17.10.2026.: bez priority+ seljenja granica je pomjerena s 1400 na 1600 px).
   Mora stajati POSLIJE osnovnog pravila (ista specifičnost). */
@media (min-width: 1200px) and (max-width: 1599.98px) { .sy-entitet-naziv { max-width: 5rem; } }
.sy-desno .sy-entitet-drugi {
    --bs-btn-border-color: var(--sy-yellow);
    --bs-btn-hover-border-color: var(--sy-yellow);
    --bs-btn-active-border-color: var(--sy-yellow);
    box-shadow: inset 0 0 0 1px var(--sy-yellow);
}
.sy-entitet-meni { min-width: 16rem; max-width: 92vw; max-height: 24rem; overflow-y: auto; }
.sy-entitet-meni .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.sy-entitet-stavka-naziv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-entitet-kvacica { margin-left: auto; padding-left: .75rem; }
/* Izabrana stavka menija: isti izgled kao aktivna stavka admin menija (.sy-admin-meni .dropdown-item.aktivan). Bez ovoga
   Bootstrapov .active daje stock plavo #0d6efd, a šifra (globalni code, cijan) ostaje cijan: 1,02:1 u svijetloj i 1,96:1 u tamnoj
   temi. Isti izgled ima i pritisak miša (:active): inače Bootstrap na trenutak pokaže stock plavo i na neizabranoj stavci.
   code u SVAKOM redu menija nasljeđuje boju reda (globalni cijan je na neizabranim redovima svijetle teme imao 3,82:1;
   završni pregled 30.09.). Kontrast šifra / naziv na izabranom redu (podloga menija je --sy-bg, preko nje prozirna podloga
   reda, a za šifru i podloga code-a): tamna 11,6:1 / 13,4:1 (#fff), svijetla 4,95:1 / 5,17:1 (--sy-primary) — u obje teme
   preko 4,5:1. */
.sy-entitet-meni .dropdown-item.active,
.sy-entitet-meni .dropdown-item:active { background: hsla(226 71% 40% / .5); color: #fff; }
.sy-entitet-meni .dropdown-item code { color: inherit; }
[data-bs-theme="light"] .sy-entitet-meni .dropdown-item.active,
[data-bs-theme="light"] .sy-entitet-meni .dropdown-item:active { background: hsla(226 71% 50% / .16); color: var(--sy-primary-tekst); }

/* ---------- Zvonce obavijesti (Damir 01.09.) ---------- */
.sy-zvonce-dugme { position: relative; }
.sy-zvonce-dugme::after { display: none; }   /* bez Bootstrap strelice */
.sy-zvonce-broj { position: absolute; top: -.4rem; right: -.45rem; font-size: .62rem; padding: .2em .45em; }
.sy-zvonce-meni { width: 23rem; max-width: 92vw; }
.sy-zvonce-lista { max-height: 24rem; overflow-y: auto; }
.sy-zvonce-stavka { display: block; padding: .55rem .9rem; border-bottom: 1px solid var(--sy-border); text-decoration: none; color: inherit; border-left: 3px solid transparent; }
.sy-zvonce-stavka:last-child { border-bottom: 0; }
.sy-zvonce-stavka:hover { background: var(--bs-tertiary-bg); color: inherit; }
.sy-zvonce-stavka.neprocitana { border-left-color: var(--bs-primary); background: hsla(243 100% 71% / .08); }
/* Novi UI 5-13: zbirni red AI rasporeda — stalan red na vrhu, ne obavijest (bez plave crte nepročitanog), izdvojen pozadinom. */
.sy-zvonce-stavka.sy-zvonce-zbirno { background: var(--bs-tertiary-bg); }
.sy-zvonce-naslov { font-weight: 600; font-size: .84rem; line-height: 1.25; }
.sy-zvonce-tekst { white-space: normal; line-height: 1.25; margin-top: .1rem; }
.sy-zvonce-vrijeme { font-size: .68rem; opacity: .6; margin-top: .15rem; }
.sy-obavijest-neprocitana { border-left: 3px solid var(--bs-primary); }

/* ---------- AI asistent (Damir 02.09.) ---------- */
.sy-as-lista { max-height: 72vh; overflow-y: auto; }
.sy-as-razgovor { display: flex; align-items: flex-start; gap: .25rem; padding: .35rem .5rem; border-radius: .5rem; }
.sy-as-razgovor:hover, .sy-as-razgovor.aktivan { background: var(--bs-tertiary-bg); }
.sy-as-razgovor-link { flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; display: block; }
.sy-as-razgovor-naslov { display: block; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-as-razgovor-vrijeme { display: block; font-size: .7rem; opacity: .6; }
.sy-as-obrisi { line-height: 1; text-decoration: none; }
.sy-as-chat { display: flex; flex-direction: column; min-height: 72vh; }
.sy-as-poruke { flex: 1 1 auto; overflow-y: auto; max-height: 62vh; display: flex; flex-direction: column; gap: .6rem; padding: .25rem .25rem .75rem; }
.sy-as-poruka { max-width: 88%; padding: .55rem .8rem; border-radius: .9rem; font-size: .92rem; line-height: 1.45; }
.sy-as-user { align-self: flex-end; background: var(--sy-primary-soft, hsla(243 100% 71% / .18)); border-bottom-right-radius: .25rem; }
.sy-as-model { align-self: flex-start; background: var(--bs-tertiary-bg); border-bottom-left-radius: .25rem; }
.sy-as-ceka { opacity: .65; font-style: italic; animation: sy-pulsira 1.1s ease-in-out infinite; }
.sy-as-greska { color: var(--bs-danger); }
.sy-as-tekst p { margin-bottom: .4rem; }
.sy-as-tekst p:last-child { margin-bottom: 0; }
.sy-as-tekst .sy-md-tabela { margin: .3rem 0; font-size: .85rem; }
.sy-as-tekst .sy-md-kod { font-size: .8rem; padding: .4rem .6rem; border-radius: .4rem; background: hsla(0 0% 0% / .18); }
.sy-as-tekst .sy-md-naslov { font-size: 1rem; font-weight: 700; margin: .5rem 0 .25rem; }
.sy-as-tekst ul, .sy-as-tekst ol { margin-bottom: .4rem; padding-left: 1.2rem; }
.sy-as-prilog { font-size: .75rem; opacity: .75; margin-top: .25rem; }

/* Manual režim (Damir 06.09.): radnja se izvršava tek kad je čovjek potvrdi. */
.sy-as-potvrda { margin-top: .6rem; padding: .6rem .75rem; border: 1px solid var(--bs-warning-border-subtle, #ffe69c); border-left-width: 4px; border-radius: .4rem; background: var(--bs-warning-bg-subtle, #fff9e6); }
.sy-as-potvrda-tekst { font-weight: 600; margin-bottom: .5rem; }
.sy-as-potvrda-dugmad { display: flex; gap: .5rem; flex-wrap: wrap; }
.sy-as-potvrda-ishod { margin-top: .6rem; padding: .5rem .75rem; border-radius: .4rem; background: var(--bs-success-bg-subtle, #e8f5ec); border: 1px solid var(--bs-success-border-subtle, #b7e0c4); }
.sy-as-potvrda-ishod.sy-as-potvrda-greska { background: var(--bs-danger-bg-subtle, #fdeaea); border-color: var(--bs-danger-border-subtle, #f1aeb5); }
.sy-as-podnozje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: .45rem; font-size: .74rem; }
.sy-as-izvori { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.sy-as-izvor { text-decoration: none; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--sy-border); }
.sy-as-web { border-color: var(--bs-warning); }
.sy-as-izvoz a { text-decoration: none; }
.sy-as-forma { border-top: 1px solid var(--sy-border); padding-top: .75rem; margin-top: .25rem; }
.sy-as-unos-red { display: flex; gap: .5rem; align-items: flex-end; }
.sy-as-unos { resize: none; max-height: 200px; }
.sy-as-prilog-dugme { cursor: pointer; }
.sy-as-prilog-dugme:hover { text-decoration: underline; }
.sy-as-uvod { align-self: stretch; padding: 1rem; }

.sy-as-detalj { font-size: .72rem; opacity: .7; margin-top: .3rem; word-break: break-word; font-style: normal; }

/* ===== Razdvajanje stranica (03.09.): mreža sličica s rezovima ===== */
.sy-str-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem .9rem; max-height: 58vh; overflow: auto; padding: .4rem .2rem .4rem .9rem; }
.sy-str-karta { position: relative; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .4rem; padding: .3rem .3rem .2rem; text-align: center; background: #fff; }
.sy-str-karta img { max-width: 100%; height: auto; border: 1px solid #eee; min-height: 60px; background: #fafafa; }
.sy-str-karta.preskocena img { opacity: .3; }
.sy-str-karta.preskocena { border-style: dashed; }
.sy-str-broj { font-size: .75rem; color: #6c757d; }
.sy-str-grupa { position: absolute; right: .3rem; top: .3rem; font-size: .7rem; }
.sy-str-rez { position: absolute; left: -.9rem; top: 42%; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid #adb5bd; background: #fff; font-size: .75rem; line-height: 1.2rem; text-align: center; cursor: pointer; padding: 0; z-index: 2; }
.sy-str-rez.aktivan { background: #dc3545; color: #fff; border-color: #dc3545; }
.sy-str-preskoci { font-size: .72rem; }
.sy-str-sazetak { font-size: .85rem; }
.sy-ai-dijalog-kutija.sy-str-kutija { max-width: 900px; width: 94vw; }
.sy-spoji-lista { max-height: 40vh; overflow: auto; }
.sy-spoji-lista li { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; border-bottom: 1px solid #eee; }
.sy-spoji-lista li span.naziv { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Excel pregled kao tabelarni list (Damir 03.09.): slova kolona + brojevi redova, brojevi desno. */
.sy-xlsx-sadrzaj { max-height: 70vh; overflow: auto; }
.sy-xlsx-sadrzaj table { table-layout: auto; }
.sy-xlsx-sadrzaj th { background: #f3f3f3; color: #555; font-weight: 500; text-align: center; border: 1px solid #d5d5d5; padding: .15rem .45rem; font-size: .8rem; white-space: nowrap; }
.sy-xlsx-sadrzaj thead th { position: sticky; top: 0; z-index: 1; }
.sy-xlsx-sadrzaj thead th:first-child { left: 0; z-index: 2; }
.sy-xlsx-sadrzaj tbody th { position: sticky; left: 0; min-width: 2.6rem; }
.sy-xlsx-sadrzaj td { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
.sy-xlsx-sadrzaj td.sy-broj { text-align: right; font-variant-numeric: tabular-nums; }
.sy-xlsx-sadrzaj col.sy-xlsx-rb { width: 2.6rem; }

/* ===== Predmeti (03.09.) — fascikla s vezama: sifra-pilula, status, hronologija, chip na listi ===== */
.sy-pm-sifra {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .12rem .5rem;
    border-radius: .4rem;
    border: 1px solid var(--sy-border-strong);
    background: var(--sy-primary-soft);
    color: var(--sy-primary-tekst);
    text-decoration: none;
    white-space: nowrap;
}
.sy-pm-sifra:hover { border-color: var(--sy-primary); color: var(--sy-primary-tekst); }
.sy-pm-sifra-velika { font-size: .95rem; padding: .25rem .7rem; }
.sy-pm-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    padding: .15rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sy-pm-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.sy-pm-status.otvoren { color: var(--sy-green-tekst); border-color: hsla(150 65% 52% / .45); background: hsla(150 65% 52% / .12); }
.sy-pm-status.zatvoren { color: var(--sy-fg-muted); border-color: var(--sy-border-strong); background: var(--sy-muted); }
.sy-pm-status.arhiviran { color: var(--sy-fg-muted); border-color: var(--sy-border); background: transparent; opacity: .8; }
.sy-pm-tip { background: hsla(200 100% 60% / .16); color: var(--sy-cyan); border: 1px solid hsla(200 100% 60% / .4); font-weight: 500; }
.sy-pm-glava { border-left: 4px solid var(--sy-green); }
.sy-pm-glava.zatvoren { border-left-color: var(--sy-fg-muted); }
.sy-pm-glava.arhiviran { border-left-color: var(--sy-border-strong); opacity: .92; }
.sy-pm-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .84rem; color: var(--sy-fg-muted); }
.sy-pm-meta strong { color: var(--sy-fg); font-weight: 600; }
.sy-pm-opis { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.sy-pm-uredi > summary { cursor: pointer; color: var(--sy-primary-tekst); list-style: none; display: inline-block; }
.sy-pm-uredi > summary::-webkit-details-marker { display: none; }
.sy-pm-upload > summary { cursor: pointer; color: var(--sy-primary-tekst); }
.sy-pm-tabela tbody tr.sy-pm-red-kasni td:first-child { box-shadow: inset 3px 0 0 var(--sy-red); }
.sy-pm-dok tr.sy-pm-glavni td { background: hsla(42 95% 60% / .07); }
.sy-pm-rezultati { max-height: 18rem; overflow-y: auto; }
.sy-pm-prijedlozi { border-color: hsla(42 95% 60% / .45); }

/* Hronologija: vertikalna linija s ikonom po vrsti */
.sy-pm-vl { position: relative; max-height: 34rem; overflow-y: auto; padding-left: .1rem; }
.sy-pm-vl-stavka { position: relative; display: flex; gap: .55rem; padding: .35rem 0 .35rem 0; border-top: 1px solid var(--sy-border); }
.sy-pm-vl-stavka:first-child { border-top: 0; }
.sy-pm-vl-ikona { flex: 0 0 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sy-muted); font-size: .8rem; }
.sy-pm-vl-stavka.komentar .sy-pm-vl-ikona { background: var(--sy-primary-soft); }
.sy-pm-vl-stavka.auto .sy-pm-vl-ikona { background: hsla(200 100% 60% / .16); }
.sy-pm-vl-stavka.status .sy-pm-vl-ikona { background: hsla(42 95% 60% / .18); }
.sy-pm-vl-tijelo { min-width: 0; flex: 1; }
.sy-pm-vl-komentar { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; background: var(--sy-bg-soft); border: 1px solid var(--sy-border); border-radius: .5rem; padding: .35rem .55rem; }
.sy-pm-vl-meta { font-size: .72rem; margin-top: .1rem; }

/* Chip predmeta na listi dokumenata i stranici dokumenta */
.sy-predmet-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 13rem;
    font-size: .72rem;
    font-weight: 500;
    padding: .05rem .5rem;
    border-radius: 999px;
    border: 1px solid hsla(243 100% 71% / .5);
    background: var(--sy-primary-soft);
    color: var(--sy-primary-tekst);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.sy-predmet-chip-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* šifra i naziv (25.10.2026.): dug naziv se skrati, puni je u title */
.sy-predmet-chip:hover { border-color: var(--sy-primary); color: var(--sy-primary-tekst); }
.sy-predmet-chip.zatvoren, .sy-predmet-chip.arhiviran { border-color: var(--sy-border-strong); background: var(--sy-muted); color: var(--sy-fg-muted); }
.sy-pm-red-forma { min-width: 17rem; }

[data-bs-theme="light"] .sy-pm-status.zatvoren { background: hsla(220 13% 92% / 1); }
[data-bs-theme="light"] .sy-pm-vl-komentar { background: hsla(220 13% 97% / 1); }
[data-bs-theme="light"] .sy-pm-vl-ikona { background: hsla(220 13% 92% / 1); }

/* ===== Napredna pretraga (03.09.) + editor tekstualnog fajla ===== */
/* Novi UI 5-8b (Suada A7): filteri su u bočnom panelu „Više filtera". */
.sy-vise-filtera .form-label { font-size: .8rem; margin-bottom: .15rem; color: var(--sy-fg-muted); }
.sy-pretraga-filteri { display: flex; flex-wrap: wrap; gap: .35rem; }
.sy-txt-editor { width: 100%; min-height: 70vh; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.45; border: 0; background: var(--sy-bg-soft); color: var(--sy-fg); padding: 1rem; }
.sy-txt-editor:focus { outline: 2px solid hsla(243 100% 71% / .45); outline-offset: -2px; }
.sy-txt-pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; min-height: 40vh; }
.sy-txt-traka { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid var(--sy-border); font-size: .82rem; color: var(--sy-fg-muted); }
[data-bs-theme="light"] .sy-txt-editor { background: #fff; color: #1a1a1a; }

/* ===== Lista dokumenata: grupe kao GRANE stabla (Damir 04.09.: „na principu grane, isprekidane crtice") =====
   Zaglavlje grupe = korijen grane: kružić-toggla sjedi na osi grane, ispod njega kreće isprekidana os;
   svaki fajl ispod dobija grančicu (├──), zadnji zatvara granu (└──). Sklopljena grupa nema os. Samo CSS —
   markup i sklapanje (site.js) nepromijenjeni. */
.sy-grupisano { --sy-grana-x: 1.25rem; --sy-grana-boja: hsla(243 100% 71% / .55); }
[data-bs-theme="light"] .sy-grupisano { --sy-grana-boja: hsla(243 75% 56% / .5); }
.sy-grupa-zaglavlje td { position: relative; background: var(--sy-primary-soft); border-top: 2px solid hsla(243 100% 71% / .35); padding: .45rem .55rem; }
.sy-grupa-zaglavlje.zatvoren td, .sy-grupa-zaglavlje.bez td { background: var(--sy-bg-soft); border-top-color: var(--sy-border-strong); }
[data-bs-theme="light"] .sy-grupa-zaglavlje td { background: hsla(226 71% 50% / .08); }
[data-bs-theme="light"] .sy-grupa-zaglavlje.bez td, [data-bs-theme="light"] .sy-grupa-zaglavlje.zatvoren td { background: hsla(220 13% 94% / 1); }
.sy-grupa-naslov { text-decoration: none; color: var(--sy-fg); font-weight: 600; }
.sy-grupa-naslov:hover { color: var(--sy-primary-tekst); }
.sy-grupa-toggla { position: relative; z-index: 1; border: 1.5px solid var(--sy-grana-boja); background: var(--sy-bg); color: var(--sy-primary-tekst); width: 1.4rem; height: 1.4rem; padding: 0; line-height: 1; font-size: .72rem; border-radius: 50%; margin-right: .45rem; vertical-align: middle; cursor: pointer; transition: background .12s ease, color .12s ease; }
.sy-grupa-toggla:hover { background: var(--sy-primary-tekst); border-color: var(--sy-primary); color: #fff; }   /* 1b: pozadina bijelog teksta = tekst-nijansa */
.sy-grupa-toggla:focus-visible { outline: 2px solid var(--sy-primary); outline-offset: 2px; }
/* Os grane ispod kružića — samo dok je grupa raširena. */
.sy-grupisano tr.sy-grupa-zaglavlje:not(.sklopljena) td::after { content: ""; position: absolute; left: calc(var(--sy-grana-x) - 1px); top: calc(50% + .7rem); bottom: 0; border-left: 2px dashed var(--sy-grana-boja); }
/* Redovi grupe: os + grančica do fajla; zadnji red u grupi zatvara granu. */
.sy-grupisano tr.sy-grupa-red td:first-child { position: relative; padding-left: 2.4rem; box-shadow: none; }
.sy-grupisano tr.sy-grupa-red td:first-child::before { content: ""; position: absolute; left: calc(var(--sy-grana-x) - 1px); top: 0; bottom: 0; border-left: 2px dashed var(--sy-grana-boja); }
.sy-grupisano tr.sy-grupa-red td:first-child::after { content: ""; position: absolute; left: calc(var(--sy-grana-x) - 1px); top: calc(50% - 1px); width: .85rem; border-top: 2px dashed var(--sy-grana-boja); }
.sy-grupisano tr.sy-grupa-red:has(+ tr.sy-grupa-zaglavlje) td:first-child::before, .sy-grupisano tr.sy-grupa-red:last-child td:first-child::before { bottom: 50%; }
.sy-grupisano tr.sy-grupa-red:hover td:first-child::after { border-top-style: solid; border-top-color: var(--sy-primary); }
.sy-grupisano tr.sy-grupa-red.sy-red-fokus td:first-child::after { border-top-style: solid; border-top-color: var(--sy-green); }
.sy-grupisano tr.sy-grupa-red + tr.sy-grupa-zaglavlje td { border-top-width: 2px; }
tr.sy-grupa-zaglavlje.sklopljena td { opacity: .85; }
tr.sy-grupa-zaglavlje.sklopljena .sy-grupa-toggla { background: var(--sy-primary-soft); }
@media (prefers-reduced-motion: reduce) { .sy-grupa-toggla { transition: none; } }

/* Hijerarhija dokumenata (Damir 13.09.): nivo se vidi uvlakom i granom, ista grafika kao kod
   grupisanja. Korijen (nivo 1) nema klasu — izgleda tačno kao i danas. */
.sy-lista tr.sy-nivo-2 td:first-child { position: relative; padding-left: 2.4rem; }
.sy-lista tr.sy-nivo-3 td:first-child { position: relative; padding-left: 3.9rem; }
.sy-lista tr.sy-nivo-2 td:first-child::before,
.sy-lista tr.sy-nivo-3 td:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--sy-grana-boja, hsla(243 100% 71% / .55)); }
.sy-lista tr.sy-nivo-2 td:first-child::before { left: 1.25rem; }
.sy-lista tr.sy-nivo-3 td:first-child::before { left: 2.75rem; }
.sy-lista tr.sy-nivo-2 td:first-child::after,
.sy-lista tr.sy-nivo-3 td:first-child::after { content: ""; position: absolute; top: calc(50% - 1px); width: .85rem; border-top: 2px dashed var(--sy-grana-boja, hsla(243 100% 71% / .55)); }
.sy-lista tr.sy-nivo-2 td:first-child::after { left: 1.25rem; }
.sy-lista tr.sy-nivo-3 td:first-child::after { left: 2.75rem; }

.sy-stablo-kolona { position: relative; }
body.sy-razdjelnik-vuce { user-select: none; cursor: col-resize; }
/* Donja granica 16rem = 240 px (Damir 29.09.): čist postotak je na 1024 px davao 163 px, a svaki nivo stabla uvlači ~22 px,
   pa su nazivi pucali slovo po slovo (overflow-wrap: anywhere na nazivu, niže). Važi i za povučenu širinu — razdjelnik u
   site.js pušta do 160 px; ispod granice kolona jednostavno stane. Zadani postoci su isti, pa se širi ekrani ne mijenjaju. */
@media (min-width: 768px) {
    .sy-stablo-kolona { flex: 0 0 max(16rem, var(--sy-stablo-sirina, 25%)); width: max(16rem, var(--sy-stablo-sirina, 25%)); max-width: none; }
    .sy-sadrzaj-kolona { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
    .sy-stablo-razdjelnik { position: absolute; top: 0; right: -.4rem; width: .8rem; height: 100%; cursor: col-resize; z-index: 3; }
    .sy-stablo-razdjelnik::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: transparent; transition: background .15s ease; }
    .sy-stablo-razdjelnik:hover::after, .sy-stablo-razdjelnik.aktivan::after { background: var(--sy-primary); }
}
@media (min-width: 992px) {
    .sy-stablo-kolona { flex-basis: max(16rem, var(--sy-stablo-sirina, 16.6667%)); width: max(16rem, var(--sy-stablo-sirina, 16.6667%)); }
}

/* Razdjelnik kolona Pantheon forme (Damir 28.09., spec 2026-09-28-razdjelnik-stavki-dizajn): red nosi data-razdvojeno, razdvojeno.js
   ubacuje hvataljku između kolona i pamti udio lijeve (--sy-razdvojeno-lijevo). Granice iste kao u razdvojeno.js: desnih 20rem ima
   prednost, lijevih 36rem važi dok ima mjesta. Bez zapamćenog udjela zadano je Bootstrapovih 66.66666667%, pa je raspored isti kao
   col-lg-8 / col-lg-4 čim je red širok bar 60rem. Hvataljka je dijete reda neto širine 0 (negativne margine): leži na sredini
   razmaka i ne pomjera kolone. Linija u mirovanju je --sy-fg-muted na 75 %, ne --sy-border: ivica kartice ima kontrast 1,29:1
   i razdjelnik se ne bi primijetio; ovako je ≥ 3:1 u obje teme (WCAG 1.4.11). */
.sy-razdvojeno-razdjelnik { display: none; }
@media (min-width: 992px) {
    [data-razdvojeno] > :first-child { flex: 0 0 auto; width: clamp(min(36rem, 100% - 20rem), var(--sy-razdvojeno-lijevo, 66.66666667%), 100% - 20rem); }
    [data-razdvojeno] > :last-child { flex: 1 1 0; width: auto; min-width: 0; }
    [data-razdvojeno] > .sy-razdvojeno-razdjelnik {
        display: block; position: relative; z-index: 2; flex: 0 0 var(--bs-gutter-x); width: var(--bs-gutter-x); max-width: none; padding: 0;
        margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); cursor: col-resize; touch-action: none; outline: 0;
    }
    .sy-razdvojeno-razdjelnik::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: color-mix(in srgb, var(--sy-fg-muted) 75%, transparent); transition: background .15s ease, width .15s ease; }
    .sy-razdvojeno-razdjelnik:hover::after, .sy-razdvojeno-razdjelnik:focus-visible::after,
    body.sy-razdjelnik-vuce .sy-razdvojeno-razdjelnik::after { width: 3px; background: var(--sy-primary); }
}

/* ===== Lista (03.09.): sort, paginacija, sklapanje grupa, fokus reda, brojevi u stablu, brzi pregled ===== */
.sy-sort { text-decoration: none; color: inherit; white-space: nowrap; }
.sy-sort:hover, .sy-sort.aktivan { color: var(--sy-primary-tekst); }
.sy-paginacija .btn.disabled { pointer-events: none; opacity: .45; }
/* Odabran red (07.09.): cijeli red jednom ravnomjernom svijetlo zelenom podlogom. Podloga ide na <tr> jer su
   ćelije prozirne (--bs-table-bg: transparent), pa nema prekida na granicama kolona kakav je davao raniji
   okvir po ćeliji. :hover je izdvojen da odabir ostane zelen i kad je miš nad redom. */
table.sy-lista tbody tr.sy-red-fokus,
table.sy-lista tbody tr.sy-red-fokus:hover { background: var(--sy-odabran); }
.sy-precice { cursor: help; }
.sy-stablo-broj { font-size: .7rem; color: var(--sy-fg-muted); margin-left: .35rem; }
.sy-stablo-novo { font-size: .62rem; margin-left: .3rem; }
.sy-brzi-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 30rem; max-width: 94vw; z-index: 1040;
    padding: 1.1rem 1.2rem; background: hsla(220 13% 12% / .97); backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid var(--sy-border); box-shadow: -18px 0 44px hsla(220 13% 4% / .55);
    overflow: hidden; animation: sy-uklizi .22s ease-out; display: flex; flex-direction: column;
}
/* Stranice PDF-a jedna ispod druge + zum (07.09.). --sy-brzi-zum je faktor; preko 1 stranica prerasta panel
   pa tijelo dobija i vodoravni skrol. max-width se NE koristi jer bi orezao uvećanje. */
.sy-brzi-panel { --sy-brzi-zum: 1; }
.sy-brzi-tijelo { overflow: auto; min-height: 0; }
.sy-brzi-strana { margin: 0 0 .75rem; }
.sy-brzi-strana:last-child { margin-bottom: 0; }
.sy-brzi-strana-broj { text-align: center; padding-top: .2rem; }
.sy-brzi-slika { display: block; width: calc(100% * var(--sy-brzi-zum)); margin: 0 auto; border-radius: .4rem; background: #fff; box-shadow: 0 6px 24px hsla(220 13% 4% / .5); }
/* Hvataljka za širinu na lijevoj ivici panela — isti obrazac kao razdjelnik stabla. */
.sy-brzi-razdjelnik { position: absolute; top: 0; left: 0; width: .7rem; height: 100%; cursor: col-resize; z-index: 2; }
.sy-brzi-razdjelnik::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: transparent; transition: background .15s ease; }
.sy-brzi-razdjelnik:hover::after, body.sy-razdjelnik-vuce .sy-brzi-razdjelnik::after { background: var(--sy-primary); }
/* Prostori (06.09.): PDF/tekst u iframe-u unutar panela; ◀ ▶ zatamnjeni na krajevima. */
.sy-brzi-okvir { display: block; width: 100%; height: 72vh; border: 0; border-radius: .4rem; background: #fff; }
.sy-brzi-panel .sy-brzi-prev:disabled, .sy-brzi-panel .sy-brzi-next:disabled,
.sy-brzi-panel .sy-brzi-str-prev:disabled, .sy-brzi-panel .sy-brzi-str-next:disabled { opacity: .35; }
/* Čet balončić sjedi fiksno u donjem desnom uglu na z-index 10002 — panel ga ne može nadvisiti bez skrivanja
   tuđeg widgeta, pa mu pager ostavlja mjesta da dugme „sljedeće stranice" ne završi ispod njega. */
.sy-brzi-strane { padding-right: 3.25rem; }
[data-bs-theme="light"] .sy-brzi-panel { background: hsla(0 0% 100% / .98); box-shadow: -18px 0 44px hsla(220 30% 25% / .18); }
/* Original na dohvat ruke (Damir 28.09.): stranice unosa sužavaju zajednički <main> za širinu otvorenog panela (original.js:
   body.sy-original-otvoren + --sy-original-desno na <html>), pa podaci i original stoje jedno uz drugo. Ispod 992 px panel
   prekriva sadržaj. Popup (+ Novi dobavljač/artikal) centrira se lijevo od panela, a panel ostaje iznad zatamnjenja (1050) i
   popupa (1055) — naziv i PDV broj se prepisuju iz originala. */
main[role="main"] { transition: padding-right .22s ease; }
@media (min-width: 992px) {
    body.sy-original-otvoren main[role="main"] { padding-right: var(--sy-original-desno, 0px); }
    body.sy-original-otvoren .modal { padding-right: var(--sy-original-desno, 0px) !important; }
    body.sy-original-otvoren.modal-open .sy-brzi-panel { z-index: 1060; }
}
.sy-original-dugme.active { background: var(--sy-primary-soft); border-color: var(--sy-primary); color: #fff; }
[data-bs-theme="light"] .sy-original-dugme.active { color: var(--sy-primary-tekst); }
/* PDF u pregledniku (okvir): zum vodi preglednik, pa panelova dugmad zuma nemaju šta raditi; okvir puni tijelo panela. */
.sy-brzi-panel:has(.sy-brzi-okvir) :is(.sy-brzi-manje, .sy-brzi-zum, .sy-brzi-vise) { display: none; }
.sy-brzi-panel:has(.sy-brzi-okvir) .sy-brzi-tijelo { display: flex; flex-direction: column; }
.sy-brzi-panel:has(.sy-brzi-okvir) .sy-brzi-okvir { flex: 1 1 auto; height: auto; min-height: 20rem; }
/* Kontrolor (28.09.): original je u panelu, pa podaci idu u jednu kolonu — ograničenu, da se na širokom monitoru ne razvuku. */
.sy-kontrola-podaci { max-width: 52rem; }
/* Jedan dokument na stranici (sve stranice unosa): ◀ ▶ bi uvijek stajali ugašeni. */
.sy-brzi-panel:has(.sy-brzi-prev:disabled):has(.sy-brzi-next:disabled) :is(.sy-brzi-prev, .sy-brzi-next) { display: none; }

/* ===== Drag & drop (03.09.): upload ispustanjem, premjestanje redova na folder u stablu ===== */
/* Novi UI 5-8a: forma učitavanja je samo dugme „Učitaj", pa se pri prevlačenju ističe cijela lista u koju fajlovi idu. */
body.sy-drop-aktivan #dokumenti-sadrzaj:has(form.sy-upload-forma) { outline: 2px dashed var(--sy-primary); outline-offset: 6px; border-radius: .5rem; background: var(--sy-primary-soft); }
a.sy-folder.sy-drop-cilj { outline: 2px solid var(--sy-primary); outline-offset: -2px; background: var(--sy-primary-soft); }
/* Red kao cilj prevlačenja (14.09., VAŽNO 6 završna recenzija): site.js dodaje sy-drop-cilj i na <tr> kad se
   dokument prevuče nad drugi dokument (podređivanje) — ta klasa je do sada bila stilizovana samo za foldere
   (a.sy-folder/a.sy-plocica), pa je korisnik dobijao kursor „move" i nula znaka koji će red postati nadređeni. */
table.sy-lista tbody tr.sy-drop-cilj td { background: var(--sy-primary-soft); box-shadow: inset 0 0 0 2px var(--sy-primary); }
table.sy-lista tbody tr[draggable="true"] { cursor: grab; }
table.sy-lista tbody tr.sy-vuce { opacity: .5; }

/* ===== Grid prikaz liste (06.09., Google Drive obrazac): ISTA tabela i redovi, kartice samo kroz CSS —
   označavanje, drag & drop, prečice, „⋯" meni i sklapanje grupa rade nepromijenjeno. ===== */
table.sy-lista.sy-prikaz-grid { display: block; border-collapse: separate; }
table.sy-lista.sy-prikaz-grid > thead { display: none; }
table.sy-lista.sy-prikaz-grid > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; padding: .25rem 0 .5rem; }
table.sy-lista.sy-prikaz-grid > tbody > tr { display: flex; flex-direction: column; position: relative; min-height: 10rem; padding: 1.1rem .9rem .75rem; border: 1px solid var(--sy-border); border-radius: var(--sy-radius); background: var(--sy-card); }
table.sy-lista.sy-prikaz-grid > tbody > tr:hover { background: var(--sy-card-hover); border-color: var(--sy-border-strong); }
table.sy-lista.sy-prikaz-grid > tbody > tr[hidden] { display: none; }
table.sy-lista.sy-prikaz-grid > tbody > tr > td { display: block; padding: .1rem 0; border: 0; background: transparent; box-shadow: none; }
/* Kvačica označavanja u gornjem lijevom uglu kartice. */
table.sy-lista.sy-prikaz-grid > tbody > tr > td:has(> input.sy-sel) { position: absolute; top: .55rem; left: .65rem; padding: 0; }
/* Naziv prvi; ikona tipa fajla U BOJI (07.09., Drive) — SVG kroz --sy-ikona na redu (data-tip): mala ispred naziva u listi,
   velika u gornjoj zoni kartice. Ista na svim OS-ovima (emoji fontovi se razlikuju). */
table.sy-lista.sy-prikaz-grid td[data-k="naziv"] { order: -1; margin-top: 1rem; font-weight: 600; overflow-wrap: anywhere; }
table.sy-lista tbody tr[data-id] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%238a94a6'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='6' y='14' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.85'/><rect x='6' y='19' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.85'/><rect x='6' y='24' width='8' height='2' rx='1' fill='%23fff' fill-opacity='.85'/></svg>"); }
table.sy-lista tbody tr[data-tip="pdf"] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%23e5484d'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='6' y='13' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.85'/><rect x='6' y='17' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.85'/><text x='12' y='27.5' font-family='Arial,Helvetica,sans-serif' font-size='6.5' font-weight='700' text-anchor='middle' fill='%23fff'>PDF</text></svg>"); }
table.sy-lista tbody tr[data-tip="word"] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%233b7dd8'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='6' y='13' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.85'/><rect x='6' y='17' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.85'/><text x='12' y='27.5' font-family='Arial,Helvetica,sans-serif' font-size='6.5' font-weight='700' text-anchor='middle' fill='%23fff'>DOC</text></svg>"); }
table.sy-lista tbody tr[data-tip="excel"] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%232e9e5b'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='6' y='12' width='12' height='8' rx='1' fill='%23fff' fill-opacity='.9'/><path d='M6 16h12M12 12v8' stroke='%232e9e5b' stroke-width='1.2'/><text x='12' y='27.5' font-family='Arial,Helvetica,sans-serif' font-size='6.5' font-weight='700' text-anchor='middle' fill='%23fff'>XLS</text></svg>"); }
table.sy-lista tbody tr[data-tip="ppt"] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%23e8842c'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='6' y='12' width='12' height='8' rx='1' fill='%23fff' fill-opacity='.9'/><text x='12' y='27.5' font-family='Arial,Helvetica,sans-serif' font-size='6.5' font-weight='700' text-anchor='middle' fill='%23fff'>PPT</text></svg>"); }
table.sy-lista tbody tr[data-tip="slika"] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%238b5cf6'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='5' y='12' width='14' height='13' rx='1' fill='%23fff' fill-opacity='.92'/><circle cx='9' cy='16' r='1.7' fill='%238b5cf6'/><path d='M6 24l4-4.5 3 3 2-2 3 3.5z' fill='%238b5cf6'/></svg>"); }
table.sy-lista tbody tr[data-tip="tekst"] { --sy-ikona: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3 1h12l6 6v22H3z' fill='%236b7a90'/><path d='M15 1v6h6' fill='%23fff' fill-opacity='.5'/><rect x='6' y='12' width='12' height='1.6' rx='.8' fill='%23fff' fill-opacity='.85'/><rect x='6' y='16' width='12' height='1.6' rx='.8' fill='%23fff' fill-opacity='.85'/><rect x='6' y='20' width='12' height='1.6' rx='.8' fill='%23fff' fill-opacity='.85'/><rect x='6' y='24' width='7' height='1.6' rx='.8' fill='%23fff' fill-opacity='.85'/></svg>"); }
table.sy-lista td[data-k="naziv"]::before { content: ""; display: inline-block; width: 1rem; height: 1.25rem; margin-right: .4rem; vertical-align: -.3rem; background: var(--sy-ikona) center / contain no-repeat; }
table.sy-lista.sy-prikaz-grid td[data-k="naziv"]::before { display: block; position: absolute; top: 1.5rem; left: 50%; width: 3.8rem; height: 4.75rem; margin: 0 0 0 -1.9rem; }
/* Ostale kolone kao redovi „Naslov: vrijednost". */
table.sy-lista.sy-prikaz-grid td[data-k]:not([data-k="naziv"]) { font-size: .8rem; color: var(--sy-fg-muted); }
table.sy-lista.sy-prikaz-grid td[data-k]:not([data-k="naziv"])::before { content: attr(data-l) ": "; opacity: .75; }
/* Akcije na dnu kartice, uvijek vidljive. */
table.sy-lista.sy-prikaz-grid td.sy-akcije { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
/* Zaglavlje grupe preko cijele širine; grane (crte) grupisane liste nemaju smisla u kartici. */
table.sy-lista.sy-prikaz-grid > tbody > tr.sy-grupa-zaglavlje { grid-column: 1 / -1; display: block; min-height: 0; padding: .35rem .5rem; border: 0; border-bottom: 1px solid var(--sy-border); border-radius: 0; background: transparent; }
table.sy-lista.sy-prikaz-grid > tbody > tr.sy-grupa-zaglavlje > td { display: block; }
table.sy-prikaz-grid.sy-grupisano tr.sy-grupa-red td:first-child { padding-left: 0; }
table.sy-prikaz-grid.sy-grupisano tr.sy-grupa-red td:first-child::before, table.sy-prikaz-grid.sy-grupisano tr.sy-grupa-red td:first-child::after { display: none; }
/* Odabrana kartica (07.09.) = ista zelena podloga kao odabran red u listi. */
table.sy-lista.sy-prikaz-grid > tbody > tr.sy-red-fokus,
table.sy-lista.sy-prikaz-grid > tbody > tr.sy-red-fokus:hover { border-color: var(--sy-green); background: var(--sy-odabran); }
.sy-vlasnik-mail { color: var(--sy-fg-muted); }
/* Kraj liste (07.09., beskonačno listanje): mjesto koje posmatrač gleda; dugme je rezerva. */
.sy-lista-kraj { min-height: 2.5rem; }
/* Datumi i veličina se ne prelamaju u dva reda kad kolona Vlasnik stisne tabelu. */
table.sy-lista td[data-k="primljeno"], table.sy-lista td[data-k="izmijenjeno"], table.sy-lista td[data-k="velicina"] { white-space: nowrap; }
/* Sličice u gridu (07.09., Drive): svaka kartica ima gornju zonu 8.5rem — ikona tipa u sredini; kad se sličica učita
   (JS doda sy-ima-slicicu na red) ona prekrije zonu. Slika je od početka u rasporedu (opacity 0, ne display:none) jer
   Chrome lazy-loading ne učitava sliku bez okvira. U listi se sličice ne prikazuju ni ne učitavaju. */
img.sy-slicica { display: none; }
table.sy-lista.sy-prikaz-grid td[data-k="naziv"] { position: relative; margin-top: 0; padding-top: 9.2rem; }
table.sy-lista.sy-prikaz-grid td[data-k="naziv"] img.sy-slicica { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 8.5rem; object-fit: cover; object-position: top; border-radius: .45rem; border: 1px solid var(--sy-border); background: #fff; opacity: 0; transition: opacity .15s; }
table.sy-lista.sy-prikaz-grid > tbody > tr.sy-ima-slicicu td[data-k="naziv"] img.sy-slicica { opacity: 1; }
table.sy-lista.sy-prikaz-grid > tbody > tr.sy-ima-slicicu td[data-k="naziv"]::before { display: none; }
/* Putanja foldera iznad liste (07.09., Drive). */
/* Zvjezdica (07.09., Drive „Starred"): blijeda dok red nije pod misem, zlatna kad je aktivna; u gridu gore desno na kartici. */
.sy-zvjezdica { border: 0; background: none; padding: 0 .2rem; margin-right: .15rem; font-size: 1.05rem; line-height: 1; color: var(--bs-secondary-color); opacity: .3; cursor: pointer; vertical-align: -.05rem; transition: opacity .12s, color .12s; }
table.sy-lista tbody tr:hover .sy-zvjezdica, .sy-zvjezdica:focus-visible { opacity: .85; }
.sy-zvjezdica:hover { color: #f5b301; opacity: 1; }
.sy-zvjezdica.aktivna, table.sy-lista tbody tr:hover .sy-zvjezdica.aktivna { color: #f5b301; opacity: 1; }
/* Novi UI 1b (završni pregled): ★ u redu je Lucide „star" (obris); aktivna zvjezdica je puna, kao raniji znak. */
.sy-zvjezdica.aktivna .sy-ik-l { fill: currentColor; }
.sy-zvjezdica:disabled { cursor: progress; }
.sy-zvjezdica-velika { font-size: 1.5rem; opacity: .35; }
table.sy-lista.sy-prikaz-grid td[data-k="naziv"] .sy-zvjezdica { position: absolute; top: .35rem; right: .35rem; z-index: 2; margin: 0; padding: .1rem .3rem; border-radius: .4rem; background: hsla(0 0% 100% / .85); opacity: .55; }
table.sy-lista.sy-prikaz-grid td[data-k="naziv"] .sy-zvjezdica.aktivna { opacity: 1; }
td.sy-lokacija a { text-decoration: none; white-space: nowrap; }
td.sy-lokacija a:hover { text-decoration: underline; }
table.sy-lista.sy-prikaz-grid td.sy-lokacija a { white-space: normal; overflow-wrap: anywhere; }
/* AI ikonica (Damir 07.09.): robot SVG (wwwroot/img/ai-robot.svg) umjesto 🤖 emoji-ja — inline uz tekst, velicina prati font;
   u tamnoj temi blagi svijetli obrub da tamni oklop ne utone u pozadinu. */
.sy-ai-ikona { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.32em; background: url("../img/ai-robot.svg") center / contain no-repeat; flex: none; }
h1 .sy-ai-ikona, h2 .sy-ai-ikona, h6 .sy-ai-ikona, .h4 .sy-ai-ikona, .h5 .sy-ai-ikona, .h6 .sy-ai-ikona { width: 1.4em; height: 1.4em; vertical-align: -.32em; }
.sy-ai-dijalog-naslov .sy-ai-ikona { width: 1.5em; height: 1.5em; vertical-align: -.4em; }
.btn .sy-ai-ikona, .dropdown-item .sy-ai-ikona { width: 1.2em; height: 1.2em; vertical-align: -.28em; }
[data-bs-theme="dark"] .sy-ai-ikona { filter: drop-shadow(0 0 1.5px hsla(0 0% 100% / .55)); }
.sy-mrvice { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.sy-mrvice a { text-decoration: none; }
.sy-mrvice a:hover { text-decoration: underline; }
.sy-mrvice-strelica { opacity: .6; }
/* Praćeni folderi (Damir 17.10.2026.): dugme uz naziv foldera, stanje u aria-pressed (ispunjena pribadača); pribadača u stablu i stavka. */
.sy-mrvice .sy-prati-folder { padding: .05rem .4rem; font-size: inherit; text-decoration: none; color: var(--sy-fg-muted); display: inline-flex; align-items: center; gap: .25rem; }
.sy-mrvice .sy-prati-folder:hover { color: var(--sy-primary-tekst); }
.sy-mrvice .sy-prati-folder[aria-pressed="true"] { color: var(--sy-primary-tekst); font-weight: 600; }
.sy-prati-folder .sy-ik-l, .sy-mrvice-pogled .sy-ik-l { width: 1rem; height: 1rem; vertical-align: -.15rem; }
.sy-prati-folder[aria-pressed="true"] .sy-ik-l { fill: currentColor; }
.sy-prati-folder:disabled { cursor: progress; }
.sy-folder > .sy-ik-l { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--sy-primary-tekst); opacity: .8; }
.sy-stablo-pracen { display: inline-flex; color: var(--sy-primary-tekst); opacity: .85; }
.sy-stablo-pracen .sy-ik-l { width: .85rem; height: .85rem; fill: currentColor; }
/* Filter-čipovi Tip / Vlasnik / Period (07.09., Drive): aktivan čip u boji brenda. */
.sy-filteri .sy-filter-izbor { width: auto; max-width: 13rem; }
.sy-filter-izbor.aktivan { border-color: var(--sy-primary); color: var(--sy-primary-tekst); font-weight: 600; background-color: var(--sy-primary-soft); }
/* Prazan folder = zona za prevlačenje (07.09., Drive); dok se fajl vuče preko stranice zona se istakne. */
.sy-prazno { border: 2px dashed var(--sy-border-strong); border-radius: var(--sy-radius); padding: 2.2rem 1rem; text-align: center; color: var(--sy-fg-muted); background: var(--sy-bg-soft); }
.sy-prazno-ikona { font-size: 2rem; line-height: 1; margin-bottom: .5rem; }
body.sy-drop-aktivan .sy-prazno { border-color: var(--sy-primary); background: var(--sy-primary-soft); color: var(--sy-fg); }
/* Novi UI 5-15: prazan lični folder — zona je label za polje „Učitaj" (klik otvara izbor fajla), pa je blok i ima pokazivač ruke. */
.sy-prazno.sy-pr-zona { display: block; cursor: pointer; }
.sy-prazno.sy-pr-zona:hover { border-color: var(--sy-primary); }
/* Završni pregled 5-15 (M4): pun lični folder — isti obris kao lista Dokumenata dok se fajlovi prevlače. */
body.sy-drop-aktivan .sy-pr-sadrzaj { outline: 2px dashed var(--sy-primary); outline-offset: 4px; border-radius: var(--sy-radius); }

/* ===== Pametni folderi (03.09.): sacuvane pretrage u stablu ===== */
.sy-pametni-red .sy-pametni-obrisi { opacity: .35; text-decoration: none; }
.sy-pametni-red:hover .sy-pametni-obrisi { opacity: 1; }
.sy-pametni-forma input { min-width: 0; }

/* ===== Oznake u boji (03.09.) ===== */
.sy-oznaka {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; line-height: 1.2;
    padding: .1rem .5rem; border-radius: 999px; text-decoration: none; white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
    color: var(--sy-oznaka, #726BFF); background: color-mix(in srgb, var(--sy-oznaka, #726BFF) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--sy-oznaka, #726BFF) 55%, transparent); vertical-align: middle;
}
.sy-oznaka::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sy-oznaka, #726BFF); flex: 0 0 auto; }
a.sy-oznaka:hover { color: var(--sy-oznaka, #726BFF); border-color: var(--sy-oznaka, #726BFF); }
.sy-oznake-meni { min-width: 16rem; }
.sy-oznaka-red { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: transparent; color: var(--sy-fg); padding: .15rem .1rem; border-radius: .3rem; text-align: left; }
.sy-oznaka-red:hover { background: var(--sy-muted); }
.sy-oznaka-red.ima { font-weight: 600; }
.sy-oznaka-boja { width: 2.2rem; height: 1.9rem; padding: .1rem; }

/* ===== Izvjestaji (03.09.): SVG grafikoni sa servera ===== */
.sy-graf { display: block; width: 100%; height: auto; }
.sy-graf-mreza { stroke: var(--sy-border); stroke-width: 1; }
.sy-graf-os { fill: var(--sy-fg-muted); font-size: 11px; font-family: inherit; }
.sy-graf-vr { fill: var(--sy-fg); font-size: 11px; font-weight: 600; font-family: inherit; }
.sy-graf-stupac.a { fill: var(--sy-primary); opacity: .9; }
.sy-graf-stupac.b { fill: var(--sy-cyan); opacity: .85; }
.sy-graf-stupac:hover { opacity: 1; }
.sy-izv-tabela td, .sy-izv-tabela th { padding: .3rem .45rem; }

/* Skeniranje telefonom (03.09.): sličice snimljenih stranica s brojem i uklanjanjem. */
.sy-sken-slicica { position: relative; width: 92px; height: 120px; border: 1px solid #dee2e6; border-radius: .5rem; overflow: hidden; background: #fff; }
.sy-sken-slicica img { width: 100%; height: 100%; object-fit: cover; }
.sy-sken-broj { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: .7rem; padding: 0 .35rem; border-radius: .25rem; }
.sy-sken-ukloni { position: absolute; right: 2px; top: 2px; border: 0; background: rgba(220,53,69,.9); color: #fff; width: 20px; height: 20px; line-height: 18px; border-radius: 50%; font-size: .9rem; padding: 0; }
@media (max-width: 576px) { .sy-sken-dugme { font-size: 1.25rem; padding: 1rem; } }

/* Pravila entiteta (04.09.): pločice tipova fajlova, pregled pečata, ljepljiva traka za čuvanje. */
.sy-pravila-tip { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .6rem; padding: .55rem .7rem; cursor: pointer; background: var(--bs-body-bg, #fff); transition: border-color .15s, box-shadow .15s; height: 100%; }
.sy-pravila-tip:hover { border-color: #4f46e5; }
.sy-pravila-tip:has(input:checked) { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, .18); }
.sy-pravila-tip input { margin-top: .2rem; flex: none; }
.sy-pravila-tip-naziv { font-weight: 600; }
.sy-pravila-tip-ekst { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; opacity: .75; }
.sy-pravila-tip-opis { font-size: .78rem; color: var(--bs-secondary-color, #6c757d); }
.sy-pecat-pregled { display: inline-block; border: 1.5px solid #16803d; border-radius: 7px; padding: .45rem .75rem; background: #fff; color: #3c3c3c; line-height: 1.3; min-width: 17rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: opacity .2s, filter .2s; }
.sy-pecat-pregled .sy-pecat-naslov { color: #16803d; font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; }
.sy-pecat-pregled .small { font-size: .72rem; }
.sy-pecat-pregled.is-off { opacity: .3; filter: grayscale(1); }
/* Novi UI 5-11a: izbor kritičnih polja dok prekidač „uvijek ručno" ne važi — ostaje izmjenjiv, samo posivljen. */
.sy-kriticna-polja.is-off { opacity: .75; }   /* kontrole ostaju aktivne — tekst mora ostati čitljiv (završni pregled 5-11) */
.sy-pravila-traka { position: sticky; bottom: 0; background: var(--bs-body-bg, #fff); border-top: 1px solid var(--bs-border-color, #dee2e6); padding: .75rem 0; z-index: 5; }
.sy-sablon-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sy-pravila-entiteti .nav-link { padding: .3rem .8rem; }

/* Akcije reda liste (05.09.; Novi UI 5-3, 22.10.2026.): glavna akcija + „⋯" meni (u njemu i „Brzi pregled"); desni klik otvara isti meni. */
.sy-akcije { white-space: nowrap; }
.sy-akcije .btn + .btn, .sy-akcije .btn + .btn-group, .sy-akcije .btn-group + .btn, .sy-akcije .btn-group + .btn-group, .sy-akcije form + .btn, .sy-akcije form + .btn-group, .sy-akcije .btn + form { margin-left: .2rem; }
.sy-akcija-glavna { min-width: 5.6rem; font-weight: 600; }
.sy-akcije-meni { min-width: 19rem; max-height: min(70vh, 34rem); overflow-y: auto; }
.sy-akcije-meni .dropdown-header { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .35rem; padding-bottom: .2rem; }
.sy-akcije-meni .dropdown-item { padding-top: .3rem; padding-bottom: .3rem; }
.sy-akcije-meni .sy-akcije-strelica { opacity: .5; transition: transform .15s; }
.sy-akcije-meni [aria-expanded="true"] .sy-akcije-strelica { transform: rotate(90deg); }
.sy-akcije-sekcija { padding: .25rem 1rem .5rem 1.6rem; }
.sy-akcije-sekcija .dropdown-item { padding-left: 0; padding-right: 0; }
/* Novi UI 1b (Damir 16.10.2026., spec §4): Lucide u meniju „⋯" 20 px, prigušenija od teksta (kao meni foldera); u dugmadima reda 16 px —
   .btn-sm ima ≈ 20 px sadržaja, pa red ne raste u visinu. Dugmad u sekcijama menija (Sačuvaj rok, Preimenuj) su .btn → 16 px. */
.sy-akcije-meni .sy-ik-l { width: 20px; height: 20px; vertical-align: middle; opacity: .75; }
.sy-akcije .btn .sy-ik-l { width: 16px; height: 16px; vertical-align: -3px; opacity: 1; }

/* AI raspored (05.09.): čip prijedloga uz naziv (postojeći / NOVI folder / možda pogrešan), panel iznad Inboxa, kartica na Početnoj. */
.sy-raspored-cip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; line-height: 1.35; padding: .12rem .5rem; border-radius: .55rem; background: hsla(258 100% 71% / .14); border: 1px solid hsla(258 100% 71% / .4); vertical-align: middle; }
.sy-raspored-cip form { display: inline; }
.sy-raspored-cip .btn-link { font-size: .8rem; text-decoration: none; }
.sy-raspored-cip .btn-link:hover { text-decoration: underline; }
.sy-raspored-cip.sy-novi { border-style: dashed; }
.sy-raspored-cip.sy-pogresan { background: hsla(40 100% 60% / .16); border-color: hsla(40 100% 60% / .5); }
/* Grid prikaz (06.09., #222): u kartici čip ide u svoj red ispod naziva, običnom težinom; dugmad ostaju u istom redu. */
table.sy-lista.sy-prikaz-grid .sy-raspored-cip { display: flex; margin-top: .35rem; font-weight: 400; }
/* Sklopljen prijedlog (18.09., Damir): razvučen čip je jeo širinu reda — u redu stoji samo AI ikonica u krugu,
   klik otvara isti sadržaj. Boja i okvir nose stanje kao na čipu: ljubičasto = prijedlog, žuto = možda pogrešan
   folder, isprekidano = novi folder. Bez JS-a; ista <details> konvencija kao sy-raspored-uputa. */
.sy-raspored-sklop { display: inline-block; vertical-align: middle; }
.sy-raspored-sklop > summary { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; cursor: pointer; list-style: none; background: hsla(258 100% 71% / .14); border: 1px solid hsla(258 100% 71% / .4); }
.sy-raspored-sklop > summary::-webkit-details-marker { display: none; }
.sy-raspored-sklop > summary:hover { background: hsla(258 100% 71% / .32); }
.sy-raspored-sklop > summary .sy-ai-ikona { width: 1.05rem; height: 1.05rem; vertical-align: 0; }
.sy-raspored-sklop.sy-pogresan > summary { background: hsla(40 100% 60% / .16); border-color: hsla(40 100% 60% / .5); }
.sy-raspored-sklop.sy-pogresan > summary:hover { background: hsla(40 100% 60% / .34); }
.sy-raspored-sklop.sy-novi > summary { border-style: dashed; }
.sy-raspored-sklop[open] { display: block; }
.sy-raspored-sklop[open] > .sy-raspored-cip { margin-top: .25rem; }
/* Kad je otvoren, ikonica u čipu bi bila drugi robot ispod prvog — nosi je već bedž u summary. */
.sy-raspored-sklop > .sy-raspored-cip > .sy-ai-ikona { display: none; }
/* U grid kartici bedž ide u svoj red ispod naziva, kao što je čip išao prije. */
table.sy-lista.sy-prikaz-grid .sy-raspored-sklop { display: block; margin-top: .35rem; }
/* AI raspored = desni offcanvas (07.09.): širi od standardnih 20rem jer nosi pločice s formama. */
.sy-raspored-panel.offcanvas { width: 27rem; border-left: 3px solid hsl(258 100% 71%); }
.sy-raspored-panel .sy-raspored-plocice { grid-template-columns: 1fr; }
/* Dugmad u panelu: <a class="btn"> je sam flex-stavka pa se rasteže, a dugme unutar <form> nije —
   bez ovoga „Analiziraj folder" bude 129 px a „Rasporedi po pravilima" 372 px u istoj koloni. */
.sy-raspored-akcije > form > .btn { width: 100%; }
.sy-raspored-panel .sy-raspored-uputa-pregled { width: 100%; margin-top: .35rem; }
/* Vizuelna dorada AI akcija (08.09.): zadržani tekstovi, forme i handleri.
   Panel JS premješta na body, zato stilovi ne zavise od .sy-stablo-red. */
.sy-raspored-panel .sy-raspored-akcije { gap: .75rem !important; }
.sy-raspored-panel .sy-raspored-akcije > span {
    color: var(--sy-fg-muted);
    font-size: .85rem;
    line-height: 1.65;
    margin-bottom: .35rem;
}
.sy-raspored-panel .sy-raspored-akcije > form > .btn,
.sy-raspored-panel .sy-raspored-akcije > a.btn {
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    min-height: 2.9rem;
    padding: .75rem 1rem !important;
    border-radius: .7rem;
    text-align: left;
    justify-content: flex-start;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
}
.sy-raspored-panel .sy-raspored-akcije .btn-outline-secondary {
    background: var(--sy-card);
    border-color: var(--sy-border-strong);
    color: var(--sy-fg);
}
.sy-raspored-panel .sy-raspored-akcije .btn-outline-secondary:not(:disabled):hover {
    background: var(--sy-primary-soft);
    border-color: var(--sy-primary);
    color: var(--sy-primary-tekst);
}
.sy-raspored-panel .sy-raspored-akcije .btn-primary {
    background: var(--sy-primary-soft);
    border-color: var(--sy-primary);
    color: var(--sy-fg);
}
.sy-raspored-panel .sy-raspored-akcije .btn-primary:not(:disabled):hover {
    background: var(--sy-primary-tekst);   /* 1b: pozadina svijetlog teksta = tekst-nijansa (tamna tema: isti token) */
    color: var(--sy-bg);
}
.sy-raspored-panel .sy-raspored-akcije .btn:focus-visible {
    outline: 2px solid var(--sy-primary);
    outline-offset: 3px;
}
.sy-raspored-panel .sy-raspored-uputa-pregled {
    margin-top: .6rem;
    padding: .65rem .8rem;
    border-radius: .6rem;
    font-size: .82rem;
}
.sy-raspored-panel .sy-raspored-akcije > a.small {
    align-self: flex-start;
    padding: .35rem 0;
    text-decoration: none;
    font-weight: 500;
}
.sy-raspored-panel .sy-raspored-akcije > a.small:hover { text-decoration: underline; }
.sy-raspored-tabela td { vertical-align: middle; }
.sy-kartica-raspored .display-6 { color: hsl(258 100% 78%); }
[data-bs-theme="light"] .sy-kartica-raspored .display-6 { color: hsl(258 70% 45%); }
/* Pločice „predloženo premještanje" (06.09., kao Google Drive): najviše 6 u panelu, ostatak na /Raspored. */
.sy-raspored-plocice { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .5rem; }
.sy-raspored-plocica { border: 1px solid hsla(258 100% 71% / .4); background: hsla(258 100% 71% / .08); border-radius: .6rem; padding: .45rem .6rem; font-size: .82rem; min-width: 0; }
.sy-raspored-plocica.sy-novi { border-style: dashed; }
.sy-raspored-plocica.sy-pogresan { border-color: hsla(40 100% 60% / .5); background: hsla(40 100% 60% / .1); }
.sy-raspored-plocica-naziv { font-weight: 600; }
.sy-raspored-plocica-cilj { line-height: 1.3; }
/* Uputa agentu (06.09.): sklopivi red s poljem — korisnik tekstom kaže agentu šta da uradi ili ispravi. */
.sy-raspored-uputa { display: inline-block; font-size: .8rem; vertical-align: middle; white-space: normal; }
.sy-raspored-uputa > summary { cursor: pointer; list-style: none; color: var(--bs-link-color); }
.sy-raspored-uputa > summary::-webkit-details-marker { display: none; }
.sy-raspored-uputa > summary:hover { text-decoration: underline; }
.sy-raspored-uputa[open] { display: block; }
.sy-raspored-uputa > form { display: flex; gap: .25rem; margin-top: .25rem; max-width: 36rem; }
.sy-raspored-uputa > form > input[name="tekst"] { font-size: .8rem; }
.sy-raspored-uputa-pregled { width: 22rem; max-width: 100%; font-size: .8rem; }
.sy-raspored-opis-tekst { min-width: 24rem; max-width: 100%; flex: 1 1 24rem; }
a.sy-raspored-jos { display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; }
/* AI asistent na telefonu (nalaz 05.09.): lista razgovora (72vh) gurala je chat ispod ekrana — kraća lista, chat odmah ispod. */
@media (max-width: 991.98px) {
    .sy-as-lista { max-height: 28vh; }
    .sy-as-chat { min-height: auto; }
    .sy-as-poruke { max-height: 48vh; }
}
/* Auto-start blok editora toka: vidljiv samo bez [hidden] (Bootstrap d-flex !important je gazio hidden, 05.09.). */
.sy-sablon-auto:not([hidden]) { display: flex; }

/* ── Pantheon (Plan 5 korak 2, 06.09.): hub, forme subjekta/računa/narudžbe ─────────────── */
/* ---------- Pantheon hub (vizuelna dorada, Damir 11.09.) ----------
   Sve ide kroz --sy-* tokene, koje [data-bs-theme="light"] redefiniše u cjelini — zato ovdje nema
   nijedne tvrde boje ni zasebnog bloka za svijetlu temu. */

.sy-pantheon-zaglavlje { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
/* Zaglavlje forme ulaznog računa (Damir 07.10., spec 2026-10-07-racun-veze-popup Dio 6): mreža polja ne šira od 72rem (na 5000 px polja bi bila od
   pola metra); napomene su ikonice u glavi kartice — „pritisnute" i s tačkom dok imaju tekst — a popup s višerednim poljem je .sy-modal. */
.sy-pz-polja { max-width: 72rem; }
.sy-pz-ikona { position: relative; }
.sy-pz-tacka { position: absolute; top: .1rem; right: .2rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sy-yellow); }
.pz-napomena { max-width: 36rem; }
.pz-napomena textarea { min-height: 9rem; resize: vertical; }
.sy-pantheon-znak { width: 1.9rem; height: 1.9rem; flex: none; color: var(--sy-primary-tekst); }
.sy-pantheon-naslov { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

/* Izbor entiteta: šifra + naziv + tačkica stanja veze u jednoj kontroli. */
.sy-pantheon-izbor { margin-left: auto; }
.sy-pantheon-izbor-dugme {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 22rem;
    padding: .4rem .8rem;
    background: var(--sy-card);
    border: 1px solid var(--sy-border-strong);
    border-radius: var(--sy-radius);
    color: var(--sy-fg);
    font-size: .88rem;
}
.sy-pantheon-izbor-dugme:hover { background: var(--sy-card-hover); border-color: var(--sy-primary); color: var(--sy-fg); }
.sy-pantheon-izbor-sam { cursor: default; }
.sy-pantheon-izbor-sam:hover { background: var(--sy-card); border-color: var(--sy-border-strong); }
.sy-pantheon-izbor-naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-pantheon-izbor-meni { min-width: 16rem; max-height: 22rem; overflow-y: auto; }
.sy-pantheon-izbor-meni .dropdown-item { display: flex; align-items: center; gap: .5rem; }

/* Tačkica stanja veze — ista informacija koju je nosila značka „povezano/nedostupno" u kartici. */
.sy-pantheon-tacka { width: .5rem; height: .5rem; flex: none; border-radius: 50%; }
.sy-pantheon-tacka.veza { background: var(--sy-green); box-shadow: 0 0 0 3px hsla(150 65% 52% / .18); }
.sy-pantheon-tacka.bez-veze { background: var(--sy-red); box-shadow: 0 0 0 3px hsla(0 84% 62% / .18); }

.sy-pantheon-postavke { flex: none; line-height: 1; padding: .45rem .6rem; }

/* Šifrarnik u jednom redu umjesto kartice 4/12. */
.sy-pantheon-traka {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    padding: .55rem .9rem;
    margin-bottom: 1rem;
    background: var(--sy-bg-soft);
    border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius);
    font-size: .8rem;
    color: var(--sy-fg-muted);
}
.sy-pantheon-traka.bez-veze { border-color: hsla(0 84% 62% / .35); }
/* Riječ „povezano"/„nedostupno" — tekstualni parnjak tačkice na dugmetu entiteta. */
.sy-pantheon-stanje { flex: none; padding: .1rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.sy-pantheon-stanje.povezano { background: hsla(150 65% 52% / .16); color: var(--sy-green-tekst); }
.sy-pantheon-stanje.nedostupno { background: hsla(0 84% 62% / .16); color: var(--sy-red-tekst); }

.sy-pantheon-broj { display: inline-flex; align-items: baseline; gap: .3rem; }
.sy-pantheon-broj strong { color: var(--sy-fg); font-size: .95rem; font-variant-numeric: tabular-nums; }
.sy-pantheon-izvor { margin-left: auto; opacity: .8; }
.sy-pantheon-razdjelnik { opacity: .5; margin: 0 .2rem; }

/* Pojas „čeka te" — broj je prvo što oko uhvati; pojas se uopšte ne renderuje kad su oba nula. */
.sy-pantheon-ceka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.sy-pantheon-ceka-kartica {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .95rem;
    background: var(--sy-primary-soft);
    border: 1px solid hsla(243 100% 71% / .32);
    border-radius: var(--sy-radius);
    color: var(--sy-fg);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.sy-pantheon-ceka-kartica:hover { border-color: var(--sy-primary); transform: translateY(-1px); color: var(--sy-fg); }
.sy-pantheon-ceka-kartica .sy-ik { width: 1.1rem; height: 1.1rem; flex: none; color: var(--sy-primary-tekst); }
.sy-pantheon-ceka-kartica.upozorenje { background: hsla(42 95% 60% / .12); border-color: hsla(42 95% 60% / .35); }
.sy-pantheon-ceka-kartica.upozorenje:hover { border-color: var(--sy-yellow); }
.sy-pantheon-ceka-kartica.upozorenje .sy-ik,
.sy-pantheon-ceka-kartica.upozorenje .sy-pantheon-ceka-broj { color: var(--sy-yellow-tekst); }
/* Nula: kartica ostaje (put do arhive reda), ali utihne — siva podloga, sivi broj, bez naglaska. */
.sy-pantheon-ceka-kartica.mirno { background: var(--sy-bg-soft); border-color: var(--sy-border); }
.sy-pantheon-ceka-kartica.mirno:hover { border-color: var(--sy-border-strong); }
.sy-pantheon-ceka-kartica.mirno .sy-ik,
.sy-pantheon-ceka-kartica.mirno .sy-pantheon-ceka-broj { color: var(--sy-fg-muted); }
.sy-pantheon-ceka-kartica.mirno .sy-pantheon-ceka-broj { font-weight: 500; opacity: .65; }

.sy-pantheon-ceka-broj { flex: none; font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--sy-primary-tekst); font-variant-numeric: tabular-nums; }
.sy-pantheon-ceka-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sy-pantheon-ceka-tekst strong { font-size: .88rem; }
.sy-pantheon-ceka-tekst span { font-size: .74rem; color: var(--sy-fg-muted); }

.sy-pantheon-odjeljak { margin-bottom: 1.25rem; }
.sy-pantheon-podnaslov { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sy-fg-muted); margin-bottom: .55rem; }

/* Kocke: grid, ne flex. Flex je dijelio prostor po sadržaju pa se svaka kocka razvlačila po dužini
   svog opisa (stari min-width 13rem / max-width 17rem) — odatle „jedna manja, druga veća". Grid
   dijeli prostor po ćelijama, pa su sve identične; align-items: stretch (grid default) izjednači i
   visine. minmax(0, 1fr) umjesto 1fr jer 1fr ima min-width: auto — dug neprelomljiv naziv bi inače
   gurnuo kolonu preko kontejnera. */
.sy-pantheon-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }

.sy-pantheon-akcija {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    height: 100%;
    padding: .85rem;
    background: var(--sy-card);
    border: 1px solid var(--sy-border);
    border-radius: var(--sy-radius);
    color: var(--sy-fg);
    text-align: left;
    text-decoration: none;
    white-space: normal;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.sy-pantheon-akcija:hover { background: var(--sy-card-hover); border-color: var(--sy-primary); color: var(--sy-fg); transform: translateY(-2px); }
.sy-pantheon-akcija-znak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .55rem;
    background: var(--sy-primary-soft);
    color: var(--sy-primary-tekst);
}
.sy-pantheon-akcija-znak .sy-ik { width: 1rem; height: 1rem; vertical-align: 0; }
.sy-pantheon-akcija-naslov { font-weight: 600; font-size: .88rem; }
.sy-pantheon-akcija-opis { font-size: .74rem; color: var(--sy-fg-muted); line-height: 1.35; }

/* „Novi artikal" u zaglavlju stavki (Damir 14.10., _NoviArtikalDugme): etiketa artikla sa zelenim „+" u uglu; na hover se dugme
   puni bojom (btn-outline-primary), a znak ostaje čitljiv jer je „+" zelen na obje pozadine. */
.sy-novi-artikal { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; white-space: nowrap; padding-inline: .7rem; }
.sy-novi-artikal-znak { position: relative; display: inline-flex; }
.sy-novi-artikal .sy-novi-artikal-znak .sy-ik { width: 1.05rem; height: 1.05rem; vertical-align: 0; color: inherit; }
.sy-novi-artikal-plus {
    position: absolute;
    right: -.32rem;
    bottom: -.28rem;
    display: inline-flex;
    width: .72rem;
    height: .72rem;
    padding: .1rem;
    border-radius: 50%;
    background: var(--sy-green);
    color: #fff;
    transition: transform .18s ease;
}
.sy-novi-artikal-plus svg { width: 100%; height: 100%; }
.sy-novi-artikal:hover .sy-novi-artikal-plus,
.sy-brzi-artikal-otvori:hover .sy-novi-artikal-plus { transform: scale(1.15); }
/* Isti znak na malom dugmetu u redu stavke: siva etiketa (ne ljubičasta — u 60 redova bi bila buka), zeleni „+" ostaje signal. */
.sy-brzi-artikal-otvori { display: inline-flex; align-items: center; padding-inline: .5rem .6rem; }
.sy-brzi-artikal-otvori .sy-novi-artikal-znak .sy-ik { width: .95rem; height: .95rem; vertical-align: 0; }

.sy-pantheon-napomena { margin: .7rem 0 0; font-size: .76rem; color: var(--sy-fg-muted); }
.sy-pantheon-kartica { margin-top: 1rem; }
.sy-pantheon-kartica .card-header .sy-ik { color: var(--sy-fg-muted); }

@media (max-width: 991.98px) {
    .sy-pantheon-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .sy-pantheon-mreza,
    .sy-pantheon-ceka { grid-template-columns: minmax(0, 1fr); }
    /* Naslov dijeli prvi red sa znakom (inače ga duga podnaslovna rečenica sama odgurne u novi red). */
    .sy-pantheon-naslov { flex: 1 1 auto; }
    /* flex-basis umjesto width: 100% — sa 100% je izbor zauzeo cijeli red i zupčanik Postavki pao u
       svoj, prazan red. Ovako izbor uzme ostatak reda, a zupčanik (flex: none) stane pored njega. */
    .sy-pantheon-izbor { margin-left: 0; flex: 1 1 12rem; min-width: 0; }
    .sy-pantheon-izbor-dugme { max-width: 100%; width: 100%; }
    .sy-pantheon-izvor { margin-left: 0; width: 100%; }
}
.sy-pantheon-stanje td { padding: .15rem .3rem; }
.sy-pantheon-dnevnik td, .sy-pantheon-dnevnik th { padding: .3rem .5rem; }
.sy-pantheon-kljuc { font-size: 1rem; }
.sy-pantheon-ai { box-shadow: inset 0 0 0 2px rgba(245, 158, 11, .45); }
.sy-pantheon-predlozeno { box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .3); }
.sy-pantheon-stavke input { min-width: 4.5rem; }

/* Biranje kolona stavki (Damir 12.09.). !important jer UA pravilo za [hidden] daje display:none, ali
   ga Bootstrapovo display za ćelije tabele nadjača — bez ovoga bi „sakrivena" kolona ostala vidljiva. */
.sy-pantheon-stavke [hidden] { display: none !important; }
.sy-pantheon-kolone-traka { display: flex; justify-content: flex-end; margin-bottom: .35rem; }
.sy-pantheon-kolone-meni { min-width: 13rem; }
.sy-pantheon-kolone-meni .dropdown-item { display: flex; align-items: center; cursor: pointer; }
.sy-pantheon-kolone-meni .dropdown-item:active { color: inherit; }
/* Zaglavlje stavki (Damir 29.09.: „ljepše, kao kod drugih tabela"): rečenična slova i veličina kao lista dokumenata i oznake polja
   iznad tabele umjesto sitnih verzala, blaga podloga reda zaglavlja (red polja ispod ga inače ne odvaja), a dugo objašnjenje roka
   lota (Zadatak 27 — mora stajati u zaglavlju) prelama se u svojoj koloni umjesto jednog reda od ~350 px. */
.sy-pantheon-stavke > thead > tr > th {
    text-transform: none;
    letter-spacing: .015em;
    font-size: .8rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
    background: hsla(0 0% 100% / .035);
    vertical-align: middle;
}
.sy-pantheon-stavke > thead > tr > th:first-child { border-top-left-radius: .5rem; }
.sy-pantheon-stavke > thead > tr > th:last-child { border-top-right-radius: .5rem; }
[data-bs-theme="light"] .sy-pantheon-stavke > thead > tr > th { background: hsla(220 30% 10% / .04); }
.sy-pantheon-stavke > thead > tr > th[data-kolona="rok"] { white-space: normal; line-height: 1.25; }
/* Birač kolona je od 29.09. U tabeli (zadnja ćelija zaglavlja): .sy-pantheon-stavke input (min-width 4.5rem) bi razvukao kvadratiće. */
.sy-pantheon-kolone-meni input { min-width: 0; }
/* Naziv ne smije pasti ispod čitljivog kad su sve kolone uključene — tada tabela radije klizi
   vodoravno (već je u .table-responsive) nego da polje ostane široko par znakova. */
.sy-pantheon-stavke .sy-pantheon-naziv { min-width: 11rem; }
/* .sy-pantheon-ident je od Zadatka 6 na HIDDEN inputu sy-izbor komponente (vrijednost, ne prikaz) —
   vidljiv je sibling .sy-izbor-unos, pa širina i naglasak idu na njega preko kombinatora "~". */
.sy-pantheon-stavke .sy-pantheon-ident ~ .sy-izbor-unos { min-width: 7rem; }
/* Stavka koju AI nije uparila sa šifrarnikom (12.09.): žuti naglasak kao i ostala AI upozorenja,
   uz tekst — boja sama ne smije nositi značenje (WCAG 1.4.1). */
.sy-pantheon-neuparena-znak {
    display: inline-block;
    margin-top: .2rem;
    padding: .05rem .35rem;
    border-radius: .35rem;
    background: hsla(42 95% 60% / .14);
    color: var(--sy-yellow-tekst);
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}
.sy-pantheon-neuparena .sy-pantheon-ident ~ .sy-izbor-unos { box-shadow: inset 0 0 0 2px hsla(42 95% 60% / .45); }

/* Analitika 3/4 (Damir 25.09.): konto traži analitiku, a nema je — nacrt se smije sačuvati, upis ne. */
.sy-pantheon-stavka.sy-pantheon-obavezna > td { background-color: rgba(220, 53, 69, .07); }
.sy-pantheon-stavka.sy-pantheon-obavezna > td:first-child { box-shadow: inset 3px 0 0 rgba(220, 53, 69, .85); }

/* AI prijedlog stavki (PR 2, Damir 26.09., spec 2026-09-26 Dio 1): žuto = prijedlog (.sy-pantheon-ai), zeleno = konstanta (ručno ili „✓"). Značenje ne
   nosi samo boja (WCAG 1.4.1): naslov polja kaže izvor, traka iznad tabele ima legendu. „✓" se vidi na hover ili fokus ćelije. */
.sy-pantheon-zakljucano { background-color: hsla(150 65% 52% / .13) !important; box-shadow: inset 0 0 0 1px hsla(150 65% 52% / .5); }
/* Završni talas C (Damir 27.09., m6) i talas E (N-2): „✓" ima SVOJE mjesto uz polje — omotač .sy-pantheon-polje (postoji samo na AI formi) je flex
   red: polje (ili, kod identa, cijela input-group s „+") raste, „✓" je fiksne širine desno od njega. Talas C ga je stavljao PREKO desnog kraja polja, a
   vidljiv je na hover ćelije — hover je tačan baš pri svakom kliku, pa je klik na desni kraj polja (otvaranje izbora) umjesto toga mijenjao izvor: na
   žutom „ai" tiha potvrda mimo brane. Pojavljuje se kroz visibility (ne display:none → inline-block, koji je ranije spuštao „✓" u novi red), a mjesto mu
   postoji i kad se ne vidi: prazno polje (hidden: server i pantheon.js oboji) i zaključan izbor (šifrarnik nije stigao, m5) „✓" ne pokazuju i ne
   primaju klik, ali ništa ne skače kad polje dobije vrijednost. */
.sy-pantheon-polje { display: flex; align-items: stretch; }
.sy-pantheon-polje > .sy-izbor, .sy-pantheon-polje > .input-group { flex: 1 1 auto; width: 1%; }
.sy-pantheon-potvrdi {
    flex: 0 0 1.2rem; width: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; padding: 0; font-size: .8rem; line-height: 1; color: var(--sy-green-tekst); cursor: pointer;
    visibility: hidden;
}
.sy-pantheon-stavka td:hover .sy-pantheon-potvrdi, .sy-pantheon-stavka td:focus-within .sy-pantheon-potvrdi { visibility: visible; }
/* Nadjačava .sy-pantheon-stavke [hidden] { display: none !important } (veća specifičnost) — skriven „✓" zadržava svoje mjesto. */
.sy-pantheon-stavke .sy-pantheon-potvrdi[hidden], .sy-pantheon-polje > .sy-izbor-pao ~ .sy-pantheon-potvrdi { display: flex !important; visibility: hidden !important; }
.sy-pantheon-potvrdi:focus-visible { outline: 2px solid var(--sy-primary); outline-offset: -2px; border-radius: .25rem; }
.sy-pantheon-ai-traka .btn-group .btn { padding: .1rem .5rem; }
/* m6/m11: zadnja kolona („✓ red", „AI", „✕") se ne prelama, a „AI traži…" u njoj stoji od početka, samo nevidljiv — pojava ne mijenja ni širinu kolone
   ni visinu reda. Nije živa regija: čitaču ekrana stanje javlja jedina, .sy-pantheon-ai-poruka iznad tabele. */
.sy-pantheon-stavka > td:has(> .sy-pantheon-ai-red) { white-space: nowrap; }
.sy-pantheon-ai-stanje { font-size: .7rem; visibility: hidden; }
.sy-pantheon-ai-trazi .sy-pantheon-ai-stanje { visibility: visible; animation: sy-pulsira 1.1s ease-in-out infinite; }
.sy-pantheon-legenda-zuto, .sy-pantheon-legenda-zeleno { padding: 0 .3rem; border-radius: .25rem; }
.sy-pantheon-legenda-zuto { box-shadow: inset 0 0 0 2px rgba(245, 158, 11, .45); }
.sy-pantheon-legenda-zeleno { background-color: hsla(150 65% 52% / .13); box-shadow: inset 0 0 0 1px hsla(150 65% 52% / .5); }
/* PR 2 (Damir 26.09.): oznaka „AI" uz vrijednost Pantheon dijela koju je predložio AI, a niko je nije potvrdio (stranica računa). */
.sy-ai-oznaka {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .3rem;
    border-radius: .3rem;
    background: hsla(42 95% 60% / .14);
    box-shadow: inset 0 0 0 1px hsla(42 95% 60% / .45);
    color: var(--sy-yellow-tekst);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
}

.sy-pantheon-jm, .sy-pantheon-pdv { white-space: nowrap; }
.sy-pantheon-iznos-spdv { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Popust i Iznos PDV (Damir 03.10.2026., kolone kao u Pantheonu): brojevi kao Vrijednost — „14,50 %" se ne lomi u uskoj koloni. */
.sy-pantheon-popust, .sy-pantheon-iznos-pdv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sy-pantheon-stavke .sy-pantheon-iznos { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sy-pantheon-izvori ul { font-size: .78rem; word-break: break-all; }
.sy-pantheon-ishod .sy-pantheon-upozorenja { padding-left: 1.1rem; }
.sy-pantheon-folderi-tabela td { vertical-align: top; }
.sy-pantheon-vrste-lista { max-height: 16rem; overflow: auto; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .4rem; padding: .35rem .5rem; margin-top: .25rem; }
.sy-pantheon-vrste-pregled { max-height: 18rem; overflow: auto; font-size: .78rem; }


/* Popup renderovan sa servera („Rasporedi po pravilima“, 06.09.) — native <dialog> koji site.js
   podigne u modal; izgled prati sy-ai-dijalog da se ne razlikuje od ostalih potvrda. */
.sy-modal {
    background: var(--sy-card);
    color: var(--sy-fg);
    border: 1px solid var(--sy-border);
    border-radius: .8rem;
    box-shadow: 0 18px 44px hsla(220 13% 4% / .6);
    padding: 1.1rem 1.25rem;
    max-width: 44rem;
    width: calc(100% - 2rem);
}
.sy-modal::backdrop { background: hsla(220 13% 5% / .6); backdrop-filter: blur(3px); }
.sy-pravila-tabela { max-height: 22rem; overflow-y: auto; }

/* Dokumenti — vizuelna dorada, 08.09.2026. Samo ova stranica; bez promjene
   akcija, skrivanja kolona, otvaranja grana, drag/drop ili JS ugovora.
   Ne uvoditi transform/overflow na roditelje menija (stacking context). */
.sy-stablo-red {
    --sy-doc-panel: #1c2029;
    --sy-doc-soft: #171b23;
    --sy-doc-line: #343b49;
    --sy-doc-muted: #b0b8c8;
    --sy-doc-hover: #242a36;
    --sy-doc-rijetko: #8a93a5;   /* Novi UI 5-1: „Više" ispod stabla — tiše od stabla, ≥ 4,5:1 na --sy-doc-soft */
}
[data-bs-theme="light"] .sy-stablo-red {
    /* Novi UI 1b (Damir 16.10.2026.): A5 sive — kartice, podloga, linije, pomoćni tekst. */
    --sy-doc-panel: #FFFFFF;
    --sy-doc-soft: #F6F6F9;
    --sy-doc-line: #E6E6EC;
    --sy-doc-muted: #5A5A6B;
    --sy-doc-hover: #EFEFF3;
    --sy-doc-rijetko: #6E6E80;   /* Novi UI 5-1: ≈ 4,6:1 na #F6F6F9 */
}
.sy-stablo-red .sy-stablo {
    background: var(--sy-doc-soft);
    border-color: var(--sy-doc-line);
    box-shadow: none;
    backdrop-filter: none;
    padding: 1rem .7rem;
    scrollbar-width: thin;
}
.sy-stablo-red .sy-stablo .sy-folder {
    padding: .48rem .6rem;
    gap: .5rem;
    line-height: 1.4;
    font-size: .85rem;
    color: var(--sy-doc-muted);
}
.sy-stablo-red .sy-stablo a.sy-folder:hover {
    transform: none;
    background: var(--sy-doc-hover);
    color: var(--sy-fg);
}
.sy-stablo-red .sy-stablo .sy-folder.aktivan {
    background: var(--sy-primary-soft);
    color: var(--sy-primary-tekst);
    box-shadow: inset 3px 0 0 var(--sy-primary);
    font-weight: 600;
}
.sy-stablo-red .sy-stablo .sy-folder > span:not([class]):not([title]) {
    overflow-wrap: anywhere;
    min-width: 0;
}
.sy-stablo-red .sy-stablo .sy-folder .ikona { width: 1.15rem; height: 1.15rem; }
.sy-stablo-red .sy-stablo-broj {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--sy-doc-muted);
    font-variant-numeric: tabular-nums;
}
.sy-stablo-red .sy-stablo-novo { flex-shrink: 0; }
.sy-stablo-red .sy-grana { border-color: var(--sy-doc-line); padding-left: .4rem; }
.sy-stablo-red .sy-toggla { min-height: 1.8rem; }
.sy-stablo-red .sy-toggla:hover { color: var(--sy-primary-tekst); }
.sy-stablo-red .sy-zakaceni, .sy-stablo-red .sy-pametni {
    border-bottom: 1px solid var(--sy-doc-line);
    padding-bottom: .8rem;
    margin-bottom: .8rem !important;
}
/* Novi UI 5-1 (22.10.2026., Suada E2 t.3–4): Lični folder je zadnja stavka stabla; rijetko je ispod crte — sivo, bez ikona, ne bori se za pažnju. */
.sy-stablo-red .sy-licni-folder { margin-top: .35rem; }
.sy-stablo-red .sy-stablo-vise { border-top: 1px solid var(--sy-doc-line); margin-top: .8rem; padding-top: .6rem; }
.sy-stablo-red .sy-stablo-vise-naslov { font-size: .8rem; color: var(--sy-doc-rijetko); padding: 0 .25rem .2rem; }
/* Završni pregled 5-1 (I1): stavke stabla su .85rem u --sy-doc-muted — „Više" mora biti tiše od njih u obje teme, i ne skače kad je stavka aktivna. */
.sy-stablo-red .sy-stablo-vise a.sy-folder { font-size: .8rem; }
.sy-stablo-red .sy-stablo-vise a.sy-folder:not(.aktivan) { color: var(--sy-doc-rijetko); }
.sy-stablo-red .sy-stablo-vise .sy-pametni { border-bottom: 0; padding-bottom: 0; margin: .4rem 0 0 !important; }
.sy-stablo-red .sy-mrvice { padding: .45rem 0; line-height: 1.7; }
.sy-stablo-red .sy-lista-traka { padding: .6rem 0 .85rem; row-gap: .65rem !important; }
.sy-stablo-red .sy-filteri .form-select { background-color: var(--sy-doc-panel); border-color: var(--sy-doc-line); }
.sy-stablo-red .sy-prikaz-izbor .btn { padding: .4rem .7rem; }
.sy-stablo-red .sy-podfolderi { border-color: var(--sy-doc-line); }
.sy-stablo-red .sy-podfolderi-mreza { gap: .65rem; }
.sy-stablo-red a.sy-plocica { border-color: var(--sy-doc-line); padding: .85rem .5rem; background: var(--sy-doc-panel); }
.sy-stablo-red a.sy-plocica:hover { transform: none; background: var(--sy-doc-hover); }
.sy-stablo-red .sy-plocica-naziv { line-height: 1.45; }
.sy-stablo-red .table-responsive:has(> table.sy-lista) {
    background: var(--sy-doc-panel);
    border-color: var(--sy-doc-line);
    padding: .35rem .75rem .75rem;
}
.sy-stablo-red table.sy-lista:not(.sy-prikaz-grid) > thead > tr > th {
    text-transform: none;
    letter-spacing: .015em;
    font-size: .8rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
    color: var(--sy-doc-muted);
}
.sy-stablo-red table.sy-lista:not(.sy-prikaz-grid) > tbody > tr[data-id] > td {
    padding-top: .8rem;
    padding-bottom: .8rem;
    border-color: var(--sy-doc-line);
}
.sy-stablo-red table.sy-lista td[data-k="naziv"] > a { color: var(--sy-fg); font-weight: 500; text-decoration: none; }
.sy-stablo-red table.sy-lista td[data-k="naziv"] > a:hover { color: var(--sy-primary-tekst); text-decoration: underline; }
.sy-stablo-red table.sy-lista:not(.sy-prikaz-grid) > tbody > tr[data-id]:not(.sy-red-fokus):hover { background: var(--sy-doc-hover); }
.sy-stablo-red .table-responsive:has(> table.sy-prikaz-grid) { background: transparent; border-color: transparent; padding: 0; }
.sy-stablo-red table.sy-lista.sy-prikaz-grid > tbody {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid > tbody > tr[data-id] {
    padding: 1rem;
    background: var(--sy-doc-panel);
    border-color: var(--sy-doc-line);
    border-radius: .8rem;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid > tbody > tr[data-id]:hover {
    background: var(--sy-doc-hover);
    border-color: var(--sy-border-strong);
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k="naziv"] {
    padding-top: 11.4rem;
    padding-bottom: .6rem;
    line-height: 1.55;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k="naziv"] img.sy-slicica {
    top: 1rem;
    height: 9.5rem;
    object-fit: contain;
    border-color: var(--sy-doc-line);
    border-radius: .5rem;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k="naziv"]::before { top: 3.25rem; }
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k]:not([data-k="naziv"]) {
    color: var(--sy-doc-muted);
    padding-top: .2rem;
    padding-bottom: .2rem;
    overflow-wrap: anywhere;
    white-space: normal;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k]:not([data-k="naziv"])::before { opacity: 1; }
.sy-stablo-red table.sy-lista.sy-prikaz-grid td.sy-akcije {
    padding-top: .85rem;
    border-top: 1px solid var(--sy-doc-line);
    gap: .4rem;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid > tbody > tr.sy-red-fokus,
.sy-stablo-red table.sy-lista.sy-prikaz-grid > tbody > tr.sy-red-fokus:hover {
    background: var(--sy-odabran);
    border-color: var(--sy-green);
    box-shadow: inset 0 0 0 1px var(--sy-green);
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k="naziv"] .sy-zvjezdica {
    top: 1.25rem;
    background: var(--sy-doc-panel);
    color: var(--sy-doc-muted);
    opacity: 1;
}
.sy-stablo-red table.sy-lista.sy-prikaz-grid td[data-k="naziv"] .sy-zvjezdica.aktivna { color: var(--sy-yellow-tekst); }
.sy-stablo-red :is(a, button, input, select):focus-visible { outline: 2px solid var(--sy-primary); outline-offset: 2px; }

/* Glavne komande Dokumenata: isti ritam, kompaktna širina i vektorske ikone. */
.sy-dokumenti-naslov { flex-wrap: wrap; }
:is(.sy-dokumenti-naslov, .sy-stablo-red) .btn {
    border-radius: .6rem;
    box-shadow: none;
    transform: none;
    letter-spacing: 0;
}
:is(.sy-dokumenti-naslov, .sy-stablo-red) .btn-primary {
    background: #6250d5;
    border-color: #6250d5;
    color: #fff;
}
:is(.sy-dokumenti-naslov, .sy-stablo-red) .btn-primary:not(:disabled):not(.disabled):hover {
    background: #5140bd;
    border-color: #5140bd;
}
.sy-stablo-red .sy-upload-forma .btn,
.sy-stablo-red .sy-lista-vise,
.sy-dokumenti-naslov > .btn {
    min-height: 2.65rem;
    padding: .6rem .9rem;
    font-size: .85rem;
    gap: .5rem;
}
.sy-stablo-red .sy-upload-forma .btn-outline-secondary,
.sy-stablo-red .sy-lista-vise {
    background: var(--sy-doc-panel);
    color: var(--sy-fg);
    border-color: var(--sy-doc-line);
}
.sy-stablo-red .sy-upload-forma .btn-outline-secondary:not(:disabled):hover,
.sy-stablo-red .sy-lista-vise:not(:disabled):hover {
    background: var(--sy-primary-soft);
    border-color: var(--sy-primary);
    color: var(--sy-primary-tekst);
}
.sy-stablo-red .sy-ikona-dugme {
    width: 2.65rem;
    min-width: 2.65rem;
    padding: .6rem !important;
}
.sy-dugme-ikona {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Novi UI 5-8b (Suada E4): polje pretrage u redu s čipovima — lupa u polju, bez dugmeta „Traži" (Enter šalje). */
.sy-pretraga-polje { position: relative; display: inline-flex; align-items: center; flex: 0 1 20rem; min-width: 12rem; }
.sy-pretraga-polje > input[type="search"] { padding-left: 2rem; width: 100%; }
.sy-pretraga-ikona { position: absolute; left: .6rem; width: 1rem; height: 1rem; color: var(--sy-fg-muted); pointer-events: none; }
.sy-vise-filtera-dugme { text-decoration: none; white-space: nowrap; }
.sy-stablo-red .sy-pretraga-polje > input[type="search"] { background-color: var(--sy-doc-panel); border-color: var(--sy-doc-line); }
@media (max-width: 575.98px) {
    .sy-pretraga-polje { flex-basis: 100%; }
}

/* ===== Panel učitavanja (08.09.) — dolje LIJEVO; desni ugao drži chat widget ===== */
.sy-upload-panel { position: fixed; left: 1rem; bottom: 1rem; width: 22rem; max-width: calc(100vw - 2rem);
    background: var(--sy-card); border: 1px solid var(--sy-border); border-radius: var(--sy-radius);
    box-shadow: 0 .5rem 1.5rem hsla(220 13% 3% / .5); z-index: 1080; overflow: hidden; color: var(--sy-fg); }
.sy-up-zaglavlje { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
    background: var(--sy-bg-soft); border-bottom: 1px solid var(--sy-border); }
.sy-up-naslov { flex: 1; font-weight: 600; font-size: .9rem; }
.sy-up-sklopi, .sy-up-zatvori, .sy-up-otkazi, .sy-up-ponovo {
    border: 0; background: transparent; color: var(--sy-fg-muted); line-height: 1;
    padding: .15rem .35rem; cursor: pointer; }
.sy-up-sklopi:hover, .sy-up-zatvori:hover, .sy-up-otkazi:hover, .sy-up-ponovo:hover { color: var(--sy-fg); }
.sy-up-lista { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.sy-upload-panel.sy-up-sklopljen .sy-up-lista { display: none; }
.sy-up-red { display: grid; grid-template-columns: 1.25rem 1fr auto auto auto; gap: .4rem;
    align-items: center; padding: .4rem .75rem; font-size: .85rem; border-bottom: 1px solid var(--sy-border); }
.sy-up-naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-up-stanje { color: var(--sy-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sy-up-traka { grid-column: 1 / -1; height: 3px; background: var(--sy-muted); border-radius: 2px; }
.sy-up-traka-puna { height: 100%; width: 0; background: var(--sy-primary); border-radius: 2px; transition: width .2s; }
.sy-up-red.sy-up-gotov .sy-up-znak::before { content: "✓"; color: var(--sy-green-tekst); }
.sy-up-red.sy-up-gotov .sy-up-traka { visibility: hidden; }
.sy-up-red.sy-up-pao .sy-up-znak::before { content: "✗"; color: var(--sy-red-tekst); }
.sy-up-red.sy-up-pao .sy-up-stanje { color: var(--sy-red-tekst); }
.sy-up-red.sy-up-pao .sy-up-traka { visibility: hidden; }
.sy-up-red.sy-up-ceka .sy-up-znak::before { content: "⋯"; color: var(--sy-fg-muted); }
.sy-up-red.sy-up-radi .sy-up-znak::before { content: "⬆"; color: var(--sy-primary-tekst); }
@media (max-width: 575.98px) { .sy-upload-panel { left: .5rem; right: .5rem; bottom: 5.5rem; width: auto; } }

/* ===== Provjera polja (Damir 13.09.): grupe, pouzdanost kao traka, znakovi stanja, ljepljiva traka radnji, original desno ===== */
/* Sužavanje sadržaja za otvoren original je od 28.09. zajedničko za sve stranice unosa (body.sy-original-otvoren main).
   Gornja granica širine (Damir 29.09.): na monitoru od ~5100 px kolona vrijednosti je rasla preko cijelog ekrana, a znakovi i dugme
   su bili metar daleko od polja; 84rem (~1260 px) drži red na jednom pogledu, a manji ekrani granicu ne osjete. */
.sy-pv-stranica { max-width: 84rem; }
/* Novi UI 5-6 (22.10.2026., E11): zaglavlje je „← folder" pa red naslova i dugmadi (Bootstrap d-flex unutra) — omotač više nije flex. */
.sy-pv-zaglavlje { display: block; }
.sy-pv-nazad { color: var(--sy-fg-muted); }
.sy-pv-nazad:hover, .sy-pv-nazad:focus-visible { color: var(--bs-link-hover-color); }
.sy-pv-nazad .sy-ik-l { width: 16px; height: 16px; vertical-align: -3px; }
.sy-pv-naslov { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.sy-pv-ikona { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--sy-gradient); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 0 18px hsla(243 100% 71% / .35); }
/* Novi UI 1b (završni pregled): u svijetloj temi bez obojenog sjaja — ikona je jednobojni indigo (--sy-gradient u svijetlom bloku). */
[data-bs-theme="light"] .sy-pv-ikona { box-shadow: none; }
.sy-pv-dok { max-width: 48rem; color: var(--sy-fg-muted); }
.sy-pv-stanje { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--sy-border-strong); background: hsla(0 0% 100% / .04); color: var(--sy-fg-muted); vertical-align: middle; }
.sy-pv-stanje.za-provjeru { color: var(--sy-primary-tekst); border-color: hsla(243 100% 71% / .5); background: var(--sy-primary-soft); }
.sy-pv-stanje.provjereno { color: var(--sy-green-tekst); border-color: hsla(150 65% 52% / .5); background: hsla(150 65% 52% / .12); }
.sy-pv-stanje.greska { color: var(--sy-red-tekst); border-color: hsla(0 84% 62% / .5); background: hsla(0 84% 62% / .1); }
.sy-pv-napredak-kutija { padding: .8rem 1rem; }
.sy-pv-napredak { height: .45rem; border-radius: 999px; background: hsla(0 0% 100% / .08); overflow: hidden; }
.sy-pv-napredak > i { display: block; height: 100%; background: var(--sy-gradient); border-radius: 999px; transition: width .3s ease; }
.sy-pv-polja { padding: .6rem 1rem 1rem; }
.sy-pv-grupa + .sy-pv-grupa { margin-top: 1rem; }
.sy-pv-grupa-naslov { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sy-fg-muted); font-weight: 600; padding: .5rem 0 .4rem; border-bottom: 1px solid var(--sy-border); margin-bottom: .3rem; display: flex; gap: .5rem; align-items: center; }
.sy-pv-grupa-broj { font-weight: 500; opacity: .7; }
/* Stavke skupljene po defaultu (Damir 29.09.): <details> — radi bez JS-a i tastaturom (obrazac .pr-sklop sa stranice računa). Sažetak je
   naslov grupe s brojem stavki, a žuta pilula kaže koliko polja čeka potvrdu, da skupljeno ne sakrije posao. */
.sy-pv-grupa-stavke > summary { cursor: pointer; list-style: none; }
.sy-pv-grupa-stavke > summary .sy-pv-grupa-broj { text-transform: none; letter-spacing: .02em; }
.sy-pv-grupa-stavke > summary::-webkit-details-marker { display: none; }
.sy-pv-grupa-stavke > summary::before {
    content: "\203A"; display: inline-grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem; border-radius: .35rem;
    background: hsla(0 0% 100% / .06); color: var(--sy-fg-muted); font-size: 1rem; line-height: 1; transition: transform .15s ease;
}
.sy-pv-grupa-stavke[open] > summary::before { transform: rotate(90deg); }
.sy-pv-grupa-stavke > summary:hover::before { color: var(--sy-primary-tekst); }
.sy-pv-grupa-stavke > summary:focus-visible { outline: 2px solid var(--sy-primary); outline-offset: 2px; border-radius: .35rem; }
.sy-pv-grupa-ceka {
    margin-left: auto; padding: .08rem .55rem; border-radius: 999px; border: 1px solid hsla(42 95% 60% / .5); background: hsla(42 95% 60% / .12);
    color: var(--sy-yellow-tekst); font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
}
@media (prefers-reduced-motion: reduce) { .sy-pv-grupa-stavke > summary::before { transition: none; } }
/* Zbijene stavke (Damir 29.09.: „jedna stavka jedan red"): tabela „# · Opis · Količina · Cijena · Iznos", ćelija = polje + tanka traka
   pouzdanosti, znakovi i malo dugme ✓ za potvrdu TOG polja. Kolone su stalne širine, pa su i trake u koloni jedna ispod druge. Zaglavlje
   kolona kao na Pantheon stavkama (rečenična slova, blaga podloga). Na telefonu se ćelije slažu jedna ispod druge s natpisom kolone. */
.sy-pv-stavke-tabela { margin-top: .35rem; }
.sy-pv-stavke-tabela > thead > tr > th {
    text-transform: none; letter-spacing: .015em; font-size: .8rem; padding-top: .5rem; padding-bottom: .5rem;
    background: hsla(0 0% 100% / .035); vertical-align: middle;
}
.sy-pv-stavke-tabela > thead > tr > th:first-child { border-top-left-radius: .5rem; }
.sy-pv-stavke-tabela > thead > tr > th:last-child { border-top-right-radius: .5rem; }
.sy-pv-stavke-tabela > tbody > tr > td { vertical-align: top; padding-top: .4rem; padding-bottom: .4rem; }
.sy-pv-stavke-tabela > :is(thead, tbody) > tr > :nth-child(n+3) { width: 10.5rem; }
.sy-pv-stavka-rb { width: 2.2rem; color: var(--sy-fg-muted); font-variant-numeric: tabular-nums; }
.sy-pv-stavke-tabela > tbody > tr > td.sy-pv-stavka-rb { padding-top: .85rem; }
.sy-pv-celija { padding: .3rem .35rem; border-radius: .5rem; }
.sy-pv-celija.treba { background: hsla(42 95% 60% / .06); }
.sy-pv-celija.treba.kriticno { background: hsla(0 84% 62% / .07); }
.sy-pv-celija .sy-pv-znak { width: 1.3rem; height: 1.3rem; font-size: .7rem; }
/* Novi UI 5-6, završni pregled: ispravka vraćena poslije „U redu" na drugom polju (pregled.js) — vidi se da još nije sačuvana. */
.sy-pv-vrijednost.sy-pv-izmijenjeno { border-color: hsla(42 95% 60% / .7); }
@media (max-width: 767.98px) {
    .sy-pv-stavke-tabela > thead { display: none; }
    .sy-pv-stavke-tabela, .sy-pv-stavke-tabela > tbody, .sy-pv-stavke-tabela > tbody > tr, .sy-pv-stavke-tabela > tbody > tr > td { display: block; width: 100% !important; }
    .sy-pv-stavke-tabela > tbody > tr > td[data-naslov]:empty { display: none; }
    .sy-pv-stavke-tabela > tbody > tr > td[data-naslov]::before { content: attr(data-naslov); display: block; font-size: .72rem; color: var(--sy-fg-muted); }
    .sy-pv-stavka-red { border-bottom: 1px solid var(--sy-border); }
}
/* Red = mreža: naziv | vrijednost | pouzdanost | znakovi | dugme. Podloga tiho kaže šta traži ruku. Sve kolone su stalne širine
   (Damir 29.09.: „trake tačnosti jedna ispod druge") — dugme je bilo auto, a „Potvrdi" (71 px) i „Potvrdi ponovo" (126 px) su pomjerali
   kolonu vrijednosti, pa i traku, za 54 px od reda do reda. 8.75rem prima „Potvrdi ponovo"; dugme je poravnato desno. */
.sy-pv-red { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) 7.5rem 3.4rem 8.75rem; gap: .5rem 1rem; align-items: center; padding: .4rem .5rem; border-radius: .6rem; transition: background-color .15s ease; }
.sy-pv-red:hover { background: hsla(0 0% 100% / .035); }
.sy-pv-red.treba { background: hsla(42 95% 60% / .06); }
.sy-pv-red.treba.kriticno { background: hsla(0 84% 62% / .07); }
/* Novi UI 5-6 (22.10.2026., E11): „Provjeri" — naziv | vrijednost | razlog | „U redu"; „Sigurna polja" — naziv | vrijednost (bez okvira) | procenat.
   Razlog zamjenjuje traku pouzdanosti; „U redu" postane zeleno kad je polje označeno. */
.sy-pv-red.sy-pv-red-provjera { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(12rem, 1fr) 7rem; }
.sy-pv-red.sy-pv-red-sigurno { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) 4rem; padding-top: .15rem; padding-bottom: .15rem; }
.sy-pv-razlog { font-size: .8rem; line-height: 1.35; color: var(--sy-yellow-tekst); }
.sy-pv-red-provjera.potvrdjeno .sy-pv-razlog { color: var(--sy-fg-muted); }
.sy-pv-uredu { min-width: 5.5rem; }
.sy-pv-uredu.potvrdjeno { color: var(--sy-green-tekst); border-color: hsla(150 65% 52% / .55); background: hsla(150 65% 52% / .12); }
.sy-pv-procenat { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--sy-green-tekst); text-align: right; white-space: nowrap; }
.sy-pv-celija .sy-pv-procenat { display: block; }
.sy-pv-tiho { border-color: transparent; background: transparent; box-shadow: none; padding-left: .35rem; }
.sy-pv-tiho:hover { border-color: var(--sy-border); }
.sy-pv-tiho:focus { border-color: var(--bs-border-color); background: var(--bs-body-bg); }
.sy-pv-podnaslov { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .8rem; }
.sy-pv-sigurna-vise > summary { color: var(--sy-primary-tekst); cursor: pointer; padding: .3rem .5rem; }
.sy-pv-u-provjeri { color: var(--sy-yellow-tekst); }
.sy-pv-naziv { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.sy-pv-vrijednost, .sy-pv-tekst { font-variant-numeric: tabular-nums; }
.sy-pv-tekst { display: block; padding: .3rem 0; }
.sy-pv-pouzdanost { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--sy-fg-muted); white-space: nowrap; }
.sy-pv-pouzdanost > span { flex: 1 1 auto; height: .4rem; border-radius: 999px; background: hsla(0 0% 100% / .08); overflow: hidden; }
.sy-pv-pouzdanost > span > i { display: block; height: 100%; background: var(--sy-green); border-radius: 999px; }
.sy-pv-pouzdanost.nisko > span > i { background: var(--sy-yellow); }
.sy-pv-pouzdanost.kriticno > span > i { background: var(--sy-red); }
/* Znakovi stanja (Damir 29.09.: „kritično" i „ko je potvrdio" samo kao ikonica koja se prikaže na prelazak): krug s jednim znakom u
   boji stanja, riječi su u tooltipu i u imenu za čitač ekrana. ! kritično · ↓ ispod praga · ✓ potvrđeno · … čeka potvrdu. */
.sy-pv-znakovi { display: flex; gap: .3rem; align-items: center; }
.sy-pv-znak {
    display: inline-grid; place-items: center; flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%;
    border: 1px solid var(--sy-border-strong); color: var(--sy-fg-muted); font-size: .78rem; font-weight: 700; line-height: 1; cursor: help;
}
.sy-pv-znak.kriticno { color: var(--sy-red-tekst); border-color: hsla(0 84% 62% / .55); background: hsla(0 84% 62% / .12); }
.sy-pv-znak.nisko { color: var(--sy-yellow-tekst); border-color: hsla(42 95% 60% / .55); background: hsla(42 95% 60% / .12); }
.sy-pv-znak.ok { color: var(--sy-green-tekst); border-color: hsla(150 65% 52% / .5); background: hsla(150 65% 52% / .12); }
.sy-pv-dugme { text-align: right; }
.sy-pv-dugme .btn { white-space: nowrap; }
/* Traka radnji ostaje pri dnu ekrana dok se lista polja lista — „potvrdi sve" i „završi" su uvijek pri ruci. */
.sy-pv-traka { position: sticky; bottom: .5rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid var(--sy-border); border-radius: var(--sy-radius); background: hsla(220 13% 10% / .9); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 10px 30px hsla(220 13% 4% / .45); }
/* „Pantheon →" poslije završene provjere (Damir 29.09.): znak hrama (#i-pantheon) umjesto riječi — isti znak kao 🏛 uz ostalu Pantheon dugmad. */
.sy-pv-pantheon { display: inline-flex; align-items: center; gap: .4rem; }
.sy-pv-pantheon .sy-ik { width: 1.15rem; height: 1.15rem; vertical-align: 0; }
/* Alati u uglu panela polja (Damir 01.10.: „diskretno, samo ikonica bez teksta"): filter na polja koja čekaju ručnu potvrdu i komentari.
   Sjede u liniji naslova prve grupe; taj naslov (i naslov prve VIDLJIVE grupe kad filter sakrije prvu) ostavlja im mjesto desno. U miru su
   prigušen obris bez okvira; uključen filter dobija boju, blagu ispunu lijevka (fill-opacity se nasljeđuje kroz <use>) i broj polja. */
.sy-pv-polja { position: relative; }
.sy-pv-alati { position: absolute; top: .65rem; right: .7rem; z-index: 2; display: flex; gap: .15rem; }
.sy-pv-polja > .sy-pv-grupa-prva > .sy-pv-grupa-naslov { padding-right: 3rem; }
.sy-pv-alat {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 1.7rem; height: 1.7rem;
    padding: 0 .45rem; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: var(--sy-fg-muted);
    font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.sy-pv-alat .sy-ik { width: 1rem; height: 1rem; vertical-align: 0; fill-opacity: 0; transition: fill-opacity .15s ease; }
.sy-pv-alat:hover { color: var(--sy-fg); background: hsla(0 0% 100% / .06); }
.sy-pv-alat:focus-visible { outline: 2px solid var(--sy-primary); outline-offset: 2px; }
.sy-pv-alat .sy-kom-broj { top: -.3rem; right: -.35rem; box-shadow: 0 0 0 2px var(--sy-card); }
/* Komentari uz otvoren original (data-uz-original): panel stane lijevo od originala umjesto preko njega — komentar se piše gledajući original. */
@media (min-width: 992px) {
    body.sy-original-otvoren .sy-kom-panel { right: var(--sy-original-desno, 0px); }
}
.sy-pv-chat { margin-top: 1.25rem; }
.sy-pv-chat .sy-as-chat { min-height: 0; }
.sy-pv-chat .sy-as-poruke { max-height: 28rem; min-height: 5rem; }
.sy-pv-chat .sy-as-uvod { padding: .5rem .25rem; }
@media (max-width: 991.98px) {
    .sy-pv-red { grid-template-columns: 1fr auto; }
    .sy-pv-vrijednost-omot { grid-column: 1 / -1; }
    .sy-pv-dugme { text-align: left; }
    /* Novi UI 5-6: redovi s dvije klase nadjačavaju gornje pravilo, pa im treba svoje — na telefonu idu jedno ispod drugog: naziv,
       vrijednost i razlog preko cijele širine, pa „U redu" / procenat (inače kolona vrijednosti padne na 0 px). */
    .sy-pv-red.sy-pv-red-provjera, .sy-pv-red.sy-pv-red-sigurno { grid-template-columns: 1fr auto; }
    .sy-pv-red.sy-pv-red-provjera .sy-pv-razlog { grid-column: 1 / -1; }
}
[data-bs-theme="light"] .sy-pv-stanje { background: hsla(220 30% 10% / .04); }
[data-bs-theme="light"] .sy-pv-red:hover { background: hsla(220 30% 10% / .04); }
[data-bs-theme="light"] .sy-pv-grupa-stavke > summary::before { background: hsla(220 30% 10% / .06); }
[data-bs-theme="light"] .sy-pv-stavke-tabela > thead > tr > th { background: hsla(220 30% 10% / .04); }
[data-bs-theme="light"] .sy-pv-napredak, [data-bs-theme="light"] .sy-pv-pouzdanost > span { background: hsla(220 30% 10% / .1); }
[data-bs-theme="light"] .sy-pv-traka { background: hsla(0 0% 100% / .92); box-shadow: 0 10px 30px hsla(220 30% 25% / .15); }
[data-bs-theme="light"] .sy-pv-alat:hover { background: hsla(220 30% 10% / .05); }
[data-bs-theme="light"] .sy-pv-alat[aria-pressed="true"] { border-color: hsla(243 75% 56% / .4); }

/* Pretraživ izbor iz šifrarnika (Damir 12.09.) — v. izbor.js */
.sy-izbor { position: relative; }
.sy-izbor-lista { max-height: 16rem; overflow-y: auto; width: 100%; min-width: 14rem; }

/* Plutajuća lista (Damir 18.09.): u modalu „Uvezi PDF" se od spiska foldera vidio jedan red — ostalo
   je pokrivao modal-footer. Nije z-index nego ODSIJECANJE: .modal-dialog-scrollable daje
   .modal-body { overflow-y: auto } i .modal-content { overflow: hidden }, pa apsolutno pozicionirana
   lista završi izvan tog okvira (izmjereno 210 od 240 px). Isto siječe .table-responsive oko stavki.
   position: fixed je ne veže ni za jedan preljev — provjereno da nijedan predak modala nema
   transform/filter/contain, koji bi fiksiranu listu opet zarobili u modal. Koordinate i širinu u px
   računa izbor.js iz položaja unosa (width: 100% bi se kod fixed mjerio od ekrana!), a lista se na
   skrol zatvara jer fiksirana ne putuje s poljem. z-index kao .sy-kontekst — iznad modala (1055). */
.sy-izbor-lista.sy-izbor-plutajuca { position: fixed; --bs-dropdown-zindex: 1060; }
.sy-izbor-lista .dropdown-item { cursor: pointer; white-space: normal; }
.sy-izbor-lista .dropdown-item.active { background: var(--sy-primary-tekst); color: #fff; }   /* 1b: bijelo na #6C69FF je 4,1:1 */
.sy-izbor-visak { pointer-events: none; }
.sy-izbor-pao .sy-izbor-unos { background: hsla(0 80% 55% / .07); border-color: hsla(0 80% 55% / .35); cursor: not-allowed; }
.sy-pantheon-stavke .sy-izbor-lista { font-size: .875rem; }
/* U stavkama izbor stoji unutar .input-group uz dugme „+" — bez ovoga ne popuni širinu. */
.input-group > .sy-izbor { flex: 1 1 auto; width: 1%; }
.input-group > .sy-izbor > .sy-izbor-unos { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Kartica pregleda izmjena stavki (PR 3b, Damir 27.09., spec 2026-09-27 Dio 1; pantheon-pregled.js — chatbot, a u PR 5b i šabloni). Traka lijevo kaže
   stanje: žuto čeka „Primijeni", zeleno primijenjeno, sivo zastario, poništeno ili bez izmjena, crveno greška. */
.sy-pregled { align-self: stretch; max-width: 44rem; border: 1px solid var(--sy-border); border-left: 4px solid var(--bs-warning); border-radius: .5rem; padding: .55rem .75rem; background: var(--bs-body-bg); font-size: .85rem; line-height: 1.4; }
.sy-pregled[data-stanje="primijenjen"] { border-left-color: var(--bs-success); }
.sy-pregled[data-stanje="zastario"], .sy-pregled[data-stanje="ponisten"], .sy-pregled[data-stanje="bez-izmjena"] { border-left-color: var(--bs-secondary-color); }
.sy-pregled[data-stanje="greska"] { border-left-color: var(--bs-danger); }
.sy-pregled-naslov { font-weight: 600; margin-bottom: .3rem; }
.sy-pregled ul { margin: 0 0 .35rem; padding-left: 1.1rem; }
.sy-pregled-odbijena { color: var(--bs-secondary-color); }
.sy-pregled-stavka { margin-bottom: .3rem; }
.sy-pregled-oznaka { font-weight: 600; }
.sy-pregled-zelena { color: var(--bs-success-text-emphasis); }
.sy-pregled-jos > summary { cursor: pointer; color: var(--bs-link-color); margin-bottom: .25rem; }
.sy-pregled-zbir { margin: .35rem 0; padding-top: .35rem; border-top: 1px dashed var(--sy-border); }
.sy-pregled-upozorenja { color: var(--bs-warning-text-emphasis); }
.sy-pregled-dugmad { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .45rem; }

/* Chatbot na Pantheon formi (PR 3b, Damir 27.09., spec 2026-09-27 Dio 1): sklopivi panel ispod „Kontrola i upis"; mjehurići su oni AI asistenta (.sy-as-*).
   Damirov ekran je ~5100 px — kolona col-lg-4 tamo ima ~1.700 px, pa panel ima gornju granicu širine; na širem ekranu prati skrol stavki (sticky, ispod
   navigacije — kao .sy-admin-kolona). */
.sy-pantheon-chatbot { max-width: 44rem; }
.sy-pantheon-chatbot > summary { cursor: pointer; list-style: none; }
.sy-pantheon-chatbot > summary::-webkit-details-marker { display: none; }
.sy-pantheon-chatbot > summary::after { content: "▾"; content: "▾" / ""; margin-left: auto; transition: transform .15s; }
.sy-pantheon-chatbot:not([open]) > summary::after { transform: rotate(-90deg); }
.sy-pantheon-chatbot:not([open]) > summary { border-bottom: 0; }
.sy-pantheon-chatbot-razgovor { max-height: 50vh; min-height: 6rem; gap: .9rem; }
.sy-pantheon-chatbot-razmjena { display: flex; flex-direction: column; gap: .6rem; }
.sy-pantheon-chatbot .sy-as-poruka { white-space: pre-wrap; overflow-wrap: anywhere; }
.sy-pantheon-chatbot-neposlano { opacity: .55; text-decoration: line-through; }
.sy-pantheon-chatbot-sporedno { font-size: .8125rem; opacity: .8; }
@media (min-width: 992px) {
    .sy-pantheon-chatbot { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

/* ---------- Početna po ulozi (Novi UI korak 2, Damir 16.10.2026., spec §4; Suada B2/D1) ----------
   Kartice su bijele (--sy-card), samo PRVA na ekranu je indigo (Suada A1: jedno indigo dugme). Bez grafikona (D1 „UKLONI"). */
.sy-pocetna-zaglavlje { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.25rem; }
.sy-pocetna-entitet code { color: inherit; font-weight: 600; }
.sy-pocetna-sekcija { margin-bottom: 1.5rem; }
.sy-pocetna-prazno { padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.sy-pk {
    height: 100%; display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem;
    background: var(--sy-card); border: 1px solid var(--sy-border); border-radius: var(--sy-radius); color: var(--sy-fg);
}
/* Boja naslova se nasljeđuje od kartice: [data-bs-theme="light"] h2 (0,1,1) bi na indigo kartici dao taman tekst (3,4:1), pa dvije klase. */
.sy-pk .sy-pk-naslov { font-size: .95rem; font-weight: 600; margin: 0; color: inherit; }
.sy-pk-podnaslov { font-weight: 600; margin: 0; }
.sy-pk-broj { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.sy-pk-opis { color: var(--sy-fg-muted); font-size: .875rem; margin: 0; }
.sy-pk-iznos { color: var(--sy-fg-muted); font-size: .85rem; white-space: nowrap; }
.sy-pk-lista { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.sy-pk-lista li { display: flex; gap: .5rem; justify-content: space-between; }
/* Čip: u tamnoj temi tekst --sy-fg (indigo na indigo tintu bi bio 4,2:1), u svijetloj tamniji indigo (4,8:1). */
.sy-pk-cip {
    align-self: flex-start; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
    background: var(--sy-primary-soft); color: var(--sy-fg);
}
[data-bs-theme="light"] .sy-pk-cip { color: var(--sy-primary-tekst); }
.sy-pk-cip-paznja { background: color-mix(in srgb, var(--sy-yellow) 14%, transparent); color: var(--sy-yellow-tekst); }
.sy-pk-link { margin-top: auto; font-size: .875rem; font-weight: 500; }
.sy-pk-dugme { align-self: flex-start; margin-top: auto; background: var(--sy-primary-tekst); color: #fff; border: 1px solid var(--sy-primary-tekst); }
.sy-pk-dugme:hover, .sy-pk-dugme:focus-visible { background: color-mix(in srgb, var(--sy-primary-tekst) 85%, black); color: #fff; }
.sy-pk-dugme-drugo { align-self: flex-start; margin-top: auto; border: 1px solid var(--sy-border-strong); color: var(--sy-fg); background: transparent; }
/* Indigo kartica: bijeli tekst na --sy-indigo-kartica (svijetla 5,4:1, tamna ~8:1); dugme postaje bijelo s indigo tekstom. */
.sy-pk-indigo { background: var(--sy-indigo-kartica); border-color: var(--sy-indigo-kartica); color: #fff; }
.sy-pk-indigo .sy-pk-opis, .sy-pk-indigo .sy-pk-iznos { color: hsla(0 0% 100% / .88); }
.sy-pk-indigo a:not(.btn) { color: #fff; text-decoration: underline; }
.sy-pk-indigo .sy-pk-cip { background: hsla(0 0% 100% / .18); color: #fff; }
.sy-pk-indigo .sy-pk-dugme { background: #fff; border-color: #fff; color: var(--sy-indigo-kartica); }
.sy-pk-indigo .sy-pk-dugme:hover, .sy-pk-indigo .sy-pk-dugme:focus-visible { background: hsla(0 0% 100% / .9); color: var(--sy-indigo-kartica); }
.sy-pk-indigo .sy-pk-dugme-drugo { border-color: hsla(0 0% 100% / .7); color: #fff; }
.sy-pocetna-panel { padding: .9rem 1.1rem; }
.sy-pocetna-panel-zaglavlje { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.sy-pocetna-rokovi { list-style: none; padding: 0; margin: 0; }
.sy-pocetna-rokovi li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--sy-border); }
.sy-pocetna-rokovi li:first-child { border-top: 0; }
.sy-pocetna-tabela th { font-size: .8rem; font-weight: 600; color: var(--sy-fg-muted); }
.sy-pocetna-red { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--sy-fg-muted); font-size: .9rem; }

/* ---------- Donja traka na telefonu (Novi UI korak 3-1, Damir 17.10.2026.; Suada C2) ----------
   Ispod 768 px: Početna · Računi/Odobravanje · Novi račun, ikona iznad natpisa; stranica dobija donji razmak da traka ništa ne prekrije.
   Iznad 768 px je skriva d-md-none. */
.sy-donja-traka {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    background: var(--sy-card); border-top: 1px solid var(--sy-border);
}
.sy-donja-traka a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem .25rem;
    color: var(--sy-fg-muted); text-decoration: none; font-size: .78rem; font-weight: 500; border-radius: .6rem;
}
.sy-donja-traka a .sy-ik, .sy-donja-traka a .sy-ik-l { width: 1.4rem; height: 1.4rem; }
.sy-donja-traka a.aktivan { color: var(--sy-primary-tekst); }
.sy-donja-traka a:focus-visible { outline: 2px solid var(--sy-primary); outline-offset: -2px; }
@media (max-width: 767.98px) {
    body:has(> .sy-donja-traka) { padding-bottom: 4.5rem; }
    /* Završni pregled 3-1: ljepljive trake (Provjera polja „Potvrdi sve i završi", pravila, simulacija toka) i panel uploada se dižu iznad
       donje trake, inače dugme nestane ispod nje dok se skroluje. Plutajuće dugme chata je u chat.css. */
    body:has(> .sy-donja-traka) .sy-pv-traka,
    body:has(> .sy-donja-traka) .sy-pravila-traka,
    body:has(> .sy-donja-traka) .sy-sim-panel { bottom: calc(4.5rem + .5rem); }
    body:has(> .sy-donja-traka) .sy-upload-panel { bottom: calc(4.5rem + 1rem); }
}