/* ============================================================
   VISION MANAGER DESIGN SYSTEM (VMDS) — KOMPONENTER
   ============================================================
   Skapad i FAS 2 av VMDS-rebuild (2026-05-16).

   STRUKTUR (per BYGGPLAN_VMDS_REBUILD.md sektion 4.3):
     [VMDS-1]  RESETS & BASE STYLES        (FAS 2)
     [VMDS-2]  TYPOGRAPHY HELPERS          (FAS 2)
     [VMDS-3]  LAYOUT HELPERS              (FAS 2)
     [VMDS-4]  BUTTONS                     (FAS 3)
     [VMDS-5]  CARDS                       (FAS 4)
     [VMDS-6]  TABS & NAVIGATION           (FAS 5)
     [VMDS-7]  TABLES                      (FAS 6)
     [VMDS-8]  FORMS & INPUTS              (FAS 7)
     [VMDS-9]  MODALS                      (FAS 8)
     [VMDS-10] PILLS & BADGES              (FAS 9)
     [VMDS-11] ALERTS & BANNERS            (FAS 9)
     [VMDS-12] STATS & KPI                 (FAS 10)
     [VMDS-13] SIDEBAR                     (FAS 11)
     [VMDS-14] TOPBAR                      (FAS 11)
     [VMDS-15] UTILITY CLASSES             (FAS 11)
     [VMDS-16] ACCESS HELPERS              (Batch 15, FAS 14.1)

   Legacy-block (Tidomat-FAS-C) ligger nedanför VMDS-sektionerna och
   migreras succesivt i FAS 13. Rivs i FAS 14.
   ============================================================ */


/* ============================================================
   [VMDS-1] RESETS & BASE
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--vm-bg-page);
  color: var(--vm-text);
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-base);
  line-height: var(--vm-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
}

::selection {
  background: rgba(74, 139, 214, 0.30);
  color: var(--vm-text-strong);
}


/* ============================================================
   [VMDS-2] TYPOGRAPHY HELPERS
   ============================================================ */

.vm-text-xs   { font-size: var(--vm-text-xs); }
.vm-text-sm   { font-size: var(--vm-text-sm); }
.vm-text-base { font-size: var(--vm-text-base); }
.vm-text-lg   { font-size: var(--vm-text-lg); }
.vm-text-xl   { font-size: var(--vm-text-xl); }
.vm-text-2xl  { font-size: var(--vm-text-2xl); }
.vm-text-3xl  { font-size: var(--vm-text-3xl); }

.vm-tabular-nums {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.vm-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text-muted);
}


/* ============================================================
   [VMDS-3] LAYOUT HELPERS
   ============================================================ */

.vm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-md);
}
.vm-stack-lg { gap: var(--vm-space-lg); }
.vm-stack-xl { gap: var(--vm-space-xl); }

.vm-row {
  display: flex;
  gap: var(--vm-space-md);
  align-items: center;
}
.vm-row-between { justify-content: space-between; }

.vm-grid {
  display: grid;
  gap: var(--vm-space-lg);
}
.vm-grid-2    { grid-template-columns: repeat(2, 1fr); }
.vm-grid-3    { grid-template-columns: repeat(3, 1fr); }
.vm-grid-4    { grid-template-columns: repeat(4, 1fr); }
.vm-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Page wrap — full-width container for admin-sidor.
   FAS 13 Batch 7 (2026-05-17): etablerad som 1300px-max-width för att
   ersätta inline max-width:1300px i 10+ templates.
   LARMDEL 2026-05-23: max-width borttagen per Per:s policy-beslut —
   larmcentral-applikation prioriterar data-densitet > text-läsbarhet
   (Map editor är referens-exempel på full bredd). margin/padding behålls. */
.vm-page-wrap {
  margin: 0 auto;
  padding: var(--vm-space-md) 0 var(--vm-space-2xl);
}


/* ============================================================
   [VMDS-4] BUTTONS
   ============================================================ */

.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vm-space-sm);
  padding: 10px 16px;
  border-radius: var(--vm-radius-sm);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semibold);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vm-text);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
  user-select: none;
  white-space: nowrap;
}

.vm-btn:disabled,
.vm-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* PRIMARY — solid brand */
.vm-btn-primary {
  background: var(--vm-brand-primary);
  color: var(--vm-text-on-brand);
  box-shadow: var(--vm-shadow-sm);
}

.vm-btn-primary:hover:not(:disabled) {
  background: var(--vm-brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--vm-shadow-brand);
}

.vm-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  background: var(--vm-brand-primary-active);
}

/* SECONDARY — outlined Apple-stil */
.vm-btn-secondary {
  background: transparent;
  color: var(--vm-text-soft);
  border-color: var(--vm-border-default);
}

.vm-btn-secondary:hover:not(:disabled) {
  background: rgba(var(--vm-brand-primary-rgb), 0.08);
  border-color: var(--vm-border-brand);
  color: var(--vm-text);
}

.vm-btn-secondary:active:not(:disabled) {
  background: rgba(var(--vm-brand-primary-rgb), 0.12);
}

/* GHOST — subtil border + transparent bg (2026-05-29 tema-grund-r3:
   tidigare 'border-color: transparent' = osynlig knapp.
   !important pga monolit + browser-default på button-element annars vinner. */
.vm-btn.vm-btn-ghost,
button.vm-btn-ghost,
a.vm-btn-ghost,
.vm-btn-ghost {
  background: transparent !important;
  color: var(--vm-text-secondary) !important;
  border: 1px solid var(--vm-btn-ghost-border) !important;
}

.vm-btn.vm-btn-ghost:hover:not(:disabled),
button.vm-btn-ghost:hover:not(:disabled),
a.vm-btn-ghost:hover:not(:disabled),
.vm-btn-ghost:hover:not(:disabled) {
  background: var(--vm-bg-hover) !important;
  border-color: var(--vm-border-default) !important;
  color: var(--vm-text-primary) !important;
}

/* DANGER — för förstör-actions (Batch 18a-fix 2026-05-21: synkroniserad med
   legacy "4. BUTTON" rad 2162 -> båda regler ger nu solid röd. Eliminerar
   default/hover-inkonsistens där default var solid (legacy vinner) men hover
   flippade till outline (VMDS-4 :hover spec 0,2,1 > legacy 0,2,0). Prio 1e-fix.) */
.vm-btn-danger {
  background: var(--vm-danger);
  color: var(--vm-danger-fg);
  border-color: var(--vm-danger);
}

.vm-btn-danger:hover:not(:disabled) {
  background: var(--vm-state-critical);
  border-color: var(--vm-state-critical);
  filter: brightness(1.05);
}

/* SUCCESS — bekräfta (2026-05-29 r7: chained .vm-btn.vm-btn-success för
   spec 0,2,0 — krävs eftersom en senare .vm-btn{} (rad ~2342) sätter
   background:transparent + border:transparent och vinner med 0,1,0
   later-in-source. Lärdom 21-mönster). */
.vm-btn.vm-btn-success {
  background: var(--vm-status-ok);
  color: var(--vm-btn-success-fg);
  border-color: var(--vm-status-ok);
}

.vm-btn.vm-btn-success:hover:not(:disabled) {
  background: var(--vm-btn-success-bg-hover);
  border-color: var(--vm-btn-success-bg-hover);
}

/* Storleks-varianter */
.vm-btn-sm {
  padding: 6px 10px;
  font-size: var(--vm-text-xs);
}

.vm-btn-lg {
  padding: 14px 24px;
  font-size: var(--vm-text-base);
}

/* Icon-only-knapp */
.vm-btn-icon {
  padding: 8px;
  aspect-ratio: 1;
}


/* ============================================================
   [VMDS-5] CARDS
   ============================================================ */

.vm-card {
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-lg);
  padding: var(--vm-space-xl);
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-card-hover:hover {
  border-color: var(--vm-border-default);
  transform: translateY(-1px);
  box-shadow: var(--vm-shadow-md);
}

.vm-card-elevated {
  background: var(--vm-bg-elevated);
  border-color: var(--vm-border-default);
}

/* KPI-card — som på /admin */
.vm-kpi-card {
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-lg);
  padding: var(--vm-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-sm);
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-kpi-card__header {
  display: flex;
  align-items: center;
  gap: var(--vm-space-sm);
}

.vm-kpi-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--vm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--vm-brand-primary-rgb), 0.12);
  color: var(--vm-brand-primary);
}

.vm-kpi-card__value {
  font-size: var(--vm-text-3xl);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.vm-kpi-card__label {
  text-transform: uppercase;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--vm-text-muted);
}

.vm-kpi-card__trend {
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
}

/* Section-card */
.vm-section-card {
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-lg);
  padding: var(--vm-space-xl);
}

.vm-section-card__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--vm-space-lg);
}

.vm-section-card__title {
  font-size: var(--vm-text-lg);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text);
  margin: 0;
}

.vm-section-card__subtitle {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-muted);
  margin: 4px 0 0 0;
}

.vm-section-card__action {
  font-size: var(--vm-text-sm);
  color: var(--vm-brand-primary);
  text-decoration: none;
}

.vm-section-card__action:hover {
  text-decoration: underline;
}

/* Section-card compact-variant (FAS 14.2 Prio 0 — 2026-05-17)
   För toolbars, dense list-cards där spacious 24px-padding är för mycket.
   Padding 8/16px (vs 24px default). Allt annat ärvs från vm-section-card.
   Anv: <section class="vm-section-card vm-section-card-tight">...</section>
   Unblocks: organisations/mt-card, persons/list pl-topbar, framtida compact-cards. */
.vm-section-card-tight {
  padding: var(--vm-space-2) var(--vm-space-4);
}

.vm-section-card-tight .vm-section-card__header {
  margin-bottom: var(--vm-space-sm);
}

/* Info-card */
.vm-info-card {
  background: var(--vm-bg-elevated);
  border-left: 3px solid var(--vm-brand-primary);
  border-radius: var(--vm-radius-md);
  padding: var(--vm-space-md) var(--vm-space-lg);
}

.vm-info-card-warning { border-left-color: var(--vm-status-warning); }
.vm-info-card-danger  { border-left-color: var(--vm-status-danger); }
.vm-info-card-success { border-left-color: var(--vm-status-ok); }


/* ============================================================
   [VMDS-6] TABS & NAVIGATION
   ============================================================ */

/* Subnav (för listsidor — Type B) */
.vm-subnav {
  display: flex;
  gap: var(--vm-space-sm);
  flex-wrap: wrap;
  padding: var(--vm-space-md) 0;
}

.vm-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-sm);
  padding: 8px 16px;
  background: transparent;
  color: var(--vm-text-soft);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-sm);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  text-decoration: none;
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-subnav-link:hover:not(.is-active) {
  background: rgba(var(--vm-brand-primary-rgb), 0.08);
  border-color: var(--vm-border-brand);
  color: var(--vm-text);
}

.vm-subnav-link.is-active {
  background: rgba(var(--vm-brand-primary-rgb), 0.15);
  border-color: var(--vm-brand-primary);
  color: var(--vm-text-strong);
}

/* Modal-tabbar (Flik 1/Flik 2 inuti modaler) */
.vm-modal-tabs {
  display: flex;
  gap: var(--vm-space-xs);
  border-bottom: 1px solid var(--vm-border-default);
  margin-bottom: var(--vm-space-lg);
}

.vm-modal-tab {
  padding: 10px 16px;
  background: transparent;
  color: var(--vm-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semibold);
  cursor: pointer;
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
  margin-bottom: -1px;
}

.vm-modal-tab:hover:not(.is-active) {
  color: var(--vm-text-primary);
  background: var(--vm-bg-hover);
}

.vm-modal-tab.is-active {
  color: var(--vm-brand-primary);
  border-bottom-color: var(--vm-brand-primary);
}

/* Segment-tabbar (för filter — kompakt) */
.vm-segment {
  display: inline-flex;
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-sm);
  padding: 2px;
  gap: 2px;
}

.vm-segment-item {
  padding: 6px 12px;
  background: transparent;
  color: var(--vm-text-soft);
  border: none;
  border-radius: 4px;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  cursor: pointer;
  transition: all var(--vm-duration-fast) var(--vm-ease-out-expo);
}

.vm-segment-item:hover:not(.is-active) {
  color: var(--vm-text-primary);
  background: var(--vm-bg-hover);
}

.vm-segment-item.is-active {
  background: var(--vm-brand-primary);
  color: var(--vm-text-on-brand);
}


/* ============================================================
   [VMDS-7] TABLES
   ============================================================ */

.vm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vm-text-sm);
  color: var(--vm-text);
}

.vm-table thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--vm-bg-page);
  border-bottom: 1px solid var(--vm-border-default);
  color: var(--vm-text-muted);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.vm-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vm-border-subtle);
  color: var(--vm-text);
}

.vm-table tbody tr {
  transition: background var(--vm-duration-fast) var(--vm-ease-out-expo);
}

.vm-table tbody tr:hover {
  background: rgba(var(--vm-brand-primary-rgb), 0.04);
}

.vm-table tbody tr:last-child td {
  border-bottom: none;
}

/* Kompakt tabell */
.vm-table-compact thead th,
.vm-table-compact tbody td {
  padding: 8px 12px;
}

/* Tabell-cell-varianter */
.vm-table-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vm-table-cell-action {
  text-align: right;
}

/* Tabell-container — default overflow:hidden (för clean radii på inner-table) */
.vm-table-container {
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-lg);
  overflow: hidden;
}

/* Tabell-container med horizontal scroll (FAS 14.2 Prio 0 — 2026-05-17)
   Modifier för bredare tabeller som behöver scroll på smala viewports.
   Default vm-table-container är overflow:hidden (clean radii) — behåll för smal-content.
   Anv: <div class="vm-table-container vm-table-container-scroll">
   Unblocks: persons/list pl-panel (Batch 4), framtida wide-tables.
   FIX 2026-05-17 (Chrome Claude FYND 3): tog bort overflow-y: hidden —
   blockerade sticky-positioning på vm-table-filter-row. overflow-y: visible
   (default) tillåter sticky thead/filter inom container medan horizontal-scroll
   bevaras. Trade-off: tabellen kan flöda högre än container vertikalt, men
   det är OK för persons/list (page-wrap scrollar). */
.vm-table-container-scroll {
  overflow-x: auto;
}

.vm-table-container .vm-table thead th:first-child {
  padding-left: 24px;
}

/* Table row-states (FAS 13 Batch 7 — 2026-05-17, persons/list-migration).
   Status-tinted bakgrund + 3px vänster-border for kritiska statusar.
   Anv: <tr class="vm-table-row-blocked">. Generaliserbar — lyfter pl-row.row-* monstret.
   Unblocks: persons/list (blockad/varning/ok-status), framtida listsidor med row-states.
   FIX 2026-05-17 (Chrome Claude FYND 4):
   - Hojt specificity med .vm-table tbody tr-prefix (vinner mot .vm-table tbody td default).
   - Hojt alpha 0.06 -> 0.10 for synlig tint.
   - Lagt border-left pa vm-table-row-warn first-child (saknades helt). */
.vm-table tbody tr.vm-table-row-blocked td {
  background: rgba(255, 87, 87, 0.10);
}
.vm-table tbody tr.vm-table-row-blocked td:first-child {
  border-left: 3px solid var(--vm-status-danger);
  padding-left: 21px;  /* 24px default − 3px border = 21px */
}
.vm-table tbody tr.vm-table-row-warn td {
  background: rgba(255, 185, 64, 0.10);
}
.vm-table tbody tr.vm-table-row-warn td:first-child {
  border-left: 3px solid var(--vm-status-warning);
  padding-left: 21px;
}
.vm-table tbody tr.vm-table-row-ok td:first-child {
  border-left: 3px solid var(--vm-status-ok);
  padding-left: 21px;
}
/* Inactive (auto-inaktiverad — kort oanvänt > 1 år). Persons-rebuild FAS 1 (2026-05-26).
   Skiljs från vm-table-row-blocked (manuell spärr / röd) via separat lila-color. */
.vm-table tbody tr.vm-table-row-inactive td {
  background: rgba(var(--vm-status-inactive-rgb), 0.10);
}
.vm-table tbody tr.vm-table-row-inactive td:first-child {
  border-left: 3px solid var(--vm-status-inactive);
  padding-left: 21px;
}

/* Filter-bar för listsidor (persons-rebuild FAS 1, 2026-05-26).
   Status-exklusiv grupp + ortogonal "saknar kort"-toggle. Bunden till
   JS-modul plFilterState. Mobile-fallback: flex-wrap radbryter ikoner
   utan att bryta layout. */
.vm-filter-icon-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.vm-filter-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  border: 1px solid var(--vm-border-default);
  background: transparent;
  color: var(--vm-text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  -webkit-user-select: none;
  user-select: none;
}
.vm-filter-icon:hover {
  border-color: var(--vm-brand-primary);
  color: var(--vm-text-primary);
}
.vm-filter-icon:focus-visible {
  outline: 2px solid var(--vm-brand-primary);
  outline-offset: 2px;
}
.vm-filter-icon-active,
.vm-filter-icon[aria-pressed="true"] {
  background: rgba(var(--vm-brand-primary-rgb), 0.15);
  border-color: var(--vm-brand-primary);
  color: var(--vm-text-primary);
  box-shadow: 0 0 0 1px var(--vm-brand-primary) inset;
}
.vm-filter-icon-glyph {
  font-size: 14px;
  line-height: 1;
}

/* Klickbara stats-rutor (persons-rebuild FAS 1, 2026-05-26).
   Stats-rutor är native <button>-element för tangentbord-semantik men ärver
   .vm-stat-stilarna visuellt. Active-state har EGEN look (bottom-border)
   för att skilja från .vm-filter-icon-active (filter-ikon-look) — undviker
   dubbel-aktiv-indikator när både ikon och stats-ruta representerar samma
   filter-state. */
button.vm-stat-clickable {
  /* Button-reset utan att förstöra .vm-stat-layout */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* Behåller .vm-stat-värdena för background/border/padding/radius */
}
button.vm-stat-clickable:hover {
  border-color: var(--vm-brand-primary);
}
button.vm-stat-clickable:focus-visible {
  outline: 2px solid var(--vm-brand-primary);
  outline-offset: 2px;
}
button.vm-stat-clickable[aria-pressed="true"] {
  border-bottom: 3px solid var(--vm-brand-primary);
  /* Kompensera höjd: 3px tjockare botten — flytta upp innehåll 2px så
     värdet inte hoppar 3px när active-state tonas in. */
  padding-bottom: calc(var(--vm-space-md) - 2px);
  background: rgba(var(--vm-brand-primary-rgb), 0.05);
}

/* Sticky-scroll för persons-listsidan (persons-rebuild FAS 1, mini-steg 2026-05-26).
   Bounded container: .vm-pers-list får begränsad höjd via flex så att endast
   tabell-tbody scrollar inom .vm-table-container-scroll. Stats + filter-bar är
   utanför scroll-containern (naturlig flow i flex-column) och stannar därför
   alltid synliga utan sticky-magi. Thead behåller befintlig sticky-top:0 som
   nu pekar mot scroll-containerns top istället för viewport.

   --pl-available-h sätts av JS (plRecomputeStickyOffsets) till
   window.innerHeight − absolut offset från document-top, så att höjden är
   korrekt oavsett admin-shell-bar-storlek. Fallback 480px om JS inte hinner. */
.vm-pers-list {
  display: flex;
  flex-direction: column;
  height: var(--pl-available-h, calc(100vh - 250px));
  min-height: 400px;
  /* Behåll befintliga access-stack-egenskaper (gap, etc) */
}
.vm-pers-list > section {
  flex: 0 0 auto;
}
.vm-pers-list > .vm-table-container-scroll {
  flex: 1 1 auto;
  /* min-height:0 krävs för att flex-child ska kunna shrinka i overflow */
  min-height: 0;
  /* Tillåt vertikal scroll inom containern. Befintlig overflow-x:auto bevaras. */
  overflow-y: auto;
}

/* Context-menu — generell VMDS-komponent (persons-rebuild FAS 2 / Batch 3, 2026-05-26).
   Klassisk högerklicks-meny: position:fixed vid cursor, viewport-clamp via JS,
   submeny via :hover/:focus-within. Dark theme via vm_tokens.
   Användning: <div class="vm-context-menu" role="menu" hidden>...</div> + JS
   som öppnar/stänger via .hidden-toggle + sätter top/left. */
.vm-context-menu {
  position: fixed;
  background: var(--vm-bg-elevated);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-md);
  /* 2026-05-29 tema-grund: tokeniserat box-shadow. */
  box-shadow: var(--vm-shadow-lg);
  padding: 4px 0;
  min-width: 220px;
  z-index: 1000;
  /* Smooth fade-in matchar VMDS modal-pattern */
  animation: vm-context-menu-fadein 120ms var(--vm-ease-out-expo, ease-out);
}
@keyframes vm-context-menu-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vm-context-menu[hidden] { display: none; }

.vm-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  color: var(--vm-text-primary);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.4;
}
.vm-context-menu-item:hover,
.vm-context-menu-item:focus {
  background: rgba(var(--vm-brand-primary-rgb), 0.15);
  outline: none;
}
.vm-context-menu-item:focus-visible {
  /* Inner outline för tangentbord-nav, syns på dark bg */
  box-shadow: inset 0 0 0 2px var(--vm-brand-primary);
}
/* 2026-05-29 r7: destructive-actions ("Ta bort person") får tydligare
   visuell vikt — bold + ärver röd-färg-tonat hover med 0.22 alpha så det
   står ut från övriga rader. Sätter !important på color för att outranka
   base .vm-context-menu-item:hover som ger brand-blå-tonad bg/text. */
.vm-context-menu-item-danger {
  color: var(--vm-status-danger) !important;
  font-weight: 600;
}
.vm-context-menu-item-danger:hover,
.vm-context-menu-item-danger:focus {
  background: rgba(232, 74, 74, 0.22) !important;
  color: var(--vm-status-danger) !important;
}

.vm-context-menu-separator {
  height: 1px;
  background: var(--vm-border-subtle);
  margin: 4px 0;
}

.vm-context-menu-submenu-arrow {
  margin-left: auto;
  color: var(--vm-text-muted);
  font-size: 11px;
}
.vm-context-menu-item-has-submenu > .vm-context-menu {
  /* Submenu = nästad vm-context-menu inom parent-item.
     Default hidden; visas vid hover/focus-within på parent-item. */
  position: absolute;
  top: -4px;
  left: 100%;
  display: none;
  /* Margin för att skapa subtle overlap så musen kan glida över */
  margin-left: -2px;
  /* Inga animation på submenu (annars känns hover-laggig) */
  animation: none;
}
.vm-context-menu-item-has-submenu:hover > .vm-context-menu,
.vm-context-menu-item-has-submenu:focus-within > .vm-context-menu {
  display: block;
}
/* Submenu som flippats till vänster pga viewport-clamp */
.vm-context-menu-item-has-submenu > .vm-context-menu.is-flipped-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: -2px;
}

/* Table filter-row (FAS 13 Batch 7 — 2026-05-17). Sticky filter-row under thead-row.
   Innehaller vm-input-sm i varje th-cell for column-filtering.
   Anv: <tr class="vm-table-filter-row"><th>...<input class="vm-input vm-input-sm"></th>...</tr>
   Position-sticky-top mappas till thead-rad-hojd (12+12+font-line-height ≈ 41px).
   FIX 2026-05-17 (Chrome Claude FYND B): hojt specificity med .vm-table thead-prefix
   (0,2,2) for att vinna mot base-regel .vm-table thead th (0,1,2) som tvingade top:0.
   Default .vm-table thead th har position:sticky;top:0;z-index:1 - filter-row ska
   ligga UNDER den med top:41px och hogre z-index. */
.vm-table thead .vm-table-filter-row th {
  background: var(--vm-bg-surface);
  padding: 4px 8px;
  border-bottom: 1px solid var(--vm-border-subtle);
  position: sticky;
  top: 41px;
  z-index: 9;
}

/* Table sort-icon (FAS 13 Batch 7 — 2026-05-17). Sort-arrow for sortable-headers.
   Default opacity 0.28 (latent). .on visar aktiv sort-state med brand-color.
   Anv: <th onclick="sort()">Namn<span class="vm-table-sort-icon">&#8597;</span></th>
        Aktiv: <span class="vm-table-sort-icon on">&#8593;</span> */
.vm-table-sort-icon {
  display: inline-block;
  font-size: 0.6rem;
  margin-left: 4px;
  opacity: 0.28;
  transition: opacity var(--vm-duration-fast) var(--vm-ease-out-expo), color var(--vm-duration-fast) var(--vm-ease-out-expo);
}
.vm-table-sort-icon.on {
  opacity: 1;
  color: var(--vm-brand-primary);
}
/* FIX 2026-05-17 v2 (Chrome Claude FYND C uppdaterad). FYND 5-fix v1 raknade
   inte med att getComputedStyle visade muted-color trots min explicit color.
   Annu hogre specificity: full-path .vm-table-container .vm-table thead
   .vm-th-sortable .vm-table-sort-icon[.on] (0,5,1 / 0,4,1) - vinner mot allt
   normalt + ger explicit opacity for default-state for att overrida ev.
   global span-opacity-regel. */
.vm-table-container .vm-table thead .vm-th-sortable .vm-table-sort-icon {
  opacity: 0.28;
  color: inherit;
}
.vm-table-container .vm-table thead .vm-th-sortable .vm-table-sort-icon.on {
  opacity: 1;
  color: var(--vm-brand-primary);
}

/* Sortable-header modifier (FAS 13 Batch 7 — 2026-05-17). Cursor + no-select for klickbara th.
   Anv: <th class="vm-th-sortable" onclick="sort()">Namn<span class="vm-table-sort-icon">...</span></th> */
.vm-th-sortable {
  cursor: pointer;
  user-select: none;
}
.vm-th-sortable:hover {
  color: var(--vm-text);
}

.vm-table-container .vm-table tbody td:first-child {
  padding-left: 24px;
}


/* ============================================================
   [VMDS-8] FORMS & INPUTS
   ============================================================ */

.vm-input,
.vm-select,
.vm-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--vm-bg-input);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-sm);
  color: var(--vm-text);
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-sm);
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-input:hover,
.vm-select:hover,
.vm-textarea:hover {
  border-color: var(--vm-border-strong);
}

.vm-input:focus,
.vm-select:focus,
.vm-textarea:focus {
  outline: none;
  border-color: var(--vm-brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--vm-brand-primary-rgb), 0.20);
}

