:root {
  --barva-modra: #1D4E8C;
  --barva-modra-temna: #163C6D;
  --barva-oranzna: #EE8B2E;
  /* Oranžna iz logotipa ima na svetli podlagi kontrast le ~2.5:1 - dovolj za
     ploskve in obrobe, premalo za besedilo (WCAG AA zahteva 4.5:1). Kjer je
     oranžna BESEDILO, se uporabi ta potemnjena različica (~5.0:1 na beli).
     Na temno modri meniski vrstici ostane svetla - tam je razmerje obrnjeno. */
  --barva-oranzna-besedilo: #B45309;
  --barva-cian: #2CACE3;
  --barva-ozadje: #F7F8FA;
  --barva-povrsina: #FFFFFF;
  --barva-besedilo: #1A1D23;
  --barva-besedilo-mehko: #5B6472;
  --barva-crta: #E4E7EC;
  --barva-napaka: #C0293A;

  /* Ocena je rdeča - tako kot v ReferatNET, kjer je edini rdeči podatek na zaslonu. Svoj token
     in ne --barva-napaka: ocena ni napaka, čeprav je odtenek isti. */
  --barva-ocena: #C0293A;

  --pisava-naslov: "Manrope", "Segoe UI", sans-serif;
  --pisava-telo: "Inter", "Segoe UI", sans-serif;

  --radij: 14px;
  --senca: 0 12px 32px -8px rgba(29, 78, 140, 0.18);

  /* Akril (v slogu Windows 11): prosojne površine nad zameglitvijo ozadja */
  --akril-crta: rgba(255, 255, 255, 0.45);
  --akril-zamegli: saturate(180%) blur(30px);
  --akril-senca: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  /* Rezervira prostor za navpični drsnik, tudi kadar ta trenutno ni
     potreben - brez tega lahko preklop med eno- in dvostolpčnim prikazom
     (glej .dvostolpcna-vsebina) spremeni višino strani dovolj, da se
     drsnik pojavi/izgine, kar ob robu praga premakne dejansko širino
     okna za širino drsnika (~15-17px) in povzroči migetanje/napačen prag. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--pisava-telo);
  color: var(--barva-besedilo);
  background: #0A1A31;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Ozadje portala: cvet iz prosojnih listov nad globokim poljem ---------- */
/* Vsi sloji so pritrjeni, zato ob drsenju mirujejo - kot tapeta. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(80% 60% at 68% 78%, rgba(30, 84, 148, 0.85) 0%, rgba(30, 84, 148, 0) 68%),
    radial-gradient(70% 55% at 12% 8%, rgba(21, 58, 104, 0.9) 0%, rgba(21, 58, 104, 0) 70%),
    linear-gradient(160deg, #071528 0%, #0C2544 48%, #123A66 100%);
}

.ozadje-bloom {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.ozadje-bloom svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Vinjeta: zatemni robove, da vsebina v sredini bolj izstopa. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(125% 100% at 50% 38%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.52) 100%);
}

/* ---------- Zgornja vrstica (logotip, pomoč/odjava, slika) ---------- */
.glava-zgornja {
  background: #FFFFFF;
  border-bottom: 3px solid var(--barva-oranzna);
}

.glava-zgornja-vsebina {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.blagovna-znamka { display: block; }

.nav-logo {
  height: 58px;
  flex-shrink: 0;
  display: block;
}

/* Naslov aplikacije ob logotipu, ločen s tanko navpično črto. */
.naslov-aplikacije {
  font-family: var(--pisava-naslov);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--barva-modra);
  text-decoration: none;
  white-space: nowrap;
  padding-left: 16px;
  border-left: 2px solid var(--barva-crta);
}

.naslov-aplikacije:hover { color: var(--barva-modra-temna); }

/* margin-left: auto potisne desni del na rob - sicer bi space-between naslov
   postavil na sredino glave. */
.glava-desno {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.povezava-pomoc {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--barva-besedilo-mehko);
  text-decoration: none;
}

.povezava-pomoc:hover { color: var(--barva-modra); }

.locilo { color: var(--barva-crta); font-size: 0.82rem; }

/* Širina sledi razmerju prave študentske fotografije (3,5 : 4,5, standardna
   velikost osebne fotografije) - kvadrat bi jo obrezal/popačil.
   Širina = višina * 3.5/4.5. */
.nav-avatar {
  width: 72px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid var(--barva-oranzna);
  flex-shrink: 0;
  margin-left: 4px;
}

.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Meniska vrstica ---------- */
.glava-meni {
  background: #0F3562;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  position: sticky;
  top: 0;
  z-index: 10;
}

.glava-meni-vsebina {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

/* overflow-x: auto je rezerva za širine, pri katerih se postavke kljub vsemu ne
   izidejo - meni se takrat pomika vodoravno, namesto da bi se prelomil. Ni pa
   več nadomestilo za prenizek prag hamburgerja: ta je zdaj 990px (glej spodaj),
   ker se šest postavk s podaljšanimi napisi pod ~965px ne izide in je meni
   ves čas visel na drsniku.
   POZOR: overflow-x: auto pomeni tudi overflow-y: auto, zato bi bil spustni
   podmeni skupine "Ankete" tu odrezan. Rešuje ga position: fixed na
   .nav-podmeni (glej spodaj) - fiksni element ni odrezan z overflow prednika. */
.nav-meni {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-meni::-webkit-scrollbar { display: none; }

.nav-povezava {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 16px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
}

.nav-povezava:hover {
  color: var(--barva-oranzna);
  border-bottom-color: var(--barva-oranzna);
}

.nav-povezava.je-aktivna {
  color: var(--barva-oranzna);
  border-bottom-color: var(--barva-oranzna);
}

/* ---------- Skupina s spustnim podmenijem (Ankete) ---------- */
/* Ankete so tri in nimajo skupne strani, zato je postavka sprožilec in ne
   povezava. */
.nav-skupina {
  display: flex;
  align-items: center;
}

/* Sprožilec je <button>, a mora biti videti natanko kot .nav-povezava - te
   lastnosti brskalnik gumbu vsili in jih je treba povoziti. */
.nav-sprozilec {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  font-family: inherit;
  cursor: pointer;
}

.nav-skupina.je-aktivna > .nav-sprozilec {
  color: var(--barva-oranzna);
  border-bottom-color: var(--barva-oranzna);
}

.nav-puscica {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nav-skupina.je-odprt .nav-puscica {
  transform: rotate(180deg);
}

/* position: fixed in ne absolute: .nav-meni ima overflow-x: auto (glej zgoraj)
   in absolutno postavljen panel bi bil odrezan. Fiksni element ni odrezan z
   overflow prednika, zato pa tudi ne ve, kje je sprožilec - top/left mu ob
   odpiranju izračuna JS v _Navigacija.cshtml iz getBoundingClientRect. */
.nav-podmeni {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 6px;
  background: #0F3562;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.55);
}

.nav-skupina.je-odprt .nav-podmeni {
  display: block;
}

.nav-podmeni-povezava {
  display: block;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

.nav-podmeni-povezava:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--barva-oranzna);
}

.nav-podmeni-povezava.je-aktivna {
  color: var(--barva-oranzna);
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin: 8px 0;
}

.hamburger:hover { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 820px) {
  .nav-logo { height: 40px; }
  .nav-avatar { width: 59px; height: 76px; }

  /* Logotip + "Pomoč | Odjava" + slika študenta skupaj komaj ne uidejo čez
     rob na ozkih zaslonih, ko je zraven prikazan še navpični drsnik (ta
     vzame ~15px) - manjši padding/gap tu ustvari dovolj rezerve. */
  .glava-zgornja-vsebina { padding: 6px 12px; gap: 10px; }
  .naslov-aplikacije { font-size: 1.15rem; padding-left: 10px; }
}

/* Naslov v meniski vrstici - samo na telefonu, ko ga v glavi ni. */
.naslov-aplikacije-meni {
  display: none;
  font-family: var(--pisava-naslov);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* Na telefonu ob logotipu, "Pomoč | Odjava" in sliki za naslov ni prostora, zato se
   preseli v meniško vrstico, desno od hamburgerja (ta ostane na levem robu). Hamburger
   ima privzeti order 0, meni pa 2 (glej @media max-width: 990px), zato naslov 1. */
@media (max-width: 560px) {
  .naslov-aplikacije { display: none; }
  .naslov-aplikacije-meni { display: block; order: 1; margin-left: 14px; }
}

/* Prag hamburgerja je LOČEN od preloma glave zgoraj (820px): glava se skrči
   šele na res ozkih zaslonih, meni pa se mora zložiti že prej, ker šest
   postavk potrebuje ~910px (izmerjeno, glej spodaj; 906px z Inter, ~910px z
   nadomestno pisavo), z robovi vsebnika (2 x 20px) in drsnikom (~15px) pa
   okno ~965px. 990px pusti ~26px rezerve.
   Prag je bil 1080px, dokler je bilo postavk sedem; ob ukinitvi Prakse je
   padel na 990px, sicer bi se meni zlagal ~115px prezgodaj.
   Izmerjeno v konzoli na dejansko izrisani meniski vrstici:
       [...document.querySelectorAll('.nav-meni > *')]
           .reduce((s, e) => s + e.getBoundingClientRect().width, 0) + 4 * 5
   (4px je gap .nav-meni, 5 = število presledkov med šestimi postavkami).
   Če se kak napis podaljša ali pride nova postavka, izmeri znova in dvigni
   prag - drsnik na .nav-meni je rezerva in ne rešitev. */
@media (max-width: 990px) {
  .glava-meni-vsebina { flex-wrap: wrap; }

  .nav-meni {
    order: 2;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  /* Dovolj za vse postavke skupaj z razprtim podmenijem anket (do devet
     vrstic); presežek samo pospeši konec animacije. */
  .nav-meni.je-odprt {
    max-height: 720px;
    padding: 8px 0 12px;
  }

  .nav-povezava {
    border-radius: 8px;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding: 12px 14px;
  }

  .nav-povezava.je-aktivna { border-bottom: none; border-left-color: var(--barva-oranzna); }

  /* V hamburger meniju podmeni ni spusten: postavke stojijo zamaknjene pod
     napisom "Ankete" in so ves čas vidne. Spuščanje bi bilo v seznamu, ki se
     itak odpira, samo še eno klikanje - in .nav-meni ima tu overflow: hidden,
     zato viseči panel tako ali tako ne bi bil viden. */
  .nav-skupina { display: block; }

  .nav-sprozilec { width: 100%; }

  .nav-skupina.je-aktivna > .nav-sprozilec {
    border-bottom: none;
    border-left-color: var(--barva-oranzna);
  }

  .nav-puscica { display: none; }

  /* Tu je podmeni del seznama in ne viseči panel, zato nazaj v tok strani.
     Inline top/left, ki ju na širokem zaslonu postavi JS, ob preklopu na to
     širino skript pobriše (glej _Navigacija.cshtml). */
  .nav-podmeni {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 16px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-podmeni-povezava {
    border-radius: 8px;
    border-left: 3px solid transparent;
    padding: 10px 14px;
  }

  .nav-podmeni-povezava.je-aktivna { border-left-color: var(--barva-oranzna); }

  .hamburger { display: inline-flex; }
}

/* Pod 360px (najmanjši pogosti telefoni) tudi zožen padding/gap zgoraj ne
   zadošča več - glava/slika se skrčita še enkrat, isto razmerje 3,5 : 4,5
   kot .nav-avatar zgoraj (45 * 4,5/3,5 = 57,86, zaokroženo na 58). */
@media (max-width: 360px) {
  .nav-logo { height: 32px; }
  .nav-avatar { width: 45px; height: 58px; }
  .glava-zgornja-vsebina { padding: 6px 8px; gap: 6px; }
  .glava-desno { gap: 6px; }
}

/* ---------- Banner (Domov) ---------- */
.pasica {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #08243F;
}

.pasica-diapozitiv {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.pasica-diapozitiv.je-viden { opacity: 1; }

/* Rezervna barva ozadja, če slika ne naloži */
.pasica-diapozitiv[data-preliv="1"] { background-color: #0F3562; }
.pasica-diapozitiv[data-preliv="2"] { background-color: #123A66; }
.pasica-diapozitiv[data-preliv="3"] { background-color: #0E2E52; }

.pasica-pike {
  position: absolute;
  right: 20px;
  top: 18px;
  display: flex;
  gap: 8px;
}

.pasica-pika {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pasica-pika:hover { background: rgba(255, 255, 255, 0.75); }

.pasica-pika.je-izbrana {
  background: var(--barva-oranzna);
  transform: scale(1.25);
}

@media (max-width: 700px) {
  .pasica { height: 140px; }
}

/* ---------- Informativni pas ---------- */
.info-vrstica {
  background: #CFE7FA;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--barva-besedilo);
}

/* Pas je ozek namenoma: nosi dva kratka podatka in povezavo, zato mu navpični rob in
   razmik med vrsticama odmerimo skopo - vsak piksel tu je piksel manj za vsebino pod
   njim. Pripet line-height, da višina pasu ni odvisna od pisave. */
.info-vrstica-vsebina {
  max-width: 1440px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.info-vrstica-vsebina strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 600;
}

.info-vrstica-vsebina span {
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--barva-besedilo-mehko);
}

.info-vrstica-povezava {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--barva-modra);
  text-decoration: none;
}

.info-vrstica-povezava:hover { color: var(--barva-oranzna-besedilo); }

/* ---------- Temeljno okno - vsebina ---------- */
/* Vsebina živi na svetlem akrilnem panelu - tabele ostanejo berljive
   ne glede na to, kaj je za njimi. */
.vsebina {
  max-width: 1440px;
  margin: 28px auto;
  padding: 32px 28px 36px;
  background: #CFE7FA;
  border: 1px solid var(--akril-crta);
  border-radius: 18px;
  box-shadow: var(--akril-senca);
}

/* Samo vodoravni margin/padding se ožata pod 1480px - navpični (28px/32px/36px)
   ostajata enaka kot zgoraj, da se razmik do informativnega pasu nad tem
   panelom ob spreminjanju širine okna ne "skoči". */
@media (max-width: 1480px) {
  .vsebina {
    margin: 28px 16px;
    padding: 32px 20px 36px;
  }
}

.dvostolpcna-vsebina {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.dvostolpcna-vsebina > .stolpec {
  min-width: 0;
}

/* Prag mora zagotoviti, da je vsak stolpec širši od @container praga za
   kratice spodaj (536px) - da kratica NIKOLI ne nastopi v dvostolpčnem
   prikazu, samo pri resnično majhni ločljivosti (glej @container spodaj).
   Če za poln tekst v dveh stolpcih ni prostora, naj stran ostane
   enostolpčna (Izpitne prijave se prestavijo spodaj), namesto da bi drug
   stolpec silili prekratek.
   Prag je bil 1200px: izmerjena potreba najdaljšega imena predmeta
   ("Kibernetska varnost in etični heking (KVH)") je bila skupaj z datumom
   in gumbom/oznako ~538px, stolpec pri tem pragu pa izmerjeno ~539.5px -
   samo ~1.5px rezerve. To je bilo namerno, na uporabnikovo izrecno zahtevo
   (raje tesno prilagajanje kot kratica v dvostolpčnem prikazu).

   Z uskladitvijo videza s PredavateljNET je datum dobil stalno širino
   (6.1em ~ 89.8px, prej najširši ~86px), zato potreba naraste na ~542px in
   1.5px rezerve ni več dovolj - najdaljše ime bi se pri 1200px odrezalo.
   Prag je zato dvignjen na 1210px (stolpec ~544.5px po izmerjeni enačbi
   "širina stolpca = 0.5 x window - 60.5"), kratice pa na 540px spodaj.
   OBE številki sta IZRAČUNANI iz te enačbe in ne izmerjeni - ob prvi
   priložnosti ju preveri v konzoli (spodaj) in po potrebi popravi.
   POZOR: ocenjevanje "koliko px window širine da koliko px stolpca" IZ
   FORMULE (margin+padding+gap odštej, deli z 2) je v preteklosti
   sistematično zgrešilo dejansko izrisano širino za 7-9px - vedno preveri
   z window.innerWidth + `.izpitni-roki`.getBoundingClientRect().width v
   konzoli, ne zaupaj samo računu. */
@media (min-width: 1210px) {
  .dvostolpcna-vsebina { grid-template-columns: 1fr 1fr; }
}

.stolpec + .stolpec {
  margin-top: 32px;
}

@media (min-width: 1210px) {
  .dvostolpcna-vsebina .stolpec + .stolpec { margin-top: 0; }
}

/* Drugi razdelek (h2 + vsebina) znotraj istega stolpca - glej Rezultati
   (Statistika + Osebni karton; Rezultati izpitnih rokov + delnih rokov).
   Razdelka loči samo presledek. Ločilne črte nad h2 ni: ker je h2 inline-block,
   je bila široka le toliko kot naslov in je videti visela pod seznamom nad njo. */
.stolpec > * + h2 {
  margin-top: 40px;
  padding-top: 28px;
}

/* Naslovi tečejo v Manrope (--pisava-naslov), telo v Interju - razlika v
   pisavi nosi del hierarhije, zato naslova ni treba pretirano povečevati.
   Pri 1.35rem je negativni letter-spacing nujen: Manrope se pri večjih
   stopnjah sicer razleze. Črta ostane široka toliko kot besedilo (h2 je
   inline-block) in ostane 3px - enako kot obroba glave in noge. */
.stolpec h2 {
  font-family: var(--pisava-naslov);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--barva-modra);
  padding-bottom: 10px;
  margin: 0 0 18px;
  border-bottom: 3px solid var(--barva-oranzna);
  display: inline-block;
}

/* ---------- Pomoč (Izhodisce) ---------- */
.pomoc-seznam {
  margin: 0 0 16px;
  padding-left: 22px;
}

.pomoc-seznam li + li {
  margin-top: 4px;
}

/* Podnaslov znotraj odseka pomoči (npr. tri ankete pod naslovom "Ankete").
   Brez oranžne črte - ta pripada naslovom odsekov (.stolpec h2) in bi tu
   podnaslove postavila v isto raven z njimi. */
.pomoc-podnaslov {
  font-family: var(--pisava-naslov);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--barva-modra);
  margin: 20px 0 6px;
}

.prazna-tabela {
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(29, 78, 140, 0.35);
  border-radius: 10px;
  padding: 24px 18px;
  color: var(--barva-besedilo-mehko);
  font-size: 0.88rem;
  text-align: center;
}

/* ---------- Napredek kreditov (Moduli-predmeti) ---------- */
.napredek-trak {
  height: 8px;
  border-radius: 4px;
  background: rgba(29, 78, 140, 0.15);
  overflow: hidden;
}

.napredek-zapolnjeno {
  height: 100%;
  background: var(--barva-modra);
  border-radius: 4px;
}

.skupaj-napredek {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 10px;
}

.skupaj-napredek-oznaka {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--barva-modra);
}

.skupaj-napredek .napredek-trak {
  flex: 1;
}

.skupaj-napredek-stevilka {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--barva-besedilo-mehko);
  white-space: nowrap;
}

/* Pod ~420px (izmerjeno v konzoli) trak (flex:1) skrči na 0, a oznaka +
   številka same zase (obe flex-shrink:0) ne prideta več skupaj v eno
   vrstico - številka je silila čez desni rob kartice. 480px je z rezervo
   nad to izmerjeno mejo. Oznaka gre v svojo vrstico, trak + številka pod
   njo v drugo. */
@media (max-width: 480px) {
  .skupaj-napredek { flex-wrap: wrap; row-gap: 8px; }
  .skupaj-napredek-oznaka { flex-basis: 100%; }
}

.letnik-glava {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.letnik-glava h2 {
  margin-bottom: 0;
}

.letnik-napredek {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 12px;
}

.letnik-napredek .napredek-trak {
  width: 90px;
}

.letnik-napredek-besedilo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--barva-besedilo-mehko);
  white-space: nowrap;
}

/* ---------- Moduli in predmeti ---------- */
/* Ista kartica kot .izpitni-rok (glej zgoraj) - enak videz, a namenoma BREZ
   klika/cursor:pointer/hidden vsebine: modul je vedno v celoti razprt,
   to ni prava harmonika, ki bi jo bilo mogoče kolapsirati. */
.modul {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 10px;
  padding: 10px 16px 14px;
}

.modul + .modul {
  margin-top: 10px;
}

.modul-glava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(29, 78, 140, 0.18);
}

/* Prej 0.92rem - torej MANJŠI od navadnega besedila, kar je naslov modula
   bralo kot opombo. Zdaj rahlo nad telesom in v Manrope, tako kot h2. */
.modul-glava h3 {
  margin: 0;
  font-family: var(--pisava-naslov);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--barva-modra);
}

.modul-samostojni .modul-glava h3 {
  color: var(--barva-besedilo-mehko);
}

.predmeti-seznam {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.predmet {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.88rem;
}

.predmet + .predmet {
  border-top: 1px solid rgba(29, 78, 140, 0.12);
}

.predmet-ime {
  flex: 1;
  min-width: 0;
}

.predmet-kratica {
  font-weight: 500;
  color: var(--barva-besedilo-mehko);
}

.predmet-opravljen .predmet-ime {
  position: relative;
  margin-left: 20px;
}

.predmet-opravljen .predmet-ime::before {
  content: "\2713";
  position: absolute;
  left: -20px;
  color: var(--barva-modra);
  font-weight: 700;
}

/* Širina je predpisana zato, da značke "Opravljen" stojijo ena pod drugo: brez nje je dvomestna
   vrednost ("13 KT") za 5 px širša od enomestne in značko v tisti vrstici potisne levo.
   2,3 em zadošča za dvomestno vrednost pri tej velikosti pisave. */
.predmet-kt {
  flex-shrink: 0;
  min-width: 2.3em;
  text-align: right;
  color: var(--barva-besedilo-mehko);
  font-size: 0.8rem;
}

.predmet-znacka {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--barva-modra-temna);
  font-size: 0.68rem;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Izpitni roki (harmonika) ---------- */
/* container-type namesto @media - ime predmeta in datum se odzivata na
   DEJANSKO širino stolpca (ki je odvisna od tega, ali je Domov enostolpčen
   ali dvostolpčen - glej .dvostolpcna-vsebina), ne na širino celega okna. */
.izpitni-roki,
.izpitne-prijave {
  container-type: inline-size;
}

.izpitni-rok {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 10px;
}

.izpitni-rok + .izpitni-rok {
  margin-top: 4px;
}

/* Vse harmonike so enako visoke, ne glede na to, kaj stoji v glavi. Brez tega je višina
   odvisna od najvišjega elementa vrstice: z značko/gumbom 46 px (6 + 34 + 6), s samim
   besedilom pa manj. 46 px je torej naravna višina najvišje različice - značka ima
   pripeto line-height (glej .izpitni-rok-oznaka-blokade), da ta račun drži. */
.izpitni-rok-glava {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 16px;
  cursor: pointer;
}

.izpitni-rok-glava:hover { background: rgba(29, 78, 140, 0.06); }

.izpitni-rok-predmet {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--barva-modra);
}

.izpitni-rok-predmet-polno,
.izpitni-rok-predmet-kratko {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.izpitni-rok-kratica {
  font-weight: 500;
  color: var(--barva-besedilo-mehko);
}

/* Stalna širina datuma. Za datumom stoji gumb Prijava oziroma značka, zato je različno
   dolg datum ("1. 9. 2026" proti "24. 12. 2026") premikal gumbe levo in desno in stolpec
   gumbov ni bil raven.

   em in ne px, da rezervacija sledi velikosti pisave. tabular-nums, ker so števke v
   Interju privzeto proporcionalne (1 je ožja od 8) - brez tega bi se širina spreminjala
   tudi pri enako dolgih zapisih. Datum je poravnan desno, torej tik ob gumb, presežek
   prostora pa ostane na strani imena predmeta.

   6.1em je tik nad potrebo najdaljšega zapisa "24. 12. 2026" (~5,85em pri Interju);
   nižje od ~5,9em ne gre, ker takrat najdaljši datumi prerastejo rezervacijo in gumbi
   spet zaplešejo. V PredavateljNET je isto pravilo vezano na modifikator, ker tam isti
   razred v seznamih prijav nosi vrsto študija; tu je v vseh seznamih res datum. */
.izpitni-rok-datum {
  flex-shrink: 0;
  min-width: 6.1em;
  font-size: 0.92rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--barva-besedilo-mehko);
}

/* Rezultati (in Osebni karton): za datumom stoji samo ozka ocena, ne gumb, zato je datum
   sredinjen v svojem rezerviranem stolpcu - desna poravnava ga je stiskala k oceni in je
   na levi puščala vrzel. Širina stolpca ostane ista kot drugod. */
.izpitni-rok-datum.je-sredinsko {
  text-align: center;
}

.izpitni-rok-obrazec-prijava {
  display: contents;
}

.izpitni-rok-gumb-prijava,
.izpitni-rok-oznaka-blokade {
  flex-shrink: 0;
  min-width: 84px;
  /* Pripet line-height: privzeti "normal" je odvisen od pisave, s tem pa bi nihala tudi
     višina cele vrstice harmonike (7 + 20 + 7 = 34 px; glej .izpitni-rok-glava). */
  line-height: 20px;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  white-space: nowrap;
}

.izpitni-rok-gumb-prijava {
  border: none;
  background: var(--barva-modra);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.izpitni-rok-gumb-prijava:hover { background: var(--barva-modra-temna); }

/* Isti gumb kot povezava - za dejanje, ki samo odpre drugo stran in ničesar ne odda (gumb
   "Nadaljuj" pri dispoziciji). Povezava od brskalnika podeduje podčrtaj in je inline, zato bi ji
   navpični notranji rob silil čez vrstico; mere ostanejo iste kot pri gumbih, da so vsi enaki. */
a.izpitni-rok-gumb-prijava {
  display: inline-block;
  text-decoration: none;
}

.izpitni-rok-oznaka-blokade {
  background: rgba(192, 41, 58, 0.10);
  letter-spacing: 0.02em;
  color: var(--barva-napaka);
}

.izpitni-rok-podrobnosti {
  padding: 4px 16px 18px;
  border-top: 1px solid rgba(29, 78, 140, 0.18);
}

.izpitni-rok-opozorilo {
  margin: 14px 0 0;
  font-weight: 700;
  color: var(--barva-napaka);
}

.izpitni-rok-podrobnosti-glavno {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 14px;
}

.izpitni-rok-podatki {
  flex: 1;
  min-width: 200px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 20px;
  margin: 0;
  font-size: 0.85rem;
}

.izpitni-rok-podatki dt {
  font-weight: 700;
  color: var(--barva-besedilo);
}

.izpitni-rok-podatki dt::after { content: ":"; }

.izpitni-rok-podatki dd {
  margin: 0;
  color: var(--barva-besedilo-mehko);
}

.izpitni-rok-podatki > div {
  display: flex;
  gap: 6px;
}

.izpitni-rok-predavatelj {
  flex-shrink: 0;
}

.izpitni-rok-predavatelj-oznaka {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.izpitni-rok-predavatelj-podatki {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--barva-besedilo-mehko);
}

/* Pravokotnik v razmerju prave fotografije (3,5 : 4,5), enako kot
   .nav-avatar (glava - Slika študenta), le manjši - krog bi jo obrezal. */
.izpitni-rok-predavatelj-podatki img {
  width: 31px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid var(--barva-oranzna);
}

.izpitni-rok-odstevalnik {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
}

.izpitni-rok-odstevalnik-oznaka {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--barva-besedilo-mehko);
  margin-bottom: 8px;
}

.izpitni-rok-odstevalnik-stevci {
  display: flex;
  gap: 20px;
}

.izpitni-rok-odstevalnik-stevci > div {
  text-align: center;
}

.izpitni-rok-odstevalnik-stevci strong {
  display: block;
  font-size: 1.3rem;
  color: var(--barva-modra);
}

.izpitni-rok-odstevalnik-stevci.je-kriticno strong {
  color: var(--barva-napaka);
}

.izpitni-rok-odstevalnik-stevci span {
  font-size: 0.72rem;
  color: var(--barva-besedilo-mehko);
  text-transform: uppercase;
}

.izpitni-rok-prijave {
  margin-top: 18px;
}

.izpitni-rok-prijave h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--barva-modra);
}

.izpitni-rok-prijave-ovoj {
  overflow-x: auto;
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 8px;
}

.izpitni-rok-prijave-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.izpitni-rok-prijave-tabela th,
.izpitni-rok-prijave-tabela td {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid rgba(29, 78, 140, 0.12);
}

.izpitni-rok-prijave-tabela th {
  background: rgba(29, 78, 140, 0.10);
  color: var(--barva-modra);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}

.izpitni-rok-prijave-tabela td:not(:first-child) {
  text-align: center;
}

.izpitni-rok-prijave-tabela tbody tr:nth-child(even) {
  background: rgba(29, 78, 140, 0.04);
}

/* Pod 700px so celice/glava tesnejše, da tabela (kratke vrednosti kot
   "2019/20", "1.", "Ne") v običajnem primeru ne rabi vodoravnega drsnika -
   .izpitni-rok-prijave-ovoj (overflow-x: auto) ostane kot varovalka za
   izjeme, ne kot privzeto stanje. */
@media (max-width: 700px) {
  .izpitni-rok-prijave-tabela th,
  .izpitni-rok-prijave-tabela td {
    padding: 7px 3px;
    font-size: 0.72rem;
  }

  .izpitni-rok-prijave-tabela th {
    letter-spacing: 0;
  }
}

.izpitni-rok-opis {
  margin-top: 18px;
  font-size: 0.88rem;
}

.izpitni-rok-opis p {
  margin: 4px 0 0;
  color: var(--barva-besedilo-mehko);
}

.izpitni-rok-predmet-kratko {
  display: none;
  /* Kot inline-block z overflow:hidden (podedovano od skupnega pravila
     zgoraj) bi imel brez tega navpično poravnavo po spodnjem robu polja
     namesto po besedilni osnovnici (baseline) - v vrstici .izpitni-rok-glava
     (align-items:center) je bila zato kratica ~3px previsoko glede na datum
     in gumb/značko. */
  vertical-align: middle;
}

/* Prag je širina STOLPCA (glej container-type zgoraj), zato deluje enako
   pravilno, ne glede na to, ali je Domov trenutno eno- ali dvostolpčen.
   Velikost pisave se NE spreminja - samo katera različica imena predmeta
   je vidna (polno besedilo ali kratica). Prag je TIK POD potrebo
   najdaljšega imena predmeta: ta je bila ~538px (prag 536px), s stalno
   širino datuma pa je ~542px, zato je prag zdaj 540px - glej opombo pri
   .dvostolpcna-vsebina zgoraj, zakaj je rezerve tako malo in zakaj je
   treba oba praga vedno premakniti skupaj. */
@container (max-width: 540px) {
  .izpitni-rok-predmet-polno { display: none; }
  .izpitni-rok-predmet-kratko { display: inline-block; }
}

/* ---------- Izpitne prijave ---------- */
/* Uporablja iste .izpitni-rok* razrede kot harmonika Izpitnih rokov (glej
   zgoraj) - vizualno enaka, le gumb (Odjava namesto Prijava), odštevalnik
   (do odjave namesto prijave) in vrstica "Prijava: X." so drugačni. */
.izpitni-rok-zaporedna-prijava {
  margin: 14px 0 0;
  font-size: 0.85rem;
}

/* ---------- Osebni podatki ---------- */
.osebni-podatki-ime {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.osebni-podatki-naslov {
  margin: 0 0 4px;
  color: var(--barva-besedilo-mehko);
  font-size: 0.9rem;
}

.osebni-podatki-seznam {
  margin: 20px 0 0;
}

/* .izpitni-rok-podatki (glej zgoraj) je bila zasnovana za širšo kartico
   (harmonika Izpitnih rokov) - njena grid-template-columns: repeat(2, auto)
   ne popušča pod širino vsebnika, zato so dolge vrednosti (npr. "Program")
   na ozkih zaslonih silile vodoravni prelivek cele strani, ne le tega
   seznama. Pod 700px zato en sam stolpec - dt/dd se poravnata pod sabo. */
@media (max-width: 700px) {
  .osebni-podatki-seznam { grid-template-columns: 1fr; }
}

/* "Dosedanje prijave" (glej _IzpitniRoki/_IzpitnePrijave) dobi svojo belkasto
   podlago od ovoja .izpitni-rok - tu take nadrejene kartice ni, zato jo
   .osebni-podatki-tabela zagotovi sama (enake barve/radij kot .izpitni-rok),
   da so glava/vrstice tabele svetle namesto da se zlijejo z modro .vsebina. */
.osebni-podatki-tabela {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 10px;
  padding: 14px 16px 16px;
}

.osebni-podatki-opomba {
  margin: 24px 0 0;
  font-size: 0.85rem;
  color: var(--barva-besedilo-mehko);
}

.osebni-podatki-opomba a {
  color: var(--barva-modra);
}

/* ---------- Sprememba gesla ---------- */
.sprememba-gesla-sporocilo {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.sprememba-gesla-uspeh {
  background: rgba(44, 172, 227, 0.14);
  color: var(--barva-modra-temna);
  border: 1px solid rgba(44, 172, 227, 0.35);
}

.sprememba-gesla-napaka {
  background: #FDEEEF;
  color: var(--barva-napaka);
  border: 1px solid #F6C6CB;
}

/* Sporočilo pod gumbom in ne nad obrazcem: nad njim ni ničesar, kar bi moral odriniti,
   zato razmik gor namesto dol. Nad obrazcem je vsaka oddaja obrazec potisnila navzdol in
   ob naslednjem obisku nazaj gor - stran je ob kliku poskočila. */
.sprememba-gesla-sporocilo.je-spodaj {
  margin: 18px 0 0;
}

/* Stolpec: oznaka, polje in pod njim sporočilo o napaki (.obrazec-napaka). Razmik dela
   gap in ne margin oznake - tako je enak tudi nad sporočilom, ki pride za poljem. */
.sprememba-gesla-polje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.sprememba-gesla-polje label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--barva-besedilo);
}

/* Vrstica z gumbom na dnu obrazca - gumb stoji desno. Isto ime kot v PredavateljNET. */
.gumbi-desno {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.sprememba-gesla-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid rgba(29, 78, 140, 0.25);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: var(--pisava-telo);
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sprememba-gesla-input:focus {
  outline: none;
  border-color: var(--barva-modra);
  box-shadow: 0 0 0 3px rgba(29, 78, 140, 0.12);
  background: #fff;
}

.sprememba-gesla-pravila {
  margin: 4px 0 20px;
  font-size: 0.8rem;
  color: var(--barva-besedilo-mehko);
}

/* ---------- Rezultati ---------- */
/* Značka z oceno v glavi harmonike - na mestu, kjer je pri Izpitnih rokih
   gumb Prijava/oznaka blokade (glej .izpitni-rok-gumb-prijava). Rezultati
   so samo za branje, zato tu ni gumba - a navpični padding je namerno enak
   gumbu/oznaki, da je glava harmonike enako visoka povsod; brez tega je tu
   edini (najvišji) element v vrstici navadno besedilo brez paddinga, zato
   je bila cela .izpitni-rok-glava vrstica opazno nižja kot drugod. */
.izpitni-rok-ocena {
  flex-shrink: 0;
  min-width: 34px;
  padding: 6px 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--barva-ocena);
}

/* Ena kartica, tri postavke z navpičnimi ločnicami med njimi (namesto
   praznega prostora) - izbrana varianta "A" po primerjavi treh predlogov. */
.statistika-vrstica {
  display: flex;
  align-items: center;
  padding: 22px 8px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 12px;
}

.statistika-stevec {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 12px;
}

.statistika-locilo {
  width: 1px;
  align-self: stretch;
  background: rgba(29, 78, 140, 0.16);
  margin: 2px 0;
}

.statistika-stevilka {
  display: block;
  font-family: var(--pisava-naslov);
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--barva-besedilo);
}

