/* ============================================================
   MOBIL.CSS – Feinschliff fürs Handy (bis 768 px Breite)
   ------------------------------------------------------------
   Wird als LETZTE Stildatei geladen (index.html) und ändert nur
   die Handy-Ansicht – der Desktop bleibt unverändert.
   Ergebnis einer Durchsicht aller Seiten und Dialoge bei 390 px.
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 1. Kopfzeile: Platz für den Seitentitel ----------
     Logo steht im Menü, „Dunkler Modus“ im Profil-Menü (assets/app.js) */
  .header-mobile-brand,
  #dark-mode-btn { display: none !important; }
  .user-profile { padding: 3px !important; border-color: transparent !important; background: transparent !important; gap: 0 !important; }
  .user-profile > .material-icons { display: none !important; }
  .header-mobile-title { font-size: 1.2rem !important; }
  /* Kopfzeile folgt dem Dunkelmodus */
  header { background: color-mix(in srgb, var(--sidebar-background) 96%, transparent) !important; }
  .dropdown-dunkel { display: flex !important; }

  /* ---------- 2. Werkzeugleiste ---------- */
  /* Filter-Plaketten umbrechen statt am Rand abgeschnitten */
  .stock-filter-chips,
  .tw-toolbar-chips,
  .th-toolbar-chips { flex-wrap: wrap !important; overflow: visible !important; max-width: 100% !important; width: 100%; row-gap: 8px !important; }
  /* Auswahlfelder volle Breite */
  .toolbar .th-filter-select,
  .toolbar .va-typ-wahl,
  .toolbar .hg-select,
  .toolbar-left > select { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .toolbar-left { flex-wrap: wrap !important; row-gap: 10px !important; }
  .toolbar-left > .suchfeld-container { flex: 1 1 100% !important; min-width: 0 !important; }
  /* Bestellungen: Umschalter Tabelle/Kanban in eigener Zeile */
  .toolbar .view-switch-tabs { margin-left: 0 !important; width: 100%; }
  .toolbar .view-switch-tabs .view-tab-btn { flex: 1; justify-content: center; }

  /* ---------- 3. Spalten-Layouts: Flex-Basis ist keine Höhe ----------
     (Buchhaltung und Spenden hatten große Lücken im Kopf) */
  .bh-kopf > div:first-child,
  .bh-kopf-aktionen,
  .sp-toolbar .toolbar-left,
  .bh-filter .suchfeld-container,
  .es-dok-text { flex: 0 0 auto !important; }
  .bh-kopf-aktionen { width: 100%; }
  .bh-kopf-aktionen .th-filter-select { flex: 1 1 100%; min-width: 0 !important; }

  /* ---------- 4. Dashboards: Kästen dürfen schmaler werden ---------- */
  .thd-main,
  .thd-charts { grid-template-columns: minmax(0, 1fr) !important; }
  .thd-main > *,
  .thd-panel,
  .thd-chart,
  .abd-bereich { min-width: 0 !important; max-width: 100%; }
  .abd-bereich-kopf small { white-space: normal !important; }
  .thd-saeule-label { white-space: normal !important; }
  .mad-hinweis { flex-wrap: wrap; }
  .mad-hinweis-knopf { width: 100%; justify-content: center; }

  /* ---------- 5. Formulare: Felder untereinander in voller Breite ---------- */
  .field-row { align-items: stretch !important; }
  .field-row > .field,
  .field-row > div { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  .filter-date-row > .field { width: auto !important; }

  /* ---------- 6. Dialoge (Bottom-Sheet) ---------- */
  /* Fußleiste reicht bis zum unteren Rand – kein Inhalt mehr darunter sichtbar */
  .dialog-inner { padding-bottom: 0 !important; }
  .dialog-actions {
    margin: 1.25rem -1.25rem 0 !important;
    padding: 10px 1.25rem calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--paper) !important;
    border-top: 1px solid var(--line);
    flex-wrap: wrap !important;
    z-index: 5;
  }
  /* mehr als zwei Knöpfe: zwei je Zeile statt aus dem Bild zu laufen */
  .dialog-actions:has(> :nth-child(3)) > * { flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  .dialog-actions > * { white-space: normal; line-height: 1.2; }
  /* Tabellen in Dialogen: waagerecht wischen statt abschneiden
     (fieldset ist sonst mindestens so breit wie sein Inhalt) */
  dialog fieldset { min-width: 0 !important; min-inline-size: 0 !important; max-width: 100%; }
  dialog fieldset:has(table),
  dialog .detail-box:has(table) { overflow-x: auto; }
  /* Reiter im Dialog: wischbar, ohne Balken */
  .dialog-tabs { scrollbar-width: none; }
  .dialog-tabs::-webkit-scrollbar { display: none; }
  .dialog-tabs .tab-button { flex: 0 0 auto; }
}

/* ============================================================
   Durchsicht Oktober 2026 (390 px, alle Seiten): einheitlicher Kopf,
   größere Tippflächen, kein Zoomen beim Tippen (iPhone), saubere Hinweise
   ============================================================ */
/* Hinweise mit Link/Fettschrift: Text als Fließtext, Symbol links (sonst zerfällt der Text in Spalten) */
.status:has(> a, > b, > strong, > code, > em, > br) { display: block; position: relative; padding-left: 48px; }
.status:has(> a, > b, > strong, > code, > em, > br)::before { position: absolute; left: 16px; top: 12px; }

@media (max-width: 768px) {
  /* ---------- 7. Seitenkopf: Titel links, Knöpfe als gleich breite Reihe ---------- */
  .dashboard-header { align-items: stretch !important; text-align: left; }
  .dashboard-header > * { flex: 0 0 auto !important; min-width: 0; max-width: 100%; }
  .dashboard-header .dashboard-title { font-size: 26px; }
  .ds-kopf-knoepfe, .hd-kopf-knoepfe, .abd-kopf-knoepfe, .vkd-kopf-knoepfe, .pk-kopf-knoepfe {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px !important; width: 100%; }
  #dashboard-knoepfe { display: contents !important; }
  :is(.ds-kopf-knoepfe, .hd-kopf-knoepfe, .abd-kopf-knoepfe, .vkd-kopf-knoepfe, .pk-kopf-knoepfe) > :is(.btn, a, button) {
    min-height: 46px; width: 100%; justify-content: center; padding-left: 6px !important; padding-right: 6px !important; margin: 0 !important; }
  /* Fahrzeuge: Suche volle Breite, darunter „inaktive“ und „Neu“ je halb */
  .fz-kopf-knoepfe { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; width: 100%; }
  .fz-kopf-knoepfe .fz-suche { grid-column: 1 / -1; min-width: 0 !important; }
  .fz-kopf-knoepfe > .btn { min-height: 44px; justify-content: center; }
  /* Zeiterfassung: Mitarbeiter-Wahl volle Breite */
  .ze-wahl { width: 100%; min-width: 0 !important; }
  .ze-wahl select { flex: 1; }

  /* ---------- 8. Tippflächen: mindestens ~40 px hoch ---------- */
  .stock-chip { min-height: 38px; padding-top: 6px !important; padding-bottom: 6px !important; }
  .action-btn { min-width: 40px; min-height: 40px; }
  .btn, .btn-submit, .btn-cancel { min-height: 42px; }
  .ek-pos-knopf, .tv-testmail { min-height: 40px; }

  /* ---------- 9. Eingabefelder 16 px – sonst zoomt das iPhone beim Antippen ---------- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px !important; }
  .gj-wahl select { font-size: 16px !important; }

  /* ---------- 10. Kopfzeile: Seitentitel nicht vom Jahr verdrängen ---------- */
  .gj-wahl { padding-left: 6px !important; gap: 2px !important; }
  .gj-wahl .material-icons { display: none; }
  .gj-wahl select { padding-right: 22px !important; }
  .header-mobile-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- 11. Auswahlfelder in Werkzeugleisten volle Breite (Lager, Garantie …) ---------- */
  .la-filter > select, .la-filter > .suchfeld-container,
  .toolbar .funktionen-container > select { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .gj-wahl { margin-left: 6px !important; padding: 0 0 0 4px !important; flex: none; }
  .gj-wahl select { width: 74px !important; padding: 0 18px 0 4px !important; background-position: right 2px center !important; }
  header:has(#gj-wahl-box:not([hidden])) .header-mobile-title { font-size: 1.05rem !important; }

  /* ---------- 12. Dialog-Fußleiste: gleich breite Knöpfe, „Speichern“ unten über die ganze Breite ---------- */
  .dialog-actions { display: flex !important; gap: 8px !important; }
  .dialog-actions .an-links { display: contents !important; }
  .dialog-actions [hidden] { display: none !important; }
  .dialog-actions > *, .dialog-actions .an-links > * { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; margin: 0 !important; justify-content: center; text-align: center; min-height: 44px; }
  .dialog-actions .btn-submit, .dialog-actions [type="submit"] { flex-basis: 100% !important; order: 99; }
  /* nur zwei Knöpfe: nebeneinander lassen */
  .dialog-actions:not(:has(> :nth-child(3))):not(:has(.an-links)) > * { flex-basis: calc(50% - 4px) !important; order: 0; }
  /* Reiter im Mitarbeiter-Dialog: wischen statt dreizeilig */
  .ma-tabs { flex-wrap: nowrap !important; overflow-x: auto; }
}