/* ==========================================================================
   BEXEND FAKTURIRANJE — sodoben, svetel SaaS videz
   Bele kartice z mehko senco, pill značke s tintanim ozadjem, brez serifov.
   Primarna barva znamke je MODRA (prenova 2026; prej emerald zelena).
   Zelena, jantarna in rdeča so ostale izključno pomenske barve stanj.
   ========================================================================== */

/* ── Inter, samostojno gostovana (brez CDN-ja — §2/§7 in GDPR) ────────────
   Variabilna pisava: en woff2 na podnabor pokriva vse debeline. Šumniki (č/š/ž)
   so v podnaboru latin-ext, zato sta potrebni obe datoteki. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-ext.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: 100 900;
    font-display: swap;
    src: url("fonts/inter-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;
}

:root {
    /* ── Spec tokens (v2) ───────────────────────────────────────────── */
    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --border: #E5E9F2;
    /* Obroba vnosnih polj je temnejša od obrob kartic namenoma: pri polju je obroba edini
       znak, da tam sploh je polje, zato zanjo velja WCAG 1.4.11 (3:1 proti podlagi).
       Izmerjeno: 3,25:1 na beli kartici, 3,03:1 na sivem ozadju. Obrobe kartic so okras
       in tega praga ne potrebujejo — zato ločen token, ne potemnitev vsega. */
    --border-input: #84909F;
    --text: #0F1E3D;
    /* Izmerjeno 5,05:1 na --bg (prej #64748B = 4,44:1, tik pod pragom AA). */
    --muted: #5D6B80;

    /* Znamka je modra (prenova 2026). Prej je bila zelena; zelena je ostala izključno
       kot pomenska barva za uspeh/plačano — glej --green nižje. */
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-tint: #EFF6FF;

    /* Jantarna in rdeča nastopata skoraj izključno kot BESEDILO na svojem tintu
       (opozorila, značke, .btn-warning/.btn-danger). V prejšnjih odtenkih je bilo
       razmerje 2,86:1 oz. 3,95:1 — pod AA. Potemnjeni vrednosti dasta 5,41:1 in
       5,30:1 na tintu ter 6,03:1 in 6,47:1 na belem. */
    --amber: #A44708;
    --amber-tint: #FEF3C7;
    --red: #B91C1C;
    --red-tint: #FEE2E2;
    --blue: #2563EB;
    --blue-tint: #DBEAFE;
    --gradient-primary: linear-gradient(135deg, #2563EB, #4F46E5);

    --font-sans: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --radius-card: 14px;
    --radius: 10px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .06);
    --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .1);
    --transition: 150ms ease;

    /* ── Back-compat aliases (old ERP variable names still referenced
         from inline style="" attributes across module PHP files) ─────── */
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface);
    --bg-card: var(--surface);
    --bg-card-hover: #F8FAFC;
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --accent: var(--primary);
    --accent-hover: var(--primary-dark);
    --accent-glow: var(--primary-tint);
    --border-accent: var(--primary);
    --sidebar-bg: var(--surface);
    --radius-sm: var(--radius);
    --ink: var(--text);
    --paper: var(--bg);
    --card: var(--surface);
    --rule: var(--border);
    /* POZOR: --green NI več vzdevek za --primary. Od prehoda znamke na modro se uporablja
       za pomen "uspeh" (sporočila "Shranjeno!", "E-pošta poslana", "Ustvarjenih N ...") na
       ~8 mestih v modulih. Če bi ostal vzdevek, bi ta sporočila postala modra in bi izgubila
       pomen. Za barvo znamke uporabi --primary oz. --accent. */
    /* Vrednost potemnjena z #059669 na #047857: uporablja se kot BARVA BESEDILA na belem
       ("Shranjeno!", "E-pošta poslana"), tam je prejšnja dala 3,77:1 — pod AA. Zdaj 5,48:1. */
    --green: #047857;
    --green-dark: #065F46;
    --green-pale: #ECFDF5;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 14.5px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

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

ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; color: var(--text); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C7CFDA; }

/* Global form input theme */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="url"], input[type="search"], input[type="file"], select, textarea {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--surface); color: var(--text); }

.form-control {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.form-control:disabled { opacity: 0.5; cursor: not-allowed; }

.hidden { display: none !important; }

/* ==========================================================================
   Top Navigation — white, sticky, blurred
   ========================================================================== */

.topnav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    height: 60px;
}

.topnav-inner {
    /* 1360 namesto prejšnjih 1220: po združitvi menija v skupine je vrstica krajša, a je
       prej na 1280 px vseeno prelivala (izmerjeno scrollWidth 1351 pri clientWidth 1264) —
       uporabnik desno ni videl gumba Odjava. Skupaj z manjšim razmikom in krčljivim
       iskalnim poljem spodaj se vrstica zdaj zmeraj zvede v širino zaslona. */
    max-width: 1360px;
    margin: 0 auto;
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.topnav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none !important;
}
.topnav-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.topnav-brand-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.topnav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    border-radius: var(--radius);
}
.topnav-hamburger:hover { background: var(--bg); }

.topnav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-grow: 1;
}

.topnav-link {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    color: var(--muted);
    font-size: 0.87rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: var(--radius-pill);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}
