/* Seitenleiste der App (templates/sidebar.html, static/js/sidebar.js).

   Ab 1280 Pixel Fensterbreite steht sie fest links und schiebt <main> nach rechts. Darunter ist sie ein Menü, das von
   links einfährt, mit einer Kopfzeile oben. Der Grundzustand ist das Menü; genau eine Abfrage (min-width: 1280px) macht
   daraus die feste Leiste. Zwei sich ergänzende Abfragen ließen bei gebrochenen Breiten (Zoom, 125 % Skalierung) eine
   Lücke. Die Zahl steht auch in sidebar.js.

   Alle Selektoren beginnen mit .app, damit nichts mit den Klassen der Seiten kollidiert (.btn, .card, .badge, aside ...).
   base.css setzt für jedes Element Quicksand und Gewicht 400 direkt: Schriftstärken stehen deshalb am Element selbst
   und nicht am Elternelement. <main> bleibt ein einfaches Blockelement: Mit Flex, Grid, transform, overflow, contain oder
   filter am <main> hingen die fest positionierten Dialoge der Reisebilder und die Meldung an <main>.

   Text-, Aktiv- und Fokusfarben werden in den Stiltests gegen die dunkle Fläche auf ausreichenden Kontrast geprüft.

   Ebenen: Kopfzeile und feste Leiste 1000, Abdunkelung 1050, ausgefahrenes Menü 1100, Sprunglink 1300. Der Seiteninhalt
   liegt darunter (höchstens 100), die Dialoge der Reisebilder darüber (10000). */

.appSidebar,
.appTopbar {
  --appNavBg: #223e47;
  --appNavBgEnd: #223e47;
  --appNavText: #bfd0d5;
  --appNavMuted: #8faab2;
  --appNavHover: rgba(255, 255, 255, 0.03);
  --appNavActive: rgba(255, 255, 255, 0.07);
  --appNavActiveIcon: #ffffff;
  --appNavLine: rgba(255, 255, 255, 0.1);
  --appNavFocus: #8fd0e0;
}

/* Studio Contrast verwendet die Systemschrift nur in der Navigation. Inhalt und Editor behalten ihre Schrift. */
.appSidebar,
.appSidebar *:not(i),
.appTopbar,
.appTopbar *:not(i) {
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Grundzustand (schmal): <main> unterhalb der Kopfzeile */

.appSidebar ~ main {
  min-height: calc(100vh - var(--topbarHeight));
  min-height: calc(100dvh - var(--topbarHeight));
  --appStickyTop: var(--topbarHeight);
}

/* Die Kopfzeile klebt: Der Browser rechnet sie beim Anspringen und beim Tastaturfokus ein, sonst läge das Ziel (zum
   Beispiel beim Rückwärts-Tabben) hinter ihr. */
html:has(.appTopbar) {
  scroll-padding-top: var(--topbarHeight);
}

/* Das Ziel des Sprunglinks ist fokussierbar (tabindex="-1"), soll aber keinen Rahmen zeigen. */
.appSidebar ~ main div.mainContent:focus {
  outline: none;
}

html.appMenuOpen {
  overflow: hidden;
}

/* Sprunglink: erst bei Tastaturfokus sichtbar */

.appSkipLink {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1300;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: #fff;
  color: var(--mainColor);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(45, 45, 57, 0.25);
  transform: translateY(-300%);
}

.appSkipLink:focus {
  transform: none;
  outline: 3px solid #8fd0e0;
  outline-offset: 2px;
}

/* Kopfzeile (nur schmal) */

.appTopbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--topbarHeight);
  padding: 0 0.75rem;
  box-sizing: border-box;
  background: var(--appNavBg);
}

.appTopbarBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0.6rem 0;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.65px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: lowercase;
  white-space: nowrap;
  color: #fff;
}

.appMenuButton,
.appMenuClose {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.appMenuButton:hover,
.appMenuClose:hover {
  background: var(--appNavHover);
}

/* Die Symbole der beiden Knöpfe sind gezeichnet, nicht aus der Symbolschrift: Ohne sie gäbe es in schmalen Fenstern keinen
   sichtbaren Weg zum Menü, wenn der Fremdserver der Schrift ausfällt. */
.appIcon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* Die Leiste: im Grundzustand außerhalb des Bildes */

.appSidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  width: var(--sidebarWidth);
  max-width: 85vw;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--appNavBg) 0%, var(--appNavBgEnd) 100%);
  /* Im Windows-Kontrastmodus fällt der Verlauf weg; ohne Farbe darunter wäre das offene Menü durchsichtig. */
  background-color: var(--appNavBg);
  color: var(--appNavText);
  /* Bei niedrigen Fenstern (zum Beispiel 400 % Zoom) scrollt die ganze Leiste; sonst bliebe der Navigation kein Platz. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  transform: translateX(-100%);
  visibility: hidden;
  /* Beim Schließen bleibt die Leiste sichtbar, bis sie draußen ist; beim Öffnen schaltet visibility ohne Verzögerung um,
     sonst griffe focus() noch nicht. */
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

html.appMenuOpen .appSidebar {
  transform: none;
  visibility: visible;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.25s ease,
    visibility 0s;
}

