/* Was Tabler nicht mitbringt – Eigenes dieser Anwendung.
 *
 * Darunter liegt Tabler (app/web/statisch/tabler/), darüber unsere Werte (werte.css).
 * Hier steht nur noch, was es in Tabler nicht gibt: das Formularraster mit der
 * Kennzeichnung am Feld (`.feld`, `.zeile-2`, `.auswahl-zeile`), die Nebeneinander-Ansicht
 * von Entwurf und PDF, die Summenlisten und ein paar Kleinigkeiten wie `.zahl-feld`.
 *
 * Seit der Umstellung ist die Datei von 500 auf gut 340 Zeilen geschrumpft; alles, was
 * Aussehen von Knöpfen, Tabellen, Meldungen und Abzeichen war, kommt jetzt von Tabler
 * bzw. aus den Bausteinen (`vorlagen/_bausteine.html`).
 *
 * Weiterhin gilt: **keine Regeln auf Elementnamen.** Ein `body { … }` oder `table { … }`
 * hier würde Tabler überstimmen.
 */
:root {
  --hintergrund: #fafaf9;
  --flaeche: #ffffff;
  --text: #1c1917;
  --leise: #78716c;
  --linie: #e7e5e4;
  --akzent: #6d28d9;
  --zeile-hover: #f5f3ff;
  --angebot: #b45309;
  --aktuell: #047857;
  --erledigt: #57534e;
  --abgelehnt: #b91c1c;
  --akzent-flaeche: #6d28d9;
  --fehler-flaeche: #fef2f2;
  --erfolg-flaeche: #ecfdf5;
  --pruef-flaeche: #fffbeb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #1c1917;
    --flaeche: #262220;
    --text: #f5f5f4;
    --leise: #a8a29e;
    --linie: #3a3532;
    --akzent: #c4b5fd;
    --zeile-hover: #2e2a3d;
    --angebot: #fbbf24;
    --aktuell: #34d399;
    --erledigt: #a8a29e;
    --abgelehnt: #f87171;
    --akzent-flaeche: #7c3aed;
    --fehler-flaeche: #3a1f1f;
    --erfolg-flaeche: #16302a;
    --pruef-flaeche: #33290f;
  }
}

