:root { /* --------------------------------------------------------------- SOLVOTIX-PALETT (delt med portalen - se AGENTS.md i repo-roten og /home/boggi/project_gone/frontend/frontend/AGENTS.md §4). Verdiene under er lagret som MELLOMROMSDELTE RGB-TRIPLER, ikke hex, slik at gjennomsiktige varianter kan skrives rgb(var(--sx-logo) / .12) i stedet for en ny hardkodet rgba(...). Det betyr at hele temaet kan byttes ved a endre denne ene blokken - ingen andre linjer. REGEL: legg aldri inn en ny rå hex- eller rgba()-verdi lenger nede i filen. Bruk et token herfra, eller legg til et nytt token her. ------------------------------------------------------------- */ --sx-bg-deep: 0 8 32; /* #000820 Background deep */ --sx-bg-midnight: 0 24 56; /* #001838 Background midnight */ --sx-surface: 16 48 80; /* #103050 Surface navy */ --sx-card: 24 64 104; /* #184068 Card blue */ --sx-divider: 42 74 104; /* #2A4A68 Divider slate */ --sx-logo: 8 120 140; /* #08788C Logo primary */ --sx-orange: 240 120 0; /* #F07800 Accent orange */ --sx-action: 16 104 240; /* #1068F0 Action blue */ --sx-green: 0 160 88; /* #00A058 Success green */ --sx-text: 248 248 248; /* #F8F8F8 Text / off-white */ --sx-text-2: 97 107 115; /* #616B73 Secondary text */ --sx-danger: 239 68 68; /* #EF4444 Danger (fra portalens styles.css --danger) */ --sx-accent-alt: 8 120 140; /* Laering/simulering-aksent. Paletten har ingen lilla, sa denne foelger logo-primaer. */ --sx-white: 255 255 255; --sx-black: 0 0 0; /* Kort - nøyaktig samme oppskrift som portalens gateways-side, se frontend/src/app/system/gateways/gateways.component.css. */ --card-bg: radial-gradient(circle at 18% 12%, rgb(var(--sx-divider) / .22) 0%, rgb(var(--sx-divider) / .08) 32%, transparent 58%), linear-gradient(145deg, rgb(var(--sx-card) / .28) 0%, rgb(var(--sx-bg-midnight) / .38) 48%, rgb(var(--sx-bg-deep) / .54) 100%), rgb(var(--sx-bg-midnight)); --card-border: 1px solid rgb(var(--sx-divider) / .85); --shadow-1: 0 10px 20px rgb(var(--sx-black) / .35), 0 2px 6px rgb(var(--sx-black) / .35); /* Prisniva-rampe (5 steg). Monoton i lyshet-sa-kulør, og oransje/rod er fortsatt skillbare fra gronn ved rod-gronn-fargeblindhet. NORMAL er en lysnet divider-slate: rå #2A4A68 blir for mork for en tynn stolpe pa #000820. DETTE er eneste kilde til prisfargene - app.js leser de samme variablene via theme(), sa de to kan ikke lenger komme i utakt. MERK: disse er ferdig utregnede rgb()-verdier, ikke color-mix(). getComputedStyle() loeser IKKE opp color-mix() i en custom property (den returnerer selve teksten "color-mix(...)"), og canvas i app.js leser nettopp disse via theme() - en color-mix() her ville gitt usynlige stolper i prisgrafen. Utregningen star i kommentaren bak hver verdi. */ --level-very-cheap: rgb(var(--sx-green)); --level-cheap: rgb(112 200 160); /* 55% #00A058 + 45% #F8F8F8 */ --level-normal: rgb(104 126 147); /* 70% #2A4A68 + 30% #F8F8F8 */ --level-expensive: rgb(var(--sx-orange)); --level-very-expensive: rgb(var(--sx-danger)); /* Graf-/canvas-farger. Canvas kan ikke lese CSS-variabler selv, sa app.js henter disse en gang via theme() - legg nye graffarger her, ikke som literal i app.js. */ --chart-grid: rgb(var(--sx-white) / .06); --chart-now: rgb(var(--sx-text) / .35); --chart-preheat-fill: rgb(var(--sx-orange) / .28); --chart-preheat-stroke: rgb(var(--sx-orange) / .7); /* De 15 opprinnelige fargenavnene beholdes UENDRET som navn - hele filen (~500 var()-referanser) peker fortsatt hit. Bare verdiene er byttet til Solvotix-paletten over, sa temaskiftet er denne blokken pluss --sx-*-blokken, ingenting annet. */ --bg: rgb(var(--sx-bg-deep)); --bg-panel: rgb(var(--sx-bg-midnight)); --bg-panel-2: rgb(var(--sx-surface)); --border: rgb(var(--sx-divider) / .85); --border-glow: rgb(var(--sx-logo)); --cyan: rgb(var(--sx-logo)); --cyan-soft: rgb(92 165 178); /* 65% logo-primaer + 35% tekst */ --green: rgb(var(--sx-green)); --blue: rgb(var(--sx-action)); --amber: rgb(var(--sx-orange)); --red: rgb(var(--sx-danger)); --purple: rgb(var(--sx-accent-alt)); --text: rgb(var(--sx-text)); /* --text-muted brukes til ekte brodtekst. Palettens #616B73 gir bare ~3.1:1 mot #000820 og stryker pa WCAG AA, sa den brukes til det den faktisk er - dekorativ/tertiaer tekst (--text-dim) - mens --text-muted er palettens egen tekstfarge nedtonet (~10:1). */ --text-muted: rgb(var(--sx-text) / .72); --text-dim: rgb(var(--sx-text-2)); --radius: 16px; /* --------------------------------------------------------------- GUI-redesign, steg 1 (avtalt med brukeren 28.08.2026) - nye design-tokens. Alt over denne linjen er UENDRET (samme fargenavn/verdier som for redesignet) - ingenting som allerede brukes noe sted i filen er fjernet eller endret her, sa dagens utseende er 100% likt for disse nye tokenene tas i bruk et sted. Hensikt: gi senere steg (romkort, faner, bunnnavigasjon o.l.) et konsistent, gjenbrukbart sett a bygge pa i stedet for nye, hardkodede tall - i tråd med "Design system"-kravet i planen. Avstands-skala (spacing) - brukes til padding/gap/margin. ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* Hjørne-avrunding - --radius (16px) over er allerede "standard kort"-verdien og beholdes uendret som sådan; disse tre er nye navn for de andre avrundingene som allerede brukes spredt i filen (10-14px sma kort/rader, 999px piller), sa nytt innhold kan referere et NAVN i stedet for et nytt magisk tall. */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Type-skala - samme skrifttype som i dag (Segoe UI-stakken, definert på body under), bare navngitte størrelser i stedet for spredte tall. */ --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --font-xs: 11px; --font-sm: 12.5px; --font-base: 14px; --font-md: 16px; --font-lg: 20px; --font-xl: 28px; --font-2xl: 40px; /* Mobil-first brytpunkter (dokumentert her som fasit-verdier - CSS støtter ikke var() inne i @media selv, så disse skrives ut som tallverdier direkte i hver @media-regel, men skal alltid matche tallene under): --bp-phone: 480px (liten mobil) --bp-tablet: 768px (nettbrett / stor mobil liggende) --bp-desktop:1024px (skrivebord) Eksisterende brytpunkter i filen (980px/720px) beholdes uendret - de brukes fortsatt av dagens layout. Nye komponenter i senere steg bruker 480/768/1024. */ } * { box-sizing: border-box; } /* Global sikring: en senere klasse-regel (f.eks. "display: flex") kan ellers "vinne" over den native [hidden]-attributten pa lik spesifisitet - se ogsa .modal-backdrop[hidden] under. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-family); } body { background-image: radial-gradient(ellipse 900px 500px at 15% -10%, rgb(var(--sx-logo) / .08), transparent), radial-gradient(ellipse 700px 500px at 100% 10%, rgb(var(--sx-green) / .06), transparent); min-height: 100vh; } button { font-family: inherit; } /* ---------- Header ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--border); background: rgb(var(--sx-bg-deep) / .85); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 38px; height: 38px; border-radius: 9px; } .brand-name { font-weight: 700; letter-spacing: 3px; font-size: 15px; color: var(--text); } .brand-sub { font-weight: 500; letter-spacing: 3px; font-size: 10px; color: var(--cyan); margin-top: 1px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--bg-panel-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); white-space: nowrap; } .pill-toggle { cursor: pointer; color: var(--text); } .pill-toggle:hover { border-color: var(--border-glow); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot-muted { background: var(--text-dim); } .dot-green { background: var(--green); box-shadow: 0 0 8px var(--green); } .dot-amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .dot-red { background: var(--red); box-shadow: 0 0 8px var(--red); } .dot-cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text-muted); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; } .icon-btn:hover { color: var(--cyan); border-color: var(--border-glow); } /* ---------- Hovednavigasjon (GUI-redesign steg 2, 28.08.2026) ---------- Samme