/* ===========================================================
 * Admin-panel (super-admin) — skal-stilar (etapp 4 PR 2).
 *
 * Ersätter inline-styles + hex i app/admin/**. Token-driven —
 * inga råa hex. RBAC-logiken (getSuperAdminCtx, member-guards)
 * ligger oförändrad i route-handlers; detta är ren presentation.
 *
 * Färg-mappning (hex → tokens):
 *   #f9fafb / #f3f4f6      → var(--surface-page) / var(--surface-inset)
 *   #fff                   → var(--surface-card)
 *   #e5e7eb / #d1d5db      → var(--border)
 *   #111 / #1a202c         → var(--text-primary)
 *   #374151                → var(--text-body)
 *   #6b7280                → var(--text-secondary)
 *   #16a34a / #166534      → var(--success) / var(--success-deep)
 *   #dcfce7                → var(--success-soft)
 *   #ca8a04 / #92400e      → var(--warning) / var(--warning-deep)
 *   #fef3c7 / #fffbeb      → var(--warning-soft)
 *   #fcd34d                → var(--warning)
 *   #dc2626 / #991b1b      → var(--danger) / var(--danger-deep)
 *   #fee2e2 / #fef2f2      → var(--danger-soft)
 *   #fecaca                → var(--danger)
 *   #ea580c                → var(--warning-deep)  (pending-stat-accent)
 * =========================================================== */

