/* ============================================================
   Anolira — design tokens (from designgenomgång)
   Two palettes (spec + Bone & Copper alt), three font pairings,
   three densities. Switched live via [data-palette], [data-fonts],
   [data-density] on any ancestor element.
   ============================================================ */

:root {
  /* ── Spec palette (default — used on marketing & public pages) ─── */
  --forest-900: #1B4332;
  --forest-800: #235041;
  --forest-700: #2E7D32;
  --forest-100: #DCE9D6;
  --forest-50:  #EAF1E2;

  --sand-50:  #F4EFE6;
  --sand-100: #FAF6EE;
  --sand-200: #ECE3D0;
  --sand-300: #D9CDB0;
  --sand-400: #B8A984;

  --bronze-700: #A47D10;
  --bronze-500: #D4A017;
  --bronze-200: #ECD58E;

  --mull-900: #4E342E;
  --mull-700: #795548;
  --mull-200: #C9B8B1;

  --ink-900: #1A1F1C;
  --ink-700: #2B302B;
  --ink-500: #525752;
  --ink-300: #8E928E;

  --danger-600: #B23A2B;
  --danger-100: #F5D6CF;
  --warn-600:   #9A6B0E;
  --warn-100:   #F4E2B8;
  --info-600:   #2F5A7A;
  --info-100:   #D2E1EC;

  /* Semantic aliases */
  --bg:           var(--sand-50);
  --bg-elevated:  var(--sand-100);
  --surface:      #FFFFFF;
  --border:       var(--sand-300);
  --border-soft:  var(--sand-200);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-300);
  --primary:      var(--forest-900);
  --primary-hover:var(--forest-800);
  --accent:       var(--bronze-500);
  --secondary:    var(--mull-700);

  /* ── Typography (default pairing) ───────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-32: 32px; --fs-40: 40px; --fs-56: 56px; --fs-80: 80px;

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.5; --lh-loose: 1.65;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;

  /* Radius */
  --rad-1: 4px; --rad-2: 6px; --rad-3: 8px; --rad-4: 12px; --rad-5: 16px;
  --rad-full: 999px;

  /* Shadow */
  --shd-1:   0 1px 0 rgba(27,67,50,.04), 0 1px 2px rgba(27,67,50,.06);
  --shd-2:   0 2px 4px rgba(27,67,50,.06), 0 4px 12px rgba(27,67,50,.08);
  --shd-3:   0 8px 24px rgba(27,67,50,.10), 0 2px 6px rgba(27,67,50,.06);
  --shd-pop: 0 12px 32px rgba(27,67,50,.16), 0 2px 6px rgba(27,67,50,.08);

  /* Motion */
  --ease:    cubic-bezier(.2,.7,.3,1);
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-slow:  320ms;

  /* Density (comfortable default) */
  --row-h:      48px;
  --row-pad-y:  12px;
  --row-pad-x:  16px;
  --cell-fs:    14px;
}

/* ── Alt palette: "Bone & Copper" (used inside authenticated app) ─ */
[data-palette="alt"] {
  --forest-900: #1F3A2E;
  --forest-800: #284A3A;
  --forest-700: #436A52;
  --forest-100: #D9E2D5;
  --forest-50:  #E6ECE2;

  --sand-50:  #ECE8DD;
  --sand-100: #F4F0E6;
  --sand-200: #DCD6C5;
  --sand-300: #C5BDA8;
  --sand-400: #998F75;

  --bronze-700: #8C4F22;
  --bronze-500: #B8703A;
  --bronze-200: #E5C7B0;

  --mull-900: #2C2A25;
  --mull-700: #4A4740;
  --mull-200: #B6B3A8;

  --ink-900: #1A1F1C;
  --ink-700: #2A2E2A;
  --ink-500: #5A5E59;
  --ink-300: #94978F;

  --bg:           var(--sand-50);
  --bg-elevated:  var(--sand-100);
  --primary:      var(--forest-900);
  --accent:       var(--bronze-500);
  --secondary:    var(--mull-700);
}

/* ── Font pairings (alternates) ───────────────────────────────── */
[data-fonts="newsreader-inter"] {
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
}
[data-fonts="instrument-ibm"] {
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

/* ── Density variants ─────────────────────────────────────────── */
[data-density="compact"]  { --row-h: 36px; --row-pad-y:  7px; --row-pad-x: 12px; --cell-fs: 13px; }
[data-density="spacious"] { --row-h: 60px; --row-pad-y: 18px; --row-pad-x: 20px; --cell-fs: 15px; }

/* ── .an scope — opt-in base styles for redesigned surfaces ──── */
.an {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
.an * { box-sizing: border-box; }

.an h1, .an h2, .an h3, .an h4, .an .display {
  font-family: var(--font-display);
  font-weight: 480;
  letter-spacing: -0.018em;
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}
.an h1 { font-size: var(--fs-56); line-height: 1.04; letter-spacing: -0.028em; }
.an h2 { font-size: var(--fs-40); line-height: 1.08; letter-spacing: -0.022em; }
.an h3 { font-size: var(--fs-24); }
.an h4 { font-size: var(--fs-18); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }
.an p  { margin: 0; }
.an .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' on; }
.an .num  { font-variant-numeric: tabular-nums; }

/* NOTE: The parallel atoms .an .btn*/.card/.chip/.field/.label used to live here
   but were removed in the Mud-theme redesign. MudBlazor's themed components
   (MudButton, MudPaper, MudChip, MudTextField) supply these visuals now,
   styled by Theming/AnoliraMudTheme.cs + wwwroot/anolira-mud-overrides.css. */

/* Topography dot grid for hero / section dividers */
.an .topo-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(27,67,50,.06) 1px, transparent 0);
  background-size: 14px 14px;
}

/* Editorial quote callout */
.an .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  color: var(--ink-700);
}

/* Marquee keyframe (used by trust strip etc.) */
@keyframes an-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Scoped scrollbars inside .an surfaces */
.an *::-webkit-scrollbar       { width: 6px; height: 6px; }
.an *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ──────────────────────────────────────────────────────────────
   MARKETING LANDING — public landing surface (/) only.
   All selectors scoped under .an or .an-marketing-root so legacy
   --fs-* styles on authenticated pages are unaffected.
   ────────────────────────────────────────────────────────────── */

