/* pactum.css — designsystem-foundation. Ändras INTE av vy-migrationsagenter.
   Saknas en token/komponent → eskalera till polish-fasen. */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Färger — neutralskala */
  --gray-0:  #fafbfc;
  --gray-1:  #f0f2f5;
  --gray-2:  #e5e7eb;
  --gray-3:  #d1d5db;
  --gray-4:  #9ca3af;
  --gray-5:  #6b7280;
  --gray-6:  #4b5563;
  --gray-7:  #374151;
  --gray-8:  #1f2937;
  --gray-9:  #111827;

  /* Brand */
  --indigo:       #4f46e5;
  --indigo-dark:  #4338ca;
  --indigo-light: #eef2ff;

  /* Semantiska tokens — bakgrund / förgrund / kantfärg */
  /* Semantiska tokens — mörkare fg för WCAG AA-kontrast (≥4.5:1) */
  --danger-bg:   #fee2e2;  --danger-fg:   #7f1d1d;  --danger-border:   #fca5a5;
  --warning-bg:  #fef3c7;  --warning-fg:  #78350f;  --warning-border:  #fcd34d;
  --success-bg:  #d1fae5;  --success-fg:  #064e3b;  --success-border:  #6ee7b7;
  --info-bg:     #dbeafe;  --info-fg:     #1e3a8a;  --info-border:     #93c5fd;
  --neutral-bg:  var(--gray-1);  --neutral-fg: var(--gray-7);  --neutral-border: var(--gray-2);

  /* Brand-accent — burgundy (för Pactum-signaturer) */
  --burgundy:    #9f1239;
  --burgundy-bg: #fdf2f4;
  --burgundy-fg: #6e0e2b;       /* mörkare för läsbarhet på ljus rosa */
  --gold:        #a16207;

  /* Spacing — 4px-grid */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  /* Typografi */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --text-display: 1.75rem;   /* 28px — hero rubriker */
  --text-h1:      1.35rem;   /* ~22px */
  --text-h2:      1.05rem;   /* ~17px — page-rubriker */
  --text-h3:      0.94rem;   /* 15px */
  --text-body:    0.85rem;   /* ~13.5px — komfortabel app-densitet */
  --text-table:   0.82rem;   /* ~13px — tabeller (tightare) */
  --text-meta:    0.78rem;   /* ~12.5px */
  --text-mini:    0.7rem;    /* ~11px — labels */

  /* Övrigt */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.12);

  --nav-bg:      var(--gray-9);
  --nav-active:  var(--indigo);

  /* Nav-meny tokens (för dropdowns från nav) */
  --menu-bg:        #1f2937;
  --menu-fg:        rgba(255,255,255,0.78);
  --menu-fg-strong: #fff;
  --menu-fg-muted:  rgba(255,255,255,0.40);
  --menu-hover-bg:  rgba(255,255,255,0.07);
  --menu-active-bg: rgba(99, 102, 241, 0.18);
  --menu-divider:   rgba(255,255,255,0.08);
  --menu-border:    rgba(255,255,255,0.06);

  /* Surface-tokens — gör det enkelt att tema-byta */
  --bg:          var(--gray-1);
  --surface:     #fff;
  --surface-2:   var(--gray-0);
  --border:      var(--gray-2);
  --border-strong: var(--gray-3);
  --text:        var(--gray-8);
  --text-strong: var(--gray-9);
  --text-muted:  var(--gray-5);
  --text-link:   var(--indigo);
  --focus-ring:  rgba(79, 70, 229, 0.20);

  --transition:  150ms ease;

  /* Nav-höjd — referensvärde för sticky section-heads m.fl. */
  --nav-height: 48px;
}

/* ============================================================
   DARK MODE — överstyr tokens när data-theme="dark"
   Förinställs till system-tema men kan toggle:as manuellt.
   ============================================================ */