/* ── Layout ── */
.admin-wrapper {
  min-height: 100vh;
  background: var(--surface-page);
}
.admin-loader {
  padding: var(--space-8);
  text-align: center;
}
.admin-nav {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
.admin-nav__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-nav__left {
  display: flex;
  align-items: center;
  /* ⚠️ Posterna är flikar och bär sin egen vaddering — mellanrummet är därför
     litet, inte space-6. Med nio poster behövdes luft mellan orden; med fem
     flikar gör vadderingen jobbet. */
  gap: 2px;
  flex-wrap: wrap;
}
.admin-nav__brand {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-right: var(--space-4);
}
.admin-nav__link {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: 9px 15px;
  /* ⚠️ Den aktiva postens streck ligger PÅ navigeringens egen underkant.
     Marginalen drar upp flikarna en pixel så strecken sammanfaller i stället
     för att ligga i två våningar. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* ⚠️ AKTIV ÄR --brand, INTE --success-deep. Grönt betyder "klart" i resten av
   plattformen; en markering av var man står är inte ett gott utfall. */
.admin-nav__link.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
/* ⚠️⚠️ RÄKNAREN VISAR BARA DET SOM KRÄVER NÅGOT AV DIG. Den är röd av samma
   skäl: den finns bara när något ligger och väntar.
   ⚠️ tabular-nums SÄTTS HÄR, på elementet självt. Egenskapen ärvs inte in i
   formulärkontroller (#930), och en badge som byter bredd när talet går från
   9 till 10 flyttar hela navigeringen. */
.admin-nav__rakn {
  font-size: 11.5px;
  font-weight: 650;
  background: var(--danger-soft);
  color: var(--danger-deep);
  border-radius: 999px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

/* ── Flikar (Kunder) ────────────────────────────────────────────────────── */
.admin-flikar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.admin-flik {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 12px;
  cursor: pointer;
  /* ⚠️ Flikarna kan bära tal (antal förfrågningar). Se kommentaren om #930
     ovan: en button ärver INTE tabular-nums, den måste få den själv. */
  font-variant-numeric: tabular-nums;
  min-height: var(--tap-target);
}
.admin-flik.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ── Regelvärde-index ───────────────────────────────────────────────────── */
.admin-vardelista { list-style: none; margin: 0; padding: 0; }
.admin-vardelista li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.admin-vardelista li:last-child { border-bottom: none; }
.admin-vardelank { color: var(--brand); font-weight: 600; text-decoration: none; }
.admin-vardelank:hover { text-decoration: underline; }
.admin-vardevad { color: var(--text-secondary); font-size: var(--fs-eyebrow); }
.admin-nav__back {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.admin-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* ── Rubriker ── */
.admin-rubrik {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: var(--space-5);
}
.admin-delrubrik {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* ── Kort + stat-grid ── */
.admin-kort {
  background: var(--surface-card);
  padding: var(--space-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-5);
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.admin-stat-kort {
  background: var(--surface-card);
  padding: var(--space-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.admin-stat-tal {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--text-primary);
}
.admin-stat-tal--pending { color: var(--warning-deep); }
.admin-stat-tal--danger  { color: var(--danger-deep); }
.admin-stat-tal--success { color: var(--success-deep); }
.admin-stat-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.admin-status-rad {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-inset);
  font-size: var(--fs-sm);
}
.admin-status-rad__val { font-weight: 500; }

@media (max-width: 600px) {
  .admin-stat-grid { grid-template-columns: 1fr; }
}

/* ── Requests-lista ── */
.admin-request-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.admin-request-kort {
  background: var(--surface-card);
  padding: var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.admin-request-namn { font-weight: 500; }
.admin-request-meta {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-top: 2px;
}
.admin-request-meddelande {
  font-size: var(--fs-sm);
  font-style: italic;
  margin-top: var(--space-2);
  color: var(--text-body);
}
.admin-request-hoger {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
.admin-request-datum {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}
.admin-request-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-request-knapp {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-eyebrow);
  min-height: var(--tap-target);
}
@media (max-width: 600px) {
  .admin-request-kort { flex-direction: column; }
  .admin-request-hoger {
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
  }
  .admin-request-actions { flex: 1; justify-content: flex-end; }
}
.admin-lank {
  color: var(--success-deep);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.admin-tom-text { color: var(--text-secondary); }

/* ── Användarlista (/admin/anvandare) ── */
.admin-anvandare-inaktiv {
  opacity: .55;
}
.admin-anvandare-overify {
  font-size: var(--fs-eyebrow);
  color: var(--warning-deep);
  margin-top: 2px;
}
.admin-anvandare-orgs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-anvandare-org {
  font-size: var(--fs-sm);
}
.admin-anvandare-roll {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}
.admin-anvandare-badge-inline {
  margin-left: var(--space-2);
}
.admin-anvandare-dl {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.admin-anvandare-dl > dt {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.admin-anvandare-dl > dd {
  margin: 0;
}
.admin-anvandare-not {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
}
.admin-anvandare-modul-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
}
.admin-anvandare-modul-lista .admin-checkbox-label {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .admin-anvandare-dl {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .admin-anvandare-dl > dt {
    margin-top: var(--space-2);
  }
}

/* ── Org-tabell ── */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-toolbar__right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.admin-select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  min-height: var(--tap-target);
  background: var(--surface-card);
  color: var(--text-primary);
}
.admin-sok {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  min-height: var(--tap-target);
  background: var(--surface-card);
  color: var(--text-primary);
  width: 280px;
  max-width: 100%;
}
.admin-sok:focus-visible,
.admin-select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Sorterbar th (matchar bokföring/anställda-mönstret). */
.admin-th-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--space-6) !important;
}
.admin-th-sortable:hover { color: var(--text-primary); }
.admin-th-sortable:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.admin-sort-indicator {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0;
  transition: opacity .12s ease;
  color: var(--text-secondary);
}
.admin-th-sortable:hover .admin-sort-indicator { opacity: .45; }
.admin-th-sortable[aria-sort] .admin-sort-indicator { opacity: 1; color: var(--info-deep); }

/* Klickbar rad (org-lista) + klickbart kort (requests-lista). */
.admin-rad-klickbar { cursor: pointer; }
.admin-rad-klickbar:hover { background: var(--surface-inset); }
.admin-rad-klickbar:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 600px) {
  .admin-sok { width: 100%; }
  .admin-toolbar__right { width: 100%; }
}
.admin-tabell-wrap {
  background: var(--surface-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.admin-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.admin-tabell th {
  text-align: left;
  padding: var(--space-3);
  background: var(--surface-page);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.admin-tabell tbody tr { border-bottom: 1px solid var(--surface-inset); }
.admin-tabell td { padding: var(--space-3); }
.admin-tabell td.admin-td-center {
  text-align: center;
  color: var(--text-secondary);
}
.admin-modul-pending { color: var(--warning); }
.admin-modul-approved { color: var(--success); margin-left: var(--space-2); }
.admin-modul-rejected { color: var(--danger); margin-left: var(--space-2); }

/* ── Status-badge ── */
.admin-badge {
  font-size: var(--fs-eyebrow);
  padding: 2px var(--space-2);
  border-radius: 4px;
}
.admin-badge--pending  { background: var(--warning-soft); color: var(--warning-deep); }
.admin-badge--approved { background: var(--success-soft); color: var(--success-deep); }
.admin-badge--rejected { background: var(--danger-soft);  color: var(--danger-deep); }
.admin-badge--legacy   { background: var(--surface-inset); color: var(--text-body); }
/* Super_admin-roll: distinkt token-färg som ej krockar med org-status-badges.
   --info (blå) signalerar privilegierad roll utan att blandas ihop med
   approved/rejected. */
.admin-badge--super    { background: var(--info-soft);   color: var(--info-deep);   font-weight: 600; }

/* ── Org-detalj ── */
.admin-tillbaka {
  background: none;
  border: none;
  color: var(--success-deep);
  font-size: var(--fs-sm);
  cursor: pointer;
  margin-bottom: var(--space-3);
  min-height: var(--tap-target);
}
.admin-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: var(--space-2);
  font-size: var(--fs-sm);
  margin: 0;
}
.admin-dt { color: var(--text-secondary); }
.admin-dd { margin: 0; }
.admin-dd--italic { font-style: italic; }

.admin-medlem-lista { list-style: none; padding: 0; margin: 0; }
.admin-medlem-rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-inset);
  cursor: pointer;
}
.admin-medlem-namn { font-weight: 500; }
.admin-medlem-email { font-size: var(--fs-eyebrow); color: var(--text-secondary); }
.admin-medlem-roll  { font-size: var(--fs-eyebrow); color: var(--text-secondary); }
.admin-badge--inaktiv {
  margin-left: var(--space-2);
  font-size: var(--fs-eyebrow);
  padding: 2px var(--space-2);
  border-radius: 4px;
  background: var(--danger-soft);
  color: var(--danger-deep);
}

.admin-modul-rad {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-inset);
}
.admin-modul-namn { font-weight: 500; font-size: var(--fs-sm); }
.admin-modul-not  { font-size: var(--fs-eyebrow); color: var(--text-secondary); }
.admin-modul-rejected-text { font-size: var(--fs-eyebrow); color: var(--danger); }
.admin-checkbox-spacer { width: 14px; }
.admin-modul-flex { flex: 1; }

.admin-sektion-divider {
  margin-top: var(--space-4);
  border-top: 1px solid var(--surface-inset);
  padding-top: var(--space-4);
}
.admin-chip-rad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.admin-form-group { margin-bottom: var(--space-3); }
.admin-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--text-body);
}
.admin-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.admin-fel { color: var(--danger); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.admin-knapp-rad { display: flex; gap: var(--space-2); }
.admin-knapp-rad--end { justify-content: flex-end; }
.admin-knapp-rad--wrap { flex-wrap: wrap; }

/* ── Knappar ── */
.admin-knapp-approve {
  background: var(--success);
  color: var(--surface-card);
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: var(--tap-target);
}
.admin-knapp-reject-toggle {
  background: var(--danger-soft);
  color: var(--danger-deep);
  border: 1px solid var(--danger);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  min-height: var(--tap-target);
}
.admin-knapp-reject {
  background: var(--danger);
  color: var(--surface-card);
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: var(--tap-target);
}
.admin-knapp-activate {
  background: var(--success);
  color: var(--surface-card);
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  cursor: pointer;
}
.admin-knapp-activate-small {
  background: var(--surface-card);
  color: var(--success-deep);
  border: 1px solid var(--success);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  cursor: pointer;
}
.admin-knapp-approve:disabled,
.admin-knapp-reject:disabled,
.admin-knapp-activate:disabled,
.admin-knapp-reject-toggle:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.admin-reject-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--danger-soft);
  border-radius: var(--radius);
}
.admin-input--mb { margin-bottom: var(--space-2); }

/* ── Modaler ── */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  /* Safe-area-padding: ger plats för mobil-webbläsarens URL-fält + notch.
     env(safe-area-inset-*) faller tillbaka till 0 på desktop. */
  padding: max(var(--space-4), env(safe-area-inset-top))
           max(var(--space-4), env(safe-area-inset-right))
           max(var(--space-4), env(safe-area-inset-bottom))
           max(var(--space-4), env(safe-area-inset-left));
}
.admin-modal-kort {
  background: var(--surface-card);
  padding: var(--space-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  /* 100dvh = dynamic viewport height — räknar bort mobil-webbläsarens
     URL-fält och tangentbord, så krysset i höger övre hörn aldrig
     hamnar bakom kromen. 100vh räknar bara den största viewporten,
     vilket är fel referens på mobil. */
  max-height: 90dvh;
  overflow-y: auto;
}
.admin-modal-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
  cursor: pointer;
}
.admin-input--modal { margin-bottom: var(--space-3); }

/* Member-modal + orgNr-modal varningsruta */
.admin-varning-box {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
/* Skarpare variant för orgNr-rättning (BFL-identitet, historiska sidoeffekter). */
.admin-varning-box--danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-deep);
}