.topnav-link:hover { color: var(--text); background: #F1F5F9; }
.topnav-link.active { color: var(--primary); background: var(--primary-tint); }
.topnav-link i.fa-caret-down { margin-left: 6px; font-size: 0.7rem; }

.topnav-dropdown { position: relative; display: flex; }
.topnav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card-hover);
    padding: 6px;
    z-index: 350;
}
.topnav-dropdown.open .topnav-dropdown-menu { display: block; }
.topnav-dropdown-item {
    display: block;
    padding: 9px 12px;
    color: var(--text) !important;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background var(--transition);
}
.topnav-dropdown-item:hover { background: var(--primary-tint); }
.topnav-dropdown-item.active { color: var(--primary) !important; font-weight: 600; background: var(--primary-tint); }

.topnav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}
.topnav-username {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    text-decoration: none;
}
/* Od F8 je ime povezava na "Moj račun" — podčrtaj naj se pokaže šele ob prehodu,
   sicer vrstica deluje razdrobljeno. */
a.topnav-username:hover { color: var(--text); text-decoration: underline; }
/* Dolgo ime (npr. "Administrator Demo d.o.o.") je pri 1280 px porinilo gumb Odjava 30 px čez
   rob (izmerjeno). Ime se skrajša s tremi pikami, celotno je v title/na strani Moj račun. */
.topnav-username { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1440px) {
    .topnav-link { padding: 0 11px; }
    .topnav-username { max-width: 120px; }
    .topnav-search-input { width: 150px; }
}
.topnav-profil-ikona { display: none; }
@media (max-width: 1300px) {
    .topnav-link { padding: 0 8px; }
    .topnav-username { display: none; }
    .topnav-profil-ikona { display: flex; }
    .topnav-search-input { width: 120px; }
}
.topnav-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border: 1px solid var(--border);
    text-decoration: none !important;
    transition: var(--transition);
}
.topnav-icon-btn:hover { color: var(--text); background: var(--bg); border-color: #C7CFDA; }
.topnav-logout {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted) !important;
    text-decoration: none !important;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}
.topnav-logout:hover { color: var(--text) !important; background: var(--bg); border-color: #C7CFDA; }

/* Meni + uporabniški blok se pri ~1120px ne izideta s polnim paddingom — zmanjšan padding
   povezav (0 10px) in razmiki, ime uporabnika pa se skrije, da nič ne odreže gumba za odjavo
   na desni. Pod 860px prevzame hamburger blok spodaj (kasnejša pravila iste specifičnosti ga
   prepišejo). Meni ima od prenove šest skupin namesto desetih ločenih postavk (glej chrome.php). */
@media (max-width: 1120px) {
    .topnav-inner { gap: 8px; padding: 0 16px; }
    .topnav-link { padding: 0 10px; font-size: 0.84rem; }
    .topnav-username { display: none; }
    /* Tudi po skritju imena je vrstica pri 1024 px prelivala za 29 px (izmerjeno:
       scrollWidth 1053). Iskalno polje je edini element, ki se sme skrčiti brez izgube
       pomena — ob fokusu se spet razširi. */
    .topnav-search-input { width: 120px; }
    .topnav-search-input:focus { width: 200px; }
    .topnav-link { padding: 0 8px; }
}
/* Med 1021 in 1120 px je v vrstici še ikona Moj račun (32 px) — povezave in iskanje se
   stisnejo še malo, da Odjava ostane v vidnem polju. */
@media (max-width: 1120px) and (min-width: 1021px) {
    .topnav-link { padding: 0 5px; }
    .topnav-search-input { width: 84px; }
}

/* Meja je bila 860 px, a je bil razpon 861–1020 px slep: meni s šestimi skupinami potrebuje
   ~1010 px in je pri 880 px prelival (izmerjeno scrollWidth 1013 pri clientWidth 880) —
   uporabnik desno ni videl odjave. Hamburger zato prevzame že pod 1020 px. */
@media (max-width: 1020px) {
    .topnav-hamburger { display: inline-flex; align-items: center; }
    .topnav-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--surface);
        padding: 8px;
        gap: 2px;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-card);
    }
    .topnav-menu.open { display: flex; }
    .topnav-link { height: auto; padding: 12px 14px; border-radius: var(--radius); }
    .topnav-dropdown { flex-direction: column; }
    .topnav-dropdown-menu { position: static; box-shadow: none; border: none; background: var(--bg); display: none; }
    .topnav-dropdown.open .topnav-dropdown-menu { display: block; }
    .topnav-user { display: none; }
    .topnav-inner { flex-wrap: wrap; }
    .topnav-search-input { width: 120px; }
    .topnav-search-input:focus { width: 160px; }
}

/* ==========================================================================
   Globalno iskanje (P1b) — topnav search box + dropdown zadetkov
   ========================================================================== */

/* Iskalno polje se sme skrčiti (do 120 px), da se navigacija nikoli ne prelije. */
.topnav-search { position: relative; display: flex; align-items: center; flex: 0 1 auto; min-width: 120px; }
.topnav-search-icon {
    position: absolute;
    left: 11px;
    color: var(--muted);
    font-size: 0.78rem;
    pointer-events: none;
}
.topnav-search-input {
    width: 190px;
    min-width: 0;
    max-width: 100%;
    height: 34px;
    padding: 0 10px 0 30px !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-pill) !important;
    background: var(--bg) !important;
    font-size: 0.83rem !important;
    transition: width var(--transition), border-color var(--transition), background var(--transition);
}
.topnav-search-input:focus {
    width: 260px;
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}
.topnav-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 420px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card-hover);
    padding: 6px;
    z-index: 400;
}
.topnav-search-dropdown.open { display: block; }
.topnav-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
}
.topnav-search-result:hover { background: var(--primary-tint); }
.topnav-search-result-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.topnav-search-result-title {
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topnav-search-result-sub {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topnav-search-result-tag {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary);
    background: var(--primary-tint);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}
.topnav-search-empty { padding: 14px 12px; text-align: center; color: var(--muted); font-size: 0.83rem; }

/* Naslov skupine v rezultatih iskanja (Funkcije / Dokumenti / Partnerji). Velja povsod,
   ne le na delovni mizi — združevanje počne app.js za vsa iskalna polja. */
.topnav-search-group {
    padding: 9px 12px 4px;
    font-size: 0.67rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--muted);
}
.topnav-search-group:first-child { padding-top: 6px; }

