/* ==========================================================================
   Rechnungs-Fix.de – Editor-Ergänzungen 3.11.0
   --------------------------------------------------------------------------
   Diese Datei wird NUR auf /erstellen/ geladen. Die erzeugte Tailwind-Datei
   /assets/css/site.css bleibt unangetastet. /assets/css/editor-3.10.0.css
   wird durch diese Datei ERSETZT: Sie enthält dieselben Regeln, aber ein
   geändertes Kartenlayout. Eine geänderte Datei braucht zwingend eine neue
   Adresse (?v=…), weil die .htaccess .css ein Jahr lang unveränderlich
   speichert – sonst sähen Bestandsnutzer die alte Fassung.

   Inhalt:
     1. DATEV-Klappfeld – farblich hervorgehoben (hell UND dunkel)
     2. Kundenbuch – Karten lesbar im Dunkelmodus, luftig gesetzt und
        ZWEIZEILIG (Text oben über die volle Breite, Knöpfe darunter)

   ÄNDERUNG GEGENÜBER 3.10.0
     Nur Abschnitt 2, Kartenlayout: aus „Text links / Knöpfe rechts" wurde
     „Text oben / Knöpfe darunter". Die dunklen Farben der Karte sind
     unverändert geblieben.

   WARUM EIGENE KLASSEN FÜR DAS KUNDENBUCH
   site.css enthält für den Dunkelmodus Regeln mit !important, zum Beispiel
         body.dark :is(.bg-slate-50, ...) { background-color:#1e293b!important }
   Solche Regeln gewinnen gegen jede spätere Regel ohne !important. Eine
   Fläche, die eine dieser Klassen trägt, lässt sich deshalb nicht zuverlässig
   umfärben. Die Kundenkarte bekommt deshalb eigene Klassennamen (kb-…) und
   trägt KEINE Tailwind-Farbklassen mehr. Damit gilt hier ausschließlich, was
   in dieser Datei steht – in beiden Modi nachvollziehbar und prüfbar.

   FARBWAHL
   Kein Rot und kein Gelb (Verwechslung mit Fehler/Warnung). Das DATEV-Feld
   nutzt einen ruhigen Blauton aus der Markenfamilie: hell #1d4ed8, dunkel
   #60a5fa. Die Kennzahlen der Kontraste stehen in _build/tools/pruefung/
   datev-pruefung.mjs und werden dort nachgerechnet (WCAG AA, ≥ 4.5:1).
   ========================================================================== */

/* ==========================================================================
   1. DATEV-KLAPPFELD
   --------------------------------------------------------------------------
   Der Nutzer soll auf einen Blick sehen: das hier ist kein normales
   Rechnungsfeld. Drei Merkmale, die in beiden Modi tragen:
     · farbiger linker Rand (4 px zu, 6 px offen)
     · getönter Kopf (zu: hell, offen: kräftiger)
     · das vorhandene Tabellen-Symbol vor der Überschrift
   ========================================================================== */

/* Der Rand wird hier vollständig gesetzt – das Feld trägt bewusst KEINE
   Tailwind-Randklassen (border, border-slate-200). Grund: site.css setzt im
   Dunkelmodus
       body.dark :is(.border-slate-200, …):not(#pages-container *){border-color:#334155!important}
   Diese Regel würde den blauen Akzentrand zu Grau machen, weil sie !important
   nutzt und höher spezifisch ist. Ohne die Klasse greift sie nicht. */
.datev-klappfeld {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1d4ed8;
}

.datev-klappfeld > summary {
    background-color: #eff6ff;
    border-left: 0;
}

.datev-klappfeld > summary:hover {
    background-color: #dbeafe;
}

/* Aufgeklappt: kräftigere Tönung und dickerer Rand – der Unterschied ist
   auch ohne Farbwahrnehmung an der Randbreite erkennbar. */
.datev-klappfeld[open] {
    border-left-width: 6px;
    border-left-color: #1e40af;
}

.datev-klappfeld[open] > summary {
    background-color: #dbeafe;
}

.datev-klappfeld[open] > summary:hover {
    background-color: #bfdbfe;
}

/* Der Titel bleibt in der Akzentfarbe, damit die Zugehörigkeit klar ist. */
.datev-klappfeld .abschnitt-titel {
    color: #1e40af;
}

/* ------------------------------------------------------------------ dunkel */
body.dark .datev-klappfeld {
    border-color: #334155;
    border-left-color: #60a5fa;
}

