/* ============================================================
   SJF CRM — Design System
   Kombinerer tokens + nerve.css + sdj.css fra design handoff
   Primærfarve: SDJ Navy #1D3461 (erstatter SVES rød)
   Fonte: IBM Plex Sans + IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- SDJ Brand (navy) ---------- */
  --ses-red:        #1D3461;
  --ses-red-600:    #142654;
  --ses-red-400:    #2A4A7F;
  --ses-red-tint:   rgba(29,52,97,0.10);

  --ses-orange:     #C86418;
  --ses-orange-400: #DC8232;
  --ses-orange-tint:rgba(200,100,24,0.10);

  --ses-yellow:     #B88A00;
  --ses-yellow-tint:rgba(184,138,0,0.10);

  /* ---------- Flader ---------- */
  --bg-0:   #F1F2F5;
  --bg-1:   #FAFAFB;
  --bg-2:   #FFFFFF;
  --bg-3:   #F3F4F7;
  --bg-4:   #E7E9EF;
  --bg-scrim: rgba(17,22,34,0.35);

  /* ---------- Linjer ---------- */
  --line-1: #E5E7ED;
  --line-2: #D8DBE3;
  --line-strong: #B9BEC9;

  /* ---------- Tekst ---------- */
  --fg-1:   #14161F;
  --fg-2:   #4A5063;
  --fg-3:   #777E92;
  --fg-4:   #A7ACBB;
  --fg-on-red: #FFFFFF;

  /* ---------- Status ---------- */
  --status-ok:      #1F9D58;
  --status-ok-tint: rgba(31,157,88,0.10);
  --status-warn:    var(--ses-orange);
  --status-warn-tint: var(--ses-orange-tint);
  --status-crit:    #C83228;
  --status-crit-tint: rgba(200,50,40,0.10);
  --status-info:    #2A7BC4;
  --status-info-tint: rgba(42,123,196,0.10);
  --status-idle:    #777E92;
  --status-idle-tint: rgba(119,126,146,0.10);

  /* ---------- Radier ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;

  /* ---------- Afstand (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* ---------- Skygger ---------- */
  --shadow-1: 0 1px 0 rgba(20,22,31,0.04);
  --shadow-2: 0 1px 2px rgba(20,22,31,0.06), 0 2px 8px rgba(20,22,31,0.04);
  --shadow-3: 0 4px 16px rgba(20,22,31,0.10), 0 1px 2px rgba(20,22,31,0.06);
  --ring-focus: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--ses-orange);

  /* ---------- Typografi ---------- */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'IBM Plex Sans', sans-serif;

  --fs-micro:   10px;
  --fs-caption: 11px;
  --fs-small:   12px;
  --fs-body:    13px;
  --fs-base:    14px;
  --fs-lead:    16px;
  --fs-h3:      18px;
  --fs-h2:      22px;
  --fs-h1:      28px;
  --fs-display: 36px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.5;

  --tracking-tight: -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;

  /* SDJ specifikt */
  --sdj-red:    var(--ses-red);
  --sdj-orange: var(--ses-orange-400);
  --sdj-yellow: #F2C300;
  --sdj-ink:    #14161F;
  --nav-w:      240px;
}

/* ============================================================
   Basis
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body.sdj {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ============================================================
   NERVE Layout — nv-app grid
   ============================================================ */

.nv-app {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: 48px 1fr 28px;
  grid-template-areas: "nav top" "nav main" "nav status";
  min-height: 100vh;
}

.nv-nav {
  grid-area: nav;
  background: var(--bg-2);
  border-right: 1px solid var(--line-1);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.nv-topbar {
  grid-area: top;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nv-main {
  grid-area: main;
  overflow: auto;
  min-height: 0;
}

.nv-status {
  grid-area: status;
  background: var(--bg-2);
  border-top: 1px solid var(--line-1);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-3);
  position: sticky;
  bottom: 0;
}

/* ============================================================
   Nav
   ============================================================ */

.nv-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line-1);
  flex-shrink: 0;
}

.sdj-logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--sdj-red);
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 italic 13px/1 var(--font-sans);
  letter-spacing: .06em;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.sdj-logo-mark::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: var(--sdj-orange);
}

