/*
 * ═══════════════════════════════════════════════════════════════
 *  sidebar.css  —  WIS glavni meni (lijevа kolona)
 *
 *  Učitava se u index.tpl (globalan, važi za sve plugine).
 *
 *  Problemi koje rješava:
 *    1. Ikone — fallback za module bez ikone u bazi
 *    2. Mobilni — nav-label spanovi su sakriveni admin.css-om
 *       u mini-navbar modu; override vraća tekst na mali ekran
 *    3. Fontovi — konzistentni sa font-scale sistemom
 *    4. Hover/active stanje — vidljiviji highlight
 * ═══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════
   SIDEBAR BAZA
   ══════════════════════════════════════════════════════════════ */

.navbar-static-side {
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}

#side-menu {
    /* Malo veći font od globalnog body fonta */
    font-size: calc(var(--fs, 13px) + 0.5px);
}

/* Svaki menu link */
#side-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 25px;
    transition: background 0.15s, border-left-color 0.15s;
    border-left: 3px solid transparent;
    line-height: 1.3;
}

#side-menu > li > a:hover {
    border-left-color: #1ab394;
    background: rgba(255,255,255,0.08);
}

#side-menu > li.active > a {
    border-left-color: #1ab394;
    background: rgba(255,255,255,0.06);
}

/* Submenu linkovi */
#side-menu .nav-second-level li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 52px;
    font-size: calc(var(--fs, 13px) - 0.5px);
    transition: background 0.12s;
}

#side-menu .nav-second-level li a:hover {
    background: rgba(255,255,255,0.06);
}

#side-menu .nav-second-level li.active a {
    background: rgba(255,255,255,0.08);
    font-weight: 600;
}

/* ── Ikone ── */
.edit-fa {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 15px !important; /* Override font-scale koji bi ih smanjio */
    opacity: 0.85;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

#side-menu > li.active > a .edit-fa,
#side-menu > li > a:hover .edit-fa {
    opacity: 1;
}

/* ── Nav label ── */
.nav-label-edit,
.nav-label-edit-2 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Open Sans', sans-serif;
    font-size: inherit;
    letter-spacing: 0.1px;
}

/* Badge (phase status) */
.nav-label-edit .badge,
.nav-label-edit-2 .badge {
    font-size: 9px;
    padding: 1px 4px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Arrow za submenu */
#side-menu .fa.arrow {
    flex-shrink: 0;
    font-size: 11px !important;
    opacity: 0.6;
    transition: transform 0.2s;
}

#side-menu li.active > a .fa.arrow {
    transform: rotate(90deg);
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════
   IKONE PO MODULU — CSS mapping za module bez ikone u bazi
   Matchuje se po href atributu linka
   ══════════════════════════════════════════════════════════════ */

/* Fallback kroz JS (vidi dole u script.tpl ili index.tpl) */

/* ══════════════════════════════════════════════════════════════
   MINI-NAVBAR (kolaps menija — 70px širina)
   ══════════════════════════════════════════════════════════════ */

body.mini-navbar #side-menu > li > a {
    padding: 13px 14px;
    justify-content: center;
    gap: 0;
}

body.mini-navbar .edit-fa {
    width: auto;
    font-size: 17px !important;
}

/* Tooltip na hover u mini modu */
body.mini-navbar #side-menu > li > a {
    position: relative;
}

body.mini-navbar #side-menu > li > a:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 72px;
    top: 50%;
    transform: translateY(-50%);
    background: #2a3142;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILNI FIX
   admin.css skriva nav-label spanove u mini-navbar modu:
     body.mini-navbar .navbar-default .nav li a span { display:none }
   Na pravom mobilnom ekranu (<768px) vraćamo ih jer korisnik
   ne vidi ni tooltip koji se pojavljuje na hover.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Sidebar zauzima punu širinu na mobilnom */
    body.mini-navbar .navbar-static-side,
    .navbar-static-side {
        width: 220px !important;
    }

    /* Override admin.css koji skriva spanove */
    body.mini-navbar .nav-label,
    body.mini-navbar .navbar-default .nav > li > a span,
    body.mini-navbar .navbar-default .nav li a span {
        display: inline !important;
    }

    /* Vrati normalni flex na linkovima */
    body.mini-navbar #side-menu > li > a {
        justify-content: flex-start;
        gap: 10px;
        padding: 11px 20px 11px 25px;
    }

    body.mini-navbar .edit-fa {
        font-size: 15px !important;
        width: 20px;
    }

    /* Sakrij tooltip na mobilnom (nema hovera) */
    body.mini-navbar #side-menu > li > a:hover::after {
        display: none;
    }

    /* Page wrapper ne treba marginu za mini sidebar */
    body.mini-navbar #page-wrapper {
        margin-left: 0 !important;
    }

    /* Sidebar overlay pozicija na mobilnom */
    .navbar-static-side.additional-class {
        z-index: 2020;
        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
    }
}

