/* taubenbearbeitung.css: Taubenakte (Suche, Kacheln, Formulare, Listen, Lightbox). Nur Tokens, keine Farbwerte. */

/* ── Seitenkopf ── */
.taubenakte-kopfsymbol {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--blue-dark);
}

.akten-kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.akten-kopf .btn .symbol {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}
.akten-name {
  font-weight: 700;
  font-size: var(--schrift-gross);
}

/* ── Suche, Register: meine Tauben als Kacheln (#360) ── */
#bereich-suche { padding: 0.25rem 0; }

.meine-tauben { margin-top: 0.75rem; }
.meine-tauben__kopf { font-size: var(--schrift-klein); color: var(--muted); margin-bottom: 0.5rem; }
.meine-tauben__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.taube-kachel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 64px;
  padding: 0.6rem 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-karte);
  cursor: pointer;
  box-shadow: var(--schatten-karte);
}
.taube-kachel:hover,
.taube-kachel:focus-visible { background: var(--blue-light); border-color: var(--blue-dark); }
.taube-kachel__name { font-weight: 700; font-size: var(--schrift-text); overflow-wrap: anywhere; }
.taube-kachel__id { font-size: var(--schrift-klein); color: var(--muted); overflow-wrap: anywhere; }
.checkline.nur-meine { margin: 0 0 0.4rem; padding: 0 0.75rem; }
.checkline.nur-meine label { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 400; }
.checkline.nur-meine input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
#meldung .knopf { margin-left: var(--abstand-sm); }

/* ── Rollen-Marken ── */
.rollen-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* ── Tauben-Info-Box ── */
#taube-info {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  font-size: var(--fs-text);
}
#taube-info .info-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
#taube-info .info-label { color: var(--muted); font-size: var(--schrift-klein); }
#taube-info .info-value { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ── Kachel-Navigation ── */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.kachel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-karte);
  cursor: pointer;
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
  line-height: 1.2;
  min-height: 80px;
  overflow-wrap: anywhere;
}
.kachel-btn .kachel-icon { line-height: 1; }
.kachel-btn .kachel-icon .symbol { inline-size: 1.75rem; block-size: 1.75rem; }
.kachel-btn:hover {
  background: var(--blue-light);
  border-color: var(--blue-mid);
  color: var(--blue-dark);
  box-shadow: var(--schatten-karte);
}
.kachel-btn.active {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--farbe-text-auf-marke);
  box-shadow: var(--schatten-karte);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Sektion-Kopf, Datenliste ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.section-title { font-size: var(--fs-text); font-weight: 700; color: var(--text); }

.data-list { display: flex; flex-direction: column; gap: 0.5rem; }
.data-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  padding: 0.65rem 0.9rem;
  font-size: var(--fs-text);
}
.data-item-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.data-item-title { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.data-item-meta { font-size: var(--schrift-klein); color: var(--muted); }
.data-item-body { margin-top: 0.3rem; color: var(--muted); font-size: var(--fs-text); overflow-wrap: anywhere; }

/* ── Formulare ── */
.inline-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  padding: 0.85rem;
  margin-top: 0.75rem;
}
.inline-form h4 { font-size: var(--fs-text); font-weight: 700; margin-bottom: 0.75rem; color: var(--text); }
.field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 140px; }

.pflichtstern { color: var(--farbe-fehler); font-size: var(--schrift-klein); }
.optional-hinweis { color: var(--muted); font-weight: 400; font-size: var(--schrift-klein); }
.label-klein { font-size: var(--schrift-klein); font-weight: 600; }
.formular-titel { font-size: var(--fs-text); font-weight: 700; margin-bottom: 0.5rem; }
.voll { inline-size: 100%; }
.mehrzeilig { inline-size: 100%; font-family: inherit; resize: vertical; }
.mindesthoehe-40 { min-height: 2.5rem; }
.datei-eingabe { inline-size: 100%; padding: 0.35rem 0; font-size: var(--schrift-klein); }
.vorschau-bild { max-width: 120px; max-height: 90px; border-radius: var(--radius-feld); border: 1px solid var(--border); }
.max-breite-220 { max-width: 220px; }

