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

   OBAVESTENJA - zvonce (Z1) i strana /obavestenja (Z2), odobreni 31.08.2026.

   Nijedna heks vrednost ne sme da udje u ovaj fajl. Boje postoje samo u
   nittiket.css, sekcija 1; ovde se uzimaju kroz var(--...).

   Klasa .obav i sve unutar nje NAMERNO se koriste na OBA mesta - zvonce i strana
   prikazuju iste zapise, pa ne smeju da izgledaju kao dva razlicita podatka. Ono
   sto strana donosi vise (pun sadrzaj, znacka ozbiljnosti) dodaje se klasom, ne
   drugim imenom. Ista pouka kao iz stavke D19, gde su se dva mehura poruke
   razisla upravo tako.
   --------------------------------------------------------------------------- */

/* ================================================================= Z1 ZVONCE */

.zvonce-sidro { position: relative; display: inline-flex; }

.zvonce { position: relative; }

.zvonce.otvoreno {
    background: var(--ac-bg);
    color: var(--ac-tx);
}

/* Znacka nosi BROJ, ne tackicu: „imas nesto" i „imas devetnaest stvari" su dva
   razlicita stanja, a razlika odlucuje hoce li covek kliknuti sada ili kasnije. */
.zvonce-znacka {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--dg);
    color: var(--n0);
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surf);
}

/* Nevidljiva podloga hvata klik van liste. Ne sme da zatamni ekran: zvonce je
   sporedna radnja i ne zaustavlja ono sto je covek radio. */
.zvonce-podloga {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.zvonce-padajuca {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    box-shadow: var(--sh3);
    overflow: hidden;
}

.zvonce-glava {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--line);
}

.zvonce-glava .nas { font-weight: 650; font-size: .87rem; }

.zvonce-telo {
    max-height: 340px;
    overflow-y: auto;
}

.zvonce-dno {
    border-top: 1px solid var(--line);
    background: var(--surf2);
    padding: .55rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}

.zvonce-dno .pomoc { margin: 0; font-size: .72rem; }

/* ====================================================== JEDNO OBAVESTENJE */

/* Obavestenje je <button>: red na koji se klikce mora da bude dostupan tastaturi.
   Ista klasa u zvoncu i na strani - vidi zaglavlje fajla. */
.obav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    width: 100%;
    padding: .6rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.obav:last-child { border-bottom: 0; }
.obav:hover { background: var(--surf2); }

/* Neprocitano nosi podlogu, ne samo podebljan naslov: u listi od dvadeset redova
   se tezina slova ne primeti, a podloga se vidi na prvi pogled. */
.obav.novo { background: var(--ac-bg); }
.obav.novo:hover { background: var(--ac-bg); filter: brightness(.98); }

.obav .ikonica {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--r);
    display: grid;
    place-items: center;
    font-size: .82rem;
}

/* Boja nosi OZBILJNOST, znak nosi VRSTU - dve ose, dva kanala. */
.obav .ikonica.kriticno { background: var(--dg-bg); color: var(--dg-tx); }
.obav .ikonica.upozorenje { background: var(--wn-bg); color: var(--wn-tx); }
.obav .ikonica.info { background: var(--ac-bg); color: var(--ac-tx); }

.obav .sredina {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.obav .naslov { font-size: .84rem; font-weight: 600; line-height: 1.35; }

/* Procitano gubi tezinu i tisi se, ali OSTAJE citljivo: to je i dalje podatak,
   ne otpad. */
.obav.procitano .naslov { font-weight: 450; color: var(--t2); }

.obav .sadrzaj {
    font-size: .8rem;
    color: var(--t2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Na punoj strani ima mesta, pa se sadrzaj ne sece. */
.obav .sadrzaj.puni {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
}

.obav .dno {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .72rem;
    color: var(--t3);
    margin-top: 1px;
}

.obav .tackica {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ac);
    flex: none;
}

.obav .sifra {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .68rem;
    color: var(--t3);
}

.znacka.kriticno { background: var(--dg-bg); color: var(--dg-tx); border-color: var(--dg-ln); }
.znacka.upozorenje { background: var(--wn-bg); color: var(--wn-tx); border-color: var(--wn-ln); }
.znacka.info { background: var(--ac-bg); color: var(--ac-tx); border-color: var(--ac-ln); }

/* ================================================================= Z2 STRANA */

.obavestenja {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: .75rem;
}

.obavestenja-traka {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.obavestenja-traka h1 { font-size: 1.05rem; margin: 0; }

.obavestenja-opis {
    flex: none;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ac);
    border-radius: var(--r);
    background: var(--surf2);
    color: var(--t2);
    font-size: .84rem;
}

.obavestenja-telo {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: .75rem;
}

.obavestenja .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.filteri {
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}

.filter {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .4rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: var(--t2);
    font: inherit;
    font-size: .83rem;
    text-align: left;
    cursor: pointer;
}

.filter:hover { background: var(--surf3); }

.filter.tek {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
    color: var(--ac-tx);
    font-weight: 600;
}

.filter .kol { margin-left: auto; font-size: .74rem; color: var(--t3); }

.filter-naslov {
    font-size: .68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--t3);
    padding: .6rem .5rem .25rem;
}

.obavestenja .lista-telo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Razdelnik dana ostaje vidljiv dok se lista pomera: bez toga covek koji skroluje
   izgubi iz vida kom danu red pripada, a datum u svakom redu bi ponovio istu
   vrednost dvadeset puta. */
.obavestenja .dan {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .4rem .75rem;
    background: var(--surf2);
    border-bottom: 1px solid var(--line);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    font-weight: 650;
}

/* --------------------------------------------------------------- uzak ekran */

@media (max-width: 900px) {
    .obavestenja-telo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    /* Filteri prelaze u vodoravnu traku koja se pomera - uspravan spisak od devet
       dugmadi na telefonu bi pojeo pola ekrana pre prvog obavestenja. */
    .obavestenja .filteri {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .3rem;
    }

    .obavestenja .filter { width: auto; white-space: nowrap; }
    .obavestenja .filter .kol { margin-left: .3rem; }
    .obavestenja .filter-naslov { display: none; }
}