/* taubenmanagement_lesen.css: Taubenliste (nur Tokens). Karten am Handy über .table--karten aus components.css */

.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;
  min-width: 180px;
}

.toolbar select {
  min-width: 160px;
}

.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(--fs-small);
  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(--fs-text);
  vertical-align: middle;
}

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

.taube-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: underline;
}

.taube-name {
  font-weight: 600;
}

.liste-mehr {
  display: flex;
  justify-content: center;
  padding: var(--abstand-md) 0 0;
}

.liste-mehr .knopf {
  font-size: var(--schrift-text);
}

.sort-auswahl {
  display: none;
  margin-bottom: var(--abstand-lg);
}

.sort-auswahl select {
  font-family: inherit;
  min-height: var(--tippflaeche);
}

@media (max-width: 640px) {
  .sort-auswahl {
    display: block;
  }
}

/* Ab 641 px (Tabelle am PC) etwas kleinere Schrift, sonst wird die Tabelle zu breit (#436) */
@media (min-width: 641px) {
  thead th, tbody td { padding-inline: calc(var(--abstand-md) * 0.75); }
  thead th { font-size: var(--schrift-klein); }
  tbody td { font-size: var(--schrift-klein); }
  .chip, .initials { font-size: var(--schrift-klein); }
  tbody td.z-id { white-space: nowrap; color: var(--muted); }
  tbody td.z-datum { white-space: nowrap; }
  tbody td.z-end { color: var(--muted); }
}

@media (max-width: 640px) {
  .scroll-mirror { display: none; }
  .table-wrap { border-top: 1px solid var(--border); border-radius: var(--radius); }
}

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

footer {
  max-width: 1100px;
}

/* Bausteine für die Taubenliste (#960): Lade-Platzhalter und leerer Zustand, gleiche Regeln wie in components.css auf staging */
/* Nur für Vorlese-Programme sichtbar */
.vl-nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.vl-symbol {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ----- a) Leerer Zustand ----- */
.vl-leer {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
}

.vl-leer__symbol {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  color: var(--blue-mid);
}

.vl-leer__titel {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.vl-leer__text {
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--muted);
  max-width: 28rem;
  margin: 0 auto 1.1rem;
}

.vl-leer__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.vl-leer__knopf:hover {
  text-decoration: none;
}

/* ----- c) Lade-Platzhalter ----- */
.vl-lade {
  display: grid;
  gap: 0.75rem;
}

.vl-lade__karte {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.vl-lade__balken {
  display: block;
  height: 0.9rem;
  border-radius: var(--radius-feld);
  background: var(--border);
}

.vl-lade__balken--kurz { width: 35%; }
.vl-lade__balken--mittel { width: 60%; }
.vl-lade__balken--lang { width: 90%; }
.vl-lade__balken--rund { width: 2.5rem; height: 2.5rem; border-radius: 50%; }

.vl-lade--zeilen .vl-lade__karte {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.vl-lade--zeilen .vl-lade__balken--lang { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .vl-lade__balken {
    animation: vl-puls 1.4s ease-in-out infinite;
  }
}

@keyframes vl-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* 641 bis 1.400 px: Schrift 16 px ohne seitliches Rollen. Tauben-ID und Fundort fehlen hier,
   wie in der geschlossenen Karte am Handy; ab 1.401 px ist die volle Tabelle da (#1327) */
@media (min-width: 641px) and (max-width: 1400px) {
  thead th, tbody td { font-size: 1rem; }
  .chip, .initials { font-size: 1rem; }
  #tabelle th:nth-child(1), #tabelle td.z-id,
  #tabelle th:nth-child(4), #tabelle td:nth-child(4) { display: none; }
  #tabelle td.k-titel a { display: inline-flex; align-items: center; min-height: var(--tippflaeche); }
}

/* 641 bis 1.100 px: auch Historie der Pflegestellen und Endstelle weglassen, damit nichts seitlich rollt;
   übrig bleiben die Angaben der geschlossenen Karte am Handy und das Funddatum (#1327) */
@media (min-width: 641px) and (max-width: 1100px) {
  #tabelle th:nth-child(7), #tabelle td:nth-child(7),
  #tabelle th:nth-child(9), #tabelle td:nth-child(9) { display: none; }
}

/* 641 bis 799 px: auch das Funddatum weglassen, damit nichts seitlich rollt;
   die Liste bleibt nach Funddatum sortiert (#1327) */
@media (min-width: 641px) and (max-width: 799px) {
  #tabelle th:nth-child(3), #tabelle td:nth-child(3) { display: none; }
}