.hinweisfeld {
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: var(--bg);
  border-radius: var(--radius-feld);
  font-size: var(--schrift-klein);
  color: var(--muted);
}
.dosis-warnung { color: var(--farbe-warn); font-weight: 600; }

.actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.actions .btn--primary, .actions .knopf--primaer { flex: 1; }
.btn-schmal { font-size: var(--schrift-klein); padding: 0.3rem 0.75rem; }
.btn .symbol { inline-size: 1.25rem; block-size: 1.25rem; }

/* ── Meldungen in Formularen (Symbol und Text, nie nur Farbe) ── */
.box { margin-top: 1.25rem; border-radius: var(--radius-feld); overflow: hidden; }
.box.small,
.box.ok,
.box.err,
.box.info {
  --m-farbe: var(--text);
  --m-bg: var(--bg);
  --m-rand: var(--border);
  padding: 0.5rem var(--abstand-md);
  border: 1px solid var(--m-rand);
  border-inline-start: 6px solid var(--m-farbe);
  background: var(--m-bg);
  color: var(--m-farbe);
  font-size: var(--fs-text);
  line-height: 1.5;
}
.box.ok { --m-farbe: var(--farbe-ok); --m-bg: var(--farbe-ok-bg); --m-rand: var(--farbe-ok-rand); --m-symbol: var(--symbol-ok); font-weight: 600; }
.box.err { --m-farbe: var(--farbe-fehler); --m-bg: var(--farbe-fehler-bg); --m-rand: var(--farbe-fehler-rand); --m-symbol: var(--symbol-fehler); font-weight: 600; }
.box.info { --m-farbe: var(--farbe-info); --m-bg: var(--farbe-info-bg); --m-rand: var(--farbe-info-rand); --m-symbol: var(--symbol-info); }
.box.ok::before,
.box.err::before,
.box.info::before {
  content: "";
  display: inline-block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-right: var(--abstand-sm);
  vertical-align: -0.25rem;
  background-color: var(--m-farbe);
  -webkit-mask: var(--m-symbol) center / contain no-repeat;
  mask: var(--m-symbol) center / contain no-repeat;
}
.box:empty { display: none; }

.notice {
  font-size: var(--fs-text);
  color: var(--muted);
  margin-top: 0.75rem;
  padding: 0.6rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  line-height: 1.5;
}
.divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* ── Gewicht: Diagramm und Tabelle ── */
.diagramm-rahmen {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-karte);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.gewicht-wert { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Diagnosen: Status ändern ── */
.diag-edit-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tippflaeche);
  block-size: var(--tippflaeche);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-feld);
  color: var(--blue-mid);
  cursor: pointer;
}
.diag-edit-btn:hover { background: var(--blue-light); }
.diag-edit-btn:disabled { color: var(--farbe-neutral-text); cursor: not-allowed; }
.diag-status-select { inline-size: auto; min-height: var(--tippflaeche); margin-left: 0.4rem; font-size: var(--fs-text); }

/* ── Tierarzt: Befund-Formular, Anhänge ── */
.ta-befund-form {
  padding: 0.75rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-karte) var(--radius-karte);
}
.anhang-reihe { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ta-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-feld);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ta-thumb:hover { transform: scale(1.08); box-shadow: var(--schatten-karte); }

/* Lightbox (Dialog-Baustein) */
.ta-lightbox__dialog { max-inline-size: min(60rem, 100%); justify-items: center; }
.ta-lightbox__dialog img {
  max-inline-size: 100%;
  max-block-size: 70vh;
  object-fit: contain;
  border-radius: var(--radius-feld);
}

/* ── Medikation ── */
.med-plan-card { margin-top: 0.75rem; }
.med-plan-toolbar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.med-plan-meta { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.35rem; }
.med-plan-lines { margin: 0.55rem 0 0 0; padding-left: 1.1rem; }
.med-plan-lines li { margin: 0.35rem 0; }
.med-plan-line-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.med-plan-edit-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-feld); padding: 0.85rem; margin-top: 0.75rem; }
.med-line-edit-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-feld); padding: 0.75rem; margin-top: 0.5rem; }
.med-inline-note { font-size: var(--schrift-klein); color: var(--muted); margin-top: 0.35rem; }

