/* ── App Component System ─────────────────────────────────────
   Zentrales Designsystem für konsistente dark-theme UI.
   Ergänzt base.css / layout.css / forms.css.
   ─────────────────────────────────────────────────────────── */

/* ── Page body wrapper ──────────────────────────────────────
   Für Seiten, die innerhalb von #page-content (16px padding)
   einen zusätzlichen Innenabstand benötigen.               */
.app-page { padding: 0 16px 32px; }

/* Datumsnotiz rechtsbündig (z.B. Jagdzeiten) */
.app-date-note {
  text-align: right;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* Hilfswrapper für #tb-body (Tagebuch log/form/stats) */
.tb-body { padding-bottom: 40px; }

/* ── Card ───────────────────────────────────────────────────
   Basis-Karte: dunkle Oberfläche, Border, Schatten, Radius. */
.app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
  overflow: hidden;
}

/* Kartenkopf: etwas heller/kräftiger als der Kartenrumpf */
.app-card-header {
  padding: 7px 12px 5px;
  background: rgba(255,255,255,0.04);
}

/* Kartenkörper: dunkler als Kopf → klare visuelle Hierarchie */
.app-card-body {
  background: rgba(0,0,0,0.22);
  border-top: 1px solid var(--color-border);
  padding: 0 12px;
}

/* Optionaler Kartenabschluss (Aktionen, Meta) */
.app-card-footer {
  padding: 6px 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Horizontale Zeile im Kartenkopf (Flex-Row) */
.app-card-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  flex-wrap: nowrap;
}

/* ── Card-Farbvarianten ──────────────────────────────────── */

/* Jagd ohne Erlegung → gedämpftes Jagdgrün */
.app-card-jagd {
  border-left: 4px solid var(--color-primary);
  background: rgba(74,138,66,0.18);
}

/* Jagd mit Erlegung → gedämpftes Rotbraun */
.app-card-jagd-erlegung {
  border-left: 4px solid #8b4040;
  background: rgba(139,64,64,0.18);
}

/* Ereignis / Vorkommnis → gedämpftes Blaugrau */
.app-card-ereignis {
  border-left: 4px solid #2e6b99;
  background: rgba(46,107,153,0.18);
}

/* Jagdzeit offen → --color-success (Build 104) */
.app-card-jagdzeit-open {
  border-left: 4px solid var(--color-success);
  background: rgba(var(--color-success-rgb), 0.10);
}
.app-card-jagdzeit-open .app-card-header {
  background: rgba(var(--color-success-rgb), 0.22);
}

/* Jagdzeit geschlossen → VERBOTEN = --color-danger (Build 95) */
.app-card-jagdzeit-closed {
  border-left: 4px solid var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.08);
}
.app-card-jagdzeit-closed .app-card-header {
  background: rgba(var(--color-danger-rgb), 0.18);
}

/* ── Liste ──────────────────────────────────────────────────
   Vertikale Liste von Einträgen mit Trennlinien.          */
.app-list {
  display: flex;
  flex-direction: column;
}
.app-list-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.app-list-item:last-child { border-bottom: none; }

/* ── Untereinträge (innerhalb .app-card-body) ─────────────
   Einzelne Zeilen: Anblick, Erlegung, Vorkommnis, Zeitraum. */
