/* bygg.css - «Sett sammen din Beff» (bygg.html). Kun tokens fra design-tokens.css og markedsside-tokens.css.
   Del 1: de fem nye skjermene (befaring, i dag, dashbord, kalender, reklamasjoner). Del 2 (siden) kommer under. */

/* Befaring: rom, linjer og sum */
.bf-rom{display:grid;gap:var(--beffen-rom-1);padding:var(--beffen-rom-3) 0 var(--beffen-rom-4)}
.bf-rom b{font-size:var(--skrift-under)}
.bf-rom span{color:var(--pd-demp)}
.bf-linje{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--beffen-rom-1) var(--beffen-rom-4);padding:var(--beffen-rom-3) 0;border-bottom:1px solid var(--pd-kant-svak)}
.bf-linje>span:first-child{font-weight:600}
.bf-linje .bf-regn{grid-column:1;color:var(--pd-demp)}
.bf-linje b{grid-column:2;grid-row:1/span 2;align-self:center;white-space:nowrap}
.bf-sum{display:flex;justify-content:space-between;align-items:baseline;gap:var(--beffen-rom-4);padding:var(--beffen-rom-4) 0 var(--beffen-rom-2);border-top:2px solid var(--pd-tekst);margin-top:var(--beffen-rom-2);font-weight:600}
.bf-sum b{font-family:var(--font-display);font-size:var(--skrift-tall);font-weight:600;line-height:1}

/* Dashbord: tre tall, søyler (SVG uten tekst), månedsnavn i HTML */
.db-tall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid var(--pd-kant-svak)}
.db-tall>div{display:grid;gap:var(--beffen-rom-1);padding:var(--beffen-rom-4) var(--beffen-rom-5);border-right:1px solid var(--pd-kant-svak)}
.db-tall>div:last-child{border-right:0}
.db-tall span{color:var(--pd-demp)}
.db-tall b{font-family:var(--font-display);font-size:var(--skrift-tall);font-weight:600;line-height:1;white-space:nowrap}
.db-forklaring{margin-left:auto;display:inline-flex;align-items:center;gap:var(--beffen-rom-2);font-weight:400;color:var(--pd-demp);white-space:nowrap}
.db .idag-seksjonshode{flex-wrap:wrap}
.db-forklaring i{display:inline-block;width:12px;height:12px;border-radius:var(--pd-radius)}
.db-forklaring i.db-sendt,.db-graf .db-sendt rect{fill:var(--pd-lavendel);background:var(--pd-lavendel)}
.db-forklaring i.db-vunnet,.db-graf .db-vunnet rect{fill:var(--pd-salvie);background:var(--pd-salvie)}
.db-graf{display:block;width:100%;height:140px;margin-top:var(--beffen-rom-4);border-bottom:1px solid var(--pd-kant)}
.db-mnd{display:grid;grid-template-columns:repeat(12,1fr);margin-top:var(--beffen-rom-1);color:var(--pd-demp);text-align:center}
.db-fakturaer{border-top:1px solid var(--pd-kant-svak)}
.db .td-rad{display:flex;align-items:center;gap:var(--beffen-rom-3);min-height:44px;padding:var(--beffen-rom-3) 0;border-bottom:1px solid var(--pd-kant-svak)}
.db .td-rad:last-child{border-bottom:0}
.db .td-tekst{min-width:0;flex:1}
.db .td-tekst b{display:block;font-weight:600}
.db .td-tekst span{color:var(--pd-demp)}

