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

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

.sy-korisnik {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .9rem .3rem .4rem;
    border: 1px solid var(--sy-border);
    border-radius: 999px;
    background: hsla(0 0% 100% / .04);
}

/* Priority+ traka (06.09.): ime korisnika ne širi traku (elipsa), desni blok se ne stiska, stavke koje ne
   stanu žive u dropdownu „Više" (isti stil kao admin meni). */
.sy-korisnik-ime { max-width: 11rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-desno { flex-shrink: 0; }
.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;
}

/* ---------- 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; }
/* Traka učitavanja (07.09.): fajl + kratko „Učitaj" + kamera, desno „Novi dokument"; na telefonu se slaže u redove. */
.sy-upload-fajl { flex: 1 1 16rem; max-width: 30rem; }
.sy-upload-dugme { white-space: nowrap; }
.sy-sken-kamera { line-height: 1; }
.sy-novi-dok-grupa .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    .sy-upload-fajl { flex-basis: 100%; max-width: none; }
    .sy-upload-forma > .ms-auto { margin-left: 0 !important; width: 100%; }
    .sy-novi-dok-grupa { width: 100%; }
    .sy-novi-dok-grupa .btn { flex: 1 1 auto; }
}
.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); 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) !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); 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); 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); }
.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; }
.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; }

.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"] {
    --sy-bg: hsl(220 30% 97%);
    --sy-bg-soft: hsl(220 25% 94%);
    --sy-card: #fff;
    --sy-card-hover: hsl(220 30% 98%);
    --sy-muted: hsl(220 20% 91%);
    --sy-border: hsl(220 16% 87%);
    --sy-border-strong: hsl(220 14% 77%);
    --sy-fg: hsl(220 25% 14%);
    --sy-fg-muted: hsl(220 10% 42%);
    --sy-primary: hsl(243 75% 56%);
    --sy-primary-soft: hsla(243 75% 56% / .1);
    --sy-cyan: hsl(200 95% 38%);
    --sy-purple: hsl(280 70% 48%);
    --sy-coral: hsl(14 85% 48%);
    --sy-green: hsl(150 65% 33%);
    --sy-odabran: hsl(145 55% 89%);       /* podloga odabranog reda u listi */
    --sy-yellow: hsl(38 92% 38%);
    --sy-red: hsl(0 72% 46%);

    --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);
    --bs-link-hover-color: hsl(243 75% 46%);
}

[data-bs-theme="light"] body {
    background:
        radial-gradient(60rem 40rem at 110% -20%, hsla(243 100% 65% / .06), transparent 60%),
        radial-gradient(50rem 34rem at -20% 115%, hsla(280 100% 60% / .05), transparent 60%),
        var(--sy-bg);
}

[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 { box-shadow: 0 0 14px hsla(243 75% 56% / .3); }
[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); }
[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);
}

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

/* 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 i alerti — tamniji tekst radi kontrasta na svijetlom */
[data-bs-theme="light"] .badge.bg-primary { color: hsl(243 75% 48%); }
[data-bs-theme="light"] .alert-success { color: hsl(150 65% 24%); }
[data-bs-theme="light"] .alert-danger { color: hsl(0 72% 38%); }
[data-bs-theme="light"] .alert-info { color: hsl(200 95% 28%); }
[data-bs-theme="light"] .alert-warning { color: hsl(38 92% 28%); }