.sdj-logo-word {
  font: 700 13px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: .03em;
}

.sdj-logo-word span {
  color: var(--fg-3);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
}

.nv-nav-section {
  padding: 14px 14px 6px;
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
}

.nv-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 6px;
  border-radius: 2px;
  color: var(--fg-2);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}

.nv-nav-item:hover {
  background: var(--bg-3);
  color: var(--fg-1);
}

.nv-nav-item:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.nv-nav-item.active {
  background: var(--bg-3);
  color: var(--fg-1);
  box-shadow: inset 2px 0 0 var(--ses-red);
}

.nv-nav-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.nv-nav-count {
  margin-left: auto;
  font: 500 10px/1 var(--font-mono);
  color: var(--fg-3);
}

.nv-nav-badge {
  margin-left: auto;
  font: 600 9px/1 var(--font-sans);
  padding: 2px 5px;
  border-radius: 999px;
  letter-spacing: .04em;
}

.nv-nav-badge.warn { background: var(--ses-orange-tint); color: var(--ses-orange); }
.nv-nav-badge.crit { background: var(--status-crit-tint); color: var(--status-crit); }

/* ============================================================
   Topbar
   ============================================================ */

.nv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-2);
}

.nv-breadcrumb strong { color: var(--fg-1); font-weight: 700; }

.nv-breadcrumb svg {
  width: 14px;
  height: 14px;
  stroke: var(--fg-3);
  fill: none;
  stroke-width: 1.75;
}

.nv-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Knapper
   ============================================================ */

.nv-btn {
  font: 600 13px/1 var(--font-sans);
  padding: 0 14px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .01em;
  background: var(--bg-3);
  color: var(--fg-1);
  border-color: var(--line-2);
  white-space: nowrap;
  text-decoration: none;
  transition: background 150ms, border-color 150ms, box-shadow 150ms;
}

.nv-btn:hover { background: var(--bg-4); border-color: var(--line-strong); }
.nv-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.nv-btn:disabled, .nv-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.nv-btn.primary {
  background: var(--ses-red);
  color: #fff;
  border-color: var(--ses-red-600);
}

.nv-btn.primary:hover { background: var(--ses-red-400); }
.nv-btn.primary:focus-visible { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--ses-red); }

.nv-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}

.nv-btn.ghost:hover { background: var(--bg-3); color: var(--fg-1); }
.nv-btn.icon { width: 34px; padding: 0; justify-content: center; }

.nv-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nv-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.nv-btn.sm.icon { width: 28px; padding: 0; }

/* ============================================================
   Inputs
   ============================================================ */

.nv-input {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  font: 500 13px/1 var(--font-sans);
  padding: 0 10px;
  height: 34px;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
}

.nv-input:focus {
  border-color: var(--ses-orange);
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--ses-orange);
}

.nv-search { position: relative; }
.nv-search svg { position: absolute; left: 8px; top: 10px; width: 14px; height: 14px; stroke: var(--fg-3); fill: none; stroke-width: 2; }
.nv-search input { padding-left: 28px; width: 240px; }

/* ============================================================
   Pills / tags
   ============================================================ */

.nv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .02em;
}

.nv-pill.ok    { background: var(--status-ok-tint);   color: var(--status-ok);   }
.nv-pill.warn  { background: var(--status-warn-tint);  color: var(--status-warn);  }
.nv-pill.crit  { background: var(--status-crit-tint);  color: var(--status-crit);  }
.nv-pill.info  { background: var(--status-info-tint);  color: var(--status-info);  }
.nv-pill.idle  { background: var(--status-idle-tint);  color: var(--status-idle);  }
.nv-pill.navy  { background: var(--ses-red-tint);      color: var(--ses-red);      }

.nv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 2px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  background: var(--bg-3);
  color: var(--fg-1);
  border: 1px solid var(--line-2);
}

/* ============================================================
   Tabeller
   ============================================================ */

.nv-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 12px/1 var(--font-sans);
}

.nv-table th {
  text-align: left;
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.nv-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-1);
  height: 36px;
  box-sizing: border-box;
  vertical-align: middle;
  color: var(--fg-1);
}

