/* ============================================================
   Elprisviser – elpris time for time
   Kilde: ~/Projects/prisviser. Ret ikke denne fil direkte i Umbraco.

   Alle variabler er scopet til .elprisviser – colour.css er projektets
   eneste :root-blok, og det skal den blive ved med at være. Hver token
   har et hex-fallback, så filen også virker uden colour.css.
   ============================================================ */

.elprisviser {
    --elp-spot:      var(--rød,    #c00848);   /* brandrød på det største, mest variable segment */
    --elp-tillaeg:   #e0779c;                  /* tone af brandrød */
    --elp-transport: var(--mørk,   #555555);
    --elp-afgift:    #9a9a9a;
    --elp-moms:      var(--medium, #cccccc);

    /* Ét sted at skrue på diagrammets bevægelse */
    --elp-tid:       .38s;                     /* søjler og akse der glider på plads */
    --elp-vokstid:   .42s;                     /* søjler der gror frem ved opbygning */
    --elp-kurve:     cubic-bezier(.22, .68, .3, 1);

    --elp-tekst:     var(--sort,   #212529);
    --elp-daemp:     #6b7076;
    --elp-linje:     #e3e5e7;
    --elp-flade:     var(--hvid,   #ffffff);
    --elp-lys:       #f6f7f8;

    color: var(--elp-tekst);
    background: var(--elp-flade);
    padding: 50px 0;
}

/* ============================================================
   Vælgere
   ============================================================ */

.elp-controls label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--elp-daemp);
    margin-bottom: .3rem;
}

.elp-controls select {
    width: 100%;
    padding: .5rem 2rem .5rem .6rem;
    font-size: .95rem;
    color: var(--elp-tekst);
    background: var(--elp-flade);
    border: 1px solid var(--elp-linje);
    border-radius: 4px;
    /* Egen pil, så feltet ser ens ud på tværs af browsere */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 10px;
}

.elp-controls select:disabled { color: var(--elp-daemp); background-color: var(--elp-lys); }
.elp-controls select:focus-visible,
.elp-doegn button:focus-visible,
.elp-knap:focus-visible { outline: 2px solid var(--elp-spot); outline-offset: 2px; }

/* ── Døgnvælger ───────────────────────────────────────────── */

.elp-doegn {
    display: flex;
    gap: 0;
    margin: 1.25rem 0 .25rem;
    border: 1px solid var(--elp-linje);
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

.elp-doegn button {
    flex: 0 1 auto;
    padding: .5rem 1.1rem;
    font-size: .9rem;
    color: var(--elp-tekst);
    background: var(--elp-flade);
    border: 0;
    border-right: 1px solid var(--elp-linje);
    cursor: pointer;
}

.elp-doegn button:last-child { border-right: 0; }
.elp-doegn button:hover:not(:disabled):not(.is-active) { background: var(--elp-lys); }
.elp-doegn button.is-active { background: var(--elp-spot); color: #fff; }
.elp-doegn button:disabled { color: #adb2b7; cursor: not-allowed; background: var(--elp-lys); }

.elp-dato {
    margin: .75rem 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    /* Første bogstav i den danske ugedag skrives med stort */
    text-transform: lowercase;
}
.elp-dato::first-letter { text-transform: uppercase; }

/* ── Momsmarkør ───────────────────────────────────────────────
   Sidder klods op ad grafen, fordi det er dér tvivlen opstår:
   er tallene med eller uden moms? */

.elp-moms-markoer {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    margin: .5rem 0 0;
    padding: .3rem .7rem;
    font-size: .82rem;
    background: var(--elp-lys);
    border: 1px solid var(--elp-linje);
    border-radius: 999px;
}

.elp-markoer-hvad { font-weight: 600; }
.elp-markoer-moms { color: var(--elp-daemp); }

/* Er noget fravalgt, er tallene ikke længere den pris nogen betaler –
   det skal kunne ses på afstand */
.elp-moms-markoer.is-delvis {
    background: #fff8e6;
    border-color: #e8c86a;
    color: #6b5600;
}
.elp-moms-markoer.is-delvis .elp-markoer-moms { color: #6b5600; }

/* ============================================================
   Diagram
   ============================================================ */

.elp-plot {
    position: relative;               /* anker for tooltip'en */
    margin: .5rem 0 1rem;
    min-height: 180px;
}

.elp-chart {
    display: block;
    width: 100%;
    height: auto;                     /* viewBox skalerer alt, tekst inklusive */
    overflow: visible;
}

.elp-gridline { stroke: var(--elp-linje); stroke-width: 1; }
.elp-tick--nul .elp-gridline { stroke: #b9bec3; }

/* Bliver en gitterlinje liggende, når skalaen skifter, glider den med i
   stedet for at springe. Nye linjer tones ind. */
.elp-tick { transition: transform var(--elp-tid) var(--elp-kurve); }
.elp-tick.er-ny { animation: elp-toning var(--elp-tid) ease both; }

.elp-ylabel,
.elp-xlabel { font-size: 13px; fill: var(--elp-daemp); }

.elp-avg { transition: transform var(--elp-tid) var(--elp-kurve); }

.elp-avgline {
    stroke: var(--elp-tekst);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: .55;
}
/* Halo i baggrundsfarven, så labelen kan læses uanset hvor høje søjlerne
   under den er – gennemsnittet ligger pr. definition midt i data */
.elp-avglabel {
    font-size: 12px;
    fill: var(--elp-tekst);
    stroke: var(--elp-flade);
    stroke-width: 3px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

/* ── Søjler ───────────────────────────────────────────────── */

/* ── Bevægelse ────────────────────────────────────────────────
   Diagrammet bevæger sig på to måder, og forskellen er med vilje.

   Bygges det op forfra – første indlæsning, eller et døgn med et andet
   antal timer – gror søjlerne ud af nullinjen, forskudt fra venstre mod
   højre. Det sker af sig selv: rektanglerne er nye knuder, og en
   keyframe kører når en knude fødes.

   Skifter kun tallene – et andet døgn, en anden elaftale, et flueben
   sat eller fjernet – bliver de samme rektangler liggende og får ny
   højde. Så er det overgangen der arbejder, og søjlen glider fra den
   ene pris til den anden i stedet for at blinke.

   Varigheden er kort med vilje. Det her er en prisgraf, ikke en
   forestilling: bevægelsen skal vise at tallene hænger sammen på tværs
   af to tilstande, og så være ovre. */

.elp-hit { fill: transparent; }
.elp-bar { cursor: pointer; outline: none; }

.elp-seg {
    transition: opacity .12s ease,
                y var(--elp-tid) var(--elp-kurve),
                height var(--elp-tid) var(--elp-kurve);
}

/* Stakken skaleres om nullinjen og ikke om sin egen underkant – ellers
   ville en søjle med negativ spotpris vokse den forkerte vej.
   --elp-nul sættes af scriptet på selve svg'en. */
.elp-bar-vis {
    transform-box: view-box;
    transform-origin: 0 var(--elp-nul, 0px);
    animation: elp-vokse var(--elp-vokstid) var(--elp-kurve) backwards;
}

@keyframes elp-vokse  { from { transform: scaleY(0); } }
@keyframes elp-toning { from { opacity: 0; } }

.elp-seg--spot      { fill: var(--elp-spot); }
.elp-seg--tillaeg   { fill: var(--elp-tillaeg); }
.elp-seg--transport { fill: var(--elp-transport); }
.elp-seg--afgift    { fill: var(--elp-afgift); }
.elp-seg--moms      { fill: var(--elp-moms); }

.elp-bar:hover .elp-seg,
.elp-bar:focus-visible .elp-seg { opacity: .78; }
.elp-bar:focus-visible .elp-hit { fill: rgba(0, 0, 0, .05); }

/* Nuværende time markeres med en ramme frem for en farve, så
   søjlens egen prisopdeling stadig kan læses */
.elp-bar.is-now .elp-hit {
    fill: rgba(0, 0, 0, .04);
    stroke: var(--elp-tekst);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.elp-xlabel--minor { fill: #9aa0a6; }

/* ── Skelet under hentning ────────────────────────────────── */

.elprisviser.is-henter .elp-chart { opacity: .35; }

.elp-henter,
.elp-besked,
.elp-fejl {
    margin: 0;
    padding: .9rem 1rem;
    font-size: .95rem;
    background: var(--elp-lys);
    border-radius: 4px;
}

.elp-fejl { background: #fdecf1; color: #8a0733; }

.elp-status { margin-bottom: .75rem; }

.elp-knap {
    margin-left: .5rem;
    padding: .3rem .8rem;
    font-size: .85rem;
    color: #fff;
    background: var(--elp-spot);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

/* ============================================================
   Tooltip
   ============================================================ */

.elp-tip {
    position: absolute;
    z-index: 5;
    min-width: 190px;
    max-width: calc(100vw - 2rem);
    padding: .7rem .8rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--elp-tekst);
    background: var(--elp-flade);
    border: 1px solid var(--elp-linje);
    border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
    pointer-events: none;             /* må aldrig stjæle hover fra søjlen */
}

.elp-tip-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .4rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--elp-linje);
    color: var(--elp-daemp);
}
.elp-tip-top strong { color: var(--elp-tekst); }

.elp-tip-liste {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem .8rem;
    margin: 0;
}
.elp-tip-liste dt { font-weight: 400; color: var(--elp-daemp); }
.elp-tip-liste dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.elp-tip-fod {
    margin: .4rem 0 0;
    padding-top: .4rem;
    border-top: 1px solid var(--elp-linje);
    font-size: .78rem;
    color: var(--elp-daemp);
}

/* ============================================================
   Prisens dele – legende og til/fra-valg i ét
   ============================================================ */

.elp-dele {
    margin: 0 0 1.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--elp-linje);
    border-radius: 4px;
    background: var(--elp-lys);
}

.elp-dele > legend {
    float: left;                      /* legend i et fieldset med baggrund */
    width: 100%;
    padding: 0;
    margin: 0 0 .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--elp-daemp);
}

.elp-dele-felter {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    font-size: .88rem;
}

.elp-del { display: flex; align-items: center; gap: .45rem; }

.elp-del input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--elp-spot);
    cursor: pointer;
}

.elp-del label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    cursor: pointer;
}

.elp-del input:focus-visible { outline: 2px solid var(--elp-spot); outline-offset: 2px; }

/* En fravalgt del dæmpes, så det kan ses hvad grafen mangler */
.elp-del input:not(:checked) + label { color: var(--elp-daemp); }
.elp-del input:not(:checked) + label .elp-swatch { opacity: .3; }

.elp-swatch {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.elp-swatch--spot      { background: var(--elp-spot); }
.elp-swatch--tillaeg   { background: var(--elp-tillaeg); }
.elp-swatch--transport { background: var(--elp-transport); }
.elp-swatch--afgift    { background: var(--elp-afgift); }
.elp-swatch--moms      { background: var(--elp-moms); }

/* ============================================================
   Nøgletal
   ============================================================ */

.elp-stats { margin-bottom: 1.25rem; }

.elp-stat {
    padding: .8rem .9rem;
    background: var(--elp-lys);
    border-radius: 4px;
    height: 100%;
}

.elp-stat > span {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--elp-daemp);
    margin-bottom: .2rem;
}

.elp-stat-tal {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.elp-stat-enhed { font-size: .8rem; color: var(--elp-daemp); }
.elp-stat-sub { display: block; font-size: .78rem; color: var(--elp-daemp); }

/* ============================================================
   Tabel
   ============================================================ */

.elp-tabel > summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--elp-spot);
    padding: .3rem 0;
}

.elp-tabel-tab {
    width: 100%;
    margin-top: .75rem;
    border-collapse: collapse;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.elp-tabel-tab caption {
    text-align: left;
    padding-bottom: .5rem;
    color: var(--elp-daemp);
    font-size: .8rem;
}

.elp-tabel-tab th,
.elp-tabel-tab td {
    padding: .35rem .5rem;
    text-align: right;
    border-bottom: 1px solid var(--elp-linje);
}

.elp-tabel-tab thead th { text-align: right; color: var(--elp-daemp); font-weight: 600; }
.elp-tabel-tab tbody th,
.elp-tabel-tab thead th:first-child { text-align: left; font-weight: 600; }
.elp-tabel-total { font-weight: 700; }

/* ============================================================
   Abonnement
   Står for sig selv, fordi det opkræves pr. måned og derfor ikke
   kan lægges ind i en pris pr. kWh.
   ============================================================ */

.elp-abon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .8rem;
    margin: 0 0 1.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--elp-linje);
    border-left: 3px solid var(--elp-spot);
    border-radius: 0 4px 4px 0;
}

.elp-abon-navn { font-weight: 600; font-size: .95rem; }

.elp-abon-tal {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.elp-abon-note {
    grid-column: 1 / -1;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--elp-daemp);
}

/* ============================================================
   Elaftalens egen forklaring
   ============================================================ */

.elp-produkt-forklaring {
    margin: 0 0 1.25rem;
    font-size: .88rem;
    line-height: 1.55;
}

/* ============================================================
   Infoboks – sådan læses grafen
   ============================================================ */

.elp-info {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--elp-lys);
    border-radius: 4px;
    font-size: .85rem;
    line-height: 1.55;
}

.elp-info h3 {
    margin: 0 0 .5rem;
    font-size: .95rem;
    font-weight: 700;
}

.elp-info p { margin: 0 0 .6rem; }
.elp-info p:last-child { margin-bottom: 0; }

.elp-info-dele {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem .7rem;
    margin: 0 0 .6rem;
}

.elp-info-dele dt { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.elp-info-dele dd { margin: 0; color: var(--elp-daemp); }

/* ============================================================
   Noter
   ============================================================ */

.elp-note,
.elp-note-dynamisk {
    margin: 1rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--elp-daemp);
}

/* I Umbraco er noten redigerbar tekst og kan bestå af flere afsnit */
.elp-note p { margin: 0 0 .5rem; }
.elp-note p:last-child { margin-bottom: 0; }

.elp-note-dynamisk {
    padding: .6rem .8rem;
    background: #fff8e6;
    border-left: 3px solid #e0a800;
    color: #6b5600;
    border-radius: 0 4px 4px 0;
}

/* ============================================================
   Responsivt
   ============================================================ */

@media (max-width: 575.98px) {
    .elprisviser { padding: 1rem; }

    /* 12 timelabels i stedet for 24 – søjlerne selv skaleres af viewBox */
    .elp-xlabel--minor { display: none; }

    .elp-doegn { width: 100%; }
    .elp-doegn button { flex: 1 1 0; padding: .5rem .4rem; font-size: .85rem; }

    /* "Dagsgennemsnit" er ét langt ord uden brudpunkt og bliver klippet
       i en tredjedels kolonne – mindre skrift og ingen sperring giver plads */
    .elp-stat { padding: .6rem .45rem; }
    .elp-stat > span { font-size: .6rem; letter-spacing: 0; hyphens: auto; }
    .elp-stat-tal { font-size: 1.05rem; }
    .elp-stat-enhed { display: none; }

    .elp-tabel-tab { font-size: .78rem; }
    .elp-tabel-tab th, .elp-tabel-tab td { padding: .3rem .25rem; }

    /* To felter pr. række holder afkrydsningerne store nok at ramme */
    .elp-dele-felter { gap: .6rem 1rem; }
    .elp-del { flex: 1 1 42%; }

    .elp-info-dele { grid-template-columns: 1fr; gap: .1rem; }
    .elp-info-dele dd { margin-bottom: .4rem; }
}

/* Har den besøgende bedt om mindre bevægelse, står diagrammet stille.
   Nulstilles tokenne, forsvinder både overgange og keyframes på én gang. */
@media (prefers-reduced-motion: reduce) {
    .elprisviser {
        --elp-tid: 0s;
        --elp-vokstid: 0s;
    }
    .elp-seg { transition: none; }
    .elp-bar-vis, .elp-tick.er-ny { animation: none; }
}

/* ============================================================
   Print – vælgere væk, tabellen foldet ud
   ============================================================ */

@media print {
    .elprisviser { border: 0; padding: 0; }
    .elp-controls,
    .elp-doegn,
    .elp-tip,
    .elp-status { display: none !important; }

    /* Afkrydsningerne kan ikke betjenes på papir, men skal stadig virke som
       legende – og markøren skal med, ellers står tallene uden forbehold */
    .elp-dele { border: 0; padding: 0; background: none; }
    .elp-del input { display: none; }
    .elp-moms-markoer, .elp-abon, .elp-info { break-inside: avoid; }

    .elp-tabel { display: block; }
    .elp-tabel > summary { display: none; }
    .elp-tabel[open] > *,
    .elp-tabel > *:not(summary) { display: block !important; }
    .elp-tabel-tab { page-break-inside: auto; }
}