/* =========================================================
   BirdPI – Responsive Styles
   =========================================================
   Breakpoint-Strategie (Desktop-First):
   - Default: Styles für Desktops und größere Bildschirme
   - 1024px: Tablets (Quer- & Hochformat) & 7-Zoll-Displays
   - 600px:  Smartphones
   ========================================================= */

/* =========================================================
   1. Mittlere Bildschirme (Tablets & 7-Zoll-Displays)
   ========================================================= */
@media (max-width: 1024px) {
  /* Zukünftige Tablet-spezifische Regeln hier einfügen */
}

@media (max-width: 760px) {
  .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   2. Kleine Bildschirme (Smartphones)
   ========================================================= */
@media (max-width: 600px) {
  /* Body darf auf dem Handy wieder normal scrollen */
  .wrap {
    padding: 6px;
    max-width: 100%;
    gap: 6px;
  }

  .wrap.fullheight {
    height: auto;
    min-height: 100vh;
  }

  .nav-tiles {
    grid-template-columns: 1fr;
  }

  /* Bottom-Nav: Badge-Labels ausblenden, nur Icons zeigen */
  .bottom-row .badge > span:not(.ico) {
    display: none;
  }
  .bottom-row .badge {
    padding: 0 10px;
    min-width: 40px;
    justify-content: center;
  }
  .bottom-row {
    position: sticky;
    bottom: 0;
    gap: 4px;
    padding: 6px 0;
    background: var(--bg);
    border-top: 1px solid var(--grid);
    z-index: 100;
  }

  /* Modale auf Mobile: volle Breite */
  .modal .dialog {
    width: min(640px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Formulare einspaltiger */
  .form .row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}