/* ─────────────────────────────────────────────────────────────────────────
   biodanza-cockpit — css/mod-finance.css

   Geschichtserzaehlung: Stile des Bau-Pakets "finance+calendar+ausschreibung" — Einnahmen/Zahlungen, Block-Termine, Ausschreibungen. Praefixe .finance-, .calendar-, .ausschreibung-.
   Gehoert NUR diesem Paket (Parallel-Bau-Schutz, DECISION in modules.css).

   Regeln fuer alle Modul-Stile:
     - Farben nur als var(--color-...), Abstaende als var(--space-...) —
       sonst bleibt der Screen im Dunkel- und Ruhig-Modus hell
     - Klassen mit Modul-Praefix, damit nichts in fremde Screens wirkt
     - Ruhiger Modus: :root[data-quiet="true"] .mein-element { ... }
     - Touch-Ziele mindestens 44 px; 360 px Breite ohne horizontales Scrollen
   ───────────────────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════
   Einnahmen (.finance-*)  — Kacheln, Filter, Zahlungsliste, Zahlungs-Formular
   ═════════════════════════════════════════════════════════════════════════ */

.finance-block-name,
.calendar-block-name {
  margin: 0;
}

/* Vier Kacheln: "Gesamt" ueber die ganze Breite, darunter Bezahlt/Offen/Raten.
   Auf dem Handy 2 Spalten, ab Tablet-Breite alle drei Teile in einer Reihe. */
.finance-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.finance-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-m);
}

.finance-tile--total { grid-column: 1 / -1; border-left-color: var(--color-primary); }
.finance-tile--paid { border-left-color: var(--color-success); }
.finance-tile--open { border-left-color: var(--color-danger); }
.finance-tile--installments { border-left-color: var(--color-warning-text); grid-column: 1 / -1; }
.finance-tile--other { border-left-color: var(--color-border); }

.finance-tile__label {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.finance-tile__value {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.finance-tile--total .finance-tile__value { font-size: var(--font-size-title); }

.finance-tile__note {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.finance-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.finance-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.finance-list-head__count {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  min-width: 0;
}

/* Betrag als Kartentitel: gross, damit er beim Durchblaettern ins Auge faellt */
.finance-payment .card__title {
  font-variant-numeric: tabular-nums;
}

.finance-hint {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border-radius: var(--radius-m);
}

.finance-hint a { color: inherit; font-weight: var(--font-weight-semibold); }

@media (min-width: 640px) {
  .finance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-tile--installments { grid-column: auto; }
  .finance-filters { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .finance-filters > .field { min-width: 14rem; }
}

:root[data-quiet="true"] .finance-tile { border-color: var(--color-divider); }

/* ═════════════════════════════════════════════════════════════════════════
   Termine (.calendar-*)
   ═════════════════════════════════════════════════════════════════════════ */

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Aktionen einer Terminkarte: Link, Schalter, Datei — umbrechen statt abzuschneiden */
.calendar-event .card__actions {
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

.calendar-event .toggle {
  width: auto;
  min-height: var(--touch-min);
  gap: var(--space-2);
}

.calendar-google { text-decoration: none; }

.calendar-hint { margin: 0; font-size: var(--font-size-small); }

.calendar-vivencia {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calendar-vivencia__name { margin: 0; overflow-wrap: anywhere; }

.calendar-vivencia__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.calendar-series-preview {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.calendar-series-max { margin: 0; font-size: var(--font-size-small); }

/* ═════════════════════════════════════════════════════════════════════════
   Ausschreibung (.ausschreibung-*)
   ═════════════════════════════════════════════════════════════════════════ */

.ausschreibung-hint {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  border-radius: var(--radius-m);
  font-size: var(--font-size-small);
}

/* Terminzeile: Datum | Uhrzeit | Entfernen — die Felder teilen sich die Breite */
.ausschreibung-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.ausschreibung-date-actions,
.ausschreibung-image__actions,
.ausschreibung-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ausschreibung-image__preview {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  margin: 0 auto;
  border-radius: var(--radius-m);
  border: 1px solid var(--color-border);
  object-fit: contain;
}

.ausschreibung-blocked {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border-radius: var(--radius-m);
}

.ausschreibung-blocked p { margin: 0 0 var(--space-1); }
.ausschreibung-blocked a { color: inherit; font-weight: var(--font-weight-semibold); }

.ausschreibung-block__name { margin: 0; overflow-wrap: anywhere; }

.ausschreibung-output {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ausschreibung-output > .btn { flex: 1 1 auto; }

/* Druckansicht (printView) */
.ausschreibung-print h1 { margin-top: 0; }