/* ============================================================
   FAKTO — osnova: tokeni, reset, tipografija, forme
   Vidi PLAN/04-DIZAJN-SISTEM.md. Menjaj vrednosti ovde, ne po fajlovima.
   ============================================================ */

/* ---- fontovi ----------------------------------------------
   Naš CSP je `font-src 'self' data:` — Google/Bunny fontovi bi bili
   BLOKIRANI. Fontovi moraju biti skinuti u public/assets/fonts/.
   Dok ih nema, radi sistemski stek (izgleda dobro i učitava se odmah).

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

:root {
    /* --- brend (indigo) --- */
    --brend-50:  #EEF1FF;
    --brend-100: #E0E5FF;
    --brend-200: #C4CDFF;
    --brend-300: #A0AEFA;
    --brend-500: #5B6BF0;
    --brend-600: #3D4FE0;
    --brend-700: #3140C4;
    --brend-800: #27339E;
    --brend-900: #1B1F5C;

    /* --- akcenat (jantar) --- */
    --akcenat-50:  #FFF8EB;
    --akcenat-400: #FBBF24;
    --akcenat-500: #F59E0B;
    --akcenat-700: #B45309;

    /* --- neutralno --- */
    --n-0:   #FFFFFF;
    --n-25:  #FBFCFE;
    --n-50:  #F5F7FA;
    --n-100: #EDF0F5;
    --n-200: #E1E6EE;
    --n-300: #CBD3DF;
    --n-400: #9AA5B5;
    --n-500: #6B7686;
    --n-700: #3B4453;
    --n-900: #161B26;

    /* --- semantika --- */
    --uspeh:  #15803D;  --uspeh-bg:  #ECFDF3;  --uspeh-ivica:  #ABEFC6;
    --upozor: #B45309;  --upozor-bg: #FFFAEB;  --upozor-ivica: #FEDF89;
    --greska: #B42318;  --greska-bg: #FEF3F2;  --greska-ivica: #FECDCA;
    --info:   #175CD3;  --info-bg:   #EFF8FF;  --info-ivica:   #B2DDFF;
    --mirno:  #475467;  --mirno-bg:  #F2F4F7;  --mirno-ivica:  #E1E6EE;

    /* --- tipografija --- */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-naslov: 'Plus Jakarta Sans', var(--font);
    --font-broj: 'Inter', ui-monospace, 'Segoe UI', system-ui, sans-serif;

    --t-xs:  12px;  --t-xs-h:  16px;
    --t-sm:  13px;  --t-sm-h:  18px;
    --t-md:  14px;  --t-md-h:  21px;
    --t-lg:  16px;  --t-lg-h:  24px;
    --t-xl:  20px;  --t-xl-h:  28px;
    --t-2xl: 24px;  --t-2xl-h: 32px;
    --t-3xl: 30px;  --t-3xl-h: 38px;
    --t-4xl: 40px;  --t-4xl-h: 48px;
    --t-5xl: 56px;  --t-5xl-h: 62px;

    /* --- razmaci (skala 4px) --- */
    --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 20px;
    --r6: 24px; --r8: 32px; --r10: 40px; --r12: 48px; --r16: 64px;

    /* --- radijusi --- */
    --rad-sm: 8px;
    --rad: 12px;
    --rad-lg: 16px;
    --rad-pun: 999px;

    /* --- senke --- */
    --senka-1: 0 1px 2px rgba(16, 24, 40, .05);
    --senka-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --senka-3: 0 4px 12px rgba(16, 24, 40, .08);
    --senka-4: 0 12px 32px rgba(16, 24, 40, .12);

    /* --- raspored --- */
    --sidebar: 264px;
    --sidebar-usko: 72px;
    --topbar: 60px;
    --sadrzaj-max: 1360px;
    --sajt-max: 1200px;

    /* --- kretanje --- */
    --brzo: 120ms ease;
    --srednje: 180ms ease-out;
    --sporo: 240ms cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* hidden mora da pobedi svaki display iz komponenti (modali, grane menija) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-md);
    line-height: var(--t-md-h);
    color: var(--n-900);
    background: var(--n-25);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

a {
    color: var(--brend-600);
    text-decoration: none;
    transition: color var(--brzo);
}
a:hover { color: var(--brend-700); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--brend-600);
    outline-offset: 2px;
    border-radius: 4px;
}

/* korisnik koji ne želi animacije ih ne dobija */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Tipografija
   ============================================================ */

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--n-900); }

.n-stranica { font-size: var(--t-2xl); line-height: var(--t-2xl-h); font-weight: 700; }
.n-odeljak  { font-size: var(--t-xl);  line-height: var(--t-xl-h); font-weight: 600; }
.n-kartica  { font-size: var(--t-lg);  line-height: var(--t-lg-h); font-weight: 600; }