.vm-input::placeholder,
.vm-textarea::placeholder {
  color: var(--vm-text-muted);
}

.vm-input:disabled,
.vm-select:disabled,
.vm-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Kompakt input-modifier (FAS 13 Batch 7 — 2026-05-17, persons/list-migration).
   Mindre hojd + padding + font-size for table-filter-row, dense toolbars, sok-falt.
   Anv: <input class="vm-input vm-input-sm"> */
.vm-input-sm {
  padding: 4px 8px;
  font-size: var(--vm-text-xs);
  height: 28px;
  border-radius: var(--vm-radius-sm);
}

/* Field-grupp */
.vm-field {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-xs);
}

.vm-field-label {
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  color: var(--vm-text-soft);
}

.vm-field-hint {
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
}

.vm-field-error {
  font-size: var(--vm-text-xs);
  color: var(--vm-status-danger);
}

.vm-field-error-input {
  border-color: var(--vm-status-danger);
}

.vm-field-error-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.20);
}

/* Checkbox & Radio */
.vm-checkbox,
.vm-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--vm-bg-input);
  border: 1px solid var(--vm-border-default);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--vm-duration-fast) var(--vm-ease-out-expo);
}

.vm-checkbox { border-radius: 4px; }
.vm-radio    { border-radius: 50%; }

.vm-checkbox:checked,
.vm-radio:checked {
  background: var(--vm-brand-primary);
  border-color: var(--vm-brand-primary);
}

.vm-checkbox:checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.vm-radio:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

/* Switch */
.vm-switch {
  appearance: none;
  width: 40px;
  height: 24px;
  background: var(--vm-bg-input);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-pill);
  cursor: pointer;
  position: relative;
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  /* 2026-05-29 tema-grund: tokeniserat — i mörkt vit knob, i ljust mörkgrå
     så knoppen syns mot track i båda teman. Tidigare var(--vm-text-strong)
     gjorde knob svart i ljust läge — osynlig på vit track. */
  background: var(--vm-switch-knob-bg);
  border-radius: 50%;
  box-shadow: var(--vm-shadow-xs);
  transition: all var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-switch:checked {
  background: var(--vm-brand-primary);
  border-color: var(--vm-brand-primary);
}

.vm-switch:checked::after {
  left: 18px;
}

/* Control-label wrapper (för checkbox/radio/switch med inline-text) */
.vm-control {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;  /* hindra .vm-stack flex-column från att stretcha */
  gap: var(--vm-space-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--vm-text-sm);
  color: var(--vm-text);
  width: max-content;      /* skydd om parent inte är flex */
}

.vm-control input { flex-shrink: 0; }

/* ── Toggle (BEM-mönster: wrapper > input + track + knob + label) ─────────────
   Byggd 2026-05-18 (FAS 14.2 Prio 0, vm-toggle). Tre-element-pattern matchar
   roles.html .tog/.tog-track/.tog-knob. Anv när du behöver checkbox-toggle med
   label-text bredvid. För enklare direkt-checkbox: använd .vm-switch istället.

   Anv:
     <label class="vm-toggle">
       <input type="checkbox" class="vm-toggle__input" name="X">
       <span class="vm-toggle__track"></span>
       <span class="vm-toggle__knob"></span>
       <span class="vm-toggle__label">Aktivera</span>  (valfri)
     </label>

   Modifiers:
     .vm-toggle-sm  — kompakt (28×16px) för täta listor
     .vm-toggle-lg  — stor (46×26px) för settings-paneler
     .vm-toggle--disabled på wrapper för disabled-state */
.vm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-sm);
  width: max-content;
  cursor: pointer;
  user-select: none;
  font-size: var(--vm-text-sm);
  color: var(--vm-text);
}

.vm-toggle__input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.vm-toggle__track {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-bg-input);
  border: 1px solid var(--vm-border-default);
  transition: background var(--vm-duration-normal) var(--vm-ease-out-expo),
              border-color var(--vm-duration-normal) var(--vm-ease-out-expo);
}

.vm-toggle__knob {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* 2026-05-29 tema-grund: tokeniserat så knob syns mot track i båda teman. */
  background: var(--vm-switch-knob-bg);
  box-shadow: var(--vm-shadow-xs);
  transition: transform var(--vm-duration-normal) var(--vm-ease-out-expo),
              background var(--vm-duration-normal) var(--vm-ease-out-expo);
  pointer-events: none;
}

.vm-toggle__label {
  font-size: var(--vm-text-sm);
  color: var(--vm-text);
  line-height: 1.2;
}

/* Checked state */
.vm-toggle__input:checked ~ .vm-toggle__track {
  background: var(--vm-brand-primary);
  border-color: var(--vm-brand-primary);
}

.vm-toggle__input:checked ~ .vm-toggle__knob {
  transform: translate(16px, -50%);
  /* När checked: alltid vit knob mot blå track (good kontrast i båda teman). */
  background: var(--vm-text-on-brand);
}

/* Hover */
.vm-toggle:hover .vm-toggle__track {
  border-color: var(--vm-border-strong, var(--vm-text-muted));
}

.vm-toggle:hover .vm-toggle__input:checked ~ .vm-toggle__track {
  filter: brightness(1.08);
  border-color: var(--vm-brand-primary);
}

/* Focus — a11y ring via box-shadow (:has() pa wrapper + adjacent sibling fallback).
   2026-05-18: Bytt fran outline till box-shadow eftersom outline-style:none vann
   (browser-default eller subtle cascade-konflikt — ingen explicit ":none" regel
   hittad i CSS-tree, men outline renderade inte). Box-shadow ar immune mot
   outline-resets och alltid synlig. 2-stegs ring: 2px bg-gap + 2px brand-primary. */
.vm-toggle:has(.vm-toggle__input:focus-visible) .vm-toggle__track,
.vm-toggle__input:focus-visible + .vm-toggle__track {
  box-shadow: 0 0 0 2px var(--vm-bg-page), 0 0 0 4px var(--vm-brand-primary);
}

/* Disabled — högre specificity (0,2,0) för att vinna över andra wrapper-regler.
   pointer-events:none extra säkerhet mot click trots disabled-input. */
.vm-toggle.vm-toggle--disabled,
.vm-toggle:has(.vm-toggle__input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.vm-toggle.vm-toggle--disabled .vm-toggle__track,
.vm-toggle:has(.vm-toggle__input:disabled) .vm-toggle__track {
  cursor: not-allowed;
}

/* Size modifiers */
.vm-toggle-sm .vm-toggle__track { width: 28px; height: 16px; }
.vm-toggle-sm .vm-toggle__knob  { width: 12px; height: 12px; }
.vm-toggle-sm .vm-toggle__input:checked ~ .vm-toggle__knob {
  transform: translate(12px, -50%);
}

.vm-toggle-lg .vm-toggle__track { width: 46px; height: 26px; }
.vm-toggle-lg .vm-toggle__knob  { width: 20px; height: 20px; }
.vm-toggle-lg .vm-toggle__input:checked ~ .vm-toggle__knob {
  transform: translate(20px, -50%);
}


/* ============================================================
   [VMDS-9] MODALS
   ============================================================ */

/* Modal-backdrop */
.vm-modal-backdrop {
  position: fixed;
  inset: 0;
  /* 2026-05-29 tema-grund: tokeniserat — light-mode biter via --vm-overlay. */
  background: var(--vm-overlay);
  /* Etapp 2 (2026-05-30): glas borttaget — solid scrim var(--vm-overlay). */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vm-space-xl);
  animation: vm-modal-backdrop-fadein var(--vm-duration-normal) var(--vm-ease-out-expo);
}

/* LARMDEL fix-batch 2026-05-22: respektera HTML hidden-attribut (display:flex ovan
   åsidosatte annars hidden — modal kunde inte stängas och auto-öppnades. Spec 0,2,0
   slår ren-klass-regel 0,1,0 utan !important. */
.vm-modal-backdrop[hidden] {
  display: none;
}

@keyframes vm-modal-backdrop-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal-container (yttre) */
.vm-modal {
  background: var(--vm-modal-bg-default);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-modal);
  /* Etapp 2: glas borttaget — solid yta var(--vm-bg-elevated), mjuk skugga kvar. */
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vm-modal-slidein var(--vm-duration-normal) var(--vm-ease-out-expo);
}

@keyframes vm-modal-slidein {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal-typer (olika bakgrunder per användning) */
.vm-modal-form    { background: var(--vm-modal-bg-form); }
.vm-modal-schema  { background: var(--vm-modal-bg-schema); max-width: 900px; }
.vm-modal-confirm { background: var(--vm-modal-bg-confirm); max-width: 440px; }
.vm-modal-info    { background: var(--vm-modal-bg-default); max-width: 520px; }
.vm-modal-large   { max-width: 1100px; }

/* Modal-header */
.vm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--vm-space-xl);
  border-bottom: 1px solid var(--vm-border-subtle);
}

.vm-modal-title {
  font-size: var(--vm-text-xl);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text-strong);
  margin: 0;
}

.vm-modal-subtitle {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-muted);
  margin: 4px 0 0 0;
}

.vm-modal-close {
  background: transparent;
  border: none;
  color: var(--vm-text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vm-radius-sm);
  transition: all var(--vm-duration-fast) var(--vm-ease-out-expo);
}

.vm-modal-close:hover {
  background: var(--vm-bg-hover);
  color: var(--vm-text-primary);
}

/* Modal-body */
.vm-modal-body {
  padding: var(--vm-space-xl);
  overflow-y: auto;
  flex: 1;
}

.vm-modal-body-flush {
  padding: 0;
}

/* Modal-footer */
.vm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--vm-space-sm);
  padding: var(--vm-space-lg) var(--vm-space-xl);
  border-top: 1px solid var(--vm-border-subtle);
  /* 2026-05-29 tema-grund: tokeniserat — light flippar till alpha-dark. */
  background: var(--vm-modal-footer-bg);
}

.vm-modal-footer-spread {
  justify-content: space-between;
}


/* ============================================================
   [VMDS-10] PILLS & BADGES
   ============================================================ */

/* Pill (status-tag) */
.vm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  /* 2026-05-29 tema-grund: tokeniserat (default-pill). */
  background: var(--vm-bg-hover);
  color: var(--vm-text-secondary);
  border: 1px solid var(--vm-border-default);
  border-radius: var(--vm-radius-pill);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.vm-pill-ok {
  background: var(--vm-bg-ok);
  color: var(--vm-status-ok);
  border-color: var(--vm-state-ok-border);
}

.vm-pill-warning {
  background: var(--vm-bg-warning);
  color: var(--vm-status-warning);
  border-color: var(--vm-state-warning-border);
}

.vm-pill-danger {
  background: var(--vm-bg-critical);
  color: var(--vm-status-danger);
  border-color: var(--vm-state-critical-border);
}

.vm-pill-info {
  background: rgba(var(--vm-brand-primary-rgb), 0.15);
  color: var(--vm-brand-primary);
  border-color: rgba(var(--vm-brand-primary-rgb), 0.30);
}

/* LARMDEL Sida 4 (2026-05-23): BRAND-kategori — orange mellan warning och danger.
   Använder --vm-state-fire (#ff8c2a) — samma tinted-mönster som övriga pillar. */
.vm-pill-fire {
  background: rgba(255, 140, 42, 0.15);
  color: var(--vm-status-fire);
  border-color: rgba(255, 140, 42, 0.30);
}

/* Status-dot (används inuti .vm-pill) */
.vm-pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Badge (numerisk räknare) */
.vm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--vm-status-danger);
  color: #ffffff;
  border-radius: var(--vm-radius-pill);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* ============================================================
   [VMDS-11] ALERTS & BANNERS
   ============================================================ */

/* Alert-container */
.vm-alert {
  display: flex;
  gap: var(--vm-space-md);
  padding: var(--vm-space-lg);
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-default);
  border-left-width: 3px;
  border-radius: var(--vm-radius-md);
  color: var(--vm-text);
}

/* Alert-typer (4 varianter — info/warning/danger/success)
   2026-05-29 r7: chained selectors (.vm-alert.vm-alert-X) för spec 0,2,0 —
   krävs eftersom en senare .vm-alert{} (rad ~6036) sätter border-left: 3px
   solid var(--vm-info) på shorthand och vinner med 0,1,0 + later-in-source. */
.vm-alert.vm-alert-info {
  background: rgba(var(--vm-brand-primary-rgb), 0.06);
  border-color: rgba(var(--vm-brand-primary-rgb), 0.30);
  border-left-color: var(--vm-brand-primary);
}

.vm-alert.vm-alert-warning {
  background: rgba(255, 185, 64, 0.06);
  border-color: rgba(255, 185, 64, 0.30);
  border-left-color: var(--vm-status-warning);
}

.vm-alert.vm-alert-danger {
  background: rgba(255, 87, 87, 0.06);
  border-color: rgba(255, 87, 87, 0.30);
  border-left-color: var(--vm-status-danger);
}

.vm-alert.vm-alert-success {
  background: rgba(46, 227, 150, 0.06);
  border-color: rgba(46, 227, 150, 0.30);
  border-left-color: var(--vm-status-ok);
}

/* Alert-innehåll */
.vm-alert-title {
  font-size: var(--vm-text-base);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text-strong);
  margin: 0 0 4px 0;
}

.vm-alert-text {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* Toast / Snackbar (fixed positionerad) */
.vm-toast {
  position: fixed;
  bottom: var(--vm-space-xl);
  right: var(--vm-space-xl);
  z-index: 2000;
  animation: vm-toast-slidein var(--vm-duration-normal) var(--vm-ease-out-expo);
}

@keyframes vm-toast-slidein {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   [VMDS-12] STATS & KPI
   ============================================================ */

/* Stat-rad-container */
.vm-stat-row {
  display: flex;
  gap: var(--vm-space-md);
  flex-wrap: wrap;
}

/* Stat-cell (kompakt KPI-pill för listsidor — Type B) */
.vm-stat {
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-md);
  padding: var(--vm-space-md) var(--vm-space-lg);
  min-width: 120px;
  flex: 1 1 auto;
}

.vm-stat-value {
  display: block;
  font-size: var(--vm-text-2xl);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.vm-stat-label {
  display: block;
  text-transform: uppercase;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--vm-text-muted);
  margin-top: 4px;
}

/* Status-specifika varianter (vänster-border + färgad värde-text)
   2026-05-29 r7: !important på color — krävs eftersom vm_typography_pro.css
   rad ~108-124 har monolit ".vm-stat-value {color:var(--vm-accent)!important}"
   som annars gör alla siffror brand-blå. Specificitet 0,2,0+! slår 0,1,0+!.
   Lärdom 21-mönster (kända CSS-monoliter måste outranka:as). */
.vm-stat-ok {
  border-left: 3px solid var(--vm-status-ok);
}
.vm-stat-ok .vm-stat-value { color: var(--vm-status-ok) !important; }

.vm-stat-warning {
  border-left: 3px solid var(--vm-status-warning);
}
.vm-stat-warning .vm-stat-value { color: var(--vm-status-warning) !important; }

.vm-stat-danger {
  border-left: 3px solid var(--vm-status-danger);
}
.vm-stat-danger .vm-stat-value { color: var(--vm-status-danger) !important; }

.vm-stat-brand {
  border-left: 3px solid var(--vm-brand-primary);
}
.vm-stat-brand .vm-stat-value { color: var(--vm-brand-primary) !important; }

/* .vm-stat-info — info-blå-variant (för parity med alert-info-tinten). */
.vm-stat-info {
  border-left: 3px solid var(--vm-brand-primary);
}
.vm-stat-info .vm-stat-value { color: var(--vm-brand-primary) !important; }


/* ============================================================
   [VMDS-13] SIDEBAR
   ============================================================ */

.vm-sidebar {
  background: var(--vm-bg-sidebar);
  border-right: 1px solid var(--vm-border-subtle);
  width: var(--vm-sidebar-w); /* Etapp 0: enad mot canonical token (228px), var 260 */
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}

.vm-sidebar-header {
  padding: var(--vm-space-xl);
  border-bottom: 1px solid var(--vm-border-subtle);
}

.vm-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--vm-space-md);
}

.vm-sidebar-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--vm-brand-primary);
  border-radius: var(--vm-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vm-text-on-brand);
  font-weight: var(--vm-weight-bold);
  font-size: var(--vm-text-base);
}

.vm-sidebar-logo-text {
  color: var(--vm-text-strong);
  font-weight: var(--vm-weight-semibold);
}

.vm-sidebar-section {
  padding: var(--vm-space-md);
}

.vm-sidebar-section-title {
  text-transform: uppercase;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--vm-text-muted);
  padding: 0 var(--vm-space-md);
  margin: var(--vm-space-md) 0 var(--vm-space-sm) 0;
}

.vm-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--vm-space-sm);
  padding: 8px var(--vm-space-md);
  color: var(--vm-text-soft);
  text-decoration: none;
  border-radius: var(--vm-radius-sm);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-medium);
  transition: all var(--vm-duration-fast) var(--vm-ease-out-expo);
  margin: 1px 0;
}

.vm-sidebar-link:hover {
  background: var(--vm-bg-hover);
  color: var(--vm-text-primary);
}

.vm-sidebar-link.is-active {
  background: rgba(var(--vm-brand-primary-rgb), 0.15);
  color: var(--vm-brand-primary);
}

.vm-sidebar-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.vm-sidebar-footer {
  margin-top: auto;
  padding: var(--vm-space-lg);
  border-top: 1px solid var(--vm-border-subtle);
}


/* ============================================================
   [VMDS-14] TOPBAR
   ============================================================ */

.vm-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--vm-space-md) var(--vm-space-xl);
  /* 2026-05-29 tema-grund: tokeniserat — surface-bg flippar i light. */
  background: var(--vm-bg-surface);
  border-bottom: 1px solid var(--vm-border-subtle);
  /* Etapp 2: glas borttaget — solid yta var(--vm-bg-surface). */
  position: sticky;
  top: 0;
  z-index: 10;
}

.vm-topbar-title {
  font-size: var(--vm-text-lg);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text);
  margin: 0;
}

.vm-topbar-actions {
  display: flex;
  gap: var(--vm-space-sm);
  align-items: center;
}

/* Breadcrumbs (kompakt navigation-hierarki) */
.vm-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--vm-space-xs);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--vm-weight-semibold);
}

.vm-breadcrumb-sep {
  opacity: 0.5;
}

.vm-breadcrumb-link {
  color: var(--vm-brand-primary);
  text-decoration: none;
}

.vm-breadcrumb-link:hover {
  text-decoration: underline;
}


/* ============================================================
   [VMDS-15] UTILITY CLASSES
   ============================================================ */

/* Text-truncation */
.vm-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Font-familje-overrides */
.vm-mono { font-family: var(--vm-font-mono); }
.vm-sans { font-family: var(--vm-font-sans); }

/* Font-weight-overrides */
.vm-bold     { font-weight: var(--vm-weight-bold); }
.vm-semibold { font-weight: var(--vm-weight-semibold); }

/* Färg-overrides (text-roller) */
.vm-muted  { color: var(--vm-text-muted); }
.vm-soft   { color: var(--vm-text-soft); }
.vm-strong { color: var(--vm-text-strong); }
.vm-brand  { color: var(--vm-brand-primary); }

/* Display-overrides — godkända !important-undantag (utility-klasser) */
.vm-hidden { display: none !important; } /* godkänt undantag */

.vm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   [VMDS-DEV] STYLE-GUIDE HELPERS (FAS 12)
   Endast använt av /admin/dev/style-guide. Inte produktions-UI.
   ============================================================ */

.vmds-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--vm-space-xl);
}

.vmds-section { display: block; }
.vmds-section[hidden] { display: none; }

.vmds-section + .vmds-section { margin-top: var(--vm-space-2xl); }

.vmds-section-title {
  font-size: var(--vm-text-2xl);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text-strong);
  margin: 0 0 var(--vm-space-lg) 0;
}

.vmds-subsection {
  margin-bottom: var(--vm-space-lg);
}

.vmds-subsection-title {
  font-size: var(--vm-text-base);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-text-strong);
  margin: 0 0 var(--vm-space-md) 0;
}

.vmds-code {
  background: var(--vm-bg-page);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-sm);
  padding: var(--vm-space-md);
  margin: var(--vm-space-md) 0 0 0;
  font-family: var(--vm-font-mono);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
  overflow-x: auto;
  white-space: pre;
}

.vmds-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-md);
  align-items: center;
  padding: var(--vm-space-md) 0;
}

.vmds-token-card {
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-md);
  padding: var(--vm-space-md);
}

.vmds-token-swatch {
  width: 100%;
  height: 60px;
  border-radius: var(--vm-radius-sm);
  margin-bottom: var(--vm-space-sm);
  border: 1px solid var(--vm-border-subtle);
}

.vmds-token-name {
  font-family: var(--vm-font-mono);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-soft);
  word-break: break-all;
}

.vmds-token-value {
  font-family: var(--vm-font-mono);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
}

.vmds-spacing-bar {
  background: var(--vm-brand-primary);
  height: 24px;
  border-radius: var(--vm-radius-sm);
}

.vmds-radius-box {
  width: 80px;
  height: 80px;
  background: var(--vm-bg-surface);
  border: 1px solid var(--vm-border-default);
}


/* ============================================================
   ↓↓↓ LEGACY-SEKTIONER (Tidomat-FAS-C, 2026-05-15) ↓↓↓
   Behålls intakt tills FAS 13 migrerar sidor och FAS 14 river.
   ============================================================ */


/* ============================================================
   vm_components.css — Vision Manager kärnkomponenter
   ============================================================
   Refactored 2026-05-15 (FAS C av Tidomat-tema-migration).

   STRUKTUR:
     [A] SPEC-SEKTION (nya canonical komponenter — Tidomat-spec):
         vm-btn-* / vm-modal-* / vm-input + form / vm-card-*
         vm-pill-* / vm-table-* / vm-alarm-row / vm-dot-* / vm-badge
         vm-sidebar-*

     [B] LEGACY (existing — rivs systematiskt i FAS F):
         vm-card / vm-section / vm-field / vm-list / vm-empty
         vm-perm / access / lux / by-* / kpi / events / etc.

   Alla refererar tokens från vm_tokens.css. Inga hex utanför
   kommentarer i SPEC-sektion.
   ============================================================ */


/* ════════════════════════════════════════════════════════════════
   [A] SPEC-SEKTION — Tidomat-spec canonical components (FAS C 2026-05-15)
   ════════════════════════════════════════════════════════════════ */

/* ── MODAL OVERLAY + CARD ─────────────────────────────────────── */
.vm-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--vm-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--vm-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vm-space-4);
    animation: vm-fade-in 180ms ease-out;
}

.vm-modal {
    background: var(--vm-bg-elevated);
    color: var(--vm-text-primary);
    border: 1px solid var(--vm-border-subtle);
    border-radius: var(--vm-radius-xl);
    box-shadow: var(--vm-shadow-xl);
    padding: var(--vm-space-6);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    z-index: var(--vm-z-modal);
    animation: vm-scale-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--vm-space-4);
}

.vm-modal-title {
    font-size: var(--vm-text-h3-size);
    font-weight: var(--vm-text-h3-weight);
    color: var(--vm-text-primary);
    margin: 0;
}

.vm-modal-close {
    background: transparent;
    border: none;
    color: var(--vm-text-secondary);
    cursor: pointer;
    padding: var(--vm-space-1);
    border-radius: var(--vm-radius-sm);
    transition: all var(--vm-transition-fast);
}
.vm-modal-close:hover {
    background: var(--vm-bg-hover);
    color: var(--vm-text-primary);
}

.vm-modal-body { margin-bottom: var(--vm-space-4); }

.vm-modal-footer {
    display: flex;
    gap: var(--vm-space-2);
    justify-content: flex-end;
    margin-top: var(--vm-space-6);
}

.vm-modal-sm { max-width: 400px; }
.vm-modal-lg { max-width: 720px; }
.vm-modal-xl { max-width: 960px; }

/* ── FORMS — .vm-input / .vm-select / .vm-textarea ───────────── */
.vm-input,
.vm-textarea {
    width: 100%;
    background: var(--vm-bg-input);
    color: var(--vm-text-primary);
    border: 1px solid var(--vm-border-default);
    border-radius: var(--vm-radius-md);
    padding: 10px 12px;
    font-family: var(--vm-font-body);
    font-size: var(--vm-text-body-size);
    line-height: var(--vm-text-body-lh);
    transition: all var(--vm-transition-fast);
    min-height: var(--vm-control-h-md);
}
.vm-input:hover,
.vm-textarea:hover {
    border-color: var(--vm-border-strong);
}
.vm-input:focus,
.vm-textarea:focus {
    outline: none;
    border-color: var(--vm-border-focus);
    box-shadow: var(--vm-shadow-focus);
}
.vm-input::placeholder,
.vm-textarea::placeholder {
    color: var(--vm-text-muted);
    opacity: 1;
}
.vm-input:disabled,
.vm-textarea:disabled {
    background: var(--vm-bg-surface);
    color: var(--vm-text-disabled);
    cursor: not-allowed;
}
.vm-input-error {
    border-color: var(--vm-state-critical);
}
.vm-input-error:focus {
    box-shadow: 0 0 0 3px var(--vm-bg-critical-strong);
}

/* ── CARD-HEADER + HOVER (komplement till existing .vm-card) ──── */
.vm-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--vm-shadow-md);
    border-color: var(--vm-border-default);
}
.vm-card-header {
    margin-bottom: var(--vm-space-4);
    padding-bottom: var(--vm-space-4);
    border-bottom: 1px solid var(--vm-border-subtle);
}

/* ── PILL VARIANTER (FAS 13 Lager 1-fix 2026-05-17): rev .vm-pill-ok/warning/info
   som DUPLERADE FAS 9 (VMDS-10) på rad 854/860/872 och vann pga cascade-order.
   Behåller .vm-pill-critical/alert/neutral som är unika legacy-klasser. */
.vm-pill-critical {
    background: var(--vm-bg-critical);
    color: var(--vm-state-critical);
    border: 1px solid rgba(207, 46, 46, 0.3);
}
.vm-pill-alert {
    background: var(--vm-bg-alert);
    color: var(--vm-state-alert);
    border: 1px solid rgba(255, 80, 98, 0.3);
}
.vm-pill-neutral {
    background: var(--vm-bg-surface);
    color: var(--vm-text-secondary);
    border: 1px solid var(--vm-border-subtle);
}

