/* ============================================================
   LAYOUT-STIL.CSS - Darstellung aus Einstellungen → Layout
   gilt für die ganze App (Attribute am <html>, gesetzt von layout-stil.js)
     data-knopf   standard | rund
     data-rahmen  linie | karte
     data-status  flaeche | pille
     data-tabs    linie | segmente
   ============================================================ */

/* ============================================================
   KNÖPFE
   ============================================================ */
/* Standard: überall gleiche, leicht abgerundete Ecken */
html[data-knopf="standard"] :is(.btn, .btn-cancel, .btn-submit, .table-detail-button,
  .dashboard-action-btn, .btn-kanban-action, .login-card button, .field-add-button, .pqa-toggle, .pqa-save) { border-radius: 8px; }

/* Rund: Pillenform, Nebenknöpfe sanft hinterlegt ohne Rand */
/* auf grau hinterlegten Flächen weiße Knöpfe, damit sie sichtbar bleiben */

/* ============================================================
   RAHMEN MIT ÜBERSCHRIFT
   ============================================================ */

/* Überschrift im Rahmen immer in der Akzentfarbe – bei „Linie“ und „Karte“,
   für alle Rahmenarten (Mehrfachauswahl, Detail-Boxen, Formular-Abschnitte …) */
:is(fieldset.multi-select, fieldset.va-form-box, fieldset.tw-ort, fieldset.an-tage) > legend,
#status-filter > legend{
  color: var(--accent-dark, var(--gold-mittel));
}

/* ============================================================
   STATUS-ETIKETTEN
   ============================================================ */
/* Fläche: weich hinterlegt, leicht abgerundet, ohne Rand */
html[data-status="flaeche"] :is(.ve-st, .th-status, .te-status, .ve-badge, .badge, .be-art) {
  border-radius: 8px;
  border-color: transparent;
}

/* Pille: runde Kontur mit farbigem Punkt */
/* Farben der Etiketten mit dunkler Schrift */

/* ============================================================
   REITER
   ============================================================ */
/* Segmente: in einer Zeile bleiben, bei Platzmangel waagerecht wischen statt umbrechen */
/* Linie: Grundlinie als Schatten statt Rahmen – die Aktiv-Linie liegt immer genau darauf,
   auch wenn die Leiste scrollt (Handy) und der Rahmen sonst abgeschnitten würde */
html[data-tabs] .dialog-tabs { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--line, var(--neutral-200)); }
html[data-tabs] .dialog-tabs .tab-button { margin-bottom: 0; }
html[data-tabs] .dialog-tabs::-webkit-scrollbar { height: 0; }
html[data-tabs] .dialog-tabs { scrollbar-width: none; }
/* Ansicht umschalten (z. B. Bestellungen Liste/Kanban) im selben Stil */

/* ============================================================
   SYMBOL-KNÖPFE (.action-btn: Anrufen, Mobil, Karte, Mail, Bearbeiten, Löschen …)
   ============================================================ */
/* Kontur: Quadrat mit abgerundeten Ecken und grauem Rand (bisher) */

/* Kreis: rund, ohne Rand, in der Akzentfarbe hinterlegt */
html[data-symbol="kreis"] .action-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border-color: transparent;
  background: var(--accent-tint, var(--gold-tint));
  color: var(--accent-dark, var(--gold-mittel));
}
html[data-symbol="kreis"] .action-btn:hover:not(:disabled) {
  background: var(--login-background, var(--gold));
  border-color: transparent;
  color: #fff;
}
/* Löschen rot */
html[data-symbol="kreis"] .action-btn:is([data-delete], [data-loeschen], [title*="öschen"]) {
  background: var(--danger-tint, var(--pal-rot-hell));
  color: var(--danger, var(--pal-rot));
}
html[data-symbol="kreis"] .action-btn:is([data-delete], [data-loeschen], [title*="öschen"]):hover:not(:disabled) {
  background: var(--danger, var(--pal-rot));
  color: #fff;
}
html[data-symbol="kreis"] .action-btn:disabled { background: var(--surface, var(--neutral-100)); color: var(--pal-anthrazit-mittel); }

