/* ════════════════════════════════════════════════════════════════
   E-KAKOVOST QMS — Skupni dizajn sistem
   Uvozi na vsako stran: <link rel="stylesheet" href="/skupno.css">
   ════════════════════════════════════════════════════════════════ */

/* ── Barvna paleta ───────────────────────────────────────────── */
/* VIR RESNICE za barvne žetone (WCAG 2.1 AA, 1.4.3 — UX test T07-13).
   Do 27.09.2026 je bil primarni --teal #3aa9b4: bel napis na njem je
   imel 2,79 : 1 (prag za navadno besedilo je 4,5 : 1), prav tako
   zelena (3,38), rdeča (4,32), modra (4,22), jantarna kot besedilo na
   svoji svetli podlagi (2,73) in --ink-muted na belem (2,77).
   Vsaka stran ima svoj :root z istimi imeni (zgodovina) — zato te
   vrednosti za SVETLO temo na VSE strani prinese `tema.css` (nalaga ga
   tema.js povsod) kot `body { … }`, ki prevlada nad :root strani.
   Obe mesti morata imeti enake vrednosti; to in razmerja spodnjih
   parov preverja tests/barvni-zetoni-kontrast.test.js.            */
:root {
  /* Primarne barve — identična na vseh straneh */
  --teal:       #247680;   /* bel napis 5,28 : 1; na --teal-light 4,73 : 1 */
  --teal-dark:  #1d5e66;   /* prehod z miško: 7,38 : 1 */
  --teal-deep:  #174c53;
  --teal-light: #e8f5f6;
  --teal-mist:  #f1f8f9;

  /* Nevtralne */
  --ink:        #1a2b32;
  --ink-mid:    #3d5560;
  --ink-soft:   #546876;   /* 5,40 : 1 na --bg, 5,08 na sivi znački #eef0f2 */
  --ink-muted:  #607482;   /* 4,53 : 1 na --bg (prej #8b9eaa, 2,77) */
  --border:     #dde4e8;
  --bg:         #f5f7f9;
  --white:      #ffffff;

  /* Status barve — vse tudi kot BESEDILO na svoji svetli podlagi ≥ 4,5 : 1 */
  --green:      #1f7a52;
  --green-light:#e8f8f1;
  --red:        #c0392b;
  --red-light:  #fdf0ef;
  --yellow:     #946200;
  --yellow-light:#fdf6e8;
  --amber:      #946200;
  --blue:       #2468b4;
  --blue-light: #eaf2fb;

  /* Sence */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 3px 10px rgba(0,0,0,.10);
  --shadow-lg:  0 6px 24px rgba(0,0,0,.12);

  /* Oblika */
  --radius:     8px;
  --radius-sm:  5px;
  --radius-lg:  12px;
}

/* ── Topbar — identičen na vseh straneh ─────────────────────── */
.topbar {
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-dark) 50%, var(--teal) 100%);
  color: #fff;
  padding: 8px 22px;
  /* MIN-height, ne height. Fiksna višina je bila vzrok, da je glava ob
     ožjem oknu prekrila besedilo: gumbi se prelomijo v dve vrsti, vrstica
     pa je ostala visoka 56 px, zato je vsebina ušla čez rob — naslov pod
     njo, meni celo nad zgornji rob zaslona.
     Pravilo je preprosto in velja povsod: glava se RAZTEGNE po vsebini in
     nikoli ne prekrije besedila. */
  min-height: 56px;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;        /* brez tega vsebina uhaja vodoravno */
  row-gap: 6px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  flex-shrink: 0;
}

/* Logo + naslov */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.topbar-brand img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

.topbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.topbar-brand-text b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}

.topbar-brand-text span {
  font-size: 11px;
  opacity: .75;
}

/* Gumbi v topbaru */
.tb-btn, .topbar button, .topbar a.tb-link {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff !important;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
  font-family: inherit;
  line-height: 1.4;
}

.tb-btn:hover, .topbar button:hover, .topbar a.tb-link:hover {
  background: rgba(255,255,255,.25);
  color: #fff !important;
}

/* Aktivni/poudarjen gumb */
.tb-btn.active, .tb-btn-active {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.5);
  font-weight: 700;
}

/* Desna stran topbara */
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Org oznaka */
.topbar-org {
  font-size: 12.5px;
  opacity: .85;
  display: flex;
  align-items: center;
  gap: 7px;
}

.topbar-org img {
  height: 24px;
  width: auto;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
  object-fit: contain;
}

/* Zvonček in klepet ikoni */
.topbar-icon-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  transition: background .15s;
  flex-shrink: 0;
}

.topbar-icon-btn:hover {
  background: rgba(255,255,255,.25);
}

.topbar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e8453c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--teal-dark);
}

/* Separator */
.topbar-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

/* ── Osnova ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Flex otroci body-ja (.topbar, .wrap ...) privzeto NE morejo skrčiti pod
   min-content širino svoje vsebine (flex privzetek min-width:auto) — na
   ozkih zaslonih to enega izmed njih (navadno .wrap) drži širšega od
   viewporta, kar potisne CELO stran v vodoravno drsenje, čeprav so
   notranje mreže (grid-template-columns) pravilno nastavljene na
   minmax(0,1fr). To je pogostejši in bolj temeljni vzrok vodoravnega
   drsenja na mobilnem kot sama mreža. */
body > * { min-width: 0; }