/* ── TABLE NUMERIC alias (komplement till existing .vm-table-num) ── */
.vm-table-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── ALARM ROW ─────────────────────────────────────────────────── */
.vm-alarm-row {
    display: flex;
    align-items: center;
    padding: var(--vm-space-3) var(--vm-space-4);
    border-left: 4px solid transparent;
    background: var(--vm-bg-surface);
    transition: all var(--vm-transition-base);
    cursor: pointer;
}
.vm-alarm-row[data-state="critical"] {
    border-left-color: var(--vm-state-critical);
    background: var(--vm-bg-critical);
}
.vm-alarm-row[data-state="alert"] {
    border-left-color: var(--vm-state-alert);
    background: var(--vm-bg-alert);
}
.vm-alarm-row[data-state="warning"] {
    border-left-color: var(--vm-state-warning);
    background: var(--vm-bg-warning);
}
.vm-alarm-row[data-state="ok"] {
    border-left-color: var(--vm-state-ok);
    background: var(--vm-bg-ok);
}
.vm-alarm-row[data-state="critical"] .vm-dot {
    animation: vm-pulse 2s infinite;
}

/* ── DOT-VARIANTER (komplement till existing .vm-dot) ──────────── */
.vm-dot-ok       { background: var(--vm-state-ok); }
.vm-dot-warning  { background: var(--vm-state-warning); }
.vm-dot-critical { background: var(--vm-state-critical); }
.vm-dot-alert    { background: var(--vm-state-alert); }
.vm-dot-muted    { background: var(--vm-text-muted); }

/* ── BADGE ─────────────────────────────────────────────────────── */
.vm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--vm-radius-sm);
    font-size: var(--vm-text-tiny-size);
    font-weight: 600;
    background: var(--vm-bg-info);
    color: var(--vm-brand-primary);
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.vm-sidebar {
    background: var(--vm-bg-sidebar);
    border-right: 1px solid var(--vm-border-subtle);
    padding: var(--vm-space-4);
    width: var(--vm-sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.vm-sidebar-section {
    font-size: var(--vm-text-tiny-size);
    font-weight: var(--vm-text-caps-weight);
    letter-spacing: var(--vm-text-caps-letterspacing);
    text-transform: var(--vm-text-caps-transform);
    color: var(--vm-text-muted);
    margin-top: var(--vm-space-6);
    margin-bottom: var(--vm-space-2);
    padding: 0 var(--vm-space-3);
}
.vm-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--vm-space-3);
    padding: var(--vm-space-2) var(--vm-space-3);
    border-radius: var(--vm-radius-md);
    color: var(--vm-text-secondary);
    text-decoration: none;
    font-size: var(--vm-text-body-size);
    font-weight: 500;
    transition: all var(--vm-transition-fast);
    position: relative;
}
.vm-sidebar-item:hover {
    background: var(--vm-bg-hover);
    color: var(--vm-text-primary);
}
.vm-sidebar-item.active {
    background: var(--vm-bg-active);
    color: var(--vm-brand-primary);
}
.vm-sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--vm-brand-primary);
    border-radius: 0 var(--vm-radius-sm) var(--vm-radius-sm) 0;
}

/* ── ERROR PAGE (404/500) ─────────────────────────────────────── */
.vm-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    width: 100%;
    padding: var(--vm-space-10) var(--vm-space-5);
    text-align: center;
    background: var(--vm-bg-page);
    color: var(--vm-text-primary);
}
.vm-error-code {
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: var(--vm-space-4);
    font-family: var(--vm-font-display);
}
.vm-error-code--info     { color: var(--vm-brand-primary); }
.vm-error-code--critical { color: var(--vm-state-critical); }
.vm-error-title {
    font-size: var(--vm-text-h1-size);
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 var(--vm-space-3);
}
.vm-error-body {
    font-size: var(--vm-text-body-size, 14px);
    color: var(--vm-text-secondary);
    max-width: 480px;
    margin: 0 0 var(--vm-space-8);
    line-height: 1.6;
}
.vm-error-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--vm-space-2);
    padding: 10px var(--vm-space-5);
    background: var(--vm-brand-primary);
    color: var(--vm-text-on-brand);
    font-size: var(--vm-text-body-size, 14px);
    font-weight: 500;
    border-radius: var(--vm-radius-md);
    text-decoration: none;
    transition: background 180ms ease;
}
.vm-error-cta:hover {
    background: var(--vm-brand-primary-hover);
    color: var(--vm-text-on-brand);
    text-decoration: none;
}

/* Sätt mörk bakgrund på hela main/page-shell när error-page renderas,
   så inget ljus från default eller path-overrides syns igenom. */
body:has(.vm-error-page) .app-main,
body:has(.vm-error-page) .app-content,
body:has(.vm-error-page) .page-shell {
    background: var(--vm-bg-page);
    min-height: 100vh;
}

/* ════════════════════════════════════════════════════════════════
   [B] LEGACY — existing components (rivs systematiskt i FAS F)
   ════════════════════════════════════════════════════════════════ */


/* ============================================================
   1. CARD
   ============================================================ */
.vm-card {
    background: var(--vm-surface);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-md);
    box-shadow: var(--vm-shadow-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vm-space-3);
    padding: var(--vm-space-4) var(--vm-card-padding);
    border-bottom: var(--vm-border-w) solid var(--vm-border-soft);
}
.vm-card-title {
    font-size: var(--vm-text-h2);
    line-height: var(--vm-text-h2-lh);
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text);
    letter-spacing: var(--vm-letter-normal);
    margin: 0;
}
.vm-card-subtitle {
    font-size: var(--vm-text-small);
    color: var(--vm-text-muted);
    margin: 2px 0 0 0;
}
.vm-card-body {
    padding: var(--vm-card-padding);
    flex: 1;
    min-height: 0;
}
.vm-card-body.is-flush { padding: 0; }
.vm-card-footer {
    padding: var(--vm-space-3) var(--vm-card-padding);
    border-top: var(--vm-border-w) solid var(--vm-border-soft);
    background: var(--vm-surface-2);
    font-size: var(--vm-text-small);
    color: var(--vm-text-muted);
}
.vm-card.is-tight .vm-card-body { padding: var(--vm-card-padding-tight); }
.vm-card.is-tight .vm-card-head { padding: var(--vm-space-3) var(--vm-card-padding-tight); }
.vm-card.is-elevated { box-shadow: var(--vm-shadow-2); }


/* ============================================================
   2. SECTION
   ============================================================ */
.vm-section {
    margin-bottom: var(--vm-section-gap);
}
.vm-section:last-child { margin-bottom: 0; }
.vm-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--vm-space-3);
    margin-bottom: var(--vm-space-4);
}
.vm-section-title {
    font-size: var(--vm-text-h2);
    line-height: var(--vm-text-h2-lh);
    font-weight: var(--vm-weight-bold);
    color: var(--vm-text);
    letter-spacing: var(--vm-letter-normal);
    margin: 0;
}
.vm-section-sub {
    font-size: var(--vm-text-small);
    color: var(--vm-text-muted);
    margin: 0;
}


/* ============================================================
   3. FORM
   ============================================================ */
.vm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--vm-space-4);
}
.vm-label {
    font-size: var(--vm-text-small);
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text-soft);
}
.vm-help {
    font-size: var(--vm-text-tiny);
    color: var(--vm-text-muted);
}
.vm-help.is-error { color: var(--vm-danger); }

.vm-input,
.vm-textarea,
.vm-select {
    width: 100%;
    height: var(--vm-control-h-md);
    padding: 0 var(--vm-space-3);
    background: var(--vm-surface);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-family: var(--vm-font-stack);
    font-size: var(--vm-text-body);
    line-height: 1.4;
    transition: border-color var(--vm-motion-fast), box-shadow var(--vm-motion-fast);
    outline: none;
}
.vm-textarea {
    height: auto;
    min-height: 96px;
    padding: var(--vm-space-2) var(--vm-space-3);
    resize: vertical;
}
.vm-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--vm-text-muted) 50%),
                      linear-gradient(135deg, var(--vm-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}
.vm-input:hover,
.vm-textarea:hover,
.vm-select:hover { border-color: var(--vm-border-strong); }
.vm-input:focus,
.vm-textarea:focus,
.vm-select:focus {
    border-color: var(--vm-accent);
    box-shadow: 0 0 0 3px var(--vm-accent-soft);
}
.vm-input.is-error { border-color: var(--vm-danger); }


/* ============================================================
   4. BUTTON
   ============================================================ */
.vm-btn {
    /* Etapp 1 (2026-05-30): wire mot kompakt-tokens. Detta är den VINNANDE
       .vm-btn-blocket (legacy [B], senare i källan än VMDS-4 rad 143).
       height→min-height var(--vm-btn-height) 32; padding-x via token 12;
       font var(--vm-text-body) 14 → var(--vm-text-sm) 13 (river 14px-masken). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vm-space-2);
    min-height: var(--vm-btn-height);
    padding: 0 var(--vm-btn-padding-x);
    background: transparent;
    border: var(--vm-border-w) solid transparent;
    border-radius: var(--vm-radius-md);
    color: var(--vm-text);
    font-family: var(--vm-font-stack);
    font-size: var(--vm-text-sm);
    font-weight: var(--vm-weight-semibold);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--vm-motion-fast), border-color var(--vm-motion-fast),
                color var(--vm-motion-fast), transform var(--vm-motion-fast),
                box-shadow var(--vm-motion-fast);
    user-select: none;
    white-space: nowrap;
}
.vm-btn:active { transform: scale(0.97); }
.vm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vm-accent-soft);
}
.vm-btn:disabled,
.vm-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.vm-btn-primary {
    background: var(--vm-brand-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--vm-radius-md);
    /* Etapp 1: vertikal padding bort → min-height var(--vm-btn-height) 32 styr. */
    padding: 0 var(--vm-btn-padding-x);
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.vm-btn-primary:hover { background: var(--vm-brand-primary-hover); }

.vm-btn-secondary {
    background: var(--vm-surface);
    border-color: var(--vm-border);
    color: var(--vm-text);
}
.vm-btn-secondary:hover {
    background: var(--vm-surface-hover);
    border-color: var(--vm-border-strong);
}

.vm-btn-ghost {
    background: transparent;
    color: var(--vm-text-soft);
}
.vm-btn-ghost:hover {
    background: var(--vm-surface-2);
    color: var(--vm-text);
}

/* Batch 18a-fix-v3 (2026-05-21, Prio 1j): border-color tillagd så legacy
   .vm-btn-base (rad 2096) full border-shorthand inte resettar till transparent.
   Synkroniserar med VMDS-4-regel rad 215 (Batch 18a-fix Alt D). */
.vm-btn-danger {
    background: var(--vm-danger);
    color: var(--vm-danger-fg);
    border-color: var(--vm-danger);
}
.vm-btn-danger:hover {
    background: var(--vm-state-critical);
    border-color: var(--vm-state-critical);
}

.vm-btn-sm { min-height: var(--vm-btn-height-sm); padding: 0 var(--vm-btn-padding-x-sm); font-size: var(--vm-text-small); border-radius: var(--vm-radius-sm); }
.vm-btn-lg { height: var(--vm-control-h-lg); padding: 0 var(--vm-space-5); font-size: 1rem; }
/* Etapp 1: icon-knapp 28×28 (var Block-A padding 8px → överskuggades av Block-B min-height). */
.vm-btn-icon { min-height: var(--vm-btn-height-icon); width: var(--vm-btn-height-icon); padding: 0; aspect-ratio: 1; }

.vm-btn-group {
    display: inline-flex;
    gap: var(--vm-space-2);
    flex-wrap: wrap;
}


/* ============================================================
   5. TABLE
   ============================================================ */
.vm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--vm-text-body);
    color: var(--vm-text);
}
.vm-table th,
.vm-table td {
    padding: var(--vm-space-3) var(--vm-space-4);
    text-align: left;
    border-bottom: var(--vm-border-w) solid var(--vm-border-soft);
}
.vm-table th {
    font-size: var(--vm-text-small);
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text-muted);
    background: var(--vm-surface-2);
    border-bottom: var(--vm-border-w) solid var(--vm-border);
    white-space: nowrap;
}
.vm-table tbody tr {
    transition: background var(--vm-motion-fast);
}
.vm-table tbody tr:hover {
    background: var(--vm-surface-2);
}
.vm-table tbody tr:last-child td { border-bottom: 0; }
.vm-table-num { text-align: right; font-variant-numeric: tabular-nums; }


/* ============================================================
   6. LIST
   ============================================================ */
.vm-list {
    display: flex;
    flex-direction: column;
}
.vm-list-row {
    display: flex;
    align-items: center;
    gap: var(--vm-space-3);
    padding: var(--vm-space-3) var(--vm-card-padding);
    border-bottom: var(--vm-border-w) solid var(--vm-border-soft);
    color: var(--vm-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--vm-motion-fast);
    min-height: var(--vm-touch-min);
    /* 2026-06-04: tillåt shrink när .vm-list-row är flex/grid-item (t.ex. i
       .access-grid-3 i personmall-formuläret). Utan detta ger flex-default
       min-width:auto horisontell overflow åt höger som bryter formuläret.
       No-op utanför flex/grid-item-kontext. */
    min-width: 0;
}
.vm-list-row:hover { background: var(--vm-surface-2); }
.vm-list-row:last-child { border-bottom: 0; }
.vm-list-row[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.vm-list-icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vm-surface-2);
    border-radius: var(--vm-radius-sm);
    flex-shrink: 0;
    color: var(--vm-text-muted);
}
.vm-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vm-list-title {
    font-size: var(--vm-text-body);
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vm-list-meta {
    font-size: var(--vm-text-small);
    color: var(--vm-text-muted);
}
.vm-list-action {
    color: var(--vm-text-faint);
    font-size: 18px;
    flex-shrink: 0;
}

.vm-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--vm-text-faint);
}
.vm-list-dot.is-ok    { background: var(--vm-success); box-shadow: 0 0 0 3px var(--vm-success-soft); }
.vm-list-dot.is-warn  { background: var(--vm-warning); box-shadow: 0 0 0 3px var(--vm-warning-soft); }
.vm-list-dot.is-alarm { background: var(--vm-danger);  box-shadow: 0 0 0 3px var(--vm-danger-soft); }


/* ============================================================
   7. MODAL
   ============================================================ */
.vm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: var(--vm-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vm-space-4);
    animation: vm-fade-in var(--vm-motion-base);
}
/* LARMDEL fix-batch 2026-05-22: respektera HTML hidden-attribut även på denna
   andra .vm-modal-backdrop-regel. Spec 0,2,0 > 0,1,0. */
.vm-modal-backdrop[hidden] {
    display: none;
}
@keyframes vm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.vm-modal-card {
    width: 100%;
    max-width: 480px;
    background: var(--vm-modal-bg);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-3);
    z-index: var(--vm-z-modal);
    animation: vm-modal-pop var(--vm-motion-bounce);
}
@keyframes vm-modal-pop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.vm-modal-head {
    padding: var(--vm-space-5) var(--vm-card-padding) var(--vm-space-2);
}
.vm-modal-title {
    font-size: var(--vm-text-h2);
    font-weight: var(--vm-weight-bold);
    color: var(--vm-text);
    margin: 0;
}
.vm-modal-body {
    padding: 0 var(--vm-card-padding) var(--vm-space-5);
    color: var(--vm-text-soft);
    font-size: var(--vm-text-body);
    line-height: var(--vm-text-body-lh);
}
.vm-modal-actions {
    display: flex;
    gap: var(--vm-space-2);
    justify-content: flex-end;
    padding: var(--vm-space-4) var(--vm-card-padding);
    border-top: var(--vm-border-w) solid var(--vm-border-soft);
    background: var(--vm-panel-2);
    border-radius: 0 0 var(--vm-radius-lg) var(--vm-radius-lg);
}


/* ============================================================
   8. EMPTY-STATE + SKELETON
   ============================================================ */
.vm-empty {
    padding: var(--vm-space-7) var(--vm-space-5);
    text-align: center;
    color: var(--vm-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vm-space-2);
}
.vm-empty-icon {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: var(--vm-surface-2);
    border: var(--vm-border-w) solid var(--vm-border-soft);
    border-radius: 50%;
    margin-bottom: var(--vm-space-2);
    color: var(--vm-text-muted);
}
.vm-empty-title {
    font-size: var(--vm-text-body);
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text-soft);
}
.vm-empty-sub {
    font-size: var(--vm-text-small);
    color: var(--vm-text-muted);
    max-width: 36ch;
    line-height: 1.5;
}
.vm-empty-action { margin-top: var(--vm-space-3); }

/* Empty-state multi-actions wrapper (FAS 14.2 Prio 0 — 2026-05-17)
   För empty-states med 2 knappar (primary + secondary), t.ex.
   "Inga personer registrerade: + Ny person | Importera Excel".
   Anv: <div class="vm-empty-actions"><a class="vm-btn vm-btn-primary">...</a>
        <a class="vm-btn vm-btn-secondary">...</a></div> */
.vm-empty-actions {
    margin-top: var(--vm-space-3);
    display: flex;
    gap: var(--vm-space-2);
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes vm-skel-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}
.vm-skeleton {
    background: var(--vm-surface-2);
    border-radius: var(--vm-radius-sm);
    animation: vm-skel-pulse 1.6s ease-in-out infinite;
}
.vm-skel-row {
    display: flex;
    align-items: center;
    gap: var(--vm-space-3);
    padding: var(--vm-space-3) var(--vm-card-padding);
    border-bottom: var(--vm-border-w) solid var(--vm-border-soft);
}
.vm-skel-row:last-child { border: 0; }
.vm-skel-icon { width: 32px; height: 32px; border-radius: var(--vm-radius-sm); flex-shrink: 0; }
.vm-skel-line { height: 11px; border-radius: 4px; flex: 1; }
.vm-skel-line.is-short { flex: 0 0 32%; }
.vm-skel-line.is-mid   { flex: 0 0 56%; }
.vm-skel-line.is-meta  { flex: 0 0 28px; }


/* ============================================================
   STATUS-DOT (Vercel/Geist-stil) — v3100 (2026-05-07)
   ============================================================
   Canonical 8px status-dot. Filled circle + 1px outer ring (20% alpha)
   + valfri 2s pulse-ring för "live" eller "alarm".

   Användning:
     <span class="vm-dot" data-state="ok">      ← grön
     <span class="vm-dot" data-state="warn">    ← gul
     <span class="vm-dot" data-state="alarm">   ← röd + pulse
     <span class="vm-dot" data-state="info">    ← blå + pulse
     <span class="vm-dot" data-state="live">    ← blå + pulse
     <span class="vm-dot" data-state="offline"> ← grå (ingen pulse)

   Storlekar: .vm-dot-sm (6px), default 8px, .vm-dot-lg (10px).

   Befintliga ad-hoc dots (.ops-chip-dot, .ops-list-dot, .ops-kpi-status-dot,
   .vm-pill-dot, .vm-list-dot, .vm-sys-led-dot) bevarade tills sida-för-sida
   migration. Använd .vm-dot i nya komponenter.
   ============================================================ */
.vm-dot {
    --vm-dot-color: var(--vm-dot-offline);
    --vm-dot-ring: rgba(107, 114, 128, 0.20);
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vm-dot-color);
    box-shadow: 0 0 0 1px var(--vm-dot-ring);
    flex-shrink: 0;
    position: relative;
    vertical-align: middle;
}
.vm-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--vm-dot-color);
    opacity: 0;
    pointer-events: none;
    transform-origin: center;
}
.vm-dot[data-state="ok"],   .vm-dot.is-ok    { --vm-dot-color: var(--vm-dot-ok);    --vm-dot-ring: rgba(0, 199, 129, 0.22); }
.vm-dot[data-state="warn"], .vm-dot.is-warn  { --vm-dot-color: var(--vm-dot-warn);  --vm-dot-ring: rgba(240, 161, 0, 0.22); }
.vm-dot[data-state="alarm"],.vm-dot.is-alarm { --vm-dot-color: var(--vm-dot-alarm); --vm-dot-ring: rgba(229, 72, 77, 0.24); }
.vm-dot[data-state="info"], .vm-dot.is-info  { --vm-dot-color: var(--vm-dot-info);  --vm-dot-ring: rgba(0, 112, 243, 0.22); }
.vm-dot[data-state="live"], .vm-dot.is-live  { --vm-dot-color: var(--vm-dot-info);  --vm-dot-ring: rgba(0, 112, 243, 0.22); }
.vm-dot[data-state="offline"], .vm-dot.is-offline { --vm-dot-color: var(--vm-dot-offline); --vm-dot-ring: rgba(107, 114, 128, 0.18); }

.vm-dot[data-state="alarm"]::after,
.vm-dot[data-state="live"]::after,
.vm-dot[data-state="info"]::after,
.vm-dot.is-alarm::after,
.vm-dot.is-live::after,
.vm-dot.is-pulsing::after {
    animation: vm-dot-pulse 2s var(--vm-ease) infinite;
}
@keyframes vm-dot-pulse {
    0%   { transform: scale(0.95); opacity: 0.65; }
    70%  { transform: scale(2.6);  opacity: 0; }
    100% { transform: scale(2.6);  opacity: 0; }
}

.vm-dot-sm { width: 6px; height: 6px; }
.vm-dot-lg { width: 10px; height: 10px; }

/* Inline label-variant: "● Live" eller "● 24 enheter online" */
.vm-dot-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--vm-text-small);
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text-soft);
    line-height: 1;
}


/* ============================================================
   STATUS-PILL — legacy base+.is-* rivet i FAS 13 Lager 1-fix 2026-05-17.
   Duplicerade FAS 9 (VMDS-10) på rad 838 och vann pga cascade-order.
   FAS 9-versionen använder .vm-pill-ok/warning/danger/info istället för .is-*.
   Behåller storlek-variants .vm-pill-sm/md/lg (unika, ingen FAS 9-equivalent).
   ============================================================ */
.vm-pill-sm { padding: 2px var(--vm-space-2); font-size: 0.65rem; }
.vm-pill-md { padding: 6px var(--vm-space-3); font-size: var(--vm-text-small); }
.vm-pill-lg { padding: 8px var(--vm-space-4); font-size: var(--vm-text-body); }

/* ────────────────────────────────────────────────────────────
   FACIT-stil (2026-05-12): styrs via body[data-status-style="facit"]
   Sätter info/data-pills till accent (guld) för enhetlig look.
   Status-kritiska variants (alarm/warn/offline) behåller sin
   semantik så vakter ser larm tydligt.
   Default body[data-status-style="semantic"] = oförändrat.
   ──────────────────────────────────────────────────────────── */
body[data-status-style="facit"] .vm-pill.is-ok,
body[data-status-style="facit"] .vm-pill.is-info,
body[data-status-style="facit"] .vm-pill.is-online,
body[data-status-style="facit"] .vm-pill.is-neutral {
    color: var(--vm-accent);
    border-color: var(--vm-accent-soft);
    background: var(--vm-accent-soft);
}
body[data-status-style="facit"] .vm-pill.is-ok      .vm-pill-dot,
body[data-status-style="facit"] .vm-pill.is-info    .vm-pill-dot,
body[data-status-style="facit"] .vm-pill.is-online  .vm-pill-dot,
body[data-status-style="facit"] .vm-pill.is-neutral .vm-pill-dot {
    background: var(--vm-accent);
}

/* ============================================================
   ROLE-BASED UI VISIBILITY (Fas 3.1)
   ============================================================ */
.vm-perm-hidden { display: none !important; }
body[data-vm-role="guard"] .ops-card,
body[data-vm-role="vaktare"] .ops-card { padding: 8px; }

/* ============================================================
   SIDEBAR TEXT-CONTRAST FIX (2026-05-06)
   ============================================================
   Fix: sidopanel-text "försvinner" mot mörk bakgrund pa admin-sidor.
   Sektions-etiketter (REGISTER/KONFIGURATION/LOGG/ÅTGÄRDER) och
   navlänk-text ("Texter för kortläsare", "Aktivera relä", "Skåplås"
   osv) hade for lag lightness mot rgba-mork bakgrund.
   WCAG AA krav 4.5:1 — nu ~12:1.
   ============================================================ */
.app-sidebar .sidebar-link strong,
.app-sidebar .sidebar-link-copy strong {
  color: rgba(235, 240, 250, 0.94) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.app-sidebar .sidebar-link {
  color: rgba(220, 230, 245, 0.88) !important;
}
.app-sidebar .sidebar-link:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.06);
}
.app-sidebar .sidebar-link.active strong,
.app-sidebar .sidebar-link.active .sidebar-link-copy strong {
  color: var(--vm-brand-tint) !important;
}
.app-sidebar .sidebar-label {
  color: rgba(165, 185, 215, 0.72) !important;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 4px;
}
/* 2026-05-29 tema-grund-r5: back-link tokeniserad. SYSTEM-entry borttagen
   härifrån eftersom den har egen brand-gradient + vit text via vm_studio.css. */
.app-sidebar .sidebar-back-link {
  color: var(--vm-text-secondary) !important;
  font-weight: 700;
}
/* Day-tone overrides: mörk text pa ljus bg */
body[data-tone="day"] .app-sidebar .sidebar-link strong,
body[data-tone="day"] .app-sidebar .sidebar-link-copy strong {
  color: rgba(15, 23, 42, 0.94) !important;
}
body[data-tone="day"] .app-sidebar .sidebar-link {
  color: rgba(30, 41, 59, 0.85) !important;
}
body[data-tone="day"] .app-sidebar .sidebar-link.active strong,
body[data-tone="day"] .app-sidebar .sidebar-link.active .sidebar-link-copy strong {
  color: var(--vm-accent, var(--vm-brand-primary)) !important;
}
body[data-tone="day"] .app-sidebar .sidebar-label {
  color: rgba(71, 85, 105, 0.78) !important;
}

/* ============================================================
   BUTTON-TEXT-CONTRAST FIX (2026-05-06)
   ============================================================
   Fix: knapptext + sub-tab-text "forsvinner" i admin-vyer mot mork bg.
   Specifikt access-tab-link (Register/Lasartexter/Systemfunktioner/etc),
   .btn-link, ghost-knappar, filter-pills (Alla/Larm/Oppna/Lasta/Offline),
   och inline-lankar i tabeller (DemodorrName).
   ============================================================ */
.access-tab-link,
.access-tab-link strong {
  color: var(--vm-brand-tint) !important;
  font-weight: 700;
}
.access-tab-link:hover,
.access-tab-link:hover strong {
  color: var(--vm-brand-tint) !important;
  background: rgba(var(--vm-accent-rgb), 0.12);
}
.access-tab-link.is-active,
.access-tab-link[aria-selected="true"],
.access-tab-link.active {
  background: rgba(var(--vm-accent-rgb), 0.28) !important;
  color: var(--vm-text-on-brand) !important;
}
.access-tab-link.is-active strong,
.access-tab-link[aria-selected="true"] strong {
  color: var(--vm-text-on-brand) !important;
}

