/* ==================================================
   TOKENS - sve promenljive boja (svetla + tamna tema).
   Ucitava se pre core.css na portalu (header.php) i na stranicama za
   nalog (prijava, lozinka) koje ne ucitavaju core.css.

   Izgled „Kancelarija“: neutralna grafitna osnova, ista za svaku firmu.
   Firma u instance/<firma>/app.css menja SAMO --akcent (i po zelji
   --akcent-tekst / --akcent-bg). Boje sa znacenjem (zeleno = potvrdjeno,
   zuto = nacrt, crveno = storno/upozorenje) se ne menjaju po firmi.
   ================================================== */

:root {
    /* Boja firme */
    --akcent:        #2f5bd3;
    --akcent-tekst:  #2448ad;   /* akcent kao tekst na beloj podlozi (citljiviji) */
    --akcent-bg:     #eaf0fd;   /* blaga pozadina u boji firme (aktivni filter, istaknut red) */
    --akcent-dugme:  var(--akcent);   /* puna boja glavnih dugmadi (beli tekst); firma može da je odvoji od akcenta */

    /* Meni (levo) - isti za sve firme */
    --meni:          #1f2329;
    --meni-2:        #2a2f37;
    --meni-tekst:    #c6ccd6;
    --meni-sivo:     #7b8492;

    /* Stari nazivi koje koriste komponente - vode na akcent / grafit */
    --navy:          #1f2329;
    --navy-dark:     #15181d;
    --blue:          var(--akcent-dugme);
    --green:         #157347;
    --orange:        #c2560c;
    --red:           #b42318;
    --purple:        #6d4ad6;
    --gold:          var(--akcent);
    --shell:         var(--meni);
    --shell-dark:    var(--meni-2);

    /* UI sistem */
    --bg:            #f4f5f7;
    --bg-card:       #ffffff;
    --text:          #1d2330;
    --text-muted:    #5b6474;
    --text-light:    #8a93a3;
    --border:        #e3e6eb;
    --border-strong: #cfd4dc;
    --naslov:        #1d2330;   /* boja naslova i istaknutog teksta - u tamnoj temi svetla */
    --surface-2:     #f8f9fb;   /* blaga povrsina: hover, red tabele, polje unutar kartice */
    --input-bg:      #ffffff;

    /* Statusi: blaga pozadina (-bg), jaca pozadina (-bg2), ivica (-ivica), tekst na blagoj pozadini (-tekst).
       Tamna tema menja samo ove vrednosti - komponente ih ne bojе direktno. */
    --crvena-bg:      #fdf1f0;  --crvena-bg2:     #fbe1de;  --crvena-ivica:     #f5c2bc;  --crvena-tekst:     #a3261b;
    --narandzasta-bg: #fff5ec;  --narandzasta-bg2: #ffe7d2; --narandzasta-ivica: #fbc99b; --narandzasta-tekst: #9a3e0b;
    --zuta-bg:        #fff8e6;  --zuta-bg2:       #fdefc7;  --zuta-ivica:       #f3d787;  --zuta-tekst:       #7d5200;
    --zelena-bg:      #edf7f1;  --zelena-bg2:     #d9f0e3;  --zelena-ivica:     #a9dcbf;  --zelena-tekst:     #13603d;
    --greska:     #e5261b;   /* greška u formi: jarko crvena, da se ne previdi */
    --greska-bg:  #fff1f0;
    /* Smer dokumenta: prijem = plavo (roba ulazi), izlaz = narandžasto (roba izlazi). Puna boja nosi beli tekst (≥5:1). */
    --ulaz:  #1d5fd1;  --ulaz-bg:  #eaf1fd;  --ulaz-ivica:  #b3cbf5;  --ulaz-tekst:  #1a4fae;
    --izlaz: #c2410c;  --izlaz-bg: #fdf0e8;  --izlaz-ivica: #f3c3a4;  --izlaz-tekst: #a3360a;
    --prenos: #6d3fc7;  --prenos-bg: #f3effc;  --prenos-ivica: #d3c4f2;  --prenos-tekst: #5a32a8;

    --plava-bg:       #edf2fd;  --plava-bg2:      #dbe5fb;  --plava-ivica:      #b4c7f3;  --plava-tekst:      #1f43a3;
    --ljubicasta-bg:  #f4f1fd;  --ljubicasta-bg2: #e7e0fb;  --ljubicasta-ivica: #cfc2f5;  --ljubicasta-tekst: #4c2fa8;
    --roze-bg:        #fcf1f6;  --roze-bg2:       #f8e0ec;  --roze-ivica:       #efbcd5;  --roze-tekst:       #8d1c52;

    /* Razmaci i oblici - manje zaobljeno, poslovno */
    --radius-sm:     4px;
    --radius-md:     6px;
    --radius-lg:     8px;
    --radius-xl:     10px;

    /* Senke - jedva primetne, ivice nose oblik */
    --shadow-sm:     0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md:     0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg:     0 16px 40px rgba(16, 24, 40, .16);

    /* Tranzicija */
    --transition:    .15s ease;

    /* Razmak skala */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Sirina menija */
    --meni-sirina:   232px;
    --traka-visina:  56px;
}

