/* ===========================================================
 * 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;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.admin-nav__brand { font-size: var(--fs-md); font-weight: 700; }
.admin-nav__link {
  color: var(--text-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.admin-nav__link.is-active {
  color: var(--success-deep);
  font-weight: 600;
}
.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);
}
.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);
  }
}