.an-marketing-root {
  background: var(--sand-50);
  color: var(--ink-900);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* Section scaffolding */
.an .an-section { padding: 64px 80px; }
.an .an-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 36px;
}
.an .an-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 8px 0 0 0;
}
.an .an-section-title em { font-style: italic; color: var(--forest-900); font-weight: 460; }
.an .an-section-title .muted { color: var(--ink-500); font-weight: 460; }
.an .an-section-title .muted.small { font-size: 28px; }
.an .an-section-body {
  font-size: 15px; color: var(--ink-700); line-height: 1.55;
  max-width: 540px; margin-top: 16px;
}
.an .label.bronze { color: var(--bronze-500); }

/* ── Top nav ── */
.an .an-marketing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px; position: relative; z-index: 2;
}
.an .an-marketing-nav-links {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px; color: var(--ink-700);
}
.an .an-marketing-nav-links a {
  color: inherit; text-decoration: none; transition: color .15s ease;
}
.an .an-marketing-nav-links a:hover { color: var(--forest-900); }
.an .an-marketing-nav-links a.btn { padding-left: 14px; padding-right: 14px; }

/* ── Hero ── */
.an .an-hero {
  position: relative; overflow: hidden;
  background: var(--sand-50);
  padding-bottom: 24px;
}
.an .an-hero-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  padding: 60px 80px 80px; align-items: center;
  position: relative; z-index: 1;
}
.an .an-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.an .an-hero-copy .chip { align-self: flex-start; gap: 8px; }
.an .an-hero-copy .chip .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.an .an-hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 64px; line-height: 1.02; letter-spacing: -0.025em;
  margin: 0; color: var(--ink-900);
}
.an .an-hero-title em { font-style: italic; color: var(--forest-900); font-weight: 460; }
.an .an-hero-body {
  font-size: 17px; color: var(--ink-700); line-height: 1.55;
  max-width: 540px; margin: 0;
}
.an .an-hero-cta { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.an .an-hero-trust {
  display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-500); align-items: center;
}
.an .an-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }

.an .an-hero-glyph {
  position: relative; aspect-ratio: 1 / 1; max-width: 420px; margin-left: auto;
}
.an .an-glyph-label {
  position: absolute; font-family: var(--font-display); font-style: italic;
  font-size: 22px; pointer-events: none;
}