[data-theme="dark"] {
  /* Bakgrunder */
  --bg:          #0d1017;
  --surface:     #161a23;
  --surface-2:   #1c2230;
  --nav-bg:      #0a0c12;

  /* Borders */
  --border:      #232a38;
  --border-strong: #2f3849;
  --gray-2:      #232a38;   /* så table-borders följer med */

  /* Text */
  --text:        #e5e7eb;
  --text-strong: #f8fafc;
  --text-muted:  #94a3b8;
  --gray-5:      #94a3b8;
  --gray-7:      #cbd5e1;
  --gray-8:      var(--text);
  --gray-9:      var(--text-strong);
  --gray-0:      #1c2230;   /* th-bakgrund */

  /* Brand — något ljusare indigo för kontrast på mörkt */
  --indigo:      #818cf8;
  --indigo-dark: #6366f1;
  --indigo-light:#1e2235;
  --text-link:   #a5b4fc;
  --nav-active:  #a5b4fc;

  /* Accenter */
  --burgundy:    #f472b6;
  --burgundy-bg: #2d1421;
  --burgundy-fg: #fbcfe8;
  --gold:        #fbbf24;

  /* Semantiska — mörk tint-bakgrund + ljus fg */
  --danger-bg:   #2a1014;  --danger-fg:   #fca5a5;  --danger-border:   #5e1a1f;
  --warning-bg:  #2a1d05;  --warning-fg:  #fcd34d;  --warning-border:  #5e3f0a;
  --success-bg:  #0a2a1d;  --success-fg:  #6ee7b7;  --success-border:  #0f4d36;
  --info-bg:     #0f1f3d;  --info-fg:     #93c5fd;  --info-border:     #1e3a8a;
  --neutral-bg:  var(--surface-2);  --neutral-fg: var(--text-muted);  --neutral-border: var(--border);

  --focus-ring:  rgba(129, 140, 248, 0.35);

  /* Nav-meny i dark — lyfts mot nav-bg så menyn syns som elevated yta */
  --menu-bg:        #1a2030;
  --menu-fg:        #d4d8e0;
  --menu-fg-strong: #f8fafc;
  --menu-fg-muted:  #6b7785;
  --menu-hover-bg:  #232b3d;
  --menu-active-bg: rgba(129, 140, 248, 0.16);
  --menu-divider:   rgba(255,255,255,0.06);
  --menu-border:    rgba(255,255,255,0.08);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow:      0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.6);
}

/* Auto-mode: respektera system-tema som default — kan ändras av användaren */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/* Smooth navigation: en mjuk fade när browser:n stöder det.
   Faller tyst tillbaka till standard-reload i Safari/Firefox. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Reservera plats för scrollbaren även när sidan får plats utan — annars
   hoppar topnav-menyn ~15px i sidled när man navigerar mellan en sida med
   scroll och en kortare. scrollbar-gutter stöds i Chrome/Firefox/Safari 18+. */
html { font-size: 16px; scrollbar-gutter: stable; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 200ms ease, color 200ms ease;
}

/* ============================================================
   TYPOGRAFI
   Serif är BRAND-vinkling — används sparsamt för display,
   KPI-siffror och taglines. Sans (Inter) är app-språket.
   ============================================================ */
.display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-display);
  color: var(--text-strong);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h1 { font-size: var(--text-h1); font-weight: 700; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.meta { color: var(--text-muted); font-size: var(--text-meta); }
.mini-label {
  font-size: var(--text-mini);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-5);
}
.serif-italic { font-family: var(--font-serif); font-style: italic; }

/* ============================================================
   NAV
   ============================================================ */
nav.topnav {
  background: var(--nav-bg);
  display: flex;
  align-items: stretch;
  height: 48px;
  padding: 0 var(--s-5);
  box-shadow: var(--shadow);
}
nav.topnav .brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: var(--s-4);
  margin-right: var(--s-3);
  border-right: 1px solid rgba(255,255,255,0.10);
  letter-spacing: 0.005em;
  text-decoration: none;
}
nav.topnav .brand .brand-logo {
  height: 26px;
  width: auto;
  display: block;
  /* Logo har sin egna tint — vi färgar om till vit i nav */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
nav.topnav .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-4);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  cursor: pointer;
}
nav.topnav .nav-link:hover { color: rgba(255,255,255,0.95); }
nav.topnav .nav-link.active {
  color: #fff;
  border-bottom-color: var(--nav-active);
}
nav.topnav .nav-link svg.icon { width: 16px; height: 16px; opacity: 0.85; }
nav.topnav .caret { font-size: 9px; opacity: 0.55; margin-left: 2px; }

