/* ==========================================================================
   mojUred dizajn sloj (2026-10) - moderniji izgled cijele aplikacije bez diranja pojedinačnih stranica.
   Isti jezik kao prijava/registracija (Content/auth.css): zaobljene kartice, meke sjenke, mirne pozadine,
   polja 10px radijusa s fokus prstenom u boji teme, jedna skala fonta (sadržaj 13.5px, zaglavlja 12px).
   Sva pravila su pod html[data-tema] (atribut postavlja _GetSetTheme.cshtml u layoutima aplikacije):
   - veća specifičnost od Inspinia/Bootstrap/Kendo pravila, pa uglavnom ne treba !important,
   - javne stranice (landing, prijava, uputstva) ostaju netaknute.
   Boje dolaze iz varijabli teme (--brand-*, mojured-theme.css / mojured-teme.css).
   Footer aplikacije je u mojured-teme.css.
   ========================================================================== */

html[data-tema] {
    --mu-bg: #f3f5f7;
    --mu-card: #ffffff;
    --mu-line: #e6eaee;
    --mu-line-soft: #eff2f4;
    --mu-ink: #1d2433;
    --mu-ink-2: #4a5466;
    --mu-mute: #8a93a3;
    --mu-radius: 14px;
    --mu-radius-sm: 10px;
    --mu-fs: 13.5px;       /* sadržaj: tekst, gridovi, polja, dugmad */
    --mu-fs-sm: 12px;      /* zaglavlja kolona, oznake, sitni tekst */
    --mu-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .045);
    --mu-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px rgba(16, 24, 40, .08);
    --mu-ring: 0 0 0 3px rgba(var(--brand-rgb, 20, 176, 172), .16);
}

/* ---------------------------------------------------------------- Oznake statusa (svi ekrani)
   Meke oznake: svijetla pozadina + jak tekst iste boje - čitljivo u svakoj temi i na bijelim/sivim redovima.
   Gridovi ih ispisuju kao <label class="label ...">. */
