/* Gestaltung nach der Durchsicht vom 15.10. (A5, A6, Schalter cockpit-ui2): alles unter body.ui2, nur Tokens.
   Ohne Schalter bleibt jede Seite wie bisher. styles.css bleibt unberührt (viele Zweige arbeiten dort). */

/* ---------- Werte (DESIGN.md: Abstände 4, 8, 12, 16, 24, 32, 48; Karten und Menüs Radius 10, Felder 6) ---------- */
body.ui2 { --radius: 10px; }

/* ---------- Seite: Rand, Kopf, Kennzahlen, Raster ---------- */
body.ui2 .view { padding: 24px 32px 48px; }
body.ui2 .page-header { margin-bottom: 24px; gap: 16px; }
body.ui2 .page-subtitle { margin-top: 4px; }
body.ui2 .page-actions { gap: 8px; }
body.ui2 .kpi-row { margin-bottom: 24px; }
body.ui2 .grid { gap: 24px; }
body.ui2 .actions { gap: 8px 12px; }

/* ---------- Karten und Abschnitte ---------- */
body.ui2 .card { padding: 24px; margin-bottom: 24px; }
body.ui2 .card > h2 { margin-bottom: 16px; font-size: 16px; }
body.ui2 .card > * + * { margin-top: 12px; }
body.ui2 .card > h2 + * { margin-top: 0; }

/* ---------- Filter über Listen: Luft zur Liste darunter ---------- */
body.ui2 .filter-zeile { margin-bottom: 16px; gap: 16px; }
/* Filterzeile in einer Flex-Zeile (Freigaben): nie breiter als der Platz, die Reiter scrollen in sich */
body.ui2 .filter-zeile { min-width: 0; max-width: 100%; }

/* ---------- Formulare ---------- */
body.ui2 .form { gap: 16px; }
/* Eine Spalte, die nie breiter wird als der Platz: sonst schieben zwei Datumsfelder nebeneinander (Einsatzplan)
   jedes Feld über den Rand des Dialogs hinaus */
body.ui2 .form { grid-template-columns: minmax(0, 1fr); }
body.ui2 .form .input, body.ui2 .form .select, body.ui2 .form .textarea { min-width: 0; }
body.ui2 .field { gap: 8px; }
body.ui2 .form-actions { gap: 8px 12px; margin-top: 8px; }

/* ---------- Tabellen: höhere Zeilen, Kopf mit Abstand ---------- */
body.ui2 .tbl td { height: 48px; }
body.ui2 .tbl th { padding-top: 8px; padding-bottom: 8px; }
body.ui2 .tbl td:first-child, body.ui2 .tbl th:first-child { padding-left: 8px; }
body.ui2 .tbl td:last-child, body.ui2 .tbl th:last-child { padding-right: 8px; }

/* ---------- Schubladen und Dialoge ---------- */
body.ui2 .schublade-kopf { padding: 12px 24px; }
body.ui2 .schublade-body { padding: 24px; gap: 24px; }
body.ui2 .dlg { padding: 24px; }
body.ui2 .dlg-modal .dlg-title { margin-bottom: 16px; }
body.ui2 .dlg-modal .dlg-body { margin-bottom: 24px; }

/* ---------- Telefon und schmales Tablet ---------- */
@media (max-width: 1023.98px) {
  body.ui2 .view { padding: 24px 24px 48px; }
}
@media (max-width: 599.98px) {
  body.ui2 .view { padding: 16px 16px 48px; }
  body.ui2 .page-header { margin-bottom: 16px; }
  body.ui2 .card { padding: 16px; margin-bottom: 16px; }
  body.ui2 .kpi-row { margin-bottom: 16px; }
  body.ui2 .grid { gap: 16px; }
  body.ui2 .schublade-body { padding: 16px; gap: 16px; }
  body.ui2 .schublade-kopf { padding: 8px 16px; }
  body.ui2 .dlg { padding: 16px; }
}

/* ---------- Kontakte (kontakte.js): Suche und Art in einer Zeile mit Luft zur Liste ---------- */
body.ui2 .kt-tools { gap: 12px; margin-bottom: 8px; }
body.ui2 .kt-tools .aw-knopf { flex: 0 0 auto; min-width: 200px; }

/* ---------- Einstellungen (Konto, Team, Firmendaten, Abo): lesbare Breite statt über den ganzen Bildschirm ---------- */
body.ui2 .view-root:is([data-section="konto"], [data-section="benutzer"], [data-section="firmendaten"], [data-section="abo"]) {
  max-width: 880px;
}

/* Firmendaten, Briefkopf: ab 768px zwei Spalten (PLZ neben Ort, Telefon neben E-Mail), lange Felder über beide */
@media (min-width: 768px) {
  body.ui2 .card:has(> .field #fd-name) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
  }
  body.ui2 .card:has(> .field #fd-name) > * { margin: 0; }
  body.ui2 .card:has(> .field #fd-name) > :is(h2, .actions),
  body.ui2 .card:has(> .field #fd-name) > .field:has(#fd-name, #fd-tagline, #fd-street, #fd-footer) { grid-column: 1 / -1; }
}
body.ui2 .field > .note { margin-top: 0; font-size: 13px; }

/* Datei wählen (Logo, Projektakte): der Knopf im Feld sieht aus wie ein Knopf der Plattform */
body.ui2 .input[type="file"] { padding: 6px; cursor: pointer; }
body.ui2 .input[type="file"]::file-selector-button {
  min-height: calc(var(--tap) - 14px);
  margin-right: 12px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-muted);
  color: var(--color-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* ---------- Touch: Tap-Ziele ab 44px auch bei den geteilten Bausteinen ---------- */
@media (pointer: coarse) {
  body.ui2 .seg-btn { min-height: 44px; }
}