/* Filter-pills (Alla/Larm/Oppna/Lasta/Offline) — Monolit #7 (Batch 20-fix Lardom 21: :not(.am-filter-btn):not(.vm-segment-item)) */
.filter-pill, .access-filter-pill,
.btn-filter, button[data-filter]:not(.am-filter-btn):not(.vm-segment-item),
.access-pill {
  color: var(--vm-brand-tint) !important;
}
.filter-pill.is-active, .access-filter-pill.is-active,
.btn-filter.is-active, button[data-filter].active:not(.am-filter-btn):not(.vm-segment-item) {
  background: rgba(var(--vm-accent-rgb), 0.28) !important;
  color: var(--vm-text-on-brand) !important;
}

/* Inline-lankar i tabeller (Demodorr-name) */
.access-link-inline,
.access-table a,
.access-table tbody a {
  color: var(--vm-brand-tint) !important;
  font-weight: 700;
}
.access-link-inline:hover,
.access-table a:hover {
  color: var(--vm-brand-tint) !important;
}

/* Generic button-text-fix: ghost/secondary knappar med svag text */
.btn-ghost, .btn-secondary, .access-btn,
button.btn-ghost, button.btn-secondary, button.access-btn,
.btn-link, button.btn-link {
  color: rgba(220, 230, 245, 0.92);
}
.btn-ghost:hover, .btn-secondary:hover, .access-btn:hover,
.btn-link:hover {
  color: #fff;
}
/* Kanonisk .btn-primary (FAS C konsolidering 2026-05-15) — full spec.
   Tidigare 5 definitioner spridda; nu en. Path-override har rivits. */
.btn-primary, button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vm-space-2);
  height: var(--vm-control-h-md);
  padding: 0 var(--vm-space-5);
  background: var(--vm-brand-primary);
  color: var(--vm-text-on-brand) !important;
  border: 1px solid var(--vm-brand-primary);
  border-radius: var(--vm-radius-md);
  font-family: var(--vm-font-body);
  font-size: var(--vm-text-body-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--vm-transition-base);
}
.btn-primary:hover, button.btn-primary:hover {
  background: var(--vm-brand-primary-hover);
  border-color: var(--vm-brand-primary-hover);
}
.btn-primary:active, button.btn-primary:active {
  background: var(--vm-brand-primary-active);
}
.btn-primary:disabled, button.btn-primary:disabled {
  opacity: var(--vm-opacity-disabled);
  cursor: not-allowed;
}

/* AKTIV-status-badge (Tid/Oppna/Ta bort knappar pa Tilltradespunkt-tabellen) */
.action-btn, .table-action-btn, .access-table .btn,
.access-table button {
  color: rgba(220, 230, 245, 0.92);
}
.access-table .btn:hover,
.access-table button:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Day-tone overrides */
body[data-tone="day"] .access-tab-link,
body[data-tone="day"] .access-tab-link strong { color: var(--vm-accent, var(--vm-brand-primary)) !important; }
body[data-tone="day"] .access-tab-link.is-active,
body[data-tone="day"] .access-tab-link[aria-selected="true"] {
  background: rgba(var(--vm-accent-rgb), 0.15) !important;
  color: var(--vm-accent, var(--vm-brand-primary)) !important;
}
body[data-tone="day"] .access-link-inline,
body[data-tone="day"] .access-table a { color: var(--vm-accent, var(--vm-brand-primary)) !important; }
body[data-tone="day"] .btn-ghost,
body[data-tone="day"] .btn-secondary,
body[data-tone="day"] .access-btn { color: rgba(15,23,42,0.85); }

/* ============================================================
   BYGGTID (issue-system) TEXT-CONTRAST FIX (2026-05-06)
   Per visade #8 "Fortfarande problem" — text knapt synlig pa mork bg.
   ============================================================ */
.by-card {
  background: rgba(15,15,22,0.72) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.by-card-h h1 { color: rgba(255,255,255,0.96) !important; }
.by-meta, .by-meta strong { color: rgba(180,200,225,0.78) !important; }
.by-meta strong { font-weight: 700; }
.by-section-h {
  color: rgba(165,185,215,0.72) !important;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.by-desc { color: rgba(220,235,250,0.92) !important; }
.by-att-name { color: rgba(220,235,250,0.92) !important; }
.by-att-size { color: rgba(160,185,220,0.65) !important; }
.by-status-btn {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(220,230,245,0.85) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.by-status-btn:hover {
  background: rgba(var(--vm-accent-rgb), 0.18) !important;
  color: var(--vm-brand-tint) !important;
  border-color: rgba(var(--vm-accent-rgb), 0.40) !important;
}
.by-status-btn.is-current {
  background: var(--vm-brand-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.by-btn-secondary {
  background: rgba(255,255,255,0.04) !important;
  color: var(--vm-brand-tint) !important;
  border-color: rgba(var(--vm-accent-rgb), 0.32) !important;
}
.by-btn-secondary:hover {
  background: rgba(var(--vm-accent-rgb), 0.18) !important;
  color: var(--vm-brand-tint) !important;
}
.by-att-item {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.by-drop {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(180,200,225,0.65) !important;
}
.by-drop:hover {
  border-color: rgba(var(--vm-accent-rgb), 0.40) !important;
  background: rgba(var(--vm-accent-rgb), 0.04) !important;
}
.by-desc-edit, .by-title-edit, textarea.by-desc-edit, input.by-title-edit {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.by-desc-edit:focus, .by-title-edit:focus {
  border-color: rgba(var(--vm-accent-rgb), 0.50) !important;
  background: rgba(255,255,255,0.06) !important;
}
.by-desc-edit::placeholder, .by-title-edit::placeholder {
  color: rgba(160,185,220,0.45) !important;
}

/* Day-tone Byggtid overrides */
body[data-tone="day"] .by-card {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(15,23,42,0.08) !important;
}
body[data-tone="day"] .by-card-h h1 { color: #1a2332 !important; }
body[data-tone="day"] .by-meta { color: #596574 !important; }
body[data-tone="day"] .by-section-h { color: #596574 !important; }
body[data-tone="day"] .by-desc { color: #1a2332 !important; }

/* ── r9: [data-theme="light"]-spegling av hela by-card-komponenten ──
   Byggtid-by-card var helt hårdkodad för mörk yta (ljus text på mörk bg).
   body[data-tone="day"] ovan flippade bara delar, och den gamla tone-mekanismen
   sätts inte i nya tema-systemet → i ljust blev kort mörkt + text mörk-på-mörk
   (/issues/new fältkort) ELLER ljus-text-osynlig (detaljvyns rubriker). Detta
   block flippar HELA komponenten (yta + text + inputs) i ljust. Mörkt = de
   ursprungliga reglerna ovan, helt oförändrade (D5). */
html[data-theme="light"] .by-card {
  background: var(--vm-bg-elevated) !important;
  border-color: var(--vm-border-subtle) !important;
}
html[data-theme="light"] .by-card-h h1 { color: var(--vm-text-primary) !important; }
html[data-theme="light"] .by-meta,
html[data-theme="light"] .by-meta strong { color: var(--vm-text-secondary) !important; }
html[data-theme="light"] .by-section-h { color: var(--vm-text-muted) !important; }
html[data-theme="light"] .by-desc { color: var(--vm-text-primary) !important; }
html[data-theme="light"] .by-att-name { color: var(--vm-text-primary) !important; }
html[data-theme="light"] .by-att-size { color: var(--vm-text-muted) !important; }
html[data-theme="light"] .by-status-btn {
  background: var(--vm-bg-surface-2) !important;
  color: var(--vm-text-secondary) !important;
  border-color: var(--vm-border-default) !important;
}
html[data-theme="light"] .by-att-item {
  background: var(--vm-bg-surface-2) !important;
  border-color: var(--vm-border-subtle) !important;
}
html[data-theme="light"] .by-drop {
  background: var(--vm-bg-surface-2) !important;
  border-color: var(--vm-border-default) !important;
  color: var(--vm-text-muted) !important;
}
html[data-theme="light"] .by-desc-edit,
html[data-theme="light"] .by-title-edit,
html[data-theme="light"] textarea.by-desc-edit,
html[data-theme="light"] input.by-title-edit {
  background: var(--vm-bg-input) !important;
  color: var(--vm-text-primary) !important;
  border-color: var(--vm-border-default) !important;
}
html[data-theme="light"] .by-desc-edit::placeholder,
html[data-theme="light"] .by-title-edit::placeholder {
  color: var(--vm-text-muted) !important;
}

/* ============================================================
   STATUS-FRAME (Genetec Security Center / Mission Control-stil)
   ============================================================
   I premium command-center-system kommunicerar tile-status med
   en glow-FRAME runt hela kortet — inte med en liten dot inom.
   Status-information blir 10x mer synlig pa avstand.

   Anvandning: lagg till .vm-card-status-{ok|alarm|warning|info|offline}
   tillsammans med .vm-card eller .ops-card.

   Patterns:
   - OK: gron mjuk glow (vakt-vy norm)
   - ALARM: rod solid border + radius pulse (urgent)
   - WARNING: gul glow (trouble men inte critical)
   - INFO: bla glow (notification)
   - OFFLINE: gra dampad (no-data)
   ============================================================ */
.vm-card-status-ok,
.ops-card.vm-card-status-ok {
  border-color: rgba(46, 182, 125, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(46, 182, 125, 0.30),
              0 0 14px 0 rgba(46, 182, 125, 0.18),
              var(--vm-shadow-1, 0 4px 12px rgba(0,0,0,0.10));
}
.vm-card-status-warning,
.ops-card.vm-card-status-warning {
  border-color: rgba(245, 159, 0, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(245, 159, 0, 0.32),
              0 0 16px 0 rgba(245, 159, 0, 0.22),
              var(--vm-shadow-1, 0 4px 12px rgba(0,0,0,0.10));
}
.vm-card-status-info,
.ops-card.vm-card-status-info {
  border-color: rgba(30, 143, 255, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(30, 143, 255, 0.32),
              0 0 16px 0 rgba(30, 143, 255, 0.20),
              var(--vm-shadow-1, 0 4px 12px rgba(0,0,0,0.10));
}
.vm-card-status-offline,
.ops-card.vm-card-status-offline {
  border-color: rgba(140, 156, 178, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(140, 156, 178, 0.18),
              var(--vm-shadow-1, 0 4px 12px rgba(0,0,0,0.10));
  opacity: 0.78;
}
.vm-card-status-alarm,
.ops-card.vm-card-status-alarm {
  border-color: rgba(224, 49, 49, 0.85) !important;
  box-shadow: 0 0 0 2px rgba(224, 49, 49, 0.55),
              0 0 24px 0 rgba(224, 49, 49, 0.40),
              0 0 60px 0 rgba(224, 49, 49, 0.18),
              var(--vm-shadow-2, 0 8px 24px rgba(0,0,0,0.18));
  animation: vm-status-alarm-pulse 1.6s ease-in-out infinite;
}
@keyframes vm-status-alarm-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(224, 49, 49, 0.55),
                0 0 24px 0 rgba(224, 49, 49, 0.40),
                0 0 60px 0 rgba(224, 49, 49, 0.18);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(224, 49, 49, 0.85),
                0 0 32px 0 rgba(224, 49, 49, 0.62),
                0 0 80px 0 rgba(224, 49, 49, 0.30);
  }
}

/* ============================================================
   SYSTEM-HEALTH LED + AUDIO-MUTE (Bosch BIS-stil top-chrome)
   ============================================================
   En altid-synlig 10px LED-prick i topbaren + audio-mute toggle.
   I premium-system ar dessa CHROME-niva, aldrig gomda i settings.
   ============================================================ */
.vm-sys-led {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(200, 220, 240, 0.78);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.vm-sys-led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.vm-sys-led-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.35;
  animation: vm-led-ripple 2.2s ease-out infinite;
}
@keyframes vm-led-ripple {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.vm-sys-led[data-status="ok"]      .vm-sys-led-dot { background: var(--vm-state-ok); color: var(--vm-state-ok); box-shadow: 0 0 8px rgba(46, 182, 125, 0.65); }
.vm-sys-led[data-status="warning"] .vm-sys-led-dot { background: var(--vm-state-warning); color: var(--vm-state-warning); box-shadow: 0 0 8px rgba(245, 159, 0, 0.65); }
.vm-sys-led[data-status="alarm"]   .vm-sys-led-dot { background: var(--vm-state-critical); color: var(--vm-state-critical); box-shadow: 0 0 10px rgba(224, 49, 49, 0.85); }
.vm-sys-led[data-status="offline"] .vm-sys-led-dot { background: var(--vm-text-secondary); color: var(--vm-text-secondary); box-shadow: none; }
.vm-sys-led[data-status="offline"] .vm-sys-led-dot::after { display: none; }

/* ============================================================
   PERSISTENT TIMELINE STRIP (Milestone XProtect-stil)
   ============================================================
   24h horisontell timeline med event-dots. Aller-tid synlig
   nere pa sidan. Operatoren tappar aldrig temporal kontext.
   ============================================================ */
.vm-timeline {
  position: relative;
  height: 56px;
  background: linear-gradient(180deg,
    rgba(8, 16, 32, 0.86) 0%,
    rgba(6, 12, 28, 0.94) 100%);
  border-top: 1px solid rgba(120, 160, 220, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  user-select: none;
}
.vm-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(140, 180, 220, 0.55);
}
.vm-timeline-track {
  position: relative;
  flex: 1;
  background: linear-gradient(90deg,
    rgba(30, 143, 255, 0.04) 0%,
    rgba(30, 143, 255, 0.10) 50%,
    rgba(30, 143, 255, 0.04) 100%);
  border-radius: 5px;
  border: 1px solid rgba(120, 160, 220, 0.10);
  cursor: crosshair;
}
.vm-timeline-now {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--vm-brand-primary);
  box-shadow: 0 0 8px rgba(30, 143, 255, 0.85);
  z-index: 3;
  pointer-events: none;
}
.vm-timeline-now::before {
  content: "NU";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.50rem;
  font-weight: 800;
  color: var(--vm-brand-primary);
  letter-spacing: 0.10em;
}
.vm-timeline-evt {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vm-timeline-evt:hover {
  transform: translate(-50%, -50%) scale(2.0);
  z-index: 4;
}
.vm-timeline-evt[data-sev="info"]    { background: var(--vm-brand-primary); box-shadow: 0 0 4px rgba(30, 143, 255, 0.65); }
.vm-timeline-evt[data-sev="ok"]      { background: var(--vm-state-ok); box-shadow: 0 0 4px rgba(46, 182, 125, 0.65); }
.vm-timeline-evt[data-sev="warning"] { background: var(--vm-state-warning); box-shadow: 0 0 5px rgba(245, 159, 0, 0.85); width: 5px; height: 5px; }
.vm-timeline-evt[data-sev="alarm"]   { background: var(--vm-state-critical); box-shadow: 0 0 8px rgba(224, 49, 49, 1); width: 6px; height: 6px; animation: vm-tl-pulse 1.4s ease-in-out infinite; }
@keyframes vm-tl-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(224, 49, 49, 0.85); }
  50%      { box-shadow: 0 0 14px rgba(224, 49, 49, 1.0); }
}
.vm-timeline-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(120, 160, 220, 0.10);
  pointer-events: none;
}
.vm-timeline-tick-lbl {
  position: absolute;
  bottom: -14px;
  left: 0;
  transform: translateX(-50%);
  font-size: 0.50rem;
  font-weight: 700;
  color: rgba(140, 180, 220, 0.45);
  letter-spacing: 0.05em;
}


/* ============================================================
   v3200 — EXKLUSIVITET-LIFT del 1
   Stripe borderless KPI · Linear compact event-row · Sentry sparkline
   Drivs av Premium Quality Bar — Geist + tabular-nums + hairlines + ease-out-expo.
   ============================================================ */


/* ── 9. STRIPE BORDERLESS KPI — .vm-kpi-grid / .vm-kpi-cell ─────
   Stripe-stil "summary card row": ingen yttre border, inga avrundade
   hörn på cellerna. Hairlines (1px @ 8% alpha) som column-separators.
   Stora tabulara siffror i Geist Mono. Mini-sparkline i sloten.

   <div class="vm-kpi-grid">
     <div class="vm-kpi-cell" data-state="ok|warn|alarm|info">
       <div class="vm-kpi-cell-label">Tillträdespunkter</div>
       <div class="vm-kpi-cell-value">128</div>
       <div class="vm-kpi-cell-sub">anslutna</div>
       <svg class="vm-sparkline" ...></svg>
     </div>
     ...
   </div>
*/
.vm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: var(--vm-surface, rgba(14,24,48,0.60));
  border: 1px solid rgba(120,160,220,0.10);
  border-radius: var(--vm-radius-md, 12px);
  overflow: hidden;
}
.vm-kpi-grid > .vm-kpi-cell + .vm-kpi-cell {
  border-left: 1px solid rgba(120,160,220,0.08);
}
.vm-kpi-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease, var(--vm-ease));
}
.vm-kpi-cell:hover {
  background: rgba(120,160,220,0.04);
}
.vm-kpi-cell-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(140,180,220,0.62);
  font-family: var(--vm-font-stack, system-ui);
}
.vm-kpi-cell-value {
  margin-top: 2px;
  font-family: var(--vm-font-display, var(--vm-font-stack));
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cc-text, var(--vm-text, var(--vm-brand-tint)));
  font-variant-numeric: tabular-nums;
}
.vm-kpi-cell-sub {
  font-size: 0.70rem;
  font-weight: 500;
  color: rgba(140,180,220,0.55);
  letter-spacing: 0.01em;
}
.vm-kpi-cell-spark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  pointer-events: none;
  opacity: 0.85;
}
/* Severity-bar i vänsterkant — visas när cellen har en state */
.vm-kpi-cell[data-state="ok"]::before,
.vm-kpi-cell[data-state="warn"]::before,
.vm-kpi-cell[data-state="alarm"]::before,
.vm-kpi-cell[data-state="info"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
}
.vm-kpi-cell[data-state="ok"]::before    { background: var(--vm-dot-ok, var(--vm-state-ok)); }
.vm-kpi-cell[data-state="warn"]::before  { background: var(--vm-dot-warn, var(--vm-state-warning)); }
.vm-kpi-cell[data-state="alarm"]::before { background: var(--vm-dot-alarm, var(--vm-state-critical)); }
.vm-kpi-cell[data-state="info"]::before  { background: var(--vm-dot-info, var(--vm-brand-primary)); }
.vm-kpi-cell[data-state="alarm"] .vm-kpi-cell-value {
  color: var(--vm-dot-alarm, var(--vm-state-critical));
}


/* ── 10. LINEAR COMPACT EVENT-ROW — .vm-events-table ─────────────
   Applicerbar på existerande <table>. Gör tabellrader 36px höga med
   hover-border, 3px severity-bar i vänsterkant. Apple-hairlines mellan
   rader (1px @ 6% alpha). Linear/Stripe-känsla.

   <table class="au-table vm-events-table">
     <thead>...</thead>
     <tbody>
       <tr data-sev="ok|warning|error|critical|info"> ... </tr>
*/
.vm-events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.vm-events-table thead th {
  background: transparent;
  color: rgba(140,180,220,0.55);
  padding: 10px 14px 8px;
  text-align: left;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(120,160,220,0.10);
  white-space: nowrap;
}
.vm-events-table tbody tr {
  position: relative;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease, var(--vm-ease));
}
.vm-events-table tbody tr td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(120,160,220,0.06);
  color: var(--cc-text, var(--vm-text, var(--vm-brand-tint)));
  vertical-align: top;
  position: relative;
}
.vm-events-table tbody tr:hover td {
  background: rgba(30,143,255,0.04);
}
.vm-events-table tbody tr td:first-child {
  padding-left: 17px;
}
.vm-events-table tbody tr td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease, var(--vm-ease));
}
.vm-events-table tbody tr[data-sev="ok"]       td:first-child::before { background: rgba(0,199,129,0.55); }
.vm-events-table tbody tr[data-sev="info"]     td:first-child::before { background: rgba(0,112,243,0.55); }
.vm-events-table tbody tr[data-sev="warning"]  td:first-child::before { background: rgba(240,161,0,0.65); }
.vm-events-table tbody tr[data-sev="error"]    td:first-child::before { background: rgba(229,72,77,0.70); }
.vm-events-table tbody tr[data-sev="critical"] td:first-child::before {
  background: rgba(229,72,77,0.95);
  animation: vm-row-pulse 1.6s ease-in-out infinite;
}
@keyframes vm-row-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.45); }
  50%      { box-shadow: 0 0 0 3px rgba(229,72,77,0); }
}
.vm-events-table tbody tr:hover td:first-child::before {
  filter: brightness(1.25);
}
/* Compact mode — 32px rader istället för 36 */
.vm-events-table.is-compact tbody tr td { padding: 6px 14px; }


/* ── 11. SENTRY SPARKLINE — .vm-sparkline ─────────────────────
   60×16 SVG-sparkline (default), tabular-nums-vänlig.
   JS-helper i base.html bygger polyline från data-array.

   <svg class="vm-sparkline" data-spark='[3,5,2,8,4,6,9]' data-spark-color="info"></svg>

   Eller manuellt:
   <svg class="vm-sparkline" width="60" height="16" viewBox="0 0 60 16">
     <polyline points="0,12 10,8 20,14 30,4 40,9 50,2 60,6" />
   </svg>
*/
.vm-sparkline {
  display: inline-block;
  width: 60px;
  height: 16px;
  vertical-align: middle;
  overflow: visible;
}
.vm-sparkline polyline {
  fill: none;
  stroke: rgba(140,180,220,0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.vm-sparkline[data-spark-color="ok"]    polyline { stroke: var(--vm-dot-ok, var(--vm-state-ok)); }
.vm-sparkline[data-spark-color="warn"]  polyline { stroke: var(--vm-dot-warn, var(--vm-state-warning)); }
.vm-sparkline[data-spark-color="alarm"] polyline { stroke: var(--vm-dot-alarm, var(--vm-state-critical)); }
.vm-sparkline[data-spark-color="info"]  polyline { stroke: var(--vm-dot-info, var(--vm-brand-primary)); }
.vm-sparkline-fill {
  fill-opacity: 0.18;
  stroke: none;
}
.vm-sparkline[data-spark-color="ok"]    .vm-sparkline-fill { fill: var(--vm-dot-ok, var(--vm-state-ok)); }
.vm-sparkline[data-spark-color="warn"]  .vm-sparkline-fill { fill: var(--vm-dot-warn, var(--vm-state-warning)); }
.vm-sparkline[data-spark-color="alarm"] .vm-sparkline-fill { fill: var(--vm-dot-alarm, var(--vm-state-critical)); }
.vm-sparkline[data-spark-color="info"]  .vm-sparkline-fill { fill: var(--vm-dot-info, var(--vm-brand-primary)); }
/* Större variant — 100×24 för stat-cards */
.vm-sparkline.is-lg { width: 100px; height: 24px; }


/* ============================================================
   v3300 — EXKLUSIVITET-LIFT del 2
   Raycast keycap action-bar · Apple hairlines · FLIP-segmented
   Sista visual differentiator-lagret innan Tidomat-demo.
   ============================================================ */


/* ── 12. RAYCAST KEYCAP — .vm-keycap ────────────────────────────
   Visualiserade keyboard-shortcuts (Raycast / Linear / Cron).
   <kbd class="vm-keycap">Space</kbd>
   Plus modifier-stack: <kbd class="vm-keycap">⌘</kbd> + <kbd class="vm-keycap">K</kbd>
*/
.vm-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0 1px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom-width: 2px;
  border-bottom-color: rgba(255,255,255,0.18);
  color: rgba(220,238,255,0.85);
  font-family: var(--vm-font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,0.10);
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vm-keycap.is-pressed,
.vm-keycap:active {
  border-bottom-width: 1px;
  transform: translateY(1px);
  background: rgba(255,255,255,0.12);
}
body[data-tone="day"] .vm-keycap {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.10);
  border-bottom-color: rgba(15,23,42,0.18);
  color: rgba(15,23,42,0.78);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}


/* ── 13. ACTION-BAR (Raycast bottom command-bar) — .vm-action-bar ─
   Sticky bottom-bar med shortcuts visualiserade. Enkel HTML:
     <div class="vm-action-bar">
       <button class="vm-action"><kbd class="vm-keycap">Space</kbd> Kvittera</button>
       <button class="vm-action"><kbd class="vm-keycap">L</kbd> Spärra</button>
     </div>
*/
.vm-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(8,16,28,0.92);
  border-top: 1px solid rgba(120,160,220,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 50;
  font-size: 0.74rem;
  flex-wrap: wrap;
}
.vm-action-bar .vm-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: rgba(210,228,250,0.78);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease, var(--vm-ease));
}
.vm-action-bar .vm-action:hover {
  background: rgba(120,160,220,0.08);
  color: rgba(255,255,255,0.95);
}
.vm-action-bar .vm-action:hover .vm-keycap {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}
.vm-action-bar .vm-action.is-danger { color: rgba(252,165,165,0.85); }
.vm-action-bar .vm-action.is-danger:hover { background: rgba(229,72,77,0.12); color: var(--vm-state-critical); }
.vm-action-bar-spacer { flex: 1; }
.vm-action-bar-hint {
  font-size: 0.66rem;
  color: rgba(140,180,220,0.50);
  font-weight: 500;
  letter-spacing: 0.02em;
}
body[data-tone="day"] .vm-action-bar {
  background: rgba(255,255,255,0.94);
  border-top-color: rgba(15,23,42,0.08);
}
body[data-tone="day"] .vm-action-bar .vm-action {
  color: rgba(15,23,42,0.78);
}
body[data-tone="day"] .vm-action-bar .vm-action:hover {
  background: rgba(15,23,42,0.05);
  color: rgba(15,23,42,0.95);
}
body[data-tone="day"] .vm-action-bar-hint {
  color: rgba(71,85,105,0.55);
}


