/* ============================================================
   FAKTO — raspored aplikacije (sidebar + topbar) i vlasničkog panela
   ============================================================ */

.aplikacija { min-height: 100vh; }

/* ---------------- bočni meni ---------------- */

.bocni {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar);
    background: var(--n-0);
    border-right: 1px solid var(--n-200);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform var(--sporo), width var(--sporo);
}

.bocni-logo {
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar);
    padding: 0 var(--r5);
    border-bottom: 1px solid var(--n-200);
    font-family: var(--font-naslov);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--n-900);
    flex: none;
}
.bocni-logo:hover { text-decoration: none; color: var(--n-900); }
.bocni-logo .tacka { color: var(--brend-600); }

.bocni-meni { flex: 1; overflow-y: auto; padding: var(--r4) var(--r3); }

.meni-grupa + .meni-grupa { margin-top: var(--r5); }
.meni-naslov {
    padding: 0 10px 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--n-400);
}

.meni-stavka {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    margin-bottom: 2px;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--n-700);
    border-radius: var(--rad-sm);
    border-left: 3px solid transparent;
    transition: background var(--brzo), color var(--brzo);
    width: 100%;
    /* grane menija su <button>, a njemu pregledač centrira tekst */
    text-align: left;
}
.meni-stavka:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
.meni-stavka .ikona { color: var(--n-400); }
.meni-stavka:hover .ikona { color: var(--n-500); }

.meni-stavka.aktivna {
    background: var(--brend-50);
    color: var(--brend-700);
    border-left-color: var(--brend-600);
}
.meni-stavka.aktivna .ikona { color: var(--brend-600); }

.meni-stavka.zakljucana { color: var(--n-400); }
.meni-stavka.zakljucana .ikona-katanac { margin-left: auto; width: 14px; height: 14px; }

.meni-tekst { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.meni-bedz {
    font-size: 10px; font-weight: 600; line-height: 16px;
    padding: 0 6px;
    border-radius: var(--rad-pun);
    background: var(--akcenat-50);
    color: var(--akcenat-700);
}
.meni-bedz.brend { background: var(--brend-100); color: var(--brend-700); }

/* podstavke */
.meni-deca { padding-left: 34px; overflow: hidden; }
.meni-dete {
    display: block;
    padding: 7px 10px;
    font-size: var(--t-sm);
    color: var(--n-500);
    border-radius: 6px;
}
.meni-dete:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
.meni-dete.aktivna { color: var(--brend-700); font-weight: 500; }

.meni-strelica { transition: transform var(--srednje); color: var(--n-400); width: 16px; height: 16px; }
.meni-stavka[aria-expanded="true"] .meni-strelica { transform: rotate(90deg); }

.bocni-noga { padding: var(--r3); border-top: 1px solid var(--n-200); flex: none; }

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

.gornja {
    position: fixed;
    top: 0; right: 0; left: var(--sidebar);
    height: var(--topbar);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--n-200);
    display: flex; align-items: center; gap: var(--r3);
    padding: 0 var(--r5);
    z-index: 40;
}
.gornja-naslov { font-size: var(--t-lg); font-weight: 600; }

.gornja-pretraga {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    min-width: 220px;
    font-size: var(--t-sm);
    color: var(--n-400);
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
}
.gornja-pretraga:hover { background: var(--n-100); text-decoration: none; }
.gornja-pretraga kbd {
    margin-left: auto;
    font-size: 11px; font-family: var(--font);
    padding: 1px 5px;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: 4px;
}

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brend-100);
    color: var(--brend-700);
    display: grid; place-items: center;
    font-size: var(--t-sm); font-weight: 600;
    flex: none;
}
.avatar-lg { width: 44px; height: 44px; font-size: var(--t-lg); }

.zvono { position: relative; }
.zvono-tacka {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px;
    background: var(--greska);
    border: 2px solid var(--n-0);
    border-radius: 50%;
    display: none;
}
/* tačku pali klasa na zvonu — tako je JS može upaliti bez novog HTML-a */
.zvono.ima-novo .zvono-tacka { display: block; }

/* prekidač agencije */
.izbor-agencije {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    font-size: var(--t-sm);
    color: var(--n-700);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    max-width: 220px;
}
.izbor-agencije:hover { background: var(--n-50); text-decoration: none; }
.izbor-agencije .naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- sadržaj ---------------- */

.sadrzaj {
    margin-left: var(--sidebar);
    padding-top: var(--topbar);
    min-height: 100vh;
}
.sadrzaj-unutra {
    max-width: var(--sadrzaj-max);
    margin: 0 auto;
    padding: var(--r6) var(--r6) var(--r16);
}

.zaglavlje-stranice {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--r4); flex-wrap: wrap;
    margin-bottom: var(--r6);
}
.zaglavlje-stranice .opis { color: var(--n-500); font-size: var(--t-sm); margin-top: 4px; }
.zaglavlje-akcije { display: flex; gap: 10px; flex-wrap: wrap; }

.mrvice { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--n-500); margin-bottom: 10px; }
.mrvice a { color: var(--n-500); }
.mrvice a:hover { color: var(--n-900); }

