/* =========================================================================
   IZPOSOJA — temna "operations" tema (design system)
   Total redesign — namerno NI podobno klasičnemu (svetlemu) ERP-ju.
   ========================================================================= */

/* --- Inter (lokalno gostovan, latin + latin-ext za č š ž) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('lib/inter/inter-400-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('lib/inter/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('lib/inter/inter-600-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('lib/inter/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('lib/inter/inter-800-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('lib/inter/inter-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens --- */
:root {
    --bg: #0d1117;
    --bg2: #161b22;
    --card: #1c2128;
    --border: #30363d;
    --tekst: #e6edf3;
    --tekst2: #8b949e;
    --akcent: #2dd4bf;
    --prosto: #3fb950;
    --izposojeno: #58a6ff;
    --servis: #f0883e;
    --alarm: #f85149;

    --radius: 12px;
    --radius-sm: 8px;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --top-h: 60px;
    --bottom-h: 64px;
    --rail-w: 64px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--tekst);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--akcent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-weight: 800;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1em;
}

.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* =========================================================================
   Layout — app skeleton
   ========================================================================= */

.app {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Top bar (desktop) --- */
.top-bar {
    height: var(--top-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.logo {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .03em;
    color: var(--tekst);
    display: flex;
    align-items: center;
    /* brez gap: "IZP" + <span>OSOJA</span> sta dva flex itema — gap bi besedo raztrgal */
    white-space: nowrap;
}
.logo .logo-akcent {
    color: var(--akcent);
}

.iskanje-global {
    flex: 1 1 auto;
    max-width: 420px;
    position: relative;
}
.iskanje-global input {
    width: 100%;
    padding: 8px 12px 8px 36px;
}
.iskanje-global svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tekst2);
    pointer-events: none;
}

.top-bar-desno {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.uporabnik-ime {
    color: var(--tekst2);
    font-size: .9rem;
    white-space: nowrap;
}
.uporabnik-ime strong {
    color: var(--tekst);
    font-weight: 600;
}

/* --- Body wrap: side rail + main --- */
.telo {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* --- Side rail (desktop) --- */
.rail {
    width: var(--rail-w);
    flex: 0 0 auto;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 4px;
    position: sticky;
    top: var(--top-h);
    height: calc(100vh - var(--top-h));
    overflow-y: auto;
    /* Vodoravno se rail NIKOLI ne scrolla — brez tega bi absolutno pozicioniran tooltip (glej
       .rail-povezava[data-tip]::after spodaj) povzročil odvečen vodoraven scrollbar na dnu traku. */
    overflow-x: hidden;
    /* Navpični scrollbar je NAMENOMA nikoli viden (11 ikon se na tipičnih zaslonih vedno prilega
       v calc(100vh - var(--top-h)); overflow-y:auto ostane kot varnostna mreža za zelo nizke
       viewporte, a brez vidnega scrollbara — glej ::-webkit-scrollbar spodaj). */
    scrollbar-width: none;
    transition: width .15s ease;
}
.rail::-webkit-scrollbar {
    display: none;
}

/* --- Razširjen levi trak (Task 19) — širina + poravnava se preklopita prek razreda na <html>,
   ki ga nastavi preklopiRail() (assets/app.js) in anti-FOUC skript v inc/layout.php. --- */
html.rail-razsirjen .rail {
    width: 210px;
    align-items: stretch;
    padding: 14px 10px;
}

.rail-povezava {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--tekst2);
    transition: background .15s, color .15s;
}
.rail-povezava:hover {
    background: rgba(255,255,255,.05);
    color: var(--tekst);
    text-decoration: none;
}
.rail-povezava.aktiven {
    background: rgba(45,212,191,.12);
    color: var(--akcent);
}
.rail-povezava.aktiven::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--akcent);
}

html.rail-razsirjen .rail-povezava {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
}
html.rail-razsirjen .rail-povezava.aktiven::before {
    left: -10px;
}

/* Oznaka (besedilo) poleg ikone — v HTML vedno prisotna (labels so v markupu za oba pogleda,
   filtrirana po vlogi kot doslej), vizualno pa vidna SAMO v razširjenem stanju. */
.rail-labela {
    display: none;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 600;
}
html.rail-razsirjen .rail-labela {
    display: inline;
}

/* Tooltip za rail ikone — SAMO v zloženem stanju (v razširjenem je oznaka že vidna zraven ikone). */
.rail-povezava[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--tekst);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: .8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 40;
}
html:not(.rail-razsirjen) .rail-povezava:hover[data-tip]::after {
    opacity: 1;
}