html[data-tema] .label,
html[data-tema] .badge {
    border-radius: 999px;
    padding: 3px 9px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .3px;
    text-shadow: none;
    border: 1px solid transparent;
}
/* !important: mojured-theme.css ima .label-primary { background-color: ... !important } */
html[data-tema] .label.label-primary, html[data-tema] .badge.badge-primary { background: var(--brand-primary-soft, #e3f6f5) !important; color: var(--brand-primary-active, #0a6f6c); border-color: rgba(var(--brand-rgb, 20, 176, 172), .25); }
html[data-tema] .label.label-success, html[data-tema] .badge.badge-success { background: #e3f6ec; color: #12784b; border-color: #bfe6d2; }
html[data-tema] .label.label-danger, html[data-tema] .badge.badge-danger { background: #fdeced; color: #c22636; border-color: #f6c7cc; }
html[data-tema] .label.label-warning, html[data-tema] .badge.badge-warning { background: #fff3db; color: #9a6400; border-color: #f5dca5; }
html[data-tema] .label.label-info, html[data-tema] .badge.badge-info { background: #e4f1f9; color: #1a6f96; border-color: #c3dfef; }
html[data-tema] .label.label-default, html[data-tema] .badge.badge-default, html[data-tema] .label:not([class*="label-"]) { background: #eef0f3; color: #4a5466; border-color: #dfe3e8; }

/* ---------------------------------------------------------------- Tabovi vs. meni (svi ekrani)
   mojured-theme.css boji aktivnu stavku menija pravilom .nav > li.active (lijeva traka + pozadina, !important)
   i daje aktivnom tabu gornju liniju (!important). Tabovima ostaje samo podvlaka u boji teme. */
html[data-tema] .nav-tabs > li.active { border-left: 0 !important; background: transparent !important; }
html[data-tema] .nav-tabs > li > a,
html[data-tema] .nav-tabs > li.active > a,
html[data-tema] .panel-options .nav-tabs > li.active > a { border-top: 0; border-left: 0; border-right: 0; }
html[data-tema] .nav-tabs > li.active > a, html[data-tema] .nav-tabs > li.active > a:hover, html[data-tema] .nav-tabs > li.active > a:focus { border-top: 0 !important; }
html[data-tema] .nav-tabs > li.active > a,
html[data-tema] .panel-options .nav-tabs > li.active > a,
html[data-tema] .tabs-container .nav-tabs > li.active > a,
html[data-tema] .tabs-container .nav-tabs > li.active > a:hover,
html[data-tema] .tabs-container .nav-tabs > li.active > a:focus {
    border-bottom: 2px solid var(--brand-primary, #14b0ac);
    background: transparent;
    color: var(--brand-primary-active, #0a6f6c);
    font-weight: 700;
}

/* ---------------------------------------------------------------- Meni korisnika (gore desno)
   Otvara se i na prelaz mišem (desktop s mišem); klik i dalje radi. Bez razmaka između dugmeta i menija,
   da se meni ne zatvori dok miš prelazi na njega. */
@media (hover: hover) and (min-width: 768px) {
    html[data-tema] .mu-user-menu:hover > .dropdown-menu { display: block; }
    html[data-tema] .mu-user-menu > .dropdown-menu { margin-top: 0; }
    html[data-tema] .mu-user-menu > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
}
html[data-tema] .mu-user-dropdown > li > a .fa { width: 18px; text-align: center; margin-right: 6px; color: var(--mu-mute); }
html[data-tema] .mu-user-dropdown > li > a:hover .fa { color: var(--brand-primary, #14b0ac); }
html[data-tema] .mu-user-dropdown > li > a.mu-odjava, html[data-tema] .mu-user-dropdown > li > a.mu-odjava .fa { color: #c22636; }

/* Samo desktop: mobitel ima vlastiti sloj (Content/mu-mobile.css - gridovi kao kartice, donja traka). */
@media (min-width: 768px) {

/* ---------------------------------------------------------------- Okvir i fontovi */
html[data-tema] #page-wrapper { background: var(--mu-bg); font-size: var(--mu-fs); }
html[data-tema] .wrapper-content { padding-top: 22px; }

/* Zaglavlje stranice: bez bijele trake, naslov kao na karticama, mrvice tiše */
html[data-tema] .page-heading {
    background: transparent;
    border: 0;
    padding: 22px 10px 2px;
}
/* Inspinia .border-bottom / .white-bg na zaglavlju koriste !important */
html[data-tema] .page-heading.border-bottom { border-bottom: 0 !important; }
html[data-tema] .page-heading.white-bg { background: transparent !important; }
html[data-tema] .page-heading h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--mu-ink);
    letter-spacing: -.3px;
    margin-top: 6px;
}
html[data-tema] .page-heading .breadcrumb { background: transparent; font-size: var(--mu-fs-sm); padding: 0; }
html[data-tema] .page-heading .breadcrumb > li, html[data-tema] .page-heading .breadcrumb > li a { color: var(--mu-mute); }
html[data-tema] .page-heading .breadcrumb > .active, html[data-tema] .page-heading .breadcrumb strong { color: var(--mu-ink-2); font-weight: 600; }
html[data-tema] .page-heading + .wrapper-content { padding-top: 14px; }

/* ---------------------------------------------------------------- Kartice (ibox) */
html[data-tema] .ibox {
    background: var(--mu-card);
    border: 1px solid var(--mu-line);
    border-radius: var(--mu-radius);
    box-shadow: var(--mu-shadow);
    margin-bottom: 22px;
}
html[data-tema] .ibox-title {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--mu-line-soft);
    border-radius: var(--mu-radius) var(--mu-radius) 0 0;
    padding: 16px 20px;
    min-height: 0;
}
html[data-tema] .ibox-title h5 { font-size: 15px; font-weight: 700; color: var(--mu-ink); }
html[data-tema] .ibox-content {
    background: transparent;
    border: 0;
    border-radius: 0 0 var(--mu-radius) var(--mu-radius);
    padding: 18px 20px;
    font-size: var(--mu-fs);
}
html[data-tema] .ibox > .ibox-content:first-child { border-radius: var(--mu-radius); }
html[data-tema] .ibox-footer { background: transparent; border-top: 1px solid var(--mu-line-soft); border-radius: 0 0 var(--mu-radius) var(--mu-radius); }

/* KPI kartice (Računi, Ponude, Radni nalozi, Knjigovođa...) */
html[data-tema] .ibox.ibox-stat { border-left: 1px solid var(--mu-line); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
html[data-tema] .ibox.ibox-stat:hover { transform: translateY(-3px); box-shadow: var(--mu-shadow-hover); border-color: rgba(var(--brand-rgb, 20, 176, 172), .35); }
html[data-tema] .ibox-stat .stat-label { font-size: var(--mu-fs-sm); letter-spacing: .5px; color: var(--mu-mute); }
html[data-tema] .ibox-stat .stat-value { font-size: 24px; font-weight: 800; color: var(--mu-ink); letter-spacing: -.3px; }
html[data-tema] .ibox-stat .stat-icon {
    width: 32px; height: 32px; border-radius: 9px; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-primary-soft, #e3f6f5);
}

/* ---------------------------------------------------------------- Dugmad */
html[data-tema] .btn { border-radius: var(--mu-radius-sm); font-weight: 600; font-size: var(--mu-fs); transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
html[data-tema] .btn-sm, html[data-tema] .btn-xs { border-radius: 8px; font-size: var(--mu-fs-sm); }
html[data-tema] .btn-primary { box-shadow: 0 4px 12px rgba(var(--brand-rgb, 20, 176, 172), .25); }
html[data-tema] .btn-primary:hover { box-shadow: 0 6px 16px rgba(var(--brand-rgb, 20, 176, 172), .32); }
html[data-tema] .btn-white, html[data-tema] .btn-default { border-color: #dde3e8; color: var(--mu-ink-2); }
html[data-tema] .btn-white:hover, html[data-tema] .btn-default:hover { border-color: #c9d1d8; background: #f7f9fa; color: var(--mu-ink); }
html[data-tema] .btn-group > .btn { border-radius: 0; }
html[data-tema] .btn-group > .btn:first-child { border-top-left-radius: var(--mu-radius-sm); border-bottom-left-radius: var(--mu-radius-sm); }
html[data-tema] .btn-group > .btn:last-child, html[data-tema] .btn-group > .dropdown-toggle { border-top-right-radius: var(--mu-radius-sm); border-bottom-right-radius: var(--mu-radius-sm); }
html[data-tema] .btn:focus-visible { box-shadow: var(--mu-ring); outline: 0; }

/* ---------------------------------------------------------------- Polja */
html[data-tema] .form-control,
html[data-tema] .k-textbox {
    border-radius: var(--mu-radius-sm);
    border: 1px solid #dde3e8;
    background-color: #fbfcfd;
    box-shadow: none;
    color: var(--mu-ink);
    font-size: var(--mu-fs);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html[data-tema] .form-control:not(textarea):not([multiple]) { height: 38px; }
html[data-tema] .input-sm.form-control:not(textarea) { height: 32px; border-radius: 8px; }
html[data-tema] .form-control:focus,
html[data-tema] .k-textbox:focus,
html[data-tema] .k-textbox.k-state-focused {
    border-color: var(--brand-primary, #14b0ac);
    background-color: #fff;
    box-shadow: var(--mu-ring);
}
html[data-tema] .form-control[readonly], html[data-tema] .form-control[disabled] { background-color: #f1f4f6; color: var(--mu-ink-2); }
/* label:not(.label) - gridovi ispisuju statuse kao <label class="label">, njih ne diramo */
html[data-tema] label:not(.label), html[data-tema] .control-label { color: var(--mu-ink-2); font-weight: 600; }
html[data-tema] .input-group-addon { border-color: #dde3e8; background: #f4f6f8; color: var(--mu-mute); }
html[data-tema] .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html[data-tema] .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Kendo widgeti (dropdown, datum, broj, combobox) */
html[data-tema] .k-widget, html[data-tema] .k-input { font-size: var(--mu-fs); }
html[data-tema] .k-dropdown-wrap,
html[data-tema] .k-picker-wrap,
html[data-tema] .k-numeric-wrap,
html[data-tema] .k-multiselect-wrap,
html[data-tema] .k-autocomplete {
    border-radius: var(--mu-radius-sm);
    border-color: #dde3e8;
    background-color: #fbfcfd;
    box-shadow: none;
}
html[data-tema] .k-dropdown-wrap.k-state-focused,
html[data-tema] .k-picker-wrap.k-state-focused,
html[data-tema] .k-numeric-wrap.k-state-focused,
html[data-tema] .k-multiselect-wrap.k-state-focused,
html[data-tema] .k-autocomplete.k-state-focused { border-color: var(--brand-primary, #14b0ac); box-shadow: var(--mu-ring); background-color: #fff; }
html[data-tema] .k-animation-container .k-popup { border-radius: 12px; border-color: var(--mu-line); box-shadow: 0 16px 40px rgba(16, 24, 40, .14); overflow: hidden; }
html[data-tema] .k-list .k-item { border-radius: 7px; margin: 1px 4px; }

/* select2 */
html[data-tema] .select2-container--default .select2-selection--single,
html[data-tema] .select2-container--default .select2-selection--multiple,
html[data-tema] .select2-container--bootstrap .select2-selection {
    border-radius: var(--mu-radius-sm);
    border-color: #dde3e8;
    background-color: #fbfcfd;
    min-height: 38px;
    font-size: var(--mu-fs);
}
html[data-tema] .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
html[data-tema] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
html[data-tema] .select2-container--default.select2-container--focus .select2-selection,
html[data-tema] .select2-container--default.select2-container--open .select2-selection { border-color: var(--brand-primary, #14b0ac); box-shadow: var(--mu-ring); }
html[data-tema] .select2-dropdown { border-radius: 12px; border-color: var(--mu-line); box-shadow: 0 16px 40px rgba(16, 24, 40, .14); overflow: hidden; font-size: var(--mu-fs); }

/* Sažetak računa/ponude (.mu-rn): iznosi su polja koja izgledaju kao tekst - bez okvira dok nisu u fokusu */
html[data-tema] .mu-rn-vrijednost .form-control { border-color: transparent; background-color: transparent; box-shadow: none; }
html[data-tema] .mu-rn-vrijednost .form-control:focus { border-color: var(--brand-primary, #14b0ac); background-color: #fff; box-shadow: var(--mu-ring); }

/* ---------------------------------------------------------------- Kendo gridovi */
html[data-tema] .k-grid { border-color: var(--mu-line); border-radius: 12px; overflow: hidden; font-size: var(--mu-fs); }
html[data-tema] .ibox-content > .k-grid, html[data-tema] .ibox-content .k-grid:only-child { border: 0; border-radius: 0; }
html[data-tema] .k-grid-header, html[data-tema] .k-grid-header-wrap { background: #f8fafb; border-color: var(--mu-line); }
html[data-tema] .k-grid-header th.k-header {
    background: #f8fafb;
    color: var(--mu-mute);
    font-size: var(--mu-fs-sm);
    font-weight: 700;
    /* normalna slova: velika su šira i odsijecaju nazive kolona (npr. "Plaćeno") */
    border-color: var(--mu-line);
    padding-top: 10px;
    padding-bottom: 10px;
}
html[data-tema] .k-grid-header th.k-header > .k-link { color: var(--mu-mute); }
html[data-tema] .k-grid td { padding-top: 9px; padding-bottom: 9px; border-color: var(--mu-line-soft); color: var(--mu-ink); font-size: var(--mu-fs); }
html[data-tema] .k-grid tbody tr { border-bottom: 1px solid var(--mu-line-soft); }
html[data-tema] .k-grid tbody .k-alt { background: transparent; }
html[data-tema] .k-grid tbody tr:hover { background: rgba(var(--brand-rgb, 20, 176, 172), .06); }
html[data-tema] .k-grid tbody tr.k-state-selected, html[data-tema] .k-grid tbody tr.k-state-selected:hover { background: rgba(var(--brand-rgb, 20, 176, 172), .12); color: var(--mu-ink); }
html[data-tema] .k-grid tbody tr.k-state-selected td { color: var(--mu-ink); }
html[data-tema] .k-grid-toolbar { background: transparent; border-color: var(--mu-line-soft); padding: 10px 12px; }
html[data-tema] .k-pager-wrap { background: transparent; border-color: var(--mu-line-soft); padding: 8px 10px; color: var(--mu-mute); font-size: var(--mu-fs-sm); }
html[data-tema] .k-pager-wrap .k-link, html[data-tema] .k-pager-numbers .k-link, html[data-tema] .k-pager-numbers .k-state-selected { border-radius: 8px; min-width: 30px; height: 30px; line-height: 28px; }
html[data-tema] .k-pager-numbers .k-state-selected { background: var(--brand-primary, #14b0ac); border-color: var(--brand-primary, #14b0ac); color: #fff; }
html[data-tema] .k-grid .k-grid-search .k-textbox, html[data-tema] .k-grid-toolbar .k-textbox { height: 34px; }

/* Obične bootstrap tabele (detalji, sažeci) */
html[data-tema] .table { font-size: var(--mu-fs); }
html[data-tema] .table > thead > tr > th { border-bottom: 1px solid var(--mu-line); color: var(--mu-mute); font-size: var(--mu-fs-sm); font-weight: 700; }
html[data-tema] .table > tbody > tr > td, html[data-tema] .table > tbody > tr > th { border-top-color: var(--mu-line-soft); }
html[data-tema] .table-hover > tbody > tr:hover { background: rgba(var(--brand-rgb, 20, 176, 172), .05); }

/* ---------------------------------------------------------------- Tabovi (desktop dio) */
html[data-tema] .nav-tabs { border-bottom: 1px solid var(--mu-line); }
html[data-tema] .nav-tabs > li > a { border-radius: 9px 9px 0 0; color: var(--mu-ink-2); font-weight: 600; margin-right: 2px; }
html[data-tema] .nav-tabs > li > a:hover { background: #f4f6f8; }
html[data-tema] .tabs-container .panel-body { border-color: var(--mu-line); border-radius: 0 0 12px 12px; }

/* ---------------------------------------------------------------- Početna i Statistika (vlastite kartice) */
html[data-tema] .mu-dash-zaglavlje,
html[data-tema] .mu-dash-paznja-stavka,
html[data-tema] .mu-dash-pgrupa,
html[data-tema] .mu-dash-karta,
html[data-tema] .mu-st-karta,
html[data-tema] .mu-st-period {
    border-radius: var(--mu-radius);
    box-shadow: var(--mu-shadow);
    /* lijevi rub ostaje (obojena traka statusa) */
    border-top-color: var(--mu-line); border-right-color: var(--mu-line); border-bottom-color: var(--mu-line);
}
html[data-tema] .mu-dash-ploca,
html[data-tema] .mu-st-ploca {
    border-radius: var(--mu-radius);
    box-shadow: var(--mu-shadow);
    border-top-color: var(--mu-line); border-right-color: var(--mu-line); border-bottom-color: var(--mu-line);
    overflow: hidden;
}
html[data-tema] .mu-dash-paznja-stavka:hover, html[data-tema] .mu-dash-ploca:hover, html[data-tema] .mu-st-ploca:hover { box-shadow: var(--mu-shadow-hover); }

/* ---------------------------------------------------------------- Upozorenja, modali, padajući meniji */
html[data-tema] .alert { border-radius: 12px; border-width: 1px; }
html[data-tema] .modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 24, 40, .22); }
html[data-tema] .modal-header { border-bottom: 1px solid var(--mu-line-soft); padding: 16px 22px; }
html[data-tema] .modal-header .modal-title { font-weight: 700; color: var(--mu-ink); }
html[data-tema] .modal-body { padding: 20px 22px; font-size: var(--mu-fs); }
html[data-tema] .modal-footer { border-top: 1px solid var(--mu-line-soft); padding: 14px 22px; }
html[data-tema] .dropdown-menu { border-radius: 12px; border-color: var(--mu-line); box-shadow: 0 16px 40px rgba(16, 24, 40, .14); padding: 6px; font-size: var(--mu-fs); }
html[data-tema] .dropdown-menu > li > a { border-radius: 8px; padding: 7px 12px; }
html[data-tema] .k-window { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(16, 24, 40, .22); }
html[data-tema] .k-window-titlebar { background: #fff; border-color: var(--mu-line-soft); }

/* ---------------------------------------------------------------- Bočni meni */
html[data-tema] body:not(.mini-navbar) #side-menu > li {
    background: transparent !important;
    border-left: 0;
}
html[data-tema] body:not(.mini-navbar) #side-menu > li > a {
    margin: 2px 10px;
    border-radius: 10px;
    padding: 10px 14px;
}
html[data-tema] body:not(.mini-navbar) #side-menu > li.active > a {
    background: var(--brand-primary-soft, #e3f6f5);
    color: var(--brand-primary-active, #0a6f6c) !important;
    font-weight: 700;
}
html[data-tema] body:not(.mini-navbar) #side-menu .nav-second-level { background: transparent; padding: 2px 0 6px; }
html[data-tema] body:not(.mini-navbar) #side-menu .nav-second-level > li > a { margin: 0 10px 0 22px; border-radius: 8px; padding: 7px 12px; }
html[data-tema] body:not(.mini-navbar) #side-menu .nav-second-level > li.active > a {
    color: var(--brand-primary-active, #0a6f6c) !important;
    font-weight: 700;
    background: rgba(var(--brand-rgb, 20, 176, 172), .07);
}

} /* kraj @media (min-width: 768px) */

/* Brojači na ikonama gornje trake (zvono napomena, poruke): klase "mu-badge label label-primary" -
   ne smiju dobiti stil statusnih oznaka iznad (veći padding i okvir su prekrivali ikonicu zvona).
   Vraća izgled iz _TopNavbar.cshtml: mali puni krug u boji teme. */
html[data-tema] .label.mu-badge,
html[data-tema] .label.label-primary.mu-badge {
    padding: 0 4px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border: 0;
    font-size: 10px;
    letter-spacing: 0;
    background: var(--brand-primary, #14b0ac) !important;
    color: #fff;
    /* zvono ima i klasu .count-info (Inspinia: top 12px, right 6px) - poravnaj s brojačem na chatu */
    top: 2px;
    right: 2px;
}

/* Zaključana navigacija (desktop): gornja traka i bočni meni ostaju na mjestu, skrola se samo sadržaj.
   Gornja traka je sticky unutar #page-wrapper (overflow #wrapper/body je već "clip/visible" u mojured-theme.css,
   pa sticky radi); bočni meni je fixed preko cijele visine, sa vlastitim skrolom kad je meni duži od ekrana.
   U mini meniju (samo ikone) bez vlastitog skrola - overflow bi odsjekao podmenije koji iskaču udesno. */
@media (min-width: 768px) {
    html[data-tema] #page-wrapper > .row.border-bottom:first-of-type {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
    html[data-tema] body:not(.body-small) .navbar-static-side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 2001;
    }
    html[data-tema] body:not(.mini-navbar):not(.body-small) .navbar-static-side {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }
}

/* Verzija aplikacije na dnu bočnog menija (Properties/AssemblyInfo.cs -> AssemblyVersion). */
.mu-verzija {
    padding: 14px 20px 16px;
    font-size: 11.5px;
    color: var(--sidebar-text, #5b6072);
    opacity: .7;
    letter-spacing: .02em;
}
.mu-verzija-mini { display: none; }
body.mini-navbar .mu-verzija { padding: 12px 0; text-align: center; font-size: 10px; }
body.mini-navbar .mu-verzija-puna { display: none; }
body.mini-navbar .mu-verzija-mini { display: inline; }
@media (min-width: 768px) {
    /* bočni meni je fixed preko cijele visine - verzija ide na dno, ili ispod menija kad je meni duži */
    html[data-tema] body:not(.body-small) .navbar-static-side .sidebar-collapse {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    html[data-tema] body:not(.body-small) .navbar-static-side .mu-nav-dno { margin-top: auto; }
}

/* Pomoć i uputstva na dnu bočnog menija, iznad verzije (izgled kao stavka menija). */
.mu-nav-dno { border-top: 1px solid var(--sidebar-border, #e7e7ec); margin-top: 12px; padding-top: 6px; }
.mu-nav-pomoc { display: flex; align-items: center; gap: 10px; margin: 2px 10px 0; padding: 10px 12px; border-radius: 10px;
    color: var(--sidebar-text, #5b6072); font-weight: 600; font-size: 13px; }
.mu-nav-pomoc .fa { width: 16px; text-align: center; color: var(--brand-primary, #14b0ac); }
.mu-nav-pomoc:hover, .mu-nav-pomoc:focus { background: var(--brand-primary-soft, #e3f6f5); color: var(--sidebar-text-strong, #1f2230); text-decoration: none; }
.mu-nav-dno .mu-verzija { padding-top: 6px; }
body.mini-navbar .mu-nav-pomoc { justify-content: center; margin: 2px 8px 0; padding: 10px 0; }
body.mini-navbar .mu-nav-pomoc .nav-label { display: none; }

/* Smanjeni meni: podmeni koji iskače na hover - svijetla kartica kao ostatak menija (Inspinia ga boji tamno #2f4050). */
html[data-tema] body.mini-navbar #side-menu .nav-second-level {
    background: #fff !important;
    border: 1px solid var(--sidebar-border, #e7e7ec);
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(31, 34, 48, .12);
    padding: 6px !important;
    min-width: 200px;
    z-index: 2002;
}
html[data-tema] body.mini-navbar #side-menu .nav-second-level > li > a {
    color: var(--sidebar-text, #5b6072) !important;
    background: transparent !important;
    border-radius: 8px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
}
html[data-tema] body.mini-navbar #side-menu .nav-second-level > li > a:hover,
html[data-tema] body.mini-navbar #side-menu .nav-second-level > li > a:focus {
    background: var(--sidebar-hover-bg, #eff1f3) !important;
    color: var(--sidebar-text-strong, #1f2230) !important;
}
html[data-tema] body.mini-navbar #side-menu .nav-second-level > li.active > a {
    background: var(--brand-primary-soft, #e3f6f5) !important;
    color: var(--brand-primary, #14b0ac) !important;
    font-weight: 600;
}
html[data-tema] body.mini-navbar #side-menu .nav-second-level > li:last-child { margin-bottom: 0; }
html[data-tema] body.mini-navbar #side-menu .nav-second-level .fa { color: inherit; }