.statistika-stevilka-poudarjena {
  color: var(--barva-oranzna-besedilo);
}

.statistika-oznaka {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--barva-besedilo-mehko);
}

.statistika-krog {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin: 0 auto;
  background: conic-gradient(var(--barva-modra) calc(var(--odstotek) * 1%), rgba(29, 78, 140, 0.14) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.statistika-krog-notranjost {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pisava-naslov);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--barva-modra);
}

/* ---------- Ankete ---------- */
/* Predmet nad Predavateljem (ne drug ob drugem), oba polovične širine -
   povzeto po videzu stare aplikacije, na izrecno zahtevo uporabnika. */
.anketa-izbira {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* min-width izmerjen na dejanski najdaljši postavki spustnega seznama -
   "Trajnostni razvoj z izb. poglavji iz biol. (TRB), 1. letnik" (59 znakov,
   SELECT dbo.Predmeti). 320px je bilo PREMALO: pri širini okna med ~700px in
   ~1480px (ko je .stolpec ožji od svojega maksimuma, a širši od preloma
   spodaj) se je 50% izračunalo na ~350-420px, kar je besedilo obrezalo (glej
   prijavljeno napako - "Računalniški sistemi in vzdrževanje (F" na pol
   obrezano). 480px je izmerjeno z rezervo nad dejansko potrebo. */
/* calc(50% - 14px), NE golih 50% - .anketa-obrazec-mreza spodaj (Vprašanja/
   Komentarji) je 2-stolpčna mreža z 28px režo, zato je vsak njen stolpec
   dejansko širok 50% - 14px (polovica reže na vsaki strani), ne 50%. Golih
   50% tu je bilo 14px PREVEČ - desni rob polja (Predmet/Predavatelj) je
   segal čez desni rob stolpca "Vprašanja" pod njim - izmerjeno v konzoli
   (getBoundingClientRect: polje right 952.5 proti stolpec right 938.5 pri
   oknu 1920px). */
.anketa-polje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: calc(50% - 14px);
  min-width: 480px;
}

/* Pod 700px 50% + min-width:480px ne bi več prišla skupaj (predviden prostor
   ožji od minimuma) - na voljo je cel razpoložljivi prostor namesto vodoravnega
   drsnika, besedilo v izbrani postavki (glej select spodaj) pa ostane berljivo
   pri VSEH širinah, ker ga select prireže z "..." šele, ko mu zmanjka prostora,
   ne prej. */
@media (max-width: 700px) {
  .anketa-polje { width: 100%; min-width: 0; }
}

/* 15,2 px in ne 13,6 px: oznaka nad poljem je bila v primerjavi z besedilom v polju
   (16 px) premajhna. Ista velikost kot .obrazec-oznaka v PredavateljNET. */
.anketa-polje span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--barva-besedilo);
}

/* Lasten puščični indikator (dva trikotnika, gor/dol) namesto privzetega
   brskalnikovega - glej sliko stare aplikacije, na katero se sklicuje
   uporabnik. appearance:none odstrani privzeti indikator v vseh brskalnikih. */
.anketa-polje select {
  /* Višina in velikost besedila sta predpisani, ne prepuščeni brskalniku - ta spustnemu
     seznamu vsili svojo pisavo in svojo višino. Iste tri vrednosti ima polje v
     PredavateljNET (glej tam select.sprememba-gesla-input): 44 px, 16 px, 1.2.
     Brez predpisane višine jo je določala velikost pisave in bi ob njeni spremembi
     nehala biti enaka. */
  height: 44px;
  box-sizing: border-box;
  padding: 11px 34px 11px 14px;
  border: 1.5px solid rgba(29, 78, 140, 0.25);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.2;
  font-family: var(--pisava-telo);
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpolygon points='1,6 5,1 9,6' fill='%231D4E8C'/%3E%3Cpolygon points='1,10 5,15 9,10' fill='%231D4E8C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 16px;
}

.anketa-polje select:focus {
  outline: none;
  border-color: var(--barva-modra);
  box-shadow: 0 0 0 3px rgba(29, 78, 140, 0.12);
}

/* Dokler ni nič izbranega, je "Izberite predmet"/"Izberite predavatelja" sivo - je
   poziv in ne izbira, sicer pa je videti kot pravi predmet, ker je navadna možnost
   spustnega seznama in ne placeholder. Ko študent izbere, je :checked druga možnost
   in besedilo je spet črno. Enako je urejeno v PredavateljNET (glej tam
   select.sprememba-gesla-input); razlika je le v vrednosti možnosti-poziva, ki je
   tu "0" in ne prazna.

   Sam razgrnjeni seznam ostane črn - sivo je le polje, dokler stoji na pozivu. */
.anketa-polje select:has(option[value="0"]:checked) {
  color: var(--barva-besedilo-mehko);
}

.anketa-polje select option {
  color: var(--barva-besedilo);
}

.anketa-uvod {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.anketa-uvod p {
  margin: 0 0 8px;
  color: var(--barva-besedilo-mehko);
}

.anketa-uvod p:first-child {
  color: var(--barva-besedilo);
  font-weight: 600;
}

.anketa-uvod p:last-child {
  margin-bottom: 0;
}

.anketa-obrazec h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--barva-modra);
  border-bottom: 1px solid rgba(29, 78, 140, 0.18);
  padding-bottom: 6px;
}