/* --- Gumb za razširitev/zožitev levega traku --- */
.rail-preklop {
    margin-top: auto;
    flex: 0 0 auto;
    width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--tekst2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
}
.rail-preklop:hover {
    background: rgba(255,255,255,.05);
    color: var(--tekst);
}
.rail-preklop svg {
    transition: transform .15s ease;
}
html.rail-razsirjen .rail-preklop {
    width: 100%;
    justify-content: flex-end;
    padding-right: 10px;
}
html.rail-razsirjen .rail-preklop svg {
    transform: rotate(180deg);
}

/* --- Main content --- */
.vsebina {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.vsebina-glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.vsebina-glava h1 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin: 0;
}

/* --- Bottom tab bar (mobile) --- */
.tab-bar {
    display: none;
}

/* =========================================================================
   Komponente
   ========================================================================= */

/* --- Gumbi --- */
.gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--tekst);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
    text-decoration: none;
    line-height: 1;
}
.gumb:hover {
    background: rgba(255,255,255,.06);
    text-decoration: none;
}
.gumb:active {
    transform: scale(.98);
}
.gumb:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.gumb-primar {
    background: var(--akcent);
    border-color: var(--akcent);
    color: #06201c;
}
.gumb-primar:hover {
    background: #26c0ab;
}

.gumb-nevaren {
    background: transparent;
    border-color: var(--alarm);
    color: var(--alarm);
}
.gumb-nevaren:hover {
    background: rgba(248,81,73,.12);
}

.gumb-majhen {
    padding: 6px 12px;
    min-height: 32px;
    font-size: .82rem;
}

.gumb-icon {
    padding: 10px;
    width: 44px;
}

/* Odjava je <form method="post"> (CSRF zaščita, glej odjava.php) namesto navadnega <a href> —
   sam obrazec ne sme podreti flex postavitve top vrstice, kjer prej živi ikonski .gumb <a>. */
.odjava-obrazec {
    display: inline-flex;
    margin: 0;
}

/* --- Kartice --- */
.kartica {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

.kartica-glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

/* Rdeč obrobljen variant kartice — zapadli servisi (Task 12, spec §5.8) in podobna opozorila. */
.kartica-alarm {
    border-color: var(--alarm);
}
.kartica-glava h2, .kartica-glava h3 {
    margin: 0;
    font-size: 1rem;
}

.mreza-kartic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* --- KPI kartica --- */
.kpi-kartica {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kpi-glava {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tekst2);
    font-size: .85rem;
    font-weight: 600;
}
.kpi-ikona {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45,212,191,.12);
    color: var(--akcent);
    flex: 0 0 auto;
}
.kpi-vrednost {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.mreza-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* --- Prazno stanje --- */
.prazno-stanje {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--tekst2);
}
.prazno-stanje .prazno-ikona {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--tekst2);
}
.prazno-stanje h3 {
    color: var(--tekst);
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.prazno-stanje p {
    margin: 0;
    max-width: 360px;
}

/* --- Form polja --- */
label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tekst2);
    margin-bottom: 6px;
}

input, select, textarea {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--tekst);
    padding: 10px 12px;
    font-family: inherit;
    font-size: .95rem;
    min-height: 44px;
    transition: border-color .15s, box-shadow .15s;
}
textarea {
    min-height: 88px;
    resize: vertical;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--akcent);
    box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}
input::placeholder, textarea::placeholder {
    color: var(--tekst2);
}

.polje {
    margin-bottom: 16px;
}

.polje-vrstica {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.polje-vrstica > .polje {
    flex: 1 1 200px;
}

.napaka-sporocilo {
    background: rgba(248,81,73,.1);
    border: 1px solid rgba(248,81,73,.4);
    color: #ffb4af;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    margin-bottom: 16px;
}

/* --- Tabele --- */
.tabela-ovoj {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    white-space: nowrap;
}
.tabela th, .tabela td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.tabela th {
    color: var(--tekst2);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--bg2);
}
.tabela tbody tr:last-child td {
    border-bottom: none;
}
.tabela tbody tr:hover {
    background: rgba(255,255,255,.03);
}