.tekst-blagi   { color: var(--n-500); }
.tekst-tih     { color: var(--n-400); }
.tekst-sm      { font-size: var(--t-sm); line-height: var(--t-sm-h); }
.tekst-xs      { font-size: var(--t-xs); line-height: var(--t-xs-h); }
.tekst-lg      { font-size: var(--t-lg); line-height: var(--t-lg-h); }
.tekst-sredina { text-align: center; }
.tekst-desno   { text-align: right; }
.tekst-uspeh   { color: var(--uspeh); }
.tekst-greska  { color: var(--greska); }
.tekst-upozor  { color: var(--upozor); }
.jaci          { font-weight: 600; }

/* iznosi — cifre iste širine da se kolone poklapaju */
.broj, .iznos, td.iznos, .tabela td.broj {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.iznos { text-align: right; white-space: nowrap; }

.samo-citac {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Forme
   ============================================================ */

.polje { margin-bottom: var(--r5); }

.polje-labela {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--n-700);
    margin-bottom: 6px;
}

.polje-labela .obavezno { color: var(--greska); margin-left: 2px; }

.unos, .izbor, .oblast {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--t-md);
    color: var(--n-900);
    background: var(--n-0);
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    transition: border-color var(--brzo), box-shadow var(--brzo);
}

.unos::placeholder, .oblast::placeholder { color: var(--n-400); }

.unos:hover, .izbor:hover, .oblast:hover { border-color: var(--n-400); }

.unos:focus, .izbor:focus, .oblast:focus {
    outline: none;
    border-color: var(--brend-500);
    box-shadow: 0 0 0 3px var(--brend-100);
}

.unos:disabled, .izbor:disabled, .oblast:disabled {
    background: var(--n-50);
    color: var(--n-500);
    cursor: not-allowed;
}

.oblast { min-height: 96px; resize: vertical; }

.izbor {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.polje-pomoc { font-size: var(--t-xs); color: var(--n-500); margin-top: 6px; }
.polje-greska { font-size: var(--t-xs); color: var(--greska); margin-top: 6px; }

.polje.ima-gresku .unos,
.polje.ima-gresku .izbor,
.polje.ima-gresku .oblast { border-color: var(--greska); }

.polje.ima-gresku .unos:focus { box-shadow: 0 0 0 3px var(--greska-ivica); }

/* polje sa prefiksom/sufiksom (RSD, %) */
.polje-grupa { display: flex; align-items: stretch; }
.polje-grupa .unos { border-radius: var(--rad-sm) 0 0 var(--rad-sm); }
.polje-dodatak {
    display: flex; align-items: center;
    padding: 0 12px;
    font-size: var(--t-sm);
    color: var(--n-500);
    background: var(--n-50);
    border: 1px solid var(--n-300);
    border-left: 0;
    border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
    white-space: nowrap;
}

.unos-novac { text-align: right; font-variant-numeric: tabular-nums; }

/* checkbox i radio */
.kvadratic, .krugic {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}
.kvadratic input, .krugic input {
    width: 18px; height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brend-600);
    flex: none;
    cursor: pointer;
}
.kvadratic-tekst { font-size: var(--t-md); }
.kvadratic-opis { font-size: var(--t-xs); color: var(--n-500); }

/* prekidač */
.prekidac { display: inline-flex; align-items: center; cursor: pointer; }
.prekidac input { position: absolute; opacity: 0; width: 0; height: 0; }
.prekidac-telo {
    width: 40px; height: 22px;
    background: var(--n-300);
    border-radius: var(--rad-pun);
    position: relative;
    transition: background var(--brzo);
    flex: none;
}
.prekidac-telo::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--n-0);
    border-radius: 50%;
    box-shadow: var(--senka-1);
    transition: transform var(--srednje);
}
.prekidac input:checked + .prekidac-telo { background: var(--brend-600); }
.prekidac input:checked + .prekidac-telo::after { transform: translateX(18px); }
.prekidac input:focus-visible + .prekidac-telo { outline: 2px solid var(--brend-600); outline-offset: 2px; }
.prekidac input:disabled + .prekidac-telo { opacity: .5; cursor: not-allowed; }

/* red forme (dve kolone) */
.red-forme { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r4); }
.red-forme.tri { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
    .red-forme, .red-forme.tri { grid-template-columns: 1fr; }
}

/* ikone — stil stoji na <symbol> u sprajtu, ovde samo veličina.
   fill/stroke se ipak postavljaju da <svg> omotač ne nametne crnu popunu. */
.ikona {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    overflow: visible;
}
.ikona-sm { width: 16px; height: 16px; }
.ikona-lg { width: 24px; height: 24px; }

/* pomoćne klase */
.red { display: flex; align-items: center; gap: var(--r3); }
.red-izmedju { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.kolona { display: flex; flex-direction: column; gap: var(--r3); }
.razmak { flex: 1; }
.sakrij { display: none !important; }

@media (max-width: 900px) { .sakrij-mob { display: none !important; } }
@media (min-width: 901px) { .samo-mob { display: none !important; } }