/* ============================================================
   RUNDE SYMBOLE IN LISTEN (.avatar-initials: Anfangsbuchstaben in Adressbuch,
   Bestellungen, Wareneingang; Symbole bei Material, Bestand,
   Veranstaltungsarten, Trainingseinheiten)
   Verlauf = bisher (kräftiger Farbverlauf, weiße Schrift)
   ============================================================ */
html[data-avatar="hell"] .avatar-initials {
  background: var(--pal-kupfer-hell);
  color: var(--pal-koralle-dunkel);
  box-shadow: inset 0 0 0 1px var(--pal-kupfer-mittel);
}
html[data-avatar="hell"] .avatar-initials:is(.avatar-material, .avatar-bestand) { background: var(--pal-senf-hell); color: var(--pal-senf-dunkel); box-shadow: inset 0 0 0 1px var(--pal-senf-mittel); }
html[data-avatar="hell"] .avatar-initials.avatar-supplier { background: var(--pal-blau-hell); color: var(--pal-blau-dunkel); box-shadow: inset 0 0 0 1px var(--pal-blau-mittel); }
/* Veranstaltungsarten / Trainingseinheiten: Farbe des Bereichs bleibt erkennbar */
html[data-avatar="hell"] .avatar-initials.te-symbol { background: var(--pal-senf-hell) !important; color: var(--pal-senf-dunkel); box-shadow: inset 0 0 0 1px var(--pal-senf-mittel); }
html[data-avatar="hell"] .avatar-initials.te-symbol[style*="--sym-hell"] {
  background: var(--sym-hell) !important;
  color: var(--sym-dunkel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sym-dunkel) 25%, transparent);
}
html[data-avatar="hell"] .te-symbol.te-b-vision       { background: var(--pal-anthrazit-hell) !important; color: var(--pal-violett-nacht); }
html[data-avatar="hell"] .te-symbol.te-b-auftrag      { background: var(--neutral-50) !important; color: var(--pal-kupfer); }
html[data-avatar="hell"] .te-symbol.te-b-gott         { background: var(--neutral-100) !important; color: var(--pal-blau); }
html[data-avatar="hell"] .te-symbol.te-b-eltern       { background: var(--neutral-100) !important; color: var(--pal-beere); }
html[data-avatar="hell"] .te-symbol.te-b-gemeinschaft { background: var(--pal-gruen-hell) !important; color: var(--pal-gruen-dunkel); }
html[data-avatar="hell"] .avatar-initials .material-icons { color: inherit; }

/* ============================================================
   KATEGORIE-ETIKETTEN (.th-baustein, .te-baustein: Veranstaltungsart,
   Typ, Baustein, Training – in der Farbe des Bereichs)
   Standard („Sanft“, Wert Kraeftig) = zart in der Farbe hinterlegt,
   dunkle Schrift, farbiger Punkt vorn – bei allen Etiketten gleich stark
   ============================================================ */
html[data-kategorie] :is(.th-baustein, .te-baustein) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  border: 0;
  background: color-mix(in srgb, currentColor 13%, var(--paper, #fff)) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* mit gewählter Farbe (FARBEN): Fläche aus der Farbe, Schrift in der dunklen Stufe */
html[data-kategorie] :is(.th-baustein, .te-baustein)[style*="--kat-farbe"] {
  background: color-mix(in srgb, var(--kat-farbe) 18%, var(--paper, #fff)) !important;
  color: var(--kat-dunkel) !important;
}
html[data-kategorie] :is(.th-baustein, .te-baustein)::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kat-farbe, currentColor);
}
/* Text oder Zeile direkt unter einem Etikett (z. B. Name der Veranstaltungsart) mit Luft */
:is(.th-baustein, .te-baustein) + :is(div, .table-entry-subtitle) {
  margin-top: 8px;
}
body.dark-mode :is(.th-baustein, .te-baustein)[style*="--kat-farbe"] {
  background: color-mix(in srgb, var(--kat-farbe) 22%, var(--paper, var(--nacht-700))) !important;
}

/* ============================================================
   EINGABEFELDER
   Gefüllt = bisher (grau hinterlegt)
   ============================================================ */

/* ============================================================
   FILTER-CHIPS (Kommende / Vergangene / Alle …)
   Kontur = bisher (aktiv mit goldenem Rand)
   ============================================================ */

/* ============================================================
   AKTIVER MENÜPUNKT (Seitenleiste)
   Fläche = bisher (Zeile goldgelb gefüllt)
   ============================================================ */

/* ============================================================
   HINWEIS-LEISTEN
   Fläche = bisher (beige hinterlegt)
   ============================================================ */

/* ============================================================
   TABELLENZEILEN
   Linien = bisher (weiße Zeilen mit Trennlinie)
   ============================================================ */

/* ============================================================
   DICHTE
   Luftig = bisher
   ============================================================ */

/* ============================================================
   KARTEN & PANELS
   Rand = bisher (feiner Rand)
   ============================================================ */
/* weitere Symbol-Knöpfe: Zeile entfernen (Bestellungen, Wareneingang) */
html[data-symbol="kreis"] .field-row-remove-button {
  border-radius: 50%; border-color: transparent;
  background: var(--danger-tint, var(--pal-rot-hell)); color: var(--danger, var(--pal-rot));
}
html[data-symbol="kreis"] .field-row-remove-button:hover { background: var(--danger, var(--pal-rot)); color: #fff; }

/* ============================================================
   KÜRZEL & CODES (Ortsgemeinschaft „E“, Set „B-1“, Kiste „B-1-1“)
   Sanft (Standard) = zart gelb hinterlegt, dunkle Schrift, feiner Rand
   Kräftig = goldgelb gefüllt (Grundstil in den Seiten-CSS)
   ============================================================ */
html[data-kuerzel] :is(.ki-code, .ki-pl-code, .og-kuerzel, .og-kuerzel-beispiel b) {
  background: var(--pal-senf-hell);
  color: var(--pal-senf-dunkel);
  box-shadow: inset 0 0 0 1px var(--pal-senf-mittel);
}
html[data-kuerzel] body.dark-mode :is(.ki-code, .ki-pl-code, .og-kuerzel, .og-kuerzel-beispiel b) {
  background: var(--pal-anthrazit-nacht);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--pal-senf-nacht);
}

/* Kleine Zahlenkreise (Lektionsnummern) folgen den runden Symbolen */

/* ============================================================
   AUSWAHLFELDER: Pfeil immer nur einmal rechts
   (einige Felder setzen „background“ neu – im dunklen Modus
   wurde der Pfeil dann über das ganze Feld wiederholt)
   ============================================================ */
select:not([multiple]):not([size]) {
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
  padding-right: 34px;
}

/* ============================================================
   DUNKLER MODUS: zarte Flächen der Varianten abdunkeln
   ============================================================ */
body.dark-mode .avatar-initials { box-shadow: none; }
html[data-avatar="hell"] body.dark-mode .avatar-initials:not(.te-symbol) { background: var(--nacht-700); color: var(--pal-rot-mittel); }
html[data-avatar="hell"] body.dark-mode .avatar-initials:is(.avatar-material, .avatar-bestand) { background: var(--pal-anthrazit-nacht); color: var(--gold); }
html[data-avatar="hell"] body.dark-mode .avatar-initials.avatar-supplier { background: var(--nacht-700); color: var(--pal-blau-mittel); }

/* ============================================================
   DASHBOARDS (Einstellungen → Layout → Dashboard)
   ============================================================ */
/* Kacheln „Kompakt“: Streifen links, Symbol neben Titel und Untertitel */

/* Bereiche „Weiß“: helle Bereiche, Einträge ohne Farbverlauf */