:root {
  /* === REITAN brand palette === */
  --reitan-bronze:   #b58763;   /* primary accent */
  --reitan-bronze-d: #8c6647;   /* deeper bronze */
  --reitan-bronze-l: #d5b594;   /* lighter bronze */
  --reitan-blue:     #141432;   /* deep navy — secondary base */
  --reitan-blue-d:   #0a0a1f;
  --reitan-black:    #1a191b;
  --reitan-red:      #ff7376;
  --reitan-grey:     #e4e4e3;
  --reitan-grey-d:   #d2d2d0;
  --reitan-white:    #ffffff;

  /* === Default theme: light/grey (matches brand primary "blue logo on grey") === */
  --bg-page:   #ebebe9;   /* main page bg — warm grey */
  --bg-0:      #f4f4f1;   /* card bg / surface */
  --bg-1:      #fafaf7;   /* elevated surface */
  --bg-2:      #ebebe6;   /* hover */
  --bg-3:      #dedeD9;   /* deeper neutral */
  --bg-deep:   var(--reitan-blue);   /* deep blue accent areas */
  --border:    #cfcfca;
  --border-soft: #dadad5;
  --border-strong: #b5b5b0;

  --text:      var(--reitan-blue);
  --text-mid:  #3a3a4a;
  --text-mute: #6c6c75;
  --text-dim:  #8e8e94;
  --text-on-blue: var(--reitan-grey);

  --accent:       var(--reitan-bronze);
  --accent-deep:  var(--reitan-bronze-d);
  --accent-soft:  rgba(181, 135, 99, 0.14);
  --accent-line:  rgba(181, 135, 99, 0.40);
  --accent-bg:    #f0e6db;

  --amber: #c69248;
  --teal:  #5c8a8f;
  --violet: #6f5d8a;
  --green:  #6d8e63;
  --red:    #c14a4c;
  --amber-soft: rgba(198, 146, 72, 0.14);
  --teal-soft:  rgba(92, 138, 143, 0.14);
  --violet-soft: rgba(111, 93, 138, 0.14);
  --green-soft: rgba(109, 142, 99, 0.14);
  --red-soft:   rgba(193, 74, 76, 0.12);

  --row: 36px;
  --row-roomy: 46px;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  --font-sans:  Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --font-serif: Arial, "Helvetica Neue", Helvetica, sans-serif; /* rebranding 2026-08: alt i Arial — var beholdt så gamle regler virker */

  --shadow-sm: 0 1px 1px rgba(20, 20, 50, 0.04), 0 1px 2px rgba(20, 20, 50, 0.05);
  --shadow-md: 0 6px 18px rgba(20, 20, 50, 0.08);
  --shadow-lg: 0 24px 56px rgba(20, 20, 50, 0.12);

  --letter-loose: 0.18em;
  --letter-mid:   0.10em;
}

[data-theme="dark"] {
  --bg-page:   var(--reitan-blue);
  --bg-0:      #1a1a3a;
  --bg-1:      #20203f;
  --bg-2:      #292947;
  --bg-3:      #333354;
  --border:    #3a3a58;
  --border-soft: #2a2a48;
  --border-strong: #4a4a66;
  --text:      #ecebe6;
  --text-mid:  #b8b6ab;
  --text-mute: #8b8a7f;
  --text-dim:  #6a6962;
  --text-on-blue: var(--reitan-grey);
  --accent-soft: rgba(213, 181, 148, 0.14);
  --accent-line: rgba(213, 181, 148, 0.40);
  --accent-bg:   rgba(213, 181, 148, 0.08);
  --accent:      var(--reitan-bronze-l);
  --accent-deep: var(--reitan-bronze);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .chip { background: transparent; }
[data-theme="dark"] .chip[data-tone="muted"] { color: var(--text-mid); }
[data-theme="dark"] .chip[data-tone="amber"]  { color: #e0b06a; border-color: rgba(198, 146, 72, 0.40); }
[data-theme="dark"] .chip[data-tone="teal"]   { color: #8db5b9; border-color: rgba(92, 138, 143, 0.40); }
[data-theme="dark"] .chip[data-tone="violet"] { color: #a08fc4; border-color: rgba(111, 93, 138, 0.40); }
[data-theme="dark"] .chip[data-tone="green"]  { color: #9cb893; border-color: rgba(109, 142, 99, 0.40); }
[data-theme="dark"] .chip[data-tone="red"]    { color: #e8908b; border-color: rgba(255, 115, 118, 0.45); }

[data-density="roomy"] { --row: 48px; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }
button { font: inherit; color: inherit; }

/* === Typographic hierarchy === */
.serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  line-height: 1.05;
}
.serif-display.tight { letter-spacing: 0.04em; }
.serif-display.large { font-size: 40px; line-height: 1.02; letter-spacing: 0.03em; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--letter-loose);
  color: var(--text-mute);
  font-weight: 500;
}

/* === Layout === */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background: var(--bg-page);
}
.app[data-nav="icons"] { grid-template-columns: 72px 1fr; }

/* Sidebar mask (mobile) */
.sidebar-mask {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 20, 50, 0.5);
  z-index: 40;
  backdrop-filter: blur(2px);
  animation: fade-in 160ms ease-out;
}

/* Mobile menu button — hidden on desktop */
.menu-toggle {
  display: none;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex: none;
}
.menu-toggle:hover { background: var(--bg-2); }

/* Sidebar — calm, paper-like */
.sidebar {
  background: var(--bg-0);
  border-right: 1px solid var(--border-soft);
  padding: 28px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* mobil: følg synlig viewport når adressefeltet kollapser */
  overflow: hidden;
}
.brand {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 8px 8px 26px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.brand-mark {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  flex: none;
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark .star { fill: var(--reitan-bronze); }
[data-theme="dark"] .brand-mark .star { fill: var(--reitan-bronze-l); }
.brand-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
  line-height: 1;
  margin-top: 2px;
}
.brand-sub {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 2px;
}

.app[data-nav="icons"] .brand-name,
.app[data-nav="icons"] .brand-sub,
.app[data-nav="icons"] .nav-section,
.app[data-nav="icons"] .nav-item span:not(.icon):not(.badge),
.app[data-nav="icons"] .sidebar-footer .pm-info { display: none; }
.app[data-nav="icons"] .brand-mark { width: 40px; height: 40px; }
.app[data-nav="icons"] .nav-item { justify-content: center; padding: 10px; }
.app[data-nav="icons"] .nav-item .badge { display: none; }
/* Kollapset meny: sentrer også bunnen (profil) og fjern den tomme tekstkolonnen. */
.app[data-nav="icons"] .sidebar-footer { justify-content: center; padding-left: 0; padding-right: 0; }
.app[data-nav="icons"] .profile-mini { display: none; }

.nav-section {
  font-size: 9.5px; text-transform: uppercase;
  letter-spacing: var(--letter-loose); color: var(--text-dim);
  padding: 18px 12px 8px; font-weight: 500;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius);
  color: var(--text-mid); cursor: pointer;
  font-size: 13px; font-weight: 400;
  transition: background 100ms, color 100ms;
  text-align: left; background: transparent; border: 0;
  width: 100%;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item > span:not(.icon):not(.badge) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}
.nav-item[data-active="true"] {
  background: transparent; color: var(--text);
  font-weight: 500;
}
.nav-item[data-active="true"]::before {
  content: ""; position: absolute; margin-left: -18px;
  width: 2px; height: 18px;
  background: var(--accent);
}
.nav-item { position: relative; }
.nav-item .icon { width: 16px; height: 16px; opacity: 0.7; flex: none; }
.nav-item[data-active="true"] .icon { opacity: 1; color: var(--accent); }
/* Treff i brukersøk (UserSearchField): markert rad ved piltaster/hover. Egen
   markør — nav-item[data-active] tegner en strek utenfor nedtrekkslista. */
.typeahead-item[data-hi="true"] { background: var(--bg-2); color: var(--text); }
.nav-item .badge {
  margin-left: auto; font-size: 10px; font-family: var(--font-mono); color: var(--text-mute);
  font-weight: 500;
}
.nav-item .badge[data-tone="accent"] { color: var(--accent-deep); }
.nav-item .badge[data-tone="red"]    { color: var(--red); }

.sidebar-footer {
  margin-top: auto;
  padding: 16px 12px 4px;
  border: 0; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 11px;
  width: 100%; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sidebar-footer:hover { background: var(--bg-2); }
.sidebar-footer[data-active="true"] { background: var(--bg-2); }
/* Nav-listen scroller; merke (brand) og bunn (Skjul meny + profil) er pinnet. */
.nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--reitan-bronze);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 500; color: white;
  font-family: var(--font-sans);
  flex: none;
  letter-spacing: 0.04em;
}
.avatar[data-size="lg"] { width: 64px; height: 64px; font-size: 18px; border-radius: 50%; }
.avatar[data-size="md"] { width: 36px; height: 36px; font-size: 12px; }
.avatar[data-size="sm"] { width: 22px; height: 22px; font-size: 9.5px; }
[data-theme="dark"] .avatar { background: var(--reitan-bronze); color: var(--reitan-blue); }

/* === Main === */
.main { min-width: 0; display: flex; flex-direction: column; background: var(--bg-page); }
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-page);
  position: sticky; top: 0; z-index: 20;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }
.crumbs .sep { opacity: 0.4; }
.crumbs .current { color: var(--text); }
.crumbs button { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.crumbs button:hover { color: var(--text); }
.topbar-spacer { flex: 1; }
.topbar-search {
  position: relative; flex: 0 1 380px;
}
.topbar-search input {
  width: 100%;
  background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 8px 12px 8px 34px; font-size: 12.5px; color: var(--text);
  font-family: inherit;
}
.topbar-search input::placeholder { color: var(--text-dim); }
.topbar-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); }
.topbar-search .k { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }

.content { padding: 32px 44px 96px; max-width: 1380px; width: 100%; margin: 0 auto; }

/* Page heading */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 8px 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.page-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--letter-loose);
  color: var(--text-mute); font-weight: 500; margin-bottom: 8px;
}
.page-title {
  font-family: var(--font-serif);
  font-size: 27px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.04;
  color: var(--text);
}
.page-title .num,
.page-title .accent-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  margin-left: 14px;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 300;
}
.page-sub { color: var(--text-mute); font-size: 12.5px; margin-top: 8px; max-width: 64ch; line-height: 1.55; }

