/* ============================================================
   OBOSS — Design System
   Palette: #568ca4 primary | #4cacd4 accent | #737373 text | #ffffff bg
   ============================================================ */

/* JetBrains Mono odstranjen (12.9.2026): pisava je povsod Poppins. */

/* ── Poppins (samostojno gostovano, brez zunanjih zahtev) ───── */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Spremenljivke ───────────────────────────────────────────── */
:root {
  --barva-primarna:     #568ca4;
  --barva-primarna-t:   #4a7a90;  /* temnejša za hover */
  --barva-primarna-s:   #e8f2f6;  /* svetla podlaga */
  --barva-akcent:       #4cacd4;
  --barva-akcent-t:     #3a9abf;
  --barva-besedilo:     #737373;
  --barva-besedilo-t:   #3a3a3a;  /* temnejše za naslove */
  --barva-besedilo-s:   #a0a0a0;  /* svetlejše za sekundarne */
  --barva-ozadje:       #ffffff;
  --barva-ozadje-s:     #f7f9fb;  /* rahlo siva za sekcije */
  --barva-rob:          #e2e8ed;

  --barva-uspeh:        #4caf88;
  --barva-uspeh-s:      #edf7f3;
  --barva-opozorilo:    #f0a350;
  --barva-opozorilo-s:  #fef5ea;
  --barva-napaka:       #e05a5a;
  --barva-napaka-s:     #fdeaea;

  --pisava-osnova:      'Poppins', system-ui, sans-serif;
  /* Zahteva 12.9.2026: pisava povsod (tudi v tabelah in pri številkah) Poppins;
     tabular-nums poskrbi za poravnane številke v stolpcih. */
  --pisava-mono:        'Poppins', system-ui, sans-serif;

  --polmer:             8px;
  --polmer-velik:       12px;
  --polmer-majhen:      4px;

  --senca-majhna:       0 1px 3px rgba(86,140,164,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --senca-srednja:      0 4px 12px rgba(86,140,164,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --senca-velika:       0 8px 24px rgba(86,140,164,0.16), 0 4px 12px rgba(0,0,0,0.08);

  --sirina-vsebine:     1200px;
  --sirina-stranska:    240px;
}

/* ── Reset & osnova ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--pisava-osnova);
  color: var(--barva-besedilo);
  background: var(--barva-ozadje-s);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografija ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  color: var(--barva-besedilo-t);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { line-height: 1.6; }

a { color: var(--barva-primarna); text-decoration: none; }
a:hover { color: var(--barva-primarna-t); text-decoration: underline; }

.mono { font-family: var(--pisava-mono); font-variant-numeric: tabular-nums; }
.td-desno, .td-mono, .kpi-vrednost, .vnos-mini, .skupaj-vrednost, .rezultat-cena { font-variant-numeric: tabular-nums; }

/* ── Postavitev aplikacije ───────────────────────────────────── */
.app-ovojnica {
  display: flex;
  min-height: 100vh;
}

/* ── Stranska navigacija ─────────────────────────────────────── */
.nav-stranska {
  width: var(--sirina-stranska);
  background: var(--barva-primarna);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.nav-logotip {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.nav-logotip-naziv {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.nav-logotip-podnaziv {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-menu {
  padding: 16px 12px;
  flex: 1;
  list-style: none;
}

.nav-skupina-naslov {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 16px 8px 6px;
}

.nav-postavka a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--polmer);
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.nav-postavka a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.nav-postavka.aktivna a {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.nav-ikona {
  width: 18px;
  height: 18px;
  opacity: 0.9;
  flex-shrink: 0;
}

.nav-spodaj {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.nav-uporabnik {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--polmer);
  cursor: pointer;
  transition: background 0.15s;
}

.nav-uporabnik:hover { background: rgba(255,255,255,0.1); }
.nav-uporabnik[hidden] { display: none; }
/* Gumb »Pomoč« v levem meniju (nad izbirnikom jezika). */
.nav-pomoc { margin-bottom: 6px; }
.nav-pomoc .nav-avatar { font-weight: 700; }

.nav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.nav-uporabnik-ime {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Glavna vsebina ──────────────────────────────────────────── */
.glavna-vsebina {
  margin-left: var(--sirina-stranska);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.stran-glava {
  background: var(--barva-ozadje);
  border-bottom: 1px solid var(--barva-rob);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.stran-glava-naslov h1 {
  font-size: 1.25rem;
  font-weight: 600;
}

.stran-glava-naslov p {
  font-size: 0.8rem;
  color: var(--barva-besedilo-s);
  margin-top: 2px;
}

.stran-vsebina {
  padding: 28px 32px;
  flex: 1;
  max-width: var(--sirina-vsebine);
}

/* ── Kartice ─────────────────────────────────────────────────── */
.kartica {
  background: var(--barva-ozadje);
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer-velik);
  box-shadow: var(--senca-majhna);
}

.kartica-glava {
  padding: 18px 24px;
  border-bottom: 1px solid var(--barva-rob);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kartica-glava h2, .kartica-glava h3 {
  font-size: 1rem;
  font-weight: 600;
}

.kartica-telo {
  padding: 20px 24px;
}

/* ── Statistike (KPI kartice) ────────────────────────────────── */
.kpi-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-kartica {
  background: var(--barva-ozadje);
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer-velik);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kpi-oznaka {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--barva-besedilo-s);
}

.kpi-vrednost {
  font-family: var(--pisava-mono);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--barva-besedilo-t);
  line-height: 1;
}

.kpi-trend {
  font-size: 0.775rem;
  color: var(--barva-besedilo-s);
}

.kpi-kartica.poudarek { border-left: 3px solid var(--barva-primarna); }
.kpi-kartica.uspeh    { border-left: 3px solid var(--barva-uspeh); }
.kpi-kartica.opozorilo { border-left: 3px solid var(--barva-opozorilo); }
.kpi-kartica.napaka   { border-left: 3px solid var(--barva-napaka); }

/* ── Tabele ──────────────────────────────────────────────────── */
.tabela-ovojnica {
  overflow-x: auto;
  border-radius: var(--polmer-velik);
  border: 1px solid var(--barva-rob);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabela thead {
  background: var(--barva-ozadje-s);
  position: sticky;
  top: 0;
}

.tabela thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--barva-besedilo-s);
  border-bottom: 1px solid var(--barva-rob);
  white-space: nowrap;
}

.tabela tbody tr {
  border-bottom: 1px solid var(--barva-rob);
  transition: background 0.1s;
}

.tabela tbody tr:last-child { border-bottom: none; }
.tabela tbody tr:hover { background: var(--barva-ozadje-s); }

.tabela td {
  padding: 12px 16px;
  vertical-align: middle;
}

.tabela td.mono {
  font-family: var(--pisava-mono);
  font-size: 0.825rem;
}

.tabela .td-desno { text-align: right; }

/* ── Značke (status) ─────────────────────────────────────────── */
.znacka {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.znacka-uspeh    { background: var(--barva-uspeh-s);    color: #2e7a5e; }
.znacka-opozorilo { background: var(--barva-opozorilo-s); color: #9a6020; }
.znacka-napaka   { background: var(--barva-napaka-s);   color: #a03333; }
.znacka-nevtralno { background: #f0f2f4; color: #6b7280; }
.znacka-primarna { background: var(--barva-primarna-s); color: var(--barva-primarna-t); }

/* ── Gumbi ───────────────────────────────────────────────────── */
.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--polmer);
  font-family: var(--pisava-osnova);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.gumb:disabled { opacity: 0.5; cursor: not-allowed; }

.gumb-primarni {
  background: var(--barva-primarna);
  color: #fff;
}
.gumb-primarni:hover:not(:disabled) {
  background: var(--barva-primarna-t);
  box-shadow: var(--senca-majhna);
}

.gumb-sekundarni {
  background: var(--barva-ozadje);
  color: var(--barva-besedilo-t);
  border: 1px solid var(--barva-rob);
}
.gumb-sekundarni:hover:not(:disabled) {
  background: var(--barva-ozadje-s);
  border-color: var(--barva-primarna);
  color: var(--barva-primarna);
}

.gumb-nevarnost {
  background: var(--barva-napaka-s);
  color: var(--barva-napaka);
  border: 1px solid #f5c2c2;
}
.gumb-nevarnost:hover:not(:disabled) {
  background: var(--barva-napaka);
  color: #fff;
}

.gumb-duh {
  background: transparent;
  color: var(--barva-besedilo-s);
  padding: 6px 10px;
}
.gumb-duh:hover:not(:disabled) {
  color: var(--barva-besedilo-t);
  background: var(--barva-ozadje-s);
}

.gumb-majhen {
  padding: 5px 10px;
  font-size: 0.8rem;
}

/* ── Obrazci ─────────────────────────────────────────────────── */
.obrazec-skupina {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.obrazec-skupina:last-child { margin-bottom: 0; }

label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--barva-besedilo-t);
}

.obrazec-vhod {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer);
  font-family: var(--pisava-osnova);
  font-size: 0.875rem;
  color: var(--barva-besedilo-t);
  background: var(--barva-ozadje);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.obrazec-vhod:focus {
  border-color: var(--barva-primarna);
  box-shadow: 0 0 0 3px rgba(86,140,164,0.15);
}

.obrazec-vhod.napaka { border-color: var(--barva-napaka); }

select.obrazec-vhod {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737373' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

.obrazec-mreza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.obrazec-mreza-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.obrazec-napaka {
  font-size: 0.775rem;
  color: var(--barva-napaka);
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-ozadje {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-okno {
  background: var(--barva-ozadje);
  border-radius: var(--polmer-velik);
  box-shadow: var(--senca-velika);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-glava {
  padding: 20px 24px;
  border-bottom: 1px solid var(--barva-rob);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-glava h3 { font-size: 1.05rem; }

.modal-telo {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-noge {
  padding: 16px 24px;
  border-top: 1px solid var(--barva-rob);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Izbirnik jezika, dvignjen nad zatemnitev modalnega okna (Modal._dvigniJezik).
   Koordinate nastavi JS, da ostane natanko tam, kjer je v navigaciji.
   z-index je nad .modal-ozadje (200) in pod obvestili (300). */
.jezik-nad-modalom {
  position: fixed;
  z-index: 250;
  background: var(--barva-primarna);
  border-radius: var(--polmer);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

/* ── Obvestila (toast) ───────────────────────────────────────── */
.toast-ovojnica {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--polmer);
  box-shadow: var(--senca-srednja);
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 260px;
  max-width: 360px;
  animation: toast-vstop 0.25s ease;
}

.toast-uspeh { background: var(--barva-uspeh);    color: #fff; }
.toast-napaka { background: var(--barva-napaka);   color: #fff; }
.toast-info   { background: var(--barva-primarna); color: #fff; }

@keyframes toast-vstop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Filtrirna vrstica ───────────────────────────────────────── */
.filtrirna-vrstica {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filtrirna-vrstica .obrazec-vhod {
  width: auto;
  min-width: 160px;
}

/* ── Kalkulator specifične komponente ────────────────────────── */
.kalk-mreza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.kalk-rezultat-polje {
  background: var(--barva-primarna-s);
  border: 1px solid rgba(86,140,164,0.25);
  border-radius: var(--polmer-velik);
  padding: 20px;
}

.kalk-cena-poudarek {
  font-family: var(--pisava-mono);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--barva-primarna);
  line-height: 1;
  margin: 8px 0;
}

.kalk-vrstica {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--barva-rob);
  font-size: 0.875rem;
}

.kalk-vrstica:last-child { border-bottom: none; }

.kalk-vrstica .oznaka { color: var(--barva-besedilo-s); }
.kalk-vrstica .vrednost { font-family: var(--pisava-mono); font-weight: 500; color: var(--barva-besedilo-t); }

/* Grafikon stolpci */
.grafikon-mesec {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
}

.grafikon-stolpec {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-width: 8px;
  transition: opacity 0.15s;
  cursor: pointer;
}

.grafikon-stolpec:hover { opacity: 0.8; }

/* ── Prazno stanje ───────────────────────────────────────────── */
.prazno-stanje {
  text-align: center;
  padding: 48px 24px;
  color: var(--barva-besedilo-s);
}

.prazno-stanje svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.3;
}

.prazno-stanje h3 {
  color: var(--barva-besedilo-s);
  font-size: 1rem;
  margin-bottom: 6px;
}

.prazno-stanje p { font-size: 0.875rem; }

/* Prazno stanje z naslednjim korakom (seznam še nima nobenega vnosa):
   ikona, naslov, en stavek razlage in gumbi z obstoječimi akcijami. */
.prazno-naslednji {
  padding: 36px 20px;
  color: var(--barva-besedilo);
  border: 2px dashed var(--barva-rob);
  border-radius: var(--polmer-velik);
}
.prazno-naslednji .prazno-ikona { display: block; font-size: 2.2rem; line-height: 1; margin-bottom: 12px; }
.prazno-naslednji h3 { color: var(--barva-besedilo-t); font-size: 1.05rem; }
.prazno-naslednji p { max-width: 560px; margin: 0 auto; line-height: 1.5; }
.prazno-gumbi { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.prazno-stanje .prazno-gumbi .gumb { white-space: normal; }
.prazno-stanje > .gumb-majhen { margin-top: 10px; }

/* ── Nalaganje ───────────────────────────────────────────────── */
.nalaganje-vrteče {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vrteče 0.7s linear infinite;
}

@keyframes vrteče {
  to { transform: rotate(360deg); }
}

/* ── Odzivno oblikovanje ─────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-stranska {
    width: 60px;
  }
  .nav-logotip-naziv,
  .nav-logotip-podnaziv,
  .nav-skupina-naslov,
  .nav-postavka a span,
  .nav-uporabnik-ime { display: none; }
  .nav-postavka a { justify-content: center; padding: 10px; }
  .nav-avatar { margin: 0 auto; }
  .nav-uporabnik { justify-content: center; }
  .glavna-vsebina { margin-left: 60px; }
  .kalk-mreza { grid-template-columns: 1fr; }
  .obrazec-mreza { grid-template-columns: 1fr; }
  .obrazec-mreza-3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .stran-vsebina { padding: 16px; }
  .stran-glava { padding: 14px 16px; }
  .kpi-mreza { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TEMA B — Dark Pro
   Temna, podatkovna, Bloomberg-inspired
   ============================================================ */

body.tema-dark {
  --barva-primarna:     #4cacd4;
  --barva-primarna-t:   #3a9abf;
  --barva-primarna-s:   rgba(76,172,212,0.12);
  --barva-akcent:       #4cacd4;
  --barva-akcent-t:     #6dc5e8;
  --barva-besedilo:     #8b9bb4;
  --barva-besedilo-t:   #c8d6e8;
  --barva-besedilo-s:   #5a6a7e;
  --barva-ozadje:       #0f1923;
  --barva-ozadje-s:     #151f2b;
  --barva-rob:          #1e2d3d;

  --barva-uspeh:        #2ecc8a;
  --barva-uspeh-s:      rgba(46,204,138,0.12);
  --barva-opozorilo:    #f0a350;
  --barva-opozorilo-s:  rgba(240,163,80,0.12);
  --barva-napaka:       #e05a5a;
  --barva-napaka-s:     rgba(224,90,90,0.12);

  --senca-majhna:       0 1px 3px rgba(0,0,0,0.4);
  --senca-srednja:      0 4px 16px rgba(0,0,0,0.5);
  --senca-velika:       0 8px 32px rgba(0,0,0,0.6);

  background: #0a1018;
  color: var(--barva-besedilo);
}

/* Nav dark */
body.tema-dark .nav-stranska {
  background: #080e16;
  border-right: 1px solid #1e2d3d;
}

body.tema-dark .nav-logotip {
  border-bottom-color: rgba(76,172,212,0.15);
}

body.tema-dark .nav-logotip-naziv {
  color: #4cacd4;
  letter-spacing: 0.02em;
}

body.tema-dark .nav-postavka a {
  color: #5a6a7e;
}
body.tema-dark .nav-postavka a:hover,
body.tema-dark .nav-postavka.aktivna a {
  background: rgba(76,172,212,0.1);
  color: #4cacd4;
}

body.tema-dark .nav-spodaj {
  border-top-color: #1e2d3d;
}

body.tema-dark .nav-avatar {
  background: rgba(76,172,212,0.2);
  color: #4cacd4;
}

/* Glava */
body.tema-dark .stran-glava {
  background: #0d1720;
  border-bottom-color: #1e2d3d;
}

/* Kartice */
body.tema-dark .kartica {
  background: #0d1720;
  border-color: #1e2d3d;
}

body.tema-dark .kartica-glava {
  border-bottom-color: #1e2d3d;
}

/* KPI kartice */
body.tema-dark .kpi-kartica {
  background: #0d1720;
  border-color: #1e2d3d;
}

body.tema-dark .kpi-vrednost {
  color: #c8d6e8;
}

body.tema-dark .kpi-kartica.poudarek {
  border-left-color: #4cacd4;
  background: linear-gradient(135deg, #0d1720 0%, #0d1f2e 100%);
}

body.tema-dark .kpi-kartica.uspeh    { border-left-color: #2ecc8a; }
body.tema-dark .kpi-kartica.opozorilo { border-left-color: #f0a350; }
body.tema-dark .kpi-kartica.napaka   { border-left-color: #e05a5a; }

/* Tabele */
body.tema-dark .tabela-ovojnica {
  border-color: #1e2d3d;
}

body.tema-dark .tabela thead {
  background: #080e16;
}

body.tema-dark .tabela tbody tr {
  border-bottom-color: #1e2d3d;
}

body.tema-dark .tabela tbody tr:hover {
  background: rgba(76,172,212,0.05);
}

/* Obrazci */
body.tema-dark .obrazec-vhod,
body.tema-dark input,
body.tema-dark select,
body.tema-dark textarea {
  background: #0a1018;
  border-color: #1e2d3d;
  color: #c8d6e8;
}

body.tema-dark .obrazec-vhod:focus {
  border-color: #4cacd4;
  box-shadow: 0 0 0 3px rgba(76,172,212,0.15);
}

/* Gumbi */
body.tema-dark .gumb-primarni {
  background: #4cacd4;
  color: #0a1018;
  font-weight: 600;
}

body.tema-dark .gumb-primarni:hover:not(:disabled) {
  background: #6dc5e8;
}

body.tema-dark .gumb-sekundarni {
  background: #0d1720;
  color: #8b9bb4;
  border-color: #1e2d3d;
}

body.tema-dark .gumb-sekundarni:hover:not(:disabled) {
  border-color: #4cacd4;
  color: #4cacd4;
  background: rgba(76,172,212,0.08);
}

body.tema-dark .gumb-duh {
  color: #5a6a7e;
}

body.tema-dark .gumb-duh:hover:not(:disabled) {
  color: #8b9bb4;
  background: rgba(255,255,255,0.05);
}

/* Modal */
body.tema-dark .modal-ozadje {
  background: rgba(0,0,0,0.7);
}

body.tema-dark .modal-okno {
  background: #0d1720;
  border: 1px solid #1e2d3d;
}

body.tema-dark .modal-glava,
body.tema-dark .modal-noge {
  border-color: #1e2d3d;
}

/* Značke */
body.tema-dark .znacka-uspeh    { background: rgba(46,204,138,0.15); color: #2ecc8a; }
body.tema-dark .znacka-napaka   { background: rgba(224,90,90,0.15);  color: #e07070; }
body.tema-dark .znacka-opozorilo { background: rgba(240,163,80,0.15); color: #f0b870; }
body.tema-dark .znacka-nevtralno { background: rgba(255,255,255,0.06); color: #5a6a7e; }
body.tema-dark .znacka-primarna { background: rgba(76,172,212,0.15); color: #4cacd4; }

/* Toast */
body.tema-dark .toast-info { background: #1a3a4d; color: #4cacd4; border: 1px solid #1e4d6b; }

/* Filtrirna vrstica */
body.tema-dark .filtrirna-vrstica .obrazec-vhod {
  background: #0a1018;
}

/* Prazno stanje */
body.tema-dark .prazno-stanje { color: #3a4a5e; }
body.tema-dark .prazno-naslednji { color: var(--barva-besedilo); }

/* Label barva */
body.tema-dark label { color: #8b9bb4; }

/* Tab gumbi */
body.tema-dark .tab-gumb {
  color: #5a6a7e;
  border-bottom-color: transparent;
}
body.tema-dark .tab-gumb.aktiven {
  color: #4cacd4;
  border-bottom-color: #4cacd4;
}
body.tema-dark .tab-vrstica {
  border-bottom-color: #1e2d3d;
}

/* Stroškovnik specifično */
body.tema-dark .tabela-ovojnica { border-color: #1e2d3d; }
body.tema-dark .tabela thead th { background: #080e16; border-bottom-color: #1e2d3d; color: #3a5a7a; }
body.tema-dark .tabela td { color: #8b9bb4; }
body.tema-dark .tabela td:first-child { color: #c8d6e8; }

/* AI panel dark */
body.tema-dark .ai-panel {
  background: linear-gradient(135deg, rgba(76,172,212,0.08) 0%, #0d1720 100%);
  border-color: rgba(76,172,212,0.25);
}
body.tema-dark .ai-predogled { background: #0a1018; border-color: #1e2d3d; }
body.tema-dark .ai-predogled-glava { background: #1a3a4d; }
body.tema-dark .ai-polje { border-bottom-color: #1e2d3d; }
body.tema-dark .ai-vhod { background: #0a1018; border-color: #1e2d3d; color: #c8d6e8; }

/* Skupaj vrstice */
body.tema-dark .skupaj-vrstica { background: #080e16; }

/* Kalkulator */
body.tema-dark .vnos-vrstica { border-bottom-color: #1e2d3d; }
body.tema-dark .vnos-mini { background: #0a1018; border-color: #1e2d3d; color: #c8d6e8; }
body.tema-dark .rezultat-kartica { background: linear-gradient(135deg, #0d2a3a 0%, #0a1f2e 100%); border: 1px solid #1e4d6b; }
body.tema-dark .razcleni-vrstica { border-bottom-color: #1e2d3d; }
body.tema-dark .razcleni-vrstica .oznaka { color: #5a6a7e; }
body.tema-dark .razcleni-vrstica .vrednost { color: #c8d6e8; }
body.tema-dark .kalk-vrstica { border-bottom-color: #1e2d3d; }
body.tema-dark .simulacija-tabela th { background: #080e16; border-bottom-color: #1e2d3d; }
body.tema-dark .simulacija-tabela td { border-bottom-color: #1e2d3d; color: #8b9bb4; }

/* Admin */
body.tema-dark .upo-vrstica { border-bottom-color: #1e2d3d; }
body.tema-dark .upo-vrstica:hover { background: rgba(76,172,212,0.04); }
body.tema-dark .upo-glava { background: #080e16; color: #3a5a7a; }
body.tema-dark .log-vrstica { border-bottom-color: #1e2d3d; }
body.tema-dark .log-vrstica:hover { background: rgba(76,172,212,0.04); }
body.tema-dark .log-glava { background: #080e16; color: #3a5a7a; }
body.tema-dark .akcija-dropdown { background: #0d1720; border-color: #1e2d3d; }
body.tema-dark .akcija-dropdown button { color: #8b9bb4; }
body.tema-dark .akcija-dropdown button:hover { background: rgba(76,172,212,0.08); }
body.tema-dark .badge-admin   { background: rgba(240,163,80,0.15); color: #f0b870; }
body.tema-dark .badge-user    { background: rgba(76,172,212,0.12); color: #4cacd4; }
body.tema-dark .badge-on      { background: rgba(46,204,138,0.12); color: #2ecc8a; }
body.tema-dark .badge-off     { background: rgba(224,90,90,0.12);  color: #e07070; }
body.tema-dark .opozorilo.info { background: rgba(76,172,212,0.1); border-color: rgba(76,172,212,0.2); color: #4cacd4; }
body.tema-dark .opozorilo.ok   { background: rgba(46,204,138,0.1); border-color: rgba(46,204,138,0.2); color: #2ecc8a; }
body.tema-dark .opozorilo.warn { background: rgba(240,163,80,0.1); border-color: rgba(240,163,80,0.2); color: #f0a350; }

/* Tip preklop gumb (kalkulator) */
body.tema-dark .tip-gumb { color: #5a6a7e; background: #0a1018; }
body.tema-dark .tip-gumb.aktiven { background: #4cacd4; color: #0a1018; }
body.tema-dark .tip-preklop { border-color: #1e2d3d; }

/* Sekcija naslov */
body.tema-dark .sekcija-naslov { color: #3a5a7a; }

/* Zavihki v stroškovniku */
body.tema-dark .tab-vrstica { border-bottom-color: #1e2d3d; }

/* Zamuda */
body.tema-dark .zamuda { color: #e07070 !important; }

/* ── Gumb za preklop teme ────────────────────────────────────── */
.tema-preklop-gumb {
  position: fixed;
  bottom: 24px;
  left: calc(var(--sirina-stranska) + 16px);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--barva-rob);
  background: var(--barva-ozadje);
  color: var(--barva-besedilo);
  box-shadow: var(--senca-srednja);
  transition: all 0.2s;
  font-family: var(--pisava-osnova);
}

.tema-preklop-gumb:hover {
  border-color: var(--barva-primarna);
  color: var(--barva-primarna);
  transform: translateY(-1px);
}

body.tema-dark .tema-preklop-gumb {
  background: #0d1720;
  border-color: #1e2d3d;
  color: #5a6a7e;
}

body.tema-dark .tema-preklop-gumb:hover {
  border-color: #4cacd4;
  color: #4cacd4;
}

@media (max-width: 900px) {
  .tema-preklop-gumb { left: 76px; }
}

/* Prepreči flash svetle teme pri nalaganju */
html.pred-dark body { background: #0a1018 !important; }

/* ============================================================
   MOBILE FIRST — popolna mobilna podpora
   ============================================================ */

/* ── Osnova ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav: spodnja vrstica na mobi */
  .nav-stranska {
    width: 100% !important;
    height: 60px;
    top: auto !important;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.12);
    overflow: visible;
    z-index: 200;
  }

  .nav-logotip { display: none; }
  .nav-spodaj  { display: none; }
  .nav-skupina-naslov { display: none; }

  .nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    flex: 1;
    height: 60px;
  }

  .nav-postavka {
    flex: 1;
  }

  .nav-postavka a {
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 0;
    font-size: 0.6rem;
    justify-content: center;
    align-items: center;
    height: 60px;
  }

  .nav-ikona {
    width: 22px;
    height: 22px;
  }

  .nav-postavka a span {
    display: block !important;
    font-size: 0.58rem;
    text-align: center;
    line-height: 1.1;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Admin nav postavke — skrij na mobi */
  .nav-postavka[data-href="/admin.html#dnevnik"] { display: none; }

  /* Glavna vsebina nad nav vrstico */
  .glavna-vsebina {
    margin-left: 0 !important;
    padding-bottom: 70px;
  }

  /* Glava */
  .stran-glava {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .stran-glava-naslov h1 { font-size: 1.1rem; }
  .stran-glava > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Vsebina */
  .stran-vsebina {
    padding: 14px 14px 80px;
  }

  /* KPI mreza — 2 stolpca */
  .kpi-mreza {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .kpi-kartica { padding: 14px; }
  .kpi-vrednost { font-size: 1.25rem; }

  /* Tabele — kartica pogled */
  .tabela-ovojnica { border: none; border-radius: 0; overflow: visible; }

  .tabela thead { display: none; }

  .tabela tbody tr {
    display: block;
    background: var(--barva-ozadje);
    border: 1px solid var(--barva-rob);
    border-radius: var(--polmer-velik);
    margin-bottom: 10px;
    padding: 12px;
    box-shadow: var(--senca-majhna);
  }

  .tabela td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border: none;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--barva-rob);
  }

  .tabela td:last-child { border-bottom: none; padding-bottom: 0; }
  .tabela td:first-child { padding-top: 0; }

  /* Skrij manj pomembne stolpce */
  .tabela td:nth-child(6),  /* DDV % */
  .tabela td:nth-child(10), /* Plačano stolpec */
  .tabela td:nth-child(12)  /* Način */
  { display: none; }

  /* Dodaj oznake pred vrednosti */
  .tabela td[data-oznaka]::before {
    content: attr(data-oznaka);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--barva-besedilo-s);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Gumbi v tabeli */
  .tabela td:last-child { justify-content: flex-end; gap: 6px; }

  /* Obrazci */
  .obrazec-mreza,
  .obrazec-mreza-3 {
    grid-template-columns: 1fr !important;
  }

  /* Modal */
  .modal-ozadje {
    align-items: flex-end;
    padding: 0;
  }

  .modal-okno {
    max-width: 100% !important;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--polmer-velik) var(--polmer-velik) 0 0;
  }

  /* Filtrirna vrstica */
  .filtrirna-vrstica {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .filtrirna-vrstica .obrazec-vhod {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #st-rez { margin-left: 0; }

  /* Tema gumb */
  .tema-preklop-gumb {
    left: 16px;
    bottom: 72px;
  }

  /* AI uvoz panel */
  .ai-panel { padding: 20px 14px; }

  /* Kalkulator — en stolpec */
  .kalk-mreza,
  [style*="grid-template-columns:1fr 1fr 340px"],
  [style*="grid-template-columns: 1fr 1fr 340px"] {
    display: block !important;
  }

  [style*="grid-template-columns:1fr 1fr 340px"] > div,
  [style*="grid-template-columns: 1fr 1fr 340px"] > div {
    margin-bottom: 16px;
  }

  /* Sticky rezultati — ne sticky na mobi */
  [style*="position:sticky"],
  [style*="position: sticky"] {
    position: static !important;
  }

  /* Admin tabele */
  .upo-vrstica {
    grid-template-columns: 1fr auto !important;
    gap: 6px;
  }

  .upo-vrstica > span:nth-child(2),
  .upo-vrstica > span:nth-child(5),
  .upo-vrstica > span:nth-child(6) { display: none; }

  .log-vrstica {
    grid-template-columns: 120px 1fr !important;
    gap: 6px;
  }

  .log-vrstica > span:nth-child(4) { display: none; }

  /* Tab vrstica — scroll */
  .tab-vrstica {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-vrstica::-webkit-scrollbar { display: none; }
  .tab-gumb { white-space: nowrap; padding: 10px 14px; }

  /* Stran glava gumbi */
  .gumb { font-size: 0.82rem; padding: 7px 12px; }

  /* Select elementi */
  select.obrazec-vhod { font-size: 16px; } /* Prepreči zoom na iOS */
  input.obrazec-vhod  { font-size: 16px; }
  textarea.obrazec-vhod { font-size: 16px; }
}

/* ── Zelo majhni zasloni ──────────────────────────────────────── */
@media (max-width: 380px) {
  .kpi-mreza { grid-template-columns: 1fr !important; }
  .nav-postavka a span { display: none !important; }
  .nav-ikona { width: 24px; height: 24px; }
}

/* ── AI uvoz — kamera gumb na mobi ──────────────────────────── */
.ai-kamera-gumb {
  display: none;
}

@media (max-width: 768px) {
  .ai-kamera-gumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .ai-gumbi-skupina {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .ai-gumbi-skupina .gumb {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 0.95rem;
  }
}

/* ── PWA meta ─────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  .nav-stranska {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .glavna-vsebina {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* ── Pomoč (F1) ──────────────────────────────────────────────── */
.pomoc-plavajoc-gumb {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--barva-rob);
  background: var(--barva-ozadje);
  color: var(--barva-besedilo);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--pisava-osnova);
  cursor: pointer;
  box-shadow: var(--senca-srednja);
  transition: all 0.2s;
}

.pomoc-plavajoc-gumb:hover {
  border-color: var(--barva-primarna);
  color: var(--barva-primarna);
  transform: translateY(-1px);
}

body.tema-dark .pomoc-plavajoc-gumb {
  background: #0d1720;
  border-color: #1e2d3d;
  color: #5a6a7e;
}

body.tema-dark .pomoc-plavajoc-gumb:hover {
  border-color: #4cacd4;
  color: #4cacd4;
}

@media (max-width: 768px) {
  .pomoc-plavajoc-gumb { bottom: 72px; right: 16px; }
}

.modal-okno-siroka { max-width: 720px; }

.pomoc-vsebina h4 {
  margin: 20px 0 8px;
}
.pomoc-vsebina h4:first-child {
  margin-top: 0;
}
.pomoc-vsebina p {
  font-size: 0.85rem;
  color: var(--barva-besedilo);
  margin: 0 0 10px;
}
.pomoc-vsebina ul {
  margin: 0 0 10px;
  padding-left: 20px;
}
.pomoc-vsebina li {
  font-size: 0.85rem;
  color: var(--barva-besedilo);
  line-height: 1.6;
}
.pomoc-vsebina strong {
  color: var(--barva-besedilo-t);
}
.pomoc-namig {
  background: var(--barva-primarna-s);
  color: var(--barva-primarna-t);
  border: 1px solid rgba(86,140,164,.2);
  border-radius: var(--polmer);
  padding: 10px 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 10px 0;
}
.pomoc-opozorilo {
  background: var(--barva-opozorilo-s);
  color: #9a6020;
  border: 1px solid rgba(240,163,80,.3);
  border-radius: var(--polmer);
  padding: 10px 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 10px 0;
}
.pomoc-bliznjica {
  font-size: 0.78rem;
  color: var(--barva-besedilo-s);
  margin: -6px 0 16px;
}
.pomoc-vsebina kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--barva-rob);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--pisava-mono);
  font-size: 0.78rem;
  background: var(--barva-ozadje-s);
  color: var(--barva-besedilo-t);
}

/* ── Izbira »da / ne« (zavezanec za DDV — registracija, nastavitve) ── */
.da-ne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.da-ne label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer);
  font-size: 0.84rem;
  line-height: 1.3;
  cursor: pointer;
}
.da-ne label:has(input:checked) {
  border-color: var(--barva-primarna);
  background: var(--barva-primarna-s);
}
.da-ne input { accent-color: var(--barva-primarna); margin: 0; flex: 0 0 auto; }
.da-ne.neveljavno label { border-color: var(--barva-napaka); }
@media (max-width: 480px) { .da-ne { grid-template-columns: 1fr; } }

/* ── Vnos nove stopnje DDV na mestu izbirnika (js/ddv-stopnje.js) ── */
.ddv-nova { display: inline-flex; align-items: center; gap: 4px; width: 100%; }
.ddv-nova input { flex: 1 1 auto; min-width: 60px; }
.ddv-nova .gumb { flex: 0 0 auto; }

/* ── Seznam stopenj DDV v nastavitvah ── */
.ddv-stopnje-seznam { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ddv-znacka {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--barva-primarna-s); color: var(--barva-besedilo-t);
  font-family: var(--pisava-mono); font-size: 0.85rem;
}
.ddv-znacka button {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  color: var(--barva-besedilo-s); font-size: 0.8rem; line-height: 1;
}
.ddv-znacka button:hover { color: var(--barva-napaka); }
.ddv-stopnje-dodaj { display: flex; gap: 8px; max-width: 360px; margin-bottom: 6px; }
.ddv-stopnje-dodaj .obrazec-vhod { flex: 1 1 auto; }

/* ══ Cilj dobička: pas na domači strani in čarovnik (15.10.2026) ══ */
.gumb-povezava {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--barva-primarna); font: inherit; font-size: 0.85rem; text-decoration: underline;
}
.gumb-povezava:hover { color: var(--barva-primarna-t, var(--barva-primarna)); }

.cilj-pas { margin: 0 0 24px; padding: 18px 20px; }
.cilj-pas-glava { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cilj-pas-glava > div { flex: 1 1 260px; }
.cilj-pas-glava h3 { margin: 0 0 2px; font-size: 1.05rem; color: var(--barva-besedilo-t); }
.cilj-pas-glava p { margin: 0; font-size: 0.85rem; color: var(--barva-besedilo-s); }
.cilj-pas-ikona { font-size: 2rem; line-height: 1; }
.cilj-pas-stevilke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cilj-stevilka { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--polmer); background: var(--barva-ozadje-s); }
.cilj-stevilka span { font-size: 0.75rem; color: var(--barva-besedilo-s); }
.cilj-stevilka strong { font-family: var(--pisava-mono); font-size: 1.15rem; color: var(--barva-besedilo-t); }
.cilj-stevilka.glavna { background: var(--barva-primarna-s); }
.cilj-stevilka.glavna strong { font-size: 1.45rem; color: var(--barva-primarna); }
.cilj-stevilka.opozorilo strong { color: var(--barva-opozorilo); }
.cilj-ocena {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--barva-ozadje-s); border: 1px dashed var(--barva-rob);
  font-size: 0.7rem; font-weight: 500; color: var(--barva-besedilo-s); vertical-align: middle;
}
@media (max-width: 640px) { .cilj-pas-stevilke { grid-template-columns: 1fr; } }

.cilj-carovnik { min-height: 300px; }
.cilj-napredek { font-size: 0.75rem; color: var(--barva-besedilo-s); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.cilj-vprasanje { font-size: 1.35rem; font-weight: 600; color: var(--barva-besedilo-t); margin: 0 0 6px; }
.cilj-vprasanje .info-ikona { vertical-align: 4px; margin-left: 4px; }
.info-ikona { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; font: 700 .7rem/1 var(--pisava-osnova, inherit); font-style: normal; color: var(--barva-primarna); background: var(--barva-primarna-s); border: 1px solid var(--barva-primarna); cursor: help; }
button.info-ikona { cursor: pointer; }
.cilj-info { font-size: .85rem; color: var(--barva-besedilo); background: var(--barva-primarna-s); border-radius: var(--polmer); padding: 8px 12px; margin: 0 0 12px; }
.cilj-podvprasanje { font-size: 0.9rem; color: var(--barva-besedilo-s); margin: 0 0 18px; }
.cilj-opomba { font-size: 0.8rem; color: var(--barva-besedilo-s); margin: 14px 0 0; }
.cilj-uvod { text-align: center; padding: 24px 12px 8px; }
.cilj-uvod-ikona { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.cilj-uvod h2 { font-size: 1.5rem; margin: 0 0 10px; color: var(--barva-besedilo-t); }
.cilj-uvod p { font-size: 0.95rem; color: var(--barva-besedilo); max-width: 460px; margin: 0 auto; line-height: 1.5; }

.cilj-dejavnosti { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.cilj-dejavnost {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 12px; border: 2px solid var(--barva-rob); border-radius: var(--polmer-velik);
  background: var(--barva-ozadje); cursor: pointer; font-family: var(--pisava-osnova); color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.cilj-dejavnost:hover, .cilj-dejavnost:focus-visible { border-color: var(--barva-primarna); background: var(--barva-primarna-s); transform: translateY(-2px); outline: none; }
.cilj-dejavnost.izbrana { border-color: var(--barva-primarna); background: var(--barva-primarna-s); }
.cilj-dejavnost .ikona { font-size: 2.1rem; line-height: 1; }
.cilj-dejavnost .naziv { font-weight: 600; font-size: 1rem; color: var(--barva-besedilo-t); }
.cilj-dejavnost small { font-size: 0.74rem; color: var(--barva-besedilo-s); line-height: 1.3; }

.cilj-vnos-enota { display: flex; align-items: center; gap: 8px; }
.cilj-vnos-enota em { font-style: normal; font-size: 0.85rem; color: var(--barva-besedilo-s); white-space: nowrap; }
.cilj-glavni-vnos { margin-bottom: 10px; }
.cilj-glavni-vnos .obrazec-vhod { max-width: 220px; font-size: 1.3rem; font-family: var(--pisava-mono); text-align: right; padding: 10px 14px; }
.cilj-glavni-vnos .obrazec-vhod[readonly] { background: var(--barva-ozadje-s); }
.cilj-razclenitev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 14px; padding: 14px; border-radius: var(--polmer); background: var(--barva-ozadje-s); }
.cilj-str-vrstica { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; }
.cilj-str-vrstica .obrazec-vhod { width: 100px; text-align: right; font-family: var(--pisava-mono); padding: 6px 8px; }
@media (max-width: 640px) { .cilj-razclenitev { grid-template-columns: 1fr; } }

.cilj-drsnik { padding: 8px 0 4px; max-width: 460px; }
.cilj-drsnik input[type="range"] { width: 100%; accent-color: var(--barva-primarna); }
.cilj-drsnik-vrednost { font-size: 1rem; margin-top: 8px; color: var(--barva-besedilo-t); }
.cilj-drsnik-vrednost strong { font-family: var(--pisava-mono); font-size: 1.3rem; color: var(--barva-primarna); }
.cilj-drsnik-ostane { font-size: 0.88rem; color: var(--barva-besedilo); margin-top: 4px; }
.cilj-tipicno { font-size: 0.8rem; color: var(--barva-besedilo-s); margin: 10px 0 12px; }

.cilj-rezultat { text-align: center; padding: 8px 8px 4px; }
.cilj-rez-uvod { font-size: 1rem; color: var(--barva-besedilo); margin: 0; }
.cilj-rez-stevilka { font-family: var(--pisava-mono); font-size: 2.6rem; font-weight: 700; color: var(--barva-primarna); margin: 6px 0 4px; line-height: 1.1; }
.cilj-rez-dan { font-size: 0.95rem; color: var(--barva-besedilo); margin: 0 0 14px; }
.cilj-rez-opozorilo {
  display: inline-block; padding: 8px 14px; border-radius: var(--polmer);
  background: rgba(240, 163, 80, 0.14); color: var(--barva-besedilo-t); font-size: 0.9rem;
}
.cilj-odgovori { margin-top: 20px; border-top: 1px solid var(--barva-rob); padding-top: 12px; }
.cilj-odgovori-naslov { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--barva-besedilo-s); margin-bottom: 6px; }
.cilj-odgovor { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.88rem; border-bottom: 1px dashed var(--barva-rob); }
.cilj-odgovor span { color: var(--barva-besedilo-s); }
.cilj-odgovor strong { font-family: var(--pisava-mono); font-weight: 600; color: var(--barva-besedilo-t); }
.cilj-noge-rezultat { flex-wrap: wrap; }
.cilj-obvestilo {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  border-radius: var(--polmer); background: var(--barva-primarna-s); color: var(--barva-besedilo-t);
  font-size: 0.86rem; line-height: 1.45;
}
.cilj-obvestilo span { flex: 1 1 auto; }
.cilj-mesec { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cilj-mesec-besedilo { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--barva-besedilo); }
.cilj-mesec-trak { height: 8px; border-radius: 999px; background: var(--barva-ozadje-s); border: 1px solid var(--barva-rob); overflow: hidden; }
.cilj-mesec-trak > div { height: 100%; background: var(--barva-primarna); border-radius: 999px; transition: width 0.4s; }
.cilj-mesec.dosezeno .cilj-mesec-trak > div { background: var(--barva-uspeh); }
.cilj-stroski-vrstica { margin-top: 10px; font-size: 0.8rem; color: var(--barva-besedilo-s); }
.cilj-stroski-vrstica a { color: var(--barva-primarna); }

/* ── Moji mesečni stroški (nastavitve) ── */
.stroski-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.stroski-vrstica { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.stroski-vnos { display: inline-flex; align-items: center; gap: 6px; }
.stroski-vnos .obrazec-vhod { width: 120px; text-align: right; font-family: var(--pisava-mono); padding: 6px 8px; }
.stroski-vnos em { font-style: normal; color: var(--barva-besedilo-s); font-size: 0.8rem; }
@media (max-width: 640px) { .stroski-mreza { grid-template-columns: 1fr; } }
.moji-stroski-gumb { margin-top: 8px; text-align: right; }
.moji-stroski-gumb[hidden] { display: none; }
.polje-namig { font-size: 0.72rem; color: var(--barva-besedilo-s); margin-top: 2px; }

/* ── Obossy — pomočnik (public/js/obossy.js) ─────────────────── */
/* Plavajoči gumb »?« postane gumb z avatarjem (obroč iz logotipa z očmi). */
.pomoc-plavajoc-gumb.obossy-gumb {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  --obossy-stolpci: var(--barva-besedilo-t);
  --obossy-oci: var(--barva-besedilo-t);
}
.pomoc-plavajoc-gumb.obossy-gumb:hover { transform: translateY(-2px); }
body.obossy-odprt .pomoc-plavajoc-gumb { display: none; }

.obossy-okno {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 190;
  width: min(460px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--barva-ozadje);
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer-velik);
  box-shadow: var(--senca-velika);
  overflow: hidden;
  font-family: var(--pisava-osnova);
}
.obossy-okno[hidden] { display: none; }

.obossy-glava {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--barva-rob);
  background: var(--barva-ozadje-s);
}
.obossy-avatar { display: flex; flex: none; }
.obossy-naslov { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.obossy-naslov strong { font-size: 1rem; color: var(--barva-besedilo-t); line-height: 1.2; }
.obossy-podnaslov { font-size: 0.72rem; color: var(--barva-besedilo-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Trajna oznaka umetne inteligence (evropski akt o UI) — vedno vidna, v svoji
   vrstici skupaj s števcem kvote. */
.obossy-ai-vrstica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 14px;
  background: var(--barva-ozadje-s);
  border-bottom: 1px solid var(--barva-rob);
}
.obossy-ai {
  margin: 0;
  font-size: 0.68rem;
  color: var(--barva-besedilo-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.obossy-glava-gumbi { display: flex; align-items: center; gap: 6px; flex: none; }
.obossy-glava-gumbi .gumb[hidden] { display: none; }
.obossy-glava-gumbi .gumb-duh.aktiven { color: var(--barva-primarna); background: var(--barva-primarna-s); }
.obossy-kvota {
  font-size: 0.72rem;
  color: var(--barva-besedilo-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 2px 8px;
  border: 1px solid var(--barva-rob);
  border-radius: 999px;
}
.obossy-kvota:empty, .obossy-kvota[hidden] { display: none; }
.obossy-kvota.porabljena { color: var(--barva-napaka); border-color: var(--barva-napaka); }
.obossy-zapri { font-size: 1rem; }

.obossy-zavihki {
  display: flex;
  border-bottom: 1px solid var(--barva-rob);
  padding: 0 10px;
  gap: 4px;
}
.obossy-zavihki [role="tab"] {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--barva-besedilo);
  font-family: var(--pisava-osnova);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.obossy-zavihki [role="tab"].aktiven { color: var(--barva-primarna); border-bottom-color: var(--barva-primarna); }
.obossy-zavihki kbd {
  font-size: 0.68rem;
  padding: 0 5px;
  border: 1px solid var(--barva-rob);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--barva-ozadje-s);
  color: var(--barva-besedilo-s);
  font-family: var(--pisava-mono);
}

.obossy-telo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.obossy-telo[hidden], .obossy-noga[hidden] { display: none; }
.obossy-sporocila, .obossy-zgodovina, .obossy-pomoc {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.obossy-sporocila[hidden], .obossy-zgodovina[hidden] { display: none; }
.obossy-pomoc { display: block; }
.obossy-pomoc .obossy-pomoc-naslov { margin: 0 0 12px; font-size: 1rem; color: var(--barva-besedilo-t); }

.obossy-sp { display: flex; gap: 8px; max-width: 100%; }
.obossy-sp-u { justify-content: flex-end; }
.obossy-sp-avatar { flex: none; margin-top: 4px; }
.obossy-sp-telo {
  min-width: 0;
  max-width: 88%;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--barva-besedilo-t);
  padding: 10px 13px;
  border-radius: 14px;
  overflow-wrap: anywhere;
}
.obossy-sp-u .obossy-sp-telo {
  background: var(--barva-primarna);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.obossy-sp-o .obossy-sp-telo {
  background: var(--barva-ozadje-s);
  border: 1px solid var(--barva-rob);
  border-bottom-left-radius: 4px;
}
.obossy-pozdrav .obossy-sp-telo p { margin: 0; }
.obossy-md p { margin: 0 0 8px; }
.obossy-md > :last-child { margin-bottom: 0; }
.obossy-md ul, .obossy-md ol { margin: 0 0 8px; padding-left: 20px; }
.obossy-md li { margin: 2px 0; }
.obossy-md h4 { margin: 8px 0 4px; font-size: 0.9rem; }
.obossy-md code { font-family: var(--pisava-mono); font-size: 0.8rem; background: rgba(0,0,0,0.05); padding: 0 4px; border-radius: 4px; }
.obossy-md pre { margin: 0 0 8px; padding: 8px 10px; background: rgba(0,0,0,0.05); border-radius: var(--polmer); overflow-x: auto; }
.obossy-md pre code { background: none; padding: 0; }
.obossy-md table { border-collapse: collapse; margin: 4px 0 8px; font-size: 0.8rem; width: 100%; }
.obossy-md th, .obossy-md td { border: 1px solid var(--barva-rob); padding: 4px 8px; text-align: left; vertical-align: top; }
.obossy-md th { background: var(--barva-ozadje); font-weight: 600; }
.obossy-stanje {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--barva-besedilo-s);
  font-size: 0.8rem;
  font-style: italic;
}
.obossy-pika {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--barva-primarna);
  animation: obossy-utrip 1s ease-in-out infinite;
}
@keyframes obossy-utrip { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.v-teku .obossy-md::after {
  content: '▍';
  color: var(--barva-primarna);
  animation: obossy-utrip 1s ease-in-out infinite;
}
.obossy-napaka { margin: 6px 0 0; color: var(--barva-napaka); font-size: 0.8rem; }
.obossy-ocena { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.obossy-ocena button {
  border: 1px solid transparent;
  background: none;
  border-radius: 6px;
  padding: 1px 6px;
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.55;
  transition: all 0.15s;
}
.obossy-ocena button:hover, .obossy-ocena button.izbrana { opacity: 1; border-color: var(--barva-rob); background: var(--barva-ozadje); }
.obossy-ocena-hvala { font-size: 0.72rem; color: var(--barva-besedilo-s); margin-left: 4px; }

.obossy-obvestilo {
  font-size: 0.82rem;
  padding: 10px 12px;
  border-radius: var(--polmer);
  background: var(--barva-primarna-s);
  color: var(--barva-besedilo-t);
  border: 1px solid rgba(86,140,164,.2);
}
.obossy-obvestilo-opozorilo { background: var(--barva-opozorilo-s); border-color: rgba(240,163,80,.35); }
/* Predlogi: vrstica gumbov na dnu, tik nad vnosnim poljem. Prazen pogovor:
   gumbi se prelomijo v več vrstic; po prvem sporočilu ena kompaktna vrstica,
   ki se drsi vodoravno. */
.obossy-predlogi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--barva-rob);
  background: var(--barva-ozadje);
}
.obossy-predlogi[hidden] { display: none; }
.obossy-predlogi + .obossy-noga { border-top: 0; }
.obossy-predlogi-oznaka { width: 100%; font-size: 0.72rem; color: var(--barva-besedilo-s); text-transform: uppercase; letter-spacing: 0.04em; }
.obossy-predlogi.kompaktni {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.obossy-predlogi.kompaktni .obossy-predlogi-oznaka { display: none; }
.obossy-predlogi.kompaktni::after { content: ''; flex: 0 0 6px; }   /* odmik za zadnjim gumbom pri drsenju */
.obossy-predlog {
  border: 1px solid var(--barva-rob);
  background: var(--barva-ozadje);
  color: var(--barva-primarna);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-family: var(--pisava-osnova);
  cursor: pointer;
  text-align: left;
}
.obossy-predlogi.kompaktni .obossy-predlog { flex: 0 0 auto; white-space: nowrap; padding: 4px 10px; font-size: 0.76rem; }
.obossy-predlog:hover { border-color: var(--barva-primarna); background: var(--barva-primarna-s); }
.obossy-predlog:focus-visible { outline: 2px solid var(--barva-primarna); outline-offset: 1px; }

.obossy-noga {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--barva-rob);
  background: var(--barva-ozadje);
}
.obossy-noga textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer);
  font-family: var(--pisava-osnova);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--barva-besedilo-t);
  background: var(--barva-ozadje);
}
.obossy-noga textarea:focus { outline: none; border-color: var(--barva-primarna); box-shadow: 0 0 0 3px var(--barva-primarna-s); }
.obossy-noga textarea:disabled { background: var(--barva-ozadje-s); color: var(--barva-besedilo-s); }
.obossy-noga .gumb[hidden] { display: none; }
.obossy-bliznjica {
  margin: 0;
  padding: 4px 14px 6px;
  font-size: 0.68rem;
  color: var(--barva-besedilo-s);
  text-align: center;
}

.obossy-zgodovina-glava { display: flex; align-items: center; gap: 8px; }
.obossy-zgodovina-glava h4 { margin: 0; font-size: 0.9rem; }
.obossy-pogovori { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.obossy-pogovori li { display: flex; align-items: center; gap: 4px; }
.obossy-pogovori li.aktiven .obossy-pogovor { border-color: var(--barva-primarna); }
.obossy-pogovor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--barva-rob);
  border-radius: var(--polmer);
  background: var(--barva-ozadje);
  font-family: var(--pisava-osnova);
  cursor: pointer;
}
.obossy-pogovor:hover { border-color: var(--barva-primarna); background: var(--barva-primarna-s); }
.obossy-pogovor .naslov { font-size: 0.84rem; color: var(--barva-besedilo-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obossy-pogovor .meta { font-size: 0.72rem; color: var(--barva-besedilo-s); }
.obossy-prazno { margin: 0; font-size: 0.8rem; color: var(--barva-besedilo-s); }

/* Temna tema */
body.tema-dark .obossy-okno { background: #0d1720; border-color: #1e2d3d; }
body.tema-dark .obossy-glava, body.tema-dark .obossy-ai-vrstica, body.tema-dark .obossy-sp-o .obossy-sp-telo { background: #121d29; }
body.tema-dark .obossy-noga { background: #0d1720; }
body.tema-dark .obossy-noga textarea { background: #0a1018; }
body.tema-dark .obossy-md code, body.tema-dark .obossy-md pre { background: rgba(255,255,255,0.06); }
body.tema-dark .obossy-md th { background: #0d1720; }
body.tema-dark .obossy-predlog, body.tema-dark .obossy-pogovor { background: #0d1720; }
body.tema-dark .obossy-ocena button:hover, body.tema-dark .obossy-ocena button.izbrana { background: #0d1720; }
body.tema-dark .pomoc-plavajoc-gumb.obossy-gumb { --obossy-stolpci: #c8d6e8; --obossy-oci: #c8d6e8; }

/* Telefon: čez cel zaslon */
@media (max-width: 640px) {
  .obossy-okno {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .obossy-okno { z-index: 205; }   /* nad spodnjo navigacijo (200) */
  .obossy-glava { flex-wrap: wrap; }
  .obossy-glava-gumbi { margin-left: auto; }
  .obossy-sp-telo { max-width: 92%; }
}

.cilj-obossy-vrstica { margin-top: 8px; font-size: 0.82rem; }
.cilj-obossy-vrstica .gumb-povezava { font-size: 0.82rem; }

/* Dostopnost (agent-q) ─────────────────────────────────────────
   WCAG 2.1 AA: kontrast besedila ≥ 4.5:1 v svetlem in temnem načinu,
   viden fokus za tipkovnico (:focus-visible), fokus na modalnem oknu. */
:root {
  --barva-primarna:     #3a7189;  /* bel tekst 5.4:1, na #f7f9fb 5.1:1 */
  --barva-primarna-t:   #2f5e73;
  --barva-besedilo:     #666666;  /* 5.7:1 na beli */
  --barva-besedilo-s:   #707070;  /* 4.9:1 na beli, 4.7:1 na #f7f9fb */
  --barva-fokus:        #1f6f99;
  --barva-napaka:       #bb3838;  /* 5.6:1 na beli, 4.8:1 na #fdeaea */
}
body.tema-dark {
  --barva-besedilo-s:   #8794a6;  /* 5.4:1 na #151f2b */
  --barva-fokus:        #6dc5e8;
  --barva-napaka:       #f07575;  /* 5.2:1 na rdečkasti podlagi gumba */
}
/* Stranska navigacija: besedilo na barvni podlagi */
.nav-logotip-podnaziv { color: rgba(255,255,255,0.88); }
.nav-skupina-naslov   { color: rgba(255,255,255,0.95); }
.nav-postavka a       { color: rgba(255,255,255,0.94); }
.nav-postavka a:hover { background: rgba(0,0,0,0.12); }
.nav-postavka.aktivna a { background: rgba(0,0,0,0.22); }
.nav-avatar           { background: rgba(0,0,0,0.22); }
.nav-uporabnik-ime    { color: rgba(255,255,255,0.95); }
.nav-stranska #jezik-gumb-tekst,
.jezik-nad-modalom #jezik-gumb-tekst { color: rgba(255,255,255,0.94); }
body.tema-dark .nav-postavka a,
body.tema-dark .nav-skupina-naslov,
body.tema-dark .nav-stranska #jezik-gumb-tekst,
body.tema-dark .jezik-nad-modalom #jezik-gumb-tekst { color: #8a99ae; }
body.tema-dark .nav-postavka a:hover,
body.tema-dark .nav-postavka.aktivna a { background: rgba(76,172,212,0.1); color: #4cacd4; }
body.tema-dark .nav-avatar { background: rgba(76,172,212,0.2); }
body.tema-dark .tab-gumb { color: #8794a6; }
body.tema-dark .nivo-gumb.aktiven,
body.tema-dark .mini-tip-gumb.aktiven { color: #0a1018; }
body.tema-dark .gumb-duh,
body.tema-dark .znacka-nevtralno,
body.tema-dark .razcleni-vrstica .oznaka,
body.tema-dark .tip-gumb { color: #8794a6; }

/* Viden fokus za tipkovnico (miška ga ne sproži) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.zavihek:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--barva-fokus);
  outline-offset: 2px;
}
.obrazec-vhod:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--barva-fokus);
  outline-offset: 1px;
}
.nav-stranska a:focus-visible { outline-color: #fff; outline-offset: -2px; }
body.tema-dark .nav-stranska a:focus-visible { outline-color: var(--barva-fokus); }
.modal-okno:focus { outline: none; }
.modal-okno:focus-visible { outline: 2px solid var(--barva-fokus); outline-offset: 2px; }
/* Obvestila (Toast) in nevarni gumbi: bel tekst na polni podlagi ≥ 4.5:1 */
.toast-uspeh { background: #2b7a57; }
body.tema-dark .toast-uspeh { background: #1f7350; color: #fff; }
body.tema-dark .toast-napaka { background: #b53636; color: #fff; }
body.tema-dark .gumb-nevarnost:hover:not(:disabled) { background: #b53636; color: #fff; }

/* Mobilni UX (agent-w) ─────────────────────────────────────────
   Skupni vzorec glave strani: na računalniku so vsi gumbi v vrsti, na
   telefonu/tablici (≤ 768 px) ostane viden glavni gumb (.glava-glavni),
   stranski gumbi pa gredo v meni »⋯ Več« (.glava-vec), ki ga odpre
   .glava-vec-gumb. Isti vzorec kot v Letnem stroškovniku. */
.glava-akcije { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: relative; }
.glava-vec { display: contents; }
.glava-vec-gumb { display: none; }
@media (max-width: 768px) {
  .stran-glava { gap: 10px; }
  .glava-akcije { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .glava-akcije .glava-glavni { flex: 1 1 auto; justify-content: center; }
  .glava-vec-gumb { display: inline-flex; flex: 0 0 auto; }
  .glava-vec {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    flex-direction: column; gap: 6px; min-width: 240px; max-width: calc(100vw - 32px); padding: 8px;
    background: var(--barva-ozadje); border: 1px solid var(--barva-rob); border-radius: var(--polmer);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }
  .glava-vec.odprt { display: flex; }
  .glava-vec .gumb { justify-content: flex-start; width: 100%; text-align: left; }

  /* Tarče dotika: gumbi vsaj 40 px visoki (ikonski gumbi tudi široki). */
  .gumb, .tab-gumb { min-height: 40px; }

  /* Kartični prikaz vrstic tabele: oznaka in vrednost se ne stikata, dolge
     vrednosti (ime kupca) se prelomijo. */
  .tabela td { gap: 12px; }
  .tabela td[data-oznaka]::before { flex: 0 0 auto; }
  .tabela td > :last-child { overflow-wrap: anywhere; }

  /* Spodnja navigacija: pri več postavkah (skrbnik vidi tudi Admin) se
     postavke zožijo, namesto da bi zadnja izpadla z zaslona. */
  .nav-menu { min-width: 0; }
  .nav-postavka { min-width: 0; }
  .nav-postavka a span { max-width: 100%; }

  /* Vsebina zunaj .stran-vsebina (uvodni zasloni, čarovnik) mora imeti
     prostor nad spodnjo navigacijo in plavajočim gumbom »?« / Obossy. */
  .glavna-vsebina > .prostor-spodaj { padding-bottom: 130px; }
}

/* Temni način in dostopnost (agent-a5) ────────────────────────
   WCAG 2.1 AA na domači strani, v Letnem stroškovniku (vsi zavihki in
   moduli), Kalkulatorju cen, Ponudbah in Admin plošči — v svetlem in temnem
   načinu. Barvi uspeha in opozorila sta kot PODLAGA (robovi, trakovi, grafi)
   dovolj izraziti, kot BESEDILO pa prešibki (#4caf88 na beli 2,7:1, #f0a350
   1,9:1), zato imata »besedilno« različico -t, ki jo uporabljajo vse strani. */
:root {
  --barva-uspeh-t:      #28724f;  /* 6,1:1 na beli, 5,3:1 na #edf7f3 */
  --barva-opozorilo-t:  #8a5519;  /* 6,0:1 na beli, 5,7:1 na #fef5ea */
}
body.tema-dark {
  --barva-uspeh-t:      #2ecc8a;  /* 8,0:1 na #151f2b */
  --barva-opozorilo-t:  #f0b870;  /* 9,3:1 na #151f2b */
}
.znacka-uspeh    { color: var(--barva-uspeh-t); }
.znacka-opozorilo { color: var(--barva-opozorilo-t); }
.znacka-nevtralno { color: #5c636e; }                  /* 5,4:1 na #f0f2f4 */
.cilj-stevilka.opozorilo strong { color: var(--barva-opozorilo-t); }
.cilj-stevilka.glavna span { color: var(--barva-besedilo); }   /* 5,1:1 na #e8f2f6 */
/* Povezave sredi besedila morajo biti podčrtane (ne le drugačne barve). */
.cilj-stroski-vrstica a,
.opozorilo-akcije a:not(.gumb),
.pon-podjetje a { text-decoration: underline; }

/* Temni način: glave tabel in seznamov (#3a5a7a je bil 2,7:1), oznake sekcij */
body.tema-dark .tabela thead th,
body.tema-dark .upo-glava,
body.tema-dark .log-glava,
body.tema-dark .sekcija-naslov,
body.tema-dark .postavke-glava { color: #8794a6; }
/* Temni način: aktivni preklopni gumbi in barvne glave na podlagi
   --barva-primarna (#4cacd4) — bel tekst ima le 2,6:1, temen 7,4:1. */
body.tema-dark .nt-obdobje button[aria-pressed="true"],
body.tema-dark .tip-preklopnik button.aktiven,
body.tema-dark .ir-vrste button.aktiven,
body.tema-dark .ai-tip-gumb:has(input:checked),
body.tema-dark .ai-pred-glava,
body.tema-dark .ai-predogled-glava,
body.tema-dark .ai-predogled-glava h3,
body.tema-dark .zanesljivost-visoka,
body.tema-dark .zanesljivost-srednja,
body.tema-dark .zanesljivost-nizka,
body.tema-dark .korak-znacka { color: #08131c; }
body.tema-dark .zanesljivost-visoka  { background: rgba(8,19,28,0.18); }
body.tema-dark .zanesljivost-srednja { background: rgba(255,200,0,0.45); }
body.tema-dark .zanesljivost-nizka   { background: rgba(255,80,80,0.5); }
/* Temni način: prazno stanje (#3a4a5e je bil 2:1), izbirnik jezika nad
   modalnim oknom (siv tekst na svetlo modri podlagi), predogled žiga/podpisa
   na beli podlagi v nastavitvah ponudb. */
body.tema-dark .prazno-stanje { color: #8794a6; }
body.tema-dark .jezik-nad-modalom { background: #0d1720; border: 1px solid #1e2d3d; }
body.tema-dark .nast-slika .predogled small { color: #5f6672; }

/* Kalkulator potrebne prodaje (storitev): prihodek = cena × potrebno število
   prodaj in semafor glede na mesečni znesek za pokritje. */
.prodaja-prihodek { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--barva-rob); text-align: center; }
.prodaja-prihodek-oznaka { font-size: .8rem; color: var(--barva-besedilo-s); display: inline-flex; align-items: center; gap: 6px; }
.prodaja-prihodek-znesek { font-size: 1.35rem; font-weight: 700; margin-top: 2px; }
.semafor { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: .78rem; text-align: left; border: 1px solid transparent; }
.semafor[hidden] { display: none; }
.semafor-luc { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; }
.semafor-zelena { background: var(--barva-uspeh-s); border-color: var(--barva-uspeh); }
.semafor-zelena .semafor-luc { background: var(--barva-uspeh); }
.semafor-rumena { background: var(--barva-opozorilo-s); border-color: var(--barva-opozorilo); }
.semafor-rumena .semafor-luc { background: var(--barva-opozorilo); }
.semafor-rdeca { background: var(--barva-napaka-s); border-color: var(--barva-napaka); }
.semafor-rdeca .semafor-luc { background: var(--barva-napaka); }

/* Temni način: brskalnik izriše tudi vgrajene dele obrazcev (puščici polja za
   število, koledar, drsnik) temno — prej so bili beli kvadratki na temni podlagi. */
body.tema-dark { color-scheme: dark; }