/* ============================================================================
   WorkDZ · predlog novega videza (2026-09)
   Sistem: črnilo + papir + en poudarek (rumeni marker), Newsreader / Schibsted
   Grotesk / IBM Plex Mono, lasten linijski nabor ikon (mreža 24, poteza 1,75).
   Pravila: barve SAMO prek žetonov; marker nikoli kot barva besedila;
   pomenske barve (ok/čaka/zamuja/info) so ločene od poudarka.
   ========================================================================== */

:root {
  /* palete (svetlo) */
  --ink: #15161A;            /* črnilo – besedilo, primarni gumbi, logotip */
  --ink-2: #3A3D45;
  --muted: #5C6270;          /* grafit – drugotno besedilo */
  --faint: #686D7B;          /* drobno besedilo: AA 4,6:1 na papirju */
  --ground: #F2F3F5;         /* papir – podlaga aplikacije */
  --surface: #FFFFFF;        /* list – plošče */
  --surface-2: #F7F8FA;      /* rahlo dvignjeno / vrstica ob lebdenju */
  --line: #E2E4E9;           /* črta */
  --line-2: #D3D6DD;
  --mark: #FFE24A;           /* marker – EDINI poudarek (ozadje za besedilo) */
  --mark-ink: #15161A;
  --mark-top: 58%;           /* kje se pas markerja začne (temna tema: nižje, da svetlo besedilo ostane berljivo) */
  --ok: #177A47;   --ok-bg: #E7F5EC;
  --wait: #8F5A0E; --wait-bg: #FBF0DC;
  --late: #C4352B; --late-bg: #FBE9E7;
  --info: #2F66C9; --info-bg: #E8EFFB;
  --focus: #2F66C9;
  --seg-on: var(--surface);  /* izbrani segment (temna tema: svetlejši od tira) */
  --paper: #FFFFFF;         /* list papirja (PDF, podpis) — enak v obeh temah */
  --paper-ink: #15161A;
  --shadow-1: 0 1px 2px rgba(21,22,26,.06);
  --shadow-2: 0 10px 30px -8px rgba(21,22,26,.18), 0 2px 6px rgba(21,22,26,.06);
  --scrim: rgba(21,22,26,.32);

  /* tipografija */
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-11: 11px; --t-12: 12.5px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px; --t-38: 38px;

  /* oblika */
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-pill: 999px;
  --gap: 16px;
  --side-w: 236px;
  --top-h: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ECEDF0; --ink-2: #C9CBD2; --muted: #9EA3AE; --faint: #8A8F9B;
    --ground: #0F1013; --surface: #17191E; --surface-2: #1D2026;
    --line: #2A2D34; --line-2: #363A43;
    --mark: #E2C43B; --mark-ink: #15161A; --mark-top: 80%;
    --ok: #4CC482; --ok-bg: #16301F; --wait: #E0A94A; --wait-bg: #33260F;
    --late: #F07A6E; --late-bg: #3A1A17; --info: #7AA5F2; --info-bg: #17243A;
    --focus: #7AA5F2; --seg-on: #2A2D34;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 12px 34px -8px rgba(0,0,0,.6);
    --scrim: rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ECEDF0; --ink-2: #C9CBD2; --muted: #9EA3AE; --faint: #8A8F9B;
  --ground: #0F1013; --surface: #17191E; --surface-2: #1D2026;
  --line: #2A2D34; --line-2: #363A43;
  --mark: #E2C43B; --mark-ink: #15161A; --mark-top: 80%;
  --ok: #4CC482; --ok-bg: #16301F; --wait: #E0A94A; --wait-bg: #33260F;
  --late: #F07A6E; --late-bg: #3A1A17; --info: #7AA5F2; --info-bg: #17243A;
  --focus: #7AA5F2; --seg-on: #2A2D34;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 12px 34px -8px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---------- osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 400 var(--t-14)/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" 1; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* programski fokus po izrisu (naslov strani / pogled) ne riše obrobe čez ves pogled */
#view:focus, .view:focus, .view h1[tabindex="-1"]:focus { outline: none; }
.skip { position: fixed; left: 12px; top: 8px; z-index: 90; padding: 8px 14px; border-radius: var(--r-m); border: 0; background: var(--ink); color: var(--ground); font-weight: 600; cursor: pointer; transform: translateY(-160%); }
.skip:focus { transform: none; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i.s16 { width: 16px; height: 16px; } .i.s18 { width: 18px; height: 18px; } .i.s24 { width: 24px; height: 24px; } .i.s32 { width: 32px; height: 32px; stroke-width: 1.5; }
/* Schibsted Grotesk v tabelarnih števkah razširi tudi ločila (»2 . 635 , 20 €«), zato jih v besedilni pisavi ne vklapljamo;
   razreda ostaneta zaradi združljivosti. Tabelarne števke so dovoljene v Newsreaderju (.stat .v) in IBM Plex Mono. */
.num, .tnum { font-variant-numeric: normal; }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- podpis: marker ---------- */
.mark {
  background: linear-gradient(transparent var(--mark-top), var(--mark) var(--mark-top), var(--mark) 94%, transparent 94%);
  background-repeat: no-repeat; background-size: 100% 100%;
  padding: 0 .12em; margin: 0 -.06em; color: inherit; text-decoration: none; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a.mark:hover { background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 92%, transparent 92%); color: var(--mark-ink); }
.draw .mark { background-size: 0% 100%; animation: mark-draw .7s cubic-bezier(.3,.7,.2,1) forwards; }
.draw .mark:nth-of-type(2) { animation-delay: .12s; } .draw .mark:nth-of-type(3) { animation-delay: .24s; }
.draw .mark:nth-of-type(4) { animation-delay: .36s; } .draw .mark:nth-of-type(5) { animation-delay: .48s; }
.draw .mark:nth-of-type(n+6) { animation-delay: .6s; }
@keyframes mark-draw { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .draw .mark { background-size: 100% 100%; } }

/* ---------- ovoj aplikacije ---------- */
.demo-strip { display: flex; align-items: center; gap: 10px; padding: 6px 18px; white-space: nowrap; overflow: hidden; font-size: var(--t-12); background: var(--ink); color: var(--ground); }
.demo-strip b { font-weight: 600; } .demo-strip .sp { flex: 1; }
.demo-strip a { color: inherit; opacity: .78; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .demo-strip a:hover { opacity: 1; }
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - 30px); }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 14px 12px 20px; border-right: 1px solid var(--line); background: var(--ground); display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 50%; }
.brand b { font: 600 15px/1 var(--f-ui); letter-spacing: -.01em; }
.brand span { display: block; font-size: var(--t-11); color: var(--muted); margin-top: 3px; letter-spacing: .01em; }
.nav-sec { margin: 14px 8px 4px; font-size: var(--t-11); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.nav { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-weight: 500; position: relative; }
.nav .i { color: var(--muted); }
.nav:hover { background: var(--surface); color: var(--ink); } .nav:hover .i { color: var(--ink); }
.nav .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav.on { color: var(--ink); font-weight: 600; }
.nav.on .i { color: var(--ink); }
.nav.on .lbl { background: linear-gradient(transparent var(--mark-top), var(--mark) var(--mark-top), var(--mark) 95%, transparent 95%); flex: 0 1 auto; }
.nav .cnt { margin-left: auto; font-size: var(--t-11); font-weight: 600; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.nav .cnt.hot { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.side-foot { margin-top: auto; padding: 14px 8px 0; font-size: var(--t-11); color: var(--faint); }
.sf-b { display: flex; align-items: center; gap: 8px; margin: 0 0 8px -2px; padding: 4px 6px; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); font-size: var(--t-12); font-weight: 500; cursor: pointer; }
.sf-b:hover { background: var(--surface); color: var(--ink); }
.sf-col { align-self: flex-end; margin-top: 8px; }
.nav-ed { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-m); }
.nav-ed li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.nav-ed li:last-child { border-bottom: 0; } .nav-ed .grip { color: var(--faint); display: inline-flex; cursor: grab; }
/* ročno skrčen meni (enako kot ozek zaslon) */
.app.rail { --side-w: 68px; }
.app.rail .side .lbl, .app.rail .side .nav-sec, .app.rail .brand div, .app.rail .side-foot, .app.rail .nav .cnt { display: none; }
.app.rail .nav { justify-content: center; padding: 9px; } .app.rail .nav.on { background: var(--surface); box-shadow: inset 0 -2px 0 var(--mark); }
.app.rail .brand { justify-content: center; padding-bottom: 10px; } .app.rail .sf-col { align-self: center; }
.app.rail .nav .cnt.hot { display: block; position: absolute; top: 5px; right: 9px; width: 8px; height: 8px; min-width: 0; padding: 0; font-size: 0; border: 0; background: var(--late); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.search { flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: text; }
.search input { border: none; outline: none; background: none; flex: 1; min-width: 0; color: var(--ink); }
.search kbd { font: 500 11px var(--f-mono); color: var(--faint); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.top .sp { flex: 1; }
.presence { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-weight: 500; cursor: pointer; white-space: nowrap; flex: none; }
.presence .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.presence.in .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.presence.brk .dot { background: var(--wait); box-shadow: 0 0 0 3px var(--wait-bg); }
.presence .pico { display: none; color: var(--muted); } .presence.in .pico { color: var(--ok); } .presence.brk .pico { color: var(--wait); }
.stw { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--info); font-weight: 600; font-size: var(--t-12); text-decoration: none; white-space: nowrap; flex: none; }
.stw:hover { box-shadow: inset 0 0 0 1px var(--info); } .stw[hidden] { display: none; }
.presence .tnum { color: var(--muted); font-size: var(--t-12); }
.ibtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-m); border: 1px solid transparent; background: none; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.ibtn:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.ibtn[disabled], .ibtn.off { opacity: .35; cursor: default; background: none; border-color: transparent; pointer-events: none; }
.ibtn .badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--late); color: var(--ground); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.ava { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font: 600 12px var(--f-ui); overflow: hidden; flex: none; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava.s24 { width: 24px; height: 24px; font-size: 10px; } .ava.s40 { width: 40px; height: 40px; font-size: 14px; } .ava.s56 { width: 56px; height: 56px; font-size: 18px; }
.avabtn { border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; }

.view { padding: 28px 32px 64px; max-width: 1320px; width: 100%; }
.view.wide { max-width: none; }

/* ---------- glava strani ---------- */
.ph { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ph .tx { flex: 1; min-width: 240px; }
.eyebrow { font-size: var(--t-11); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.eyebrow a { text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; } .eyebrow a:hover { color: var(--ink); }
.eyebrow a .i { margin-left: -3px; } .eyebrow .ey-sep { color: var(--faint); font-weight: 500; }
.eyebrow .ey-code { font: 500 12px/1 var(--f-mono); letter-spacing: -.01em; text-transform: none; color: var(--ink-2); }
.title { font: 500 var(--t-38)/1.08 var(--f-display); font-variation-settings: "opsz" 60; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.lede { margin: 8px 0 0; color: var(--muted); font-size: var(--t-16); max-width: 70ch; text-wrap: pretty; }
.ph .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- gumbi ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--ink-2); }
.btn.pri { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn.pri:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.ghost { border-color: transparent; background: none; } .btn.ghost:hover { background: var(--surface); border-color: var(--line); }
.btn.danger { color: var(--late); } .btn.danger:hover { border-color: var(--late); }
.btn.sm { height: 30px; padding: 0 10px; font-size: var(--t-12); gap: 6px; }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- plošče, mreže ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.panel > .hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel > .hd h3 { font: 600 var(--t-14)/1.2 var(--f-ui); margin: 0; }
.panel > .hd .sub { font-size: var(--t-12); color: var(--muted); }
.panel > .hd .sp { flex: 1; }
.panel > .bd { padding: 16px 18px; }
.panel > .bd.flush { padding: 0; }
.panel > .ft { padding: 10px 18px; border-top: 1px solid var(--line); font-size: var(--t-12); color: var(--muted); display: flex; gap: 10px; align-items: center; }
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sep { height: 1px; background: var(--line); margin: 14px 0; }
.sample-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--wait); background: var(--wait-bg); padding: 1px 6px; border-radius: 4px; }

/* ---------- oznake stanja, žetoni ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .pill.ok::before { background: var(--ok); }
.pill.wait { background: var(--wait-bg); color: var(--wait); border-color: transparent; } .pill.wait::before { background: var(--wait); }
.pill.late { background: var(--late-bg); color: var(--late); border-color: transparent; } .pill.late::before { background: var(--late); }
.pill.info { background: var(--info-bg); color: var(--info); border-color: transparent; } .pill.info::before { background: var(--info); }
.pill.plain::before { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--t-12); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
/* izbran filter je tih (en črn gumb na zaslonu = glavno dejanje) */
.chip.on { background: var(--surface-2); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip .n { color: var(--faint); font-weight: 600; } .chip.on .n { color: var(--muted); }
.code { font: 500 12px/1 var(--f-mono); padding: 4px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; letter-spacing: -.01em; text-decoration: none; }
a.code:hover { border-color: var(--ink-2); color: var(--ink); }
.tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ---------- zavihki, segmenti ---------- */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { position: relative; padding: 10px 0 11px; text-decoration: none; color: var(--muted); font-weight: 500; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 600; }
.tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.tabs a .n { font-size: var(--t-11); color: var(--faint); font-weight: 600; }
.tabs.ovf:not(.end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); gap: 2px; }
.seg button, .seg a { height: 28px; padding: 0 11px; border: none; border-radius: 7px; background: none; color: var(--muted); font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); }
.seg .on { background: var(--seg-on); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); font-weight: 600; }

