/* Grundlagen-Mobiloptimierung – Stufe 1
   Zentrales Stylesheet, wird in allen Haupt-Templates eingebunden.
   Ergaenzt bestehende Inline-Styles, ohne sie zu ersetzen.
*/



/* Tabellen-Wrapper: horizontal scrollen statt Body abzuschneiden */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Breite Tabellen in einer Card scrollen in sich selbst
   (nutzt :has() – moderne Browser). Fallback: <div class="table-wrap">. */
.card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Touch-Ziel-Groesse und iOS-Zoom-Vermeidung fuer Eingaben */
@media (max-width: 640px) {
  input, select, textarea, button {
    font-size: 16px;
  }
  input:not([type=checkbox]):not([type=radio]),
  select, textarea, button, .btn, .toolbar-btn {
    min-height: 44px;
  }
}

/* Kompakteres Layout auf Handy */
@media (max-width: 640px) {
  .header { padding: 10px 12px !important; gap: 8px !important; }
  .header h1 { font-size: 15px !important; }
  .header p { display: none !important; }
  .header-logo { max-width: 60px !important; }
  .header-logo img { max-height: 40px !important; max-width: 60px !important; }
  .header-left { font-size: 10px !important; }

  .content { padding: 12px !important; }
  .section { padding: 12px !important; }
  .card { padding: 14px !important; }

  .toolbar, .filter-bar, .form-row, .row, .btn-row, .modal-btns {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .toolbar { padding: 8px 10px !important; }

  .btn, .toolbar-btn, .btn-red {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Tabs horizontal scrollen, statt gequetscht */
  .tabs, .fob-subtabs, .sonder-subtabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .tab, .fob-subtab {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Modale nutzen die volle Breite */
  .modal, .modal-overlay .modal, div.modal {
    width: 95vw !important;
    max-width: none !important;
    padding: 18px !important;
  }

  /* Rohtabellen kriegen automatisch horizontales Scrollen,
     wenn sie in einem .table-wrap oder .content stecken */
  .content > table { display: block; overflow-x: auto; }

  /* Fields haben schon min-width:100% in form.html unter 768px –
     hier fuer Dashboards nachziehen */
  .field, .form-row > .field { min-width: 100% !important; }
}

/* Zwischenstufe fuer kleine Tablets im Hochformat */
@media (max-width: 768px) and (min-width: 641px) {
  .header p { font-size: 10px !important; }
  .content { padding: 16px; }
}