/* Pot: /volume1/web/NMP/assets/css/nmp.css */

/* ── ANTI-FLASH (prepreči belo utripanje ob nalaganju) ── */
html{visibility:hidden;opacity:0;transition:opacity .15s;}
html[data-theme]{visibility:visible;opacity:1;}


/* ============================================================
   NMP Portal — Struktura datotek
   ============================================================
   /volume1/web/NMP/
   │
   ├── index.php                    ← Dashboard (glavna stran)
   │
   ├── assets/
   │   └── css/
   │       └── nmp.css              ← TA DATOTEKA — skupni CSS
   │
   ├── auth/
   │   ├── auth.php                 ← Avtentikacija, funkcije, konstante
   │   ├── nmp_header.php           ← Skupni header (require v vsaki app)
   │   ├── debug.php                ← Debug bar (samo superadmin)
   │   ├── users.json               ← Podatki uporabnikov
   │   ├── units.json               ← Podatki enot
   │   ├── debug_config.json        ← Debug ON/OFF nastavitev
   │   └── logos/                   ← Logotipi enot + portal
   │       ├── portal_logo.png
   │       ├── [koda_enote].png
   │       └── ...
   │
   ├── admin/
   │   └── index.php                ← Admin panel
   │
   ├── vreme/
   │   └── index.php                ← Vreme app
   │
   ├── menjave/
   │   ├── index.php                ← Menjave app
   │   └── data/                    ← JSON podatki menjav
   │
   ├── urnik/
   │   ├── index.php                ← Urnik app
   │   └── data/                    ← JSON urniki po enotah
   │
   ├── oglasna_deska/
   │   ├── index.php                ← Obvestila app
   │   └── uploads/                 ← Naloženi dokumenti
   │
   ├── profil/
   │   └── index.php                ← Profil uporabnika
   │
   └── logo.php                     ← Authenticated logo server
   ============================================================
   
   KAKO DODATI NOVO APP:
   1. Ustvari mapo: /volume1/web/NMP/[ime_app]/
   2. Ustvari index.php z:
      [php:
      require_once '/volume1/web/NMP/auth/auth.php';
      nmp_require_login();
      $nmp_active_page = '[ime_app]';  // za aktivni nav link
      $theme = $_COOKIE['nmp_theme'] ?? 'light';
      ]<!DOCTYPE html>
      <html lang="sl" data-theme="[php_echo: $theme ]">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Ime App · NMP Portal</title>
        <link rel="stylesheet" href="/assets/css/nmp.css">
        [ikone: vkljuci jih assets/js/nmp_header_js.php, ki je ze v <head> vsake strani — NE dodajaj svoje vrstice in NE tujega naslova]
        <style>/* App-specifični CSS */</style>
      </head>
      <body>
      [php: require_once 'nmp_header.php'; ]
      <div class="app-wrap">
        <!-- Vsebina -->
      </div>
      [php: require_once 'debug.php'; if(function_exists('nmp_debug_bar')) nmp_debug_bar(__FILE__); ]
      </body></html>
   3. Dodaj app v $_h_nav_map v nmp_header.php
   4. Dodaj app v NMP_APPS konstanto v auth.php
   ============================================================ */

/* ============================================================
   NMP Portal — Centralni CSS v2.0
   Vse aplikacije vključijo: <link rel="stylesheet" href="/assets/css/nmp.css">
   App-specifični CSS dodajte v <style> po tem vključku.
   ============================================================ */

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

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

:root,
[data-theme="light"]{
  /* ── PODLAGA / POVRSINE (siva podlaga, nevtralno) ── */
  --bg:#F4F4F5;
  --surface:#FFFFFF; --surface-2:#ECECEE;
  --txt:#0A0A0A; --txt-2:#6B7280; --txt-3:#9CA3AF;
  --hairline:#ECECEE; --card-border:transparent;
  --shadow-card:0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --circle:36px; --header-inset:8px; --content-max:1400px;
  /* ── NEVTRALEN AKCENT (NI barven: crn light / bel dark) ── */
  --accent:var(--txt); --accent-tx:var(--bg); --accent-bg:var(--surface-2);
  /* ── ALIASI za obstojeco kodo (ohrani imena, posodobi vrednosti) ── */
  --bg2:var(--surface-2); --header:#FFFFFF; --hbd:var(--hairline);
  --card:var(--surface); --cbd:var(--hairline); --card-hover:var(--surface-2);
  --txt2:var(--txt-2); --mut:var(--txt-3);
  --btn-bg:var(--surface-2); --btn-bd:var(--hairline); --btn-tx:var(--txt-2);
  --tab-act:var(--txt); --nav-tx:var(--txt-3); --tab-bd:#C4C4CC; --tab-tx:#27272A;
  --bn-bg:var(--surface); --bn-bd:var(--hairline);
  --avatar-bg:#FFFFFF; --avatar-tx:#0A0A0A; --avatar-bd:#0A0A0A;
  --inp-bg:var(--surface); --inp-bd:#D1D5DB; --inp-tx:var(--txt);
  --tog-bg:#D1D5DB; --tog-knob:#FFFFFF;
  /* ── STATUS — solid (en hex na pomen) ── */
  --warn:#FB8C00; --info:#2563EB; --grn:#16A34A; --red:#DC2626;
  --D:#D97706; --N:#2563EB; --V:#16A34A;
  /* ── STATUS — badge pari (kanonicni) ── */
  --st-day-bg:#FEF3C7; --st-day-txt:#92400E;
  --st-night-bg:#DBEAFE; --st-night-txt:#1E40AF;
  --st-free-bg:#DCFCE7; --st-free-txt:#166534;
  --st-danger-bg:#FEE2E2; --st-danger-txt:#D82323;   /* D14: potemnjeno (3,95 -> 4,11); ton in nasicenost ostaneta */
  --st-warn-bg:#FFF0DB; --st-warn-txt:#AF6200;      /* D14: potemnjeno (2,12 -> 4,10); edina VIDNA sprememba kroga */
  --st-success-bg:#DCFCE7; --st-success-txt:#12893E; /* D14: potemnjeno (3,00 -> 4,09); ton in nasicenost ostaneta */
  --st-info-bg:#DBEAFE; --st-info-txt:#2563EB;
  /* ── LOGIN ── */
  --login-bg:var(--bg); --login-box:#FFFFFF;
  --login-mut:#888; --login-lbl:#999;
  --login-btn:#0A0A0A; --login-btn-tx:#FFFFFF; --login-foot:#ccc;
}
[data-theme="dark"]{
  --bg:#0E0E10;
  --surface:#232327; --surface-2:#313139;
  --txt:#F4F4F5; --txt-2:#9CA3AF; --txt-3:#7A7A82;
  --hairline:#2A2A2E; --card-border:#313139;
  --shadow-card:none;
  --accent:var(--txt); --accent-tx:var(--bg); --accent-bg:var(--surface-2);
  --bg2:var(--surface-2); --header:rgba(20,20,24,0.97); --hbd:var(--hairline);
  --card:var(--surface); --cbd:var(--card-border); --card-hover:#2A2A2E;
  --txt2:var(--txt-2); --mut:var(--txt-3);
  --btn-bg:rgba(255,255,255,0.06); --btn-bd:var(--hairline); --btn-tx:var(--txt-2);
  --tab-act:var(--txt); --nav-tx:var(--txt-3); --tab-bd:#3F3F46; --tab-tx:#D4D4D8;
  --bn-bg:#141418; --bn-bd:var(--hairline);
  --avatar-bg:#1A1A1E; --avatar-tx:#F4F4F5; --avatar-bd:#F4F4F5;
  --inp-bg:#1A1A1E; --inp-bd:#33333A; --inp-tx:var(--txt);
  --tog-bg:#3A3A42; --tog-knob:#FFFFFF;
  --warn:#FB923C; --info:#60A5FA; --grn:#4ADE80; --red:#F87171;
  --D:#FBBF24; --N:#60A5FA; --V:#4ADE80;
  --st-day-bg:rgba(251,191,36,.15); --st-day-txt:#FBBF24;
  --st-night-bg:rgba(96,165,250,.15); --st-night-txt:#93C5FD;
  --st-free-bg:rgba(74,222,128,.15); --st-free-txt:#86EFAC;
  --st-danger-bg:rgba(248,113,113,.18); --st-danger-txt:#F98585;   /* D14: posvetljeno (3,58 -> 4,11 cez --surface-2, najslabsi primer) */
  --st-warn-bg:rgba(251,146,60,.18); --st-warn-txt:#FB923C;
  --st-success-bg:rgba(74,222,128,.18); --st-success-txt:#4ADE80;
  --st-info-bg:rgba(96,165,250,.22); --st-info-txt:#60A5FA;
  --login-bg:#0E0E10; --login-box:#1A1A1E;
  --login-mut:#666; --login-lbl:#555;
  --login-btn:#FFFFFF; --login-btn-tx:#0A0A0A; --login-foot:#333;
}

html,body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);transition:background .3s,color .3s;min-height:100%;-webkit-tap-highlight-color:transparent;}

/* ── PULSE ── */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;}
.live-dot.pulse{animation:pulse 1.8s ease-in-out infinite;}
.live-dot.off{display:none;}

/* ── HEADER ── */
.top-header{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;background:var(--header);border-bottom:1px solid var(--hbd);display:flex;align-items:center;padding:0;backdrop-filter:blur(14px);}
/* PWA / standalone safe area */
@supports(padding-top: env(safe-area-inset-top)) {
  .top-header{
    height:calc(52px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  .th-inner{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
}
.th-inner{width:100%;max-width:var(--content-max);margin:0 auto;
  padding:0 calc(var(--page-edge) + var(--header-inset));
  display:flex;align-items:center;gap:10px;height:100%;}

/* ── ENOTNA NASLOVNA VRSTICA (gnana iz nmp_header.php prek $nmp_page_*) ── */
.th-back{display:inline-flex;align-items:center;justify-content:center;width:var(--circle);height:var(--circle);
  border:none;background:none;color:var(--txt);cursor:pointer;flex-shrink:0;border-radius:50%;font-family:inherit;}
.th-back:hover{background:var(--surface-2);}
.th-back i{font-size:20px;}
.th-title-wrap{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;gap:1px;}
.th-title{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--txt);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* ZNACKA-1: vrstica "naslov + znacka okolja" znotraj stolpca .th-title-wrap.
   Naslov OSTANE omejen po sirini (min-width:0), sicer tropicje neha delovati in dolg naslov
   razsiri glavo namesto da bi se odrezal. Znacka se NE krci, sicer jo dolg naslov stisne v nic. */
.th-title-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0;}
.th-title-row>.th-title{min-width:0;}
.th-title-row>.ui-badge{flex:0 0 auto;}
.th-subtitle{font-size:11px;color:var(--txt-3);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.th-action{display:flex;align-items:center;flex-shrink:0;}
.th-action-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:var(--ui-radius-sm);
  background:var(--accent);color:var(--accent-tx);border:1px solid var(--accent);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;font-family:inherit;white-space:nowrap;transition:opacity .15s;}
.th-action-btn:hover{opacity:.88;}
.th-action-btn i{font-size:17px;}
/* MOBILE: primarna akcija = samo ikona (skrij napis); kompaktno */
@media(max-width:767px){
  .th-action-btn{padding:0;width:var(--circle);height:var(--circle);min-height:var(--circle);justify-content:center;border-radius:50%;}
  .th-action-lbl{display:none;}
}

/* Logo */
.th-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;}
.th-logo-img{height:44px;width:auto;object-fit:contain;}
.th-logo-dot{width:26px;height:26px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.th-logo-name{font-size:16px;font-weight:700;color:var(--txt);white-space:nowrap;letter-spacing:-.01em;}

/* Nav — skrit povsod, burger prevzame */
.th-nav{display:none;}
.th-nav-link{display:none;}
.th-admin-nav{display:none;}

/* Right */
.th-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.th-btn{display:flex;align-items:center;gap:4px;padding:5px 9px;border:1px solid var(--btn-bd);border-radius:6px;font-size:11px;font-weight:500;color:var(--btn-tx);background:var(--btn-bg);cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s;font-family:inherit;}
.th-btn:hover{color:var(--txt);border-color:var(--accent);}
.th-btn.gold{color:var(--accent);border-color:var(--accent);}
.th-btn i{font-size:13px;}

/* Avatar — skrit, burger ga nadomesti */
.th-avatar{display:flex;align-items:center;justify-content:center;width:var(--circle);height:var(--circle);border-radius:50%;
  background:var(--avatar-bg);color:var(--avatar-tx);border:2px solid var(--avatar-bd);box-sizing:border-box;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;flex-shrink:0;text-transform:uppercase;letter-spacing:.02em;transition:all .15s;}
.th-avatar:hover{opacity:.85;}

/* Theme toggle */
.theme-toggle{width:30px;height:17px;border-radius:9px;background:var(--tog-bg);border:none;cursor:pointer;position:relative;padding:0;transition:background .3s;flex-shrink:0;}
/* Toggle v headerju skrit — samo v burger menuju */
.top-header .theme-toggle{display:none;}
.theme-toggle-knob{position:absolute;top:2.5px;width:12px;height:12px;border-radius:50%;background:var(--tog-knob);transition:left .22s cubic-bezier(.34,1.56,.64,1);}
[data-theme="light"] .theme-toggle-knob{left:2.5px;}
[data-theme="dark"]  .theme-toggle-knob{left:15.5px;}

/* Burger gumb — VEDNO VIDEN na vseh napravah */
.th-menu-btn{display:none;align-items:center;gap:5px;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:500;border:1px solid var(--btn-bd);background:var(--bg);color:var(--txt);cursor:pointer;font-family:inherit;}
.th-menu-btn:hover{border-color:var(--accent);color:var(--accent);}
.th-menu-btn i{font-size:16px;}
.th-admin-btn{display:flex;align-items:center;gap:4px;padding:5px 9px;border:1px solid var(--accent);border-radius:6px;font-size:11px;font-weight:500;color:var(--accent);background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap;}
.th-admin-btn i{font-size:13px;}

/* Burger panel */
.nmp-brg-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;backdrop-filter:blur(2px);}
.nmp-brg-bg.open{display:block;}
.nmp-brg{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;background:var(--card);border-left:1px solid var(--hbd);z-index:201;overflow-y:auto;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);}
.nmp-brg.open{transform:translateX(0);}
.nmp-brg-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hbd);font-size:13px;font-weight:600;color:var(--txt);}
.nmp-brg-close{background:none;border:none;cursor:pointer;color:var(--mut);padding:4px;display:flex;align-items:center;justify-content:center;}
.nmp-brg-close i{font-size:18px;}
.nmp-brg-profil{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hbd);}
.nmp-brg-av{width:36px;height:36px;border-radius:50%;background:var(--avatar-bg);color:var(--avatar-tx);border:2px solid var(--avatar-bd);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.nmp-brg-sec{padding:8px 0;}
.nmp-brg-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);padding:6px 16px 3px;}
.nmp-brg-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;color:var(--txt);text-decoration:none;background:none;border:none;cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:background .12s;}
.nmp-brg-item:hover{background:var(--bg2);}
.nmp-brg-item.active{color:var(--accent);font-weight:600;}
.nmp-brg-item.gold{color:var(--accent);}
.nmp-brg-item i{font-size:16px;flex-shrink:0;width:20px;}
.nmp-brg-badge{margin-left:auto;font-size:9px;font-weight:700;background:var(--red);color:#fff;border-radius:8px;padding:2px 6px;}
.nmp-brg-div{height:1px;background:var(--hbd);margin:4px 0;}
.nmp-brg-theme-row{display:flex;align-items:center;gap:10px;padding:9px 16px;}
.nmp-brg-tog-lbl{font-size:13px;color:var(--txt);flex:1;}
.nmp-brg-tog{width:36px;height:20px;border-radius:10px;background:var(--tog-bg);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.nmp-brg-tog.on{background:var(--accent);}
.nmp-brg-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s;}
.nmp-brg-tog.on .nmp-brg-knob{left:19px;}

/* Nav badge */
.th-nav-badge{font-size:9px;font-weight:700;background:var(--red);color:#fff;border-radius:8px;padding:1px 5px;margin-left:2px;}

/* ── LOGIN ── (KROG IME-1: pravila stare prijavne oznake `.login-page/-box/-btn/...` in `.unit-*` so odstranjena —
   po VSTOP-2 jih ne uporablja nobena datoteka; ostanejo samo razredi, ki jih nova oznaka se nosi.) */
.login-trust{display:flex;align-items:center;gap:8px;margin:2px 0 4px;cursor:pointer;}
.login-trust input{width:auto;margin:0;cursor:pointer;}
.login-trust span{font-size:12px;color:var(--login-mut);line-height:1.3;}
/* OSTANE (KROG IME-1): stara oznaka `.login-box` je mrtva, to pravilo pa rabi sonda OG5 v zbirki — ta zgradi svojo oznako
   z ovojema `.login-page`/`.login-box` in brez tega izbirnika (0,2,0) `.ui-toggle` (0,1,0, nize v datoteki) postavi
   `inline-flex` (izmerjeno). Prava stran ima svoje pravilo `.vstop-kartica .login-trust`. */
.login-box .login-trust{display:flex;}
#nmpIdleBg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:9999;}
#nmpIdleBg.show{display:flex;}
#nmpIdleBox{background:var(--card);color:var(--txt);border:1px solid var(--cbd);border-radius:14px;padding:1.6rem;max-width:320px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);}
#nmpIdleTitle{font-size:16px;font-weight:700;margin-bottom:8px;}
#nmpIdleMsg{font-size:13px;color:var(--mut);line-height:1.5;margin-bottom:16px;}
#nmpIdleBox button{background:var(--accent);color:var(--accent-tx);border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
#nmpIdleBox button:hover{opacity:.9;}
.cf-turnstile-wrap{overflow:hidden;height:58px;}
.cf-turnstile{transform:scale(.68);transform-origin:center top;margin-bottom:-18px;display:flex;justify-content:center;}
.login-err{color:#cc3333;font-size:12px;margin-bottom:12px;padding:8px 12px;background:#fff0f0;border-radius:7px;}

/* ── FOOTER ── */
.nmp-footer{text-align:center;padding:14px;font-size:11px;color:var(--mut);border-top:1px solid var(--hbd);margin-top:32px;width:100%;}

/* PWA bottom safe area — za iPhone home indicator */
.bottom-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom));}
body{padding-bottom:env(safe-area-inset-bottom);}

/* ── Globalni spodnji nav (telefon). Markup: auth/nmp_footer.php (opt-in $nmp_show_bottom_nav).
   Konsolidirano iz index/obvestila; urnik ima lasten inline tab-nav (zaenkrat izven). ── */
.mobile-bn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;height:calc(58px + env(safe-area-inset-bottom));background:var(--bn-bg);border-top:1px solid var(--bn-bd);padding-bottom:env(safe-area-inset-bottom);}
@media(max-width:767px){.mobile-bn{display:flex;}}
.bn-list{display:flex;width:100%;height:100%;}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--mut);text-decoration:none;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.bn-item.active{color:var(--accent);}
.bn-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;}
.bn-item span{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.bn-dot{position:absolute;top:6px;right:calc(50% - 14px);width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--bn-bg);}
.bn-dot.pulse{animation:bn-pulse 1.8s ease-in-out infinite;}
.bn-dot.off{display:none;}
@keyframes bn-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
/* Clearance: na telefonu vsebina ne sme podlezti fiksnemu navu — server-side prek
   inline <style> v nmp_footer.php (samo strani z navom; brez JS reflowa/utripa). */

/* ============================================================
   SKUPNE KOMPONENTE (UI kit) — Faza 1
   ------------------------------------------------------------
   ADITIVNO in opt-in: razredi z .ui- predpono. NE vplivajo na
   obstojece aplikacije (te imajo lastne razrede). Nove strani
   (Briefing) gradijo NA teh; retrofit obstojecih app = Faza 2.

   Pravila: vse prek obstojecih tokenov; primarna akcija = --accent;
   razmiki prek lestvice --sp-*; brez per-app preglasitev; mobile-first.

   KANONICNE PRELOMNE TOCKE (NE izumljaj svojih po straneh):
     telefon  < 768px
     tablica  768px - 1199px
     desktop  >= 1200px
   ============================================================ */

/* ── Osrednji tokeni (definirani ENKRAT) ── */
:root,[data-theme="light"]{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --ui-radius:10px; --ui-radius-sm:7px;
  --topbar-h:52px; --bottomnav-h:60px;
  --page-edge:16px;
  --grn-bg:rgba(22,163,74,0.12);  --warn-bg:rgba(249,115,22,0.12);
  --red-bg:rgba(220,38,38,0.10);  --info-bg:rgba(59,130,246,0.12);
}
[data-theme="dark"]{
  --grn-bg:rgba(74,222,128,0.14);  --warn-bg:rgba(251,146,60,0.14);
  --red-bg:rgba(248,113,113,0.14); --info-bg:rgba(96,165,250,0.14);
}

/* ── Ovoj strani (header -> vsebina pod njim + safe-area; namizje max 1400) ── */
/* Responsiven vodoravni rob = EN sam vir (uporabljen v .ui-page + .ui-bleed) */
@media(min-width:768px){:root{--page-edge:24px;}}
@media(min-width:1200px){:root{--page-edge:32px;}}

/* .ui-page = EDINI vir odmikov strani:
   zgornji = header-clearance + safe-area; vodoravni = --page-edge; spodnji = --sp-6 (telefon: + bottom-nav clearance) */
.ui-page{max-width:var(--content-max);margin:0 auto;
  padding-top:calc(var(--topbar-h) + env(safe-area-inset-top) + var(--sp-4));
  padding-bottom:var(--sp-6);
  padding-left:var(--page-edge);
  padding-right:var(--page-edge);}
/* Telefon: bottom-nav clearance ureja body padding v nmp_footer.php (velja tudi za mobilni dashboard,
   ki NI .ui-page) -> tu NE podvajamo. Spodnji rob ostane --sp-6 povsod. */
/* full-bleed izjema (drsniki, oglasna deska, koledar): seze do roba okna, vsebina ohrani rob */
.ui-bleed{margin-inline:calc(-1 * var(--page-edge));padding-inline:var(--page-edge);}
.ui-section{margin-bottom:var(--sp-6);}

/* ── Gumbi (touch tarca >= 44px; brez zanasanja na :hover) ── */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:var(--sp-2) var(--sp-4);border:1px solid transparent;
  border-radius:var(--ui-radius-sm);background:var(--btn-bg);color:var(--btn-tx);
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  cursor:pointer;text-decoration:none;transition:opacity .15s,border-color .15s,background .15s;}
.ui-btn:active{transform:translateY(1px);}
.ui-btn-primary{background:var(--accent);color:var(--accent-tx);border-color:var(--accent);}
.ui-btn-primary:hover{opacity:.88;}
.ui-btn-secondary{background:transparent;color:var(--txt);border-color:var(--txt);}
.ui-btn-secondary:hover{opacity:.7;}
.ui-btn-danger{background:var(--card);color:var(--red);border-color:var(--red);}
.ui-btn-danger:hover{background:var(--red);color:#fff;}
.ui-btn-block{width:100%;}
.ui-btn-sm{min-height:38px;padding:var(--sp-1) var(--sp-3);font-size:12px;}
.ui-btn i{font-size:16px;}

/* ── Kanonicni gumbi (.btn) — nevtralni; EN vir hover/active/focus ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:var(--sp-2) var(--sp-4);border:1px solid transparent;
  border-radius:var(--ui-radius-sm);background:var(--btn-bg);color:var(--txt);
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  cursor:pointer;text-decoration:none;transition:opacity .15s,border-color .15s,background .15s;}
.btn-primary{background:var(--accent);color:var(--accent-tx);border-color:var(--accent);}
.btn-secondary{background:transparent;color:var(--txt);border-color:var(--txt);}
.btn-ghost{background:transparent;color:var(--txt);border-color:transparent;}
.btn-danger{background:transparent;color:var(--red);border-color:var(--red);}
.btn-sm{min-height:38px;padding:var(--sp-1) var(--sp-3);font-size:12px;}
.btn-block{width:100%;}
/* Okrogli ikonski gumb (npr. "+") = velikost --circle, primarna crna polna */
.btn-circle{width:var(--circle);height:var(--circle);min-height:var(--circle);padding:0;border-radius:50%;
  background:var(--accent);color:var(--accent-tx);border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
/* EN vir interakcij za VSE gumbe (.ui-btn + .btn) */
.ui-btn:hover,.btn:hover,.btn-circle:hover{opacity:.88;}
.ui-btn:active,.btn:active,.btn-circle:active{transform:translateY(1px);}
.ui-btn:focus-visible,.btn:focus-visible,.btn-circle:focus-visible{outline:2px solid var(--txt);outline-offset:2px;}

/* ── Kartica ── */
.ui-card{background:var(--surface);border:1px solid var(--card-border);border-radius:14px;
  box-shadow:var(--shadow-card);padding:var(--sp-4);}
@media(min-width:768px){.ui-card{padding:var(--sp-5);}}
.ui-card-title{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:var(--sp-3);}

/* ── Mreza (reflow: 1 telefon -> 2 tablica -> 3 desktop) ── */
.ui-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
@media(min-width:768px){.ui-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1200px){.ui-grid{grid-template-columns:repeat(3,1fr);}}
.ui-grid-2{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
@media(min-width:768px){.ui-grid-2{grid-template-columns:repeat(2,1fr);}}

/* ── Znacke ── */
.ui-badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:11px;font-weight:700;
  padding:2px var(--sp-2);border-radius:20px;line-height:1.4;background:var(--cbd);color:var(--txt2);}
.ui-badge-gold{background:var(--accent-bg);color:var(--accent);}
.ui-badge-grn{background:var(--grn-bg);color:var(--grn);}
.ui-badge-warn{background:var(--warn-bg);color:var(--warn);}
.ui-badge-red{background:var(--red-bg);color:var(--red);}
.ui-badge-info{background:var(--info-bg);color:var(--info);}

/* ── Zavihki: KANONICNI pill/gumb videz (enak povsod; nove app uporabljajo .ui-tabs/.ui-tab) ── */
.ui-tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap;}
.ui-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;min-height:38px;box-sizing:border-box;
  border:1px solid var(--tab-bd);border-radius:var(--ui-radius-sm);background:var(--card);color:var(--tab-tx);
  font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s;}
.ui-tab:hover{border-color:var(--accent);color:var(--txt);}
.ui-tab.active{background:var(--accent);color:var(--accent-tx);border-color:var(--accent);}

/* ── Naslov strani (pod headerjem) — KANONICEN ── */
.ui-page-title{font-size:18px;font-weight:700;color:var(--txt);margin-bottom:var(--sp-3);line-height:1.2;}

/* ── Modal (telefon: spodnji list cez celo sirino; desktop: dialog) ── */
.ui-modal-bg{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,0.5);}
.ui-modal-bg.open{display:flex;}
.ui-modal{background:var(--card);color:var(--txt);width:100%;max-height:92vh;overflow-y:auto;
  border:1px solid var(--cbd);border-radius:var(--ui-radius) var(--ui-radius) 0 0;
  padding:var(--sp-5);padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));}
.ui-modal-title{font-size:16px;font-weight:700;margin-bottom:var(--sp-4);}
@media(min-width:768px){
  .ui-modal-bg{align-items:center;padding:var(--sp-4);}
  .ui-modal{max-width:560px;border-radius:var(--ui-radius);padding-bottom:var(--sp-5);}
}

/* ── Tabela (telefon: vodoravni scroll v ovoju) ── */
.ui-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ui-table{width:100%;border-collapse:collapse;font-size:13px;}
.ui-table th,.ui-table td{padding:var(--sp-2) var(--sp-3);text-align:left;
  border-bottom:1px solid var(--cbd);white-space:nowrap;}
.ui-table th{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;}
/* KROG NADURE-2: Pregled sluzbe (nadure/_pregled.php) se pri 320-390 px prilega brez vodoravnega drsenja — ime osebe in napis noge se smeta prelomiti, tudi sredi dolgega priimka (razred nima drugih porabnikov). */
.nadure-pregled .ui-table td:first-child,.nadure-pregled .ui-table th:first-child{white-space:normal;overflow-wrap:anywhere;}

/* ── Forme (input 16px = brez iOS zoom; visina 44px) ── */
.ui-field{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3);}
.ui-label{font-size:12px;font-weight:500;color:var(--mut);}
.ui-input,.ui-select,.ui-textarea{width:100%;min-height:38px;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--inp-bd);border-radius:var(--ui-radius-sm);
  background:var(--inp-bg);color:var(--inp-tx);font-family:inherit;font-size:16px;
  transition:border-color .15s;}
.ui-textarea{min-height:88px;resize:vertical;}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{outline:none;border-color:var(--accent);}

/* ── Pomozni ── */
.ui-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}
.ui-stack{display:flex;flex-direction:column;gap:var(--sp-3);}
.ui-muted{color:var(--mut);}

/* ── Date picker (.ui-dp-*) — skupna komponenta; JS: /assets/js/nmp_datepicker.js
   Akcent prek --accent (BREZ per-app tokenov). Promoviran iz menjave; menjave
   retrofit na ta sloj = Faza 2. ── */
.ui-dp-wrap{position:relative;}
.ui-dp-field{width:100%;min-height:44px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--cbd);
  border-radius:var(--ui-radius-sm);font-size:16px;background:var(--card);color:var(--txt);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;transition:border-color .15s;}
.ui-dp-field:hover,.ui-dp-field.open{border-color:var(--accent);}
.ui-dp-placeholder{color:var(--mut);}
.ui-dp-cal{display:none;position:fixed;background:var(--card);border:1px solid var(--cbd);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:9999;overflow:hidden;min-width:220px;width:220px;}
.ui-dp-cal.open{display:block;}
.ui-dp-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:var(--accent-bg);border-bottom:1px solid var(--cbd);}
.ui-dp-month{font-size:13px;font-weight:600;color:var(--accent);}
.ui-dp-nav{background:none;border:none;cursor:pointer;font-size:16px;color:var(--accent);padding:2px 7px;
  border-radius:5px;transition:background .15s;}
.ui-dp-nav:hover{background:var(--cbd);}
.ui-dp-dh{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:7px 8px 3px;}
.ui-dp-dh span{font-size:10px;font-weight:600;color:var(--mut);}
.ui-dp-days{display:grid;grid-template-columns:repeat(7,1fr);padding:3px 8px 8px;gap:2px;}
.ui-dp-day{text-align:center;padding:6px 2px;font-size:12px;cursor:pointer;border-radius:6px;
  color:var(--txt);transition:all .12s;}
.ui-dp-day:hover{background:var(--accent-bg);color:var(--accent);}
.ui-dp-day.today{font-weight:700;color:var(--accent);}
.ui-dp-day.sel{background:var(--accent);color:var(--accent-tx) !important;}
.ui-dp-day.empty{pointer-events:none;}

/* ─────────────────────────────────────────────────────────────
   B1: zvonec (Obvestila) + obvestila drawer
   Zvonec = vstop v Obvestila (drawer v glavi), NE v burgerju.
   Vse prek tokenov; deluje v light IN dark. Vsebina/feed = B3.
   ───────────────────────────────────────────────────────────── */
.th-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:none;border:none;border-radius:50%;
  color:var(--mut);cursor:pointer;font-family:inherit;flex-shrink:0;transition:color .15s,background .15s;}