/* ── 14. SEGMENTED CONTROL med FLIP-transform — .vm-segmented ────
   Apple-stil segmented control. JS-helper VmSegmented.init() animerar
   indikatorn smooth mellan val (FLIP-pattern).

     <div class="vm-segmented" data-vm-segmented>
       <button class="vm-seg" data-seg-value="2d" aria-pressed="true">2D</button>
       <button class="vm-seg" data-seg-value="3d">3D</button>
       <button class="vm-seg" data-seg-value="plan">Plan</button>
       <span class="vm-seg-indicator" aria-hidden="true"></span>
     </div>
*/
.vm-segmented {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: rgba(120,160,220,0.06);
  border: 1px solid rgba(120,160,220,0.10);
  gap: 0;
  font-size: 0.74rem;
}
.vm-segmented .vm-seg {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: rgba(160,195,230,0.72);
  font-weight: 600;
  font-size: 0.74rem;
  cursor: pointer;
  transition: color var(--vm-dur-fast, 120ms) var(--vm-ease, var(--vm-ease));
  white-space: nowrap;
}
.vm-segmented .vm-seg:hover {
  color: rgba(220,238,255,0.92);
}
.vm-segmented .vm-seg[aria-pressed="true"] {
  color: rgba(255,255,255,0.95);
  font-weight: 700;
}
.vm-segmented .vm-seg-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  z-index: 1;
  transition: transform var(--vm-dur-base, 220ms) var(--vm-ease, var(--vm-ease)),
              width var(--vm-dur-base, 220ms) var(--vm-ease, var(--vm-ease));
  pointer-events: none;
}
body[data-tone="day"] .vm-segmented {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
}
body[data-tone="day"] .vm-segmented .vm-seg {
  color: rgba(71,85,105,0.72);
}
body[data-tone="day"] .vm-segmented .vm-seg[aria-pressed="true"] {
  color: rgba(15,23,42,0.95);
}
body[data-tone="day"] .vm-segmented .vm-seg-indicator {
  background: #ffffff;
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}


/* ── 15. APPLE HAIRLINES — .vm-hairline + utility-class ─────────
   1px med 8-12% alpha. Subtle, premium. Använd som .vm-hairline
   (border-bottom) eller via globala overrides längre ned.

     <div class="vm-hairline">...</div>
*/
.vm-hairline {
  border-bottom: 1px solid rgba(120,160,220,0.08);
}
.vm-hairline-top {
  border-top: 1px solid rgba(120,160,220,0.08);
}
body[data-tone="day"] .vm-hairline {
  border-bottom-color: rgba(15,23,42,0.08);
}
body[data-tone="day"] .vm-hairline-top {
  border-top-color: rgba(15,23,42,0.08);
}


/* ============================================================
   v0800 — INDUSTRIAL MISSION CONTROL utility-klasser
   ============================================================
   Opt-in-klasser som lyfter selektiva element från soft-saas till
   Industrial Mission Control-DNA. Använd på kommando-kit-element.
*/

/* Sharp container — 0px corner istället for 14px radius */
.vm-sharp { border-radius: var(--vm-radius-sharp, 0); }
.vm-edge  { border-radius: var(--vm-radius-edge, 2px); }

/* Solid divider-linje (industriell — INTE soft rgba) */
.vm-divider {
  height: 1px;
  background: var(--vm-line, rgba(255,255,255,0.08));
  margin: var(--vm-space-3) 0;
}
.vm-divider-strong {
  height: 1px;
  background: var(--vm-line-strong, rgba(255,255,255,0.18));
  margin: var(--vm-space-4) 0;
}

/* Industrial-ram med solid 1px linje (inte mjuk) */
.vm-frame {
  border: 1px solid var(--vm-line, rgba(255,255,255,0.08));
  border-radius: var(--vm-radius-edge, 2px);
}
.vm-frame-strong {
  border: 1px solid var(--vm-line-strong, rgba(255,255,255,0.18));
  border-radius: var(--vm-radius-edge, 2px);
}

/* HUD-overlay text (Tesla/SpaceX-stil — corner-koordinater, fps-timer) */
.vm-hud {
  font-family: var(--vm-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vm-text-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.vm-hud-strong {
  color: var(--vm-accent);
  opacity: 0.9;
  text-shadow: 0 0 6px var(--vm-accent-glow);
}

/* Bakgrunds-grid (industriell teknisk ritning-känsla) */
.vm-grid-bg {
  background-image:
    linear-gradient(var(--vm-grid-line, rgba(255,255,255,0.04)) 1px, transparent 1px),
    linear-gradient(90deg, var(--vm-grid-line, rgba(255,255,255,0.04)) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Scan-bar — horisontell sweep var 4:e sek på aktiva element */
.vm-scan { position: relative; overflow: hidden; }
.vm-scan::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--vm-scan-line, rgba(0,212,255,0.06)) 50%,
    transparent 100%);
  animation: vm-scan-sweep 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vm-scan-sweep {
  0%, 100% { left: -100%; }
  50%      { left: 100%; }
}

/* Mono-tabular siffror för KPI-displayer (utility) */
.vm-mono { font-family: var(--vm-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.vm-uppercase { text-transform: uppercase; letter-spacing: var(--vm-letter-wide, 0.04em); }

/* Industrial signal-pill (signal/varning, INTE danger) */
.vm-pill-signal {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-signal-soft, rgba(255,136,0,0.12));
  border: 1px solid var(--vm-signal-strong, rgba(255,136,0,0.24));
  color: var(--vm-signal, var(--vm-state-warning));
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--vm-font-mono);
}

/* Mission-control mode aktiverar på operativa vyer (driftpanel, larm)
   via body.mission-control-mode. Skiftar default-radii till sharp,
   tonar ner mjuka shadows, accent-glow på aktiva element. */
body.mission-control-mode .vm-card,
body.mission-control-mode .ops-card,
body.mission-control-mode .vm-kpi-cell {
  border-radius: var(--vm-radius-edge, 2px);
}
body.mission-control-mode .vm-btn,
body.mission-control-mode .ops-btn {
  border-radius: var(--vm-radius-edge, 2px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
}
body.mission-control-mode .ops-hero,
body.mission-control-mode .au-table-wrap {
  border-radius: var(--vm-radius-edge, 2px);
}

/* ============================================================================
   v0900 — Daylight Mission Control utility-primitiver
   ============================================================================
   Inspirerat av Game/Liga-DNA men med säkerhets-cyan istället för orange.
   Off-white bas + bläck text + cyan/amber-accenter sparsamt.
   ============================================================================ */

/* Eyebrow — UPPERCASE label ovanför rubrik / KPI */
.vm-eyebrow {
  font-size: 0.6875rem;       /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vm-text-muted);
  line-height: 1;
  margin-bottom: 8px;
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
}

/* Bignum — stora siffror för KPI:er. tabular-nums för stabil bredd. */
.vm-bignum {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--vm-text);
}
.vm-bignum--xs { font-size: 1.5rem; }   /* 24px */
.vm-bignum--sm { font-size: 2rem; }     /* 32px */
.vm-bignum--md { font-size: 3rem; }     /* 48px */
.vm-bignum--lg { font-size: 4rem; }     /* 64px */
.vm-bignum--xl { font-size: 5.5rem; }   /* 88px */

/* Stripe-card — card med vänster-stripe-färgkodning för status.
   Använd som <div class="vm-stripe-card vm-stripe-card--ok"> */
.vm-stripe-card {
  position: relative;
  background: var(--vm-bg-elevated);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  padding: 20px 24px 20px 28px;
  overflow: hidden;
  transition: box-shadow 120ms ease-out;
}
.vm-stripe-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--vm-text-faint);
  border-radius: 14px 0 0 14px;
}
.vm-stripe-card:hover {
  box-shadow: 0 1px 2px rgba(14,16,20,0.04), 0 8px 24px rgba(14,16,20,0.06);
}
.vm-stripe-card--ok::before     { background: linear-gradient(180deg, var(--vm-state-ok), var(--vm-state-ok)); }
.vm-stripe-card--warn::before   { background: linear-gradient(180deg, var(--vm-state-warning), var(--vm-state-warning)); }
.vm-stripe-card--alert::before  { background: linear-gradient(180deg, var(--vm-state-critical), var(--vm-state-critical)); }
.vm-stripe-card--info::before   { background: linear-gradient(180deg, var(--vm-brand-primary), var(--vm-brand-primary)); }
.vm-stripe-card--neutral::before { background: var(--vm-text-faint); }

/* Score-ring — donut med conic-gradient för procent-värden.
   Användning:
     <div class="vm-score-ring" style="--vm-score: 87;">
       <span class="vm-score-ring__value">87<small>%</small></span>
     </div>
*/
.vm-score-ring {
  --vm-score: 0;
  --vm-score-color: var(--vm-accent, var(--vm-brand-primary));
  --vm-score-track: var(--vm-border, rgba(14,16,20,0.10));
  --vm-score-size: 56px;
  --vm-score-thickness: 6px;
  width: var(--vm-score-size);
  height: var(--vm-score-size);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background:
    conic-gradient(var(--vm-score-color) calc(var(--vm-score) * 1%), var(--vm-score-track) 0);
  position: relative;
  flex-shrink: 0;
}
.vm-score-ring::before {
  content: '';
  position: absolute;
  inset: var(--vm-score-thickness);
  border-radius: 50%;
  background: var(--vm-bg-elevated);
}
.vm-score-ring__value {
  position: relative;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--vm-text);
  letter-spacing: -0.02em;
}
.vm-score-ring__value small {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--vm-text-muted);
  margin-left: 1px;
}
.vm-score-ring--lg { --vm-score-size: 88px; --vm-score-thickness: 8px; }
.vm-score-ring--lg .vm-score-ring__value { font-size: 1.4rem; }
.vm-score-ring--warn  { --vm-score-color: var(--vm-signal, var(--vm-state-warning)); }
.vm-score-ring--alert { --vm-score-color: var(--vm-state-critical); }
.vm-score-ring--ok    { --vm-score-color: var(--vm-state-ok); }

/* Chip — UPPERCASE-badge i Game/Liga-stil */
.vm-chip-v9 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.625rem;       /* 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Geist', system-ui, sans-serif;
  line-height: 1;
  white-space: nowrap;
  background: var(--vm-bg-soft);
  color: var(--vm-text-muted);
  border: 1px solid var(--vm-border);
}
.vm-chip-v9--up    { background: rgba(34,197,94,0.10);  color: var(--vm-state-ok); border-color: rgba(34,197,94,0.25); }
.vm-chip-v9--down  { background: rgba(229,72,77,0.10);  color: var(--vm-state-critical); border-color: rgba(229,72,77,0.25); }
.vm-chip-v9--info  { background: rgba(0,212,255,0.10);  color: var(--vm-brand-primary); border-color: rgba(0,212,255,0.25); }
.vm-chip-v9--warn  { background: rgba(255,136,0,0.12);  color: var(--vm-state-warning); border-color: rgba(255,136,0,0.25); }
.vm-chip-v9--alert { background: #0E1014;               color: #FAFAF7; border-color: #0E1014; }

/* Section-divider — tunn linje med eyebrow till vänster */
.vm-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 32px 0 16px;
}
.vm-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vm-line);
}

/* Card-14 — 14px radius istället för 24px (mindre soft, mer industriell).
   Default white card på off-white papper-bas. */
.vm-card-14 {
  background: var(--vm-bg-elevated);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  padding: 24px;
  transition: box-shadow 120ms ease-out, transform 120ms ease-out;
}
.vm-card-14:hover {
  box-shadow: 0 1px 2px rgba(14,16,20,0.04), 0 8px 24px rgba(14,16,20,0.06);
}
.vm-card-14--clickable:hover {
  transform: translateY(-1px);
}

/* Day-tone polish — säkerställ att body bg och text följer paletten överallt */
body[data-tone="day"] {
  background: var(--vm-bg);
  color: var(--vm-text);
}
body[data-tone="day"] .vm-eyebrow,
body[data-tone="day"] .vm-card .vm-eyebrow {
  color: var(--vm-text-muted);
}

/* ============================================================
   v20260510 — KONTRAST-FIX: knappar, filter, tabellhuvud
   Säkerställer att text syns på guld-bg och att filter ser
   neutral grå ut istället för blå.
   Loaded last → vinner kaskaden.
   ============================================================ */

/* Primärknappar (Öppna, Spara, Ny X, etc) — SOLID brand-blå + vit text
   FAS O (2026-05-16): tidigare subtle 14% tint gjorde knappar svårlästa
   ("ser disabled ut"). Återställt till designsystem-spec (CLAUDE.md):
   solid var(--vm-brand-primary) + vit text = WCAG AA 4.5:1 garanterad. */
.vm-btn-primary,
.access-btn-primary,
.admin-btn-primary,
.btn.btn-primary,
button.btn-primary,
button.is-primary,
[class*="btn-primary"]:not([class*="btn-primary-ghost"]) {
    background: var(--vm-brand-primary) !important;
    border: 1px solid var(--vm-brand-primary) !important;
    color: var(--vm-text-on-brand) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.vm-btn-primary:hover,
.access-btn-primary:hover,
.admin-btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
button.is-primary:hover,
[class*="btn-primary"]:hover:not([class*="btn-primary-ghost"]) {
    background: var(--vm-brand-primary-hover) !important;
    border-color: var(--vm-brand-primary-hover) !important;
    color: var(--vm-text-on-brand) !important;
}

/* Sekundärknappar (Tid, Avbryt, Kolumner, etc) — ljusgrå text på mörk bg
   Batch 18a-fix-v2 (2026-05-21, Prio 1h): :not(.vm-btn-danger) tillagt i
   .vm-btn-selektorerna. Monoliten (0,4,0+!important×8) slog tidigare över
   .vm-btn-danger (0,1,0) -> alla danger-knappar renderade grå. Nu skippas
   .vm-btn-danger -> SOLID-regeln (rad 215 + 2162) vinner -> röd rendering.

   2026-05-29 tema-grund: :not(.vm-btn-success) + :not(.vm-btn-ghost) tillagt
   så success-knapp får grön och ghost får subtle border (Lärdom 21).
   Hårdkodade rgba(255,255,255,...) tokeniserade så light-mode biter.
   Full rivning av denna monolit vaentar FAS F. */
.vm-btn:not(.vm-btn-primary):not(.vm-btn-danger):not(.vm-btn-success):not(.vm-btn-ghost):not(.is-danger):not([class*="btn-primary"]),
.access-btn:not(.access-btn-primary):not(.is-danger),
.btn.btn-secondary,
button.btn-secondary,
.access-btn-ghost {
    background: var(--vm-bg-hover) !important;
    border: 1px solid var(--vm-border-default) !important;
    color: var(--vm-text-secondary) !important;
    font-weight: 600 !important;
}
.vm-btn:not(.vm-btn-primary):not(.vm-btn-danger):not(.vm-btn-success):not(.vm-btn-ghost):not(.is-danger):not([class*="btn-primary"]):hover,
.access-btn:not(.access-btn-primary):not(.is-danger):hover,
.btn.btn-secondary:hover,
button.btn-secondary:hover,
.access-btn-ghost:hover {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
    color: var(--vm-text-primary) !important;
}

/* Filter-pillar (Alla, Larm, Öppna, Lästa, Offline) — neutral grå, accent när aktiv.
   2026-05-29 tema-grund: tokeniserat så light-mode biter. */
.access-filter-btn,
.vm-filter-btn,
[data-filter]:not(.am-filter-btn):not(.vm-segment-item) {
    background: var(--vm-bg-hover) !important;
    border: 1px solid var(--vm-border-subtle) !important;
    color: var(--vm-text-muted) !important;
    font-weight: 600 !important;
}
.access-filter-btn.active,
.vm-filter-btn.active,
[data-filter].active:not(.am-filter-btn):not(.vm-segment-item),
[data-filter].is-active:not(.am-filter-btn):not(.vm-segment-item) {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.38) !important;
    color: var(--vm-accent, var(--vm-brand-primary)) !important;
    font-weight: 700 !important;
}

/* Tabellhuvud — varm grå (matchar mörk bg) */
.vm-table thead th,
.access-table thead th,
table:not([class*="cl-"]) thead th {
    background: var(--vm-bg-page) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(235,240,250,0.85) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
}

/* ============================================================
   v20260510 GLOBAL OVERRIDE — alla pill/tab-mönster på alla sidor
   Tvingar guld+mörk-grå tema även när inline-CSS i templates
   eller äldre regler försöker använda blå/vit-blandning.
   Selectors täcker: vm-subnav-link, access-tab-link, pd-tab,
   fb-tab, cat-tab, pt-tab, door-tab, au-tab, id-tab, ld-tab,
   ap-tab, sec-chip, alarm-tab, route-tab.
   ============================================================ */

/* Inactive — neutral mörk grå med guld-tonad text */
.vm-subnav-link:not(.active),
a.vm-subnav-link:not(.active),
.access-tab-link:not(.active):not(.is-active),
a.access-tab-link:not(.active):not(.is-active),
.pd-tab:not(.active),
a.pd-tab:not(.active),
.fb-tab:not(.active),
a.fb-tab:not(.active),
.cat-tab:not(.active),
a.cat-tab:not(.active),
.pt-tab:not(.active),
a.pt-tab:not(.active),
.door-tab:not(.active),
a.door-tab:not(.active),
.au-tab:not(.active),
a.au-tab:not(.active),
.id-tab:not(.active),
a.id-tab:not(.active),
.ld-tab:not(.active),
a.ld-tab:not(.active),
.ap-tab:not(.active),
a.ap-tab:not(.active),
.alarm-tab:not(.active),
a.alarm-tab:not(.active),
.route-tab:not(.active),
a.route-tab:not(.active),
.sec-chip:not(.sel):not(.active),
a.sec-chip:not(.sel):not(.active) {
    /* 2026-05-29 tema-grund: tokeniserat så ljust läge biter.
       Mörkt utseende oförändrat — tokens ger samma rgba-värden i :root. */
    background: var(--vm-bg-hover) !important;
    border: 1px solid var(--vm-border-subtle) !important;
    color: var(--vm-text-secondary) !important;
    font-weight: 600 !important;
}

/* Hover på inactive */
.vm-subnav-link:not(.active):hover,
a.vm-subnav-link:not(.active):hover,
.access-tab-link:not(.active):not(.is-active):hover,
.pd-tab:not(.active):hover,
.fb-tab:not(.active):hover,
.cat-tab:not(.active):hover,
.pt-tab:not(.active):hover,
.door-tab:not(.active):hover,
.au-tab:not(.active):hover,
.id-tab:not(.active):hover,
.ld-tab:not(.active):hover,
.ap-tab:not(.active):hover,
.alarm-tab:not(.active):hover,
.route-tab:not(.active):hover {
    background: var(--vm-bg-active) !important;
    border-color: var(--vm-border-brand) !important;
    color: var(--vm-text-primary) !important;
}