/* Dve kolone (Trditve/Vprašanja | Komentarji) - povzeto po videzu stare
   aplikacije, ki je bil gostejši/pregledniejši kot prva (kartica na
   vprašanje) različica te strani. En stolpec pod 900px. */
.anketa-obrazec-mreza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  align-items: stretch;
}

/* Pod 900px sta stolpca zložena eno pod drugim - takrat 28px ni več
   column-gap med njima, ampak row-gap, zato ga je treba eksplicitno
   nastaviti (zgornji "gap: 0 28px" ima row-gap 0, kar je bilo v enem
   stolpcu videti, kot da se kartici skoraj dotikata). */
@media (max-width: 900px) {
  .anketa-obrazec-mreza { grid-template-columns: 1fr; gap: 20px 0; }
}

.anketa-stolpec {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 78, 140, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
}

/* Kartica čez celo širino, nad dvostolpčno mrežo - sklop, ki ne spada ne med
   trditve ne med komentarje (pri anketi diplomantov status in zaposlitev). */
.anketa-stolpec-sirok {
  margin-bottom: 20px;
}

.anketa-lestvica-legenda {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--barva-besedilo-mehko);
}

.anketa-trditev {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(29, 78, 140, 0.10);
}

.anketa-stolpec .anketa-trditev:last-child {
  border-bottom: none;
}