/* =========================
   TAMNA TEMA - ukljucuje je header.php (data-tema="tamna" na <html>).
   Instanca moze da je doradi u svom app.css istim selektorom.
   ========================= */
:root:root[data-tema="tamna"] {
    color-scheme: dark;

    --akcent-tekst:  color-mix(in srgb, var(--akcent) 70%, #ffffff);
    --akcent-bg:     color-mix(in srgb, var(--akcent) 16%, transparent);

    --meni:          #12151a;
    --meni-2:        #1b1f26;

    --navy:          #2a2f37;
    --navy-dark:     #12151a;
    --green:         #3fbf80;
    --orange:        #f08a3c;
    --red:           #f0675b;
    --purple:        #a78bfa;

    --bg:            #0f1216;
    --bg-card:       #171b21;
    --naslov:        #e6e9ee;
    --surface-2:     #1c2128;
    --input-bg:      #13171c;
    --text:          #e6e9ee;
    --text-muted:    #a3acba;
    --text-light:    #6f7887;
    --border:        #2a3039;
    --border-strong: #39414c;

    --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
    --shadow-md:     0 6px 18px rgba(0,0,0,.45);
    --shadow-lg:     0 16px 40px rgba(0,0,0,.55);

    --crvena-bg:      rgba(240, 103, 91, .12); --crvena-bg2:      rgba(240, 103, 91, .22); --crvena-ivica:      rgba(240, 103, 91, .4); --crvena-tekst:      #ff9d94;
    --narandzasta-bg: rgba(240, 138, 60, .12); --narandzasta-bg2: rgba(240, 138, 60, .22); --narandzasta-ivica: rgba(240, 138, 60, .4); --narandzasta-tekst: #f8b47e;
    --zuta-bg:        rgba(243, 194, 91, .12); --zuta-bg2:        rgba(243, 194, 91, .22); --zuta-ivica:        rgba(243, 194, 91, .4); --zuta-tekst:        #f3c25b;
    --zelena-bg:      rgba(63, 191, 128, .12); --zelena-bg2:      rgba(63, 191, 128, .22); --zelena-ivica:      rgba(63, 191, 128, .4); --zelena-tekst:      #6fd8a3;
    --greska:     #ff6b5e;
    --greska-bg:  rgba(255, 107, 94, .12);
    --ulaz:  #1d5fd1;  --ulaz-bg:  rgba(80, 140, 245, .14);  --ulaz-ivica:  rgba(80, 140, 245, .45);  --ulaz-tekst:  #93b8ff;
    --izlaz: #c2410c;  --izlaz-bg: rgba(240, 120, 60, .14);  --izlaz-ivica: rgba(240, 120, 60, .45);  --izlaz-tekst: #ffab7a;
    --prenos: #6d3fc7;  --prenos-bg: rgba(160, 120, 240, .14);  --prenos-ivica: rgba(160, 120, 240, .45);  --prenos-tekst: #c4b0ff;

    --plava-bg:       rgba(110, 150, 240, .12); --plava-bg2:      rgba(110, 150, 240, .22); --plava-ivica:      rgba(110, 150, 240, .4); --plava-tekst:      #a3bdf7;
    --ljubicasta-bg:  rgba(167, 139, 250, .12); --ljubicasta-bg2: rgba(167, 139, 250, .22); --ljubicasta-ivica: rgba(167, 139, 250, .4); --ljubicasta-tekst: #c4b5fd;
    --roze-bg:        rgba(236, 72, 153, .12); --roze-bg2:       rgba(236, 72, 153, .22); --roze-ivica:       rgba(236, 72, 153, .4); --roze-tekst:       #f9a8d4;
}
/* Glatko prebacivanje teme, bez treptanja pri ucitavanju (klasa se dodaje tek posle prvog crtanja) */
html.tema-prelaz, html.tema-prelaz * { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }