/* ============================================================================ Wican Design v3 - kjerne Manrope · Granitt/Sand/Krokus · to skall · lyst og mørkt univers Rammeverksfri CSS, ingen build, ingen CDN. Struktur: 1. Primitiver (rampene fra designmanualen + Rogn som UI-utvidelse) 2. Semantiske tokens (lyst), aksentvalg via data-accent 3. Mørkt univers (+ eksplisitt lyst per undertre, + OS-styrt via .theme-auto) 4. Basis og typografi 5. Layout-hjelpere 6. Skall: toppmeny, sidemeny, mobil bunnavigasjon, footer 7. Komponenter 8. Ikoner 9. Hjelpere og utvidelser 10. v2-kompatibilitet (Nordisk-klasser som ikke finnes i v3-vokabularet) 11. Utskrift, bevegelse og touch Regler: alle farger via tokens (hex kun i primitivblokken, SVG-data-URI-er og Microsoft-logoen). Én aksent per portal. Tekst tar mørke trinn, Krokus 400 er aldri tekst. v2-aliaser (--brand, --bg, .topbar ...) beholdes så konsumenter virker. ========================================================================== */ @font-face { font-family: "Manrope"; src: url("manrope-var.woff2") format("woff2-variations"), url("assets/fonts/manrope-var.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; src: url("manrope-var-ext.woff2") format("woff2-variations"), url("assets/fonts/manrope-var-ext.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 1. Primitiver ──────────────────────────────────────────────────────── */ :root { --granitt-050:#2E3D48; --granitt-100:#28363F; --granitt-200:#25313A; --granitt-300:#212D34; --granitt-400:#1E282F; --granitt-500:#1A2429; --granitt-600:#171F24; --granitt-700:#141B20; --granitt-800:#11171B; --granitt-900:#0E1316; --granitt-950:#0B0F11; --sand-050:#FCFBFA; --sand-100:#F7F5F3; --sand-200:#F0EDE8; --sand-300:#E8E4DD; --sand-400:#E2DDD4; --sand-500:#DED8CE; --sand-600:#D0C9BD; --sand-700:#BEB5A7; --sand-800:#A59C8D; --sand-900:#8C8373; --sand-950:#736D64; --krokus-050:#F4F0FF; --krokus-100:#E5DEFF; --krokus-200:#CEBDFF; --krokus-300:#AE94FF; --krokus-400:#9073E8; --krokus-500:#754BDF; --krokus-600:#5F39C1; --krokus-700:#4F319B; --krokus-800:#3F2A74; --krokus-900:#2F2152; --krokus-950:#1A1429; --multe-050:#FFF7EF; --multe-100:#FFEDDE; --multe-200:#FFDABC; --multe-300:#FFC494; --multe-400:#FF9D50; --multe-500:#F38A37; --multe-600:#D57225; --multe-700:#AA5E22; --multe-800:#7E4920; --multe-900:#59361A; --multe-950:#2C1D11; --skog-050:#F4FAF5; --skog-100:#E7F6E9; --skog-200:#CFEDD1; --skog-300:#B2E1B5; --skog-400:#86D08B; --skog-500:#67B76D; --skog-600:#4BA052; --skog-700:#3C8041; --skog-800:#365F39; --skog-900:#273F28; --skog-950:#1C241D; --himmel-050:#F0F9FF; --himmel-100:#DEF3FF; --himmel-200:#BDE6FF; --himmel-300:#94D7FF; --himmel-400:#57C1FF; --himmel-500:#24AEFF; --himmel-600:#009DFA; --himmel-700:#037FC9; --himmel-800:#105F8E; --himmel-900:#15435E; --himmel-950:#10222D; /* Rogn - UI-utvidelse av profilen. Kun feil og destruktive handlinger. Finnes ikke i designmanualen; dokumentert som bevisst tillegg for produktflater. */ --rogn-050:#FDF1F0; --rogn-100:#FBE3E1; --rogn-200:#F6C4C0; --rogn-300:#EE9A94; --rogn-400:#E36B62; --rogn-500:#D3463C; --rogn-600:#B43730; --rogn-700:#8F2D27; --rogn-800:#6B241F; --rogn-900:#4A1A17; --rogn-950:#2A0F0D; --white:#FFFFFF; --white-05:rgba(255,255,255,.05); --white-10:rgba(255,255,255,.10); --white-15:rgba(255,255,255,.15); --white-30:rgba(255,255,255,.30); --white-40:rgba(255,255,255,.40); --white-60:rgba(255,255,255,.60); --white-75:rgba(255,255,255,.75); --black-05:rgba(0,0,0,.05); --black-10:rgba(0,0,0,.10); --black-40:rgba(0,0,0,.40); --black-60:rgba(0,0,0,.60); } /* ── 2. Semantiske tokens (lyst univers, standard) ──────────────────────── */ :root { color-scheme: light; /* Aksent: Krokus som standard. data-accent="skog|multe|himmel" bytter hele rampen (seksjon 2b). Standardverdiene hører hjemme HER, i :root, ikke i [data-theme="light"] - den har samme spesifisitet som [data-accent] og står senere i fila, så en ramp der ville overstyrt portalens aksent. */ --accent-050:var(--krokus-050); --accent-100:var(--krokus-100); --accent-200:var(--krokus-200); --accent-300:var(--krokus-300); --accent-400:var(--krokus-400); --accent-500:var(--krokus-500); --accent-600:var(--krokus-600); --accent-700:var(--krokus-700); --accent-800:var(--krokus-800); --primary: var(--accent-500); --primary-hover: var(--accent-600); --primary-active: var(--accent-700); --primary-text: var(--white); --primary-soft: var(--accent-100); --primary-softer: var(--accent-050); --primary-ink: var(--accent-700); /* tekst på soft-flater */ --link: var(--accent-600); --decor: var(--accent-400); /* streker, prikker, aktiv-markør. Aldri tekst. */ --ring: color-mix(in srgb, var(--accent-500) 35%, transparent); --bg: var(--sand-100); --surface: var(--white); --surface-2: var(--sand-050); --surface-3: var(--sand-200); --surface-4: var(--sand-300); --border: var(--sand-300); --border-2: var(--sand-600); --control-border: var(--sand-900); /* ramme på input/select/bryter: 3,7:1 mot hvit (WCAG 1.4.11) */ --divider: var(--sand-200); --overlay: rgba(26,36,41,.45); --text: var(--granitt-300); --heading: var(--granitt-500); --muted: var(--granitt-050); --dim: var(--sand-950); /* kun plassholder og deaktivert tekst */ --inverse: var(--white); /* Status. Tekst tar mørke trinn (AA), fyll tar de mettede, bakgrunn tar 050. */ --ok: var(--skog-800); --ok-fill: var(--skog-600); --ok-bg: var(--skog-050); --ok-border: var(--skog-200); --warn: var(--multe-700); --warn-fill: var(--multe-600); --warn-bg: var(--multe-050); --warn-border: var(--multe-200); --bad: var(--rogn-600); --bad-fill: var(--rogn-500); --bad-bg: var(--rogn-050); --bad-border: var(--rogn-200); --bad-strong:var(--rogn-600); --bad-strong-hover:var(--rogn-700); /* knappeflate for destruktive handlinger, 6,4:1 med hvit */ --info: var(--himmel-800);--info-fill: var(--himmel-700);--info-bg: var(--himmel-050);--info-border: var(--himmel-200); --neutral: var(--granitt-050);--neutral-fill:var(--sand-700);--neutral-bg:var(--sand-200);--neutral-border:var(--sand-400); --planned: var(--krokus-400); /* rail: planlagt */ --locked: var(--granitt-100); /* rail: fakturert/låst */ /* Sidemenyen er alltid mørk Granitt, uavhengig av tema */ --side-bg: var(--granitt-500); --side-text: var(--sand-300); --side-muted: var(--sand-700); /* Sand 900 ga 4,2:1 mot Granitt 500 - Sand 700 gir 7,6:1 */ --side-active: var(--white-10); --side-hover: var(--white-05); --side-marker: var(--krokus-400); --side-border: var(--white-10); /* Diagram-serier (8), CVD-vennlig rekkefølge */ --chart-1:var(--krokus-500); --chart-2:var(--multe-600); --chart-3:var(--skog-600); --chart-4:var(--himmel-700); --chart-5:var(--krokus-300); --chart-6:var(--multe-300); --chart-7:var(--skog-400); --chart-8:var(--granitt-050); --chart-grid: var(--sand-300); --chart-axis: var(--granitt-050); /* Form */ --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px; --stroke:1px; --shadow-sm:0 1px 2px rgba(17,23,27,.06); --shadow-overlay:0 12px 32px rgba(17,23,27,.16), 0 2px 6px rgba(17,23,27,.08); --shadow-modal:0 24px 64px rgba(17,23,27,.28); /* Typografi. Produktskala, ikke web-skalaen fra manualen. */ --font:"Manrope", Arial, sans-serif; --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px; --fs-4xl:40px; --lh-title:1.15; --lh-body:1.4; --ls-title:-0.02em; /* Spacing (4-basert) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --paper:var(--sand-050); --paper-text:var(--granitt-800); --paper-muted:var(--granitt-050); --paper-border:var(--sand-300); --nav-h:56px; --nav-h-compact:48px; --side-w:220px; --maxw:1200px; --dur-fast:120ms; --dur:160ms; --dur-slow:240ms; --ease:cubic-bezier(.4,0,.2,1); /* v2-aliaser (bakoverkompatibilitet for konsumentenes lokale CSS) */ --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading); --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn); --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border); --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2); } /* Aksent per portal: settes én gang på . Krokus er standard. Skog = rådgivning, Multe = regnskap, Himmel = IT. De avledede tokenene gjentas fordi var() løses der det deklareres. */ [data-accent="skog"] { --accent-050:var(--skog-050); --accent-100:var(--skog-100); --accent-200:var(--skog-200); --accent-300:var(--skog-300); --accent-400:var(--skog-600); --accent-500:var(--skog-700); --accent-600:var(--skog-800); --accent-700:var(--skog-900); --accent-800:var(--skog-950); --side-marker:var(--skog-500); --primary:var(--accent-500); --primary-hover:var(--accent-600); --primary-active:var(--accent-700); --primary-soft:var(--accent-100); --primary-softer:var(--accent-050); --primary-ink:var(--accent-700); --link:var(--accent-600); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-500) 35%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); } [data-theme="dark"][data-accent="skog"], .theme-dark[data-accent="skog"], [data-theme="dark"] [data-accent="skog"], .theme-dark [data-accent="skog"] { --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-active:var(--accent-400); --primary-soft:color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer:color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink:var(--accent-200); --link:var(--accent-300); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-300) 45%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); } [data-accent="multe"] { --accent-050:var(--multe-050); --accent-100:var(--multe-100); --accent-200:var(--multe-200); --accent-300:var(--multe-300); --accent-400:var(--multe-600); --accent-500:var(--multe-700); --accent-600:var(--multe-800); --accent-700:var(--multe-900); --accent-800:var(--multe-950); --side-marker:var(--multe-400); --primary:var(--accent-500); --primary-hover:var(--accent-600); --primary-active:var(--accent-700); --primary-soft:var(--accent-100); --primary-softer:var(--accent-050); --primary-ink:var(--accent-700); --link:var(--accent-600); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-500) 35%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); } [data-theme="dark"][data-accent="multe"], .theme-dark[data-accent="multe"], [data-theme="dark"] [data-accent="multe"], .theme-dark [data-accent="multe"] { --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-active:var(--accent-400); --primary-soft:color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer:color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink:var(--accent-200); --link:var(--accent-300); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-300) 45%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); } [data-accent="himmel"] { --accent-050:var(--himmel-050); --accent-100:var(--himmel-100); --accent-200:var(--himmel-200); --accent-300:var(--himmel-300); --accent-400:var(--himmel-700); --accent-500:var(--himmel-800); --accent-600:var(--himmel-900); --accent-700:var(--himmel-950); --accent-800:var(--himmel-950); --side-marker:var(--himmel-400); --primary:var(--accent-500); --primary-hover:var(--accent-600); --primary-active:var(--accent-700); --primary-soft:var(--accent-100); --primary-softer:var(--accent-050); --primary-ink:var(--accent-700); --link:var(--accent-600); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-500) 35%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); } [data-theme="dark"][data-accent="himmel"], .theme-dark[data-accent="himmel"], [data-theme="dark"] [data-accent="himmel"], .theme-dark [data-accent="himmel"] { --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-active:var(--accent-400); --primary-soft:color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer:color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink:var(--accent-200); --link:var(--accent-300); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-300) 45%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); } /* ── 3. Mørkt univers (Granitt 700 + hvit + Krokus 300) ─────────────────── */ [data-theme="dark"], .theme-dark { color-scheme: dark; --primary: var(--accent-300); --primary-hover: var(--accent-200); --primary-active: var(--accent-400); --primary-text: var(--granitt-900); --primary-soft: color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer: color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink: var(--accent-200); --link: var(--accent-300); --decor: var(--accent-400); --ring: color-mix(in srgb, var(--accent-300) 45%, transparent); /* Flatestigen: siden er mørkest (Granitt 700), sidemenyen ligger fast på Granitt 500, og panelene løftes over den (Granitt 400 og oppover). Kort og tabeller leser derfor som løftet arbeidsflate inne i et mørkere skall - ikke som svarte hull. Hvit tekst på kort er fortsatt 15,0:1. */ --bg: var(--granitt-700); --surface: var(--granitt-400); --surface-2: var(--granitt-300); --surface-3: var(--granitt-200); --surface-4: var(--granitt-100); --border: var(--white-10); --border-2: var(--white-15); --control-border: var(--white-40); --divider: var(--white-05); --overlay: rgba(0,0,0,.6); --text: var(--white); --heading: var(--white); --muted: var(--white-75); --dim: var(--white-60); --inverse: var(--granitt-900); --ok: var(--skog-300); --ok-fill:var(--skog-500); --ok-bg:rgba(75,160,82,.16); --ok-border:rgba(75,160,82,.35); --warn: var(--multe-300); --warn-fill:var(--multe-500);--warn-bg:rgba(243,138,55,.16); --warn-border:rgba(243,138,55,.35); --bad: var(--rogn-300); --bad-fill:var(--rogn-500); --bad-bg:rgba(211,70,60,.18); --bad-border:rgba(211,70,60,.4); --bad-strong:var(--rogn-600); --bad-strong-hover:var(--rogn-700); --info: var(--himmel-300); --info-fill:var(--himmel-500);--info-bg:rgba(36,174,255,.14);--info-border:rgba(36,174,255,.35); --neutral:var(--white-75); --neutral-fill:var(--white-30); --neutral-bg:var(--white-10); --neutral-border:var(--white-15); --locked: var(--sand-700); --chart-1:var(--krokus-300); --chart-2:var(--multe-400); --chart-3:var(--skog-400); --chart-4:var(--himmel-400); --chart-5:var(--krokus-200); --chart-6:var(--multe-200); --chart-7:var(--skog-200); --chart-8:var(--white-60); --chart-grid:var(--white-10); --chart-axis:var(--white-60); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-overlay:0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-modal:0 24px 64px rgba(0,0,0,.6); /* Aliaser gjentas: en custom property med var() løses på elementet den deklareres på, så :root-aliasene ville ellers båret lyse verdier inn i mørkt univers. */ --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading); --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn); --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border); --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2); } /* Lyst univers som eksplisitt valg, per rot eller per undertre (f.eks. kvittering/dokumentviser i mørk app) */ [data-theme="light"], .theme-light { color-scheme: light; /* Aksentrampen settes IKKE her. [data-theme="light"] har samme spesifisitet som [data-accent="..."] og står senere i fila, så en ramp her ville vunnet og gjort alle portaler Krokus. Rampen kommer fra :root eller [data-accent]; de avledede tokenene under peker på den og blir derfor riktige uansett. */ --primary: var(--accent-500); --primary-hover: var(--accent-600); --primary-active: var(--accent-700); --primary-text: var(--white); --primary-soft: var(--accent-100); --primary-softer: var(--accent-050); --primary-ink: var(--accent-700); /* tekst på soft-flater */ --link: var(--accent-600); --decor: var(--accent-400); /* streker, prikker, aktiv-markør. Aldri tekst. */ --ring: color-mix(in srgb, var(--accent-500) 35%, transparent); --bg: var(--sand-100); --surface: var(--white); --surface-2: var(--sand-050); --surface-3: var(--sand-200); --surface-4: var(--sand-300); --border: var(--sand-300); --border-2: var(--sand-600); --control-border: var(--sand-900); /* ramme på input/select/bryter: 3,7:1 mot hvit (WCAG 1.4.11) */ --divider: var(--sand-200); --overlay: rgba(26,36,41,.45); --text: var(--granitt-300); --heading: var(--granitt-500); --muted: var(--granitt-050); --dim: var(--sand-950); /* kun plassholder og deaktivert tekst */ --inverse: var(--white); /* Status. Tekst tar mørke trinn (AA), fyll tar de mettede, bakgrunn tar 050. */ --ok: var(--skog-800); --ok-fill: var(--skog-600); --ok-bg: var(--skog-050); --ok-border: var(--skog-200); --warn: var(--multe-700); --warn-fill: var(--multe-600); --warn-bg: var(--multe-050); --warn-border: var(--multe-200); --bad: var(--rogn-600); --bad-fill: var(--rogn-500); --bad-bg: var(--rogn-050); --bad-border: var(--rogn-200); --bad-strong:var(--rogn-600); --bad-strong-hover:var(--rogn-700); /* knappeflate for destruktive handlinger, 6,4:1 med hvit */ --info: var(--himmel-800);--info-fill: var(--himmel-700);--info-bg: var(--himmel-050);--info-border: var(--himmel-200); --neutral: var(--granitt-050);--neutral-fill:var(--sand-700);--neutral-bg:var(--sand-200);--neutral-border:var(--sand-400); --planned: var(--krokus-400); /* rail: planlagt */ --locked: var(--granitt-100); /* rail: fakturert/låst */ /* Sidemenyen er alltid mørk Granitt, uavhengig av tema */ --side-bg: var(--granitt-500); --side-text: var(--sand-300); --side-muted: var(--sand-700); /* Sand 900 ga 4,2:1 mot Granitt 500 - Sand 700 gir 7,6:1 */ --side-active: var(--white-10); --side-hover: var(--white-05); --side-marker: var(--krokus-400); --side-border: var(--white-10); /* Diagram-serier (8), CVD-vennlig rekkefølge */ --chart-1:var(--krokus-500); --chart-2:var(--multe-600); --chart-3:var(--skog-600); --chart-4:var(--himmel-700); --chart-5:var(--krokus-300); --chart-6:var(--multe-300); --chart-7:var(--skog-400); --chart-8:var(--granitt-050); --chart-grid: var(--sand-300); --chart-axis: var(--granitt-050); /* Form */ --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px; --stroke:1px; --shadow-sm:0 1px 2px rgba(17,23,27,.06); --shadow-overlay:0 12px 32px rgba(17,23,27,.16), 0 2px 6px rgba(17,23,27,.08); --shadow-modal:0 24px 64px rgba(17,23,27,.28); /* Typografi. Produktskala, ikke web-skalaen fra manualen. */ --font:"Manrope", Arial, sans-serif; --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px; --fs-4xl:40px; --lh-title:1.15; --lh-body:1.4; --ls-title:-0.02em; /* Spacing (4-basert) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --paper:var(--sand-050); --paper-text:var(--granitt-800); --paper-muted:var(--granitt-050); --paper-border:var(--sand-300); --nav-h:56px; --nav-h-compact:48px; --side-w:220px; --maxw:1200px; --dur-fast:120ms; --dur:160ms; --dur-slow:240ms; --ease:cubic-bezier(.4,0,.2,1); /* v2-aliaser (bakoverkompatibilitet for konsumentenes lokale CSS) */ --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading); --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn); --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border); --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2); } /* Mørkt univers styrt av OS: KUN når portalen har satt class="theme-auto" på og ikke har valgt eksplisitt tema. Uten .theme-auto er portalen alltid lys, så propagering til v2-konsumenter er trygg. Wican.theme() setter data-theme ved valg. */ @media (prefers-color-scheme: dark) { html.theme-auto:not([data-theme="light"]) { color-scheme: dark; --primary: var(--accent-300); --primary-hover: var(--accent-200); --primary-active: var(--accent-400); --primary-text: var(--granitt-900); --primary-soft: color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer: color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink: var(--accent-200); --link: var(--accent-300); --decor: var(--accent-400); --ring: color-mix(in srgb, var(--accent-300) 45%, transparent); /* Flatestigen: siden er mørkest (Granitt 700), sidemenyen ligger fast på Granitt 500, og panelene løftes over den (Granitt 400 og oppover). Kort og tabeller leser derfor som løftet arbeidsflate inne i et mørkere skall - ikke som svarte hull. Hvit tekst på kort er fortsatt 15,0:1. */ --bg: var(--granitt-700); --surface: var(--granitt-400); --surface-2: var(--granitt-300); --surface-3: var(--granitt-200); --surface-4: var(--granitt-100); --border: var(--white-10); --border-2: var(--white-15); --control-border: var(--white-40); --divider: var(--white-05); --overlay: rgba(0,0,0,.6); --text: var(--white); --heading: var(--white); --muted: var(--white-75); --dim: var(--white-60); --inverse: var(--granitt-900); --ok: var(--skog-300); --ok-fill:var(--skog-500); --ok-bg:rgba(75,160,82,.16); --ok-border:rgba(75,160,82,.35); --warn: var(--multe-300); --warn-fill:var(--multe-500);--warn-bg:rgba(243,138,55,.16); --warn-border:rgba(243,138,55,.35); --bad: var(--rogn-300); --bad-fill:var(--rogn-500); --bad-bg:rgba(211,70,60,.18); --bad-border:rgba(211,70,60,.4); --bad-strong:var(--rogn-600); --bad-strong-hover:var(--rogn-700); --info: var(--himmel-300); --info-fill:var(--himmel-500);--info-bg:rgba(36,174,255,.14);--info-border:rgba(36,174,255,.35); --neutral:var(--white-75); --neutral-fill:var(--white-30); --neutral-bg:var(--white-10); --neutral-border:var(--white-15); --locked: var(--sand-700); --chart-1:var(--krokus-300); --chart-2:var(--multe-400); --chart-3:var(--skog-400); --chart-4:var(--himmel-400); --chart-5:var(--krokus-200); --chart-6:var(--multe-200); --chart-7:var(--skog-200); --chart-8:var(--white-60); --chart-grid:var(--white-10); --chart-axis:var(--white-60); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-overlay:0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-modal:0 24px 64px rgba(0,0,0,.6); /* Aliaser gjentas: en custom property med var() løses på elementet den deklareres på, så :root-aliasene ville ellers båret lyse verdier inn i mørkt univers. */ --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading); --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn); --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border); --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2); } /* Logoen må følge OS-temaet på samme måte som tokenene, ellers står den mørke logoen på en mørk toppbar. */ html.theme-auto:not([data-theme="light"]) .brand-logo--dark { display:none; } html.theme-auto:not([data-theme="light"]) .brand-logo--light { display:block; } } /* ── 4. Basis og typografi ────────────────────────────────────────────────── Produktskala (13 px grunntekst, 14 px på touch), titler 115 % / -2 %, brødtekst 140 %. Store tall i Manrope Light med tabulære sifre. */ *, *::before, *::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-body); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4 { margin:0; color:var(--heading); line-height:var(--lh-title); letter-spacing:var(--ls-title); font-weight:600; text-wrap:balance; } h1 { font-size:var(--fs-2xl); font-weight:700; } h2 { font-size:var(--fs-lg); } h3 { font-size:var(--fs-md); } h4 { font-size:var(--fs-base); letter-spacing:0; } p { margin:0 0 var(--sp-3); } a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; } small, .small { font-size:var(--fs-sm); } .muted { color:var(--muted); } .dim { color:var(--dim); } .lead { font-size:var(--fs-md); color:var(--muted); } .eyebrow { font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .num, .tnum { font-variant-numeric:tabular-nums; } .big-num { font-weight:300; font-size:var(--fs-3xl); line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--heading); } code, kbd, pre, .mono { font-family:var(--mono); font-size:.92em; } code { background:var(--surface-3); padding:1px 5px; border-radius:var(--radius-xs); } kbd { background:var(--surface); border:var(--stroke) solid var(--border-2); border-bottom-width:2px; border-radius:var(--radius-xs); padding:1px 6px; font-size:var(--fs-xs); font-weight:600; color:var(--muted); } pre { margin:0; background:var(--surface-2); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); overflow:auto; line-height:1.5; } pre.log { max-height:320px; } hr, .divider { border:0; border-top:var(--stroke) solid var(--border); margin:var(--sp-4) 0; } ::selection { background:var(--primary-soft); } ::placeholder { color:var(--dim); opacity:1; } :focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--radius-xs); } /* Innenfor klippede eller mørke flater legges fokusringen innover / i lys aksent */ .sidenav a:focus-visible, .sidenav button:focus-visible { outline:2px solid var(--krokus-300); outline-offset:-3px; border-radius:var(--radius-xs); } .tabs a:focus-visible, .tabs button:focus-visible, .pager .pages button:focus-visible, .menu a:focus-visible, .menu button:focus-visible, .bottomnav a:focus-visible, .topnav a:focus-visible, .seg button:focus-visible, .palette .item:focus-visible { outline-offset:-2px; } .opt-card:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:2px; } .chip:focus-visible, .opt-btn:focus-visible { outline-offset:2px; } img { max-width:100%; } .uiword { font-weight:600; color:var(--heading); } /* ── 5. Layout ────────────────────────────────────────────────────────────── .container (1200 px) er standard; .container--wide for tabelltunge sider. .stack/.row/.between/.grid-* er de eneste avstandsverktøyene komponentene trenger; avstandshjelperne i seksjon 9 er unntaket for enkeltstående blokker. */ .container { width:100%; max-width:var(--maxw); margin:0 auto; padding:var(--sp-6) var(--sp-5); flex:1; } .container--wide { max-width:none; } .container--narrow { max-width:760px; } .stack { display:flex; flex-direction:column; gap:var(--sp-4); } .stack-sm { display:flex; flex-direction:column; gap:var(--sp-2); } .row { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; } .between { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; } .grow { flex:1; min-width:0; } .spacer { flex:1; } form > .spacer, .login-card .spacer, .stack > .spacer { flex:none; height:var(--sp-3); } /* v2: loddrett luft i skjema */ .grid { display:grid; gap:var(--sp-4); } .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .grid-main-side { grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); align-items:start; } .grid-side-main { grid-template-columns:minmax(240px,1fr) minmax(0,2.2fr); align-items:start; } @media (max-width:900px) { .grid-3, .grid-4, .grid-main-side, .grid-side-main { grid-template-columns:1fr; } .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .grid-2, .grid-4 { grid-template-columns:1fr; } } .page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); } .page-head h1 { margin:0; } .page-head .sub { color:var(--muted); margin-top:2px; } .page-head .actions { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; } .crumbs { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-2); flex-wrap:wrap; } .crumbs a { color:var(--muted); } .crumbs .sep { color:var(--border-2); } .crumbs .current { color:var(--heading); font-weight:500; } .section-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:var(--sp-6) 0 var(--sp-3); } .section-head h2 { display:flex; align-items:center; gap:var(--sp-2); } /* ── 6. Skall ─────────────────────────────────────────────────────────────── To likestilte skall, ett per portal: .shell--top (toppbar + innhold + footer) for mindre paneler, .shell--side (mørk Granitt 500-sidemeny + slank toppbar) for modulrike apper. Bunnavigasjon på mobil med .has-bottomnav på . */ /* 6a. Toppbar: a.brand (logo + skille + appnavn) · nav.topnav · div.account. Aktiv lenke får understrek i aksentfargen; .navdot/.navcount for status. */ .topbar { position:sticky; top:0; z-index:30; height:var(--nav-h); display:flex; align-items:center; gap:var(--sp-5); padding:0 var(--sp-5); background:var(--surface); border-bottom:var(--stroke) solid var(--border); } .brand { display:flex; align-items:center; gap:var(--sp-2); flex:none; color:inherit; } .brand:hover { text-decoration:none; } .brand-mark { display:block; height:22px; width:auto; } .brand-logo { display:block; height:20px; width:auto; } /* To logofiler i toppbaren: mørk på lys flate, hvit på mørk. Sidemenyen er alltid mørk og bruker logo_white direkte, uten disse klassene. */ .brand-logo--light { display:none; } [data-theme="dark"] .brand-logo--dark, .theme-dark .brand-logo--dark { display:none; } [data-theme="dark"] .brand-logo--light, .theme-dark .brand-logo--light { display:block; } .brand-word { font-weight:600; font-size:var(--fs-md); line-height:1; letter-spacing:-0.01em; color:var(--heading); } .brand-sep { width:1px; height:18px; background:var(--border-2); } .brand-app { font-weight:500; font-size:var(--fs-md); color:var(--muted); line-height:1; } .topnav { display:flex; align-items:center; gap:2px; flex:1; min-width:0; } .topnav a, .topnav button.navitem { display:inline-flex; align-items:center; gap:var(--sp-2); position:relative; color:var(--muted); font:inherit; font-weight:500; padding:8px 12px; white-space:nowrap; border:0; background:none; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } .topnav a:hover, .topnav button.navitem:hover { color:var(--heading); background:var(--surface-3); text-decoration:none; } .topnav a.active, .topnav button.navitem.active { color:var(--heading); background:var(--surface-3); font-weight:600; } .topnav a.active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--primary); border-radius:1px; } .topnav svg { width:16px; height:16px; flex:none; } .navdot { width:7px; height:7px; border-radius:50%; background:var(--neutral-fill); margin-left:2px; } .navdot.on { background:var(--ok-fill); } .navdot.warn { background:var(--warn-fill); } .navdot.bad { background:var(--bad-fill); } /* Et merke som lenke i menyen (f.eks. «2 behandles») beholder merke-formen. */ .topnav a.badge { padding:2px 8px; gap:5px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; background:var(--neutral-bg); color:var(--neutral); } .topnav a.badge--accent { background:var(--primary-softer); color:var(--primary-ink); } .topnav a.badge:hover { background:var(--primary-soft); color:var(--primary-ink); } .navcount { min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--primary); color:var(--primary-text); font-size:var(--fs-xs); font-weight:700; display:inline-grid; place-items:center; } .topbar .search { flex:1; max-width:440px; } .account { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex:none; } .who { display:flex; align-items:center; gap:var(--sp-2); padding:4px 6px; border-radius:var(--radius-sm); color:inherit; } .who:hover { background:var(--surface-3); text-decoration:none; } .who-text { display:flex; flex-direction:column; line-height:1.15; } .who-name { font-weight:600; font-size:var(--fs-sm); color:var(--heading); } .who-email { font-size:var(--fs-xs); color:var(--muted); } .avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--primary-soft); color:var(--primary-ink); display:inline-grid; place-items:center; font-weight:700; font-size:var(--fs-sm); flex:none; } .avatar-sm { width:28px; height:28px; font-size:var(--fs-xs); } .avatar-lg { width:44px; height:44px; font-size:var(--fs-md); } /* 6b. Sidemeny-skall: alltid mørk Granitt, uavhengig av tema. Grupper med .sidenav-label. */ .shell--top { display:flex; flex-direction:column; min-height:100dvh; flex:1; } .shell--side { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100dvh; flex:1; } .sidebar { background:var(--side-bg); color:var(--side-text); display:flex; flex-direction:column; padding:var(--sp-5) 0 var(--sp-4); position:sticky; top:0; height:100dvh; overflow-y:auto; } .sidebar .brand { padding:0 var(--sp-5) var(--sp-5); color:var(--white); } .sidebar .brand-word { color:var(--white); } .sidebar .brand-app { color:var(--side-muted); } .sidebar .brand-tag { display:block; font-size:var(--fs-xs); color:var(--side-muted); font-weight:500; margin-top:2px; } .sidenav { display:flex; flex-direction:column; gap:1px; } .sidenav a, .sidenav button { display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-5) 9px calc(var(--sp-5) - 3px); color:var(--side-text); font:inherit; font-weight:500; text-align:left; background:none; border:0; cursor:pointer; border-left:3px solid transparent; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } .sidenav a:hover, .sidenav button:hover { background:var(--side-hover); color:var(--white); text-decoration:none; } .sidenav a.active, .sidenav button.active { background:var(--side-active); color:var(--white); border-left-color:var(--side-marker); font-weight:600; } .sidenav svg { width:17px; height:17px; flex:none; opacity:.85; } .sidenav .count { margin-left:auto; font-size:var(--fs-xs); font-weight:600; color:var(--side-muted); } .sidenav .count.warn { color:var(--multe-300); } .sidenav-label { padding:var(--sp-4) var(--sp-5) var(--sp-1); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); } .sidebar .foot { margin-top:auto; padding:var(--sp-4) var(--sp-5) 0; font-size:var(--fs-xs); color:var(--side-muted); line-height:1.5; border-top:var(--stroke) solid var(--side-border); display:flex; flex-direction:column; gap:6px; } .sidebar .foot b { color:var(--side-text); font-weight:600; } .sidebar .side-status { display:flex; align-items:center; gap:6px; } .shell--side .main { display:flex; flex-direction:column; min-width:0; } .shell--side .topbar { gap:var(--sp-4); } @media (max-width:900px) { .shell--side { grid-template-columns:1fr; } .sidebar { position:static; height:auto; padding:var(--sp-3) 0 0; } .sidenav { flex-direction:row; flex-wrap:wrap; padding:0 var(--sp-3); } .sidenav a, .sidenav button { border-left:0; border-bottom:3px solid transparent; padding:8px 10px; } .sidenav a.active { border-bottom-color:var(--side-marker); } .sidenav-label, .sidebar .foot { display:none; } } /* 6c. Bunnavigasjon: 3-5 punkter, vises under 760 px når . */ .bottomnav { display:none; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--surface); border-top:var(--stroke) solid var(--border); padding:6px var(--sp-2) calc(6px + env(safe-area-inset-bottom, 0px)); grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); } .bottomnav a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; color:var(--muted); font-size:var(--fs-xs); font-weight:500; border-radius:var(--radius-sm); } .bottomnav a.active { color:var(--primary-ink); background:var(--primary-softer); } .bottomnav svg { width:20px; height:20px; } @media (max-width:760px) { .has-bottomnav .bottomnav { display:grid; } .has-bottomnav .topnav { display:none; } .has-bottomnav .container { padding-bottom:88px; } } /* 6d. Footer: «Wican · Appnavn» + versjon (.ver) + .ver-pill ok/warn. */ .foot { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); color:var(--muted); border-top:var(--stroke) solid var(--border); } .foot .dot { width:4px; height:4px; border-radius:50%; background:var(--border-2); } .ver code { background:none; padding:0; color:var(--muted); } .ver-pill { display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; border:var(--stroke) solid var(--border); } .ver-pill.ok { color:var(--ok); border-color:var(--ok-border); background:var(--ok-bg); } .ver-pill.warn { color:var(--warn); border-color:var(--warn-border); background:var(--warn-bg); } /* ── 7. Komponenter ─────────────────────────────────────────────────────── */ /* Kort: .card er standardflaten. .card--flush når innholdet er tabell/liste (ingen indre padding). */ .card { background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); } .card--flush { padding:0; overflow:hidden; } .card > .card-head, .card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:var(--stroke) solid var(--border); } .card-head h2, .card-head h3 { margin:0; font-size:var(--fs-md); } .card-body { padding:var(--sp-4); } .card-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:var(--stroke) solid var(--border); background:var(--surface-2); } .card--soft { background:var(--surface-2); } .card--accent { border-top:3px solid var(--decor); } .cards { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } /* Knapper: default (hvit m/ strek), --primary (aksent), --soft, --ghost, --danger (Rogn), --success. Én primær per flate. */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:34px; padding:0 14px; border-radius:var(--radius-sm); border:var(--stroke) solid var(--border-2); background:var(--surface); color:var(--heading); font:inherit; font-weight:600; font-size:var(--fs-base); cursor:pointer; white-space:nowrap; text-decoration:none; user-select:none; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { background:var(--surface-2); border-color:var(--muted); text-decoration:none; } .btn:active { background:var(--surface-3); } .btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; } .btn svg { width:16px; height:16px; flex:none; } .btn--primary, .btn.primary { background:var(--primary); border-color:var(--primary); color:var(--primary-text); } .btn--primary:hover, .btn.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); } .btn--primary:active { background:var(--primary-active); } .btn--ghost, .btn.ghost { background:transparent; border-color:transparent; color:var(--muted); } .btn--ghost:hover, .btn.ghost:hover { background:var(--surface-3); color:var(--heading); border-color:transparent; } .btn--soft { background:var(--primary-softer); border-color:transparent; color:var(--primary-ink); } .btn--soft:hover { background:var(--primary-soft); border-color:transparent; } .btn--danger, .btn.danger { background:var(--bad-strong); border-color:var(--bad-strong); color:var(--white); } /* Rogn 600 i begge univers: 6,4:1 med hvit */ .btn--danger:hover, .btn.danger:hover { background:var(--bad-strong-hover); border-color:var(--bad-strong-hover); } .btn--danger-ghost { background:transparent; border-color:var(--bad-border); color:var(--bad); } .btn--danger-ghost:hover { background:var(--bad-bg); } .btn--success, .btn.success { background:var(--skog-700); border-color:var(--skog-700); color:var(--white); } .btn--success:hover { background:var(--skog-800); border-color:var(--skog-800); } .btn--sm, .btn.sm { height:28px; padding:0 10px; font-size:var(--fs-sm); } .btn--lg { height:44px; padding:0 20px; font-size:var(--fs-md); border-radius:var(--radius); } .btn--block, .btn.block { width:100%; } .btn--icon { width:34px; padding:0; } .btn--icon.btn--sm { width:28px; } .btn kbd { margin-left:4px; } .btn--ms svg { width:18px; height:18px; } .btn-group { display:inline-flex; } .btn-group .btn { border-radius:0; margin-left:-1px; } .btn-group .btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); margin-left:0; } .btn-group .btn:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; } /* Merker: .badge er pille med prikk (status), .badge--plain uten prikk (kategori). .chip er valgbart filter. */ .badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; line-height:1.5; white-space:nowrap; border:var(--stroke) solid var(--neutral-border); background:var(--neutral-bg); color:var(--neutral); } .badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; } .badge--ok, .badge.ok { background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok); } .badge--warn, .badge.warn { background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn); } .badge--bad, .badge.bad { background:var(--bad-bg); border-color:var(--bad-border); color:var(--bad); } .badge--info, .badge.info { background:var(--info-bg); border-color:var(--info-border); color:var(--info); } .badge--accent { background:var(--primary-softer); border-color:var(--primary-soft); color:var(--primary-ink); } .badge--muted { color:var(--muted); } .badge--plain::before, .badge.plain::before { display:none; } .badge--ai { background:var(--primary-softer); border-color:transparent; color:var(--primary-ink); } .badge--ai::before { display:none; } /* Status som tekst med prikk (lettere enn pille i tabeller) */ .status { display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; } .status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--neutral-fill); flex:none; } .status--ok::before { background:var(--ok-fill); } .status--warn::before { background:var(--warn-fill); } .status--bad::before { background:var(--bad-fill); } .status--info::before { background:var(--info-fill); } .status--planned::before { background:var(--planned); } .status--locked::before { background:var(--locked); } .status--pulse::before { animation:pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(.8);} } .chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:var(--radius-pill); border:var(--stroke) solid var(--border-2); background:var(--surface); color:var(--muted); font:inherit; font-size:var(--fs-sm); font-weight:500; cursor:pointer; white-space:nowrap; } .chip:hover { border-color:var(--muted); color:var(--heading); } .chip.on, .chip[aria-pressed="true"] { background:var(--heading); border-color:var(--heading); color:var(--inverse); } .chip .x { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--white-15); } .chip .count { font-size:var(--fs-xs); opacity:.8; } .chips { display:flex; gap:var(--sp-2); flex-wrap:wrap; } /* Faner (.tabs) bytter innhold på siden; segmentkontroll (.seg) bytter visning av samme innhold. */ .tabs { display:flex; gap:2px; border-bottom:var(--stroke) solid var(--border); } .tabs a, .tabs button { position:relative; padding:9px 13px; font:inherit; font-weight:500; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; } .tabs a:hover, .tabs button:hover { color:var(--heading); text-decoration:none; } .tabs .active { color:var(--heading); border-bottom-color:var(--primary); font-weight:600; } .tabs .cnt { font-size:var(--fs-xs); font-weight:600; padding:0 6px; border-radius:var(--radius-pill); background:var(--surface-3); color:var(--muted); } .tabpanel { background:var(--surface); border:var(--stroke) solid var(--border); border-top:0; border-radius:0 0 var(--radius) var(--radius); } .seg { display:inline-flex; padding:3px; background:var(--surface-3); border-radius:var(--radius-sm); gap:2px; } .seg button, .seg a { padding:4px 12px; font:inherit; font-size:var(--fs-sm); font-weight:500; color:var(--muted); background:none; border:0; border-radius:var(--radius-xs); cursor:pointer; } .seg .active { background:var(--surface); color:var(--heading); font-weight:600; box-shadow:var(--shadow-sm); } /* Skjema: label over felt, .field med .help/.error, .fields-grid, .input-group, .search, .check, .switch, .opt-card. */ label, .label { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--heading); margin-bottom:5px; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .input { width:100%; height:34px; padding:0 10px; font:inherit; color:var(--text); background:var(--surface); border:var(--stroke) solid var(--control-border); border-radius:var(--radius-sm); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } textarea { height:auto; min-height:88px; padding:8px 10px; resize:vertical; line-height:1.45; } input:hover, select:hover, textarea:hover { border-color:var(--muted); } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); } input[aria-invalid="true"], .is-invalid { border-color:var(--bad-fill) !important; } select { appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E3D48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; } .theme-dark select, [data-theme="dark"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Flervalg: er LISTER, ikke felt. Uten dette arvet de høyde 34 px fra feltregelen og så ut som et vanlig tekstfelt med én synlig rad. Høyden er fri, så size bestemmer; uten size viser den ca. fem rader. */ select[multiple], select[size]:not([size="1"]) { height:auto; min-height:0; padding:var(--sp-1); line-height:1.5; background-image:none; overflow-y:auto; } /* Uten size: fem hele rader. Regnet ut fra radhøyden (linjehøyde + polstring) pluss listens egen polstring, så den treffer et helt antall rader. */ select[multiple]:not([size]) { min-height:calc(5 * (1.5em + 10px) + var(--sp-2)); } select[multiple] option, select[size]:not([size="1"]) option { padding:5px 8px; border-radius:var(--radius-xs); color:var(--text); } /* option:checked trenger både farge og gradient: Chrome overstyrer background-color på valgte rader, men respekterer background-image. */ select[multiple] option:checked, select[size]:not([size="1"]) option:checked { background:var(--primary-soft) linear-gradient(0deg, var(--primary-soft), var(--primary-soft)); color:var(--primary-ink); font-weight:600; } .field { display:flex; flex-direction:column; } .field .help { font-size:var(--fs-xs); color:var(--muted); margin-top:4px; } .field .error { font-size:var(--fs-xs); color:var(--bad); margin-top:4px; font-weight:500; } .fields { display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,minmax(0,1fr)); } .fields--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .fields .span-2 { grid-column:span 2; } @media (max-width:640px) { .fields, .fields--3 { grid-template-columns:1fr; } .fields .span-2 { grid-column:auto; } } .input-group { display:flex; } .input-group > * { border-radius:0; } .input-group > :first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); } .input-group > :last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; } .input-group .btn { margin-left:-1px; } .input-addon { display:inline-flex; align-items:center; padding:0 10px; background:var(--surface-3); border:var(--stroke) solid var(--control-border); color:var(--muted); font-size:var(--fs-sm); white-space:nowrap; } .search { display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; background:var(--surface-2); border:var(--stroke) solid var(--border); border-radius:var(--radius-sm); color:var(--muted); } .search input { border:0 !important; background:none !important; height:auto !important; padding:0 !important; box-shadow:none !important; flex:1; color:var(--text); } .search svg { width:16px; height:16px; flex:none; } .check { display:flex; align-items:center; gap:8px; font-size:var(--fs-base); font-weight:400; color:var(--text); cursor:pointer; margin:0; } .check input { width:16px; height:16px; margin:0; accent-color:var(--primary); } .switch { position:relative; display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer; user-select:none; margin:0; font-weight:400; color:var(--text); } .switch input { position:absolute; left:0; top:50%; transform:translateY(-50%); width:36px; height:20px; opacity:0; margin:0; cursor:pointer; } .switch .track { position:relative; width:36px; height:20px; flex:none; background:var(--control-border); border-radius:var(--radius-pill); transition:background var(--dur) var(--ease); } .switch .track::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--white); transition:transform var(--dur) var(--ease); box-shadow:0 1px 2px rgba(0,0,0,.2); } .switch input:checked + .track { background:var(--skog-600); } .switch input:checked + .track::after { transform:translateX(16px); } .switch input:focus-visible + .track { outline:2px solid var(--primary); outline-offset:2px; } .switch-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:var(--stroke) solid var(--divider); } .switch-row:last-child { border-bottom:0; } .switch-row .t { font-weight:600; color:var(--heading); } .switch-row .d { font-size:var(--fs-sm); color:var(--muted); } .opt-cards { display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } .opt-card { position:relative; display:block; padding:var(--sp-3) var(--sp-4); border:var(--stroke) solid var(--border-2); border-radius:var(--radius); background:var(--surface); cursor:pointer; font-weight:400; } .opt-card input { position:absolute; opacity:0; } .opt-card .t { font-weight:600; color:var(--heading); display:block; } .opt-card .d { font-size:var(--fs-sm); color:var(--muted); } .opt-card:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); background:var(--primary-softer); } .kv { display:grid; grid-template-columns:max-content 1fr; gap:6px var(--sp-5); font-size:var(--fs-base); margin:0; } .kv dt { color:var(--muted); } .kv dd { margin:0; color:var(--heading); font-weight:500; } .kv--right dd { text-align:right; font-variant-numeric:tabular-nums; } .dropzone { border:1.5px dashed var(--border-2); border-radius:var(--radius); padding:var(--sp-8) var(--sp-5); text-align:center; color:var(--muted); background:var(--surface-2); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .dropzone.dragover, .dropzone:hover { border-color:var(--primary); background:var(--primary-softer); } .dropzone .t { font-weight:600; color:var(--heading); } .dropzone svg { width:28px; height:28px; color:var(--decor); margin-bottom:var(--sp-2); } /* Tabeller: alltid i .table-wrap. th.sortable + .sort-asc/.sort-desc, td.num for tall, tr.clickable, .pager under. */ .table-tools { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); } .table-tools .search { max-width:320px; flex:1; min-width:180px; } /* En tabell som er direkte barn av en flex- eller grid-beholder får min-width:auto og kan derfor ikke krympe under sin min-bredde. Da presser den beholderen ut i stedet, slik fakturaforhåndsvisningen i Wikai gjorde. Tette datatabeller hører uansett hjemme i .table-wrap, som ruller. */ .card > table, .card-body > table, .paper > table, .tabpanel > table { min-width:0; } .table-wrap { overflow-x:auto; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); } table { width:100%; border-collapse:collapse; font-size:var(--fs-base); } th { text-align:left; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:var(--stroke) solid var(--border); background:var(--surface-2); white-space:nowrap; } td { padding:10px 14px; border-bottom:var(--stroke) solid var(--divider); vertical-align:middle; } tbody tr:last-child td { border-bottom:0; } tbody tr:hover td { background:var(--surface-2); } tbody tr.clickable { cursor:pointer; } tbody tr.selected td { background:var(--primary-softer); } tfoot td { font-weight:600; background:var(--surface-2); border-top:var(--stroke) solid var(--border); color:var(--heading); } th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } td .sub { display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:1px; } th.sortable { cursor:pointer; user-select:none; } th.sortable::after { content:""; display:inline-block; width:0; height:0; margin-left:6px; border:4px solid transparent; border-top-color:var(--border-2); vertical-align:-3px; } th.sort-asc::after { border-top-color:transparent; border-bottom-color:var(--heading); vertical-align:2px; } th.sort-desc::after { border-top-color:var(--heading); } .table--compact td, .table--compact th { padding:6px 10px; } .table--sticky thead th { position:sticky; top:0; z-index:1; } tr.group-row td { background:var(--surface-3); font-weight:600; color:var(--heading); font-size:var(--fs-sm); } .pager { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); color:var(--muted); border-top:var(--stroke) solid var(--border); flex-wrap:wrap; } .pager .pages { display:flex; gap:2px; } .pager .pages button { min-width:28px; height:28px; padding:0 6px; border:0; background:none; border-radius:var(--radius-xs); font:inherit; font-size:var(--fs-sm); color:var(--muted); cursor:pointer; } .pager .pages button.active { background:var(--heading); color:var(--inverse); font-weight:600; } .pager .pages button:hover:not(.active) { background:var(--surface-3); } .bulkbar { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-4); background:var(--heading); color:var(--inverse); border-radius:var(--radius-sm); font-weight:500; } .bulkbar .btn { background:var(--white-10); border-color:transparent; color:var(--inverse); } .bulkbar .btn:hover { background:var(--white-15); } /* KPI: .kpi med .v (Manrope Light) og .l. Farget verdi kun ved semantikk (kpi--ok/warn/bad). */ .kpis { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .kpi { position:relative; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:2px; min-width:0; } .kpi .v { font-weight:300; font-size:var(--fs-3xl); line-height:1.05; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--heading); } .kpi .v small { font-size:var(--fs-md); font-weight:400; color:var(--muted); margin-left:4px; letter-spacing:0; } .kpi .l { font-size:var(--fs-sm); color:var(--muted); } .kpi .delta { font-size:var(--fs-xs); font-weight:600; display:inline-flex; align-items:center; gap:3px; } .kpi .delta.up { color:var(--ok); } .kpi .delta.down { color:var(--bad); } .kpi .delta.flat { color:var(--muted); } .kpi--ok .v { color:var(--ok); } .kpi--warn .v { color:var(--warn); } .kpi--bad .v { color:var(--bad); } .kpi.click { cursor:pointer; } .kpi.click:hover { border-color:var(--border-2); } .kpi.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); } .kpi .spark { margin-top:var(--sp-2); } .stat-strip { display:flex; gap:0; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); overflow-x:auto; } .stat-strip .kpi { border:0; border-radius:0; border-right:var(--stroke) solid var(--border); flex:1; min-width:160px; } .stat-strip .kpi:last-child { border-right:0; } /* Hero: ett svar på «må jeg gjøre noe nå» øverst på driftspaneler. */ .hero { display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-5) var(--sp-6); border-radius:var(--radius); border:var(--stroke) solid var(--border); background:var(--surface); } .hero .ring { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:none; border:3px solid var(--neutral-fill); color:var(--neutral); } .hero .ring svg { width:24px; height:24px; } .hero .htitle { font-size:var(--fs-lg); font-weight:600; color:var(--heading); } .hero .hsub { color:var(--muted); } .hero.ok { border-color:var(--ok-border); } .hero.ok .ring { border-color:var(--ok-fill); color:var(--ok); } .hero.warn { border-color:var(--warn-border); } .hero.warn .ring { border-color:var(--warn-fill); color:var(--warn); } .hero.bad { border-color:var(--bad-border); } .hero.bad .ring { border-color:var(--bad-fill); color:var(--bad); } /* Varsler: .alert i flaten, .banner på tvers av siden, .toast flyktig nederst til høyre (skjult til .show). */ .alert { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius); border:var(--stroke) solid var(--border); border-left:3px solid var(--decor); background:var(--surface); color:var(--text); } .alert svg { width:18px; height:18px; flex:none; margin-top:1px; color:var(--decor); } .alert b, .alert .t { color:var(--heading); font-weight:600; } .alert--ok, .alert.ok { border-left-color:var(--ok-fill); } .alert--ok svg { color:var(--ok-fill); } .alert--warn, .alert.warn { border-left-color:var(--warn-fill); } .alert--warn svg { color:var(--warn-fill); } .alert--err, .alert--bad, .alert.error { border-left-color:var(--bad-fill); } .alert--err svg, .alert--bad svg { color:var(--bad-fill); } .alert--info { border-left-color:var(--info-fill); } .alert--info svg { color:var(--info-fill); } .banner { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); line-height:1.45; font-weight:500; font-size:var(--fs-sm); background:var(--warn-bg); color:var(--warn); border-bottom:var(--stroke) solid var(--warn-border); } /* Banneret er en stripe på tvers av siden. Det trenger luft: flere bannere skal ikke klistre seg sammen, og et banner inne i innholdet skal ikke ligge tett på nabo- blokkene. Som stripe rett under toppbaren (utenfor .container) står det fortsatt kant i kant, slik en global tilstandsstripe skal. .stack styrer selv med gap. */ .banner + .banner { margin-top:var(--sp-2); } .container > .banner, .card-body > .banner { margin-block:var(--sp-5); } .container > .banner:first-child, .card-body > .banner:first-child { margin-top:0; } .container > .banner:last-child, .card-body > .banner:last-child { margin-bottom:0; } .container > .banner + .banner, .card-body > .banner + .banner { margin-top:var(--sp-2); } .banner--bad { background:var(--bad-bg); color:var(--bad); border-color:var(--bad-border); } .banner--info { background:var(--info-bg); color:var(--info); border-color:var(--info-border); } .toast { position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:60; display:flex; align-items:center; gap:var(--sp-3); padding:12px 16px; border-radius:var(--radius); background:var(--granitt-500); color:var(--white); box-shadow:var(--shadow-overlay); font-weight:500; max-width:380px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .toast.show, .toast--inline { opacity:1; transform:none; pointer-events:auto; } .toast.ok { border-left:3px solid var(--skog-400); } .toast.err { border-left:3px solid var(--rogn-300); } .toast.info { border-left:3px solid var(--himmel-300); } .toast svg { width:18px; height:18px; flex:none; } .toast.ok svg { color:var(--skog-400); } .toast.err svg { color:var(--rogn-300); } .toast.info svg { color:var(--himmel-300); } .toast .undo { margin-left:auto; color:var(--krokus-300); font-weight:600; background:none; border:0; font:inherit; cursor:pointer; } .toast--inline { position:static; } /* Overlays: eneste komponenter med skygge. .modal via .modal-overlay, .popover med .menu, .tooltip. */ /* [hidden] skal alltid vinne over komponentenes display (Wican.modal.close bruker det, og portaler skjuler .btn/.alert/flex-paneler med hidden). Global, så ingen komponent med display:flex/grid/inline-flex kan slå UA-regelen. */ [hidden] { display:none !important; } .modal-overlay { position:fixed; inset:0; z-index:50; background:var(--overlay); display:grid; place-items:center; padding:var(--sp-5); } .modal { width:min(520px,100%); max-height:90dvh; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); border:var(--stroke) solid var(--border); overflow:hidden; } .modal--wide { width:min(920px,100%); } .modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:var(--stroke) solid var(--border); } .modal-head h3 { margin:0; font-size:var(--fs-lg); } .modal-body { padding:var(--sp-5); overflow:auto; } .modal-foot { display:flex; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5); border-top:var(--stroke) solid var(--border); background:var(--surface-2); } .modal--inline { position:static; } .popover { position:absolute; z-index:40; min-width:200px; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-overlay); padding:var(--sp-1); } .popover--inline { position:static; display:inline-block; } .menu { display:flex; flex-direction:column; } .menu a, .menu button { display:flex; align-items:center; gap:var(--sp-2); padding:8px 10px; font:inherit; color:var(--text); background:none; border:0; border-radius:var(--radius-xs); text-align:left; cursor:pointer; width:100%; } .menu a:hover, .menu button:hover { background:var(--surface-3); text-decoration:none; color:var(--heading); } .menu .danger { color:var(--bad); } .menu .sep { height:1px; background:var(--border); margin:4px 0; } .menu svg { width:16px; height:16px; color:var(--muted); } .menu kbd { margin-left:auto; } .tooltip { display:inline-block; padding:4px 8px; border-radius:var(--radius-xs); background:var(--granitt-500); color:var(--white); font-size:var(--fs-xs); font-weight:500; } /* Tilstander: .empty med ikon + tittel + handling, .spinner, .skel for lasting av kjent layout. */ .empty { text-align:center; padding:var(--sp-10) var(--sp-5); color:var(--muted); } .empty svg { width:36px; height:36px; color:var(--decor); margin-bottom:var(--sp-3); } .empty .t { font-weight:600; color:var(--heading); font-size:var(--fs-md); } .empty .d { max-width:360px; margin:4px auto var(--sp-4); } .spinner { width:18px; height:18px; border:2px solid var(--border-2); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; } @keyframes spin { to { transform:rotate(360deg); } } .skel { background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-4) 50%, var(--surface-3) 75%); background-size:200% 100%; animation:skel 1.4s ease infinite; border-radius:var(--radius-xs); min-height:12px; } .skel--text { height:12px; } .skel--title { height:20px; width:40%; } .skel--kpi { height:72px; } @keyframes skel { from { background-position:200% 0; } to { background-position:-200% 0; } } /* Fremdrift: .bar/.bar-fill, --indeterminate for ukjent varighet, --stacked for fordeling. */ .bar { height:6px; background:var(--surface-4); border-radius:var(--radius-pill); overflow:hidden; } .bar-fill { height:100%; background:var(--primary); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease); } .bar-fill.ok { background:var(--ok-fill); } .bar-fill.warn { background:var(--warn-fill); } .bar-fill.bad { background:var(--bad-fill); } .bar--indeterminate .bar-fill { width:40%; animation:indet 1.2s ease-in-out infinite; } @keyframes indet { 0% { transform:translateX(-100%); } 100% { transform:translateX(260%); } } .bar--thick { height:10px; } .bar--stacked { display:flex; } .bar--stacked span { height:100%; } /* Statusløp: .rail viser hvor en sak står (planlagt=Krokus 400, pågår=Multe, klar=Skog, låst=Granitt). .steps er nummererte instruksjoner. */ .rail { display:flex; align-items:flex-start; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-4) var(--sp-3); overflow-x:auto; } .rail .step { flex:1; min-width:100px; position:relative; text-align:center; } .rail .step::before, .rail .step::after { content:""; position:absolute; top:6px; height:3px; width:50%; background:var(--surface-4); } .rail .step::before { left:0; } .rail .step::after { right:0; } .rail .step:first-child::before, .rail .step:last-child::after { display:none; } .rail .dot { width:15px; height:15px; border-radius:50%; background:var(--surface); border:3px solid var(--surface-4); margin:0 auto 7px; position:relative; z-index:1; } .rail .lbl { font-size:var(--fs-sm); font-weight:500; color:var(--muted); } .rail .when { font-size:var(--fs-xs); color:var(--dim); } .rail .step.done .dot { background:var(--primary); border-color:var(--primary); } .rail .step.done::before, .rail .step.done::after { background:var(--primary); } .rail .step.now .dot { border-color:var(--warn-fill); box-shadow:0 0 0 3px var(--warn-bg); } .rail .step.now::before { background:var(--primary); } .rail .step.now .lbl { color:var(--heading); font-weight:600; } .rail .step.now.ok .dot { border-color:var(--ok-fill); box-shadow:0 0 0 3px var(--ok-bg); } .rail .step.locked .dot { background:var(--locked); border-color:var(--locked); } .steps { display:flex; flex-direction:column; gap:var(--sp-3); counter-reset:step; } .steps .s { display:flex; gap:var(--sp-3); counter-increment:step; } .steps .s::before { content:counter(step); width:26px; height:26px; border-radius:50%; background:var(--heading); color:var(--inverse); font-weight:600; font-size:var(--fs-sm); display:grid; place-items:center; flex:none; } .steps .s .t { font-weight:600; color:var(--heading); } .steps .s.done::before { content:""; background:var(--ok-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; } /* Tidslinje og liste: .timeline for hendelser med tidsstempel, .list for kompakte rader med .r til høyre. */ .timeline { position:relative; padding-left:22px; display:flex; flex-direction:column; gap:var(--sp-4); } .timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--border); } .timeline .ev { position:relative; } .timeline .ev::before { content:""; position:absolute; left:-20px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--neutral-fill); } .timeline .ev.ok::before { border-color:var(--ok-fill); background:var(--ok-fill); } .timeline .ev.bad::before { border-color:var(--bad-fill); background:var(--bad-fill); } .timeline .ev.warn::before { border-color:var(--warn-fill); background:var(--warn-fill); } .timeline .ev.accent::before { border-color:var(--primary); background:var(--primary); } .timeline .when { font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; } .timeline .t { font-weight:600; color:var(--heading); } .timeline .d { font-size:var(--fs-sm); color:var(--muted); } .list { display:flex; flex-direction:column; } .list .li { display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--sp-4); border-bottom:var(--stroke) solid var(--divider); } .list .li:last-child { border-bottom:0; } .list .li .t { font-weight:500; color:var(--heading); } .list .li .d { font-size:var(--fs-sm); color:var(--muted); } .list .li .r { margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Sammenleggbar:
med , innhold i .inner. */ details.fold, .card details, .list details { border:var(--stroke) solid var(--border); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; } details.fold + details.fold { margin-top:var(--sp-2); } details.fold summary, .card details summary { padding:10px var(--sp-4); cursor:pointer; font-weight:500; color:var(--heading); list-style:none; display:flex; align-items:center; gap:var(--sp-2); } details.fold summary::-webkit-details-marker { display:none; } details.fold summary::before { content:""; width:6px; height:6px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(-45deg); transition:transform var(--dur) var(--ease); flex:none; margin-left:2px; } details.fold[open] summary::before { transform:rotate(45deg); } details.fold[open] summary { border-bottom:var(--stroke) solid var(--border); } details .inner { padding:var(--sp-3) var(--sp-4); } /* Kommandopalett: Ctrl/Cmd+K. Bygges av Wican.palette(). */ .palette { width:min(640px,100%); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); border:var(--stroke) solid var(--border); overflow:hidden; } .palette .search { border:0; border-bottom:var(--stroke) solid var(--border); border-radius:0; height:52px; padding:0 var(--sp-5); font-size:var(--fs-md); background:var(--surface); } .palette .group { padding:var(--sp-2) var(--sp-3) var(--sp-1); font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .palette .item { display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-4); cursor:pointer; } .palette .item:hover, .palette .item.active { background:var(--primary-softer); } .palette .item svg { width:16px; height:16px; color:var(--muted); } .palette .item .path { margin-left:auto; font-size:var(--fs-xs); color:var(--dim); } .palette .foot { justify-content:flex-start; font-size:var(--fs-xs); gap:var(--sp-4); } /* Diagrammer: klasser for inline SVG. Seriefargene --chart-1..8 deles med temaene for Chart.js og ECharts. */ .chart { width:100%; height:auto; display:block; overflow:visible; } .chart .grid line { stroke:var(--chart-grid); stroke-width:1; } .chart .axis text { fill:var(--chart-axis); font-size:11px; font-family:var(--font); } .chart .s1 { fill:var(--chart-1); stroke:var(--chart-1); } .chart .s2 { fill:var(--chart-2); stroke:var(--chart-2); } .chart .s3 { fill:var(--chart-3); stroke:var(--chart-3); } .chart .s4 { fill:var(--chart-4); stroke:var(--chart-4); } .chart .s5 { fill:var(--chart-5); stroke:var(--chart-5); } .chart .s6 { fill:var(--chart-6); stroke:var(--chart-6); } .chart .line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .chart .area { opacity:.14; stroke:none; } .chart .bar-item { rx:2; } .spark { display:block; width:100%; height:32px; } .spark path { fill:none; stroke:var(--chart-1); stroke-width:1.75; stroke-linecap:round; } .spark .fill { fill:var(--chart-1); opacity:.12; stroke:none; } .spark .end { fill:var(--chart-1); } .legend { display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted); } .legend span { display:inline-flex; align-items:center; gap:6px; } .legend i { width:10px; height:10px; border-radius:2px; display:inline-block; } .barlist { display:flex; flex-direction:column; gap:var(--sp-2); } .barlist .r { display:grid; grid-template-columns:minmax(80px,1fr) 3fr auto; gap:var(--sp-3); align-items:center; font-size:var(--fs-sm); } .barlist .r .bar { height:8px; } .barlist .r .v { font-variant-numeric:tabular-nums; color:var(--heading); font-weight:600; } .donut { width:120px; height:120px; } .donut circle { fill:none; stroke-width:14; } .donut .track { stroke:var(--surface-4); } .legend .s1 { background:var(--chart-1); } .legend .s2 { background:var(--chart-2); } .legend .s3 { background:var(--chart-3); } .legend .s4 { background:var(--chart-4); } .legend .s5 { background:var(--chart-5); } .legend .s6 { background:var(--chart-6); } .legend .s7 { background:var(--chart-7); } .legend .s8 { background:var(--chart-8); } .spark--ok path, .spark--ok .end { stroke:var(--ok-fill); fill:var(--ok-fill); } .spark--ok path { fill:none; } .spark--ok .fill { fill:var(--ok-fill); } .spark--warn path, .spark--warn .end { stroke:var(--warn-fill); fill:var(--warn-fill); } .spark--warn path { fill:none; } .spark--warn .fill { fill:var(--warn-fill); } .spark--bad path, .spark--bad .end { stroke:var(--bad-fill); fill:var(--bad-fill); } .spark--bad path { fill:none; } .spark--bad .fill { fill:var(--bad-fill); } .donut .s1 { stroke:var(--chart-1); } .donut .s2 { stroke:var(--chart-2); } .donut .s3 { stroke:var(--chart-3); } .donut .s4 { stroke:var(--chart-4); } .donut .s5 { stroke:var(--chart-5); } .donut .s6 { stroke:var(--chart-6); } /* Innlogging: .login-wrap + .card.login-card (kompakt) eller .login-split med merkevarebilde i mørkt univers. */ .login-wrap { min-height:calc(100dvh - var(--nav-h)); display:grid; place-items:center; padding:var(--sp-6) var(--sp-4); } .login-card { width:min(400px,100%); padding:var(--sp-8) var(--sp-8) var(--sp-6); } .login-head { text-align:center; margin-bottom:var(--sp-6); } .login-head .brand-logo { height:22px; margin:0 auto var(--sp-4); } .login-head h1 { font-size:var(--fs-xl); font-weight:600; } .login-tagline { color:var(--muted); margin-top:4px; } .login-divider { display:flex; align-items:center; gap:var(--sp-3); color:var(--dim); font-size:var(--fs-xs); margin:var(--sp-5) 0; } .login-divider::before, .login-divider::after { content:""; flex:1; height:1px; background:var(--border); } .login-foot { text-align:center; font-size:var(--fs-xs); color:var(--dim); margin-top:var(--sp-5); } .login-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100dvh; } .login-split .visual { position:relative; overflow:hidden; background:var(--granitt-900); color:var(--white); padding:var(--sp-10); display:flex; flex-direction:column; justify-content:flex-end; } .login-split .visual .shape { position:absolute; right:-18%; top:-22%; width:70%; aspect-ratio:1; border-radius:50%; background-size:cover; background-position:center; } .login-split .visual .statement { font-size:var(--fs-3xl); font-weight:600; line-height:1.15; letter-spacing:-0.02em; position:relative; max-width:14em; } .login-split .visual .kicker { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--krokus-300); margin-bottom:var(--sp-4); position:relative; } .login-split .visual .kicker::before { content:""; width:6px; height:14px; background:var(--krokus-400); transform:skewX(-18deg); } .login-split .visual > img { height:22px; width:auto; align-self:flex-start; margin-top:var(--sp-8); position:relative; } @media (max-width:820px) { .login-split { grid-template-columns:1fr; } .login-split .visual { display:none; } } /* Diverse: KI-merke, FAB, diff, snarveiliste, kodeblokk med kopier, chat-bobler med kilder. */ .ai-badge { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:600; color:var(--primary-ink); } .ai-badge svg { width:13px; height:13px; } .fab { position:fixed; right:var(--sp-5); bottom:var(--sp-5); width:44px; height:44px; border-radius:50%; background:var(--heading); color:var(--inverse); display:grid; place-items:center; border:0; cursor:pointer; box-shadow:var(--shadow-overlay); z-index:35; } .fab svg { width:20px; height:20px; } .diff del { background:var(--bad-bg); color:var(--bad); text-decoration:line-through; } .diff ins { background:var(--ok-bg); color:var(--ok); text-decoration:none; } .shortcut-list { display:grid; grid-template-columns:auto 1fr; gap:8px var(--sp-4); align-items:center; font-size:var(--fs-sm); } .code-block { position:relative; } .code-block .copy { position:absolute; top:8px; right:8px; } .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:var(--radius-sm); background:none; border:var(--stroke) solid var(--border-2); color:var(--muted); cursor:pointer; } .theme-toggle:hover { background:var(--surface-3); color:var(--heading); } .theme-toggle .ikon-mork { display:none; } .theme-dark .theme-toggle .ikon-mork, [data-theme="dark"] .theme-toggle .ikon-mork { display:block; } .theme-dark .theme-toggle .ikon-lys, [data-theme="dark"] .theme-toggle .ikon-lys { display:none; } .bubble { max-width:72%; padding:10px 14px; border-radius:var(--radius-lg); background:var(--surface-3); color:var(--text); line-height:1.45; } .bubble.user { margin-left:auto; background:var(--primary); color:var(--primary-text); border-bottom-right-radius:var(--radius-xs); } .bubble.assistant { border-bottom-left-radius:var(--radius-xs); } .bubble .meta { display:block; font-size:var(--fs-xs); opacity:.7; margin-top:4px; } .chat { display:flex; flex-direction:column; gap:var(--sp-3); } .sources { display:flex; gap:var(--sp-2); flex-wrap:wrap; font-size:var(--fs-xs); } .sources a { padding:2px 8px; border:var(--stroke) solid var(--border); border-radius:var(--radius-pill); color:var(--muted); background:var(--surface); } /* ── 8. Ikoner ────────────────────────────────────────────────────────────── Kuratert Lucide-utvalg (icons/sprite.svg og icons.js). 1,6 px strek i currentColor. Bruk: . Emoji brukes aldri som ikon. */ .ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-3px; } .ic--sm { width:14px; height:14px; } .ic--md { width:18px; height:18px; } .ic--lg { width:22px; height:22px; } .ic--xl { width:28px; height:28px; } .ic--ok { color:var(--ok-fill); } .ic--warn { color:var(--warn-fill); } .ic--bad { color:var(--bad-fill); } .ic--accent { color:var(--decor); } /* ── 9. Hjelpere og utvidelser ────────────────────────────────────────────── Små, generelle klasser som skjermene i forslaget trengte på tvers av portaler. Alt bygger på tokens; ingen av dem er domenespesifikke. */ .statusbar { display:flex; align-items:center; gap:var(--sp-4); height:36px; padding:0 var(--sp-4); background:var(--surface); border-top:var(--stroke) solid var(--border); font-size:var(--fs-sm); color:var(--muted); } .statusbar .status { font-weight:500; } .paper { background:var(--paper); color:var(--paper-text); border:var(--stroke) solid var(--paper-border); border-radius:var(--radius); } .paper .muted { color:var(--paper-muted); } .input--sm, select.input--sm:not([multiple]):not([size]), input.input--sm { height:28px !important; padding:0 8px !important; font-size:var(--fs-sm) !important; } select.input--sm[multiple], select.input--sm[size] { font-size:var(--fs-sm) !important; } select.input--sm { padding-right:26px !important; background-position:right 6px center; } /* plass til pilen */ .input--qty { text-align:center; width:64px !important; } .input--auto { width:auto !important; } .num--pos { color:var(--ok); font-weight:600; } .num--neg { color:var(--bad); font-weight:600; } .price-was { text-decoration:line-through; color:var(--muted); font-weight:400; margin-right:6px; font-variant-numeric:tabular-nums; } .sum { font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; } .counter { font-size:var(--fs-xs); font-variant-numeric:tabular-nums; color:var(--muted); font-weight:500; } .counter.warn { color:var(--warn); } .counter.bad { color:var(--bad); } .heat { display:grid; grid-template-columns:repeat(15,var(--heat-size,10px)); gap:2px; } .heat i { width:var(--heat-size,10px); height:var(--heat-size,10px); border-radius:2px; background:var(--surface-4); display:block; } .heat i.ok { background:var(--ok-fill); } .heat i.warn { background:var(--warn-fill); } .heat i.bad { background:var(--bad-fill); } .heat--lg { --heat-size:14px; } .table-tools .right { margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; } .status--paused::before { background:var(--neutral-fill); } .btn--xl { height:56px; padding:0 24px; font-size:var(--fs-md); border-radius:var(--radius); } .opt-btn { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:var(--sp-3) var(--sp-4); min-height:72px; text-align:left; background:var(--surface); border:var(--stroke) solid var(--border-2); border-radius:var(--radius); color:var(--text); font:inherit; cursor:pointer; } .opt-btn:hover { border-color:var(--muted); background:var(--surface-2); } .opt-btn.active, .opt-btn[aria-pressed="true"] { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); background:var(--primary-softer); } .opt-btn .t { font-weight:600; color:var(--heading); } .opt-btn .d { font-size:var(--fs-sm); color:var(--muted); } .opt-btn .ic { color:var(--decor); } .badge--sm { padding:0 6px; font-size:10px; } .badge--sm::before { width:5px; height:5px; } .card--flush .table-wrap { border:0; border-radius:0; } .card--flush > .table-wrap:last-child, .tabpanel > :last-child { border-radius:0 0 var(--radius) var(--radius); } .kv .ok { color:var(--ok); } .kv .bad { color:var(--bad); } .kv .warn { color:var(--warn); } .check .badge { margin-left:auto; } .list .li .stripe { width:3px; align-self:stretch; border-radius:2px; background:var(--decor); flex:none; } .list .li .stripe.s1 { background:var(--chart-1); } .list .li .stripe.s2 { background:var(--chart-2); } .list .li .stripe.s3 { background:var(--chart-3); } .list .li .stripe.s4 { background:var(--chart-4); } .bottomnav--always { display:grid; position:absolute; } .modal--inline { position:static; width:100%; max-height:none; } .topbar--compact { height:var(--nav-h-compact); padding:0 var(--sp-4); } /* Avstandshjelpere (kun vertikale, 4-skalaen) */ .mt-2 { margin-top:var(--sp-2) !important; } .mt-3 { margin-top:var(--sp-3) !important; } .mt-4 { margin-top:var(--sp-4) !important; } .mt-5 { margin-top:var(--sp-5) !important; } .mt-6 { margin-top:var(--sp-6) !important; } .mt-8 { margin-top:var(--sp-8) !important; } .mb-2 { margin-bottom:var(--sp-2) !important; } .mb-3 { margin-bottom:var(--sp-3) !important; } .mb-4 { margin-bottom:var(--sp-4) !important; } .mb-5 { margin-bottom:var(--sp-5) !important; } .mb-6 { margin-bottom:var(--sp-6) !important; } .mb-8 { margin-bottom:var(--sp-8) !important; } .table-tools select, .pager select { width:auto; } .bulkbar + .table-wrap { margin-top:var(--sp-2); } /* ── 10. v2-kompatibilitet ────────────────────────────────────────────────── Nordisk v2-klasser som ikke finnes i v3-vokabularet, gjengitt med v3-tokens så eksisterende konsumenter ser riktige ut uten markup-endring. Nye flater skal bruke v3-navnene (kommentert per rad). Fjernes i v4. */ /* .stat/.totals -> .kpi/.kpis */ .totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-3); margin:var(--sp-1) 0; } .stat { position:relative; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); } .stat b, .kpi > .num, .kpi .num:not(td):not(th) { display:block; font-weight:300; font-size:var(--fs-3xl); line-height:1.05; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--heading); } .stat span, .kpi .label { display:block; color:var(--muted); font-size:var(--fs-sm); margin-top:2px; } .stat.good b { color:var(--ok); } .stat.bad b { color:var(--bad); } .stat.bad { border-color:var(--bad-border); background:var(--bad-bg); } .stat.click { cursor:pointer; transition:border-color var(--dur) var(--ease); } .stat.click:hover { border-color:var(--border-2); } .stat.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); } .kpi .kpi-icon { position:absolute; top:var(--sp-4); right:var(--sp-4); color:var(--decor); } /* .hero (v2-varianter) */ .hero .hbody { flex:1 1 auto; min-width:0; } .hero.idle .ring { border-color:var(--neutral-fill); color:var(--neutral); } /* .layout + lys .sidebar (v2) -> .shell--side + .sidenav. Sidemenyen er mørk i v3. */ .layout { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); flex:1; min-height:0; } .layout .sidebar { position:static; height:auto; padding-top:var(--sp-3); } .sidebar nav { display:flex; flex-direction:column; gap:1px; } .sidebar nav a { display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-5) 9px calc(var(--sp-5) - 3px); color:var(--side-text); font-weight:500; border-left:3px solid transparent; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } .sidebar nav a:hover { background:var(--side-hover); color:var(--white); text-decoration:none; } .sidebar nav a.active { background:var(--side-active); color:var(--white); border-left-color:var(--side-marker); font-weight:600; } .sidebar nav a svg { width:17px; height:17px; flex:none; opacity:.85; } .sidebar .nav-label, .sidebar-label { padding:var(--sp-4) var(--sp-5) var(--sp-1); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); } @media (max-width:900px) { .layout { grid-template-columns:1fr; } .sidebar nav { flex-direction:row; flex-wrap:wrap; padding:0 var(--sp-3); } .sidebar nav a { border-left:0; border-bottom:3px solid transparent; padding:8px 10px; } .sidebar nav a.active { border-bottom-color:var(--side-marker); } } /* Nav-kollaps (wilma): .topnav.has-collapse med .topnav-toggle + .topnav-links */ .topnav-links { display:flex; align-items:center; gap:2px; flex:1; min-width:0; } .topnav-toggle { display:none; align-items:center; gap:var(--sp-2); background:none; border:0; cursor:pointer; color:var(--muted); font:inherit; font-weight:500; padding:8px 10px; border-radius:var(--radius-sm); } .topnav-toggle:hover { color:var(--heading); background:var(--surface-3); } .topnav-toggle svg { width:18px; height:18px; } @media (max-width:1440px) { .topnav.has-collapse .topnav-links a svg, .topnav.has-collapse .topnav-links a img { display:none; } .topnav.has-collapse .topnav-links a { padding:8px 9px; } } @media (max-width:1100px) { .topnav.has-collapse { position:relative; flex:none; overflow:visible; } .topnav.has-collapse .topnav-toggle { display:inline-flex; } .topnav.has-collapse .topnav-links { display:none; position:absolute; top:calc(100% + 6px); right:0; flex-direction:column; align-items:stretch; gap:2px; min-width:230px; background:var(--surface); border:var(--stroke) solid var(--border); z-index:60; padding:var(--sp-1); border-radius:var(--radius); box-shadow:var(--shadow-overlay); } .topnav.has-collapse.open .topnav-links { display:flex; } .topnav.has-collapse .topnav-links a { padding:10px 12px; } .topnav.has-collapse .topnav-links a svg { display:inline-flex; } .topnav.has-collapse .topnav-links a.active::after { display:none; } } /* Toppbar-detaljer (wiva/wilma) */ .topbar .brand-row { display:flex; align-items:center; gap:var(--sp-2); } .logout-form { display:inline-flex; margin:0; } .avatar.initials { text-transform:uppercase; } .navdot.off { background:var(--bad-fill); } .navdot.idle { background:var(--neutral-fill); } /* Innlogging (v2-kort med ordmerke og «fra wican») */ .login-head .brand-row { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-bottom:var(--sp-2); } .login-head .brand-mark { height:40px; width:auto; } .brand-name { font-size:var(--fs-3xl); font-weight:600; line-height:1; letter-spacing:-0.02em; color:var(--heading); } .brand-by { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--muted); } .brand-by img { height:15px; width:auto; display:block; } .brand-by .logo-light { filter:none; } [data-theme="dark"] .brand-by img, .theme-dark .brand-by img { filter:invert(1) hue-rotate(180deg) brightness(1.1); } [data-theme="dark"] .brand-by .logo-light, .theme-dark .brand-by .logo-light { filter:none; } .login-card form label { margin-top:var(--sp-1); } .login-note, .login-sub { color:var(--muted); font-size:var(--fs-sm); text-align:center; margin:var(--sp-2) 0 0; } .login-error { margin-bottom:var(--sp-4); } .btn.ms-signin, .ms-signin { gap:var(--sp-2); } .btn.ms-signin svg, .ms-signin svg { flex:none; width:18px; height:18px; } /* Knappe-alias: .btn--accent (Wican-lilla) er primærknappen i v3 */ .btn--accent, .btn.accent { background:var(--krokus-500); border-color:var(--krokus-500); color:var(--white); } .btn--accent:hover, .btn.accent:hover { background:var(--krokus-600); border-color:var(--krokus-600); } /* Skjema og hjelpetekst */ form .row > div, .row--fields > div { flex:1; min-width:160px; } .fieldhelp { background:var(--surface-2); border:var(--stroke) solid var(--border); border-left:3px solid var(--decor); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4); font-size:var(--fs-base); color:var(--muted); line-height:1.6; } .fieldhelp b { color:var(--heading); } .fieldhelp code { background:var(--surface); border:var(--stroke) solid var(--border-2); color:var(--primary-ink); } .fieldhelp dl { margin:var(--sp-2) 0 0; } .fieldhelp dt { font-weight:600; color:var(--heading); } .fieldhelp dd { margin:0 0 var(--sp-2); } .table-tools .table-filter { max-width:280px; } .card > h3 { margin-bottom:var(--sp-3); } .loading { text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--muted); } .modal-close { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:none; border:var(--stroke) solid var(--border); border-radius:var(--radius-sm); color:var(--muted); cursor:pointer; } .modal-close:hover { background:var(--surface-3); color:var(--heading); } .page-head > svg { color:var(--decor); flex:none; } details:not(.fold) .inner { padding:var(--sp-3) var(--sp-4); } /* ── 11. Utskrift, bevegelse og touch ─────────────────────────────────────── */ @media print { .topbar, .sidebar, .bottomnav, .foot, .fab, .toast, .table-tools, .pager, .bulkbar, .statusbar, .btn, .theme-toggle, .banner, .modal-overlay, .popover { display:none !important; } .shell--side { display:block; } body { background:var(--white); color:var(--granitt-900); font-size:11pt; } .container { max-width:none; padding:0; } .card, .table-wrap, .kpi, .stat, .alert { border-color:var(--sand-600); break-inside:avoid; box-shadow:none; } .table-wrap { overflow:visible; } th { background:none; } tr, .kpi, .rail, .timeline .ev { break-inside:avoid; } a { color:inherit; text-decoration:none; } a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.85em; color:var(--granitt-050); } .status::before, .badge::before, .heat i, .bar-fill { print-color-adjust:exact; -webkit-print-color-adjust:exact; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } @media (pointer: coarse) { body { font-size:14px; } .btn { min-height:44px; } .btn--sm { min-height:36px; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select:not([multiple]):not([size]) { min-height:44px; } .tabs a, .tabs button, .chip, .sidenav a, .topnav a, .menu a, .menu button { min-height:44px; } td, th { padding:12px 14px; } .switch .track { width:44px; height:24px; } .switch input { width:44px; height:24px; } .switch .track::after { width:20px; height:20px; } .switch input:checked + .track::after { transform:translateX(20px); } } /* ── 12. Tillegg fra JS- og eksempelrunden ───────────────────────────────── */ /* Toast-stabel (lages av Wican.toast): fast nederst til høyre, nyeste nederst */ .toast-stack { position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:60; display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-end; pointer-events:none; } .toast-stack .toast { position:static; pointer-events:auto; } /* Sidemeny på smal skjerm som overlay (Wican.nav.toggleSidebar setter .open + body.sidebar-open) */ @media (max-width:900px) { .sidebar.open { position:fixed; inset:0 auto 0 0; width:var(--side-w); height:100dvh; z-index:70; padding:var(--sp-5) 0 var(--sp-4); overflow-y:auto; box-shadow:var(--shadow-modal); } .sidebar.open .sidenav { flex-direction:column; padding:0; } .sidebar.open .sidenav a, .sidebar.open .sidenav button { border-left:3px solid transparent; border-bottom:0; padding:9px var(--sp-5) 9px calc(var(--sp-5) - 3px); } .sidebar.open .sidenav a.active { border-left-color:var(--side-marker); border-bottom-color:transparent; } .sidebar.open .sidenav-label, .sidebar.open .foot { display:block; } body.sidebar-open::before { content:""; position:fixed; inset:0; background:var(--overlay); z-index:65; } } .sidebar-toggle { display:none; } @media (max-width:900px) { .sidebar-toggle { display:inline-flex; } } /* Små avstandstrinn og fast firedelt KPI-rad */ .mt-1 { margin-top:var(--sp-1) !important; } .mb-1 { margin-bottom:var(--sp-1) !important; } .kpis--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:900px) { .kpis--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .kpis--4 { grid-template-columns:1fr; } } .pager .pages .dim { color:var(--dim); } /* Klasser som Wican.palette og Wican.dropzone genererer */ .palette-list { max-height:min(60vh,480px); overflow-y:auto; padding:var(--sp-1) 0; } .dz-files { margin-top:var(--sp-3); text-align:left; font-size:var(--fs-sm); display:flex; flex-direction:column; gap:4px; } .dz-files .row { color:var(--text); } /* ── 13. Feilflate: feil og advarsler skal synes på avstand ────────────────── Rød tekst alene forsvinner i en tabelltung flate. Feil får derfor en tonet flate og en 2 px kant, advarsler samme mønster svakere (8 prosent, 1 px). Fargen bærer aldri betydningen alene: bruk alltid tekst eller .status ved siden av. Brukes av VM Backup Monitor, Cron og Analyse. */ .kpi.kpi--bad, .hero.bad, .card.is-bad { background:color-mix(in srgb, var(--bad-fill) 14%, var(--surface)); border:2px solid var(--bad-fill); } /* Tonefargen på KPI-verdien må slå v2-aliaset `.kpi .num:not(td):not(th)` (seksjon 10), som har høyere spesifisitet enn `.kpi--warn .v`. Uten disse linjene mister enhver KPI som bruker v2-markupen class="num" tonefargen. */ .kpi--ok .v, .kpi--ok > .num, .kpi--ok .num:not(td):not(th) { color:var(--ok); } .kpi--warn .v, .kpi--warn > .num, .kpi--warn .num:not(td):not(th) { color:var(--warn); } .kpi--bad .v, .kpi--bad > .num, .kpi--bad .num:not(td):not(th) { color:var(--bad); } .kpi.kpi--bad .v, .kpi.kpi--bad .l { color:var(--bad); } .kpi.kpi--bad .l { font-weight:600; } .kpi.kpi--warn, .hero.warn, .card.is-warn { background:color-mix(in srgb, var(--warn-fill) 8%, var(--surface)); border:var(--stroke) solid var(--warn-fill); } .kpi.kpi--warn .l { color:var(--warn); font-weight:600; } .card.is-ok { border-color:var(--ok-border); } /* Tabellrader: tonet flate og farget stripe i venstre kant */ tr.is-bad td { background:color-mix(in srgb, var(--bad-fill) 10%, var(--surface)); } tr.is-bad:hover td { background:color-mix(in srgb, var(--bad-fill) 16%, var(--surface)); } tr.is-bad td:first-child { box-shadow:inset 3px 0 0 var(--bad-fill); } tr.is-warn td { background:color-mix(in srgb, var(--warn-fill) 7%, var(--surface)); } tr.is-warn:hover td { background:color-mix(in srgb, var(--warn-fill) 12%, var(--surface)); } tr.is-warn td:first-child { box-shadow:inset 3px 0 0 var(--warn-fill); } /* Statusmerke i hjørnet av et kort: hake når alt er i orden, kryss ved feil. Krever position:relative på kortet (.card er ikke relativ som standard). */ .has-mark { position:relative; } .card-mark { position:absolute; top:-10px; right:-10px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; z-index:1; border:2px solid var(--surface); background:var(--surface); color:var(--ok); box-shadow:var(--shadow-sm); } .card-mark svg { width:14px; height:14px; } .card-mark--ok { border-color:var(--ok-fill); color:var(--ok); } .card-mark--bad { background:var(--bad-fill); border-color:var(--bad-fill); color:var(--white); } .card-mark--warn { background:var(--warn-fill); border-color:var(--warn-fill); color:var(--granitt-800); } /* .card--flush har overflow:hidden (tabellkort), så et merke utenfor kanten klippes bort. Der legges merket innenfor i stedet. */ .card--flush.has-mark > .card-mark, .card--flush .card-mark { top:10px; right:10px; }