/* Seitengeruest: Kopfzeile + Inhalt (Auftrag "Betriebsdashboard Galini
   Olympou" Block 4). Wenige Navigationspunkte (Uebersicht/Buchungen/
   Abmelden, Auftrag Punkt 6) -- keine Sidebar, kein Hamburger-Menu noetig. */

/* R2-G3: Kopfzeile bleibt beim Scrollen erreichbar. */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(31, 60, 90, 0.06);
}

.app-header__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

/* Vollstaendiges Logo statt nur des Signets (Auftrag: "gestalterische
   Korrektur vor dem Staging-Deploy") -- breitenbasiertes Seitenverhaeltnis
   ca. 1.9:1, hoehenbasiert skaliert fuer eine kompakte, aber deutlich
   erkennbare Kopfzeile. Bleibt bei allen drei Pruefbreiten (375/768/1440px)
   bequem lesbar; das reine Signet ist ausschliesslich dem Favicon
   vorbehalten (siehe app-shell.js). */
.app-header__logo {
  height: 40px;
  width: auto;
}

.app-header__title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.app-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}

.app-nav a[aria-current="page"] {
  color: var(--color-aegean);
  border-bottom-color: var(--color-aegean);
  font-weight: 600;
}

.app-nav a:hover {
  color: var(--color-aegean);
}

.app-nav__user {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-right: var(--space-2);
}

/* Name direkt ueber "Abmelden" (Verbesserungsrunde 1). */
.app-nav__account {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.app-nav__account .app-nav__user { margin-right: 0; font-size: 0.8rem; }
.app-nav__account .app-nav__logout { padding: 0; }

.app-nav__logout {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-size: 0.95rem;
  padding: var(--space-1) 0;
}

.app-nav__logout:hover { color: var(--color-aegean); }

.app-main {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.app-section {
  margin-bottom: var(--space-6);
}

.app-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Responsive: ab ca. 768px etwas grosszuegiger, ab ca. 1440px hat der
   Inhalt weiterhin eine ruhige Maximalbreite statt sich ueber den ganzen
   Bildschirm zu strecken (Auftrag: "uebersichtlich und grosszuegig", nicht
   "voll ausgenutzt"). */
@media (min-width: 768px) {
  .app-main { padding-top: var(--space-6); }
}

/* Breitere Arbeitsflaeche fuer den Mehrmonatskalender. */
.app-main--wide { max-width: 1440px; }

@media (max-width: 720px) {
  .app-header__inner { padding: var(--space-1) var(--space-3); gap: 0 var(--space-2); }
  .app-header__logo { height: 28px; }
  .app-header__title { display: none; }
  .app-nav__user { display: none; }
  .app-nav__account { flex-direction: row; }
  /* Einzeilige Navigation, bei Bedarf seitlich wischbar -- die feste
     Kopfzeile bleibt so flach. */
  .app-nav {
    flex-wrap: nowrap;
    gap: var(--space-3);
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
  }
  .app-nav a, .app-nav__logout { font-size: 0.9rem; white-space: nowrap; }
}

@media (max-width: 480px) {
  .app-header__inner { padding: var(--space-2) var(--space-3); }
  .app-main { padding: var(--space-4) var(--space-3) var(--space-5); }
  .app-nav { gap: var(--space-3); }
}