/* === Hero (Forside) — editorial, samme paper-palett som resten === */
.hero {
  position: relative;
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--text);
  overflow: hidden;
  margin-bottom: 36px;
  min-height: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-soft);
}
.hero-photo {
  position: relative;
  background: var(--bg-3);
  overflow: hidden;
}
/* Hero-bildet fader inn når det er lastet; til da vises bare den rolige
   bakgrunnsflaten over (ingen illustrasjon som blinker frem først). */
.hero-photo .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 260ms ease;
}
.hero-photo .hero-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-photo .hero-img { transition: none; } }
.hero-photo image-slot {
  width: 100%; height: 100%;
  border-radius: 0;
  border: 0;
}
.hero-photo .photo-credit {
  position: absolute; bottom: 16px; left: 18px;
  font-size: 10px; letter-spacing: var(--letter-mid); text-transform: uppercase;
  color: rgba(228, 228, 227, 0.75);
  z-index: 2;
  font-weight: 500;
}
.hero-content {
  padding: 44px 48px 40px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.hero-stjerna {
  position: absolute;
  top: 28px; right: 32px;
  width: 38px; height: 38px;
  opacity: 0.85;
}
.hero-eyebrow {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--letter-loose);
  color: var(--accent-deep);
  font-weight: 500;
  margin-bottom: 16px;
}
.hero-greeting {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.005em;
  line-height: 1.0;
  color: var(--text);
}
.hero-greeting .caps {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
  display: block;
  margin-top: 6px;
  color: var(--text);
}
.hero-meta {
  margin-top: 28px;
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.hero-meta .sep { opacity: 0.4; }
.hero-meta .weather { color: var(--accent-deep); font-family: var(--font-mono); }

.hero-quick {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 36px;
}
.hero-quick button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px; cursor: pointer;
  font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 500;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.hero-quick button:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent-deep); }
.hero-quick button[data-variant="strong"] {
  background: var(--reitan-blue);
  border-color: var(--reitan-blue);
  color: var(--reitan-grey);
}
.hero-quick button[data-variant="strong"]:hover {
  background: #232352;
  border-color: #232352;
  color: var(--reitan-grey);
}
[data-theme="dark"] .hero-quick button[data-variant="strong"] {
  background: var(--reitan-bronze);
  border-color: var(--reitan-bronze);
  color: var(--reitan-blue);
}
[data-theme="dark"] .hero-quick button[data-variant="strong"]:hover {
  background: var(--reitan-bronze-l);
  border-color: var(--reitan-bronze-l);
}

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-0); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 14px; font-size: 12px; cursor: pointer;
  transition: background 100ms, border-color 100ms, color 100ms;
  white-space: nowrap;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
.btn[data-variant="primary"] {
  background: var(--reitan-blue); border-color: var(--reitan-blue); color: var(--reitan-grey);
}
.btn[data-variant="primary"]:hover { background: #232352; border-color: #232352; }
[data-theme="dark"] .btn[data-variant="primary"] { background: var(--reitan-bronze); border-color: var(--reitan-bronze); color: var(--reitan-blue); }
[data-theme="dark"] .btn[data-variant="primary"]:hover { background: var(--reitan-bronze-l); border-color: var(--reitan-bronze-l); }

.btn[data-variant="accent"] {
  background: var(--reitan-bronze); border-color: var(--reitan-bronze); color: var(--reitan-blue);
}
.btn[data-variant="accent"]:hover { background: var(--reitan-bronze-l); border-color: var(--reitan-bronze-l); }

.btn[data-variant="ghost"] { background: transparent; border-color: transparent; color: var(--text-mid); }
.btn[data-variant="ghost"]:hover { background: var(--bg-2); color: var(--text); }
.btn[data-variant="danger"] {
  background: transparent; border-color: rgba(193, 74, 76, 0.4); color: var(--red);
}
.btn[data-variant="danger"]:hover { background: var(--red-soft); }
.btn[data-size="sm"] { padding: 6px 11px; font-size: 11.5px; }
.btn[data-size="lg"] { padding: 11px 20px; font-size: 12.5px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* === Cards / Panels — paper-like, calm === */
.panel {
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.panel-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text);
}
.panel-head .panel-sub {
  color: var(--text-mute); font-size: 11.5px;
  font-family: var(--font-mono);
  text-transform: lowercase;
}
.panel-head .panel-num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 12px; font-weight: 400;
  color: var(--accent);
  margin-left: 6px;
}
.panel-body { padding: 20px 22px; }
.panel-body.flush { padding: 0; }
.panel[data-emphasis="accent"] {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-bg), var(--bg-0) 70%);
}
.panel[data-emphasis="deep"] {
  background: var(--reitan-blue);
  color: var(--text-on-blue);
  border-color: var(--reitan-blue);
}
.panel[data-emphasis="deep"] .panel-head { border-color: rgba(213, 181, 148, 0.2); }
.panel[data-emphasis="deep"] .panel-head h3 { color: var(--reitan-grey); }
.panel[data-emphasis="deep"] .mute { color: rgba(228, 228, 227, 0.7); }

/* === Widget grid === */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  gap: 22px;
}
/* Masonry KUN for tilpassbar forside (CustomDashboard). Krever JS-en der som
   setter grid-row-end per celle. grid-auto-rows:8px uten den JS-en kollapser
   alle celler til 8px – derfor IKKE på delt .widget-grid (Intranett, admin,
   cost, brukerbehandling bruker samme klasse). */
.widget-grid--masonry {
  grid-auto-rows: 8px;
  align-items: start;
}
.widget-grid > * { grid-column: span 6; min-width: 0; }
.widget-grid > [data-span="3"] { grid-column: span 3; }
.widget-grid > [data-span="4"] { grid-column: span 4; }
.widget-grid > [data-span="6"] { grid-column: span 6; }
.widget-grid > [data-span="7"] { grid-column: span 7; }
.widget-grid > [data-span="5"] { grid-column: span 5; }
.widget-grid > [data-span="8"] { grid-column: span 8; }
.widget-grid > [data-span="12"] { grid-column: span 12; }
@media (max-width: 1100px) {
  .widget-grid > * { grid-column: span 12; }
  .widget-grid > [data-span="3"], .widget-grid > [data-span="4"] { grid-column: span 6; }
}

/* === KPI === */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 24px; }
.kpi {
  background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 22px 22px 18px; position: relative; overflow: hidden;
}
.kpi-label {
  font-size: 10px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: var(--letter-loose);
  font-weight: 500;
}
.kpi-value {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 10px;
  color: var(--text);
  font-feature-settings: "tnum";
  line-height: 1;
}
.kpi-value .unit { color: var(--text-mute); font-size: 14px; font-weight: 300; margin-left: 6px; font-family: var(--font-sans); }
.kpi-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 11px; color: var(--text-mute);
}
.kpi-delta { font-family: var(--font-mono); }
.kpi-delta[data-dir="up"] { color: var(--green); }
.kpi-delta[data-dir="down"] { color: var(--accent-deep); }
.kpi-spark { position: absolute; right: 16px; top: 18px; opacity: 0.7; }

/* === Lists === */
.list { display: flex; flex-direction: column; }
.list-item {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--bg-2); }
.list-item .li-title { font-size: 13px; color: var(--text); }
.list-item .li-meta { font-size: 11px; color: var(--text-mute); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.list-item .li-amount { font-family: var(--font-mono); font-size: 12px; }

/* Sak row */
.sak-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: 16px;
  padding: 14px 22px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 100ms;
}
.sak-row:hover { background: var(--bg-2); }
.sak-row:last-child { border-bottom: 0; }
.sak-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); }
.sak-title { font-size: 13px; color: var(--text); }
.sak-meta { font-size: 11px; color: var(--text-mute); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* === Chips === */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; height: 22px;
  border-radius: 0; font-size: 10.5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-mid);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
  white-space: nowrap;
}
.chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.chip[data-tone="accent"] { color: var(--accent-deep); border-color: var(--accent-line); }
.chip[data-tone="amber"]  { color: #8a6321; border-color: rgba(198, 146, 72, 0.50); }
.chip[data-tone="teal"]   { color: #355559; border-color: rgba(92, 138, 143, 0.45); }
.chip[data-tone="violet"] { color: #463863; border-color: rgba(111, 93, 138, 0.45); }
.chip[data-tone="green"]  { color: #3d5933; border-color: rgba(109, 142, 99, 0.50); }
.chip[data-tone="red"]    { color: var(--red); border-color: rgba(193, 74, 76, 0.5); }
.chip[data-tone="muted"]  { color: var(--text-mute); }

/* === Filter bar === */
.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.input {
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-size: 12.5px; color: var(--text); min-width: 240px;
  font-family: inherit;
}
.input::placeholder { color: var(--text-dim); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select {
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-size: 12.5px; color: var(--text);
  font-family: inherit;
}
textarea.input { font-family: var(--font-sans); min-height: 90px; resize: vertical; }

/* === Segmented switcher === */
.viewswitch {
  display: inline-flex; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px;
}
.viewswitch button {
  background: transparent; border: 0; color: var(--text-mute);
  padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
  font-family: var(--font-sans);
}
.viewswitch button[data-active="true"] { background: var(--reitan-blue); color: var(--reitan-grey); }
[data-theme="dark"] .viewswitch button[data-active="true"] { background: var(--reitan-bronze); color: var(--reitan-blue); }

/* === Tabs === */
/* Fanelinje. System har tolv faner (~1100 px selv strammet inn), mer enn
   innholdskolonnen har på en vanlig laptop. Derfor: brekk til flere rader på
   desktop (alt forblir synlig — en fane skal aldri ligge skjult utenfor
   skjermen), og horisontal scroll på touch, der fingeren gjør det naturlig. */
.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 22px; }
.tab {
  padding: 12px 14px 14px; cursor: pointer;
  color: var(--text-mute); font-size: 11.5px;
  border-bottom: 2px solid transparent;
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
  transition: color 100ms, border-color 100ms;
  text-transform: uppercase; letter-spacing: 0.10em; font-weight: 500;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[data-active="true"] { color: var(--text); border-bottom-color: var(--accent); }
@media (pointer: coarse) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
}

/* === Tables === */
.pivot-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pivot {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-feature-settings: "tnum";
}
.pivot th, .pivot td {
  text-align: left; padding: 0 18px; height: var(--row);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.pivot th {
  font-weight: 500; color: var(--text-mute); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--letter-loose);
  background: transparent; position: sticky; top: 0; z-index: 1;
  padding-top: 14px; padding-bottom: 14px;
  height: auto;
}
.pivot td.num, .pivot th.num { text-align: right; font-family: var(--font-mono); }
.pivot tr.row-user { cursor: pointer; }
.pivot tr.row-user:hover { background: var(--bg-2); }

/* === Drawer === */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(20, 20, 50, 0.55); z-index: 50;
  animation: fade-in 160ms ease-out;
  backdrop-filter: blur(2px);
}
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(880px, 94vw); background: var(--bg-page);
  border-left: 1px solid var(--border);
  z-index: 51;
  display: flex; flex-direction: column;
  animation: slide-in 200ms ease-out;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.drawer-head {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-0);
}
.drawer-head .drawer-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.drawer-body { padding: 30px; overflow: auto; flex: 1; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* === Drift card === */
.drift-card {
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-0);
  display: grid; grid-template-columns: 36px 1fr auto; gap: 16px;
  align-items: start;
}
.drift-card[data-severity="critical"] { border-left: 3px solid var(--red); }
.drift-card[data-severity="warning"] { border-left: 3px solid var(--amber); }
.drift-card[data-severity="info"] { border-left: 3px solid var(--accent); }
.drift-card[data-severity="resolved"] { opacity: 0.7; }
.drift-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--text-mute);
}
.drift-card[data-severity="critical"] .drift-icon { color: var(--red); }
.drift-card[data-severity="warning"] .drift-icon { color: var(--amber); }
.drift-card[data-severity="info"] .drift-icon { color: var(--accent); }
.drift-card[data-severity="resolved"] .drift-icon { color: var(--green); }
.drift-card .drift-title {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.2;
}
.drift-card .drift-body { font-size: 12.5px; color: var(--text-mid); margin-top: 8px; max-width: 80ch; line-height: 1.6; }
.drift-card .drift-meta { font-size: 11px; color: var(--text-mute); margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.drift-card .drift-meta .sep { opacity: 0.4; }

/* Pulse */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(181, 135, 99, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(181, 135, 99, 0); }
}
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse-ring 1.6s infinite;
}