/* Active — SUBTLE guld-tint pill (v20260510-2330: var solid gradient — för krass) */
.vm-subnav-link.active,
a.vm-subnav-link.active,
.access-tab-link.active,
.access-tab-link.is-active,
a.access-tab-link.active,
a.access-tab-link.is-active,
.pd-tab.active,
a.pd-tab.active,
.fb-tab.active,
a.fb-tab.active,
.cat-tab.active,
a.cat-tab.active,
.pt-tab.active,
a.pt-tab.active,
.door-tab.active,
a.door-tab.active,
.vm-tab.active,
a.vm-tab.active,
.au-tab.active,
a.au-tab.active,
.id-tab.active,
a.id-tab.active,
.ld-tab.active,
a.ld-tab.active,
.ap-tab.active,
a.ap-tab.active,
.alarm-tab.active,
a.alarm-tab.active,
.route-tab.active,
a.route-tab.active,
.sec-chip.sel,
.sec-chip.active,
a.sec-chip.sel,
a.sec-chip.active {
    background: var(--vm-brand-primary) !important;
    border: 1px solid var(--vm-brand-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Tab-count badge inom active pill */
.vm-subnav-link.active .tab-count,
.access-tab-link.active .tab-count,
.access-tab-link.is-active .tab-count,
.door-tab.active .tab-count,
.pd-tab.active .tab-count,
.fb-tab.active .tab-count {
    background: rgba(26,24,22,0.25) !important;
    color: var(--vm-accent-fg) !important;
}

/* Globalt body-bg lock — säkerställ neutral grå överallt
   (Vissa sidor sätter inline body-bg). */
body.app-shell,
body.theme-atelier,
body[data-path^="/admin"],
body[data-path^="/integration"],
body[data-path^="/health"],
body[data-path^="/realtime"] {
    background-color: var(--vm-bg, #1c1c1e) !important;
}

/* Search-input neutral kontrast */
input[type="search"],
input[type="text"][placeholder*="Sök"],
input[type="text"][placeholder*="sök"] {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--vm-text, #f2efe8) !important;
}
input[type="search"]::placeholder,
input[type="text"][placeholder*="Sök"]::placeholder {
    color: #7a7468 !important;
}

/* Status-badge "AKTIV/ÖPPEN/STÄNGD" — säkra kontrast */
.access-status-badge,
.access-status-badge--success {
    background: rgba(110,198,141,0.14) !important;
    color: var(--vm-state-ok) !important;
    border-color: rgba(110,198,141,0.30) !important;
}
.access-status-badge--warning {
    background: rgba(var(--vm-accent-rgb), 0.14) !important;
    color: var(--vm-accent, var(--vm-brand-primary)) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
}
.access-status-badge--danger {
    background: rgba(224,133,133,0.14) !important;
    color: var(--vm-state-critical) !important;
    border-color: rgba(224,133,133,0.30) !important;
}

/* Rad-knappar i tabeller (.btn.btn-sm) — explicita regler för Bootstrap-stil */
button.btn.btn-primary,
button.btn.btn-primary.btn-sm,
.btn.btn-primary,
.btn.btn-primary.btn-sm {
    background: linear-gradient(180deg, var(--vm-accent) 0%, var(--vm-accent-strong) 100%) !important;
    border: 1px solid var(--vm-accent) !important;
    color: var(--vm-accent-fg) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: var(--vm-shadow-1) !important;
    padding: 6px 12px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
button.btn.btn-primary:hover,
.btn.btn-primary:hover {
    background: linear-gradient(180deg, var(--vm-accent-hover) 0%, var(--vm-accent) 100%) !important;
    color: var(--vm-accent-fg) !important;
}

button.btn.btn-secondary,
button.btn.btn-secondary.btn-sm,
.btn.btn-secondary,
.btn.btn-secondary.btn-sm {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--vm-text-soft, #d0c9bd) !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-shadow: none !important;
}
button.btn.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
    color: var(--vm-text, #f2efe8) !important;
}

/* ============================================================
   v20260510-2030 SIDEBAR OVERRIDE — alla admin/integration sidor
   ============================================================ */
/* 2026-05-29 tema-grund: tokeniserat — hårdkodad gradient med #161616
   blockerade light-mode-flippning av sidomenyn. Nu via --vm-bg-sidebar. */
body.theme-atelier .app-sidebar,
body[data-path^="/admin"] .app-sidebar,
body[data-path^="/integration"] .app-sidebar,
body[data-path^="/health"] .app-sidebar,
body[data-path^="/realtime"] .app-sidebar,
body.theme-atelier[data-path="/"] .app-sidebar {
    background: var(--vm-bg-sidebar) !important;
    border-right: 1px solid var(--vm-border-subtle) !important;
}

/* Sidebar-text: alla länkar/labels/badges får ljus varm grå */
.app-sidebar .sidebar-link,
.app-sidebar a.sidebar-link,
.app-sidebar .sidebar-link-copy strong,
.app-sidebar .sidebar-link-copy span,
.app-sidebar .brand-text strong,
.app-sidebar .brand-text span,
.app-sidebar .sidebar-back-link,
.app-sidebar .sidebar-version-badge {
    color: var(--vm-text, #f2efe8) !important;
}

/* Section-labels (REGISTER, KONFIGURATION, LOGG, ÅTGÄRDER, etc) */
.app-sidebar .sidebar-label,
.sidebar-label {
    color: var(--vm-text-muted, #a09888) !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

/* ============================================================
   COLLAPSIBLE SIDEBAR-GRUPPER (LARMDEL FAS B 2026-05-22)
   ============================================================
   Aktiveras nar route satter sidebar_collapsible_labels (se
   navigation_service.py + base.html). Bygger pa befintlig
   .sidebar-label + .sidebar-group-struktur — kollapsibel-version
   ar opt-in via --collapsible-modifier.

   Anvandning: LARMDEL_ITEMS (Drift, Programmering, Service,
   Rapporter, Certifiering — INTE Genvagar). 0 nya !important. */

/* Klickbar header — overrider span-default fran base.html */
.sidebar-label--collapsible {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    margin: 4px 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--vm-text-muted, #a09888);
    font-family: inherit;
    font-size: var(--vm-text-xs, 12px);
    transition: background var(--vm-duration-fast, 120ms) ease,
                border-color var(--vm-duration-fast, 120ms) ease,
                color var(--vm-duration-fast, 120ms) ease;
}
.sidebar-label--collapsible:hover {
    background: rgba(var(--vm-accent-rgb), 0.06);
    border-color: rgba(var(--vm-accent-rgb), 0.14);
    color: var(--vm-brand-tint, #cfe1f8);
}
.sidebar-label--collapsible:focus-visible {
    outline: 2px solid var(--vm-brand-primary, #4a8bd6);
    outline-offset: 2px;
}

.sidebar-label__chevron {
    display: inline-block;
    width: 12px;
    flex-shrink: 0;
    color: var(--vm-text-muted, #8a94a3);
    transition: transform var(--vm-duration-normal, 180ms)
                cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sidebar-label--collapsible[aria-expanded="true"] .sidebar-label__chevron {
    transform: rotate(90deg);
}

.sidebar-label__text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Collapsible content-grupp — overflow + max-height transition */
.sidebar-group--collapsible {
    overflow: hidden;
    /* nav-fix 2026-06-02: "Under utveckling"-gruppen har 37 stubbar → höjt
       från 800px så hela listan ryms vid expand. */
    max-height: 2400px;
    transition: max-height var(--vm-duration-normal, 180ms)
                cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-group--collapsible.is-collapsed {
    max-height: 0;
}

/* nav-fix 2026-06-02: stub-länkar ("ej byggd") i "Under utveckling"-gruppen.
   Tokeniserat → flippar korrekt i ljust/mörkt. */
.sidebar-link--stub {
    opacity: 0.74;
}
.sidebar-link--stub:hover {
    opacity: 1;
}
.sidebar-link-badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vm-text-muted);
    background: var(--vm-bg-surface);
    border: 1px solid var(--vm-border-subtle);
    border-radius: var(--vm-radius-pill, 999px);
    line-height: 1.5;
}

/* Inactive sidebar-link */
/* .vm-text-color-* utility-klasser borttagna 2026-05-22 (Chrome-fix-batch 2)
   — kategori-rendering migrerad till vm-pill-mönster på Sida 3
   (samma som Sida 2 section_type_pill). Färgade text-överrides fungerade
   inte mot globala td-span-monoliter trots specificity-höjning. */

.app-sidebar .sidebar-link:not(.active) {
    background: transparent !important;
    border: 1px solid transparent !important;
}
.app-sidebar .sidebar-link:not(.active):hover {
    background: rgba(var(--vm-accent-rgb), 0.08) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.18) !important;
    color: var(--vm-brand-tint) !important;
}

/* Active sidebar-link */
.app-sidebar .sidebar-link.active,
.app-sidebar a.sidebar-link.active {
    background: rgba(var(--vm-accent-rgb), 0.12) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.32) !important;
    color: var(--vm-accent, var(--vm-brand-primary)) !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 var(--vm-accent, var(--vm-brand-primary)) !important;
}
.app-sidebar .sidebar-link.active .sidebar-link-copy strong,
.app-sidebar a.sidebar-link.active .sidebar-link-copy strong {
    color: var(--vm-accent, var(--vm-brand-primary)) !important;
}
.app-sidebar .sidebar-link-icon {
    color: inherit !important;
}

/* Brand-card top */
.app-sidebar .brand-sidebar,
.app-sidebar a.brand-sidebar {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.18) !important;
    box-shadow: none !important;
}

/* SYSTEM-entry (toppen-knappen som leder till admin).
   2026-05-29 tema-grund-r5: tokeniserat — använder brand-gradient i båda teman
   så att light också får synlig blå pill med vit text. */
.app-sidebar .sidebar-system-entry {
    background: var(--vm-sidebar-system-grad) !important;
    border: 1px solid var(--vm-border-default) !important;
    color: var(--vm-sidebar-system-text) !important;
}
.app-sidebar .sidebar-system-entry.is-active,
.app-sidebar .sidebar-system-entry:hover {
    background: var(--vm-sidebar-system-grad-hover) !important;
    border-color: var(--vm-border-strong) !important;
    color: var(--vm-sidebar-system-text) !important;
}

/* Sidebar-bottom (Byggtid, Server, Logga ut). 2026-05-29: tokeniserat. */
.app-sidebar .sidebar-issues-link {
    background: var(--vm-bg-hover) !important;
    border: 1px solid var(--vm-border-subtle) !important;
    color: var(--vm-text-secondary) !important;
}
.app-sidebar .sidebar-issues-link:hover {
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
    border-color: rgba(var(--vm-accent-rgb), 0.30) !important;
    color: var(--vm-accent, var(--vm-brand-primary)) !important;
}
.app-sidebar .sidebar-version-badge {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--vm-text-soft, #d0c9bd) !important;
}
.app-sidebar .sidebar-logout-link {
    color: var(--vm-text-muted, #a09888) !important;
}
.app-sidebar .sidebar-logout-link:hover {
    color: var(--vm-text, #f2efe8) !important;
}

/* ============================================================
   LOGIN-SIDA — gamla .login-* kontrast-plåster RIVNA (login-redesign 2026-06-01).
   Var !important-overrides för den mörka login-card-buggen (osynliga labels).
   Roten är nu fixad: login lyftes UR themeExempt (base.html) + byggdes om på
   fräscht vm-login-* namespace i auth/login.html (page-local <style>, VMDS-tokens).
   Inga globala login-regler behövs längre här.
   ============================================================ */

/* Flash-banner (2026-05-13: tokeniserad + max-width för premium-look).
   Tidigare fyllde stacken hela viewport-bredden på login-sidan vilket såg
   ut som en "industri-banner". Nu centered + max-width + accent-tint. */
.flash-stack {
    padding: 14px 24px !important;
    max-width: 720px !important;
    margin: 14px auto !important;
}
.flash {
    background: rgba(34, 197, 94, 0.16) !important;
    border: 1px solid rgba(34, 197, 94, 0.40) !important;
    color: var(--vm-state-ok) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}
.flash.flash-warning, .flash.flash-info {
    background: rgba(0, 112, 243, 0.18) !important;
    border-color: rgba(0, 112, 243, 0.40) !important;
    color: var(--vm-brand-light) !important;
}
.flash.flash-error, .flash.flash-danger {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.40) !important;
    color: var(--vm-state-critical) !important;
}

/* ============================================================
   v20260510-2200 GLOBAL TAB-PILLS + TOAST + ACCESS-VARIANTER
   Filter-pills (.vm-tab) + Toast (.vm-toast) + .access-stat--*
   ============================================================ */

/* ── Tab-pills (filter-knappar i toolbars) ────────────────── */
.vm-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.vm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--vm-border);
    background: var(--vm-panel);
    color: var(--vm-text-soft);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
    white-space: nowrap;
}
.vm-tab:hover {
    background: var(--vm-accent-soft);
    border-color: var(--vm-accent-glow);
    color: var(--vm-text);
}
.vm-tab.active,
.vm-tab.is-active {
    background: linear-gradient(135deg, var(--vm-accent), var(--vm-accent-strong));
    color: var(--vm-accent-fg);
    border-color: transparent;
    box-shadow: 0 2px 8px var(--vm-accent-glow);
}
.vm-tab--larm.active,
.vm-tab--larm.is-active {
    background: linear-gradient(135deg, var(--vm-danger), var(--vm-state-critical));
    color: #fff;
    box-shadow: 0 2px 8px rgba(220,38,38,0.28);
}
.vm-tab--oppen.active,
.vm-tab--oppen.is-active {
    background: linear-gradient(135deg, var(--vm-warning), var(--vm-state-warning));
    color: var(--vm-warning-fg);
    box-shadow: 0 2px 8px rgba(217,119,6,0.28);
}
.vm-tab--offline.active,
.vm-tab--offline.is-active {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
    box-shadow: 0 2px 8px rgba(107,114,128,0.28);
}
.vm-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,0.10);
    color: inherit;
}
.vm-tab.active .vm-tab-count,
.vm-tab.is-active .vm-tab-count { background: rgba(255,255,255,0.25); }

/* Tab-panel — show/hide-monstret for tab-grupper
   (FAS 13 Batch 7 — 2026-05-17, organisations-migration). Lyfter mt-panel display-toggle.
   Sidors JS togglar .active for att visa panel. Anv: <div class="vm-tab-panel active">.
   Unblocks: organisations/mt-panel + framtida tab-grupper. */
.vm-tab-panel {
  display: none;
}
.vm-tab-panel.active,
.vm-tab-panel.is-active {
  display: block;
}

/* FAS 13 batch 2-fix-2 (2026-05-17): tvinga vit text pa aktiv vm-tab.
   Hogre specificitet (body.app-shell + a.vm-tab.active) sa regeln vinner
   over allt utan att lita pa cascade-ordning. BUG 1: Per's screenshot
   visade "Alla"-tab utan synlig text efter batch 2 fas-T deploy. */
body.app-shell a.vm-tab.active,
body.app-shell a.vm-tab.is-active,
body.app-shell .vm-tab.active,
body.app-shell .vm-tab.is-active {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Toast (konsoliderat i FAS Z1, 2026-05-11) ────────────
   Definition flyttad till sektion 9 lägre ned i filen (rad ~3371).
   .vm-toast-stack containera definieras där tillsammans med Linear-stilen.
   ────────────────────────────────────────────────────────── */

/* ── Access toolbar-row (filter-rad ovanpå tabell) ───────── */
.access-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--vm-bg-soft);
    border-bottom: 1px solid var(--vm-border);
    flex-wrap: wrap;
}
.access-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--vm-border);
    margin: 0 2px;
}
.access-toolbar-spacer { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.access-toolbar .access-input,
.access-toolbar .access-select {
    width: auto;
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
}
.access-toolbar .access-input { width: 180px; }
.access-toolbar .btn-sm { height: 32px; font-size: 12px; }
.access-toolbar-meta {
    font-size: 11px;
    color: var(--vm-text-muted);
}

/* ── Access stat-varianter (warn/danger left-border) ─────── */
.access-stat--warning { border-left: 3px solid var(--vm-warning); }
.access-stat--danger  { border-left: 3px solid var(--vm-danger); }
.access-stat--warning .access-stat-value { color: var(--vm-warning); }
.access-stat--danger  .access-stat-value { color: var(--vm-danger); }

/* ── Plan-grupp-header (mellan tabell-grupper) ───────────── */
.access-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 6px;
    background: var(--vm-bg-soft);
    border-bottom: 1px solid var(--vm-border);
}
.access-group-header + .access-group-header { border-top: 1px solid var(--vm-border); }
.access-group-header-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vm-text-soft);
}
.access-group-header-meta {
    font-size: 11px;
    color: var(--vm-text-muted);
}
.access-group-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid;
    line-height: 1.4;
}
.access-group-pill--danger {
    color: var(--vm-danger);
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.25);
}
.access-group-pill--warning {
    color: var(--vm-warning);
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.25);
}

/* ── Category-pill (i tabellrader) ───────────────────────── */
.access-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: var(--vm-text-soft);
    border: 1px solid var(--vm-border);
}

/* ── Empty-state inom panel (mid-grey, centrerat) ────────── */
.access-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--vm-text-muted);
}
.access-empty-state-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vm-text-soft);
    margin-bottom: 4px;
}
.access-empty-state-hint {
    font-size: 12px;
    margin-top: 4px;
    color: var(--vm-text-muted);
}

/* ── Row actions (tabell-knapp-grupp) ────────────────────── */
.access-row-actions { display: flex; gap: 5px; }
.access-row-actions .btn:disabled { opacity: 0.4; }
.access-row-actions .btn-danger-soft {
    background: var(--vm-danger-soft);
    color: var(--vm-danger);
    border: 1px solid rgba(224,133,133,0.30);
    font-size: 10px;
}
.access-row-actions .btn-danger-soft:hover {
    background: rgba(224,133,133,0.20);
    color: var(--vm-danger);
}

/* ── External-ref tabell-cell (monospace-esque, dim) ─────── */
.access-cell-ref {
    font-size: 11.5px;
    color: var(--vm-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   v20260510-2300 TYPOGRAPHY SHARPEN — sista ordet på rad-höjd
   ============================================================
   Per's "suddig text"-fix. Källa: vm_typography_pro.css definierar
   reglerna, men inline-<style> i base_access.html kan vinna källordning.
   Här upprepar vi de KRITISKA reglerna sist i kedjan med !important
   så att inget kan slå dem.
   ============================================================ */

/* KPI-värden — Per's referensbild: stora skarpa siffror "2 0 1 3 1 3 1 6"
   Font-size UTAN !important så inline style="font-size:.88rem" (verktyg-kort
   i access/index.html line 242/247/252) kan vinna med specificitet. */
.access-stat-value,
.access-stat strong,
.access-grid-2 .access-stat strong,
.access-grid-3 .access-stat strong,
.access-grid-4 .access-stat strong,
.vm-kpi-value, .vm-stat-value,
.ap-kpi-val,
[class*="kpi-val"],
.lux-kpi-value, .at-kpi-value {
    font-size: 1.75rem;
    font-weight: 900 !important;
    color: var(--vm-text) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Eyebrows / section-labels — uppercase 800 weight */
.access-stat-label,
.access-section-label,
.ap-section-label,
.ap-kpi-lbl,
.vm-eyebrow, .vm-admin-eyebrow,
.at-hero-eyebrow, .at-panel-eyebrow,
.section-label, .subsection-label,
.ops-kpi-label, .lux-kpi-label {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--vm-text-muted) !important;
    font-size: 0.68rem !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Sidotitel + panel-rubriker — INGEN shadow, skarpa */
h1, .vm-admin-title, .access-page-title,
h2, .vm-section-title,
h3, .vm-panel-title,
.access-panel-header h3, .access-panel-header h4 {
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Tabellhuvuden globalt — TID / PERSON / DÖRR / STATUS / BETECKNING */
.access-table thead th,
.vm-table thead th,
table thead th {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.72rem !important;
    color: var(--vm-text-muted) !important;
    text-shadow: none !important;
}

/* Knappar — alla — ingen blur */
button, .btn, .access-btn, .vm-btn,
[class*="-btn"]:not(.dp-btn) {
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Admin-glow neutralisering (admin_command_center.css blå skugga) */
body[data-path^="/admin"] .module-hero h1,
body[data-path^="/admin"] .module-hero-copy h1,
body[data-path^="/admin"] .btn-primary,
body[data-path^="/admin"] .access-btn-primary,
body[data-path^="/admin"] .access-tab-link.active,
body[data-path^="/admin"] .users-tab.active,
body[data-path^="/admin"] .tab-link.active,
body[data-path^="/admin"] .lux-kpi-link:hover {
    text-shadow: none !important;
}

/* Ops-shell command-style — neutralisera gradient-shadow på text */
.ops-shell[data-style="command"] .ops-card-title,
.ops-shell[data-style="command"] .ops-kpi-value,
.ops-shell[data-style="command"] .ops-popup-title,
.cc-modal-title {
    text-shadow: none !important;
}

/* ============================================================================
   ACCESS-PATTERNS UNIVERSAL — Per's reference design (2026-05-10)
   ============================================================================
   /admin/access vald som DESIGN-REFERENS för hela Vision Manager.
   Alla .access-* patterns extraherade till generiska .vm-* så att hela
   systemet kan använda samma visuella språk.

   Ursprung:
     - app/templates/admin/access/base_access.html (rad 4-75 <style>)
     - app/templates/admin/access/index.html (KPI-staplar, panels, snabblänkar)

   Alla värden använder var(--vm-*) tokens — inga hardkodade hex.
   .access-* fortsätter fungera (styrs i sina egna template-style-block).
   ============================================================================ */

/* ── 1. STAT-CARD ─────────────────────────────────────────────────────────── */
.vm-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--vm-border);
    background: linear-gradient(180deg, var(--vm-panel) 0%, var(--vm-bg-soft) 100%);
}
.vm-stat-label {
    color: var(--vm-text-muted);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    margin-bottom: 4px;
}
.vm-stat-value {
    color: var(--vm-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}

/* ── 2. PANEL-CARD ────────────────────────────────────────────────────────── */
.vm-panel-card {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--vm-border);
    background: linear-gradient(180deg, var(--vm-panel) 0%, var(--vm-bg-subtle) 100%);
}
.vm-panel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.vm-panel-card-title,
.vm-panel-card-header h3,
.vm-panel-card-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--vm-text);
    line-height: 1.2;
}
.vm-panel-card-header p { display: none; }

/* ── 3. GRID + STACK-TIGHT ────────────────────────────────────────────────── */
/* OBS: .vm-stack finns redan i vm_compact_admin.css (flex-column, gap)
        .vm-list finns redan ovan som row-list-komponent.
   .vm-stack-tight = den tighta access-stack-varianten (10px gap). */
.vm-stack-tight {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-grid {
    display: grid;
    gap: 10px;
}
.vm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .vm-grid-2, .vm-grid-3, .vm-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ── 4. EMPTY-STATE / PLACEHOLDER ─────────────────────────────────────────── */
.vm-empty-state {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--vm-border);
    background: linear-gradient(180deg, var(--vm-panel) 0%, var(--vm-bg-subtle) 100%);
    color: var(--vm-text-muted);
}
.vm-empty-state strong {
    display: block;
    color: var(--vm-text);
    margin-bottom: 3px;
    font-size: 0.76rem;
}
.vm-empty-state--dashed {
    border-style: dashed;
    background: var(--vm-bg-subtle);
}

/* ── 5. INLINE-LÄNK (guld + arrow) ────────────────────────────────────────── */
.vm-link-inline {
    color: var(--vm-accent);
    text-decoration: none;
    font-weight: 700;
    transition: color var(--vm-trans-fast);
}
.vm-link-inline:hover {
    color: var(--vm-accent-hover);
}
.vm-link-inline::after {
    content: " \2192";
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity var(--vm-trans-fast), transform var(--vm-trans-fast);
    display: inline-block;
}
.vm-link-inline:hover::after {
    opacity: 1;
    transform: translateX(2px);
}

/* ── 6. STATUS-BADGE ──────────────────────────────────────────────────────── */
.vm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 760;
    border: 1px solid var(--vm-border);
    background: var(--vm-panel);
    color: var(--vm-text-soft);
    white-space: nowrap;
}
.vm-badge--success {
    background: var(--vm-success-soft);
    color: var(--vm-success);
    border-color: rgba(110,198,141,0.30);
}
.vm-badge--warning {
    background: var(--vm-warning-soft);
    color: var(--vm-accent);
    border-color: rgba(var(--vm-accent-rgb), 0.30);
}
.vm-badge--danger {
    background: var(--vm-danger-soft);
    color: var(--vm-danger);
    border-color: rgba(224,133,133,0.30);
}
.vm-badge--muted { color: var(--vm-text-soft); }
.vm-badge--info {
    background: var(--vm-info-soft);
    color: var(--vm-info);
    border-color: rgba(106,169,214,0.30);
}

/* ── 7. INLINE-META / TOOLBAR-ROW ─────────────────────────────────────────── */
.vm-toolbar-row,
.vm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vm-toolbar-row--between { justify-content: space-between; }
.vm-toolbar-row--end     { justify-content: flex-end; }

/* ── 8. KV-ROW (label/value pairs) ────────────────────────────────────────── */
.vm-kv {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-kv-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vm-border);
}
.vm-kv-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.vm-kv-row > .vm-kv-label,
.vm-kv-row > dt {
    color: var(--vm-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}
.vm-kv-row > .vm-kv-value,
.vm-kv-row > dd {
    color: var(--vm-text);
    font-size: 0.82rem;
    margin: 0;
}

@media (max-width: 980px) {
    .vm-kv-row { grid-template-columns: 1fr; }
}

/* ── 9. SECTION-LABEL (eyebrow för sektion-rubriker) ──────────────────────── */
/* OBS: .vm-eyebrow finns redan ovan — generisk eyebrow.
        .vm-section-label = access-modulens tightare variant
        ("STATISTIK / VERKTYG / SNABBLÄNKAR"-stil). */
.vm-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vm-text-muted);
    margin-bottom: 2px;
    line-height: 1;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
}

/* ── 10. QUICK-LINK CARDS ─────────────────────────────────────────────────── */
.vm-quick-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.vm-quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--vm-panel) 0%, var(--vm-bg-soft) 100%);
    border: 1px solid var(--vm-border);
    border-radius: 9px;
    text-decoration: none;
    color: var(--vm-text);
    font-size: 0.8rem;
    font-weight: 700;
    transition: border-color var(--vm-trans-fast),
                box-shadow var(--vm-trans-fast),
                transform var(--vm-trans-fast);
}
.vm-quick-link:hover {
    border-color: var(--vm-accent);
    box-shadow: 0 2px 8px var(--vm-accent-soft);
    transform: translateY(-1px);
}
.vm-quick-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--vm-text);
}
/* Semantic + access-legacy färg-aliaser */
.vm-quick-link-icon--accent,
.vm-quick-link-icon--blue   { background: var(--vm-accent-soft);  color: var(--vm-accent); }
.vm-quick-link-icon--success,
.vm-quick-link-icon--green  { background: var(--vm-success-soft); color: var(--vm-success); }
.vm-quick-link-icon--warning,
.vm-quick-link-icon--orange { background: var(--vm-warning-soft); color: var(--vm-warning); }
.vm-quick-link-icon--info,
.vm-quick-link-icon--purple { background: var(--vm-info-soft);    color: var(--vm-info); }
.vm-quick-link-icon--danger,
.vm-quick-link-icon--red    { background: var(--vm-danger-soft);  color: var(--vm-danger); }

.vm-quick-link-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.vm-quick-link-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vm-text);
    line-height: 1.2;
}
.vm-quick-link-subtitle {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--vm-text-muted);
    line-height: 1.25;
}

/* ── 11. PROGRESS-BAR ─────────────────────────────────────────────────────── */
.vm-progress {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    align-items: center;
    gap: 8px;
}
.vm-progress-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-progress-track {
    height: 8px;
    background: var(--vm-border);
    border-radius: 4px;
    overflow: hidden;
}
.vm-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--vm-accent);
    transition: width 0.6s var(--vm-ease);
    width: 0;
}
.vm-progress-bar--success { background: var(--vm-success); }
.vm-progress-bar--info    { background: var(--vm-info); }
.vm-progress-bar--warning { background: var(--vm-warning); }
.vm-progress-bar--danger  { background: var(--vm-danger); }

.vm-progress-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vm-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vm-progress-chart {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
@media (max-width: 980px) {
    .vm-progress { grid-template-columns: 90px 1fr 32px; }
}

/* ── 12. WARN-LIST (varningar & notiser — access/index.html) ──────────────── */
.vm-warn-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-warn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    border: 1px solid var(--vm-border);
    background: var(--vm-bg-subtle);
    color: var(--vm-text);
}
.vm-warn-item--warning,
.vm-warn-item--warn {
    background: var(--vm-warning-soft);
    border-color: rgba(var(--vm-accent-rgb), 0.30);
    color: var(--vm-warning);
}
.vm-warn-item--danger {
    background: var(--vm-danger-soft);
    border-color: rgba(224,133,133,0.30);
    color: var(--vm-danger);
}
.vm-warn-item--info {
    background: var(--vm-info-soft);
    border-color: rgba(106,169,214,0.30);
    color: var(--vm-info);
}
.vm-warn-item--ok,
.vm-warn-item--success {
    background: var(--vm-success-soft);
    border-color: rgba(110,198,141,0.30);
    color: var(--vm-success);
}
.vm-warn-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.vm-warn-text {
    flex: 1;
    min-width: 0;
}
.vm-warn-text strong { display: block; font-weight: 700; }
.vm-warn-text span   { font-size: 0.7rem; opacity: 0.75; }

.vm-warn-link {
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    opacity: 0.75;
    white-space: nowrap;
    transition: opacity var(--vm-trans-fast);
}
.vm-warn-link:hover { opacity: 1; }

/* ── 13. KPI-STRIP — sammanhängande horisontell stapel ────────────────────── */
/* OBS: .vm-kpi-grid finns redan ovan (Linear-stil 180px-min cells med
        sparkline + data-state-bar). .vm-kpi-strip = access-modulens tightare
        ap-kpi-grid (sammanhängande stapel med border-right mellan celler). */
.vm-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
    background: var(--vm-bg-elevated);
    border: 1px solid var(--vm-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--vm-shadow-1);
}
.vm-kpi-strip-item {
    background: transparent;
    border: none;
    border-right: 1px solid var(--vm-border-soft);
    border-radius: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    color: inherit;
    transition: background var(--vm-trans-fast);
}
.vm-kpi-strip-item:hover      { background: var(--vm-bg-hover); }
.vm-kpi-strip-item:last-child { border-right: none; }
.vm-kpi-strip-item--warn   { border-left: 5px solid var(--vm-warning); padding-left: 9px; }
.vm-kpi-strip-item--danger { border-left: 5px solid var(--vm-danger);  padding-left: 9px; }
.vm-kpi-strip-item--ok     { border-left: 5px solid var(--vm-success); padding-left: 9px; }

.vm-kpi-strip-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vm-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.vm-kpi-strip-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--vm-text-muted);
}
.vm-kpi-strip-sub {
    font-size: 0.68rem;
    color: var(--vm-text-soft);
    margin-top: 2px;
}
.vm-kpi-strip-item--warn   .vm-kpi-strip-value { color: var(--vm-warning); }
.vm-kpi-strip-item--danger .vm-kpi-strip-value { color: var(--vm-danger); }
.vm-kpi-strip-item--ok     .vm-kpi-strip-value { color: var(--vm-success); }

@media (max-width: 980px) {
    .vm-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vm-kpi-strip-item {
        border-bottom: 1px solid var(--vm-border-soft);
    }
}

/* ── 14. ACTIVITY-ROW (Senaste aktivitet — access/index.html) ─────────────── */
.vm-activity {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vm-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--vm-border-soft);
    font-size: 0.76rem;
}
.vm-activity-row:last-child { border-bottom: 0; }
.vm-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--vm-accent);
}
.vm-activity-dot--muted { background: var(--vm-text-faint); }
.vm-activity-dot--ok    { background: var(--vm-success); }
.vm-activity-dot--warn  { background: var(--vm-warning); }
.vm-activity-dot--alarm { background: var(--vm-danger); }