/* mreže */
.mreza { display: grid; gap: var(--r4); }
.mreza-2 { grid-template-columns: repeat(2, 1fr); }
.mreza-3 { grid-template-columns: repeat(3, 1fr); }
.mreza-4 { grid-template-columns: repeat(4, 1fr); }
.mreza-2-1 { grid-template-columns: 2fr 1fr; }
.mreza-1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 1100px) {
    .mreza-4 { grid-template-columns: repeat(2, 1fr); }
    .mreza-2-1, .mreza-1-2, .mreza-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .mreza-2, .mreza-4 { grid-template-columns: 1fr; }
}

/* ---------------- mobilni ---------------- */

.otvori-meni { display: none; }
.zaklon { display: none; }

@media (max-width: 1024px) {
    .bocni { transform: translateX(-100%); box-shadow: var(--senka-4); }
    .bocni.otvoren { transform: translateX(0); }
    .gornja { left: 0; }
    .sadrzaj { margin-left: 0; padding-bottom: 68px; }
    .sadrzaj-unutra { padding: var(--r4) var(--r4) var(--r12); }
    .otvori-meni { display: inline-flex; }

    .zaklon {
        position: fixed; inset: 0; z-index: 45;
        background: rgba(16, 24, 40, .4);
    }
    .zaklon.vidljiv { display: block; }
}

/* donja traka na telefonu — 4 najčešće akcije */
.donja-traka { display: none; }

@media (max-width: 1024px) {
    .donja-traka {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
        display: flex;
        background: var(--n-0);
        border-top: 1px solid var(--n-200);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .donja-stavka {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px;
        font-size: 11px;
        color: var(--n-500);
        min-height: 56px;
        justify-content: center;
    }
    .donja-stavka.aktivna { color: var(--brend-600); }
    .donja-stavka:hover { text-decoration: none; }
    .donja-stavka.glavna .ikona {
        background: var(--brend-600); color: var(--n-0);
        width: 34px; height: 34px; padding: 7px;
        border-radius: 50%;
    }
}

/* ---------------- vlasnički panel ---------------- */

.owner .bocni { background: var(--brend-900); border-right-color: rgba(255, 255, 255, .08); }
.owner .bocni-logo { color: var(--n-0); border-bottom-color: rgba(255, 255, 255, .08); }
.owner .meni-naslov { color: rgba(255, 255, 255, .45); }
.owner .meni-stavka { color: rgba(255, 255, 255, .75); }
.owner .meni-stavka .ikona { color: rgba(255, 255, 255, .45); }
.owner .meni-stavka:hover { background: rgba(255, 255, 255, .08); color: var(--n-0); }
.owner .meni-stavka.aktivna {
    background: rgba(255, 255, 255, .12);
    color: var(--n-0);
    border-left-color: var(--akcenat-500);
}
.owner .meni-stavka.aktivna .ikona { color: var(--akcenat-500); }
.owner .bocni-noga { border-top-color: rgba(255, 255, 255, .08); }

/* Vlasnički panel je alat za posao, ne za telefon: tabela ostaje tabela i na
   uskom ekranu, samo se skroluje vodoravno. Mobilne kartice bi ovde krile
   kolone koje su nam potrebne za odluku. */
@media (max-width: 900px) {
    .owner .tabela-omot { display: block; }
    .owner .lista-kartica { display: none; }
}

.owner-oznaka {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px;
    background: var(--akcenat-500); color: var(--brend-900);
    border-radius: var(--rad-pun);
}

/* traka impersonacije — mora da bode oči */
.traka-impersonacija {
    position: sticky; top: 0; z-index: 70;
    display: flex; align-items: center; gap: var(--r3);
    padding: 8px var(--r5);
    background: var(--greska);
    color: var(--n-0);
    font-size: var(--t-sm);
    font-weight: 500;
}
.traka-impersonacija .dugme { margin-left: auto; background: rgba(255, 255, 255, .2); color: var(--n-0); }
.traka-impersonacija .dugme:hover { background: rgba(255, 255, 255, .3); }

/* ---------------- prazan layout (prijava, onboarding) ---------------- */

.prazan-ekran {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--r10) var(--r5);
    background: var(--n-25);
}
.prazan-logo {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-naslov);
    font-size: var(--t-2xl); font-weight: 700;
    color: var(--n-900);
    margin-bottom: var(--r8);
}
.prazan-logo:hover { text-decoration: none; color: var(--n-900); }
.prazan-logo .tacka { color: var(--brend-600); }

.prazan-kartica {
    width: min(440px, 100%);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-2);
    padding: var(--r8);
}
.prazan-kartica.siroka { width: min(720px, 100%); }
.prazan-naslov { font-size: var(--t-2xl); font-weight: 700; margin-bottom: 6px; }
.prazan-opis { color: var(--n-500); font-size: var(--t-sm); margin-bottom: var(--r6); }
.prazan-noga { text-align: center; margin-top: var(--r5); font-size: var(--t-sm); color: var(--n-500); }