/* ============================================================
 * Administration — .adm-* (Spec: pages/administration.jsx)
 *
 * Extrahiert aus Inline-`style:`-Objekten (P3b, Design-System-
 * Konsolidierung, docs/superpowers/specs/2026-07-12-design-system-
 * konsolidierung-design.md). Werterhaltend — Werte sind auf die
 * nächstgelegenen Tokens (fs-, sp-, radius-Variablen) gerundet, keine
 * bewusste Neugestaltung. Genuin dynamische Werte (Familien-Farbe der
 * Norm-Gruppen) bleiben inline und referenzieren weiterhin Tokens.
 * ============================================================ */

/* ---------- Karte (Sections) ---------- */
.catalog-toolbar, .catalog-actions { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.catalog-toolbar { margin: var(--sp-20) 0; }
.catalog-toolbar input { flex: 1; min-width: 180px; }
.catalog-table-wrap { overflow-x: auto; }
.catalog-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.catalog-table th, .catalog-table td { padding: var(--sp-12) var(--sp-8); border-bottom: 1px solid var(--paper-3); text-align: left; vertical-align: top; }
.catalog-table th { font-size: var(--fs-xs); color: var(--ink-500); }
.catalog-title { border: 0; padding: 0; background: none; color: var(--navy-900); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.catalog-title:hover { text-decoration: underline; }
.catalog-table select, .catalog-form input, .catalog-form textarea, .catalog-form select, .catalog-toolbar input, .catalog-toolbar select {
  font: inherit; color: var(--ink-900); background: var(--surface); border: 1px solid var(--paper-3); border-radius: var(--radius); padding: var(--sp-8); max-width: 100%;
}
.catalog-table select { min-width: 130px; }
.catalog-table button:disabled { opacity: .5; cursor: default; }
.catalog-form fieldset { border: 0; padding: 0; margin: var(--sp-20) 0 0; min-width: 0; }
.catalog-form label { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-16); font-size: var(--fs-sm); }
.catalog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.catalog-form textarea { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.6; }
.catalog-badge { font-size: var(--fs-xs); color: var(--ink-500); }
.document-text { max-width: 960px; margin: auto; }
.document-section { padding: var(--sp-20); border-bottom: 1px solid var(--paper-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-md); line-height: 1.7; scroll-margin-top: 100px; }
.document-section h2 { font-size: var(--fs-lg); line-height: 1.4; margin-top: 0; }
.document-section.is-target { background: var(--paper); border-left: 3px solid var(--pink-500); }

.adm-card {
  background: var(--surface);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-20) var(--sp-24);
}
.adm-card--spaced { margin-bottom: var(--sp-20); }
.adm-card--muted { color: var(--ink-500); }

.adm-section-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--navy-900);
}
.adm-muted { font-size: var(--fs-sm); color: var(--ink-500); }

/* Lead-Absätze unter einer Section-Überschrift. Basis = mt-6/mb-0. */
.adm-lead {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin: var(--sp-6) 0 0;
}
.adm-lead--mt8 { margin-top: var(--sp-8); }
.adm-lead--mb14 { margin-bottom: var(--sp-14); }
.adm-lead--wide { max-width: 460px; }
.adm-lead-body {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin-top: var(--sp-10);
  margin-bottom: 0;
  line-height: 1.5;
}
.adm-strong { color: var(--navy-900); }

/* ---------- Buttons ---------- */
.adm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-10) var(--sp-16);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-family: inherit;
  cursor: pointer;
  border: none;
  font-weight: 600;
  background: var(--pink-700);
  color: white;
}
.adm-btn-primary--busy { opacity: 0.7; cursor: default; }

.adm-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-14);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--paper-3);
  background: var(--surface);
  color: var(--navy-900);
}
.adm-btn-ghost--lg { padding: var(--sp-10) var(--sp-16); font-size: var(--fs-md); }

.adm-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-14);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--status-danger) 30%, transparent);
  background: var(--surface);
  color: var(--status-danger);
}

.adm-btn-danger-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-10) var(--sp-16);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
  border: none;
  background: var(--status-danger);
  color: white;
  opacity: 1;
}
.adm-btn-danger-solid--busy { cursor: default; opacity: 0.7; }

/* ---------- Sub-Navigation ---------- */
.adm-subnav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 0 0 220px;
  align-self: flex-start;
}
.adm-subnav-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--navy-900);
  font-weight: 500;
}
.adm-subnav-btn.is-active {
  border-color: color-mix(in srgb, var(--pink-500) 30%, transparent);
  background: color-mix(in srgb, var(--pink-500) 8%, transparent);
  color: var(--pink-500);
  font-weight: 600;
}

