/*
 * Schulfunk — Gemeinsamer Header für Element Web
 * Empennage UG
 *
 * Wird per nginx sub_filter als HTML-Snippet + CSS injiziert.
 * Der Header erscheint über der Element-UI und schiebt sie nach unten.
 */

/* ── Header-Leiste ─────────────────────────────────────── */
#sf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 10px;
  background: #1e304c;
  color: white;
  font-family: 'Montserrat', -apple-system, sans-serif;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-sizing: border-box;
}

/* Logo */
#sf-header .sf-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
#sf-header .sf-logo img {
  height: 55px;
  width: auto;
}

/* Rechte Seite: Icons */
#sf-header .sf-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icon-Links */
#sf-header .sf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
#sf-header .sf-icon:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* Trennlinie */
#sf-header .sf-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
}

/* Abmelden-Button (wie Portal) */
#sf-header .sf-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
  font-family: 'Montserrat', -apple-system, sans-serif;
}
#sf-header .sf-logout:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Element-Layout korrigieren ────────────────────────── */
/* Element nutzt 100vh — der Header braucht Platz */
body {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

#matrixchat {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* ── Header auf der Login-Seite ausblenden ─────────────── */
/* Element zeigt .mx_AuthPage wenn nicht eingeloggt */
body:has(.mx_AuthPage) #sf-header {
  display: none;
}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sf-header {
    height: 44px;
    padding: 0 12px;
  }
  #sf-header .sf-logo img {
    height: 22px;
  }
  #sf-header .sf-sep,
  #sf-header .sf-logout span {
    display: none;
  }
}