/* === Quick tile === */
.quick-tile {
  background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; text-align: left;
  transition: border-color 120ms, background 120ms;
  width: 100%;
  min-height: 144px;
  position: relative;
  overflow: hidden;
}
.quick-tile:hover {
  border-color: var(--accent);
  background: var(--bg-1);
}
.quick-tile .qt-icon {
  width: 36px; height: 36px;
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.quick-tile .qt-name {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}
.quick-tile .qt-desc { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; margin-top: 2px; }
.quick-tile .qt-badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent-deep);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* === News === */
.news-item { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; cursor: pointer; }
.news-item:hover { background: var(--bg-2); }
.news-item:last-child { border-bottom: 0; }
.news-title {
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.news-meta { font-size: 10.5px; color: var(--text-mute); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 500; }
.news-thumb {
  width: 84px; height: 64px;
  background: linear-gradient(135deg, var(--reitan-blue), #232352);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  color: var(--reitan-bronze-l);
  font-size: 13px;
  letter-spacing: 0.10em;
  flex: none;
  text-transform: uppercase;
  overflow: hidden;   /* bilde fyller boksen; gradient er fallback hvis det 403'er */
}
.news-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* === Steps === */
.steps {
  display: flex; flex-direction: column;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.step {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.step:last-child { border-bottom: 0; }
.step .step-mark {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-mute);
  font-family: var(--font-serif); font-size: 13px;
  font-style: italic;
}
.step[data-state="done"] .step-mark { background: var(--reitan-blue); color: var(--reitan-grey); border-color: var(--reitan-blue); }
[data-theme="dark"] .step[data-state="done"] .step-mark { background: var(--reitan-bronze); color: var(--reitan-blue); border-color: var(--reitan-bronze); }
.step[data-state="active"] .step-mark { color: var(--accent); border-color: var(--accent); }
.step[data-state="active"] { background: var(--accent-bg); }
[data-theme="dark"] .step[data-state="active"] { background: rgba(181, 135, 99, 0.08); }
.step .step-title { font-size: 13px; }
.step .step-meta { font-size: 11px; color: var(--text-mute); margin-top: 3px; font-family: var(--font-mono); }

/* === Bar fill === */
.bar-track { width: 100%; height: 3px; background: var(--bg-3); overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); transition: width 300ms; }

/* === «Opptrer som»-banner (IT-testmodus) === */
.viewas-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 36px;
  background: var(--red-soft);
  border-bottom: 1px solid rgba(193, 74, 76, 0.35);
  color: var(--red);
  font-size: 12px;
  /* Ikke sticky: topbaren er sticky top:0 og ville overlappet banneret ved
     scroll — den røde fargen på topbar-knappen viser uansett aktiv modus. */
}
.viewas-banner > span { flex: 1; min-width: 0; }
.viewas-banner .btn { flex: none; }
@media (max-width: 920px) {
  .viewas-banner { padding: 8px 16px; }
}

/* === Toast === */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--reitan-blue); color: var(--reitan-grey);
  padding: 14px 22px; border-radius: var(--radius); z-index: 100;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
  animation: fade-in 200ms ease-out;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.toast .toast-mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--reitan-bronze);
}

/* === Approval card === */
.approval-card {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
}
.approval-card:last-child { border-bottom: 0; }
.approval-icon {
  width: 40px; height: 40px;
  background: var(--accent-bg);
  color: var(--accent-deep);
  display: grid; place-items: center;
  border-radius: 50%;
}
.approval-title {
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.2;
}
.approval-meta { font-size: 11px; color: var(--text-mute); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; letter-spacing: 0.02em; }

/* === Embed banner === */
.embed-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--accent);
  margin-bottom: 24px;
  font-size: 12px; color: var(--text-mute);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 14px;
}
.embed-banner .eb-link { color: var(--accent-deep); cursor: pointer; font-family: var(--font-sans); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.embed-banner .eb-link:hover { color: var(--accent); }

/* === Profile mini === */
.profile-mini { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.profile-mini .pm-info { flex: 1; min-width: 0; }
.profile-mini .pm-name { font-size: 12.5px; font-weight: 500; }
.profile-mini .pm-sub { font-size: 11px; color: var(--text-mute); letter-spacing: 0.02em; }

/* === Meter === */
.meter { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.meter .meter-track { height: 3px; background: var(--bg-3); overflow: hidden; }
.meter .meter-fill { height: 100%; background: var(--accent); transition: width 300ms; }
.meter .meter-fill[data-tone="over"] { background: var(--red); }
.meter .meter-fill[data-tone="warn"] { background: var(--amber); }
.meter .meter-fill[data-tone="ok"] { background: var(--green); }
.meter .meter-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-mid); min-width: 60px; text-align: right; }

/* === Empty === */
.empty {
  padding: 56px 20px; text-align: center; color: var(--text-mute);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty .empty-icon { width: 48px; height: 48px; color: var(--accent); display: grid; place-items: center; }

/* === Misc === */
.kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  padding: 1px 6px; border-radius: 3px; color: var(--text-mute);
}
.divider { height: 1px; background: var(--border-soft); margin: 22px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.mute { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.italic { font-style: italic; }
.right { text-align: right; }
.tnum { font-feature-settings: "tnum"; }
.hairline { height: 1px; background: var(--border-soft); }

/* Section title */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 32px 0 16px;
}
.section-title .st-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-loose);
  color: var(--text-mute); font-weight: 500; margin-bottom: 6px;
}
.section-title .st-title {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text); line-height: 1.1;
}

/* Field */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 10px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: var(--letter-loose);
  font-weight: 500;
}
.field input, .field select, .field textarea {
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 12px; font: inherit; color: var(--text);
  font-family: var(--font-sans);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .three-col { grid-template-columns: 1fr; } }

/* Responsive kolonnegrids — erstatter inline gridTemplateColumns i skjermene,
   siden inline-stiler ellers vinner over mobilbruddene under. Gap kan fortsatt
   overstyres inline per brukssted. */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.minkonto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; align-items: start; }
@media (max-width: 860px) { .minkonto-grid { grid-template-columns: 1fr; } }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 920px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

/* Listerader med bred inline-kolonne (f.eks. «1fr 260px» med søkefelt) stables
   på smale skjermer. !important trengs for å slå inline-stilen. */
@media (max-width: 720px) {
  .list-item.li-stack { grid-template-columns: 1fr !important; }
}

/* Tag pill */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; font-size: 10.5px;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-mute);
  font-family: var(--font-mono);
}

/* Status pulse */
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
}
.status-dot[data-state="warn"] { background: var(--amber); }
.status-dot[data-state="down"] { background: var(--red); }

/* Sparkline */
svg.sparkline { display: block; }

/* Lade Gaard image placeholder */
/* Cost summary */
.summary-tile {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 20px 22px; background: var(--bg-0);
  display: flex; flex-direction: column; gap: 6px;
}
.summary-tile .st-label { font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: var(--letter-loose); }
.summary-tile .st-value { font-family: var(--font-serif); font-size: 28px; font-weight: 400; line-height: 1.05; font-feature-settings: "tnum"; }

/* Hide deep theme badge if not used */
[data-theme="dark"] .topbar { background: var(--bg-page); }

/* Sparkline color tweak */
svg.sparkline polyline { stroke: var(--accent); }