/* ==========================================================================
   Page container / header
   ========================================================================== */

.page-wrap, .modul-content, .dashboard {
    max-width: 1220px;
    margin: 0 auto;
    padding: 28px 24px;
}

.modul-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}
.modul-toolbar h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.workspace-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 2px;
}
.workspace-date {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 26px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius);
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none !important;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(37, 99, 235, .3); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: #C7CFDA; background: var(--bg); transform: translateY(-1px); }
.btn-danger { background: var(--red-tint); border-color: transparent; color: var(--red); }
.btn-danger:hover { background: #FCD3D3; transform: translateY(-1px); }
.btn-success { background: var(--gradient-primary); border-color: transparent; color: #fff; }
.btn-success:hover { box-shadow: 0 6px 16px rgba(5, 150, 105, .3); transform: translateY(-1px); }
.btn-warning { background: var(--amber-tint); border-color: transparent; color: var(--amber); }
.btn-warning:hover { background: #FDE6B0; transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--primary); background: var(--primary-tint); }
.btn-sm { padding: 5px 11px; font-size: 0.8rem; border-radius: 8px; }
.btn-lg { padding: 11px 24px; font-size: 0.95rem; }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; transform: none !important; box-shadow: none !important; }

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    padding: 11px 15px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.87rem;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
}
/* Obroba je bila #B9EBD2 (zelena) na modrem tintu — ostanek pred prenovo palete. */
.alert-success { background: var(--primary-tint); border-color: #BFD7FE; color: var(--primary-dark); }
.alert-error { background: var(--red-tint); border-color: #FBC5C5; color: var(--red); }
.alert-info { background: var(--blue-tint); border-color: #BFDBFE; color: var(--blue); }
.alert-warning { background: var(--amber-tint); border-color: #FCE4A6; color: var(--amber); }
.alert i { font-size: 0.95rem; flex-shrink: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-group { display: flex; flex-direction: column; margin-bottom: 0; }
.form-group label, .form-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.form-group textarea { resize: vertical; min-height: 76px; }
.form-group.full-width, .form-grid .full-width { grid-column: 1 / -1; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Dolga vsebina (npr. naziv davčne obravnave v <select>) ne sme razširiti stolpca mreže. */
.form-grid > * { min-width: 0; }
.form-group select { max-width: 100%; }

.modul-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 20px;
}
.modul-form h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.filter-bar select, .filter-bar input[type="text"], .filter-bar input[type="date"] {
    padding: 7px 11px;
    background: var(--bg);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
}
.filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--primary); }
.filter-bar .btn { margin-left: auto; }

/* Tabs (module-internal, e.g. sifranti-ostalo) */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.tab-btn:hover { color: var(--text); background: #F1F5F9; }
.tab-btn.active { color: var(--primary); background: var(--primary-tint); }
/* Vidnost tab-panelov krmili markup/JS z inline styli — CSS je ne sme prepisati. */

/* ==========================================================================
   Tables
   ========================================================================== */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Tabela drsi SAMA, ne stran: brez tega široka tabela raztegne dokument in vodoravno
   drsenje dobi celotna stran (pri 1024 px izmerjeno scrollWidth 1155). `display:block` je
   pogoj, da overflow na tabeli sploh učinkuje.

   Zakaj samo do 1120 px in ne povsod: pri `display:block` notranja tabela ne podeduje
   `width:100%`, zato se na širokem zaslonu skrči na širino vsebine in v kartici ostane
   prazen pas (opaženo na delovnem nalogu — tabela 860 px v kartici 1172 px). Nad 1120 px
   tabele v kartico gredo, zato tam ostane navadna tabela. */
@media (max-width: 1120px) {
    .data-table {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
    }
}
/* Številka dokumenta se ne lomi — "RAC-2026-00215" v treh vrsticah je neberljiv. Velja
   SAMO pod 1020 px: tam tabela že drsi sama in je širši stolpec brezplačen. Na namizju bi
   isto pravilo potisnilo tabelo čez rob in odrezalo stolpec Akcije (izmerjeno pri 1280 px). */
@media (max-width: 1120px) {
    .data-table tbody td:first-child, .data-table thead th:first-child { white-space: nowrap; }
}
.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table thead th.text-right, .data-table thead th.text-center { text-align: right; }
.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #F8FAFC; }
.data-table tbody td.text-right, .data-table tbody td.text-center { text-align: right; }
.data-table tbody td.text-muted { color: var(--muted); }
.data-table tbody td.text-money, .text-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    /* Znesek se ne sme lomiti — "366,00 €" mora ostati v eni vrstici. Brez tega pristane
       valuta v svoji vrstici takoj, ko je stolpec malo ožji (opaženo po prehodu na Inter). */
    white-space: nowrap;
}
.data-table tfoot tr { font-weight: 700; background: var(--primary-tint); }
.data-table tfoot td { padding: 12px 16px; }
/* POZOR: razred .actions nosi VEDNO <td> (15 mest v modulih, nikjer <div>).
   Prej je imel display:flex, kar celico vzame iz tabelarne postavitve: ne raztegne se
   čez višino vrstice, zato je njena spodnja ločnica narisana previsoko in stolpec Akcije
   je izgledal zamaknjen glede na ostale (izmerjeno: vrstica 395-462, celica 396-446).
   Celica mora ostati table-cell; vsebina se poravna desno z inline gradniki. */
.data-table .actions, .actions {
    text-align: right;
    white-space: nowrap;
}
.data-table .actions a, .data-table .actions button,
.actions a, .actions button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
    padding: 5px 9px;
    font-size: 0.8rem;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}
.data-table .actions a:hover, .data-table .actions button:hover,
.actions a:hover, .actions button:hover { background: var(--primary-tint); color: var(--primary); }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: #F8FAFC; }

/* P1b: sortable column headers (klik → sort/dir preko GET, glej sortHeader() v komponente.php) */
.data-table thead th.sortable { padding: 0; }
.data-table thead th.sortable a {
    display: block;
    padding: 12px 16px;
    color: var(--muted) !important;
    text-decoration: none !important;
}
.data-table thead th.sortable a:hover { color: var(--text) !important; background: #F1F5F9; }
.data-table thead th.sortable a i { margin-left: 4px; color: var(--primary); font-size: 10px; }
.data-table thead th.sortable.text-right a { text-align: right; }

/* P1b: paginacija (glej paginacijaFooter() v komponente.php) */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 4px;
}
.pagination-info { color: var(--muted); font-size: 0.83rem; }
.pagination-nav { display: flex; gap: 8px; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-primary { color: var(--text); }
.text-secondary { color: var(--muted); }
.text-accent { color: var(--primary); }

/* Postavke (line item) editor tables */
.postavke-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.postavke-table th {
    padding: 8px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.postavke-table th.text-right { text-align: right; }
.postavke-table td { padding: 5px 4px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.postavke-table td input, .postavke-table td select {
    width: 100%;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.83rem;
}
.postavke-table td input:focus, .postavke-table td select:focus { outline: none; border-color: var(--primary); }
.postavke-table td input.calc-field {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    text-align: right;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.postavke-table .btn-remove-row {
    width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
    color: var(--muted); cursor: pointer; font-size: 0.78rem;
}
.postavke-table .btn-remove-row:hover { color: var(--red); border-color: var(--red-tint); background: var(--red-tint); }

/* P1b: diskreten namig zadnje cene tega artikla za izbranega partnerja (klik = prevzem) */
.zadnja-cena-hint {
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--amber);
    cursor: pointer;
    white-space: nowrap;
}
.zadnja-cena-hint:hover { text-decoration: underline; }

/* Totali: tinted blok namesto dvojne računovodske črte */
.postavke-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}
.postavke-totals table { border-collapse: collapse; }
.postavke-totals td { padding: 5px 14px; font-size: 0.88rem; }
.postavke-totals td:first-child { color: var(--muted); text-align: right; }
.postavke-totals td:last-child { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.postavke-totals tr.total-row td {
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--primary-tint);
    padding-top: 10px;
    padding-bottom: 10px;
}
.postavke-totals tr.total-row td:first-child { border-radius: var(--radius) 0 0 var(--radius); color: var(--primary-dark); }
.postavke-totals tr.total-row td:last-child { border-radius: 0 var(--radius) var(--radius) 0; color: var(--primary-dark); }

/* ==========================================================================
   Badges / Status pills
   ========================================================================== */

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-active, .badge-success, .badge-green { background: var(--primary-tint); color: var(--primary-dark); }
.badge-inactive, .badge-danger { background: var(--red-tint); color: var(--red); }
.badge-admin, .badge-purple, .badge-blue, .badge-orange, .badge-default, .badge-muted { background: #F1F5F9; color: var(--muted); }
.badge-warning { background: var(--amber-tint); color: var(--amber); }
.badge-accent { background: var(--primary-tint); color: var(--primary-dark); }

/* Large status pill next to document/opomin titles (v2 replaces v1 "stamp") */
.status-pill-lg {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   KPI tiles (summary cards)
   ========================================================================== */

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
/* P4/popravek: Delovna miza prikaže 5 KPI ploščic. Prejšnji minmax(150px) je 5 ploščic
   stisnil v eno vrstico, a so bile PREOZKE za zneske ("1.132,00 €" se je zlomil čez dve
   vrstici, labela odrezana). Vsebina (ikona 42px + znesek do ~110px + padding) rabi vsaj
   ~200px — zato raje pustimo, da se ploščice zlomijo v 3+2, kot da režejo denar. */
.summary-cards-kpi {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.summary-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
a.summary-card { text-decoration: none; color: inherit; cursor: pointer; }
.summary-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.summary-card-info { display: flex; flex-direction: column; }
.summary-card-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 4px;
}
.summary-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; /* znesek in € vedno v ISTI vrstici — lomljenje denarja je napaka */
}
.summary-card-label { min-width: 0; overflow-wrap: normal; } /* labela se sme prelomiti v 2 vrstici, ne sme pa biti odrezana */

/* F1 pametna veriga: horizontalen stepper Ponudba -> Dobavnica -> Racun na pregled.php,
   povezan s puščicami; trenutni korak dobi emerald poudarjen rob, še-ne-ustvarjeni korak
   je pikčasta "pending" kartica. */
.veriga-stepper {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.veriga-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 12px 16px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.veriga-step.current {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}
.veriga-step.pending {
    background: transparent;
    border: 1px dashed var(--border);
    box-shadow: none;
    justify-content: center;
    align-items: flex-start;
    opacity: 0.7;
}
.veriga-step-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.veriga-step-stevilka {
    font-weight: 600;
    font-size: 0.95rem;
}
.veriga-step-znesek {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-size: 0.85rem;
}
.veriga-step-pending-text {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}
.veriga-step-btn { margin-top: 4px; align-self: flex-start; }
.veriga-arrow {
    display: flex;
    align-items: center;
    color: var(--muted);
    font-size: 1rem;
}

/* Report / category picker tiles (izpisi) */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.category-tile {
    display: block;
    text-align: center;
    padding: 22px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    text-decoration: none !important;
    transition: box-shadow var(--transition), transform var(--transition);
}
.category-tile:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.category-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.category-icon i { color: #fff; font-size: 1.1rem; }
.category-name { font-size: 0.86rem; font-weight: 600; color: var(--text); }

/* ==========================================================================
   Empty state / loading / spinner
   ========================================================================== */

.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg);
    font-size: 1.4rem;
    color: var(--muted);
    margin-bottom: 14px;
}
.empty-state p { font-size: 0.92rem; }

.loading-overlay { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--muted); gap: 10px; font-size: 0.88rem; }

.spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Overlay / modal
   ========================================================================== */

.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.overlay-backdrop.active { opacity: 1; visibility: visible; }
.overlay-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    max-width: 620px;
    width: 90%;
    max-height: 82vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-card-hover);
}
.overlay-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.overlay-close:hover { color: var(--text); background: var(--bg); }
.overlay-header { margin-bottom: 18px; }
.overlay-header h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.overlay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Admin-style modal (reuses same tokens) */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-card-hover);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.modal-close { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 4px; border-radius: 8px; }
.modal-close:hover { color: var(--text); background: var(--bg); }
.modal-body { padding: 24px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }

/* ==========================================================================
   Autocomplete
   ========================================================================== */

.autocomplete-wrapper { position: relative; }
/* The wrapper sits between .form-group and the input, so the input needs its own width. */
.form-group .autocomplete-wrapper input { width: 100%; }

/* Document editor: head, items and notes on one page, separated by section headings. */
.dok-sekcija + .dok-sekcija { margin-top: 28px; }
.autocomplete-dropdown {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card-hover);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}
.autocomplete-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 0.85rem; border-radius: 8px; margin: 3px; }
.autocomplete-item:hover { background: var(--primary-tint); }
.autocomplete-item-main { color: var(--text); font-weight: 600; }
.autocomplete-item-sub { color: var(--muted); font-size: 0.78rem; }
.autocomplete-no-results { padding: 10px 12px; color: var(--muted); font-size: 0.85rem; text-align: center; }