/* Inline-länk i dl (Företagsuppgifter → "Rätta…"-knapp efter org-nr). */
.admin-lank--inline {
  background: none;
  border: none;
  color: var(--success-deep);
  font-size: var(--fs-eyebrow);
  cursor: pointer;
  margin-left: var(--space-2);
  text-decoration: underline;
  padding: 0;
}
.admin-lank--inline:hover { color: var(--success); }
.admin-lank--inline:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Read-only-värde i orgNr-modalen (skiljs från redigerbar input). */
.admin-readonly-fält {
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.admin-varning-box__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.admin-modul-checkboxar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.admin-modul-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.admin-member-meta { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.admin-tom-modul { font-size: var(--fs-eyebrow); color: var(--text-secondary); }

/* Farliga åtgärder-sektion i member-modal */
.admin-fara-sektion {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--danger);
}
.admin-fara-rubrik {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--danger-deep);
}
.admin-fara-text {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.admin-delete-confirm {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--danger-soft);
  border-radius: var(--radius);
  border: 1px solid var(--danger);
}
.admin-delete-confirm__text {
  font-size: var(--fs-eyebrow);
  margin: 0 0 var(--space-2);
  color: var(--danger-deep);
}

/* ── Abonnemangs-modul (PR 1) ─────────────────────────────────────────── */
.admin-abonn-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
/* ⚠️ Avtalstypens innebörd står under valet — en etikett utan förklaring sa
   ingenting om vad avtalet var. Den spänner över hela rutnätets rad så att
   texten får plats utan att trycka ihop de andra fälten. */