.anketa-trditev-izbira {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Viseči zamik (hanging indent) - številka v stolpcu stalne širine (dovolj
   za dvomestne "10." do "23."), besedilo poleg kot lasten flex-item, zato se
   ovite vrstice poravnajo pod ZAČETEK besedila, ne pod številko. Prejšnji
   poskus s text-indent je bil kalibriran samo za enomestne številke ("1." do
   "9.") - pri dvomestnih ("10." dalje, širših) je bil zamik prekratek in so
   se ovite vrstice poravnale preveč levo. */
.anketa-trditev-besedilo {
  flex: 1;
  margin: 0;
  display: flex;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--barva-besedilo);
}

.anketa-trditev-besedilo strong {
  flex: 0 0 1.6em;
  color: var(--barva-modra);
}

/* Lestvica 1-8 - majhni oštevilčeni krogci namesto besedilnih gumbov, glej
   .anketa-lestvica-legenda za pomen skrajnih vrednosti (stara aplikacija
   sploh ni imela besedila, samo krogce - legenda ostane za razumljivost). */
.anketa-lestvica {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.anketa-lestvica-postavka {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(29, 78, 140, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--barva-besedilo-mehko);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.anketa-lestvica-postavka:has(input:checked) {
  border-color: var(--barva-modra);
  background: var(--barva-modra);
  color: #fff;
}

/* Pod 700px se .anketa-lestvica (krogci) ne more več stisniti poleg besedila
   trditve, ne da bi ušla čez rob zaslona - flex-shrink:0 zgoraj namenoma
   prepreči krčenje lestvice, zato mora namesto tega .anketa-trditev
   prelomiti v stolpec, da lestvica dobi celo širino vrstice in se sama
   preloma v več vrstic krogcev (isti .anketa-lestvica-postavka ostane 26px). */
@media (max-width: 700px) {
  .anketa-trditev {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Isti viseči zamik kot .anketa-izbira-vrstica - lestvica se poravna pod
     BESEDILO trditve, ne pod številko. */
  .anketa-lestvica {
    margin-left: calc(1.6em + 5px);
  }
}

/* Pravi radio gumbi (krogec + besedilo), kot v stari aplikaciji - ne
   obarvani gumbi/škatlice. margin-left: calc(1.6em + 5px) poravna postavke
   pod BESEDILO vprašanja (viseči zamik, glej .anketa-trditev-besedilo
   zgoraj), ne pod številko. */
.anketa-izbira-vrstica {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 8px;
  margin-left: calc(1.6em + 5px);
}

/* Vprašanje 3 - postavke vedno ena pod drugo (ne prelom glede na širino),
   na izrecno zahtevo uporabnika. */
.anketa-izbira-vrstica-stolpec {
  flex-direction: column;
}

.anketa-izbira-postavka {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--barva-besedilo);
  cursor: pointer;
}

.anketa-izbira-postavka:has(input:checked) {
  color: var(--barva-modra);
  font-weight: 700;
}

.anketa-izbira-postavka input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--barva-modra);
  cursor: pointer;
}

