/* -----------------------------------------------------------------------------
    NITTiket
    Copyright (c) 2026 NIT Software Solutions. Sva prava zadrzana.

    Ovaj izvorni kod je vlasnistvo NIT Software Solutions i predstavlja poslovnu
    tajnu. Umnozavanje, distribucija ili koriscenje bilo kog dela bez pisane
    saglasnosti vlasnika nisu dozvoljeni.
   ----------------------------------------------------------------------------- */

/*
    MOST IZMEDJU SYNCFUSION TEME I NASIH TOKENA
    -------------------------------------------
    Syncfusion fluent2 svoje boje drzi u promenljivim --color-sf-* na :root, i
    to kao pune boje, ne kao kanale (neke druge biblioteke tu drze trojku
    "r, g, b"). Zato je premoscavanje obicno preusmeravanje:
    --color-sf-<nesto> dobija var(--nas-token).

    Posledica koja je i bila cilj: mreza menja temu ZAJEDNO sa aplikacijom, iz
    istog izvora. Prekidac teme postavlja jedan atribut na <html>, tokeni se
    prevrnu, a Syncfusion ih pokupi jer vise ne nosi sopstvene vrednosti.

    REDOSLED UCITAVANJA JE OBAVEZAN, definisan je u App.razor:
        1. nittiket.css              (tokeni)
        2. fluent2.css / fluent2-dark.css   (Syncfusion tema)
        3. ovaj fajl                 (most)
    Ovaj fajl ima istu specificnost kao Syncfusion (:root), pa pobedjuje samo
    redosledom. Ako se prebaci iznad teme, nema nikakvo dejstvo.

    Fluent2 se ucitava u dve varijante i prebacuje atributom "disabled" na
    <link> elementu (vidi wwwroot/js/tema.js). Zamena href-a bi znacila novo
    preuzimanje i vidljivo treperenje mreze pri svakoj promeni teme.

    Kao i u nittiket.css: ovde nema nijedne heks vrednosti, sve ide kroz token.
*/

/* ============================================================================
   1. POVRSINE, TEKST I LINIJE
   ============================================================================ */
:root {
    --color-sf-content-bg-color: var(--surf);
    --color-sf-content-bg-color-alt1: var(--surf2);
    --color-sf-content-bg-color-alt2: var(--surf2);
    --color-sf-content-bg-color-alt3: var(--surf3);
    --color-sf-content-bg-color-alt4: var(--surf3);
    --color-sf-content-bg-color-alt5: var(--surf3);
    --color-sf-content-bg-color-alt6: var(--surf3);
    --color-sf-content-bg-color-hover: var(--surf3);
    --color-sf-content-bg-color-focus: var(--surf3);
    --color-sf-content-bg-color-pressed: var(--ac-bg);
    --color-sf-content-bg-color-selected: var(--ac-bg);
    --color-sf-content-bg-color-dragged: var(--surf3);
    --color-sf-content-bg-color-disabled: var(--surf2);

    --color-sf-content-text-color: var(--t1);
    --color-sf-content-text-color-alt1: var(--t2);
    --color-sf-content-text-color-alt2: var(--t2);
    --color-sf-content-text-color-alt3: var(--t3);
    --color-sf-content-text-color-hover: var(--t1);
    --color-sf-content-text-color-focus: var(--t1);
    --color-sf-content-text-color-pressed: var(--ac-tx);
    --color-sf-content-text-color-selected: var(--ac-tx);
    --color-sf-content-text-color-dragged: var(--t2);
    --color-sf-content-text-color-disabled: var(--t3);
    --color-sf-placeholder-text-color: var(--t3);

    --color-sf-border: var(--line2);
    --color-sf-border-light: var(--line);
    --color-sf-border-alt: var(--line2);
    --color-sf-border-dark: var(--line3);
    --color-sf-border-hover: var(--line3);
    --color-sf-border-pressed: var(--ac);
    --color-sf-border-focus: var(--ac);
    --color-sf-border-selected: var(--ac);
    --color-sf-border-dragged: var(--ac);
    --color-sf-border-disabled: var(--line);
    --color-sf-border-error: var(--dg);
    --color-sf-border-success: var(--ok);
    --color-sf-border-warning: var(--wn);
    --color-sf-border-info: var(--ac);

    /* Padajuci spiskovi i meniji su preklop - njima je povrsina --surf, a ne
       --bg, jer lebde iznad strane. */
    --color-sf-flyout-bg-color: var(--surf);
    --color-sf-flyout-bg-color-hover: var(--surf3);
    --color-sf-flyout-bg-color-selected: var(--ac-bg);
    --color-sf-flyout-text-color: var(--t1);
    --color-sf-flyout-text-color-hover: var(--t1);
    --color-sf-flyout-text-color-selected: var(--ac-tx);

    /* Oblacic je namerno obrnut u odnosu na stranu - u obe teme. Zato mu
       pozadina uzima boju teksta, a tekst boju povrsine. */
    --color-sf-tooltip-bg-color: var(--t1);
    --color-sf-tooltip-text-color: var(--surf);

    --color-sf-skeleton-bg-color: var(--surf3);
    --color-sf-icon-color: var(--t2);
    --color-sf-icon-color-hover: var(--t1);
    --color-sf-icon-color-hover-alt: var(--t1);
    --color-sf-icon-color-pressed: var(--ac);
    --color-sf-icon-color-disabled: var(--t3);
    --color-sf-toolbar-icon-color: var(--t2);
}

