/* ============================================================
   FAKTO — komponente
   Svaka ima svoj partial u app/views/ui/. Ništa se ne piše dvaput.
   ============================================================ */

/* ---------------- dugmad ---------------- */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 20px;
    border-radius: var(--rad-sm);
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background var(--brzo), border-color var(--brzo), color var(--brzo), box-shadow var(--brzo);
    text-decoration: none;
}
.dugme:hover { text-decoration: none; }
.dugme:disabled, .dugme.zauzet { opacity: .6; cursor: not-allowed; pointer-events: none; }

.dugme-primarno { background: var(--brend-600); color: var(--n-0); box-shadow: var(--senka-1); }
.dugme-primarno:hover { background: var(--brend-700); color: var(--n-0); }

.dugme-sekundarno { background: var(--n-0); color: var(--n-700); border-color: var(--n-300); box-shadow: var(--senka-1); }
.dugme-sekundarno:hover { background: var(--n-50); color: var(--n-900); border-color: var(--n-400); }

.dugme-tiho { background: transparent; color: var(--n-500); }
.dugme-tiho:hover { background: var(--n-100); color: var(--n-900); }

.dugme-opasno { background: var(--greska); color: var(--n-0); }
.dugme-opasno:hover { background: #912018; color: var(--n-0); }

.dugme-veza { background: none; color: var(--brend-600); padding: 0; }
.dugme-veza:hover { color: var(--brend-700); text-decoration: underline; }

.dugme-s { padding: 6px 12px; font-size: var(--t-sm); }
.dugme-l { padding: 13px 22px; font-size: var(--t-lg); }
.dugme-puno { width: 100%; }
.dugme-ikona { padding: 8px; }

.dugme .vrti {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vrtenje .6s linear infinite;
}
@keyframes vrtenje { to { transform: rotate(360deg); } }

/* ---------------- kartica ---------------- */

.kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-1);
}

.kartica-glava {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r3);
    padding: var(--r4) var(--r5);
    border-bottom: 1px solid var(--n-200);
}
.kartica-naslov { font-size: var(--t-lg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kartica-naslov .ikona { color: var(--n-400); }
.kartica-telo { padding: var(--r5); }
.kartica-telo.zbijeno { padding: 0; }
.kartica-noga {
    padding: var(--r3) var(--r5);
    border-top: 1px solid var(--n-200);
    background: var(--n-25);
    border-radius: 0 0 var(--rad) var(--rad);
}

/* ---------------- KPI kartica ---------------- */

.kpi { display: flex; flex-direction: column; gap: 6px; padding: var(--r5); }
.kpi-labela { font-size: var(--t-sm); color: var(--n-500); display: flex; align-items: center; gap: 6px; }
.kpi-broj { font-size: var(--t-3xl); line-height: var(--t-3xl-h); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-podnaslov { font-size: var(--t-xs); color: var(--n-500); }
.kpi-promena { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 500; }
.kpi-promena.gore { color: var(--uspeh); }
.kpi-promena.dole { color: var(--greska); }

.mreza-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--r4); }

/* ---------------- traka limita ---------------- */

.limit + .limit { margin-top: var(--r5); }
.limit-glava { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r3); margin-bottom: 8px; }
.limit-naziv { font-size: var(--t-sm); font-weight: 500; color: var(--n-700); }
.limit-brojevi { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--n-500); }
.limit-brojevi b { color: var(--n-900); }

.limit-traka {
    height: 10px;
    background: var(--n-100);
    border-radius: var(--rad-pun);
    overflow: hidden;
}
.limit-popuna {
    height: 100%;
    background: var(--brend-600);
    border-radius: var(--rad-pun);
    transition: width var(--sporo);
}
.limit.pazi .limit-popuna { background: var(--akcenat-500); }
.limit.opasno .limit-popuna { background: var(--greska); }

.limit-noga { display: flex; justify-content: space-between; gap: var(--r3); margin-top: 6px; font-size: var(--t-xs); color: var(--n-500); }
.limit.pazi .limit-poruka { color: var(--upozor); font-weight: 500; }
.limit.opasno .limit-poruka { color: var(--greska); font-weight: 500; }

/* ---------------- tabela ---------------- */

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

.tabela { font-size: var(--t-sm); }
.tabela th {
    text-align: left;
    padding: 10px var(--r4);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--n-500);
    background: var(--n-25);
    border-bottom: 1px solid var(--n-200);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tabela th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tabela th a:hover { color: var(--n-900); text-decoration: none; }
