/* Gemeinsame Oberfläche (oberer Bar + linke Navigation) für alle Verwaltungsseiten.
   Wird von den PHP-Seiten (Webserver) UND den Seiten des Planungsdienstes eingebunden:
     <link rel="stylesheet" href="/admin/assets/css/shell.css">
   Die Datei liegt auf BEIDEN Systemen identisch (Webserver: admin/assets/css/shell.css,
   Planungsdienst: public/assets/css/shell.css).

   Aufbau:
   - .app-top   fixierter Bar über die ganze Breite: Logo links, danach ein Platz (#appTopSlot),
                in den eine Seite ihre Kopfzeile schiebt (Element mit data-app-topbar, sonst h1.pageh1).
   - .app-sb    linke Navigation UNTER dem Bar (Desktop: schmale Symbolleiste, beim Überfahren
                als Überlagerung ausgeklappt; Mobil/iPad hochkant: per ☰ im Bar).
   --app-top-h  tatsächliche Höhe des Bars (per Script gemessen, falls er umbricht). */

:root{
  --app-bg:#eef2f6; --app-card:#fff; --app-ink:#16202b; --app-muted:#647587;
  --app-line:#e6ecf2; --app-accent:#0090d0; --app-deep:#1e3a8a;
  --app-disp:"Barlow Semi Condensed",system-ui,sans-serif;
  --app-body:"Barlow",system-ui,sans-serif;
  --app-w:272px;
  --app-w-collapsed:64px;
  --app-top-h:58px;
  --app-rail:var(--app-w-collapsed);   /* Breite, die links dauerhaft belegt ist (mobil: 0) */
  --app-logo-bg:transparent;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --app-bg:#0e1720; --app-card:#16222e; --app-ink:#e8eef4; --app-muted:#93a4b5; --app-line:#243342; --app-logo-bg:#ffffff;
}}
:root[data-theme="dark"]{
  --app-bg:#0e1720; --app-card:#16222e; --app-ink:#e8eef4; --app-muted:#93a4b5; --app-line:#243342; --app-logo-bg:#ffffff;
}

html{scroll-padding-top:calc(var(--app-top-h) + 8px)}
body{font-family:var(--app-body);background:var(--app-bg);color:var(--app-ink);padding-left:var(--app-w);padding-top:var(--app-top-h)}

/* ---- Oberer Bar (volle Breite, fixiert) ---- */
.app-top{position:fixed;left:0;right:0;top:0;min-height:58px;z-index:1003;display:flex;align-items:center;gap:14px;
  padding:7px 16px 7px 12px;background:var(--app-card);border-bottom:1px solid var(--app-line);
  box-shadow:0 2px 10px rgba(15,30,60,.06);font-family:var(--app-body);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.app-top .tlogo{flex:none;display:flex;align-items:center;align-self:stretch;padding-right:14px;border-right:1px solid var(--app-line);text-decoration:none}
.app-top .tlogo img{display:block;height:40px;width:auto;background:var(--app-logo-bg);border-radius:6px;padding:2px}
.app-top .tslot{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.app-top [data-app-topbar]{margin:0!important;flex:1 1 auto;min-width:0}
.app-top .tslot>.pageh1{margin:0!important;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* PHP-Seiten: Seitentitel wandert in den Bar */

/* ---- Sidebar (unter dem Bar) ---- */
.app-sb{position:fixed;left:0;top:var(--app-top-h);bottom:0;width:var(--app-w);background:var(--app-card);
  border-right:1px solid var(--app-line);display:flex;flex-direction:column;z-index:1000;overflow-y:auto;overflow-x:hidden;
  font-family:var(--app-body);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.app-sb nav{flex:1 1 auto;padding:6px 10px 8px}
.app-sb .grp{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--app-muted);padding:15px 10px 5px;white-space:nowrap}
.app-sb a.item{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--app-ink);white-space:nowrap;
  font-size:14px;font-weight:600;padding:9px 10px;border-radius:9px;margin:1px 0;border-left:3px solid transparent}
.app-sb a.item .ic{font-size:17px;width:22px;text-align:center;flex:none;line-height:1}
.app-sb a.item:hover{background:rgba(0,144,208,.08)}
.app-sb a.item.active{background:rgba(0,144,208,.12);color:var(--app-accent);border-left-color:var(--app-accent)}
.app-sb .foot{border-top:1px solid var(--app-line);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.app-sb .who{font-size:12px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-sb .who b{color:var(--app-ink);font-weight:700}
.app-sb .logout{display:block;box-sizing:border-box;text-align:center;text-decoration:none;font-size:13px;font-weight:700;color:var(--app-accent);white-space:nowrap;
  border:1px solid var(--app-line);border-radius:8px;padding:8px 10px}
.app-sb .logout:hover{background:rgba(0,144,208,.08);border-color:var(--app-accent)}

/* ---- Desktop: schmale Icon-Leiste als Standard, beim Überfahren als Overlay ausklappen ----
   Die Leiste ist immer eingeklappt. Fährt die Maus darüber (oder erhält sie per Tastatur den
   Fokus), legt sie sich in voller Breite ÜBER den Inhalt (der Inhalt bleibt an seiner Stelle).
   Maus weg -> wieder Icon-Leiste. Kein Umschalter, kein gespeicherter Zustand. */
@media (min-width:901px){
  body{padding-left:var(--app-w-collapsed)}
  .app-sb{transition:width .55s cubic-bezier(.4,0,.2,1)}
  .app-sb:hover,.app-sb:focus-within{box-shadow:8px 0 30px rgba(15,30,60,.22);z-index:1001}
  .app-sb:not(:hover):not(:focus-within){width:var(--app-w-collapsed)}
  .app-sb:not(:hover):not(:focus-within) nav{padding-left:7px;padding-right:7px}
  .app-sb:not(:hover):not(:focus-within) .grp{display:none}
  .app-sb:not(:hover):not(:focus-within) a.item{justify-content:center;padding-left:0;padding-right:0}
  .app-sb:not(:hover):not(:focus-within) a.item .lbl,
  .app-sb:not(:hover):not(:focus-within) .who,
  .app-sb:not(:hover):not(:focus-within) .logout .lbl{display:none}
  .app-sb:not(:hover):not(:focus-within) .foot{align-items:center;padding-left:6px;padding-right:6px}
  .app-sb:not(:hover):not(:focus-within) .logout{padding:8px 0;width:100%}
  .app-sb:not(:hover):not(:focus-within) .logout::after{content:"⎋";font-size:16px}
}

/* ---- Mobil / iPad hochkant: Leiste per ☰ im Bar ---- */
.app-burger{display:none;flex:none;width:40px;height:40px;border:1px solid var(--app-line);background:var(--app-card);
  color:var(--app-ink);border-radius:10px;font-size:20px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.app-scrim{display:none;position:fixed;left:0;right:0;bottom:0;top:var(--app-top-h);background:rgba(10,20,30,.42);z-index:999}
@media (max-width:900px){
  :root{--app-rail:0px}
  body{padding-left:0}
  .app-top{gap:10px;padding-left:10px;padding-right:10px}
  .app-top .tlogo{padding-right:10px}
  .app-top .tlogo img{height:34px}
  .app-sb{transform:translateX(-100%);transition:transform .25s ease}
  .app-sb.open{transform:none;box-shadow:0 0 34px rgba(0,0,0,.28)}
  .app-scrim.open{display:block}
  .app-burger{display:flex}
}
@media print{
  .app-top,.app-sb,.app-scrim{display:none!important}
  body{padding:0!important}
}