/* === Responsive — mobile/tablet === */
@media (max-width: 920px) {
  .app, .app[data-nav="icons"] {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(300px, 84vw);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
    box-shadow: 8px 0 32px rgba(20, 20, 50, 0.20);
    height: 100vh;
    height: 100dvh;
    padding-top: 20px;
    /* Mange menypunkter + lav (landskaps)skjerm: menyen må kunne scrolles */
    overflow-y: auto;
  }
  .app[data-mobile-open="true"] .sidebar { transform: translateX(0); }
  .app[data-mobile-open="true"] .sidebar-mask { display: block; }

  .menu-toggle { display: inline-flex; }

  .topbar {
    padding: 10px 16px;
    gap: 10px;
  }
  .topbar-search {
    flex: 1;
    max-width: none;
  }
  .topbar-search .k { display: none; }

  .content {
    padding: 18px 18px 80px;
  }

  /* Page head — stack on small screens */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }
  .page-title { font-size: 30px; }
  .page-title .num,
  .page-title .accent-num { font-size: 22px; margin-left: 8px; }
  .page-sub { font-size: 12px; }

  /* Hero — stack */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-photo {
    height: 200px;
    min-height: 200px;
  }
  .hero-content {
    padding: 28px 24px;
  }
  .hero-greeting { font-size: 36px; }
  .hero-stjerna { top: 18px; right: 20px; width: 32px; height: 32px; }
  .hero-quick { margin-top: 24px; }
  .hero-quick button { padding: 10px 14px; font-size: 10.5px; letter-spacing: 0.10em; }

  /* Widget grid → single column */
  .widget-grid { gap: 14px; }
  .widget-grid > *,
  .widget-grid > [data-span="3"],
  .widget-grid > [data-span="4"],
  .widget-grid > [data-span="5"],
  .widget-grid > [data-span="6"],
  .widget-grid > [data-span="7"],
  .widget-grid > [data-span="8"],
  .widget-grid > [data-span="12"] {
    grid-column: span 12;
  }

  /* KPI grid — 2 cols on tablet */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .kpi { padding: 16px 18px 14px; }
  .kpi-value { font-size: 28px; }

  /* Panels — smaller padding */
  .panel-head { padding: 14px 16px; }
  .panel-head h3 { font-size: 15px; }
  .panel-body { padding: 14px 16px; }

  /* Tables — denser */
  .pivot th, .pivot td { padding: 0 12px; }

  /* Tabs — horizontal scroll */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    white-space: nowrap;
    flex: none;
    padding: 10px 14px;
    font-size: 10.5px;
  }

  /* Filter bar — wrap nicely */
  .filterbar { gap: 8px; }
  .filterbar .input,
  .filterbar input.input { min-width: 0; flex: 1 1 200px; }

  /* Drawer — full width */
  .drawer {
    width: 100vw !important;
    max-width: 100vw;
    border-left: 0;
  }
  .drawer-head { padding: 16px 20px; }
  .drawer-body { padding: 20px; }
  .drawer-head .drawer-title { font-size: 16px; }

  /* Approval cards — reflow */
  .approval-card {
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    padding: 14px 16px !important;
  }
  .approval-card > div:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Sak row — show less. !important: flere brukssteder setter kolonnene inline
     (70px/80px 1fr auto auto), som ellers vinner over dette bruddet. */
  .sak-row {
    grid-template-columns: 1fr auto !important;
    padding: 12px 16px;
    gap: 10px;
  }
  .sak-row .sak-num,
  .sak-row > svg:last-child { display: none; }

  /* Lists */
  .list-item { padding: 12px 16px; }

  /* Quick tiles */
  .quick-tile { padding: 20px 18px 18px; min-height: 124px; }
  .quick-tile .qt-name { font-size: 14px; }

  /* Saker-subnav og segmentbrytere — horisontal scroll i stedet for brekk */
  .saker-subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .saker-subnav::-webkit-scrollbar { display: none; }
  .viewswitch-tab { white-space: nowrap; flex: none; }
  .viewswitch { max-width: 100%; overflow-x: auto; }

  /* Nøkkel/verdi-grid (sak-detaljer) — én kolonne */
  .kv-grid { grid-template-columns: 1fr; }

  /* Panel-hode kan ha tittel + undertekst + handlinger: la det brytes pent */
  .panel-head { flex-wrap: wrap; row-gap: 8px; }
}

/* === Modal (popup-redigering) === */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 20, 50, 0.55);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: 24px;
  animation: fade-in 140ms ease-out;
}
.modal-box {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(620px, 96vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: slide-in 160ms ease-out;
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-0);
}
.modal-body { padding: 22px 24px; overflow: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-0);
}

/* Stor redigeringsboks: mer PLASS (bredere boks), ikke større tekst. Innholdet
   legges i to kolonner (.modal-cols) for å utnytte bredden og redusere scrolling. */
.modal-box.lg { width: min(1040px, 96vw); max-height: 92vh; }
.modal-box.lg .modal-head { padding: 20px 28px; }
.modal-box.lg .modal-body { padding: 24px 28px; }
.modal-box.lg .modal-foot { padding: 16px 28px; }
.modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; align-items: start; }
@media (max-width: 760px) { .modal-cols { grid-template-columns: 1fr; } }

/* Utlån (RENT): produktbilder i 4:3 som i RENT, admin-tabeller */
.rent-thumb { aspect-ratio: 4 / 3; width: 100%; display: grid; place-items: center; background: #fff; border: 1px solid var(--border-soft); border-radius: 6px; overflow: hidden; color: var(--text-dim); }
.rent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rent-thumb--lg { border-radius: 8px; margin-bottom: 16px; }
.rent-thumb--sm { width: 64px; aspect-ratio: 4 / 3; border-radius: 4px; }
.rent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rent-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.rent-card:hover { border-color: var(--accent-line); }
.rent-admin .pivot td { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
.rent-admin .pivot select { font-size: 12px; padding: 3px 6px; }
.rent-taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.rent-taglist .chip button { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; color: inherit; font: inherit; line-height: 1; }
.rent-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 16px; }
@media (max-width: 760px) { .rent-admin .pivot { display: block; overflow-x: auto; } }

/* E-post-/møteleser (popup fra forsidens e-post- og kalenderbokser) */
.reader-box { width: min(920px, 96vw); max-height: 92vh; }
.reader-box .modal-head { align-items: flex-start; }
.reader-title { font-size: 17px; font-weight: 500; line-height: 1.3; margin: 6px 0 8px; overflow-wrap: anywhere; }
.reader-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; }
.reader-meta > div { display: contents; }
.reader-meta .mute { white-space: nowrap; }
.reader-body { padding: 0; display: flex; flex-direction: column; min-height: 240px; }
.reader-attendees, .reader-attachments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 24px 0; }
.reader-imgbar { display: flex; gap: 10px; align-items: center; padding: 10px 24px 0; font-size: 12px; color: var(--text-mute); }
.reader-imgbar .btn { margin-left: auto; }
.reader-frame { display: block; width: 100%; flex: 1; min-height: 52vh; border: 0; background: #fff; margin-top: 12px; }
.list-item[data-clickable="true"] { cursor: pointer; }
.list-item[data-clickable="true"]:focus-visible, .cal-ev[data-clickable="true"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-ev[data-clickable="true"] { cursor: pointer; }
.cal-ev[data-clickable="true"]:hover { background: var(--bg-2); }

/* FAQ-forslag i Meld sak */
.faq-suggest {
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-bg);
}
.faq-spark {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: white;
}
.faq-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-0);
  overflow: hidden;
}
.faq-card-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
}
.faq-card-head:hover { background: var(--bg-2); }
.faq-card-head .faq-title { flex: 1; font-size: 12.5px; font-weight: 500; }
.faq-body { padding: 0 14px 14px 34px; }
.faq-body ol { margin: 4px 0 0; padding-left: 18px; }
.faq-body li { font-size: 12.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 4px; }

/* Saker sub-nav (onboarding/offboarding flyttet under Saker) */
.saker-subnav {
  display: flex; gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}
.viewswitch-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 18px 14px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
}
.viewswitch-tab:hover { color: var(--text); }
.viewswitch-tab[data-active="true"] { color: var(--text); border-bottom-color: var(--accent); }
.viewswitch-tab .icon, .viewswitch-tab svg { opacity: 0.8; }