.tabela th.sortirano a { color: var(--brend-600); }

.tabela td {
    padding: 12px var(--r4);
    border-bottom: 1px solid var(--n-100);
    vertical-align: middle;
}
.tabela tbody tr:hover { background: var(--n-25); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .kolona-akcije { width: 1%; white-space: nowrap; text-align: right; }

/* mobilne kartice umesto tabele */
.lista-kartica { display: none; }

@media (max-width: 900px) {
    .tabela-omot { display: none; }
    .lista-kartica { display: flex; flex-direction: column; gap: var(--r3); }
}

.red-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    padding: var(--r4);
    box-shadow: var(--senka-1);
}
.red-kartica-glava { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--r3); margin-bottom: 10px; }
.red-kartica-naslov { font-weight: 600; }
.red-kartica-podaci { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--r3); font-size: var(--t-sm); }
.red-kartica-podaci dt { color: var(--n-500); }
.red-kartica-podaci dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.red-kartica-noga { display: flex; gap: 8px; margin-top: var(--r3); padding-top: var(--r3); border-top: 1px solid var(--n-100); }

/* ---------------- tabovi i filteri ---------------- */

.tabovi {
    display: flex;
    gap: var(--r1);
    border-bottom: 1px solid var(--n-200);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabovi::-webkit-scrollbar { display: none; }

.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px var(--r3);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--n-500);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--brzo), border-color var(--brzo);
}
.tab:hover { color: var(--n-900); text-decoration: none; }
.tab.aktivan { color: var(--brend-600); border-bottom-color: var(--brend-600); }

.tab-broj {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    font-size: var(--t-xs); font-weight: 600;
    background: var(--n-100); color: var(--n-500);
    border-radius: var(--rad-pun);
}
.tab.aktivan .tab-broj { background: var(--brend-100); color: var(--brend-700); }

/* traka alata iznad liste */
.alati {
    display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
    padding: var(--r3) 0;
}
.alati .pretraga { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.alati .pretraga .ikona {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--n-400); pointer-events: none;
}
.alati .pretraga .unos { padding-left: 38px; }

/* ---------------- bedževi i statusi ---------------- */

.bedz {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    font-size: var(--t-xs);
    font-weight: 500;
    line-height: 18px;
    border-radius: var(--rad-pun);
    background: var(--mirno-bg);
    color: var(--mirno);
    white-space: nowrap;
}
.bedz::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bedz.bez-tacke::before { display: none; }

.bedz-uspeh  { background: var(--uspeh-bg);  color: var(--uspeh); }
.bedz-info   { background: var(--info-bg);   color: var(--info); }
.bedz-upozor { background: var(--upozor-bg); color: var(--upozor); }
.bedz-greska { background: var(--greska-bg); color: var(--greska); }
.bedz-brend  { background: var(--brend-50);  color: var(--brend-700); }
.bedz-novo   { background: var(--akcenat-50); color: var(--akcenat-700); }

/* ---------------- prazno stanje ---------------- */

.prazno {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--r12) var(--r5);
    gap: var(--r3);
}
.prazno-slika {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--brend-50);
    color: var(--brend-600);
    border-radius: var(--rad-lg);
    margin-bottom: var(--r1);
}
.prazno-slika .ikona { width: 26px; height: 26px; }
.prazno-naslov { font-size: var(--t-lg); font-weight: 600; }
.prazno-opis { font-size: var(--t-sm); color: var(--n-500); max-width: 380px; }

/* ---------------- upsell ---------------- */

.upsell {
    max-width: 640px;
    margin: var(--r10) auto;
    text-align: center;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r10) var(--r8);
    box-shadow: var(--senka-3);
}
.upsell-ikona {
    width: 56px; height: 56px; margin: 0 auto var(--r5);
    display: grid; place-items: center;
    background: var(--brend-600); color: var(--n-0);
    border-radius: var(--rad-lg);
}
.upsell-naslov { font-size: var(--t-2xl); line-height: var(--t-2xl-h); font-weight: 700; margin-bottom: var(--r3); }
.upsell-opis { color: var(--n-500); font-size: var(--t-lg); line-height: var(--t-lg-h); margin-bottom: var(--r6); }
.upsell-stavke { list-style: none; text-align: left; display: grid; gap: var(--r3); margin-bottom: var(--r6); }
.upsell-stavke li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-md); }
.upsell-stavke .ikona { color: var(--uspeh); margin-top: 2px; }
.upsell-cena {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 16px; margin-bottom: var(--r5);
    background: var(--akcenat-50); color: var(--akcenat-700);
    border-radius: var(--rad-pun); font-weight: 600;
}
.upsell-napomena { font-size: var(--t-xs); color: var(--n-400); margin-top: var(--r4); }