/* ── Tagesgaben ── */
.gabe-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gabe-knopf { font-size: var(--fs-text); min-height: 2.75rem; flex: 1 1 0; padding: 0.5rem; }
.gabe-knopf--gegeben { flex: 1 1 100%; background: var(--farbe-ok-bg); color: var(--farbe-ok); border-color: var(--farbe-ok-rand); }
.gabe-knopf--angepasst { background: var(--farbe-warn-bg); color: var(--farbe-warn); border-color: var(--farbe-warn-rand); }
.gabe-knopf--verweigert { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); border-color: var(--farbe-fehler-rand); }
.gabe-angepasst-form {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
}
.farbe-ok { color: var(--farbe-ok); }
.farbe-warn { color: var(--farbe-warn); }
.farbe-fehler { color: var(--farbe-fehler); }

/* ── Abstände und Reihen (ersetzen frühere Inline-Werte) ── */
.oben-30 { margin-top: 0.3rem; }
.oben-40 { margin-top: 0.4rem; }
.oben-45 { margin-top: 0.45rem; }
.oben-50 { margin-top: 0.5rem; }
.oben-55 { margin-top: 0.55rem; }
.oben-60 { margin-top: 0.6rem; }
.oben-75 { margin-top: 0.75rem; }
.oben-85 { margin-top: 0.85rem; }
.oben-100 { margin-top: 1rem; }
.oben-125 { margin-top: 1.25rem; }
.unten-50 { margin-bottom: 0.5rem; }
.unten-75 { margin-bottom: 0.75rem; }
.unten-100 { margin-bottom: 1rem; }
.links-50 { margin-left: 0.5rem; }
.nach-rechts { margin-left: auto; }
.reihe-50 { display: flex; gap: 0.5rem; }
.reihe-mitte { align-items: center; }
.zeilenkopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.aktionen-rechts { display: flex; justify-content: flex-end; }

/* Handy: größere Ankreuzfelder */
@media (max-width: 600px) {
  .checkline input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
}

/* Quarantäne (#1177) */
.q-gruppe { border: 1px solid var(--border); border-radius: var(--radius-feld); padding: 0.75rem; margin: 0; min-width: 0; }
.q-gruppe legend { font-weight: 700; padding: 0 0.25rem; }
.q-punkt { margin-top: 0.4rem; min-height: 44px; align-items: flex-start; }
.q-punkt span { font-weight: 400; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.q-punkt input[type="checkbox"] { margin-top: 0.15rem; }
.q-plakette { border: 0; cursor: pointer; font-family: inherit; }
.q-punkte { margin-top: 0.4rem; }
.q-punkte ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }
#q-bemerkung { width: 100%; }
.q-folgen ul, #q-beenden-box ul { margin: 0.25rem 0 0 1.1rem; padding: 0; }
.q-folgen li, #q-beenden-box li { margin-top: 0.2rem; }
@media (max-width: 600px) {
  .q-gruppe { border: 0; padding: 0; }
  .q-punkt { padding: 0.6rem 0.75rem; }
}

/* Taubengeschichte (#740) */
.geschichte-karte { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.geschichte-titel { margin: 0 0 0.5rem; font-size: var(--schrift-gross); }
.geschichte-text { white-space: pre-line; overflow-wrap: anywhere; }
.geschichte-bilder { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.geschichte-bild { display: flex; flex-direction: column; gap: 0.35rem; max-inline-size: 9rem; }
.geschichte-bild .vorschau-bild { max-inline-size: 100%; block-size: auto; }
/* #1511: .knopf bricht um, .btn nicht; die Knöpfe der Karte bleiben einzeilig wie vorher */
.geschichte-karte .knopf[data-gs] { white-space: nowrap; }