body.dark .datev-klappfeld > summary {
    background-color: #12234a;
}

body.dark .datev-klappfeld > summary:hover {
    background-color: #1b3260;
}

body.dark .datev-klappfeld[open] {
    border-left-color: #93c5fd;
}

body.dark .datev-klappfeld[open] > summary {
    background-color: #1b3260;
}

body.dark .datev-klappfeld[open] > summary:hover {
    background-color: #23406f;
}

body.dark .datev-klappfeld .abschnitt-titel {
    color: #bfdbfe;
}

/* ==========================================================================
   2. KUNDENBUCH – KARTEN IM DUNKELMODUS UND LUFTIGERE ABSTÄNDE
   --------------------------------------------------------------------------
   Behobener Fehler: Die Kundenkarte war im Dunkelmodus hell (sie trug die
   Tailwind-Klasse bg-slate-50 bzw. im aufgeklappten Blatt bg-slate-100/70,
   für das es gar keine Dunkelmodus-Regel gibt), während der Text über
   body.dark auf hellgrau gedreht wurde. Ergebnis: hellgraue Schrift auf
   hellem Grund.

   Zusätzlich waren die Abstände zu eng. Beides ist hier behoben: eigene
   Klassennamen, eigene Farben für hell und dunkel, mehr Innenabstand und
   eine größere Zeilenhöhe.
   ========================================================================== */

/* --------------------------------------------------------------- die Karte */
/* Fassung 3.11.0 – ZWEIZEILIGES LAYOUT
   --------------------------------------------------------------------------
   Vorher lagen Text und Knöpfe NEBENeinander: .kb-daten (flex: 1 1 auto)
   und .kb-aktionen (flex-shrink: 0). Die Knöpfe nahmen sich ihre natürliche
   Breite – bei vier Knöpfen blieb dem Text je nach Fensterbreite nur ein
   schmaler Streifen, und Wörter brachen mitten entzwei.

   Jetzt: Der Textblock steht OBEN und nutzt die volle Breite, die Knöpfe
   folgen DARUNTER in einer eigenen Zeile mit Trennlinie. So kann der Text
   an Leerzeichen umbrechen, statt in eine Rumpelspalte gequetscht zu werden. */
.kb-karte {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius:0;
    overflow: hidden;
}

/* Stapelt Text und Aktionen untereinander (nicht mehr nebeneinander). */
.kb-zeile {
    display: flex;
    flex-direction: column;
}

/* Klickfläche „Kunde übernehmen": volle Breite, eigener Innenabstand.
   Der Hover liegt hier (nicht mehr auf .kb-zeile) – dort, wo auch geklickt
   wird. Die Farbwerte sind gegenüber 3.10.0 unverändert. */
.kb-daten {
    min-width: 0;                 /* Text darf schrumpfen statt überzulaufen */
    padding: 1.25rem 1.25rem 1rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

.kb-daten:hover {
    background-color: #f1f5f9;
}

.kb-name {
    color: #0f172a;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.55;
    /* Wörter werden an Leerzeichen umbrochen. Nur wenn ein EINZELNES Wort
       allein nicht in die Zeile passt (sehr lange Zeichenkette ohne
       Leerzeichen), wird es getrennt – sonst liefe es aus der Karte heraus.
       Bewusst NICHT break-all oder anywhere: die zerteilen auch normale
       Wörter mitten im Satz. */
    overflow-wrap: break-word;
}

.kb-adresse {
    color: #475569;
    margin-top: 0.35rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* Die Zeile „Letzte Rechnung: …" kommt als fertiges HTML aus
   kundenHistorieHTML() und bringt eigene Farbklassen mit (text-slate-500
   bzw. text-slate-600). Diese Klassen sind in site.css für BEIDE Modi
   geregelt:
       hell   #64748b / #475569 auf #f8fafc  ->  4.9:1 / 7.4:1
       dunkel #94a3b8 / #cbd5e1 auf #1e293b  ->  5.9:1 / 9.4:1
   Sie werden deshalb bewusst NICHT überschrieben – ein Überschreiben
   bräuchte !important, weil site.css die Dunkelmodus-Regeln mit !important
   und einer ID in :not(...) sehr spezifisch hält. Hier steht nur der
   Abstand. Die Kontraste rechnet die Prüfung nach. */
.kb-historie {
    margin-top: 0.6rem;
}

/* Eigene Zeile unter dem Text, klar abgetrennt und mit Luft zum Tippen. */
.kb-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;               /* auf schmalen Schirmen in zwei Reihen */
    gap: 0.5rem;
    padding: 0.9rem 1.25rem 1.25rem;
    border-top: 1px solid #e2e8f0; /* sichtbare Trennung Text / Aktionen */
}

/* Bequem klickbar, auch mit dem Daumen. */
.kb-aktionen button {
    min-height: 2rem;
    max-width: 100%;
}

/* ------------------------------------------------- das aufgeklappte Blatt */
.kb-blatt {
    border-top: 1px solid #e2e8f0;
    background-color: #f1f5f9;
    padding: 0.875rem;
}

.kb-blatt-hinweis {
    color: #475569;
    line-height: 1.65;
}

.kb-blatt-kopf-text {
    color: #334155;
    font-weight: 600;
}

.kb-blatt-anzahl {
    color: #475569;
}

/* --------------------------------------------- eine Rechnung im Blatt */
.kb-rechnung {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius:0;
    line-height: 1.55;
    cursor: pointer;
    transition: background-color .15s ease;
}

.kb-rechnung:hover {
    background-color: #f8fafc;
}

.kb-rechnung-nr {
    color: #0f172a;
    font-weight: 700;
}

.kb-rechnung-datum {
    color: #475569;
}

.kb-rechnung-betrag {
    color: #0f172a;
    font-weight: 700;
    flex-shrink: 0;
}

/* --------------------------------------------------- schwebende Leiste */
.kb-leiste {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius:0;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .12);
}

