:root {
  --ozadje: #f5f6f8;
  --povrsina: #ffffff;
  --besedilo: #1d2330;
  --umirjeno: #6b7280;
  --rob: #e3e6eb;
  --poudarek: #2f6fdf;
  --poteka: #fff7e0;
  --poteka-rob: #f0a500;
  --senca: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .04);
  --opozorilo-ozadje: #fff4d6;
  --opozorilo-besedilo: #7a4b00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ozadje: #14171c;
    --povrsina: #1d2128;
    --besedilo: #e7e9ee;
    --umirjeno: #9aa1ad;
    --rob: #2c313a;
    --poudarek: #6d9cff;
    --poteka: #2d2716;
    --poteka-rob: #e0a526;
    --senca: none;
    --opozorilo-ozadje: #3a2e12;
    --opozorilo-besedilo: #f3cf7a;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Položaj ob dodajanju dni ohranja planer sam (planer.js). */
html { overflow-anchor: none; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--ozadje);
  color: var(--besedilo);
  line-height: 1.45;
}

/* ---------- glava ---------- */
.glava {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; align-items: center;
  padding: 12px 24px;
  background: var(--povrsina);
  border-bottom: 1px solid var(--rob);
}
.glava h1 { margin: 0; font-size: 1.35rem; }
.glava p { margin: 0; color: var(--umirjeno); font-size: .9rem; }
.glava__desno { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ura { display: grid; justify-items: end; }
.ura__cas { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ura__datum { font-size: .9rem; }
.ura__vir { font-size: .72rem; color: var(--umirjeno); }
.glava__razred {
  font-size: .9rem; font-weight: 600; vertical-align: middle;
  background: var(--poudarek); color: #fff; padding: 2px 10px; border-radius: 99px; margin-left: 6px;
}
.glava a { color: var(--poudarek); }
.meni { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.meni a {
  text-decoration: none; color: var(--umirjeno); font-size: .9rem;
  padding: 4px 10px; border-radius: 8px;
}
.meni a:hover { background: var(--ozadje); color: var(--besedilo); }
.meni a.aktivno { background: var(--ozadje); color: var(--besedilo); font-weight: 600; }

.opomnik {
  margin: 16px auto 0; max-width: 1000px; padding: 10px 14px; border-radius: 8px;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--opozorilo-ozadje); color: var(--opozorilo-besedilo);
}
.opozorilo {
  margin: 16px auto 0; max-width: 1000px; padding: 10px 14px;
  background: #fde8e8; color: #8a1c1c; border-radius: 8px;
}

/* ---------- planer ---------- */
.planer {
  max-width: 1000px; margin: 0 auto; padding: 16px;
  display: grid; gap: 16px;
}
.dan {
  background: var(--povrsina);
  border: 1px solid var(--rob);
  border-radius: 12px;
  box-shadow: var(--senca);
  overflow: hidden;
}
.dan--danes { border-color: var(--poudarek); border-width: 2px; }
.dan--prost { opacity: .75; }
.dan__glava {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rob);
}
.dan__oznaka {
  background: var(--poudarek); color: #fff;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 99px;
}
.dan__datum { margin: 0; font-size: 1.1rem; }
.dan__teden {
  width: auto; font-size: .75rem; color: var(--umirjeno); cursor: pointer;
  border: 1px solid var(--rob); border-radius: 99px; padding: 1px 6px; background: var(--povrsina);
}
.dan__teden.rocno { border-color: var(--poudarek); color: var(--poudarek); font-weight: 600; }
.dan__status { color: var(--umirjeno); font-size: .9rem; margin-left: auto; }
.dan__uredi { margin-left: auto; }
.dan__status:not(:empty) + .dan__uredi { margin-left: 0; }
.dan__opomba { margin: 0; padding: 8px 16px; background: var(--ozadje); font-size: .9rem; }
.dan__ure { list-style: none; margin: 0; padding: 0; }
.dan__prazno { padding: 14px 16px; color: var(--umirjeno); }

.dan--preteklo { opacity: .8; }
.dan--preteklo .dan__glava { background: var(--ozadje); }

/* ---------- blok prostih dni ---------- */
.prosto {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 10px 16px; border-radius: 12px;
  border: 1px dashed var(--rob); color: var(--umirjeno);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--povrsina) 10px 20px);
}
.prosto__naziv { color: var(--besedilo); }
.prosto__dni { font-size: .85rem; }
.prosto__vkljucno { font-size: .8rem; flex-basis: 100%; }
.prosto--danes { border: 2px solid var(--poudarek); }
.prosto--preteklo { opacity: .7; }