/* 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 { opacity: .16; }
[data-bs-theme="light"] .sy-mrlja.m3 { opacity: .1; }

/* 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); }
[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); }
[data-bs-theme="light"] .sy-admin-meni .dropdown-item.aktivan { background: hsla(226 71% 50% / .16); color: var(--sy-primary); }

[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: linear-gradient(135deg, hsla(226 71% 55% / .14), hsla(268 75% 60% / .12));
    color: var(--sy-primary);
}

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

/* ---------- 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); }
.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);
    text-decoration: none;
    white-space: nowrap;
}
.sy-pm-sifra:hover { border-color: var(--sy-primary); color: var(--sy-primary); }
.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); 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); 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); }
.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);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.sy-predmet-chip:hover { border-color: var(--sy-primary); color: var(--sy-primary); }
.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 ===== */
.sy-napredna .form-label { font-size: .76rem; margin-bottom: .1rem; color: var(--sy-fg-muted); }
.sy-napredna { border-color: hsla(243 100% 71% / .35); }
.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); }
.sy-grupa-toggla { position: relative; z-index: 1; border: 1.5px solid var(--sy-grana-boja); background: var(--sy-bg); color: var(--sy-primary); 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); border-color: var(--sy-primary); color: #fff; }
.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; }
@media (min-width: 768px) {
    .sy-stablo-kolona { flex: 0 0 var(--sy-stablo-sirina, 25%); width: 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: var(--sy-stablo-sirina, 16.6667%); width: var(--sy-stablo-sirina, 16.6667%); }
}

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

/* ===== Drag & drop (03.09.): upload ispustanjem, premjestanje redova na folder u stablu ===== */
body.sy-drop-aktivan 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 (i kad su „na prelazak"). */
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; }
table.sy-prikaz-grid.sy-akcije-prelaz tbody tr .sy-akcije-sporedna { opacity: 1; }
/* 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; }
.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; }
/* 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); 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); }

/* ===== 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); }
.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.): glavna akcija + 👁 + prikvačene + „⋯" meni; 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; }
/* Akcije samo na prelazak (po korisniku): sporedne se sakriju, glavna i „⋯" ostaju; dodirni ekrani uvijek vide sve. */
table.sy-akcije-prelaz tbody tr .sy-akcije-sporedna { opacity: 0; transition: opacity .12s; }
table.sy-akcije-prelaz tbody tr:hover .sy-akcije-sporedna,
table.sy-akcije-prelaz tbody tr:focus-within .sy-akcije-sporedna,
table.sy-akcije-prelaz tbody tr.sy-red-fokus .sy-akcije-sporedna,
table.sy-akcije-prelaz tbody tr .sy-akcije-sporedna.show,
table.sy-akcije-prelaz tbody tr .sy-akcije-sporedna:has(.show) { opacity: 1; }
@media (hover: none) { table.sy-akcije-prelaz tbody tr .sy-akcije-sporedna { opacity: 1; } }
.sy-brze-akcije .form-check { margin-bottom: .1rem; }