/* --- Statusne značke --- */
.znacka {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.znacka::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.znacka-prosto      { color: var(--prosto);     background: rgba(63,185,80,.12); }
.znacka-izposojeno  { color: var(--izposojeno); background: rgba(88,166,255,.12); }
.znacka-v_servisu   { color: var(--servis);     background: rgba(240,136,62,.12); }
.znacka-neaktivno   { color: var(--alarm);      background: rgba(248,81,73,.12); }

.znacka-aktivna     { color: var(--izposojeno); background: rgba(88,166,255,.12); }
.znacka-zakljucena  { color: var(--tekst2);     background: rgba(139,148,158,.12); }
.znacka-preklicana  { color: var(--alarm);      background: rgba(248,81,73,.12); }

.znacka-osnutek     { color: var(--tekst2);     background: rgba(139,148,158,.12); }
.znacka-potrjen     { color: var(--akcent);     background: rgba(45,212,191,.12); }

.znacka-izdan        { color: var(--izposojeno); background: rgba(88,166,255,.12); }
.znacka-delno_placan { color: var(--servis);     background: rgba(240,136,62,.12); }
.znacka-placan       { color: var(--prosto);     background: rgba(63,185,80,.12); }
.znacka-storniran    { color: var(--alarm);      background: rgba(248,81,73,.12); }

.znacka-odprta      { color: var(--izposojeno); background: rgba(88,166,255,.12); }

.znacka-podjetje    { color: var(--akcent);     background: rgba(45,212,191,.12); }
.znacka-sp          { color: var(--izposojeno); background: rgba(88,166,255,.12); }
.znacka-fizicna     { color: var(--tekst2);     background: rgba(139,148,158,.12); }

.znacka-klic        { color: var(--izposojeno); background: rgba(88,166,255,.12); }
.znacka-sestanek    { color: var(--akcent);     background: rgba(45,212,191,.12); }
.znacka-dogovor     { color: var(--prosto);     background: rgba(63,185,80,.12); }
.znacka-opomba      { color: var(--servis);     background: rgba(240,136,62,.12); }

.znacka-alarm       { color: var(--alarm);      background: rgba(248,81,73,.12); }
.znacka-kmalu       { color: var(--servis);     background: rgba(240,136,62,.12); }
.znacka-drugo       { color: var(--tekst2);     background: rgba(139,148,158,.12); }

/* --- Znacke: tip servisa (Task 12, spec §5.8) --- */
.znacka-ciscenje    { color: var(--prosto);     background: rgba(63,185,80,.12); }
.znacka-pregled     { color: var(--izposojeno); background: rgba(88,166,255,.12); }
.znacka-menjava     { color: var(--akcent);     background: rgba(45,212,191,.12); }
.znacka-popravilo   { color: var(--alarm);      background: rgba(248,81,73,.12); }

/* --- Znacke: status postavke inventure (Task 13, spec §5.7) --- */
.znacka-pricakovano     { color: var(--tekst2);     background: rgba(139,148,158,.12); }
.znacka-najdeno         { color: var(--prosto);     background: rgba(63,185,80,.12); }
.znacka-manjka          { color: var(--alarm);      background: rgba(248,81,73,.12); }
.znacka-napacna_lokacija{ color: var(--servis);     background: rgba(240,136,62,.12); }
.znacka-visek           { color: var(--izposojeno); background: rgba(88,166,255,.12); }

.znacka-admin           { color: var(--akcent);     background: rgba(45,212,191,.12); }
.znacka-teren           { color: var(--tekst2);     background: rgba(139,148,158,.12); }

/* --- Modal --- */
.modal-ovoj {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(1,4,9,.7);
    z-index: 100;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
}
.modal-ovoj.odprt {
    display: flex;
}
.modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    padding: 22px;
}
.modal-siroka {
    max-width: 760px;
}
.modal-glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.modal-glava h3 {
    margin: 0;
}
.modal-zapri {
    background: none;
    border: none;
    color: var(--tekst2);
    cursor: pointer;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal-noge {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* --- Toast --- */
#toast-ovoj {
    position: fixed;
    bottom: calc(var(--bottom-h) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(90vw, 360px);
}
.toast {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--akcent);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: .88rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    animation: toast-vstop .18s ease-out;
}
.toast-napaka {
    border-left-color: var(--alarm);
}
@keyframes toast-vstop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Prijava
   ========================================================================= */

.prijava-ovoj {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 15% 10%, rgba(45,212,191,.09), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(88,166,255,.07), transparent 45%),
        var(--bg);
}
.prijava-kartica {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
}
.prijava-logo {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.prijava-logo .logo-akcent {
    color: var(--akcent);
}
.prijava-podnaslov {
    text-align: center;
    color: var(--tekst2);
    font-size: .88rem;
    margin-bottom: 28px;
}
.prijava-kartica .gumb-primar {
    width: 100%;
    margin-top: 6px;
}
.prijava-demo {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: .78rem;
    color: var(--tekst2);
    text-align: center;
    line-height: 1.7;
}

/* =========================================================================
   Responsive — mobile (<=768px)
   ========================================================================= */

@media (max-width: 768px) {
    .rail {
        display: none;
    }

    .iskanje-global {
        display: none;
    }

    .top-bar {
        padding: 0 14px;
    }

    .vsebina {
        padding: 14px;
        padding-bottom: calc(var(--bottom-h) + 20px + env(safe-area-inset-bottom, 0px));
    }

    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--bottom-h);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bg2);
        border-top: 1px solid var(--border);
        z-index: 50;
    }
    .tab-postavka {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--tekst2);
        font-size: .68rem;
        font-weight: 600;
        min-height: 44px;
        padding: 6px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tab-postavka:hover {
        text-decoration: none;
    }
    .tab-postavka.aktiven {
        color: var(--akcent);
    }
    .tab-postavka-skener {
        position: relative;
        margin-top: -22px;
    }
    .tab-postavka-skener .tab-skener-gumb {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--akcent);
        color: #06201c;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid var(--bg2);
        box-shadow: 0 2px 10px rgba(0,0,0,.35);
    }
    .tab-postavka-skener span {
        margin-top: 2px;
        color: var(--tekst2);
    }
    .tab-postavka-skener.aktiven span {
        color: var(--akcent);
    }

    .mreza-kpi {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal {
        max-width: 100%;
    }
}

