/* ============================================================
   EMBER Mobile Responsive Layer — v1.0 (30.08.2026)
   Eingebunden in alle 16 PHP-Seiten per <link>.
   index.php hat zusätzlich den Wetter-Strip-Fix direkt inline.
   ============================================================ */

/* ============================================================
   1. GLOBAL — alle Standard-Seiten
   ============================================================ */
/* Native Datum-/Uhrzeit-Symbole auf den dunklen Ember-Feldern sichtbar halten. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity:.88;
  cursor:pointer;
}

@media (max-width:600px) {
  /* Etwas weniger Seitenabstand auf kleinen Smartphones */
  .wrap { padding:0 14px; }

  /* Logo kompakter */
  .logo { font-size:20px; }

  /* iOS: verhindert automatisches Zoom beim Input-Fokus */
  input:not([type=file]),
  select,
  textarea { font-size:16px !important; }
}

/* ============================================================
   2. 2- UND 3-SPALTEN-GRIDS → 1 SPALTE (560px)
      event-detail.php · central.php · offer-edit.php · timetracking.php
   ============================================================ */
@media (max-width:560px) {
  /* event-detail.php: Info-Felder */
  .info-grid { grid-template-columns:1fr; }

  /* offer-edit.php: Formular-Grids */
  .grid { grid-template-columns:1fr; }

  /* central.php + timetracking.php */
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
}

/* ============================================================
   3. KLEINERE ANPASSUNGEN (480px)
   ============================================================ */
@media (max-width:480px) {
  /* timetracking.php: 4-Spalten-Grid → 2 Spalten */
  .grid-4 { grid-template-columns:1fr 1fr; }

  /* users.php: Rollen-Select volle Breite */
  .role-select { min-width:0; width:100%; }

  /* central.php: field-row — Eingabe + Löschen-Knopf */
  .field-row { grid-template-columns:1fr 32px; }

  /* offer-edit.php: Freifeld-Zeilen */
  .custom-field-row { grid-template-columns:24px 1fr 32px; }
}

/* ============================================================
   4. SEHR KLEINE SCREENS (400px)
   ============================================================ */
@media (max-width:400px) {
  /* timetracking.php: 4-Spalten → 1 Spalte */
  .grid-4 { grid-template-columns:1fr; }

  /* timeclock.php: Bereichs-Grid 2 → 1 Spalte */
  .area-grid { grid-template-columns:1fr; }

  /* vehicles.php + allgemein: Card-Aktionen bei Platzmangel umbrechen */
  .card { flex-wrap:wrap; }
  .card-actions { flex-wrap:wrap; }
}

/* ============================================================
   5. ANGEBOTS-POSITIONEN — horizontal scrollbar
      offer-edit.php: Positions-Tabellen je Kategorie
   ============================================================ */
@media (max-width:600px) {
  #itemsEssen,
  #itemsGetraenke,
  #itemsEquipment,
  #itemsPersonal,
  #itemsSonstiges {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:thin;
    scrollbar-color:#3A332C transparent;
  }
  #itemsEssen    .item-row,
  #itemsGetraenke .item-row,
  #itemsEquipment .item-row,
  #itemsPersonal  .item-row,
  #itemsSonstiges .item-row { min-width:440px; }

  #customFieldsList {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  #customFieldsList .custom-field-row { min-width:300px; }
}

/* ============================================================
   6. ZEITERFASSUNG — block-row horizontal scrollbar
      timetracking.php: Stundenblock-Liste
   ============================================================ */
@media (max-width:700px) {
  #blocksList {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:thin;
    scrollbar-color:#3A332C transparent;
  }
  #blocksList .block-row { min-width:600px; }
}