/* ============================================================
   ERIK MOBILE  v1  (24.06.2026)
   Smartphone-Optimierung NUR fuer das Admin Panel.
   Greift ausschliesslich <= 480px (iPhone). Desktop & Tablet
   bleiben voellig unveraendert. Es wird KEINE Funktion/Logik
   veraendert - nur die Darstellung. Diese Datei wird als
   LETZTE CSS-Datei geladen und gewinnt damit die Kaskade
   gegen die aelteren, widerspruechlichen demo-patches Regeln.
   ROLLBACK: einfach die <link> Zeile aus admin.html entfernen.
   ============================================================ */

/* --- Tab-Zaehler-Badge (gilt ueberall, rein additiv) ---------
   Zeigt neben dem pulsierenden Reiter die Anzahl neuer,
   offener Eintraege ("Restaurant 3"). Greift nur, wenn
   live-notify per data-live-count eine Zahl > 0 gesetzt hat. */
.adm-tabs button[data-live-count]:not([data-live-count="0"]):not([data-live-count=""])::after {
  content: attr(data-live-count);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 7px;
  border-radius: 999px; background: #C73E33; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle; font-family: var(--vr-font-body, sans-serif);
}
.adm-tabs button.live-tab-pending--zimmer[data-live-count]::after { background: #C9A24D; color: #1A1410; }
.adm-tabs button.live-tab-pending--event[data-live-count]::after  { background: #2E7D32; color: #fff; }


/* =================== NUR HANDY  (<= 480px) =================== */
@media (max-width: 480px) {

  /* 1) Stoerende Live-Karten weg.
        Der passende Reiter pulsiert weiter + Zaehler-Badge + Ton
        bleiben als Signal. Die Detail-/Bestaetigen-Fenster bleiben
        technisch funktionsfaehig, poppen ohne Karten aber nicht
        mehr von selbst ueber den Bildschirm. */
  #live-popup-stack { display: none !important; }

  /* 2) Body-Zoom (ein reiner Desktop-Hack) am Handy neutralisieren.
        Am iPhone nutzt Erik die normale Zwei-Finger-Zoom-Geste. */
  body { zoom: 1 !important; }
  .zoom-control { display: none !important; }

  /* 3) Kein versehentliches Querscrollen der ganzen Seite. */
  .adm-shell, .adm-main { max-width: 100% !important; }
  .adm-main { padding: 14px 12px 40px !important; overflow-x: hidden; }

  /* 4) Kopfzeile schlanker; Reiter oben angepinnt, ohne Ueberlappen. */
  .adm-header { position: static !important; padding: 10px 12px !important; }
  .adm-header__title { font-size: 16px !important; }
  .adm-header__title small { font-size: 10px !important; }
  .adm-tabs { top: 0 !important; }
  .adm-tabs button { padding: 11px 14px !important; }

  /* 5) Ansicht-Umschalter (Monat/Jahr/Tag/Liste): volle Breite,
        grosse Tipp-Flaechen fuer den Daumen. */
  .adm-sec-head { gap: 10px !important; }
  .adm-sec-head h2 { font-size: 19px !important; }
  .adm-view-switch { width: 100% !important; }
  .adm-view-switch button { flex: 1 1 0 !important; padding: 9px 4px !important; min-height: 40px !important; }

  /* 6) KALENDER: mit dem Finger seitlich wischbar.
        Kopf (Wochentage) + Tage-Gitter liegen im selben Scroll-
        Container und haben dieselbe Spaltenbreite -> sie scrollen
        gemeinsam und bleiben exakt buendig. Per erik-mobile.js
        wird beim Oeffnen direkt ans Wochenende (rechts) gescrollt. */
  .cal-month { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 10px !important; }
  .cal-month__head,
  .cal-month__grid { grid-template-columns: repeat(7, minmax(58px, 1fr)) !important; }
  .cal-day { min-height: 82px !important; padding: 5px 4px !important; }
  .cal-day__num { font-size: 12px !important; }
  .cal-day__item { font-size: 9px !important; line-height: 1.25 !important; }
  .cal-day__item .t { font-size: 8px !important; }
  .cal-day__more { font-size: 8px !important; }
  .cal-day.is-closed::after { font-size: 7px !important; letter-spacing: 0 !important; }
  .cal-day.is-blocked .cal-day__lock-reason { font-size: 8px !important; }

  /* 7) Tages-, Jahres- und Listenansicht angenehm gross. */
  .cal-day-view { padding: 14px !important; }
  .cal-day-view__date { font-size: 19px !important; }
  .cal-year { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* 8) Formulare (z.B. Reservierung von Hand) einspaltig & tippfreundlich. */
  .adm-field-row { grid-template-columns: 1fr !important; }

  /* iOS zoomt Eingabefelder unter 16px beim Fokus hinein -> auf 16px setzen (Erik-Handy) */
  input, select, textarea { font-size: 16px !important; }
}