.nv-table td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.nv-table td.secondary { color: var(--fg-2); }
.nv-table td.muted { color: var(--fg-3); font-size: var(--fs-caption); }

.nv-table tbody tr:hover td { background: var(--bg-3); cursor: pointer; }
.nv-table tbody tr.sel td { background: var(--bg-3); }
.nv-table tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--ses-red); }

/* ============================================================
   Panel / kort
   ============================================================ */

.nv-panel {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 2px;
}

.nv-panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nv-panel-title { font: 600 13px/1 var(--font-sans); color: var(--fg-1); }
.nv-panel-meta { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--fg-3); }

/* ============================================================
   Filterbar
   ============================================================ */

.nv-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
}

.nv-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 28px;
  border-radius: 2px;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-2);
  background: transparent;
  border: 1px dashed var(--line-2);
  cursor: pointer;
}

.nv-filter-chip:hover { color: var(--fg-1); border-color: var(--line-strong); }
.nv-filter-chip.on { background: var(--bg-3); color: var(--fg-1); border-style: solid; }
.nv-filter-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============================================================
   KPI strip
   ============================================================ */

.nv-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-1);
  border-bottom: 1px solid var(--line-1);
}

.nv-kpi {
  background: var(--bg-1);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nv-kpi .label {
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
}

.nv-kpi .value {
  font: 600 22px/1 var(--font-mono);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.nv-kpi .delta { font: 500 11px/1 var(--font-mono); color: var(--fg-3); }
.nv-kpi .delta.up { color: var(--status-ok); }
.nv-kpi .delta.down { color: var(--status-crit); }

/* ============================================================
   SDJ — Tabs
   ============================================================ */

.sdj-tabs {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
  gap: 0;
}

.sdj-tab {
  background: transparent;
  border: none;
  padding: 12px 14px;
  color: var(--fg-3);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.sdj-tab:hover { color: var(--fg-1); }
.sdj-tab.active { color: var(--fg-1); border-bottom-color: var(--sdj-red); }
.sdj-tab .count {
  font: 500 10px/1 var(--font-mono);
  color: var(--fg-3);
  margin-left: 4px;
  padding: 3px 6px;
  background: var(--bg-3);
  border-radius: 999px;
}

/* ============================================================
   SDJ — Grid
   ============================================================ */

.sdj-grid { display: grid; gap: 16px; padding: 16px; }
.sdj-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.sdj-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sdj-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.sdj-grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.sdj-grid.cols-1-2 { grid-template-columns: 1fr 2fr; }

/* ============================================================
   SDJ — Big stat
   ============================================================ */

.sdj-stat { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.sdj-stat .lbl { font: 600 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); }
.sdj-stat .val { font: 600 28px/1 var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sdj-stat .sub { font: 500 11px/1.3 var(--font-sans); color: var(--fg-2); }
.sdj-stat .sub .ok { color: var(--status-ok); }
.sdj-stat .sub .warn { color: var(--status-warn); }
.sdj-stat .sub .crit { color: var(--status-crit); }

/* ============================================================
   SDJ — Progress bar
   ============================================================ */

.sdj-bar { height: 8px; background: var(--bg-3); border-radius: 2px; overflow: hidden; position: relative; }
.sdj-bar > i { display: block; height: 100%; background: var(--sdj-red); border-radius: 2px; }
.sdj-bar.thin { height: 4px; }
.sdj-bar.ok > i { background: var(--status-ok); }
.sdj-bar.warn > i { background: var(--ses-orange); }

/* ============================================================
   SDJ — Formular
   ============================================================ */

.sdj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.sdj-field > label {
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
}

.sdj-field > input,
.sdj-field > select,
.sdj-field > textarea {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  font: 500 13px/1.4 var(--font-sans);
  padding: 8px 10px;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

.sdj-field > input:focus,
.sdj-field > select:focus,
.sdj-field > textarea:focus {
  border-color: var(--ses-orange);
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--ses-orange);
}

.sdj-field .hint { font: 500 11px/1.3 var(--font-mono); color: var(--fg-3); }
.sdj-field .help { font: 400 11px/1.3 var(--font-sans); color: var(--fg-3); }

.sdj-row { display: grid; gap: 12px; }
.sdj-row.c2 { grid-template-columns: 1fr 1fr; }
.sdj-row.c3 { grid-template-columns: 1fr 1fr 1fr; }
.sdj-row.c4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   SDJ — Status dots
   ============================================================ */

.sdj-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.sdj-dot.kladde    { background: var(--fg-4); }
.sdj-dot.sendt     { background: var(--status-info); }
.sdj-dot.underskrevet { background: var(--status-info); }
.sdj-dot.aktiv     { background: var(--status-ok); }
.sdj-dot.udlobet   { background: var(--fg-3); }
.sdj-dot.fornyet   { background: var(--sdj-yellow); }
.sdj-dot.fornyelse { background: var(--ses-orange); }
.sdj-dot.afvist    { background: var(--status-crit); }

/* ============================================================
   SDJ — Avatar
   ============================================================ */

.sdj-avatar {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font: 700 10px/1 var(--font-sans);
  flex-shrink: 0;
  letter-spacing: .04em;
  background: var(--ses-red);
}

/* ============================================================
   SDJ — Søjlediagram
   ============================================================ */

.sdj-chart-area { background: var(--bg-2); position: relative; }
.sdj-bar-row { display: flex; align-items: flex-end; gap: 6px; padding: 8px 16px 0; height: 160px; }
.sdj-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sdj-bar-col .stack { display: flex; flex-direction: column-reverse; width: 100%; min-height: 0; flex: 1; align-items: stretch; }
.sdj-bar-col .seg { width: 100%; }
.sdj-bar-col .seg.primary { background: var(--ses-red); }
.sdj-bar-col .seg.secondary { background: var(--sdj-orange); }
.sdj-bar-col .seg.tertiary { background: var(--sdj-yellow); }
.sdj-bar-col .lbl { font: 500 10px/1 var(--font-mono); color: var(--fg-3); padding-bottom: 8px; }
.sdj-axis { display: flex; padding: 0 16px; border-top: 1px solid var(--line-1); }
.sdj-axis > * { flex: 1; text-align: center; font: 500 10px/1 var(--font-mono); color: var(--fg-3); padding: 8px 0; }

/* ============================================================
   SDJ — Mini stat strip
   ============================================================ */

.sdj-mini-strip { display: flex; gap: 0; border-top: 1px solid var(--line-1); }
.sdj-mini-strip > div { flex: 1; padding: 10px 14px; border-right: 1px solid var(--line-1); }
.sdj-mini-strip > div:last-child { border-right: none; }
.sdj-mini-strip .lbl { font: 600 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); margin-bottom: 6px; }
.sdj-mini-strip .val { font: 600 14px/1 var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* ============================================================
   SDJ — Section head
   ============================================================ */

.sdj-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
}

.sdj-section-head h3 { font: 600 13px/1 var(--font-sans); color: var(--fg-1); margin: 0; }
.sdj-section-head .meta { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--fg-3); }

/* ============================================================
   SDJ — Page head (inde i main)
   ============================================================ */

.sdj-page-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.sdj-page-head h1 {
  margin: 0;
  font: 600 22px/1.1 var(--font-sans);
  letter-spacing: -.01em;
  color: var(--fg-1);
}

.sdj-page-head .sub { font: 500 12px/1.3 var(--font-sans); color: var(--fg-3); margin-top: 4px; }
.sdj-page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ============================================================
   SDJ — Modal
   ============================================================ */

.sdj-scrim {
  position: fixed;
  inset: 0;
  background: var(--bg-scrim);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: grid;
  place-items: center;
}

.sdj-modal {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow: var(--shadow-3);
  width: min(860px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sdj-modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sdj-modal-head h2 { margin: 0; font: 600 16px/1 var(--font-sans); color: var(--fg-1); }
.sdj-modal-body { padding: 18px; overflow: auto; }
.sdj-modal-foot { padding: 12px 18px; border-top: 1px solid var(--line-1); display: flex; align-items: center; gap: 8px; background: var(--bg-1); }

/* ============================================================
   SDJ — Splash / login
   ============================================================ */

.sdj-splash {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.sdj-splash .left {
  background: var(--sdj-red);
  color: #fff;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.sdj-splash .left::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -80px;
  width: 480px;
  height: 50px;
  background: rgba(255,255,255,0.08);
  transform: rotate(-12deg);
}

.sdj-splash .left::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 480px;
  height: 10px;
  background: rgba(255,255,255,0.05);
  transform: rotate(-12deg);
}

.sdj-splash .right {
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  background: var(--bg-1);
}

.sdj-splash h1 {
  font: italic 700 44px/1 var(--font-sans);
  margin: 0;
  letter-spacing: -.02em;
}

.sdj-splash .left .tag {
  font: 600 11px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  opacity: .7;
}

/* ============================================================
   SDJ — Penge/beløb
   ============================================================ */

.sdj-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sdj-money .ccy { color: var(--fg-3); font-size: 0.88em; margin-left: 3px; }

/* ============================================================
   SDJ — Roller-vælger (topbar)
   ============================================================ */

.sdj-role-switch {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  overflow: hidden;
  height: 28px;
}

.sdj-role-switch button {
  background: var(--bg-2);
  border: none;
  padding: 0 10px;
  font: 600 11px/1 var(--font-sans);
  color: var(--fg-2);
  cursor: pointer;
  border-right: 1px solid var(--line-1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: .02em;
}

.sdj-role-switch button:last-child { border-right: none; }
.sdj-role-switch button.on { background: var(--bg-4); color: var(--fg-1); }

/* ============================================================
   SDJ — Toast
   ============================================================ */

.sdj-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg-1);
  color: #fff;
  padding: 10px 16px;
  border-radius: 2px;
  font: 600 12px/1 var(--font-sans);
  z-index: 60;
  box-shadow: var(--shadow-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   SDJ — Tomtilstand
   ============================================================ */

.sdj-empty {
  padding: 40px;
  text-align: center;
  color: var(--fg-3);
  font: 500 12px/1.6 var(--font-sans);
}

/* ============================================================
   Hjælpeblasser
   ============================================================ */

.nv-row { display: flex; align-items: center; gap: 8px; }
.nv-col { display: flex; flex-direction: column; gap: 8px; }
.nv-spacer { flex: 1; }
.nv-hr { border: none; border-top: 1px solid var(--line-1); margin: 0; }
.nv-caps { font: 600 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

[x-cloak] { display: none !important; }

/* ============================================================
   Accessibility — Global focus & interaction (UI/UX Pro Max)
   ============================================================ */

/* Alle knapper uden .nv-btn (inline builder-knapper) */
button:focus-visible:not(.nv-btn) {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 2px;
}

/* Links med fokus */
a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 2px;
}

/* Table-rækker der er klikbare via JS */
.nv-table tbody tr[onclick],
.nv-table tbody tr[x-on\:click],
.nv-table tbody tr[@click] { cursor: pointer; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Knap active-state (taktil feedback)
   ============================================================ */

.nv-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

/* ============================================================
   Mobile — touch targets + responsive grid + iOS zoom-fix
   ============================================================ */

@media (max-width: 768px) {

  /* iOS auto-zoom: font < 16px → browser zoomer ind ved fokus */
  .sdj-field > input,
  .sdj-field > select,
  .sdj-field > textarea {
    font-size: 16px;
  }

  /* Knapper: minimum 44px touch-target */
  .nv-btn { height: 44px; }
  .nv-btn.sm { height: 44px; padding: 0 14px; font-size: 13px; }
  .nv-btn.sm.icon { width: 44px; padding: 0; }
  .nv-btn.icon { width: 44px; }

  /* Grid-kolonner stakker på mobil */
  .sdj-row.c2,
  .sdj-row.c3,
  .sdj-row.c4 {
    grid-template-columns: 1fr;
  }

  /* Ophæv span-override på mobil */
  .sdj-row.c3 > [style*="grid-column:span"] {
    grid-column: 1 !important;
  }

  /* Formular-padding */
  .sdj-form-wrap { padding: 16px !important; }
}