/* zamućeni pravi sadržaj ispod upsell kartice */
.zamucen-omot { position: relative; }
.zamucen-omot > .zamucen { filter: blur(5px); pointer-events: none; user-select: none; }
.zamucen-omot > .upsell {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92%);
    margin: 0;
}

/* ---------------- poruke ---------------- */

.poruke { position: fixed; top: 76px; right: var(--r5); z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }

.poruka {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px var(--r4);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-left: 3px solid var(--mirno);
    border-radius: var(--rad-sm);
    box-shadow: var(--senka-3);
    font-size: var(--t-sm);
    animation: uleti var(--sporo);
}
@keyframes uleti { from { opacity: 0; transform: translateY(-8px); } }

.poruka-success { border-left-color: var(--uspeh); }
.poruka-success .ikona { color: var(--uspeh); }
.poruka-error { border-left-color: var(--greska); }
.poruka-error .ikona { color: var(--greska); }
.poruka-warning { border-left-color: var(--upozor); }
.poruka-warning .ikona { color: var(--upozor); }
.poruka-info { border-left-color: var(--info); }
.poruka-info .ikona { color: var(--info); }
.poruka-zatvori { color: var(--n-400); margin-left: auto; }

@media (max-width: 640px) {
    .poruke { top: auto; bottom: 76px; left: var(--r3); right: var(--r3); max-width: none; }
}

/* ---------------- traka obaveštenja (proba, dospelo) ---------------- */

.traka {
    display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
    padding: 10px var(--r5);
    font-size: var(--t-sm);
    background: var(--akcenat-50);
    color: var(--akcenat-700);
    border-bottom: 1px solid var(--akcenat-400);
}
.traka.opasno { background: var(--greska-bg); color: var(--greska); border-bottom-color: var(--greska-ivica); }
.traka.info { background: var(--info-bg); color: var(--info); border-bottom-color: var(--info-ivica); }
.traka .dugme { margin-left: auto; }

/* ---------------- modal ---------------- */

.modal-pozadina {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(16, 24, 40, .5);
    display: grid; place-items: center;
    padding: var(--r5);
}
.modal {
    background: var(--n-0);
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-4);
    width: min(560px, 100%);
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: modal-ulaz var(--sporo);
}
@keyframes modal-ulaz { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.modal-glava { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); padding: var(--r5); border-bottom: 1px solid var(--n-200); }
.modal-telo { padding: var(--r5); overflow-y: auto; }
.modal-noga { display: flex; justify-content: flex-end; gap: 10px; padding: var(--r4) var(--r5); border-top: 1px solid var(--n-200); }

@media (max-width: 640px) {
    .modal-pozadina { align-items: flex-end; padding: 0; }
    .modal { width: 100%; border-radius: var(--rad-lg) var(--rad-lg) 0 0; max-height: 92vh; }
}

/* ---------------- koraci ---------------- */

.koraci { display: flex; align-items: center; gap: var(--r2); margin-bottom: var(--r8); }
.korak { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--n-400); }
.korak-broj {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--n-100); color: var(--n-500);
    font-size: var(--t-xs); font-weight: 600;
    flex: none;
}
.korak.aktivan { color: var(--n-900); font-weight: 500; }
.korak.aktivan .korak-broj { background: var(--brend-600); color: var(--n-0); }
.korak.gotov .korak-broj { background: var(--uspeh-bg); color: var(--uspeh); }
.korak-crta { flex: 1; height: 1px; background: var(--n-200); min-width: 16px; }

/* ---------------- padajući meni ---------------- */