/* Tablet (768-991px) — malo uži sidebar ali sa tekstom */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-static-side {
        width: 180px;
    }

    #page-wrapper {
        margin-left: 180px;
    }

    #side-menu > li > a {
        padding: 10px 12px 10px 15px;
    }

    .nav-label-edit {
        font-size: calc(var(--fs, 13px) - 0.5px);
    }
}

/* ══════════════════════════════════════════════════════════════
   PROFILE HEADER (nav-header-top-edit)
   ══════════════════════════════════════════════════════════════ */

.nav-header-top-edit {
    padding: 12px 8px !important;
}

.nav-header-top-edit img.img-circle {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
}

.nav-header-top-edit .font-bold {
    font-size: calc(var(--fs, 13px) + 0.5px);
    font-weight: 700;
}

/* Set as driver header */
.nav-header-edit h3 {
    font-size: calc(var(--fs, 13px) + 1px);
    margin: 4px 0 2px;
}

.cut-name {
    font-size: calc(var(--fs, 13px) + 2px);
    font-weight: 700;
}

body.mini-navbar .nav-header-top-edit img.img-circle {
    width: 40px;
    height: 40px;
}

/* ══════════════════════════════════════════════════════════════
   STATUS LISTA (A/T/D/P oznake na dnu menija)
   ══════════════════════════════════════════════════════════════ */

#status {
    padding: 8px 15px 8px;
    margin: 0;
    font-size: calc(var(--fs, 13px) - 1.5px);
    opacity: 0.6;
    border-top: 1px solid rgba(255,255,255,0.1);
}

#status li {
    list-style: none;
    padding: 1px 0;
}

body.mini-navbar #status {
    display: none !important; /* Sakrij u mini modu */
}

/* ══════════════════════════════════════════════════════════════
   SUBMENU PREKLAPANJE — fix za male ekrane
   Problem: .nav-second-level se prikazuje kao flyout (position
   absolute) u admin.css, što na uskim ekranima izlazi van
   vidljivog područja i preklapa se sa sadržajem.
   Rješenje: na <992px submenu postaje inline (bez flyouta),
   scrolluje se unutar sidebar-a kao i parent linkovi.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* Poništi admin.css flyout pozicioniranje */
    #side-menu .nav-second-level,
    body.mini-navbar .nav-second-level,
    body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav-second-level {
        position: static !important;
        display: none;          /* Bootstrap collapse kontroliše show/hide */
        width: auto !important;
        box-shadow: none !important;
        background: transparent !important;
        float: none !important;
        left: auto !important;
        top: auto !important;
    }

    /* Kad je aktivan (Bootstrap collapse .in klasa) — prikaži normalno */
    #side-menu .nav-second-level.in,
    #side-menu li.active > .nav-second-level {
        display: block !important;
    }

    /* Uvučeni submenu linkovi — vizuelno odvoji od parent-a */
    #side-menu .nav-second-level li a {
        padding: 7px 10px 7px 44px !important;
        font-size: calc(var(--fs, 13px) - 1px);
        border-left: 2px solid rgba(255,255,255,0.15);
        margin-left: 20px;
        background: rgba(0,0,0,0.12) !important;
    }

    #side-menu .nav-second-level li a:hover {
        background: rgba(0,0,0,0.2) !important;
        border-left-color: rgba(255,255,255,0.35);
    }

    #side-menu .nav-second-level li.active a {
        background: rgba(0,0,0,0.25) !important;
        border-left-color: #1ab394;
        font-weight: 600;
    }

    /* Sidebar mora biti scrollable da submenuji ne izlaze */
    .navbar-static-side {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 100vh;
    }
}

/* Na mobilnom (<768px) samo submenu indent fix.
   Sidebar show/hide radi kroz postojeći additional-class
   mehanizam iz add-style.tpl (.additional-class = position:fixed)
   — ne diramo ga, samo osiguravamo scrollability. */
@media (max-width: 767px) {

    #side-menu .nav-second-level li a {
        padding: 7px 10px 7px 40px !important;
        font-size: calc(var(--fs, 13px) - 1px);
    }

    /* Kad je sidebar vidljiv (additional-class aktivan),
       osiguraj da je scrollable i da je iznad sadržaja */
    .navbar-static-side.additional-class {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 2020 !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.35);
    }
}