/*
 * Dopune na Landrick temu — samo ono što tema nema.
 * Sve ostalo dolazi iz assets/tema/css/style.min.css.
 */

/* ---------- sidebar ---------- */
.sidebar-wrapper .sidebar-brand {
    padding: 18px 20px;
}

.sidebar-wrapper .sidebar-menu li > a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
}

.sidebar-wrapper .sidebar-menu li.active > a {
    color: #fff;
    background: rgba(47, 85, 212, .22);
    border-left: 3px solid #2f55d4;
}

.sidebar-menu-header small {
    font-size: 10px;
}

/* ---------- kartice sa brojkama ---------- */
.kpi-kartica {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background: #fff;
    padding: 18px;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}

.kpi-kartica:hover {
    box-shadow: 0 6px 20px rgba(60, 72, 88, .1);
    transform: translateY(-2px);
}

.kpi-kartica .kpi-ikona {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
}

.kpi-kartica .kpi-broj {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #161c2d;
}

.kpi-kartica .kpi-oznaka {
    font-size: 12px;
    color: #8492a6;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ---------- tabele ---------- */
.tabela-okvir {
    overflow-x: auto;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
}

.table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #8492a6;
    font-weight: 600;
    white-space: nowrap;
}

.table thead th a {
    color: inherit;
    text-decoration: none;
}

.table thead th a:hover {
    color: #2f55d4;
}

.table td {
    vertical-align: middle;
    font-size: 14px;
}

.red-upozorenje {
    background: #fff8e6 !important;
}

.red-greska {
    background: #fdeeee !important;
}