.vm-activity-main {
    flex: 1;
    color: var(--vm-text);
    min-width: 0;
}
.vm-activity-time {
    font-size: 0.66rem;
    color: var(--vm-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── BAKÅTKOMPATIBILITET ──────────────────────────────────────────────────── */
/* .access-* fortsätter fungera via base_access.html inline-<style>.
   När den dagen kommer att rensas: lägg ".access-stat, .vm-stat { ... }"
   ovanför varje vm-* selector så att .access-* mappar till vm-*. */

/* ============================================================================
   ADMIN UNIVERSAL BUTTON COMPAT  (v20260510-2300)
   ============================================================================
   Speglar .access-v3-btn-look (referens: /admin/access) över ALLA legacy-
   knappklasser på admin/integration/health/realtime. ETT block, tokeniserat,
   ingen template-ändring krävs. Skippar moderna .vm-btn + .access-v3-btn.
   ============================================================================ */
body[data-path^="/admin"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not([class*="map-"]):not(.theme-pill):not(.vm-segment-item):not(.sidebar-label--collapsible),
body[data-path^="/admin"] .btn:not(.vm-btn),
body[data-path^="/admin"] .action-btn,
body[data-path^="/admin"] a.btn:not(.vm-btn),
body[data-path^="/admin"] a.action-btn,
body[data-path^="/integration"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not(.vm-segment-item):not(.sidebar-label--collapsible),
body[data-path^="/integration"] .btn:not(.vm-btn),
body[data-path^="/integration"] .action-btn,
body[data-path^="/health"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not(.vm-segment-item):not(.sidebar-label--collapsible),
body[data-path^="/health"] .btn:not(.vm-btn),
body[data-path^="/realtime"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not(.vm-segment-item):not(.sidebar-label--collapsible),
body[data-path^="/realtime"] .btn:not(.vm-btn) {
    /* LARMDEL 2026-05-23 (Lärdom 30): :not(.vm-pill) tillagt så att VMDS-pillar
       som renderas som <button> (typ kategori-filter på /admin/alarm/handelser)
       behåller sin tinted vm-pill-* styling istället för admin-button-baseline. */
    padding: 7px 11px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--vm-bg-elevated);
    color: var(--vm-text);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

body[data-path^="/admin"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not([class*="map-"]):not(.theme-pill):not(.vm-segment-item):not(.sidebar-label--collapsible):hover,
body[data-path^="/admin"] .btn:not(.vm-btn):hover,
body[data-path^="/admin"] .action-btn:hover,
body[data-path^="/admin"] a.btn:not(.vm-btn):hover,
body[data-path^="/admin"] a.action-btn:hover,
body[data-path^="/integration"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not(.vm-segment-item):not(.sidebar-label--collapsible):hover,
body[data-path^="/integration"] .btn:not(.vm-btn):hover,
body[data-path^="/integration"] .action-btn:hover,
body[data-path^="/health"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not(.vm-segment-item):not(.sidebar-label--collapsible):hover,
body[data-path^="/health"] .btn:not(.vm-btn):hover,
body[data-path^="/realtime"] button:not(.vm-btn):not(.vm-pill):not(.modal-close-btn):not(.no-style):not(.vm-segment-item):not(.sidebar-label--collapsible):hover,
body[data-path^="/realtime"] .btn:not(.vm-btn):hover {
    background: linear-gradient(180deg, var(--vm-accent) 0%, var(--vm-accent-strong) 100%);
    color: var(--vm-modal-bg);
    border-color: var(--vm-accent-strong);
}

/* Variant: danger / error / reject keeps red identity on hover */
body[data-path^="/admin"] .btn-danger:hover,
body[data-path^="/admin"] .btn-error:hover,
body[data-path^="/admin"] .btn-reject:hover,
body[data-path^="/admin"] .action-btn.btn-danger:hover,
body[data-path^="/admin"] .action-btn.btn-error:hover,
body[data-path^="/integration"] .btn-danger:hover,
body[data-path^="/integration"] .action-btn.btn-danger:hover {
    background: var(--vm-danger);
    color: var(--vm-danger-fg);
    border-color: var(--vm-danger);
}

/* Variant: approve / success keeps green identity on hover */
body[data-path^="/admin"] .btn-approve:hover,
body[data-path^="/admin"] .btn-success:hover,
body[data-path^="/admin"] .action-btn.btn-approve:hover,
body[data-path^="/admin"] .action-btn.btn-success:hover,
body[data-path^="/integration"] .btn-approve:hover,
body[data-path^="/integration"] .btn-success:hover {
    background: var(--vm-success);
    color: var(--vm-success-fg);
    border-color: var(--vm-success);
}

/* path-override .btn-primary rivit i FAS C 2026-05-15 — konsoliderat
   till kanonisk definition överst i denna fil. */

/* Disabled state — works for all variants above */
body[data-path^="/admin"] button:disabled,
body[data-path^="/admin"] .btn:disabled,
body[data-path^="/admin"] .action-btn:disabled,
body[data-path^="/integration"] button:disabled,
body[data-path^="/integration"] .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
   ADMIN UNIVERSAL TABLE COMPAT
   Källa: .access-v3-table (rad 81-86 i _module_base.html)
   ============================================================================ */
body[data-path^="/admin"] table:not(.access-v3-table):not(.no-style),
body[data-path^="/integration"] table:not(.no-style),
body[data-path^="/health"] table:not(.no-style),
body[data-path^="/realtime"] table:not(.no-style) {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    background: var(--vm-modal-bg);
}
body[data-path^="/admin"] table:not(.access-v3-table):not(.no-style) thead th,
body[data-path^="/integration"] table:not(.no-style) thead th,
body[data-path^="/health"] table:not(.no-style) thead th,
body[data-path^="/realtime"] table:not(.no-style) thead th {
    padding: 7px 8px;
    text-align: left;
    background: var(--vm-bg-elevated);
    color: var(--vm-accent);
    border-right: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(var(--vm-accent-rgb), 0.20);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
}
body[data-path^="/admin"] table:not(.access-v3-table):not(.no-style) td,
body[data-path^="/integration"] table:not(.no-style) td,
body[data-path^="/health"] table:not(.no-style) td,
body[data-path^="/realtime"] table:not(.no-style) td {
    padding: 7px 8px;
    color: var(--vm-text);
    border-top: 1px solid rgba(255,255,255,0.05);
    vertical-align: top;
}
body[data-path^="/admin"] table:not(.access-v3-table):not(.no-style) tbody tr:nth-child(odd) td,
body[data-path^="/integration"] table:not(.no-style) tbody tr:nth-child(odd) td {
    background: rgba(255,255,255,0.02);
}
body[data-path^="/admin"] table:not(.access-v3-table):not(.no-style) tbody tr:hover td,
body[data-path^="/integration"] table:not(.no-style) tbody tr:hover td,
body[data-path^="/health"] table:not(.no-style) tbody tr:hover td,
body[data-path^="/realtime"] table:not(.no-style) tbody tr:hover td {
    background: rgba(var(--vm-accent-rgb), 0.10);
}
body[data-path^="/admin"] table:not(.access-v3-table):not(.no-style) a,
body[data-path^="/integration"] table:not(.no-style) a {
    color: var(--vm-accent);
    text-decoration: none;
}

/* ============================================================================
   ADMIN UNIVERSAL FORM INPUTS COMPAT
   Källa: .access-v3-form input/select/textarea (rad 95)
   ============================================================================ */
body[data-path^="/admin"] input[type="text"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="email"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="password"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="number"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="search"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="tel"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="url"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="date"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] input[type="time"]:not(.no-style):not(.vm-input),
body[data-path^="/admin"] select:not(.no-style):not(.vm-input),
body[data-path^="/admin"] textarea:not(.no-style):not(.vm-input),
body[data-path^="/integration"] input:not([type="checkbox"]):not([type="radio"]):not(.no-style):not(.vm-input),
body[data-path^="/integration"] select:not(.no-style):not(.vm-input),
body[data-path^="/integration"] textarea:not(.no-style):not(.vm-input) {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--vm-modal-bg);
    color: var(--vm-text);
    font-family: inherit;
    font-size: 0.88rem;
}
body[data-path^="/admin"] input[type="text"]:focus,
body[data-path^="/admin"] input[type="email"]:focus,
body[data-path^="/admin"] input[type="password"]:focus,
body[data-path^="/admin"] input[type="number"]:focus,
body[data-path^="/admin"] input[type="search"]:focus,
body[data-path^="/admin"] select:focus,
body[data-path^="/admin"] textarea:focus,
body[data-path^="/integration"] input:focus,
body[data-path^="/integration"] select:focus,
body[data-path^="/integration"] textarea:focus {
    outline: none;
    border-color: rgba(var(--vm-accent-rgb), 0.40);
    box-shadow: 0 0 0 2px rgba(var(--vm-accent-rgb), 0.15);
}
body[data-path^="/admin"] textarea:not(.no-style):not(.vm-input) {
    min-height: 84px;
    resize: vertical;
}

/* ============================================================================
   ADMIN UNIVERSAL CARD/PANEL/BOX COMPAT
   Källa: .access-v3-box, .access-v3-info (rad 76-79, 99)
   Endast generic .card/.panel/.box utan vm-prefix.
   ============================================================================ */
body[data-path^="/admin"] .card:not(.vm-card):not(.no-style),
body[data-path^="/admin"] .panel:not(.no-style),
body[data-path^="/admin"] .box:not(.no-style),
body[data-path^="/integration"] .card:not(.vm-card):not(.no-style),
body[data-path^="/integration"] .panel:not(.no-style),
body[data-path^="/health"] .card:not(.vm-card):not(.no-style),
body[data-path^="/realtime"] .card:not(.vm-card):not(.no-style) {
    background: var(--vm-modal-bg);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
}

/* ============================================================================
   ADMIN UNIVERSAL HEADER/TITLE COMPAT
   Källa: .access-v3-title, .access-v3-subtitle, .access-v3-head (rad 62-66)
   ============================================================================ */
body[data-path^="/admin"] h1:not(.no-style):not(.vm-h1),
body[data-path^="/integration"] h1:not(.no-style):not(.vm-h1),
body[data-path^="/health"] h1:not(.no-style):not(.vm-h1) {
    font-size: 1.24rem;
    font-weight: 800;
    color: var(--vm-text);
    margin: 0 0 4px;
}
body[data-path^="/admin"] h2:not(.no-style):not(.vm-h2),
body[data-path^="/integration"] h2:not(.no-style):not(.vm-h2) {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--vm-text);
    margin: 0 0 6px;
}
body[data-path^="/admin"] h3:not(.no-style):not(.vm-h3),
body[data-path^="/integration"] h3:not(.no-style):not(.vm-h3) {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vm-text);
    margin: 0 0 6px;
}

/* ============================================================================
   ADMIN UNIVERSAL BADGE/PILL COMPAT
   Källa: .access-v3-badge, .access-v3-pill (rad 67, 111)
   ============================================================================ */
body[data-path^="/admin"] .badge:not(.no-style):not(.vm-badge),
body[data-path^="/admin"] .pill:not(.no-style):not(.vm-pill),
body[data-path^="/admin"] .chip:not(.no-style),
body[data-path^="/integration"] .badge:not(.no-style):not(.vm-badge),
body[data-path^="/integration"] .pill:not(.no-style):not(.vm-pill) {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.30);
    background: rgba(var(--vm-accent-rgb), 0.08);
    color: var(--vm-accent);
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================================
   ADMIN UNIVERSAL TABS COMPAT
   Källa: .access-v3-tabs, .access-v3-subnav (rad 70-72, 105-107)
   ============================================================================ */
body[data-path^="/admin"] .tabs:not(.no-style) a,
body[data-path^="/admin"] .nav-tabs:not(.no-style) a,
body[data-path^="/admin"] .tab-list:not(.no-style) a,
body[data-path^="/integration"] .tabs:not(.no-style) a,
body[data-path^="/integration"] .nav-tabs:not(.no-style) a {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    background: rgba(255,255,255,0.02);
    color: var(--vm-text-soft);
    font-weight: 700;
    font-size: 0.85rem;
}
body[data-path^="/admin"] .tabs:not(.no-style) a:hover,
body[data-path^="/admin"] .nav-tabs:not(.no-style) a:hover,
body[data-path^="/integration"] .tabs:not(.no-style) a:hover {
    border-color: rgba(var(--vm-accent-rgb), 0.30);
    color: var(--vm-text);
}
body[data-path^="/admin"] .tabs:not(.no-style) a.active,
body[data-path^="/admin"] .nav-tabs:not(.no-style) a.active,
body[data-path^="/admin"] .tab-list:not(.no-style) a.active,
body[data-path^="/integration"] .tabs:not(.no-style) a.active {
    background: rgba(var(--vm-accent-rgb), 0.14);
    color: var(--vm-accent);
    border-color: rgba(var(--vm-accent-rgb), 0.40);
}


/* ============================================================
   ════════════════════════════════════════════════════════════
   FAS 2 — 9 NYA KOMPONENT-PRIMITIVER (2026-05-10 design-system v1)
   ════════════════════════════════════════════════════════════
   Alla token-driven, ärver från vm_tokens.css.
   ============================================================ */


/* ============================================================
   9. TOAST — temporary notification (top-right, auto-dismiss)
   Konsoliderat 2026-05-11 i FAS Z1: tidigare två definitioner
   (rad 2282 bottom-right + denna top-right) merge:de hit.
   Supporterar både .vm-toast-stack container OCH solo placering.
   Båda klass-konventioner stöds:
   - Ny:    .vm-toast .is-ok / .is-warn / .is-danger / .is-info
   - Legacy: .vm-toast.ok / .err / .loading / .show (bakåtkompat)
   ============================================================ */

/* Stack-container för flera toasts (positioneras top-right) */
.vm-toast-stack {
    position: fixed;
    top: var(--vm-space-5);
    right: var(--vm-space-5);
    z-index: var(--vm-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--vm-space-2);
    pointer-events: none;
    max-width: 420px;
}
.vm-toast-stack .vm-toast {
    /* När toast är inuti stack: ärv position från container */
    position: relative;
    top: auto;
    right: auto;
    pointer-events: auto;
}

.vm-toast {
    position: fixed;
    top: var(--vm-space-5);
    right: var(--vm-space-5);
    z-index: var(--vm-z-toast);
    min-width: 280px;
    max-width: 420px;
    padding: var(--vm-space-3) var(--vm-space-4);
    background: var(--vm-surface);
    border: var(--vm-border-w) solid var(--vm-border);
    border-left: 3px solid var(--vm-accent);
    border-radius: var(--vm-radius-sm);
    box-shadow: var(--vm-shadow-2);
    color: var(--vm-text);
    font-size: var(--vm-text-body);
    line-height: var(--vm-text-body-lh);
    display: flex;
    align-items: flex-start;
    gap: var(--vm-space-3);
    animation: vm-toast-in var(--vm-motion-base);
}
.vm-toast-title {
    font-weight: var(--vm-weight-semibold);
    color: var(--vm-text);
    margin: 0 0 2px;
}
.vm-toast-body {
    color: var(--vm-text-soft);
    font-size: var(--vm-text-small);
}
.vm-toast-close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--vm-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 1.1em;
    line-height: 1;
}
.vm-toast-close:hover { color: var(--vm-text); }

/* Nya klass-konventioner (semantic) */
.vm-toast.is-ok      { border-left-color: var(--vm-success); }
.vm-toast.is-warn    { border-left-color: var(--vm-warning); }
.vm-toast.is-danger  { border-left-color: var(--vm-danger);  }
.vm-toast.is-info    { border-left-color: var(--vm-info);    }

/* Legacy-klasser (bakåtkompat — door_panel.js, vm_guard_engine.js m.fl.) */
.vm-toast.ok      { border-left-color: var(--vm-success); }
.vm-toast.err     { border-left-color: var(--vm-danger);  }
.vm-toast.loading { border-left-color: var(--vm-accent);  }
.vm-toast.show    { /* no-op — vm-toast är synlig by default (Block B), .show var Block A:s "make visible" toggle */ }

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


/* ============================================================
   10. TOOLTIP — small floating label
   ============================================================ */
.vm-tooltip {
    position: absolute;
    z-index: var(--vm-z-tooltip);
    background: var(--vm-modal-bg);
    color: var(--vm-text);
    border: var(--vm-border-w) solid var(--vm-border-strong);
    border-radius: var(--vm-radius-xs);
    padding: 4px 8px;
    font-size: var(--vm-text-tiny);
    font-weight: var(--vm-weight-medium);
    line-height: 1.4;
    box-shadow: var(--vm-shadow-2);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--vm-motion-fast), transform var(--vm-motion-fast);
}
.vm-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   11. DROPDOWN — menu shown anchored to a trigger
   ============================================================ */
.vm-dropdown {
    position: relative;
    display: inline-block;
}
.vm-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    z-index: var(--vm-z-overlay);
    background: var(--vm-surface);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    box-shadow: var(--vm-shadow-2);
    padding: 4px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--vm-motion-fast), transform var(--vm-motion-fast);
}
.vm-dropdown.is-open .vm-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.vm-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--vm-space-2);
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--vm-text);
    font-size: var(--vm-text-body);
    text-align: left;
    cursor: pointer;
    border-radius: var(--vm-radius-xs);
    text-decoration: none;
}
.vm-dropdown-item:hover {
    background: var(--vm-surface-hover);
    color: var(--vm-accent);
}
.vm-dropdown-item:focus-visible {
    outline: none;
    box-shadow: var(--vm-focus-ring);
}
.vm-dropdown-divider {
    height: 1px;
    background: var(--vm-border);
    margin: 4px 0;
}


/* ============================================================
   12. SEARCH-INPUT — input with leading icon and clear-button
   ============================================================ */
.vm-search-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.vm-search-input input {
    width: 100%;
    height: var(--vm-control-h-md);
    padding: 0 36px 0 36px;
    background: var(--vm-bg-elevated);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-size: var(--vm-text-body);
    font-family: var(--vm-font-body);
    transition: border-color var(--vm-motion-fast), box-shadow var(--vm-motion-fast);
}
.vm-search-input input::placeholder {
    color: var(--vm-text-faint);
}
.vm-search-input input:focus {
    outline: none;
    border-color: var(--vm-accent);
    box-shadow: var(--vm-focus-ring);
}
.vm-search-input .vm-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vm-text-muted);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
}
.vm-search-input .vm-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--vm-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--vm-radius-xs);
}
.vm-search-input .vm-search-clear:hover {
    background: var(--vm-surface-hover);
    color: var(--vm-text);
}


/* ============================================================
   13. BREADCRUMB — page-hierarchy navigation
   ============================================================ */
.vm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--vm-space-1);
    font-size: var(--vm-text-small);
    color: var(--vm-text-muted);
    margin: 0;
    padding: 0;
    list-style: none;
}
.vm-breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
.vm-breadcrumb-item a {
    color: var(--vm-text-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--vm-radius-xs);
    transition: color var(--vm-motion-fast), background var(--vm-motion-fast);
}
.vm-breadcrumb-item a:hover {
    color: var(--vm-accent);
    background: var(--vm-accent-soft);
}
.vm-breadcrumb-separator {
    margin: 0 4px;
    color: var(--vm-text-faint);
    user-select: none;
}
.vm-breadcrumb-item.is-current {
    color: var(--vm-text);
    font-weight: var(--vm-weight-medium);
    padding: 2px 6px;
}


/* ============================================================
   14. PAGINATION — page-number control
   ============================================================ */
.vm-pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--vm-text-small);
}
.vm-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: var(--vm-border-w) solid transparent;
    border-radius: var(--vm-radius-xs);
    color: var(--vm-text-soft);
    font-size: var(--vm-text-small);
    font-weight: var(--vm-weight-medium);
    cursor: pointer;
    transition: background var(--vm-motion-fast), border-color var(--vm-motion-fast), color var(--vm-motion-fast);
}
.vm-pagination-btn:hover {
    background: var(--vm-surface-hover);
    color: var(--vm-text);
}
.vm-pagination-btn.is-active {
    background: var(--vm-accent-soft);
    border-color: var(--vm-accent);
    color: var(--vm-accent);
}
.vm-pagination-btn:disabled,
.vm-pagination-btn[aria-disabled="true"] {
    opacity: var(--vm-opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}
.vm-pagination-ellipsis {
    color: var(--vm-text-faint);
    padding: 0 4px;
}


/* ============================================================
   15. SPINNER — async loading indicator
   ============================================================ */
.vm-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--vm-border);
    border-top-color: var(--vm-accent);
    border-radius: 50%;
    animation: vm-spin 800ms linear infinite;
    vertical-align: middle;
}
.vm-spinner.is-sm { width: 14px; height: 14px; border-width: 2px; }
.vm-spinner.is-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes vm-spin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   16. ALERT — inline message block (with icon + dismiss)
   ============================================================ */
.vm-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--vm-space-3);
    padding: var(--vm-space-3) var(--vm-space-4);
    background: var(--vm-bg-subtle);
    border: var(--vm-border-w) solid var(--vm-border);
    border-left: 3px solid var(--vm-info);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-size: var(--vm-text-body);
    line-height: var(--vm-text-body-lh);
}
.vm-alert-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--vm-info);
    margin-top: 2px;
}
.vm-alert-body { flex: 1; }
.vm-alert-title {
    font-weight: var(--vm-weight-semibold);
    margin: 0 0 2px;
}
.vm-alert-text {
    color: var(--vm-text-soft);
    font-size: var(--vm-text-small);
    margin: 0;
}
.vm-alert.is-ok      { border-left-color: var(--vm-success); background: var(--vm-success-soft); }
.vm-alert.is-ok .vm-alert-icon { color: var(--vm-success); }
.vm-alert.is-warn    { border-left-color: var(--vm-warning); background: var(--vm-warning-soft); }
.vm-alert.is-warn .vm-alert-icon { color: var(--vm-warning); }
.vm-alert.is-danger  { border-left-color: var(--vm-danger);  background: var(--vm-danger-soft);  }
.vm-alert.is-danger .vm-alert-icon { color: var(--vm-danger); }
.vm-alert.is-info    { border-left-color: var(--vm-info);    background: var(--vm-info-soft);    }
.vm-alert-close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--vm-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 1.1em;
    line-height: 1;
}
.vm-alert-close:hover { color: var(--vm-text); }


/* ============================================================
   ════════════════════════════════════════════════════════════
   FAS 4a — FACIT EXTRAHERAT (2026-05-10 design-system v1)
   Källa: app/templates/admin/access/_module_base.html rad 47-114
   Detta är /admin/access STIL-FACIT. Tas in i source så facit blir
   inte längre särfall — den följer samma laddning som alla andra.

   Klassnamn .access-v3-* bevaras temporärt (HARD-RULE beslut #3
   "Dubbla klasser temporärt"). Parallella .vm-* alias läggs in
   nedan så att FAS 4d (template-bytning) kan byta klassnamn utan
   att facit-look bryts. Cleanup i FAS 7e.
   ════════════════════════════════════════════════════════════
   ============================================================ */