/* --- Vec (drawer) meni na mobilnem --- */
.vec-drawer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vec-povezava {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
    border-radius: var(--radius-sm);
    color: var(--tekst);
    min-height: 44px;
}
.vec-povezava:hover {
    background: rgba(255,255,255,.05);
    text-decoration: none;
}
.vec-povezava svg {
    color: var(--tekst2);
    flex: 0 0 auto;
}
/* Odjava v "Več" drawerju je <form method="post"> (CSRF zaščita, glej odjava.php) — .vec-povezava
   je tu na <form>, gumb znotraj pa poreseta privzet <button> videz, da izgleda kot ostale .vec-povezava-e. */
.vec-povezava-gumb {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

/* =========================================================================
   Zavihki (tab komponenta) — skupna, uporabljena na stranke.php in kjerkoli
   drugje bo v prihodnjih fazah potreben tabski prikaz (izposoje, računi …).
   ========================================================================= */
.zavihki {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
}
.zavihek {
    padding: 10px 16px;
    min-height: 44px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tekst2);
    font-family: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.zavihek:hover {
    color: var(--tekst);
}
.zavihek.aktiven {
    color: var(--akcent);
    border-bottom-color: var(--akcent);
}
.zavihek-vsebina {
    display: none;
}
.zavihek-vsebina.aktiven {
    display: block;
}

/* =========================================================================
   Sredstva — kartice, filtri, preklop pogleda, detajl-drawer
   ========================================================================= */

.akcije-vrstica {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.filter-vrstica {
    margin: 0;
    flex: 1 1 auto;
}
.filter-vrstica .polje {
    margin-bottom: 0;
    min-width: 160px;
}
.akcije-vrstica-desno {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pogled-preklop {
    display: inline-flex;
    gap: 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
}
.pogled-preklop .gumb {
    border: none;
    background: transparent;
    min-height: 32px;
}
.pogled-preklop .gumb.aktiven {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--akcent);
}

.sredstvo-kartica .kartica-glava {
    align-items: flex-start;
}
.kat-oznaka {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--kat-barva, var(--akcent)) 16%, transparent);
    color: var(--kat-barva, var(--akcent));
}
/* Slika sredstva (Task 16, deferred iz Task 3, spec §5.2/§8) — nadomesti kat-oznaka ikono na
   kartici, kadar ima sredstvo naloženo sliko (isti 36x36 slot, brez sprememb postavitve kartice). */
.kat-oznaka-slika {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg2);
}
/* Večja slika v detajl modalu sredstva. */
.sredstvo-slika-velika {
    display: block;
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    object-fit: cover;
}
.sredstvo-naslov {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}
.sredstvo-naslov strong {
    font-size: .95rem;
}
.sredstvo-naslov .sredstvo-naziv {
    color: var(--tekst2);
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sredstvo-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--tekst2);
    font-size: .82rem;
    margin-bottom: 10px;
}
.sredstvo-cene {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .85rem;
    color: var(--tekst2);
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-bottom: 10px;
}
.sredstvo-cene strong {
    color: var(--tekst);
}
.sredstvo-akcije {
    display: flex;
    gap: 8px;
}
.sredstvo-akcije .gumb {
    flex: 1 1 auto;
}