/* ---------- tabele ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: var(--t-11); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .r, .tbl th.r { text-align: right; } .tbl .nw { white-space: nowrap; } .tbl .w1 { width: 1%; white-space: nowrap; }
.tbl .main { font-weight: 500; } .tbl .sub { display: block; font-size: var(--t-12); color: var(--muted); margin-top: 1px; }
.tbl tfoot td { font-weight: 600; border-top: 1px solid var(--line-2); border-bottom: none; }
.money { white-space: nowrap; } .money.neg { color: var(--late); } .money.pos { color: var(--ok); }
/* skupine vrstic (B.table groups) */
.tbl tr.grp td, .tbl tbody tr.grp:hover td { padding: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tbl tbody.grp-body tr:last-child td { border-bottom: 1px solid var(--line); } .tbl tbody.grp-body:last-child tr:last-child td { border-bottom: none; }
.tbl tbody.shut tr:not(.grp) { display: none; } .tbl tbody.shut:last-child tr.grp td { border-bottom: none; }
.grp-b { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border: 0; background: none; cursor: pointer; text-align: left; font-size: var(--t-11); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.grp-b:hover { color: var(--ink); } .grp-b .i { color: var(--faint); transition: transform .15s; } .tbl tbody.shut .grp-b .i { transform: rotate(-90deg); }
.grp-b .n { letter-spacing: 0; color: var(--muted); } .grp-b .gs { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--t-12); color: var(--muted); }
.grp-b .sp { flex: 1; } .grp-b .gsum { text-transform: none; letter-spacing: 0; font-size: var(--t-12); color: var(--ink-2); }
@media (max-width: 1180px) { .tbl .hx { display: none; } }
@media (max-width: 720px) { .tbl .hm { display: none; } }

/* ---------- vrste (queue), seznami ---------- */
.queue { list-style: none; margin: 0; padding: 0; }
.qi { display: flex; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
.qi:last-child { border-bottom: none; }
a.qi:hover, .qi.click:hover { background: var(--surface-2); cursor: pointer; }
.qi .ico { width: 36px; height: 36px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.qi .ico.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .qi .ico.wait { background: var(--wait-bg); color: var(--wait); border-color: transparent; }
.qi .ico.late { background: var(--late-bg); color: var(--late); border-color: transparent; } .qi .ico.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.qi .bd { flex: 1; min-width: 0; }
.qi .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi .m { font-size: var(--t-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi .as { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.qi .go { color: var(--faint); }

/* ---------- ključ/vrednost ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 500; min-width: 0; }

/* ---------- številske kartice (B.stat / B.stats) ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); color: var(--ink); text-decoration: none; text-align: left; font: inherit; }
a.stat, button.stat { cursor: pointer; } a.stat:hover, button.stat:hover { border-color: var(--line-2); }
.stat.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.stat .l { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 600; color: var(--muted); min-width: 0; }
.stat .l .i { color: var(--faint); }
.stat .v { font: 500 var(--t-28)/1.1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v small { font: 500 var(--t-14)/1 var(--f-ui); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.stat.t-ok .v { color: var(--ok); } .stat.t-wait .v { color: var(--wait); } .stat.t-late .v { color: var(--late); } .stat.t-info .v { color: var(--info); }
.stat .s { font-size: var(--t-12); color: var(--muted); line-height: 1.4; }

/* ---------- izbirnik obdobja (B.period) ---------- */
.per { display: inline-flex; align-items: center; gap: 2px; }
.per .ibtn { width: 32px; height: 32px; }
.per-l { height: 32px; padding: 0 8px; border: 0; background: none; border-radius: var(--r-s); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); }
.per-l:hover, .per-l[aria-expanded="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } .per-l .i { color: var(--muted); }
.per-mp { width: 232px; padding: 2px; }
.per-mp-h { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px; }
.per-mp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.per-mp-g a, .per-mp-g span { height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-weight: 500; color: var(--ink-2); }
.per-mp-g a:hover { border-color: var(--ink-2); color: var(--ink); }
.per-mp-g a.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.per-mp-g span { color: var(--faint); opacity: .6; }

/* ---------- opombe in stikalo ---------- */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-12); color: var(--ink-2); line-height: 1.45; }
.callout > .i { flex: none; color: var(--muted); width: 16px; height: 16px; margin-top: 1px; }
.callout.warn { background: var(--wait-bg); border-color: transparent; color: var(--ink); } .callout.warn > .i { color: var(--wait); }
.callout.info { background: var(--info-bg); border-color: transparent; color: var(--ink); } .callout.info > .i { color: var(--info); }
.switch { position: relative; width: 34px; height: 20px; border-radius: var(--r-pill); border: 0; padding: 0; background: var(--line-2); cursor: pointer; flex: none; vertical-align: middle; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--ink); } .switch[aria-checked="true"]::after { left: 17px; }
.switch[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- prazna stanja, nalaganje, napake ---------- */
.empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.empty > .i { width: 30px; height: 30px; stroke-width: 1.5; color: var(--faint); margin-bottom: 8px; }
.empty h4 { font: 500 var(--t-20)/1.2 var(--f-display); color: var(--ink); margin: 0 0 4px; }
.empty p { margin: 0 auto 12px; max-width: 46ch; }
.skel { background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.3s linear infinite; border-radius: 6px; height: 14px; }
@keyframes skel { to { background-position: -200% 0; } }
.err { padding: 16px 18px; border-radius: var(--r-l); background: var(--late-bg); color: var(--late); display: flex; gap: 10px; align-items: flex-start; }
.err[hidden] { display: none; }

/* ---------- vrstice napredka, mini grafi ---------- */
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.bar.ok > i { background: var(--ok); } .bar.wait > i { background: var(--wait); } .bar.late > i { background: var(--late); }
.spark { width: 100%; height: 44px; display: block; }
.spark .ln { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark .ar { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.spark .dt { fill: var(--surface); stroke: var(--ink); stroke-width: 1.75; }
.spark .base { stroke: var(--line); stroke-width: 1; }

/* ---------- obrazci ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--t-12); font-weight: 600; color: var(--ink-2); }
.input, .select, .textarea { height: 38px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); width: 100%; }
.textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.input[readonly] { background: var(--surface-2); color: var(--muted); }
.hint { font-size: var(--t-12); color: var(--muted); }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }

/* ---------- plasti: stranska plošča, dialog, meni, obvestilo ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: none; }
.scrim.on { display: block; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--surface); z-index: 61; border-left: 1px solid var(--line); box-shadow: var(--shadow-2); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .22s cubic-bezier(.3,.7,.2,1), visibility 0s linear .22s; }
.sheet.on { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.3,.7,.2,1), visibility 0s; }
.sheet[data-size="l"] { width: min(880px, 100vw); } .sheet[data-size="xl"] { width: min(1120px, 100vw); }
.sheet .sh-hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sheet .sh-hd h3 { font: 500 var(--t-20)/1.2 var(--f-display); margin: 0; flex: 1; }
.sheet .sh-bd { flex: 1; overflow-y: auto; padding: 18px 20px; }
.sheet .sh-ft { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sheet .sh-ft[hidden] { display: none; }
.menu { position: fixed; z-index: 70; min-width: 220px; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-2); padding: 6px; }
.menu .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: none; text-align: left; cursor: pointer; text-decoration: none; color: var(--ink-2); font-weight: 500; }
.menu .mi:hover { background: var(--surface-2); color: var(--ink); }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .who b { display: block; } .menu .who span { font-size: var(--t-12); color: var(--muted); }
.menu .mi-sec { margin: 8px 10px 4px; font-size: var(--t-11); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.menu .mi-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu .mi-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; color: var(--ink-2); }
.menu .mi-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .mi-ck { color: var(--ink); } .menu .mi-ic { width: 18px; flex: none; }
.menu .mi-static { cursor: default; } .menu .mi-static:hover { background: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 80; background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: var(--r-m); font-weight: 500; transition: .2s; pointer-events: none; box-shadow: var(--shadow-2); }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- mobilno ---------- */
.botnav { display: none; }
@media (max-width: 1100px) {
  :root { --side-w: 68px; }
  .side .lbl, .side .nav-sec, .brand div, .side-foot, .nav .cnt, .sf-col { display: none; }
  /* čakajoče (npr. dokumenti za podpis) ostanejo vidne kot pika */
  .nav .cnt.hot { display: block; position: absolute; top: 5px; right: 9px; width: 8px; height: 8px; min-width: 0; padding: 0; font-size: 0; border: 0; background: var(--late); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { justify-content: center; padding: 9px; } .nav.on { background: var(--surface); box-shadow: inset 0 -2px 0 var(--mark); }
  .brand { justify-content: center; padding-bottom: 10px; }
  .g-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .view { padding: 20px 16px 96px; }
  .top { padding: 0 12px; gap: 8px; }
  .search kbd, #presenceLabel, .top .sp, .stw .stw-l { display: none; }
  .presence { padding: 0 10px; } .presence .dot { display: none; } .presence .pico { display: inline-flex; }
  .stw { padding: 0 10px; }
  .stat .v { font-size: var(--t-20); }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .title { font-size: var(--t-28); }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .botnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 4px 0; }
  .botnav .bi { position: relative; display: inline-flex; }
  .botnav .bdot { position: absolute; top: -1px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--late); box-shadow: 0 0 0 2px var(--surface); }
  .botnav a.on { color: var(--ink); } .botnav a.on .i { background: var(--mark); color: var(--mark-ink); border-radius: 6px; }
  .demo-strip span.long { display: none; }
}
/* dotik: dovolj veliki cilji na telefonu in zaslonih na dotik */
@media (max-width: 720px), (pointer: coarse) {
  .btn.sm { height: 36px; }
  .chip { height: 36px; }
  .seg button, .seg a { height: 34px; }
  .ibtn { width: 40px; height: 40px; }
  .avabtn .ava { width: 36px; height: 36px; }
}

/* števke: Schibsted Grotesk z »tnum« razširi tudi pike, vejice in dvopičja (1 . 952 , 00 €, 28 . 8 . 2026),
   zato so v celotnem predlogu števke proporcionalne; poravnavo stolpcev zagotavlja desna poravnava. */
body * { font-variant-numeric: normal !important; }