.kb-leiste-zaehler {
    color: #334155;
    font-weight: 600;
}

/* ------------------------------------------------------------------ dunkel */
/* Die dunklen Farben der Karte sind gegenüber 3.10.0 UNVERÄNDERT.
   Neu ist nur die Trennlinie der Aktionszeile und dass der Hover jetzt an
   .kb-daten hängt (vorher .kb-zeile) – die Farbwerte sind dieselben. */
body.dark .kb-karte {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark .kb-daten:hover {
    background-color: #263449;
}

body.dark .kb-name {
    color: #f8fafc;
}

body.dark .kb-adresse {
    color: #cbd5e1;
}

body.dark .kb-aktionen {
    border-top-color: #334155;
}

body.dark .kb-blatt {
    border-top-color: #334155;
    background-color: #172033;
}

body.dark .kb-blatt-hinweis,
body.dark .kb-blatt-anzahl {
    color: #cbd5e1;
}

body.dark .kb-blatt-kopf-text {
    color: #e2e8f0;
}

body.dark .kb-rechnung {
    background-color: #16203a;
    border-color: #334155;
}

body.dark .kb-rechnung:hover {
    background-color: #1c2a45;
}

body.dark .kb-rechnung-nr,
body.dark .kb-rechnung-betrag {
    color: #f8fafc;
}

body.dark .kb-rechnung-datum {
    color: #cbd5e1;
}

body.dark .kb-leiste {
    background-color: #16203a;
    border-color: #334155;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .5);
}

body.dark .kb-leiste-zaehler {
    color: #e2e8f0;
}

/* Die Kästchen selbst erben die Farben aus site.css (dort sind input/select
   bereits für den Dunkelmodus gesetzt). Nur die Größe wird angehoben, damit
   sie mit der luftigeren Karte zusammenpassen. */
.kb-karte input[type="checkbox"],
.kb-blatt input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Auf schmalen Bildschirmen die Aktionen unter die Daten setzen, statt sie
   zu quetschen. */
@media (max-width: 480px) {
    /* Das zweizeilige Layout gilt bereits auf jeder Breite. Auf schmalen
       Schirmen wird nur der Innenabstand etwas kleiner, damit die Knöpfe
       in zwei Reihen Platz haben und gut treffbar bleiben. */
    .kb-daten {
        padding: 1rem 1rem 0.85rem;
    }

    .kb-aktionen {
        padding: 0.8rem 1rem 1rem;
        gap: 0.45rem;
    }

    .kb-aktionen button {
        min-height: 2.25rem;   /* Daumenfreundlich */
    }
}

/* Die Breite des Kundenbuch-Fensters steht im Markup:
   #modal-contacts > div  ->  max-w-2xl (672 px).
   Früher war es max-w-xl (576 px); das war für Karte und Knopfzeile zu eng.
   Geprüft wird das in _build/tools/pruefung/datev-pruefung.mjs. */