.access-v3-shell{display:grid;grid-template-columns:238px minmax(0,1fr);gap:12px;min-height:calc(100vh - 170px)}
.access-v3-sidebar,.access-v3-panel,.access-v3-subbar,.access-v3-box,.access-v3-info{border: 1px solid var(--vm-border, rgba(255,255,255,0.07));border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.access-v3-sidebar{background: var(--vm-bg-elevated, var(--vm-modal-bg));overflow:hidden}
.access-v3-brand{padding:14px 14px 12px;border-bottom: 1px solid var(--vm-border, rgba(255,255,255,0.07));background: linear-gradient(180deg,var(--vm-bg-elevated, #23211c) 0%,var(--vm-modal-bg) 100%)}
.access-v3-brand h1{margin:0;font-size:1.04rem;color: var(--text, var(--vm-text));font-weight:800}
.access-v3-brand p{margin:4px 0 0;font-size:.77rem;color: var(--text-muted, var(--vm-text-muted, #a8a399));line-height:1.45}
.access-v3-menu{padding:8px;display:grid;gap:8px}
.access-v3-group{border: 1px solid rgba(255,255,255,0.06);border-radius:7px;overflow:hidden}
.access-v3-group-title{padding:7px 10px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color: var(--text-muted, var(--vm-text-muted, #a8a399));background: rgba(255,255,255,0.03);border-bottom: 1px solid rgba(255,255,255,0.06)}
.access-v3-link{display:block;padding:9px 11px;text-decoration:none;color: var(--text-soft, var(--vm-text-soft, #e0dcd2));font-weight:700;border-left: 4px solid transparent;background: transparent}
.access-v3-link + .access-v3-link{border-top: 1px solid rgba(255,255,255,0.04)}
.access-v3-link:hover{background: rgba(var(--vm-accent-rgb), 0.08);color: var(--text, var(--vm-text))}
.access-v3-link.active{border-left-color: var(--vm-accent);background: rgba(var(--vm-accent-rgb), 0.14);color: var(--vm-text)}
.access-v3-main{min-width:0;display:grid;gap:12px}
.access-v3-head{padding:10px 14px;background: linear-gradient(180deg,var(--vm-bg-elevated, #23211c) 0%,var(--vm-modal-bg) 100%)}
.access-v3-head-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.access-v3-title{font-size:1.24rem;font-weight:800;color: var(--text, var(--vm-text))}
.access-v3-subtitle{margin-top:3px;font-size:.81rem;color: var(--text-muted, var(--vm-text-muted, #a8a399))}
.access-v3-badges{display:flex;gap:6px;flex-wrap:wrap}
.access-v3-badge{display:inline-block;padding:3px 8px;border-radius:999px;border: 1px solid rgba(var(--vm-accent-rgb), 0.30);background: rgba(var(--vm-accent-rgb), 0.08);color: var(--vm-accent);font-size:11px;font-weight:700}
.access-v3-subbar{padding:8px 10px;background: var(--vm-modal-bg)}
.access-v3-subnav{display:flex;gap:6px;flex-wrap:wrap}
.access-v3-subnav a{padding:6px 10px;border-radius:6px;border: 1px solid rgba(255,255,255,0.07);text-decoration:none;background: rgba(255,255,255,0.02);color: var(--text-soft, var(--vm-text-soft, #e0dcd2));font-weight:700;font-size:.86rem}
.access-v3-subnav a:hover{border-color: rgba(var(--vm-accent-rgb), 0.30);color: var(--text, var(--vm-text))}
.access-v3-subnav a.active{background: linear-gradient(180deg,var(--vm-accent) 0%,var(--vm-accent-strong) 100%);color: var(--vm-modal-bg);border-color: var(--vm-accent-strong, var(--vm-brand-primary-hover))}
.access-v3-grid{display:grid;gap:12px}
.access-v3-grid.cols-3{grid-template-columns:minmax(300px,1.45fr) minmax(420px,2.2fr) minmax(270px,1.1fr)}
.access-v3-grid.cols-2{grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr)}
.access-v3-box{background: var(--vm-modal-bg);padding:0;overflow:hidden}
.access-v3-box-head{padding:8px 10px;border-bottom: 1px solid rgba(255,255,255,0.06);background: var(--vm-bg-elevated, #23211c);display:flex;justify-content:space-between;align-items:center;gap:8px}
.access-v3-box-head h2,.access-v3-box-head h3{margin:0;color: var(--text, var(--vm-text));font-size:.95rem}
.access-v3-box-body{padding:10px}
.access-v3-table-wrap{max-height:calc(100vh - 330px);overflow:auto;background: var(--vm-modal-bg);border-top: 1px solid rgba(255,255,255,0.06)}
.access-v3-table{width:100%;border-collapse:collapse;font-size:.84rem}
.access-v3-table thead th{padding:7px 8px;text-align:left;background: var(--vm-bg-elevated, #23211c);color: var(--vm-accent);position:sticky;top:0;z-index:1;border-right: 1px solid rgba(255,255,255,0.04);border-bottom: 1px solid rgba(var(--vm-accent-rgb), 0.20);text-transform:uppercase;letter-spacing:0.06em;font-size:.7rem}
.access-v3-table td{padding:7px 8px;color: var(--vm-text);border-top: 1px solid rgba(255,255,255,.05);vertical-align:top}
.access-v3-table tbody tr:nth-child(odd) td{background: rgba(255,255,255,.02)}
.access-v3-table tbody tr:hover td,.access-v3-table tbody tr.active td{background: rgba(var(--vm-accent-rgb), .10)}
.access-v3-table a{color: var(--vm-accent);text-decoration:none}
.access-v3-muted{color: var(--text-muted, var(--vm-text-muted, #a8a399))}
.access-v3-dark-muted{color: var(--text-soft, var(--vm-text-soft, #e0dcd2))}
.access-v3-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.access-v3-btn,.access-v3-actions button,.access-v3-actions a{padding:7px 11px;border-radius:6px;border: 1px solid rgba(255,255,255,0.08);background: var(--vm-bg-elevated, #23211c);color: var(--text, var(--vm-text));text-decoration:none;font-weight:700;cursor:pointer}
.access-v3-actions button:hover,.access-v3-actions a:hover,.access-v3-btn:hover{background: linear-gradient(180deg,var(--vm-accent) 0%,var(--vm-accent-strong) 100%);color: var(--vm-modal-bg);border-color: var(--vm-accent-strong, var(--vm-brand-primary-hover))}
.access-v3-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.access-v3-form .full{grid-column:1 / -1}
.access-v3-form label{display:grid;gap:4px;color: var(--text-soft, var(--vm-text-soft, #e0dcd2));font-size:.84rem;font-weight:700}
.access-v3-form input,.access-v3-form select,.access-v3-form textarea{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:6px;border: 1px solid rgba(255,255,255,0.08);background: var(--vm-modal-bg);color: var(--text, var(--vm-text))}
.access-v3-form textarea{min-height:84px;resize:vertical}
.access-v3-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.access-v3-checks label{display:flex;gap:6px;align-items:flex-start;color: var(--text-soft, var(--vm-text-soft, #e0dcd2));font-size:.84rem;font-weight:600}
.access-v3-info{background: var(--vm-bg-elevated, #23211c);padding:10px}
.access-v3-info h3{margin:0 0 8px;color: var(--text, var(--vm-text));font-size:.9rem}
.access-v3-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.access-v3-list li{padding:7px 8px;border: 1px solid rgba(255,255,255,0.06);border-radius:6px;background: rgba(255,255,255,0.02);color: var(--text, var(--vm-text));font-size:.84rem}
.access-v3-list li small{display:block;color: var(--text-muted, var(--vm-text-muted, #a8a399));margin-top:2px}
.access-v3-tabs{display:flex;gap:6px;flex-wrap:wrap}
.access-v3-tabs a{padding:6px 10px;border-radius:6px;border: 1px solid rgba(255,255,255,0.07);text-decoration:none;background: rgba(255,255,255,0.02);color: var(--text-soft, var(--vm-text-soft, #e0dcd2));font-weight:700;font-size:.85rem}
.access-v3-tabs a:hover{border-color: rgba(var(--vm-accent-rgb), 0.30);color: var(--text, var(--vm-text))}
.access-v3-tabs a.active{background: linear-gradient(180deg,var(--vm-accent) 0%,var(--vm-accent-strong) 100%);color: var(--vm-modal-bg);border-color: var(--vm-accent-strong, var(--vm-brand-primary-hover))}
.access-v3-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.access-v3-kpi-item{padding:10px;border: 1px solid rgba(255,255,255,0.07);border-radius:8px;background: var(--vm-bg-elevated, #23211c);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03)}
.access-v3-kpi-item strong{display:block;font-size:1.2rem;color: var(--text, var(--vm-text))}
.access-v3-pill{display:inline-block;padding:2px 8px;border-radius:999px;background: rgba(var(--vm-accent-rgb), 0.10);border: 1px solid rgba(var(--vm-accent-rgb), 0.25);color: var(--vm-accent);font-size:11px;font-weight:700}
@media (max-width:1260px){.access-v3-grid.cols-3{grid-template-columns:1fr}.access-v3-grid.cols-2{grid-template-columns:1fr}}
@media (max-width:980px){.access-v3-shell{grid-template-columns:1fr}.access-v3-form,.access-v3-checks{grid-template-columns:1fr}}


/* ============================================================
   17. COMBOBOX — input with attached suggestion list
   ============================================================ */
.vm-combobox {
    position: relative;
    width: 100%;
}
.vm-combobox-input {
    width: 100%;
    height: var(--vm-control-h-md);
    padding: 0 var(--vm-space-3);
    background: var(--vm-bg-elevated);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-size: var(--vm-text-body);
    font-family: var(--vm-font-body);
    transition: border-color var(--vm-motion-fast), box-shadow var(--vm-motion-fast);
}
.vm-combobox-input:focus {
    outline: none;
    border-color: var(--vm-accent);
    box-shadow: var(--vm-focus-ring);
}
.vm-combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    z-index: var(--vm-z-overlay);
    background: var(--vm-surface);
    border: var(--vm-border-w) solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    box-shadow: var(--vm-shadow-2);
    padding: 4px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--vm-motion-fast), transform var(--vm-motion-fast);
}
.vm-combobox.is-open .vm-combobox-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.vm-combobox-option {
    padding: 6px 10px;
    color: var(--vm-text);
    font-size: var(--vm-text-body);
    cursor: pointer;
    border-radius: var(--vm-radius-xs);
}
.vm-combobox-option:hover,
.vm-combobox-option.is-active {
    background: var(--vm-accent-soft);
    color: var(--vm-accent);
}
.vm-combobox-empty {
    padding: var(--vm-space-3);
    color: var(--vm-text-faint);
    font-size: var(--vm-text-small);
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   FAS N polish (2026-05-11) — Premium color picker
   Linear/Stripe-stil custom färgväljare som ersätter <input type="color">.
   Komponent-logik i vm_color_picker.js.
   ════════════════════════════════════════════════════════════════ */

.vm-color-swatch {
    width: 40px;
    height: 40px;
    border-radius: var(--vm-radius-sm);
    border: 2px solid var(--vm-border);
    cursor: pointer;
    padding: 0;
    box-shadow: var(--vm-shadow-1), inset 0 0 0 2px var(--vm-bg-elevated);
    transition: border-color var(--vm-dur-fast) var(--vm-ease),
                box-shadow var(--vm-dur-fast) var(--vm-ease);
}
.vm-color-swatch:hover {
    border-color: var(--vm-accent);
}
.vm-color-swatch:focus-visible {
    outline: none;
    box-shadow: var(--vm-focus-ring), inset 0 0 0 2px var(--vm-bg-elevated);
}

.vm-color-popup {
    width: 280px;
    background: var(--vm-modal-bg);
    border: 1px solid var(--vm-border-strong);
    border-radius: var(--vm-radius-md);
    box-shadow: var(--vm-shadow-3);
    padding: var(--vm-space-4);
    z-index: var(--vm-z-modal);
    animation: vm-fade-in var(--vm-motion-base);
}

.vm-color-popup-area {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: var(--vm-radius-sm);
    cursor: crosshair;
    overflow: hidden;
    margin-bottom: var(--vm-space-3);
    /* Bakgrund sätts via JS som ren hue-färg */
}
.vm-color-popup-area-saturation {
    position: absolute; inset: 0;
    background: linear-gradient(to right, #fff, transparent);
    pointer-events: none;
}
.vm-color-popup-area-value {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000, transparent);
    pointer-events: none;
}
.vm-color-popup-area-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: none;
}

.vm-color-popup-hue {
    position: relative;
    width: 100%;
    height: 12px;
    border-radius: var(--vm-radius-pill);
    background: linear-gradient(to right,
        #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
        #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    cursor: pointer;
    margin-bottom: var(--vm-space-3);
}
.vm-color-popup-hue-cursor {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vm-border-strong);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.vm-color-popup-row {
    display: flex;
    align-items: center;
    gap: var(--vm-space-2);
    margin-bottom: var(--vm-space-3);
}
.vm-color-popup-preview {
    width: 32px;
    height: 32px;
    border-radius: var(--vm-radius-sm);
    border: 1px solid var(--vm-border);
    flex-shrink: 0;
}
.vm-color-popup-hex {
    flex: 1;
    height: 32px;
    padding: 0 var(--vm-space-2);
    background: var(--vm-bg-subtle);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-family: var(--vm-font-mono);
    font-size: var(--vm-text-small);
    text-transform: uppercase;
    outline: none;
}
.vm-color-popup-hex:focus {
    border-color: var(--vm-accent);
}
.vm-color-popup-reset {
    width: 32px;
    height: 32px;
    background: var(--vm-bg-subtle);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text-soft);
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vm-color-popup-reset:hover {
    color: var(--vm-accent);
    border-color: var(--vm-accent);
}

.vm-color-popup-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--vm-space-1);
}
.vm-color-popup-swatch {
    width: 100%;
    height: 28px;
    border-radius: var(--vm-radius-xs);
    border: 1px solid var(--vm-border);
    cursor: pointer;
    padding: 0;
    transition: transform var(--vm-dur-fast) var(--vm-ease);
}
.vm-color-popup-swatch:hover {
    transform: scale(1.08);
    border-color: var(--vm-accent);
}

/* ════════════════════════════════════════════════════════════════
   FAS E batch 1 fixes (2026-05-11) — stat/sidebar-link rules som
   saknades efter migration access-v3-kpi-item → vm-stat och
   access-v3-link → vm-sidebar-link.
   ════════════════════════════════════════════════════════════════ */

/* .vm-stat — KPI tile (siffra + label under) */
.vm-stat {
    display: flex;
    flex-direction: column;
    gap: var(--vm-space-1);
    padding: var(--vm-card-padding-tight);
    background: var(--vm-panel);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius-md);
    box-shadow: var(--vm-shadow-1);
    color: var(--vm-text);
    transition: border-color var(--vm-dur-fast) var(--vm-ease),
                box-shadow var(--vm-dur-fast) var(--vm-ease);
}
.vm-stat:hover {
    border-color: var(--vm-accent-tint-40);
}
.vm-stat strong {
    font-size: var(--vm-text-h1);
    font-weight: var(--vm-weight-black);
    color: var(--vm-text);
    line-height: 1.1;
    letter-spacing: var(--vm-letter-tight);
    font-variant-numeric: tabular-nums;
}
.vm-stat span,
.vm-stat .vm-stat-label {
    font-size: var(--vm-text-tiny);
    font-weight: var(--vm-weight-bold);
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--vm-letter-uppercase);
}

/* .vm-sidebar-link — sidebar navigation link */
.vm-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--vm-space-2);
    padding: var(--vm-space-2) var(--vm-space-3);
    color: var(--vm-text-soft);
    font-size: var(--vm-text-small);
    font-weight: var(--vm-weight-medium);
    text-decoration: none;
    border-radius: var(--vm-radius-sm);
    transition: background var(--vm-dur-fast) var(--vm-ease),
                color var(--vm-dur-fast) var(--vm-ease);
}
.vm-sidebar-link:hover {
    background: var(--vm-accent-tint-08);
    color: var(--vm-text);
}
.vm-sidebar-link.active,
.vm-sidebar-link[aria-current="page"] {
    background: var(--vm-accent-tint-14);
    color: var(--vm-accent);
    font-weight: var(--vm-weight-bold);
}

/* ════════════════════════════════════════════════════════════════
   FAS X (2026-05-11) — A11y utility-klasser
   Skip-link, screen-reader-only, universal focus-visible
   WCAG: 2.4.1 (skip-link), 4.1.2 (sr-only label), 2.4.7 (focus-visible)
   ════════════════════════════════════════════════════════════════ */

/* Skip-link: dold tills tab-fokus, hoppar förbi navigation */
.vm-skip-link {
    position: absolute;
    top: -100px;
    left: var(--vm-space-3);
    z-index: 9999;
    padding: var(--vm-space-2) var(--vm-space-4);
    background: var(--vm-accent);
    color: var(--vm-accent-fg);
    font-weight: 700;
    font-size: var(--vm-text-small);
    text-decoration: none;
    border-radius: var(--vm-radius-sm);
    box-shadow: var(--vm-shadow-2);
    transition: top 150ms var(--vm-ease);
}
.vm-skip-link:focus,
.vm-skip-link:focus-visible {
    top: var(--vm-space-3);
    outline: none;
    box-shadow: var(--vm-focus-ring);
}

/* Screen-reader-only: dolt visuellt men läses av AT (för labels, etc.) */
.vm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   FACIT POLISH (2026-05-13) — premium-detaljer
   ============================================================
   Subtila förbättringar som lyfter facit-stilen utan att skrika:
   1. Aktiv sidebar-link får mjuk accent-glow till vänster
   2. KPI-kort lyfter 1px på hover med subtil accent-glow
   3. Online/success-prickar pulserar mjukt (breath-animation)
   4. Button-hover liftar subtilt med accent-glow
   ============================================================ */

/* 1. Sidebar-aktiv accent-strip till vänster (2026-05-13 runda 3).
   FAS 13 Lager 1-fix 2026-05-17: .vm-sidebar-link.is-active borttagen
   från selectorn eftersom den OVERRIDE FAS 11 (VMDS-13) på rad 1118
   med !important + accent-färg istället för brand-primary. Legacy-
   klassen .sidebar-link.active behåller sin accent-strip för bakåtkompat. */
.sidebar-link.active,
.app-sidebar .sidebar-link.active {
    position: relative;
    background: rgba(var(--vm-accent-rgb), 0.10) !important;
}
.sidebar-link.active::before,
.app-sidebar .sidebar-link.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 3px !important;
    border-radius: 0 2px 2px 0 !important;
    background: var(--vm-accent) !important;
    box-shadow: 0 0 12px rgba(var(--vm-accent-rgb), 0.45) !important;
}

/* 2. KPI-kort hover-elevation + accent-glow
   2026-05-13 runda 3: utökat med faktiska klasser per Webb-Claude-audit.
   Unconditional (gäller alla modes) eftersom hover är universal UX-känsla. */
@media (prefers-reduced-motion: no-preference) {
    .lux-kpi-card,
    .at-kpi,
    .ap-kpi,
    .lab-kpi-cell,
    .vm-stat,
    .access-stat,
    .central-summary-card,
    .cs-summary-card {
        transition: transform 0.18s cubic-bezier(.16,1,.3,1),
                    box-shadow 0.18s cubic-bezier(.16,1,.3,1),
                    border-color 0.18s cubic-bezier(.16,1,.3,1);
    }
    .lux-kpi-card:hover,
    .at-kpi:hover,
    .ap-kpi:hover,
    .lab-kpi-cell:hover,
    .vm-stat:hover,
    .access-stat:hover,
    .central-summary-card:hover,
    .cs-summary-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.20),
                    0 0 0 1px rgba(var(--vm-accent-rgb), 0.20);
        border-color: rgba(var(--vm-accent-rgb), 0.40);
    }
}

/* 3. Online/success-prickar mjuk breath-puls (3s loop, subtle) */
@keyframes vm-status-breath {
    0%, 100% { opacity: 1.0; box-shadow: 0 0 0 0 transparent; }
    50%      { opacity: 0.85; box-shadow: 0 0 0 4px var(--vm-success-soft); }
}
@keyframes vm-accent-breath {
    0%, 100% { opacity: 1.0; box-shadow: 0 0 0 0 transparent; }
    50%      { opacity: 0.85; box-shadow: 0 0 0 4px var(--vm-accent-soft); }
}
@media (prefers-reduced-motion: no-preference) {
    .vm-dot-ok,
    .badge-success::before,
    .badge-online::before,
    .vm-pill.is-online .vm-pill-dot,
    .vm-pill.is-ok .vm-pill-dot,
    .cs-badge.online .cs-badge-dot {
        animation: vm-status-breath 3s ease-in-out infinite;
    }
    body[data-status-style="facit"] .vm-dot-ok,
    body[data-status-style="facit"] .badge-success::before,
    body[data-status-style="facit"] .badge-online::before,
    body[data-status-style="facit"] .vm-pill.is-online .vm-pill-dot,
    body[data-status-style="facit"] .vm-pill.is-ok .vm-pill-dot,
    body[data-status-style="facit"] .cs-badge.online .cs-badge-dot {
        animation: vm-accent-breath 3s ease-in-out infinite;
    }
}

/* 4. Primary-knapp hover-lift + accent-glow (facit-mode only) */
@media (prefers-reduced-motion: no-preference) {
    body[data-status-style="facit"] .btn-primary,
    body[data-status-style="facit"] .vm-btn-primary,
    body[data-status-style="facit"] .cs-btn-primary,
    body[data-status-style="facit"] .primary-btn,
    body[data-status-style="facit"] .access-btn-primary {
        transition: transform 0.15s cubic-bezier(.16,1,.3,1),
                    box-shadow 0.15s cubic-bezier(.16,1,.3,1),
                    background 0.15s cubic-bezier(.16,1,.3,1);
    }
    body[data-status-style="facit"] .btn-primary:hover,
    body[data-status-style="facit"] .vm-btn-primary:hover,
    body[data-status-style="facit"] .cs-btn-primary:hover,
    body[data-status-style="facit"] .primary-btn:hover,
    body[data-status-style="facit"] .access-btn-primary:hover {
        transform: translateY(-1px);
        background: var(--vm-brand-primary-hover);
        color: var(--vm-text-on-brand);
        box-shadow: 0 4px 14px rgba(var(--vm-accent-rgb), 0.40);
    }
}
.vm-sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Universal focus-visible på alla interaktiva element som saknar egen regel */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--vm-focus-ring);
}
input.is-error:focus-visible,
select.is-error:focus-visible,
textarea.is-error:focus-visible,
[aria-invalid="true"]:focus-visible {
    box-shadow: var(--vm-focus-ring-error);
}

/* === Q.3.5 (2026-05-16): Apple-touch — tabular-nums + scoped ease-out-expo === */
.vm-num,
[class*="kpi-value"],
[class*="bignum"],
.vm-table td[data-num],
.vm-events-table .vm-time,
.access-status-badge,
.sidebar-server-time-value,
[data-num="true"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.vm-btn, .vm-card, .vm-pill, .vm-tab,
.vm-btn-primary, .vm-btn-secondary, .vm-btn-ghost,
.access-tab-link, .vm-subnav-link,
.filter-pill, .btn-filter, .by-status-btn,
.btn-secondary, .btn-ghost, .btn-primary {
    transition: background 220ms cubic-bezier(.16, 1, .3, 1),
                border-color 220ms cubic-bezier(.16, 1, .3, 1),
                color 220ms cubic-bezier(.16, 1, .3, 1),
                transform 220ms cubic-bezier(.16, 1, .3, 1),
                box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}

/* === Q.5 (2026-05-16): Outlined Apple-system-stil för huvudsidans subnav
   Override:ar Q.3.2-A.3:s solid-blå BARA för .vm-subnav-link (huvudsida).
   Behåller solid på .access-tab-link, .pd-tab, .fb-tab m.fl. (modal-flikar).
   Per:s feedback: "blå text drunknar i blått" — vit text + blå border + tint bg = Apple-stil. === */
.vm-subnav-link,
a.vm-subnav-link {
    background: transparent !important;
    color: rgba(235, 240, 250, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}
.vm-subnav-link:not(.active):hover,
a.vm-subnav-link:not(.active):hover {
    background: rgba(74, 139, 214, 0.10) !important;
    border-color: rgba(74, 139, 214, 0.40) !important;
    color: rgba(235, 240, 250, 1.0) !important;
}
.vm-subnav-link.active,
a.vm-subnav-link.active {
    background: rgba(74, 139, 214, 0.18) !important;
    border-color: var(--vm-brand-primary) !important;
    color: #ffffff !important;
}


/* ============================================================
   [VMDS-16] ACCESS HELPERS
   ============================================================
   Lyfta ur base_access.html inline <style>-block 2026-05-19 (Batch 15, FAS 14.1).
   Delas av 24 child-templates som extender admin/access/base_access.html.
   Page-specific helpers (.imp-*, .pt-*, .ts-*) ligger fortfarande i respektive template.
   ============================================================ */

.access-module { display:flex; flex-direction:column; gap:10px; min-height:calc(100vh - 92px); }
.access-canvas { border: 1px solid var(--vm-border); border-radius:10px; overflow:hidden; background: linear-gradient(180deg, var(--panel, var(--vm-panel)) 0%, var(--vm-bg-subtle) 100%); }
.access-canvas-body { padding:10px 12px; }
.access-main-actions, .access-form-actions, .access-inline-meta, .access-tabs, .access-actions, .access-search-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.access-stack, .access-list, .access-kv, .access-grid, .access-legacy-sidebar { display:flex; flex-direction:column; gap:10px; }
.access-grid { display:grid; gap:10px; }
.access-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.access-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.access-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.access-panel, .access-stat, .access-list-item, .access-empty, .access-table-wrap, .access-legacy-body, .access-legacy-summary { border-radius:10px; }
.access-panel, .access-empty { padding:10px 12px; border: 1px solid var(--vm-border); background: linear-gradient(180deg, var(--panel, var(--vm-panel)) 0%, var(--vm-bg-subtle) 100%); }
.access-stat { padding:10px 12px; border: 1px solid var(--vm-border); background: linear-gradient(180deg, var(--panel, var(--vm-panel)) 0%, var(--vm-bg-soft) 100%); }
.access-list-item { padding:8px 10px; border: 1px solid var(--vm-border); background: linear-gradient(180deg, var(--panel, var(--vm-panel)) 0%, var(--vm-bg-subtle) 100%); }
.access-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.access-panel-header h3, .access-panel-header h4 { margin:0; font-size:0.9rem; font-weight:800; color: var(--text); }
.access-panel-header p { display:none; }
.access-form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.access-form-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
.access-form-group--full { grid-column:1 / -1; }
.access-label { color: var(--text-soft); font-size:0.74rem; font-weight:700; }
.access-input, .access-select, .access-textarea { width:100%; }
.access-textarea { min-height:88px; resize:vertical; }
.access-btn, .access-tab-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:700; }
.access-kv-row { display:grid; grid-template-columns:150px 1fr; gap:10px; align-items:start; padding-bottom:8px; border-bottom: 1px solid var(--vm-border); }
.access-kv-row:last-child { padding-bottom:0; border-bottom: 0; }
.access-table-wrap { overflow:auto; border: 1px solid var(--vm-border); background: var(--panel, var(--vm-panel)); }
.access-table { width:100%; min-width:760px; border-collapse:collapse; background: var(--panel, var(--vm-panel)); }
.access-table th, .access-table td { padding:9px 10px; text-align:left; border-bottom: 1px solid var(--vm-border); vertical-align:middle; font-size:0.8rem; }
.access-table th { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:800; color: var(--text-muted); background: color-mix(in srgb, var(--vm-bg-subtle) 88%, white 12%); }
.access-table tbody tr:hover td { background: rgba(var(--vm-accent-rgb), 0.07); }
.access-table a, .access-link-inline { color: var(--accent); text-decoration:none; font-weight:700; }
.access-status-badge, .access-pill, .access-legacy-count { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 8px; border-radius:999px; font-size:0.7rem; font-weight:760; border: 1px solid var(--vm-border); background: var(--panel, var(--vm-panel)); color: var(--text-soft); }
.access-status-badge--success { color: var(--vm-success); }
.access-status-badge--warning { color: var(--vm-warning); }
.access-status-badge--danger { color: var(--vm-danger); }
.access-status-badge--muted { color: var(--text-soft); }
.access-stat-label { color: var(--text-muted); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.12em; font-weight:800; margin-bottom:4px; }
.access-stat-value { color: var(--vm-accent); font-size:1rem; font-weight:800; }
.access-inline-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:2px 0 0; }
.access-inline-header h3 { margin:0; font-size:0.92rem; font-weight:800; color: var(--text); }
.access-inline-header-sub { display:none; }
.access-legacy-layout { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:10px; align-items:start; }
.access-legacy-sidebar { position:sticky; top:8px; }
.access-legacy-section { border: 1px solid var(--vm-border); border-radius:8px; background: var(--vm-bg-soft); overflow:hidden; box-shadow:none; }
.access-legacy-section[open] { background: var(--panel, var(--vm-panel)); }
.access-legacy-summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; background: linear-gradient(180deg, var(--panel, var(--vm-panel)) 0%, var(--vm-bg-subtle) 100%); }
.access-legacy-summary::-webkit-details-marker { display:none; }
.access-legacy-summary-copy { display:flex; align-items:center; gap:8px; min-width:0; }
.access-legacy-summary-copy strong { color: var(--text); font-size:0.76rem; line-height:1.15; }
.access-legacy-summary-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.access-legacy-chevron { width:8px; height:8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform:rotate(45deg); transition:transform .18s ease; margin-top:-1px; }
 details[open] > summary .access-legacy-chevron { transform:rotate(225deg); margin-top:2px; }
.access-legacy-body { padding:8px; border-top: 1px solid var(--vm-border); background: var(--panel, var(--vm-panel)); }
.access-legacy-body-note { color: var(--text-soft); font-size:0.72rem; line-height:1.3; margin-bottom:8px; }
.access-legacy-items { display:flex; flex-direction:column; gap:8px; }
.access-legacy-item { padding:8px; border: 1px solid var(--vm-border); border-radius:8px; background: var(--vm-bg-subtle); }
.access-legacy-item strong, .access-list-item strong { display:block; color: var(--text); margin-bottom:2px; font-size:0.76rem; }
.access-legacy-item span, .access-list-item span { display:none; }
.access-legacy-empty { border: 1px dashed var(--vm-border); border-radius:8px; padding:8px; background: var(--vm-bg-subtle, #2a2823); color: var(--text-muted); }
.access-legacy-empty strong { display:block; color: var(--text); margin-bottom:3px; font-size:0.76rem; }
.access-legacy-empty span { display:none; }
.access-legacy-note { display:none; }
@media (max-width:1200px) {
    .access-legacy-layout { grid-template-columns:1fr; }
    .access-legacy-sidebar { position:static; }
}
@media (max-width:980px) {
    .access-grid-2, .access-grid-3, .access-grid-4, .access-form-grid, .access-kv-row, .access-search-row { grid-template-columns:1fr; }
    .access-search-row { align-items:stretch; }
}

/* ── Cloud-service sync-banner ─────────────────────────────────────
   Visas på /admin/cloud_service när wg-status-dump-pipelinen är död.
   Klass-baserad toggle (Lärdom 31: aldrig inline display + hidden — inline
   maskar [hidden]-attributet och blockerar JS-toggling). */
.vm-cloud-sync-banner {
    display: none;
    margin-bottom: var(--vm-space-6, 24px);
    padding: 12px 16px;
    border-radius: var(--vm-radius-lg, 8px);
    background: rgba(255, 178, 54, 0.15);
    border: 1px solid rgba(255, 178, 54, 0.4);
    color: var(--vm-text-primary);
    gap: 12px;
    align-items: flex-start;
}
.vm-cloud-sync-banner.is-visible { display: flex; }
.vm-cloud-sync-banner-icon { font-size: 1.2rem; line-height: 1; }
.vm-cloud-sync-banner-title { font-weight: 600; margin-bottom: 4px; }
.vm-cloud-sync-banner-reason { font-size: 0.9rem; opacity: 0.85; }