.padajuci { position: relative; }
.padajuci-sadrzaj {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 200px;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-3);
    padding: var(--r1);
    display: none;
}
.padajuci.otvoren .padajuci-sadrzaj { display: block; animation: uleti var(--srednje); }
.padajuci-stavka {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    font-size: var(--t-sm);
    color: var(--n-700);
    border-radius: 6px;
    text-align: left;
}
.padajuci-stavka:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
.padajuci-stavka .ikona { color: var(--n-400); }
.padajuci-stavka.opasno { color: var(--greska); }
.padajuci-stavka.opasno:hover { background: var(--greska-bg); }
.padajuci-crta { height: 1px; background: var(--n-200); margin: var(--r1) 0; }

/* ---------------- skelet ---------------- */

.skelet {
    background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%);
    background-size: 200% 100%;
    animation: sjaj 1.4s infinite;
    border-radius: 6px;
    height: 14px;
}
@keyframes sjaj { to { background-position: -200% 0; } }

/* ---------------- napomena o odgovornosti ----------------
   Ide ispod svakog poreskog izračuna. Mora biti ovde, a ne u CSS-u sajta —
   aplikacija je koristi na više mesta nego sajt. */

.napomena-odgovornost {
    font-size: var(--t-xs);
    line-height: var(--t-xs-h);
    color: var(--n-500);
    background: var(--n-50);
    border-radius: var(--rad-sm);
    padding: 10px var(--r3);
    margin-top: var(--r4);
}

/* ---------------- straničenje ---------------- */

.stranice { display: flex; align-items: center; justify-content: center; gap: var(--r1); padding: var(--r5) 0; }
.stranice a, .stranice span {
    min-width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: var(--t-sm);
    border-radius: var(--rad-sm);
    color: var(--n-700);
}
.stranice a:hover { background: var(--n-100); text-decoration: none; }
.stranice .aktivna { background: var(--brend-600); color: var(--n-0); font-weight: 500; }
.stranice .neaktivna { color: var(--n-300); }

/* ---------------- cenovnik ----------------
   Koristi ga i javni sajt (/cenovnik) i čarobnjak pretplate u panelu,
   pa stoji ovde, a ne u 4-sajt.css koji panel ne učitava. */

.cene { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r5); align-items: start; }

@media (max-width: 900px) { .cene { grid-template-columns: 1fr; } }

.cena-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r8) var(--r6);
    position: relative;
}
.cena-kartica.istaknut {
    border-color: var(--brend-600);
    border-width: 2px;
    box-shadow: var(--senka-4);
}
.cena-oznaka {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--brend-600); color: var(--n-0);
    font-size: var(--t-xs); font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--rad-pun);
    white-space: nowrap;
}
.cena-naziv { font-size: var(--t-xl); font-weight: 700; }
.cena-podnaslov { font-size: var(--t-sm); color: var(--n-500); margin-bottom: var(--r5); min-height: 40px; }
.cena-iznos { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cena-iznos b { font-size: var(--t-4xl); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.cena-iznos span { color: var(--n-500); font-size: var(--t-md); }
.cena-godisnje { font-size: var(--t-sm); color: var(--uspeh); margin-bottom: var(--r6); }
.cena-lista { list-style: none; display: grid; gap: 10px; margin: var(--r6) 0; }
.cena-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-md); }
.cena-lista .ikona { color: var(--uspeh); margin-top: 3px; flex-shrink: 0; }
.cena-lista li.nema { color: var(--n-400); }
.cena-lista li.nema .ikona { color: var(--n-300); }

.prekidac-ciklusa {
    display: inline-flex;
    padding: 4px;
    background: var(--n-100);
    border-radius: var(--rad-pun);
    margin: 0 auto var(--r8);
}
.prekidac-ciklusa a {
    padding: 8px 20px;
    font-size: var(--t-sm); font-weight: 500;
    color: var(--n-500);
    border-radius: var(--rad-pun);
}
.prekidac-ciklusa a:hover { text-decoration: none; color: var(--n-900); }
.prekidac-ciklusa a.aktivan { background: var(--n-0); color: var(--n-900); box-shadow: var(--senka-1); }

/* ---------------- matrica delatnost × modul ----------------
   Mnogo redova × mnogo kolona: prva kolona i zaglavlje ostaju na mestu,
   inače se posle par koraka skrola ne zna koje polje je čije. */

.matrica-omot { max-height: 70vh; overflow: auto; }

.matrica { border-collapse: separate; border-spacing: 0; }

.matrica th, .matrica td { background: var(--n-0); }

.matrica-ugao {
    position: sticky; left: 0; top: 0; z-index: 3;
    background: var(--n-25) !important;
    width: 260px; min-width: 260px;
}

