/* Cena električne energije na borzi — slog v svetu OBRAČUN (szse.si).
   Nalozi se ZA /assets/style.css, zato podeduje pisave, barve in ovoj strani.
   Tu preslikamo samo zetone, ki jih uporablja aplikacija, in obliko njenih
   sestavnih delov: papir namesto temne plosce, brez zaokrozitev, en poudarek.

   Zetone --cheap / --mid / --exp uporabljajo grafi za tri cenovne razrede;
   to je podatek, ne okras, zato tu ostanejo trije loceni odtenki crnila. */
:root{
  --bg:var(--papir);
  --panel:var(--list);
  --panel-2:var(--polnilo);
  --text:var(--crnilo);
  --muted:var(--dim);
  --accent:var(--zig);

  --cheap:#3F5D28;            /* poceni — zeleno crnilo */
  --mid:var(--zig);           /* srednje — zig */
  --exp:var(--opozorilo);     /* drago — rdece crnilo */
  --warn:#8A5A00;
  --hot:var(--opozorilo);
  --divider:var(--crnilo);
  --line-price:var(--crnilo);
  --now-marker:var(--zig);
  --radius:0;
  --font:var(--pisava-telo);
}
/* Svetla razlicica je edina — prizor uporabe je dnevna svetloba, ne zaslon v temi. */
@media (prefers-color-scheme: dark){
  :root{ --bg:var(--papir); --panel:var(--list); --panel-2:var(--polnilo); --text:var(--crnilo); --muted:var(--dim) }
}

/* ---- ovoj ---- */
.vsebina{padding:2.4rem 0 3.2rem;display:flex;flex-direction:column;gap:1.6rem}
.vsebina h1{margin:0;font-family:var(--pisava-naslov);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.15;text-wrap:balance}
/* Na namizju gre naslov v eno vrsto; na ozkem zaslonu se sme lomiti. */
@media (min-width:760px){.vsebina h1{white-space:nowrap}}
/* Naslov levo, cas zajema desno — v isti vrstici, kadar je prostor. */
.naslovna{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem}
.stanje{margin:0;text-align:right;flex:0 1 auto}
/* Kaj cena je in cesa ne vsebuje — takoj pod naslovom, ne sele v opombi na dnu. */
.uvod{margin:0;max-width:72ch;font-size:var(--t-uvod);line-height:1.6;color:var(--txt);
  border-left:1px solid var(--crnilo);padding-left:1rem}
.muted{color:var(--muted);font-size:var(--t-drobno)}

.btn{font-family:var(--pisava-izpis);font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--crnilo);background:transparent;
  border:1px solid var(--line);border-radius:0;padding:.5rem .9rem;cursor:pointer;
  min-height:36px;transition:background var(--hitro) var(--pospesek),color var(--hitro) var(--pospesek)}
.btn:hover{background:var(--crnilo);color:var(--papir)}
.btn:focus-visible{outline:2px solid var(--zig);outline-offset:2px}

/* ---- plošče: list papirja ---- */
.panel{background:var(--list);border:1px solid var(--papir-rob);border-radius:0;
  padding:1.5rem 1.6rem;box-shadow:var(--senca-list)}
.panel h2{margin:0 0 1rem;font-family:var(--pisava-naslov);font-size:1.02rem;font-weight:800;
  letter-spacing:-.01em;color:var(--crnilo)}