nav.topnav .dropdown { position: relative; display: flex; align-items: stretch; }
nav.topnav .dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: var(--menu-bg);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--menu-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  flex-direction: column;
  padding: var(--s-2) 0;
  z-index: 100;
}
nav.topnav .dropdown:hover .dropdown-menu,
nav.topnav .dropdown:focus-within .dropdown-menu { display: flex; }
nav.topnav .dropdown-menu a {
  padding: var(--s-2) var(--s-4);
  color: var(--menu-fg);
  text-decoration: none;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  transition: background var(--transition), color var(--transition);
}
nav.topnav .dropdown-menu a:hover { background: var(--menu-hover-bg); color: var(--menu-fg-strong); }
nav.topnav .dropdown-menu a.active {
  color: var(--menu-fg-strong);
  background: var(--menu-active-bg);
  border-left: 2px solid var(--indigo);
  padding-left: calc(var(--s-4) - 2px);
}
nav.topnav .dropdown-menu .dd-label {
  font-size: var(--text-mini);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--menu-fg-muted);
  padding: var(--s-3) var(--s-4) var(--s-1);
  font-weight: 600;
}
nav.topnav .dropdown-menu .dd-divider {
  height: 1px;
  background: var(--menu-divider);
  margin: var(--s-2) 0;
}
/* Höger-grupp: logga ut + admin + theme-toggle samlas i en wrapper som
   pushas till höger med margin-left:auto. Tidigare hade .theme-toggle
   själv margin-left:auto, vilket bröts när login-knappen återanvände
   samma klass — två margin-auto delade upp utrymmet. */
nav.topnav .nav-right {
  margin-left: auto;
  display: flex;
  align-items: stretch;
}
nav.topnav .nav-right form { display: flex; align-items: stretch; }

nav.topnav .theme-toggle {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  padding: 0 var(--s-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  height: 48px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), background var(--transition);
}
nav.topnav .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.04); }
nav.topnav .theme-toggle svg { width: 16px; height: 16px; }