/* === Tilpassbar forside === */
.dash-bar { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.dash-cell { position: relative; }
.dash-cell--edit { outline: 1px dashed var(--border-strong); outline-offset: 4px; border-radius: var(--radius); cursor: grab; user-select: none; -webkit-user-select: none; }
.dash-cell--over { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Boksen som dras følger pekeren via transform (satt i JS) og må derfor IKKE ha
   transition på transform — da ville den slepe etter. Løftet over de andre, og
   gjennomsiktig for treff-testing så elementFromPoint finner boksen UNDER. */
.dash-cell--dragging {
  transition: none !important;
  z-index: 30; pointer-events: none;
  opacity: 0.94;
  filter: drop-shadow(0 18px 34px oklch(0 0 0 / 0.22));
}
.dash-cell--dragging > .panel { outline: 2px solid var(--accent); }
body.dash-dragging, body.dash-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
/* Håndtaket er det trygge stedet å dra fra på touch: touch-action none her lar
   nettleseren scrolle fra resten av boksen, men ikke stjele draget fra håndtaket. */
.dash-grip { touch-action: none; cursor: grab; }
/* Størrelse i redigering: dra i høyre kant (bredde), bunnen (høyde) eller
   hjørnet (begge). Kantene er brede, usynlige gripeflater med en tynn strek
   som blir tydelig på hover; hjørnet er en liten vinkel over begge kantene.
   touch-action none så fingeren kan dra uten at siden scroller. */
.dash-resize { position: absolute; z-index: 6; opacity: 0.35; touch-action: none; }
.dash-resize:hover, .dash-cell--edit:hover .dash-resize { opacity: 0.75; }
.dash-resize:hover { opacity: 1 !important; }
.dash-cell--edit .dash-resize { pointer-events: auto; }
.dash-resize--e { top: 10px; bottom: 22px; right: -5px; width: 12px; cursor: ew-resize; border-right: 2px solid var(--accent); padding-right: 3px; }
.dash-resize--s { left: 10px; right: 22px; bottom: -5px; height: 12px; cursor: ns-resize; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.dash-resize--se {
  right: 3px; bottom: 3px; z-index: 7;
  width: 18px; height: 18px; cursor: nwse-resize;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  border-bottom-right-radius: 5px;
}
/* Pekeren holder formen mens man drar, også utenfor håndtaket. */
body.dash-resizing-e, body.dash-resizing-e * { cursor: ew-resize !important; user-select: none !important; }
body.dash-resizing-s, body.dash-resizing-s * { cursor: ns-resize !important; user-select: none !important; }
body.dash-resizing-se, body.dash-resizing-se * { cursor: nwse-resize !important; user-select: none !important; }
.dash-size { font-variant-numeric: tabular-nums; }
/* Masonry: cellen får høyde fra innholdet (eller minHeight for H>1), IKKE fra
   grid-sporet. Derfor ingen height:100% her – det ville kollapset til 8px-sporet
   før JS rekker å sette rad-spennet. Panelet fyller cellen via flex. */
.dash-cell { transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .dash-cell { transition: none; } }
.dash-cell > .panel { flex: 1 1 auto; min-height: 0; }
.dash-cell--edit .panel { pointer-events: none; }
.dash-cell--edit .dash-tools { pointer-events: auto; }
.dash-tools {
  position: absolute; top: -12px; left: 8px; z-index: 5;
  display: flex; align-items: center; gap: 2px;
  background: var(--reitan-blue); color: var(--reitan-grey);
  border-radius: 999px; padding: 3px 5px;
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .dash-tools { background: var(--bg-3); }
.dash-tool {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-size: 10.5px; font-weight: 600; font-family: var(--font-mono);
  padding: 3px 6px; border-radius: 999px; min-width: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-tool:hover { background: oklch(1 0 0 / 0.15); }
.dash-tool[data-active="true"] { background: var(--reitan-bronze); color: var(--reitan-blue); }
.dash-sep { width: 1px; height: 14px; background: oklch(1 0 0 / 0.25); margin: 0 3px; }
.dash-tray { margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-0); }

/* === Mine apper: faste fliser i adaptivt grid === */
/* Kolonneantallet (--app-cols) settes i JS ut fra antall snarveier og boksens
   bredde. Flisene har FAST høyde og én-linjes navn, så ingen blir større enn en
   annen — uansett hvor langt navnet er. 1px gap på border-bakgrunn gir hårlinjer. */
.app-grid { display: grid; grid-template-columns: repeat(var(--app-cols, 4), minmax(0, 1fr)); gap: 1px; background: var(--border-soft); }
.app-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 98px; padding: 10px 8px; min-width: 0;
  background: var(--bg-0); color: inherit; text-decoration: none;
  transition: background 120ms;
}
.app-tile:hover { background: var(--bg-1); }
.app-tile-icon { display: grid; place-items: center; background: var(--bg-1); overflow: hidden; flex: none; }
.app-tile-icon img { object-fit: contain; display: block; }
.app-tile-letter { display: grid; place-items: center; font-weight: 600; flex: none; }
.app-tile-name { font-size: 12px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
@media (max-width: 760px) { .app-tile { height: 88px; } }

/* Bryter (på/av) i redigeringen av Mine apper. */
.switch {
  position: relative; width: 34px; height: 20px; flex: none;
  border: 0; border-radius: 999px; padding: 0; cursor: pointer;
  background: var(--border-strong); transition: background 140ms;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
  transition: transform 140ms;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }

/* === IT-saksbehandling (fullskjerm, Incident/Request) === */
.case { padding: 4px 0 24px; }
.case-head { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.case-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.case-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.case-side-foot { padding: 14px 16px; border-top: 1px solid var(--border-soft); }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.info-line { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-2); }
@media (max-width: 1040px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-side { position: static; }
}

.warn-banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid oklch(0.80 0.14 75 / 0.45);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  color: var(--text-mid);
}
.warn-banner svg { color: var(--amber); flex: none; margin-top: 1px; }

/* Sidemenyen følger meny-toggelen (data-nav) også i wizard/sak — den gamle
   tvangs-kollapsen (.app:has(.wizard) → 72px) låste grid-kolonnen slik at
   «Utvid meny» byttet data-nav uten at bredden fulgte med. */

/* === Onboarding-wizard (fullside) === */
.wizard {
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 4px 0 24px;
  display: flex;
  flex-direction: column;
  /* Ingen min-height: korte steg skal ikke strekkes så Neste-knappen havner
     under folden — foten er sticky og håndterer lange steg uansett. */
}
.wizard-head {
  padding: 22px 28px 0;
  border-bottom: 1px solid var(--border-soft);
}
.wizard-stepper {
  display: flex; gap: 0; flex-wrap: wrap;
  margin-top: 20px;
}
.wizard-step {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 22px 14px 0;
  background: none; border: 0; cursor: default;
  border-bottom: 2px solid transparent;
}
.wizard-step[data-state="done"] { cursor: pointer; }
.wizard-step[data-state="active"] { border-bottom-color: var(--accent); }
.wizard-step .ws-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-family: var(--font-serif); font-style: italic;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-mute);
}
.wizard-step[data-state="done"] .ws-num { background: var(--reitan-blue); color: white; border-color: var(--reitan-blue); }
[data-theme="dark"] .wizard-step[data-state="done"] .ws-num { background: var(--reitan-bronze); color: var(--reitan-blue); border-color: var(--reitan-bronze); }
.wizard-step[data-state="active"] .ws-num { background: var(--accent); color: white; border-color: var(--accent); }
.wizard-step .ws-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 500;
  color: var(--text-mute);
}
.wizard-step[data-state="active"] .ws-label { color: var(--text); }
.wizard-body {
  padding: 8px 28px 28px;
  flex: 1;
  width: 100%;
  position: relative;
  max-width: 1180px;
  /* Oppsummerings-panelet er position:absolute og bidrar ikke til høyden —
     uten denne klippes det av overflow:hidden på korte steg. */
  min-height: 430px;
}
@media (max-width: 1040px) { .wizard-body { min-height: 0; } }
.wizard-main { margin-right: 324px; min-width: 0; }
.wizard-summary {
  position: absolute; top: 8px; right: 28px;
  width: 296px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-0);
  overflow: hidden;
}
.wizard-summary .ws-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em;
}
.wizard-summary .ws-body { padding: 16px 18px; }
.wizard-summary .ws-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12px; }
.wizard-summary .ws-row .ws-label { color: var(--text-mute); }
.wizard-summary .ws-row .ws-val { font-family: var(--font-mono); text-align: right; }
.wizard-summary .ws-row--total { border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: 10px; font-weight: 600; }
@media (max-width: 1040px) {
  .wizard-main { margin-right: 0; }
  .wizard-summary { display: none; }
}
.wizard-foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  border-top: 1px solid var(--border-soft);
  background: oklch(from var(--bg-0) l c h / 0.92);
  backdrop-filter: blur(8px);
}
@media (max-width: 920px) {
  .wizard-head { padding: 16px 16px 0; }
  .wizard-body { padding: 8px 16px 24px; }
  .wizard-foot { padding: 12px 16px; }
  .wizard-stepper { gap: 0; }
  .wizard-step { padding: 10px 14px 12px 0; }
  .wizard-step .ws-label { display: none; }
  .wizard-step[data-state="active"] .ws-label { display: inline; }
}

/* === Brukerbehandling responsive === */
@media (max-width: 920px) {
  .bb-card-grid {
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
  }
  .bb-card-grid > .bb-progress {
    grid-column: 1 / -1;
    width: 100% !important;
  }
  .bb-card-grid > .row:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .bb-drawer-head { flex-wrap: wrap; }
  .bb-drawer-head > div:last-child { text-align: left !important; }
}

@media (max-width: 480px) {
  .topbar-search { display: none; }
  .menu-toggle { width: 36px; height: 36px; }
  .content { padding: 14px 12px 80px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .hero-content { padding: 24px 18px; }
  .hero-greeting { font-size: 28px; }
  .hero-meta { gap: 10px; }
  .page-title { font-size: 24px; }
  .page-title .num,
  .page-title .accent-num { display: block; margin-left: 0; margin-top: 4px; font-size: 18px; }
  .crumbs { font-size: 10px; }
  .news-thumb { display: none; }
  /* !important: forsiden setter «1fr 120px» inline — uten denne står det igjen
     en tom kolonne der miniatyrbildet var. */
  .news-item { grid-template-columns: 1fr !important; }
  /* Stack steps */
  .step { grid-template-columns: 30px 1fr; }
  .step > :last-child { grid-column: 1 / -1; justify-self: end; }

  /* Toast — full bredde med marger, i stedet for sentrert boks som kan klippes */
  .toast {
    left: 12px; right: 12px;
    transform: none;
    width: auto;
    justify-content: center;
  }

  /* Modal — utnytt hele skjermen */
  .modal-overlay { padding: 10px; }
  .modal-box { max-height: calc(100dvh - 20px); }
  .modal-head { padding: 16px 16px; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px; flex-wrap: wrap; }
  .modal-box.lg .modal-head { padding: 16px 16px; }
  .modal-box.lg .modal-body { padding: 16px; }
  .modal-box.lg .modal-foot { padding: 12px 16px; }

  /* Drawer — mindre padding, mer innhold */
  .drawer-head { padding: 14px 16px; }
  .drawer-body { padding: 16px 14px; }

  /* Filterbar — også select-bokser skal krympe/vokse */
  .filterbar .select,
  .filterbar select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
}

/* iOS zoomer automatisk inn på skjemafelter med skrift under 16px — hold 16px
   på små skjermer så fokus ikke hopper. !important slår inline-fontSize satt
   i JSX (f.eks. textareaene for lokalkunnskap og varsler). */
@media (max-width: 600px) {
  input, select, textarea,
  .input, .select,
  .field input, .field select, .field textarea,
  .topbar-search input { font-size: 16px !important; }
}

/* Touch-flater — større treffområder på berøringsskjermer */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn[data-size="sm"] { min-height: 36px; }
  .nav-item { padding-top: 11px; padding-bottom: 11px; }
  .tab, .viewswitch-tab { padding-top: 12px; padding-bottom: 12px; }
  .menu-toggle { width: 42px; height: 42px; }
  .faq-card-head { padding: 12px; }
}

/* Kant-til-kant-mobiler (notch/hjemmeindikator): respekter safe area */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 920px) {
    .content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
    .wizard-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .sidebar { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .drawer-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  }
}

/* ── Organisasjonskart: top-down tre ──────────────────────────────────────── */
/* Forbindelseslinjene tegnes som SVG-paths i .orgchart-lines (beregnet fra
   kortenes faktiske posisjoner), IKKE som CSS-pseudo-borders: 1px borders
   forsvant i sub-piksel-rendering når kartet ble skalert ned (store kart
   auto-tilpasses gjerne til 30-50 %). vector-effect: non-scaling-stroke
   holder strøkene på ~1.25 fysiske piksler uansett zoomnivå. */
.orgchart-scroll { overflow-x: auto; padding: 18px 8px 10px; }
.orgchart { display: inline-block; min-width: 100%; position: relative; }
.orgchart-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orgchart-lines path { fill: none; stroke: var(--border); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.orgchart ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 26px 0 0; position: relative; }
.orgchart li { list-style: none; text-align: center; position: relative; padding: 26px 12px 0; }
/* rot-nivå: ingen luft for linjer over toppnoden(e) */
.orgchart-root { padding-top: 0; }
.orgchart-root > li { padding-top: 0; }