/* ==========================================================================
   Dashboard ("Delovna miza")
   ========================================================================== */

.workspace-columns { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.workspace-section-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); font-weight: 700; margin-bottom: 12px;
}
.quick-actions { display: flex; flex-direction: column; gap: 10px; }
.quick-action-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--text) !important;
    text-decoration: none !important;
    transition: box-shadow var(--transition), transform var(--transition);
}
.quick-action-btn:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.quick-action-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--primary-tint);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.quick-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quick-action-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.quick-action-desc { font-size: 12px; color: var(--muted); }
.quick-action-btn.quick-action-primary {
    background: var(--gradient-primary);
    border-color: transparent;
}
.quick-action-btn.quick-action-primary .quick-action-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.quick-action-btn.quick-action-primary .quick-action-title { color: #fff; }
.quick-action-btn.quick-action-primary .quick-action-desc { color: rgba(255, 255, 255, .85); }

.workspace-recent-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--text); }

@media (max-width: 860px) {
    .workspace-columns { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CRM: časovnica aktivnosti (crm/index.php, crm/partner360.php)
   ========================================================================== */

.crm-timeline { display: flex; flex-direction: column; gap: 4px; }
.crm-timeline-item {
    display: flex;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
}
.crm-timeline-item:last-child { border-bottom: none; }
.crm-timeline-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.crm-timeline-body { flex: 1; min-width: 0; }
.crm-timeline-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.crm-timeline-date { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.crm-timeline-meta { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.crm-timeline-vsebina { font-size: 0.85rem; color: var(--text); margin-top: 6px; white-space: pre-line; }

/* CRM: Priložnosti — prodajni lijak (kanban-lite, brez drag&drop knjižnic; premik faze prek
   gumbov ← → oz. "Izgubljena", glej moduli/crm/priloznosti.php) */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: start;
}
.kanban-col {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 12px;
    min-height: 120px;
}
.kanban-col-header {
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.kanban-col-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 700; font-size: 0.86rem; color: var(--text); }
.kanban-col-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
}
.kanban-col-sum { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.kanban-cards { display: flex; flex-direction: column; gap: 10px; }
.kanban-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: border-color .15s;
}
.kanban-card:hover { border-color: var(--primary); }
.kanban-card-title { font-weight: 600; font-size: 0.86rem; color: var(--text); margin-bottom: 2px; }
.kanban-card-partner { font-size: 0.76rem; color: var(--muted); margin-bottom: 6px; }
.kanban-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.kanban-card-rok.overdue { color: var(--red); font-weight: 600; }
.kanban-card-ponudba { font-size: 0.74rem; color: var(--primary); margin-top: 4px; }
.kanban-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; }
.kanban-card-arrows { display: flex; gap: 4px; }
.kanban-card-arrows button {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kanban-card-arrows button:hover { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); }
.kanban-card-lost { font-size: 0.72rem; color: var(--red); background: none; border: none; cursor: pointer; padding: 0; }
.kanban-card-lost:hover { text-decoration: underline; }
.kanban-empty { font-size: 0.78rem; color: var(--muted); text-align: center; padding: 16px 4px; }

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

/* CRM: Partner 360 */
.p360-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
}
.p360-header h2 { margin: 0 0 4px; font-size: 1.3rem; }
.p360-header-meta { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.p360-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
}
.p360-section-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.p360-inline-form {
    display: none;
    background: var(--primary-tint);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.p360-inline-form.active { display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid.cols-3 { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .btn { margin-left: 0; }
    .postavke-table { font-size: 0.78rem; overflow-x: auto; display: block; }
    /* Postavke editor: večji dotik-cilji + realne min-širine stolpcev, da vnos
       na telefonu ni "zmečkan" — overflow-x:auto zgoraj je fallback za scroll,
       sticky prvi stolpec ni potreben (uporabnik pomika z levo-desno drsenjem). */
    .postavke-table th, .postavke-table td { padding: 6px 4px; }
    .postavke-table td input, .postavke-table td select {
        min-height: 38px;
        padding: 6px 6px;
        font-size: 0.85rem;
    }
    .postavke-table td:nth-child(1) { min-width: 150px; } /* opis / artikel — fleksibilno, a berljivo */
    .postavke-table td:nth-child(2) { min-width: 60px; }  /* enota */
    .postavke-table td:nth-child(3) { min-width: 80px; }  /* kolicina */
    .postavke-table td:nth-child(4) { min-width: 90px; }  /* cena */
    .postavke-table td:nth-child(5) { min-width: 80px; }  /* popust % */
    .postavke-table td:nth-child(6) { min-width: 90px; }  /* DDV */
    .postavke-table td:nth-child(n+7) { min-width: 70px; } /* neto/ddv/bruto izračun + brisanje */
    .summary-cards { grid-template-columns: repeat(2, 1fr); }
    .page-wrap, .modul-content, .dashboard { padding: 18px 16px; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .topnav, .modul-toolbar .toolbar-actions, .filter-bar, .btn, .actions, .no-print { display: none !important; }
    .page-wrap, .modul-content, .dashboard { padding: 0 !important; max-width: 100%; }
    body { background: #fff; color: #000; }
    .data-table, .modul-form, .summary-card, .category-tile { box-shadow: none !important; border: 1px solid #ccc; }
    .status-badge, .status-pill-lg, .badge { background: transparent !important; border: 1px solid currentColor; }
}

/* ==========================================================================
   Dostopnost (F8, WCAG 2.2 AA)
   ========================================================================== */

/* Preskočna povezava: prva tipka Tab na vsaki strani. Brez nje mora uporabnik
   tipkovnice pred vsebino vsakič prelistati celoten meni. Skrita je s premikom
   izven zaslona, ne z display:none — slednje jo odstrani tudi iz fokusnega reda. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
    transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* Vidni fokus povsod (WCAG 2.4.7). Uporabljamo :focus-visible, da obroč ne skoči
   ob kliku z miško, ampak pri krmarjenju s tipkovnico — in ga NE odstranjujemo z
   outline:none brez nadomestila, kar je najpogostejša napaka na tem področju.
   Dvojni obroč (bel + moder) je viden tako na svetli kot na temni podlagi. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.topnav :focus-visible,
.home-header :focus-visible,
.admin-topbar :focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .55);
}
/* Cilj preskočne povezave: fokus se nanj premakne programsko (tabindex="-1"),
   zato tam obroča ne rišemo — vsebina ni interaktivni element. */
main:focus, main:focus-visible { outline: none; }

/* Manj gibanja (WCAG 2.3.3 in prefers-reduced-motion). Prehodov ne izklopimo
   popolnoma na 0s, ker to pri nekaterih brskalnikih preskoči tudi dogodek
   transitionend; 0.01ms je ustaljena rešitev. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Tarče za dotik ≥ 44 px (WCAG 2.5.8). Velja samo za dotik — na miški bi enako
   velik gumb povsod pomenil razmetan vmesnik, ki ga nihče ni prosil. */
@media (pointer: coarse) {
    .btn,
    .data-table .actions a,
    .data-table .actions button,
    .topnav-link,
    .icon-btn {
        min-height: 44px;
    }
    .data-table .actions a,
    .data-table .actions button {
        min-width: 44px;
    }
}

/* Glavne tabele na telefonu: vodoravno drsenje z LEPLJIVIM prvim stolpcem, da se
   ob pomiku v desno še vedno vidi, čigava vrstica je (§5 CLAUDE.md — stisnjena
   tabela ni možnost). Enak pristop kot pri .postavke-table, le da tu prvi stolpec
   ostane na mestu, ker nosi identiteto zapisa (številka dokumenta, naziv). */
@media (max-width: 768px) {
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.82rem;
    }
    .data-table thead th, .data-table tbody td { padding: 10px 12px; }
    .data-table thead th:first-child,
    .data-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        /* Brez lastnega ozadja bi se pod lepljivim stolpcem videlo drsenje vsebine. */
        box-shadow: 1px 0 0 var(--border);
    }
    .data-table thead th:first-child { background: var(--bg); }
    .data-table tbody td:first-child { background: var(--surface); }
    .data-table tbody tr:hover td:first-child { background: #F8FAFC; }
}

/* Povzetkovne ploščice na ozkem zaslonu. Pri 360 px je dvostolpčna mreža prelivala:
   ploščica potrebuje ~205 px (ikona 42 + razmik + znesek + notranji rob), dve pa 426 px.
   Mreža tega sama ne stisne, ker imajo elementi mreže privzeto min-width:auto in se ne
   skrčijo pod vsebino — zato en stolpec in izrecni min-width:0 za lomljenje besedila.
   Izmerjeno na /modul.php?slug=racuni: scrollWidth 479 pri clientWidth 360. */
@media (max-width: 560px) {
    .summary-cards, .summary-cards-kpi { grid-template-columns: 1fr; gap: 12px; }
}
.summary-card { min-width: 0; }
.summary-card-info { min-width: 0; }
.summary-card-label { overflow-wrap: anywhere; }

/* Pojasnilo pod poljem. Razmik spodaj je nujen: brez njega se pojasnilo prilepi na
   naslednjo oznako in navpični ritem obrazca razpade. */
.field-hint {
    display: block;
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}

/* ==========================================================================
   Pomoč (pomoc.php)
   ========================================================================== */
.pomoc-postavitev { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.pomoc-kazalo { position: sticky; top: 84px; padding: 18px; }
.pomoc-kazalo-naslov { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; }
.pomoc-kazalo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pomoc-kazalo a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.88rem; min-height: 40px; }
.pomoc-kazalo a:hover, .pomoc-kazalo a:focus-visible { background: var(--primary-tint); color: var(--primary); }
.pomoc-kazalo a i { width: 16px; text-align: center; color: var(--primary); }
.pomoc-vsebina { min-width: 0; }
.pomoc-poglavje { scroll-margin-top: 84px; }
.pomoc-poglavje h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.pomoc-poglavje h2 i { color: var(--primary); }
.pomoc-poglavje p, .pomoc-poglavje li { line-height: 1.6; font-size: 0.92rem; }
.pomoc-poglavje p { margin: 0 0 10px; }
.pomoc-poglavje ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.pomoc-poglavje li { margin-bottom: 4px; }
.pomoc-poglavje code { background: #F1F5F9; padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.pomoc-vprasanje { border-top: 1px solid var(--border); padding: 10px 0; }
.pomoc-vprasanje:first-of-type { border-top: none; }
.pomoc-vprasanje summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; min-height: 32px; display: flex; align-items: center; }
.pomoc-vprasanje p { margin: 8px 0 0; color: var(--text-secondary, var(--muted)); }
@media (max-width: 900px) {
    .pomoc-postavitev { grid-template-columns: 1fr; }
    .pomoc-kazalo { position: static; }
}

/* ==========================================================================
   Davki in prispevki (moduli/davki)
   ========================================================================== */
.davki-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.davki-mreza > * { min-width: 0; }
.davki-merilnik { padding: 12px 0 16px; border-bottom: 1px solid var(--border); }
.davki-merilnik:last-child { border-bottom: none; }
.davki-merilnik-glava { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.davki-merilnik-naziv { font-weight: 600; font-size: 0.92rem; }
.davki-status { font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; }
.davki-v-redu .davki-status { background: var(--green-pale); color: var(--green-dark); }
.davki-opozorilo .davki-status { background: var(--amber-tint); color: var(--amber); }
.davki-kriticno .davki-status { background: var(--red-tint); color: var(--red); }
.davki-merilnik-vrednost { font-size: 1.15rem; font-weight: 700; margin: 6px 0; font-variant-numeric: tabular-nums; }
.davki-merilnik-vrednost span { font-size: 0.82rem; font-weight: 400; color: var(--muted); }
.davki-tir { height: 8px; border-radius: 4px; background: #E2E8F0; overflow: hidden; }
.davki-polnilo { height: 100%; border-radius: 4px; background: var(--green); }
.davki-opozorilo .davki-polnilo { background: var(--amber); }
.davki-kriticno .davki-polnilo { background: var(--red); }
.davki-opis { font-size: 0.82rem; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.davki-tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.davki-tabela th, .davki-tabela td { padding: 8px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.davki-tabela th { text-align: left; font-weight: 400; color: var(--text); }
.davki-tabela td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.davki-vsota th, .davki-vsota td { font-weight: 700; }
.davki-neto td { color: var(--primary); font-size: 1.05rem; }
.davki-meseci .davki-stolpec-graf { width: 40%; }
.davki-mesec-bar { height: 10px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--primary); }
.davki-roki { list-style: none; margin: 0; padding: 0; }
.davki-roki li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.davki-rok-datum { font-weight: 700; min-width: 82px; font-variant-numeric: tabular-nums; }
.davki-viri summary { cursor: pointer; font-weight: 600; min-height: 32px; }
@media (max-width: 900px) {
    .davki-mreza { grid-template-columns: 1fr; }
    .davki-meseci .davki-stolpec-graf { display: none; }
}
.davki-param-tabela td { vertical-align: middle; }
.davki-param-vnos { width: 130px; text-align: right; }
.davki-param-skupina th { background: var(--primary-tint); color: var(--primary); text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 700px) {
    .davki-param-tabela thead { display: none; }
    .davki-param-tabela tr { display: grid; grid-template-columns: 1fr; padding: 8px 0; }
    .davki-param-tabela td { border: none; text-align: left !important; }
    .davki-param-vnos { width: 100%; text-align: left; }
}

/* ── Moj račun: dvofaktorska prijava in prijavljene naprave ─────────── */
.rezervne-kode { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; max-width: 640px; }
.rezervne-kode code { display: block; text-align: center; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; font-size: .95rem; letter-spacing: .04em; background: var(--bg); }
.twofa-koraki { margin: 0 0 16px 18px; font-size: .88rem; line-height: 1.6; }
.twofa-nastavitev { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.twofa-qr { background: #fff; padding: 10px; border: 1px solid var(--border); border-radius: 10px; line-height: 0; }
.twofa-qr svg { width: 180px; height: 180px; }
.twofa-kljuc { font-size: .95rem; letter-spacing: .06em; word-break: break-all; }
.seje-seznam { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
.seje-seznam li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.seje-seznam li:last-child { border-bottom: none; }
.btn-link { background: none; border: none; color: var(--primary); padding: 6px 0; cursor: pointer; font: inherit; min-height: 44px; }
@media print {
    body * { visibility: hidden; }
    .rezervne-kode, .rezervne-kode * { visibility: visible; }
    .rezervne-kode { position: absolute; top: 0; left: 0; }
}

/* Skrito za oko, dostopno bralnikom zaslona (oznake filtrov). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.os-odtujitev { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 8px 0 16px; }
.os-odtujitev legend { font-size: .82rem; font-weight: 600; color: var(--muted); padding: 0 6px; }
.data-table tr.os-tekoce td { background: var(--primary-tint); }
.davki-xml { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.davki-sim { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; margin-bottom: 14px; }
.davki-sim .btn { justify-self: start; min-height: 44px; }
.davki-primerjava thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: right; }
.davki-primerjava td { text-align: right; }
.davki-priporocilo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-top: 12px; font-size: .9rem; }
.davki-priporocilo.davki-v-redu { background: var(--primary-tint); }
.davki-priporocilo.davki-opozorilo { background: var(--amber-tint); }
.ddv-koraki { margin: 0 0 0 20px; display: grid; gap: 12px; font-size: .9rem; line-height: 1.55; }
.api-zeton { display: block; word-break: break-all; font-size: .88rem; margin-top: 4px; user-select: all; }
.api-nov { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
/* Primerjava ima tri stolpce in opombe v celicah — na telefonu se besedilo lomi, zneski ne. */
.davki-primerjava td { white-space: normal; }
.davki-primerjava td .text-muted { font-size: .78rem; display: inline-block; }
@media (max-width: 600px) {
    .davki-primerjava { font-size: .82rem; }
    .davki-primerjava th, .davki-primerjava td { padding: 8px 2px; }
}

/* ── Asistent (plavajoč gumb + panel) ─────────────────────────────── */
.asistent-fab {
    position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; z-index: 900;
    background: var(--gradient-primary); color: #fff; font-size: 1.3rem;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35); transition: transform .15s;
}
.asistent-fab:hover { transform: translateY(-2px); }
.asistent-fab:focus-visible, .asistent-panel button:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.asistent-panel {
    position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 120px)); z-index: 901;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .18); display: flex; flex-direction: column; overflow: hidden;
}
.asistent-panel[hidden] { display: none; }
.asistent-glava { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.asistent-glava-gumbi { display: flex; gap: 4px; }
.asistent-glava-gumbi button { width: 40px; height: 40px; border: none; background: none; border-radius: 10px; color: var(--muted); cursor: pointer; }
.asistent-glava-gumbi button:hover, .asistent-glasno[aria-pressed="true"] { background: var(--primary-tint); color: var(--primary); }
.asistent-sporocila { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.asistent-sporocilo { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.asistent-uporabnik { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.asistent-asistent { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 4px; }
.asistent-napaka { align-self: flex-start; background: var(--red-tint); color: var(--red); }
.asistent-zapis { font-size: .84rem; color: var(--primary-dark); background: var(--primary-tint); padding: 8px 10px; border-radius: 10px; }
.asistent-zapis a { font-weight: 600; margin-left: 4px; }
.asistent-akcija { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.asistent-akcija p { font-size: .88rem; margin: 0 0 8px; white-space: pre-wrap; }
.asistent-akcija-gumbi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.asistent-akcija-gumbi .btn { min-height: 40px; }
.asistent-akcija-status { font-size: .84rem; color: var(--muted); }
.asistent-napaka-besedilo { color: var(--red); }
.asistent-stanje { font-size: .8rem; color: var(--muted); padding: 0 14px; min-height: 1.2em; margin: 0; }
.asistent-obrazec { display: flex; gap: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.asistent-vnos { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .9rem; background: var(--bg); }
.asistent-mic, .asistent-poslji { width: 44px; height: 44px; flex: none; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.asistent-mic[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; animation: asistent-utrip 1s infinite; }
.asistent-poslji { background: var(--primary); border-color: var(--primary); color: #fff; }
.asistent-zaseden .asistent-stanje::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-right: 6px; animation: asistent-utrip 1s infinite; }
@keyframes asistent-utrip { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .asistent-mic[aria-pressed="true"], .asistent-zaseden .asistent-stanje::before { animation: none; }
}
@media (max-width: 600px) {
    .asistent-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: none; }
    .asistent-fab { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media print { .asistent { display: none !important; } }
.asistent-primeri { margin: 0 0 12px 18px; line-height: 1.8; font-size: .9rem; }

/* ─── Modul Nabava: razdelki pregleda ─────────────────────────────── */
.nabava-razdelek { margin-top: 28px; }
.nabava-razdelek h4 { margin: 0 0 6px; font-size: 1rem; }
.nabava-opis { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-muted); }
.nabava-razdelek input[type="number"] { max-width: 120px; }