.anketa-lestvica-postavka input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.anketa-komentar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(29, 78, 140, 0.10);
}

.anketa-stolpec .anketa-komentar:last-child {
  border-bottom: none;
}

.anketa-komentar-glava {
  display: flex;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--barva-besedilo);
}

.anketa-komentar-glava strong {
  flex: 0 0 1.6em;
  color: var(--barva-modra);
}

/* Besedilno polje poravnano pod BESEDILO vprašanja/komentarja (viseči
   zamik), enako kot pri radio postavkah (Vprašanje 2/3, _Anketa2) in
   oštevilčeni lestvici - velja za VSA besedilna polja (_Anketa1 in
   _Anketa2), na izrecno zahtevo uporabnika. */
.anketa-komentar textarea {
  width: calc(100% - 1.6em - 5px);
  margin-left: calc(1.6em + 5px);
  padding: 8px 10px;
  border: 1.5px solid rgba(29, 78, 140, 0.25);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--pisava-telo);
  background: #fff;
  resize: vertical;
}

.anketa-komentar textarea:focus {
  outline: none;
  border-color: var(--barva-modra);
  box-shadow: 0 0 0 3px rgba(29, 78, 140, 0.12);
}

.anketa-oddaja {
  margin-top: 20px;
  text-align: center;
}