.matrica-kolona {
    position: sticky; top: 0; z-index: 2;
    background: var(--n-25) !important;
    width: 44px; min-width: 44px;
    padding: 8px 4px !important;
    text-align: center !important;
    vertical-align: bottom;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.matrica-naslov {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 130px;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    font-weight: 600;
}
.matrica-cena {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 400;
    color: var(--brend-600);
}

.matrica-red {
    position: sticky; left: 0; z-index: 1;
    width: 260px; min-width: 260px; max-width: 260px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    border-right: 1px solid var(--n-200);
    white-space: nowrap;
    overflow: hidden;
}
.matrica-sifra {
    display: inline-block;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
    color: var(--n-400);
}
/* Duga imena delatnosti seku se na tri tačke. Bez ovoga se prelivaju
   preko kvadratića i ne vidi se koje polje pripada kom modulu. */
.matrica-ime {
    display: inline-block;
    max-width: 195px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--n-900);
}

.matrica-grupa th {
    position: sticky; left: 0;
    background: var(--n-50) !important;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--n-500);
    padding: 6px var(--r4) !important;
    border-bottom: 1px solid var(--n-200);
}

.matrica-polje { padding: 4px !important; text-align: center; }

.matrica-kvadrat { display: inline-flex; cursor: pointer; }
.matrica-kvadrat input { position: absolute; opacity: 0; width: 0; height: 0; }
.matrica-kvadrat span {
    width: 20px; height: 20px;
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    background: var(--n-0);
    display: block;
    transition: background .12s, border-color .12s;
}
.matrica-kvadrat:hover span { border-color: var(--brend-600); }
.matrica-kvadrat input:focus-visible + span { outline: 2px solid var(--brend-600); outline-offset: 2px; }
.matrica-kvadrat input:disabled + span { opacity: .4; }
.matrica-kvadrat input:checked + span {
    background: var(--brend-600) no-repeat center;
    border-color: var(--brend-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
    background-size: 13px;
}

/* Modul koji još nije pušten u pogon: matrica sme da se pripremi unapred,
   ali mora da se vidi da ta kolona trenutno nikome ništa ne znači. */
.matrica-kolona.neaktivan .matrica-naslov { color: var(--n-400); }
.matrica-kolona.neaktivan::after {
    content: '';
    position: absolute; left: 4px; right: 4px; bottom: 0;
    height: 3px;
    background: repeating-linear-gradient(
        45deg, var(--n-300), var(--n-300) 3px, transparent 3px, transparent 6px
    );
}
.matrica-polje.neaktivan { background: var(--n-25) !important; }

/* ---------------- uređivač teksta ----------------
   Maska nad <textarea>. Bez JavaScripta se vidi textarea i sve i dalje radi. */

.uredjivac {
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    background: var(--n-0);
    overflow: hidden;
}
.uredjivac:focus-within { border-color: var(--brend-600); box-shadow: 0 0 0 3px var(--brend-50); }

.uredjivac-traka {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    padding: 6px;
    background: var(--n-25);
    border-bottom: 1px solid var(--n-200);
    position: sticky; top: 0; z-index: 2;
}

.uredjivac-dugme {
    min-width: 30px; height: 30px;
    padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-sm);
    color: var(--n-700);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rad-sm);
    cursor: pointer;
    line-height: 1;
}
.uredjivac-dugme:hover { background: var(--n-100); border-color: var(--n-200); color: var(--n-900); }
.uredjivac-dugme:active { background: var(--n-200); }
.uredjivac-razmak { width: 1px; height: 18px; background: var(--n-200); margin: 0 4px; }

.uredjivac-platno {
    padding: var(--r4) var(--r5);
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--n-900);
    outline: 0;
}
.uredjivac-platno > * + * { margin-top: 12px; }
.uredjivac-platno h2 { font-size: var(--t-xl); font-weight: 700; margin-top: var(--r5); }
.uredjivac-platno h3 { font-size: var(--t-lg); font-weight: 600; margin-top: var(--r4); }
.uredjivac-platno ul, .uredjivac-platno ol { padding-left: var(--r6); }
.uredjivac-platno li { margin: 4px 0; }
.uredjivac-platno a { color: var(--brend-600); text-decoration: underline; }
.uredjivac-platno blockquote {
    border-left: 3px solid var(--n-300);
    padding-left: var(--r4);
    color: var(--n-500);
    font-style: italic;
}
.uredjivac-platno pre {
    background: var(--n-900); color: var(--n-50);
    padding: var(--r3); border-radius: var(--rad-sm);
    font-family: var(--pismo-mono); font-size: var(--t-sm);
    overflow-x: auto; white-space: pre-wrap;
}
.uredjivac-platno hr { border: 0; border-top: 1px solid var(--n-300); margin: var(--r5) 0; }
.uredjivac-platno table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.uredjivac-platno th, .uredjivac-platno td { border: 1px solid var(--n-200); padding: 6px 10px; }