.panel-head{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.panel-head h2{margin:0}
h3.sub{margin:1.5rem 0 .5rem;font-family:var(--pisava-izpis);font-size:.76rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---- zavihki in preklop enot ---- */
.tabs{display:flex;gap:0;background:transparent;padding:0;border:1px solid var(--line);border-radius:0}
.tab{background:transparent;border:0;border-right:1px solid var(--line);color:var(--muted);
  padding:.45rem .95rem;cursor:pointer;font-family:var(--pisava-izpis);font-size:.76rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-height:34px}
.tab:last-child{border-right:0}
.tab.active{background:var(--crnilo);color:var(--papir);box-shadow:none}
.tab:focus-visible{outline:2px solid var(--zig);outline-offset:-2px}
.toggle{display:flex;gap:1rem;font-family:var(--pisava-izpis);font-size:.8rem;color:var(--muted)}
.toggle label{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;min-height:32px}
.toggle input{accent-color:var(--zig)}

/* ---- kartice s številkami ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--papir-rob);border:1px solid var(--papir-rob)}
.inline-cards{margin:1.2rem 0}
.card{background:var(--list);border:0;border-radius:0;padding:1.1rem 1.2rem}
.card h3{margin:0 0 .5rem;font-family:var(--pisava-izpis);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.value{font-family:var(--pisava-naslov);font-size:2rem;line-height:1.05;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--crnilo)}
.value.small{font-family:var(--pisava-naslov);font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
/* Enota ob veliki stevilki je drobna — Doto pod 25 px razpade, zato Archivo. */
.value span,.value .muted{font-family:var(--pisava-izpis);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;color:var(--muted)}
.value.neg{color:var(--opozorilo)}

.win-row{display:flex;align-items:baseline;gap:.5rem;margin-top:.5rem}
.win-row:first-of-type{margin-top:.15rem}
.win-row b{font-family:var(--pisava-naslov);font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}
.win-tag{font-family:var(--pisava-izpis);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--papir);background:var(--crnilo-bled);
  border-radius:0;padding:.15rem .4rem;min-width:42px;text-align:center}
.card .small-note{margin:0 0 0 50px;font-size:.76rem}

/* ---- povzetki pod grafi ---- */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin-top:1.1rem;background:var(--papir-rob);border:1px solid var(--papir-rob)}
.summary div{background:var(--polnilo-nizko);border-radius:0;padding:.7rem .85rem}
.summary b{display:block;font-family:var(--pisava-naslov);font-size:1.05rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.summary span{font-family:var(--pisava-izpis);font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em}
.summary.compact b{font-size:.95rem}

/* ---- grafi ---- */
/* Napisi na oseh so del vsebine, zato ne pod najmanjso velikostjo strani. */
.chart svg text{font-family:var(--pisava-izpis);font-size:11.5px;fill:var(--muted)}
.chart{width:100%}
.chart svg{display:block;width:100%;height:280px}
#chart svg{height:300px}
#chart,#histDaily,#histHourly{cursor:crosshair}
#energyChart svg{height:260px}
#exportChart svg{height:190px}
#histDaily svg{height:220px}
#histHourly svg{height:200px}
.chart-wrap{position:relative}
.tip{display:none;position:absolute;z-index:6;pointer-events:none;background:var(--list);
  border:1px solid var(--crnilo);border-radius:0;padding:.6rem .75rem;box-shadow:var(--senca-list);
  font-size:.78rem;min-width:190px;max-width:260px;white-space:nowrap}
.tip b{display:block;font-family:var(--pisava-naslov);font-size:.8rem;margin-bottom:.1rem}
.tip .t{color:var(--muted);font-size:.7rem;margin-bottom:.4rem}
.tip .p{font-family:var(--pisava-naslov);font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.tip .p span{font-size:.75rem;font-weight:500;color:var(--muted)}
.tip .s{color:var(--muted);font-size:.7rem;margin-top:.2rem}

.legend{display:flex;flex-wrap:wrap;gap:.9rem;font-family:var(--pisava-izpis);font-size:.74rem;
  color:var(--muted);align-items:center}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:0;margin-right:.35rem;vertical-align:-1px}
.sw.sun{background:var(--warn)} .sw.load{background:var(--mid)} .sw.self{background:var(--cheap)}

/* ---- tabela intervalov ---- */
.table-wrap{max-height:420px;overflow:auto;border-radius:0;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{position:sticky;top:0;background:var(--papir-rob);text-align:left;padding:.55rem .75rem;
  font-family:var(--pisava-izpis);font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--crnilo)}
td{padding:.5rem .75rem;border-top:1px solid var(--line-tanka);font-variant-numeric:tabular-nums}
tr.now td{background:rgba(74,58,140,.09)}
td.neg{color:var(--opozorilo);font-weight:700}

/* ---- oznake razredov cene ---- */
.pill{font-family:var(--pisava-izpis);padding:.12rem .45rem;border-radius:0;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor}
.pill.poceni{color:var(--cheap);background:rgba(63,93,40,.08)}
.pill.srednje{color:var(--zig);background:rgba(74,58,140,.08)}
.pill.drago,.pill.izvoz{color:var(--opozorilo);background:rgba(158,43,30,.08)}

/* ---- opozorila ---- */
.alerts{display:flex;flex-direction:column;gap:.7rem}
.alerts:empty{display:none}
.alert{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1.1rem;border-radius:0;
  border:1px solid var(--line);background:var(--list);box-shadow:var(--senca-list)}
.alert .ico{flex:none;width:20px;height:20px;margin-top:.1rem}
.alert .ico svg{width:100%;height:100%;display:block}
/* barva ikone pove razred opozorila, enako kot crta nad njim */
.alert.visoka .ico{color:var(--opozorilo)}
.alert.srednja .ico{color:var(--warn)}
.alert.info .ico{color:var(--cheap)}
.alert b{display:block;font-family:var(--pisava-naslov);font-size:.95rem;margin-bottom:.1rem}
.alert p{margin:0;font-size:.85rem;color:var(--txt)}
.alert .when{font-family:var(--pisava-izpis);font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin-top:.4rem}
/* Razred se pozna v barvi crte nad opozorilom, ne v barvnem pasu ob strani. */
.alert.visoka{border-top:3px solid var(--opozorilo)}
.alert.srednja{border-top:3px solid var(--warn)}
.alert.info{border-top:3px solid var(--cheap)}

/* ---- delezi proizvodnje ---- */
.breakdown,.mix{display:flex;flex-direction:column;gap:.5rem}
.row{display:flex;align-items:center;gap:.7rem;font-size:.85rem}
.row .bar{flex:1;height:9px;border-radius:0;background:var(--polnilo);overflow:hidden;
  border:1px solid var(--line-tanka)}
.row .bar i{display:block;height:100%;background:var(--zig);border-radius:0}
.row .lbl{width:150px;color:var(--muted)}
.row .num{width:96px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- drobno ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.grid1{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.small-note{margin:.8rem 0 0;font-size:.76rem;line-height:1.55}
.viri{margin:.4rem 0 0;font-size:.78rem;line-height:1.6;color:var(--muted);max-width:80ch}
/* Brez pisave za kodo: v teh opombah ne gre za kodo, ampak za imena datotek
   in oznako trgovalne cone. Monospace bi bil kostum. */
code{font-family:var(--pisava-izpis);font-size:inherit;font-weight:600;letter-spacing:.02em;
  background:var(--polnilo);padding:.05rem .3rem;border-radius:0}

@media (max-width:760px){
  .vsebina{padding:1.6rem 0 2.4rem;gap:1.1rem}
  .panel{padding:1.1rem 1rem}
  .card{padding:.9rem 1rem}
  .value{font-size:1.7rem}
}

/* ---- razlagalno besedilo (SEO in bralci) ---- */
.razlaga h2{margin:1.6rem 0 .5rem;font-size:1.1rem}
.razlaga h2:first-child{margin-top:0}
.razlaga p,.razlaga li{max-width:70ch;line-height:1.7;color:var(--txt)}
.razlaga p{margin:0 0 .8rem}
.razlaga ul{margin:0 0 .8rem;padding-left:1.2rem}
.razlaga li{margin:0 0 .4rem}
.razlaga a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.vprasanja{max-width:70ch}
.vprasanja details{border-bottom:1px solid var(--line-tanka)}
.vprasanja summary{padding:.75rem 0;cursor:pointer;font-weight:700;min-height:24px}
.vprasanja details[open] summary{padding-bottom:.35rem}
.vprasanja p{margin:0 0 .9rem}