/* ---------------------------------------------------------------- PHNX --
   Nadgradnja Bootstrap 5.3 teme. Sve boje idu preko Bootstrap CSS varijabli,
   pa svetla i tamna tema rade bez dodatnih pravila.                        */

:root {
    --phnx-topbar-h: 58px;
    --phnx-sidebar-w: 232px;
}

body {
    padding-top: var(--phnx-topbar-h);
}

/* ------------------------------------------------------------- top bar -- */
.phnx-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--phnx-topbar-h);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .9rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.phnx-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-decoration: none;
    color: inherit;
}

.phnx-brand-ime {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .06em;
    color: var(--bs-primary);
}

.phnx-brand-podnaslov {
    font-size: .66rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------- sidebar -- */
.phnx-sidebar {
    position: fixed;
    top: var(--phnx-topbar-h);
    bottom: 0;
    left: 0;
    width: var(--phnx-sidebar-w);
    z-index: 1035;
    padding: .75rem .5rem;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
    transition: transform .18s ease;
}

.phnx-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: .5rem;
    padding: .55rem .7rem;
    color: var(--bs-body-color);
}

.phnx-sidebar .nav-link:hover {
    background: var(--bs-secondary-bg);
}

.phnx-sidebar .nav-link.active {
    background: var(--bs-primary);
    color: #fff;
}

.phnx-sidebar .nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
}

.phnx-sadrzaj {
    margin-left: var(--phnx-sidebar-w);
    padding: 1.1rem 1.25rem 3rem;
    transition: margin-left .18s ease;
}

/* sakriven meni (desktop) */
body.phnx-meni-skriven .phnx-sidebar { transform: translateX(-100%); }
body.phnx-meni-skriven .phnx-sadrzaj { margin-left: 0; }

.phnx-backdrop {
    display: none;
    position: fixed;
    inset: var(--phnx-topbar-h) 0 0 0;
    z-index: 1030;
    background: rgba(0, 0, 0, .4);
}

/* na uskim ekranima meni je preklopni sloj */
@media (max-width: 991.98px) {
    .phnx-sadrzaj { margin-left: 0; }
    .phnx-sidebar { transform: translateX(-100%); }
    body:not(.phnx-meni-skriven) .phnx-sidebar { transform: none; }
    body:not(.phnx-meni-skriven) .phnx-backdrop { display: block; }
}

/* ------------------------------------------------------- radni prostor -- */

/* Stranica koja se ponaša kao radna površina: gornji panel i alatna traka
   uzimaju koliko im treba, a tabela popunjava sve što ostane. Kad se panel
   skupi ili suzi, tabela se sama razvuče — bez računanja visina u JS-u. */
.phnx-radni-prostor {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: calc(100vh - var(--phnx-topbar-h) - 4rem);
    height: calc(100dvh - var(--phnx-topbar-h) - 4rem);
    min-height: 20rem;
}

.phnx-radni-prostor > .phnx-raste {
    flex: 1 1 auto;
    min-height: 6rem;
}

.phnx-radni-prostor > .phnx-stoji {
    flex: 0 0 auto;
}