/* Horisontal retning (venstre → høyre): hver node er en flex-rad med kortet
   til venstre og barna som kolonne til høyre, vertikalt sentrert mot kortet.
   Forbindelseslinjene beregnes med egen albue-form i computeLines. */
.orgchart[data-orient="h"] ul { flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0; }
.orgchart[data-orient="h"] li { display: flex; flex-direction: row; align-items: center; text-align: left; padding: 7px 0; }
.orgchart[data-orient="h"] li > .org-card { flex: none; }
.orgchart[data-orient="h"] li > ul { margin-left: 44px; padding: 0; }
.orgchart[data-orient="h"] .org-toggle { margin-top: 5px; }
.orgchart[data-orient="h"] .orgchart-root { align-items: flex-start; }
.orgchart[data-orient="h"] .orgchart-root > li { padding: 7px 0; }

.org-card {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  position: relative; box-sizing: border-box; width: 210px; min-height: 128px;
  padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-1);
}
.org-card.is-me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.org-photo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
/* Blad-stabling: medarbeidere uten egne underordnede listes VERTIKALT under
   lederen som én felles gren (to kolonner når det er mange) — hindrer at kartet
   vokser horisontalt for hver åpnede leder. */
/* Fast kortbredde (ikke fr/minmax): kolonnene kunne krympe til 0 mens kortene
   hadde min-width — da fløt kortene UT av sporet og overlappet nabo-grenene
   på dype nivåer. Med auto-spor + fast bredde blir grenens bredde alltid
   lik stabelens faktiske bredde, og forbindelseslinjene stemmer. */
.org-stack { display: grid; grid-template-columns: auto; gap: 6px; justify-items: start; text-align: left; }
.org-stack[data-cols="2"] { grid-template-columns: auto auto; }
.org-card.org-leaf { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; width: 210px; min-width: 0; max-width: none; min-height: 0; padding: 8px 12px; }
.org-leaf .org-card-name { font-size: 12px; text-align: left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-leaf .org-card-title { text-align: left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-card-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-card-title { font-size: 11px; color: var(--text-mute); line-height: 1.2; max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-card-dept { font-size: 10.5px; color: var(--text-dim); max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-toggle {
  margin-top: 7px; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 10px; border: 1px solid var(--border-soft); border-radius: 999px;
  background: var(--bg-0); color: var(--text-mute); cursor: pointer;
}
.org-toggle:hover { background: var(--bg-2); color: var(--text); }

/* ── REsolve-scenen: fullskjerm IT-hjelp ──────────────────────────────────── */
/* Stor orb sentrert i «hero»-fasen; når samtalen starter (.is-active) krymper
   orben og alt komprimeres til en samtaleflate. Drivende gradient-flekker i
   bakgrunnen gir liv uten å forstyrre (og slås av ved prefers-reduced-motion). */
.resolve-stage {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bg-0);
  display: flex; flex-direction: column;
  animation: rs-stage-in 280ms ease;
  overflow: hidden;
}
@keyframes rs-stage-in { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
.resolve-stage-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rs-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; animation: rs-drift 26s ease-in-out infinite alternate; }
.rs-blob1 { width: 480px; height: 480px; background: var(--accent); top: -160px; right: -120px; opacity: 0.16; }
.rs-blob2 { width: 420px; height: 420px; background: var(--teal, #4a8a8a); bottom: -140px; left: -140px; opacity: 0.10; animation-delay: -13s; }
@keyframes rs-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-50px, 40px) scale(1.18); } }

.resolve-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; position: relative; z-index: 1; }
/* overscroll-behavior: contain — hindrer «scroll chaining» på mobil: når
   chatten når topp/bunn skal IKKE siden bak begynne å scrolle (man kunne
   scrolle seg ut av REsolve på iPhone). Kombineres med body-lås i saker.jsx. */
.resolve-stage-scroll { flex: 1; overflow-y: auto; position: relative; z-index: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.resolve-stage-body { max-width: 680px; margin: 0 auto; padding: 0 20px 48px; display: flex; flex-direction: column; gap: 14px; }

.resolve-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 9vh; transition: padding-top 450ms ease; }
.resolve-stage-body.is-active .resolve-hero { padding-top: 4px; }
.resolve-orb { transition: transform 450ms ease, margin 450ms ease; will-change: transform; }
.resolve-stage-body.is-active .resolve-orb { transform: scale(0.5); margin: -22px 0 -18px; }
.resolve-title { font-size: 28px; font-weight: 500; margin: 14px 0 4px; transition: font-size 450ms ease, margin 450ms ease; letter-spacing: 0.02em; }
.resolve-stage-body.is-active .resolve-title { font-size: 16px; margin: 2px 0 0; }
.resolve-status { color: var(--text-mute); font-size: 12.5px; min-height: 18px; }

.resolve-input-card {
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 14px 16px 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.08));
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.resolve-input-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(172,123,80,0.15)); }
.resolve-input-card textarea {
  width: 100%; border: 0; background: transparent; resize: none; outline: none;
  font: inherit; font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  min-height: 76px; color: var(--text); padding: 0; margin-bottom: 6px;
}

.rs-card { background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 16px; }
.rs-appear { animation: rs-appear 300ms ease both; }
@keyframes rs-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rs-bubble {
  max-width: 86%; align-self: flex-start;
  background: var(--bg-0); border: 1px solid var(--border-soft);
  border-radius: 14px 14px 14px 4px; padding: 10px 14px;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: var(--text-mid);
}
.rs-bubble.is-user {
  align-self: flex-end; color: var(--text);
  background: var(--accent-bg, rgba(172,123,80,0.10)); border-color: var(--accent-line, var(--border-soft));
  border-radius: 14px 14px 4px 14px;
}

/* Skrivemaskin-markør mens REsolve «skriver» svaret ord for ord */
.rs-caret {
  display: inline-block; width: 2px; height: 1em; background: currentColor;
  margin-left: 2px; vertical-align: -0.15em; animation: rs-caret-blink 0.8s step-end infinite;
}
@keyframes rs-caret-blink { 50% { opacity: 0; } }
.rs-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 10px 14px; background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: 14px 14px 14px 4px; }
.rs-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: rs-bounce 1.1s ease-in-out infinite; }
.rs-typing span:nth-child(2) { animation-delay: 0.15s; }
.rs-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rs-bounce { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.resolve-chatrow { display: flex; gap: 8px; }
.resolve-chatrow input, .resolve-chatrow textarea {
  flex: 1; min-width: 0; background: var(--bg-1); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 13px; color: var(--text); outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.resolve-chatrow input:focus, .resolve-chatrow textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(172,123,80,0.15)); }
.resolve-chatrow textarea { border-radius: 19px; }
.resolve-chatrow .btn { border-radius: 999px; align-self: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .resolve-stage, .rs-blob, .rs-appear, .rs-typing span, .rs-caret { animation: none; }
  .resolve-hero, .resolve-orb, .resolve-title { transition: none; }
}
@media (max-width: 600px) {
  .resolve-hero { padding-top: 5vh; }
  .resolve-title { font-size: 22px; }
}

/* ── Splash / loading-skjerm (Reitan-emblem: sveipende bue + ringer + drivende lys) ── */
@keyframes re-spin-rev { to { transform: rotate(-360deg); } }
@keyframes re-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes re-bigripple {
  0%   { transform: translate(-50%, -50%) scale(0.32); opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
@keyframes re-drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -44px); } }
@keyframes re-drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-52px, 40px); } }

.re-splash {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9999;
  background: #F6F1E9; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.re-splash-blob1 { position: absolute; width: 42vw; height: 42vw; left: 8%; top: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(182,134,98,0.16), transparent 68%); filter: blur(8px); animation: re-drift1 13s ease-in-out infinite; }
.re-splash-blob2 { position: absolute; width: 38vw; height: 38vw; right: 6%; bottom: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(172,123,80,0.13), transparent 68%); filter: blur(8px); animation: re-drift2 16s ease-in-out infinite; }
.re-splash-core { position: relative; width: 204px; height: 204px; display: flex; align-items: center; justify-content: center; }
.re-splash-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(172,123,80,0.4); transform: translate(-50%,-50%) scale(0.32); animation: re-bigripple 7.8s ease-out infinite both; }
.re-splash-arc { position: absolute; animation: re-spin-rev 2.6s cubic-bezier(0.55,0.1,0.4,0.95) infinite; }
.re-splash-emblem { width: 120px; height: 120px; animation: re-breathe 4s ease-in-out infinite; }
.re-splash-wordmark { width: 196px; height: auto; margin-top: -8px; }
@media (max-width: 480px) {
  .re-splash-core { width: 170px; height: 170px; }
  .re-splash-ring { width: 250px; height: 250px; }
  .re-splash-emblem { width: 100px; height: 100px; }
  .re-splash-wordmark { width: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .re-splash-blob1, .re-splash-blob2, .re-splash-arc, .re-splash-emblem { animation: none !important; }
  .re-splash-ring { animation: none !important; opacity: 0; }
}

/* ============================================================================
   REsolve — animert orbit-ikon (SVG + CSS). Kilde: design-handoff (høy fidelitet).
   Tilstand settes med data-state på rot-<svg>: idle|listen|think|ready|loading|error.
   Geometri: viewBox 0 0 48 48, ytre r=18 (C=113.097), indre r=12.5 (C=78.54).
   ============================================================================ */
.resolve-icon {
  --re-ring: #b58763;          /* Reitan bronse */
  --re-tip: #e0b48f;           /* lysere bronse, orbit-punktet */
  --re-muted: #8c8194;         /* dempet, kun error */
  --re-weight: 2.4;
  --re-weight-inner: 1.92;
  --re-speed: 1;
  display: block;
  overflow: visible;
}
.resolve-icon__outer, .resolve-icon__inner,
.resolve-icon__orbit, .resolve-icon__orbit-inner { transform-origin: 24px 24px; }
.resolve-icon__dot { transform-origin: 42px 24px; }
.resolve-icon__outer { stroke: var(--re-ring); stroke-width: var(--re-weight); fill: none; stroke-linecap: round; }
.resolve-icon__inner { stroke: var(--re-ring); stroke-width: var(--re-weight-inner); fill: none; stroke-linecap: round; }
.resolve-icon__dot > circle { fill: var(--re-tip); }

@keyframes re-spin     { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes re-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes re-pulse    { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .8; } }
@keyframes re-breathe  { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes re-shake    { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.1px); } 75% { transform: translateX(1.1px); } }