/* Kalender: uke som rutenett, blokkene plasseres med --fra/--til (kolonne 1 = mandag) */
.kal-rute{display:grid;gap:0;padding:0 var(--beffen-rom-5)}
.kal-rad{display:grid;grid-template-columns:96px repeat(5,minmax(0,1fr));gap:var(--beffen-rom-1);align-items:stretch;min-height:56px;border-bottom:1px solid var(--pd-kant-svak)}
.kal-hode{min-height:44px;align-items:end;padding-bottom:var(--beffen-rom-2);border-bottom:2px solid var(--pd-tekst);color:var(--pd-demp);font-family:var(--font-etikett);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.kal-navn{display:flex;align-items:center;font-weight:600}
.kal-blokk{grid-column:calc(var(--fra) + 1)/calc(var(--til) + 1);display:flex;align-items:center;margin:var(--beffen-rom-2) 0;padding:0 var(--beffen-rom-3);border-radius:var(--pd-radius);line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kal-blokk.a{background:var(--pd-salvie-flate);color:var(--pd-salvie)}
.kal-blokk.b{background:var(--pd-lavendel-flate);color:var(--pd-lavendel)}
.kal-blokk.c{background:var(--pd-gul-flate);color:var(--pd-gul)}
.kal-blokk.tom{border:1px dashed var(--pd-kant-kontroll);color:var(--pd-demp);background:var(--pd-panel)}
.kal .td-handlinger{display:flex;gap:var(--beffen-rom-2);padding:var(--beffen-rom-4) var(--beffen-rom-5) var(--beffen-rom-5)}

/* Reklamasjoner: liste med status */
.rk-liste{padding:0 var(--beffen-rom-5)}
.rk-rad{display:flex;align-items:center;gap:var(--beffen-rom-3);min-height:56px;padding:var(--beffen-rom-3) 0;border-bottom:1px solid var(--pd-kant-svak)}
.rk-rad .td-tekst{min-width:0;flex:1}
.rk-rad .td-tekst b{display:block;font-weight:600}
.rk-rad .td-tekst span{color:var(--pd-demp)}
.rk .td-handlinger{display:flex;gap:var(--beffen-rom-2);padding:var(--beffen-rom-4) var(--beffen-rom-5) var(--beffen-rom-5)}
.skjerm .st.apen{background:var(--pd-kobber-flate);color:var(--pd-kobber-mork)}
.skjerm .st.arbeid{background:var(--pd-lavendel)}
.skjerm .st.lukket{background:var(--pd-salvie)}
@media (max-width:759px){
  .db-tall{grid-template-columns:1fr}
  .db-tall>div{border-right:0;border-bottom:1px solid var(--pd-kant-svak)}
  .kal-rad{grid-template-columns:72px repeat(5,minmax(0,1fr))}
  .kal-blokk{padding:0 var(--beffen-rom-2)}
}

/* ---------- Del 2: siden. Flatene og linjene som på forsiden (prov.css), egne klasser så .pv-band-reglene ikke skjuler dem. ---------- */
.bg-band{display:flex;flex-direction:column;padding:var(--beffen-rom-8) 0}
.bg-band>.ms-ramme{flex:1 0 auto;width:100%;max-width:var(--pv-ramme-maks)}
.bg-band.bg-kobber{background:var(--pd-kobber);color:var(--pd-kobber-fyll-tekst);--pv-linje:color-mix(in srgb,var(--pd-kobber-fyll-tekst) 42%,transparent);--pv-linje-sterk:color-mix(in srgb,var(--pd-kobber-fyll-tekst) 65%,transparent)}
.bg-band.bg-sverte{background:var(--pd-tekst);color:var(--pd-petrol-tekst);--pv-linje:color-mix(in srgb,var(--pd-petrol-tekst) 28%,transparent);--pv-linje-sterk:color-mix(in srgb,var(--pd-petrol-tekst) 48%,transparent)}
.bg-band.bg-papir{background:var(--pd-bg);color:var(--pd-tekst);--pv-linje:var(--pd-kant);--pv-linje-sterk:var(--pd-kant-sterk)}
.bg-band.bg-kobber ::selection{background:var(--pd-tekst);color:var(--pd-petrol-tekst)}
.bg-band :focus-visible{outline-color:var(--pd-petrol-tekst)}
.bg-side .ms-topp .ms-ramme{max-width:var(--pv-ramme-maks)}
.bg-side .ms-fot{border-top:0}
.bg .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Åpningen: overskrift, firmanavn og fag på to spalter */
.bg-firma-rad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--beffen-rom-7);align-items:start}
.bg-felt-firma{margin:0}
.bg-fag{margin:0;padding:0;border:0;min-width:0}
.bg-fag legend{padding:0;margin-bottom:var(--beffen-rom-2);font-weight:600;font-size:var(--pv-liten)}
.bg-fag-fliser{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--beffen-rom-2)}
.bg-flis-fag{min-height:var(--pv-kontroll);padding:0 var(--beffen-rom-3)}
.bg-flis-fag .navn{font-weight:500}

/* Byggeflaten: delene til venstre, din Beff til høyre, spaltestrek imellom */
.bg-ramme{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--beffen-rom-7);align-items:start}
.bg-valg{min-width:0;padding-right:var(--beffen-rom-7);border-right:1px solid var(--pv-linje);align-self:stretch}
.bg-gruppe{margin-top:var(--beffen-rom-6)}
.bg-gruppe-navn{margin:0 0 var(--beffen-rom-3);padding-bottom:var(--beffen-rom-2);border-bottom:1px solid var(--pv-linje);font-family:var(--font-etikett);font-weight:600;font-size:var(--pv-liten);letter-spacing:.04em;text-transform:uppercase;color:var(--pd-petrol-demp)}
.bg-fliser{grid-template-columns:1fr}
.bg-flis{min-height:var(--pv-kontroll)}
.bg-flis:has(input[data-kjerne]){cursor:default}
.bg-flis .meta{color:var(--pd-demp)}
/* Valgt del på sverte: kobberfylt flis med sverte hake (som romtypen i befaringen); sverte på sverte ville forsvunnet */
.bg-sverte .bg-flis:has(input:checked){background:var(--pd-kobber);border-color:var(--pd-kobber);color:var(--pd-kobber-fyll-tekst)}
.bg-sverte .bg-flis:has(input:checked) .meta{color:var(--pd-kobber-fyll-tekst);opacity:.85}
.bg-sverte .bg-flis:has(input:checked) .hake{background:var(--pd-tekst);border-color:var(--pd-tekst);color:var(--pd-petrol-tekst)}
.bg-sverte .bg-flis:has(input:checked) .hake svg{opacity:1;transform:none}

/* Noe dere mangler: ønsker som liste med «Fjern», felt + Legg til */
.bg-onske{margin-top:var(--beffen-rom-7);padding-top:var(--beffen-rom-5);border-top:2px solid currentColor}
.bg-onske h3{margin:0 0 var(--beffen-rom-2);font-family:var(--font-display);font-weight:600;font-size:clamp(26px,2.2vw,32px);line-height:1.05}
.bg-onske .pv-hjelp{margin-bottom:var(--beffen-rom-4)}
.bg-onsker{list-style:none;margin:0 0 var(--beffen-rom-3);padding:0;display:grid;gap:var(--beffen-rom-2)}
.bg-onsker:empty{display:none}
.bg-onsker li{display:flex;align-items:center;gap:var(--beffen-rom-3);min-height:var(--pv-kontroll);padding:0 var(--beffen-rom-2) 0 var(--beffen-rom-4);border:1px dashed var(--pv-linje-sterk);border-radius:var(--pd-radius)}
.bg-onsker li span{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:500}
.bg-onsker li button{flex:none;min-height:44px;padding:0 var(--beffen-rom-3);border:0;background:none;color:inherit;font:inherit;font-size:var(--pv-liten);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.bg-onske-skjema{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--beffen-rom-2)}
.bg-onske-skjema input{min-height:var(--pv-kontroll);padding:0 var(--beffen-rom-4);border:1px solid var(--pd-flate);border-radius:var(--pd-radius);background:var(--pd-flate);color:var(--pd-tekst);font:inherit;font-size:var(--pv-tekst)}
.bg-onske-skjema input::placeholder{color:var(--pd-demp-2)}
.bg-sverte .ms-kn:not(.primar){background:var(--pd-flate);color:var(--pd-tekst);border-color:var(--pd-flate)}
.bg-kobber .ms-kn.primar{background:var(--pd-tekst);border-color:var(--pd-tekst);color:var(--pd-petrol-tekst)}
.bg-kobber .ms-kn:not(.primar){background:var(--pd-flate);color:var(--pd-tekst);border-color:var(--pd-flate)}