/* prazno platno dobija uputstvo umesto da zjapi */
.uredjivac-platno:empty::before {
    content: 'Piši ovde…';
    color: var(--n-400);
}

/* U režimu sirovog HTML-a platno se sklanja, a textarea vraća — klasu na
   textarea skida sam skript, pa ovde treba samo pravilo za sakriveno stanje. */
.uredjivac-sirovi .uredjivac-platno { display: none; }
.uredjivac-skriven { display: none; }

/* ============================================================
   AI ASISTENT
   ============================================================ */

/* Dve kolone: razgovori levo, tok desno. Na telefonu lista ide iznad,
   sklopljena — tamo je bitan tekući razgovor, ne arhiva. */
.asistent {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--r5);
    align-items: start;
}

.asistent-strana {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    padding: var(--r4);
    position: sticky;
    top: var(--r5);
}
.asistent-strana-naslov {
    font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--n-500);
    margin-bottom: var(--r3);
}
.asistent-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--r4); }
.asistent-stavka {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px;
    border-radius: var(--rad-sm);
    color: var(--n-700);
    text-decoration: none;
}
.asistent-stavka:hover { background: var(--n-50); }
.asistent-stavka.aktivan { background: var(--brend-50); color: var(--brend-700); }
.asistent-stavka-naslov {
    font-size: var(--t-sm); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asistent-stavka-datum { font-size: var(--t-xs); color: var(--n-400); }

.asistent-glavni {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    display: flex; flex-direction: column;
    min-height: 60vh;
}

.asistent-tok {
    flex: 1;
    padding: var(--r5);
    overflow-y: auto;
    max-height: 62vh;
    display: flex; flex-direction: column; gap: var(--r4);
}

/* ---------------- prazan ekran ---------------- */

.asistent-uvod { text-align: center; margin: auto; max-width: 520px; }
.asistent-uvod-ikona {
    width: 48px; height: 48px; margin: 0 auto var(--r3);
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: 50%;
}
.asistent-uvod h2 { font-size: var(--t-xl); font-weight: 600; margin-bottom: 6px; }
.asistent-predlozi {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin: var(--r5) 0;
}
.asistent-predlog {
    padding: 8px 14px;
    font-size: var(--t-sm);
    color: var(--n-700);
    background: var(--n-25);
    border: 1px solid var(--n-200);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}
.asistent-predlog:hover { border-color: var(--brend-300); color: var(--brend-700); }

/* ---------------- poruke ---------------- */

.chat-poruka { display: flex; gap: 10px; align-items: flex-start; }
.chat-poruka.od-mene { justify-content: flex-end; }

.chat-avatar {
    width: 28px; height: 28px; flex: none;
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: 50%;
}

.chat-telo { max-width: 78%; }
.od-mene .chat-telo {
    background: var(--brend-600); color: #fff;
    padding: 10px 14px;
    border-radius: var(--rad) var(--rad) 4px var(--rad);
}
.od-asistenta .chat-telo {
    background: var(--n-25);
    border: 1px solid var(--n-200);
    padding: 10px 14px;
    border-radius: var(--rad) var(--rad) var(--rad) 4px;
}
.chat-tekst { font-size: var(--t-md); line-height: 1.65; }

/* tri tačke dok se čeka odgovor */
.chat-kuca { display: flex; gap: 4px; padding: 4px 0; }
.chat-kuca span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--n-400);
    animation: chat-kuca 1.2s infinite ease-in-out;
}
.chat-kuca span:nth-child(2) { animation-delay: .15s; }
.chat-kuca span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-kuca { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .chat-kuca span { animation: none; opacity: .6; }
}