/* ── Personas ── */
.an .an-personas { background: var(--bg, var(--sand-50)); }
.an .an-persona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.an .an-persona-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.an .an-persona-head { display: flex; gap: 12px; align-items: center; }
.an .an-persona-role { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.an .an-persona-sub { font-size: 12px; color: var(--ink-500); }
.an .an-persona-who { font-size: 13px; color: var(--ink-700); }
.an .an-persona-tasks { display: flex; flex-direction: column; gap: 8px; }
.an .an-persona-task { display: flex; gap: 10px; font-size: 13px; }
.an .an-persona-task .mono { color: var(--ink-300); flex-shrink: 0; width: 18px; }
.an .an-persona-card .quote {
  font-size: 14px; line-height: 1.4; color: var(--ink-700);
  border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: auto;
}

/* ── Product surface ── */
.an .an-product-surface { background: var(--sand-100); }
.an .an-product-chips { display: flex; gap: 8px; }
.an .an-product-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; }
.an .an-product-window {
  background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shd-3); border: 1px solid var(--border-soft);
}
.an .an-product-chrome {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border-soft);
}
.an .an-product-chrome .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.an .an-product-url { margin-left: 12px; font-size: 11px; color: var(--ink-500); }
.an .an-product-content {
  padding: 18px; display: grid; grid-template-columns: 210px 1fr; gap: 18px; min-height: 360px;
}
.an .an-product-sidebar { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.an .an-product-sidebar .label { margin-bottom: 8px; }
.an .an-product-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  color: var(--ink-700); font-weight: 400;
}
.an .an-product-nav-item.active {
  background: var(--forest-100); color: var(--forest-900); font-weight: 600;
}
.an .an-product-main { display: flex; flex-direction: column; gap: 14px; }
.an .an-product-today {
  background: var(--forest-900); color: #fff;
  padding: 16px; border-radius: 10px;
}
.an .an-product-today .label { margin-bottom: 6px; }
.an .an-product-today-headline { font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
.an .an-product-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.an .an-product-kpi { padding: 10px; border: 1px solid var(--border-soft); border-radius: 8px; }
.an .an-kpi-label {
  font-size: 11px; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .04em;
}
.an .an-kpi-value { font-family: var(--font-display); font-size: 22px; margin-top: 2px; }
.an .an-kpi-delta { font-size: 11px; }
.an .an-kpi-delta.pos { color: var(--forest-700); }
.an .an-kpi-delta.neg { color: var(--danger-600, #B23A2B); }
.an .an-product-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.an .an-product-card {
  height: 130px; border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 10px;
}

.an .an-product-slivers { display: flex; flex-direction: column; gap: 16px; }
.an .an-sliver-card { padding: 16px; display: flex; align-items: center; gap: 14px; }
.an .an-sliver-icon {
  width: 40px; height: 40px; border-radius: 8px; background: var(--forest-100);
  display: flex; align-items: center; justify-content: center; color: var(--forest-900);
  flex-shrink: 0;
}
.an .an-sliver-body { flex: 1; min-width: 0; }
.an .an-sliver-title { font-size: 14px; font-weight: 500; }
.an .an-sliver-sub { font-size: 12px; color: var(--ink-500); }
.an .an-product-callout {
  background: var(--forest-100); border: 1px solid var(--forest-700);
  border-radius: 12px; padding: 16px;
}
.an .an-product-callout .label { color: var(--forest-900); margin-bottom: 6px; }
.an .an-product-callout p { font-size: 13px; color: var(--forest-900); line-height: 1.5; margin: 0; }

/* ── Pricing ── */
.an .an-pricing { background: var(--sand-50); }
.an .an-pricing-toggle { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.an .an-pricing-toggle .muted { color: var(--ink-500); }
.an .an-pricing-toggle .strong { color: var(--ink-900); font-weight: 500; }
.an .an-toggle {
  width: 44px; height: 24px; background: var(--forest-900);
  border-radius: 999px; position: relative; display: inline-block;
}
.an .an-toggle-knob {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  background: var(--sand-50); border-radius: 999px;
}
.an .an-pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.an .an-tier-card {
  padding: 24px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; min-height: 480px;
}
.an .an-tier-card.featured {
  background: var(--forest-900); color: #fff; border-color: var(--forest-900);
}
.an .an-tier-flag {
  position: absolute; top: -12px; left: 24px;
  background: var(--bronze-500); color: var(--mull-900, #4E342E);
  border: none; font-size: 11px; height: 22px;
  display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: var(--rad-full); font-weight: 500;
}
.an .an-tier-name { font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.an .an-tier-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.an .an-tier-card.featured .an-tier-sub { color: var(--bronze-200); opacity: .85; }
.an .an-tier-price { display: flex; align-items: baseline; gap: 4px; }
.an .an-tier-price .amount { font-family: var(--font-display); font-size: 36px; font-weight: 500; }
.an .an-tier-price .cadence { font-size: 12px; opacity: .7; }
.an .an-tier-limit { font-size: 11px; margin-top: 4px; color: var(--ink-500); }
.an .an-tier-card.featured .an-tier-limit { color: var(--bronze-200); }
.an .an-tier-desc { font-size: 13px; line-height: 1.5; color: var(--ink-700); }
.an .an-tier-card.featured .an-tier-desc { color: rgba(255,255,255,.85); }
.an .an-tier-cta {
  background: transparent; color: var(--ink-900);
  border: 1px solid var(--border); margin-top: 4px;
  text-decoration: none; justify-content: center;
}
.an .an-tier-card.featured .an-tier-cta {
  background: var(--bronze-500); color: var(--mull-900, #4E342E); border-color: var(--bronze-500);
}
.an .an-tier-features { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.an .an-tier-feature { display: flex; gap: 8px; font-size: 13px; align-items: flex-start; }
.an .an-pricing-footnotes {
  margin-top: 24px; font-size: 13px; color: var(--ink-500);
  display: flex; gap: 24px; flex-wrap: wrap;
}

/* ── Trust strip ── */
.an .an-trust {
  padding: 48px 80px 32px;
  border-top: 1px solid var(--border-soft);
  background: var(--sand-50);
}
.an .an-trust-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px;
}
.an .an-trust-head .muted.small { font-size: 12px; color: var(--ink-500); }
.an .an-trust-row { display: flex; gap: 56px; flex-wrap: wrap; align-items: center; }
.an .an-partner {
  font-family: var(--font-display); font-weight: 480; font-size: 22px;
  color: var(--ink-300); letter-spacing: .01em;
}

/* ── Closing CTA ── */
.an .an-closing {
  padding: 80px;
  border-top: 1px solid var(--border-soft);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px;
  align-items: center;
  background: var(--sand-50);
}
.an .an-closing-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 56px; line-height: 1.04; letter-spacing: -0.02em;
  margin: 0;
}
.an .an-closing-side { display: flex; flex-direction: column; gap: 16px; }
.an .an-closing-side p { font-size: 16px; color: var(--ink-700); line-height: 1.5; margin: 0; }
.an .an-closing-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Footer ── */
.an-footer {
  background: var(--forest-900); color: var(--sand-50);
  padding: 56px 80px 32px;
  font-family: var(--font-body);
}
.an-footer .an-footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px;
}
.an-footer p {
  margin-top: 16px; font-size: 13px; opacity: .75;
  max-width: 280px; line-height: 1.5;
}
.an-footer .an-footer-langs { display: flex; gap: 8px; margin-top: 20px; }
.an-footer .an-footer-langs span {
  font-family: var(--font-mono); font-size: 11px; opacity: .5;
  border: 1px solid rgba(244,239,230,.2);
  border-radius: 4px; padding: 3px 6px;
}
.an-footer .an-footer-langs span.active { opacity: 1; }
.an-footer .an-footer-col { display: flex; flex-direction: column; gap: 8px; }
.an-footer .an-footer-col .label { margin-bottom: 4px; color: var(--bronze-500); }
.an-footer .an-footer-col a {
  color: inherit; text-decoration: none;
  font-size: 13px; opacity: .85; transition: opacity .15s ease;
}
.an-footer .an-footer-col a:hover { opacity: 1; }
.an-footer .an-footer-legal {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid rgba(244,239,230,.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12px; opacity: .65;
}

/* ── Responsive collapse ── */
@media (max-width: 1080px) {
  .an .an-hero-grid,
  .an .an-product-grid,
  .an .an-closing { grid-template-columns: 1fr; }
  .an .an-hero-glyph { margin: 0 auto; max-width: 320px; }
  .an .an-persona-grid,
  .an .an-pricing-grid { grid-template-columns: 1fr 1fr; }
  .an-footer .an-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .an .an-section { padding: 40px 24px; }
  .an .an-hero-grid { padding: 40px 24px 56px; }
  .an .an-hero-title { font-size: 44px; }
  .an .an-closing-title,
  .an .an-section-title { font-size: 32px; }
  .an .an-persona-grid,
  .an .an-pricing-grid,
  .an .an-product-kpis { grid-template-columns: 1fr; }
  .an .an-product-content { grid-template-columns: 1fr; }
  .an .an-marketing-nav,
  .an-footer { padding-left: 24px; padding-right: 24px; }
  .an .an-marketing-nav-links { gap: 14px; font-size: 13px; }
  .an-footer .an-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   AUTH — split-pane (brand-panel + form), onboarding-wizard.
   Allt scopas under .an / .an-auth-root så befintliga --fs-* sidor
   inte påverkas.
   ───────────────────────────────────────────────────────────── */

.an-auth-root {
  min-height: 100vh;
  background: var(--sand-50, #F5EFE3);
  color: var(--ink-900, #1A1A1A);
  font-family: var(--font-body, "DM Sans", system-ui, sans-serif);
}

.an .an-auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

/* Brand-panel (vänster) */
.an .an-auth-brand {
  position: relative;
  background: var(--forest-900, #1B2A1F);
  color: var(--sand-50, #F5EFE3);
  padding: 40px 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.an .an-auth-brand-top { position: relative; z-index: 2; }
.an .an-auth-brand-topo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .14;
  pointer-events: none;
}
.an .an-auth-brand-quote {
  position: relative; z-index: 2;
  max-width: 380px;
}
.an .an-auth-quote-text {
  font-family: var(--font-display, "Fraunces", "Newsreader", serif);
  font-size: 24px;
  line-height: 1.32;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.an .an-auth-quote-author {
  font-size: 13px;
  opacity: .8;
  margin: 0;
}
.an .an-auth-brand-foot {
  position: relative; z-index: 2;
  font-size: 11px;
  opacity: .65;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Form-panel (höger) */
.an .an-auth-form-panel {
  padding: 36px 56px 56px;
  display: flex;
  flex-direction: column;
  background: var(--sand-50, #F5EFE3);
}
.an .an-auth-form-top {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-500, #6B6B6B);
}
.an .an-auth-form-top-q { color: var(--ink-500, #6B6B6B); }
.an .an-auth-form-top-link {
  color: var(--forest-900, #1B2A1F);
  font-weight: 500;
  text-decoration: none;
}
.an .an-auth-form-top-link:hover { text-decoration: underline; }

.an .an-auth-form-body {
  margin: auto 0;
  max-width: 380px;
  width: 100%;
}
.an .an-auth-form-body--wide { max-width: 440px; }

.an .an-auth-h1 {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 36px;
  line-height: 1.1;
  font-weight: 460;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink-900, #1A1A1A);
}
.an .an-auth-sub {
  font-size: 14px;
  color: var(--ink-500, #6B6B6B);
  margin: 0 0 28px;
}

.an .an-auth-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500, #6B6B6B);
  margin: 14px 0 6px;
}

.an .an-auth-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900, #1A1A1A);
  background: #fff;
  border: 1.5px solid var(--border, #E1D9C8);
  border-radius: 8px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.an .an-auth-field:focus {
  border-color: var(--forest-900, #1B2A1F);
  box-shadow: 0 0 0 3px rgba(27,42,31,.12);
}
.an .an-auth-field::placeholder { color: var(--ink-300, #B5B0A4); }

.an .an-auth-pw-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.an .an-auth-forgot {
  font-size: 12px;
  color: var(--forest-900, #1B2A1F);
  text-decoration: none;
}
.an .an-auth-forgot:hover { text-decoration: underline; }

.an .an-auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700, #3D3D3D);
  margin: 18px 0 22px;
}
.an .an-auth-check input { accent-color: var(--forest-900, #1B2A1F); }

.an .an-auth-submit {
  display: block;
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sand-50, #F5EFE3);
  background: var(--forest-900, #1B2A1F);
  border: 1.5px solid var(--forest-900, #1B2A1F);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease;
}
.an .an-auth-submit:hover { background: #243528; }
.an .an-auth-submit:active { transform: translateY(1px); }

.an .an-auth-ghost {
  display: inline-block;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700, #3D3D3D);
  background: transparent;
  border: 1.5px solid var(--border, #E1D9C8);
  border-radius: 8px;
  cursor: pointer;
}
.an .an-auth-ghost:disabled { opacity: .45; cursor: not-allowed; }

.an .an-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 11px;
  color: var(--ink-300, #B5B0A4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.an .an-auth-divider::before,
.an .an-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, #E1D9C8);
}
.an .an-auth-divider span { white-space: nowrap; }

.an .an-auth-passkey-wrap { display: flex; justify-content: center; }
.an .an-auth-passkey {
  font-size: 13px;
  color: var(--forest-900, #1B2A1F);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}

.an .an-auth-secondary {
  margin: 18px 0 0;
  font-size: 13px;
  text-align: center;
}
.an .an-auth-secondary a {
  color: var(--ink-500, #6B6B6B);
  text-decoration: none;
}
.an .an-auth-secondary a:hover { text-decoration: underline; }

.an .an-auth-reassurance {
  font-size: 12px;
  color: var(--ink-500, #6B6B6B);
  line-height: 1.5;
  margin: 24px 0 0;
}
.an .an-auth-hint {
  font-size: 11px;
  color: var(--ink-500, #6B6B6B);
  margin: 4px 0 0;
}
.an .an-auth-terms {
  font-size: 12px;
  color: var(--ink-700, #3D3D3D);
  line-height: 1.5;
  margin: 18px 0 14px;
}
.an .an-auth-validation {
  display: block;
  font-size: 12px;
  color: #B33A2A;
  margin: 2px 0 0;
}

/* ─── Onboarding-wizard ────────────────────────────────────── */

.an .an-onb-root {
  padding: 40px;
  background: var(--sand-50, #F5EFE3);
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100vh;
  box-sizing: border-box;
}
.an .an-onb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.an .an-onb-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500, #6B6B6B);
}
.an .an-onb-h1 {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 28px;
  font-weight: 460;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
}
.an .an-onb-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.an .an-onb-logout-form { margin: 0; }
.an .an-onb-logout {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-500, #6B6B6B);
  background: transparent;
  border: 1px solid var(--border, #E1D9C8);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.an .an-onb-logout:hover { color: var(--ink-900, #1A1A1A); }

.an .an-onb-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-500, #6B6B6B);
  flex-wrap: wrap;
}
.an .an-onb-step-pill { display: inline-flex; align-items: center; gap: 8px; }
.an .an-onb-step-pill[data-state="current"] { color: var(--ink-900, #1A1A1A); }
.an .an-onb-step-pill[data-state="current"] .an-onb-step-name { font-weight: 600; }
.an .an-onb-step-pill[data-state="done"] { color: var(--forest-700, #2D4434); }
.an .an-onb-step-pill[data-state="next"] { color: var(--ink-300, #B5B0A4); }
.an .an-onb-step-bullet {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.an .an-onb-step-pill[data-state="done"] .an-onb-step-bullet { background: var(--forest-700, #2D4434); color: #fff; }
.an .an-onb-step-pill[data-state="current"] .an-onb-step-bullet { background: var(--ink-900, #1A1A1A); color: #fff; }
.an .an-onb-step-pill[data-state="next"] .an-onb-step-bullet {
  background: transparent;
  color: var(--ink-300, #B5B0A4);
  border: 1.5px solid var(--ink-300, #B5B0A4);
}
.an .an-onb-step-connector {
  flex: 0 0 60px;
  height: 1px;
  background: var(--border, #E1D9C8);
}

.an .an-onb-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.an .an-onb-card {
  background: #fff;
  border: 1.5px solid var(--border-soft, #E8E2D2);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.an .an-onb-card[data-active="True"] {
  border-color: var(--ink-900, #1A1A1A);
  box-shadow: 0 4px 24px -12px rgba(27,42,31,.16);
}
.an .an-onb-card[data-active="False"] { opacity: .75; }

.an .an-onb-step-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500, #6B6B6B);
  margin-bottom: 6px;
}
.an .an-onb-card-h {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 22px;
  font-weight: 480;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.an .an-onb-persona {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1.5px solid var(--border-soft, #E8E2D2);
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.an .an-onb-persona:hover { border-color: var(--ink-300, #B5B0A4); }
.an .an-onb-persona[data-selected="True"] {
  border-color: var(--forest-900, #1B2A1F);
  background: rgba(27,42,31,.06);
}
.an .an-onb-persona-dot {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bronze-500, #B07A2C);
  flex: 0 0 36px;
}
.an .an-onb-persona-dot[data-kind="forester"] { background: var(--forest-700, #2D4434); }
.an .an-onb-persona-dot[data-kind="manager"] { background: var(--mull-700, #5A4A36); }
.an .an-onb-persona-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.an .an-onb-persona-name { font-size: 14px; font-weight: 500; color: var(--ink-900, #1A1A1A); }
.an .an-onb-persona-sub { font-size: 12px; color: var(--ink-500, #6B6B6B); }
.an .an-onb-persona-check {
  font-size: 14px;
  font-weight: 600;
  color: var(--forest-900, #1B2A1F);
}

.an .an-onb-hint {
  font-size: 11px;
  color: var(--ink-500, #6B6B6B);
  line-height: 1.5;
  margin: 12px 0 0;
}

.an .an-onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.an .an-onb-chip {
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700, #3D3D3D);
  background: var(--bg-elevated, #FAF6EC);
  border: 1.5px solid var(--border, #E1D9C8);
  border-radius: 999px;
  cursor: pointer;
}
.an .an-onb-chip[data-selected="True"] {
  color: var(--forest-900, #1B2A1F);
  background: rgba(27,42,31,.06);
  border-color: var(--forest-900, #1B2A1F);
  font-weight: 600;
}

.an .an-onb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.an .an-onb-actions .an-auth-submit { width: auto; min-width: 200px; }

/* Responsiv brytpunkt — kollapsa split + steg-grid. */
@media (max-width: 960px) {
  .an .an-auth-split { grid-template-columns: 1fr; }
  .an .an-auth-brand { padding: 28px; min-height: 220px; }
  .an .an-auth-form-panel { padding: 28px; }
  .an .an-onb-steps-grid { grid-template-columns: 1fr; }
  .an .an-onb-progress { gap: 8px; }
  .an .an-onb-step-connector { flex: 0 0 20px; }
}

/* ─────────────────────────────────────────────────────────────
   DASHBOARD — TodayBand + KPI-rad (persona-anpassad).
   Scopas under .an .an-dash-top så befintliga --fs-* sektioner
   längre ner i Home.razor inte påverkas.
   ───────────────────────────────────────────────────────────── */

.an .an-dash-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 12px;
}

.an .an-today-band {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 22px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #E8E2D2);
  color: var(--ink-900, #1A1A1A);
}
.an .an-today-band[data-dark="True"] {
  background: var(--forest-900, #1B2A1F);
  color: var(--sand-50, #F5EFE3);
  border-color: var(--forest-900, #1B2A1F);
}
.an .an-today-topo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .14;
  pointer-events: none;
}
.an .an-today-inner { position: relative; }
.an .an-today-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500, #6B6B6B);
  margin-bottom: 6px;
}
.an .an-today-band[data-dark="True"] .an-today-eyebrow { color: var(--bronze-200, #D4A017); }
.an .an-today-title {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 26px;
  font-weight: 480;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 760px;
  margin: 0 0 14px;
}
.an .an-today-items {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 12px;
}
.an .an-today-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.an .an-today-item-dot {
  font-size: 12px;
  color: var(--bronze-500, #B07A2C);
}
.an .an-today-band[data-dark="True"] .an-today-item-dot { color: var(--bronze-200, #D4A017); }
.an .an-today-item-title { font-size: 13px; font-weight: 500; }
.an .an-today-item-sub {
  font-size: 11px;
  color: var(--ink-500, #6B6B6B);
}
.an .an-today-band[data-dark="True"] .an-today-item-sub { color: rgba(244,239,230,.65); }

.an .an-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.an .an-dash-kpi {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #E8E2D2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.an .an-dash-kpi-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500, #6B6B6B);
}
.an .an-dash-kpi-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.an .an-dash-kpi-value {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 28px;
  font-weight: 480;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.an .an-dash-kpi-unit {
  font-size: 12px;
  color: var(--ink-500, #6B6B6B);
}

@media (max-width: 960px) {
  .an .an-dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .an .an-today-title { font-size: 22px; }
}
@media (max-width: 560px) {
  .an .an-dash-kpis { grid-template-columns: 1fr; }
}

/* ── Widget host card (rendered by WidgetHost.razor around each
   dashboard tile). Provides the surface, header, and body so the
   inner widget body can drop its own MudCard chrome. */
.an .an-widget {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #E8E2D2);
  border-radius: var(--rad-4, 12px);
  display: flex; flex-direction: column;
  height: 100%;
  box-shadow: var(--shd-1);
  overflow: hidden;
}
.an .an-widget-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-soft, #E8E2D2);
}
.an .an-widget-title {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: var(--fs-16, 16px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900, #1A1F1C);
}
.an .an-widget-body {
  padding: 16px 18px 18px;
  flex: 1; min-height: 0;
  color: var(--ink-700, #2B302B);
  font-size: var(--fs-14, 14px);
  line-height: var(--lh-body, 1.5);
}
/* Tighten Mud children inside widget bodies so they breathe on the new surface. */
.an .an-widget-body .mud-list { padding: 0; }
.an .an-widget-body .mud-list-item { padding: 6px 0; min-height: 0; }
.an .an-widget-body .mud-typography-h6 {
  font-family: var(--font-display, serif); font-size: 16px; font-weight: 500;
}

/* ───────────────────────────────────────────────────────────────────────
   Module-DNA — list / detail / form / map / report patterns
   Opt-in: wrap module page content in <div class="an"> and apply
   these classes. Tables remain semantic <table>; cards are <section>.
─────────────────────────────────────────────────────────────────────── */

/* NOTE: The "Module-DNA" parallel-atom block (list shell / table / status /
   pagination / empty / detail / tabs / event-row / kpi / form-step / field /
   label / form-actions / form-summary / chip / view-switch / selection-bar /
   delta-up/-down/-flat) used to live here. Removed in the Mud-theme redesign.
   MudBlazor's themed controls plus the AnKpi / AnEmptyState / AnEventRow /
   AnStatus shared components supply these visuals now. */

/* Map shell ───────────────────────────────────────────────────────────── */
.an .an-map-shell {
  position: relative; height: 560px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 30% 40%, rgba(31,55,46,.06), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(192,124,69,.05), transparent 60%),
    var(--bg-elevated);
}
.an .an-map-overlay {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.an .an-map-overlay > * { pointer-events: auto; }
.an .an-map-panel {
  background: rgba(250,247,241,.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 12px 14px; font-size: 12px; max-width: 280px;
}

/* Document / report ───────────────────────────────────────────────────── */
.an .an-report {
  background: #fff; color: var(--ink-900);
  max-width: 760px; margin: 0 auto; padding: 56px 64px;
  border: 1px solid var(--border-soft); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  font-family: var(--font-body);
}
.an .an-report h1 {
  font-family: var(--font-display); font-weight: 480;
  font-size: 32px; margin: 0 0 4px; letter-spacing: -.01em;
}
.an .an-report .an-report-sub {
  font-size: 12px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 32px;
}
.an .an-report h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; margin: 28px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.an .an-report dl {
  display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px;
  font-size: 13px; margin: 0;
}
.an .an-report dt { color: var(--ink-500); }
.an .an-report .an-report-footer {
  margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--ink-500); display: flex; justify-content: space-between;
}
@media (max-width: 640px) {
  .an .an-report { padding: 32px 24px; }
  .an .an-report dl { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────
   Charts — legend, axis, and series palette tokens
   Used by AnLineSpark / AnBarSpark / AnDonut / AnStackedBars and
   exported as CSS vars so ApexCharts / MudChart can reuse the same hues.
─────────────────────────────────────────────────────────────────────── */
:root {
  --chart-1: #1F372E; /* forest-900 */
  --chart-2: #C07C45; /* bronze-500 */
  --chart-3: #6B4F2B; /* mull-700 */
  --chart-4: #4E6E5D; /* moss */
  --chart-5: #8A6F3F; /* tan */
  --chart-6: #2E7D32; /* forest-700 */
  --chart-grid: var(--border);
  --chart-axis: var(--ink-500);
}

.an .an-chart-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 20px;
}
.an .an-chart-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
.an .an-chart-title { font-family: var(--font-display); font-size: 16px; font-weight: 480; }
.an .an-chart-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

.an .an-chart-range {
  display: inline-flex; gap: 2px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px;
}
.an .an-chart-range button {
  background: transparent; border: 0; padding: 3px 10px; border-radius: 4px;
  font: inherit; font-size: 11px; color: var(--ink-700); cursor: pointer;
}
.an .an-chart-range button[aria-pressed="true"] {
  background: var(--forest-100); color: var(--forest-900); font-weight: 600;
}

.an .an-legend {
  display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-700);
}
.an .an-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.an .an-legend .an-legend-swatch {
  width: 14px; height: 2px; background: var(--forest-900);
}
.an .an-legend .an-legend-swatch[data-shape="dot"] {
  width: 8px; height: 8px; border-radius: 99px;
}
.an .an-legend .an-legend-swatch[data-shape="dash"] {
  background: transparent; border-top: 1px dashed var(--ink-300); height: 0;
}

/* ───────────────────────────────────────────────────────────────────────
   Mobile patterns — card-list, FAB, swipe-row, sticky search
   Activate with .an-mob on a wrapping element; classes below assume
   viewport ≤ 720 (mobile breakpoint).
─────────────────────────────────────────────────────────────────────── */
.an .an-mob-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}
.an .an-mob-topbar .an-mob-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 480;
  line-height: 1.15;
}
.an .an-mob-topbar .an-mob-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-500); margin-bottom: 2px;
}
.an .an-mob-iconbtn {
  position: relative; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700); cursor: pointer;
}
.an .an-mob-iconbtn .an-mob-iconbtn-dot {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 99px; background: var(--bronze-500);
}

.an .an-mob-stickybar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; gap: 8px; align-items: center;
}

/* Card-list — each item is a tap target, swipeable actions optional */
.an .an-mob-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.an .an-mob-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.an .an-mob-row:active { transform: scale(.98); box-shadow: 0 0 0 3px rgba(31,55,46,.06); }
.an .an-mob-row .an-mob-row-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--forest-100); color: var(--forest-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.an .an-mob-row .an-mob-row-title { font-weight: 500; font-size: 15px; }
.an .an-mob-row .an-mob-row-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.an .an-mob-row .an-mob-row-meta {
  text-align: right; font-size: 12px; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.an .an-mob-row .an-mob-row-meta b { color: var(--ink-900); font-weight: 600; }

/* Floating action button — primary mobile compose entry point */
.an .an-mob-fab {
  position: fixed; right: 18px;
  bottom: calc(var(--fs-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--forest-900); color: var(--sand-50);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(31,55,46,.28), 0 2px 6px rgba(0,0,0,.10);
  z-index: 1200;
  font-size: 22px; line-height: 1;
}
.an .an-mob-fab:active { transform: scale(.96); }

/* Mobile map shell — full-bleed under topbar */
.an .an-mob-map {
  position: relative; flex: 1;
  background:
    radial-gradient(circle at 30% 40%, rgba(31,55,46,.06), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(192,124,69,.05), transparent 60%),
    var(--bg-elevated);
}
.an .an-mob-map-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  border-top: 1px solid var(--border-soft);
  padding: 12px 16px 18px;
  box-shadow: 0 -8px 28px rgba(0,0,0,.10);
  max-height: 60%; overflow: hidden;
}
.an .an-mob-map-sheet::before {
  content: ""; display: block; width: 36px; height: 4px;
  border-radius: 99px; background: var(--ink-300);
  margin: 0 auto 10px;
}

/* Segmented control — used in mobile detail tabs */
.an .an-seg {
  display: inline-flex; padding: 3px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-radius: 10px; gap: 2px;
}
.an .an-seg button {
  background: transparent; border: 0; padding: 6px 14px; border-radius: 7px;
  font: inherit; font-size: 12px; color: var(--ink-700); cursor: pointer;
}
.an .an-seg button[aria-pressed="true"] {
  background: var(--bg); color: var(--ink-900); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Pull-down hint — top of scrollable mobile list */
.an .an-mob-pull {
  text-align: center; font-size: 11px; color: var(--ink-500);
  padding: 6px 0 2px;
}

/* ---------- App shell — sidebar + topbar ---------- */
.an .an-shell {
  height: 100vh; display: flex; background: var(--bg); overflow: hidden;
}
.an .an-shell-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.an .an-shell-body {
  flex: 1; overflow: auto; padding: 24px;
}

/* Sidebar */
.an .an-sidebar {
  width: 272px; background: var(--sand-100);
  border-right: 1px solid var(--border-soft);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0; overflow-y: auto;
}
.an .an-sidebar-brand {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  font-family: var(--font-display); font-size: 18px; color: var(--forest-900);
  font-weight: 500; letter-spacing: -0.01em;
}
.an .an-sidebar-org {
  padding: 10px 12px; background: var(--surface); border-radius: 8px;
  border: 1px solid var(--border-soft); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.an .an-sidebar-org-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-900);
}
.an .an-sidebar-org-sub { font-size: 11px; color: var(--ink-500); }
.an .an-sidebar-search {
  position: relative; margin: 6px 4px 8px;
}
.an .an-sidebar-search input {
  width: 100%; height: 32px; font-size: 12px; padding: 0 10px 0 30px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 6px; color: var(--ink-900);
}
.an .an-sidebar-section-label {
  padding: 8px 10px 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500); font-weight: 600;
}
.an .an-side-items { display: flex; flex-direction: column; gap: 1px; }
.an .an-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px; font-size: 13px;
  background: transparent; color: var(--ink-700); font-weight: 400;
  cursor: pointer; text-decoration: none; border: 0;
}
.an .an-side-item:hover { background: var(--sand-200); }
.an .an-side-item.active {
  background: var(--forest-100); color: var(--forest-900); font-weight: 600;
}
.an .an-side-item.child { padding: 5px 10px 5px 32px; }
.an .an-side-item-badge {
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--bronze-500); color: var(--mull-900); font-weight: 600;
  margin-left: auto;
}
.an .an-sidebar-status {
  margin-top: auto; padding: 10px; font-size: 11px; color: var(--ink-500);
}
.an .an-sidebar-status-dot {
  width: 6px; height: 6px; background: var(--forest-700);
  border-radius: 999px; display: inline-block; margin-right: 6px;
}

/* Topbar */
.an .an-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg); min-height: 60px; flex-shrink: 0;
}
.an .an-topbar-left { display: flex; flex-direction: column; gap: 2px; }
.an .an-topbar-crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-500);
}
.an .an-topbar-crumb span:last-child { color: var(--ink-700); }
.an .an-topbar-title {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 480; color: var(--ink-900); margin: 0;
}
.an .an-topbar-actions { display: flex; align-items: center; gap: 10px; }
.an .an-topbar-divider {
  width: 1px; height: 24px; background: var(--border-soft); margin: 0 4px;
}
.an .an-topbar-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--forest-900); color: var(--sand-50);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   Design-referenssida (/design) — visar tokens i bruk
   ============================================================ */
.an-design-root { max-width: 1080px; margin: 0 auto; padding: 32px 24px 96px; }
.an-design-header { margin-bottom: 32px; border-bottom: 1px solid var(--border-soft); padding-bottom: 24px; }
.an-design-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.an-design-h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; margin: 0 0 8px; color: var(--ink-900); }
.an-design-sub { font-family: var(--font-body); color: var(--text-muted); margin: 0; max-width: 60ch; }

.an-design-section { margin-top: 40px; }
.an-design-h2 {
  font-family: var(--font-display); font-size: 22px; margin: 0 0 16px;
  color: var(--ink-900); padding-bottom: 8px; border-bottom: 1px dashed var(--border-soft);
}

.an-design-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.an-design-swatch { display: flex; gap: 10px; align-items: center; }
.an-design-swatch-chip { width: 44px; height: 44px; border-radius: 8px; flex: 0 0 44px; }
.an-design-swatch-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-design-swatch-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink-900); }
.an-design-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.an-design-type { display: flex; flex-direction: column; gap: 14px; }

.an-design-status-row { display: flex; gap: 10px; flex-wrap: wrap; }
.an-design-pill {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
}

.an-design-spacing { display: flex; flex-direction: column; gap: 6px; }
.an-design-spacing-row { display: flex; align-items: center; gap: 14px; }
.an-design-spacing-bar { border-radius: 3px; }
.an-design-spacing-row code { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.an-design-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.an-design-card-demo {
  padding: 24px 16px; text-align: center; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted);
}

/* Mobile bottom-nav ──────────────────────────────────────────────────── */
.an .an-mobile-nav {
  display: none; /* Desktop default — visible only on small screens */
}
@media (max-width: 640px) {
  .an .an-mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-soft);
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(15, 23, 19, 0.04);
  }
  .an .an-mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 4px; min-height: 52px;
    color: var(--ink-500); text-decoration: none;
    font-family: var(--font-body); font-size: 10.5px; line-height: 1.1;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
  }
  .an .an-mobile-nav-item:hover { background: var(--bg-soft); color: var(--ink-900); }
  .an .an-mobile-nav-item[data-active="True"] {
    color: var(--forest-900);
    background: var(--forest-100);
  }
  .an .an-mobile-nav-icon { display: inline-flex; }
  .an .an-mobile-nav-label { letter-spacing: 0.01em; }

  /* Lämna utrymme nederst på sidan så bottennaven inte täcker innehållet */
  body.an-has-mobile-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Analytics Dashboard — an-analytics-* components
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.an-analytics-root { max-width: 1200px; }

.an-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.an-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink-900);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.an-page-sub {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 0;
}

/* ── Loading bar ─────────────────────────────────────────── */
.an-loading-bar {
  height: 3px;
  background: var(--border-soft);
  border-radius: var(--rad-full);
  overflow: hidden;
  margin-bottom: 24px;
}

.an-loading-bar-fill {
  height: 100%;
  width: 40%;
  background: var(--forest-700);
  border-radius: var(--rad-full);
  animation: an-loading-slide 1.4s ease-in-out infinite;
}

@keyframes an-loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Section title ───────────────────────────────────────── */
.an-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* NOTE: .an-kpi-row/.an-kpi-tile/.an-kpi-label/.an-kpi-value/.an-kpi-delta
   were the analytics-page parallel KPI atoms. Removed in the Mud-theme
   redesign — use <AnKpi> (Components/Shared/AnKpi.razor) instead. */

/* ── Chart 2×2 grid ──────────────────────────────────────── */
.an-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 860px) {
  .an-chart-grid { grid-template-columns: 1fr; }
}

.an-chart-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--rad-4);
  padding: 20px;
  box-shadow: var(--shd-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.an-chart-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.an-chart-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.01em;
}

.an-chart-card-sub {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* Trend chart annotation */
.an-chart-area { position: relative; }

.an-chart-annotation {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.an-chart-annotation-line {
  width: 1px;
  flex: 1;
  background: var(--bronze-500);
  opacity: 0.7;
}

.an-chart-annotation-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bronze-700);
  white-space: nowrap;
  background: var(--surface);
  padding: 2px 5px;
  border-radius: var(--rad-1);
  border: 1px solid var(--bronze-200);
  margin-top: 4px;
}

/* Chart legend */
.an-chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.an-chart-legend-item {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.an-chart-legend-item::before {
  content: '';
  width: 24px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.an-chart-legend-item.forest::before  { background: var(--forest-900); }
.an-chart-legend-item.ink::before     { background: var(--ink-300); border-top: 1px dashed var(--ink-300); height: 0; }
.an-chart-legend-item.bronze::before  { background: var(--bronze-500); }
.an-chart-legend-item.mull::before    { background: var(--mull-700); }

/* Distribution chart layout */
.an-chart-distribution {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

/* Donut legend */
.an-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.an-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.an-donut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* NOTE: .an-card/.an-card-header/.an-card-title/.an-card-desc,
   .an-table-wrap/.an-table*, .an-empty, .an-val-pos/.an-val-neg parallel
   atoms removed in the Mud-theme redesign. Use <MudPaper>, <MudTable>,
   <AnEmptyState>, and inline color styles. */

/* ── Color semantics card ────────────────────────────────── */
.an-color-semantics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  padding: 4px 0;
}

.an-color-sem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.an-color-sem-item:nth-last-child(-n+2):nth-child(odd),
.an-color-sem-item:last-child { border-bottom: none; }

.an-color-sem-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.an-color-sem-name {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-900);
  display: block;
}

.an-color-sem-desc {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: block;
}

/* ── API endpoints ───────────────────────────────────────── */
.an-api-endpoints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 20px;
}

.an-api-endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--rad-3);
  padding: 10px 14px;
}

.an-api-path {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink-700);
  word-break: break-all;
}

.an-icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--rad-2);
  color: var(--ink-500);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}

.an-icon-btn:hover {
  background: var(--bg-elevated);
  color: var(--ink-900);
}

/* ── BI grid ─────────────────────────────────────────────── */
.an-bi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
}

.an-bi-tile {
  padding: 18px 20px;
  border-right: 1px solid var(--border-soft);
}

.an-bi-tile:last-child { border-right: none; }

@media (max-width: 700px) {
  .an-bi-grid { grid-template-columns: 1fr; }
  .an-bi-tile { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .an-bi-tile:last-child { border-bottom: none; }
}

.an-bi-tile-title {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 6px;
}

.an-bi-tile-desc {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin: 0 0 10px;
}

.an-bi-path {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-700);
  display: block;
}

/* ── Utility ─────────────────────────────────────────────── */
/* .an-btn / .an-btn-outline / .an-btn-sm removed in Phase 3a — use
   <MudButton Variant=… Color=… Size=…> themed via AnoliraMudTheme. */

.mb-6 { margin-bottom: 24px; }

/* ── Toast / copy confirm ────────────────────────────────── */
.an-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--rad-4);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  z-index: 9999;
  box-shadow: var(--shd-pop);
  animation: an-toast-in 0.2s ease;
}

.an-toast-success {
  background: var(--forest-900);
  color: #fff;
}

@keyframes an-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Sidebar section caption (MudNavMenu host) — design package .label atom,
   bumped to ink-700 + weight 600 for stronger contrast against sand-100. */
.an-side-cap {
  padding: 14px 16px 6px;
  font: 600 11px/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-700);
}

/* Align sidebar items with section captions.
   Top-level alignment lives in app.css .mud-nav-link (margin: 1px 0,
   padding-left: 16px). The rules here zero the 12px margin Mud adds
   to .mud-nav-link-text and the empty .mud-nav-link-icon placeholder
   so the AnIcon we render inside the text slot starts flush at 16px. */
.mud-drawer .mud-nav-link .mud-nav-link-text {
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}
.mud-drawer .mud-nav-link .mud-nav-link-icon:empty {
  display: none !important;
}

/* ---------- Event row list (dashboard widgets) ---------- */
.an .an-event-list { display:flex; flex-direction:column; gap:10px; }
.an .an-event-row { display:grid; grid-template-columns:48px 8px 1fr auto; gap:10px; align-items:start; padding:6px 0; border-bottom:1px solid var(--border-soft,#E8E2D2); }
.an .an-event-row:last-child { border-bottom:none; }
.an .an-event-time { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size:12px; color: var(--ink-500,#6B7268); font-variant-numeric:tabular-nums; padding-top:2px; }
.an .an-event-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; }
.an .an-event-title { font-size:14px; color: var(--ink-900,#1A1F1C); font-weight:500; }
.an .an-event-sub { font-size:12px; color: var(--ink-500,#6B7268); margin-top:2px; }

/* Quick-action grid (dashboard QuickActionsWidget) */
.an .an-quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.an .an-quick-tile { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; background: var(--sand-50,#F7F2E7); border:1px solid var(--border-soft,#E8E2D2); border-radius: var(--rad-3,8px); color: var(--ink-900,#1A1F1C); text-decoration:none; transition:background .15s; }
.an .an-quick-tile:hover { background: var(--sand-100,#EFE7D2); }
.an .an-quick-tile .an-icon { color: var(--bronze-500,#A0703A); }
.an .an-quick-label { font-size:13px; font-weight:500; }

.an .an-row-link { display:block; text-decoration:none; color:inherit; border-radius: var(--rad-2, 6px); transition: background .12s; margin: 0 -8px; padding-left:8px; padding-right:8px; }
.an .an-row-link:hover { background: var(--sand-50, #F7F2E7); }
.an .an-row-link:hover .an-event-title, .an .an-row-link:hover [data-row-title] { color: var(--bronze-600, #8C5F2E); }