.kopf {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 12px 24px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kopf .marke { font-weight: 600; color: var(--text); }
.kopf nav { flex: 1; }
.kopf .benutzer { color: var(--leise); font-size: 13px; }

.anzahl, .leise, .leer { color: var(--leise); }
/* Nur klickbare Zeilen zeigen Hand-Zeiger und Hervorhebung (siehe zeilen.js) */
.projekte tbody tr.klickbar { cursor: pointer; }
.projekte tbody tr.klickbar:hover td { background: var(--zeile-hover); }
.projekte .nummer, .projektkopf .nummer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.projekte .nummer a { color: var(--akzent); }
.projekte .zahl { text-align: right; font-variant-numeric: tabular-nums; }
#mehr td { text-align: center; }
.projektlink { margin: 6px 0 0; }
.projektkopf .projektlink a { color: var(--akzent); font-weight: 600; }
.projektkopf .nummer { margin: 0; color: var(--leise); }

ul.liste { margin: 0; padding-left: 20px; }
.notiz { white-space: pre-wrap; margin: 0; }

@media (max-width: 700px) {
  main { padding: 16px; }
  .kopf { padding: 12px 16px; gap: 12px; }
}

/* --- Formulare ------------------------------------------------------------------------- */

.titelzeile, .projektkopf {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.weiche {
  display: inline-flex;
  margin: 0 0 24px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  background: var(--flaeche);
}
.weiche a { padding: 8px 16px; color: var(--text); }
.weiche a + a { border-left: 1px solid var(--linie); }
.weiche a[aria-current="page"] { background: var(--akzent-flaeche); color: #fff; font-weight: 600; }
.weiche a:hover { text-decoration: none; }

.formular { max-width: 640px; }
.feld { margin: 0 0 18px; }
.feld > label, .beschriftung, .formular > label { display: block; font-weight: 600; margin: 0 0 4px; }
.formular input:not([type=hidden]), .formular select, .formular textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
  color: inherit;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.formular option:disabled { color: var(--leise); }
.hinweis { margin: 4px 0 0; font-size: 13px; color: var(--leise); }
.status-wahl { border: 0; padding: 0; }
.status-wahl legend { font-size: inherit; font-weight: 600; padding: 0; margin: 0 0 4px; }
.status-wahl label { display: inline-flex; gap: 6px; align-items: center; margin-right: 20px; }
.formular .status-wahl input { width: auto; }
.hauptprojekt {
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.hauptprojekt a { font-size: 13px; }
.gewaehlt {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
#kunden-treffer { margin-top: 8px; }
#kunden-treffer p { margin: 4px 0; }
.projekte tr.gesperrt td { color: var(--leise); }
#haupt-treffer { margin-top: 12px; }

.neuer-kontakt { margin-top: 8px; }
.neuer-kontakt summary { color: var(--akzent); cursor: pointer; font-size: 14px; }
.neuer-kontakt[open] {
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.neuer-kontakt .zeile { display: grid; grid-template-columns: 2fr 2fr 1.5fr; gap: 8px; margin: 10px 0; }
.neuer-kontakt .zeile label { font-size: 13px; color: var(--leise); }

@media (max-width: 700px) {
  .neuer-kontakt .zeile { grid-template-columns: 1fr; }
}

.probe {
  padding: 6px 24px;
  font-size: 13px;
  font-weight: 600;
  color: #422006;
  background: #fbbf24;
}

/* --- Archivieren und Löschen ----------------------------------------------------------- */

.filter { display: inline-flex; gap: 6px; align-items: center; margin-left: 16px; font-size: 14px; color: var(--leise); }
.projekte tr.archiviert td { color: var(--leise); }
.projekte tr.archiviert td a { color: var(--leise); }

.aktionsbereich { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linie); }
.aktionsbereich .aktionen { margin-top: 8px; }

.dialog {
  max-width: 480px;
  padding: 24px;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
}
.dialog::backdrop { background: rgb(0 0 0 / .4); }
.dialog h2 { margin-top: 0; }
.dialog .aktionen { justify-content: flex-end; }

/* --- Belege ------------------------------------------------------------------------------ */

.kopf nav a + a { margin-left: 16px; }
.projekte tr.entwurf td { background: var(--fehler-flaeche); }

.formular fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
/* Bootstrap setzt <legend> groß wie eine Überschrift; im Formular ist es eine Beschriftung */
.formular legend { font-size: inherit; font-weight: 600; padding: 0; margin: 0 0 4px; }
.zeile-2, .zeile-3 { display: grid; gap: 12px 16px; }
.zeile-2 { grid-template-columns: 1fr 1fr; }
.zeile-3 { grid-template-columns: 1fr 1fr 1fr; }
.zeile-2 > div > label, .zeile-3 > div > label { display: block; font-weight: 600; margin: 0 0 4px; }
.auswahl-zeile label, .weiche label { display: inline-flex; gap: 6px; align-items: center; margin-right: 16px; }
.formular .auswahl-zeile input, .formular .weiche input, .formular .kontrolle input { width: auto; }
.formular .weiche { margin-bottom: 10px; padding: 0; }
.formular .weiche label { margin: 0; padding: 8px 16px; cursor: pointer; }
.formular .weiche label + label { border-left: 1px solid var(--linie); }
.formular .weiche label:has(input:checked) { background: var(--akzent-flaeche); color: #fff; font-weight: 600; }
.kontrolle { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.betraege { margin: -8px 0 18px; font-size: 14px; color: var(--leise); }
.betraege strong { color: var(--text); font-variant-numeric: tabular-nums; }
.feldfehler { margin: 4px 0 0; font-size: 13px; color: var(--abgelehnt); }

/* Vorschläge der Belegerkennung: sichtbar, bis der Mensch sie bestätigt (neutral, Akzentfarbe) */
.vorschlag { outline: 2px dashed var(--akzent); outline-offset: 1px; }
.vorschlag-hinweis { font-size: 12px; font-weight: 500; color: var(--akzent); margin-left: 6px; }

@media (max-width: 700px) {
  .zeile-2, .zeile-3 { grid-template-columns: 1fr; }
}

/* --- Wirtschaftliches (Projektsummen) ---------------------------------------------------- */

/* Die Summenliste: Bezeichnung links, Betrag rechts an der Kante. »max-content« für die
   Beträge hieß früher: Sie laufen aus der Karte, wenn der Zusatz in Klammern lang wird –
   seit der Kasten in einer Spalte steht, fiel das auf. Jetzt nimmt die linke Spalte den
   Rest und bricht um, die Zahlenspalte bleibt so breit, wie sie sein muss. */
dl.summen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 4px 24px;
  margin: 0;
}
dl.summen dt { min-width: 0; }
dl.summen dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
dl.summen dd .text-secondary { font-weight: 400; }
dl.summen dt.unterpunkt { padding-left: 16px; color: var(--leise); }
dl.summen dt.unterpunkt + dd { font-weight: 400; }
dl.summen dd.hervorheben { color: var(--angebot); font-weight: 600; }

/* Belegerkennung */
.erkennung-pruefen { color: var(--angebot); }
#erkennung-laeuft { margin-left: 8px; }

/* Ordner-Einlesen */
.aktionen-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#einlesen-stand h2 { font-size: 16px; margin: 24px 0 8px; }
kbd { font: inherit; font-size: 12px; padding: 0 4px; border: 1px solid var(--linie); border-radius: 3px; }
.ordner-wahl { display: flex; gap: 8px; }
.ordner-wahl input { flex: 1; min-width: 0; }
.ordner-wahl button.zweitrangig { padding: 8px 14px; }
#dialog-offen { display: none; }
#dialog-offen.htmx-request { display: block; }

/* Entwürfe durchgehen */
.aktionen .vorn { order: -1; }
.bestaetigen-stand { margin-top: 24px; font-size: 14px; }
.bestaetigen-stand p { margin: 0; }
.bestaetigen-stand .fehlt, .fehlt-text { color: var(--abgelehnt); }
.fehlt-angabe:not([hidden]) ~ .fehlt-angabe:not([hidden])::before { content: " · "; color: var(--leise); }
.bestaetigen-stand .vollstaendig { color: var(--aktuell); }
.entwurf-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 32px; align-items: start; }
.entwurf-layout .beleg-pdf { position: sticky; top: 16px; }
.entwurf-layout iframe { width: 100%; height: 85vh; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
@media (max-width: 1000px) { .entwurf-layout { grid-template-columns: 1fr; } .entwurf-layout .beleg-pdf { position: static; } }
td.zahl { white-space: nowrap; }

/* Entwurf prüfen, direkt am Feld:
   rot = Pflichtangabe fehlt, blockiert das Bestätigen; orange = Prüf-Hinweis, blockiert nicht */
.pruefen, .formular input.pruefen {
  outline: 2px solid var(--angebot); outline-offset: 1px; background: var(--pruef-flaeche);
}
.pflicht-offen, .formular input.pflicht-offen {
  outline: 2px solid var(--abgelehnt); outline-offset: 1px; background: var(--fehler-flaeche);
}
fieldset.pruefen, fieldset.pflicht-offen, div.feld.pruefen, div.feld.pflicht-offen {
  padding: 8px 10px; border-radius: 6px;
}
.pflicht-hinweis, .pruef-hinweis, .feldfehler { display: flex; gap: 4px; align-items: baseline; }
.pflicht-hinweis, .pruef-hinweis { margin: 6px 0 0; font-size: 13px; font-weight: 500; }
.pflicht-hinweis { color: var(--abgelehnt); }
.pruef-hinweis { color: var(--angebot); }
.feld-hinweise { margin: -12px 0 18px; }
.feld-hinweise:not(:has(p:not([hidden]))) { display: none; }
.pruef-zusammenfassung { color: var(--angebot); }
.legende { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--tblr-secondary); margin: 0 0 16px; }
.legende span::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.legende .l-pflicht::before { outline: 2px solid var(--kz-fehlt); background: var(--kz-fehlt-flaeche); }
.legende .l-pruef::before { outline: 2px solid var(--kz-pruefen); background: var(--kz-pruefen-flaeche); }
.legende .l-vorschlag::before { outline: 2px dashed var(--kz-vorschlag); background: var(--kz-vorschlag-flaeche); }

/* Überfällig: nie gespeichert, immer tagesaktuell abgeleitet */
.ueberfaellig-text { color: var(--abgelehnt); font-weight: 600; }
.faellig-rueckfall { align-self: end; margin-bottom: 10px; }
/* Belegliste: Suche nimmt den Platz, der neben den drei Filtern bleibt */
.suche input[type=search] { flex: 1 1 260px; width: auto; }

/* Rechnungen: Positionstabelle und Summen */
.positionen { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.positionen th { text-align: left; font-size: 12px; color: var(--leise); font-weight: 600; padding: 0 6px 4px 0; }
.positionen th.zahl { text-align: right; }
.positionen td { padding: 3px 6px 3px 0; vertical-align: top; }
.positionen input, .positionen select { width: 100%; margin: 0; }
.positionen .pos-bezeichnung { width: 46%; }
.positionen input.schmal { width: 72px; }
.positionen input.zahl-feld { width: 110px; text-align: right; }
.positionen button.loeschen { padding: 6px 10px; line-height: 1; }
.positionen-knoepfe { margin-bottom: 8px; }
.aufschlag-wahl { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--leise); }
.aufschlag-wahl input.schmal { width: 64px; margin: 0; }
.rechnungssummen dt.gesamt, .rechnungssummen dd.gesamt { font-weight: 700; font-size: 17px; }

/* Storno: die aufgehobene Rechnung bleibt sichtbar, tritt aber zurück */
/* Pflichtangabe im Dialog (Storno, Gutschrift) – kurz und ohne Live-Prüfung */
.pflicht-stern { font-size: 12px; font-weight: 500; color: var(--abgelehnt); margin-left: 4px; }

/* Rechnungsliste: Status und sortierbare Spalten */
.rechnungsliste th.sortiert { color: var(--text); }
.anzahl .leise { font-weight: 400; }

/* Kundenportal: was noch hochzuladen ist, und was erledigt ist */

/* Bankumsätze: Eingänge heben sich ab, der Zweck darf umbrechen */
.bankliste .zweck { color: var(--leise); font-size: 13px; }
.bankliste .zahl.eingang { color: var(--aktuell); font-weight: 600; }

/* Bankumsatz ohne Beleg: erledigt, aber ohne Dokument */

/* Belegauswahl in einer Buchung: Betrag und Knopf stehen in einer Zeile */
.zeilenformular { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.zeilenformular input.zahl-feld { width: 84px; text-align: right; margin: 0; }
.zeilenformular button { white-space: nowrap; }

/* Gelesener Wert ohne Eingabefeld (z. B. der Rechnungsempfänger laut Beleg) */
.gelesener-wert { margin: 0 0 4px; }

/* Abgeleitete Kennzahlen im Kasten »Wirtschaftliches« – abgesetzt von den Summen darüber */
.summen dt.kennzahl, .summen dd.kennzahl { border-top: 1px solid var(--linie); padding-top: 8px; }
.summen dd.kennzahl { font-weight: 600; }