/* ---------- status tačka ---------- */
.tackica {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.tackica-ok      { background: #3cb37a; box-shadow: 0 0 0 3px rgba(60, 179, 122, .18); }
.tackica-lose    { background: #e43f52; box-shadow: 0 0 0 3px rgba(228, 63, 82, .18); }
.tackica-cekanje { background: #f1b561; box-shadow: 0 0 0 3px rgba(241, 181, 97, .18); }
.tackica-mirno   { background: #adb5bd; }

/* ---------- forme ---------- */
.form-label {
    font-weight: 500;
    font-size: 13px;
    color: #3c4858;
    margin-bottom: .35rem;
}

.obavezno {
    color: #e43f52;
}

.pomoc {
    font-size: 12px;
    color: #8492a6;
    margin-top: .25rem;
}

.greska-tekst {
    font-size: 12px;
    color: #e43f52;
    margin-top: .25rem;
}

.form-control.greska,
.form-select.greska {
    border-color: #e43f52;
}

/* ---------- token za uparivanje ---------- */
.token-kutija {
    font-family: Consolas, "Courier New", monospace;
    font-size: 17px;
    letter-spacing: 1.5px;
    background: #f6f8fc;
    border: 1px dashed #b6c2d9;
    border-radius: 8px;
    padding: 14px 16px;
    word-break: break-all;
}

/* ---------- paginacija (Core\Paginator) ---------- */
nav.pagination {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 12px 0 0;
}

nav.pagination a,
nav.pagination span {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 13px;
    color: #3c4858;
    text-decoration: none;
    background: #fff;
}

nav.pagination a:hover {
    border-color: #2f55d4;
    color: #2f55d4;
}

nav.pagination span.active {
    background: #2f55d4;
    border-color: #2f55d4;
    color: #fff;
    font-weight: 600;
}

nav.pagination span.gap {
    border: 0;
    background: transparent;
}

/* ---------- sitnice ---------- */
.oznaka-da { color: #3cb37a; font-weight: 600; }
.oznaka-ne { color: #8492a6; }

.tabela-slika {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
}

.prazna-lista {
    text-align: center;
    padding: 48px 20px;
    color: #8492a6;
}

.prazna-lista i {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
    opacity: .35;
}

.mono {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
}

.linija-log {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid #f1f3f7;
}

.napredak-tanko {
    height: 5px;
}

@media (max-width: 767.98px) {
    .kpi-kartica .kpi-broj { font-size: 22px; }
}

/* ---------- tipografija ----------
 * Landrick tema traži Nunito sa Google Fonts servera. Taj @import je uklonjen
 * (CSP zabranjuje strane resurse, a IP adrese korisnika ne šaljemo trećoj strani),
 * pa ovde definišemo sistemski font stek istog karaktera.
 */
body,
.sidebar-wrapper,
.btn,
.form-control,
.form-select,
h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", system-ui, -apple-system, sans-serif;
}

/* ---------- modal za potvrdu brisanja ---------- */
.potvrda-ikona {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px;
}

#modal-potvrda .modal-content {
    border-radius: 12px;
}

#modal-potvrda .modal-body {
    padding-bottom: .5rem;
}

/* ---------- zaglavlje strane: naslov levo, radnje desno, uredno prelamanje ---------- */
.zaglavlje-strane {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 4px;
}
.zaglavlje-naslov { min-width: 0; flex: 1 1 240px; }
.zaglavlje-akcije {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.zaglavlje-akcije:empty { display: none; }
.zaglavlje-akcije > *, .zaglavlje-akcije > form { margin: 0 !important; }

/* ---------- lista sajtova ---------- */
.sajt-celija { min-width: 210px; max-width: 320px; }
.sajt-celija .badge { font-size: 10.5px; font-weight: 600; }

/* ---------- grafikon bez podataka ---------- */
.grafikon-prazno {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: #8492a6;
    font-size: 13px;
    text-align: center;
    background: repeating-linear-gradient(0deg, transparent, transparent 39px, #f1f3f7 39px, #f1f3f7 40px);
    border-radius: 6px;
}
.grafikon-prazno i { font-size: 28px; color: #c5cdd8; }

/* ---------- čime je sajt napravljen (bedž) ---------- */
.bedz-builder { font-weight: 600; letter-spacing: .2px; }
.bedz-builder.builder-elementor { background: rgba(146, 0, 59, .1); color: #92003b; }
.bedz-builder.builder-wpbakery  { background: rgba(14, 165, 233, .12); color: #0b7fb3; }
.bedz-builder.builder-divi      { background: rgba(124, 58, 237, .1); color: #6d28d9; }
.bedz-builder.builder-gutenberg { background: rgba(47, 85, 212, .1); color: #2f55d4; }
.bedz-builder.builder-custom    { background: rgba(46, 202, 139, .12); color: #1f9d6c; }
.bedz-builder.builder-klasicno,
.bedz-builder.builder-bricks,
.bedz-builder.builder-beaver,
.bedz-builder.builder-oxygen    { background: #eef1f6; color: #5a6a85; }

/* ---------- uparivanje: čekanje na plugin ---------- */
.cekam-vezu {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(47, 85, 212, .06);
    color: #3c4858;
    font-size: 13px;
}
.cekam-vezu.povezano { background: rgba(46, 202, 139, .1); }

/* ---------- lista sa ikonama (objašnjenja u podešavanjima) ---------- */
.lista-koraka li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.lista-koraka li i { font-size: 18px; line-height: 1.2; }

/* ---------- AI: znanje o sajtu ---------- */
.znanje-lista li { padding: 2px 0; }
.beleske-lista li { padding: 6px 0; border-bottom: 1px dashed #e9ecef; }
.beleske-lista li:last-child { border-bottom: 0; }

/* ---------- modal za vraćanje iz bekapa ---------- */
#modal-vracanje .modal-content { border-radius: 12px; }

.potvrda-ikona-sm { width: 48px; height: 48px; font-size: 24px; }

.vracanje-izbor { display: grid; gap: 8px; }

.vracanje-opcija {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.vracanje-opcija:hover { border-color: #c5cff5; }
.vracanje-opcija input { margin-top: 3px; accent-color: #2f55d4; }
.vracanje-opcija strong { display: block; font-size: 14px; color: #161c2d; }
.vracanje-opcija small { display: block; color: #8492a6; }
.vracanje-opcija:has(input:checked) { border-color: #2f55d4; background: rgba(47, 85, 212, .05); }
.vracanje-opcija:has(input:disabled) { cursor: not-allowed; }

/* ---------- overlay za duge radnje u koracima (sinhronizacija, bekap) ---------- */
.radnja-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(22, 28, 45, .55);
    backdrop-filter: blur(2px);
}

.radnja-kutija {
    width: 100%;
    max-width: 460px;
    padding: 28px 28px 22px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    text-align: center;
}

.radnja-ikona { font-size: 44px; line-height: 1; margin-bottom: 12px; min-height: 48px; }
.radnja-ikona .spinner-border { width: 44px; height: 44px; border-width: 4px; }
.radnja-overlay.gotovo .radnja-ikona { color: #2eca8b; }
.radnja-overlay.greska .radnja-ikona { color: #e43f52; }
.radnja-napredak { height: 8px; }
.radnja-log { max-height: 150px; overflow: auto; text-align: left; }
.radnja-log li { padding: 2px 0 2px 18px; color: #6c757d; position: relative; }
.radnja-log li::before { position: absolute; left: 2px; }
.radnja-log li.ok::before { content: '✓'; color: #2eca8b; }
.radnja-log li.faza::before { content: '›'; }
.radnja-log li.greska { color: #e43f52; }
.radnja-log li.greska::before { content: '!'; }
body.radnja-otvorena { overflow: hidden; }

.medij-kartica {
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease;
    background: #fff;
}

.medij-kartica:hover {
    border-color: #2f55d4 !important;
    box-shadow: 0 4px 14px rgba(47, 85, 212, .15);
}

.medij-kartica.izabran {
    border: 2px solid #2f55d4 !important;
    box-shadow: 0 0 0 3px rgba(47, 85, 212, .2);
}

.medij-grid .medij-kartica .ratio img,
#mediji-grid .ratio img {
    object-fit: cover;
}

.el-polje label .badge {
    font-weight: 500;
    text-transform: none;
}

.meni-stavka {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.meni-stavka.podstavka {
    margin-left: 32px;
    border-left: 3px solid #cfd8e8;
}

.meni-stavka.za-brisanje {
    opacity: .45;
    text-decoration: line-through;
}

/* ---------- alert-light: Landrick ga boji belim tekstom na beloj podlozi ---------- */
.alert-light,
.alert-light a,
.alert-light .alert-link {
    color: #3c4858;
}
.alert-light {
    background-color: #f8f9fc;
    border-color: #e9ecef;
}
.alert-light a { text-decoration: underline; }

/* ---------- SEO: Google pregled ---------- */
.seo-pregled {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px 16px;
    background: #fff;
    font-family: arial, sans-serif;
    max-width: 640px;
}
.seo-pregled-url    { color: #202124; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.seo-pregled-naslov { color: #1a0dab; font-size: 18px; line-height: 1.3; margin: 2px 0; overflow-wrap: anywhere; }
.seo-pregled-opis   { color: #4d5156; font-size: 13px; line-height: 1.45; }

/* TinyMCE u kartici: bez duplog okvira, iste boje kao forma */
.tox-tinymce { border-radius: 6px !important; border-color: #dee2e6 !important; }

/* ---------- AI asistent ---------- */
.ai-okvir { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 520px; }
.ai-glava { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.ai-agent-izbor { width: auto; max-width: 230px; flex: 0 1 auto; }
.ai-poruke { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.ai-pocetak { padding: 48px 16px; }
.ai-predlog { white-space: normal; text-align: left; max-width: 100%; }
.ai-ucitava { padding: 32px 16px; color: var(--wpn-sivo); font-size: 13px; text-align: center; }

.ai-poruka { display: flex; flex-direction: column; margin-bottom: 14px; max-width: 85%; }
.ai-korisnik { margin-left: auto; align-items: flex-end; }
.ai-korisnik.saljem { opacity: .7; }
.ai-asistent { flex-direction: row; align-items: flex-start; gap: 10px; }
.ai-sadrzaj { min-width: 0; }
.ai-balon { padding: 10px 14px; border-radius: 12px; background: #f1f3f9; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-korisnik .ai-balon { background: #2f55d4; color: #fff; border-bottom-right-radius: 4px; }
.ai-asistent .ai-balon { border-bottom-left-radius: 4px; }
.ai-greska .ai-balon { background: #fdecef; color: #b02a37; }
.ai-balon p { margin: 0 0 8px; } .ai-balon p:last-child { margin-bottom: 0; }
.ai-balon ul, .ai-balon ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-balon code { font-size: 12.5px; background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; }
.ai-korisnik .ai-balon code { background: rgba(255,255,255,.2); }
.ai-kod { font-size: 12px; background: #1f2d3d; color: #e9ecef; padding: 10px 12px; border-radius: 6px; overflow: auto; margin: 4px 0; white-space: pre-wrap; max-height: 260px; }
.ai-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8ecfb; color: #2f55d4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.ai-vreme { font-size: 11px; color: #8492a6; margin-top: 3px; }
.ai-prilog img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid rgba(255,255,255,.6); }

/* zadatak: koraci uživo, posle završetka jedan red sa sažetkom */
.ai-zadatak { margin: 0 0 12px 42px; max-width: calc(85% - 42px); border: 1px solid var(--wpn-ivica); border-radius: 10px; background: #fbfcfe; }
.ai-zadatak-glava {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px;
    border: 0; border-radius: 10px; background: none; color: var(--wpn-sivo); font-size: 12.5px; text-align: left; cursor: pointer;
}
.ai-zadatak-glava:hover { color: var(--wpn-tekst); }
.ai-zadatak-glava:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47, 85, 212, .2); }
.ai-zadatak-strelica { margin-left: auto; transition: transform .15s ease; }
.ai-zadatak.zatvoren .ai-zadatak-strelica { transform: rotate(-90deg); }
.ai-zadatak.zatvoren .ai-koraci { display: none; }
.ai-zadatak.radi { border-color: rgba(47, 85, 212, .25); background: #fafbff; }
.ai-zadatak.radi .ai-zadatak-glava { color: var(--wpn-primary); font-weight: 600; }
.ai-koraci { display: flex; flex-direction: column; gap: 7px; padding: 2px 12px 11px; }

.ai-korak { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; }
.ai-korak-ikona {
    flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: #eef1f6; color: #5a6a85;
}
.ai-korak-ikona .spinner-border { width: 11px; height: 11px; border-width: 2px; }
.ai-korak-telo { flex: 1; min-width: 0; }
.ai-korak-naslov { color: var(--wpn-tekst); overflow-wrap: anywhere; }
.ai-korak-rezultat { color: var(--wpn-sivo); font-size: 12px; overflow-wrap: anywhere; }
.ai-korak-link { margin-left: 2px; font-size: 12px; }
.ai-korak-alat.radi .ai-korak-ikona { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }
.ai-korak-alat.ok .ai-korak-ikona { background: rgba(46, 202, 139, .13); color: #1f9d6b; }
.ai-korak-alat.izmena.ok .ai-korak-ikona { background: rgba(245, 159, 0, .15); color: #b86e00; }
.ai-korak-alat.greska .ai-korak-ikona { background: rgba(228, 96, 109, .13); color: #c0392b; }
.ai-korak-alat.greska .ai-korak-rezultat { color: #c0392b; }
.ai-korak-misao .ai-korak-ikona { background: #fff6dd; color: #b58100; }
.ai-misao { color: #6c7a91; font-size: 12.5px; font-style: italic; overflow-wrap: anywhere; }
.ai-misao summary { cursor: pointer; list-style: none; }
.ai-misao summary::-webkit-details-marker { display: none; }
.ai-misao-ceo { margin-top: 4px; }
.ai-korak-napomena .ai-korak-ikona { background: #eef1f6; color: #5a6a85; }
.ai-korak-napomena .ai-korak-telo p { margin: 0 0 4px; } .ai-korak-napomena .ai-korak-telo p:last-child { margin: 0; }
.ai-korak-detalji { margin-top: 2px; font-size: 12px; }
.ai-korak-detalji summary { display: inline; color: var(--wpn-sivo); cursor: pointer; list-style: none; }
.ai-korak-detalji summary::-webkit-details-marker { display: none; }
.ai-korak-detalji summary:hover { color: var(--wpn-primary); }
.ai-korak-oznaka { margin-top: 6px; color: var(--wpn-sivo); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }

/* kopija pre izmene: vraća se jednim klikom */
.ai-kopija { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 4px 2px 8px; border-radius: 6px; background: #f1f4fb; color: #4f5b73; font-size: 12px; }
.ai-kopija .btn-link { padding: 0 6px; font-size: 12px; font-weight: 600; text-decoration: none; }
.ai-kopija.vracena { padding: 3px 8px; background: rgba(46, 202, 139, .13); color: #1f7a54; }
.ai-kopija.greska { padding: 3px 8px; background: #fdecef; color: #b02a37; }

/* „Razmišljam…” */
.ai-radi { display: flex; align-items: center; gap: 8px; color: var(--wpn-primary); font-size: 12.5px; }
.ai-radi-tacke { display: inline-flex; justify-content: center; gap: 3px; width: 22px; }
.ai-radi-tacke i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; animation: ai-tacka 1.2s infinite ease-in-out; }
.ai-radi-tacke i:nth-child(2) { animation-delay: .15s; }
.ai-radi-tacke i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-tacka { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* obaveštenje u razgovoru (prekid veze, nedovršen zadatak) */
.ai-obavestenje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px 42px; padding: 8px 12px; border-radius: 8px; background: #f1f5ff; color: #2f3b5c; font-size: 13px; }
.ai-obavestenje > .uil { font-size: 16px; }
.ai-obavestenje.greska { background: #fdecef; color: #8c1c28; }

/* unos */
.ai-unos { display: flex; align-items: flex-end; gap: 8px; }
.ai-unos textarea { min-height: var(--wpn-visina); max-height: 220px; resize: none; line-height: 1.45; padding-top: 8px; padding-bottom: 8px; }
.ai-napomena { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; color: var(--wpn-sivo); font-size: 12px; }
.ai-oznaka { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px; background: #eef1f6; color: #4f5b73; }
.ai-prilozi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-prilog-cip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 8px; background: rgba(47, 85, 212, .08); color: var(--wpn-primary); font-size: 12px; }
.ai-prilog-cip img { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; }

/* razgovori sajta */
.ai-sesije { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.ai-sesija { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--wpn-tekst); font-size: 13px; text-decoration: none; }
.ai-sesija:hover { background: #f5f7fb; color: var(--wpn-tekst); }
.ai-sesija.active { background: rgba(47, 85, 212, .08); }
.ai-sesija.active .ai-sesija-naslov { color: var(--wpn-primary); font-weight: 600; }
.ai-sesija-stanje { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #d6dbe5; }
.ai-sesija.radi .ai-sesija-stanje { background: var(--wpn-primary); animation: ai-puls 1.2s infinite; }
.ai-sesija.novo .ai-sesija-stanje { background: #2eca8b; }
.ai-sesija.greska .ai-sesija-stanje { background: #f0ad4e; }
.ai-sesija-tekst { display: flex; flex-direction: column; min-width: 0; }
.ai-sesija-naslov { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-sesija-meta { color: var(--wpn-sivo); font-size: 11.5px; }
.ai-sesija.radi .ai-sesija-meta { color: var(--wpn-primary); }
.ai-sesija.novo .ai-sesija-meta { color: #1f9d6b; font-weight: 600; }
@keyframes ai-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
    .ai-radi-tacke i, .ai-sesija.radi .ai-sesija-stanje { animation: none; opacity: .7; }
}

@media (max-width: 991.98px) {
    /* telefon/tablet: kad se pomeri do razgovora, ceo stane na ekran (ispod gornje trake) */
    .ai-okvir { height: calc(100vh - 80px); height: calc(100dvh - 80px); min-height: 420px; }
}

@media (max-width: 575.98px) {
    .ai-glava { flex-wrap: wrap; padding: 8px 12px; }
    .ai-glava > .min-w-0 { flex-basis: calc(100% - 50px); }
    .ai-agent-izbor { flex: 1 1 auto; max-width: none; }
    .ai-poruke { padding: 14px 12px; }
    .ai-poruka { max-width: 100%; }
    .ai-avatar { width: 26px; height: 26px; font-size: 15px; }
    .ai-zadatak, .ai-obavestenje { max-width: 100%; margin-left: 0; }
}

.btn-close-sm { width: .5em; height: .5em; }

/* ---------- ikonica "i" sa objašnjenjem (zamena za tekst ispod polja) ---------- */
.info-ikona { color: #a4adbd; font-size: 15px; margin-left: 4px; cursor: help; vertical-align: -2px; line-height: 1; }
.info-ikona:hover, .info-ikona:focus { color: #2f55d4; outline: none; }
.tooltip { --bs-tooltip-max-width: 320px; --bs-tooltip-bg: #1f2d3d; --bs-tooltip-opacity: 1; font-size: 12.5px; }
.tooltip-inner { text-align: left; padding: 8px 11px; line-height: 1.45; }
.tooltip-inner code { color: #ffd479; background: transparent; padding: 0; font-size: 12px; }
.form-label .info-ikona { margin-left: 5px; }
h6 .info-ikona { font-size: 14px; }

/* ---------- beli blokovi i <code> unutar obojenih alert-ova (Landrick daje alert-u beli tekst) ---------- */
.alert .bg-white, .alert .bg-light { color: #3c4858; }
.alert code { color: inherit; background: rgba(255, 255, 255, .22); padding: 1px 5px; border-radius: 3px; }
.alert .bg-white code, .alert .bg-light code { background: rgba(0, 0, 0, .06); }
/* dugmad unutar obojenih alert-a (zelena/crvena podloga): bela dugmad umesto „soft” varijanti (one imaju !important u temi) */
.alert .btn-light { background: #fff; border-color: #fff; color: #3c4858; }
.alert .btn-light:hover { background: #f8f9fc; border-color: #f8f9fc; color: #161c2d; }
.alert .btn-light.text-danger, .alert .btn-light.text-danger:hover { color: #e43f52 !important; }

/* Bekapi: sajtovi bez svežeg bekapa, sa dugmetom po sajtu */
.lista-bez-bekapa {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 290px;
    overflow-y: auto;
}

.lista-bez-bekapa li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px dashed #e9ecef;
}

.lista-bez-bekapa li:last-child {
    border-bottom: 0;
}

.lista-bez-bekapa li > div {
    flex: 1 1 auto;
    min-width: 0;
}

.kako-bekap .col-md-4 {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.kako-bekap i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #2f55d4;
    background: rgba(47, 85, 212, .1);
}

/* Otpremanje: cela zona je polje za fajl (klik ili prevlačenje) */
.otpremi-zona {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.1rem .75rem;
    text-align: center;
    border: 1.5px dashed #ced4da;
    border-radius: 8px;
    background: #f8f9fc;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.otpremi-zona:hover,
.otpremi-zona:focus-within {
    border-color: #2f55d4;
    background: rgba(47, 85, 212, .04);
}

.otpremi-zona input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.otpremi-zona > i {
    display: block;
    font-size: 26px;
    line-height: 1;
    color: #2f55d4;
    margin-bottom: .35rem;
}

.otpremi-zona .izabrani-fajl:not(:empty) {
    margin-top: .4rem;
}

.otpremi-zona-sm {
    padding: .55rem .5rem;
}

/* Meniji: stavka označena za brisanje se vidi pre čuvanja */
.meni-stavka:has(input[data-oznaci-brisanje]:checked) {
    background: #fff5f5;
    border-color: #f5c2c7 !important;
}

.meni-stavka:has(input[data-oznaci-brisanje]:checked) input[type="text"] {
    text-decoration: line-through;
    color: #9a9a9a;
}

/* =====================================================================
 |  DIZAJN SISTEM — jedne mere za celu aplikaciju
 |
 |  Tema (Landrick) daje poljima, padajućim listama i dugmadima različite
 |  visine (40 / 38 / 42 px) i fontove (14 / 16 px), pa redovi filtera i
 |  zaglavlja nisu bili u ravni. Ovde se sve svodi na dve visine (38 i 32 px),
 |  isti font i iste radijuse; kartice, tabele i pločice dele iste ivice i senke.
 ===================================================================== */
:root {
    --wpn-primary: #2f55d4;
    --wpn-tekst: #161c2d;
    --wpn-tekst-2: #3c4858;
    --wpn-sivo: #8492a6;
    --wpn-ivica: #e6e9f0;
    --wpn-ivica-jaca: #d6dbe5;
    --wpn-pozadina: #f4f6fa;
    --wpn-radijus: 12px;
    --wpn-radijus-sm: 8px;
    --wpn-senka: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --wpn-senka-jaca: 0 8px 24px rgba(16, 24, 40, .08);
    --wpn-visina: 38px;
    --wpn-visina-sm: 32px;
}

body {
    font-size: 14px;
    color: var(--wpn-tekst-2);
    -webkit-font-smoothing: antialiased;
}

.page-content.bg-light,
.page-wrapper .page-content {
    background: var(--wpn-pozadina) !important;
}

/* tema seče vodoravni višak sa overflow-x: hidden, a to od .page-content pravi
   kontejner za skrolovanje koji se ne skroluje — position: sticky u sadržaju
   (folderi medija, traka „Sačuvaj meni”) tada ne radi. clip seče isto, a sticky
   se ravna prema prozoru. */
@supports (overflow: clip) {
    .page-wrapper .page-content { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 { color: var(--wpn-tekst); }

/* ---------- polja ---------- */
.form-control,
.form-select {
    font-size: 14px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: var(--wpn-radijus-sm);
    border-color: var(--wpn-ivica-jaca);
    color: var(--wpn-tekst);
}

.form-control:not(textarea):not([type="file"]):not([type="color"]),
.form-select {
    height: var(--wpn-visina);
}

.form-control-sm,
.form-select-sm {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.form-control.form-control-sm:not(textarea):not([type="file"]):not([type="color"]),
.form-select.form-select-sm {
    height: var(--wpn-visina-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: #8ea3ec;
    box-shadow: 0 0 0 3px rgba(47, 85, 212, .14);
}

.form-control::placeholder { color: #a3adbd; }

/* ---------- dugmad ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--wpn-visina);
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    border-radius: var(--wpn-radijus-sm);
    white-space: nowrap;
}

.btn-sm {
    min-height: var(--wpn-visina-sm);
    padding: 5px 12px;
    font-size: 13px;
    line-height: 20px;
}

.btn-lg {
    min-height: 46px;
    padding: 11px 22px;
    font-size: 15px;
}

.btn.btn-icon {
    width: var(--wpn-visina);
    height: var(--wpn-visina);
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
}

.btn.btn-icon.btn-sm {
    width: var(--wpn-visina-sm);
    height: var(--wpn-visina-sm);
}

.btn .uil { font-size: 1.15em; line-height: 1; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(47, 85, 212, .25) !important; }
.btn.w-100 { display: flex; }

/* tekstualni „link” dugmići ne smeju da dobiju visinu dugmeta */
.btn-link { min-height: 0; padding: 0; font-weight: 600; }

/* ---------- oznake ---------- */
.badge {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    padding: 4px 8px;
}

/* ---------- kartice ---------- */
.card { border-radius: var(--wpn-radijus); }

.card.border-0.shadow,
.card.shadow {
    border: 1px solid var(--wpn-ivica) !important;
    box-shadow: var(--wpn-senka) !important;
}

.card > .card-body { padding: 20px; }
.card > .card-body > h6:first-child { font-size: 15px; font-weight: 600; }

/* naslov kartice levo, radnja desno — u istoj liniji */
.kartica-zaglavlje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--wpn-visina-sm);
    margin-bottom: 14px;
}

.kartica-zaglavlje h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

/* ---------- zaglavlje strane ---------- */
.zaglavlje-strane { margin-bottom: 18px; }
.zaglavlje-naslov h5 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.zaglavlje-naslov h6 { font-size: 13px; font-weight: 500; color: var(--wpn-sivo) !important; }

/* ---------- tabele ---------- */
.table { color: var(--wpn-tekst-2); --bs-table-hover-bg: #f7f9fc; }
.table > :not(caption) > * > * { border-bottom-color: #edf0f5; }
.table td, .table th { font-variant-numeric: tabular-nums; }

.table thead th {
    font-size: 11.5px;
    letter-spacing: .04em;
    background: #f8f9fc;
    border-bottom: 1px solid var(--wpn-ivica);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

/* tabela „oznaka — vrednost” u karticama (podaci o sajtu, podešavanja) */
.tabela-podaci td { padding: 9px 0 !important; vertical-align: middle; }
.tabela-podaci td:first-child { color: var(--wpn-sivo); width: 42%; padding-right: 12px !important; }
.tabela-podaci td:last-child { text-align: right; color: var(--wpn-tekst); }

/* ---------- KPI pločice (partials/kpi) ---------- */
.kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 88px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus);
    box-shadow: var(--wpn-senka);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

a.kpi:hover {
    border-color: #ccd6f6;
    box-shadow: var(--wpn-senka-jaca);
    transform: translateY(-1px);
}

.kpi .kpi-ikona,
.kpi-kartica .kpi-ikona {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 19px;
}

.kpi .kpi-tekst {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi .kpi-oznaka,
.kpi .kpi-broj,
.kpi .kpi-dopuna {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi .kpi-oznaka {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wpn-sivo);
}

.kpi .kpi-broj {
    font-size: clamp(18px, 1.45vw, 23px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wpn-tekst);
    font-variant-numeric: tabular-nums;
}

.kpi .kpi-dopuna { font-size: 12px; color: var(--wpn-sivo); }

/* pločica sa malim dugmetom u uglu („+ nova strana”) */
.kpi-omot { position: relative; height: 100%; }
.kpi-omot .kpi { padding-right: 48px; }

.kpi-dugme {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(47, 85, 212, .08);
    color: var(--wpn-primary);
    font-size: 16px;
    text-decoration: none;
    transition: background-color .15s;
}

.kpi-dugme:hover { background: var(--wpn-primary); color: #fff; }

/* stare kpi-kartica pločice: iste ivice i visina kao nove */
.kpi-kartica {
    border-color: var(--wpn-ivica);
    border-radius: var(--wpn-radijus);
    box-shadow: var(--wpn-senka);
    min-height: 92px;
    padding: 16px 18px;
}

.kpi-kartica .kpi-oznaka { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.kpi-kartica .kpi-broj { font-size: clamp(18px, 1.45vw, 23px); font-variant-numeric: tabular-nums; }

/* ---------- kartice (tabovi): sadržaj sajta, podešavanja, detalj sajta ----------
 * „Podvučeni” stil: tekst sa ikonicom bez okvira, aktivna kartica dobija
 * plavu liniju i plav tekst, ostale su mirne sive. Jedan red uvek u ravni
 * (na uskom ekranu se skroluje vodoravno, bez prelamanja), linija ispod reda
 * deli kartice od sadržaja.
 */
.tabovi-traka { margin-bottom: 20px; }

.nav.tabovi {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* linija ispod reda; aktivna linija se crta preko nje */
    box-shadow: inset 0 -1px 0 var(--wpn-ivica);
}

.nav.tabovi::-webkit-scrollbar { display: none; }

.tabovi .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #64708a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.tabovi .nav-link .uil {
    font-size: 17px;
    line-height: 1;
    color: #a3adbf;
    transition: color .15s ease;
}

/* linija aktivne kartice (::before — ::after je strelica padajućeg menija) */
.tabovi .nav-link::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background-color .15s ease;
}

.tabovi .nav-link:hover { color: var(--wpn-tekst); background: rgba(47, 85, 212, .04); }
.tabovi .nav-link:hover .uil { color: #6f7d99; }
.tabovi .nav-link:hover::before { background: #d3dbf2; }

.tabovi .nav-link.active,
.tabovi .nav-link.active:hover { color: var(--wpn-primary); background: transparent; }
.tabovi .nav-link.active .uil { color: var(--wpn-primary); }
.tabovi .nav-link.active::before { background: var(--wpn-primary); }

.tabovi .nav-link:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); outline-offset: -4px; }

.tabovi .dropdown-toggle::after { margin-left: 0; opacity: .55; }
.tabovi .dropdown-toggle.show { color: var(--wpn-tekst); }

/* padajući meni „Više” */
.tabovi-traka .dropdown-menu,
.tabovi .dropdown-menu {
    min-width: 240px;
    padding: 6px;
    border-radius: var(--wpn-radijus-sm);
    box-shadow: var(--wpn-senka-jaca) !important;
}

.tabovi .dropdown-item { border-radius: 6px; padding: 8px 10px; font-size: 13.5px; }

/* kartice u vrhu kartice (detalj sajta): linija ide od ivice do ivice */
.nav.tabovi.tabovi-u-kartici {
    margin: -8px -20px 22px;
    padding: 0 12px;
}

/* broj uz karticu ili stavku menija */
.nav-broj {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #eef1f6;
    color: #64708a;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.nav-broj.paznja { background: rgba(241, 181, 97, .22); color: #a5620b; }
.tabovi .nav-link.active .nav-broj { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }
.cipovi .nav-broj,
.dropdown-item .nav-broj { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }

@media (max-width: 767.98px) {
    .tabovi .nav-link { padding: 0 10px; }
    .nav.tabovi.tabovi-u-kartici { margin: -8px -16px 18px; }
}
/* ---------- „Ažurirano pre X · Osveži” (partials/svezina) ---------- */
.svezina {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--wpn-visina-sm);
    padding: 0 10px;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    font-size: 12.5px;
    color: var(--wpn-sivo);
    white-space: nowrap;
}

.svezina .uil { font-size: 14px; }
.svezina.osvezavam .uil { animation: wpn-okret 1s linear infinite; color: var(--wpn-primary); }
.svezina.neuspelo .uil { color: #e43f52; }

.svezina-dugme {
    border: 0;
    background: none;
    padding: 0 0 0 8px;
    margin-left: 2px;
    border-left: 1px solid var(--wpn-ivica);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wpn-primary);
    text-decoration: none;
    cursor: pointer;
}

.svezina-dugme:hover { text-decoration: underline; }

@keyframes wpn-okret { to { transform: rotate(360deg); } }

/* ---------- traka učitavanja (klik na link → odmah vidljiv odziv) ---------- */
.traka-ucitavanja {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #2f55d4, #7b96ff);
    transition: opacity .2s ease;
}

.traka-ucitavanja.aktivna {
    opacity: 1;
    animation: wpn-traka 10s cubic-bezier(.08, .7, .2, 1) forwards;
}

@keyframes wpn-traka {
    0%   { transform: scaleX(0); }
    8%   { transform: scaleX(.3); }
    40%  { transform: scaleX(.7); }
    100% { transform: scaleX(.94); }
}

body.ucitavam .layout-specing {
    opacity: .6;
    transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .traka-ucitavanja.aktivna { animation: none; transform: scaleX(.6); }
    .svezina.osvezavam .uil { animation: none; }
    a.kpi:hover, .kpi-kartica:hover { transform: none; }
}

:focus-visible { outline: 2px solid rgba(47, 85, 212, .5); outline-offset: 2px; }

/* mreža pločica: koliko god ih ima, iste su širine i u ravni (najmanje 164 px — pet staje u red i uz otvoren meni) */
.kpi-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
    gap: 16px;
}

/* čipovi: kompaktni linkovi sa brojem (sporedni tipovi sadržaja, meniji) */
.cipovi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cipovi-naslov { font-size: 12px; font-weight: 600; color: var(--wpn-sivo); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }

.cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--wpn-visina-sm);
    padding: 0 10px;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    color: var(--wpn-tekst-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.cip:hover { border-color: #ccd6f6; background: #f7f9ff; color: var(--wpn-tekst); }
.cip .uil { font-size: 15px; color: var(--wpn-sivo); }
.cip-dopuna { font-size: 12px; color: var(--wpn-sivo); }

/* traka za radnje nad izabranim redovima (lista sajtova) */
.traka-izbora {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--wpn-ivica-jaca);
    border-radius: var(--wpn-radijus-sm);
    background: #f8f9fc;
}

/* meni „Keš” (strana sajta, Alati): sav keš ili opcija keš plugina */
.kes-meni { min-width: 280px; max-width: 340px; padding: 6px; border-radius: var(--wpn-radijus-sm); box-shadow: var(--wpn-senka-jaca) !important; }
.kes-meni form { margin: 0; }
.kes-meni .dropdown-header { padding: 6px 10px 2px; color: var(--wpn-sivo); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.kes-stavka { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; white-space: normal; }
.kes-stavka > .uil { margin-top: 1px; color: #b86e00; font-size: 16px; }
.kes-opis { display: block; color: var(--wpn-sivo); font-size: 12px; }
.kes-napomena { padding: 4px 10px 6px; color: var(--wpn-sivo); font-size: 12px; }

/* Kopije pre izmena (strana Kopije i tab sajta) */
.traka-izbora:has(+ .tabela-okvir) { margin-bottom: 12px; }
.tabela-kopija .kol-izbor { width: 36px; }
.tabela-kopija .kopija-sta { min-width: 220px; max-width: 360px; }

/* Bekapi: „kako rade bekapi” kao uspravna lista */
.kako-bekap { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.kako-bekap li { display: flex; gap: 12px; align-items: flex-start; }
.kako-bekap li i {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--wpn-primary); background: rgba(47, 85, 212, .08);
}
.lista-bez-bekapa { max-height: 260px; }

/* ---------- obaveštenja: tonirana pozadina umesto punih boja teme ----------
 * Landrick boji alert punom bojom sa belim tekstom — glasno i teško za čitanje
 * dužeg teksta. Ovde: svetla pozadina, tamni tekst iste boje, tanka ivica.
 */
.alert {
    border: 1px solid transparent;
    border-radius: var(--wpn-radijus-sm);
    font-size: 14px;
    padding: 12px 16px;
}

.alert.alert-warning { background: #fff7e8; border-color: #fbe0ad; color: #7a4a00; }
.alert.alert-danger  { background: #fdeef0; border-color: #f6c6cd; color: #8c1d2c; }
.alert.alert-success { background: #eaf8f1; border-color: #bfe8d3; color: #145c3c; }
.alert.alert-info    { background: #e9f4fd; border-color: #bddcf4; color: #0c4e7a; }
.alert.alert-primary { background: #edf1fd; border-color: #cdd7f8; color: #22409c; }

.alert.alert-warning .uil { color: #d68a00; }
.alert.alert-danger .uil  { color: #e43f52; }
.alert.alert-success .uil { color: #2eb67d; }
.alert.alert-info .uil    { color: #1b8fd6; }

.alert a:not(.btn),
.alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.alert code,
.alert .bg-white code,
.alert .bg-light code { color: inherit; background: rgba(0, 0, 0, .06); }

.alert .text-muted { color: inherit !important; opacity: .75; }
.alert .btn-close { filter: none; opacity: .5; }

/* pretraga u gornjoj traci: tema crta lupu fontom Material Design ikona, koji
   aplikacija ne učitava (~300 KB zbog jedne ikonice) — ista lupa iz unicons-a */
#search .searchform:after {
    content: "\e99a";
    font-family: "unicons-line";
    font-size: 17px;
    color: var(--wpn-sivo);
    top: 9px;
    right: 12px;
}

#search .searchform input[type=text] { height: 36px; opacity: 1; }

/* ---------- Elementor: „Uredi sa Elementorom” (boja Elementora) ---------- */
.btn-elementor { background: #92003b; border-color: #92003b; color: #fff; }
.btn-elementor:hover,
.btn-elementor:focus { background: #7a0032; border-color: #7a0032; color: #fff; }

.btn-soft-elementor { background: rgba(146, 0, 59, .08); border-color: transparent; color: #92003b; }
.btn-soft-elementor:hover,
.btn-soft-elementor:focus { background: #92003b; border-color: #92003b; color: #fff; }

/* poziv u uređivaču umesto sadržaja Elementor strane */
.elementor-poziv {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(146, 0, 59, .18);
    border-radius: var(--wpn-radijus);
    background: rgba(146, 0, 59, .035);
}

.elementor-poziv-ikona {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    color: #92003b;
    background: rgba(146, 0, 59, .1);
}

@media (max-width: 767.98px) {
    .elementor-poziv { flex-wrap: wrap; }
    .elementor-poziv .btn { width: 100%; }
}

/* red kartica koji se skroluje: bleđenje na ivici gde ima još kartica */
.nav.tabovi.preliva-desno { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.nav.tabovi.preliva-levo { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
.nav.tabovi.preliva-levo.preliva-desno { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* =====================================================================
 |  Skladišta bekapa (Podešavanja → Bekap): tabela + modal za dodavanje
 ===================================================================== */
.min-w-0 { min-width: 0; }

.skladiste-red { display: flex; align-items: center; gap: 12px; min-width: 220px; }

.skladiste-ikona,
.provajder-znak {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 19px;
    line-height: 1;
    background: #eef1f6;
    color: #5a6a85;
}

/* boja po provajderu: prepoznaje se i bez čitanja naziva */
.skladiste-google_drive { background: rgba(30, 142, 62, .1); color: #1e8e3e; }
.skladiste-onedrive     { background: rgba(3, 100, 184, .1); color: #0364b8; }
.skladiste-dropbox      { background: rgba(0, 97, 254, .1); color: #0061fe; }
.skladiste-s3           { background: rgba(236, 114, 17, .12); color: #c45d0c; }
.skladiste-ftp          { background: rgba(100, 112, 138, .12); color: #4f5b73; }
.skladiste-lokalno      { background: #eef1f6; color: #5a6a85; }
.skladiste-novo         { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }

/* AI agenti (Podešavanja → AI): boja po provajderu */
.agent-anthropic   { background: rgba(217, 119, 87, .13); color: #b4532f; }
.agent-openai      { background: rgba(16, 163, 127, .11); color: #0b7d61; }
.agent-deepseek    { background: rgba(77, 107, 254, .11); color: #3d58e0; }
.agent-prilagodjen { background: #eef1f6; color: #4f5b73; }
.agent-novi        { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }
.agent-provajderi  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agent-uputstvo    { max-width: 320px; }
.tabela-agenata .skladiste-red .min-w-0 { max-width: 280px; }

@media (max-width: 575.98px) {
    .agent-provajderi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-agent .modal-header,
    .modal-agent .modal-body,
    .modal-agent .modal-footer { padding-left: 16px; padding-right: 16px; }
}

.tabela-skladista > tbody > tr > td { padding-top: 12px; padding-bottom: 12px; }
.skladiste-koristi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* duga poruka greške: dva reda, cela u title */
.skladiste-greska {
    display: -webkit-box;
    max-width: 220px;
    margin-top: 4px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 12px;
    line-height: 1.35;
    color: #c03a2b;
    white-space: normal;
}

.skladiste-povezi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #b45309;
}

.skladiste-povezi:hover { color: #92400e; text-decoration: underline !important; }
.skladiste-radnje { display: inline-flex; align-items: center; gap: 4px; }
.skladiste-radnje form { margin: 0; }
.skladiste-radnje .dropdown-menu { min-width: 230px; padding: 6px; border-radius: var(--wpn-radijus-sm); box-shadow: var(--wpn-senka-jaca) !important; }
.skladiste-radnje .dropdown-item { border-radius: 6px; padding: 8px 10px; font-size: 13.5px; }

.skladiste-prazno {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--wpn-ivica-jaca);
    border-radius: var(--wpn-radijus-sm);
    background: #fafbfd;
}

/* ---------- modal ---------- */
.modal-skladiste .modal-content { border-radius: var(--wpn-radijus); }
.modal-skladiste .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--wpn-ivica); }
.modal-skladiste .modal-title { font-size: 17px; font-weight: 700; }
.modal-skladiste .modal-body { padding: 20px 22px; }
.modal-skladiste .modal-footer { padding: 14px 22px; border-top: 1px solid var(--wpn-ivica); gap: 8px; }
.modal-skladiste .modal-footer > * { margin: 0; }
.modal-skladiste fieldset { min-width: 0; }

.provajder-izbor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.provajder-opcija {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 12px 6px 10px;
    border: 1px solid var(--wpn-ivica-jaca);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.provajder-opcija input { position: absolute; opacity: 0; pointer-events: none; }
.provajder-opcija .provajder-ime { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--wpn-tekst); }
.provajder-opcija:hover { border-color: #c5cff5; }
.provajder-opcija:has(input:checked) { border-color: var(--wpn-primary); background: rgba(47, 85, 212, .04); box-shadow: 0 0 0 3px rgba(47, 85, 212, .12); }
.provajder-opcija:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(47, 85, 212, .28); }
.provajder-opcija:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.provajder-opcija:has(input:disabled:checked) { opacity: 1; }
.provajder-izbor.greska .provajder-opcija { border-color: #e4606d; }

.skladiste-uputstvo {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--wpn-radijus-sm);
    background: #f6f8fc;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--wpn-tekst-2);
}

.skladiste-uputstvo > i { font-size: 17px; line-height: 1.3; color: var(--wpn-primary); }

.skladiste-sekcija { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wpn-ivica); }
.skladiste-sekcija-naslov { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wpn-sivo); }

.izbor-partnera { max-height: 204px; overflow-y: auto; border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); }
.izbor-partnera-red { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border-bottom: 1px solid #f0f2f6; cursor: pointer; }
.izbor-partnera-red:last-child { border-bottom: 0; }
.izbor-partnera-red:hover { background: #f8f9fc; }
.izbor-partnera-red:has(input:checked) { background: rgba(47, 85, 212, .04); }

.lista-uputstva li { margin-bottom: 4px; }

/* ---------- strana sajta: ažuriranje sa zaštitom, automatsko ažuriranje, pristup serveru ---------- */
.auto-traka {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px;
    border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); background: #fafbfd;
}
.auto-traka.ukljuceno { border-color: rgba(46, 202, 139, .35); background: rgba(46, 202, 139, .05); }

.azur-traka { margin-bottom: 12px; padding: 12px 14px; border-radius: var(--wpn-radijus-sm); background: #f6f8fc; }
.azur-zastita { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; color: #4f5b73; font-size: 13px; line-height: 1.45; }
.azur-zastita > .uil { flex: 0 0 auto; color: #1f9d6b; font-size: 18px; line-height: 1.1; }
.azur-opcije { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

/* overlay ažuriranja: komponenta po komponenta */
.radnja-overlay.siroka .radnja-kutija { max-width: 580px; }
.radnja-stavke { margin-bottom: 12px; text-align: left; }
.azur-lista { max-height: 260px; overflow: auto; border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); }
.azur-stavka { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f0f2f6; font-size: 13px; }
.azur-stavka:last-child { border-bottom: 0; }
.azur-stavka > .uil { flex: 0 0 auto; font-size: 18px; }
.azur-stavka.azur-radi, .azur-stavka.azur-provera { background: #f6f8ff; }
.azur-naziv { overflow: hidden; color: var(--wpn-tekst); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.azur-verzije { overflow-wrap: anywhere; color: var(--wpn-sivo); font-size: 12px; }
.azur-oznaka { flex: 0 0 auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.azur-oznaka .spinner-border { width: 11px; height: 11px; border-width: 2px; }
.azur-kopija { margin-top: 8px; color: var(--wpn-sivo); font-size: 12.5px; }

/* modal automatskog ažuriranja: polja su bleđa dok je isključeno */
.modal-auto .auto-glavni .form-check-label { font-weight: 600; }
.modal-auto:has(#auto-ukljuceno:not(:checked)) .auto-polja { opacity: .55; }
.auto-zastita { padding: 10px 12px; border-radius: var(--wpn-radijus-sm); background: rgba(46, 202, 139, .06); }
.auto-izuzeci { max-height: 180px; }

/* pristup serveru (SSH/SFTP) */
.pristup-kartica { margin-bottom: 16px; padding: 14px; border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); }
.pristup-nivoi { display: grid; gap: 8px; }
.pristup-nivo {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px;
    border: 1px solid var(--wpn-ivica-jaca); border-radius: var(--wpn-radijus-sm); cursor: pointer;
}
.pristup-nivo .form-check-input { flex: 0 0 auto; margin-top: 3px; }
.pristup-nivo:has(input:checked) { border-color: var(--wpn-primary); background: rgba(47, 85, 212, .04); }

@media (max-width: 575.98px) {
    .provajder-izbor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .modal-skladiste .modal-header,
    .modal-skladiste .modal-body,
    .modal-skladiste .modal-footer { padding-left: 16px; padding-right: 16px; }
    .skladiste-prazno { flex-wrap: wrap; }
}

/* gde idu bekapi sajta (strana sajta → Bekapi) */
.bekap-cilj {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fafbfd;
}

/* uži ekran: tabela skladišta se skroluje, a radnje ostaju uz desnu ivicu */
@media (max-width: 991.98px) {
    .tabela-skladista > thead > tr > th:last-child,
    .tabela-skladista > tbody > tr > td:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background: #fff;
        box-shadow: -10px 0 10px -10px rgba(16, 24, 40, .18);
    }

    .tabela-skladista > thead > tr > th:last-child { background: #f8f9fc; }
}

/* kartica otvorena iz #adrese pri učitavanju — bez animacije prelaska linije */
.nav.tabovi.bez-animacije .nav-link,
.nav.tabovi.bez-animacije .nav-link::before,
.nav.tabovi.bez-animacije .nav-link .uil { transition: none !important; }

/* =====================================================================
 |  Medijska biblioteka (Sadržaj → Mediji): mreža u delovima, izbor,
 |  folderi pluginova, pregled preko celog ekrana — public/assets/js/mediji.js
 ===================================================================== */
.mediji { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.mediji.sa-folderima { grid-template-columns: 250px minmax(0, 1fr); }

/* ---------- folderi ---------- */
.mediji-folderi { position: sticky; top: 86px; max-height: calc(100vh - 106px); overflow: hidden; display: flex; flex-direction: column; }
.mediji-folderi > .card-body { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px; }

.mediji-folderi-naslov {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
    padding: 0 8px;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--wpn-tekst);
    text-align: left;
    cursor: default;
}

.mediji-folderi-naslov > span { display: inline-flex; align-items: center; gap: 6px; }
.mediji-folderi-naslov .uil-folder { font-size: 17px; color: var(--wpn-primary); }
.mediji-folderi-naslov small { margin-left: auto; font-weight: 500; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediji-folderi-strelica { display: none; }

.mediji-folderi-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

.mf-stavka {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 8px 6px calc(8px + var(--dubina, 0) * 14px);
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--wpn-tekst-2);
    font-size: 13.5px;
    text-align: left;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.mf-stavka .uil { flex: 0 0 auto; font-size: 16px; color: #8a96ad; }
.mf-stavka .mf-naziv { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-stavka .nav-broj { flex: 0 0 auto; }
.mf-stavka:hover { background: #f3f5fa; color: var(--wpn-tekst); }
.mf-stavka.aktivan { background: rgba(47, 85, 212, .08); color: var(--wpn-primary); font-weight: 600; }
.mf-stavka.aktivan .uil { color: var(--wpn-primary); }
.mf-stavka.aktivan .nav-broj { background: rgba(47, 85, 212, .12); color: var(--wpn-primary); }
.mf-stavka:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); outline-offset: -2px; }
.mf-stavka.cilj { background: rgba(47, 85, 212, .12); box-shadow: inset 0 0 0 2px var(--wpn-primary); color: var(--wpn-primary); }
.mediji.vuce .mf-stavka:not([data-folder=""]) { box-shadow: inset 0 0 0 1px #c5cff5; }
.mediji.vuce .mf-stavka.cilj { box-shadow: inset 0 0 0 2px var(--wpn-primary); }
.mf-razdelnik { height: 1px; margin: 6px 8px; background: var(--wpn-ivica); }
.mf-nema { padding: 6px 8px; font-size: 12.5px; color: var(--wpn-sivo); }

.mediji-novi-folder { display: flex; gap: 6px; margin-top: 10px; padding: 10px 2px 0; border-top: 1px solid var(--wpn-ivica); }

.mediji-kostur-red { display: block; height: 30px; margin: 4px 8px; border-radius: 7px; background: linear-gradient(90deg, #f1f3f8 25%, #e8ebf2 37%, #f1f3f8 63%); background-size: 400% 100%; animation: mediji-kostur 1.3s ease infinite; }

/* ---------- alati i stanje ---------- */
.mediji-alati { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.mediji-pretraga { position: relative; flex: 1 1 260px; max-width: 420px; }
.mediji-pretraga .uil { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #98a2b6; pointer-events: none; }
.mediji-pretraga .form-control { padding-left: 36px; }
.mediji-vrsta { flex: 0 0 170px; width: 170px; }
.mediji-alati-desno { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mediji-stanje { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--wpn-tekst-2); }

/* ---------- mreža i kartice ---------- */
.mediji-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }

.mk {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--wpn-ivica);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, opacity .18s ease;
}

.mk:hover { border-color: #c5cff5; box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.mk:focus-visible { box-shadow: 0 0 0 3px rgba(47, 85, 212, .3); border-color: var(--wpn-primary); }
.mk.izabran { border-color: var(--wpn-primary); box-shadow: 0 0 0 2px var(--wpn-primary); }
.mk.nestaje { opacity: 0; transform: scale(.96); }

.mk-slika { position: relative; aspect-ratio: 1 / 1; background: #f3f5f9; overflow: hidden; }
.mk-slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.mk:hover .mk-slika img { transform: scale(1.03); }
.mk.izabran .mk-slika img { transform: scale(.94); border-radius: 6px; }
.mk-slika.mk-bez-slike img { display: none; }

.mk-fajl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #7b88a1; }
.mk-fajl .uil { font-size: 40px; line-height: 1; }
.mk-fajl span { padding: 2px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--wpn-ivica); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--wpn-tekst-2); }

.mk-bez-alta {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #d97706;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .15);
}

.mk-izbor {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s ease;
}

.mk-izbor input { position: absolute; opacity: 0; pointer-events: none; }

.mk-izbor span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 7px;
    background: rgba(16, 24, 40, .28);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .25);
    transition: background-color .12s ease, border-color .12s ease;
}

.mk-izbor span::after { content: ""; width: 10px; height: 6px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: 0; }
.mk:hover .mk-izbor,
.mk:focus-visible .mk-izbor,
.mediji.bira .mk-izbor,
.mk.izabran .mk-izbor { opacity: 1; }
.mk.izabran .mk-izbor span { background: var(--wpn-primary); border-color: var(--wpn-primary); }
.mk.izabran .mk-izbor span::after { opacity: 1; }

.mk-tekst { padding: 8px 10px 9px; min-width: 0; }
.mk-ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--wpn-tekst); }
.mk-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--wpn-sivo); font-variant-numeric: tabular-nums; }

.mk-kostur { cursor: default; pointer-events: none; }
.mk-kostur .mk-slika,
.mk-kostur .mk-tekst span {
    background: linear-gradient(90deg, #f1f3f8 25%, #e8ebf2 37%, #f1f3f8 63%);
    background-size: 400% 100%;
    animation: mediji-kostur 1.3s ease infinite;
}
.mk-kostur .mk-tekst span { display: block; height: 10px; margin: 4px 0; border-radius: 5px; }
.mk-kostur .mk-tekst span + span { width: 60%; }

@keyframes mediji-kostur { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.mediji-dno { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 18px; }
.mediji-dno [data-sentinel] { width: 100%; height: 1px; }
html.mediji-traka-otvorena .mediji-dno { padding-bottom: 72px; }

.mediji-prazno { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 16px; text-align: center; }
.mediji-prazno > .uil { font-size: 44px; color: #c3cad8; }

.vrti { display: inline-block; animation: mediji-vrti .8s linear infinite; }
@keyframes mediji-vrti { to { transform: rotate(360deg); } }

/* ---------- traka izbora ---------- */
.mediji-izbor {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 8px 10px 8px 16px;
    border-radius: 14px;
    background: #172036;
    color: #fff;
    box-shadow: 0 14px 40px rgba(16, 24, 40, .3);
    transform: translateX(-50%);
    animation: mediji-traka .18s ease;
}

.mediji-izbor[hidden] { display: none; }
.mediji-izbor-broj { white-space: nowrap; font-size: 13.5px; }
.mediji-izbor-broj strong { font-size: 15px; }
.mediji-izbor-razmak { width: 8px; }
.mediji-izbor .btn-light { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.mediji-izbor .btn-light:hover,
.mediji-izbor .btn-light.show { background: rgba(255, 255, 255, .2); color: #fff; }
.mediji-izbor .btn-close { margin-left: 2px; }
.mediji-meni-foldera { max-height: 320px; overflow-y: auto; min-width: 220px; padding: 6px; border-radius: var(--wpn-radijus-sm); }
.mediji-meni-foldera .dropdown-item { border-radius: 6px; font-size: 13.5px; }

@keyframes mediji-traka { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- pregled preko celog ekrana ---------- */
html.mediji-pregled-otvoren { overflow: hidden; }

.mediji-pregled {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    background: rgba(10, 14, 24, .94);
    outline: none;
    animation: mediji-pregled .15s ease;
}

.mediji-pregled[hidden] { display: none; }
.mediji-pregled.bez-detalja { grid-template-columns: minmax(0, 1fr); }
.mediji-pregled.bez-detalja .mp-detalji { display: none; }

@keyframes mediji-pregled { from { opacity: 0; } to { opacity: 1; } }

.mp-scena { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 64px 72px 32px; }

.mp-gore { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px; padding: 12px 14px; color: rgba(255, 255, 255, .8); }
.mp-gore-razmak { flex: 1 1 auto; }
.mp-brojac { font-size: 13px; font-variant-numeric: tabular-nums; }

.mp-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 20px;
    transition: background-color .12s ease;
}

.mp-dugme:hover { background: rgba(255, 255, 255, .18); }

.mp-strelica {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 28px;
    transform: translateY(-50%);
    transition: background-color .12s ease, opacity .12s ease;
}

.mp-strelica:hover { background: rgba(255, 255, 255, .22); }
.mp-strelica:disabled { opacity: .25; cursor: default; }
.mp-levo { left: 14px; }
.mp-desno { right: 14px; }
.mp-dugme:focus-visible,
.mp-strelica:focus-visible { outline: 2px solid #8ea3ec; outline-offset: 2px; }

.mp-platno { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; }
.mp-platno img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); transition: opacity .15s ease; }
.mp-platno img.ucitava { opacity: .35; }
.mp-platno .spinner-border { position: absolute; }

.mp-fajl { display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, .85); text-align: center; }
.mp-fajl > .uil { font-size: 96px; line-height: 1; }
.mp-fajl-tip { margin-top: 8px; font-size: 14px; letter-spacing: .03em; }

.mp-detalji { min-width: 0; background: #fff; overflow-y: auto; }
.mp-detalji-telo { padding: 22px 20px; }
.mp-naslov { margin-bottom: 2px; font-size: 15px; font-weight: 700; word-break: break-word; }
.mp-fajl-ime { margin-bottom: 14px; font-size: 12.5px; color: var(--wpn-sivo); word-break: break-all; }
.mp-podaci { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; margin-bottom: 14px; font-size: 13px; }
.mp-podaci dt { font-weight: 500; color: var(--wpn-sivo); }
.mp-podaci dd { margin: 0; color: var(--wpn-tekst); word-break: break-word; }
.mp-podaci [hidden] { display: none; }
.mp-forma { margin-bottom: 14px; padding: 14px 0 0; border-top: 1px solid var(--wpn-ivica); }
.mp-forma .form-label { margin-bottom: 4px; font-size: 12.5px; }
.mp-radnje { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--wpn-ivica); }

/* ---------- prevuci fajlove ---------- */
.mediji-prevlacenje {
    position: fixed;
    inset: 12px;
    z-index: 1048;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--wpn-primary);
    border-radius: 18px;
    background: rgba(47, 85, 212, .1);
    color: var(--wpn-primary);
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.mediji-prevlacenje[hidden] { display: none; }
.mediji-prevlacenje .uil { display: block; font-size: 52px; }

.mediji-vuce-znak { position: fixed; top: -100px; left: -100px; padding: 6px 12px; border-radius: 8px; background: var(--wpn-primary); color: #fff; font-size: 13px; font-weight: 600; }

/* ---------- poruke ---------- */
.wpn-poruke { position: fixed; right: 20px; bottom: 20px; z-index: 1090; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
html.mediji-traka-otvorena .wpn-poruke { bottom: 84px; }

.wpn-poruka {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px 11px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--wpn-ivica);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    font-size: 13.5px;
    color: var(--wpn-tekst);
    animation: wpn-poruka .18s ease;
    transition: opacity .2s ease, transform .2s ease;
}

.wpn-poruka > .uil { font-size: 19px; line-height: 1.1; }
.wpn-poruka > span { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.wpn-poruka .btn-close { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 3px; background-size: 10px; }
.wpn-poruka-ok > .uil { color: #2eb67d; }
.wpn-poruka-greska { border-color: #f6c8c5; }
.wpn-poruka-greska > .uil { color: #d8433a; }
.wpn-poruka-info > .uil,
.wpn-poruka-radi > .uil { color: var(--wpn-primary); }
.wpn-poruka-radi > .uil { animation: mediji-vrti 1s linear infinite; }
.wpn-poruka.nestaje { opacity: 0; transform: translateY(6px); }

@keyframes wpn-poruka { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- uži ekran ---------- */
@media (max-width: 991.98px) {
    .mediji.sa-folderima { grid-template-columns: minmax(0, 1fr); }
    .mediji-folderi { position: static; max-height: none; }
    .mediji-folderi-naslov { margin-bottom: 0; cursor: pointer; }
    .mediji-folderi-strelica { display: inline-block; font-size: 18px; color: var(--wpn-sivo); transition: transform .15s ease; }
    .mediji-folderi:not(.otvoren) .mediji-folderi-lista,
    .mediji-folderi:not(.otvoren) .mediji-novi-folder { display: none; }
    .mediji-folderi.otvoren .mediji-folderi-naslov { margin-bottom: 8px; }
    .mediji-folderi.otvoren .mediji-folderi-strelica { transform: rotate(180deg); }
    .mediji-folderi-lista { max-height: 50vh; }

    .mediji-pregled { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .mp-detalji { max-height: 55vh; border-radius: 14px 14px 0 0; }
    .mp-scena { padding: 60px 12px 16px; }
    .mp-strelica { width: 40px; height: 40px; font-size: 24px; background: rgba(0, 0, 0, .35); }
    .mp-levo { left: 6px; }
    .mp-desno { right: 6px; }
}

@media (max-width: 575.98px) {
    .mediji-mreza { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
    .mediji-vrsta { flex: 1 1 140px; width: auto; }
    .mediji-alati-desno { margin-left: 0; width: 100%; }
    .mediji-alati-desno .btn-primary { margin-left: auto !important; }
    .mediji-izbor { bottom: 12px; padding-left: 12px; flex-wrap: wrap; justify-content: center; }
    .mediji-izbor [data-izaberi-sve] { display: none; }
    .wpn-poruke { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* traka izbora i prevlačenje: sredina sadržaja, ne celog ekrana (bočni meni je 300 px) */
@media screen and (min-width: 1025px) {
    .page-wrapper.toggled ~ .mediji-izbor { left: calc(50% + 150px); }
    .page-wrapper.toggled ~ .mediji-prevlacenje { left: 312px; }
}

/* =====================================================================
 |  Meniji (Sadržaj → Meniji) — kao Izgled → Meniji u WordPress-u.
 |  Crta ih public/assets/js/meniji.js; dubina stavke ide kroz --dubina.
 ===================================================================== */
.mn-vrh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }

/* „Uredi menije | Upravljaj lokacijama” */
.mn-prekidac { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #eaedf3; }

.mn-prekidac > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wpn-tekst-2);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.mn-prekidac > button .uil { font-size: 16px; color: #8a96ad; }
.mn-prekidac > button:hover { color: var(--wpn-tekst); }
.mn-prekidac > button.aktivan { background: #fff; color: var(--wpn-primary); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06); }
.mn-prekidac > button.aktivan .uil { color: var(--wpn-primary); }
.mn-prekidac > button:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); outline-offset: 1px; }
.mn-prekidac .nav-broj { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }
.mn-prekidac .nav-broj:empty { display: none; }

/* „Opcije prikaza” (Screen Options) */
.mn-opcije .dropdown-menu { width: 280px; max-height: min(70vh, 520px); overflow-y: auto; border-radius: var(--wpn-radijus-sm); }
.mn-opcije-naslov { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--wpn-sivo); text-transform: uppercase; letter-spacing: .04em; }
.mn-opcije .form-check { margin-bottom: 4px; font-size: 13.5px; }

/* izbor menija za uređivanje */
.mn-izbor { margin-bottom: 16px; }
.mn-izbor > .card-body { padding: 12px 18px; }
.mn-izbor-red { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; color: var(--wpn-tekst-2); }
.mn-izbor-red > .uil { font-size: 18px; color: var(--wpn-primary); }
.mn-izbor-oznaka { margin: 0; font-weight: 600; color: var(--wpn-tekst); }
.mn-izbor-red .form-select { width: auto; min-width: 240px; max-width: 100%; }
.mn-izbor-ili { color: var(--wpn-sivo); }
.mn-izbor-novi { padding: 0; border: 0; font-size: inherit; font-weight: 600; vertical-align: baseline; text-decoration: none; }
.mn-izbor-novi:hover { text-decoration: underline; }
.mn-izbor-savet { margin-left: auto; font-size: 12.5px; color: var(--wpn-sivo); }

/* dve kolone: kutije levo, struktura desno */
.mn-telo { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.mn-samo-citanje .mn-telo { grid-template-columns: minmax(0, 1fr); }
.mn-samo-citanje .mn-dodaj { display: none; }
.mn-kolona-naslov { margin: 4px 0 10px; font-size: 15px; font-weight: 700; color: var(--wpn-tekst); }

/* ---------- kutije „Dodaj stavke menija” ---------- */
.mn-kutije { display: flex; flex-direction: column; gap: 8px; }
.mn-kutija { border: 1px solid var(--wpn-ivica); border-radius: 10px; background: #fff; box-shadow: var(--wpn-senka); }
.mn-kutija.otvorena { border-color: var(--wpn-ivica-jaca); }

.mn-kutija-glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--wpn-tekst);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.mn-kutija-glava:hover { background: #f8f9fc; }
.mn-kutija-glava:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); outline-offset: -2px; }
.mn-kutija-glava .uil { font-size: 19px; color: var(--wpn-sivo); transition: transform .15s ease; }
.mn-kutija.otvorena .mn-kutija-glava { border-radius: 10px 10px 0 0; }
.mn-kutija.otvorena .mn-kutija-glava .uil { transform: rotate(180deg); }
.mn-kutija-telo { display: none; padding: 2px 14px 14px; }
.mn-kutija.otvorena .mn-kutija-telo { display: block; }
.mn-kutija-telo .mn-polje { margin-bottom: 10px; }

.mn-kartice { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--wpn-ivica); }

.mn-kartice > button {
    margin-bottom: -1px;
    padding: 6px 6px 7px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--wpn-sivo);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mn-kartice > button:hover { color: var(--wpn-tekst); }
.mn-kartice > button.aktivna { border-bottom-color: var(--wpn-primary); color: var(--wpn-primary); }

.mn-izvor-pretraga { margin-bottom: 8px; }

.mn-izvor-lista {
    max-height: 250px;
    margin: 0;
    padding: 6px 10px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fbfcfe;
    scrollbar-width: thin;
}

.mn-izvor-lista > li { padding: 3px 0 3px calc(var(--dubina, 0) * 16px); }
.mn-izvor-lista > .mn-izvor-prazno { padding: 6px 0; font-size: 12.5px; color: var(--wpn-sivo); }

.mn-izvor-lista .form-check,
.mn-kutija-dno .form-check { display: flex; align-items: flex-start; gap: 8px; min-height: 0; margin: 0; padding: 0; font-size: 13px; cursor: pointer; }
.mn-izvor-lista .form-check-input,
.mn-kutija-dno .form-check-input { float: none; flex: 0 0 auto; margin: 2px 0 0; }
.mn-izvor-lista .form-check-label { min-width: 0; word-break: break-word; cursor: pointer; }
.mn-izvor-oznaka { flex: 0 0 auto; margin-left: auto; padding: 0 6px; border-radius: 10px; background: #eef1f6; color: #64708a; font-size: 11px; line-height: 18px; white-space: nowrap; }

.mn-izvor-stranice { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.mn-izvor-stranice:empty { display: none; }
.mn-izvor-stranice .btn { min-width: 30px; height: 26px; padding: 0 8px; line-height: 1; }
.mn-kutija-dno { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* ---------- struktura menija ---------- */
.mn-struktura { min-width: 0; }

.mn-struktura-glava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--wpn-ivica);
    background: #f8f9fc;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.mn-naziv-oznaka { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--wpn-tekst); white-space: nowrap; }
.mn-struktura-glava .form-control { flex: 1 1 220px; max-width: 340px; }
.mn-struktura-glava .btn { margin-left: auto; }
.mn-struktura-telo { padding: 18px 20px 22px; }
.mn-odeljak { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--wpn-tekst); }
.mn-uputstvo { margin-bottom: 12px; font-size: 13px; color: var(--wpn-sivo); }

.mn-izbor-vise { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 10px; }
.mn-izbor-vise .form-check { display: flex; align-items: center; gap: 6px; padding: 0; }
.mn-izbor-vise .form-check-input { float: none; margin: 0; }
.mn-izbor-vise .btn-link { padding: 0; font-size: 13px; text-decoration: none; }

.mn-lista { --korak: 30px; margin: 0; padding: 0; list-style: none; }

.mn-stavka {
    max-width: 520px;
    margin: 0 0 6px calc(var(--dubina, 0) * var(--korak));
    transition: margin-left .12s ease, opacity .18s ease, transform .18s ease;
}

.mn-traka {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px 0 4px;
    border: 1px solid var(--wpn-ivica-jaca);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    box-shadow: var(--wpn-senka);
    cursor: grab;
    user-select: none;
    transition: border-color .15s ease, background-color .3s ease, box-shadow .15s ease;
}

.mn-traka:hover { border-color: #c3cde6; }
.mn-traka:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); outline-offset: 1px; }
.mn-samo-citanje .mn-traka { cursor: pointer; }

.mn-hvatac { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 34px; color: #a9b2c4; font-size: 18px; touch-action: none; }
.mn-traka:hover .mn-hvatac { color: #6f7d99; }
.mn-izbor-stavke { flex: 0 0 auto; margin: 0 2px 0 4px; }

.mn-naslov { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 0; }
.mn-naslov-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--wpn-tekst); }
.mn-pod { flex: 0 0 auto; font-size: 12px; color: var(--wpn-sivo); }
.mn-status { flex: 0 0 auto; padding: 0 7px; border-radius: 10px; background: rgba(241, 181, 97, .2); color: #a5620b; font-size: 11px; font-weight: 600; line-height: 18px; }
.mn-status-greska { background: #fdeeee; color: #c23a3a; }
.mn-tip { flex: 0 1 auto; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--wpn-sivo); }

.mn-strelica {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--wpn-sivo);
    font-size: 20px;
}

.mn-strelica:hover { background: #f1f3f8; color: var(--wpn-tekst); }
.mn-strelica .uil { transition: transform .15s ease; }
.mn-stavka.otvorena .mn-strelica .uil { transform: rotate(180deg); }

.mn-stavka.otvorena .mn-traka { border-color: #b9c6ef; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.mn-stavka.nova .mn-traka { border-color: #9fd6b8; background: #effaf4; }
.mn-stavka.nevazeca .mn-traka { border-color: #f1c4c4; background: #fffafa; }
.mn-stavka.nestaje { opacity: 0; transform: translateX(-10px); }
.mn-sakrivena { display: none !important; }

/* podešavanja stavke */
.mn-panel { padding: 14px 14px 10px; border: 1px solid #b9c6ef; border-top: 0; border-radius: 0 0 var(--wpn-radijus-sm) var(--wpn-radijus-sm); background: #fbfcff; }
.mn-polje { margin-bottom: 12px; }
.mn-polje .form-label { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--wpn-tekst-2); }
.mn-polje .pomoc { margin-top: 3px; font-size: 12px; color: var(--wpn-sivo); }
.mn-panel .form-check.mn-polje { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 13px; }
.mn-panel .form-check.mn-polje .form-check-input { float: none; margin: 0; }

.mn-pomeri { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--wpn-ivica-jaca); font-size: 12.5px; }
.mn-pomeri-oznaka { font-weight: 600; color: var(--wpn-tekst-2); }
.mn-pomeri .btn-link { padding: 0; border: 0; font-size: 12.5px; text-decoration: none; }
.mn-pomeri .btn-link:hover { text-decoration: underline; }

.mn-original { margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--wpn-sivo); }
.mn-panel-radnje { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wpn-ivica); }
.mn-panel-radnje .btn-link { padding: 0; border: 0; font-size: 13px; text-decoration: none; }
.mn-panel-radnje .btn-link:hover { text-decoration: underline; }
.mn-razdvoji { color: #c3cad8; }

/* prevlačenje: mesto gde će stavka pasti i „duh” koji prati miš */
.mn-mesto {
    max-width: 520px;
    margin: 0 0 6px calc(var(--dubina, 0) * var(--korak));
    border: 2px dashed #b3c1ee;
    border-radius: var(--wpn-radijus-sm);
    background: rgba(47, 85, 212, .04);
    transition: margin-left .1s ease;
}

.mn-duh { position: fixed; z-index: 1085; pointer-events: none; opacity: .94; }
.mn-duh .mn-stavka { transition: none; }
.mn-duh .mn-traka { border-color: #9fb2ea; box-shadow: 0 14px 30px rgba(16, 24, 40, .16); }
html.mn-vuce-strana,
html.mn-vuce-strana * { cursor: grabbing !important; user-select: none !important; }
.mn-vuce .mn-traka:hover { border-color: var(--wpn-ivica-jaca); }

.mn-prazan { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--wpn-ivica); border-radius: 10px; color: var(--wpn-sivo); font-size: 13.5px; text-align: center; }
.mn-prazan .uil { font-size: 30px; color: #b3bccd; }

/* podešavanja menija */
.mn-podesavanja-menija { border-top: 1px solid var(--wpn-ivica); }
.mn-red { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--wpn-ivica); }
.mn-red-oznaka { padding-top: 1px; font-size: 13px; font-weight: 600; color: var(--wpn-tekst-2); }
.mn-red .form-check { margin-bottom: 4px; font-size: 13.5px; }
.mn-trenutno { font-size: 12.5px; color: var(--wpn-sivo); }

/* tema podebljava sve .form-check-label — u uređivaču su to obične opcije, kao u WP-u */
.mn .form-check-label { font-weight: 400; color: var(--wpn-tekst-2); }

/* dno sa „Sačuvaj meni” ostaje vidljivo dok se skroluje dugačak meni */
.mn-struktura-dno {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--wpn-ivica);
    background: #f8f9fc;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.mn-dno-stanje:empty { display: none; }
.mn-izmenjeno .mn-dno-stanje { display: inline-flex; align-items: center; gap: 6px; color: #a5620b; font-weight: 600; }
.mn-izmenjeno .mn-dno-stanje::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f1b561; box-shadow: 0 0 0 3px rgba(241, 181, 97, .2); }

/* upravljaj lokacijama */
.mn-lokacije .form-select { min-width: 220px; max-width: 360px; }
.mn-lokacije .btn-link { padding: 2px 6px; text-decoration: none; }

@media (max-width: 991.98px) {
    .mn-telo { grid-template-columns: minmax(0, 1fr); }
    .mn-izbor-savet { width: 100%; margin-left: 0; }
}

@media (max-width: 575.98px) {
    .mn-prekidac { display: flex; width: 100%; }
    .mn-prekidac > button { flex: 1 1 0; justify-content: center; padding: 0 8px; }
    .mn-opcije,
    .mn-opcije > .btn { width: 100%; }
    .mn-izbor-red .form-select { flex: 1 1 100%; min-width: 0; }
    .mn-izbor-savet { display: none; }
    .mn-struktura-glava,
    .mn-struktura-telo,
    .mn-struktura-dno { padding-left: 14px; padding-right: 14px; }
    .mn-struktura-glava .form-control { max-width: none; }
    .mn-struktura-glava .btn { display: none; }
    .mn-lista { --korak: 16px; }
    /* na telefonu uvlačenje dovoljno pokazuje nivo — naslov dobija mesto */
    .mn-tip,
    .mn-pod { display: none; }
    .mn-red { grid-template-columns: minmax(0, 1fr); }
    .mn-lokacije .form-select { min-width: 160px; }
}

/* ---------- Pluginovi i teme sajta ---------- */
.pl-glava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pl-glava .nav.tabovi { flex: 0 0 auto; }
.pl-alati { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 4px; }
.pl-trazi { width: 200px; }
.pl-filteri { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: #f1f3f8; }
.pl-filteri button { padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: #5a6a85; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pl-filteri button:hover { color: var(--wpn-tekst); }
.pl-filteri button.active { background: #fff; color: var(--wpn-tekst); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.pl-filteri button.ima { color: #b86e00; }
.pl-filteri button:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); }

.pl-izbor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #ffe1a8; border-radius: var(--wpn-radijus-sm); background: #fff8eb; }

.pl-poruke { display: grid; gap: 6px; margin-bottom: 10px; }
.pl-poruke:empty { display: none; }
.pl-poruka { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--wpn-radijus-sm); font-size: 13px; }
.pl-poruka > .uil { font-size: 17px; }
.pl-poruka.ok { background: rgba(46, 202, 139, .1); color: #17734f; }
.pl-poruka.greska { background: #fdecef; color: #8c1c28; }

.pl-lista { border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); }
.pl-lista.ucitava { opacity: .6; pointer-events: none; transition: opacity .15s; }
.pl-lista > .prazna-lista { margin: 0; }
.pl-red { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f0f2f6; }
.pl-red:last-child { border-bottom: 0; }
.pl-red:hover { background: #fbfcfe; }
.pl-red.ima-azur { background: #fffdf6; }
.pl-red.neaktivan .pl-naziv > span:first-child { color: #6c7a91; }
.pl-cb, .pl-cb-mesto { flex: 0 0 16px; width: 16px; margin: 0; }
.pl-ikona { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: #eef1f6; }
.pl-ikona img { width: 100%; height: 100%; object-fit: cover; }
.pl-ikona-tema { flex-basis: 64px; width: 64px; height: 48px; }
.pl-slovo { color: #5a6a85; font-size: 17px; font-weight: 700; }
.pl-info { flex: 1 1 auto; min-width: 0; }
.pl-naziv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--wpn-tekst); font-size: 14px; font-weight: 600; }
.pl-verzija { color: var(--wpn-sivo); font-family: var(--bs-font-monospace); font-size: 12px; font-weight: 500; }
.pl-opis { overflow: hidden; color: #6c7a91; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { color: var(--wpn-sivo); font-size: 12px; }
.pl-nova { margin-left: 8px; color: #b86e00; font-weight: 600; }
.pl-stanje { flex: 0 0 92px; color: var(--wpn-sivo); font-size: 12.5px; white-space: nowrap; }
.pl-tacka { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #c5ccd9; }
.pl-tacka.aktivan { background: #2eca8b; }
.pl-radnje { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pl-kostur .pl-ikona,
.pl-kostur .pl-info span { animation: pl-puls 1.2s infinite ease-in-out; }
.pl-kostur .pl-info span { display: block; height: 10px; margin: 6px 0; border-radius: 4px; background: #eef1f6; }
.pl-kostur .pl-info span:first-child { width: 35%; }
.pl-kostur .pl-info span:last-child { width: 65%; }
@keyframes pl-puls { 50% { opacity: .45; } }

/* modal „Dodaj plugin ili temu” */
.pl-izvori { box-shadow: none; }
.pl-rezultati { display: grid; gap: 8px; max-height: 430px; margin-top: 12px; overflow-y: auto; }
.pl-rez, .pl-gpl { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); }
.pl-gpl { align-items: center; }
.pl-rez-opis { display: -webkit-box; overflow: hidden; color: #6c7a91; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-gpl-lista { display: grid; gap: 8px; }
.pl-pomoc { display: flex; align-items: center; gap: 8px; padding: 12px 4px; color: var(--wpn-sivo); font-size: 13px; }
.pl-pomoc > .uil { flex: 0 0 auto; font-size: 20px; }
.pl-zona {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; margin: 0; padding: 24px;
    border: 2px dashed var(--wpn-ivica-jaca); border-radius: var(--wpn-radijus); background: #fafbfd; cursor: pointer; text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.pl-zona > .uil { color: var(--wpn-primary); font-size: 36px; }
.pl-zona.iznad, .pl-zona:hover { border-color: var(--wpn-primary); background: rgba(47, 85, 212, .04); }
.pl-zona.radi { opacity: .8; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .pl-kostur .pl-ikona, .pl-kostur .pl-info span { animation: none; }
}

@media (max-width: 767.98px) {
    .pl-alati { width: 100%; }
    .pl-trazi { flex: 1 1 140px; width: auto; }
    /* telefon: izbor, ikona i opis u redu, a dugmad ispod */
    .pl-red { display: grid; grid-template-columns: 16px 40px minmax(0, 1fr); align-items: start; gap: 8px 10px; }
    .pl-red .pl-ikona-tema { width: 40px; height: 32px; }
    .pl-stanje { display: none; }
    .pl-radnje { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-end; }
    .pl-opis { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---------- GPL biblioteka ---------- */
.bib-lista { display: grid; gap: 8px; }
.bib-paket { border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); }
.bib-paket > summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.bib-paket > summary::-webkit-details-marker { display: none; }
.bib-paket > summary:hover { background: #fafbfd; }
.bib-paket > summary:focus-visible { outline: 2px solid rgba(47, 85, 212, .45); outline-offset: -2px; }
.bib-strelica { color: var(--wpn-sivo); font-size: 18px; transition: transform .15s ease; }
.bib-paket:not([open]) .bib-strelica { transform: rotate(-90deg); }
.bib-telo { padding: 2px 12px 10px; }
.bib-napomena { max-width: 260px; }
.bib-sajtovi { display: flex; flex-wrap: wrap; gap: 6px; }
.bib-stariji { border-color: #ffe1a8; background: #fff8eb; color: #8a5a00; }
.bib-otpremanja { display: grid; gap: 6px; margin-top: 10px; }
.bib-otpremanje { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--wpn-ivica); border-radius: var(--wpn-radijus-sm); font-size: 13px; }
.bib-otpremanje > .uil { margin-top: 1px; color: var(--wpn-sivo); font-size: 18px; }
.bib-otpremanje.ok > .uil { color: #1f9d6b; }
.bib-otpremanje.greska > .uil { color: #c0392b; }
.bib-otpremanje.greska [data-stanje] { color: #c0392b !important; }
.bib-otpremanje .progress { height: 4px; }


/* =========================================================
   Dvofaktorska prijava (profil, potvrda prijave)
   ========================================================= */
.dvofaktor-ikona {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 21px;
    line-height: 1;
    background: #fff4e5;
    color: #c77700;
}

.dvofaktor-ikona.ukljucena {
    background: #e7f6ee;
    color: #1f9254;
}

.dvofaktor-koraci {
    margin: 0;
    padding-left: 1.25rem;
}

.dvofaktor-koraci > li {
    padding-left: .25rem;
    margin-bottom: 1.1rem;
}

.dvofaktor-koraci > li:last-child {
    margin-bottom: 0;
}

.dvofaktor-qr-blok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: .75rem;
}

/* QR uvek crno na belom — i u tamnoj temi, inače ga kamera ne čita */
.dvofaktor-qr {
    flex: 0 0 auto;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    line-height: 0;
}

.dvofaktor-qr svg {
    width: 196px;
    height: 196px;
    max-width: 100%;
}

.dvofaktor-kljuc {
    font-size: 14px;
    letter-spacing: .06em;
    word-break: break-all;
    padding: .3rem .5rem;
    border-radius: 6px;
    background: var(--wpn-pozadina);
    color: var(--wpn-tekst);
}

.kod-2fa {
    letter-spacing: .3em;
    font-weight: 600;
}

.kod-2fa::placeholder {
    letter-spacing: .15em;
    font-weight: 400;
}

.dvofaktor-kodovi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .9rem;
    border-radius: var(--wpn-radijus-sm);
    background: var(--wpn-pozadina);
    border: 1px dashed var(--wpn-ivica-jaca);
    font-size: 15px;
    text-align: center;
    color: var(--wpn-tekst);
    user-select: all;
}

@media (max-width: 400px) {
    .dvofaktor-kodovi {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Skener malvera i hitni oporavak (strana sajta → Bezbednost)
   ========================================================= */
.skener-zaglavlje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 16px;
    border-radius: var(--wpn-radijus);
    border: 1px solid var(--wpn-ivica);
    background: #f8f9fc;
}

.skener-ikona {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 23px;
    line-height: 1;
    background: #eef1f6;
    color: #5a6a85;
}

.skener-cisto { background: #f2fbf6; border-color: #cdebd9; }
.skener-cisto .skener-ikona { background: #e7f6ee; color: #1f9254; }
.skener-pazi { background: #f4f8ff; border-color: #d6e2fb; }
.skener-pazi .skener-ikona { background: #e8effd; color: #2f55d4; }
.skener-opasno { background: #fff6f6; border-color: #f5cfcf; }
.skener-opasno .skener-ikona { background: #fde8e8; color: #d03b3b; }

.skener-dugmad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.skener-tabela .kol-izbor { width: 36px; }
.skener-tabela td { vertical-align: top; }
.skener-tabela .mono { font-size: 12px; }
.skener-ociscen td { opacity: .55; }
.skener-ociscen td:last-child { opacity: 1; }

.skener-detalj { margin-top: 4px; font-size: 12px; }
.skener-detalj summary { color: var(--wpn-primary); cursor: pointer; }
.skener-detalj pre {
    max-height: 140px;
    margin: 6px 0 0;
    padding: 8px 10px;
    overflow: auto;
    border-radius: 6px;
    background: #1e2433;
    color: #e6e9f0;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-all;
}

.karantin-lista { max-height: 50vh; overflow: auto; }
.karantin-lista .kol-izbor { width: 36px; }

.oporavak-ikona { background: #fde8e8; color: #d03b3b; }

.oporavak-koraci {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.oporavak-koraci > li {
    padding: 10px 0 10px .25rem;
    border-bottom: 1px solid #f0f2f6;
}

.oporavak-koraci > li:last-child { border-bottom: 0; }
.oporavak-koraci .form-check { margin: 0; }
.oporavak-koraci .form-check-label strong { display: block; color: var(--wpn-tekst); }
.oporavak-koraci .form-check-label small { display: block; color: var(--wpn-sivo); line-height: 1.45; }

.oporavak-bekap {
    display: grid;
    gap: 8px;
    margin: 8px 0 0 1.5rem;
    padding: 10px 12px;
    border-radius: var(--wpn-radijus-sm);
    background: #f8f9fc;
}

.oporavak-sta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
}

.oporavak-sta label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.azur-stavka.azur-greska { background: #fff6f6; }
.azur-stavka.azur-upozorenje { background: #fffaf0; }
.azur-stavka.azur-ceka .azur-naziv,
.azur-stavka.azur-preskocen .azur-naziv { color: var(--wpn-sivo); }

/* =========================================================
   Prodavnica (WooCommerce) i Forme i mejlovi
   ========================================================= */

/* polja iz definicija WooCommerce-a (woo-polja.php) */
.woo-polja {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.woo-polje { min-width: 0; }
.woo-polje.siroko,
.woo-polja > .woo-odeljak { grid-column: 1 / -1; }
.woo-polje .form-label { font-size: 12.5px; margin-bottom: 4px; }

.woo-odeljak {
    margin: 8px 0 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wpn-sivo);
}

.woo-odeljak span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }

.woo-tajna {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 6px 10px;
    border-radius: var(--wpn-radijus-sm);
    background: #f8f9fc;
    font-size: 12.5px;
}

@media (max-width: 767.98px) {
    .woo-polja { grid-template-columns: minmax(0, 1fr); }
}

/* zaglavlje strane prodavnice */
.prodavnica-traka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.prodavnica-traka-podaci {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--wpn-tekst-2);
}

.prodavnica-traka-podaci i { margin-right: 4px; color: var(--wpn-sivo); }

/* liste stavki: načini plaćanja, metode dostave, mejlovi */
.lista-stavki { display: grid; gap: 10px; }

.stavka-kartica {
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    box-shadow: var(--wpn-senka);
    transition: box-shadow .3s, border-color .3s;
}

.stavka-kartica.iskljuceno { background: #fafbfd; }
.stavka-kartica.iskljuceno .stavka-naziv { color: var(--wpn-sivo); }
.stavka-kartica.stavka-mala { box-shadow: none; }

.stavka-zaglavlje {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.stavka-naziv { font-weight: 600; color: var(--wpn-tekst); line-height: 1.35; }
.stavka-opis { font-size: 12.5px; color: var(--wpn-sivo); line-height: 1.4; margin-top: 2px; }
.stavka-radnje { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dugme-mesto { display: inline-block; width: 32px; }

.stavka-detalji {
    padding: 12px;
    border-top: 1px solid var(--wpn-ivica);
    background: #fbfcfe;
    border-radius: 0 0 var(--wpn-radijus-sm) var(--wpn-radijus-sm);
}

.stavka-detalji + .stavka-detalji { border-radius: 0; }

.mejl-primalac {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--wpn-tekst-2);
}

.mejl-primalac i { margin-right: 4px; color: var(--wpn-sivo); }

.racuni-tabela { min-width: 760px; }
.racuni-tabela td { padding: 4px 6px !important; vertical-align: middle; }
.racuni-tabela th { white-space: nowrap; }

@media (max-width: 767.98px) {
    .stavka-zaglavlje { flex-wrap: wrap; }
    .stavka-radnje { width: 100%; justify-content: flex-end; }
    .mejl-primalac { max-width: 100%; order: 3; width: 100%; }
}

/* posle čuvanja (?na=…) */
.istaknuto { border-color: var(--wpn-primary) !important; box-shadow: 0 0 0 4px rgba(47, 85, 212, .16) !important; }

/* dostava */
.zona-regioni { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.zona-izmena { margin: 10px 0 4px; padding: 12px; border-radius: var(--wpn-radijus-sm); background: #f8f9fc; }

.dodaj-metodu {
    display: flex;
    gap: 8px;
    max-width: 380px;
    margin-top: 12px;
}

/* birač zemalja i regiona */
.birac { position: relative; }

.birac-cipovi {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 26px;
    margin-bottom: 6px;
}

.birac-cip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 9px;
    border-radius: 999px;
    background: rgba(47, 85, 212, .08);
    color: var(--wpn-primary);
    font-size: 12.5px;
    line-height: 1.6;
}

.birac-ukloni {
    border: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
}

.birac-ukloni:hover { background: rgba(47, 85, 212, .16); }

.birac-meni {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    box-shadow: var(--wpn-senka-jaca);
}

.birac-opcija {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: var(--wpn-tekst);
}

.birac-opcija:hover,
.birac-opcija.aktivna { background: #f2f5fd; }
.birac-opcija span { font-size: 11.5px; }
.birac-nista { padding: 8px 10px; font-size: 13px; color: var(--wpn-sivo); }

/* valuta i boje */
.cena-primer {
    padding: 8px 12px;
    border-radius: var(--wpn-radijus-sm);
    background: #f8f9fc;
    font-size: 13px;
}

.boja-uzorak { width: 34px; background: var(--boja, transparent) !important; }

/* ko prima mejlove */
.primaoci-lista { display: grid; }

.primalac-red {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f2f6;
}

.primalac-red:last-child { border-bottom: 0; }
.primalac-red.iskljuceno .primalac-opis { opacity: .6; }

.primalac-opis { display: flex; align-items: center; gap: 10px; min-width: 0; }
.primalac-opis > i { font-size: 18px; color: var(--wpn-primary); }
.primalac-forma { display: flex; gap: 6px; margin: 0; }

@media (max-width: 767.98px) {
    .primalac-red { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* forme */
.forma-zaglavlje {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.forma-upozorenje {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--wpn-radijus-sm);
    font-size: 13px;
    line-height: 1.45;
}

.forma-upozorenje > i { font-size: 17px; }
.forma-upozorenje.warning { background: #fff8e8; color: #7a5300; }
.forma-upozorenje.danger { background: #fff1f1; color: #a12b36; }

.obav-lista { display: grid; gap: 12px; }

.obav-kartica {
    padding: 12px;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fbfcfe;
}

.obav-kartica.iskljuceno { background: #f6f7f9; }
.obav-kartica.iskljuceno .row { opacity: .55; }

.obav-zaglavlje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.obav-kartica .dropdown-item code { font-size: 11.5px; color: var(--wpn-sivo); }

/* tema širi .flex-1 samo unutar .d-flex — ovi redovi su flex preko svoje klase */
.stavka-zaglavlje > .flex-1,
.forma-upozorenje > .flex-1,
.forma-zaglavlje > .min-w-0 { flex: 1 1 0%; }

.stavka-kartica .stavka-opis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   Podešavanja → Obaveštenja
   ========================================================= */
.obav-kanal .card-body { display: flex; flex-direction: column; }
.obav-kanal .kartica-zaglavlje h6 { display: flex; align-items: center; gap: 10px; }

.obav-kanal-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 17px;
}

.obav-kanal-ikona.email { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }
.obav-kanal-ikona.telegram { background: rgba(34, 158, 217, .12); color: #229ed9; }

.obav-kanal-telo { flex: 1 1 auto; transition: opacity .15s; }
.obav-kanal.iskljucen .obav-kanal-telo { opacity: .5; }

.obav-kanal-dno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--wpn-ivica);
}

.obav-napomena {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--wpn-radijus-sm);
    background: #f2f5fc;
    color: var(--wpn-tekst-2);
    font-size: 13px;
    line-height: 1.45;
}

.obav-napomena > i { font-size: 16px; line-height: 1.3; }
.obav-napomena.upozorenje { background: #fff8e8; color: #7a5300; }
.obav-napomena.greska { background: #fff1f1; color: #a12b36; }

.obav-koraci {
    margin: 0 0 12px;
    padding-left: 18px;
    color: var(--wpn-tekst-2);
    font-size: 13px;
    line-height: 1.55;
}

.obav-koraci li + li { margin-top: 4px; }

.obav-stanje {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--wpn-tekst-2);
}

.obav-stanje + .obav-stanje { border-top: 1px dashed var(--wpn-ivica); }
.obav-stanje > i { font-size: 17px; }

.obav-cetovi:not(:empty) { display: grid; gap: 6px; margin-top: 10px; }

.obav-cet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--wpn-ivica);
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
}

.obav-cet-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(34, 158, 217, .12);
    color: #229ed9;
}

.obav-cet-tekst { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; }
.obav-cet-naziv { color: var(--wpn-tekst); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obav-cet-tip { color: var(--wpn-sivo); font-size: 12px; }

.obav-rucno summary { color: var(--wpn-sivo); font-size: 12.5px; cursor: pointer; }
.obav-rucno summary:hover { color: var(--wpn-primary); }

.obav-tabela th { white-space: nowrap; }
.obav-kolona { width: 110px; }

.obav-sve {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.obav-sve .form-check-input { margin: 0; }

.obav-tabela tr.obav-grupa td {
    padding-top: 14px;
    padding-bottom: 6px;
    border-bottom: 0;
    color: var(--wpn-sivo);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.obav-tabela .form-check-input { float: none; margin: 0; }
.obav-dogadjaj { display: flex; align-items: flex-start; gap: 10px; }

.obav-nivo {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
}

.obav-vreme { width: 110px; }

.tg-primer {
    padding: 16px;
    border-radius: var(--wpn-radijus-sm);
    background: #dfe7ef;
    background-image: linear-gradient(135deg, #e3ebf2 0%, #d5e1ea 100%);
}

.tg-balon {
    max-width: 340px;
    padding: 9px 12px 10px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    color: #0f1419;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
    overflow-wrap: anywhere;
}

.tg-balon a { color: #168acd; text-decoration: none; }

.obav-istorija .obav-naslov { max-width: 340px; }
.obav-istorija .obav-primalac { max-width: 200px; }

.obav-greska {
    max-width: 260px;
    margin-left: auto;
    overflow: hidden;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   AI zadaci — tabla (zadaci → za proveru → završeni) i strana zadatka
   ========================================================= */
.ai-tabla-traka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.ai-nacin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--wpn-senka);
    color: var(--wpn-tekst-2);
    font-size: 13px;
}

.ai-nacin-tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--wpn-sivo); }
.ai-nacin-tacka.ok { background: #2eb85c; animation: ai-puls-zeleno 2s infinite; }
.ai-filter .form-select { min-width: 220px; }

.ai-broj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #e9edf5;
    color: var(--wpn-tekst-2);
    font-size: 12px;
    font-weight: 600;
}

.ai-tabla-tabovi { display: none; }

.ai-tabla-kolone {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.ai-kolona {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border-radius: var(--wpn-radijus);
    background: #eef1f6;
}

.ai-kolona-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    color: var(--wpn-tekst);
    font-weight: 600;
}

.ai-kolona-glava > i { color: var(--wpn-primary); font-size: 18px; }
.ai-kolona-glava .ai-broj { margin-left: auto; background: #fff; }
.kolona-provera .ai-kolona-glava > i { color: #d68a00; }
.kolona-zavrseni .ai-kolona-glava > i { color: #2eb85c; }

.ai-kolona-lista { display: flex; flex-direction: column; gap: 10px; }

.ai-kolona-prazno {
    padding: 22px 12px;
    border: 1px dashed var(--wpn-ivica-jaca);
    border-radius: var(--wpn-radijus-sm);
    color: var(--wpn-sivo);
    text-align: center;
}

.ai-kolona-prazno > i { display: block; margin-bottom: 4px; font-size: 26px; color: #b4bdcc; }

.ai-kolona-vise {
    display: block;
    padding: 6px;
    border-radius: var(--wpn-radijus-sm);
    color: var(--wpn-primary);
    font-size: 13px;
    text-align: center;
}

.ai-kolona-vise:hover { background: rgba(47, 85, 212, .06); }

/* novi zadatak */
.ai-novi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    box-shadow: var(--wpn-senka);
}

.ai-novi textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.ai-novi-vise summary { color: var(--wpn-sivo); font-size: 12.5px; cursor: pointer; }
.ai-novi-vise summary:hover { color: var(--wpn-primary); }
.ai-novi-vise[open] summary { margin-bottom: 2px; }
.ai-novi-dno { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ai-kada-vreme { max-width: 210px; }

.ai-novi-bez-agenta { flex-direction: row; align-items: flex-start; gap: 12px; }
.ai-novi-bez-agenta > i { font-size: 26px; color: var(--wpn-primary); }

/* kartica zadatka */
.ai-kartica {
    position: relative;
    padding: 12px 12px 10px;
    border-left: 3px solid transparent;
    border-radius: var(--wpn-radijus-sm);
    background: #fff;
    box-shadow: var(--wpn-senka);
    transition: box-shadow .15s ease;
}

.ai-kartica:hover { box-shadow: var(--wpn-senka-jaca); }
.ai-kartica.status-radi { border-left-color: var(--wpn-primary); }
.ai-kartica.status-provera { border-left-color: #f0a400; }
.ai-kartica.status-provera.ishod-uradjeno { border-left-color: #2eb85c; }
.ai-kartica.ishod-greska, .ai-kartica.ishod-nije { border-left-color: #e5484d; }
.ai-kartica.ishod-pitanje { border-left-color: #3d9bd9; }

.ai-kartica-gore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.ai-kartica-sajt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    color: var(--wpn-sivo);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zad-oznaka {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef1f6;
    color: #4f5b73;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.zad-oznaka.radi { background: rgba(47, 85, 212, .1); color: var(--wpn-primary); }
.zad-oznaka.zakazan { background: #f3f0ff; color: #6741d9; }
.zad-oznaka.ceka { background: #fff6e0; color: #8a5a00; }

.ai-puls {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wpn-primary);
    animation: ai-puls 1.6s infinite;
}

@keyframes ai-puls {
    0% { box-shadow: 0 0 0 0 rgba(47, 85, 212, .45); }
    70% { box-shadow: 0 0 0 7px rgba(47, 85, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 85, 212, 0); }
}

@keyframes ai-puls-zeleno {
    0% { box-shadow: 0 0 0 0 rgba(46, 184, 92, .45); }
    70% { box-shadow: 0 0 0 7px rgba(46, 184, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 184, 92, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-puls, .ai-nacin-tacka.ok { animation: none; }
}

.ai-kartica-naslov {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-kartica-link { color: var(--wpn-tekst); text-decoration: none; }
.ai-kartica-link:hover { color: var(--wpn-primary); }
.ai-kartica-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.ai-kartica-tekst {
    margin: 0 0 6px;
    color: var(--wpn-tekst-2);
    font-size: 12.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-kartica-tekst.radi { color: var(--wpn-primary); }

.ai-kartica-dole {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--wpn-sivo);
    font-size: 12px;
}

.ai-kartica-dole i { margin-right: 3px; }

.ai-kartica-radnje {
    position: relative;   /* iznad linka preko cele kartice */
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--wpn-ivica);
}

/* telefon i tablet: kolona po kolona */
@media (max-width: 991.98px) {
    .ai-tabla-tabovi {
        display: flex;
        gap: 4px;
        margin-bottom: 10px;
        padding: 4px;
        border-radius: var(--wpn-radijus-sm);
        background: #eef1f6;
    }

    .ai-tabla-tab {
        display: inline-flex;
        flex: 1 1 0%;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 6px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--wpn-tekst-2);
        font-size: 13px;
        font-weight: 600;
    }

    .ai-tabla-tab[aria-pressed="true"] { background: #fff; color: var(--wpn-primary); box-shadow: var(--wpn-senka); }

    .ai-tabla-kolone { grid-template-columns: minmax(0, 1fr); }
    .ai-tabla[data-aktivna="zadaci"] .ai-kolona:not(.kolona-zadaci),
    .ai-tabla[data-aktivna="provera"] .ai-kolona:not(.kolona-provera),
    .ai-tabla[data-aktivna="zavrseni"] .ai-kolona:not(.kolona-zavrseni) { display: none; }
    .ai-kolona-glava { display: none; }
    .ai-filter, .ai-filter .form-select { width: 100%; min-width: 0; }
}

/* strana zadatka */
.ai-zadatak-traka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--wpn-radijus);
}

.ai-zadatak-traka-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
}

.ai-zadatak-brojke { display: flex; gap: 14px; color: var(--wpn-tekst-2); font-size: 13px; white-space: nowrap; }
.ai-zadatak-brojke strong { color: var(--wpn-tekst); }

.ai-zadatak-opis {
    padding: 12px 14px;
    border-radius: var(--wpn-radijus-sm);
    background: #f7f9fc;
    color: var(--wpn-tekst);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ai-zadatak-meta { display: grid; gap: 6px; margin: 14px 0 0; font-size: 13px; }
.ai-zadatak-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.ai-zadatak-meta dt { color: var(--wpn-sivo); font-weight: 400; }
.ai-zadatak-meta dd { margin: 0; color: var(--wpn-tekst-2); overflow-wrap: anywhere; }

.ai-tok .ai-zadatak { margin-left: 0; max-width: 100%; }
.ai-tok .ai-poruka { max-width: 100%; }

.ai-rezime { color: var(--wpn-tekst-2); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-rezime p:last-child, .ai-rezime ul:last-child, .ai-rezime ol:last-child { margin-bottom: 0; }
.ai-rezime ul, .ai-rezime ol { padding-left: 18px; }

.ai-provera {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--wpn-ivica);
}

.ai-dorada { margin-top: 6px; }
.ai-dorada textarea { resize: vertical; }

.ai-izmene { margin: 0; padding: 0; list-style: none; }

.ai-izmene li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
}

.ai-izmene li + li { border-top: 1px solid var(--wpn-ivica); }
.ai-izmene li > i { margin-top: 1px; color: var(--wpn-primary); font-size: 16px; }

@media (max-width: 575.98px) {
    .ai-zadatak-brojke { display: none; }
    .ai-zadatak-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* razgovor AI zadatka u asistentu sajta */
.ai-zadatak-baner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: var(--wpn-radijus-sm);
    background: rgba(47, 85, 212, .07);
    color: var(--wpn-tekst-2);
    font-size: 13px;
}

.ai-zadatak-baner > i { color: var(--wpn-primary); font-size: 17px; }
.ai-zadatak-baner a { white-space: nowrap; font-weight: 600; }
.ai-sesija-zadatak { margin-left: auto; color: var(--wpn-primary); font-size: 14px; line-height: 1.4; }