/* 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; }
/* 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);
}
.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);
    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; }
.sy-pantheon-znak { width: 1.9rem; height: 1.9rem; flex: none; color: var(--sy-primary); }
.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); }
.sy-pantheon-stanje.nedostupno { background: hsla(0 84% 62% / .16); color: var(--sy-red); }

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

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

.sy-pantheon-jm, .sy-pantheon-pdv { white-space: nowrap; }
.sy-pantheon-iznos-spdv { 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;
}
[data-bs-theme="light"] .sy-stablo-red {
    --sy-doc-panel: #fff;
    --sy-doc-soft: #f3f5f9;
    --sy-doc-line: #dce1ea;
    --sy-doc-muted: #5c6576;
    --sy-doc-hover: #f0f2f8;
}
.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);
    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); }
.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;
}
.sy-stablo-red .sy-mrvice { padding: .45rem 0; line-height: 1.7; }
.sy-stablo-red .sy-upload-forma {
    padding: .85rem;
    border: 1px solid var(--sy-doc-line);
    border-radius: .75rem;
    background: var(--sy-doc-panel);
}
.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); 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); }
.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 :is(.sy-pretraga, .sy-upload-forma) .btn,
.sy-dokumenti-naslov > .btn {
    min-height: 2.65rem;
    padding: .6rem .9rem;
    font-size: .85rem;
    gap: .5rem;
}
.sy-stablo-red :is(.sy-pretraga, .sy-upload-forma) .btn-outline-secondary {
    background: var(--sy-doc-panel);
    color: var(--sy-fg);
    border-color: var(--sy-doc-line);
}
.sy-stablo-red :is(.sy-pretraga, .sy-upload-forma) .btn-outline-secondary:not(:disabled):hover {
    background: var(--sy-primary-soft);
    border-color: var(--sy-primary);
    color: var(--sy-primary);
}
.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;
}
.sy-stablo-red .sy-napredna-toggle[aria-expanded="true"] {
    background: var(--sy-primary-soft);
    color: var(--sy-primary);
    border-color: var(--sy-primary);
}
.sy-stablo-red .sy-pretraga > .d-flex > input[type="search"],
.sy-stablo-red .sy-upload-fajl { min-height: 2.65rem; border-radius: .6rem; }
.sy-stablo-red .sy-upload-fajl::file-selector-button {
    background: var(--sy-doc-soft);
    color: var(--sy-fg);
    border-right: 1px solid var(--sy-doc-line);
    padding: .65rem .9rem;
    font-weight: 500;
}

/* ===== 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); }
.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); }
.sy-up-red.sy-up-pao .sy-up-stanje { color: var(--sy-red); }
.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); }
@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, čipovi, ljepljiva traka radnji, original desno ===== */
/* Omotač nosi --sy-pv-desno (pregled.js = širina otvorenog panela) pa se sadržaj suzi umjesto da ga panel prekrije. */
.sy-pv-stranica { --sy-pv-desno: 0px; padding-right: var(--sy-pv-desno); transition: padding-right .22s ease; }
.sy-pv-zaglavlje { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start; justify-content: space-between; }
.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); }
.sy-pv-dok { font-weight: 600; max-width: 40rem; }
.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); border-color: hsla(243 100% 71% / .5); background: var(--sy-primary-soft); }
.sy-pv-stanje.provjereno { color: var(--sy-green); border-color: hsla(150 65% 52% / .5); background: hsla(150 65% 52% / .12); }
.sy-pv-stanje.greska { color: var(--sy-red); border-color: hsla(0 84% 62% / .5); background: hsla(0 84% 62% / .1); }
.sy-pv-original.active { background: var(--sy-primary-soft); border-color: var(--sy-primary); color: #fff; }
.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; }
.sy-pv-stavka { font-size: .78rem; font-weight: 600; color: var(--sy-fg-muted); padding: .55rem .5rem .1rem; }
/* Red = mreža: naziv | vrijednost | pouzdanost | čipovi | dugme. Podloga tiho kaže šta traži ruku. */
.sy-pv-red { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) 7.5rem minmax(9rem, 14rem) auto; 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); }
.sy-pv-red.potvrdjeno .sy-pv-naziv::before { content: "✓ "; color: var(--sy-green); }
.sy-pv-naziv { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.sy-pv-kljuc { font-size: .68rem; color: var(--sy-fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top: .1rem; }
.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); }
.sy-pv-cipovi { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.sy-pv-cip { font-size: .7rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--sy-border-strong); color: var(--sy-fg-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sy-pv-cip.kriticno { color: var(--sy-red); border-color: hsla(0 84% 62% / .5); background: hsla(0 84% 62% / .1); }
.sy-pv-cip.nisko { color: var(--sy-yellow); border-color: hsla(42 95% 60% / .5); background: hsla(42 95% 60% / .1); }
.sy-pv-cip.ok { color: var(--sy-green); border-color: hsla(150 65% 52% / .45); background: hsla(150 65% 52% / .1); }
.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); }
.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-stranica { padding-right: 0 !important; }   /* na uskom ekranu panel prekriva, sužavanje ne bi stalo */
    .sy-pv-red { grid-template-columns: 1fr auto; }
    .sy-pv-vrijednost-omot, .sy-pv-cipovi { grid-column: 1 / -1; }
    .sy-pv-dugme { text-align: left; }
}
[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-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-original.active { color: var(--sy-primary); }

/* 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; }
.sy-izbor-lista .dropdown-item { cursor: pointer; white-space: normal; }
.sy-izbor-lista .dropdown-item.active { background: var(--sy-primary); color: #fff; }
.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; }