.admin-abonn-avtal {
  grid-column: 1 / -1;
}
.admin-abonn-avtal-innebord {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}
/* ⚠️ Priset står i mall-raderna. Noten ersätter det döda "Referenspris". */
.admin-abonn-prisnot {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}
.admin-abonn-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.admin-abonn-lines-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr 1fr;
  gap: var(--space-2);
}
.admin-abonn-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-abonn-toolbar h2 { margin: 0; }
.admin-abonn-info-rad {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-page);
  border-radius: var(--radius);
}
.admin-abonn-add-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-abonn-add-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}
.admin-abonn-status-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.admin-abonn-status-actions__buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.admin-abonn-meddelande {
  background: var(--success-soft);
  color: var(--success-deep);
}
.admin-abonn-modal {
  max-width: 720px;
}
.admin-abonn-back-knapp {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.admin-abonn-back-rad {
  margin-bottom: var(--space-4);
}
.admin-abonn-org-meta {
  color: var(--muted);
  margin-top: var(--space-1);
}
.admin-abonn-modal-close {
  background: none;
  border: none;
  font-size: var(--fs-xl, 24px);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.admin-abonn-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.admin-abonn-modal-title { margin: 0; }
.admin-abonn-modal-sub {
  color: var(--muted);
  margin-top: var(--space-1);
}
.admin-abonn-section-h4 { margin-top: var(--space-5); }
.admin-abonn-total-row { border-top: 2px solid var(--line); }
.admin-abonn-orgnr {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.admin-abonn-anteckningar { width: 100%; }
.admin-abonn-anteckningar-wrap {
  display: block;
  margin-top: var(--space-3);
}
.admin-abonn-form-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
}
.admin-abonn-utestaende {
  color: var(--warning-deep);
}
.admin-abonn-utestaende-cell { text-align: right; }
.admin-abonn-modal-fri-info {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-page);
  border-radius: var(--radius);
}
.admin-abonn-credit {
  color: var(--success-deep);
}
.admin-abonn-text-right { text-align: right; }
.admin-abonn-source-badge { font-size: var(--fs-eyebrow); }
.admin-abonn-tabell-kompakt { font-size: var(--fs-sm); }
.admin-abonn-rad-knapp-small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-eyebrow);
}
.admin-abonn-rad-knapp-tiny {
  padding: 2px var(--space-1);
  font-size: var(--fs-eyebrow);
}
.admin-abonn-warn { color: var(--warning-deep); }
.admin-abonn-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-abonn-link-row h2 { margin: 0; }
.admin-abonn-modal-radio-row {
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-3);
}

/* ── Avstämningsvy (/admin/abonnemang/avstamning) ── */
.admin-avst-overdue-dagar {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: var(--fs-eyebrow);
  color: var(--danger-deep);
  font-weight: 500;
}
.admin-avst-knapp {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-eyebrow);
}
.admin-avst-betald-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 140px;
}
.admin-avst-betald-form__knappar {
  display: flex;
  gap: var(--space-1);
}
.admin-avst-input-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-eyebrow);
  min-height: auto;
}


