/* Brendiranje - Комора овлашћених ревизора.
   Ucitava se posle custom.css, pa gazi boje preuzete iz starog projekta. */

/* Brend plava (izvucena iz komora_logo_200px.png, #0C4DA2) umesto Metronic
   podrazumevane plave (--bs-primary). Ista sema promenljivih kao u
   style.bundle.css (Bootstrap 5.3 var-based tema), pa nasledjuju svi
   elementi koji vec koriste --bs-primary-* (dugmad, linkovi, aktivan meni,
   fokus prsten, badge-ovi...) bez izmene markupa. Crvena iz loga se ne
   koristi ovde - ostaje rezervisana za sam logotip. */
:root,
[data-bs-theme=light] {
    --bs-primary: #0C4DA2;
    --bs-primary-active: #0A3F85;
    --bs-primary-light: #F3F6FA;
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(12, 77, 162, 0.2);
    --bs-primary-rgb: 12, 77, 162;
    --bs-primary-text-emphasis: #052349;
    --bs-primary-bg-subtle: #E7EDF6;
    --bs-primary-border-subtle: #B6CAE3;
}

/* "Info" je u temi ljubicasta (#7239EA) i koristi se kroz ceo projekat na
   dugmadima, linkovima i bedzevima ("btn-info", "text-info",
   "badge-light-info"...). Da bi sve to bilo u brend plavoj, cela "info" sema
   se izjednacava sa "primary" - bez diranja markupa. */
:root,
[data-bs-theme=light] {
    --bs-info: var(--bs-primary);
    --bs-info-active: var(--bs-primary-active);
    --bs-info-light: var(--bs-primary-light);
    --bs-info-inverse: var(--bs-primary-inverse);
    --bs-info-clarity: var(--bs-primary-clarity);
    --bs-info-rgb: var(--bs-primary-rgb);
    --bs-info-text-emphasis: var(--bs-primary-text-emphasis);
    --bs-info-bg-subtle: var(--bs-primary-bg-subtle);
    --bs-info-border-subtle: var(--bs-primary-border-subtle);
}

/* Zaobljenja - tema je izrazito "okrugla" (0.85rem podrazumevano, 1.5rem na
   karticama i svim "lg" varijantama), sto uz ovoliko tabela i obrazaca deluje
   mekano. Cela lestvica se ovde smanjuje na diskretnu meru. Sve sto koristi
   Bootstrap promenljive prati automatski; ispod se gase jos i mesta gde tema
   ima upisane vrednosti, jer ih promenljive ne dohvataju.
   ".rounded-pill" i ".rounded-circle" ostaju netaknuti - to su namerni oblici
   (dugme "Пријава", avatari), a ne opsta zaobljenja. */
:root,
[data-bs-theme=light] {
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 0.625rem;
    --bs-border-radius-xxl: 0.75rem;
}

/* Promenljive komponenti tema ne drzi u ":root" nego na samoj komponenti, pa
   se moraju gaziti tu (inace ostaju upisane vrednosti iz teme). */
.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
}

.dropdown-menu {
    --bs-dropdown-border-radius: var(--bs-border-radius);
}

.accordion {
    --bs-accordion-border-radius: var(--bs-border-radius);
}

.pagination {
    --bs-pagination-border-radius: var(--bs-border-radius);
}

.badge {
    --bs-badge-border-radius: var(--bs-border-radius-sm);
}

.modal {
    --bs-modal-border-radius: var(--bs-border-radius-lg);
}

.tooltip {
    --bs-tooltip-border-radius: var(--bs-border-radius-sm);
}

.popover {
    --bs-popover-border-radius: var(--bs-border-radius);
}

/* Mesta sa upisanim vrednostima: pomocne klase (".rounded-*" idu sa
   "!important", pa i ovde mora) i "lg" varijante polja i dugmadi. */
.rounded {
    border-radius: var(--bs-border-radius) !important;
}

