/* mitgliederverwaltung.css: Mitgliederliste (nur Tokens). Aufbau wie die Taubenliste. */

.page { max-width: 1100px; }

.page__header { justify-content: space-between; flex-wrap: wrap; }

.page__header-left { display: flex; align-items: flex-start; gap: var(--abstand-md); }

.toolbar input { flex: 1 1 100%; min-width: 180px; }
.toolbar select { width: auto; min-width: 160px; flex: 0 1 auto; }

.scroll-mirror {
  overflow-x: auto;
  overflow-y: hidden;
  height: 12px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Breite wird per Skript am Breiten-Attribut gesetzt (Bild mit width), damit kein style-Attribut nötig ist */
.scroll-mirror-inner { display: block; max-width: none; height: 1px; }

.table-wrap {
  overflow-x: auto;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  border-top: none;
}

table { width: 100%; border-collapse: collapse; background: var(--surface); }

thead { background: var(--shell-bg); color: var(--shell-text); }

thead th {
  padding: var(--abstand-xs) var(--abstand-md);
  height: var(--tippflaeche);
  font-size: var(--schrift-klein);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.03em;
  user-select: none;
}

thead th .sort-icon { margin-left: var(--abstand-xs); opacity: 0.6; font-style: normal; }

/* Sortierköpfe als Knöpfe */
thead th .sort-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
thead th .sort-btn:focus-visible { outline: 2px solid var(--shell-text); outline-offset: 2px; }

tbody tr { border-top: 1px solid var(--border); transition: background var(--dauer-druck) var(--kurve); }
tbody tr:hover { background: var(--blue-light); }
tbody td { padding: var(--abstand-sm) var(--abstand-md); font-size: var(--schrift-klein); vertical-align: middle; }

/* Zustandszeile (Laden, leer, Fehler) */
tbody td[colspan] { padding: 0; }

.badge .symbol { inline-size: 1em; block-size: 1em; }

.mv-nowrap { white-space: nowrap; }
.mv-fett { font-weight: 600; }
.mv-muted { color: var(--muted); }
.mv-iban { font-family: monospace; letter-spacing: 0.03em; }

.doc-list { display: flex; flex-direction: column; gap: var(--abstand-xs); min-width: 10rem; max-width: 15rem; }
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  min-height: var(--tippflaeche);
  color: var(--blue-dark);
  text-decoration: underline;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.doc-link .symbol { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; }

.notiz-zelle { min-width: 14rem; max-width: 22rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.notiz-leer { color: var(--muted); }

/* Fenster: Bild in Vollbild und E-Mail-Adressen */
.dialog-huelle[hidden] { display: none; }
.dialog.ml-lightbox { max-inline-size: min(60rem, 100%); justify-items: center; }
.ml-lightbox img { max-inline-size: 100%; max-block-size: 70dvh; object-fit: contain; }
.dialog.ml-emaildialog { max-inline-size: 40rem; }
.ml-emailtext {
  width: 100%;
  min-height: 7.5rem;
  font-family: monospace;
  resize: vertical;
  box-sizing: border-box;
}

footer { max-width: 1100px; }