nav.topnav .admin-group { display: flex; align-items: stretch; }
nav.topnav .admin-group .dropdown-menu { left: auto; right: 0; border-radius: 0 0 0 var(--radius-sm); }
nav.topnav .theme-toggle .icon-sun { display: none; }
nav.topnav .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] nav.topnav .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] nav.topnav .theme-toggle .icon-moon { display: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
main { padding: var(--s-5) var(--s-6); max-width: 1400px; margin: 0 auto; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.page-header .breadcrumb {
  font-size: var(--text-meta);
  color: var(--gray-5);
  margin-bottom: var(--s-1);
}
.page-header .breadcrumb a { color: var(--gray-5); text-decoration: none; }
.page-header .breadcrumb a:hover { color: var(--gray-7); }
.page-header h1.display { font-size: var(--text-h1); margin-bottom: var(--s-2); }
.page-header .subtitle { color: var(--gray-5); font-size: var(--text-meta); max-width: 60ch; }

.toolbar {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

/* ============================================================
   KORT / CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-padded { padding: var(--s-4) var(--s-5); }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; height: 3px; width: 36px;
  background: var(--indigo);
  border-radius: 0 0 3px 0;
}
.kpi.kpi-warning::before { background: var(--warning-border); }
.kpi.kpi-danger::before { background: var(--danger-border); }
.kpi.kpi-success::before { background: var(--success-border); }
.kpi-label {
  font-size: var(--text-mini);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-5);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.kpi-value {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--gray-9);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.kpi-unit {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-5);
  font-weight: 500;
  margin-left: 4px;
  font-style: normal;
}
.kpi-delta {
  font-size: var(--text-meta);
  color: var(--gray-5);
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.kpi-delta.up { color: var(--success-fg); }
.kpi-delta.down { color: var(--danger-fg); }
.kpi-sparkline {
  position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 70px; height: 32px; opacity: 0.5;
  stroke: var(--indigo);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn svg.icon { width: 15px; height: 15px; }
.btn-primary {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}
.btn-primary:hover { background: var(--indigo-dark); border-color: var(--indigo-dark); }
[data-theme="dark"] .btn-primary { color: #0d1017; }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-muted); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-strong); }
.btn-danger {
  background: var(--surface);
  color: var(--danger-fg);
  border-color: var(--danger-border);
}
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 4px 10px; font-size: 0.82rem; }
.btn-lg { padding: 10px 18px; font-size: 0.95rem; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="url"], select, textarea {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.4;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.input-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 32px;
  width: 280px;
}
.form-group { display: flex; flex-direction: column; gap: var(--s-1); }
.form-group label { font-size: var(--text-mini); font-weight: 600; color: var(--gray-6); text-transform: uppercase; letter-spacing: 0.04em; }
.form-row { display: flex; gap: var(--s-3); align-items: center; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
  font-weight: 500;
}

/* ============================================================
   TAGS / BADGES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-meta);
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.tag svg.icon { width: 12px; height: 12px; }
.tag-danger   { background: var(--danger-bg);   color: var(--danger-fg);   border-color: var(--danger-border); }
.tag-warning  { background: var(--warning-bg);  color: var(--warning-fg);  border-color: var(--warning-border); }
.tag-success  { background: var(--success-bg);  color: var(--success-fg);  border-color: var(--success-border); }
.tag-info     { background: var(--info-bg);     color: var(--info-fg);     border-color: var(--info-border); }
.tag-neutral  { background: var(--neutral-bg);  color: var(--neutral-fg);  border-color: var(--neutral-border); }
.tag-burgundy { background: var(--burgundy-bg); color: var(--burgundy-fg); border-color: #f9a8b2; }

/* ============================================================
   TABLES
   ============================================================ */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  font-size: var(--text-table);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th, td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  line-height: 1.4;
}
table.compact th, table.compact td { padding: 4px 10px; font-size: 12px; }
table.airy th, table.airy td { padding: 10px 14px; }
th {
  background: var(--surface-2);
  font-size: var(--text-mini);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background 100ms; }
tbody tr:hover { background: var(--surface-2); }
[data-theme="dark"] tbody tr:hover { background: #1f2533; }
tbody tr:last-child td { border-bottom: none; }
/* Tabell-länkar: dämpade per default, avslöjar sig på hover.
   Hela raden får en subtil hover-bakgrund som "klickbarhets-signal". */
td a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}
td a:hover { color: var(--text-link); text-decoration: underline; }
tbody tr:hover td a { color: var(--text-link); }
.cell-strong { color: var(--text-strong); font-weight: 600; }
.cell-muted  { color: var(--text-muted); }
tfoot td {
  font-weight: 600;
  background: var(--surface-2);
  border-top: 2px solid var(--border);
  border-bottom: none;
}

/* ============================================================
   LINKS (generella)
   ============================================================ */
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
  text-align: center;
  padding: var(--s-7) var(--s-5);
  color: var(--text-muted);
}
.empty svg { width: 48px; height: 48px; stroke: var(--border-strong); margin-bottom: var(--s-3); }
.empty h3 { color: var(--text); margin-bottom: var(--s-2); }
.empty p { font-size: var(--text-meta); max-width: 40ch; margin: 0 auto var(--s-4); }

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
.skel {
  display: inline-block;
  height: 12px;
  background: linear-gradient(90deg, var(--border), var(--surface-2), var(--border));
  background-size: 200% 100%;
  border-radius: 3px;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   ALERT BANNERS
   ============================================================ */
.alert {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--text-meta);
  margin-bottom: var(--s-4);
}
.alert svg.icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.alert-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-meta);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
footer.site-footer .footer-mark {
  color: var(--text);
  font-weight: 600;
}

/* ============================================================
   MODAL
   .modal-backdrop wrappar .modal-card för fullscreen-overlay.
   Stöder både [hidden]-toggle (display:none) och .open-klass.
   ============================================================ */