/* traka sa predlogom dokumenta */
.chat-predlog, .chat-gotovo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--n-300);
    font-size: var(--t-sm);
}
.chat-gotovo { color: var(--uspeh); border-top-color: var(--uspeh-bg); }
.chat-gotovo .ikona { color: var(--uspeh); }

/* ---------------- unos ---------------- */

.asistent-unos {
    display: flex; gap: 10px; align-items: flex-end;
    padding: var(--r4) var(--r5);
    border-top: 1px solid var(--n-200);
}
.asistent-unos .oblast { resize: none; min-height: 44px; }
.asistent-napomena {
    padding: 0 var(--r5) var(--r4);
    font-size: var(--t-xs); color: var(--n-500);
}

/* ---------------- predlog u modalu ---------------- */

.predlog-par {
    display: flex; justify-content: space-between; gap: var(--r3);
    padding: 6px 0; font-size: var(--t-sm);
    border-bottom: 1px solid var(--n-100);
}
.predlog-par span { color: var(--n-500); }
.predlog-zbir {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: var(--r4) 0 var(--r3);
    padding-top: var(--r3);
    border-top: 2px solid var(--n-900);
    font-size: var(--t-lg);
}
.predlog-zbir b { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .asistent { grid-template-columns: 1fr; }
    .asistent-strana { position: static; }
    .asistent-lista { max-height: 200px; overflow-y: auto; }
    .chat-telo { max-width: 90%; }
}

/* ============================================================
   IZBOR AI MODELA (vlasnički panel)
   ============================================================ */

.izbor-modela { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--r4); }
.model-izbor {
    display: flex; align-items: flex-start; gap: 10px;
    padding: var(--r3);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    cursor: pointer;
}
.model-izbor:hover { border-color: var(--brend-300); }
.model-izbor.izabran { border-color: var(--brend-500); background: var(--brend-50); }
.model-izbor input { margin-top: 3px; }
.model-izbor > span { display: flex; flex-direction: column; gap: 2px; }
.model-naziv { font-weight: 600; font-size: var(--t-sm); }
.model-opis { font-size: var(--t-sm); color: var(--n-600); }
.model-cena { font-size: var(--t-xs); color: var(--n-500); font-variant-numeric: tabular-nums; }

/* ============================================================
   OBAVEŠTENJA (zvono)
   ============================================================ */

.lista-obavestenja { display: flex; flex-direction: column; }
.obavestenje-red {
    display: flex; align-items: flex-start; gap: var(--r3);
    padding: var(--r4) var(--r5);
    border-bottom: 1px solid var(--n-100);
    color: inherit; text-decoration: none;
}
.obavestenje-red:last-child { border-bottom: 0; }
.obavestenje-red:hover { background: var(--n-25); }
.obavestenje-red.novo { background: var(--brend-50); }
.obavestenje-red.novo:hover { background: var(--brend-100, var(--brend-50)); }

.obavestenje-tacka {
    width: 8px; height: 8px; margin-top: 6px; flex: none;
    border-radius: 50%;
    background: transparent;
}
.obavestenje-red.novo .obavestenje-tacka { background: var(--brend-600); }

.obavestenje-telo { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.obavestenje-naslov { font-weight: 500; }
.obavestenje-tekst { font-size: var(--t-sm); color: var(--n-600); }
.obavestenje-datum { font-size: var(--t-xs); color: var(--n-400); white-space: nowrap; }

/* ---------------- izbor AI servisa ---------------- */

/* Blok sa modelom se skriva atributom `hidden`; klasa je tu da pravilo
   preživi i kad neka komponenta postavi display na elementu. */
.provajder-blok.sakriven-blok { display: none; }
.provajder-blok { margin-top: var(--r4); }

.model-izbor .bedz { margin-left: 6px; font-size: var(--t-xs); }

.tabela-zbijena th, .tabela-zbijena td { padding: 6px 10px; font-size: var(--t-sm); }

.kljuc-red {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--r3);
    padding: var(--r3) 0;
    border-bottom: 1px solid var(--n-100);
}
.kljuc-red:last-child { border-bottom: 0; }
.kljuc-opis { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.kljuc-forma { display: flex; gap: 8px; align-items: center; }
.kljuc-forma .unos { min-width: 240px; }

@media (max-width: 640px) {
    .kljuc-forma { width: 100%; }
    .kljuc-forma .unos { min-width: 0; flex: 1; }
}