/* ---------- Header-Reihen (Section-Kopf + Suche/Aktion) ---------- */
.adm-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
}
.adm-header-row--wrap { margin-bottom: var(--sp-14); flex-wrap: wrap; }

.adm-header-flex { display: flex; align-items: center; gap: var(--sp-14); }
.adm-min0 { min-width: 0; }
.adm-eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); }
.adm-header-name { font-size: var(--fs-lg); font-weight: 600; color: var(--navy-900); }

.adm-search-narrow { min-width: 240px; }

/* ---------- Features (Checkbox-Grid) ---------- */
.adm-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-10);
}
.adm-feature-item {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--paper-3);
  background: var(--surface);
}
.adm-feature-item.is-checked { background: color-mix(in srgb, var(--pink-500) 6%, transparent); }
.adm-feature-name { font-size: var(--fs-md); color: var(--navy-900); }

.adm-checkbox { width: var(--sp-16); height: var(--sp-16); accent-color: var(--pink-500); }
.adm-checkbox--fixed { flex: 0 0 auto; }

/* ---------- Zeilen (Pakete + Kundenliste teilen sich das Layout) ---------- */
.adm-package-list { display: flex; flex-direction: column; gap: var(--sp-10); }
.adm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-14);
  border-radius: var(--radius);
  border: 1px solid var(--paper-3);
  background: var(--paper-2);
}
.adm-row-title { font-size: var(--fs-md); font-weight: 600; color: var(--navy-900); }
.adm-row-sub { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-2); }
.adm-row-sub--clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row-actions { display: flex; align-items: center; gap: var(--sp-8); flex: 0 0 auto; }

/* ---------- Normen einzeln (nach Familie gruppiert) ---------- */
.adm-fam-group { margin-bottom: var(--sp-16); }
.adm-fam-head { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.adm-fam-dot { width: var(--sp-10); height: var(--sp-10); border-radius: var(--radius-xs); flex: 0 0 auto; }
.adm-fam-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-text-xs-muted { font-size: var(--fs-xs); color: var(--ink-500); }

.adm-std-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-8);
}
.adm-std-row {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--paper-3);
  background: var(--surface);
}
.adm-std-row.is-checked { background: color-mix(in srgb, var(--pink-500) 6%, transparent); }
.adm-std-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.adm-std-code { font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); font-family: var(--font-mono); }
.adm-std-label {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Speichern-Leiste + Meldungen ---------- */
.adm-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-14);
  flex-wrap: wrap;
}
.adm-msg-error {
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--pink-500) 8%, transparent);
  color: var(--pink-500);
  border: 1px solid color-mix(in srgb, var(--pink-500) 25%, transparent);
}
.adm-msg-ok {
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.adm-msg--mb { margin-bottom: var(--sp-12); }

/* ---------- Stacks (vertikale Bereichs-Layouts) ---------- */
.adm-stack { display: flex; flex-direction: column; gap: var(--sp-20); }
.adm-stack-sm { display: flex; flex-direction: column; gap: var(--sp-8); }

/* ---------- Lösch-Bestätigung (Modal) ---------- */
.adm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--navy-900) 45%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px var(--sp-16);
  overflow-y: auto;
}
.adm-panel {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
}
.adm-panel-head { padding: var(--sp-24) var(--sp-24) var(--sp-8); }
.adm-dialog-title { margin: 0; font-size: var(--fs-xl); color: var(--navy-900); }
.adm-panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-10);
  padding: var(--sp-16) var(--sp-24);
  margin-top: var(--sp-8);
  border-top: 1px solid var(--paper-3);
}

/* ---------- Seiten-Layout (Sub-Nav + Inhalt) ---------- */
.adm-columns { display: flex; gap: var(--sp-24); align-items: flex-start; }
.adm-content { flex: 1; min-width: 0; }

/* ============================================================
 * Benutzerverwaltung — .usr-* (Spec: pages/users.jsx)
 *
 * Extrahiert aus Inline-style:-Objekten (P3c, Design-System-
 * Konsolidierung, docs/superpowers/specs/2026-07-12-design-system-
 * konsolidierung-design.md), analog zu P3b (.adm-*). Werterhaltend
 * — Rundung auf die naechstgelegenen Tokens (fs-, sp-, radius-
 * Variablen), keine bewusste Neugestaltung. Rollen-Badge und
 * Status-Anzeige (aktiv/inaktiv) sind auf feste Modifier-Klassen
 * abgebildet, da sie nur wenige diskrete Zustaende kennen (kein
 * kontinuierlicher, echt dynamischer Wert wie die Familien-Farbe
 * in administration.jsx).
 * ============================================================ */