/* Din Beff: rammen. Toppmeny i sverte med firmanavnet, menyen til venstre, skjermen til høyre. */
.bg-app-plass{min-width:0;position:sticky;top:calc(var(--ms-topp-h) + var(--beffen-rom-5))}
.bg-app{border-radius:var(--pd-radius);background:var(--pd-bg);color:var(--pd-tekst);box-shadow:var(--natt-skygge);overflow:hidden}
.bg-app-topp{display:flex;align-items:center;gap:var(--beffen-rom-3);min-height:56px;padding:0 var(--beffen-rom-4);background:var(--pd-tekst);color:var(--pd-petrol-tekst)}
.bg-app-topp .flis{position:relative;display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:var(--pd-radius);background:var(--pd-flate);color:var(--pd-tekst);font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1}
.bg-app-topp .flis i{position:absolute;right:3px;bottom:3px;width:5px;height:5px;background:var(--pd-kobber)}
.bg-app-firma{font-family:var(--font-display);font-weight:600;font-size:var(--skrift-tittel);line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-app-ord{margin-left:auto;font-family:var(--font-display);font-weight:600;font-size:var(--pv-liten);letter-spacing:.10em;text-transform:uppercase;color:var(--pd-petrol-demp)}
.bg-app-kropp{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:560px}
.bg-app-meny{display:flex;flex-direction:column;gap:2px;padding:var(--beffen-rom-3) 0;border-right:1px solid var(--pd-kant);background:var(--pd-flate)}
.bg-tab{display:flex;align-items:center;gap:var(--beffen-rom-2);min-height:48px;padding:0 var(--beffen-rom-4) 0 calc(var(--beffen-rom-4) - 3px);border:0;border-left:3px solid transparent;background:none;color:var(--pd-tekst);font:inherit;font-size:var(--pv-liten);font-weight:500;text-align:left;cursor:pointer}
.bg-tab[aria-selected=true]{border-left-color:var(--pd-kobber);background:var(--pd-bg);font-weight:600}
.bg-tab.onske .bg-tab-merke{display:block;font-family:var(--font-etikett);font-weight:600;font-size:var(--pv-liten);letter-spacing:.04em;text-transform:uppercase;color:var(--pd-kobber-mork)}
.bg-tab.onske>span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bg-tab.onske{display:block;padding-top:var(--beffen-rom-2);padding-bottom:var(--beffen-rom-2);border-left-style:dashed;border-left-color:var(--pd-kant-kontroll)}
.bg-tab.onske[aria-selected=true]{border-left-color:var(--pd-kobber)}
@media (hover:hover) and (pointer:fine){.bg-tab:not([aria-selected=true]):hover{background:var(--pd-rad-hover)}}
.bg-tab:focus-visible{outline:2px solid var(--pd-fokus);outline-offset:-3px}
.bg-app-skjerm{padding:var(--beffen-rom-5);min-width:0}
.bg-panel:focus-visible{outline:2px solid var(--pd-fokus);outline-offset:4px}
.bg-panel .admin>div{max-width:none;box-shadow:none}
/* Skjermtittelen brytes aldri midt i ordet: hodet får bryte mellom tittel og meta i smale rammer */
.bg-panel .idag-hode{flex-wrap:wrap}
.bg-panel .idag-h1{flex:none}
.bg-panel .pv-ta-skjerm .telefon{margin:0 auto}
.bg-onske-skjerm .idag-seksjon p{margin:0 0 var(--beffen-rom-3);max-width:34em}
.bg-onske-skjerm .idag-seksjon p:last-child{margin:0;color:var(--pd-demp)}
.bg-app-merk{color:var(--pd-petrol-tekst)}

/* Avslutningen: stempel, oppsummering og løftet til venstre, skjemaet til høyre */
.bg-slutt-ramme{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--beffen-rom-7);align-items:start;padding-top:var(--beffen-rom-6);border-top:2px solid currentColor}
.bg-slutt-tekst{min-width:0}
.bg-stempel{position:static;display:inline-block;margin:0 0 var(--beffen-rom-5);transform:rotate(-4deg);opacity:1;font-size:clamp(28px,3vw,44px);letter-spacing:.04em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;border-color:var(--pd-tekst);color:var(--pd-tekst)}
.bg-js .bg-stempel:not(.vis){opacity:0}
.bg-oppsummering{margin:0 0 var(--beffen-rom-5);max-width:36em;font-size:clamp(20px,1.7vw,24px);font-weight:500}
.bg-lofte{margin:0;max-width:36em;padding-top:var(--beffen-rom-5);border-top:1px solid var(--pv-linje);font-size:clamp(20px,1.7vw,24px);line-height:1.4}
.bg-lofte b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin-bottom:var(--beffen-rom-2)}
.bg-send{display:grid;gap:var(--beffen-rom-2);max-width:560px;align-self:stretch;align-content:start;padding-left:var(--beffen-rom-7);border-left:1px solid var(--pv-linje)}
.bg-send .pv-felt{margin-bottom:var(--beffen-rom-3)}
.bg-send .pv-felt input{border-color:var(--pd-flate)}
.bg-send .pv-feil{margin-top:0;margin-bottom:var(--beffen-rom-3)}
.bg-send .pv-handling{margin-top:var(--beffen-rom-3)}
.bg-send .pv-handling [type=submit]{margin-left:0}
.bg-send>.pv-hjelp{margin:var(--beffen-rom-2) 0 0;opacity:1}
.bg-send>.pv-hjelp a{color:inherit}
.bg-kvittering{max-width:560px;padding-left:var(--beffen-rom-7);border-left:1px solid var(--pv-linje)}
.bg-kvittering:focus{outline:none}
.bg-kvittering p{margin:0 0 var(--beffen-rom-5);font-size:clamp(20px,1.7vw,24px)}
.bg-kvittering p:last-child{margin:0}