.th-bell:hover{color:var(--txt);background:var(--bg2);}
.th-bell i{font-size:20px;}
/* znacka neprebranih (B3 jo odkrije + napolni); zaenkrat skrita prek [hidden] */
.th-bell-badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:2px solid var(--header);}
.th-bell-badge[hidden]{display:none;}
/* utripanje DEFINIRANO, a NE prozeno (proza = B3, ko bo neprebrano: doda .pulse) */
@keyframes nmp-bell-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.th-bell.pulse{animation:nmp-bell-pulse 1.2s ease-in-out infinite;}

/* Obvestila drawer — vzorec burgerja (desni panel, obe temi, safe-area) */
.nmp-notif-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;backdrop-filter:blur(2px);}
.nmp-notif-bg.open{display:block;}
.nmp-notif{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:88vw;background:var(--card);
  border-left:1px solid var(--hbd);z-index:201;overflow-y:auto;transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
.nmp-notif.open{transform:translateX(0);}
.nmp-notif-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--hbd);font-size:13px;font-weight:600;color:var(--txt);}
.nmp-notif-close{background:none;border:none;cursor:pointer;color:var(--mut);padding:4px;display:flex;align-items:center;justify-content:center;}
.nmp-notif-close i{font-size:18px;}
.nmp-notif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:48px 24px;color:var(--mut);text-align:center;}
.nmp-notif-empty i{font-size:32px;opacity:.5;}
.nmp-notif-empty span{font-size:13px;}

/* ─────────────────────────────────────────────────────────────
   B2: Tabla osnutek->objava (semafor znacka + Objavi gumb + izbirni modal)
   Vse prek tokenov; semafor = kanonicni --st-* pari; deluje light IN dark.
   ───────────────────────────────────────────────────────────── */
.tabla-status{position:absolute;top:6px;right:10px;z-index:26;display:inline-flex;align-items:center;
  font-size:8px;font-weight:800;padding:2px 6px;border-radius:3px;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tabla-status.draft{background:var(--st-warn-bg);color:var(--st-warn-txt);}
.tabla-status.pub{background:var(--st-success-bg);color:var(--st-success-txt);}
.tabla-objavi-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--ui-radius-sm);
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-tx);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;white-space:nowrap;transition:opacity .15s;}
.tabla-objavi-btn:hover{opacity:.88;}
.tabla-draft-banner{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);padding:10px 14px;
  border-radius:var(--ui-radius-sm);background:var(--st-warn-bg);color:var(--st-warn-txt);font-size:13px;font-weight:600;}
.tabla-draft-banner i{font-size:18px;flex-shrink:0;}
.tabla-draft-msg{flex:1;min-width:0;}
.tabla-pub-hint{color:var(--mut);font-size:12px;margin-bottom:var(--sp-3);}
.tabla-pub-empty{color:var(--mut);font-size:13px;}
.tabla-pub-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow-y:auto;margin:var(--sp-2) 0;}
.tabla-pub-row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--ui-radius-sm);cursor:pointer;}
.tabla-pub-row:hover{background:var(--bg2);}
.tabla-pub-title{flex:1;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tabla-pub-meta{font-size:10px;color:var(--mut);white-space:nowrap;}
.tabla-pub-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4);}

/* ─────────────────────────────────────────────────────────────
   B3: zvonec inbox (drawer items) + status znacka (DELJENO feed/drawer)
   Vse prek tokenov; --st-* kanonicni pari; deluje light IN dark.
   ───────────────────────────────────────────────────────────── */
.nmp-notif-body{padding:4px 0;}
.nmp-notif-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;text-decoration:none;color:var(--txt);border-bottom:1px solid var(--hbd);transition:background .12s;}
.nmp-notif-item:hover{background:var(--bg2);}
.nmp-notif-item:last-child{border-bottom:none;}
.nmp-notif-item.unread{background:var(--accent-bg);}
.nmp-notif-item.unread .nmp-notif-t{font-weight:700;}
.nmp-notif-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;color:var(--mut);}
.nmp-notif-ico i{font-size:18px;}
.nmp-notif-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.nmp-notif-t{font-size:13px;color:var(--txt);line-height:1.25;}
.nmp-notif-m{font-size:12px;color:var(--txt-2);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.nmp-notif-meta{font-size:10px;color:var(--mut);}
/* status znacka (deljeno feed + drawer) */
.nmp-nb{display:inline-flex;align-items:center;flex-shrink:0;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;}
.nmp-nb-info{background:var(--st-info-bg);color:var(--st-info-txt);}
.nmp-nb-warn{background:var(--st-warn-bg);color:var(--st-warn-txt);}
.nmp-nb-success{background:var(--st-success-bg);color:var(--st-success-txt);}
.nmp-nb-danger{background:var(--st-danger-bg);color:var(--st-danger-txt);}
.nmp-nb-neutral{background:var(--bg2);color:var(--txt-2);}
/* B3b: "Pocisti vse" (per-user dismiss zvonca) — na dnu seznama */
.nmp-notif-foot{padding:12px 16px 16px;display:flex;justify-content:center;}
.nmp-notif-clear{background:none;border:1px solid var(--btn-bd);color:var(--mut);border-radius:var(--ui-radius-sm);
  padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s;}
.nmp-notif-clear:hover{color:var(--txt);border-color:var(--accent);}

/* ─────────────────────────────────────────────────────────────
   UI-TOGGLE — KANONICNO on/off stikalo (toggle sweep, avg 2026)
   CSS treatment OBSTOJECEGA <input type="checkbox"> — name/value/checked/
   id/JS handlerji NEDOTAKNJENI (oddaja obrazca identicna kljukici).
   Konvencija (UI baseline): ON = --accent polnilo + --accent-tx gumbek;
   OFF = prazen/prosojen + --tab-bd obroba/gumbek. Brez zelene/barv.
   Uporaba:
     <label class="ui-toggle"><input type="checkbox" name="x" value="1">
       <span class="ui-toggle-track" aria-hidden="true"></span>
       <span class="ui-toggle-lbl">Besedilo nastavitve</span></label>
   VECIZBIRNI seznami/matrike (name="x[]", kljukica na vrstico v zanki,
   admin Pravice) OSTANEJO navadne kljukice — toggle je LE za boolean
   on/off nastavitve.
   ───────────────────────────────────────────────────────────── */
.ui-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;min-height:44px;}
.ui-toggle input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;margin:0;}
.ui-toggle-track{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:999px;
  background:transparent;border:1px solid var(--tab-bd);transition:background .15s,border-color .15s;}
.ui-toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--tab-bd);transition:transform .15s,background .15s;}
.ui-toggle input:checked+.ui-toggle-track{background:var(--accent);border-color:var(--accent);}
.ui-toggle input:checked+.ui-toggle-track::after{transform:translateX(18px);background:var(--accent-tx);}
.ui-toggle input:focus-visible+.ui-toggle-track{outline:2px solid var(--accent);outline-offset:2px;}
.ui-toggle input:disabled+.ui-toggle-track{opacity:.45;cursor:not-allowed;}
.ui-toggle-lbl{font-size:13px;color:var(--txt);line-height:1.35;}

/* ─────────────────────────────────────────────────────────────
   NEDEFINIRANA POLJA URNIKA — R2c: koda se izrise NORMALNO (crno
   ozadje iz R2 odpravljeno), status obracuna nosi droben ADMIN-ONLY
   pika-marker v kotu oznake: rdeca = rabi obracun (blokira objavo),
   zelena = obracun vpisan. Pomen nosi tooltip (title), ne le barva;
   navaden uporabnik in izpis vidita LE kodo, brez pik. Barva prek
   tokena (--red), obe temi.
   R9b-1: zelena pika (cell-obr-done) odstranjena — odsotnost rdece = "obracun vpisan".
   ───────────────────────────────────────────────────────────── */
.cell-obr-todo{position:relative;}
.cell-obr-todo::after{content:"";position:absolute;top:-3px;right:-3px;
  width:8px;height:8px;border-radius:50%;border:1px solid var(--surface);background:var(--red);}

/* ─────────────────────────────────────────────────────────────
   PREDOGLED OBRACUNA CELICE (urnik modal) — R2d. Read-only okvircek
   z enotnim formatom za vsa tri stanja celice (tipska / rocni vnos z
   obracunom / rocni vnos brez). Oranzni pas = mesecni prenos (samo
   tipske prehodne oznake na zadnji dan, pri meji 'prenos'). Tokeni,
   obe temi.
   ───────────────────────────────────────────────────────────── */
.obr-predogled{border:1px solid var(--hairline);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;background:var(--card);}
.obr-p-glava{font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:6px;color:var(--txt);}
.obr-p-info{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--mut);color:var(--mut);font-size:10px;font-weight:800;cursor:help;}
.obr-p-row{display:flex;gap:10px;padding:2px 0;align-items:baseline;}
.obr-p-k{flex:0 0 62px;color:var(--mut);}
.obr-p-v{color:var(--txt);}
.obr-p-v b{font-weight:800;letter-spacing:.03em;}
.obr-p-pas{margin-top:8px;padding:6px 10px;border-radius:8px;background:var(--st-warn-bg);color:var(--st-warn-txt);font-weight:600;font-size:12px;}

/* ─────────────────────────────────────────────────────────────
   R9b-1: crna statusna pika (cell-obr-prehod) ODSTRANJENA — prehod-manjka
   in rep-odvec (sirota) ZDRUZENA v EN oznacevalec .cell-sirota (oranzni
   "!", definiran inline v urnik/index.php); razlog loci title/legenda.
   Spodaj legenda pik v popoverju (se uporablja).
   ───────────────────────────────────────────────────────────── */
.legend-pike{flex-basis:100%;margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline);}
.legend-pike-glava{font-weight:700;font-size:11px;color:var(--txt);display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.legend-pika{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid var(--surface);flex:0 0 auto;vertical-align:middle;margin-right:4px;}
.legend-pika-det{font-size:11px;color:var(--txt2);}
.legend-pika-det>summary{list-style:none;cursor:pointer;padding:2px 0;user-select:none;}
.legend-pika-det>summary::-webkit-details-marker{display:none;}
.legend-pika-vec{padding:4px 0 6px 17px;color:var(--mut);line-height:1.45;}

/* ---- OKOLJA-1: kartica "Gradnja" (Upravljanje, samo superadmin) ----------------
   Pove, katero kodo tece TA namestitev. Zivi tu in ne kot style= atribut, ker so
   inline slogi prepovedani, in ne v <style> bloku Upravljanja, ker bi to povecalo
   prav tisti dolg, ki ga Faza 2 odpravlja. Barve samo prek tokenov. */
.nmp-build-card{margin-bottom:14px;font-size:13px;color:var(--txt-2);}

/* ---- POVERILNICE-2: znacka "geslo ni nastavljeno" (seznam uporabnikov) ---------
   Pove, da racun NI uporaben, dokler si clovek ne nastavi gesla; o geslu samem ne
   pove nicesar. Zivi tu in ne kot style= atribut (inline slogi so prepovedani) in
   ne v <style> bloku administracije, ker bi to povecalo prav tisti dolg, ki ga
   Faza 2 odpravlja. Barve SAMO prek zamrznjenih statusnih tokenov. */
.nmp-badge-brez-gesla{background:var(--st-warn-bg);color:var(--st-warn-txt);}

/* ── PLOSCA: kartica povzetka urnika (krog 3-1b) ─────────────────────────────
   Razredi so tu, ne inline v index.php: lastnikova odlocitev 9. 9. 2026 (»pozabi stari css,
   vse prilagodi novemu«). Nobenega sestnajstiskega zapisa barve in nobene funkcijske oblike
   barve — samo tokeni. (Imen teh oblik tu NE zapisujemo dobesedno: mera bi zadela lastno prozo.)
   Nobenega tokena iz RDECE druzine: negativen mesec je na tej kartici ORANZEN (--warn), enako
   kot ga ze danes barva zavihek »Moj urnik«; rdeca bi za isto dejstvo uvedla drugo stopnjo
   resnosti. Kartica se izrise v OBEH temah in se pri 390 px ne pomika vodoravno. */
.pk-row{display:flex;gap:var(--sp-2);align-items:stretch;}
.pk-col{flex:1;text-align:center;min-width:0;}
.pk-val{font-size:24px;font-weight:800;line-height:1;color:var(--txt);}
.pk-val-dan{color:var(--D);}
.pk-val-noc{color:var(--N);}
.pk-val-ok{color:var(--grn);}
.pk-val-warn{color:var(--warn);}
.pk-sub{font-size:10px;color:var(--mut);margin-top:2px;font-weight:600;}
.pk-lbl{font-size:9px;color:var(--mut);margin-top:2px;}
.pk-bar{height:4px;border-radius:2px;background:var(--surface-2);margin-top:6px;overflow:hidden;}
.pk-fill{height:100%;border-radius:2px;background:var(--mut);}
.pk-fill-dan{background:var(--D);}
.pk-fill-noc{background:var(--N);}
.pk-fill-ok{background:var(--grn);}
.pk-fill-warn{background:var(--warn);}
.pk-sep{width:1px;background:var(--cbd);flex-shrink:0;}
.pk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
         margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--cbd);}
.pk-foot-lbl{font-size:11px;color:var(--mut);}
.pk-foot-val{font-size:13px;font-weight:700;color:var(--txt);}
.pk-foot-sub{font-size:10px;color:var(--mut);width:100%;}
.pk-msg{font-size:12px;color:var(--mut);margin-top:var(--sp-2);}
.pk-rep{font-size:11px;color:var(--mut);margin-top:var(--sp-2);}
.pk-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2);}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);}
/* Mobilni izris plosce svoje bloke odmakne od roba (vzorec .mob-sg: padding 0 14px). Kartica je v
   OBEH izrisih ISTA (en vir), zato odmik pripada mobilnemu KONTEKSTU, ne kartici. */
.mobile-dash .card{margin-left:14px;margin-right:14px;}
/* ── konec: kartica povzetka urnika ───────────────────────────────────────── */

/* ── PLOSCA: trak dni (krog 3-1d) ─────────────────────────────────────────────
   Razredi so tu, ne inline v index.php: ista odlocitev lastnika kot pri kartici 3-1b.
   Samo tokeni — nobenega zapisa barve po vrednosti in nobene funkcijske oblike barve
   (imen teh oblik tu NE zapisujemo dobesedno: mera bi zadela lastno prozo). Nobenega tokena
   iz RDECE druzine: nedosegljiv urnik je na traku ORANZEN, ker je stanje sistema, ne napaka
   uporabnika. BARVA IZMENE NI V CSS — je DATA iz kataloga in jo postavi izris na svoje
   vozlisce (3 px trak POD oznako), sicer oznaka na tuji podlagi ni berljiva.
   POSTAVITEV JE PROZNA, NE MREZA PETIH STOLPCEV: locnica meseca je sesti otrok in bi v mrezi
   petih stolpcev padla v drugo vrstico (izmerjeno). Namizje pokaze pet enakih celic, ker je
   sirina ploscice petina vsebnika; drsnik premakne OKNO, ne izbire vrstic.
   Trak se izrise v OBEH temah in se pri 390 px ne pomika vodoravno (pomika se sam trak). */
.tr-grid{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;min-height:64px;}
.tr-grid::-webkit-scrollbar{display:none;}
.tr-grid .tr-dan{flex:0 0 calc((100% - 32px) / 5);}
.tr-slider-wrap{margin-top:10px;}
.tr-slider{width:100%;accent-color:var(--accent);cursor:pointer;height:4px;}

.tr-mob-outer{position:relative;overflow:hidden;}
.tr-mob-outer::before,.tr-mob-outer::after{
  content:'';position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none;
}
.tr-mob-outer::before{left:0;background:linear-gradient(to right,var(--bg),transparent);}
.tr-mob-outer::after{right:0;background:linear-gradient(to left,var(--bg),transparent);}
.tr-mob-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 20px 4px;scroll-snap-type:x proximity;min-height:66px;
}
.tr-mob-wrap::-webkit-scrollbar{display:none;}
.tr-mob-row{display:flex;gap:7px;width:max-content;}
.tr-mob-row .tr-dan{width:64px;}

/* Ploscica dneva. MIN-VISINA JE NAMENSKA: prost dan nima vsebine, a okence OSTANE — brez tega
   se trak ob prostih dneh sesede in ploscice dobijo razlicne visine. */
.tr-dan{flex:0 0 auto;border-radius:11px;border:1px solid var(--cbd);background:var(--card);
        padding:8px 6px;text-align:center;scroll-snap-align:center;min-height:64px;}
.tr-danes{border:2px solid var(--accent);background:var(--accent-bg);}
.tr-bledo{opacity:.5;}
.tr-lbl{font-size:9px;color:var(--mut);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr-oznaka{font-size:19px;font-weight:800;line-height:1;color:var(--txt);min-height:19px;}
.tr-drobno{font-size:8px;font-weight:600;color:var(--mut);line-height:1.15;}
.tr-barva{height:3px;width:60%;margin:4px auto 0;border-radius:2px;}
.tr-ure{font-size:8px;color:var(--mut);margin-top:3px;min-height:11px;}

/* Locnica meseca: navpicna crta z imenom meseca, ki ga izracuna streznik. */
.tr-locnica{flex:0 0 auto;width:15px;border-left:1px dashed var(--cbd);
            display:flex;align-items:center;justify-content:center;}
.tr-locnica-ime{font-size:8.5px;color:var(--mut);white-space:nowrap;
                writing-mode:vertical-rl;transform:rotate(180deg);}

/* Zakljucek traku: mesec brez pravice (crtkan) ali nedosegljiv urnik (oranzen okvir). */
.tr-zakljucek{flex:0 0 auto;width:96px;min-height:64px;border-radius:11px;padding:6px;
              display:flex;align-items:center;justify-content:center;}
.tr-zak-crtkan{border:1px dashed var(--cbd);}
.tr-zak-napaka{border:1px solid var(--warn);}
.tr-zak-bes{font-size:8.5px;color:var(--mut);line-height:1.2;}

/* Sidro »na danes«: pokaze se samo, kadar trak sploh ve, kateri dan je danes. */
.tr-cip-wrap{margin-top:8px;text-align:center;min-height:22px;}
.tr-cip{font-size:11px;font-weight:600;color:var(--txt);background:var(--card);
        border:1px solid var(--cbd);border-radius:999px;padding:3px 12px;cursor:pointer;}
/* ── konec: trak dni ──────────────────────────────────────────────────────── */

/* ── PLOSCA: kartica naslednje izmene (krog 3-1e) ─────────────────────────────
   SVOJ odsek, ne odsek kartice 3-1b: trditev, ki meri tistega, bi sicer takoj veljala tudi za te
   razrede, in obratno — ena vrstica v tujem odseku lahko utisa kartico, ne da bi karkoli v strani
   opazilo. Samo tokeni; nobenega zapisa barve po vrednosti in nobene funkcijske oblike barve
   (imen teh oblik tu NE zapisujemo dobesedno: mera bi zadela lastno prozo). Nobenega tokena iz
   RDECE druzine: »urnika ni bilo mogoce prebrati« je stanje sistema, ne napaka uporabnika.
   Vsi izbirniki tega odseka nosijo LASTNO predpono — nobenega tujega vsebnika, nobenega ID-ja.
   Kartica se izrise v OBEH temah in se pri 390 px ne pomika vodoravno (odmik mobilnega konteksta
   podeduje po skupnem razredu kartice). */
.ni-card{display:flex;flex-direction:column;gap:2px;}
.ni-datum{font-size:12px;color:var(--mut);font-weight:600;}
.ni-vrsta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ni-oznaka{font-size:26px;font-weight:800;line-height:1.1;color:var(--txt);}
.ni-ime{font-size:12px;color:var(--mut);}
.ni-ure{font-size:15px;font-weight:700;color:var(--txt);margin-top:2px;}
.ni-brez{font-size:12px;font-weight:600;color:var(--mut);}
.ni-prijava{font-size:11px;color:var(--mut);}
.ni-stanje{font-size:12px;color:var(--mut);padding:6px 0 2px;}
.ni-povezava{align-self:flex-start;margin-top:10px;font-size:12px;font-weight:600;
             color:var(--txt);text-decoration:none;background:var(--btn-bg);
             border:1px solid var(--cbd);border-radius:9px;padding:6px 12px;}
.ni-povezava:hover{border-color:var(--accent);}
.ni-card .ni-prevzem{margin:8px 0 0;width:100%;}
/* ── konec: kartica naslednje izmene ──────────────────────────────────────── */

/* ── PLOSCA / telo izmene (krog 3-3a) ── */
/* Telo zavihka Izmena (plosca/_izmena_telo.php). SAMO zetoni — nobene surove barve. Tarce so min-height
   44px, fiksne mere z border-box. Spodnji list je OBSTOJECI OVOJ `.ui-modal-bg` + `.ui-modal` (zgoraj);
   ta odsek doda samo glavo lista, razrede vsebine in odprtje brez skripta. Ploscica (92 px) tu NI. */

/* Preslikava stanje posadke -> zeton (imenovana izbira I5; EN VIR). Neznano ali nenastavljeno -> info.
   KROG 3-4d2: ista preslikava velja za vrstice vozil izmene — druga preslikava kljuc -> barva bi bila
   druga resnica o istem stanju. Vrstica BREZ stanja zetona ne dobi in ostane siva (nadomestek v rabi). */
.pl-hero,
.pl-hero[data-pl-stanje="ODMOR"],   .pl-izmena-telo .pl-vozilo[data-pl-stanje="ODMOR"], .pl-izmena-telo .pl-nv[data-pl-stanje="ODMOR"], .vv-k[data-pl-stanje="ODMOR"], .pl-izmena-telo .pl-status[data-pl-stanje="ODMOR"]   { --pl-st-bg: var(--st-info-bg);    --pl-st-txt: var(--st-info-txt); }
.pl-hero[data-pl-stanje="PROST"],   .pl-izmena-telo .pl-vozilo[data-pl-stanje="PROST"], .pl-izmena-telo .pl-nv[data-pl-stanje="PROST"], .vv-k[data-pl-stanje="PROST"], .pl-izmena-telo .pl-status[data-pl-stanje="PROST"]   { --pl-st-bg: var(--st-success-bg); --pl-st-txt: var(--st-success-txt); }
.pl-hero[data-pl-stanje="TEREN"],   .pl-izmena-telo .pl-vozilo[data-pl-stanje="TEREN"], .pl-izmena-telo .pl-nv[data-pl-stanje="TEREN"], .vv-k[data-pl-stanje="TEREN"], .pl-izmena-telo .pl-status[data-pl-stanje="TEREN"]   { --pl-st-bg: var(--st-danger-bg);  --pl-st-txt: var(--st-danger-txt); }
.pl-hero[data-pl-stanje="MALICA"],  .pl-izmena-telo .pl-vozilo[data-pl-stanje="MALICA"], .pl-izmena-telo .pl-nv[data-pl-stanje="MALICA"], .vv-k[data-pl-stanje="MALICA"], .pl-izmena-telo .pl-status[data-pl-stanje="MALICA"]  { --pl-st-bg: var(--st-warn-bg);    --pl-st-txt: var(--st-warn-txt); }
.pl-hero[data-pl-stanje="ZASEDEN"], .pl-izmena-telo .pl-vozilo[data-pl-stanje="ZASEDEN"], .pl-izmena-telo .pl-nv[data-pl-stanje="ZASEDEN"], .vv-k[data-pl-stanje="ZASEDEN"], .pl-izmena-telo .pl-status[data-pl-stanje="ZASEDEN"] { --pl-st-bg: var(--st-free-bg);    --pl-st-txt: var(--st-free-txt); }
/* KROG P1-5 (A1): PREDAJA V TEKU je prikazni kljuc stanja vozila (ni status posadke) — barva je par znacke `pl-znacka--predaja`. */
.pl-izmena-telo .pl-nv[data-pl-stanje="PREDAJA"], .vv-k[data-pl-stanje="PREDAJA"] { --pl-st-bg: var(--st-warn-bg); --pl-st-txt: var(--st-warn-txt); }
/* KROG TV-POVEZAVA (A4): MENJAVA V TEKU n/v (dokler nista zamenjana oba clana) — rumeno kot predaja. */
.pl-izmena-telo .pl-nv[data-pl-stanje="MENJAVA"], .vv-k[data-pl-stanje="MENJAVA"] { --pl-st-bg: var(--st-warn-bg); --pl-st-txt: var(--st-warn-txt); }

/* HERO */
.pl-hero { display: flex; gap: 12px; align-items: flex-start; }
.pl-obroc { position: relative; flex: 0 0 92px; width: 92px; height: 92px; box-sizing: border-box; }
.pl-obroc-svg { display: block; width: 92px; height: 92px; transform: rotate(-90deg); }
.pl-obroc-svg circle { fill: none; stroke-width: 5; }
.pl-obroc-sled { stroke: var(--surface-2); }
.pl-obroc-polni { stroke: var(--pl-st-txt); stroke-linecap: round; }
.pl-obroc-neznano { stroke: var(--txt-3); }
.pl-obroc-sredina {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.pl-obroc-cas { font-size: 20px; font-weight: 700; line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums; }
.pl-obroc-napis { margin-top: 3px; font-size: 7px; font-weight: 700; letter-spacing: .12em; color: var(--txt-2); }

.pl-hero-desno { flex: 1 1 auto; min-width: 0; }
.pl-hero-naslov { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--txt); overflow-wrap: anywhere; }
.pl-hero-znacke { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pl-hero-vrstica { margin-top: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--txt-2); font-variant-numeric: tabular-nums; }

.pl-znacka {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; line-height: 1.4; box-sizing: border-box;
  border: 1px solid var(--txt-3); color: var(--txt-2); background: transparent;
}
.pl-znacka--stanje { border-color: var(--pl-st-txt); color: var(--pl-st-txt); background: var(--pl-st-bg); }
/* Znacka SEJE ostane, kot je bila: aktivna = uspeh, predaja = opozorilo. */
.pl-znacka--seja { border-color: transparent; background: var(--st-info-bg); color: var(--st-info-txt); }
.pl-znacka--seja[data-pl-seja="aktivna"]        { background: var(--st-success-bg); color: var(--st-success-txt); }
.pl-znacka--seja[data-pl-seja="predaja_v_teku"] { background: var(--st-warn-bg);    color: var(--st-warn-txt); }
.pl-znacka--zamuja { border-color: transparent; background: var(--st-danger-bg); color: var(--st-danger-txt); }

.pl-posadka { margin-top: 8px; }
.pl-clan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.pl-clan:last-child { border-bottom: 0; }
.pl-clan-ime { font-size: 12px; font-weight: 700; color: var(--txt); }
.pl-clan-vloga { font-size: 9px; color: var(--txt-2); }
.pl-clan-obrazec { display: inline; margin: 0; }

/* MOJ STATUS */
.pl-status-glava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.pl-pripis { margin: 6px 0 0; font-size: 12px; color: var(--txt-2); }
.pl-cipi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl-cip-obrazec { display: inline; margin: 0; }
.pl-cip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 88px; padding: 10px 16px; box-sizing: border-box;
  border-radius: 22px; border: 1px solid var(--tab-bd); background: var(--surface); color: var(--txt);
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.pl-cip--aktiven { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); cursor: default; }
.pl-cip.pl-pokazano { outline: 2px solid var(--accent); outline-offset: 2px; }

.pl-gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; box-sizing: border-box; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--surface); color: var(--txt);
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.pl-gumb--poln { width: 100%; margin-top: 12px; background: var(--accent); color: var(--accent-tx); letter-spacing: .02em; }

/* Spodnji list: glava lista (naslov + »Zapri«); ovoj je .ui-modal-bg + .ui-modal. */
.pl-list-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
/* Brez skripta list pavze odpre sidro cipa — .ui-modal-bg se sicer odpre samo z razredom `open`, ki ga
   postavi skript. Omejeno na liste plosce in na stanje brez skripta (s skriptom odloca razred). */
html:not(.pl-js) .ui-modal-bg[data-pl-list-el]:target { display: flex; }
.pl-samo-js { display: none; }
.pl-js .pl-samo-js { display: inline-flex; }
.pl-namig[hidden] { display: none; }

/* KROG 3-4c2b: POPIS V SPODNJEM LISTU. Okvir nosi stran obrazca (en izrisovalnik, en vir resnice);
   visina je imenovana izbira I6 — na nizkih zaslonih se obrazec drsa ZNOTRAJ okvirja. */
.pl-popis-okvir { width: 100%; height: 70vh; border: 0; display: block; }
/* Stran obrazca v okvirju kroma nima, zato tudi njegovih odmikov ne rabi. */
.ob-vgrajeno .ob-wrap { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
/* Sveze odprt z dolgim pritiskom: do dviga prsta ovoj (zatemnitev in list) ne sprejema kazalca. */
.pl-svez { pointer-events: none; }
/* KROG POPRAVKI-TEL-1 (7): KAZALEC POTEGA ZA OSVEZITEV (namescen nacin). Element ustvari skript; brez skripta ga ni.
   Ne sprejema kazalca in ne premakne postavitve (pripet nad vsebino). */
.pl-poteg {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 50%; transform: translate(-50%, -12px); z-index: 60;
  padding: 6px 12px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--txt-2); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.pl-poteg--viden { opacity: 1; transform: translate(-50%, 0); }
.pl-poteg--spusti { color: var(--txt); border-color: var(--tab-bd); }
/* Telo opreme (krog 3-3b-2, plosca/_oprema_telo.php). Dve mrezi: jedro v treh stolpcih z velikimi ploscicami,
   ostalo v stirih z majhnimi. Barva stanja je SAMO na znacki in piluli (pari --st-*); ploscica, glava,
   opozorilna vrstica in gumb so nevtralni. max-height stoji na mrezi, odvec vrstic se podrsa. */
.pl-op-telo { display: flex; flex-direction: column; gap: 8px; }
.pl-op-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-top: 6px; }
.pl-op-naslov { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--txt-2); }
.pl-op-povzetek { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--txt-3); text-align: right; }
/* KROG POPRAVKI-TEL-2 (C2): glava skupine s povzetkom POD naslovom (medicinske naprave) — naslov ostane v eni vrstici, povzetek
   dobi svojo vrstico, levo poravnan; znacka stanja skupine ostane ob naslovu. Locnica je razred na glavi (podatek skupine). */
.pl-op-glava--pod { flex-wrap: wrap; justify-content: flex-start; }
.pl-op-glava--pod .pl-op-naslov { white-space: nowrap; }
.pl-op-glava--pod .pl-op-povzetek { flex: 0 0 100%; margin-left: 0; text-align: left; }
/* KROG 3-4u: razmik mreze 8 -> 6 px po maketi (ploscica s tem dobi ~1,5 px sirine v mrezi stirih). */
.pl-opm3, .pl-opm4 { display: grid; gap: 6px; overflow-y: auto; }
.pl-opm3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 450px; }
.pl-opm4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 184px; }
.pl-op, .pl-op-prazna {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; min-height: 148px; padding: 28px 4px 10px; box-sizing: border-box; border-radius: 14px; text-align: center;
}
/* KROG DROBNO-B (odlocitev lastnika 4. 10.: »64 px, na ozkih manjse«) — DODATEK: BREZ ENOT VSEBNIKA (`cq*`), ker
   jih Safari na starejsem iOS zavrze in obvelja rezerva (izmerjeno na telefonu lastnika). Risba ima STALNO visino
   64 px in sirino `100%` do 64 px: SVG z `viewBox` se v okvir umesti sam, pri ozki ploscici se skrci po sirini.
   Znak iz pisave dobi velikost iz SIRINE OKNA, izracunano tako, da ne preseze notranje sirine ploscice niti z
   drsnikom 15 px (mreza stirih: notranja = 25vw - 22,5 px Oprema / 24 px Vozilo; drsnik vzame cetrtino 15 px = 3,75 px).
   Ploscica jedra +28 px (risba 36 -> 64), ploscica ostalega +20 px (44 -> 64); mrezi z `max-height` za isto. */