/* ---------- Rollen-Badge ---------- */
.usr-badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-10);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.usr-badge--admin {
  background: color-mix(in srgb, var(--pink-500) 10%, transparent);
  color: var(--pink-500);
  border: 1px solid color-mix(in srgb, var(--pink-500) 30%, transparent);
}
.usr-badge--consultant {
  background: color-mix(in srgb, var(--navy-900) 7%, transparent);
  color: var(--navy-900);
  border: 1px solid color-mix(in srgb, var(--navy-900) 18%, transparent);
}
.usr-badge--default {
  background: var(--paper-2);
  color: var(--ink-500);
  border: 1px solid var(--paper-3);
}

/* ---------- Modal-Grundgeruest (Create/Edit) ---------- */
.usr-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--navy-900) 45%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px var(--sp-16);
  overflow-y: auto;
}
.usr-panel {
  width: 100%;
  max-width: 540px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
}
.usr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-20) var(--sp-24);
  border-bottom: 1px solid var(--paper-3);
}
.usr-modal-title { margin: 0; font-size: var(--fs-xl); color: var(--navy-900); }
.usr-modal-subtitle { font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--sp-2); }
.usr-modal-body {
  padding: var(--sp-20) var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
}
.usr-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-10);
  padding: var(--sp-16) var(--sp-24);
  border-top: 1px solid var(--paper-3);
}

.usr-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: var(--sp-6);
  display: block;
}
.usr-required { color: var(--pink-500); }

.usr-input {
  width: 100%;
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--fs-md);
  font-family: inherit;
  color: var(--navy-900);
  background: var(--surface);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.usr-input--flex1 { flex: 1; }

.usr-btn-ghost {
  padding: var(--sp-10) var(--sp-16);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  cursor: pointer;
  border: 1px solid var(--paper-3);
  background: var(--surface);
  color: var(--navy-900);
}

.usr-err-box {
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--pink-500) 8%, transparent);
  color: var(--pink-500);
  border: 1px solid color-mix(in srgb, var(--pink-500) 25%, transparent);
}

.usr-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-500);
  padding: var(--sp-4);
  line-height: 0;
  border-radius: var(--radius-sm);
}

.usr-muted-sm { font-size: var(--fs-sm); color: var(--ink-500); }
.usr-muted-xs { font-size: var(--fs-xs); color: var(--ink-500); }

/* ---------- Berater-Kundenzuordnung ---------- */
.usr-assign-wrap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}
.usr-assign-title { font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); }
.usr-assign-desc { font-size: var(--fs-xs); color: var(--ink-500); margin-top: -4px; }
.usr-assign-row { display: flex; gap: var(--sp-8); }
.usr-chip-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.usr-chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--radius);
  border: 1px solid var(--paper-3);
  background: var(--surface);
}
.usr-chip-name { font-size: var(--fs-md); color: var(--navy-900); }

/* ---------- Status-Toggle (Edit-Modal) ---------- */
.usr-toggle-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  background: var(--surface);
}
.usr-checkbox { width: var(--sp-16); height: var(--sp-16); accent-color: var(--pink-500); }
.usr-toggle-label { font-size: var(--fs-md); color: var(--navy-900); }

/* ---------- User-Tabelle ---------- */
.usr-table-wrap {
  background: var(--surface);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.usr-table { width: 100%; border-collapse: collapse; }
.usr-thead { background: var(--paper-2); }
.usr-table-th {
  text-align: left;
  padding: var(--sp-10) var(--sp-14);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.usr-table-th--right { text-align: right; }

.usr-row { border-top: 1px solid var(--paper-3); }
.usr-cell {
  padding: var(--sp-12) var(--sp-14);
  font-size: var(--fs-md);
  color: var(--navy-900);
  vertical-align: middle;
}
.usr-cell--strong { font-weight: 600; }
.usr-cell--muted { color: var(--ink-500); }
.usr-cell--right { text-align: right; white-space: nowrap; }

.usr-status { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-sm); }
.usr-status--active { color: var(--navy-900); }
.usr-status--inactive { color: var(--ink-500); }
.usr-status-dot { width: var(--sp-8); height: var(--sp-8); border-radius: 999px; }
.usr-status-dot--active { background: var(--success); }
.usr-status-dot--inactive { background: var(--ink-300); }

.usr-action-btn {
  border: 1px solid var(--paper-3);
  background: var(--surface);
  cursor: pointer;
  color: var(--navy-900);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
}
.usr-action-btn--danger {
  margin-left: var(--sp-8);
  color: var(--pink-500);
  border-color: color-mix(in srgb, var(--pink-500) 30%, transparent);
}

/* ---------- Seiten-Kopf / Leerzustand ---------- */
.usr-subtitle-error { margin-left: var(--sp-8); color: var(--status-danger); }
.usr-subtitle-loading { margin-left: var(--sp-8); opacity: 0.6; }
.usr-empty { padding: var(--sp-32) 0; color: var(--ink-500); }