/* -----------------------------------------------------------------------------
    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.
   ----------------------------------------------------------------------------- */

/*
    STRANA /vreme - „moje vreme" (resenje V3)
    -----------------------------------------
    Nastavak nittiket.css, ne zamena. Ovde nema nijedne heks vrednosti - vazi
    isto pravilo kao svuda: boja postoji samo kao token, a komponenta je uzima
    kroz var(--...).

    ZASTO SOPSTVEN FAJL, A NE tiketi.css. Zona evidencije vremena u preklopu
    tiketa (V1) stoji unutar .klizni-glavno i pozajmljuje okvir, natpis i red
    dugmadi od preklopa - zato je ostala u tiketi.css, sekcija 11. Ova strana ne
    deli sa preklopom nijedan okvir: ona je platno sa panelima, a njeno jedino
    sopstveno telo je traka dana, koje nigde drugde nema. Spojeni, dva razlicita
    ekrana bi delila fajl koji niko ne bi umeo da podeli nazad.

    Ucitava se POSLE tiketi.css: pozajmljuje .oznaka, .plocica i .sifra, pa mora
    da moze da ih premosti. Ista pravila, ista specificnost - pobedjuje se
    jedino redosledom.

    TRAKA DANA JE JEDINI PRAVI CRTEZ NA STRANI. Skala joj je ista za sve dane
    perioda i racuna je komponenta; ovde je samo posuda, jer bi visina i razmak
    upisani u kod bili drugo mesto koje odlucuje kako dan izgleda.
*/

/* --- traka sa upravljanjem periodom --------------------------------------- */

.vreme-upravljanje {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.vreme-upravljanje .razmak { flex: 1 1 auto; }

.vreme-upravljanje .plocice { margin: 0; }

.vreme-pomeraj {
    display: flex;
    gap: .3rem;
}

.vreme-period {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- dani ----------------------------------------------------------------- */

.vreme-dani {
    display: flex;
    flex-direction: column;
}

.dan-red {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 12rem;
    align-items: center;
    gap: .7rem;
    padding: .35rem 0;
}

/* Prazan dan ostaje red, samo tisi. Izostavljen bi izgledao kao dan koji nije
   ni postojao - a bas to je greska koju „moja nedelja" treba da otkrije. */
.dan-red.prazan { opacity: .62; }

/* Vikend nosi drugu pozadinu, ne drugu boju teksta: boja bi se sudarila sa
   tisinom praznog dana, pa bi prazna subota imala dva razloga da bude bleda. */
.dan-red.vikend { background: var(--surf2); }

.dan-oznaka {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.dan-datum {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dan-ime {
    font-size: .76rem;
    text-transform: capitalize;
}

/* Traka jednog dana. Segmenti se redjaju vodoravno i ne prelamaju se: prelomljen
   segment bi izgledao kao jos jedan upis. */
.dan-traka {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 4px;
    background: var(--surf3);
    overflow: hidden;
}

.dan-traka i {
    display: block;
    height: 100%;
    background: var(--line3);
}

/* Naplativ segment nosi akcenat, nenaplativ ostaje siv. Namerno NIJE zeleno i
   crveno: nenaplativ sat nije greska nego interni rad, a crvena bi svakog
   agenta uverila da je nesto pogresio. */
.dan-traka i.naplativo { background: var(--ac); }

.dan-zbir {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    font-size: .8rem;
}

.dan-ukupno {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- upisi jednog dana ---------------------------------------------------- */

.dan-stavke {
    margin: 0 0 .35rem;
    padding: 0 0 0 7.2rem;
    list-style: none;
}

.dan-stavka {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .18rem 0;
    font-size: .82rem;
    border-top: 1px solid var(--line);
}

.dan-stavka .razmak { flex: 1 1 auto; }

.dan-stavka .sifra {
    font-family: var(--pismo-kod);
    font-size: .78rem;
    color: var(--t2);
    white-space: nowrap;
}

/* Predmet i opis su jedino sto sme da bude skraceno - oba stoje cela u atributu
   title, a sve ostalo u redu je broj ili oznaka, koje skracivanje cini
   neupotrebljivim. */
.dan-predmet,
.dan-opis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dan-predmet { max-width: 22rem; }
.dan-opis { max-width: 18rem; }

.dan-trajanje {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- podnozje sa zbirom perioda ------------------------------------------- */

.vreme-podnozje {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line2);
}

.vreme-podnozje .razmak { flex: 1 1 auto; }

.vreme-ukupno {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   Uzak ekran. Ispod 860px kolona sa zbirom ne staje pored trake, pa red dana
   prelazi u dva reda, a uvlaka ispod njega nestaje - inace bi upisi na telefonu
   poceli od polovine ekrana.
   ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .dan-red {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        row-gap: .3rem;
    }

    .dan-zbir {
        grid-column: 1 / -1;
        align-items: flex-start;
        flex-direction: row;
        gap: .6rem;
    }

    .dan-stavke { padding-left: 0; }

    .dan-stavka { flex-wrap: wrap; }

    .dan-predmet,
    .dan-opis { max-width: 100%; }
}