.modal-demo {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
}
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  padding: var(--s-4);
}
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop:not([hidden]) { display: flex; }
.modal-backdrop.open { display: flex; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.65); }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  max-width: 480px;
  margin: 0 auto;
}
/* När .modal-card ligger i .modal-backdrop får den bli större och scrolla */
.modal-backdrop > .modal-card {
  max-width: min(1200px, 95vw);
  max-height: 90vh;
  overflow: auto;
  margin: 0;
}
.modal-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* ============================================================
   TABS — generisk tab-komponent (för foretag-tabs m.fl.)
   ============================================================ */
.tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.tab {
  padding: 10px 18px;
  font-size: 0.92rem; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  font-family: inherit;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text-strong);
  border-bottom-color: var(--indigo);
}

/* ============================================================
   STICKY SECTION-HEADS — använder --nav-height så positionen
   följer med om nav-höjden justeras.
   ============================================================ */
.sticky-head {
  position: sticky;
  top: var(--nav-height);
  background: var(--surface);
  z-index: 5;
}

/* ============================================================
   CELL-FÄRGNING (numeriska tabellceller)
   Använd istället för .warn/.ok-aliaserna på <td>.
   ============================================================ */
td.cell-danger  { color: var(--danger-fg);  font-weight: 500; }
td.cell-warning { color: var(--warning-fg); font-weight: 500; }
td.cell-success { color: var(--success-fg); font-weight: 500; }

/* ============================================================
   DISCLOSURE / IN-ROW EXPAND
   .expand-hint = liten klickbar länk som öppnar en in-row-lista.
   .disclosure-list = container för in-row-detaljer.
   .disclosure-row = en rad inom listan (lägg specifik grid-layout
   lokalt om kolumnerna är olika per vy).
   ============================================================ */
.expand-hint {
  font-size: var(--text-meta);
  color: var(--text-link);
  cursor: pointer;
  display: inline-block;
}
.expand-hint:hover { text-decoration: underline; }

.disclosure-list {
  margin-top: 4px;
  padding: 6px 8px;
  border-top: 1px dashed var(--border);
  background: var(--surface-2);
}
.disclosure-row {
  padding: 2px 0;
  font-size: var(--text-meta);
  border-bottom: 1px solid var(--border);
}
.disclosure-row:last-child { border-bottom: none; }
.disclosure-row.disclosure-head {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--text-mini);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.section-divider {
  margin: var(--s-8) 0 var(--s-5);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--border-strong);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--burgundy);
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="dark"] .section-divider { color: var(--burgundy-fg); }

/* ============================================================
   ICON-utility — gör <svg class="icon"> till en standardstorlek
   ============================================================ */
svg.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   UTILITIES — generella klasser som inte är aliaser
   ============================================================ */

/* Flash-meddelanden (mappar mot .alert-varianter, för {% with %}-loop i base.html) */
.flash {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--text-meta);
  margin-bottom: var(--s-2);
}
.flash-error   { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.flash-info    { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.flash-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }

/* Sortable th — används av JS-sorterade tabeller (oversikt, upphandlingar, kedjor m.fl.) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--surface); color: var(--text); }
th.sortable::after { content: ' \2195'; opacity: 0.25; font-size: 0.85em; }
th.sort-asc::after  { content: ' \2191'; opacity: 0.6; }
th.sort-desc::after { content: ' \2193'; opacity: 0.6; }

/* ============================================================
   BACKWARDS-COMPAT — i bruk; migreras successivt
   .upload-btn, .size-btn, .filter-btn — knapp-aliaser
   .missing-tag, .missing-box — tag-aliaser
   .warn, .ok — färg-aliaser (på span/strong; för <td> använd .cell-*)
   .total-row — tfoot-style som <tr>-klass
   .period-form — toolbar-spacing för filter-form
   ============================================================ */

/* Knapp-aliaser */
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.upload-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }

.size-btn, .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.82rem;          /* btn-sm-storlek för size-btn */
  padding: 4px 10px;           /* btn-sm */
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.filter-btn { padding: 7px 14px; font-size: 0.88rem; }   /* filter-btn = normalt btn-secondary */
.size-btn:hover, .filter-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.size-btn.active, .filter-btn.active {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

/* Tagg-aliaser */
.missing-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-meta);
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-fg);
  line-height: 1.4;
  white-space: nowrap;
}
.missing-box { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* Färg-aliaser (på <span>/<strong>; för <td>-celler — använd .cell-danger/.cell-success) */
.warn { color: var(--danger-fg); font-weight: 600; }
.ok   { color: var(--success-fg); }

/* Total-row-alias (mappar mot tfoot-styling) */
.total-row {
  font-weight: 600;
  background: var(--surface-2);
  border-top: 2px solid var(--border);
}
.total-row td { border-bottom: none; background: var(--surface-2); }

/* Period-form — toolbar-variant för filter-form */
.period-form {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}


/* ============================================================
   MOBIL-ANPASSNING — appen är desktop-first men ska vara läslig
   och navigerbar på telefon/läsplatta. Inga features försvinner,
   bara layoutjusteringar och horisontell scroll på breda tabeller.
   ============================================================ */

@media (max-width: 900px) {
  /* Topnav: tillåt wrap istället för att klippa. Höjden blir auto. */
  nav.topnav {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 0 var(--s-3);
    row-gap: 0;
  }
  nav.topnav .brand {
    padding-right: var(--s-3);
    margin-right: var(--s-2);
    font-size: 16px;
  }
  nav.topnav .brand-logo { height: 22px; }
  nav.topnav .nav-link {
    padding: 0 var(--s-2);
    font-size: 13px;
  }
  nav.topnav .nav-link svg.icon { display: none; }
  nav.topnav .nav-right {
    /* På smala skärmar tar nav-right hela bredden på en egen rad. */
    flex-basis: 100%;
    margin-left: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    justify-content: flex-end;
  }
  nav.topnav .dropdown-menu {
    /* Open dropdowns ska inte gå utanför viewport */
    right: auto;
    left: 0;
    max-width: calc(100vw - 24px);
  }
  nav.topnav .admin-group .dropdown-menu { right: 0; left: auto; }

  /* Main-padding minskas */
  main { padding: var(--s-4); }

  /* Page-header: stack vertikalt om innehållet är tvådelat */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .page-header h1.display { font-size: 22px; }
  .page-header .subtitle { font-size: 13px; }

  /* Toolbars wrappar redan; säkerställ luft */
  .toolbar { flex-wrap: wrap; gap: var(--s-2); }

  /* Card: mindre padding */
  .card-padded { padding: var(--s-4); }

  /* Tabeller: horisontell scroll i en wrapper. Tabellen själv får
     display:block + overflow-x:auto — fungerar för alla våra tabeller
     utan att vi behöver wrappa dem i markupen. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  /* Cell-meta-text får wrappa även i scroll-tabell — annars blir det
     hopplöst brett när varje cell tvingas en rad. */
  table td .meta,
  table td .cell-muted { white-space: normal; }

  /* Formulär-inputs full bredd som default på mobil */
  input[type=text], input[type=password], input[type=email], input[type=search],
  input[type=number], input[type=date], textarea, select {
    max-width: 100%;
  }
  .form-row { flex-wrap: wrap; }

  /* Knappar: lite tightare */
  .btn { padding: 8px 12px; }
  .btn-sm { padding: 5px 9px; }

  /* Filter-legend och period-form */
  .filter-legend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Extra-kompakt för riktigt små skärmar (telefon stående) */
  main { padding: var(--s-3); }
  nav.topnav .brand { font-size: 15px; }
  nav.topnav .nav-link { font-size: 12px; padding: 0 var(--s-2); }
  nav.topnav .caret { display: none; }
  .page-header h1.display { font-size: 19px; line-height: 1.2; }
  .card-padded { padding: var(--s-3); }
  /* Dölj icke-essentiella tag-ikoner för att spara bredd i listor */
  .tag svg.icon { display: none; }
}