:root {
    --evidon-navy: #1c2b3a;
    --evidon-navy-dark: #16212d;
    --evidon-blue: #2f80ed;
    --evidon-blue-dark: #2568c4;
    --evidon-text-muted: #8a94a3;
}

body.auth-body {
    background: var(--evidon-navy);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    position: relative;
}

.lang-switcher-fixed {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.auth-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
}

.auth-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 2.25rem 2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--evidon-navy);
    letter-spacing: .04em;
    margin-bottom: 1.25rem;
}

.auth-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--evidon-blue);
    display: inline-block;
}

.auth-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--evidon-navy);
    margin-bottom: .25rem;
}

.auth-subtitle {
    text-align: center;
    font-size: .875rem;
    color: var(--evidon-text-muted);
    margin-bottom: 1.5rem;
}

.btn-evidon {
    background: var(--evidon-blue);
    border-color: var(--evidon-blue);
    color: #fff;
    font-weight: 600;
}

.btn-evidon:hover, .btn-evidon:focus {
    background: var(--evidon-blue-dark);
    border-color: var(--evidon-blue-dark);
    color: #fff;
}

.auth-links {
    text-align: center;
    margin-top: 1rem;
    font-size: .875rem;
}

.auth-links a {
    color: var(--evidon-blue);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.otp-secret-box {
    background: #f4f6f9;
    border: 1px dashed #c7cfda;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-align: center;
    word-break: break-all;
    margin-bottom: 1rem;
}

/* ---- Sidebar shell za dashboard/superadmin ekrane ---- */
.evidon-shell { display: flex; min-height: 100vh; }
.evidon-sidebar {
    width: 240px;
    background: var(--evidon-navy);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: width .18s ease;
}
.evidon-sidebar .brand {
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
}
.brand-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--evidon-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}
.evidon-sidebar nav { flex-grow: 1; padding: .5rem 0; }
.evidon-sidebar a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1.25rem;
    margin: .1rem .6rem;
    border-radius: 7px;
    color: #c7cfda;
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
    position: relative;
}
.evidon-sidebar a i { font-size: 1rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.evidon-sidebar a:hover { background: rgba(255,255,255,.07); color: #fff; }
.evidon-sidebar a.active { background: var(--evidon-blue); color: #fff; font-weight: 600; }

/* ── Sakupljen (collapsed) sidebar — samo ikone + tooltip na hover ── */
body.sb-collapsed .evidon-sidebar { width: 68px; }
body.sb-collapsed .evidon-sidebar .brand-text,
body.sb-collapsed .evidon-sidebar .nav-text,
body.sb-collapsed .sidebar-user-info { display: none; }
body.sb-collapsed .evidon-sidebar .brand { justify-content: center; padding: 1.1rem .5rem; }
body.sb-collapsed .evidon-sidebar a { justify-content: center; padding: .6rem; margin: .1rem .5rem; }
body.sb-collapsed .evidon-sidebar a i { width: auto; font-size: 1.05rem; }
body.sb-collapsed .sidebar-user { justify-content: center; padding: .9rem .5rem; }
body.sb-collapsed .topbar-sb-toggle { background: var(--evidon-blue); color: #fff; border-color: var(--evidon-blue); }

/* Tooltip: samo dok je sidebar sakupljen, na hover preko linka */
body.sb-collapsed .evidon-sidebar a[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    background: #1f2937;
    color: #fff;
    padding: .38rem .65rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    pointer-events: none;
}
body.sb-collapsed .evidon-sidebar a[data-tip]:hover::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 3px;
    border: 5px solid transparent;
    border-right-color: #1f2937;
    z-index: 50;
    pointer-events: none;
}
body.sb-collapsed .sidebar-user[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 100%;
    bottom: 8px;
    margin-left: 10px;
    background: #1f2937;
    color: #fff;
    padding: .38rem .65rem;
    border-radius: 6px;
    font-size: .78rem;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    pointer-events: none;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--evidon-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sidebar-user-info { flex-grow: 1; min-width: 0; }
.sidebar-user-name { font-size: .82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: .72rem; color: var(--evidon-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-logout { color: #c7cfda; font-size: 1.1rem; flex-shrink: 0; text-decoration: none; }
.sidebar-logout:hover { color: #fff; }

.evidon-breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--evidon-text-muted); margin: .25rem 0 1rem; }
.evidon-breadcrumb a { color: var(--evidon-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.evidon-breadcrumb a:hover { color: var(--evidon-blue); }
.evidon-breadcrumb-sep { color: #c7cfd6; }
.evidon-breadcrumb-current { color: var(--evidon-navy); font-weight: 600; }

.evidon-content { flex-grow: 1; background: #f4f6f9; padding: 1.5rem 2rem; }
.evidon-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 10px;
    padding: .6rem .9rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.topbar-search { position: relative; flex-grow: 1; max-width: 420px; }
.topbar-sb-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e5e9f0;
    background: #f8f9fb;
    color: var(--evidon-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s ease;
}
.topbar-sb-toggle:hover { background: #eef1f6; }
.topbar-search-spacer { flex-grow: 1; }
.topbar-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--evidon-text-muted); font-size: .9rem; }
.topbar-search input {
    width: 100%;
    border: 1px solid #e5e9f0;
    background: #f8f9fb;
    border-radius: 8px;
    padding: .5rem .8rem .5rem 2.2rem;
    font-size: .85rem;
    outline: none;
}
.topbar-search input:focus { border-color: var(--evidon-blue); background: #fff; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.notification-bell .notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: .65rem;
    padding: .25em .45em;
}
.notif-dropdown { width: 320px; max-width: 90vw; }
.notif-items { max-height: 320px; overflow-y: auto; }
.notif-item { color: inherit; border-bottom: 1px solid #f0f0f0; }
.notif-item:hover { background: #f8f9fa; }
.notif-item.notif-unread { background: #eef6ff; }

.kpi-card { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
a.kpi-card { transition: transform .12s ease, box-shadow .12s ease; }
a.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1) !important; }
.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: #27ae60;
}
.kpi-icon.kpi-icon-blue { background: var(--evidon-blue); }
.kpi-icon.kpi-icon-amber { background: #d68910; }

.stat-box {
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid #ccc;
    padding: .9rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: pointer;
}
.stat-box:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.stat-box.stat-box-active { box-shadow: 0 0 0 2px currentColor inset, 0 1px 3px rgba(0,0,0,.06); }
.stat-box .stat-label { font-size: .78rem; color: var(--evidon-text-muted); margin-bottom: .25rem; }
.stat-box .stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-box.stat-blue   { border-left-color: var(--evidon-blue); }
.stat-box.stat-amber  { border-left-color: #d68910; }
.stat-box.stat-green  { border-left-color: #27ae60; }
.stat-box.stat-red    { border-left-color: #c0392b; }
.stat-box.stat-blue.stat-box-active  { color: var(--evidon-blue); }
.stat-box.stat-amber.stat-box-active { color: #d68910; }
.stat-box.stat-green.stat-box-active { color: #27ae60; }
.stat-box.stat-red.stat-box-active   { color: #c0392b; }
.monitoring-card { border-width: 2px !important; transition: transform .12s ease; }
.monitoring-card:hover { transform: translateY(-2px); }
.legend-swatch { display: inline-block; width: 14px; height: 14px; border: 2px solid; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.legend-swatch.legend-success { border-color: #198754; }
.legend-swatch.legend-warning { border-color: #ffc107; }
.legend-swatch.legend-danger  { border-color: #dc3545; }

.impersonation-banner {
    background: #b45309;
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: .9rem;
}

/* Štampa evidencija (npr. Evidencija štićenih objekata) — sakrij sve
   osim .print-area kad korisnik pokrene štampu iz browsera. */
@media print {
    .evidon-sidebar, .evidon-topbar, .no-print, .impersonation-banner { display: none !important; }
    .evidon-content { padding: 0 !important; background: #fff !important; }
    .evidon-shell { display: block !important; }
    .card { border: none !important; box-shadow: none !important; }
    body { background: #fff !important; }
}

/* ── Toast obavještenja — gore po sredini ── */
.toast-container { pointer-events: none; }
.toast-container .toast { pointer-events: auto; min-width: 280px; }

/* ── Pill-tabovi sa okvirom (Informacije i sl.) — bijelo/okvir kad neaktivno, plavo kad aktivno ── */
.pill-tabs-outline .nav-link {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: var(--evidon-navy);
    font-weight: 500;
    padding: .55rem 1rem;
}
.pill-tabs-outline .nav-link:hover { background: #f4f6f9; }
.pill-tabs-outline .nav-link.active {
    background: var(--evidon-blue);
    border-color: var(--evidon-blue);
    color: #fff;
}

.evidencija-kartica { transition: transform .12s ease, box-shadow .12s ease; }
.evidencija-kartica:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1) !important; }

/* ── Stanje dokumentacije — kompaktne kolone (mnogo uskih kolona u matrici) ── */
.stanje-dok-table th {
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.15;
    padding: .5rem .35rem;
    white-space: normal;
    vertical-align: bottom;
    width: 72px;
    max-width: 72px;
    letter-spacing: 0;
}
.stanje-dok-table th:first-child,
.stanje-dok-table th:nth-child(2) { width: auto; max-width: none; font-size: .72rem; }
.stanje-dok-table td { padding: .5rem .35rem; }

/* Štampa: landscape (položeno), sve kolone stanu na jednu širinu strane */
@media print {
    @page { size: landscape; margin: 10mm; }
    .stanje-dok-table { width: 100% !important; table-layout: fixed; font-size: 8px !important; }
    .stanje-dok-table th { font-size: 7px !important; padding: 3px 2px !important; }
    .stanje-dok-table td { padding: 3px 2px !important; }
    .stanje-dok-table .fs-5 { font-size: 11px !important; }
    .table-responsive { overflow: visible !important; }
}

/* ── Kontakti policijskih uprava — akordeon po gradu ── */
.policijska-uprava-red { cursor: pointer; }
.policijska-uprava-red:hover { background: #f4f6f9; }
.pu-chevron { transition: transform .15s ease; display: inline-block; }
.policijska-uprava-red:not(.collapsed) .pu-chevron { transform: rotate(90deg); }

/* ── FAQ akordeon (Podrška i pomoć) ── */
.podrska-faq .accordion-button {
    background: var(--evidon-blue);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
}
.podrska-faq .accordion-button:not(.collapsed) {
    background: var(--evidon-blue);
    color: #fff;
    box-shadow: none;
    border-radius: 8px 8px 0 0;
}
.podrska-faq .accordion-button::after {
    filter: brightness(0) invert(1); /* bijela strelica na plavoj pozadini */
}
.podrska-faq .accordion-button:focus { box-shadow: none; }
.podrska-faq .accordion-body {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.podrska-faq .accordion-body ul { margin-bottom: 0; }

.podrska-kontakt-box {
    background: #eaf2fb;
    border-left: 4px solid var(--evidon-blue);
    border-radius: 6px;
}

/* Modal forma opreme (Dodaj Novi Uređaj / Izmjena uređaja) — jedan stupac, X iznad naslova */
.oprema-modal .modal-header {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 0;
    padding-bottom: 0;
}
.oprema-modal .modal-header .btn-close {
    order: -1;
    margin: 0 0 .25rem -.25rem;
}
.oprema-modal .modal-title {
    font-weight: 700;
    color: var(--evidon-navy);
}
.oprema-modal .form-label {
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--evidon-navy);
}
.oprema-modal .btn {
    text-transform: uppercase;
    font-size: .85rem;
    font-weight: 600;
}

/* Modali sa dugim formama (npr. Dodaj/Izmijeni objekat) — osiguraj da se tijelo
   modala uvijek skroluje unutar sebe i da footer (dugme za snimanje) ostane
   vidljiv, bez obzira na visinu ekrana ili dužinu forme. */
/* Modali sa dugim formama (npr. Dodaj/Izmijeni objekat) — osiguraj da se tijelo
   modala uvijek skroluje unutar sebe i da footer (dugme za snimanje) ostane
   vidljiv, bez obzira na visinu ekrana ili dužinu forme.
   !important + eksplicitno ciljanje na .modal (ne samo .modal-dialog-scrollable)
   jer je ranija verzija ovog pravila i dalje bila "pregažena" u browseru — ovo
   pravilo sad pobjeđuje bez obzira na redosled/specifičnost bilo kog drugog CSS-a. */
.modal.show .modal-dialog,
.modal-dialog-scrollable {
    max-height: calc(100vh - 3.5rem) !important;
    display: flex !important;
    align-items: center !important;
}
.modal-content {
    max-height: calc(100vh - 3.5rem) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* STVARNI UZROK problema: u cijeloj aplikaciji <form> obavija modal-header +
   modal-body + modal-footer zajedno (umjesto da budu direktna djeca
   .modal-content). Bootstrap-ov flex raspored (gornje pravilo) očekuje da su
   header/body/footer NJEGOVA direktna djeca da bi visina i skrol ispravno
   radili — kad je forma "u sredini", ograničenje visine se gubi na formi i
   modal-body nikad ne dobije stvarnu visinu da bi znao kad treba da skroluje.
   Ovo pravilo "provlači" isti flex raspored kroz tu formu, za SVAKI modal u
   aplikaciji koji koristi ovaj obrazac (Objekti, Dosije, Radni nalozi,
   Fakturisanje, Tim, Evidencije, Podešavanja, Korisnici, SuperAdmin...). */
.modal-content > form {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: calc(100vh - 3.5rem) !important;
}
.modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
.modal-header,
.modal-footer {
    flex-shrink: 0 !important;
}

/* Cek lista "Postojeća STZ dokumentacija" (tab Dokumentacija) — svaka stavka u
   sopstvenom zaokruženom okviru, kao na referentnom mockup-u. */
.stz-dok-checklista {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.stz-dok-stavka {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 0;
    padding: .7rem .9rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.stz-dok-stavka:hover {
    border-color: var(--evidon-blue);
    background-color: #f8f9fb;
}
.stz-dok-stavka .form-check-input {
    margin: 0;
    flex-shrink: 0;
}
.stz-dok-stavka .form-check-label {
    font-weight: 600;
    color: var(--evidon-navy);
}