/* ============================================================================
   2. AKCENAT
   Sve sto Syncfusion zove "primary" prati nas --ac, pa promena akcenta menja
   i mrezu: izabrani red, dugme sa filterom, oznaka stranice u paginatoru.
   ============================================================================ */
:root {
    --color-sf-primary: var(--ac);
    --color-sf-primary-light: var(--ac-ln);
    --color-sf-primary-lighter: var(--ac-bg);
    --color-sf-primary-dark: var(--ac-h);
    --color-sf-primary-darker: var(--ac-h);
    --color-sf-primary-outline: var(--ac-bg);
    --color-sf-primary-label-color: var(--ac-tx);
    --color-sf-primary-cell-selection: var(--ac-bg);

    /* Tekst NA punom akcentu je uvek najsvetliji neutral - i u tamnoj temi.
       --ac je u obe teme dovoljno zasicen da beo tekst na njemu ima kontrast. */
    --color-sf-primary-text-color: var(--n0);

    --color-sf-primary-bg-color: var(--ac);
    --color-sf-primary-bg-color-hover: var(--ac-h);
    --color-sf-primary-bg-color-focus: var(--ac-h);
    --color-sf-primary-bg-color-pressed: var(--ac-h);
    --color-sf-primary-bg-color-selected: var(--ac-h);
    --color-sf-primary-bg-color-disabled: var(--ac-bg);

    --color-sf-primary-border-color: var(--ac);
    --color-sf-primary-border-color-hover: var(--ac-h);
    --color-sf-primary-border-color-focus: var(--ac-h);
    --color-sf-primary-border-color-pressed: var(--ac-h);
    --color-sf-primary-border-color-selected: var(--ac-h);
    --color-sf-primary-border-color-disabled: var(--ac-ln);

    --color-sf-primary-text: var(--ac-tx);
    --color-sf-primary-text-hover: var(--ac-h);
    --color-sf-primary-text-focus: var(--ac-h);
    --color-sf-primary-text-pressed: var(--ac-h);
    --color-sf-primary-text-selected: var(--ac-h);
    --color-sf-primary-text-disabled: var(--t3);

    --color-sf-brand-primary: var(--ac);
    --color-sf-brand-primary-d10: var(--ac-h);
    --color-sf-link-button-hover: var(--ac-h);
    --color-sf-utility-primary-lighter: var(--ac-bg);

    /* "Secondary" je kod Syncfusiona obicno dugme na povrsini, ne druga boja. */
    --color-sf-secondary-bg-color: var(--surf);
    --color-sf-secondary-bg-color-hover: var(--surf3);
    --color-sf-secondary-bg-color-focus: var(--surf3);
    --color-sf-secondary-bg-color-pressed: var(--surf3);
    --color-sf-secondary-bg-color-selected: var(--ac-bg);
    --color-sf-secondary-bg-color-disabled: var(--surf2);
    --color-sf-secondary-border-color: var(--line2);
    --color-sf-secondary-border-color-hover: var(--line3);
    --color-sf-secondary-border-color-focus: var(--ac);
    --color-sf-secondary-border-color-pressed: var(--line3);
    --color-sf-secondary-border-color-selected: var(--ac);
    --color-sf-secondary-border-color-disabled: var(--line);
    --color-sf-secondary-text-color: var(--t1);
    --color-sf-secondary-text-color-hover: var(--t1);
    --color-sf-secondary-text-color-focus: var(--t1);
    --color-sf-secondary-text-color-pressed: var(--t1);
    --color-sf-secondary-text-color-selected: var(--ac-tx);
    --color-sf-secondary-text-color-disabled: var(--t3);
    --color-sf-secondary-outline: var(--line2);
    --color-sf-secondary-badge-bg-color: var(--surf3);
    --color-sf-secondary-badge-border-color: var(--line2);
}