.drawer-sekcija {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.drawer-sekcija:last-of-type {
    border-bottom: none;
}
.drawer-sekcija h4 {
    margin: 0 0 8px;
    font-size: .9rem;
    color: var(--tekst2);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.drawer-sekcija p {
    margin: 0 0 6px;
    font-size: .9rem;
}
.drawer-sekcija code {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .85rem;
}

/* --- Časovnica (dogodki sredstva, glej sredstva.php detajl modal) --- */
.casovnica-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.casovnica-vrstica {
    font-size: .85rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.casovnica-vrstica:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.casovnica-cas {
    color: var(--tekst2);
}
.casovnica-opombe {
    margin-top: 4px;
    color: var(--tekst2);
}

/* =========================================================================
   Stranke / mini CRM — kartice strank, glava detajla, lokacije, aktivnosti
   ========================================================================= */

.stranka-kartica {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
a.stranka-kartica {
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
a.stranka-kartica:hover {
    text-decoration: none;
    border-color: var(--akcent);
    background: rgba(255,255,255,.02);
}
.stranka-kartica-glava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.stranka-kartica-glava h3 {
    font-size: .98rem;
    margin: 0 0 4px;
}
.stranka-kartica-znacke {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.stranka-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--tekst2);
    font-size: .82rem;
}
.stranka-zadnja-aktivnost {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    font-size: .85rem;
    color: var(--tekst2);
}
.stranka-zadnja-aktivnost strong {
    color: var(--tekst);
}
.stranka-zadnja-aktivnost .zapis-snippet {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stranka-glava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.stranka-glava h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1.2rem;
    margin: 0 0 6px;
}
.stranka-glava p {
    margin: 0;
    color: var(--tekst2);
    font-size: .88rem;
}
.nazaj-povezava {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--tekst2);
    font-size: .88rem;
}

.lokacija-kartica {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lokacija-kartica-glava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.lokacija-kartica-glava h3 {
    font-size: .95rem;
    margin: 0;
}
.lokacija-meta {
    color: var(--tekst2);
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aktivnost-hitri-vnos {
    margin-bottom: 20px;
}
.aktivnost-seznam {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aktivnost-vrstica {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aktivnost-vrstica-glava {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--tekst2);
}
.aktivnost-vrstica-zapis {
    margin: 0;
    white-space: pre-wrap;
}

#lokacija-mapa {
    height: 260px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 14px;
    background: var(--bg2);
}
.drawer-sekcija .prazno-stanje {
    padding: 24px 10px;
}

/* =========================================================================
   Skener (Task 7) — kamera + okvir, ročni vnos, spodnji "sheet" s kontekstnimi
   akcijami. Namenoma "full-height column" znotraj .vsebina (glej skener.php).
   ========================================================================= */

.skener-ovoj {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: calc(100vh - var(--top-h) - 40px);
}
@media (max-width: 768px) {
    .skener-ovoj {
        min-height: calc(100vh - var(--top-h) - var(--bottom-h) - 28px - env(safe-area-inset-bottom, 0px));
    }
}

.skener-video-ovoj {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
}
.skener-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Skenirni okvir (vogali) + animirana črta */
.skener-okvir {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 260px);
    height: min(70vw, 260px);
    pointer-events: none;
}
.skener-vogal {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid var(--akcent);
}
.skener-vogal-lz { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.skener-vogal-dz { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.skener-vogal-ld { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.skener-vogal-dd { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.skener-crta {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 2px;
    background: var(--akcent);
    box-shadow: 0 0 8px var(--akcent);
    animation: skener-crta-premik 2.2s ease-in-out infinite;
}
@keyframes skener-crta-premik {
    0%   { top: 4px; opacity: 1; }
    48%  { top: calc(100% - 6px); opacity: 1; }
    50%  { opacity: 0; }
    52%  { top: 4px; opacity: 0; }
    58%  { opacity: 1; }
    100% { top: calc(100% - 6px); opacity: 1; }
}

.skener-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background: rgba(13,17,23,.92);
    color: var(--tekst2);
}
.skener-fallback svg {
    color: var(--servis);
}
.skener-fallback p {
    margin: 0;
    max-width: 280px;
    font-size: .9rem;
}

.skener-rocni-ovoj {
    flex: 0 0 auto;
}
.skener-rocni-ovoj .polje-vrstica {
    align-items: flex-end;
}
.skener-rocni-ovoj button {
    min-width: 120px;
}

/* --- Spodnji "sheet" (slide-up panel) — nad tab-bar (z-index 50) in modali (100). --- */
.sheet-ovoj {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(1,4,9,.7);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}
.sheet-ovoj.odprt {
    opacity: 1;
    pointer-events: auto;
}
.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .22s ease-out;
}
.sheet-ovoj.odprt .sheet {
    transform: translateY(0);
}
.sheet-rocaj {
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: var(--border);
    margin: 0 auto 16px;
}
.sheet-glava {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.sheet-glava h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.sheet-podnaslov {
    color: var(--tekst2);
    font-size: .85rem;
    margin: 0 0 14px;
}
.sheet-akcije {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.sheet-akcije .gumb {
    width: 100%;
    min-height: 48px;
    font-size: .95rem;
}
.sheet-info-vrstica {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .88rem;
    color: var(--tekst2);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.sheet-info-vrstica:last-of-type {
    border-bottom: none;
}
.sheet-info-vrstica strong {
    color: var(--tekst);
}

/* =========================================================================
   Zemljevid (Task 8, spec §5.10) — celozaslonski Leaflet znotraj .vsebina,
   isti "full-height column" vzorec kot .skener-ovoj zgoraj.
   ========================================================================= */

.zemljevid-ovoj {
    position: relative;
    min-height: calc(100vh - var(--top-h) - 40px);
}
@media (max-width: 768px) {
    .zemljevid-ovoj {
        min-height: calc(100vh - var(--top-h) - var(--bottom-h) - 28px - env(safe-area-inset-bottom, 0px));
    }
}

#zemljevid-mapa {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg2);
}

.zemljevid-legenda {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 500;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.zemljevid-legenda-vrstica {
    display: flex;
    align-items: center;
    gap: 8px;
}
.zemljevid-pika {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

/* Barvni markerji z rahlim sijem (glow) po statusu — glej statusLokacijeZaZemljevid() v PHP. */
.zemljevid-marker-ok {
    filter: drop-shadow(0 0 5px rgba(63,185,80,.75));
}
.zemljevid-marker-kmalu {
    filter: drop-shadow(0 0 5px rgba(240,136,62,.75));
}
.zemljevid-marker-alarm {
    filter: drop-shadow(0 0 6px rgba(248,81,73,.85));
}

/* --- Popup vsebina --- */
.zemljevid-popup h4 {
    margin: 0 0 4px;
    font-size: 1rem;
}
.zemljevid-popup-sredstva {
    margin: 8px 0;
    padding-left: 18px;
    font-size: .85rem;
    color: var(--tekst);
}
.zemljevid-popup-gumbi {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.zemljevid-popup-gumbi .gumb {
    min-height: 0;
}

/* --- Leaflet popup temna tema (privzeto je Leaflet popup bel) ---
   Selektorji so NAMENOMA predpona .leaflet-container (specifičnost 0,2,0): leaflet.css se v <head>
   naloži ZA app.css (pageHeader $dodatnaGlava), zato bi enako specifično pravilo iz leaflet.css
   (bel popup, siva pisava) prepisalo našo temo — v1.2 je bil popup bel z nečitljivim besedilom. */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
    background: var(--card);
    color: var(--tekst);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.leaflet-container .leaflet-popup-content-wrapper {
    border-radius: var(--radius-sm);
}
.leaflet-container .leaflet-popup-content {
    margin: 12px 14px;
    line-height: 1.4;
    font-family: var(--font-sans);
    font-size: .9rem;
}
.leaflet-container a.leaflet-popup-close-button {
    color: var(--tekst2);
}
.leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--tekst);
}
.leaflet-container .leaflet-control-zoom a {
    background: var(--card);
    color: var(--tekst);
    border-color: var(--border);
}
.leaflet-container .leaflet-control-zoom a:hover {
    background: var(--bg2);
}
.leaflet-container .leaflet-control-attribution {
    background: rgba(13,17,23,.75);
    color: var(--tekst2);
    font-size: 10px;
}
.leaflet-container .leaflet-control-attribution a {
    color: var(--tekst2);
}

/* Temni videz standardnih OSM ploščic (glej assets/zemljevid.js — ploscice()): Leaflet opcijo
   className postavi na VSEBNIK plasti (<div class="leaflet-layer izp-ploscica-temna">), zato je
   filter na njem — zajame vse ploščice, markerji/popupi/kontrole (druge plasti) pa ostanejo v
   pravih barvah. */
.leaflet-layer.izp-ploscica-temna {
    filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35);
}

.zemljevid-popup-glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    padding-right: 14px;
}
.zemljevid-popup-glava h4 {
    margin: 0;
}
.zemljevid-znacka-ok     { color: var(--prosto);  background: rgba(63,185,80,.14); }
.zemljevid-znacka-kmalu  { color: var(--servis);  background: rgba(240,136,62,.14); }
.zemljevid-znacka-alarm  { color: var(--alarm);   background: rgba(248,81,73,.14); }
.zemljevid-znacka-prazno { color: var(--tekst2);  background: rgba(139,148,158,.14); }
.zemljevid-marker-prazno {
    filter: none;
}

/* HTML atribut hidden mora premagati tudi razrede z display:flex/grid (npr. .zemljevid-pas). */
[hidden] {
    display: none !important;
}

/* --- Celozaslonski zemljevid.php (v1.3): orodna vrstica + iskanje + opozorilni pas --- */
.zemljevid-stran {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(100dvh - var(--top-h) - 40px - 20px - 2.4rem);
}
@media (max-width: 768px) {
    .zemljevid-stran {
        min-height: calc(100dvh - var(--top-h) - var(--bottom-h) - 28px - 20px - 2.4rem - env(safe-area-inset-bottom, 0px));
    }
}
.zemljevid-stran .zemljevid-ovoj {
    flex: 1 1 auto;
    min-height: 360px;
}
.zemljevid-orodja {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.zemljevid-iskanje {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}
.zemljevid-iskanje input {
    padding-left: 38px;
}
.zemljevid-iskanje-ikona {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tekst2);
    pointer-events: none;
    display: inline-flex;
}
.zemljevid-iskanje-rezultati {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1200; /* nad Leaflet kontrolami (zoom = z-index 1000), ki niso v ločenem stacking contextu */
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    max-height: 300px;
    overflow-y: auto;
    display: none;
}
.zemljevid-iskanje-rezultati.odprt {
    display: block;
}
.zemljevid-iskanje-rezultat {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--tekst);
    font-family: inherit;
    font-size: .9rem;
    cursor: pointer;
    min-height: 44px;
}
.zemljevid-iskanje-rezultat:last-child {
    border-bottom: 0;
}
.zemljevid-iskanje-rezultat:hover,
.zemljevid-iskanje-rezultat:focus {
    background: rgba(255,255,255,.06);
    outline: none;
}
.zemljevid-iskanje-rezultat small {
    color: var(--tekst2);
    display: block;
    font-size: .8rem;
}
.zemljevid-iskanje-prazno {
    padding: 12px;
    color: var(--tekst2);
    font-size: .88rem;
}
.zemljevid-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.zemljevid-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--tekst2);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.zemljevid-filter:hover {
    color: var(--tekst);
}
.zemljevid-filter.aktiven {
    color: var(--tekst);
    border-color: var(--akcent);
    background: rgba(45,212,191,.1);
}
.zemljevid-filter .zemljevid-pika {
    width: 8px;
    height: 8px;
}
.zemljevid-filter-stevec {
    font-variant-numeric: tabular-nums;
    opacity: .8;
}
.zemljevid-orodja-desno {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
@media (max-width: 768px) {
    .zemljevid-orodja-desno {
        margin-left: 0;
    }
    .zemljevid-iskanje {
        max-width: none;
        flex-basis: 100%;
    }
    /* Filtri v eni vodoravno drsni vrstici (namesto 3 vrstic), gumb »Vse« podvaja filter »Vse«. */
    .zemljevid-filtri {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .zemljevid-filtri::-webkit-scrollbar {
        display: none;
    }
    .zemljevid-filter {
        flex: 0 0 auto;
    }
    #zemljevid-vse {
        display: none;
    }
    .zemljevid-stran .zemljevid-ovoj {
        min-height: 300px;
    }
}
.zemljevid-gumb-lokacija.aktiven {
    border-color: var(--akcent);
    color: var(--akcent);
}
.zemljevid-moja-lokacija {
    filter: drop-shadow(0 0 6px rgba(88,166,255,.9));
}

.zemljevid-pas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(240,136,62,.45);
    background: rgba(240,136,62,.08);
    font-size: .9rem;
}
.zemljevid-pas-ikona {
    color: var(--servis);
    display: inline-flex;
    flex: 0 0 auto;
}
.zemljevid-pas-besedilo {
    flex: 1 1 240px;
}
.zemljevid-pas-besedilo strong {
    display: block;
}
.zemljevid-pas-besedilo span {
    color: var(--tekst2);
    font-size: .84rem;
}
.zemljevid-pas-akcije {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.zemljevid-pas-seznam {
    flex-basis: 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    font-size: .86rem;
}
.zemljevid-pas-seznam li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zemljevid-pas-seznam li .stanje {
    color: var(--tekst2);
    font-size: .8rem;
}
.zemljevid-pas-seznam li .stanje-ok {
    color: var(--prosto);
}
.zemljevid-pas-seznam li .stanje-napaka {
    color: var(--alarm);
}
.zemljevid-pas-napredek {
    flex-basis: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--bg2);
    overflow: hidden;
    display: none;
}
.zemljevid-pas-napredek.aktiven {
    display: block;
}
.zemljevid-pas-napredek > div {
    height: 100%;
    width: 0;
    background: var(--akcent);
    transition: width .3s;
}
.zemljevid-prazno-ovoj {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}
.zemljevid-prazno-ovoj .prazno-stanje {
    pointer-events: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 420px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* Obrazec lokacije (stranke.php): gumb za iskanje naslova + namig pod mini zemljevidom. */
.lokacija-naslov-vrstica {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.lokacija-naslov-vrstica .polje {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.lokacija-naslov-vrstica .gumb {
    flex: 0 0 auto;
    white-space: nowrap;
}
.lokacija-mapa-namig {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: -8px 0 14px;
    font-size: .82rem;
    color: var(--tekst2);
}
.lokacija-mapa-namig .najdeno {
    color: var(--prosto);
}
.lokacija-kartica-brez-koordinat {
    color: var(--servis);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================================
   Izposoje (v1.1) — ERP-stil enotni operativni zaslon: vgrajen (ne celozaslonski) zemljevid
   nad seznamom izposoj. Namenoma LOČENE razrede od .zemljevid-ovoj/#zemljevid-mapa zgoraj
   (celozaslonska stran zemljevid.php uporablja min-height: calc(100vh - ...), ki bi tu, če bi
   uporabili isti razred, preglasil kompaktno height: 45vh/35vh spodaj).
   ========================================================================= */
.izp-mapa-sekcija {
    margin-bottom: 20px;
}
.izp-mapa-glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.izp-zemljevid-ovoj {
    position: relative;
    height: 45vh;
}
@media (max-width: 768px) {
    .izp-zemljevid-ovoj {
        height: 35vh;
    }
}
#izp-mapa {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg2);
}

/* =========================================================================
   Inventura (Task 13, spec §5.7) — KPI barve po statusu postavke + tisk poročila
   ========================================================================= */
.inventura-porocilo-glava {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

@media print {
    .top-bar, .rail, .tab-bar, .zavihki, .akcije-vrstica,
    .modal-zapri, .vsebina-glava, #toast-ovoj, .brez-tiska {
        display: none !important;
    }
    body, .app, .telo, .vsebina {
        display: block !important;
        background: #fff !important;
        color: #000 !important;
    }
    .tabela-ovoj, .tabela th, .tabela td {
        border-color: #999 !important;
        background: #fff !important;
        color: #000 !important;
    }
}

/* =========================================================================
   Dashboard (Task 14, spec §5.1) — pozdrav, opomnik kartice z barvno levo
   obrobo, mini zemljevid.
   ========================================================================= */

.dashboard-pozdrav {
    margin-bottom: 20px;
}
.dashboard-pozdrav h2 {
    margin: 0 0 4px;
    font-size: 1.3rem;
}
.dashboard-pozdrav p {
    margin: 0;
    color: var(--tekst2);
    font-size: .9rem;
}

.dashboard-sekcija-naslov {
    margin: 28px 0 14px;
    font-size: 1.05rem;
}

/* Opomnik kartica: enaka osnova kot .kartica, a s poudarjeno LEVO obrobo po resnosti
   (spec §5.1: "kartice z barvno levo obrobo, klik vodi na akcijo"). */
.opomnik-kartica {
    border-left: 4px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.opomnik-alarm {
    border-left-color: var(--alarm);
}
.opomnik-kmalu {
    border-left-color: var(--servis);
}
.opomnik-info {
    border-left-color: var(--izposojeno);
}
.opomnik-znacka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg2);
    border: 1px solid var(--border);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.opomnik-alarm .opomnik-znacka {
    background: var(--alarm);
    border-color: var(--alarm);
    color: #fff;
}
.opomnik-kmalu .opomnik-znacka {
    background: var(--servis);
    border-color: var(--servis);
    color: #1b1300;
}
.opomnik-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.opomnik-seznam li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--tekst);
    text-decoration: none;
    font-size: .87rem;
}
.opomnik-seznam li a:hover {
    background: var(--bg2);
}
.opomnik-meta {
    flex: 0 0 auto;
    color: var(--tekst2);
    font-size: .78rem;
    white-space: nowrap;
}
.opomnik-povezava {
    align-self: flex-start;
    color: var(--akcent);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}
.opomnik-povezava:hover {
    text-decoration: underline;
}

.dashboard-mapa-ovoj {
    position: relative;
    height: 300px;
}
#dashboard-mapa {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg2);
    cursor: pointer;
}