/* ════════════════════════════════════════════════════════════════
   BESEDILNO OBVESTILO NA INFO ZASLONU (mig. 241) — slogi.

   Skupna datoteka za DVA porabnika, da je predogled v skrbniškem
   zavihku res isti izris kot na steni:
     • public/zaslon.html      — pravi zaslon (žetoni so v njem, na <body>),
     • public/uporabniki.html  — predogled (žetoni spodaj, na .zaslon-predogled).

   Žetoni spodaj (.zaslon-predogled.tema-*) so KOPIJA blokov body.tema-* iz
   zaslon.html: ta stran je statična in ne more deliti ene datoteke z
   inline slogom zaslona (tests/prikaz-teme.test.js bere bloke iz
   zaslon.html). Da se kopija ne razide, jo primerja pogodbeni test
   tests/zaslon-obvestilo.test.js — sprememba barve teme v zaslon.html brez
   te datoteke pade na testu.
   ════════════════════════════════════════════════════════════════ */

/* ── Žetoni za predogled (privzeta = temna) ──────────────────── */
.zaslon-predogled{
  --ozadje:#0b1116;
  --ozadje2:#111c24;
  --besedilo:#eaf2f6;
  --besedilo-tih:#8fa6b2;
  --v-redu:#2fbf71;
  --opozorilo:#f0b323;
  --kriticno:#f0544f;
  --nevtralno:#8fa6b2;
  --medij-ozadje:#000;
  --crta:rgba(255,255,255,.06);
  --naslov-teza:600;
  --telo-ozadje:var(--ozadje);
  background:var(--telo-ozadje);
  color:var(--besedilo);
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.zaslon-predogled.tema-svetla{
  --ozadje:#f3f6f8;
  --ozadje2:#ffffff;
  --besedilo:#16222b;
  --besedilo-tih:#5b6f7c;
  --v-redu:#12855a;
  --opozorilo:#a8720c;
  --kriticno:#c0362f;
  --nevtralno:#7d909c;
  --medij-ozadje:#e6ebef;
  --crta:rgba(0,0,0,.10);
}
.zaslon-predogled.tema-kontrast{
  --ozadje:#000000;
  --ozadje2:#0a0a0a;
  --besedilo:#ffffff;
  --besedilo-tih:#cfcfcf;
  --v-redu:#00d47a;
  --opozorilo:#ffc400;
  --kriticno:#ff4d3d;
  --nevtralno:#cfcfcf;
  --medij-ozadje:#000;
  --crta:rgba(255,255,255,.22);
  --naslov-teza:800;
}
.zaslon-predogled.tema-sodobna{
  --ozadje:#131a3a;
  --ozadje2:#1c2550;
  --besedilo:#f2f4ff;
  --besedilo-tih:#a3adde;
  --v-redu:#3ddc97;
  --opozorilo:#ffc857;
  --kriticno:#ff6b6b;
  --nevtralno:#a3adde;
  --medij-ozadje:#0d1229;
  --crta:rgba(255,255,255,.10);
  --telo-ozadje:linear-gradient(160deg,#0f1430 0%,#1a2350 55%,#221a48 100%);
}

/* ── Okvir predogleda: oder 1920 × 920, pomanjšan s transform ──
   920 px = višina vsebine na zaslonu 1920 × 1080 (brez glave z imenom
   podjetja in noge s pikami). Predogled je tako enak izrisu na steni. */
.zaslon-predogled-okvir{
  position:relative;
  width:100%;
  aspect-ratio:1920 / 920;
  overflow:hidden;
  border:1px solid var(--border,#cfd8dc);
  border-radius:8px;
}
.zaslon-predogled-oder{
  position:absolute;
  left:0; top:0;
  width:1920px; height:920px;
  transform-origin:0 0;
  display:grid;
  padding:22px 58px;
  gap:22px 38px;
  box-sizing:border-box;
}

/* ── Plošča obvestila ────────────────────────────────────────── */
/* Isti razred `.plosca` kot kazalniki (zaslon.html ga definira), zato so
   tu SAMO lastnosti obvestila. V predogledu `.plosca` ne obstaja, zato
   so potrebne osnove ponovljene (flex, sredina, zaobljenost). */
.plosca.obvestilo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.5em;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  padding:2% 4%;
  overflow:hidden;
  background:var(--ozadje2);
  border:max(2px,.25vh) solid var(--crta);
  border-radius:1.2vh;
  /* Velikosti nastavi ZaslonObvestilo.prilagodi(); to je zasilna vrednost,
     če skript ne teče. */
  --obv-n:64px;
  --obv-b:44px;
}
.zaslon-predogled .plosca.obvestilo{ border-width:2px; border-radius:12px; }
.plosca.obvestilo .obv-naslov{
  font-size:var(--obv-n);
  line-height:1.12;
  font-weight:var(--naslov-teza,600);
  color:var(--besedilo);
  max-width:100%;
  overflow-wrap:anywhere;
  letter-spacing:.2px;
}
/* Ločnica med naslovom in besedilom: pridušena, da ne tekmuje z besedilom.
   Izrisana samo, kadar besedilo obstaja (razred na plošči). */
.plosca.obvestilo.ima-besedilo .obv-naslov::after{
  content:"";
  display:block;
  width:min(12%,160px);
  height:max(3px,.4vh);
  margin:.45em auto 0;
  border-radius:99px;
  background:var(--besedilo-tih);
  opacity:.7;
}
.plosca.obvestilo .obv-besedilo{
  font-size:var(--obv-b);
  line-height:1.3;
  font-weight:400;
  color:var(--besedilo);
  max-width:100%;
  /* Prelomi vrstic iz besedila ostanejo; besedilo je golo besedilo
     (textContent), zato HTML ni mogoč. */
  white-space:pre-line;
  overflow-wrap:anywhere;
}