/* Side-panel — slides inn fra høyre. For cross-context referanse uten å forlate hovedsiden (05 §10.1). To moduser, styrt av brukerens preferanse (localStorage side-panel-pinnet): - Modal (default): backdrop dekker hovedsiden, esc/klikk lukker. - Pinnet/sticky: ingen backdrop, body får padding-right slik at panelet og siden lever side-om-side. Brukeren klikker tegnestift-knappen i header for å bytte mellom modusene. Bredde styres av --side-panel-bredde-variabelen, som brukeren justerer ved å dra venstre kant av panelet. Persisteres til localStorage. */ :root { --side-panel-bredde: min(42rem, 50vw); } .side-panel-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.15s ease-out; z-index: 90; } .side-panel-backdrop[data-aktiv="true"] { opacity: 1; pointer-events: auto; } .side-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--side-panel-bredde); max-width: 100vw; background: var(--farge-bakgrunn); color: var(--farge-tekst); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.18s ease-out; display: flex; flex-direction: column; z-index: 100; } .side-panel[data-aktiv="true"] { transform: translateX(0); } /* Sticky-variant: ingen skygge, kun en kantlinje mot hovedsiden — føles som en del av layouten i stedet for et lag over. */ .side-panel--sticky { box-shadow: none; border-left: 1px solid var(--farge-kant); } /* Når sticky er aktiv pusher vi til venstre med samme bredde som panelet. Bruker samme --side-panel-bredde-variabel så resize av panelet også oppdaterer hovedsidens padding atomisk. */ body { transition: padding-right 0.18s ease-out; } body[data-side-panel-sticky="true"] { padding-right: var(--side-panel-bredde); } /* Under aktiv resize: skru av transition så panelet føles direkte og ikke "etterslepende". Sett cursor globalt så peker holder seg "ew-resize" selv om musen forlater handle-elementet. */ body.side-panel-resizing, body.side-panel-resizing * { cursor: ew-resize !important; user-select: none; } body.side-panel-resizing .side-panel, body.side-panel-resizing { transition: none !important; } @media (max-width: 720px) { /* På små skjermer faller sticky ned til modal-aktig overlay — det er ikke plass til side-om-side, og resize gir lite mening. */ body[data-side-panel-sticky="true"] { padding-right: 0; } .side-panel--sticky { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); border-left: 0; } .side-panel__resize { display: none; } } /* Resize-håndtak — usynlig strip på venstre kant av panelet. Smal nok til ikke å forstyrre layouten, men bred nok til å treffe med musen. */ .side-panel__resize { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; cursor: ew-resize; z-index: 1; background: transparent; transition: background 0.12s ease-out; } .side-panel__resize:hover { background: var(--farge-primary); opacity: 0.4; } .side-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--avstand-3) var(--avstand-4); border-bottom: 1px solid var(--farge-kant); flex-shrink: 0; gap: var(--avstand-2); } .side-panel__header-tekst { min-width: 0; flex: 1; } .side-panel__header-handlinger { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .side-panel__tittel { font-size: var(--font-stor); font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-panel__undertekst { font-size: var(--font-liten); color: var(--farge-tekst-svak); margin: 2px 0 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-panel__undertekst[hidden] { display: none; } /* Tegnestift-knapp — toggle for pinnet-modus. */ .side-panel__pin { border: 0; background: transparent; cursor: pointer; padding: 6px; color: var(--farge-tekst-svak); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .side-panel__pin:hover { background: var(--farge-overflate-hover); color: var(--farge-tekst); } .side-panel__pin[aria-pressed="true"] { color: var(--farge-primary); background: var(--farge-overflate); } /* Når pinnet — roter tegnestiften litt så det er visuelt tydelig at den er "stukket inn". */ .side-panel__pin[aria-pressed="true"] svg { transform: rotate(-45deg); transition: transform 0.15s ease-out; } .side-panel__pin svg { transition: transform 0.15s ease-out; } .side-panel__lukk { border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; color: var(--farge-tekst-svak); border-radius: var(--radius); } .side-panel__lukk:hover { background: var(--farge-overflate-hover); color: var(--farge-tekst); } /* Meldinger-container (flash, feil). */ .side-panel__meldinger { flex-shrink: 0; } .side-panel__meldinger:empty { display: none; } .side-panel__meldinger > * { margin: var(--avstand-3) var(--avstand-4) 0 var(--avstand-4); } .side-panel__innhold { flex: 1; overflow-y: auto; padding: var(--avstand-4); } /* Fotnote — knappe-rad nederst som forblir synlig ved scroll. */ .side-panel__fotnote { display: flex; gap: var(--avstand-2); justify-content: flex-end; padding: var(--avstand-3) var(--avstand-4); border-top: 1px solid var(--farge-kant); background: var(--farge-overflate); flex-shrink: 0; } .side-panel__fotnote[hidden] { display: none; } /* Suksess-flash inni side-panel. */ .side-panel__flash { background: var(--farge-suksess-bakgrunn, #d1fae5); color: var(--farge-suksess, #065f46); padding: var(--avstand-2) var(--avstand-3); border-radius: var(--radius); font-size: var(--font-base); animation: flash-fade 4s forwards; } @keyframes flash-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } /* Feilmelding inni side-panel. */ .side-panel__feil { background: var(--farge-feil-bakgrunn, #fee2e2); color: var(--farge-feil, #991b1b); padding: var(--avstand-2) var(--avstand-3); border-radius: var(--radius); font-size: var(--font-base); } .side-panel__seksjon { margin-bottom: var(--avstand-4); } .side-panel__seksjon:last-child { margin-bottom: 0; } .side-panel__seksjon-tittel { font-size: var(--font-base); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--farge-tekst-svak); margin: 0 0 var(--avstand-2) 0; } /* Header-rad i en seksjon: tittel til venstre, handlingsknapp til høyre. */ .side-panel__seksjon-header { display: flex; align-items: center; justify-content: space-between; gap: var(--avstand-2); margin-bottom: var(--avstand-2); } .side-panel__seksjon-header .side-panel__seksjon-tittel { margin: 0; } .side-panel__definisjon { display: grid; grid-template-columns: 8rem 1fr; gap: var(--avstand-2) var(--avstand-3); font-size: var(--font-base); line-height: var(--linje-hoyde-tett); } /* PanelHeader — avatar til venstre + metadata ved siden (window.PanelHeader). Ekstra bunnmarg gir luft ned til neste seksjon. */ .panel-header { display: flex; align-items: center; gap: var(--avstand-4); margin-bottom: var(--avstand-6); } .panel-header__avatar { display: flex; flex-direction: column; align-items: center; gap: var(--avstand-1); flex-shrink: 0; } .panel-header__avatar .lenke { font-size: var(--font-liten); } .panel-header__meta { flex: 1; min-width: 0; margin: 0; } .side-panel__definisjon dt { color: var(--farge-tekst-svak); } .side-panel__definisjon dd { margin: 0; } .side-panel__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--avstand-2); margin-top: var(--avstand-2); border-top: 1px solid var(--farge-kant); font-weight: 500; } .side-panel__total-tall { font-size: var(--font-stor); font-variant-numeric: tabular-nums; } /* Sum-rad nederst i en kostnadstabell — grønn topplinje markerer totalen (full års-/månedsverdi). Brukes av RessursDetalj. */ .side-panel__sumrad td { border-top: 2px solid var(--farge-ok); /* tfoot arver ikke `.tabell tbody td`-paddingen — sett egen, ellers klistrer teksten seg til venstre kant. */ padding: var(--avstand-3) var(--avstand-3) var(--avstand-2); font-weight: 600; } .side-panel__sumrad .num { font-size: var(--font-stor); font-variant-numeric: tabular-nums; } /* Tre-velger — radio-button-liste for å velge ny forelder ved flytt-operasjon. Brukes av KategoriDetalj og OrganisasjonDetalj via window.TreVelger. */ .tre-velger { border: 1px solid var(--farge-kant); border-radius: var(--radius); max-height: 24rem; overflow-y: auto; } .tre-velger__rad { display: flex; align-items: center; gap: var(--avstand-2); padding: 4px var(--avstand-2); cursor: pointer; font-size: var(--font-base); line-height: var(--linje-hoyde-tett); border-bottom: 1px solid var(--farge-radkant); } .tre-velger__rad:last-child { border-bottom: 0; } .tre-velger__rad:hover { background: var(--farge-overflate-hover); } .tre-velger__rad input[type="radio"] { margin: 0; flex-shrink: 0; } .tre-velger__rad input[type="radio"]:checked + .tre-velger__path, .tre-velger__rad input[type="radio"]:checked ~ .tre-velger__navn { color: var(--farge-primary); font-weight: 500; } .tre-velger__rad--disabled { cursor: not-allowed; opacity: 0.4; } .tre-velger__rad--disabled:hover { background: transparent; } .tre-velger__rad--rot { background: var(--farge-overflate); font-style: italic; } .tre-velger__path { font-family: var(--font-monospace); font-size: var(--font-liten); min-width: 4rem; } .tre-velger__navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tre-velger__niva-prik { color: var(--farge-tekst-svak); font-weight: bold; margin-right: var(--avstand-1); } /* Liste med klikkbare lenker — brukes av kategori-detalj for under-kategorier og pris-tjenester under en kategori. Kompakt og full bredde. */ .kategori-detalj__liste { margin: 0; padding: 0; list-style: none; } .kategori-detalj__liste li { border-bottom: 1px solid var(--farge-radkant); } .kategori-detalj__liste li:last-child { border-bottom: 0; } .kategori-detalj__liste a { display: block; padding: var(--avstand-2) 0; color: var(--farge-tekst); text-decoration: none; font-size: var(--font-base); } .kategori-detalj__liste a:hover { color: var(--farge-primary); text-decoration: none; } /* Forklarings-paragraf på toppen av et opprett/endre-skjema. */ .side-panel__forklaring { font-size: var(--font-base); color: var(--farge-tekst-svak); margin: 0 0 var(--avstand-4) 0; line-height: 1.5; } /* Tabell med form-felter i celler — brukes for fordeling-redigering. */ .tabell--editerbar { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: var(--avstand-3); } .tabell--editerbar th, .tabell--editerbar td { padding: var(--avstand-2) var(--avstand-2); vertical-align: middle; } .tabell--editerbar th { font-weight: 500; text-align: left; color: var(--farge-tekst-svak); border-bottom: 1px solid var(--farge-kant); } .tabell--editerbar tfoot td { padding-top: var(--avstand-3); border-top: 1px solid var(--farge-kant); } .tabell--editerbar .felt { width: 100%; min-height: 32px; height: auto; padding: 6px 8px; } .tabell--editerbar .num { text-align: right; font-variant-numeric: tabular-nums; } .tabell--editerbar td.num .felt { text-align: right; }