/* =====================================================================
 * pivicon-shell.css — Seitenleiste + Hauptbereich + Fußzeile.
 *
 * Single Point of Truth: pivicon-master/design/. Zusammen mit
 * pivicon-appbar.{css,js} bildet die Shell den Layout-Standard aus
 * design/LAYOUT.md ab:
 *
 *   ┌──────────────────────── pv-appbar ────────────────────────┐
 *   │ [Marke][Modul] │ [Mandant ▾][Einheit ▾]  … [⠿][Profil ▾]  │
 *   ├───────────────┬───────────────────────────────────────────┤
 *   │ pv-shell__nav │ pv-shell__main (--paper, weiße Boxen)      │
 *   │ Gruppen +     │                                           │
 *   │ Icon-Einträge ├───────────────────────────────────────────┤
 *   │               │ pv-shell__foot (eine dezente Zeile)        │
 *   └───────────────┴───────────────────────────────────────────┘
 *
 * Farben ausschließlich aus pivicon-tokens.css
 * (--nav / --nav-ink / --nav-active / --paper / --panel / --line).
 *
 * pivicon-design-version: 2.1.0
 *
 * HARTE GRENZE (ab Standard 2.0.0): Die Seitenleiste ist Plattform-Chrom
 * und benutzt ausschließlich --pv-accent — NICHT das überschreibbare
 * --accent. Ein Mandant darf die plattformeigene Navigation nicht
 * einfärben, sonst wird sie zur Täuschungsfläche gegenüber den eigenen
 * Benutzern. Nur .pv-shell__main trägt [data-pv-scope="content"] und
 * damit den überschreibbaren Mandanten-/Einheiten-Akzent.
 * ===================================================================== */

.pv-shell {
  /* Höhe der Kopfzeile — überschreibbar, falls ein Modul die Shell nicht
     direkt unter die pv-appbar hängt:  style="--pv-shell-top:0px". */
  --pv-shell-top: 52px;
  --pv-nav-w: 232px;
  display: flex; align-items: stretch;
  min-height: calc(100vh - var(--pv-shell-top));
  font-family: var(--font);
  background: var(--paper); color: var(--ink);
}

/* --- Seitenleiste ------------------------------------------------------ */
.pv-shell__nav {
  flex: 0 0 var(--pv-nav-w); width: var(--pv-nav-w); box-sizing: border-box;
  background: var(--nav); color: var(--nav-ink);
  border-right: 1px solid var(--line);
  padding: .75rem .6rem 1.25rem;
  /* Volle Sichthöhe: die Leiste bleibt beim Scrollen stehen und ihre Fläche
     reicht immer bis zum unteren Rand — auch bei kurzem Inhalt. */
  position: sticky; top: var(--pv-shell-top); align-self: flex-start;
  height: calc(100vh - var(--pv-shell-top)); overflow-y: auto;
}

.pv-shell__group + .pv-shell__group { margin-top: .35rem; }

.pv-shell__gtitle {
  display: flex; align-items: center; gap: .4rem; width: 100%; box-sizing: border-box;
  padding: .5rem .55rem .35rem;
  background: transparent; border: 0; border-radius: var(--r);
  color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
}
.pv-shell__gtitle:hover { color: var(--nav-active); }
.pv-shell__gtitle span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-shell__gtitle svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .15s ease; }
.pv-shell__gtitle[aria-expanded="false"] svg { transform: rotate(-90deg); }

.pv-shell__gitems { display: flex; flex-direction: column; gap: 1px; }
.pv-shell__gitems[hidden] { display: none; }

.pv-shell__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem; border: 0; border-radius: var(--r);
  background: transparent; color: var(--nav-ink);
  font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
}
.pv-shell__item:hover { background: color-mix(in srgb, var(--nav-active) 7%, transparent); color: var(--nav-active); }
.pv-shell__item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
.pv-shell__item-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aktiver Eintrag: dezente Akzent-Tönung (~8 %, --pv-accent-tint) + kräftige
   Schrift, Akzent als Kante. Chrom → Plattform-Akzent, nicht überschreibbar. */
.pv-shell__item--active,
.pv-shell__item[aria-current="page"] {
  background: var(--pv-accent-tint);
  color: var(--nav-active); font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--pv-accent);
}
.pv-shell__item--active svg { opacity: 1; color: var(--pv-accent); }

/* --- Hauptbereich ------------------------------------------------------ */
.pv-shell__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Der Hauptbereich ist ein <main>. Modul-Stylesheets formatieren <main> teils global
   (pivicon ID: `main{display:grid;place-items:center}` fuer zentrierte Login-Seiten) —
   das wuerde den Inhalt der Shell zentrieren und stauchen. Deshalb setzen wir die
   Darstellung hier ausdruecklich zurueck, statt es in jedem Modul einzeln zu flicken. */
.pv-shell__main {
  flex: 1 1 auto; padding: 1.25rem 1.5rem; background: var(--paper);
  display: block; place-items: initial; min-width: 0;
}

/* Weiße Inhaltsbox — Module dürfen sie direkt verwenden. */
.pv-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 1rem 1.15rem;
}
.pv-panel + .pv-panel { margin-top: 1rem; }

/* --- Fußzeile ---------------------------------------------------------- */
.pv-shell__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  padding: .85rem 1.5rem; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); background: var(--paper);
}
.pv-shell__foot a { color: var(--ink-soft); text-decoration: none; }
.pv-shell__foot a:hover { color: var(--ink); text-decoration: underline; }
.pv-shell__foot-sep { opacity: .45; }

/* --- Schmale Ansicht --------------------------------------------------- */
@media (max-width: 860px) {
  .pv-shell { flex-direction: column; }
  .pv-shell__nav {
    flex: 0 0 auto; width: auto; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .pv-shell__main { padding: 1rem; }
  .pv-shell__foot { padding: .85rem 1rem; }
}