/* ---------- orodna vrstica planerja ---------- */
.orodja {
  position: sticky; top: var(--glava-h, 0px); z-index: 5;
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px 16px; background: var(--ozadje); border-bottom: 1px solid var(--rob);
}
.orodja__datum { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--umirjeno); margin-left: 8px; }
.orodja__datum input { width: auto; }
.rob { height: 1px; }

/* ---------- šolska ura ---------- */
.blok {
  display: grid; grid-template-columns: 110px 1fr;
  border-left: 5px solid var(--barva, #888);
  border-bottom: 1px solid var(--rob);
}
.blok:last-child { border-bottom: 0; }
.blok--mimo { opacity: .55; }
.blok--poteka { background: var(--poteka); box-shadow: inset 0 0 0 2px var(--poteka-rob); opacity: 1; }
.blok__cas { padding: 12px; display: grid; align-content: start; gap: 2px; }
.blok__st { font-weight: 700; }
.blok__od-do { font-size: .85rem; color: var(--umirjeno); font-variant-numeric: tabular-nums; }
.blok__poteka {
  justify-self: start; margin-top: 4px;
  background: var(--poteka-rob); color: #1d1600;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
}
.blok__odpade {
  justify-self: start; margin-top: 4px;
  background: var(--umirjeno); color: var(--povrsina);
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
}
.blok--odpade .blok__predmet { text-decoration: line-through; }
.blok--odpade { background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--ozadje) 8px 16px); }
.blok__odpade-opis { margin: 4px 0 0; color: var(--umirjeno); font-size: .85rem; font-style: italic; }
.blok__vsebina { padding: 12px 16px 14px 0; min-width: 0; }
.blok__gumbi { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.blok__znacka {
  font-size: .72rem; padding: 0 7px; border-radius: 99px;
  background: var(--opozorilo-ozadje); color: var(--opozorilo-besedilo);
}
.blok--zamenjano { box-shadow: inset 3px 0 0 var(--poteka-rob); }
.blok__izbira { margin-top: 8px; }
.blok__izbira select { max-width: 520px; }
.blok__izbira option.uporabljena { color: var(--umirjeno); }

/* premikanje ur */
.blok__rocaj {
  cursor: grab; touch-action: none; user-select: none; color: var(--umirjeno);
  font-size: 1.1rem; line-height: 1; justify-self: start; padding: 2px 4px; margin: -2px 0 2px -4px; border-radius: 4px;
}
.blok__rocaj:hover { background: var(--ozadje); color: var(--besedilo); }
.blok--vlecen {
  position: relative; z-index: 20; cursor: grabbing; opacity: .95;
  background: var(--povrsina); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.blok-prazno {
  display: none; gap: 12px; align-items: baseline; padding: 8px 12px 8px 17px;
  border-bottom: 1px dashed var(--rob); color: var(--umirjeno); font-size: .85rem;
}
.blok-prazno__ura { font-weight: 600; min-width: 80px; }
.blok-prazno__obnovi { margin-left: auto; }
.dan--vlecenje .blok-prazno, .blok-prazno--odstranjena { display: flex; }
.blok-prazno--odstranjena { font-style: italic; }
.dan--vlecenje .cilj { outline: 2px dashed var(--poudarek); outline-offset: -3px; background: var(--poteka); }
.blok__glava { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.blok__predmet { font-weight: 700; color: var(--barva); }
.blok__n { color: var(--umirjeno); font-size: .8rem; font-variant-numeric: tabular-nums; }
.blok__tema { margin: 4px 0 2px; font-size: 1.05rem; font-weight: 500; }
.blok__opomba { margin: 2px 0; color: var(--umirjeno); font-size: .9rem; }
.blok__opozorilo {
  margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; font-size: .82rem;
  background: var(--opozorilo-ozadje); color: var(--opozorilo-besedilo);
}
.blok__stolpci { margin-top: 10px; }
.blok__stolpci { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blok h3, .blok h4 {
  margin: 0 0 4px; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--umirjeno);
}
.blok h4 { margin-top: 8px; }
.blok ul { margin: 0; padding-left: 18px; font-size: .92rem; }
.blok a { color: var(--poudarek); }
.prazno { color: var(--umirjeno); font-style: italic; list-style: none; }
.blok ul li.prazno { margin-left: -18px; }


/* ---------- gumbi in obrazci ---------- */
button, .gumb {
  font: inherit; font-size: .9rem; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rob); background: var(--povrsina); color: var(--besedilo);
}
button:hover, .gumb:hover { border-color: var(--poudarek); }
button:disabled { opacity: .5; cursor: default; }
button.glavni { background: var(--poudarek); border-color: var(--poudarek); color: #fff; }
button.tih {
  border: 0; background: none; color: var(--umirjeno); font-size: .8rem; padding: 2px 6px;
}
button.tih:hover { color: var(--poudarek); text-decoration: underline; }
.obrazec {
  display: grid; gap: 10px; margin-top: 10px; padding: 12px;
  background: var(--ozadje); border-radius: 8px;
}
.dan__obrazec { margin: 0; border-radius: 0; border-bottom: 1px solid var(--rob); }
.obrazec label, .stran-obrazec label { display: grid; gap: 4px; font-size: .85rem; color: var(--umirjeno); }
.obrazec label.potrditev, label.potrditev { display: flex; gap: 8px; align-items: center; color: var(--besedilo); }
input[type="text"], textarea, select {
  font: inherit; font-size: .92rem; color: var(--besedilo); background: var(--povrsina);
  border: 1px solid var(--rob); border-radius: 6px; padding: 6px 8px; width: 100%;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--poudarek); outline-offset: -1px; }
.obrazec__gumbi, .urnik__gumbi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sporocilo { color: #15803d; font-size: .9rem; }
.sporocilo.napaka { color: #b91c1c; }

/* ---------- strani z obrazci (urnik, kopija) ---------- */
.stran-obrazec {
  max-width: 1000px; margin: 16px auto; padding: 18px 22px;
  background: var(--povrsina); border: 1px solid var(--rob); border-radius: 12px;
}
.stran-obrazec h2 { margin: 0; }
.stran-obrazec__glava { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.stanje-shranjevanja { font-size: .85rem; color: var(--umirjeno); }
.stanje-shranjevanja.shranjeno { color: #15803d; }
.stanje-shranjevanja.napaka { color: #b91c1c; }
.dobrodoslica {
  padding: 10px 14px; border-radius: 8px; background: var(--poteka); border: 1px solid var(--poteka-rob);
}
fieldset { border: 1px solid var(--rob); border-radius: 8px; margin: 0 0 14px; }
legend { font-size: .85rem; color: var(--umirjeno); padding: 0 6px; }
.urnik__razredi { display: flex; gap: 16px; flex-wrap: wrap; }
.urnik__vrstica { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.urnik__vrstica label { width: auto; }
.urnik__vrstica select { width: auto; }
.urnik__teden { margin-bottom: 18px; overflow-x: auto; }
.urnik__teden-glava { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 6px 0; }
.urnik__teden h3 { margin: 0 8px 0 0; font-size: 1rem; }
.gumb-kopija { font-size: .85rem; padding: 4px 12px; border-color: var(--poudarek); color: var(--poudarek); }
.gumb-kopija:hover { background: var(--poudarek); color: #fff; }
.urnik__tabela { border-collapse: collapse; width: 100%; min-width: 640px; }
.urnik__tabela th, .urnik__tabela td { border: 1px solid var(--rob); padding: 4px; text-align: left; }
.urnik__tabela thead th { text-align: center; font-size: .85rem; background: var(--ozadje); }
.urnik__tabela tbody th { font-size: .85rem; white-space: nowrap; width: 90px; }
.urnik__tabela small { color: var(--umirjeno); font-weight: normal; }
.urnik__tabela select { font-size: .85rem; padding: 4px; }
.urnik__predura th, .urnik__predura td { background: var(--ozadje); }
.zvonjenje__seznam { display: grid; gap: 2px; margin-bottom: 10px; }
.zvonjenje__ura { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.zvonjenje__ura strong { min-width: 70px; }
.zvonjenje__ura--predura { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--rob); }
.zvonjenje input[type="time"] { width: auto; }
.zvonjenje__odmor { padding-left: 78px; font-size: .8rem; color: var(--umirjeno); }
.zvonjenje__odmor input { width: 64px; padding: 2px 6px; font-size: .8rem; }
.zvonjenje__napaka { color: #b91c1c; font-size: .8rem; }
.namig { margin: 0 0 8px; font-size: .85rem; color: var(--umirjeno); }
.blok--predura .blok__st { font-style: italic; }
.kopija__trajno { font-size: .9rem; color: #15803d; }
.kopija__trajno.opozorilno { color: var(--opozorilo-besedilo); }
.nalagam { text-align: center; color: var(--umirjeno); }

/* ---------- datumsko polje dd/mm/llll ---------- */
.datum-polje { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.datum-polje__besedilo { width: 8.2em !important; font-variant-numeric: tabular-nums; }
.datum-polje__besedilo.napacno { border-color: #b91c1c; outline-color: #b91c1c; }
.datum-polje__koledar { font-size: 1rem; padding: 2px 6px; }
.datum-polje__izvorno {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; padding: 0;
}

/* ---------- dnevi dejavnosti ---------- */
.dejavnost--KD { --dejavnost: #9333ea; }
.dejavnost--TD { --dejavnost: #0891b2; }
.dejavnost--ND { --dejavnost: #16a34a; }
.dejavnost--SD { --dejavnost: #ea580c; }
.dejavnosti__stolpci { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .dejavnosti__stolpci { grid-template-columns: repeat(2, 1fr); } }
.dejavnosti__stolpec { border-top: 3px solid var(--dejavnost); padding-top: 6px; display: grid; gap: 6px; align-content: start; }
.dejavnosti__stolpec h4 { margin: 0; font-size: .9rem; }
.dejavnosti__stevilo { color: var(--umirjeno); font-weight: normal; }
.dejavnosti__seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.dejavnosti__seznam li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dejavnosti__naziv { color: var(--umirjeno); }
.dejavnosti__odstrani { margin-left: auto; }
.dejavnosti__dodaj { margin-top: 0; }
.dejavnosti__stolpec > .gumb-kopija { justify-self: start; border-color: var(--dejavnost); color: var(--dejavnost); }
.dejavnosti__stolpec > .gumb-kopija:hover { background: var(--dejavnost); color: #fff; }
.dan--dejavnost { opacity: 1; border-left: 5px solid var(--dejavnost); }
.dan--dejavnost .dan__prazno { color: var(--dejavnost); font-weight: 600; }
@media (max-width: 760px) { .dejavnosti__stolpci { grid-template-columns: 1fr; } }

/* ---------- dokumenti tem ---------- */
.blok__dokumenti { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.blok__dok {
  font-size: .82rem; text-decoration: none; padding: 2px 10px; border-radius: 99px;
  border: 1px solid var(--rob); color: var(--besedilo) !important; background: var(--povrsina);
}
.blok__dok:hover { border-color: var(--poudarek); color: var(--poudarek) !important; }

/* ---------- skrbnik ---------- */
.admin__tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin__tabela th, .admin__tabela td { border-bottom: 1px solid var(--rob); padding: 6px 8px; text-align: left; vertical-align: middle; }
.admin__tabela td:first-child { color: var(--umirjeno); width: 40px; }
.admin__dokument { white-space: nowrap; width: 210px; }
.admin__dokument > * { vertical-align: middle; }
.stran-obrazec .admin__dokument label.gumb { display: inline-block; color: var(--besedilo); }
.admin__dokument a { text-decoration: none; margin-right: 6px; }
.gumb-majhen { font-size: .8rem; padding: 2px 10px; }
.admin__stanje { font-size: .8rem; color: var(--umirjeno); margin-left: 6px; }

/* ---------- nadomeščanje ---------- */
.dan__deli { margin-left: auto; }
.dan__deli + .dan__uredi { margin-left: 0; }
.dan__status:not(:empty) ~ .dan__deli { margin-left: 0; }
.deljenje__seznam { list-style: none; padding: 0; display: grid; gap: 10px; }
.deljenje__vnos {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--rob); border-radius: 10px;
}
.deljenje__vnos .namig { margin: 0; }
.deljenje__povezava { grid-column: 1 / -1; font-family: ui-monospace, monospace; font-size: .8rem; }
.deljenje__vnos .obrazec__gumbi { grid-column: 1 / -1; }
a.gumb { text-decoration: none; display: inline-block; }
.n-posodobljeno { max-width: 1000px; margin: 10px auto 0; padding: 0 16px; }
body.nadomescanje .dan__vaje { margin-left: auto; }
body.nadomescanje .blok__oznake { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------- tisk ---------- */
@media print {
  body { background: #fff; color: #000; }
  .glava { position: static; border: 0; padding: 0 0 8px; }
  .ne-tiskaj, .meni, .orodja, .noga, .opomnik, .opozorilo, .ura,
  .blok__gumbi, .blok__rocaj, .dan__uredi, .dan__deli, .dan__teden + select { display: none !important; }
  .planer { max-width: none; padding: 0; gap: 10px; }
  .dan { box-shadow: none; border: 1px solid #888; break-inside: auto; }
  body.nadomescanje .dan + .dan { break-before: page; }
  .blok { break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .blok--mimo, .dan--preteklo, .dan--prost { opacity: 1; }
  .blok__dok { border: 0; padding: 0; }
  a { color: #000 !important; }
}

/* ---------- stran z opozorili ---------- */
.opozorila { max-width: 900px; margin: 0 auto; padding: 16px; }
.opozorila__uvod { color: var(--umirjeno); }
.opozorila__skupina {
  background: var(--povrsina); border: 1px solid var(--rob); border-radius: 12px;
  padding: 4px 18px 12px; margin-bottom: 14px;
}
.opozorila__skupina h2 { font-size: 1.05rem; }
.opozorila__skupina li { margin: 4px 0; }

/* ---------- ostalo ---------- */
.noga {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  color: var(--umirjeno); font-size: .8rem; padding: 0 16px 24px;
}
.noga a { color: var(--umirjeno); }

@media (max-width: 640px) {
  .glava { padding: 10px 16px; }
  .planer { padding: 12px 16px; }
  .blok { grid-template-columns: 1fr; }
  .blok__cas { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px 0; }
  .blok__vsebina { padding: 4px 12px 12px; }
  .blok__stolpci { grid-template-columns: 1fr; gap: 10px; }
  .dan__status { margin-left: 0; }
  .stran-obrazec { margin: 12px 16px; padding: 14px 16px; }
}