/* ---------------------------------------------------------------------
   Layout: Kopfzeile, Verbindung, Schublade, Seiten
   --------------------------------------------------------------------- */
/* Kopfzeile: ☰ · Teamname / aktuelle Ansicht · Verbindungspunkt (Hintergrund = Teamfarbe, applyTeamTheme) */
#mainHeader {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding: 0 16px 0 4px; height: 56px;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; position: relative; z-index: 10;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  transition: background .4s, color .4s;
}
#mainHeader md-icon-button {
  flex-shrink: 0;
  --md-icon-button-icon-color: currentColor;
  --md-icon-button-hover-icon-color: currentColor;
  --md-icon-button-pressed-icon-color: currentColor;
  --md-icon-button-state-layer-color: currentColor;
}
.hdr-titles { flex: 1; min-width: 0; cursor: pointer; line-height: 1.2; }
#teamDisplay { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewDisplay { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* getrennt: kräftig rot (wie die roten Buttons), weißes Symbol – auf jeder Teamfarbe der Kopfzeile gut sichtbar */
.conn-status { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
               border-radius: 50%; background: var(--red-btn); color: #fff; }
.conn-status svg { width: 20px; height: 20px; }
.conn-status.connected { background: none; color: inherit; }

/* Verbindung: Offline-Banner unter der Kopfzeile, Sperre während ändernder Aufrufe (access.js) */
#offlineBanner { position: sticky; top: 0; z-index: 9; align-items: center; gap: 8px; padding: 6px 16px;
  font-size: 13px; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
  white-space: nowrap; }
#offlineBanner.show { display: flex !important; }
#offlineBanner span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.net-busy .page, body.net-busy #drawer { pointer-events: none; }
.busy-content { display: flex; align-items: center; gap: 16px; }
.busy-content md-circular-progress { --md-circular-progress-size: 36px; flex-shrink: 0; }

/* Hauptmenü als seitliche Schublade */
.drawer-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0); pointer-events: none;
                   transition: background .2s; }
.drawer-backdrop.open { background: rgba(0,0,0,.5); pointer-events: auto; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); overflow-y: auto;
          background: var(--md-sys-color-surface-container-low); padding: 12px 12px 24px;
          border-radius: 0 16px 16px 0; transform: translateX(-100%); transition: transform .2s ease-out;
          box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.drawer-backdrop.open .drawer { transform: translateX(0); }
.drawer-section { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
                  color: var(--md-sys-color-on-surface-variant); padding: 12px 16px 6px; }
.drawer-item { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 48px; border-radius: 24px;
               cursor: pointer; font-size: 14px; font-weight: 500; color: var(--md-sys-color-on-surface-variant);
               -webkit-tap-highlight-color: transparent; }
.drawer-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.drawer-item.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.drawer-item .msym { width: 22px; height: 22px; }
.drawer-svg-icon { width: 22px; height: 22px; flex-shrink: 0; }
.drawer-team-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin: 0 2px; }
.drawer-check { margin-left: auto; }
.drawer-divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: 12px 16px; }
/* Sprachauswahl im Menü: Flaggen nebeneinander, aktive mit Rahmen in Akzentfarbe */
.drawer-lang { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 56px; }
.drawer-lang > .msym { width: 22px; height: 22px; color: var(--md-sys-color-on-surface-variant); }
.lang-flags { display: flex; gap: 8px; }
.app-version { font-size: 12px; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.drawer-version { padding: 4px 16px 16px; }
#noAccessModal .app-version { margin-top: 16px; }
.lang-flag { width: 48px; height: 40px; padding: 6px; border-radius: 10px; border: 2px solid transparent; background: none;
             cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.lang-flag svg { width: 32px; height: 22px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.lang-flag.active { border-color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); }

/* Seiten (eine aktiv) */
.page { display: none; padding: 16px; }
.page.active { display: block; flex: 1; min-height: 0; overflow-y: auto; }
/* Wischen zwischen Live ↔ Plan ↔ Einsätze (common.js): neue Ansicht gleitet kurz herein */
@keyframes swipeInRight { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes swipeInLeft  { from { transform: translateX(-40px); opacity: .4; } to { transform: none; opacity: 1; } }
.page.swipe-in-right { animation: swipeInRight .18s ease-out; }
.page.swipe-in-left  { animation: swipeInLeft .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .page.swipe-in-right, .page.swipe-in-left { animation: none; } }