/* ── Skupni gumbi ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-mist); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--teal-mist); }
.btn.danger { color: var(--red); border-color: #f0b8b5; }
.btn.danger:hover { background: var(--red-light); border-color: var(--red); }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── Zaklenjena polja (UX test 06.10.2026, faza E, #5) ──────────
   Polje z atributom disabled je bilo videti enako kot urejljivo (belo,
   temno besedilo), zato je vodja kakovosti mislil, da oceno lahko vpiše,
   in ni vedel, zakaj klik ne naredi ničesar. Zaklenjeno polje je zdaj
   sivo, z bledim besedilom in kazalcem »ni dovoljeno« — na vseh straneh. */
input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
select:disabled,
textarea:disabled {
  background: #f1f4f6;
  color: var(--ink-muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; }
/* Temna različica je v tema.css (en vir resnice za temno temo). */

/* ── Skupne kartice ──────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
  margin-bottom: 16px;
}

/* ── Badge ───────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.badge.green { background: var(--green-light); color: var(--green); }
.badge.red   { background: var(--red-light); color: var(--red); }
.badge.yellow{ background: var(--yellow-light); color: var(--yellow); }
.badge.blue  { background: var(--blue-light); color: var(--blue); }
.badge.gray  { background: #f0f2f4; color: var(--ink-soft); }

/* Toast: glej public/skupno.js — toast() vbrizga kanonično
   .toast/.toast.show/.toast.err CSS ob prvem klicu, samostojno od
   tega, ali stran nalaga to datoteko. */

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Glava naj NARASTE namesto da reže: ob veliko gumbih se desni sklop ovije
     v drugo vrstico in ostane viden (prej fiksnih 52px je ovite vrstice
     odrezalo). Namizje (56px) ostane nespremenjeno. */
  .topbar { padding: 6px 14px; gap: 6px; min-height: 52px; height: auto; align-items: center; row-gap: 4px; flex-wrap: wrap; }
  .topbar-brand-text span { display: none; }
  .topbar-brand-text b { font-size: 13px; }
  .topbar-brand img { height: 28px; }
  .tb-btn, .topbar button, .topbar a.tb-link { padding: 5px 10px; font-size: 12px; }
  .topbar-right { flex-wrap: wrap; row-gap: 4px; }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — PRESELJEN V `tema.css` (29.08.2026)

   Temni sloj je bil tu, gumb za preklop pa v `tema.js`. Deset strani je
   naložilo skript in ne te datoteke: gumb se je izrisal, `body.dark` se
   je pripel, pravil pa ni bilo — stran je ostala svetla pod temnim
   ozadjem anti-flash skripta.

   Odslej `tema.js` `tema.css` naloži SAM, zato gumba in pravil ni več
   mogoče imeti narazen. Tu ne sme biti nobenega `body.dark` pravila:
   dva vira resnice za isto temo se razideta, in razlika bi se spet
   pokazala samo na delu strani. Varuje `tests/tema-pokritost.test.js`.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   MOBILNE IZBOLJŠAVE (dodano 2026-07)
   Cilj: vrhunski mobilni prikaz BREZ vsakršne spremembe namizja.
   Vsa pravila so znotraj @media za mobilne širine, zato namizje ostane
   pikselsko enako. Uporabljamo blago povišano specifičnost (npr. `body .x`)
   namesto !important, da ne povozimo namernih tablet-postavitev posameznih
   strani (mnoge imajo lastne, večstopenjske prelome).
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Tabele kot lasten drsni okvir: pravilo je od 27.09.2026 v `dotik.css`
     (mobilni sloj, ki ga tema.js naloži na VSE strani) — tu je veljalo le
     za 20 strani, ki nalagajo skupno.css. */

  /* Modali in paneli: nikdar širši od zaslona (z majhnim robom). Prekrije
     tudi inline max-width:640px (zato !important — inline drugače zmaga). */
  .modal {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .panel { max-width: 100%; }

  /* Obrazci: 16px prepreči samodejno povečavo (zoom) na iOS ob fokusu;
     tipkovne tarče dovolj velike za prst. */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 40px; }

  /* Malce več prostora za vsebino na ozkih zaslonih. */
  body .wrap { padding-left: 14px; padding-right: 14px; }

  /* Vrstice zavihkov: namesto stiskanja/prelamljanja naj drsijo vodoravno.
     flex-shrink:0 na zavihkih poskrbi, da se vrstica prelije in s tem omogoči
     drsenje (sicer bi se zavihki stisnili in scrolla ne bi bilo). */
  .tabs, .page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar, .page-tabs::-webkit-scrollbar { height: 0; }
  body .tab, body .page-tab { flex-shrink: 0; white-space: nowrap; }
}

@media (max-width: 480px) {
  /* Na telefonu VSE znane večstolpčne mreže zložimo v en stolpec. `body `
     dvigne specifičnost tik nad privzeto definicijo mreže (0,1,1 > 0,1,0),
     zato zmagamo brez !important, obenem pa strani lahko po želji še vedno
     povozijo z višjo specifičnostjo. Tablet-obseg (481–768px) pustimo pri
     miru — tam veljajo namerne postavitve posameznih strani. */
  body .field-row, body .polje-vrstica, body .vrsta,
  body .stats, body .stat-grid, body .stat-grid-2,
  body .dash-grid, body .kpi-grid, body .analitika-grid,
  body .tip-presoje-grid, body .standard-grid, body .sig-grid,
  body .profile-grid, body .modul-vsebina, body .faza-grid,
  body .detail-meta, body .chart-row, body .cc-grid, body .zgornji,
  body .grid2, body .grid3, body .grid4 {
    grid-template-columns: 1fr;
  }

  /* Še malo tesnejši robovi in manjši naslovi na najmanjših zaslonih. */
  body .wrap { padding-left: 12px; padding-right: 12px; }
}