/* ═════════════════════════════════════════════════════════════════════════
   ABONNEMANGS-MODUL — MOBIL (≤ 600px)
   Tre saker: säkerhetsnät (ingen body-spräng), lista→kort-flip, modaler-fix.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Säkerhetsnät: admin-main spränger aldrig viewport ──────────────── */
  .admin-main { overflow-x: hidden; }

  /* ── Listan på /admin/abonnemang → kort-layout (inte tabell) ────────── */
  .admin-tabell-wrap { box-shadow: none; background: transparent; padding: 0; }
  .admin-tabell,
  .admin-tabell thead,
  .admin-tabell tbody,
  .admin-tabell tr,
  .admin-tabell td,
  .admin-tabell th { display: block; width: 100%; box-sizing: border-box; }
  .admin-tabell thead { display: none; }  /* dölj kolumnhuvuden */
  .admin-tabell tr {
    background: var(--surface-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .admin-tabell td {
    border: none;
    padding: var(--space-1) 0;
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
  }
  .admin-tabell td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
  }
  .admin-tabell td:first-child::before { display: none; }  /* primär rad utan label */
  .admin-tabell td:first-child {
    font-weight: 600;
    font-size: var(--fs-md);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    display: block;  /* primär cell utan flex */
  }

  /* ── Modaler på mobil: full bredd + krysset under URL-fält ──────────── */
  .admin-modal-overlay {
    /* På mobil: padding-top tar plats för URL-fältet via safe-area.
       padding-bottom tar plats för tangentbord/hem-knappen. */
    padding-top:    max(var(--space-2), env(safe-area-inset-top));
    padding-right:  max(var(--space-2), env(safe-area-inset-right));
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    padding-left:   max(var(--space-2), env(safe-area-inset-left));
    /* Topp-align (inte center) så modalen + krysset alltid syns direkt
       under URL-fältet, oavsett modalens höjd. */
    align-items: flex-start;
  }
  .admin-modal-kort,
  .admin-abonn-modal {
    max-width: 100%;
    width: 100%;
    /* 100dvh räknar bort URL-fältet; padding-buffer för marginal.
       Höjden krymper när URL-fältet poppar upp — krysset åker med. */
    max-height: calc(100dvh - var(--space-4));
    overflow-y: auto;
  }

  /* ── Form-grids staplar (override grid-template-columns från desktop) ── */
  .admin-abonn-form-grid,
  .admin-abonn-modal-grid,
  .admin-abonn-lines-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-2);
  }

  /* ── Toolbar (rubrik + knapp) staplar ───────────────────────────────── */
  .admin-toolbar,
  .admin-abonn-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .admin-toolbar__right {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  /* ── Knapp-rader wrappar fullbreddat ───────────────────────────────── */
  .admin-abonn-status-actions__buttons,
  .admin-abonn-add-actions {
    flex-direction: column;
    gap: var(--space-2);
  }
  .admin-abonn-status-actions__buttons > button,
  .admin-abonn-add-actions > button {
    width: 100%;
  }

  /* ── Inline form-rutor (datum, fri-månad, kreditbokning) full bredd ── */
  .admin-abonn-modal-fri-info {
    padding: var(--space-3);
  }
  .admin-abonn-modal-fri-info input,
  .admin-abonn-modal-fri-info select {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Modal-rubrik + close-knapp minskar gap ─────────────────────────── */
  .admin-abonn-modal-head {
    gap: var(--space-2);
  }

  /* ── Radio-rutor staplar ───────────────────────────────────────────── */
  .admin-abonn-modal-radio-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* ── Faktura-modalens rad-tabell (admin-abonn-tabell-kompakt) scrollar
       horisontellt INOM sin container (förbli tabell-form, inte kort) ── */
  .admin-abonn-tabell-kompakt {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .admin-abonn-tabell-kompakt thead { display: table-header-group; }
  .admin-abonn-tabell-kompakt tbody { display: table-row-group; }
  .admin-abonn-tabell-kompakt tr { display: table-row; background: transparent; box-shadow: none; padding: 0; margin: 0; }
  .admin-abonn-tabell-kompakt td,
  .admin-abonn-tabell-kompakt th {
    display: table-cell;
    width: auto;
    padding: var(--space-1) var(--space-2);
  }
  .admin-abonn-tabell-kompakt td::before,
  .admin-abonn-tabell-kompakt th::before { display: none; }

  /* ── Anteckningar (textarea + input) full bredd ─────────────────────── */
  .admin-abonn-anteckningar,
  .admin-input {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Stat-grid staplar (om inte redan via .admin-stat-grid) ─────────── */
  .admin-stat-grid { grid-template-columns: 1fr; }

  /* ── Footer-kort lite mindre padding ────────────────────────────────── */
  .admin-kort {
    padding: var(--space-3);
  }
}

/* ── Översiktens nyckeltal (facit v3) ───────────────────────────────────── */
/* ⚠️ Rutnätet är EN ram med 1 px mellanrum — korten delar linjer i stället för
   att ha varsin. Facits form: fyra rutor som hänger ihop. */
.admin-nyckeltal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.admin-nyckeltal > div { background: var(--surface-card); padding: 13px 16px; }
.admin-nyckeltal__rubrik { font-size: var(--fs-eyebrow); color: var(--text-secondary); margin-bottom: 3px; }
/* ⚠️ tabular-nums SÄTTS HÄR. Utan den hoppar talen i sidled när siffrorna
   ändras, och fyra rutor bredvid varandra ser skeva ut. */
.admin-nyckeltal__tal {
  font-size: 21px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.admin-nyckeltal__tal--fara { color: var(--danger-deep); }
.admin-nyckeltal__under { font-size: var(--fs-eyebrow); color: var(--text-secondary); margin-top: 2px; }
/* ⚠️ EGEN RÖD RUTA — det enda talet som säger att någon måste göra något. */
.admin-nyckeltal__atgard { background: var(--danger-soft); padding: 13px 16px; }

/* ── Åtgärdslistan ──────────────────────────────────────────────────────── */
.admin-atgardslista { display: flex; flex-direction: column; }
.admin-atgardsrad {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.admin-atgardsrad:last-child { border-bottom: none; }
.admin-atgardsrad__prick { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.admin-atgardsrad__prick--fara    { background: var(--danger-deep); }
.admin-atgardsrad__prick--varning { background: var(--warning-deep); }
.admin-atgardsrad__txt { flex: 1; min-width: 0; }
.admin-atgardsrad__txt b { font-weight: 650; }
.admin-atgardsrad__knapp {
  font-size: 11.5px;
  padding: 3px 8px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-atgardsrad__knapp:hover { border-color: var(--brand); color: var(--brand); }

/* ── Kundtabellen (facit v3) ────────────────────────────────────────────── */
.admin-kund-namn { font-weight: 650; }
/* ⚠️⚠️ GULMARKERINGEN ÄR INFORMATIONEN. Den ogranskade organisationen ligger i
   samma lista just för att man ska se den utan att leta — färgen är skälet till
   att raden inte behöver en egen sida. */
.admin-rad-ogranskad td { background: var(--warning-soft); }
.admin-rad-ogranskad:hover td { background: var(--warning-soft); }
.admin-lage {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.admin-lage--godkand   { background: var(--success-soft); color: var(--success-deep); }
.admin-lage--ogranskad { background: var(--warning-soft); color: var(--warning-deep); }
.admin-svag { color: var(--text-secondary); }
/* ⚠️ tabular-nums på TALEN. Klient- och användarantal står högerställda; utan
   den hoppar kolumnen i sidled mellan 9 och 10. */
.admin-tal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-lank { color: var(--brand); text-decoration: none; font-weight: 600; }
.admin-lank:hover { text-decoration: underline; }
.admin-ogranskade-notis {
  font-size: var(--fs-eyebrow);
  font-weight: 650;
  color: var(--warning-deep);
  background: var(--warning-soft);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
/* ⚠️ Flikens räknare — samma skäl som navigeringens: en button ärver INTE
   tabular-nums (#930). */
.admin-flik__rakn {
  margin-left: 7px;
  font-size: 11.5px;
  font-weight: 650;
  background: var(--danger-soft);
  color: var(--danger-deep);
  border-radius: 999px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

/* ── Faktureringens kundlista (facit v3) ────────────────────────────────── */
.admin-kort--tabell { padding: 0; overflow: hidden; }
.admin-filterrad {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-page);
}
/* ⚠️ tabular-nums ENSKILT på formulärkontrollerna — den ärvs INTE in i dem
   (#930), och ett filterfält som byter bredd när man skriver siffror flyttar
   hela raden. */
.admin-filterrad .admin-select,
.admin-filterrad .admin-sok { font-variant-numeric: tabular-nums; }
.admin-filterrad .admin-sok { min-width: 200px; }

/* ⚠️⚠️ DET VÄNTANDE INTERVALLBYTET står BREDVID nuläget, inte i stället för
   det. Båda gäller — det ena i dag, det andra från nästa förnyelse. */
.admin-vantande {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Lägen i faktureringen — samma pillerform som kundlistans. */
.admin-lage--aktiv    { background: var(--success-soft); color: var(--success-deep); }
.admin-lage--gratisar { background: var(--brand-light);  color: var(--brand); }
.admin-lage--pausad   { background: var(--warning-soft); color: var(--warning-deep); }
.admin-lage--avslutad { background: var(--surface-inset); color: var(--text-secondary); }

/* ── Kundkortet (facit v3) ──────────────────────────────────────────────── */
.admin-kundtopp {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.admin-kundtopp__namn { font-size: 18px; font-weight: 650; }
/* ⚠️ tabular-nums — meta-raden bär org.nr och datum. */
.admin-kundtopp__meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.admin-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border);
}
.admin-rutnat > div { background: var(--surface-card); padding: 13px 16px; }
.admin-rutnat__rubrik {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.admin-rutnat__varde { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* ⚠️ Text-värden (avtalstyp, läge) är inte tal och ska inte skrikas lika högt. */
.admin-rutnat__varde--text { font-size: 14px; }
.admin-rutnat__under { font-size: var(--fs-eyebrow); color: var(--text-secondary); margin-top: 2px; }

/* ⚠️⚠️ VÄNTANDE ÄNDRINGAR — egen panel i blått, ritad bara när något väntar. */
.admin-vantpanel {
  background: var(--brand-light);
  border-top: 1px solid #c9dcf5;
  border-bottom: 1px solid #c9dcf5;
  padding: 11px 16px;
}
.admin-vantpanel__rubrik {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--brand);
  margin-bottom: 6px;
}
.admin-vantrad {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  padding: 5px 0;
  flex-wrap: wrap;
}
.admin-vantrad__datum { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }

.admin-kortrubrik {
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-page);
  display: flex;
  align-items: center;
}
.admin-kortrubrik h3 { font-size: 14px; font-weight: 650; margin: 0; }

.admin-logg { display: flex; flex-direction: column; }
.admin-loggrad {
  display: flex;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.admin-loggrad:last-child { border-bottom: none; }
/* ⚠️ Ikraftträdda rader har egen bakgrund — det som GÄLLER ska gå att skilja
   från det som är beslutat men ännu inte inträffat. */
.admin-loggrad--ikraft { background: var(--surface-page); }
.admin-loggrad__dat {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  width: 88px;
  flex: none;
}
.admin-loggrad__vad { flex: 1; min-width: 0; }
.admin-loggrad__vad b { font-weight: 650; }
.admin-loggrad__skal {
  color: var(--text-secondary);
  display: block;
  font-size: var(--fs-eyebrow);
  margin-top: 1px;
}
.admin-loggrad__vem {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: var(--fs-eyebrow);
}

.admin-fakturarad {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.admin-fakturarad:last-child { border-bottom: none; }
.admin-fakturarad__nr { font-variant-numeric: tabular-nums; font-weight: 650; width: 76px; flex: none; }
.admin-fakturarad__per { color: var(--text-secondary); flex: 1; min-width: 0; }
.admin-fakturarad__bel { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.admin-fst {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.admin-fst--betald    { background: var(--success-soft); color: var(--success-deep); }
.admin-fst--skickad   { background: var(--brand-light);  color: var(--brand); }
.admin-fst--forfallen { background: var(--danger-soft);  color: var(--danger-deep); }
.admin-fst--utkast    { background: var(--surface-inset); color: var(--text-secondary); }
.admin-fst--fri       { background: var(--surface-inset); color: var(--text-secondary); }
.admin-kort-notis {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ── Kundkortets åtgärder och dialoger (facit v3) ───────────────────────── */
.admin-kundtopp__knappar {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-knapp {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
  min-height: var(--tap-target);
  /* ⚠️ #930: en button ärver INTE tabular-nums. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-knapp--fara { color: var(--danger-deep); border-color: var(--danger); }
.admin-vantrad__angra {
  margin-left: auto;
  font: inherit;
  font-size: var(--fs-eyebrow);
  color: var(--danger-deep);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  min-height: 28px;
  white-space: nowrap;
}
.admin-vantrad__angra:hover { text-decoration: underline; }

.admin-dialog { max-width: 640px; width: 100%; }
.admin-dialog__huvud { padding: 16px 18px 4px; }
.admin-dialog__huvud h3 { font-size: 15.5px; font-weight: 650; margin: 0 0 4px; }
.admin-dialog__huvud p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
.admin-dialog__kropp {
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.admin-dialog__kropp label { display: block; }
.admin-dialog__kropp .admin-input { width: 100%; }
.admin-dialog__rad { display: flex; gap: 11px; flex-wrap: wrap; }
.admin-dialog__rad > label { flex: 1; min-width: 150px; }
.admin-dialog__fot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-page);
}
.admin-etikett {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  display: block;
  margin-bottom: 4px;
}
/* ⚠️⚠️ FÖRHANDSVISNINGEN — dagarna utskrivna, summan avskild. Ett belopp man
   ser i förväg är ett beslut; ett man ser på fakturan efteråt är en
   överraskning. */
.admin-forhands {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-page);
  overflow: hidden;
}
.admin-forhands__rubrik {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--text-secondary);
  padding: 8px 12px 5px;
}
.admin-forhands__rad {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
  padding: 4px 12px;
}
.admin-forhands__rad span:last-child { font-weight: 600; }
.admin-forhands__dagar { color: var(--text-secondary); font-size: var(--fs-eyebrow); }
.admin-forhands__summa {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  margin-top: 5px;
  font-weight: 650;
  background: var(--surface-card);
}
.admin-konsekvens { font-size: var(--fs-sm); color: var(--warning-deep); margin: 0; }
.admin-konsekvens--bla { color: var(--brand); }

/* ── Körningar (facit v3) ───────────────────────────────────────────────── */
/* ⚠️⚠️ EN DÖD KÖRNING MARKERAS RÖD. Den som skummar listan ska se den utan att
   läsa varje rad — det är hela skälet till att loggen finns. */
.admin-rad-dog td { background: var(--danger-soft); }
.admin-dog-text { color: var(--danger-deep); font-weight: 650; white-space: nowrap; }
.admin-overhoppad { font-size: var(--fs-sm); }
.admin-overhoppad__kunder { color: var(--text-secondary); }

/* ── Regelvärden: tre grupper ───────────────────────────────────────────── */
/* ⚠️ Kortet är "platt" här: grupperna bär sina egna avgränsare, och en
   kort-vaddering runt dem hade gett två ramar om samma sak. */
.admin-kort--platt { padding: 0; overflow: hidden; }
.admin-grupprubrik {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--text-secondary);
  padding: 10px var(--space-4) 6px;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border);
}
.admin-vgrupp { display: flex; flex-direction: column; }
.admin-vrad {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.admin-vrad:last-child { border-bottom: none; }
.admin-vnamn { flex: 1; min-width: 0; }
.admin-vnamn b { font-weight: 650; display: block; }
.admin-vnamn span { color: var(--text-secondary); font-size: var(--fs-eyebrow); }
/* ⚠️ tabular-nums: årtalen ("senast 2026") ska inte hoppa i sidled. */
.admin-vsenast {
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ⚠️⚠️ FYRA LÄGEN MED FYRA FÄRGER — och det är hela poängen med grupperingen.
   Samma färg på "2027 saknas" och "Kontrollera" hade påstått att vi vet lika
   mycket om båda. */
.admin-vst {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-vst--aktuell  { background: var(--success-soft); color: var(--success-deep); }
.admin-vst--saknas   { background: var(--danger-soft);  color: var(--danger-deep); }
.admin-vst--kontroll { background: var(--warning-soft); color: var(--warning-deep); }
/* ⚠️ Grått, inte rött: ett väntelage på Skatteverket kan ingen här åtgärda. */
.admin-vst--vantar   { background: var(--surface-inset); color: var(--text-secondary); }

@media (max-width: 760px) {
  /* ⚠️ Raden bryts i stället för att krympa märket — statustexten är det man
     läser, och en avkortad "2026P4 sakn…" är sämre än två rader. */
  .admin-vrad { flex-wrap: wrap; }
  .admin-vnamn { flex-basis: 100%; }
}

/* ── Den gemensamma värdeformen ─────────────────────────────────────────── */
.admin-vardetopp {
  display: flex; align-items: flex-start; gap: var(--space-4);
  flex-wrap: wrap; padding: 15px var(--space-4);
  border-bottom: 1px solid var(--border);
}
.admin-vardenamn { font-size: var(--fs-lg); font-weight: 650; }
.admin-vardemeta {
  font-size: var(--fs-eyebrow); color: var(--text-secondary); margin-top: 2px;
}
/* ⚠️ tabular-nums på tabellens tal: årtal och belopp ska ligga i kolumn. Den
   ärvs inte in i formulärkontroller (#930) — se .admin-input nedan. */
.admin-vardetabell .admin-tal { font-variant-numeric: tabular-nums; }
/* ⚠️⚠️ DEN SAKNADE RADEN ÄR RÖD, och färgen ÄR informationen: raden säger att
   något som ska finnas inte gör det. */
.admin-vardesaknas { background: var(--danger-soft); }
.admin-vardekonsekvens { color: var(--danger-deep); font-weight: 600; }
.admin-vardefot {
  padding: 11px var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--surface-page);
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin: 0;
}
.admin-knapp-xs {
  padding: 3px 8px; font-size: 11.5px; min-height: 26px;
  font-variant-numeric: tabular-nums;
}
.admin-faltrad { display: block; margin-bottom: var(--space-3); font-size: var(--fs-sm); }
.admin-faltrad .admin-input { width: 100%; margin-top: 4px; }
/* ⚠️ ENSKILT PÅ input: tabular-nums ärvs INTE in i formulärkontroller (#930),
   och ett belopp som byter bredd medan man skriver är svårt att läsa. */
.admin-input { font-variant-numeric: tabular-nums; }
.admin-konsekvens {
  font-size: var(--fs-eyebrow); color: var(--warning-deep); margin: var(--space-2) 0;
}
/* ⚠️ Kontrollraden ligger MELLAN tabellen och foten: den hör till värdena, inte
   till sidhuvudet. */
.admin-kontrollrad {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 11px var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}
.admin-kontrollrad span { flex: 1; min-width: 200px; }

/* ⚠️ Lön 1b-i: filvalet i plattformens knapp. Själva fältet är dolt men nåbart —
   etiketten är knappen, och webbläsarens egen filknapp syns aldrig. */
.admin-filval { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 4px; }
.admin-filval .admin-knapp { position: relative; display: inline-flex; align-items: center; }
.admin-filval__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.admin-filval .admin-knapp:focus-within { box-shadow: var(--focus-ring); }
/* Förhandsvisningen av en import rullar inom dialogen — fjorton tabeller får plats utan att Spara hamnar utanför. */
.admin-forhandsvisning .admin-tabell-wrap { max-height: 260px; overflow-y: auto; }
/* Tabellformens utfällda rad: intervallen per kolumn, för läsning. */
.admin-vardeutfalld > td { background: var(--surface-page); padding: var(--space-2) var(--space-4); }

/* ⚠️ Delsummorna (exkl moms, moms) ligger MELLAN raderna och "Att fakturera".
   De är inte fetstilta — det är slutsumman som är svaret, delsummorna visar
   bara hur man kom dit. */
.admin-forhands__delsumma {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  padding: 3px 12px;
  color: var(--text-secondary);
}
/* ⚠️ Första delsumman får linjen som tidigare låg på slutsumman — den skiljer
   raderna från summeringen. */
.admin-forhands__rad + .admin-forhands__delsumma {
  border-top: 1px solid var(--border);
  margin-top: 5px;
  padding-top: 6px;
}

/* ── PRISRADER (mall-rader) ─────────────────────────────────────────────
   ⚠️ Samma radform som fakturaraderna ovan: text som växer, tal som står
   still i sin kolumn. En egen form hade gjort två listor på samma kort
   olika utan att skillnaden betyder något. */
.admin-mallrad {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.admin-mallrad:last-child { border-bottom: none; }
.admin-mallrad__text { flex: 1; min-width: 0; font-weight: 650; }
.admin-mallrad__slag { color: var(--text-secondary); white-space: nowrap; }
.admin-mallrad__pris {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}
/* ⚠️ En avstängd rad tonas ned men döljs ALDRIG — den är historiken som
   förklarar varför en gammal faktura ser ut som den gör. */
.admin-mallrad--avstangd { opacity: 0.6; }
.admin-mallrad__status {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--surface-inset);
  color: var(--text-secondary);
}

.admin-mallrad-ny {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-wrap: wrap;
}
.admin-mallrad-ny .admin-input,
.admin-mallrad-ny > .smart-date-wrapper { flex: 1; min-width: 120px; }

/* ⚠️ Samma form som Ångra-knappen på väntraden: en handling i radens kant,
   inte en knapp som tävlar med innehållet. */
.admin-mallrad__av {
  font: inherit;
  font-size: var(--fs-eyebrow);
  color: var(--danger-deep);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  min-height: 28px;
  white-space: nowrap;
}
.admin-mallrad__av:hover { text-decoration: underline; }

/* ─── E-FAKTURAVOLYMEN (#1044:s räkning, äntligen med en yta) ───────────
   ⚠️ Klasserna är få med flit: sidan är en tabell med en öppningsbar rad,
   och allt den behöver utöver .admin-tabell är de fyra nedan. */

/* Rubriken med sina sidovyer bredvid — båda är underlag FÖR faktureringen. */
.admin-rubrikrad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ⚠️ Länkarna hålls ihop i en egen grupp. Som jämbördiga barn till
   .admin-rubrikrad hade space-between lagt den ena mitt i raden. */
.admin-rubrikrad__lankar {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ⚠️ TALET ÄR KNAPPEN. Den ska se ut som ett tal, inte som en knapp — men
   bära att den går att trycka på. Därför understrykning vid hovring och
   siffertypsnittet kvar. */
.admin-lank-knapp {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.admin-lank-knapp:hover { text-decoration: underline; }

/* Underlaget under en öppnad rad: vilka e-fakturor talet består av. */
.admin-underlag {
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
}
.admin-underlag__rad {
  display: flex;
  gap: var(--space-3);
  padding: 2px 0;
  flex-wrap: wrap;
}

/* Datumfälten i filterraden bär sina etiketter. */
.admin-filterrad__falt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

/* ⚠️ Summaraden bär linje ÖVER och ingen under — den hör till tabellen men är
   inte en post i den. Samma form som fakturatabellens summarad. */
.admin-sumrad td {
  border-top: 1px solid var(--line);
  font-weight: 650;
}

/* ⚠️ «Saknar abonnemang» — läget och cellen som säger vad som saknas.
   Tonad, för raden är inte ett fel; den är en kund som behöver något. */
.admin-lage--saknar_abonnemang {
  background: var(--surface-inset);
  color: var(--text-secondary);
}
.admin-saknas {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}