/* ============================================================
   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; }
}