/* ============================================================================
   3. ZNACENJSKE BOJE
   Nas semanticki sloj ima cetiri vrednosti po znacenju (puna, pozadina, tekst,
   linija); Syncfusion ima vise imena za isto - sva vode na te cetiri.
   ============================================================================ */
:root {
    --color-sf-success: var(--ok);
    --color-sf-success-light: var(--ok-bg);
    --color-sf-success-light-alt: var(--ok-bg);
    --color-sf-success-dark: var(--ok);
    --color-sf-success-outline: var(--ok-ln);
    --color-sf-success-text: var(--ok-tx);
    --color-sf-success-bg-color: var(--ok);
    --color-sf-success-bg-color-hover: var(--ok);
    --color-sf-success-border-color: var(--ok-ln);
    --color-sf-utility-success-lighter: var(--ok-bg);

    --color-sf-warning: var(--wn);
    --color-sf-warning-light: var(--wn-bg);
    --color-sf-warning-light-alt: var(--wn-bg);
    --color-sf-warning-dark: var(--wn);
    --color-sf-warning-outline: var(--wn-ln);
    --color-sf-warning-text: var(--wn-tx);
    --color-sf-warning-bg-color: var(--wn);
    --color-sf-warning-bg-color-hover: var(--wn);
    --color-sf-warning-border-color: var(--wn-ln);
    --color-sf-utility-warning-lighter: var(--wn-bg);

    --color-sf-danger: var(--dg);
    --color-sf-danger-light: var(--dg-bg);
    --color-sf-danger-light-alt: var(--dg-bg);
    --color-sf-danger-dark: var(--dg);
    --color-sf-danger-outline: var(--dg-ln);
    --color-sf-danger-text: var(--dg-tx);
    --color-sf-danger-bg-color: var(--dg);
    --color-sf-danger-bg-color-hover: var(--dg);
    --color-sf-danger-border-color: var(--dg-ln);

    /* "Info" nema svoje znacenje u nasem sloju - obavestenje je akcenat. */
    --color-sf-info: var(--ac);
    --color-sf-info-light: var(--ac-bg);
    --color-sf-info-light-alt: var(--ac-bg);
    --color-sf-info-dark: var(--ac-h);
    --color-sf-info-outline: var(--ac-ln);
    --color-sf-info-text: var(--ac-tx);
    --color-sf-info-bg-color: var(--ac);
    --color-sf-info-bg-color-hover: var(--ac-h);
    --color-sf-info-border-color: var(--ac-ln);
    --color-sf-utility-info-lighter: var(--ac-bg);
}

/* ============================================================================
   4. MREZA
   Promenljive pokrivaju boje, ali ne i oblik. Sirina linija, radijus i pismo
   su u fluent2 upisani u pravila, pa se ovde dopisuju izricito - inace mreza
   ostaje jedini deo aplikacije sa drugim fontom i drugim uglovima.
   ============================================================================ */

.e-control,
.e-css,
.e-grid {
    font-family: var(--pismo);
}

.e-grid {
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    color: var(--t1);
    /* Radijus na spoljnom okviru bez ovoga secu uglovi zaglavlja i paginatora. */
    overflow: hidden;
}

.e-grid .e-gridheader {
    background: var(--surf3);
    border-bottom-color: var(--line2);
}

.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background: var(--surf3);
    border-color: var(--line2);
}

.e-grid .e-headercelldiv,
.e-grid .e-headertext {
    color: var(--t2);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.e-grid .e-row .e-rowcell {
    background: var(--surf);
    border-color: var(--line);
    color: var(--t1);
    font-size: .83rem;
}

/* Naizmenicni red uzima drugi nivo povrsine, ne sivu iz teme. */
.e-grid .e-altrow .e-rowcell { background: var(--surf2); }

.e-grid .e-row:hover .e-rowcell { background: var(--surf3); }

.e-grid .e-row .e-rowcell.e-selectionbackground,
.e-grid .e-row.e-active .e-rowcell {
    background: var(--ac-bg);
    color: var(--ac-tx);
}

.e-grid .e-gridcontent { background: var(--surf); }

.e-grid .e-gridpager,
.e-pager {
    background: var(--surf2);
    border-color: var(--line2);
    color: var(--t2);
}

.e-pager .e-numericitem { background: transparent; color: var(--t2); }
.e-pager .e-numericitem:hover { background: var(--surf3); color: var(--t1); }

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    background: var(--ac);
    color: var(--n0);
}

.e-grid .e-toolbar,
.e-grid .e-groupdroparea {
    background: var(--surf);
    border-color: var(--line);
    color: var(--t2);
}

/* Prazna mreza mora da lici na nase prazno stanje, ne na kvar. */
.e-grid .e-emptyrow td {
    background: var(--surf);
    color: var(--t2);
    text-align: center;
    padding: 1.6rem .7rem;
}