/* Mobil og nettbrett: én spalte, rammen i skuffen (med JS) eller under delene (uten JS) */
.bg-bunn{display:none}
@media (max-width:1023px){
  .bg-band{padding:var(--beffen-rom-7) 0}
  .bg-firma-rad,.bg-ramme,.bg-slutt-ramme{grid-template-columns:1fr;gap:var(--beffen-rom-6)}
  .bg-fag-fliser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bg-valg{padding-right:0;border-right:0}
  .bg-app-plass{position:static}
  .bg-js .bg-app-plass{display:none}
  .bg-js .bg-bunn{display:flex}
  .bg-send,.bg-kvittering{padding-left:0;border-left:0;max-width:none}
  .bg-app-kropp{grid-template-columns:1fr;min-height:0}
  .bg-app-meny{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:0 var(--beffen-rom-2);border-right:0;border-bottom:1px solid var(--pd-kant)}
  .bg-app-meny::-webkit-scrollbar{display:none}
  .bg-tab{flex:none;min-height:52px;padding:0 var(--beffen-rom-3);border-left:0;border-bottom:3px solid transparent}
  .bg-tab[aria-selected=true]{border-left:0;border-bottom-color:var(--pd-kobber);background:none}
  .bg-tab.onske{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;border-left:0;border-bottom-style:dashed;border-bottom-color:var(--pd-kant-kontroll)}
  .bg-tab.onske[aria-selected=true]{border-bottom-color:var(--pd-kobber)}
  .bg-app-skjerm{padding:var(--beffen-rom-4)}
  .pv-skuff .bg-app{box-shadow:var(--pd-skygge)}
}
@media (max-width:759px){
  .bg-fag-fliser{grid-template-columns:1fr 1fr}
  .bg-flis-fag{padding:0 var(--beffen-rom-2)}
  .bg-onske-skjema{grid-template-columns:1fr}
  .bg-stempel{font-size:26px;border-width:3px}
}
@media (prefers-reduced-motion:reduce){.bg *{transition:none!important;animation:none!important}}