.app-subitem {
  font-size: 0.76rem;
  color: var(--color-text);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.app-subitem:last-child { border-bottom: none; }

/* Fliesstext in einer Karte — bricht um statt abzuschneiden (Build 203).

   .app-subitem ist die kompakte Listenzeile: einzeilig, mit Ellipse. Das ist
   richtig für „Rehwild ♂ 2× 06:30 Junkholz" und falsch für einen Absatz.
   Wo ein Feld Fliesstext trägt — Bedingungen, Bemerkung, Notiz —, gehört
   dieser Modifier dazu, sonst endet die Vorgabe nach der ersten Zeile in
   drei Punkten.

   Dieselbe Falle wie bei .app-meta-row in Build 194: eine Klasse mit
   nowrap + Ellipse auf Text, der umbrechen muss. */
.app-subitem-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Beschriftung am Anfang einer Detailzeile — „Böcke: …", „Waffe: …".
   Dieselbe Anmutung wie die Info-Zeilen der Gesellschafts-Jagd
   (.dj-info-label), aber für Karten statt für Tabellenzellen (Build 205). */
.app-subitem-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Abschnittswechsel innerhalb einer Karte (Build 206). Kräftiger als die
   feine Linie unter jeder Detailzeile — sonst wäre er nicht zu erkennen. */
.app-subitem-trenner {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 8px 0;
}

/* Untereintrags-Modifier */
.app-subitem-erlegung   { color: #d87070; font-weight: 600; }
.app-subitem-vorkommnis { color: var(--color-text-muted); font-style: italic; }
.app-subitem-anblick    { color: var(--color-text); }

/* ── Meta-Zeile (zweite Kopfzeile) ──────────────────────── */
.app-meta-row {
  font-size: 0.73rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badge ──────────────────────────────────────────────── */
.app-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

/* Badge-Farbvarianten */
.app-badge-green  { background: rgba(74,138,66,0.35);  color: #90d080; }
.app-badge-red    { background: rgba(139,64,64,0.35);  color: #dd8888; }
.app-badge-blue   { background: rgba(46,107,153,0.35); color: #80b4e0; }
.app-badge-brown  { background: rgba(141,110,99,0.35); color: #c5a090; }
.app-badge-open   { background: #2d6a35; color: #c5e8c5; }
.app-badge-closed { background: rgba(139,64,64,0.40); color: #dd8888; }  /* rot: verboten (Build 95) */

/* Freigaben, hohe Priorität — roter Linksrand (Build 95) */
.app-card-hochprio {
  border-left: 4px solid var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.05);
}

/* ── Hervorgehobene Tabellenzeile ────────────────────────
   Dasselbe Muster wie die Karten-Varianten oben: farbiger Linksrand plus
   gedämpfter Hintergrund derselben Farbe. Damit die Ecken rund werden
   können, braucht die Tabelle border-collapse: separate — .app-table
   bringt das mit. */
.app-row-highlight > td {
  background: rgba(74,138,66,0.18);
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
}
.app-row-highlight > td:first-child {
  border-left: 4px solid var(--color-primary);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.app-row-highlight > td:last-child {
  border-right: 1px solid var(--color-primary);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Gedämpfter Fliesstext. Anders als .app-meta-row bricht er um und schneidet
   nicht ab — .app-meta-row ist eine einzeilige Kopfzeile mit Ellipse und
   gehört deshalb nicht in eine Tabellenzelle. */
.app-muted { color: var(--color-text-muted); }

/* ── Kartentitel ─────────────────────────────────────────
   .jzv-card-name ist der historische Name aus dem Jagdkalender und bleibt
   als Alias bestehen, damit dort nichts umgeschrieben werden muss. */
.app-card-title,
.jzv-card-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.3;
}

/* ── Wiederkehrende Textbausteine ────────────────────────
   Dieselben drei Schriftstufen wie .app-subitem / .app-meta-row. */

/* Erläuterung unter einem Kartenkopf */
.app-hint {
  font-size: 0.73rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* Abgesetzter Hinweiskasten, z.B. eine allgemeine Bemerkung */
.app-note {
  font-size: 0.76rem;
  color: var(--color-text);
  padding: 8px 11px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
}
.app-note-label { font-size: 0.73rem; color: var(--color-text-muted); }

/* „Noch nichts vorhanden" */
.app-empty {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 6px 0;
}

/* ── Abschnittskopf ──────────────────────────────────────
   Eine Zeile über einer Gruppe von Karten: Beschriftung, Anzahl, Badge und
   Aktionen. Die Beschriftung selbst ist .section-label (layout.css), die
   Vorgabe des Hauses — Termine, Gesellschafts-Jagd, Mail-Empfänger und Wiki
   nutzen sie. Ein Rahmen um die Karten wäre die schwerere Variante: er
   verdoppelt Ränder und frisst Breite. */
.app-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 10px;
}
.app-section-head:first-child { margin-top: 4px; }
.app-section-head .section-label { margin: 0; }
.app-section-count {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Klapp-Dreieck. Es hängt allein an aria-expanded des umgebenden Knopfes,
   damit das Umschalten ein einziges Attribut ist. Wird das Dreieck dagegen
   als Text gesetzt, muss beim Umschalten der richtige Textknoten getroffen
   werden — in den Freigaben erwischte es den Knoten mit dem Gruppennamen,
   und der Name verschwand beim ersten Klick (Build 202). */
.app-caret::before { content: '▸'; }
[aria-expanded="true"] .app-caret::before { content: '▾'; }

/* Fusszeile einer Karte: „Erstellt von … · Geändert von …" */
.app-meta-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 0.73rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Schalter in der Kopfzeile, z.B. „Bearbeiten" / „Fertig" */
.app-header-btn {
  margin-left: auto;
  font-size: 0.8rem;
  padding: 4px 10px;
}

/* Knopfleiste über einem Inhalt */
.app-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Kleine Aktionen direkt am Inhalt (bearbeiten, entfernen) */
/* Schloss statt Knopf: die Aktion ist an dieser Zeile nicht mehr möglich.
   Bewusst kein disabled-Button — es gibt nichts zu drücken. Der Platz bleibt
   aber besetzt, damit die Aktionsspalte nicht springt, wenn eine Meldung
   genehmigt wird. (Build 216) */
.app-gesperrt {
  font-size: 0.8rem;
  opacity: 0.45;
  cursor: default;
}

.app-mini-btn {
  font-size: 0.73rem;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface2);
  color: var(--color-text);
}
.app-mini-btn-primary {
  background: rgba(74,138,66,0.15);
  color: var(--color-primary-light);
  border-color: rgba(74,138,66,.5);
}
.app-mini-btn-danger {
  background: rgba(var(--color-danger-rgb),0.15);
  color: var(--color-danger);
  border-color: rgba(var(--color-danger-rgb),.5);
}

/* ── Aktionsgruppe (Icon-Buttons) ───────────────────────── */
.app-actions {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
  margin-left: 2px;
}