/* ============================================================
   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-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; }

/* ── 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; }

/* 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);
}