.rounded-1 {
    border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-2 {
    border-radius: var(--bs-border-radius) !important;
}

.rounded-3 {
    border-radius: var(--bs-border-radius-lg) !important;
}

.rounded-4 {
    border-radius: var(--bs-border-radius-xl) !important;
}

.card-rounded {
    border-radius: var(--bs-border-radius-lg);
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .btn,
.input-group.input-group-solid.input-group-lg {
    border-radius: var(--bs-border-radius-lg);
}

/* Omotac sadrzaja strane (".content", prvi element u bloku "content" svakog
   sablona) - odmak od gornje bele trake. Tema ovu klasu ne stiluje. */
.content {
    margin-top: 30px;
}

/* Naslov strane - stoji iznad tabova, van kartice (vidi
   esalter/common/_naslov_strane.html). Krupan i tanak, u boji bliskoj pozadini
   sadrzaja (--bs-app-bg-color, #F6F6F6), pa deluje kao da je utisnut u podlogu
   umesto da se namece kao obican crn tekst. Gornja margina je ista kao "mt-5"
   na tabovima ispod - susedne margine se stapaju, pa je razmak jednak i iznad
   i ispod naslova. */
.kor-naslov-strane {
    margin: 1.25rem 0 0;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #d9d6d6;
    margin-bottom: 1.25rem;
}

@media (max-width: 767.98px) {
    .kor-naslov-strane {
        font-size: 2rem;
    }
}

/* Tabovi na malim ekranima idu jedan ispod drugog, celom sirinom - vodoravno
   ih nema gde (npr. sest registara), a horizontalno skrolovanje se lako
   previdi. Linija ispod svake stavke sluzi kao razdelnik; aktivna je u brend
   plavoj, kao i u vodoravnoj varijanti. */
@media (max-width: 767.98px) {
    .nav-line-tabs {
        flex-direction: column;
        flex-wrap: nowrap;
        border-bottom: 0;
    }

    .nav-line-tabs .nav-item {
        width: 100%;
        margin-bottom: 0;
    }

    .nav-line-tabs .nav-item .nav-link {
        margin: 0;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .nav-line-tabs .nav-item .nav-link.active,
    .nav-line-tabs .nav-item.show .nav-link,
    .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
        border-bottom-color: var(--bs-primary);
    }
}

/* Visina zaglavlja (--bs-app-header-height) u temi je 120px, predvidjena za
   slozenije (viseredne) header-e. Nase zaglavlje ima samo jedan red
   (logo/korisnik), pa ga smanjujemo da sadrzaj glavne kolone pocinje odmah
   ispod njega, blizu vrha - kao i bocni meni. */
@media (min-width: 992px) {
    :root {
        --bs-app-header-height: 80px;
        --bs-app-header-height-actual: 80px;
    }
}

/* Gornja traka je bela, celom sirinom, sa tankom donjom ivicom - u njoj su
   meni sajta i logoi (esalter/common/header_logos.html). Nastavlja se na
   beli bocni meni levo od nje, pa deluju kao jedan okvir oko sadrzaja. */
:root {
    --bs-app-header-base-bg-color: #ffffff;
}

.app-header {
    border-bottom: 1px solid var(--bs-gray-200);
}

/* Podnozje isto - bela traka sa tankom gornjom ivicom, kao pandan gornjoj.
   U temi su ove dve promenljive nedefinisane, pa je podnozje providno.
   Visina podnozja je "auto" (prati sadrzaj), a .app-container ima samo
   bocnu popunu - otud i uspravna, da traka ne bude pripijena uz sadrzaj. */
:root {
    --bs-app-footer-bg-color: #ffffff;
    --bs-app-footer-border-top: 1px solid var(--bs-gray-200);
}

.app-footer .app-container {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Logoi u gornjoj traci - zajednicka visina, da budu poravnati bez obzira
   na izvorne dimenzije slika. */
.kor-header-logo {
    height: 40px;
    width: auto;
}

/* Logoi izradjivaca sajta u podnozju (esalter/common/footer_razvoj.html) -
   diskretno, osetno manje od logoa u gornjoj traci. */
.kor-footer-logo {
    height: 22px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.kor-footer-logo:hover {
    opacity: 1;
}

/* Bocni meni je pribijen uz levu ivicu i ide celom visinom ekrana. U temi
   je to plutajuca bela kartica sirine 350px sa 30px margine sa svih strana
   (demo23) - ovde je jednostavan beli panel sa ivicom desno, kao u
   materijali/templates/vrednovanje. */
@media (min-width: 992px) {
    :root {
        --bs-app-sidebar-width: 280px;
        --bs-app-sidebar-width-actual: 280px;
        --bs-app-sidebar-gap-start: 0px;
        --bs-app-sidebar-gap-end: 0px;
        --bs-app-sidebar-gap-top: 0px;
        --bs-app-sidebar-gap-bottom: 0px;
    }

    /* Tema na kraju style.bundle.css-a daje bocnom meniju ".app-sidebar {
       border-radius: 1.5rem }" (plutajuca kartica iz demo23) - kod nas je to
       panel pribijen uz ivicu, pa se zaobljenje gasi. */
    .app-sidebar {
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        border-right: 1px solid var(--bs-gray-200);
    }

    /* Vrh bocnog menija (logo) iste visine kao gornja traka desno od njega,
       da im se donje ivice poklope. */
    .kor-sidebar-logo {
        height: var(--bs-app-header-height);
        flex-shrink: 0;
    }
}

.kor-sidebar-logo {
    border-bottom: 1px solid var(--bs-gray-200);
}

/* Tema stilizuje klizace ("div::-webkit-scrollbar"), cime Chrome prestaje da
   koristi sistemski izgled i pocinje da iscrtava dugmice sa strelicama na
   krajevima trake. Tema ih ne sakriva, pa iskaču npr. u bocnom meniju - ovde
   ih gasimo svuda. */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Meni u bocnoj traci dobija klizac tek kad ima sta da se skroluje - tema
   koristi "overflow-y: scroll" (.hover-scroll-overlay-y), pa traka klizaca
   stalno zauzima prostor uz desnu ivicu menija. */
#kt_app_sidebar_menu_wrapper {
    overflow-y: auto;
}

/* Logo na vrhu bocnog menija. */
.kor-logo-sidebar {
    height: 46px;
    width: auto;
    max-width: 100%;
}

/* Maksimalna sirina sadrzaja i gornjeg (javnog) menija - 1600px, centrirano.
   Container-xxl (Bootstrap) bi ovo uradio tek od 1400px ekrana nadalje;
   ovde je nezavisno od te granice i vazi uvek, sa ili bez bocnog menija. */
#kt_app_content_container,
#kt_app_header_container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Logo u header-u. Zaglavlje i bocni meni se stiluju nize, u delu o meniju. */
.kor-logo-header {
    height: 44px;
    width: auto;
}

@media (max-width: 991.98px) {
    .kor-logo-header {
        height: 32px;
    }
}

/* Logo na stranicama za prijavu/registraciju/reset i na 403/404. */
.kor-logo-auth {
    max-width: 100%;
    height: auto;
    width: 320px;
}

/* Logo na loaderu - beli "tanjir" jer je pozadina loadera tamna. */
.kor-logo-loader {
    width: 300px;
    max-width: 80vw;
    height: auto;
}

/* Podnozje uvek na dnu ekrana, i kad stranica ima malo sadrzaja - i u
   kontrolnom panelu (#kt_footer) i na javnim stranama registra
   (.kor-podnozje). Koren se rasteze na celu visinu prozora, a
   `margin-top: auto` gura podnozje na dno kolone; kad sadrzaja ima vise,
   podnozje ide ispod njega kao i do sada. */
.kor-koren {
    min-height: 100vh;
}

#kt_footer,
.kor-podnozje {
    margin-top: auto;
}

/* Gornja traka (kontakt + drustvene mreze) iznad bele navigacije - vidi
   templates/esalter/common/top_bar.html. Prikazuje se samo na desktopu i
   samo neprijavljenom posetiocu. Nije fiksirana - odlazi navise zajedno sa
   ostatkom strane pri skrolovanju, kao i bela traka ispod nje. */
@media (min-width: 992px) {
    .kor-topbar {
        height: 42px;
        background: #0A2340;
    }
}

.kor-topbar-kontakt a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}

.kor-topbar-kontakt a:hover {
    color: #fff;
}

.kor-topbar-kontakt i {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.4rem;
}

/* Dijagonalni "zasek" - isti trik kao u referentnom dizajnu (clip-path
   umesto skew transform-a, da ne izobliči ikonice unutra). */
.kor-topbar-mreze {
    height: 100%;
    background: var(--bs-primary);
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
    padding: 0 1.5rem 0 2.5rem;
}

.kor-topbar-mreze a {
    color: #fff;
    font-size: 0.9rem;
    opacity: 0.85;
}

.kor-topbar-mreze a:hover {
    opacity: 1;
}

/* Bela navigacija - veliki naslovi menija (isto poreklo dizajna kao gore),
   samo za stavke na vrhu (">"), ne i za podstavke u padajucem meniju. */
@media (min-width: 992px) {
    .app-header-menu > .menu > .menu-item > .menu-link .menu-title {
        text-transform: uppercase;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.03em;
    }
}

.kor-cta {
    white-space: nowrap;
}