/* ============================================================ stil-base.css — del 1/12 Designsystem/tokens, mørk modus-grunnlag, header, knapper, avatarer, selects, timeline-basis, event-kort, modaler, toast, KPI, org-modalens kjerne (eventer/ansatte/roller/maler), Mitt arbeid, event-innstillinger, sammendragskolonne, AI-modaler/sidepanel, kjøreplan (kpd-/uh-) Del av styles.css-splitten (2026-08-07). Lastes i FAST rekkefølge — kildeorden er kaskade-bærende (primitivene i stil-tema.css vinner ved lik spesifisitet fordi de kommer sist). Ny fil? Oppdater Index.html (statisk lenke eller DESKTOP_STIL i loaderen) OG alle test-*.html. ============================================================ */ /* ========================================== DESIGN SYSTEM ========================================== */ :root { --col-width: 140px; --sidebar-bredde: 600px; /* Felles bredde for hendelse- og info-sidebar (høyre panel) */ --primary: #F71B00; --primary-dark: #CC1500; /* rgb-trippel til rgba() — samme mønster som --st-*-tint under. Lagt til 2026-09-19 da ~200 hardkodede rgba(247,27,0,A) i denne og de elleve andre stilfilene ble byttet mot tokenet de skulle hatt (docs/DESIGN.md §2: «ny kode skal ikke inneholde nye hex-verdier»). Uten den ville hver tint-bruk vært ugyldig. */ --primary-tint: 247, 27, 0; --bg: #FFF2E9; --bg-panel: #2A2A2A; --surface: #FFFFFF; --text: #1D1D1D; --text-muted: #7A6E68; --border: #E5D8CF; --accent: #2563eb; /* Semantiske statusfarger (2026-08-07): ÉN grønn/amber/rød for ok/obs/feil. Før fantes 5 grønntoner og 3 tint-baser for «godkjent» — samme semantikk skal se lik ut i budsjett, bemanning, oppgaver, booking og mobil. */ --st-ok-bg: #DCF5E7; --st-ok-tekst: #047857; --st-ok-tint: 16,185,129; --st-obs-bg: #FEF3C7; --st-obs-tekst: #B45309; --st-obs-tint: 245,158,11; --st-feil-bg: #FDECEA; --st-feil-tekst: #B42318; --st-feil-tint: 239,68,68; /* «-adaptiv»: statustekst som følger TEMAET. De tre over gjør ikke det — de er definert kun her i lys utgave (se .ev-oppsett lenger nede), så flater i mørk modus har måttet skrive sin egen `body.dark-mode … color: #FCD34D`-regel ved siden av hver eneste bruk. Disse to gjør det unødig. Bevisst ADDITIVE: de 233 stedene som bruker --st-*-tekst er urørt, for -tekst og -bg må byttes i PAR (lys tekst på --st-obs-bg #FEF3C7 blir gul-på-gult) og det er en egen runde gjennom hele mørk modus. */ --st-obs-tekst-adaptiv: #B45309; --st-feil-tekst-adaptiv: #DC2626; /* Grønn fikk sin adaptive utgave 2026-09-18 da org-siden ble mørk: «✓ Konto» og «● Aktiv» sto i 2,45:1 med den faste --st-ok-tekst. */ --st-ok-tekst-adaptiv: #047857; /* Samme grep for merkerødt SOM TEKST. --primary-dark er definert kun her, i lys utgave, og ble brukt som tekstfarge på --primary-pill i aktive nav-knapper, piller og merker. I mørk modus er den pilla nesten sort (color-mix mot #212329), og var(--primary-dark) målte 2,2:1 mot den — under AA på nøyaktig det elementet som skal si «du er her». Målt, ikke antatt: 2,2 på pill, 2,8 på --surface, 3,1 på --bg. GJELDER KUN `color:`. --primary-dark er fortsatt riktig som BAKGRUNN (hover på primærknapper) — bytter du den, blir hover lyserosa. Flater som pinner den lyse paletten (#aiPanel, #org-page-familien) må pinne DENNE i samme slengen, ellers får de lys rød tekst på hvitt kort i mørk modus — 2,3:1, verre enn feilen dette retter. */ --primary-dark-adaptiv: #CC1500; /* Modal-tokens (2026-08-07): felles backdrop, radius og skygge. z-skalaen er dokumentasjon for NYE flater — eksisterende z-verdier står urørt til stablingsrekkefølgen mellom modulene er kartlagt. */ --overlay-bg: rgba(29, 29, 29, 0.45); --overlay-blur: 3px; --modal-r: 14px; --modal-shadow: 0 28px 90px rgba(0, 0, 0, 0.38); --z-modal: 2600; --z-toast: 6000; --z-popover: 9000; /* Dialogen (bekreft/varsle/sporTekst) åpnes som regel OPPÅ noe annet — en modal, et popover, offline-banneret på 99999. Den er alltid det øverste, ellers ber vi om en bekreftelse brukeren ikke ser. */ --z-dialog: 100000; /* Felt-tokens (2026-08-07): én skjemafelt-geometri og én fokusring */ --felt-pad: 9px 11px; --felt-r: 9px; --fokus-ring: 0 0 0 3px var(--primary-pill); /* Animasjonstokens (2026-08-07): ALL inngangsbevegelse i appen leser disse — juster nivået ETT sted. --anim-nivaa skalerer varighet, stagger og avstand samlet: 0 = av, 1 = standard, 1.5 = tydeligere. Enkelttokens kan også overstyres hver for seg. Ambient bevegelse (puls, skeleton-skimmer) skaleres bevisst IKKE — den er tempo, ikke nivå, og en uendelig animasjon med 0s varighet er udefinert. */ --anim-nivaa: 1; --anim-kurve: cubic-bezier(.2, .85, .3, 1); --anim-tid: calc(.52s * var(--anim-nivaa)); /* kort-/rad-innfall */ --anim-tid-panel: calc(.4s * var(--anim-nivaa)); /* fane-/panel-innfall */ --anim-tid-hurtig: calc(.26s * var(--anim-nivaa)); /* chips, småfades */ --anim-stagger: calc(38ms * var(--anim-nivaa)); /* forsinkelse per listeelement */ --anim-avstand: calc(16px * var(--anim-nivaa)); /* løftehøyde kort */ --anim-avstand-panel: calc(10px * var(--anim-nivaa));/* løftehøyde panel/fane */ /* --el-designtokens (2026-08-07): var duplisert ordrett i 13 komponent- skop (mobil-org, årshjul, racesim m.fl.) — samlet her. Bevisst LITERALER, ikke aliaser mot --bg/--text: el-flatene skal forbli cream også i mørk modus. --el-purple avviker per modul og står igjen lokalt. */ --el-cream: #FFF2E9; --el-cream-2: #F0E5DC; --el-cream-3: #FFFCF8; --el-paper: #FFFFFF; --el-ink: #1D1D1D; --el-ink-2: #2A2A2A; --el-ink-3: #3A3A3A; --el-muted: #7A6E68; --el-line: #E5D8CF; --el-line-2: #C8B8AD; --el-red: var(--primary); --el-red-dark: var(--primary-dark); --el-red-soft: rgba(var(--primary-tint), 0.12); --el-amber: #FBBF24; --el-amber-soft: rgba(251, 191, 36, 0.20); --el-emerald: #10B981; --el-emerald-soft: rgba(var(--st-ok-tint), 0.14); --el-blue: #3B82F6; --el-blue-soft: rgba(59, 130, 246, 0.14); --bg2: #F0E5DC; --card: rgba(255,255,255,0.05); --card-hover: rgba(255,255,255,0.09); /* Org-modal A+B tokens */ --ink-soft: #5C5048; --line-soft: #D6C7BC; --amber: #F59E0B; --amber-soft: rgba(251,191,36,0.15); --amber-text: #9A6E0A; /* AI-lilla: fargen alt maskingenerert bærer (badges, AI-punkter, forslagsbokser). Var duplisert som literal #7C3AED / rgba(124,58,237) et dusin steder før 16.08.2026 — samme trippel som --amber, og -text har egen mørk utgave fordi #7C3AED er for mørk mot #16171C. */ --ai-lilla: #7C3AED; --ai-lilla-soft: rgba(124,58,237,0.15); --ai-lilla-text: #6D28D9; --primary-pill: #FFE7DD; --header-dark: #1D1D1D; /* Kommandopulten — mørk flate på cream. MÅ finnes i begge temaer: en mørk flate som ikke løftes i mørk modus forsvinner i grunnen (DESIGN.md §2). Mørk utgave i body.dark-mode. */ --pult-bg: #1D1D1D; --pult-kant: #1D1D1D; --paper: #FFF8F1; --header-panel-height: 215px; --area-header-height: 40px; --loc-header-height: 50px; --hour-height: 120px; --half-hour-height: 60px; --quarter-height: 30px; } /* ========================================== MØRK MODUS — ekte mørkt tema Lys = default cream-tema (:root ovenfor). Mørk redefinerer kjerne- variablene her, + overstyrer hardkodede lyse flater i egen blokk lenger ned (søk: "DARK-MODE OVERRIDES"). color-scheme gjør native kontroller, scrollbars og datovelgere mørke. ========================================== */ body.dark-mode { color-scheme: dark; --bg: #16171C; --bg2: #1C1D23; --surface: #212329; --bg-panel: #16171C; --text: #ECEDF0; --text-muted: #9A9EA8; /* Bare org-familien definerer --text-secondary (lys, i stil-orgflater.css). Siden org-siden følger mørk modus (2026-09-18) må den finnes her også, ellers blir «… og 3 til»/skjemaetiketter i lokasjonsmodalene ugyldig farge og arver. Alias, ikke ny hue. */ --text-secondary: var(--text-muted); --border: rgba(255,255,255,0.11); --line-soft: rgba(255,255,255,0.08); --ink-soft: #C2C6CE; --paper: #212329; --card: rgba(255,255,255,0.045); --card-hover: rgba(255,255,255,0.085); --primary-pill: color-mix(in srgb, var(--primary) 26%, #212329); /* 5,5:1 mot pilla over, 6,8 mot --surface, 7,8 mot --bg. Samme verdi som .sup-ai-btn alt brukte for rød tekst på mørkt — ingen ny hue. */ --primary-dark-adaptiv: #FF8A75; --amber-soft: rgba(251,191,36,0.16); --amber-text: #F0C24B; --ai-lilla: #A78BFA; --ai-lilla-soft: rgba(167,139,250,0.18); --ai-lilla-text: #C4B5FD; /* Samme gulen flatene i stil-tema.css skrev for hånd; rød lysnes fordi #DC2626 mot #16171C bare så vidt er lesbar (≈4,2:1). */ --st-obs-tekst-adaptiv: #FCD34D; --st-feil-tekst-adaptiv: #F87171; --st-ok-tekst-adaptiv: #6EE7B7; /* samme grønn som .status-green og .oa-pill--redaktor */ /* Aksentblå som TEKST på mørke flater: #2563eb målte 2,8:1 på «Planlagt»- chipen i Møter. Løftet trinn av samme hue (7:1 mot --surface). */ --accent: #60A5FA; --header-dark: #101116; /* Kommandopulten (Oversikt-heroen, «Live nå»-kortet) er «mørk flate på cream». Her er grunnen selv nesten like mørk, så pulten må LØFTES for å beholde skillet — ikke beholde #1D1D1D, som forsvinner i bakgrunnen. Lys utgave står i :root. */ --pult-bg: #2B2D36; --pult-kant: #3E414D; } .spinner { border: 4px solid rgba(255,255,255,0.15); border-top: 4px solid white; border-radius: 50%; width: 44px; height: 44px; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================== EVENTLAB-MERKET (.elab-*) Geometrien til selve merket er fasit i icons/favicon.svg — her bor bare lockup-typografien og bevegelsen. Markup-kontrakt: med klassen .elab-merke, og de fire rektanglene MERKET med .elab-strek (spina i tillegg med .elab-strek--spine) — uten de klassene treffer ikke animasjonen. app-core.js sin eventlabMerke() skriver riktig markup; de statiske flatene (Index.html, superadmin.html, support/) har den inline fordi de rendres før JS-en har kjørt. ========================================== */ .elab-logo { display: inline-flex; align-items: center; gap: 14px; line-height: 1; } .elab-logo--vertikal { flex-direction: column; gap: 14px; text-align: center; } .elab-merke { display: block; flex-shrink: 0; } .elab-tekst { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .elab-logo--vertikal .elab-tekst { align-items: center; } .elab-ord { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.12em; line-height: 1; color: #fff; /* letter-spacing legger luft ETTER hvert tegn — også det siste. Uten denne motvekten er tekstboksen 0.12em bredere enn glyfene, og en sentrert lockup står synlig for langt til venstre. */ margin-right: -0.12em; } .elab-tagline { font-family: 'Inter', -apple-system, sans-serif; text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600; font-size: 10px; line-height: 1.5; /* 0.42 ga 4,45:1 mot #1D1D1D — så vidt under AA-kravet på 4,5:1. 0.5 gir 5,0:1. Målt i prod 17.08.2026. */ color: rgba(255,255,255,0.5); } .elab-logo--lys .elab-ord { color: #1D1D1D; } .elab-logo--lys .elab-tagline { color: rgba(0,0,0,0.55); } /* Luft ned til innholdet under (login-, org-velger- og invitasjonsskjermen) */ .elab-logo--luft { margin-bottom: 38px; } /* ========================================== REISEN INN (#login-screen → #loading-screen → org-velgeren) Tre flater, ett merke. Merket bytter størrelse, plass og farge, men formen står stille — det er det som binder innloggingen, lasting og org-valget sammen til én bevegelse i stedet for tre skjermbytter. STASJONENE er tokens (--st-*) og ikke tall i hver regel, fordi overgangene er «matched cuts»: merket på flata du forlater animeres til NØYAKTIG hvilestillingen på flata som kommer, og først da byttes flatene. Skriver de to hver sine tall, og tallene glir fra hverandre, blir byttet et synlig hopp i stedet for et klipp ingen ser. Geometrien til selve merket er fortsatt fasit i icons/favicon.svg. Her brukes den NAKNE varianten med tett viewBox ("139 135 234 242"), så bredden i CSS er bredden på merket — ikke på en rute rundt det. ========================================== */ :root { /* Høyde delt på bredde for det nakne merket (242/234). Brukes overalt der høyden utledes av bredden, så stasjonene bare trenger ett mål. */ --merke-forhold: calc(242 / 234); --reise-tid: .62s; /* LOGGINN: merket er nesten like høyt som flata og blør ut venstrekanten. min(…vw) holder det innenfor på brede, lave vinduer. */ --st-login-b: min(59vh, 44vw); --st-login-x: calc(var(--st-login-b) * -0.103); --st-login-y: calc(50vh - var(--st-login-b) * var(--merke-forhold) / 2); /* LASTER: sentrert i flata. Teksten henger under merket uten å flytte det (se .laster-under), slik at midtstillingen er nøyaktig 50/50 og klippet fra innloggingen treffer. */ --st-laster-b: 143px; --st-laster-x: calc(50vw - var(--st-laster-b) / 2); --st-laster-y: calc(50vh - var(--st-laster-b) * var(--merke-forhold) / 2); /* ORG-VELGER: øverst til venstre i innholdsspalta, samme x som overskriften under. Spalta er 1000 px bred og sentrert. */ --st-org-b: 74px; --st-org-x: max(28px, calc(50vw - 500px)); --st-org-y: 62px; } /* Selve merket. Én regel for alle tre flatene; hver flate setter --rm-* fra sin stasjon, og overgangen er den samme uansett vei. */ .reise-merke { position: fixed; left: var(--rm-x); top: var(--rm-y); width: var(--rm-b); height: calc(var(--rm-b) * var(--merke-forhold)); fill: var(--rm-farge, #fff); /* Ingen «all»: --rm-* endres i samme tick som klassen, og en all-regel ville forsøkt å animere fill-arv og annet vi ikke vil ha med. */ transition: left var(--reise-tid) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)), top var(--reise-tid) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)), width var(--reise-tid) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)), height var(--reise-tid) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)), fill var(--reise-tid) ease; } @media (prefers-reduced-motion: reduce) { /* Flatene bytter fortsatt, men uten forflytning: merket står der det står på hver flate. Klippet blir et klipp, og det er greit. */ .reise-merke { transition: fill .2s ease; } /* Glansen er BEVEGELSE og skal vekk — men lasteskjermen må fortsatt vise at noe skjer, ellers er den bare en mørk flate. Rolig opacity-puls i stedet, uten forflytning. CSS-fill vinner over fill-attributtet på , så gradienten kobles ut her og ingen andre steder. */ .laster-merke g { fill: var(--primary); } .laster-merke { animation: elabDemp 1.9s ease-in-out infinite; } } /* ── 1. INNLOGGING ────────────────────────────────────────────── Rød fullflate. Merket i hvitt, stort nok til å blø ut kanten — det er merket, ikke en logo i et hjørne. Skjemaet ligger i en smal høyrespalte, med ordmerket høyt og feltene lavt. */ #login-screen { --rm-x: var(--st-login-x); --rm-y: var(--st-login-y); --rm-b: var(--st-login-b); --rm-farge: #fff; background: var(--primary) !important; transition: background-color var(--reise-tid) ease; } /* Utgangen mot lasteskjermen: merket reiser til LASTER-stasjonen og blir rødt mens flata mørkner. Innholdet fader først — et skjema som krymper sammen med merket ser ut som en feil, ikke en overgang. */ #login-screen.reise-ut { --rm-x: var(--st-laster-x); --rm-y: var(--st-laster-y); --rm-b: var(--st-laster-b); --rm-farge: var(--primary); background: #2A2A2A !important; } #login-screen.reise-ut .logginn-spalte { opacity: 0; transform: translateY(-6px); } .logginn-spalte { position: fixed; right: max(28px, calc(50vw - 569px)); top: 64px; bottom: 64px; width: min(372px, calc(100vw - 56px)); display: flex; flex-direction: column; /* margin-bottom:auto på .logginn-topp i stedet for space-between: de ser like ut når det er ledig plass, men når innholdet er høyere enn spalta (standalone-hintet + en feilmelding samtidig) klipper space-between toppen bort i en scroll-container. Med auto-margin starter innholdet på toppen og scroller normalt. Gap er en MINSTEavstand: uten den ville taglinen klistret seg til e-postfeltet i akkurat det tilfellet. */ gap: 40px; overflow-y: auto; font-family: 'Inter', -apple-system, sans-serif; transition: opacity .28s ease, transform .28s ease; } .logginn-topp { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: auto; } .logginn-ord { font-family: 'Bebas Neue', sans-serif; font-size: clamp(56px, 6.8vw, 86px); line-height: .9; letter-spacing: .01em; color: #fff; } /* ── Tekst på den røde flata ────────────────────────────────────── Hvit på #F71B00 måler 4,11:1. Det holder for STOR tekst (AA krever 3:1 der), men ikke for brødtekst, som krever 4,5. Alt som er mindre enn stort får derfor samme dempede pille: hvit på den måler 5,66:1. Pilla er altså ikke pynt — den er den eneste måten en liten hvit tekst kan stå på merkerødt. Stor tekst (ordmerket, undertitlene) står fritt. */ .logginn-tagline, .logginn-lenke, .logginn-under-tekst, #login-status, #login-standalone-hint { background: rgba(0,0,0,.17); color: #fff; } .logginn-tagline { margin-top: 18px; font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: 999px; } .logginn-bunn { display: flex; flex-direction: column; } /* De tre undersidene deler spalte. Flex-kolonne her og ikke bare på .logginn-bunn: «Glemt passord?» er align-self:flex-end og trenger en flex-forelder for å finne høyrekanten. */ #login-hoved, #login-glemt, #login-reset { flex-direction: column; } #login-hoved { display: flex; } /* Feltene er hvite på rødt. Placeholderen ER etiketten (feltene er placeholder-only), så den må holde AA mot hvitt — #6B6058 måler 6,1:1, mot 2,6:1 for nettleserens standard grå. */ #login-screen input { height: 42px; box-sizing: border-box; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; background: #fff; /* Fast, ikke --text: feltet er alltid hvitt, mens --text snur til #ECEDF0 i mørk modus — da hadde man skrevet lyst på hvitt. */ color: #1D1D1D; font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } #login-screen input::placeholder { color: #6B6058; opacity: 1; } #login-screen input:focus { border-color: #2A2A2A; box-shadow: 0 0 0 3px rgba(0,0,0,.18); } .logginn-felt { display: flex; flex-direction: column; gap: 12px; } .logginn-knapper { display: flex; gap: 11px; margin-top: 13px; } .logginn-knapper button { flex: 1; height: 42px; border: none; border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; transition: background-color .15s, transform .1s; } .logginn-knapper button:active { transform: scale(.985); } /* E-post og passord er primærveien nå. Google er sekundær med vilje: i hjemskjerm-appen på iOS åpner OAuth-arket en isolert sesjon uten Safari-innloggingen, og tastaturet kan utebli helt der (se #login-standalone-hint). Knappen er fortsatt like stor — bare lavere i rangen. */ .logginn-primar { background: #2A2A2A; } .logginn-primar:hover { background: #1D1D1D; } .logginn-google { background: rgba(0,0,0,.15); } .logginn-google:hover { background: rgba(0,0,0,.26); } .logginn-lenke { align-self: flex-end; margin-top: 14px; border: none; padding: 5px 13px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color .15s; } .logginn-lenke:hover { background: rgba(0,0,0,.3); } #login-status { margin-top: 16px; padding: 10px 14px; border-radius: 9px; font-family: inherit; font-size: 13px; line-height: 1.6; } /* Ingen reservert høyde: statuslinja er tom det meste av tiden, og en tom pille under skjemaet er en flekk uten innhold. */ #login-status:empty { display: none; } /* Undersidene (glemt passord, nytt passord) arver den røde flata, men er egne skjermer i samme spalte. */ /* 20px + 700 er over AA-grensa for «stor tekst» (18,66 px fet), der kravet er 3:1 — hvit på merkerødt måler 4,11 og står dermed fritt. 16px ville krevd 4,5 og måttet inn i en pille som brødteksten under. */ .logginn-under-tittel { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; } .logginn-under-tekst { align-self: flex-start; font-size: 13px; line-height: 1.55; padding: 8px 14px; border-radius: 9px; margin-bottom: 20px; } #login-standalone-hint { border: 1px solid rgba(255,255,255,.22); } #login-standalone-hint strong { color: #fff; } /* ── 2. LASTESKJERM ───────────────────────────────────────────── Mørk flate, rødt merke, og en steglinje som teller ekte milepæler (auth → org → data) — ikke en tidsstyrt animasjon. Står den stille, går det faktisk tregt, og det er meningen at man skal se det. */ #loading-screen { --rm-x: var(--st-laster-x); --rm-y: var(--st-laster-y); --rm-b: var(--st-laster-b); --rm-farge: var(--primary); /* Fast #2A2A2A, ikke --bg-panel: det tokenet snur til #16171C i mørk modus, og lasteskjermen er en merkeflate — den skal se lik ut for alle. Org-velgeren under følger derimot temaet, for den er første skjerm i appen og ikke en del av oppstarten. */ background: #2A2A2A !important; transition: background-color var(--reise-tid) ease; } /* Utgangen mot org-velgeren: samme klipp én gang til, andre vei. */ #loading-screen.reise-ut { --rm-x: var(--st-org-x); --rm-y: var(--st-org-y); --rm-b: var(--st-org-b); background: var(--bg) !important; } #loading-screen.reise-ut .laster-under { opacity: 0; } /* Teksten henger UNDER merkets stasjon uten å delta i sentreringen: ellers ville merket blitt skjøvet opp av teksten, og klippet fra innloggingen ville bommet med akkurat den halve teksthøyden. */ .laster-under { position: fixed; top: calc(var(--st-laster-y) + var(--st-laster-b) * var(--merke-forhold) + 40px); left: 0; right: 0; text-align: center; transition: opacity .28s ease; } .laster-ord { font-family: 'Bebas Neue', sans-serif; font-size: 31px; line-height: 1; letter-spacing: .17em; /* Samme motvekt som .elab-ord: letter-spacing legger luft etter siste tegn også, og en sentrert linje står ellers for langt til venstre. */ margin-right: -.17em; color: #fff; } .laster-steg { margin-top: 11px; font-family: 'Inter', -apple-system, sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.78); transition: opacity .17s ease; } .laster-steg.bytter { opacity: 0; } .laster-steg:empty { display: none; } /* --primary måler 3,49:1 mot #2A2A2A — under AA for et tall som ER informasjonen. #FF8A75 er appens egen mørk modus-utgave av merkerødt (--primary-dark-adaptiv) og måler 6,25:1. Skrevet ut, ikke tokenet: lasteskjermen er alltid mørk, uansett hvilket tema brukeren har. */ .laster-steg b { color: #FF8A75; font-weight: 700; } /* 0.32 ga 2,81:1. «/ 3» er dempet, men det er fortsatt tallet som sier hvor mange steg som gjenstår. 0.55 → 5,42:1. */ .laster-steg i { color: rgba(255,255,255,.55); font-style: normal; } .laster-steg span { margin-left: 9px; } /* ── 3. ORG-VELGEREN ──────────────────────────────────────────── Lys flate — den er ikke en del av oppstarten lenger, den er første skjerm i appen. Kortene følger appens kort-idiom. Rendres inn i #login-screen av visOrgVelger(), som setter .orgvelg på den: derfor overstyrer disse reglene login-flatas røde. */ #login-screen.orgvelg { --rm-x: var(--st-org-x); --rm-y: var(--st-org-y); --rm-b: var(--st-org-b); --rm-farge: var(--primary); background: var(--bg) !important; display: block !important; overflow-y: auto; } .orgvelg-spalte { width: min(1000px, calc(100vw - 56px)); margin: 0 auto; /* Starter under merkets stasjon, slik at overskriften følger merket i stedet for å ligge bak det. */ padding: calc(var(--st-org-y) + var(--st-org-b) * var(--merke-forhold) + 30px) 0 62px; font-family: 'Inter', -apple-system, sans-serif; animation: orgvelgInn var(--anim-tid, .52s) var(--anim-kurve, cubic-bezier(.2,.85,.3,1)) .12s backwards; } .orgvelg-tittel { /*

har nettleserens egen margin (0.67em ≈ 23 px) — den la seg oppå den utregnede avstanden til merket og gjorde luften der tilfeldig. */ margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1; letter-spacing: .035em; color: var(--text); } .orgvelg-hvem { margin-top: 7px; font-size: 13.5px; color: var(--text-muted); } .orgvelg-liste { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; } .orgvelg-kort { display: flex; align-items: center; gap: 15px; padding: 15px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.05); text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; } .orgvelg-kort:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); } .orgvelg-kort:active { transform: scale(.995); } .orgvelg-monogram { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .06em; } .orgvelg-tekst { flex: 1; min-width: 0; } .orgvelg-navn { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orgvelg-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); } .orgvelg-rolle { flex-shrink: 0; font-size: 12px; font-weight: 700; } .orgvelg-fot { margin-top: 26px; display: flex; justify-content: flex-end; } .orgvelg-fot button { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 16px; font-family: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s; } .orgvelg-fot button:hover { border-color: var(--text-muted); color: var(--text); } @keyframes orgvelgInn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Smalt: spalta legger seg UNDER merket i stedet for ved siden av. Her er den i vanlig flyt og ikke fastlåst — et lavt vindu (liggende telefon, delt skjerm) har ikke plass til både et merke som fyller flata og et skjema, og da skal flata kunne scrolle i stedet for å klippe toppen av skjemaet. min-height skyver innholdet ned mot bunnen så lenge det ER plass; blir det for trangt, vokser spalta og #login-screen scroller. */ @media (max-width: 860px) { :root { /* vh FØRST i min(): på et lavt vindu er det høyden som er knapp, og et merke målt i vw ville skjøvet skjemaet under folden. */ --st-login-b: min(26vh, 58vw); --st-login-x: calc(var(--st-login-b) * -0.14); --st-login-y: 7vh; --st-org-x: 28px; --st-org-y: 34px; --st-org-b: 58px; } /* Inline display:flex på elementet, derfor !important. Taper fortsatt mot html.sesjon-ventet og html.oppstart-aktiv, som er mer spesifikke. */ #login-screen { display: block !important; overflow-y: auto !important; } /* …men ikke når initAuth har skjult den etter innlogging. Uten denne sto skjemaet igjen over appen på mobil etter vellykket innlogging. */ #login-screen[style*="display: none"] { display: none !important; } .logginn-spalte { position: static; overflow: visible; /* #login-screen scroller i stedet, se over */ /* Taket er lesbarhet, ikke plass: et e-postfelt over 420 px er en strek, ikke et felt — og på en liggende telefon er flata 712 px bred. */ width: auto; max-width: 420px; margin: calc(var(--st-login-y) + var(--st-login-b) * var(--merke-forhold) + 36px) 28px max(34px, env(safe-area-inset-bottom)); min-height: calc(100vh - var(--st-login-y) - var(--st-login-b) * var(--merke-forhold) - 106px); gap: 38px; } /* Smal: merket ligger over, så innholdet skal samles NEDERST. */ .logginn-topp { margin-bottom: 0; margin-top: auto; } .logginn-ord { font-size: clamp(46px, 13vw, 72px); } .orgvelg-spalte { width: calc(100vw - 56px); } } /* Lavt vindu (liggende telefon, delt skjerm): ordmerket er det som koster mest høyde, og et tolinjers EVENT/LAB i 72 px skyver «Logg inn» under folden. Her måles det i vh i stedet for vw. */ @media (max-height: 560px) { .logginn-ord { font-size: clamp(34px, 8vh, 56px); } .logginn-spalte { gap: 22px; } .logginn-tagline { margin-top: 12px; } } /* ========================================== MOBIL-OPPSTART (.oppstart-*) Ett dekke som eier hele oppstarten på ≤768 px — også innloggingen og redirect-hoppet i landing.js. Porten (klassen på ) settes av inline-scriptet i Index.html ; kontrolleren (window._oppstart*) bor i app-mobile.js. Se docs/mobil-oppstart-2026-08-10.md. Stilen MÅ ligge her og ikke i app-mobiles MB_CSS: MB_CSS injiseres av et defer-skript og finnes ikke når flata skal stå på skjermen. ========================================== */ .oppstart { display: none; position: fixed; inset: 0; z-index: 10500; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: space-between; background: #1D1D1D; padding: calc(24px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom)); opacity: 1; transition: opacity .42s ease; } /* To veier inn: porten mens flata lever, .ut mens den fader. Layouten ligger på basisregelen nettopp fordi oppstart-aktiv fjernes FØR fade-en er ferdig — det er den fjerningen som slipper #login-screen, #loading-screen og de pausede innfallene fri. Uten .ut ville flata forsvunnet momentant. */ html.oppstart-aktiv .oppstart, .oppstart.ut { display: flex; } .oppstart.ut { opacity: 0; pointer-events: none; } /* #login-screen har display:flex INLINE i markupen, så en vanlig regel taper. !important er trygt her fordi oppstart-aktiv fjernes idet flata begynner å fade: kreves login, står skjemaet klart under det fadende dekket. #loading-screen ville ellers loopet sitt eget merke bak dekket. */ html.oppstart-aktiv #login-screen, html.oppstart-aktiv #loading-screen { display: none !important; } /* Desktop-motstykket (porten i Index.html, 2026-09-12): finnes en Supabase-sesjon i localStorage, skal innloggingsskjemaet ikke blinke på hver sidelast mens sjekk_auth() venter på nettet — det mørke dekket (#loading-screen med merket) står i stedet, fra første piksel til flaten er klar. initAuth slipper klassen på hvert utgangspunkt (_slippSesjonVentet), og der en flate styrer loaderen med inline-stil settes den inline-synlig i samme tick, så dekket ikke blinker. */ html.sesjon-ventet #login-screen { display: none !important; } html.sesjon-ventet #loading-screen { display: flex !important; } /* Lasteskjermen er bare merket: tekstelementene står tomme i markupen og vises kun når hentData sin feilvei har skrevet noe i dem. */ #loading-screen h2:empty, #loading-status:empty { display: none; } /* I --fortsett og --stille skal merket stå ferdig tegnet: .elab-merke--animert ligger i markupen og ville ellers spilt innfallet sitt om igjen. */ html:not(.oppstart-full) .oppstart-merke .elab-strek { animation: none; } .oppstart-midt { display: flex; flex-direction: column; align-items: center; margin: auto 0; } .oppstart-merke { margin-bottom: 22px; } .oppstart-ord { font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1; color: #fff; /* Samme motvekt som .elab-ord: letter-spacing legger luft etter siste tegn også, og en sentrert lockup står ellers for langt til venstre. */ letter-spacing: .12em; margin-right: -.12em; } /* Indikatoren er EKTE milepæler (auth → org/event → data), ikke en tidsstyrt animasjon. Står den stille, går det faktisk tregt — det er hensikten. */ .oppstart-spor { width: 132px; height: 2px; margin: 22px 0 18px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; } .oppstart-spor > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--primary); transform: scaleX(0); transform-origin: left center; /* Transition, ikke animation: den skal også virke under reduced motion, fordi indikatoren er informasjon og ikke pynt. */ transition: transform .32s cubic-bezier(.2,.85,.3,1); } .oppstart-tekst { text-align: center; min-height: 34px; transition: opacity .17s ease; } .oppstart-tekst.bytter { opacity: 0; } .oppstart-tittel { font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; } .oppstart-tittel:empty { display: none; } .oppstart-under { font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: .11em; color: rgba(255,255,255,0.42); } /* «av» holdes gemen: hele linja i versaler leste som en stamme mot org-navnet rett over, og signaturen skal ligge under, ikke konkurrere. */ .oppstart-bunn { font-family: 'Inter', -apple-system, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,0.26); } .oppstart-bunn b { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,0.42); } @keyframes oppstartMerke { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes oppstartOrd { from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(4px); } to { clip-path: inset(0 -10% 0 0); opacity: 1; transform: none; } } @keyframes oppstartTon { from { opacity: 0; } to { opacity: 1; } } html, body { height: 100vh; margin: 0; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } body { display: flex; flex-direction: column; } /* ========================================== HEADER ========================================== */ .header-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; background: var(--header-dark, #1D1D1D); padding: 0 20px; border-bottom: 1px solid rgba(0,0,0,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.28); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; transform: translateY(0); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease; } .header-panel.skjult { transform: translateY(-100%); box-shadow: none; } #header-spacer { flex-shrink: 0; transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .header-row1 { display: flex; align-items: center; gap: 10px; height: 54px; } .tlb-tilbake { background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35); color: rgba(255,255,255,0.88) !important; padding: 6px 11px !important; border-radius: 8px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .tlb-tilbake:hover { background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)) !important; border-color: rgba(255,255,255,0.30) !important; color: #fff !important; } .tlb-modus-tag { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: color-mix(in srgb, var(--primary) 75%, #fff); background: color-mix(in srgb, var(--primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 999px; padding: 3px 10px; } .header-row3 { display: flex; align-items: center; gap: 0; border-top: 1px solid rgba(255,255,255,0.07); padding: 8px 0 9px; } .header-panel .btn-ai-primary { background: linear-gradient(135deg,var(--primary-dark),var(--primary)); color: white; border: 1px solid rgba(255,255,255,0.20); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 10px rgba(var(--primary-tint), 0.35); } .header-panel .btn-ai-primary:hover { background: linear-gradient(135deg,#E01700,#FF3D24); border-color: rgba(255,255,255,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 4px 12px rgba(var(--primary-tint), 0.45); } /* Nøytral mørk — «Opprett med AI» er verktøylinjas ENE røde primærhandling, og to røde AI-knapper side om side lot rødt slutte å bety «viktigst» */ .header-panel .btn-ai-secondary { background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)); color: white; border: 1px solid rgba(255, 255, 255, 0.26); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.35); } .header-panel .btn-ai-secondary:hover { background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)); border-color: rgba(255, 255, 255, 0.4); } #header-pin-btn.pinned { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.45) !important; color: white !important; } .header-zone { display: flex; align-items: center; gap: 6px; padding: 0 14px; flex-shrink: 0; } .header-zone:first-child { padding-left: 0; } .header-zone + .header-zone { border-left: 1px solid rgba(255,255,255,0.09); } .header-zone.grow { flex: 1; } .zone-label { font-family: 'Bebas Neue', sans-serif; font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.32); letter-spacing: 0.12em; white-space: nowrap; margin-right: 4px; } /* Nedsenket gruppeflate — kontrast til de hevede enkeltknappene */ .ctrl-group { display: flex; align-items: center; gap: 1px; background: rgba(0,0,0,0.26); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); border-radius: 8px; padding: 2px; flex-shrink: 0; } .ctrl-seg-btn { background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(255,255,255,0.75) !important; font-size: 15px; font-weight: 400; padding: 2px 8px !important; line-height: 1.2; border-radius: 6px !important; } .ctrl-seg-btn:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; } .ctrl-seg-verdi { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #fff; min-width: 28px; text-align: center; } .header-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.15); flex-shrink: 0; } /* Del-knappen skjules/vises via style.display fra app-core — flex-layouten må derfor ligge i CSS så ikonet sentreres når inline-display fjernes. */ #delelenke-btn { display: inline-flex; align-items: center; gap: 5px; } /* Dagknapper i verktøyslinjen (genereres av genererDatoArray) */ .tl-dag-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 34px; padding: 3px 7px 4px !important; border-radius: 8px; background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.85) !important; cursor: pointer; line-height: 1.15; } .tl-dag-btn:hover { background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)) !important; border-color: rgba(255,255,255,0.28) !important; color: #fff !important; } .tl-dag-uke { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; } .tl-dag-nr { font-size: 13px; font-weight: 700; } .tl-dag-btn.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(var(--primary-tint), 0.45); } .tl-dag-btn.active .tl-dag-uke { opacity: 0.85; } /* Dager utenfor eventdatoene (genererDatoArray utvider til faktiske hendelsesdatoer): nedtonet + stiplet så de skiller seg fra perioden. */ .tl-dag-btn--utenfor { opacity: 0.55; border-style: dashed !important; } .tl-dag-btn--utenfor.active { opacity: 0.9; } /* ORG/EVENT-CHIP OG DROPDOWN */ .org-chip { display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3); border-radius: 8px; padding: 5px 10px 5px 10px; color: white; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; font-family: inherit; } .org-chip:hover { background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)); border-color: rgba(255,255,255,0.28); } .org-chip-sep { opacity: 0.3; margin: 0 2px; } .org-chip-event { color: rgba(255,255,255,0.65); font-weight: 500; } .org-chip-arrow { opacity: 0.45; font-size: 10px; margin-left: 2px; } .org-dropdown-popup { position: absolute; top: calc(100% + 8px); right: 0; background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #E5E7EB; min-width: 240px; z-index: 9999; overflow: hidden; animation: dropdownFadeIn 0.12s ease; } @keyframes dropdownFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .org-dropdown-header { padding: 12px 16px 8px; font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.08em; } .org-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; color: #1D1D1D; cursor: pointer; transition: background 0.1s; text-decoration: none; } .org-dropdown-item:hover { background: #F9FAFB; } .org-dropdown-item.active { background: #FFF7ED; color: #EA580C; font-weight: 600; } .org-dropdown-item.action { color: #374151; font-weight: 500; } .org-dropdown-sep { height: 1px; background: #F1F5F9; margin: 4px 0; } .hoved-tittel { margin: 0; font-family: 'Bebas Neue', 'Inter', sans-serif; font-size: 21px; font-weight: 400; color: rgba(255,255,255,0.95); letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; max-width: 340px; } /* ========================================== BUTTONS — base (light bg) ========================================== */ button { padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } /* 2026-08-07: hover maler ikke lenger om bakgrunn/kant — det overstyrte modulenes egne knappefarger og tvang frem !important-overstyringer. Brightness gir samme feedback uten å eie fargen. */ button:hover { filter: brightness(0.97); } button.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 2px 8px rgba(var(--primary-tint), 0.35); } /* Header button overrides (dark bg) — hevet, solid «tast»-chip: solid flate avledet av headerfargen + topplys-inset + myk skygge (samme oppskrift som .orgp-support-btn). */ .header-panel button { background: color-mix(in srgb, #fff 8%, var(--header-dark, #1D1D1D)); color: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.35); } .header-panel button:hover { background: color-mix(in srgb, #fff 14%, var(--header-dark, #1D1D1D)); border-color: rgba(255,255,255,0.30); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.4); } .header-panel button.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(var(--primary-tint), 0.5); } /* ========================================== PROFILBILDE-AVATARER (avatarInnhold i app-core.js) Legges INNI en hvilken som helst avatar-sirkel: holderen fyller containeren og klipper bildet til containerens radius; initialene bak blir synlige hvis bildet feiler (onerror fjerner img). ========================================== */ .avatar-holder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; overflow: hidden; } .avatar-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ========================================== SELECTS — base (light bg) ========================================== */ select { padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s ease; } select:hover { border-color: #94A3B8; } select option { background: white; color: var(--text); } /* Header select overrides (dark bg) — nedsenkede felt som søket */ .header-panel select { background: rgba(0,0,0,0.26); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); border-radius: 8px; padding: 6px 9px; font-size: 12px; font-weight: 600; max-width: 170px; } .header-panel select:hover { background: rgba(0,0,0,0.34); border-color: rgba(255,255,255,0.26); } .header-panel select option { background: #2A2A2A; color: white; } /* Header text input */ .header-panel input[type="text"] { padding: 6px 11px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(0,0,0,0.26); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); color: white; font-size: 12px; font-family: inherit; transition: all 0.15s ease; } .header-panel input[type="text"]:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: rgba(0,0,0,0.34); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .header-panel input[type="text"]::placeholder { color: rgba(255,255,255,0.35); } .header-panel input[type="range"] { cursor: pointer; accent-color: var(--primary); } .controls-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ========================================== TIMELINE ========================================== */ .timeline-wrapper { flex-grow: 1; overflow: auto; display: flex; position: relative; } .time-column { position: sticky; left: 0; z-index: 990; width: 65px; flex-shrink: 0; background-color: var(--bg); border-right: 1px solid var(--border); height: var(--timeline-height, 11520px); box-shadow: 2px 0 8px rgba(29,29,29,0.05); } .time-spacer { height: calc(var(--area-header-height) + var(--loc-header-height)); box-sizing: border-box; } .time-slot { height: 120px; box-sizing: border-box; position: relative; border-bottom: 1px solid transparent; } .time-text { position: absolute; top: -7px; right: 12px; font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; } /* Klokkeslett-etiketter i tidskolonnen (genereres av tegnTidslinje) */ .tl-time-lbl { position: absolute; left: 0; width: 100%; text-align: center; font-family: 'JetBrains Mono', monospace; } .tl-time-lbl--hel { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .tl-time-lbl--halv { font-size: 10px; font-weight: 500; color: var(--text-muted); } .tl-time-lbl--kvarter { font-size: 9px; font-weight: 400; color: color-mix(in srgb, var(--text-muted) 65%, transparent); } /* Skjøt der «Skjul netter» har klappet sammen tomme nattetimer. Høyde 0 med overflow synlig — markøren må ikke flytte tidsaksen. */ .tl-natt-skjot { position: absolute; left: 0; right: 0; height: 0; z-index: 940; border-top: 1px dashed color-mix(in srgb, var(--text-muted) 55%, transparent); line-height: normal; pointer-events: none; } .tl-natt-skjot span { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 3px; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.03em; white-space: nowrap; } .tl-natt-skjot--under span { bottom: auto; top: 1px; } /* Døgnskille — heltrukket der natt-skjøten er stiplet, så de to markørene ikke forveksles når begge treffer samme time. */ .tl-dogn-skille { position: absolute; left: 0; right: 0; height: 0; z-index: 941; border-top: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); line-height: normal; pointer-events: none; } .tl-dogn-skille span { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 3px; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600; color: color-mix(in srgb, var(--primary) 80%, var(--text-muted)); letter-spacing: -0.03em; white-space: nowrap; } #skjul-netter-btn.aktiv { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } /* Dag-etikett (sticky pille øverst i tidskolonnen) */ .tl-dag-etikett { position: absolute; left: 4px; right: 4px; background: var(--header-dark, #1D1D1D); color: #fff; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.08em; padding: 6px 2px 5px; border-radius: 0 0 9px 9px; box-shadow: 0 3px 10px rgba(29,29,29,0.25); } .area-group { display: flex; flex-direction: column; min-height: var(--timeline-height, 11520px); border-right: 2px solid var(--border); } .area-header { position: sticky; top: 0; z-index: 800; height: var(--area-header-height); line-height: var(--area-header-height); background: var(--header-dark, #374151); color: white; text-align: center; font-weight: 400; font-size: 15px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.12em; text-shadow: 0 1px 2px rgba(0,0,0,0.25); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); } .location-columns-container { display: flex; flex-direction: row; flex-grow: 1; min-height: 100%; } .location-column { height: var(--timeline-height, 11520px); position: relative; box-sizing: border-box; border-right: 1px solid var(--border); min-width: var(--col-width); max-width: var(--col-width); flex: 0 0 var(--col-width); } .location-header { position: sticky; top: var(--area-header-height); z-index: 700; height: var(--loc-header-height); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; font-weight: 700; font-size: 11.5px; color: var(--text); border-bottom: 1px solid var(--border); letter-spacing: 0.05em; text-transform: uppercase; padding: 0 6px; box-sizing: border-box; overflow: hidden; } .grid-container { flex-grow: 1; height: var(--timeline-height, 11520px); display: flex; position: relative; cursor: pointer; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height); } /* ========================================== EVENT CARDS ========================================== */ .event-card { position: absolute; border-radius: 9px; color: white; box-shadow: 0 1px 3px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06); box-sizing: border-box; cursor: pointer; overflow: hidden; transition: box-shadow 0.15s ease, height 0.15s ease, min-width 0.15s ease, transform 0.12s ease; border: none; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; padding: 6px 7px; } /* Hover-kortet vokser til siden også, ikke bare nedover: i en smal kolonne (bredde-slideren nede, eller flere samtidige hendelser som deler plassen) ble detaljene ellers presset til ett ord per linje. min-width betyr at kolonner som allerede er breiere enn dette står helt urørt. overflow-wrap hører hjemme her og ikke på .event-card: hover er eneste tilstand med overflow:visible, så det er bare her lange ord kan renne utenfor kanten. På kortflaten ellers vil brytingen skyve ansvarlig-linja ut av det klippede kortet. */ .event-card:hover:not(.is-resizing) { height: auto !important; min-height: var(--card-h, 40px); min-width: 210px; overflow: visible; overflow-wrap: anywhere; z-index: 50 !important; box-shadow: 0 10px 30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.1); } .event-card.is-resizing { overflow: hidden; cursor: ns-resize; } .event-card-tittel { font-weight: 800; font-size: 13.5px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.18); } .event-card-tid { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; opacity: 0.85; letter-spacing: -0.02em; } .event-card-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; width: 100%; } .event-card-topp .event-card-tittel { flex: 1 1 auto; min-width: 0; } .event-card-ekstern-chip { display: inline-block; margin-left: 5px; padding: 1px 5px; background: rgba(255,255,255,0.22); border-radius: 100px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; } .event-card-ansvarlig { font-size: 12px; font-weight: 600; width: 100%; margin-bottom: 3px; opacity: 0.95; } .card-expanded { display: none; width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.25); text-align: left; } .event-card:hover:not(.is-resizing) .card-expanded { display: block; } .card-exp-tid { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; margin-bottom: 5px; opacity: 0.95; } .card-exp-rad { font-size: 11px; opacity: 0.85; line-height: 1.5; } .card-exp-lbl { opacity: 0.65; margin-right: 3px; } .card-exp-besk { font-size: 11px; opacity: 0.8; margin-top: 5px; line-height: 1.4; font-style: italic; } .card-exp-konflikt { margin-top: 6px; font-size: 11px; font-weight: 700; color: #FBBF24; } .resizer { position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; cursor: ns-resize; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(0,0,0,0.08); border-radius: 0 0 9px 9px; opacity: 0; transition: opacity 0.12s ease; } .event-card:hover .resizer { opacity: 1; } .resizer:hover { background: rgba(0,0,0,0.3); } /* ========================================== MODALS ========================================== */ .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-content { background: var(--surface); margin: 3% auto; padding: 32px; border-radius: 16px; width: 650px; max-width: 95%; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04); } .modal-header { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 24px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } /* Reset buttons/selects inside modals to light theme */ .modal button, .modal-content button { background: var(--surface); color: var(--text); border-color: var(--border); } .modal button:hover, .modal-content button:hover { background: var(--bg); border-color: #C8B8AD; color: var(--text); } .modal select, .modal-content select { background: var(--surface); color: var(--text); border-color: var(--border); } .modal select option, .modal-content select option { background: white; color: var(--text); } /* ── Event-skjema: høyre sidebar ──────────────────────────────── */ #eventModal { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; left: auto; right: 0; width: var(--sidebar-bredde); pointer-events: none; } /* Delt stil for event- og info-sidebar */ #eventModal .modal-content, #infoModal .modal-content { margin: 0 !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-left: 1px solid var(--border); box-shadow: -12px 0 48px rgba(0,0,0,0.35) !important; pointer-events: all; box-sizing: border-box !important; overflow-y: auto; animation: event-sidebar-in 0.28s cubic-bezier(0.32,0.72,0,1); } #eventModal .modal-content, #infoModal .modal-content { width: var(--sidebar-bredde) !important; border-radius: 16px 0 0 16px !important; } @keyframes event-sidebar-in { from { transform: translateX(100%); } to { transform: translateX(0); } } /* ── Info-sidebar ──────────────────────────────────────── */ #infoModal { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; left: auto; right: 0; width: var(--sidebar-bredde); pointer-events: none; } #infoModal .info-layout { grid-template-columns: 1fr !important; } #infoModal .info-kp-kolonne { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; } #infoModal .info-modal-footer { position: sticky; bottom: 0; background: var(--surface); padding: 14px 0 4px !important; margin-top: 8px; border-top: 1px solid var(--border); } .event-modal-hd { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--surface); padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; padding-top: 2px; } #eventModal .modal-header, #infoModal .modal-header { border: none !important; padding: 0 !important; margin: 0 !important; font-family: 'Bebas Neue', sans-serif; font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-modal-lukk { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border) !important; background: transparent !important; color: var(--text-muted) !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s; padding: 0; } .event-modal-lukk:hover { background: var(--border) !important; color: var(--text) !important; } #eventModal .mal-footer-row { position: sticky; bottom: 0; background: var(--surface); padding: 14px 0 2px !important; margin-top: 12px; border-top: 1px solid var(--border); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .form-group label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; } .form-group input, .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.12); } .form-group select option { background: white; color: var(--text); } /* Synlighets-velgeren: