/* Gerüst der Seite: Kopfzeile, Seitenleiste, Inhaltsbreiten, Fußzeile.
   Kennt keinen Inhalt, nur die Flächen, in denen er steht.

   Kopfzeile und Seitenleiste sind die einzige Stelle, die bewusst die
   Markenfarbe direkt benutzt statt der semantischen Tokens: sie bleiben in
   beiden Themes Petrol, damit das CRM im Dunkeln dasselbe Produkt ist und
   nicht wie eine fremde App aussieht. */

/* --- Kopfzeile ------------------------------------------------------------ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: var(--marke-petrol); color: var(--auf-farbe);
  padding: .7rem 1.1rem;
}
.brand {
  font-family: var(--font-display); font-weight: 700;
  color: var(--auf-farbe); text-decoration: none; font-size: var(--txt-lg);
}
.brand span { color: var(--marke-teal); }
/* Grosse Marke auf der Anmeldekarte. Dort ist der Grund hell, deshalb traegt
   sie die Textfarbe: mit dem Weiss der Kopfzeile stand der Mandantenname
   unsichtbar auf der weissen Karte, und man las nur "CRM". */
.brand-lg { font-size: var(--txt-xl); color: var(--text); }
.brand-lg span { color: var(--zustand-stark); }
/* Token-Link: Leiste ohne Menü, dafür mit dem Namen des Vertrieblers. */
.topbar-nurbogen { flex-wrap: nowrap; padding: .55rem 1.1rem; }
.topbar-person {
  font-size: var(--txt-sm); opacity: .85; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Glocke: steht nur in der Leiste, wenn etwas offen ist (siehe base.html). */
.glocke {
  display: inline-flex; align-items: center; gap: .3rem; margin-left: auto;
  text-decoration: none; color: inherit;
}

/* Banner, wenn der super_admin in einem fremden Mandanten arbeitet. */
.mandant-banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); flex-wrap: wrap;
  margin: 0; border-radius: 0; text-align: center;
}

/* --- Seitenleiste ---------------------------------------------------------
   Bis 2026-08 stand das Menü als flache Linkreihe in der Kopfzeile. Bei voll
   aktiven Modulen waren das 21 gleichrangige Punkte nebeneinander. Jetzt trägt
   die Leiste die Gruppen auch am Desktop und markiert die aktuelle Seite. */
.app-layout { display: block; }
.seitenleiste {
  background: var(--marke-petrol); color: var(--auf-farbe);
  display: flex; flex-direction: column; gap: .1rem;
  padding: var(--sp-2) var(--sp-2) var(--sp-5);
}
.seitenleiste a {
  color: rgba(255, 255, 255, .86); text-decoration: none;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
  font-size: var(--txt-md); font-weight: 500;
  border-left: var(--balken) solid transparent;
}
.seitenleiste a:hover { background: rgba(255, 255, 255, .12); color: var(--auf-farbe); }
/* Aktueller Punkt: Balken plus Fläche. Nur Fettschrift geht auf dunklem Grund
   unter, gerade am Handy im Hellen. */
.seitenleiste a.aktiv {
  background: rgba(255, 255, 255, .16); color: var(--auf-farbe); font-weight: 700;
  border-left-color: var(--marke-teal);
}
.seitenleiste a.logout { color: var(--marke-teal); }
.nav-grp > summary { list-style: none; }
.nav-grp > summary::-webkit-details-marker { display: none; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px; margin: -4px 0;
}
.nav-toggle span {
  width: 26px; height: 2.5px; background: var(--auf-farbe); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --- Ansicht hell/dunkel --------------------------------------------------
   Steht am Fuß der Seitenleiste, direkt über dem Abmelden. Drei Zustände,
   weil "System" eine eigene Wahl ist und kein Ausgangszustand: wer sein Handy
   abends automatisch umstellt, will das hier nicht noch einmal entscheiden. */
.theme-wahl {
  display: flex; gap: 2px; margin-top: var(--sp-4);
  padding: 3px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
}
.theme-wahl button {
  flex: 1; border: 0; cursor: pointer;
  background: none; color: rgba(255, 255, 255, .75);
  font-family: var(--font-body); font-size: var(--txt-xs); font-weight: 600;
  padding: .35rem .2rem; border-radius: var(--radius-pill);
  min-height: 1.9rem;
}
.theme-wahl button:hover { color: var(--auf-farbe); }
.theme-wahl button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .92); color: var(--marke-petrol);
}

/* --- Inhaltsbreiten ------------------------------------------------------- */
.wrap { max-width: 880px; margin: 0 auto; padding: var(--sp-5) 1.1rem var(--sp-7); }
.full { padding: var(--sp-5) 1.1rem var(--sp-7); }
.public-wrap { max-width: 720px; margin: 0 auto; padding: var(--sp-6) 1.1rem var(--sp-7); }
.auth-wrap { max-width: 400px; margin: 0 auto; padding: var(--sp-7) 1.1rem; }

/* --- Fußzeile ------------------------------------------------------------- */
.app-footer {
  text-align: center;
  padding: var(--sp-5) 0 var(--sp-6);
  opacity: .7;
}

/* --- Seitenleiste ab 900px, darunter Hamburger ----------------------------
   Die Grenze liegt höher als die übrigen 640px des Projekts: 220px Leiste plus
   Inhalt braucht Platz, auf einem schmalen Tablet gewinnt der Inhalt.
   Dieselbe Zahl steht in base.html im Skript für die Menügruppen. */
@media (min-width: 900px) {
  /* Nur wenn es wirklich eine Leiste gibt. Ohne :has() galt das Raster auch
     ausgeloggt, und der Inhalt der Anmeldeseite landete in der 220px breiten
     Menuespalte: die Karte stand links am Rand und der Text brach dreizeilig
     um. Dieselbe Falle gilt fuer die Token-Sitzung des Aufmassbogens. */
  .app-layout:has(> .seitenleiste) {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start;
  }
  .seitenleiste {
    position: sticky; top: 0; align-self: start; z-index: var(--z-leiste);
    /* Volle Fensterhöhe, sonst bricht die dunkle Fläche unter dem letzten
       Punkt ab und die Leiste sieht abgeschnitten aus. Bei vielen Modulen wird
       sie länger als der Bildschirm, deshalb eigenes Scrollen. */
    min-height: 100vh; max-height: 100vh; overflow-y: auto;
  }
  .nav-grp > summary {
    color: rgba(255, 255, 255, .55); font-weight: 700; text-transform: uppercase;
    font-size: .68rem; letter-spacing: .06em; padding: .9rem .7rem .35rem;
  }
  .seitenleiste a { display: block; }
}

@media (max-width: 899px) {
  /* Mobil: Seitenleiste liegt eingeklappt unter der Kopfzeile, der Hamburger
     holt sie hervor. Die Gruppen sind dort aufklappbar, sonst müsste man durch
     zwanzig Punkte scrollen. */
  .nav-toggle { display: flex; }
  .seitenleiste { display: none; }
  .seitenleiste.open { display: flex; }
  .seitenleiste a { display: block; padding: .8rem .6rem; font-size: 1rem; }
  .seitenleiste a:not(.logout) { border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .nav-grp > summary {
    display: block; color: rgba(255, 255, 255, .6); font-weight: 600;
    text-transform: uppercase; font-size: var(--txt-xs); letter-spacing: .05em;
    padding: .7rem .6rem; cursor: pointer;
  }
  .nav-grp > summary::after { content: "▾"; float: right; opacity: .7; }
  .nav-grp[open] > summary { color: var(--auf-farbe); }
  .nav-grp[open] > summary::after { content: "▴"; }
  .nav-grp > a { padding-left: 1.2rem; }
}

@media (max-width: 640px) {
  .topbar { padding: .6rem .9rem; }
  .wrap { padding: 1.1rem .9rem var(--sp-7); }
  .full { padding: 1.1rem .9rem var(--sp-7); }
}