.anketa-oddaja .izpitni-rok-gumb-prijava {
  padding: 10px 32px;
  font-size: 0.9rem;
}

/* ---------- Dispozicija ---------- */
/* Opozorilo pred obrazcem. Oranžno in ne rdeče: to ni napaka, ampak pogoj, ki
   ga mora študent urediti, preden začne pisati. */
.dispozicija-opozorilo {
  background: rgba(238, 139, 46, 0.12);
  border: 1px solid rgba(238, 139, 46, 0.45);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.dispozicija-opozorilo p {
  margin: 0 0 8px;
  color: var(--barva-besedilo);
}

.dispozicija-opozorilo p:first-child { font-weight: 700; }
.dispozicija-opozorilo p:last-child { margin-bottom: 0; }

/* Zavrnitev: rdeče in ne oranžno kot opozorilo o mentorju - to ni pogoj, ki ga je
   treba urediti vnaprej, ampak odgovor referata, na katerega mora študent odreagirati. */
.dispozicija-zavrnitev {
  background: rgba(192, 41, 58, 0.08);
  border: 1px solid rgba(192, 41, 58, 0.40);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.dispozicija-zavrnitev p {
  margin: 0 0 8px;
  color: var(--barva-besedilo);
}

.dispozicija-zavrnitev p:first-child {
  font-weight: 700;
  color: var(--barva-napaka);
}

.dispozicija-zavrnitev p:last-child { margin-bottom: 0; }

.dispozicija-dejanje {
  margin: 0 0 24px;
}

/* Vrstica "Oddana 17. 9. 2026" je edini napis nad oddano dispozicijo (svojega naslova odsek nima),
   zato je za spoznanje večja od drobnega pripisa - toliko, da se prebere kot podatek in ne kot
   opomba pod črto. */
.dispozicija-datum {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--barva-besedilo-mehko);
}

/* Značke "Vložena podpisana dispozicija" ni več: datum vloženega izvoda stoji v isti vrstici kot
   datum oddaje ("Oddana 17. 9. 2026, podpisana 20. 9. 2026", glej .dispozicija-datum), zato bi
   značka isto povedala dvakrat. */

/* ---------- Skupna polja obrazcev (dispozicija, anketa diplomantov) ---------- */
/* Ista geometrija kot .anketa-komentar, le da ima polje lahko tudi <input> ali
   <select>, ne samo <textarea> - in da tu ni oštevilčenja, ker rubrike
   dispozicije na papirju niso oštevilčene. */
.obrazec-polje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(29, 78, 140, 0.10);
}

.anketa-stolpec .obrazec-polje:last-child { border-bottom: none; }

.obrazec-oznaka {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--barva-besedilo);
}

.obrazec-namig {
  font-size: 0.78rem;
  color: var(--barva-besedilo-mehko);
}

/* Polja samo za branje (oddana dispozicija). Namenoma NI svojega videza: obrazec in
   pregled izrisuje ista predloga z istimi polji, tu se le ne da pisati. Zato tudi ni
   sivine, ki jo brskalnik sicer da onemogočenim poljem - besedilo mora ostati enako
   berljivo kot pri vnosu.
   Ročice za spreminjanje velikosti pri branju ni: višino polja nastavi skript v
   _DispozicijaPolja.cshtml tako, da je vidno celo besedilo. */
.obrazec-polje textarea[readonly] {
  resize: none;
  overflow: hidden;
}

.obrazec-polje input[readonly],
.obrazec-polje textarea[readonly] {
  cursor: default;
}

.obrazec-polje input[type="text"],
.obrazec-polje select,
.obrazec-polje textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid rgba(29, 78, 140, 0.25);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--pisava-telo);
  background: #fff;
  color: var(--barva-besedilo);
}

.obrazec-polje textarea { resize: vertical; }

.obrazec-polje input[type="text"]:focus,
.obrazec-polje select:focus,
.obrazec-polje textarea:focus {
  outline: none;
  border-color: var(--barva-modra);
  box-shadow: 0 0 0 3px rgba(29, 78, 140, 0.12);
}

.obrazec-potrditev {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  font-size: 0.85rem;
  color: var(--barva-besedilo);
  cursor: pointer;
}

.obrazec-potrditev input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--barva-modra);
  cursor: pointer;
}

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

/* Sklop vprašalnika, ki se pokaže glede na odgovor (zaposlitev oz. nadaljnji
   študij pri anketi diplomantov). V HTML je sklop viden, skrije ga šele JS -
   brez JavaScripta sta zato vidna oba in oddaja vseeno deluje, ker polja v
   njiju niso obvezna. Obratno (skrit v HTML, odprt z JS) bi brez JS
   diplomantu vzelo pol vprašalnika. */
.anketa-sklop {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(29, 78, 140, 0.18);
}

.anketa-sklop-naslov {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--barva-modra);
}

/* ---------- Noga ---------- */
.noga {
  margin-top: auto;
  background: #FFFFFF;
  border-top: 3px solid var(--barva-oranzna);
  color: var(--barva-besedilo-mehko);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 16px 20px;
  text-align: center;
}