.phnx-radni-prostor .phnx-tabela-okvir {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

/* Kartica koja sama sadrži alatnu traku, tabelu i straničenje. */
.phnx-kartica-sadrzaj {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Panel čiju visinu korisnik razvlači hvatanjem donje ivice. */
.phnx-razvlaci {
    overflow: auto;
    resize: vertical;
    min-height: 5rem;
    max-height: 70vh;
}

/* Meni stilova ima devetnaest stavki i ne sme da preraste ekran. */
.phnx-stilovi {
    max-height: 70vh;
    overflow-y: auto;
}

/* ------------------------------------------------- alatna traka na mobilnom -- */

/* Na telefonu filteri pojedu ceo ekran pre nego što se dođe do tabele.
   Zato se na uskim ekranima vide samo pretraga i dugmad, a ostalo se otvara
   dugmetom. Na širokim ekranima sve stoji kao i pre.

   Elementi koji ostaju vidljivi nose klasu phnx-uvek. */

.phnx-filteri-dugme { display: none; }

@media (max-width: 991.98px) {
    .phnx-traka > *:not(.phnx-uvek) { display: none; }
    .phnx-traka.otvoreni > * { display: block; }
    .phnx-traka.otvoreni > .d-flex { display: flex; }

    .phnx-traka > .phnx-uvek { width: 100%; }
    .phnx-traka .input-group { min-width: 0; width: 100%; }
    .phnx-traka select,
    .phnx-traka input[type="date"] { width: 100%; max-width: none; }

    .phnx-filteri-dugme { display: inline-flex; align-items: center; }
}

/* ------------------------------------------------------------- zbirovi -- */

.phnx-zbirovi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.phnx-zbirovi .card-body { padding: .5rem .75rem; }

@media (max-width: 991.98px) {
    /* Umesto dva reda kartica, jedna traka koja se pomera bočno. */
    .phnx-zbirovi {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .phnx-zbirovi > * {
        flex: 0 0 8.5rem;
        scroll-snap-align: start;
    }

    .phnx-zbirovi .h4 { font-size: 1.15rem; }
}

/* Prigušen tekst — natpisi ispod brojeva, opisi, sporedne kolone.

   NE koristi se Bootstrap-ova text-secondary: Bootswatch teme je preslikavaju
   na sopstvenu boju, koja u nekima ispada skoro bela, pa tekst nestane na
   svetloj podlozi. Ovako se prigušuje boja koja je već tu, pa radi u svakoj
   temi — i u svetloj i u tamnoj. */
.phnx-prigusen {
    opacity: .68;
}

/* Šifre, KIB-ovi, konta i brojevi naloga — jednolično pismo da se cifre
   poklapaju po širini i da se greška u šifri odmah vidi. */
.mono {
    font-family: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
    font-size: .9em;
    font-variant-numeric: tabular-nums;
}

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

/* Tabela skroluje unutar sopstvenog okvira. Sticky zaglavlje se lepi za vrh tog
   okvira (top: 0), a ne za prozor — .table-responsive ionako pravi svoj kontekst
   skrolovanja, pa bi merenje od vrha prozora ostavilo zaglavlje da lebdi po sredini. */
.phnx-tabela-okvir {
    overflow: auto;
    max-height: calc(100vh - var(--phnx-topbar-h) - 12rem);
}

.phnx-tabela {
    margin-bottom: 0;
}

.phnx-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-tertiary-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.phnx-tabela tbody tr { cursor: pointer; }

.phnx-tabela td {
    vertical-align: middle;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phnx-kartica-broj {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.phnx-prijava {
    max-width: 22rem;
    margin: 8vh auto;
}

[x-cloak] { display: none !important; }

/* --------------------------------------------------------------- rešetka --
   Pivot ume da bude šir i duži od ekrana, pa zaglavlje i prva kolona ostaju
   na mestu — bez njih se posle par koraka ne zna šta se gleda. */
.phnx-resetka-okvir {
    max-height: calc(100dvh - 22rem);
    overflow: auto;
}

.phnx-resetka thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
}

.phnx-resetka tbody th,
.phnx-resetka thead th:first-child,
.phnx-resetka tfoot th {
    position: sticky;
    left: 0;
    background: var(--bs-body-bg);
}

.phnx-resetka thead th:first-child { z-index: 3; }

.phnx-resetka tfoot td,
.phnx-resetka tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bs-body-bg);
}

.phnx-resetka td { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- napredak --
   Tanka traka pri vrhu dok se nešto dovlači. Ne zna koliko je posla ostalo —
   nijedan naš poziv to ne javlja — pa ne pravi lažan procenat nego kliza
   levo-desno. Poruka je „radi se“, ne „ovoliko je gotovo“. */
.phnx-napredak {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2000;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-in;
}

:root.phnx-radi .phnx-napredak { opacity: 1; }

.phnx-napredak > span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 0 2px 2px 0;
    animation: phnx-klizi 1.1s ease-in-out infinite;
}

@keyframes phnx-klizi {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Ko je isključio kretanje u sistemu dobija mirnu traku, ne treptanje. */
@media (prefers-reduced-motion: reduce) {
    .phnx-napredak > span { animation: none; width: 100%; opacity: .5; }
}

/* Dok se radi, pokazivač kaže da se čeka — sitno, ali odgovara na pitanje
   „da li je moj klik uopšte primljen“. */
:root.phnx-radi { cursor: progress; }

/* ------------------------------------------------------- gornja traka -- */

/* Levi deo sme da se skupi, desni ne. Bez ovoga naziv sekcije gura dugmad
   preko desne ivice na uskom ekranu — a među njima i ono za odjavu, pa se do
   njega ne može doći. Podrazumevano flex ne dozvoljava skupljanje ispod
   sadržaja, otud min-width: 0. */
.phnx-topbar-levo {
    min-width: 0;
    flex: 1 1 auto;
}

.phnx-topbar-desno { flex: 0 0 auto; }

.phnx-brand { min-width: 0; }

.phnx-brand-ime,
.phnx-brand-podnaslov {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Na telefonu se ime korisnika sklanja — ostaje ikonica, koja je dovoljna da
   se meni otvori. Ime i inače piše na naslovnoj strani. */
@media (max-width: 767.98px) {
    .phnx-topbar { padding: 0 .5rem; gap: .4rem; }
    .phnx-topbar-desno { gap: .25rem !important; }

    .phnx-korisnik-ime { display: none; }
    .phnx-brand-podnaslov { display: none; }
}

/* Na vrlo uskim ekranima i prebacivač pisma je preširok za traku. Ostaje u
   meniju izgleda, ne gubi se. */
@media (max-width: 399.98px) {
    .phnx-topbar-desno > [aria-label="Pismo"] { display: none; }
}

/* --------------------------------------------------------- odabrani red -- */

/* Klik bira red, dvoklik ga otvara. Oznaka mora da se vidi i preko redova
   koji već imaju svoju boju (isteklo, slobodno mesto), pa ide unutrašnjom
   senkom i trakom sa strane, a ne pozadinom koja bi ih pregazila. */
.phnx-tabela tbody tr { cursor: pointer; }

.phnx-tabela tbody tr.phnx-odabran > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), .12);
}

.phnx-tabela tbody tr.phnx-odabran > *:first-child {
    box-shadow: inset 3px 0 0 0 var(--bs-primary),
                inset 0 0 0 9999px rgba(var(--bs-primary-rgb), .12);
}

/* Dvoklik inače označi reč u ćeliji, pa red zatreperi izabranim tekstom
   taman kad se otvara obrazac. */
.phnx-tabela tbody { user-select: none; }