.pl-op { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt); }
.pl-opm4 .pl-op { min-height: 160px; padding-top: 26px; }
/* KROG POPRAVKI-TEL-2 (C1): v mrezi MEDICINSKIH NAPRAV vsebina ploscice stoji od ZGORAJ — ikona, ime in pilula so pri vseh
   ploscicah vrstice na isti visini, vrstica »ročno …« pa stoji pod pilulo (prej je poravnava na dno z njo dvignila vse troje).
   Velja SAMO tu: mreza OSTALO in ploscica goriva na Vozilu ostaneta, kot sta. */
.pl-opm3 .pl-op { justify-content: flex-start; }
/* VRSTICA MREZE JE VISOKA KOT NJENA VSEBINA (`max-content`), ne »samodejno«: WebKit (Safari) samodejne vrstice v dveh primerih NE poveca
   in vsebina (pilula, vrstica »ročno«) pade cez spodnji rob ploscice — po spremembi sirine (zasuk zaslona, drsni trak), ko se ime prelomi
   v dve vrstici, in ob omejeni visini mreze (tretja vrstica, 450 px). Oboje je izmerjeno (drugo je nasel adversarni pregled); pri
   poravnavi na dno je isto prelivanje slo navzgor, pod znacko. Najmanjsa visina ploscice (148 px) ostane na ploscici. */
.pl-opm3 { grid-auto-rows: max-content; }
.pl-op-stanje {
  position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 6px; border: 1px solid transparent;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.45;
}
.pl-op-glava .pl-op-stanje { position: static; }
.pl-op-ikona { font-size: 64px; line-height: 1; color: var(--txt-2); }
.pl-opm4 .pl-op-ikona { font-size: min(64px, calc(25vw - 26.25px)); }
/* KROG 3-4u: NASA RISBA namesto pisavnega znaka. RISBA IMA STALNO VISINO, tako kot jo je imel pisavni znak
   (`font-size` zgoraj) — sirino si vzame vso in se vanjo umesti po svojem razmerju (`preserveAspectRatio`).
   ZAKAJ NE RAZTEGLJIVA: raztegljiva risba naredi VISINO PLOSCICE ODVISNO OD SIRINE STOLPCA, mrezi pa imata
   `max-height` iz casa pisavnega znaka — pri 390 px sta dve ploscici izgubili pilulo, na namizju (840 px
   plosca, 1400 px stran izmene) pa VSE ploscice ime IN pilulo (izmerjeno: ploscica 120 -> 196 px pri 390 px
   in -> 525 px pri 1376 px). Stevilki sta izpeljani iz makete, kjer je ploscica jedra 122 px in ploscica
   ostalega 140 px: ostanek visine ob imenu, piluli, razmikih in odmikih je 36 oziroma 44 px. */
.pl-op-risba { display: block; flex: 0 0 auto; width: 100%; max-width: 64px; height: 64px; }
/* KROG POPRAVKI-TEL-1: par jeklenk ima sirsi okvir (72 x 48), zato sme biti risba siroka do 96 px — pri isti visini
   je jeklenka potem enako velika kot jeklenka prenosne. Velja SAMO za par, ne za vse risbe.
   STEVILKA SE NE REZE OB ROBU OKVIRA: pravilo pomanjsanja racuna z znakom sirine 0,6 visine, stevke sistemske pisave pa
   merijo do 0,69 (izmerjeno) — trimestna vrednost je segla do 2,4 enote cez rob in prva stevka je bila odrezana. Okvir zato
   prelivanja ne reze; stevilka ostane znotraj ploscice (meri TP10). */
.pl-op-risba--par { max-width: 96px; overflow: visible; }
.pl-op .pl-op-ime, .pl-op .pl-op-pil { flex-shrink: 0; }
/* Nabor simbolov je skrit in ne zavzame prostora; izpise se NATANKO ENKRAT na stran. */
.pl-op-nabor { position: absolute; width: 0; height: 0; overflow: hidden; }
/* BARVA RISBE JE BARVA STANJA TEGA CLANA in pride iz TOKENA, ne iz stevilke v risbi: risba s pribito barvo
   bi se ob temi ali ob spremembi palete razsla z ostalim zaslonom. Podlaga loka je hairline. */
.pl-op-lok-sled { stroke: var(--hairline); }
.pl-op-lok--ok      { stroke: var(--grn); }
.pl-op-lok--preveri { stroke: var(--warn); }
.pl-op-lok--slabo   { stroke: var(--red); }
.pl-op-num { fill: var(--txt-2); }
.pl-op-num--prazno { fill: var(--red); }
/* Statusni barvi STATICNIH risb (zelena, rdeca) iz istih tokenov: v svetli temi enak izris kot maketa. */
.pl-op-r-ok-s    { stroke: var(--grn); fill: none; }
.pl-op-r-ok-f    { fill: var(--grn); }
.pl-op-r-slabo-f { fill: var(--red); }
.pl-op-r-opoz-f  { fill: var(--warn); }
.pl-op-ime {
  max-width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.45; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* KROG DROBNO-B: ime v mrezi STIRIH ostane 10 px (odlocitev lastnika 4. 10.): pri 11 px se `RAČUNALNIK` pri 390 px
   prelomi sredi besede, pri 320 px pa se imeni nahrbtnikov odrezeta in postaneta nerazlocljivi (izmerjeno). */
.pl-opm4 .pl-op-ime { font-size: 9px; letter-spacing: 0; }
/* KROG POPRAVKI-TEL-2 (C4): pod 375 px je ime za odtenek manjse (9 px), da RAČUNALNIK stoji v eni vrstici brez preloma sredi
   besede; od 375 px naprej ostane 10 px (pri 390 px se ne spremeni nic). */
@media (min-width: 375px) { .pl-opm4 .pl-op-ime { font-size: 10px; } }
/* KROG POPRAVKI-TEL-2 (C1, popravek po preverbi na Linuxu): POD 375 px ima tudi ime MEDICINSKE NAPRAVE prostor za DVE vrstici in stoji
   na njegovem spodnjem robu (kot v mrezi OSTALO) — ko se eno ime v vrsti prelomi (sirsa pisava), ostanejo ikone, spodnji rob imen in
   pilule vseh ploscic vrste v isti crti. Od 375 px naprej ostane ena vrstica (kartica se pri 390 px ne poveca). */
.pl-opm3 .pl-op-ime { display: flex; flex-direction: column; min-height: 2.9em; max-height: 2.9em; }
.pl-opm3 .pl-op-ime::before { content: ""; flex: 1 1 0; min-height: 0; }
@media (min-width: 375px) {
  .pl-opm3 .pl-op-ime { display: -webkit-box; min-height: 0; max-height: none; }
  .pl-opm3 .pl-op-ime::before { content: none; }
}
/* KROG NAPRAVE-2 (DODATEK B, D3): ime v mrezi OSTALO ima VEDNO prostor za DVE vrstici, besedilo pa stoji na SPODNJEM robu tega
   prostora - ikone vseh ploscic v vrsti so zato v isti crti (enovrsticno ime ne potisne svoje ikone nize).
   Izvedba: stolpec z NEVIDNIM vodilnim elementom, ki vzame odvecni prostor (enovrsticno ime pade na spodnji rob); pri imenu, daljsem
   od dveh vrstic, se vodilni element skrci na nic in se odreze KONEC imena (ne zacetek - poravnava na dno bi rezala prvo vrstico). */
.pl-opm4 .pl-op-ime { display: flex; flex-direction: column; min-height: 2.9em; max-height: 2.9em; }
.pl-opm4 .pl-op-ime::before { content: ""; flex: 1 1 0; min-height: 0; }
/* KROG 3-4v: pilula v mrezi STIRIH je manjsa in ozja — po maketi in po meri. Najdaljsi napis, ki ga
   ploscica danes lahko dobi, je besedilo kljukice (`PRIKLOPLJEN`, PODATEK vrste): pri 10 px je meril
   vec kot je ploscica siroka in se je odrezal v `PRIKLOP…`. Izmerjeno pri 390 px: na voljo 77,0 px,
   ta zapis da 75,0 px (rezerva 2 px je namerna — izris na drugem sistemu ni na piksel enak).
   ELIPSA OSTANE (`text-overflow` je na skupnem pravilu): ni tu zato, da bi besedilo rezala, ampak zato,
   da ob nepredvideno dolgem vnosu ne razbije mreze. Da se napis NE sme odrezati, meri HE8 — pri 390 in
   800 px; pri ozjih zaslonih (~320 px) se dolgi napisi odrezejo in to je zapisana meja, ne obljuba. */
.pl-opm4 .pl-op-pil { font-size: 9px; letter-spacing: 0; padding: 1px 4px; }
/* KROG 3-4v: PREDOGLED IKONE V REGISTRU (administracija). Risba ima v ploscici stalno visino; v registru
   stoji v vrstici tabele, zato jo ovoj zameji na svojo velikost. Pravilo je TU in ne kot vdelan slog v
   partialu, ker barve risbe ze pridejo iz tokenov tega lista. */
.rn-ikona-predogled { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-left: 4px; }
.rn-ikona-predogled .pl-op-risba { width: 20px; height: 20px; }
.pl-op-pil {
  display: inline-block; max-width: 100%; padding: 1px 6px; box-sizing: border-box; border-radius: 10px; border: 1px solid transparent;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1.45; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* KROG POPRAVKI-TEL-1: REZERVA VRSTICE PILULE. Ploscica brez pilule (kljukica brez potrditve, naprava brez odcitka) je bila
   za visino pilule nizje poravnana in njena ikona je stala nizje od sosednjih. Rezerva ima visino pilule, izpeljano iz ISTIH
   mer (velikost pisave x visina vrstice + odmik in obroba), in nima vsebine. */
.pl-op-rez { display: block; flex: 0 0 auto; font-size: 10px; height: calc(1.45em + 4px); }
.pl-opm4 .pl-op-rez { font-size: 9px; }
.pl-op-stanje--ok,      .pl-op-pil--ok      { background: var(--st-success-bg); color: var(--st-success-txt); }
.pl-op-stanje--preveri, .pl-op-pil--preveri { background: var(--st-warn-bg);    color: var(--st-warn-txt); }
.pl-op-stanje--slabo,   .pl-op-pil--slabo   { background: var(--st-danger-bg);  color: var(--st-danger-txt); }
.pl-op-pil--ok      { border-color: var(--st-success-txt); }
.pl-op-pil--preveri { border-color: var(--st-warn-txt); }
.pl-op-pil--slabo   { border-color: var(--st-danger-txt); }
/* KROG NAPRAVE-2 (DODATEK B, D2): NEVTRALNA pilula (»POLNJENJE«) - ni stanje, zato nima statusne barve. */
.pl-op-pil--nevtr   { background: var(--surface-2); color: var(--txt); border-color: var(--txt-2); }
/* Prazna ploscica je vizualni zadrzek (ni povezava in ni gumb). */
.pl-op-prazna { justify-content: center; border: 1px dashed var(--tab-bd); background: transparent; color: var(--txt-3); }
.pl-op-prazna-plus { font-size: 30px; font-weight: 300; line-height: 1; }
.pl-op-prazna-ime { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.pl-op-prazna-pil { padding: 1px 8px; border-radius: 10px; border: 1px solid var(--hairline); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
/* KROG 3-4a-1p: PRAZEN REGISTER. Besedilo stoji NAMESTO mrez in nad gumbom potrditve; slog posnema
   povzetek skupine (tisji ton), ne opozorilne vrstice — prazen register ni napaka stanja. */
.pl-op-prazen { margin: 4px 0 0; padding: 12px; box-sizing: border-box; border-radius: 12px; border: 1px dashed var(--hairline); background: var(--surface); color: var(--txt-2); font-size: 13px; line-height: 1.45; text-align: center; }
.pl-op-opoz {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 10px 12px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--pl-op-opoz-barva); background: var(--surface); color: var(--txt);
  font-size: 13px; line-height: 1.4;
}
/* KROG 3-4a-1p: BARVA POMENI STANJE. Okvir in pika sta bila TRDO rdeca, poved pa govori tudi o napravi v
   stanju PREVERI — rdeca je takrat trdila NEUSTREZNO. Odlocitev je ENA (zeton na vrstici), pika jo podeduje;
   dve mesti odlocitve bi se prej ali slej razsli. */
.pl-op-opoz--slabo   { --pl-op-opoz-barva: var(--st-danger-txt); }
.pl-op-opoz--preveri { --pl-op-opoz-barva: var(--st-warn-txt); }
.pl-op-opoz--ok      { --pl-op-opoz-barva: var(--st-success-txt); }
.pl-op-opoz-pika { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--pl-op-opoz-barva); }
.pl-op-opoz-glava { font-weight: 700; }
.pl-op-opoz-rep { color: var(--txt-2); }
.pl-op-potrdi {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; width: 100%;
  min-height: 48px; padding: 12px 16px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-tx); font: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .04em; text-decoration: none; cursor: pointer;
}
.pl-op-potrdi:disabled { opacity: .45; cursor: not-allowed; }
.pl-op-pripis { font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .75; }
/* Telo vozila (krog 3-3c-2, plosca/_vozilo_telo.php): glava, kartica goriva z merilnikom (vdelan SVG), dve mrezi ploscic s
   PODNAPISOM, vrstica okvare, gumb. Barva stanja: znacka, lok, vrednost goriva, pika okvare (pari --st-*); ikona enobarvna. max-height
   na mrezi. Ploscica = mreza (ikona, ime, podnapis); vrstica podnapisa ima stalno visino dveh vrstic (9px x 1,45 x 2), ime na isti crti. */
.pl-vz-telo { display: flex; flex-direction: column; gap: 8px; }
.pl-vz-glava { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pl-vz-glava-levo { flex: 1 1 auto; min-width: 0; }
.pl-vz-naziv-vrstica { display: flex; align-items: center; gap: 2px; }
/* KROG 3-4w: naziv po maketi 14 px — pri 17 px se je pri 390 px lomil v dve vrstici. */
.pl-vz-naziv { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--txt); overflow-wrap: anywhere; }
/* KROG 3-4a-1p: REGISTRSKA JE OZNAKA, NE BESEDILO. Razreda `.pl-vz-reg` v listu ni bilo, zato je zanjo
   veljal `overflow-wrap: anywhere` prednika in `MBNMP241` se je lahko prelomila sredi oznake. Naziv vozila
   se sme lomiti naprej (dolga imena), oznaka pa ne. */
.pl-vz-reg { white-space: nowrap; }
.pl-vz-info {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px;
  margin: -8px 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 50%; background: transparent;
  color: var(--txt-2); font: inherit; font-size: 22px; text-decoration: none; cursor: pointer;
}
.pl-vz-info:disabled { opacity: .45; cursor: not-allowed; }
.pl-vz-glava-pod { display: block; font-size: 12px; line-height: 1.35; color: var(--txt-2); }
.pl-vz-km { flex: 0 0 auto; text-align: right; }
/* KROG 3-4w: kilometri po maketi 17 px / 700 (doslej 22 / 800) — skupaj z nazivom drzita glavo v eni vrstici. */
.pl-vz-km-st { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--txt); font-variant-numeric: tabular-nums; }
.pl-vz-km-napis { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; color: var(--txt-2); }
.pl-vz-gorivo {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px; box-sizing: border-box; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt);
}
.pl-vz-gorivo--ok      { --pl-vz-st: var(--st-success-txt); }
.pl-vz-gorivo--preveri { --pl-vz-st: var(--st-warn-txt); }
.pl-vz-gorivo--slabo   { --pl-vz-st: var(--st-danger-txt); }
/* KROG NAPRAVE-2 (DODATEK B, D4): lok in stevilka po NIVOJU (na meji in nad njo zeleno, pod mejo rdece). Razred stoji NA LOKU IN NA
   STEVILKI (ne na kartici): barvo stanja povozi samo njima; znacka v kotu ostane po stanju. */
.pl-vz-gorivo .pl-vz-nivo--ok    { --pl-vz-st: var(--st-success-txt); }
.pl-vz-gorivo .pl-vz-nivo--slabo { --pl-vz-st: var(--st-danger-txt); }
.pl-vz-merilnik { flex: 0 0 120px; width: 120px; height: 86px; overflow: visible; }
.pl-vz-lok { fill: none; stroke: var(--surface-2); stroke-width: 7; stroke-linecap: round; }
.pl-vz-lok-polni { fill: none; stroke: var(--pl-vz-st); stroke-width: 7; stroke-linecap: round; }
.pl-vz-oznaka { stroke: var(--txt-3); stroke-width: 1.2; }
.pl-vz-oznaka-napis { fill: var(--txt-3); font-size: 7px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.pl-vz-igla { stroke: var(--txt); stroke-width: 2.5; stroke-linecap: round; }
.pl-vz-os { fill: var(--txt); }
.pl-vz-gorivo-desno { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-vz-gorivo-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-vz-gorivo-naslov { font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.45; color: var(--txt-2); }
/* KROG 3-4w: velika vrednost po maketi 34 px / 700, podnapis 9,5 px (ena vrstica pri 390 px). */
.pl-vz-vrednost { font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--pl-vz-st); font-variant-numeric: tabular-nums; }
.pl-vz-gorivo-pod { font-size: 9.5px; line-height: 1.45; color: var(--txt-2); overflow-wrap: anywhere; }
.pl-vz-stanje {
  display: inline-block; padding: 1px 6px; border-radius: 6px; border: 1px solid transparent;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.45;
}
.pl-vz-stanje--ok      { background: var(--st-success-bg); color: var(--st-success-txt); }
.pl-vz-stanje--preveri { background: var(--st-warn-bg);    color: var(--st-warn-txt); }
.pl-vz-stanje--slabo   { background: var(--st-danger-bg);  color: var(--st-danger-txt); }
.pl-vz-skupina-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-top: 4px; }
/* KROG 3-4w: naslov skupine po maketi — 10 px in VERZALKE (doslej 12 px brez preobrazbe). */
.pl-vz-naslov { font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.45; color: var(--txt-2); text-transform: uppercase; }
.pl-vz-povzetek { margin-left: auto; font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--txt-3); text-align: right; }
.pl-vz-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 184px; overflow-y: auto; }
.pl-vz {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto 27px; justify-items: center; align-items: start;
  row-gap: 4px; min-height: 168px; padding: 26px 4px 10px; box-sizing: border-box; border-radius: 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt);
}
/* Znacka ploscice je ozja od znacke goriva: NEUSTREZNO mora ostati v ploscici v stirih stolpcih tudi pri 320px (mreza reze). */
.pl-vz .pl-vz-stanje { position: absolute; top: 6px; right: 3px; padding: 1px 3px; font-size: clamp(7px, 2.3vw, 9px); letter-spacing: 0; }
/* KROG 3-4w: IKONA PLOSCICE PO MAKETI (izmerjeno 59 x 59 px; doslej 36 px). Risba dobi ISTO velikost in
   STALNO visino — raztegljiva bi ploscico raztegnila, ker je tu mreza z `max-height` (ista okvara kot pri
   Opremi v krogu 3-4u, tam izmerjena). */
.pl-vz-ikona { margin: auto 0; font-size: min(64px, calc(25vw - 27.75px)); line-height: 1; color: var(--txt-2); }
.pl-vz-risba { margin: auto 0; display: block; width: 100%; max-width: 64px; height: 64px; }
.pl-vz-ime {
  grid-row: 2; max-width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.45; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.pl-vz-pod {
  /* KROG 3-4w: 9 -> 8 px po maketi, razmik crk pa na nic. Manjsa pisava mora prelom ODPRAVITI, ne ga
     skriti z rezanjem: `-webkit-line-clamp: 2` ostane kot varovalka za nepredvideno dolg vnos, ne kot
     resitev. ZAKAJ SE RAZMIK: najdaljsi danasnji podnapis (`DOTOČENO 28. 8.`) je pri 8 px z razmikom
     .02em potreboval 75,6 px, na voljo pa jih je 75,5 — zgresil je za DESETINKO piksla. Brez razmika
     meri 73,2 px in ima 2,3 px rezerve; rezerva je namerna, ker izris na drugem sistemu ni na piksel
     enak (ista odlocitev kot pri piluli Opreme v krogu 3-4v). */
  /* KROG DROBNO-B: podnapis Vozila OSTANE 8 px (odlocitev lastnika 4. 10.): pri 9 px se `DOTOČENO 28. 8.` pri
     390 px prelomi v dve vrstici (izmerjeno) — prav to je odpravil krog 3-4w. */
  grid-row: 3; max-width: 100%; font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: uppercase;
  line-height: 1.45; color: var(--txt-3); overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.pl-vz-okvara {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--card-border); background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--txt); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.pl-vz-okvara:disabled { opacity: .45; cursor: not-allowed; }
.pl-vz-pika { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--txt-3); }
.pl-vz-pika--ok      { background: var(--st-success-txt); }
.pl-vz-pika--preveri { background: var(--st-warn-txt); }
.pl-vz-pika--slabo   { background: var(--st-danger-txt); }
.pl-vz-okvara-besedilo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* KROG 3-4w: vrstica okvare po maketi — glava 11,5 px (ena vrstica pri 390 px), podnapis 9 px. */
.pl-vz-okvara-glava { font-size: 11.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pl-vz-okvara-pod { font-size: 9px; line-height: 1.35; color: var(--txt-2); }
.pl-vz-pusica { flex: 0 0 auto; font-size: 18px; color: var(--txt-3); }
.pl-vz-potrdi {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; width: 100%;
  min-height: 48px; padding: 12px 16px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-tx); font: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .04em; text-decoration: none; cursor: pointer;
}
.pl-vz-potrdi:disabled { opacity: .45; cursor: not-allowed; }
.pl-vz-pripis { font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .75; }
/* KROG 3-4d2: TELO IZMENE V POTRJENEM VIDEZU (risba zavihka Izmena, 7. 9.). Vsak izbirnik je zamejen pod ovoj
   telesa `.pl-izmena-telo`, ki ga izrise telo samo — zato slog velja v modulu IN na plosci, nikoli drugje.
   Kartice nimajo razreda starega modula: ta ima svoje pravilo kartice nizje v listu in bi ga preglasilo.
   Dva para kartic stojita v vrsti tudi pri 390 px (izbira I5); kartici brez vira obdrzita visino polne
   kartice (D35), zato je visina tu in ne v strani. Tarce so vsaj 44 px; glava kartice je povezava s tarco
   44 px, a v postavitvi zasede le svojo vrstico (negativni robovi). */
.pl-izmena-telo { display: flex; flex-direction: column; gap: 8px; }
.pl-izmena-telo .pl-k {
  position: relative; min-width: 0; padding: 10px 12px; box-sizing: border-box; border-radius: 16px;
  /* KROG PI-1: VSE kartice telesa imajo ISTO obrobo (nov zeton) in razmik 8 px; `--card-border` je v
     svetli temi prosojen, zato kartice z njim obrobe nimajo. Zaobljenost in odmik po maketi A1362. */
  background: var(--surface); border: 1px solid var(--rob); box-shadow: var(--shadow-card); color: var(--txt);
}
.pl-izmena-telo .pl-k.pl-hero { align-items: center; gap: 13px; padding: 11px 14px; }
.pl-izmena-telo .pl-obroc-cas { font-size: 19px; font-weight: 800; color: var(--txt); }
.pl-izmena-telo .pl-hero-glava { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pl-izmena-telo .pl-hero-glava .pl-hero-naslov { min-width: 0; letter-spacing: -.02em; }
.pl-izmena-telo .pl-hero-glava .pl-znacka,
.pl-izmena-telo .pl-status-glava .pl-znacka { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pl-izmena-telo .pl-hero-cas { margin-top: 4px; }
.pl-izmena-telo .pl-hero-znacke { margin-top: 4px; }
.pl-izmena-telo .pl-posadka { margin-top: 4px; }
.pl-izmena-telo .pl-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-izmena-telo .pl-k-glava {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 2px;
  color: var(--txt-3); text-decoration: none;
}
.pl-izmena-telo .pl-k-glava--povezava { min-height: 44px; margin: -15px -11px -13px; padding: 0 11px; box-sizing: border-box; }
.pl-izmena-telo .pl-k-naslov { font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1.45; text-transform: uppercase; white-space: nowrap; color: var(--txt-3); }
.pl-izmena-telo .pl-k-pusica { font-size: 12px; font-weight: 600; line-height: 1; color: var(--txt-3); }
.pl-izmena-telo .pl-k-glava .pl-pripis { margin: 0; font-size: 9px; font-weight: 600; white-space: nowrap; color: var(--txt-3); }
.pl-izmena-telo .pl-k-prazno { margin: 4px 0 0; font-size: 10px; line-height: 1.35; color: var(--txt-2); }
/* VOZILA IZMENE: pika in napis stanja imata barvo iz preslikave zgoraj; brez stanja sta siva. */
.pl-izmena-telo .pl-vozila-seznam { margin: 0; padding: 0; list-style: none; }
.pl-izmena-telo .pl-vozilo { display: flex; align-items: center; gap: 6px; padding: 3.5px 0; }
.pl-izmena-telo .pl-vozilo-pika { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-st-txt, var(--txt-3)); }
.pl-izmena-telo .pl-vozilo-ime { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 700; overflow-wrap: anywhere; }
.pl-izmena-telo .pl-vozilo-stanje { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--pl-st-txt, var(--txt-3)); }
/* ODPRTE ZADEVE: kartica je s krogom PI-1 ODSLA (nadomestil jo je stevec Nalog s svojim listom); rok in
   njegova zamuda sta se preselila v list in ohranita svoja sloga. Okvir opozorila je odsel z njo — vse
   kartice imajo odslej ISTO obrobo. */