/* 01 idle */
.resolve-icon[data-state="idle"] .resolve-icon__outer { stroke-dasharray: 88 26; opacity: 1; animation: re-spin calc(9s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="idle"] .resolve-icon__inner { stroke-dasharray: 45 33; opacity: .5; animation: re-spin-rev calc(14s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="idle"] .resolve-icon__orbit { animation: re-spin calc(9s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="idle"] .resolve-icon__dot   { animation: re-breathe calc(3.4s / var(--re-speed)) ease-in-out infinite; }
/* 02 listen */
.resolve-icon[data-state="listen"] .resolve-icon__outer { stroke-dasharray: 80 34; opacity: 1; animation: re-spin calc(5s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="listen"] .resolve-icon__inner { stroke-dasharray: 38 41; opacity: .6; animation: re-spin-rev calc(8s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="listen"] .resolve-icon__orbit { animation: re-spin calc(5s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="listen"] .resolve-icon__dot   { animation: re-pulse calc(1.3s / var(--re-speed)) ease-in-out infinite; }
/* 03 think (+ indre punkt) */
.resolve-icon[data-state="think"] .resolve-icon__outer { stroke-dasharray: 62 52; opacity: 1; animation: re-spin calc(1.1s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="think"] .resolve-icon__inner { stroke-dasharray: 30 49; opacity: .85; animation: re-spin-rev calc(.8s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="think"] .resolve-icon__orbit { animation: re-spin calc(1.1s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="think"] .resolve-icon__orbit-inner { display: block; animation: re-spin-rev calc(.8s / var(--re-speed)) linear infinite; }
.resolve-icon[data-state="think"] .resolve-icon__dot   { animation: re-pulse calc(.9s / var(--re-speed)) ease-in-out infinite; }
/* 04 ready */
.resolve-icon[data-state="ready"] .resolve-icon__outer { stroke-dasharray: 113.097 0; opacity: 1; animation: none; }
.resolve-icon[data-state="ready"] .resolve-icon__inner { stroke-dasharray: 78.54 0; opacity: .5; animation: none; }
.resolve-icon[data-state="ready"] .resolve-icon__orbit { animation: none; }
.resolve-icon[data-state="ready"] .resolve-icon__dot   { animation: re-pulse calc(2.4s / var(--re-speed)) ease-in-out infinite; }
/* 05 loading */
.resolve-icon[data-state="loading"] .resolve-icon__outer { stroke-dasharray: 30 84; opacity: 1; animation: re-spin calc(1.8s / var(--re-speed)) cubic-bezier(.65,0,.35,1) infinite; }
.resolve-icon[data-state="loading"] .resolve-icon__inner { stroke-dasharray: 20 59; opacity: .7; animation: re-spin-rev calc(2.6s / var(--re-speed)) cubic-bezier(.65,0,.35,1) infinite; }
.resolve-icon[data-state="loading"] .resolve-icon__orbit { animation: re-spin calc(1.8s / var(--re-speed)) cubic-bezier(.65,0,.35,1) infinite; }
.resolve-icon[data-state="loading"] .resolve-icon__orbit-inner { display: block; animation: re-spin-rev calc(2.6s / var(--re-speed)) cubic-bezier(.65,0,.35,1) infinite; }
.resolve-icon[data-state="loading"] .resolve-icon__dot   { animation: none; }
/* 06 error / ingen løsning */
.resolve-icon[data-state="error"] { animation: re-shake .45s ease-in-out 2; }
.resolve-icon[data-state="error"] .resolve-icon__outer { stroke: var(--re-muted); stroke-dasharray: 16 12; opacity: .8; animation: none; }
.resolve-icon[data-state="error"] .resolve-icon__inner { stroke: var(--re-muted); stroke-dasharray: 10 10; opacity: .4; animation: none; }
.resolve-icon[data-state="error"] .resolve-icon__dot > circle { fill: var(--re-muted); }
.resolve-icon[data-state="error"] .resolve-icon__orbit { animation: none; }
.resolve-icon[data-state="error"] .resolve-icon__dot   { animation: re-breathe calc(2s / var(--re-speed)) ease-in-out infinite; }

/* Indre orbit-punkt skjult som standard (vises i think/loading over) */
.resolve-icon__orbit-inner { display: none; }

/* Størrelsesklasser — tykner strek når ikonet er lite */
.resolve-icon--16 { --re-weight: 5.5; }
.resolve-icon--24 { --re-weight: 4.4; }
.resolve-icon--16 .resolve-icon__inner, .resolve-icon--24 .resolve-icon__inner { display: none; }
.resolve-icon--32 { --re-weight: 3.4; --re-weight-inner: 2.8; }
.resolve-icon--64 { --re-weight: 2.6; --re-weight-inner: 2.1; }

/* Glød: skjult som standard (leses som flekk på lys flate) — vis kun i mørkt tema, 32px+ */
.resolve-icon__glow { display: none; }
[data-theme="dark"] .resolve-icon--32 .resolve-icon__glow,
[data-theme="dark"] .resolve-icon--64 .resolve-icon__glow { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .resolve-icon *, .resolve-icon { animation: none !important; }
  .resolve-icon__outer { stroke-dasharray: 113.097 0 !important; }
  .resolve-icon__inner { stroke-dasharray: 78.54 0 !important; }
}

/* ── Varslingssenter (bjella i topbaren) ─────────────────────────────────── */
.notif-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--red); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 45;
  width: 340px; max-width: calc(100vw - 24px);
  box-shadow: var(--shadow-lg); padding: 0; overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border-soft);
}
.notif-list { max-height: min(52vh, 420px); overflow-y: auto; }
.notif-item {
  display: flex; gap: 9px; width: 100%; text-align: left;
  padding: 10px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; font: inherit; color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-2); }
.notif-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; background: transparent; }
.notif-item[data-unread="true"] .notif-dot { background: var(--accent-deep); }
.notif-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-title { font-weight: 650; font-size: 12.5px; color: var(--text); }
.notif-item[data-unread="false"] .notif-title { font-weight: 500; color: var(--text-mid); }
.notif-text {
  font-size: 12px; color: var(--text-mute); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-time { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.notif-foot { padding: 10px 12px; border-top: 1px solid var(--border-soft); background: var(--bg-1); }

/* ── FAQ-artikkel i popup (REsolve «Les hele artikkelen») ────────────────── */
.faq-article { font-size: 13px; line-height: 1.65; color: var(--text-mid); }
.faq-article p { margin: 0 0 10px; }
.faq-article ul, .faq-article ol { margin: 0 0 10px; padding-left: 22px; }
.faq-article li { margin-bottom: 4px; }
.faq-article h1, .faq-article h2, .faq-article h3, .faq-article h4 { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.faq-article a { color: var(--accent-deep); }
.faq-article table { border-collapse: collapse; margin: 0 0 10px; max-width: 100%; }
.faq-article td, .faq-article th { border: 1px solid var(--border-soft); padding: 4px 8px; font-size: 12px; }
.faq-article pre, .faq-article code { background: var(--bg-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; }

/* ── «I dag»-tidslinjen på forsiden ──────────────────────────────────────── */
.cal-day {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 22px 6px; background: var(--bg-1);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); border-bottom: 1px solid var(--border-soft);
}
.cal-ev {
  display: grid; grid-template-columns: 42px 9px 1fr auto; gap: 10px;
  align-items: start; padding: 9px 22px; position: relative;
}
/* «Bli med»-knapp for Teams-møter — holdes kompakt så raden ikke vokser */
.cal-join { align-self: center; white-space: nowrap; flex-shrink: 0; }
/* tidslinje-streken gjennom prikkene (22 padding + 42 tid + 10 gap + midt i prikken) */
.cal-ev::before { content: ""; position: absolute; left: 78px; top: 0; bottom: 0; width: 1px; background: var(--border-soft); }
.cal-time { font-size: 12.5px; color: var(--accent-deep); }
.cal-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 4px;
  background: var(--accent-deep); position: relative; z-index: 1;
  box-shadow: 0 0 0 2px var(--bg-1);
}
/* forbi: dempet — man ser hvor i dagen man er */
.cal-ev[data-state="past"] { opacity: 0.45; }
.cal-ev[data-state="past"] .cal-dot { background: var(--text-dim); }
.cal-ev[data-state="past"] .cal-time { color: var(--text-dim); }
/* pågår: grønn puls-prikk */
.cal-ev[data-state="ongoing"] .cal-dot { background: var(--green, #2e7d32); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.18); }
.cal-ev[data-state="ongoing"] .li-title { font-weight: 600; }

/* .drawer-overlay manglet i CSS-en: den var en ustylet div uten flate, så
   klikk utenfor skuffen traff siden bak og lukket ingenting. Nå dekker den
   skjermen som maske (samme uttrykk som .drawer-mask) og tar imot
   lukk-klikket (onClick={onClose} i JSX-en). */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(20, 20, 50, 0.55); z-index: 50;
  animation: fade-in 160ms ease-out;
  backdrop-filter: blur(2px);
}

/* Godkjenninger → «Alle» (IT): klikkbare rader */
table.godkj-alle tbody tr[data-clickable] { cursor: pointer; }
table.godkj-alle tbody tr[data-clickable]:hover td { background: var(--bg-2); }
table.godkj-alle td { vertical-align: top; }

/* ── Arrangement ─────────────────────────────────────────────────────────── */
.arr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.arr-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
.arr-card:hover { border-color: var(--accent-line); }
.arr-card .arr-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.arr-thumb { aspect-ratio: 16 / 9; width: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--bg-2), var(--bg-1, var(--bg-2))); color: var(--text-dim); overflow: hidden; }
.arr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arr-thumb--hero { border-radius: 10px; margin-bottom: 16px; max-height: 320px; }

/* === Fokuspunkt i heading-bildet ========================================== */
/* Bildet vises i 16:9, så et høyere eller bredere bilde beskjæres. Her ser
   arrangøren hele bildet med utsnittet lagt over, og flytter det dit motivet er.
   Alt utenfor utsnittet dimmes med en stor ytre skygge på selve ruten. */
.arr-focus { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.arr-focus-bilde { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
/* Flaten må dekke bildet helt og ikke mer: utsnittet plasseres i prosent av
   den, så en ramme som er bredere enn bildet ville flyttet utsnittet feil.
   Derfor får flaten bildets eget sideforhold (og en maksbredde som holder
   høyden nede) satt inline når bildet er lastet. */
.arr-focus-flate {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg-2); line-height: 0;
  display: block; width: 100%;
}
.arr-focus-flate.is-valgbar { cursor: crosshair; }
.arr-focus-flate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arr-focus-flate img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.arr-focus-rute {
  position: absolute; box-sizing: border-box; pointer-events: none;
  border: 2px solid #fff; border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
}
.arr-focus-prikk {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.arr-focus-hjelp { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; }
.arr-focus-side { flex: 0 1 220px; min-width: 180px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.arr-focus-merke { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.arr-focus-fasit { border-radius: var(--radius-lg); border: 1px solid var(--border-soft); }
.arr-focus-side .btn { align-self: flex-start; }
.arr-date { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.arr-meta { font-size: 12px; color: var(--text-mute); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* === Allergier og hensyn ================================================== */
/* Arrangørens kort. Informasjonen er matsikkerhet og skal ikke kunne overses,
   men den trenger ikke skrike: rolig flate, tydelig farget venstrekant og et
   ikon. Lange lister får plass — teksten brytes og linjeskift bevares. */
.arr-allergy {
  border: 1px solid var(--border-soft); border-left: 4px solid var(--red);
  border-radius: var(--radius-lg); padding: 16px 18px;
  background: var(--bg-1); margin-bottom: 16px;
}
.arr-allergy .arr-allergy-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; color: var(--text); font-size: 14px; margin-bottom: 4px;
}
.arr-allergy .arr-allergy-head .icon { color: var(--red); }
.arr-allergy .arr-allergy-sub { font-size: 12px; color: var(--text-mute); margin-bottom: 12px; }
.arr-allergy-rad {
  display: grid; grid-template-columns: 180px 1fr; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--border-soft); align-items: start;
}
@media (max-width: 720px) { .arr-allergy-rad { grid-template-columns: 1fr; gap: 2px; } }
.arr-allergy-rad .navn { font-weight: 600; font-size: 13px; }
.arr-allergy-rad .tekst { font-size: 13.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
/* Innmelderens eget felt: helt vanlig felt, ingen rød ramme. Lange lister skal
   være behagelige å skrive i, så feltet er høyt og kan dras større. */
.arr-allergy-input textarea { min-height: 110px; }
/* «Min status» på arrangementet: status øverst, hovedhandlingen i full bredde,
   øvrige valg under en skillelinje. Venstrestilt — den gamle høyrestilte
   varianten ble rotete så snart forklaringen brøt linje. */
.arr-status { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.arr-status-topp { display: flex; gap: 6px; flex-wrap: wrap; }
.arr-status-cta { width: 100%; justify-content: center; }
.arr-status-under { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.arr-status-valg { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) { .arr-status-valg .btn { flex: 1 1 auto; justify-content: center; } }
.arr-teller { font-size: 11px; color: var(--text-dim); text-align: right; margin-top: 4px; }
/* Allergikolonnen i påmeldte-tabellen: lange lister skal brytes og beholde
   linjeskiftene, ikke renne ut av tabellen på én linje. */
.pivot td.arr-td-allergi { white-space: pre-line; overflow-wrap: anywhere; min-width: 220px; max-width: 340px; }
.arr-teller[data-nesten="true"] { color: var(--amber); }
.arr-feed .arr-post { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.arr-feed .arr-post:last-child { border-bottom: 0; }
.arr-post-meta { font-size: 11.5px; color: var(--text-mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.arr-post-text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.arr-q { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.arr-q:last-child { border-bottom: 0; }
/* Alternativene: hele raden er klikkbar, med rolig hover — lettere å treffe på
   mobil enn en 13 px firkant, og ser ut som moderne valglister. */
.arr-opt { display: flex; gap: 10px; align-items: center; font-size: 13.5px; cursor: pointer; }
.arr-q label.arr-opt {
  padding: 8px 10px; margin: 2px 0 0; border-radius: 8px;
  border: 1px solid transparent; transition: background 120ms, border-color 120ms;
}
.arr-q label.arr-opt:hover { background: var(--bg-2); }
.arr-q label.arr-opt:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-line); }
.arr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.arr-chips button { border: 1px solid var(--border-soft); background: var(--bg-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text); }
.arr-chips button[data-on="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Opprett/rediger arrangement i fullskjerm: én lesbar spalte med panelene under
   hverandre, i stedet for den gamle 720 px skuffen. */
.arr-form { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.arr-form .form-grid { align-items: end; gap: 16px; }
@media (max-width: 720px) { .arr-form .form-grid { grid-template-columns: 1fr !important; } }

/* === Dato og tid: DD/MM/YYYY HH:MM ======================================= */
/* Eget felt fordi <input type="datetime-local"> formaterer etter nettleserens
   språk (engelsk nettleser ga «08/20/2026, 04:00 PM») og ikke kan styres. */
.arr-dt { position: relative; }
.arr-dt-input { width: 100%; padding-right: 44px !important; font-variant-numeric: tabular-nums; }
.arr-dt-input[aria-invalid="true"] { border-color: var(--red) !important; }
.arr-dt-btn {
  position: absolute; top: 5px; right: 6px; width: 36px; height: 36px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--text-mute);
}
.arr-dt-btn:hover { background: var(--bg-2); color: var(--text); }
.arr-dt-feil { color: var(--red); font-size: 11.5px; margin-top: 6px; }
/* Kalenderen ligger fixed: panelene har overflow: hidden og ville ellers klippe den. */
.arr-dt-pop {
  position: fixed; z-index: 60; width: 300px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.arr-dt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.arr-dt-head span { font-size: 13px; font-weight: 500; }
.arr-dt-head button {
  background: transparent; border: 1px solid var(--border-soft); border-radius: var(--radius);
  width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; color: var(--text-mid);
}
.arr-dt-head button:hover { background: var(--bg-2); color: var(--text); }
.arr-dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.arr-dt-uker span {
  text-align: center; font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 4px;
}
.arr-dt-grid button {
  height: 34px; border: 0; background: transparent; border-radius: var(--radius);
  font-size: 12.5px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums;
}
.arr-dt-grid button:hover { background: var(--bg-2); }
.arr-dt-grid button[data-idag="true"] { box-shadow: inset 0 0 0 1px var(--accent-line); }
.arr-dt-grid button[data-valgt="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.arr-dt-tid {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 12px;
}
.arr-dt-tid select {
  min-height: 34px !important; padding: 6px 26px 6px 10px !important;
  width: auto !important; font-variant-numeric: tabular-nums;
}
/* Knappene får bevisst egen rad: «Klokke 16 : 00» + to knapper er for bredt for
   300 px, og halv-wrappet så den siste knappen delvis utenfor. */
.arr-dt-knapper { display: flex; gap: 6px; flex-basis: 100%; justify-content: flex-end; margin-top: 4px; }

/* === Skjemafelt i arrangement-modulen (.arr-fields) ====================== */
/* Nakne <input>/<select>/<textarea> har ingen app-stil — de arver nettleserens
   firkantede standard, som stikker seg ut i et stort skjema. Appens .input er på
   sin side laget for tettpakkede filterlinjer (8 px padding, 12,5 px tekst).
   Her er det et skjema man sitter og fyller ut: romsligere flater, mykere
   hjørner (--radius-lg) og en tydelig fokusring. Feltet ligger på --bg-1 inne i
   et --bg-0-panel, så det løfter seg litt fra underlaget.
   Inline width (f.eks. små antallsfelt) vinner fortsatt over width: 100 %. */
.arr-fields input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.arr-fields select,
.arr-fields textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  accent-color: var(--accent);
  min-width: 0;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.arr-fields input::placeholder,
.arr-fields textarea::placeholder { color: var(--text-dim); }
/* Avkryssing og radio tegnes selv. Nettleserens egne bokser er små, firkantede
   og blå — de så umoderne ut ved siden av de runde feltene, og fargen kunne
   ikke settes til merkefargen med accent-color alene. */
.arr-fields input[type="checkbox"],
.arr-fields input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; min-height: 0; min-width: 0; padding: 0; margin: 0;
  background: var(--bg-1);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.arr-fields input[type="radio"] { border-radius: 50%; }
.arr-fields input[type="checkbox"]:hover:not(:disabled),
.arr-fields input[type="radio"]:hover:not(:disabled) { border-color: var(--accent); }
.arr-fields input[type="checkbox"]:focus-visible,
.arr-fields input[type="radio"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.arr-fields input[type="checkbox"]:checked,
.arr-fields input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
/* Haken er en hvit SVG; prikken i radioen lages med en innskygge. */
.arr-fields input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.arr-fields input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--bg-1); }
.arr-fields input[type="checkbox"]:disabled,
.arr-fields input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }
.arr-fields input:hover:not(:focus),
.arr-fields select:hover:not(:focus),
.arr-fields textarea:hover:not(:focus) { border-color: var(--border-strong); }
.arr-fields input:focus,
.arr-fields select:focus,
.arr-fields textarea:focus {
  outline: none;
  background: var(--bg-0);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.arr-fields textarea { line-height: 1.6; resize: vertical; }
/* Egen nedtrekkspil — nettleserens egen er liten og firkantet, og plasseres
   ulikt per plattform. Fargen er dempet grå og byttes i mørk modus. */
.arr-fields select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e94' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
[data-theme="dark"] .arr-fields select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Dato/tid: kalenderikonet skal være synlig og klikkbart, ikke gjemt i kanten. */
.arr-fields input[type="date"],
.arr-fields input[type="time"],
.arr-fields input[type="datetime-local"] { padding-right: 12px; }
.arr-fields input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; padding: 2px; }
.arr-fields input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Feltetiketten («Tittel *») får luft ned til feltet. */
.arr-fields label > .mute { display: block; margin-bottom: 7px; font-size: 12px; color: var(--text-mute); }
/* Søkeresultatene under adresse- og gruppefeltene følger samme runding. */
.arr-fields .list {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-1); overflow: hidden;
}
.arr-fields .list .list-item { padding: 10px 14px; }
.arr-fields .list .list-item:last-child { border-bottom: 0; }
.arr-fields .list button.list-item:hover { background: var(--bg-2); }
.arr-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.arr-qbuilder .arr-qrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
@media (max-width: 720px) { .arr-qbuilder .arr-qrow { grid-template-columns: 1fr auto; } }