.appScrim {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(20, 20, 28, 0.55);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

html.appMenuOpen .appScrim {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0s;
}

/* Kopf mit Name */

.appSidebarHead {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  /* links fluchtet die Marke mit den Symbolen der Einträge (0,75 + 0,85 rem), rechts bleibt Platz für den Schließen-Knopf */
  padding: 29px 12px 22px 24px;
}

.appSidebarHead .appMenuClose {
  width: 2.75rem;
  height: 2.75rem;
}

.appBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.65px;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-transform: lowercase;
  border-radius: 6px;
  color: #fff;
}

.appBrand::before,
.appTopbarBrand::before {
  content: "";
  display: block;
  flex: none;
  width: 31px;
  height: 31px;
  background: #ffffff;
  mask: url("../img/studio-mark.e64d03b75eb0.svg") center / contain no-repeat;
}

/* Einträge */

.appNav {
  flex: 1 0 auto;
  padding: 6px 16px 22px;
}

/* Das globale ::-webkit-scrollbar aus base.css hat eine helle Spur; in der dunklen Leiste wäre sie ein heller Streifen. */
.appSidebar::-webkit-scrollbar {
  background-color: transparent;
}

.appSidebar::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}

.appNavList {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.appNavList + .appNavList {
  margin-top: 23px;
  padding-top: 22px;
  border-top: 1px solid var(--appNavLine);
}

.appNavGroupLabel {
  padding: 0 13px;
  margin-bottom: 8px;
  color: var(--appNavMuted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1.5;
}

.appNavLink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 11px 13px;
  box-sizing: border-box;
  border-radius: 7px;
  color: var(--appNavText);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.appNavLink span {
  min-width: 0;
  font-weight: inherit;
  overflow-wrap: anywhere;
}

.appNavLink i {
  flex: none;
  width: 18px;
  color: var(--appNavMuted);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transition: color 0.18s ease;
}

.appNavLink .appNavExternal {
  width: auto;
  margin-left: auto;
  font-size: 1rem;
}

.appNavLink:hover {
  background: var(--appNavHover);
  color: #fff;
}

.appNavLink:hover i {
  color: #fff;
}

/* Aktueller Eintrag: aria-current ist das einzige Merkmal ("page" auf der Seite selbst, "true" auf Unterseiten) */
.appNavLink[aria-current] {
  background: var(--appNavActive);
  color: #fff;
  font-weight: 600;
}

.appNavLink[aria-current] i {
  color: var(--appNavActiveIcon);
}

.appNavLink[aria-current]::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  transform: translateY(-50%);
}

/* Fuß: Reisebüro und Abmelden */

.appSidebarFoot {
  flex: none;
  padding: 18px 16px 20px;
  border-top: 1px solid var(--appNavLine);
}

.appUser {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  margin-bottom: 0.9rem;
  padding: 0 0.85rem;
}

.appUserAvatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 8px;
  background: var(--appNavActive);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.appUserText {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.appUserName,
.appUserMail {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appUserName {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.appUserMail {
  color: var(--appNavMuted);
  font-size: 0.8rem;
  font-weight: 400;
}

.appLogout {
  margin: 0;
}

.appLogoutButton {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 4px 13px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--appNavText);
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.appLogoutButton span {
  font-weight: inherit;
}

.appLogoutButton i {
  font-size: 1.15rem;
  line-height: 1;
}

.appLogoutButton:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: var(--appNavHover);
  color: #fff;
}

/* Nur für Vorleseprogramme */

.appSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tastaturfokus */

.appNavLink:focus-visible,
.appBrand:focus-visible,
.appTopbarBrand:focus-visible,
.appMenuButton:focus-visible,
.appMenuClose:focus-visible,
.appLogoutButton:focus-visible {
  outline: 2px solid var(--appNavFocus);
  outline-offset: 2px;
}

.appBrand:focus-visible {
  outline-offset: 6px;
}

/* Ab 1280 Pixel: feste Leiste */

@media (min-width: 1280px) {
  .appSidebar {
    z-index: 1000;
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }

  .appSidebar ~ main {
    margin-left: var(--sidebarWidth);
    min-height: 100vh;
    min-height: 100dvh;
    --appStickyTop: 0px;
  }

  html:has(.appTopbar) {
    scroll-padding-top: 0;
  }

  .appBrand {
    font-size: 20px;
  }

  .appTopbar,
  .appScrim,
  .appMenuClose {
    display: none;
  }

  html.appMenuOpen {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Auch die Regeln des geöffneten Menüs: Sie sind spezifischer und setzen ihr eigenes transition. */
  .appSidebar,
  .appScrim,
  html.appMenuOpen .appSidebar,
  html.appMenuOpen .appScrim,
  .appNavLink,
  .appNavLink i,
  .appMenuButton,
  .appMenuClose,
  .appLogoutButton {
    transition: none;
  }

  html:has(.appSkipLink) {
    scroll-behavior: auto;
  }
}

/* Windows-Kontrastmodus: Farben fallen weg. Die Leiste braucht eine Kante, und der aktuelle Eintrag einen Streifen, der
   sich vom Fokusring (outline) unterscheidet. */
@media (forced-colors: active) {
  .appSidebar {
    border-right: 1px solid CanvasText;
  }

  .appTopbar {
    border-bottom: 1px solid CanvasText;
  }

  .appNavLink[aria-current]::before {
    forced-color-adjust: none;
    width: 4px;
    background: Highlight;
  }
}

@media print {
  .appSidebar,
  .appTopbar,
  .appScrim,
  .appSkipLink {
    display: none;
  }

  .appSidebar ~ main {
    margin-left: 0;
  }
}