.pl-izmena-telo .pl-zadeve-st { display: flex; align-items: baseline; gap: 7px; }
.pl-izmena-telo .pl-zadeve-stevilo { font-size: 23px; font-weight: 700; line-height: 1; color: var(--st-warn-txt); font-variant-numeric: tabular-nums; }
.pl-izmena-telo .pl-zadeve-napis { font-size: 9.5px; color: var(--txt-2); }
.pl-izmena-telo .pl-zadeve-vrstice { margin: 3px 0 0; padding: 0; list-style: none; font-size: 9.5px; line-height: 1.35; color: var(--txt-2); }
.pl-izmena-telo .pl-zadeve-rok { margin: 2px 0 0; font-size: 9px; line-height: 1.35; color: var(--txt-3); }
.pl-izmena-telo .pl-zadeve-rok--zamuja { font-weight: 700; color: var(--st-danger-txt); }
.pl-izmena-telo .pl-zadeve-napaka { margin: 4px 0 0; font-size: 10px; line-height: 1.35; color: var(--st-danger-txt); }
.pl-izmena-telo .pl-popis { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pl-izmena-telo .pl-popis-naslov { font-size: 10px; font-weight: 600; line-height: 1.3; color: var(--txt-2); overflow-wrap: anywhere; }
.pl-izmena-telo .pl-popis-zapadel { font-size: 9px; font-weight: 700; color: var(--st-danger-txt); }
.pl-izmena-telo .pl-popis-gumb {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  box-sizing: border-box; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-tx);
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-decoration: none;
}
.pl-izmena-telo .pl-popis-pod { margin: 3px 0 0; font-size: 9px; line-height: 1.35; color: var(--txt-3); }
/* MOJ STATUS: pet cipov v ENI vrsti tudi pri 390 px — napis se lahko prelomi v cipu, cip pa ne v vrstico. */
.pl-izmena-telo .pl-cipi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.pl-izmena-telo .pl-cip {
  width: 100%; min-width: 0; padding: 4px 1px; border-radius: 10px; font-size: clamp(9px, 2.7vw, 10.5px); font-weight: 700;
  letter-spacing: .01em; line-height: 1.15; text-transform: uppercase; text-align: center; overflow-wrap: normal;
}
.pl-izmena-telo .pl-status-meta { margin: 6px 0 0; font-size: 10px; line-height: 1.35; color: var(--txt-2); }
.pl-izmena-telo .pl-status-meta--zamuja { font-weight: 700; color: var(--st-danger-txt); }
.pl-izmena-telo .pl-status-dodatno { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.pl-izmena-telo .pl-status-obrazec { margin-top: 8px; }
.pl-izmena-telo .pl-status-napotek { margin: 8px 0 0; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--txt); }
/* VREME, PROMET, TOP 3: rezervirana visina polne kartice (D35). Napis brez povezave stoji na sredini. */
.pl-izmena-telo .pl-k--vreme,
.pl-izmena-telo .pl-k--promet { display: flex; flex-direction: column; min-height: 88px; }
.pl-izmena-telo .pl-k--top3 { display: flex; flex-direction: column; min-height: 104px; }
.pl-izmena-telo .pl-brez {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--txt-3);
}
.pl-izmena-telo .pl-vreme { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-izmena-telo .pl-vreme-ikona { flex: 0 0 auto; font-size: 30px; line-height: 1; color: var(--txt-2); }
.pl-izmena-telo .pl-vreme-besedilo { display: flex; flex-direction: column; min-width: 0; }
.pl-izmena-telo .pl-vreme-temp { font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl-izmena-telo .pl-vreme-opis { font-size: 9px; letter-spacing: .02em; text-transform: uppercase; color: var(--txt-3); overflow-wrap: anywhere; }
/* Sidro »Odprte zadeve« skoci na gumbe predaje; glava strani je pritrjena, zato odmik. */
.pl-izmena-telo .pl-predaja { scroll-margin-top: 72px; }
/* ── konec: telo izmene ──────────────────────────────────────────────────── */

/* ── PLOSCA / prosto telo (krog 3-4d4a) ── */
/* DVE VODILNI KARTICI PROSTE PLOSCE (risba prostega zaslona, 6. 9.): naslednja izmena z odstevanjem in ravno
   casovnico ter tvoja zadnja izmena. Vsak izbirnik je zamejen pod ovoj `.pl-prosto-telo`, ki ga izrise telo samo,
   zato slog ne velja nikjer drugje. BARVA OZNAKE je podatek v atributu polnila risbe in je tu NOBENO pravilo ne
   postavi (pravilo bi jo preglasilo); element brez podatka dobi nevtralno polnilo. Lege na traku so odstotne
   koordinate risbe, zato jih slog ne nosi. Tarca dotika kartice zadnje izmene je vsaj 44 px. */
.pl-prosto-telo { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 10px 16px 10px; }
.pl-prosto-telo .pl-prosto-k {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px; box-sizing: border-box;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt);
}
.pl-prosto-telo .pl-prosto-k--zadnja { gap: 8px; min-height: 44px; padding: 12px 14px; text-decoration: none; }
.pl-prosto-telo .pl-prosto-vrh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pl-prosto-telo .pl-prosto-levo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-prosto-telo .pl-prosto-desno { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; text-align: right; }
.pl-prosto-telo .pl-prosto-h { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.pl-prosto-telo .pl-prosto-odstevanje { font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-prosto-telo .pl-prosto-pod { font-size: 11px; line-height: 1.35; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-termin { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-prosto-telo .pl-prosto-stanje { margin: 2px 0 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-znacka { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl-prosto-telo .pl-prosto-znak { flex: 0 0 9px; }
.pl-prosto-telo .pl-prosto-oznaka { font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pl-prosto-telo .pl-prosto-brez-barve { fill: var(--txt-3); }
.pl-prosto-telo .pl-prosto-trak { display: block; overflow: visible; }
.pl-prosto-telo .pl-prosto-trak-podlaga { fill: var(--hairline); }
.pl-prosto-telo .pl-prosto-trak-pot { fill: var(--accent); opacity: .2; }
.pl-prosto-telo .pl-prosto-trak-crtica { fill: var(--txt-3); }
.pl-prosto-telo .pl-prosto-trak-zdaj { fill: var(--accent); stroke: var(--surface); stroke-width: 3px; }
.pl-prosto-telo .pl-prosto-trak-napis { font-size: 9px; font-weight: 700; letter-spacing: .03em; fill: var(--txt-3); }
.pl-prosto-telo .pl-prosto-trak-napis--zdaj { font-weight: 800; fill: var(--txt-2); }
.pl-prosto-telo .pl-prosto-opomba { margin: -4px 0 0; font-size: 10px; line-height: 1.4; color: var(--txt-3); }
.pl-prosto-telo .pl-prosto-prevzem { margin: 0; width: 100%; padding-top: 10px; border-top: 1px solid var(--hairline); }
.pl-prosto-telo .pl-prosto-vrsta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-prosto-telo .pl-prosto-crta { flex: 0 0 4px; }
.pl-prosto-telo .pl-prosto-besedilo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; margin: 0; }
.pl-prosto-telo .pl-prosto-seja { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pl-prosto-telo .pl-prosto-puscica { flex: 0 0 auto; font-size: 18px; line-height: 1; color: var(--txt); }
/* KROG P1-3+4 (A.2): ponovni prevzem (klic) in »Zamenjan si« na prosti plosci. */
.pl-prosto-telo .pl-prosto-ponovni { width: 100%; }
/* KROG P1-3+4 (popravek po preizkusu na telefonu): IKONA MENIJA PREVZEMA v spodnjem desnem kotu kartice Naslednja izmena.
   Spodnja vrstica je dvostolpcna (besedilo levo, ikona desno), zato se po zgradbi ne prekrivata; ikona je 44 x 44 px, obroba in
   barve po vzorcu cipa. */
.pl-prosto-telo .pl-prosto-dno { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.pl-prosto-telo .pl-prosto-dno-levo { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
.pl-prosto-telo .pl-prosto-ikona {
  flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto;
  box-sizing: border-box; border-radius: 50%; border: 1px solid var(--tab-bd); background: var(--surface); color: var(--txt);
  font-size: 22px; line-height: 1; text-decoration: none;
}
/* KROG P1-3+4 (B.1, D2): vrstice menija prevzema (pred oknom, izven razporeda) — od popravka po preizkusu odpre meni ikona. */
.pl-prosto-telo .pl-prosto-meni-vrstica { display: flex; width: 100%; justify-content: flex-start; margin-top: 8px; box-sizing: border-box; }
/* KROG P1-3+4 (B.2): »zaključena samodejno ob« in gumb POPRAVEK ZAPISA ob kartici Tvoja zadnja izmena (C23, C26). */
.pl-prosto-telo .pl-prosto-samodejno { color: var(--txt-2); }
/* KROG POPRAVKI-TEL-1: vrstica popravka je V kartici (pod podvrstico, locena z lasnico), oblika vrstice kartice, tarca dotika
   44 px. Zgornji del kartice je svoja tarca (povezava na zadnjo izmeno). Znacka steje intervencije BREZ oznake. */
.pl-prosto-telo .pl-prosto-zadnja-vrh { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.pl-prosto-telo .pl-prosto-popravek {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; box-sizing: border-box;
  border-top: 1px solid var(--hairline); color: inherit; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.3;
}
.pl-prosto-telo .pl-prosto-popravek-napis { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pl-prosto-telo .pl-prosto-popravek-st {
  flex: 0 0 auto; min-width: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--st-warn-txt);
  background: var(--st-warn-bg); color: var(--st-warn-txt); font-size: 11px; font-weight: 700; line-height: 1.45; text-align: center;
}
.pl-prosto-telo .pl-prosto-k--zamenjan { align-items: center; text-align: center; gap: 6px; padding: 18px 14px; }
.pl-prosto-telo .pl-prosto-kljukica { font-size: 40px; line-height: 1; color: var(--st-success-txt); }
.pl-prosto-telo .pl-prosto-zamenjan-h { margin: 0; font-size: 20px; font-weight: 800; color: var(--txt); }
/* KROG PLOSCA-DOMA (1/3, lastnik 20. 10. 2026): GLAVA kartice Naslednja izmena — oznaka 11 px, 6 px razmika, velik cas 24/800 in
   vrstica 14 px; ikona »Prevzem izven razporeda« desno zgoraj (44 px). Napisi traku 9,5 px / 600, ZDAJ ni poudarjen. PLOSCICI
   »Zamenjaš« in »S teboj« v mrezi dveh stolpcev (ena cez celo sirino), list »V izmeni s teboj« po ekipah. Barv izmen ni. */
.pl-prosto-telo .pl-prosto-k--naslednja { gap: 10px; padding: 12px 16px; }
.pl-prosto-telo .pl-prosto-k--naslednja .pl-prosto-levo { gap: 0; flex: 1 1 auto; }
.pl-prosto-telo .pl-prosto-k--naslednja .pl-prosto-ikona { margin-left: 0; }
.pl-prosto-telo .pl-prosto-cas { margin-top: 6px; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--txt); }
.pl-prosto-telo .pl-prosto-pod--glava { margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.pl-prosto-telo .pl-prosto-pod--glava b { font-weight: 700; color: var(--txt); }
.pl-prosto-telo .pl-prosto-k--naslednja .pl-prosto-trak-napis { font-size: 9.5px; font-weight: 600; fill: var(--txt-3); }
.pl-prosto-telo .pl-prosto-ploscici { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pl-prosto-telo .pl-prosto-ploscici--ena { grid-template-columns: minmax(0, 1fr); }
.pl-prosto-telo .pl-prosto-ploscica {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 44px; padding: 7px 11px;
  box-sizing: border-box; border-radius: 12px; border: 1px solid var(--tab-bd); color: var(--txt); text-decoration: none;
}
.pl-prosto-telo .pl-prosto-ploscica-oznaka { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-ploscica-puscica { font-size: 14px; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-ploscica-ime { font-size: 14px; font-weight: 700; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-prosto-telo .pl-prosto-ploscica-vloga { font-size: 12px; line-height: 1.3; color: var(--txt-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-prosto-telo .pl-prosto-st-pod { margin: 0 0 6px; font-size: 13px; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-st-h { margin: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-st-clan { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.pl-prosto-telo .pl-prosto-st-krog {
  flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--tab-bd); box-sizing: border-box; color: var(--txt); font-size: 13px; font-weight: 700;
}
.pl-prosto-telo .pl-prosto-st-clan--ti .pl-prosto-st-krog { border-color: var(--accent); background: var(--accent); color: var(--accent-tx); }
.pl-prosto-telo .pl-prosto-st-besedilo { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.pl-prosto-telo .pl-prosto-st-ime { font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pl-prosto-telo .pl-prosto-st-vloga { font-size: 12px; color: var(--txt-2); }
.pl-prosto-telo .pl-prosto-st-zamenja { flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--txt-2); text-align: right; overflow-wrap: anywhere; }
/* ── konec: prosto telo ──────────────────────────────────────────────────── */

/* ── PLOSCA / kaj prihaja (KROG PLOSCA-DOMA 2/3) ── */
/* KARTICA »KAJ PRIHAJA« pod kartico naslednje izmene: naslov in »Več (n) ›«, VEDNO pet vrstic po 48 px (prazna vrstica je prazen prostor
   iste visine — kartica ne spremeni visine). Vrstica: dan (10 px, verzalke) in datum (17/800), naslov (15/700, ena vrstica, tropicje) s
   podnaslovom (12 px), desno kvadrat oznake izmene (34 px, obroba), gumb (32 px, poln) ali puscica. Nov vnos ima rdeco piko 7 px. Barve
   izmen ni. List »Kaj prihaja · 30 dni«: izbirnik Vse / Izmene / Zame (izbirni gumbi, seznam pokaze slog nad :checked), vrstice 54 px. */
.pl-kp { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0 16px 10px; padding: 10px 16px 4px; box-sizing: border-box;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt); }
.pl-kp .pl-kp-glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; }
.pl-kp .pl-kp-h { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.pl-kp .pl-kp-vec { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--txt); text-decoration: none; }
.pl-kp .pl-kp-vrstice { display: flex; flex-direction: column; }
.pl-kp-v { display: flex; align-items: center; gap: 12px; height: 48px; min-width: 0; box-sizing: border-box; overflow: hidden;
  border-top: 1px solid var(--hairline); color: var(--txt); text-decoration: none; }
.pl-kp .pl-kp-vrstice .pl-kp-v:first-child { border-top: 0; }
.pl-kp-v--list { height: 54px; }
.pl-kp-v .pl-kp-dan { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 58px; min-width: 0; line-height: 1.05; }
.pl-kp-v .pl-kp-dan-ime { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--txt-2); }
.pl-kp-v .pl-kp-dan-dat { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-kp-v .pl-kp-sredina { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.pl-kp-v .pl-kp-naslov { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-kp-v .pl-kp-pod { display: block; font-size: 12px; line-height: 1.3; color: var(--txt-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-kp-v .pl-kp-pika { display: inline-block; width: 7px; height: 7px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--red); vertical-align: middle; }
.pl-kp-v .pl-kp-znak { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 1.5px solid var(--txt); border-radius: 8px; font-size: 13px; font-weight: 800; color: var(--txt); }
.pl-kp-v .pl-kp-gumb { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; box-sizing: border-box;
  border-radius: 10px; background: var(--accent); color: var(--accent-tx); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pl-kp-v .pl-kp-puscica { flex: 0 0 auto; font-size: 18px; color: var(--txt-2); }
.pl-kp-v .pl-kp-prazno-v { font-size: 14px; color: var(--txt-2); }
.pl-kp-okno .pl-kp-f { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pl-kp-okno .pl-kp-filter { display: flex; gap: 8px; margin: 4px 0 8px; }
.pl-kp-okno .pl-kp-fl { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; box-sizing: border-box; border-radius: 18px;
  border: 1px solid var(--tab-bd); background: var(--surface); color: var(--tab-tx); font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-kp-okno #pl-kp-f-vse:checked ~ .pl-kp-filter .pl-kp-fl--vse,
.pl-kp-okno #pl-kp-f-izmene:checked ~ .pl-kp-filter .pl-kp-fl--izmene,
.pl-kp-okno #pl-kp-f-zame:checked ~ .pl-kp-filter .pl-kp-fl--zame { background: var(--accent); border-color: var(--accent); color: var(--accent-tx); }
.pl-kp-okno .pl-kp-f:focus-visible ~ .pl-kp-filter { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-kp-okno .pl-kp-seznam { display: none; }
.pl-kp-okno #pl-kp-f-vse:checked ~ .pl-kp-seznam--vse,
.pl-kp-okno #pl-kp-f-izmene:checked ~ .pl-kp-seznam--izmene,
.pl-kp-okno #pl-kp-f-zame:checked ~ .pl-kp-seznam--zame { display: block; }
.pl-kp-okno .pl-kp-razdelek { margin: 12px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--txt-2); }
.pl-kp-okno .pl-kp-prazno { margin: 12px 0; font-size: 14px; color: var(--txt-2); }
.pl-kp-okno .pl-kp-urnik { display: flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--txt); text-decoration: none; }
/* ── konec: kaj prihaja ──────────────────────────────────────────────────── */

/* ── PLOSCA / doma (KROG PLOSCA-DOMA 3/3) ── */
/* GLAVA TELEFONA (prej vrinjen slog v index.php — v izmeni enake mere kot prej) in PROSTA PLOSCA NA ENO STRAN: glava 56 px, odmik strani
   16 px, razmik kartic 10 px; KOMPAKTEN MESEC (ime meseca in »mesečni fond«, stolpci sredinsko, stevilke 22/800, brez barv). */
.mob-glava { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px; }
/* KROG PLOSCA-DOMA (4+, lastnik 20. 10. 2026): grb in pozdrav stojita navpicno KOT PRED krogom (zgornji odmik 14 px pod varnim pasom —
   sistem na iPhonu pas pod statusno vrstico zamegli); vodoravni odmik 16 px in razmik do kartice 10 px ostaneta. */
.mob-glava.mob-glava--doma { padding: 14px 16px 0; box-sizing: border-box; gap: 10px; }
.pl-mes { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0 16px 0; padding: 10px 16px; box-sizing: border-box;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt); }
.pl-mes .pl-mes-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pl-mes .pl-mes-h { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.pl-mes .pl-mes-fond { font-size: 12px; color: var(--txt-2); white-space: nowrap; }
.pl-mes .pl-mes-stolpci { display: flex; justify-content: space-around; gap: 8px; }
.pl-mes .pl-mes-st { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; text-align: center; }
.pl-mes .pl-mes-vr { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--txt); }
.pl-mes .pl-mes-nap { font-size: 11px; color: var(--txt-2); white-space: nowrap; }
.pl-mes .pl-mes-sp { margin: 0; font-size: 12px; color: var(--txt-2); text-align: center; }
.pl-zv { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin: 10px 16px 0; padding: 8px 16px; box-sizing: border-box;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); color: var(--txt); text-decoration: none; }
.pl-zv .pl-zv-besedilo { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.pl-zv .pl-zv-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.pl-zv .pl-zv-vr { font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-zv .pl-zv-puscica { flex: 0 0 auto; font-size: 18px; color: var(--txt-2); }
/* ── konec: plosca doma ──────────────────────────────────────────────────── */

/* ═══ MODUL IZMENA — zavihek Izmena (KROG 3-4a-2a) ═══════════════════════════════════════════
   Preseljeno iz `<style>` bloka strani `izmena/index.php`, DEKLARACIJE ZNAKOVNO ENAKE. Isti slog
   bo v krogu 3-4a-2b potrebovala plosca, ki telo ovije z istim razredom.
   VSAK IZBIRNIK JE ZAMEJEN POD `.iz-wrap` in to ni okras: `menjave/index.php` ima SVOJE pravilo
   `.iz-row` (druge lastnosti, druga raba) in svoje `.iz-lbl`/`.iz-datum`/`.iz-tip`. Golo pravilo v
   skupnem listu bi menjavam tiho dodalo lastnosti — stran, ki je v `docs/baseline/`. */
.iz-wrap{margin:0 auto;}
.iz-wrap .iz-card{background:var(--card);border:1px solid var(--cbd);border-radius:10px;padding:14px;margin-bottom:12px;}
.iz-wrap .iz-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.iz-wrap .iz-title{font-weight:700;font-size:15px;color:var(--txt);flex:1;min-width:120px;}
.iz-wrap .iz-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600;}
.iz-wrap .iz-meta{font-size:12px;color:var(--mut);display:flex;flex-wrap:wrap;gap:10px;}
.iz-wrap .iz-ovire{list-style:none;padding:0;margin:8px 0 0;}
.iz-wrap .iz-ovire li{font-size:12px;color:var(--st-warn-txt);background:var(--st-warn-bg);border-radius:8px;padding:6px 10px;margin-bottom:6px;}
.iz-wrap .iz-btn{padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;min-height:44px;box-sizing:border-box;}
.iz-wrap .iz-btn-primary{background:var(--accent);color:var(--accent-tx);}
.iz-wrap .iz-btn-secondary{background:var(--card);border:1px solid var(--cbd);color:var(--txt);}
.iz-wrap .iz-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.iz-wrap .iz-input{padding:10px 12px;border:1px solid var(--cbd);border-radius:8px;background:var(--bg);color:var(--txt);font-size:16px;min-height:44px;box-sizing:border-box;max-width:100%;}
.iz-wrap .iz-stanje{margin-top:12px;padding-top:12px;border-top:1px solid var(--cbd);}
.iz-wrap .iz-stanje-zdaj{font-size:22px;font-weight:700;color:var(--txt);}
.iz-wrap .iz-btn-st{min-height:52px;min-width:96px;padding:12px 18px;margin:6px 6px 0 0;border-radius:10px;border:1px solid var(--cbd);background:var(--surface);color:var(--txt);font-size:16px;font-weight:600;cursor:pointer;}
.iz-wrap .iz-btn-st:active{background:var(--accent);color:var(--accent-tx);}
.iz-wrap .iz-pav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.iz-wrap .iz-pav-ime{font-size:13px;color:var(--mut);width:100%;}
.iz-wrap .iz-zamuja{color:var(--st-danger-txt);}
.iz-wrap .iz-tabs{display:flex;gap:4px;margin-bottom:12px;padding:4px;border-radius:12px;background:var(--surface-2);box-sizing:border-box;}
.iz-wrap .iz-tab{flex:1 1 0;justify-content:center;padding:6px 8px;border-radius:9px;border:0;background:transparent;color:var(--txt-2);font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;}
.iz-wrap .iz-tab.active{background:var(--accent);color:var(--accent-tx);}
.iz-wrap .iz-empty{text-align:center;color:var(--mut);padding:40px 16px;font-size:14px;}
.iz-wrap .iz-clan{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--cbd);}
.iz-wrap .iz-clan:last-child{border-bottom:none;}

/* ── Plosca v izmeni (KROG 3-4a-2b) ── */
/* Telefon nima pasu glave, zato tu NI `.ui-page` (njen odmik za pas bi na plosci naredil luknjo).
   Sirino omeji `max-width` neposredno — preglasitev tokena `--content-max` bi podrla zeton palete. */
.pl-v-izmeni{max-width:840px;margin:0 auto;padding:0 var(--page-edge) var(--sp-6);box-sizing:border-box;}
.mobile-dash .pl-iz-vrstice{padding:0 var(--page-edge);}
/* KROG 3-4c2a: zaslon potrditve prevzema na plosci — ista sirina kot telesa izmene. Razmiki zaslona so
   odslej v slogu (prej sest vrinjenih stilov v strani modula). IMENOVANA RAZLIKA: sest vrinjenih razmikov je
   zdruzenih v eno pravilo (6 px), zato vrstica »Prevzemas kot« dobi 6 namesto 8 px — edina premaknjena
   vrednost, izmerjena v adversarnem pregledu; preostalih pet je bilo enakih pravilu razreda. */
.pl-potrditev{max-width:840px;}
.mobile-dash .pl-potrditev{padding:0 var(--page-edge);}
.iz-wrap .iz-potrditev .iz-meta{margin-top:6px;}
.pl-v-izmeni .pl-glava-zavihka{margin:0 2px 10px;}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   KROG PI-1 — TELO ZAVIHKA IZMENA V STANJU »V IZMENI« (maketa A1362, potrdil lastnik 26. 9. 2026)
   Povozi razporeditev kroga 3-4d2. Barve so samo iz zetonov; edini NOV zeton je obroba kartic.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
/* EN ZETON OBROBE ZA VSE KARTICE. Ni v zamrznjeni primarni paleti (izbira I5, njen zapis pribija svoja
   trditev), ampak tu, v odseku plosce — ena vrstica za svetlo, ena za temno temo. Razlog za nov zeton:
   `--card-border` je v svetli temi `transparent`, zato z njim kartice v svetli temi obrobe NIMAJO. */
:root { --rob: #DCDCE1; }
[data-theme="dark"] { --rob: #3A3A42; }
/* KROG POPRAVKI-TEL-2 (D): rumena okna predaje na obrocu (lok in sled) — lasten zeton, svetla in temna tema. */
:root { --pl-obroc-okno: #EAB308; }
[data-theme="dark"] { --pl-obroc-okno: #FACC15; }

/* POSTAVITEV: navpicen stolpec, zadnja kartica prevzame preostanek visine (zaslon se ne pomika). */
/* NE na ovoju: telo se izrise v DVEH ovojih (plosca `pl-v-izmeni`, modul `ui-page`) in pravilo, pripeto
   na enega, pomeni dva videza istega telesa. `flex-grow` je danes BREZ UCINKA, ker ovoj telesu ne poda
   proste visine (izmerjeno: visina kartice = `min-height`); razteg do spodnjega menija zato ostane
   odprt — velja samo spodnja meja visine. */
.pl-izmena-telo .pl-k--aktivnosti { min-height: 96px; }

/* JUNAK: obroc 92 px, lok 5 px z zaobljenim koncem; barvo doloca FAZA, ne stanje posadke. */
.pl-izmena-telo .pl-obroc-sled { stroke: var(--pl-faza, var(--txt-3)); opacity: .18; }
.pl-izmena-telo .pl-obroc-lok { stroke: var(--pl-faza, var(--txt-3)); stroke-linecap: round; }
.pl-izmena-telo .pl-obroc-glava { fill: var(--surface); stroke: var(--pl-faza, var(--txt-3)); stroke-width: 2; }
.pl-izmena-telo .pl-obroc-napis { font-size: 8px; }
/* FAZA: pomen, ne okras. Brez faze (casa ni mogoce izracunati) lok nima barve stanja. */
.pl-izmena-telo .pl-hero.pl-faza--ok    { --pl-faza: var(--st-success-txt); }
/* KROG POPRAVKI-TEL-2 (D): okno predaje je RUMENO (lok in sled) — svoja zetona, ne par znack opozorila. */
.pl-izmena-telo .pl-hero.pl-faza--okno  { --pl-faza: var(--pl-obroc-okno); }
.pl-izmena-telo .pl-hero.pl-faza--konec { --pl-faza: var(--st-danger-txt); }
/* Stevilke v barvi faze SAMO zadnjih pet minut. V oknu predaje cas ostane v barvi besedila (rumena na svetli podlagi je
   slabo berljiva; KROG POPRAVKI-TEL-2, D). */
.pl-izmena-telo .pl-hero.pl-faza--konec .pl-obroc-cas { color: var(--pl-faza); }
/* Zadnjih pet minut lok rahlo utripa. */
@keyframes pl-lok-utrip { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.pl-izmena-telo .pl-hero.pl-faza--konec .pl-obroc-lok { animation: pl-lok-utrip 1s ease-in-out infinite; }
/* Dvopicje utripa vsako sekundo — s slogom, ne s skriptom. */
@keyframes pl-dvopicje { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
.pl-izmena-telo .pl-obroc-dvopicje { animation: pl-dvopicje 1s steps(1, end) infinite; }
.pl-izmena-telo .pl-hero-naslov { font-size: 22px; font-weight: 700; }
.pl-izmena-telo .pl-hero-seja { color: var(--st-warn-txt); font-weight: 700; }
/* Clan posadke NIMA locilne crte in NIMA odmika: oboje podeduje od starega sloga `.pl-clan`
   (polna kartica izmene), maketa A1362 pa ima imena v junaku brez crt. Prepis je IZRECEN, ker
   podedovana crta v izrisu ostane, tudi kadar je v tem odseku nihce ne napise. */
.pl-izmena-telo .pl-clan { display: flex; align-items: baseline; gap: 5px; padding: 2px 0; border-bottom: 0; }
.pl-izmena-telo .pl-clan-ime { font-size: 13px; font-weight: 700; color: var(--txt); }
.pl-izmena-telo .pl-clan-vloga { font-size: 11px; color: var(--txt-2); }

/* PAR 2/3 · 1/3: levo nujna vozila, desno stolpec dveh stevcev. */
.pl-izmena-telo .pl-par2 { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; align-items: stretch; }
.pl-izmena-telo .pl-stolpec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-izmena-telo .pl-stolpec > .pl-k { flex: 1 1 0; display: flex; flex-direction: column; }

/* NUJNA VOZILA: dva navidezna stolpca — levo naziv in stevilka intervencij, desno znacka enake sirine. */
.pl-izmena-telo .pl-nujna-seznam { margin: 0; padding: 0; list-style: none; }
/* KROG VRATA-TV: pri 320 px je imenu ostalo ~50 px in se je lomilo sredi niza (druga vrstica odrezana pri visini 30 px). Ime je odslej
   v ENI vrstici s tremi pikami in ima najmanj 4,3em (kratka imena NRV 243 / VUZ 250 / Ekipa 4 so pri 320 px CELA — lastnik); stolpec znacke
   dobi preostanek (56-78 px) in znacka zapolni svoj stolpec. Postavitev kartice ostane. */
.pl-izmena-telo .pl-nv { display: grid; grid-template-columns: minmax(4.3em, 1fr) auto minmax(56px, 78px); align-items: center; gap: 6px;
  height: 30px; border-top: 1px solid var(--hairline); }
.pl-izmena-telo .pl-nv:first-child { border-top: 0; }
.pl-izmena-telo .pl-nv-ime { min-width: 0; font-size: 15px; font-weight: 800; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* KROG P1-5 (A2): sredina vrstice je ZASEDENOST (»2/2«, brez polnila), ne vec stevilo intervencij (to je preslo v Vsa vozila).
   Manj kot polno je besedilo opozorila iz zamrznjene status palete. */
.pl-izmena-telo .pl-nv-zas { font-size: 12px; font-weight: 700; color: var(--txt-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-izmena-telo .pl-nv-zas--manj { color: var(--st-warn-txt); }
.pl-izmena-telo .pl-nv-stanje { width: 100%; padding: 2px 0; border-radius: 9px; text-align: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--pl-st-txt, var(--txt-3)); background: var(--pl-st-bg, transparent); }
/* KROG VRATA-TV (lastnik): SAMO znacka »NI PREVZETO« (obstojeci razred vrstice brez zive seje) se, kadar ne gre v eno vrstico, prelomi v
   DVE (»NI« / »PREVZETO«) znotraj visine vrstice 30 px; nobena crka ne odpade. Ostale znacke ostanejo v eni vrstici. */
.pl-izmena-telo .pl-nv--neprevzeto .pl-nv-stanje { white-space: normal; line-height: 1.1; padding: 1px 0; }
.pl-izmena-telo .pl-nujna-vec { margin: 4px 0 0; font-size: 10px; font-weight: 600; color: var(--txt-3); }
/* Barve stanj nujnih vozil so ISTA pravila kot pri junaku (glej preslikavo zgoraj) — locena
   pravila bi bila DRUGA preslikava istega dejstva. */

/* STEVCI (Naloge, Vozilo): v sredini SAMO stevilka; barva pove stopnjo. */
.pl-izmena-telo .pl-stevec { text-decoration: none; }
.pl-izmena-telo .pl-stevec .pl-k-glava { padding-bottom: 0; }
.pl-izmena-telo .pl-stevec-st { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
/* KROG PREDAJA-1 hitri: stevca Naloge in Opomniki sta VEDNO enako visoka — vrstica stevila ima najmanj crtno visino stevilke (34 px), tudi
   kadar kaze »OK« (20 px). NE `height` (pokvari sredinjenje) in NE `min-height: 0` na kartici (zadene obrazec 24 h). Spodnji odmik stevcnih
   kartic je zato najvec 3 px (zgornji ostane 10 px — naslova poravnana z Nujna vozila). */
.pl-izmena-telo .pl-stevec-st { min-height: 34px; }
.pl-izmena-telo .pl-stolpec > .pl-stevec { padding-bottom: 3px; }
.pl-izmena-telo .pl-stevec-st--ok      { font-size: 20px; color: var(--st-success-txt); }
.pl-izmena-telo .pl-stevec-st--opoz    { color: var(--st-warn-txt); }
.pl-izmena-telo .pl-stevec-st--slabo   { color: var(--st-danger-txt); }
.pl-izmena-telo .pl-stevec-st--preveri { font-size: 20px; color: var(--txt-3); }
/* KROG NAPRAVE-2 (B1, izbrana barva O4): stevilka Nalog in Opomnikov je NEVTRALNA; rdeca ostane samo za blokado oziroma NEUSTREZNO. */
.pl-izmena-telo .pl-stevec-st--nevtr   { color: var(--txt); }
.pl-izmena-telo .pl-stevec-st--nic     { font-size: 20px; color: var(--txt-2); }
/* KROG NAPRAVE-2 (B2): »Prevzame: …« je vrstica pod casom v zgornji kartici izmene (povezava na urnik). */
/* Vrstica je nizka (kartica ne sme zrasti), OBMOCJE DOTIKA pa je 44 px: nevidna podlaga sega cez vrstico navzgor in navzdol. */
/* POPRAVEK HN10: vrstica je ENA (sirsa pisava jo je prelomila v dve). Prepoved preloma dvigne najmanjso sirino cele verige
   starsev (vodoravni pomik), zato vrstica svoje vsebine v sirino NE prispeva: sirina 0, najmanj 100 % starsa. */
.pl-izmena-telo .pl-hero-prevzame { position: relative; display: flex; width: 0; min-width: 100%; margin-top: 2px; padding: 1px 0; font-size: 13px; line-height: 1.35; color: var(--txt-2); text-decoration: none; white-space: nowrap; }
.pl-izmena-telo .pl-hero-prevzame-ime { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-izmena-telo .pl-hero-prevzame-rep { flex: none; padding-left: .3em; }
.pl-izmena-telo .pl-hero-prevzame::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.pl-izmena-telo .pl-hero-prevzame strong { font-weight: 700; color: var(--txt); }
/* KROG NAPRAVE-2 (B1/B3): list »Opomniki« — opomnik pred predajo (vprasanje z gumboma) in vrstice ploscic NEUSTREZNO. */
.pl-izmena-telo .pl-opn { display: block; padding: 12px 0; border-top: 1px solid var(--hairline); }
.pl-izmena-telo .pl-list-glava + .pl-opn { border-top: 0; padding-top: 0; }
.pl-izmena-telo .pl-opn-vprasanje { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--txt); }
.pl-izmena-telo .pl-opn-izbiri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-izmena-telo .pl-opn-gumb { min-height: 52px; margin: 0; justify-content: center; font-size: 17px; font-weight: 800; }
.pl-izmena-telo .pl-opn--ploscica { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; text-decoration: none; color: var(--txt); }
.pl-izmena-telo .pl-opn-pika { flex: 0 0 auto; font-size: 13px; line-height: 20px; color: var(--st-danger-txt); }
/* KROG NAPRAVE-2 (DODATEK B, D1): vrstica neoddanega obrazca ima SIVO piko (rdeca ostane samo naprave NEUSTREZNO). */
.pl-izmena-telo .pl-opn--obrazec .pl-opn-pika { color: var(--txt-3); }
.pl-izmena-telo .pl-opn-besedilo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-izmena-telo .pl-opn-ime { font-size: 15px; font-weight: 700; line-height: 20px; overflow-wrap: anywhere; }
.pl-izmena-telo .pl-opn-pod { font-size: 13px; line-height: 1.35; color: var(--txt-2); overflow-wrap: anywhere; }

/* MOJ STATUS: glava pove, od kdaj stanje traja, in katero je (dve vrstici pod cipi sta odsli). */
.pl-izmena-telo .pl-status-glava { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl-izmena-telo .pl-status-od { font-size: 10.5px; font-weight: 600; color: var(--txt-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-izmena-telo .pl-status-od--zamuja { color: var(--st-danger-txt); font-weight: 700; }
.pl-izmena-telo .pl-cip--vec { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; letter-spacing: .08em; text-decoration: none; }

/* SPODNJA LISTA NALOG IN VOZILA */
.pl-naloga { padding: 8px 0; }
/* Crta MED sosedama: `:first-of-type` se ne ujame, ker je prvi `div` v listu njegova glava. */
.pl-naloga + .pl-naloga { border-top: 1px solid var(--hairline); }
.pl-naloga-glava { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-naloga-naslov { font-size: 13px; font-weight: 600; color: var(--txt); }
.pl-naloga-kako { margin: 4px 0 0; font-size: 11px; line-height: 1.35; color: var(--txt-2); }
.pl-znacka--odprto  { background: var(--st-warn-bg);   color: var(--st-warn-txt); }
.pl-znacka--blokira { background: var(--st-danger-bg); color: var(--st-danger-txt); }
.pl-znacka--ploscica { background: var(--surface-2); color: var(--txt-2); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; }
.pl-neok { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.pl-neok + .pl-neok { border-top: 1px solid var(--hairline); }
.pl-neok-ime { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--txt); overflow-wrap: anywhere; }
.pl-gumb--zavihek { flex: 0 0 auto; min-width: 100px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.pl-neok[data-pl-stanje="NEUSTREZNO"] .pl-znacka--ploscica { background: var(--st-danger-bg); color: var(--st-danger-txt); }
.pl-neok[data-pl-stanje="PREVERI"]    .pl-znacka--ploscica { background: var(--st-warn-bg);   color: var(--st-warn-txt); }

/* KRMILNIK »MOJ STATUS« (KROG PI-2): dva gumba, pas razveljavitve, meni in rezervne moznosti.
   Mere so POTRJEN VIDEZ iz specifikacije v2: velik gumb 64 px visok, 17/800 + podnapis 10,5;
   mali 92 x 64. Vedno samo dva — rezervne moznosti nikoli ne postanejo tretji gumb. */
.pl-izmena-telo .pl-gumba { display: flex; gap: 10px; align-items: stretch; }
/* DOLG PRITISK NE SME ODPRETI SISTEMSKEGA MENIJA POVEZAVE (iPhone/Safari, izmerjeno na telefonu 28. 9.).
   Gumba, ki odpirata list, sta `<a href="#...">`, ker mora pot delovati tudi brez skripta. iOS ob dolgem
   pritisku na povezavo dogodka `contextmenu` NE sprozi, zato ga skript ne more prekiniti — edina pot je
   ta lastnost. Android tega menija ne odpre. Izbirnik je po ATRIBUTU in ne po razredu, zato velja tudi za
   nove gumbe (PREDAJ, ZAKLJ.) in za vsak prihodnji, ki dobi isti atribut. */
.pl-izmena-telo [data-pl-drzi],
.pl-izmena-telo [data-pl-dotik],
/* KROG P1-3+4 (popravek po preizkusu): dolg pritisk je oznacil besedilo v PWA — pravilo velja za VSAK element z gesto ali
   drzanjem KJERKOLI na plosci (izbirnik po atributu, ne po razredu in ne po ovoju). */
[data-pl-gesta],
[data-pl-drzi] {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}

/* KROG PI-3: kartica »Prevzame« (v oknu predaje stoji na mestu kartice Vozilo), pripis prenesene
   postavke in POVEZAVA V BESEDILU. Povezava je doslej nosila privzeto barvo brskalnika (modra), ki je
   v temni temi slabo berljiva — barvo odslej dolocata zetona besedila, kot pri vseh drugih povezavah
   plosce. */
.pl-izmena-telo .pl-prevzame { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
/* `.iz-meta` je `display:flex; gap:10px`, zato se vsak vgrajen element (povezava) postavi kot SVOJ
   clen mreze in pika za njim odleti v svojo vrstico z 10 px reze. Izmerjeno v brskalniku brez glave
   in vidno na posnetkih tega kroga. Dve vrstici telesa, ki imata za vgrajenim elementom se besedilo,
   zato teceta kot navadno besedilo. Najdeno v adversarnem pregledu tega kroga (O2). */
.pl-izmena-telo .pl-besedilo { display: block; }
.pl-izmena-telo .pl-prevzame-ime { font-size: 15px; font-weight: 800; color: var(--txt); overflow-wrap: anywhere; }
.pl-izmena-telo .pl-prevzame-pod { font-size: 11.5px; font-weight: 600; color: var(--txt-3); }
.pl-izmena-telo .pl-naloga-prenos { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: var(--txt-3); }
.pl-izmena-telo .pl-povezava { color: var(--txt); font-weight: 700; text-decoration: underline; }
.pl-izmena-telo .pl-povezava:hover { color: var(--txt-2); }
/* Znacka postavke, ki NE blokira predaje, a je vseeno nujna (pretecen rok prevzema): napis ostane
   »odprto«, barva pa je danger iz zamrznjene status palete — isti par kot `.pl-znacka--blokira`,
   drugo besedilo. */
.pl-izmena-telo .pl-znacka--nujno { background: var(--st-danger-bg); color: var(--st-danger-txt); }
/* ONEMOGOCEN GUMB MORA BITI VIDEN KOT ONEMOGOCEN. `.iz-btn` svojega sloga za `:disabled` NIMA, zato je
   »Zakljuci predajo« ob blokadi izgledal ENAKO kot dejaven — clovek ga pritisne in ne zgodi se nic.
   Isti par vrednosti kot pri stirih ze obstojecih gumbih plosce (`opacity` in `cursor`); zamejeno na
   telo izmene, da se drugi zasloni ne premaknejo. Najdeno ob OGLEDU posnetka, ne z mero.
   IZBIRNIK JE PO ATRIBUTU IN NE PO RAZREDU `.iz-btn`: dve obstojeci trditvi (`VH6`, `GY9`) stejeta
   pravila `.iz-*` in pribijata njihov zapis — pravilo s tem razredom bi ju podrlo, ceprav se nobeno
   OBSTOJECE pravilo ni premaknilo. Po atributu poleg tega velja za VSAK onemogocen gumb telesa. */
.pl-izmena-telo button[disabled] { opacity: .45; cursor: not-allowed; }
/* VRSTICA IZBIRE RAZLOGA (predcasna predaja): gumbek in napis stojita SKUPAJ na levi. `.pl-meni-vrstica`
   je vrstica menija (napis levo, casovni gumbi desno) in je za izbiro napacna — napis odrine na desni
   rob, kar je videti kot okvara. Najdeno ob OGLEDU posnetka. */
.pl-izmena-telo .pl-izbira { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 0; margin: 0; min-height: 44px; cursor: pointer; }
.pl-izmena-telo .pl-izbira + .pl-izbira { border-top: 1px solid var(--hairline); }
.pl-izmena-telo .pl-izbira input { width: 20px; height: 20px; flex: 0 0 auto; }
.pl-izmena-telo .pl-izbira span { font-size: 14px; font-weight: 600; color: var(--txt); }
.pl-izmena-telo .pl-nalog-gumb { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--tab-bd); border-radius: 10px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--txt); background: var(--surface); text-decoration: none; }
.pl-izmena-telo .pl-gumb-obrazec { flex: 1 1 auto; min-width: 0; display: flex; margin: 0; }
.pl-izmena-telo .pl-gumb-velik {
  position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-tx);
  text-decoration: none; cursor: pointer; padding: 6px 10px; box-sizing: border-box;
}
.pl-izmena-telo .pl-gumb-velik--konec { background: var(--st-success-txt); }
/* Onemogocen velik gumb nosi BESEDILO in mora biti citljiv: `--txt-3` da na `--surface-2` razmerje
   2,15 (meja zbirke je 4,05) — izmerjeno, ne ocenjeno. `--txt-2` da 4,10 v svetli in 5,08 v temni.
   SELEKTOR JE BREZ OVOJA TELESA NAMENOMA: merilec razmerja vodi clanstvo po OSNOVI izbirnika, zato bi
   `.pl-izmena-telo .pl-gumb-velik--brez` potegnil vase vsa pravila telesa (ista past kot pri `.pl-nv-int`
   v krogu PI-1). Razred je edinstven in ovoja ne potrebuje. */
.pl-gumb-velik--brez { background: var(--surface-2); color: var(--txt-2); cursor: default; }
.pl-izmena-telo .pl-gumb-mali {
  position: relative; overflow: hidden; flex: 0 0 92px; width: 92px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--rob); border-radius: 14px; background: var(--surface); color: var(--txt);
  text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.pl-izmena-telo .pl-gumb-napis { font-size: clamp(14px, 4.36vw, 17px); font-weight: 800; letter-spacing: .01em; line-height: 1.1; text-align: center; }
.pl-izmena-telo .pl-gumb-mali .pl-gumb-napis { font-size: 15px; font-variant-numeric: tabular-nums; }
/* KROG PLOSCA-DOMA (1/3): kompaktna kartica prevzema na prosti plosci (okno) — gumba PREVZEMI in POPRAVI sta visoka 54 px. */
.pl-izmena-telo.pl-pk--kompaktna .pl-gumb-velik, .pl-izmena-telo.pl-pk--kompaktna .pl-gumb-mali { min-height: 54px; }
.pl-izmena-telo .pl-gumb-pod { font-size: 10.5px; font-weight: 600; opacity: .85; text-align: center; line-height: 1.2; }
/* ZAMUDA: mali gumb je v barvi opozorila in utripa — ura tece naprej in stanje se NE preklopi samo. */
.pl-izmena-telo .pl-gumb-mali--zamuda { border-color: var(--st-danger-txt); color: var(--st-danger-txt); animation: pl-utrip 1s steps(1, end) infinite; }
@keyframes pl-utrip { 50% { opacity: .45; } }
/* POLNJENJE MED DOLGIM PRITISKOM: sloj se siri od leve; sirino postavi skript. */
.pl-izmena-telo .pl-polnilo { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: currentColor; opacity: .22; pointer-events: none; }

/* PAS »RAZVELJAVI« (I4): nad gumboma, znotraj kartice, ne plavajoc. */
.pl-izmena-telo .pl-razveljavi {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; margin: 0 0 8px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--rob); border-radius: 12px; background: var(--surface-2);
}
.pl-izmena-telo .pl-razveljavi-txt { font-size: 12px; font-weight: 600; color: var(--txt-2); min-width: 0; overflow-wrap: anywhere; }
.pl-izmena-telo .pl-razveljavi-gumb { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--rob); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: 12px; font-weight: 700; cursor: pointer; }

/* MENI ⋯ IN LIST PAVZE: vrstica = ime levo, casovni gumbi desno. */
.pl-izmena-telo .pl-meni-vrstica { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; margin: 0; }
.pl-izmena-telo .pl-meni-vrstica + .pl-meni-vrstica { border-top: 1px solid var(--hairline); }
.pl-izmena-telo .pl-meni-ime { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--txt); }
/* CASOVNI GUMBI STOJIJO V ENI VRSTICI in so ENAKO SIROKI: brez `flex: 0 0` je privzeti gumb (poln)
   raztegnil vrstico in ostala dva sta padla predenj — izmerjeno na posnetku pri 390 px, zbirka tega
   ne vidi (meri obrazce in dejanja, ne postavitve). `flex-wrap` je odsel z istim razlogom. */
.pl-izmena-telo .pl-meni-casi { display: flex; gap: 6px; flex: 0 0 auto; }
.pl-izmena-telo .pl-meni-casi .pl-gumb { flex: 0 0 auto; width: 62px; min-width: 0; margin-top: 0; padding: 8px 4px; font-size: 13px; min-height: 40px; }
/* `.pl-gumb--poln` je polna sirina (gumb cez cel list), zato mora v vrstici casov ostati SVOJE sirine —
   sicer potisne sosede cez rob in tretji cas se ne vidi (izmerjeno na posnetku pri 390 px). Poudarek
   privzetega casa je BARVA, ne velikost. */
.pl-izmena-telo .pl-meni-ime { min-width: 0; overflow-wrap: anywhere; }
/* KROG P1-5 (A6): CASOVNI GUMBI SE NE LOMIJO — EN slog za vrstice casov (`.pl-meni-casi`: pavza, Podaljsaj) in izbire »Ostanem do«.
   Gumb je vsaj 62 px in raste z besedilom (»+30 min« pri 390 px se je lomil v dve vrsti); kadar vrstica ni dovolj siroka, gredo
   casi v NOVO vrsto pod ime (prelom vrstice, ne besedila). */
.pl-izmena-telo .pl-meni-vrstica { flex-wrap: wrap; }
.pl-izmena-telo .pl-meni-casi { margin-left: auto; }
.pl-izmena-telo .pl-meni-casi .pl-gumb { width: auto; min-width: 62px; padding: 8px 6px; }
.pl-izmena-telo .pl-meni-casi .pl-gumb, .pl-izmena-telo .pl-pk-izbira span { white-space: nowrap; }
.pl-izmena-telo .pl-rezervne { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rob); }
.pl-izmena-telo .pl-rezervne-naslov { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 6px; }

/* ═══ KROG PWA-1: GLADEK PREHOD, PASICA »NOVA RAZLICICA«, STRAN BREZ POVEZAVE ═══════════════════════
   Prehod med stranmi istega izvora (brskalnik, ki pravila ne pozna, ga preskoci). Pasica je nevtralna
   (barva je samo za stanje), dotik 44 px; nad glavo strani, kadar ta obstaja, sicer na vrhu. Stran brez
   povezave je staticna (offline.html) in uporablja SAMO zetone. */
@view-transition { navigation: auto; }
/* PWA-1b: kdor ima v sistemu vklopljeno zmanjsano gibanje, prehoda med stranmi ne dobi. Ostale animacije
   (utripanje, obroc) nosijo pomen in se tu NE izklopijo. */
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.nmp-pwa-pasica { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 1100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-1) max(16px, env(safe-area-inset-right)) var(--sp-1) max(16px, env(safe-area-inset-left));
  background: var(--surface); color: var(--txt); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  font-size: 14px; font-weight: 600; box-sizing: border-box; }
.nmp-pwa-pasica--pod-glavo { top: calc(52px + env(safe-area-inset-top, 0px)); }
.nmp-pwa-pasica-txt { min-width: 0; }
.nmp-pwa-pasica-gumb { min-height: 44px; flex: 0 0 auto; }
.nmp-brez-povezave { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.nmp-brez-povezave-okno { width: 100%; max-width: 420px; padding: var(--sp-5); border-radius: 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); }
.orga-znak.nmp-brez-povezave-logo { width: min(200px, 60vw); margin: 0 auto var(--sp-4); }
.nmp-brez-povezave-naslov { font-size: 18px; font-weight: 700; color: var(--txt); margin-bottom: var(--sp-2); }
.nmp-brez-povezave-txt { font-size: 15px; line-height: 1.5; color: var(--txt-2); margin-bottom: var(--sp-5); }
.nmp-brez-povezave-gumb { min-height: 44px; width: 100%; text-decoration: none; }

/* ═══ KROG PWA-1b: ZNAK ORG-A (namesto znaka »NMP Slovenija«) ══════════════════════════════════════
   Znak je SIROK (1200 x 378, ~3,17 : 1), zato se omeji po SIRINI, visina sledi razmerju slike (brez popacenja).
   Razlicico izbere TEMA strani (data-theme na korenu): temen znak na svetlem ozadju, bel na temnem.
   Slogovno ozadje namesto dveh slik: brskalnik prenese samo razlicico, ki jo tema res pokaze.
   Grb ENOTE (nmp_logo_url / logo.php) je nekaj drugega in tega sloga ne uporablja. */
.orga-znak { display: block; width: min(240px, 68vw); aspect-ratio: 1200 / 378; margin: 0 auto;
  background: url("/assets/img/orga_temna.png") center / contain no-repeat; }
[data-theme="dark"] .orga-znak { background-image: url("/assets/img/orga_bela.png"); }

/* ═══ KROG VSTOP-2: VSTOPNE STRANI (prijava, izbira enote, ponastavitev gesla) — NOVA PODOBA ═══════
   Odlocitve lastnika 3. 10. 2026 (potrjena maketa): stran je TEMNA v obeh temah (podlaga #09090B, ozadje je del
   znamke), tema vpliva samo na kartico. Namizje (>= 900 px): slika cez cel zaslon, kartica plava desno. Telefon in
   tablica (< 900 px): slika samo kot glava (360 px) za znakom, nato cista podlaga. Barvne konstante tega bloka
   veljajo SAMO za vstopne strani (ozadje znamke, ne tema portala).
   SLIKI VSAKE VELIKOSTI STOJITA SAMO V SVOJI MEDIJSKI POIZVEDBI: telefon ne prenese namizne slike in obratno (meri VS3).
   Zato je mobilna glava izjemoma v poizvedbi `max-width` — v osnovnem pravilu bi jo prenesel tudi namizni brskalnik.
   Znak je na vstopnih straneh VEDNO bel (stran je temna); osnovni `.orga-znak` drugod se naprej sledi temi. */
.vstop-telo, html:has(> body.vstop-telo) { background: #09090B; }   /* tudi koren: brez svetlega pasu ob odboju (iOS) */
.vstop { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: #09090B; color: #E4E4E7; overflow-x: hidden; }
.vstop-mreza { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 16px 24px; }
.vstop-levo { display: flex; flex-direction: column; align-items: center; }
.orga-znak.orga-znak--prijava, [data-theme] .orga-znak.orga-znak--prijava { width: 180px; margin: 0 auto 48px;   /* IME-1: 32 -> 48 px (telefon) */
  background-image: url("/assets/img/orga_bela.png"); }
.vstop-uvod { display: none; }
.vstop-desno { width: 100%; display: flex; justify-content: center; }
.vstop-kartica { width: 100%; max-width: 300px; padding: 30px 22px 26px; border-radius: 16px; color: var(--txt);
  background: #FFFFFF; border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 24px 64px rgba(0,0,0,.55); }
/* Temna kartica je BREZ sence (hisno pravilo »temna tema nima sence«, meri KZ4) — maketa je predvidela senco;
   odstop je imenovan v porocilu VSTOP-2, odlocitev o izjemi je lastnikova. */
[data-theme="dark"] .vstop-kartica { background: #16161A; border-color: rgba(255,255,255,.10); box-shadow: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-theme="dark"] .vstop-kartica { background: rgba(22,22,26,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.vstop-k-naslov { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--txt); text-align: center; margin: 0 0 24px; }
.vstop-besedilo { font-size: 14px; line-height: 1.5; color: var(--txt-2); margin: -12px 0 20px; }
.vstop-k-naslov--sredina, .vstop-besedilo--sredina { text-align: center; }
.vstop-oznaka { display: block; font-size: 12px; font-weight: 600; color: var(--txt-2); margin: 0 0 6px; }
.vstop-polje { display: block; width: 100%; height: 44px; padding: 0 14px; margin: 0 0 18px; border: 1px solid var(--inp-bd);
  border-radius: 12px; font-size: 16px; font-family: inherit; background: var(--inp-bg); color: var(--inp-tx); }
.vstop-polje:focus { outline: none; border-color: var(--accent); }
.vstop-polje:focus-visible, .vstop-gumb:focus-visible, .vstop-povezava:focus-visible, .vstop-enota:focus-visible,
.vstop-oko:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vstop-kartica .cf-turnstile-wrap { margin: 0 0 4px; }
/* »Ostani prijavljen«: sam v vrsti, stikalo in napis v ISTI vrstici, SREDINSKO (dodatek lastnika 3. 10. 2026).
   Napis dobi barvo kartice (stari `.login-trust span` je #888 / #666 — premalo kontrasta na novi kartici). */
.vstop-kartica .login-trust { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 0 6px; }
.vstop-kartica .login-trust .ui-toggle-lbl { font-size: 13px; color: var(--txt); line-height: 1.35; }
.vstop-gumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 6px 0 0;
  border: none; border-radius: 12px; background: var(--accent); color: var(--accent-tx); font-size: 16px; font-weight: 600;
  font-family: inherit; text-decoration: none; cursor: pointer; transition: opacity .15s; }
.vstop-gumb:hover { opacity: .88; }
.vstop-povezava { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 8px 0 -8px;
  font-size: 13px; color: var(--txt-2); text-decoration: none; }
.vstop-povezava:hover { color: var(--txt); text-decoration: underline; }
.vstop-kartica .login-err { margin: 0 0 16px; }
/* Izbira enote (navaden uporabnik) */
.vstop-enote { display: flex; flex-direction: column; gap: 10px; }
.vstop-enota { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--inp-bd); border-radius: 12px;
  background: var(--inp-bg); color: var(--inp-tx); font-size: 15px; font-weight: 500; font-family: inherit; text-align: left;
  cursor: pointer; transition: border-color .15s; }
.vstop-enota:hover { border-color: var(--accent); }
/* Ponastavitev gesla: kar je samo njeno (sporocilo, oko, moc gesla, ikona koncano) — prej v lastnem slogu strani */
.vstop-sporocilo { padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; margin: 0 0 16px;
  background: var(--st-danger-bg); color: var(--st-danger-txt); }
.vstop-sporocilo--ok { background: var(--st-success-bg); color: var(--st-success-txt); }
.vstop-geslo-ovoj { position: relative; }
.vstop-geslo-ovoj .vstop-polje { padding-right: 48px; }
.vstop-oko { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; background: none; border: none; border-radius: 12px; cursor: pointer; color: var(--txt-2); padding: 0; }
.vstop-oko svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.vstop-moc { height: 3px; border-radius: 2px; margin: -12px 0 18px; background: var(--hairline); overflow: hidden; }
.vstop-moc-pas { height: 100%; width: 0; border-radius: 2px; transition: width .3s, background .3s; }
.vstop-pripis { font-weight: 400; color: var(--txt-2); }
.vstop-koncano-ikona { width: 48px; height: 48px; border-radius: 50%; background: var(--st-success-bg); display: flex;
  align-items: center; justify-content: center; margin: 0 auto 16px; }
.vstop-koncano-ikona svg { width: 24px; height: 24px; stroke: var(--st-success-txt); fill: none; stroke-width: 2.5; }
/* Gumb teme: 44 x 44 desno zgoraj; v svetli temi luna, v temni sonce (izbira v slogu, brez novega JS). */
.vstop-tema { position: absolute; z-index: 3; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: 44px;
  height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #E4E4E7; font-size: 20px; cursor: pointer; }
.vstop-tema:focus-visible { outline: 2px solid #E4E4E7; outline-offset: 2px; }
.vstop-tema .ti-sun, [data-theme="dark"] .vstop-tema .ti-moon { display: none; }
[data-theme="dark"] .vstop-tema .ti-sun { display: inline-block; }
/* Noga (KROG NOGA-CR8IV, lastnik 20. 10. 2026): telefon TRI vrstice (ime / Razvoj: CR8IV.ONE - leto / Kontakt),
   namizje DVE (ime / Razvoj: CR8IV.ONE - leto · Kontakt). Kontakt ima barvo, prosojnost in debelino imena izvajalca. */
.vstop-noga { position: relative; z-index: 1; text-align: center; font-size: 12px; line-height: 1.7; color: #A1A1AA;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.vstop-noga-ime, .vstop-noga-vrsta { display: block; }
.vstop-noga-izv { opacity: .55; }
.vstop-noga-izv .vstop-noga-razvoj { color: inherit; text-decoration: none; font-weight: 600; letter-spacing: .04em; }
.vstop-noga-kontakt { color: #A1A1AA; opacity: .55; font-weight: 600; letter-spacing: .04em; font-size: 11px;
  text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 899.98px) {
  .vstop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 360px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(9,9,11,.25) 0%, rgba(9,9,11,.35) 55%, #09090B 100%),
      url("/assets/img/orga_ozadje_mobil.webp") 60% 0 / cover no-repeat; }
  /* KROG NOGA-CR8IV: znak +16 px nizje, kartica skupaj +32 px (razmik znak -> kartica 64 px); noga v treh vrsticah. */
  .vstop-kartica { margin-top: 16px; }
  .orga-znak.orga-znak--prijava, [data-theme] .orga-znak.orga-znak--prijava { margin-top: 16px; }
  .vstop-noga-izv, .vstop-noga-kontakt { display: block; width: max-content; margin: 0 auto; }
}
/* Nizki zaslon telefona: znak +0, kartica +8 px (razmik 56 px) — sicer bi 360 x 780 dobil drsenje. */
@media (max-width: 899.98px) and (max-height: 800px) {
  .vstop-kartica { margin-top: 8px; }
  .orga-znak.orga-znak--prijava, [data-theme] .orga-znak.orga-znak--prijava { margin-top: 0; }
}
@media (max-width: 359.98px) {
  .vstop-kartica { padding: 26px 18px 22px; }
}
@media (min-width: 900px) {
  .vstop { background: #09090B url("/assets/img/orga_ozadje.webp") 30% 50% / cover no-repeat; }
  .vstop::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(9,9,11,.92) 0%, rgba(9,9,11,.55) 30%, rgba(9,9,11,0) 50%),
      radial-gradient(520px 520px at 72% 50%, rgba(9,9,11,.62), rgba(9,9,11,0) 70%),
      linear-gradient(0deg, rgba(9,9,11,.85) 0, rgba(9,9,11,0) 120px); }
  .vstop-mreza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 44%); align-items: stretch; padding: 0; }
  .vstop-levo { align-items: flex-start; padding: 48px 56px 88px; }
  .orga-znak.orga-znak--prijava, [data-theme] .orga-znak.orga-znak--prijava { width: 260px; margin: 0; }
  .vstop-uvod { display: block; margin: auto 0; max-width: 540px; }
  .vstop-crta { display: block; width: 48px; height: 4px; border-radius: 2px; background: #E5322F;
    box-shadow: 0 0 14px rgba(229,50,47,.55); margin: 0 0 22px; }
  .vstop-naslov { font-size: 30px; font-weight: 700; line-height: 1.25; color: #FAFAFA; margin: 0 0 12px; }
  .vstop-pod { font-size: 16px; line-height: 1.5; color: #A1A1AA; margin: 0; }
  .vstop-desno { padding: 96px 56px 88px 24px; align-items: center; }
  .vstop-kartica { max-width: 330px; padding: 38px 32px 32px; border-radius: 18px; }
  .vstop-k-naslov { font-size: 24px; text-align: left; margin-bottom: 26px; }
  .vstop-k-naslov--sredina { text-align: center; }
  .vstop-polje { height: 46px; }
  .vstop-oko { height: 46px; }
  .vstop-tema { top: 24px; right: 24px; }
  /* KROG NOGA-CR8IV: dve vrstici (ime / Razvoj · Kontakt); zgornji rob noge ne visje kot prej (bottom 9 px, line-height 1.45). */
  .vstop-noga { position: absolute; left: 0; right: 0; bottom: 9px; padding: 0 24px; display: block; line-height: 1.45;
    white-space: nowrap; }
  .vstop-noga-vrsta, .vstop-noga-ime { display: block; }
  /* locilo pred Kontaktom: na povezavi, a kot inline-block (podcrtaj ga ne zajame) */
  .vstop-noga-kontakt::before { content: "\00a0·\00a0"; display: inline-block; color: #A1A1AA; text-decoration: none; }
}

/* ═══ KROG P1-5 (TEREN-1 C4): ZNAK »BREZ POVEZAVE« V ZVONCU (POVOZI trak PWA-1b) ═══════════════════════════════
   Znak je VLOZEN v zvonec (absolutno) — glava in zavihki se ne premaknejo. Zvoncev znak in znacka neprebranih sta med tem
   nevidna (ostaneta v toku), ikona utripa (brez gibanja ob `prefers-reduced-motion`), napis z uro izrisa stoji pod njo. */
.th-brez { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nmp-znak-brez-povezave .th-bell > .ti-bell, .nmp-znak-brez-povezave .th-bell > .th-bell-badge { visibility: hidden; }
.th-brez-ikona { color: var(--st-warn-txt); animation: nmp-bell-pulse 1.2s ease-in-out infinite; }
.th-brez-napis { position: absolute; top: calc(100% - 6px); right: 0; padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  font-size: 10px; font-weight: 700; line-height: 1.4; color: var(--st-warn-txt); background: var(--st-warn-bg); }
/* Med znakom utripa SAMO ikona (zvonec z neprebranimi ne utripa zraven); ob zmanjsanem gibanju nic. */
.nmp-znak-brez-povezave .th-bell.pulse { animation: none; }
@media (prefers-reduced-motion: reduce) { .th-brez-ikona { animation: none; } }

/* ═══ KROG POPIS-1: OBRAZEC — VREDNOST PREJSNJE IZMENE (samo prikaz, polje ostane prazno) ═══════════ */
.ob-prejsnja { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--txt-2); }

/* ═══ KROG OBVESTILA-1: PLAVAJOCE OBVESTILO PO DEJANJU (skupni mehanizem, nmp_header_js.php) ═══════════
   Pritrjeno pod glavo, na sredini, najvec 480 px; vsebine NE premakne (je izven toka). Uspeh izgine sam,
   napaka ima gumb za zaprtje 44x44. Brez JS se nic od tega ne uporabi (sporocilo ostane v toku). */
.nmp-obv-plast { position: fixed; z-index: 150; left: 0; right: 0;
  top: calc(var(--topbar-h, 52px) + 8px + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.nmp-obv { pointer-events: auto; width: 100%; max-width: 480px; display: flex; align-items: flex-start;
  background: var(--surface); color: var(--txt); border: 1px solid var(--hairline); border-left-width: 4px;
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); overflow: hidden;
  animation: nmp-obv-prihod .18s ease-out; transition: opacity .2s ease, transform .2s ease; }
.nmp-obv--uspeh { border-left-color: var(--st-success-txt); cursor: pointer; }
.nmp-obv--napaka { border-left-color: var(--st-danger-txt); }
.nmp-obv--odhod { opacity: 0; transform: translateY(-6px); }
.nmp-obv .nmp-obv-besedilo { flex: 1; min-width: 0; margin: 0; padding: 12px 14px; border: 0; border-radius: 0;
  font-size: 14px; line-height: 1.4; box-shadow: none; }
.nmp-obv-zapri { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--txt-2); font-size: 18px; cursor: pointer; }
.nmp-obv-zapri:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
[data-theme="dark"] .nmp-obv { box-shadow: none; border-color: var(--card-border); }
[data-theme="dark"] .nmp-obv--uspeh { border-left-color: var(--st-success-txt); }
[data-theme="dark"] .nmp-obv--napaka { border-left-color: var(--st-danger-txt); }
@keyframes nmp-obv-prihod { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* KROG POPRAVKI-TEL-2 (A): OBVESTILO SPODAJ (uspeh shranjevanja iz spodnjega lista na plosci) — nad spodnjim menijem, kjer je bil
   list; pilula v barvi poudarka (crna na svetli, bela na temni). Privzeta plast pod glavo ostane za vse drugo. */
.nmp-obv-plast--spodaj { top: auto; bottom: calc(64px + 20px + env(safe-area-inset-bottom, 0px)); }
.nmp-obv--spodaj, [data-theme="dark"] .nmp-obv--spodaj { width: auto; max-width: 100%; background: var(--accent); color: var(--accent-tx);
  border: 0; border-radius: 999px; }
.nmp-obv--spodaj .nmp-obv-besedilo { flex: 0 1 auto; padding: 12px 22px; background: transparent; color: inherit; font-size: 15px; font-weight: 700; }
.nmp-obv--spodaj.nmp-obv--odhod { transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .nmp-obv { animation: none; transition: none; } }

/* ═══ KROG P1-3+4 (DEL A.2): KARTICA PREVZEMA PO MODELU B (`plosca/_prevzem_kartica.php`) ═══════════════
   Ovoj kartice je `.pl-izmena-telo .pl-pk`, zato gumba (PREVZEMI drzi + POPRAVI) podedujeta ISTI slog in iste geste kot
   Moj status (maketa A1522 `p_okno`). Znacka stanja ekipe je par iz zamrznjene status palete. Izbire (ekipa, vloga,
   razlog, vozilo) so radijski gumbi v obliki cipa; izbran cip je poln (akcent). Gumb obrazca z nepopolno izbiro je zbledel
   (prosojnost, ne nova barva polnila — mnozica polnil KZ10 ostane ista) — slog nad `:invalid`, brez skripta (brskalnik obrazca z manjkajoco obvezno izbiro ne odda). */
.pl-izmena-telo .pl-pk-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pl-izmena-telo .pl-pk-naslov { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--txt); overflow-wrap: anywhere; }
/* KROG P1-5 (A7): znacka kartice prevzema = stanje vozila (A1); barve so pari zamrznjene status palete, ISTI kot pri stanjih posadke
   (PROST success, TEREN danger, MALICA in predaja warn, ODMOR info, ZASEDEN free). */
.pl-izmena-telo .pl-pk-znacka--v_bazi { border-color: transparent; background: var(--st-success-bg); color: var(--st-success-txt); }
.pl-izmena-telo .pl-pk-znacka--na_intervenciji { border-color: transparent; background: var(--st-danger-bg); color: var(--st-danger-txt); }
.pl-izmena-telo .pl-pk-znacka--izven, .pl-izmena-telo .pl-pk-znacka--predaja, .pl-izmena-telo .pl-pk-znacka--malica { border-color: transparent; background: var(--st-warn-bg); color: var(--st-warn-txt); }
.pl-izmena-telo .pl-pk-znacka--odmor { border-color: transparent; background: var(--st-info-bg); color: var(--st-info-txt); }
.pl-izmena-telo .pl-pk-znacka--zaseden { border-color: transparent; background: var(--st-free-bg); color: var(--st-free-txt); }
.pl-izmena-telo .pl-pk-vrstice { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-izmena-telo .pl-pk-vrstica { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.pl-izmena-telo .pl-pk-vrstica dt { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.pl-izmena-telo .pl-pk-vrstica dd { margin: 0; font-size: 13px; line-height: 1.35; color: var(--txt); overflow-wrap: anywhere; }
.pl-izmena-telo .pl-pk-vrstica dd span { font-size: 11px; color: var(--txt-2); }
.pl-izmena-telo .pl-pk-caka { margin: 0; font-size: 12px; font-weight: 700; color: var(--st-warn-txt); }
.pl-izmena-telo .pl-pk-pripis { margin: 0; font-size: 12px; line-height: 1.4; color: var(--txt-2); }
.pl-izmena-telo .pl-pk-opozorilo { margin: 0; font-size: 12px; font-weight: 700; color: var(--st-danger-txt); }
.pl-izmena-telo .pl-pk-obrazec { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pl-izmena-telo .pl-pk-h { margin: 4px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.pl-izmena-telo .pl-pk-izbire { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
/* KROG POPRAVKI-TEL-1: SAMO vrstica razlogov — en stolpec cez celo sirino (napis v eni vrstici, tarca dotika ostane 44 px). */
.pl-izmena-telo .pl-pk-izbire--razlog { grid-template-columns: minmax(0, 1fr); }
.pl-izmena-telo .pl-pk-izbira { position: relative; display: flex; margin: 0; cursor: pointer; }
.pl-izmena-telo .pl-pk-izbira input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pl-izmena-telo .pl-pk-izbira span {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px;
  box-sizing: border-box; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface);
  font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--tab-tx);
}
.pl-izmena-telo .pl-pk-izbira input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-tx); }
/* KROG P1-3+4 (popravek po preizkusu): obroc FOKUSA ni videti kot izbira — crtkan in odmaknjen, brez polnila; izbrana je SAMO polna. */
.pl-izmena-telo .pl-pk-izbira input:focus-visible + span { outline: 2px dashed var(--accent); outline-offset: 3px; }
/* Okno lista prejme fokus ob odprtju (`tabindex="-1"`) — brez obroca, ker ni kontrolnik. */
[data-pl-list-el] > .ui-modal:focus { outline: none; }
.pl-izmena-telo .pl-pk-obrazec:invalid .pl-gumb-velik { opacity: .45; }
.pl-izmena-telo .pl-pk-shrani { width: 100%; margin-top: 6px; }
.pl-izmena-telo .pl-clan-oznaka { font-size: 9px; font-weight: 800; letter-spacing: .05em; color: var(--txt-3); }
.pl-izmena-telo .pl-clan-oznaka--nov { color: var(--st-success-txt); }
.pl-izmena-telo .pl-prevzame--gumb { gap: 6px; margin: 0; }
.pl-izmena-telo .pl-prevzame--gumb .pl-gumb-velik { min-height: 56px; }
.pl-izmena-telo .pl-prevzame--gumb .pl-gumb-napis { font-size: 15px; }
/* ═══ KROG P1-3+4 (DEL B.1): PREDAJA PO MODELU B ═══════════════════════════════════════════════════════════════════
   Mali gumb PREDAJAM (zadnje minute izmene) je poln (akcent) kot veliki gumb — z drzanjem odda predajo (maketa `i_okno`);
   ODHAJAM / OSTANEM je obrisan kot ostali mali gumbi. Obrazec malega gumba ima mere malega gumba. Znacka »Predaja v teku« /
   »Čaka zamenjavo« in vrstica pod Moj status sta par/tekst opozorila iz zamrznjene status palete (makete `i_pred`, `i_mes`). */
.pl-izmena-telo .pl-gumb-obrazec--mali { flex: 0 0 92px; width: 92px; }
.pl-izmena-telo .pl-gumb-obrazec--mali .pl-gumb-mali { width: 100%; }
.pl-izmena-telo .pl-gumb-mali--predajam { border-color: var(--accent); background: var(--accent); color: var(--accent-tx); }
.pl-izmena-telo .pl-gumb-mali--predajam .pl-gumb-napis { font-size: 13px; }
.pl-izmena-telo .pl-gumb-mali--odhod .pl-gumb-napis { font-size: 13px; }
.pl-izmena-telo .pl-znacka--predaja, .vv .pl-znacka--predaja { border-color: transparent; background: var(--st-warn-bg); color: var(--st-warn-txt); }
.pl-izmena-telo .pl-predaja-vrstica { margin: 0; font-size: 12px; font-weight: 700; color: var(--st-warn-txt); }
.pl-izmena-telo .pl-clan-oznaka--ostane { color: var(--txt-2); }
.pl-izmena-telo .pl-predaja-razdelek { display: flex; flex-direction: column; gap: 8px; }
.pl-izmena-telo .pl-predaja-razdelek .pl-gumb { justify-content: flex-start; }
/* Junak med predajo: znacka »Predaja v teku« je siroka — pri 320 px se ime vozila NE lomi po crkah, znacka gre v novo vrsto (ziva sonda B.1). */
.pl-izmena-telo .pl-hero-glava:has(.pl-znacka--predaja) { flex-wrap: wrap; }
.pl-izmena-telo .pl-hero-glava:has(.pl-znacka--predaja) .pl-hero-naslov { overflow-wrap: normal; }
/* KROG P1-3+4 (drugi popravek po telefonu): NAMIG V GUMBU — prekrivni sloj, postavitev se ne premakne. Izvirni podnapis (ali vsebina
   gumba brez podnapisa) postane PROSOJEN (ostane v imenu gumba), sloj je `aria-hidden`; bralnik prebere vljudno regijo. */
[data-pl-drzi] { position: relative; }
.pl-namig-pod .pl-gumb-pod:not(.pl-namig-sloj) { opacity: 0; }
.pl-namig-cel > :not(.pl-namig-sloj) { opacity: 0; }
/* Gumb z GOLIM besedilom (brez otrok) — besedilo postane prosojno (ostane v imenu gumba); sloj ima svojo barvo. */
.pl-namig-cel { color: transparent !important; }
.pl-namig-sloj { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; pointer-events: none; font-size: 10.5px; font-weight: 600; line-height: 1.2; }
.pl-namig-zivo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* KROG P2-1+2 (A): ROCNI POPRAVEK NAPRAVE. Ploscica, ki se sme popraviti, je sidro (dolg pritisk odpre list); vrstica »ročno«
   pod pilulo je drobna in siva. Polnilo drzanja velja tudi na ploscicah (doslej samo pod telesom izmene). */
.pl-pp-ploscica { text-decoration: none; cursor: pointer; overflow: hidden;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.pl-pp-ploscica .pl-polnilo { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: currentColor; opacity: .12; pointer-events: none; }
/* KROG POPRAVKI-TEL-2 (B1): ODZIV OB ODDAJI — gumb med oddajo (»SHRANJUJEM …« z vrtavko) in ziva regija za bralnik zaslona. */
.pl-gumb--oddaja, .pl-gumb--oddaja:disabled { opacity: .55; pointer-events: none; }
.pl-oddaja-vrtavka { display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pl-oddaja-vrti .8s linear infinite; }
@keyframes pl-oddaja-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-oddaja-vrtavka { animation: none; } }
.pl-oddaja-ziva { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pl-pp-rocno { display: block; max-width: 100%; font-size: 10px; line-height: 1.3; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pp-rocno strong { font-weight: 700; color: var(--txt); }
.pl-pp-listi .pl-pp-odklep { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--txt-2); }
.pl-pp-listi .pl-pp-odklep .ti { font-size: 16px; color: var(--txt-2); }
.pl-pp-listi .pl-pp-obrazec { display: flex; flex-direction: column; gap: 10px; }
.pl-pp-listi .pl-pp-naprava { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.pl-pp-listi .pl-pp-naprava:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pl-pp-listi .pl-pp-vrh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pl-pp-listi .pl-pp-ime { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--txt); }
.pl-pp-listi .pl-pp-vred { display: inline-flex; align-items: baseline; gap: 4px; }
.pl-pp-listi .pl-pp-stevilo { width: 3.4em; min-height: 44px; padding: 0 2px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--tab-bd); border-radius: 0;
  background: transparent; color: var(--txt); font-size: 32px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pl-pp-listi .pl-pp-stevilo::-webkit-outer-spin-button, .pl-pp-listi .pl-pp-stevilo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-pp-listi .pl-pp-enota { font-size: 15px; font-weight: 700; color: var(--txt-2); }
.pl-pp-listi .pl-pp-drsnik { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.pl-pp-listi .pl-pp-lestvica { display: flex; justify-content: space-between; margin-top: -8px; font-size: 10px; color: var(--txt-3); }
.pl-pp-listi .pl-pp-izbire, .pl-pp-listi .pl-pp-odgovori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-js .pl-pp-listi .pl-pp-korak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-pp-listi .pl-pp-gumb { min-height: 44px; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: 16px; font-weight: 700; cursor: pointer; }
.pl-pp-listi .pl-pp-izbira { position: relative; display: block; }
.pl-pp-listi .pl-pp-izbira input, .pl-pp-listi .pl-pp-cip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pl-pp-listi .pl-pp-izbira span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: 15px; font-weight: 700; }
.pl-pp-listi .pl-pp-izbira input:checked + span, .pl-pp-listi .pl-pp-cip input:checked + span { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); }
.pl-pp-listi .pl-pp-izbira input:focus-visible + span, .pl-pp-listi .pl-pp-cip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-pp-listi .pl-pp-cipi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pl-pp-listi .pl-pp-cip { position: relative; display: block; }
.pl-pp-listi .pl-pp-cip span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 2px; box-sizing: border-box;
  border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: 12px; font-weight: 800; white-space: nowrap; }
.pl-pp-listi .pl-pp-prej, .pl-pp-listi .pl-pp-pravilo, .pl-pp-listi .pl-pp-opomba, .pl-pp-listi .pl-pp-pod { margin: 0; font-size: 12px; line-height: 1.4; color: var(--txt-2); }
.pl-pp-listi .pl-pp-zgodovina { margin: 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.5; color: var(--txt-3); }
.pl-pp-listi .pl-pp-vprasanje { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--txt); }
.pl-pp-listi .pl-pp-nazaj { width: 100%; border-color: var(--tab-bd); }
/* KROG NAPRAVE-2 (del A): list »— stanje« (izbira z gumboma, razlog odstopanja) in list »— plomba«. */
.pl-pp-listi .pl-pp-izbira--stanje span { min-height: 52px; border-color: var(--accent); font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.pl-pp-listi .pl-pp-polje-napis { display: block; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); }
.pl-pp-listi .pl-pp-polje-napis--navaden { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* KROG TOCENJE-1 (T1): podmeni ploscic (vrstice >= 44 px), obrazec tocenja, seznam tocenj izmene. Razredi `pl-pp-*` in `pl-gumb` so obstojeci. */
.pl-tc-listi .pl-tc-postavka { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--hairline); color: var(--txt); text-decoration: none; font-size: 16px; font-weight: 600; }
.pl-tc-listi .pl-tc-postavka:last-child { border-bottom: 0; }
.pl-tc-listi .pl-tc-postavka .ti { font-size: 22px; color: var(--txt-2); }
.pl-tc-listi .pl-tc-postavka span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.pl-tc-listi .pl-tc-pusica { color: var(--txt-3); font-size: 20px; }
.pl-tc-listi .pl-tc-slika { font-size: 16px; max-width: 100%; min-height: 44px; }
.pl-tc-listi .pl-tc-vrsta, .pl-tc-listi .pl-tc-litri { font-size: 16px; min-height: 44px; width: 100%; box-sizing: border-box; }
.pl-tc-listi .pl-tc-seznam { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pl-tc-listi .pl-tc-zapis { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--txt); text-decoration: none; position: relative; overflow: hidden; }
.pl-tc-listi .pl-tc-zapis-ura { grid-row: span 2; font-weight: 700; font-variant-numeric: tabular-nums; align-self: center; }
.pl-tc-listi .pl-tc-zapis-kdo { font-size: 13px; color: var(--txt-2); overflow-wrap: anywhere; }
.pl-tc-listi .pl-tc-izbrisi { position: relative; overflow: hidden; width: 100%; color: var(--st-danger-txt); border-color: var(--st-danger-txt); }
.pl-pp-listi .pl-pp-besedilo { display: block; width: 100%; min-height: 48px; border-radius: 10px; font-family: inherit; font-size: 18px; }
.pl-pp-listi .pl-pp-besedilo--vec { min-height: 84px; font-size: 16px; line-height: 1.4; resize: vertical; }
.pl-pp-listi .pl-pp-razlog { display: flex; flex-direction: column; gap: 6px; }
.pl-js .pl-pp-listi .pl-pp-razlog { display: none; }
.pl-js .pl-pp-listi .pl-pp-razlog--odprt { display: flex; }
.pl-pp-listi .pl-pp-plomba { display: flex; flex-direction: column; gap: 2px; }
.pl-pp-listi .pl-pp-plomba-napis, .pl-pp-listi .pl-pp-plomba-kdo { font-size: 13px; line-height: 1.35; color: var(--txt-2); overflow-wrap: anywhere; }
.pl-pp-listi .pl-pp-plomba-kdo strong { font-weight: 700; color: var(--txt); }
.pl-pp-listi .pl-pp-plomba-st { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: .01em; color: var(--txt); overflow-wrap: anywhere; }
.pl-pp-listi .pl-pp-zamenjava > * + * { margin-top: 10px; }
.pl-pp-listi .pl-pp-zamenjava-gumb { display: flex; width: 100%; box-sizing: border-box; list-style: none; cursor: pointer; }
.pl-pp-listi .pl-pp-zamenjava-gumb::-webkit-details-marker { display: none; }
.pl-pp-listi .pl-pp-zamenjava .pl-gumb--poln { width: 100%; }
/* KROG NAPRAVE-2 (A3): zgodovina plomb na nadzorni strani izmen (admin, superadmin). */
.nz-pl-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 6px 0 10px; }
.nz-pl-polje { display: flex; flex-direction: column; gap: 2px; flex: 1 1 120px; min-width: 0; }
.nz-pl-izbor { width: 100%; }
.nz-pl-napis { font-size: 12px; color: var(--txt-2); }
.nz-pl-tabela { display: flex; flex-direction: column; }
.nz-pl-vrsta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.6fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--hairline);
  font-size: 13px; line-height: 1.35; color: var(--txt); overflow-wrap: anywhere; }
.nz-pl-vrsta--glava { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); }
.nz-pl-pod, .nz-pl-clan { display: block; }
.nz-pl-clan--vnesel { font-weight: 700; }
.nz-pl-vnesel { font-size: 11px; font-weight: 700; color: var(--txt-2); }
/* KROG P1-4Z (B, C6): pripis pod Moj status po odlocitvi »Ob predaji« (maketa A1542, korak 3). */
.pl-izmena-telo .pl-zamenjava-pripis { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--st-warn-txt); }
/* KROG P1-4Z (A, T3 d): povezava »Potni nalog ›« v seznamu neoddanih nalogov Avtoparka je gumb, ne podcrtana povezava. */
.ap-card-actions a.ap-btn { display: inline-flex; align-items: center; text-decoration: none; }
.ap-card.ap-pn-dolg { margin-bottom: 12px; }
/* KROG P1-4Z (A, T7): opozorilo »Potni nalog ni oddan« v listih predaje — besedilo + povezava v Avtopark, nad gumbom predaje. */
.pl-izmena-telo .pl-nalog-opozorilo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--st-warn-bg); color: var(--st-warn-txt); }
.pl-izmena-telo .pl-nalog-opozorilo .pl-besedilo { margin: 0; color: inherit; font-weight: 600; }
.pl-izmena-telo .pl-nalog-opozorilo .pl-gumb { justify-content: flex-start; }

/* KROG P2-1+2 (B): NENUJNI PREVOZI - kartica na prosti plosci, lista »Izberi vozilo« in »Popravi trajanje«, glava lista Vsa vozila. */
.pl-nen .pl-nen-velik { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pl-nen .pl-nen-gumba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pl-nen .pl-nen-gumba .pl-gumb { width: 100%; min-width: 0; padding: 10px 8px; }
.pl-nen .pl-nen-obrazec { margin: 0; min-width: 0; }
.pl-nen .pl-nen-tih { border-color: transparent; background: var(--surface-2); }
.pl-nen .pl-nen-list { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; }
.pl-nen .pl-nen-vozila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-nen .pl-nen-vozilo { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--hairline); border-radius: 12px; min-width: 0; cursor: pointer; }
.pl-nen .pl-nen-vozilo input, .pl-nen .pl-nen-privzeti { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; pointer-events: none; }
.pl-nen .pl-nen-vozilo:has(input:checked) { border: 2px solid var(--accent); padding: 9px 11px; }
.pl-nen .pl-nen-vozilo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-nen .pl-nen-vozilo--ni { cursor: default; color: var(--txt-3); }
.pl-nen .pl-nen-reg { flex: 0 0 auto; font-size: 17px; font-weight: 800; white-space: nowrap; }
.pl-nen .pl-nen-opis { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.pl-nen .pl-nen-opis strong { font-weight: 700; overflow-wrap: anywhere; }
.pl-nen .pl-nen-opis em { font-style: normal; font-size: 13px; color: var(--txt-2); overflow-wrap: anywhere; }
.pl-nen .pl-nen-vozilo--ni .pl-nen-opis em { color: var(--txt-3); }
.pl-nen .pl-nen-dejanje { flex: 0 0 auto; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pl-nen .pl-nen-izbran { display: none; }
.pl-nen .pl-nen-vozilo:has(input:checked) .pl-nen-izbran { display: inline; }
.pl-nen .pl-nen-vozilo:has(input:checked) .pl-nen-ni-izbran { display: none; }
.pl-nen .pl-nen-osnova, .pl-nen .pl-nen-opomba { margin: 0; font-size: 12px; line-height: 1.4; color: var(--txt-2); }
.pl-nen .pl-nen-trajanje { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 8px; }
.pl-nen .pl-nen-korak { width: 100%; min-width: 0; padding: 10px 4px; border-color: transparent; background: var(--surface-2); font-family: inherit; }
.pl-nen .pl-nen-do { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; text-align: center; }
.pl-nen .pl-nen-do strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-nen .pl-nen-do span { font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-nen .pl-gumb--poln { margin-top: 0; }
.pl-nen .pl-nen-izberi { margin-top: 8px; }
.pl-list-glava--vv { gap: 6px; }
.pl-list-glava--vv > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-list-glava--vv .pl-gumb:first-of-type { margin-left: auto; }
.pl-list-glava--vv .pl-gumb { flex: 0 0 auto; padding: 10px; font-size: 14px; white-space: nowrap; }
/* KROG P1-3+4 (B.2, C26): list »Popravi zapis« (partial `plosca/_popravek_zapisa.php`) — en obrazec na intervencijo. */
.pl-popravek-list .pl-popravek-obrazec { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* KROG P1-3+4 (B.2, C23): opomnik pred samodejnim zakljuckom — vrstica pod Moj status, dotik odpre izbiro Ostanem. Barva = stanje
   opozorila (znacka), ne okvir razdelka. */
.pl-izmena-telo .pl-opomnik { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 10px;
  background: var(--st-warn-bg); color: var(--st-warn-txt); font-size: 14px; font-weight: 700; text-decoration: none; box-sizing: border-box; }
.pl-izmena-telo .pl-opomnik b { font-weight: 800; }

/* ═══ KROG P1-5 (B1/B3): VSA VOZILA — list na plosci (posadka) in nadzorna stran `/izmena/` (admin) ═══════════════════════
   EN izris (`plosca/_vsa_vozila.php`); barva znacke stanja pride iz ISTE preslikave kot junak in kartica (`.vv-k[data-pl-stanje]` je
   v izbirnikih preslikave zgoraj), znacka »Predaja v teku«/»Caka zamenjavo« iz para `pl-znacka--predaja`. Kartice imajo obrobo
   kartic telesa; na namizju nujna v treh stolpcih, nenujna do sest. */
.vv { display: flex; flex-direction: column; gap: 8px; }
.vv-razdelek { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.vv-mreza { display: grid; grid-template-columns: 1fr; gap: 8px; }
.vv-mreza--male { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vv-k { border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vv-glava { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vv-naziv { font-size: 18px; font-weight: 800; color: var(--txt); }
.vv-k--mala .vv-naziv { font-size: 15px; }
/* KROG P1-5 (C1): kartica dezurne ambulante — crtkana obroba (maketa P1_5_vv_vikend), brez stanja in noge. */
.vv-k--amb { border-style: dashed; }
/* KROG P1-5 (C2): Avtopark »Zapri dolg« — list z obveznim razlogom (radijski gumbi, dotik 44 px). */
.ap-zd-obrazec { display: flex; flex-direction: column; gap: 8px; }
.ap-zd-razlog { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; }
.vv-ekipa { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-3); }
.vv-zas { font-size: 12px; font-weight: 700; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.vv-zas--manj { color: var(--st-warn-txt); }
.vv-znacka { margin-left: auto; }
.vv-znacka--izmena { border-color: var(--tab-bd); color: var(--txt-2); background: transparent; font-size: 10px; }
.vv-cas { font-size: 12px; color: var(--txt-2); }
.vv-clan { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--txt); }
.vv-ime { min-width: 0; overflow-wrap: anywhere; }
.vv-stanje-osebe { display: block; font-size: 11px; color: var(--txt-3); }
.vv-vloga { flex: 0 0 auto; font-size: 12px; color: var(--txt-2); text-align: right; }
.vv-caka { align-self: flex-start; font-size: 10px; }
.vv-prihaja { font-size: 12px; color: var(--txt-2); }
.vv-noga { display: flex; gap: 14px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--txt-2); }
.vv-noga strong { color: var(--txt); }
.vv-zasilni { margin-top: 6px; }
.vv-zasilni > summary { list-style: none; cursor: pointer; justify-content: center; min-height: 44px; color: var(--st-danger-txt); }
.vv-zasilni > summary::-webkit-details-marker { display: none; }
.vv-zasilni-obrazec { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* KROG TV-POVEZAVA (B2-B4): gumba -1/+1 ob NRV in razdelek »Tabla« v telesu lista Vsa vozila (samo s pravico vodje). */
.vv-pop { display: flex; gap: 8px; margin-top: 6px; }
.vv-prosto { margin: 10px 14px 0; }   /* TV-POVEZAVA (E): vrstica »Vsa vozila ›« na prosti plosci (vodja brez seje) */
.vv-prosto-vrstica { display: flex; width: 100%; box-sizing: border-box; min-height: 44px; }
.vv-tabla-pot { display: flex; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0 0 10px; }   /* TV-POVEZAVA (D1): povezava na tablo kot prva vrstica lista */
.vv-pop-obrazec { flex: 1 1 0; min-width: 0; margin: 0; }
.vv-pop-gumb { position: relative; overflow: hidden; width: 100%; min-height: 44px; min-width: 44px; margin-top: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.vv-pop-napis { color: var(--txt-2); font-weight: 600; }
.vv-tabla { display: flex; flex-direction: column; gap: 8px; }
.vv-tabla-dej > summary { list-style: none; cursor: pointer; }
.vv-tabla-dej > summary::-webkit-details-marker { display: none; }
.vv-tabla-obrazec { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vv-tabla-dej .vv-tabla-obrazec { margin-top: 8px; }
.vv-tabla-oznaka { font-size: 12px; color: var(--txt-2); font-weight: 600; }
.vv-tabla-gumb { position: relative; overflow: hidden; min-height: 44px; margin-top: 0; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; }
.vv-razlog { font-size: 16px; min-height: 38px; }
/* List Vsa vozila na plosci je CELOZASLONSKI spodnji list (modifikator obstojecega ovoja). */
.ui-modal-bg.pl-list--cel .ui-modal { max-height: 100vh; height: 100%; border-radius: 0; }
/* Kartica Nujna vozila je povezava: brez podcrtaja in brez sistemskega menija povezave ob dolgem pritisku (iOS, kot HN12). */
.pl-izmena-telo a.pl-nujna { text-decoration: none; color: inherit; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (min-width: 768px) {
  .vv--nadzor .vv-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vv--nadzor .vv-mreza--male { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ui-modal-bg.pl-list--cel .ui-modal { max-width: 720px; height: auto; max-height: 92vh; border-radius: var(--ui-radius); }
}
/* Nadzorna stran `/izmena/` (admin): glava razdelka z »Zasilno zakljuci vse«, Zakljucene izmene s casovnico (<details>, brez skripta).
   Lasten imenski prostor `nz-*` (razredi `.iz-*` so zamrznjeni). */
.nz-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.nz-vse { color: var(--st-danger-txt); min-height: 44px; }
.nz-predogled { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; color: var(--txt-2); }
.nz-obrazec { display: flex; flex-direction: column; gap: 8px; }
.nz-okno { display: flex; gap: 6px; margin: 6px 0 10px; }
.nz-okno .ui-tab { flex: 1 1 0; justify-content: center; text-align: center; }
.nz-zak-mreza { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
.nz-zak { border: 1px solid var(--hairline); border-radius: 14px; padding: 10px 14px; background: var(--surface); }
.nz-zak-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; list-style: none; min-height: 44px; }
.nz-zak-glava::-webkit-details-marker { display: none; }
.nz-zak-znacka { margin-left: auto; border-color: transparent; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.nz-zak-znacka--danger { background: var(--st-danger-bg); color: var(--st-danger-txt); }
.nz-zak-znacka--warn { background: var(--st-warn-bg); color: var(--st-warn-txt); }
.nz-zak-znacka--success { background: var(--st-success-bg); color: var(--st-success-txt); }
.nz-zak-pod { flex: 1 1 100%; font-size: 12px; color: var(--txt-2); }
.nz-casovnica { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; }
.nz-cv { display: grid; grid-template-columns: 86px 1fr; gap: 8px; font-size: 13px; color: var(--txt); }
.nz-cv--sled { border-radius: 10px; padding: 6px 8px; background: var(--st-warn-bg); color: var(--st-warn-txt); font-weight: 700; }
.nz-cv-ura { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.nz-cv--sled .nz-cv-ura { color: inherit; }
.nz-cv-pod { display: block; font-size: 12px; font-weight: 400; color: var(--txt-2); }
.nz-cv-povezava { color: var(--st-info-txt); font-weight: 700; text-decoration: none; }
@media (min-width: 768px) { .nz-zak-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── KROG PRENOS-1: trak »Stanje iz prejšnje izmene« na vrhu Opreme in Vozila (plosca/_prenos_trak.php) ──
   Barva po nalogu lastnika: prenos uspe = info par, ni na voljo = warn par; besedilo nevtralno; »×« je nevtralen gumb 44 x 44. */
.pl-prenos { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 6px 10px 14px; border-radius: 12px; border: 1px solid; color: var(--txt); font-size: 14px; line-height: 1.4; }
.pl-prenos--info { background: var(--st-info-bg); border-color: var(--st-info-txt); }
.pl-prenos--warn { background: var(--st-warn-bg); border-color: var(--st-warn-txt); }
.pl-prenos[hidden] { display: none; }
.pl-prenos-besedilo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pl-prenos-pod { color: var(--txt-2); margin-top: 2px; }
.pl-prenos-x { flex: 0 0 44px; width: 44px; height: 44px; margin: -8px 0 -8px 0; border: 0; background: transparent; color: var(--txt-2); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 10px; }
.pl-prenos-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── KROG P1-6 (C): polja obvestil za TV (obvestila/index.php) in zavihek »TV zaslon« (admin/_izmena_tv.php) ──
   Mobilno najprej (390 px): en stolpec, polja visine 38 px s pisavo 16 px, dotik 44 px. Znacke stanja z `--st-*` pari. */
.ob-polje { min-height: 76px; padding: 9px 11px; border: 1px solid var(--inp-bd); border-radius: 8px; font-size: 16px; font-family: inherit; background: var(--inp-bg); color: var(--inp-tx); width: 100%; box-sizing: border-box; resize: vertical; }
.ob-dvoje { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ob-tv-stikala { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
/* KROG POPRAVKI-TEL-1 (8b): gumb »Objavi« pod stikali, cez celo sirino obrazca (kot prej v stolpcu polj). */
.ob-objavi { display: flex; margin-top: 10px; }
.ob-objavi .btn-upload { flex: 1 1 auto; }
.ob-oznake { position: absolute; top: 26px; right: 10px; z-index: 26; display: flex; gap: 4px; pointer-events: none; }
.ob-ozn { padding: 2px 6px; border-radius: 3px; font-size: 7.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--st-info-bg); color: var(--st-info-txt); }
.ob-ozn--poteklo { background: var(--st-warn-bg); color: var(--st-warn-txt); }
.ob-kartica-opis { margin: 6px 10px 0; font-size: 10px; line-height: 1.35; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-align: left; }
.ob-m-dogodek { font-size: 13px; font-weight: 700; color: var(--txt); margin-bottom: 8px; overflow-wrap: anywhere; }
.ob-m-opis { font-size: 14px; line-height: 1.5; color: var(--txt); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 16px; }
.ob-m-dogodek[hidden], .ob-m-opis[hidden], .ob-tv-uredi[hidden], .modal-preview[hidden] { display: none; }
.ob-tv-uredi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.ob-tv-uredi-naslov { font-size: 13px; font-weight: 700; color: var(--txt); }
.ob-tv-uredi .ui-btn { align-self: flex-start; min-height: 44px; }
@media (min-width: 768px) { .ob-dvoje { grid-template-columns: 1fr 1fr; } }

.tvz { max-width: 700px; }
.tvz-uvod { font-size: 13px; color: var(--txt-2); margin: 0 0 12px; overflow-wrap: anywhere; }
.tvz-seznam { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tvz-vr { border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tvz-vr-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.tvz-naziv { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--txt); overflow-wrap: anywhere; }
.tvz-znacka { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tvz-znacka--aktiven { background: var(--st-success-bg); color: var(--st-success-txt); }
.tvz-znacka--preklican { border: 1px solid var(--tab-bd); color: var(--txt-2); }
.tvz-znacka--opozorilo { background: var(--st-warn-bg); color: var(--st-warn-txt); }
.tvz-viden { font-size: 12px; color: var(--txt-2); }
.tvz-gumbi { display: flex; flex-wrap: wrap; gap: 8px; }
.tvz-gumbi .ui-btn, .tvz-nov .ui-btn { min-height: 44px; }
/* KROG TV-POVEZAVA (B2-B5): popravek stevca, sporocilo in pocisti v Upravljanju; »Odstrani s seznama«. */
.tvz-tvr { flex-direction: row; flex-wrap: wrap; align-items: center; }
.tvz-tst { font-size: 13px; color: var(--txt-2); }
.tvz-tst strong { color: var(--txt); }
.tvz-tobrazec, .tvz-odstrani { margin: 0; }
.tvz-tgumb { min-width: 44px; min-height: 44px; justify-content: center; }
.tvz-tsporocilo { margin-top: 14px; }
.nmp-form-card .tvz-nov textarea { padding: 9px 11px; border: 1px solid var(--tab-bd); border-radius: 8px; font-size: 16px; font-family: inherit; background: var(--surface); color: var(--txt); width: 100%; box-sizing: border-box; }
.tvz-tpocisti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tvz-tpocisti .ui-btn, .tvz-odstrani .ui-btn { min-height: 44px; }
.tvz-tzgod-naslov { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
.tvz-tzgod .tvz-vr { font-size: 13px; color: var(--txt); }
.tvz-dej { min-width: 0; }
.tvz-dej[open] { flex: 1 1 100%; }
.tvz-dej > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.tvz-dej > summary::-webkit-details-marker { display: none; }
.tvz-potrdi { margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 8px; font-size: 13px; color: var(--txt); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tvz-nov { display: flex; flex-direction: column; gap: 8px; }
.tvz-nov label { font-size: 12px; color: var(--txt-2); font-weight: 600; }
.nmp-form-card .tvz-nov input[type="text"] { height: 38px; padding: 9px 11px; border: 1px solid var(--tab-bd); border-radius: 8px; font-size: 16px; font-family: inherit; background: var(--surface); color: var(--txt); width: 100%; box-sizing: border-box; }
.tvz-koda { border: 1px solid var(--st-warn-txt); background: var(--st-warn-bg); color: var(--txt); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tvz-koda-stevke { font-size: 30px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--txt); }
.tvz-koda-naslov { font-size: 14px; font-weight: 700; color: var(--txt); overflow-wrap: anywhere; user-select: all; }
.tvz-koda-opozorilo { font-size: 13px; font-weight: 700; color: var(--st-warn-txt); }
.tvz-prazno { font-size: 13px; color: var(--txt-2); margin: 0 0 14px; }

/* ═══ KROG HITROST-1: MERITEV HITROSTI — plosca na zaslonu (`assets/js/hitrost.js`; samo ob aktivnem merjenju) ═══════════ */
.hs-plosca { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 150; max-height: 55vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; background: var(--surface); color: var(--txt); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 10px 12px; font-size: 12px; line-height: 1.45; }
@media (max-width: 767px) { .hs-plosca { bottom: calc(58px + env(safe-area-inset-bottom) + 8px); } }
@media (min-width: 768px) { .hs-plosca { left: auto; width: 520px; } }
.hs-vsebina { min-width: 0; user-select: text; -webkit-user-select: text; }
.hs-naslov { font-weight: 800; font-size: 13px; letter-spacing: .04em; margin-bottom: 4px; }
.hs-vrstica { overflow-wrap: anywhere; color: var(--txt); font-variant-numeric: tabular-nums; padding: 2px 0; border-top: 1px solid var(--hairline); }
.hs-gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hs-gumb { min-height: 44px; min-width: 44px; padding: 0 14px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--tab-tx); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.hs-gumb:first-child { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); }

/* ══ INTERVENCIJA (KROG INTERVENCIJA-1) ═══════════════════════════════════════════════════════════════════════════════════
   Celozaslonsko okno intervencije (`plosca/_okno_intervencije.php`), seznam materiala (`plosca/_material_seznam.php`) in pod-list
   ocene. Imenski prostor `in-*`; samo zetoni (obe temi), dotiki >= 44 px, polja 16 px (iPhone ne poveca). Okno je modifikator
   obstojecega celozaslonskega lista (`.ui-modal-bg.pl-list--cel`): glava zgoraj, telo se pomika, spodnja vrstica stoji. */
.in-okno .in-modal { display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; background: var(--bg); border: 0; }
.in-glava { flex: 0 0 auto; padding: 12px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.in-glava-vrsta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.in-okno .in-glava .in-naslov, .in-okno .in-ocena .in-ocena-naslov { font-size: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; min-width: 0; overflow-wrap: anywhere; }
.in-zapri { flex: 0 0 auto; }
.in-glava-cas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--txt-2); }
.in-cas strong { font-size: 20px; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.in-teren { align-self: center; padding: 1px 8px; border: 1.5px solid var(--st-danger-txt); border-radius: 999px; color: var(--st-danger-txt); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.in-telo { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.in-obrazec { display: flex; flex-direction: column; gap: 12px; }
.in-karta { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-card); min-width: 0; }
.in-razdelek { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.in-razdelek-vrsta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.in-povzetek { font-size: 13px; font-weight: 700; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.in-oznaka { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.in-oznaka-vrsta { display: flex; align-items: center; gap: 6px; }
.in-polje { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--txt); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 10px; }
.in-polje--vec { min-height: 88px; resize: vertical; }
.in-polje:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.in-opozorilo { margin: 0; font-size: 13px; font-weight: 700; color: var(--st-warn-txt); }
.in-obvestilo { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--st-warn-bg); color: var(--st-warn-txt); font-size: 14px; font-weight: 600; }
.in-izbire { display: grid; gap: 8px; }
.in-izbire--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-izbire--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.in-izbire--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.in-izbira { position: relative; display: block; min-width: 0; }
.in-izbira input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.in-izbira span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 4px; border-radius: 10px; background: var(--surface-2); color: var(--txt); font-size: 17px; font-weight: 800; cursor: pointer; user-select: none; -webkit-user-select: none; }
.in-izbira input:checked + span { background: var(--accent); color: var(--accent-tx); }
.in-izbira input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.in-lestvica { display: flex; justify-content: space-between; font-size: 13px; color: var(--txt-2); }
/* Material */
.in-hitri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.in-obr { margin: 0; }
.in-hitri-gumb { box-sizing: border-box; width: 100%; min-height: 48px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px solid transparent; border-radius: 10px; background: var(--surface-2); color: var(--txt); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.in-hitri-naziv { min-width: 0; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.in-hitri-gumb--ima { background: var(--surface); border-color: var(--st-success-txt); color: var(--st-success-txt); }
.in-hitri-kos { font-size: 13px; font-weight: 700; }
.in-hitri-kos[hidden] { display: none; }
.in-mat { display: flex; flex-direction: column; }
.in-mat-prazno { margin: 4px 0; font-size: 14px; color: var(--txt-2); }
.in-mat-vrstica { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline); -webkit-touch-callout: none; }
.in-mat-vrstica:first-child { border-top: 0; }
.in-mat-kvadrat { width: 44px; height: 44px; }
.in-obr-gumb { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.in-kvadrat { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--txt-3); border-radius: 10px; background: var(--surface); }
.in-kvadrat--da { border-color: var(--grn); background: var(--grn); color: var(--surface); font-size: 22px; }
.in-kvadrat--ne { opacity: .45; }
.in-mat-vrstica--vrnjena .in-obr--kvadrat .in-kvadrat { border-color: var(--grn); background: var(--grn); }
.in-mat-besedilo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.in-mat-naziv { font-size: 16px; font-weight: 700; color: var(--txt); overflow-wrap: anywhere; }
.in-mat-vrstica--vrnjena .in-mat-naziv { text-decoration: line-through; color: var(--txt-3); }
.in-mat-meta { font-size: 13px; color: var(--txt-2); overflow-wrap: anywhere; }
.in-mat-vrnjeno { color: var(--st-success-txt); font-weight: 700; }
.in-obr--odpri .in-obr-gumb { justify-content: flex-start; min-height: 44px; padding: 0 10px; margin-top: 2px; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--tab-tx); font-size: 14px; font-weight: 700; }
.in-js .in-obr--odpri { display: none; }
.in-mat-kos { justify-self: end; }
.in-kos { position: static; }
.in-kos > summary { list-style: none; cursor: pointer; }
.in-kos > summary::-webkit-details-marker { display: none; }
.in-kos-st { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 44px; padding: 0 10px; box-sizing: border-box; border-radius: 10px; background: var(--surface-2); color: var(--txt); font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-kos-koraki { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 2px; padding: 0 2px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--surface); }
.in-kos-st--v { background: none; min-width: 48px; padding: 0 4px; }
.in-obr--minus .in-obr-gumb, .in-obr--plus .in-obr-gumb { font-size: 24px; font-weight: 800; }
.in-rocni { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.in-dodaj { min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-tx); font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.in-usklajeno { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt-2); }
.in-usklajeno[hidden] { display: none; }
.in-usklajeno-pika { width: 9px; height: 9px; border-radius: 50%; background: var(--grn); flex: 0 0 auto; }
.in-usklajeno--ne .in-usklajeno-pika { background: var(--red); }
.in-pomoc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--txt-2); }
.in-ocena-vrstica { flex-direction: row; align-items: center; justify-content: space-between; min-height: 64px; text-decoration: none; color: var(--txt); }
.in-ocena-besedilo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-ocena-besedilo strong { font-size: 17px; }
.in-ocena-besedilo span { font-size: 13px; font-weight: 700; color: var(--txt-2); }
.in-ocena-vrstica .ti { font-size: 22px; }
/* Stalna spodnja vrstica: Zapri | SHRANI */
.in-noga { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--hairline); }
.in-noga .pl-gumb { width: 100%; margin: 0; min-height: 52px; }
/* Pod-list ocene ZNOTRAJ okna (ne drug list: `odpri()` bi okno zaprl). */
.in-ocena { display: none; position: absolute; inset: 0; z-index: 2; align-items: flex-end; background: rgba(0,0,0,0.35); }
.in-ocena.open, .in-ocena:target { display: flex; }
.in-ocena-list { box-sizing: border-box; width: 100%; max-height: 92%; overflow-y: auto; padding: 18px 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 20px 20px 0 0; }
.in-ocena-obrazec { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.in-ocena-nujnost { display: flex; flex-direction: column; gap: 8px; }
.in-i { display: inline-block; }
.in-i > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px 0; cursor: pointer; color: var(--txt-2); font-size: 20px; }
.in-i > summary::-webkit-details-marker { display: none; }
.in-legenda { display: none; margin: 0; padding: 10px 14px; list-style: none; border-radius: 10px; background: var(--surface-2); font-size: 15px; line-height: 1.7; color: var(--txt); }
.in-legenda b { display: inline-block; width: 22px; }
.in-ocena-nujnost.in-legenda-odprta .in-legenda, .in-ocena-nujnost:has(.in-i[open]) .in-legenda { display: block; }
.in-shrani-oceno { margin-top: 4px; min-height: 52px; }
/* Brez skripta: okno ostane odprto, ko je cilj sidra njegov pod-list ocene. */
html:not(.pl-js) .ui-modal-bg[data-pl-list-el]:has(.in-ocena:target) { display: flex; }
@media (min-width: 768px) {
  .ui-modal-bg.pl-list--cel.in-okno .ui-modal { height: 92vh; }
}
.in-dodatno { display: flex; flex-direction: column; gap: 8px; }
.in-vse { margin-top: 10px; }
/* Podstran »Intervencije« (KROG INTERVENCIJA-1, B4; samo superadmin) — imenski prostor `iv-*`, samo zetoni, obe temi. */
.iv-stran { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.iv-karta { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-card); min-width: 0; color: var(--txt); }
.iv-enota { flex-direction: row; flex-wrap: wrap; align-items: center; }
.iv-enota .iv-polje { flex: 1 1 160px; }
.iv-naslov { margin: 0; font-size: 18px; font-weight: 700; color: var(--txt); }
.iv-oznaka { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); }
.iv-pod { display: block; font-size: 13px; color: var(--txt-2); overflow-wrap: anywhere; }
.iv-prazno { margin: 0; font-size: 14px; color: var(--txt-2); }
.iv-polje { box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 16px; color: var(--txt); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 10px; }
.iv-vnos, .iv-dodaj { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.iv-dodaj .iv-polje, .iv-vnos .iv-polje { flex: 1 1 140px; }
.iv-shrani { width: auto; margin-top: 0; min-height: 44px; }
.iv-sporocilo { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.iv-sporocilo--ok { background: var(--st-success-bg); color: var(--st-success-txt); }
.iv-sporocilo--napaka { background: var(--st-danger-bg); color: var(--st-danger-txt); }
.iv-vrstica { flex-direction: row; align-items: center; justify-content: space-between; text-decoration: none; min-height: 56px; }
.iv-hitri-vrsta { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.iv-hitri-vrsta--nad .iv-hitri-naziv { color: var(--txt-3); }
.iv-hitri-premik { display: flex; flex-direction: column; gap: 4px; }
.iv-hitri-ime { min-width: 0; }
.iv-hitri-naziv { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.iv-gumb-obr { margin: 0; }
.iv-gumb { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--tab-tx); font: inherit; font-size: 16px; cursor: pointer; }
.iv-filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-filtri .iv-polje { flex: 1 1 140px; }
.iv-kartica { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--hairline); min-width: 0; }
.iv-kartica-glava { display: flex; flex-direction: column; gap: 2px; }
.iv-vrsta { margin: 0; font-size: 14px; color: var(--txt); overflow-wrap: anywhere; }
.iv-opomba { white-space: normal; }
.iv-znacka { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: var(--st-warn-bg); color: var(--st-warn-txt); font-size: 12px; font-weight: 700; }
.iv-material { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--txt); }
.iv-material li { margin: 4px 0; overflow-wrap: anywhere; }
.iv-strani { display: flex; justify-content: space-between; gap: 8px; }
/* ── PREDAJA (KROG PREDAJA-1) — predaja službe: stran modula, ročni zapis, obrazec. Imenski prostor `pd-*`, samo žetoni, obe temi. ── */
.pd-stran { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.pd-karta { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-card); min-width: 0; color: var(--txt); }
.pd-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pd-naslov { margin: 0; font-size: 18px; font-weight: 700; color: var(--txt); }
.pd-dodaj { min-height: 44px; }
.pd-prazno { margin: 0; font-size: 14px; color: var(--txt-2); }
.pd-sporocilo { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.pd-sporocilo--ok { background: var(--st-success-bg); color: var(--st-success-txt); }
.pd-sporocilo--napaka { background: var(--st-danger-bg); color: var(--st-danger-txt); }
.pd-list-naslov { font-size: 18px; font-weight: 400; color: var(--txt); }
/* Brez skripta list predaje odpre sidro (`:target`); s skriptom plosce odloca SAMO razred `open` (kot pravilo plosce za `data-pl-list-el`),
   sicer list ostane viden po »Zapri« (`:target` se ob odstranitvi razreda in ob `replaceState` ne posodobi). */
html:not(.pl-js) .ui-modal-bg[data-pd-list]:target { display: flex; }
.pd-obrazec { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pd-oznaka { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); }
/* Besedilno polje zapisa nosi OBSTOJECI razred `in-polje` (polnilo, pisava 16 px); tu samo sirina in raztezanje. */
.pd-polje { width: 100%; resize: vertical; }
.pd-pomoc { margin: 0; font-size: 13px; color: var(--txt-2); }
.pd-zapis { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.pd-zapis-glava { margin: 0; font-size: 13px; color: var(--txt-2); }
.pd-zapis-besedilo { margin: 0; font-size: 15px; color: var(--txt); overflow-wrap: anywhere; }
.pd-vrsta-gumbov { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-vrsta-gumbov .pl-gumb, .pd-zapis .pl-gumb { min-height: 44px; }
.pd-zapis .pd-obrazec > .pl-gumb { align-self: flex-start; }
/* PREDAJA (F2) — kartica na plošči, predajni obrazec (PI_V2_E), potek, segmenti, poročilo. */
.pd-st--neustrezno { color: var(--st-danger-txt); }
.pd-st--preveri { color: var(--st-warn-txt); }
.pd-st--ok { color: var(--st-success-txt); }
.pl-izmena-telo .pd-kartica { gap: 0; }
/* KROG PREDAJA-1 hitri (lastnik 16. 10.): kartica = SPROZILEC (naslov + zadnji zapisi; dolg pritisk odpre razsirjen pogled), okvir prejsnje
   izmene in noga z »+ ROČNI ZAPIS«. Sprozilec je povezava brez podcrtaja (kot a.pl-nujna); naslov nosi TUDI `pl-gumb-pod`, da namig
   zamenja samo vrstico naslova — videz naslova ostane `.pl-k-naslov` (10 px, polna prosojnost, levo). */
.pl-izmena-telo .pd-sprozilec { display: block; color: inherit; text-decoration: none; }
.pl-izmena-telo .pd-sprozilec .pl-gumb-pod { font-size: 10px; font-weight: 700; opacity: 1; text-align: left; line-height: 1.45; }
/* Med namigom (kratek dotik) naslov izgine kot vsak podnapis — zgornja polna prosojnost bi namig prekrila (enaka specificnost, kasneje). */
.pl-izmena-telo .pd-sprozilec.pl-namig-pod .pl-gumb-pod:not(.pl-namig-sloj) { opacity: 0; }
/* PREDAJA-1b (dodatek 2): sprozilec NASLOVA sega do roba kartice in ima tarco dotika 44 px; vsak ZAPIS je svoj sprozilec (dolg pritisk —
   moj: izbris, tuj: razsirjen pogled) z vrstico »ura · avtor« kot `pl-gumb-pod` (namig zamenja samo njo, besedilo ostane). */
.pl-izmena-telo .pd-kartica > .pd-sprozilec:not(.pd-zapis) { margin: -10px -12px 0; padding: 10px 12px 6px; min-height: 44px; box-sizing: border-box;
  border-radius: 16px 16px 0 0; overflow: hidden; }
.pl-izmena-telo .pd-kartica > .pd-sprozilec.pd-zapis { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-height: 44px; box-sizing: border-box; overflow: hidden; }
.pl-izmena-telo .pd-kartica > .pd-sprozilec:not(.pd-zapis) + .pd-sprozilec.pd-zapis { margin-top: 2px; }
.pl-izmena-telo .pd-sprozilec .pd-zapis-glava.pl-gumb-pod { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--txt-2); }
.pd-kartica > .pd-zapisi-prazno { margin-top: 6px; font-size: 13px; color: var(--txt-3); }
/* KROG TOCENJE-1 (odlocitev lastnika 17. 10.): CRTKAN okvir je sam gumb za rocni zapis — brez zapisov cez celo sirino z drobno vrstico pod
   napisom, po zapisih ozji (samo napis). Tarca dotika 44 px. */
.pd-dodaj-okvir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 8px; min-height: 44px; padding: 10px 12px;
  box-sizing: border-box; border: 1.5px dashed var(--txt-3); border-radius: 12px; color: var(--txt); text-decoration: none; text-align: center; }
.pd-dodaj-okvir--ozek { width: fit-content; min-width: 60%; max-width: 100%; margin-left: auto; margin-right: auto; padding: 8px 16px; }
.pd-dodaj-okvir-napis { font-size: 15px; font-weight: 700; }
.pd-dodaj-okvir-pod { font-size: 12px; color: var(--txt-3); }
/* Okvir prejsnje ekipe: VEDNO dve vrstici (vsaka v eni vrsti, odvec z »…«), zato sta rdec in zelen okvir enako visoka; ikona levo, pusica desno. */
.pd-prejsnja { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; margin: 8px 0 6px; padding: 10px 12px; min-height: 44px;
  box-sizing: border-box; border: 1px solid var(--tab-bd); border-radius: 12px; background: var(--surface); color: var(--txt); text-decoration: none; }
.pd-prejsnja .pl-k-pusica { grid-row: 1 / span 2; grid-column: 3; }
.pd-prejsnja-ikona { grid-row: 1 / span 2; grid-column: 1; font-size: 18px; font-weight: 700; line-height: 1; }
.pd-prejsnja-naslov { grid-column: 2; display: flex; gap: 0.3em; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; }
/* 320 px: krajsa se samo »PREDAJNI OBRAZEC ·« (tri pike), ime vozila se nikoli ne odreze. */
.pd-prejsnja-oznaka { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-prejsnja-vozilo { flex-shrink: 0; }
.pd-prejsnja-pod { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-prejsnja--rdeca { background: var(--st-danger-bg); border-color: var(--st-danger-txt); }
.pd-prejsnja--rdeca .pd-prejsnja-ikona, .pd-prejsnja--rdeca .pd-prejsnja-naslov { color: var(--st-danger-txt); }
.pd-prejsnja--zelena { background: var(--st-success-bg); border-color: var(--st-success-txt); }
.pd-prejsnja--zelena .pd-prejsnja-ikona, .pd-prejsnja--zelena .pd-prejsnja-naslov { color: var(--st-success-txt); }
.pd-obr-posadka { margin: 0; font-size: 13px; color: var(--txt-2); }
.pd-obr { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--txt); }
.pd-obr-glava { margin: 0; font-size: 14px; color: var(--txt-2); overflow-wrap: anywhere; }
.pd-obr-glava strong { color: var(--txt); }
.pd-povzetek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd-pl { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--card-border); min-width: 0; }
.pd-pl-vred { font-size: 24px; font-weight: 800; color: var(--txt); overflow-wrap: anywhere; }
.pd-pl-napis { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); overflow-wrap: anywhere; }
.pd-po-predaji { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; background: var(--st-info-bg); color: var(--st-info-txt); }
.pd-sek { margin: 14px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--txt); font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--txt); }
.pd-potek { list-style: none; margin: 0; padding: 0; }
.pd-dog { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.pd-dog-hm { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.pd-dog-tx { min-width: 0; overflow-wrap: anywhere; }
.pd-dog-pod, .pd-vr-pod { display: block; font-size: 13px; color: var(--txt-2); overflow-wrap: anywhere; }
.pd-vr { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
/* Dve koloni s PRELOMOM: dolga desna vrednost gre pod ime (mreza z `auto` bi levo ime stisnila v navpicen stolpec). */
.pd-vr--dva { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; align-items: baseline; }
.pd-vr--dva > span:first-child { flex: 1 1 50%; min-width: 0; }
.pd-vr--dva > .pd-vr-desno { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.pd-vr--dva .pd-vr-pod { flex-basis: 100%; text-align: right; }
.pd-vr-desno { text-align: right; font-weight: 400; }
.pd-vr-desno.pd-st--neustrezno, .pd-vr-desno.pd-st--preveri, .pd-vr-desno.pd-st--ok { font-weight: 700; }
.pd-vr-prenos { font-weight: 400; font-size: 13px; color: var(--txt-2); }
.pd-vr--krepko { font-weight: 700; }
.pd-povezava { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--txt); text-decoration: none; }
.pd-noga { margin: 12px 0 0; font-size: 13px; color: var(--txt-2); }
@media (max-width: 359px) { .pd-dog { grid-template-columns: 72px minmax(0, 1fr); } }
/* PREDAJA (F3) — Podrobnosti izmene, arhiv predajnih obrazcev, zavihek in stikala v Upravljanju. */
.pd-zavihki { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-zavihek { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box; border: 1px solid var(--tab-bd); border-radius: 12px;
  background: var(--surface); color: var(--tab-tx); font-weight: 700; text-decoration: none; }
.pd-zavihek--akt { background: var(--accent); border-color: var(--accent); color: var(--accent-tx); }
.pd-filtri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-izbira { flex: 1 1 160px; width: auto; }
.pd-filtri .pl-gumb { min-height: 44px; width: auto; }
.pd-arh { display: flex; flex-direction: column; border-bottom: 1px solid var(--hairline); }
.pd-arh-vr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 10px 0; min-height: 44px; color: var(--txt); text-decoration: none; }
.pd-arh-naslov { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.pd-arh-pod { grid-column: 1; font-size: 14px; color: var(--txt-2); overflow-wrap: anywhere; }
.pd-arh-vr .pd-zn { grid-column: 2; grid-row: 1 / span 2; }
.pd-zn { padding: 2px 10px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.pd-zn--neustrezno { color: var(--st-danger-txt); }
.pd-zn--ok { color: var(--st-success-txt); }
.pd-zn--pozneje { color: var(--st-warn-txt); }
.pd-zav { display: flex; flex-direction: column; gap: 10px; }
.pd-stikala { display: flex; flex-direction: column; gap: 4px; }
.pd-stikalo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.pd-stikalo > span { min-width: 0; overflow-wrap: anywhere; }
.pd-stikalo .pd-pomoc { display: block; }
.pd-stikala .pl-gumb--poln { width: auto; align-self: flex-start; min-height: 44px; padding: 0 24px; }
.nz-predaja { margin: 8px 0 0; font-size: 14px; }

/* KROG TOCENJE-1 (T2.1): zavihek »Točenja« v Avtoparku — vrstica = kartica (mobilni izris), na namizju mreza stolpcev. */
.ap-tc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.ap-tc-filter select { font-size: 16px; min-height: 44px; padding: 0 10px; border: 1px solid var(--tab-bd); border-radius: 8px; background: var(--surface); color: var(--txt); }
.ap-tc-prazno { font-size: 13px; color: var(--txt-2); margin: 6px 0; }
.ap-tc-seznam { display: flex; flex-direction: column; gap: 8px; }
.ap-tc-vr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); font-size: 14px; color: var(--txt); min-width: 0; }
.ap-tc-vr > span { min-width: 0; overflow-wrap: anywhere; }
.ap-tc-cas, .ap-tc-kdo, .ap-tc-nalog { font-size: 12px; color: var(--txt-2); }
.ap-tc-voz { font-weight: 700; text-align: right; }
.ap-tc-racun { text-align: right; }
.ap-tc-racun a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; color: var(--txt); }
.ap-tc-vr--izbrisano { opacity: .6; }
.ap-tc-znacka { padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--st-danger-bg); color: var(--st-danger-txt); }
@media (min-width: 768px) { .ap-tc-vr { grid-template-columns: 150px 120px 1fr 1fr 110px 1fr; align-items: center; } .ap-tc-voz, .ap-tc-racun { text-align: left; } }
.pd-pl-vir { display: block; font-size: 11px; color: var(--txt-2); }   /* KROG TOCENJE-1 (T2.3): vir kolicine v predaji (»iz točenj«) */

/* ── KROG MENI-1: barve ikon menija (slog V6a — ploscice nevtralne, barvna je SAMO ikona; odlocitev lastnika 18. 10. 2026).
      Porabnik: assets/css/meni.css (razredi .meni-i-*). Umirjeni toni, brez vijolicnih in indigo. ── */
:root,[data-theme="light"]{
  --meni-i-operativa:#B4532A; --meni-i-obrazci:#3B5B8C; --meni-i-odsotnosti:#4D7C6A; --meni-i-dopust:#4D7C6A;
  --meni-i-avtopark:#2F6F7E; --meni-i-plosca:#2F6F7E; --meni-i-dokumenti:#9A6B2F; --meni-i-vreme:#3D7AA8;
  --meni-i-okvara:#B4473F; --meni-i-menjava:#A8476A;
  --meni-i-nadzor:#52525B; --meni-i-admin:#52525B; --meni-i-enota:#52525B; --meni-i-uredi:#52525B;
  --meni-i-nadure:#3F6E8C;
  /* KROG PLOSCA-DOMA (4+, lastnik 20. 10. 2026): otok menija na belem ozadju — obroba in dvignjena senca (temna tema: kot kartica). */
  --meni-obroba:rgba(10,10,10,.10); --meni-senca:0 10px 30px rgba(10,10,10,.12), 0 2px 6px rgba(10,10,10,.06);
}
[data-theme="dark"]{
  --meni-i-operativa:#E8A27C; --meni-i-obrazci:#9DB4D8; --meni-i-odsotnosti:#9CC5B4; --meni-i-dopust:#9CC5B4;
  --meni-i-avtopark:#8EC3CE; --meni-i-plosca:#8EC3CE; --meni-i-dokumenti:#D9B27A; --meni-i-vreme:#9CC6E4;
  --meni-i-okvara:#E89A93; --meni-i-menjava:#E39BB5;
  --meni-i-nadzor:#C4C4CC; --meni-i-admin:#C4C4CC; --meni-i-enota:#C4C4CC; --meni-i-uredi:#C4C4CC;
  --meni-i-nadure:#9FC0D6;
  --meni-obroba:var(--card-border); --meni-senca:var(--shadow-card);
}

/* ── MOJE IZMENE / STATISTIKA (KROG MOJE-IZMENE, lastnik 20. 10. 2026) — seznam, podrobnost, »Ni dostopa« (.mj-*); statistika in znacke (.ms-*).
      Mobilno najprej; namizje: isti izris v sredinskem stolpcu do 560 px. Glava, zavihki in gumbi so v slogu aplikacije (nevtralni). ── */
.mj-stran { max-width: 560px; margin: 0 auto; }
.mj-prazno { padding: var(--sp-5) var(--sp-4); text-align: center; }
.mj-ni-podatka { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--txt-3); }
.mj-mesec { margin: 0 0 var(--sp-4); }
.mj-mesec-h, .mj-razdelek { margin: var(--sp-4) 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.mj-kartica, .mj-karta { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
.mj-karta { margin: 0 0 var(--sp-3); }
.mj-vrstica { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 14px; box-sizing: border-box; color: var(--txt); text-decoration: none; border-top: 1px solid var(--hairline); }
.mj-vrstica:first-child { border-top: 0; }
.mj-dan { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 54px; line-height: 1.1; white-space: nowrap; }
.mj-dan-ime { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--txt-3); }
.mj-dan-dat { font-size: 17px; font-weight: 800; }
.mj-znak { flex: 0 0 34px; width: 34px; height: 34px; box-sizing: border-box; border: 2px solid var(--txt); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.mj-sredina { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mj-naslov { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-pod { font-size: 12px; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mj-vrstica { padding-top: 8px; padding-bottom: 8px; }
.mj-puscica { flex: 0 0 auto; font-size: 18px; color: var(--txt-3); }
.mj-vec { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: var(--sp-3) 0 var(--sp-5); border: 1px solid var(--tab-bd); border-radius: 22px; color: var(--txt); text-decoration: none; font-size: 14px; font-weight: 600; background: var(--surface); }
.mj-letos { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: var(--sp-3) 0 var(--sp-2); padding: 12px 14px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-card); color: var(--txt); text-decoration: none; }
.mj-letos-h { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--txt-2); }
.mj-letos-telo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.mj-letos-mere { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mj-letos-st { font-size: 16px; font-weight: 800; }
.mj-letos-pod { font-size: 12px; color: var(--txt-2); }
.mj-zavihki { margin: var(--sp-3) 0 var(--sp-3); flex-wrap: nowrap; overflow-x: auto; }
.mj-vr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--hairline); font-size: 14px; }
.mj-karta > .mj-vr:first-child, .mj-int-glava + .mj-vr { border-top: 0; }
.mj-vr-l { color: var(--txt-2); min-width: 0; }
.mj-vr-d { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.mj-oseba { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--hairline); }
.mj-oseba:first-child { border-top: 0; }
.mj-krog { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.mj-oseba-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mj-oseba-ime { font-size: 14px; font-weight: 700; }
.mj-oseba-pod { font-size: 12px; color: var(--txt-2); }
.mj-oseba-cas { flex: 0 0 auto; font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.mj-dog { display: flex; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--hairline); font-size: 14px; }
.mj-dog:first-child { border-top: 0; }
.mj-dog-hm { flex: 0 0 44px; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.mj-dog-t { flex: 1 1 auto; min-width: 0; }
.mj-int-glava { display: flex; align-items: center; gap: 12px; padding: 12px 16px 6px; }
.mj-int-st { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--txt); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; box-sizing: border-box; }
.mj-int-cas { font-size: 14px; font-weight: 700; }
.mj-int-mat-h { margin: 6px 16px 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.mj-predaja { padding: 4px 0; }
.mj-popravek { margin: 0 4px var(--sp-3); font-size: 12px; color: var(--txt-2); }
.mj-ni { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: var(--sp-6) var(--sp-4); }
.mj-ni-ikona { font-size: 40px; color: var(--txt-2); }
.mj-ni-h { margin: 0; font-size: 18px; font-weight: 700; }
.mj-ni-p { margin: 0; font-size: 14px; color: var(--txt-2); max-width: 320px; }
.mj-ni-gumb { margin-top: var(--sp-3); min-height: 44px; }

/* ── MOJA STATISTIKA (KROG MOJE-IZMENE 2/3) — IMENSKA IZJEMA (lastnik, A2043): barvni zetoni --ms-* in razredi .ms-* SAMO za vsebino
      moje/statistika.php in kartico LETOS; glava, preklopnik in gumbi ostanejo nevtralni. Prelivi SVG prek razredov na <stop>. ── */
:root,[data-theme="light"]{
  /* POPRAVKI-21-10: svetli konci prelivov ploscic in krogov sodelavcev zatemnjeni tako, da ima bel napis proti OBEMA koncema >= 4,5 : 1 (meri MS5). */
  --ms-kartica-1:#EEF2FF; --ms-kartica-2:#FAF5FF; --ms-kartica-3:#FFF1F2; --ms-senca:rgba(67,56,202,.16);
  --ms-sij-a:#FB923C; --ms-sij-b:#F472B6;
  --ms-dan-1:#FDE68A; --ms-dan-2:#FB923C; --ms-dan-3:#F43F5E; --ms-noc-1:#A5B4FC; --ms-noc-2:#6366F1;
  --ms-stevilo-1:#4338CA; --ms-stevilo-2:#DB2777;
  --ms-rose-1:#E90727; --ms-rose-2:#E11D48; --ms-teal-1:#1B8376; --ms-teal-2:#0B8177; --ms-blue-1:#086FEF; --ms-blue-2:#2563EB; --ms-violet-1:#7E55F8; --ms-violet-2:#6D28D9;
  --ms-urad-1:#FDBA74; --ms-urad-2:#F97316; --ms-ted-1:#C4B5FD; --ms-ted-2:#7C3AED; --ms-tedv-1:#F9A8D4; --ms-tedv-2:#DB2777;
  --ms-kraj-1:#5EEAD4; --ms-kraj-2:#0D9488; --ms-vrsta-1:#FDA4AF; --ms-vrsta-2:#E11D48; --ms-mat-1:#93C5FD; --ms-mat-2:#2563EB;
  --ms-nu-0:#DC2626; --ms-nu-1:#F97316; --ms-nu-2:#EAB308; --ms-nu-3:#22C55E;
  --ms-sod1-1:#B45D03; --ms-sod1-2:#CA4C0A; --ms-sod2-1:#5664F6; --ms-sod2-2:#4F46E5; --ms-sod3-1:#118270; --ms-sod3-2:#0B8177;
  --ms-vz-0:#F97316; --ms-vz-1:#6366F1; --ms-vz-2:#14B8A6; --ms-vz-3:#EC4899; --ms-vz-4:#EAB308;
  --ms-tel:#F97316; --ms-psi:#8B5CF6; --ms-sled:rgba(10,10,10,.07); --ms-belo:#FFFFFF;
  --ms-bron-1:#F8D2AE; --ms-bron-2:#C47A45; --ms-bron-3:#8A4B24; --ms-srebro-1:#FFFFFF; --ms-srebro-2:#CBD5E1; --ms-srebro-3:#64748B;
  --ms-zlato-1:#FEF3C7; --ms-zlato-2:#FBBF24; --ms-zlato-3:#B45309; --ms-plat-1:#E0E7FF; --ms-plat-2:#A5B4FC; --ms-plat-3:#C084FC; --ms-plat-4:#EC4899;
  --ms-napredek:#6366F1; --ms-zaklenjeno:#D4D4D8; --ms-srebro-tx:#334155; --ms-senca-tx:rgba(0,0,0,.28);
  /* POPRAVKI-21-10 (+, A2056): TEMEN znak na svetli kovini (preliv medalje ostane); zaklenjena siva ima svoj znak. */
  --ms-bron-tx:#1A0D05; --ms-zlato-tx:#451A03; --ms-plat-tx:#1E1B4B; --ms-zaklenjeno-tx:#52525B;
}
[data-theme="dark"]{
  --ms-kartica-1:#262449; --ms-kartica-2:#1D1B33; --ms-kartica-3:#2B2035; --ms-senca:rgba(0,0,0,.45);
  --ms-sij-a:#FB923C; --ms-sij-b:#F472B6;
  --ms-dan-1:#FDE68A; --ms-dan-2:#FB923C; --ms-dan-3:#F43F5E; --ms-noc-1:#A5B4FC; --ms-noc-2:#6366F1;
  --ms-stevilo-1:#FFFFFF; --ms-stevilo-2:#C7D2FE;
  --ms-rose-1:#E90727; --ms-rose-2:#E11D48; --ms-teal-1:#1B8376; --ms-teal-2:#0B8177; --ms-blue-1:#086FEF; --ms-blue-2:#2563EB; --ms-violet-1:#7E55F8; --ms-violet-2:#6D28D9;
  --ms-urad-1:#FDBA74; --ms-urad-2:#F97316; --ms-ted-1:#C4B5FD; --ms-ted-2:#7C3AED; --ms-tedv-1:#F9A8D4; --ms-tedv-2:#DB2777;
  --ms-kraj-1:#5EEAD4; --ms-kraj-2:#0D9488; --ms-vrsta-1:#FDA4AF; --ms-vrsta-2:#E11D48; --ms-mat-1:#93C5FD; --ms-mat-2:#2563EB;
  --ms-nu-0:#DC2626; --ms-nu-1:#F97316; --ms-nu-2:#EAB308; --ms-nu-3:#22C55E;
  --ms-sod1-1:#B45D03; --ms-sod1-2:#CA4C0A; --ms-sod2-1:#5664F6; --ms-sod2-2:#4F46E5; --ms-sod3-1:#118270; --ms-sod3-2:#0B8177;
  --ms-vz-0:#F97316; --ms-vz-1:#6366F1; --ms-vz-2:#14B8A6; --ms-vz-3:#EC4899; --ms-vz-4:#EAB308;
  --ms-tel:#F97316; --ms-psi:#8B5CF6; --ms-sled:rgba(255,255,255,.09); --ms-belo:#FFFFFF;
  --ms-bron-1:#F8D2AE; --ms-bron-2:#C47A45; --ms-bron-3:#8A4B24; --ms-srebro-1:#FFFFFF; --ms-srebro-2:#CBD5E1; --ms-srebro-3:#64748B;
  --ms-zlato-1:#FEF3C7; --ms-zlato-2:#FBBF24; --ms-zlato-3:#B45309; --ms-plat-1:#E0E7FF; --ms-plat-2:#A5B4FC; --ms-plat-3:#C084FC; --ms-plat-4:#EC4899;
  --ms-napredek:#818CF8; --ms-zaklenjeno:#3F3F46; --ms-srebro-tx:#334155; --ms-senca-tx:rgba(0,0,0,.28);
  --ms-bron-tx:#1A0D05; --ms-zlato-tx:#451A03; --ms-plat-tx:#1E1B4B; --ms-zaklenjeno-tx:#D4D4D8;
}
.ms-ponovi { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--tab-bd); background: transparent; color: var(--txt-2); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
.ms-skrito { position: absolute; width: 0; height: 0; overflow: hidden; }
.ms-cela { grid-column: 1 / -1; }
.ms-glavna { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: var(--sp-3) 0; padding: 22px 16px 18px; border-radius: 28px;
  background: linear-gradient(150deg, var(--ms-kartica-1), var(--ms-kartica-2) 50%, var(--ms-kartica-3)); box-shadow: 0 16px 40px var(--ms-senca);
  isolation: isolate; -webkit-mask-image: linear-gradient(var(--ms-belo), var(--ms-belo)); }
[data-theme="dark"] .ms-glavna { background: linear-gradient(150deg, var(--ms-kartica-1), var(--ms-kartica-2) 55%, var(--ms-kartica-3)); }
.ms-sij { position: absolute; width: 180px; height: 180px; border-radius: 50%; filter: blur(48px); opacity: .35; pointer-events: none; }
.ms-sij--a { background: var(--ms-sij-a); top: -60px; left: -50px; }
.ms-sij--b { background: var(--ms-sij-b); bottom: -70px; right: -50px; }
.ms-obroc, .ms-ocena-st { display: block; }
.ms-obroc-lok { stroke-linecap: round; }
.ms-plos { stroke: none; }
.ms-obroc--velik { position: relative; max-width: 100%; height: auto; filter: drop-shadow(0 6px 14px var(--ms-senca)); }
.ms-obroc-sled { stroke: var(--ms-sled); }
.ms-glavna-sredina { position: absolute; top: 22px; left: 0; right: 0; height: 236px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ms-veliko { font-size: 58px; font-weight: 850; line-height: 1; background: linear-gradient(135deg, var(--ms-stevilo-1), var(--ms-stevilo-2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ms-glavna-pod { margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--txt-2); }
.ms-glavna-prazno { max-width: 150px; text-align: center; font-size: 14px; font-weight: 700; color: var(--txt-2); }
.ms-glavna-legenda, .ms-legenda { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; color: var(--txt-2); }
.ms-legenda { justify-content: flex-start; margin-top: 10px; font-size: 12px; }
.ms-legenda--stolpec { flex-direction: column; gap: 6px; margin-top: 0; }
.ms-leg { display: inline-flex; align-items: center; gap: 6px; }
.ms-leg strong { color: var(--txt); }
.ms-pika { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ms-pika--dan { background: linear-gradient(135deg, var(--ms-dan-1), var(--ms-dan-3)); }
.ms-pika--noc { background: linear-gradient(135deg, var(--ms-noc-1), var(--ms-noc-2)); }
.ms-s-dan1 { stop-color: var(--ms-dan-1); } .ms-s-dan2 { stop-color: var(--ms-dan-2); } .ms-s-dan3 { stop-color: var(--ms-dan-3); }
.ms-s-noc1 { stop-color: var(--ms-noc-1); } .ms-s-noc2 { stop-color: var(--ms-noc-2); }
.ms-s-urad1 { stop-color: var(--ms-urad-1); } .ms-s-urad2 { stop-color: var(--ms-urad-2); }
.ms-s-ted1 { stop-color: var(--ms-ted-1); } .ms-s-ted2 { stop-color: var(--ms-ted-2); } .ms-s-tedv1 { stop-color: var(--ms-tedv-1); } .ms-s-tedv2 { stop-color: var(--ms-tedv-2); }
.ms-s-kraj1 { stop-color: var(--ms-kraj-1); } .ms-s-kraj2 { stop-color: var(--ms-kraj-2); } .ms-s-vrsta1 { stop-color: var(--ms-vrsta-1); } .ms-s-vrsta2 { stop-color: var(--ms-vrsta-2); }
.ms-s-mat1 { stop-color: var(--ms-mat-1); } .ms-s-mat2 { stop-color: var(--ms-mat-2); }
.ms-s-tel { stop-color: var(--ms-tel); stop-opacity: .35; } .ms-s-tel0 { stop-color: var(--ms-tel); stop-opacity: 0; }
.ms-s-psi { stop-color: var(--ms-psi); stop-opacity: .35; } .ms-s-psi0 { stop-color: var(--ms-psi); stop-opacity: 0; }
.ms-ploscice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 var(--sp-3); }
.ms-pl { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 108px; padding: 14px; box-sizing: border-box; border-radius: 22px; color: var(--ms-belo); }
.ms-pl::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; top: -30px; right: -30px; background: var(--ms-belo); opacity: .18; }
.ms-pl--rose { background: linear-gradient(320deg, var(--ms-rose-1), var(--ms-rose-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--ms-rose-2) 35%, transparent); }
.ms-pl--teal { background: linear-gradient(320deg, var(--ms-teal-1), var(--ms-teal-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--ms-teal-2) 35%, transparent); }
.ms-pl--blue { background: linear-gradient(320deg, var(--ms-blue-1), var(--ms-blue-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--ms-blue-2) 35%, transparent); }
.ms-pl--violet { background: linear-gradient(320deg, var(--ms-violet-1), var(--ms-violet-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--ms-violet-2) 35%, transparent); }
.ms-pl { text-shadow: 0 1px 2px var(--ms-senca-tx); }
.ms-pl-h { font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.ms-pl-v { font-size: 30px; font-weight: 850; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ms-pl-p { font-size: 12px; font-weight: 600; }
.ms-karta { margin: 0 0 var(--sp-3); padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 22px; box-shadow: var(--shadow-card); }
.ms-h { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .07em; color: var(--txt-2); }
.ms-h--pod { margin-top: 16px; }
.ms-h-vrsta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ms-h-desno { font-size: 12px; color: var(--txt-3); }
.ms-p { margin: 8px 0 0; font-size: 13px; color: var(--txt-2); }
.ms-stolpci { display: block; overflow: visible; }
.ms-stolpec { transform-box: fill-box; transform-origin: 50% 100%; }
.ms-stolpec--vrh { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ms-dan-3) 60%, transparent)); }
.ms-stolpec--vrh-ted { filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--ms-tedv-2) 45%, transparent)); }
.ms-os { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.ms-os--7 span, .ms-os--6 span { flex: 1 1 0; text-align: center; }
.ms-top { margin: 0 0 10px; }
.ms-top-vr { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.ms-top-ime { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-top-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-trak { display: block; overflow: visible; }
.ms-trak-sled { fill: var(--ms-sled); }
.ms-trak-val { transform-box: fill-box; transform-origin: 0 50%; }
.ms-trak--prvi .ms-trak-val { filter: drop-shadow(0 3px 5px var(--ms-senca)); }
.ms-nujnost { display: block; border-radius: 9px; overflow: hidden; }
.ms-nu { transform-box: fill-box; transform-origin: 0 50%; }
.ms-nu--0 { fill: var(--ms-nu-0); background: var(--ms-nu-0); } .ms-nu--1 { fill: var(--ms-nu-1); background: var(--ms-nu-1); }
.ms-nu--2 { fill: var(--ms-nu-2); background: var(--ms-nu-2); } .ms-nu--3 { fill: var(--ms-nu-3); background: var(--ms-nu-3); }
.ms-ocene { display: flex; justify-content: space-between; gap: 6px; }
.ms-ocena { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; }
.ms-ocena-val { fill: var(--ms-napredek); transform-box: fill-box; transform-origin: 50% 100%; }
.ms-ocena-n { font-size: 14px; font-weight: 800; }
.ms-ocena-d { font-size: 11px; color: var(--txt-2); }
.ms-sodelavci { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.ms-sod { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 33%; text-align: center; }
.ms-sod-krog { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ms-belo); font-weight: 850; text-shadow: 0 1px 2px var(--ms-senca-tx); }
.ms-sod--1 .ms-sod-krog { width: 72px; height: 72px; font-size: 22px; background: linear-gradient(140deg, var(--ms-sod1-1), var(--ms-sod1-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--ms-sod1-2) 40%, transparent); }
.ms-sod--2 .ms-sod-krog { width: 56px; height: 56px; font-size: 17px; background: linear-gradient(140deg, var(--ms-sod2-1), var(--ms-sod2-2)); }
.ms-sod--3 .ms-sod-krog { width: 50px; height: 50px; font-size: 15px; background: linear-gradient(320deg, var(--ms-sod3-1), var(--ms-sod3-2)); }
.ms-sod-ime { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.ms-sod-n { font-size: 11.5px; color: var(--txt-2); }
.ms-vozila { display: flex; align-items: center; gap: 16px; }
.ms-krof { flex: 0 0 100px; }
.ms-vz--0 { stroke: var(--ms-vz-0); background: var(--ms-vz-0); } .ms-vz--1 { stroke: var(--ms-vz-1); background: var(--ms-vz-1); } .ms-vz--2 { stroke: var(--ms-vz-2); background: var(--ms-vz-2); }
.ms-vz--3 { stroke: var(--ms-vz-3); background: var(--ms-vz-3); } .ms-vz--4 { stroke: var(--ms-vz-4); background: var(--ms-vz-4); }
.ms-crte { display: block; overflow: visible; }
.ms-crta { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ms-crta--tel { stroke: var(--ms-tel); fill: var(--ms-tel); background: var(--ms-tel); }
.ms-crta--psi { stroke: var(--ms-psi); fill: var(--ms-psi); background: var(--ms-psi); }
polyline.ms-crta { fill: none; }
.ms-obroc--mali .ms-obroc-dan { stroke: var(--ms-dan-2); } .ms-obroc--mali .ms-obroc-noc { stroke: var(--ms-noc-2); }
/* ANIMACIJE: tecejo SAME ob nalaganju (koncno stanje je v izrisu — brez skripta je vse vidno), gumb »Ponovi« jih sprozi znova
   (moje.js odvzame in vrne razred .ms-igra). Zamik po stolpcu nosi --ms-i (moje.js iz data-i). Zmanjsano gibanje = brez animacij. */
@keyframes ms-prilet { from { opacity: 0; transform: translateY(16px); } }
@keyframes ms-rast { from { transform: scaleY(0); } }
@keyframes ms-rast-x { from { transform: scaleX(0); } }
@keyframes ms-lok { from { stroke-dashoffset: 100; } }
@keyframes ms-poskok { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } }
@keyframes ms-sij-prelet { from { transform: translateX(-160%) rotate(20deg); } to { transform: translateX(300%) rotate(20deg); } }
.ms-igra .ms-prileti { animation: ms-prilet .55s ease-out backwards; }
.ms-igra .ms-stolpec, .ms-igra .ms-ocena-val { animation: ms-rast .6s ease-out backwards; animation-delay: calc(var(--ms-i, 0) * 25ms); }
.ms-igra .ms-trak-val, .ms-igra .ms-nu { animation: ms-rast-x .7s ease-out backwards; animation-delay: calc(var(--ms-i, 0) * 60ms); }
.ms-igra .ms-obroc-dan { animation: ms-lok 1.2s ease-out backwards; }
.ms-igra .ms-obroc-noc { animation: ms-lok 1.2s .25s ease-out backwards; }
.ms-igra .ms-crta { stroke-dasharray: 100; animation: ms-lok 1.4s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
  .ms-igra .ms-prileti, .ms-igra .ms-stolpec, .ms-igra .ms-ocena-val, .ms-igra .ms-trak-val, .ms-igra .ms-nu, .ms-igra .ms-obroc-dan, .ms-igra .ms-obroc-noc, .ms-igra .ms-crta { animation: none; }
}
/* ── ZNACKE-MEDALJE (KROG MOJE-IZMENE 3/3) — ista imenska izjema A2043; stopnje bron · srebro · zlato · platina prek zetonov --ms-*. ── */
.ms-znacke-karta { padding-bottom: 14px; }
.ms-znacke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.ms-znacka { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.ms-medalja { position: relative; width: 62px; height: 76px; }
.ms-medalja-krog { position: relative; z-index: 1; display: block; }
.ms-medalja-rob { stroke: var(--ms-belo); stroke-opacity: .85; }
.ms-medalja-siva { fill: var(--ms-zaklenjeno); }
.ms-medalja-napredek { stroke: var(--ms-napredek); }
.ms-medalja-znak { position: absolute; z-index: 2; top: 0; left: 0; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; gap: 1px;
  font-size: 15px; font-weight: 850; color: var(--ms-belo); font-variant-numeric: tabular-nums; }
.ms-medalja-znak .ti { font-size: 22px; }
.ms-zvezda.ti { position: absolute; top: 4px; right: 4px; font-size: 13px; color: var(--ms-zlato-1); }
.ms-znacka--zaklenjena .ms-medalja-znak { color: var(--ms-zaklenjeno-tx); }
.ms-znacka--srebro .ms-medalja-znak { color: var(--ms-srebro-tx); }
.ms-znacka--bron .ms-medalja-znak { color: var(--ms-bron-tx); }
.ms-znacka--zlato .ms-medalja-znak { color: var(--ms-zlato-tx); }
.ms-znacka--platina .ms-medalja-znak { color: var(--ms-plat-tx); }
.ms-trakova { position: absolute; left: 50%; bottom: 0; width: 34px; height: 22px; transform: translateX(-50%); }
.ms-trak-l, .ms-trak-d { position: absolute; bottom: 0; width: 14px; height: 22px; border-radius: 2px 2px 3px 3px; background: var(--ms-zaklenjeno); }
.ms-trak-l { left: 2px; transform: rotate(14deg); } .ms-trak-d { right: 2px; transform: rotate(-14deg); }
.ms-znacka--bron .ms-trak-l, .ms-znacka--bron .ms-trak-d, .ms-pika.ms-znacka--bron { background: linear-gradient(160deg, var(--ms-bron-1), var(--ms-bron-3)); }
.ms-znacka--srebro .ms-trak-l, .ms-znacka--srebro .ms-trak-d, .ms-pika.ms-znacka--srebro { background: linear-gradient(160deg, var(--ms-srebro-2), var(--ms-srebro-3)); }
.ms-znacka--zlato .ms-trak-l, .ms-znacka--zlato .ms-trak-d, .ms-pika.ms-znacka--zlato { background: linear-gradient(160deg, var(--ms-zlato-2), var(--ms-zlato-3)); }
.ms-znacka--platina .ms-trak-l, .ms-znacka--platina .ms-trak-d, .ms-pika.ms-znacka--platina { background: linear-gradient(160deg, var(--ms-plat-2), var(--ms-plat-4)); }
.ms-znacka--bron .ms-medalja-krog { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--ms-bron-2) 45%, transparent)); }
.ms-znacka--srebro .ms-medalja-krog { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--ms-srebro-3) 40%, transparent)); }
.ms-znacka--zlato .ms-medalja-krog { filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--ms-zlato-2) 55%, transparent)); }
.ms-znacka--platina .ms-medalja-krog { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--ms-plat-3) 55%, transparent)); }
.ms-medalja-sij { position: absolute; z-index: 3; top: 0; left: 0; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; isolation: isolate; pointer-events: none; }
.ms-medalja-sij::after { content: ''; position: absolute; top: -10px; left: 0; width: 40%; height: 82px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-belo) 55%, transparent), transparent); transform: translateX(-160%) rotate(20deg); }
.ms-s-bron1 { stop-color: var(--ms-bron-1); } .ms-s-bron2 { stop-color: var(--ms-bron-2); } .ms-s-bron3 { stop-color: var(--ms-bron-3); }
.ms-s-srebro1 { stop-color: var(--ms-srebro-1); } .ms-s-srebro2 { stop-color: var(--ms-srebro-2); } .ms-s-srebro3 { stop-color: var(--ms-srebro-3); }
.ms-s-zlato1 { stop-color: var(--ms-zlato-1); } .ms-s-zlato2 { stop-color: var(--ms-zlato-2); } .ms-s-zlato3 { stop-color: var(--ms-zlato-3); }
.ms-s-plat1 { stop-color: var(--ms-plat-1); } .ms-s-plat2 { stop-color: var(--ms-plat-2); } .ms-s-plat3 { stop-color: var(--ms-plat-3); } .ms-s-plat4 { stop-color: var(--ms-plat-4); }
.ms-znacka-ime { font-size: 12px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.ms-znacka-pod { font-size: 11px; color: var(--txt-2); line-height: 1.25; overflow-wrap: anywhere; }
.ms-legenda--stopnje { justify-content: center; margin-top: 14px; }
.ms-igra .ms-znacka { animation: ms-poskok .55s ease-out backwards; animation-delay: calc(var(--ms-i, 0) * 50ms); }
.ms-igra .ms-medalja-sij::after { animation: ms-sij-prelet 3.2s ease-in-out 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .ms-igra .ms-znacka, .ms-igra .ms-medalja-sij::after { animation: none; } }

/* ── PROMET (KROG PROMET, lastnik 21. 10. 2026, razlicica C) — kartica na plosci med izmeno (.pr-kartica), aplikacija /promet/ (.pr-*).
      Samo obstojeci zetoni; barva vrste = statusni zeton (nesreca in zapora --red, zastoj --warn, dela in cestisce --info, drugo --txt-2). ── */
.pr-v--nesreca, .pr-v--zapora { color: var(--red); }
.pr-v--zastoj { color: var(--warn); }
.pr-v--dela, .pr-v--cestisce { color: var(--info); }
.pr-v--drugo, .pr-v--rocno { color: var(--txt-2); }
.pl-izmena-telo .pl-k--promet.pr-kartica { min-height: 132px; padding: 0; }
.pr-kartica-a { display: flex; flex-direction: column; gap: 3px; height: 100%; min-height: 132px; padding: 10px 12px; box-sizing: border-box; color: var(--txt); text-decoration: none; }
.pr-kartica-glava { padding-right: 0; }
/* »i« LEVO od »›« (puscica ostane na desnem robu kot pri Vremenu); dotik 44 x 44 px, zgoraj sega v razmik med karticami. */
.pr-i { position: absolute; top: -8px; right: 22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--txt-3); text-decoration: none; font-size: 14px; }
.pr-vrstice { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pr-vrstica { display: flex; align-items: center; gap: 5px; min-width: 0; line-height: 1.32; }
.pr-ik { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.pr-lok { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-do { flex: 0 0 auto; font-size: 9.5px; color: var(--txt-3); white-space: nowrap; }
.pr-prazno { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10.5px; color: var(--txt-2); }
.pr-drobno { font-size: 9.5px; line-height: 1.3; color: var(--txt-3); overflow-wrap: anywhere; }
.pr-cestisce { margin-top: auto; color: var(--txt-2); }
/* KROG PROMET (+), A2066: ob poledici je besedilo berljivo (--txt, krepko), statusna barva SAMO na ikoni snezinke; brez poledice vse nevtralno. */
.pr-cestisce--poledica { color: var(--txt); font-weight: 700; }
.pr-cestisce--poledica .ti { color: var(--warn); }
.pr-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-legenda-v { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pr-legenda-v--opomba { font-size: 12.5px; color: var(--txt-2); }
.pr-legenda-v .pr-ik { font-size: 18px; width: 22px; text-align: center; }
.pr-legenda-okno { padding: 14px 16px 18px; }
.pr-stran { max-width: 560px; margin: 0 auto; }
.pr-prazno-stran { padding: var(--sp-5) var(--sp-4); text-align: center; }
.pr-razdelek { margin: var(--sp-4) 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-2); }
.pr-karta { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
.pr-karta--legenda { padding: 14px 16px; }
.pr-ni { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--txt-2); }
.pr-vnos { padding: 12px 16px; border-top: 1px solid var(--hairline); }
.pr-vnos:first-child { border-top: 0; }
.pr-vnos-glava { display: flex; align-items: center; gap: 8px; }
.pr-vnos-vrsta { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--txt-2); }
.pr-vnos-cas { margin-left: auto; font-size: 12px; color: var(--txt-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-vnos-lok { margin: 4px 0 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.pr-vnos-opis { margin: 3px 0 0; font-size: 13px; color: var(--txt); overflow-wrap: anywhere; }
.pr-vnos-avtor { margin: 3px 0 0; font-size: 12px; color: var(--txt-3); }
.pr-vnos-dejanja { display: flex; gap: 8px; margin-top: 8px; }
.pr-obr-v { margin: 0; }
.pr-gumb { min-height: 44px; }
.pr-vir { margin: 8px 4px 0; font-size: 12px; color: var(--txt-3); }
.pr-izid { margin: var(--sp-3) 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--card-border); font-size: 14px; }
.pr-izid--napaka { color: var(--red); }
.pr-list { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--bg) 40%, transparent); }
.pr-list-okno { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box;
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-card); }
.pr-list-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pr-list-naslov { margin: 0; font-size: 17px; font-weight: 700; }
.pr-napake { margin: 0 0 8px; padding: 10px 14px 10px 28px; border-radius: 10px; background: var(--st-danger-bg); color: var(--st-danger-txt); font-size: 13px; }
.pr-obrazec { display: flex; flex-direction: column; gap: 6px; }
.pr-polje { margin: 0; padding: 0; border: 0; }
.pr-oznaka { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--txt-2); }
.pr-izbire { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pr-izbira input { position: absolute; opacity: 0; pointer-events: none; }
.pr-izbira span { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid var(--tab-bd); border-radius: 19px; font-size: 14px; color: var(--tab-tx); background: var(--surface); cursor: pointer; }
.pr-izbira input:checked + span { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); }
.pr-izbira input:checked + span .pr-ik { color: var(--accent-tx); }
.pr-izbira input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-vhod { width: 100%; box-sizing: border-box; min-height: 38px; padding: 8px 10px; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: 16px; font-family: inherit; }
.pr-vhod--vec { min-height: 76px; resize: vertical; }
.pr-opomba { margin: 0; font-size: 12px; color: var(--txt-2); }
.pr-shrani { margin-top: 12px; min-height: 44px; }
.pr-obr-izbris { margin-top: 10px; }
.pr-dodaj { min-height: 44px; }
/* PROMET (2/3): razdelek NAP.si v Admin -> Opravila. */
.pr-adm { margin-top: 1.4rem; }
.pr-adm-karta { padding: .9rem 1.2rem; margin-bottom: 10px; }
.pr-adm-opomba { margin: .3rem 0 .8rem; font-size: 12px; color: var(--txt-2); }
.pr-adm-polmer { width: 64px; min-height: 38px; padding: 6px 8px; box-sizing: border-box; font-size: 16px; font-family: inherit;
  background: var(--surface); color: var(--txt); border: 1px solid var(--tab-bd); border-radius: 8px; }
.pr-adm-preizkus { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1.2rem; }
.pr-adm-preizkus .pr-adm-opomba { margin: 0; }

/* ── TABLA · ZAVIHEK TV (KROG PROMET-2, A2070): izredna obvestila, sporocilo na tablo, zdaj na TV. Samo obstojeci zetoni. ── */
.obtv-zavihki { margin-top: var(--sp-2); }
.obtv-stran { max-width: 700px; margin: 0 auto; }
/* posnema sosednjo kartico Table »Objavi obvestilo« (radij 14, odmik 16/18, naslov 15/700, oznake 12/500) — pregled prikaza PROMET-2, N2 */
.obtv-karta { margin-top: var(--sp-3); padding: 16px 18px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow-card); }
.obtv-naslov { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--txt); }
.obtv-obrazec { display: flex; flex-direction: column; gap: 6px; }
.obtv-oznaka { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--txt-2); }
.obtv-vhod { width: 100%; box-sizing: border-box; min-height: 38px; padding: 8px 10px; border: 1px solid var(--tab-bd); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: 16px; font-family: inherit; }
.obtv-vhod--vec { min-height: 60px; resize: vertical; }
.obtv-dvoje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.obtv-opomba { margin: 4px 0 0; font-size: 12px; color: var(--txt-2); }
.obtv-gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.obtv-gumb { min-height: 44px; }
.obtv-v { margin: 0; }
.obtv-prazno { margin: 10px 0 0; font-size: 13px; color: var(--txt-2); }
.obtv-vrstica { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.obtv-vrstica--tiho .obtv-besedilo { font-weight: 600; }
.obtv-vrstica-glava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obtv-znacka { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 700; background: var(--st-info-bg); color: var(--st-info-txt); }
.obtv-znacka--zdaj { background: var(--st-danger-bg); color: var(--st-danger-txt); }
.obtv-cas { margin: 0; font-size: 12px; color: var(--txt-2); font-variant-numeric: tabular-nums; }   /* --txt-3 je imel premajhen kontrast (N1) */
.obtv-besedilo { margin: 4px 0 0; font-size: 15px; color: var(--txt); overflow-wrap: anywhere; }
.obtv-izid { margin: var(--sp-3) 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--card-border); font-size: 14px; }
.obtv-izid--napaka { color: var(--red); }
@media (max-width: 420px) { .obtv-dvoje { grid-template-columns: minmax(0, 1fr); } }
