/* App-Rahmen Redesign 2026 – Sidebar, Topbar, Drawer (iPad), iOS-Kopf und Tab-Bar. Nur Tokens.
   Desktop ≥ 1280 px: feste Sidebar · 768–1279 px: Burger + Drawer · < 768 px: iOS-PWA mit Tab-Bar. */

#dashboard-view:not([hidden]){display:block;min-height:100dvh;background:var(--bg-canvas)}

/* Sidebar / Drawer */
.shell-sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--sidebar-width);display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-24) var(--space-16) var(--space-16);overflow-y:auto;overscroll-behavior:contain;background:var(--bg-sidebar);box-shadow:inset -1px 0 0 var(--border-default)}
.shell-brand{display:inline-flex;align-self:flex-start;padding:var(--space-4) var(--space-8) var(--space-12);border-radius:var(--radius-lg)}
.shell-logo{display:block;width:auto;height:24px}
[data-theme="dark"] .shell-logo{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shell-logo{filter:brightness(0) invert(1)}}
.shell-nav{flex:1;display:flex;flex-direction:column;gap:var(--space-16)}
.shell-nav-group{display:flex;flex-direction:column;gap:var(--space-4)}
.shell-nav-group[hidden],.shell-nav-group:not(:has(.sw-nav:not([hidden]))){display:none}
.shell-nav-label{margin:0;padding:0 var(--space-12) var(--space-4);font:var(--font-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--text-on-sidebar)}
.shell-accounts{display:flex;flex-direction:column;gap:var(--space-4)}
.shell-sidebar .sw-nav:focus-visible,.shell-brand:focus-visible,.shell-avatar-link:focus-visible,.shell-tab:focus-visible,.shell-tab-create:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.shell-footer{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-12);box-shadow:inset 0 1px 0 var(--border-default)}
.shell-footer-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:0 var(--space-4) 0 var(--space-12)}
.shell-role{font:var(--font-tiny);color:var(--text-on-sidebar)}
.shell-backdrop{display:none}

/* Topbar – ihre echte Höhe setzt app.js (--shell-topbar-height); fixierte Seitenleisten kleben darunter */
#dashboard-view{--shell-sticky-top:calc(var(--shell-topbar-height, 64px) + var(--space-16))}
/* Sprungziele (scrollIntoView, #Anker) landen unter dem Header statt dahinter */
#dashboard-view :where([id],.sw-card,.settings-section){scroll-margin-top:var(--shell-sticky-top)}
.shell-topbar{position:sticky;z-index:40;top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:60px;margin-left:var(--sidebar-width);padding:var(--space-10) var(--space-32);background:var(--bg-surface);box-shadow:inset 0 -1px 0 var(--border-default)}
.shell-topbar-start{display:flex;align-items:center;gap:var(--space-12);flex:1;min-width:0}
.shell-topbar-end{display:flex;align-items:center;gap:var(--space-10);flex:none}
.shell-menu-toggle,.shell-topbar-brand,.shell-back,.shell-page-title,.shell-page-actions{display:none}
.shell-search{display:flex;align-items:center;gap:var(--space-8);width:min(320px,100%);padding:0 var(--space-14);border-radius:var(--radius-lg);background:var(--bg-surface-2);color:var(--text-secondary)}
.shell-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--brand-primary),var(--shadow-focus-input)}
.shell-search input{flex:1;min-width:0;padding:var(--space-10) 0;border:0;outline:0;background:transparent;font:var(--font-body);color:var(--text-primary)}
.shell-search input::placeholder{color:var(--text-secondary)}
.shell-search input::-webkit-search-cancel-button{cursor:pointer}
.shell-bell{position:relative;display:inline-flex}
.shell-bell-count{position:absolute;top:calc(-1 * var(--space-4));right:calc(-1 * var(--space-4));min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--brand-primary);color:var(--text-inverse);font:var(--font-tiny);pointer-events:none}
.shell-bell-count[hidden]{display:none}
.shell-avatar-link{display:inline-flex;border-radius:var(--radius-pill);text-decoration:none}

/* Inhalt */
.dashboard-content{min-width:0;margin-left:var(--sidebar-width);padding:var(--space-32) var(--space-32) var(--space-32)}

/* Tab-Bar (nur iPhone) */
.shell-tabbar{display:none}

/* iPad quer/hoch: Burger + Drawer */
@media (max-width:1279px){
  .shell-sidebar{width:min(var(--sidebar-width),86vw);transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-dialog);padding-top:calc(var(--space-24) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom,0px))}
  .shell-sidebar.is-open{transform:none}
  .shell-backdrop:not([hidden]){display:block;position:fixed;z-index:47;inset:0;border:0;padding:0;touch-action:none;background:color-mix(in srgb,var(--bg-overlay) 60%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .shell-topbar,.dashboard-content{margin-left:0}
  .shell-menu-toggle{display:inline-flex}
}
@media (max-width:1279px) and (prefers-reduced-motion:reduce){.shell-sidebar{transition:none}}

/* iPhone / iOS-PWA: Kopf mit Safe Area, Large Title im Inhalt, Tab-Bar mit Blur */
@media (max-width:767px){
  .shell-topbar{position:fixed;left:0;right:0;min-height:0;padding:calc(env(safe-area-inset-top,0px) + var(--space-8)) calc(env(safe-area-inset-right,0px) + var(--space-16)) var(--space-8) calc(env(safe-area-inset-left,0px) + var(--space-16));background:color-mix(in srgb,var(--bg-canvas) 88%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:none}
  .shell-topbar-brand{display:inline-flex;align-items:center}
  .shell-search,.shell-theme-toggle,.shell-create{display:none}
  .shell-topbar-end{gap:var(--space-8)}
  .dashboard-content{padding:calc(env(safe-area-inset-top,0px) + 76px) calc(env(safe-area-inset-right,0px) + var(--space-16)) calc(env(safe-area-inset-bottom,0px) + var(--space-32)) calc(env(safe-area-inset-left,0px) + var(--space-16))}
  body.has-mobile-bottom-nav .dashboard-content{padding-bottom:calc(var(--mobile-tabbar) + var(--space-24))}
  /* Info-Fenster (InfoTip) auf Seiten mit Tab-Leiste: über Leiste und Swibbly-Knopf, nie dahinter. */
  body.has-mobile-bottom-nav .dashboard-content .sw-infotip__panel{z-index:1300;bottom:calc(var(--mobile-tabbar) + var(--space-12) + env(safe-area-inset-bottom,0px))}
  .shell-tabbar:not([hidden]){position:fixed;z-index:45;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start;min-height:var(--mobile-tabbar);padding:var(--space-6) calc(env(safe-area-inset-right,0px) + var(--space-6)) max(env(safe-area-inset-bottom,0px),var(--space-8)) calc(env(safe-area-inset-left,0px) + var(--space-6));background:color-mix(in srgb,var(--bg-surface) 86%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 var(--border-default)}
  body.menu-open .shell-tabbar{pointer-events:none}
  /* Unterseiten (subpage-header.js): Zurück, Seitenname und Seitenaktionen oben; keine Tab-Leiste, kein Seitenkopf. */
  body.is-subpage .shell-menu-toggle,body.is-subpage .shell-topbar-brand,body.is-subpage .shell-bell,body.is-subpage .shell-avatar-link{display:none}
  body.is-subpage .shell-back{display:inline-flex;flex:none}
  body.is-subpage .shell-page-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--font-h3);color:var(--text-primary)}
  body.is-subpage .shell-page-actions{display:flex;align-items:center;gap:var(--space-6)}
  body.is-subpage .shell-tabbar:not([hidden]){display:none}
  body.is-subpage.has-mobile-bottom-nav .dashboard-content{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--space-32))}
  body.is-subpage.has-mobile-bottom-nav .dashboard-content .sw-infotip__panel{bottom:calc(var(--space-16) + env(safe-area-inset-bottom,0px))}
  body.is-subpage .dashboard-content .sw-pagehead,body.is-subpage .account-crumbs,body.is-subpage .account-head > .sw-avatar,body.is-subpage .account-head__title,body.is-subpage .account-head__actions{display:none}
  body.is-subpage .swibby-fab{bottom:calc(var(--space-16) + env(safe-area-inset-bottom,0px))}
}
.shell-tab{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);min-width:0;min-height:44px;padding:var(--space-4) var(--space-3);border-radius:var(--radius-lg);color:var(--text-secondary);font:var(--font-tiny);text-decoration:none}
.shell-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-tab.is-active{color:var(--text-brand)}
.shell-tab-create{justify-self:center;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:calc(-1 * var(--space-10));padding:0;border:0;border-radius:var(--radius-pill);background:var(--brand-primary);color:var(--text-inverse);box-shadow:var(--shadow-toast);cursor:pointer}
.shell-tab-create:hover{background:var(--brand-primary-hover)}

/* Touch-Ziele ≥ 44 px (Logo-Links, Avatar, Suche) */
@media (pointer:coarse),(max-width:834px){
  .shell-brand,.shell-topbar-brand,.shell-avatar-link{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .shell-search{min-height:44px}
  .shell-search input{min-height:44px}
}
/* Offline-Banner über dem Seiteninhalt (Phase 6) */
.app-offline-banner{margin-bottom:var(--space-16)}
.app-offline-banner[hidden]{display:none}

/* Globale Suche: Treffer gruppiert (Beiträge · Kunden · Videos) als Popover unter dem Feld */
.shell-search{position:relative}
.shell-search__results{position:absolute;z-index:60;top:calc(100% + var(--space-6));left:0;width:min(440px,calc(100vw - var(--space-32)));max-height:min(70vh,520px);overflow:auto;border-radius:var(--radius-xl);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default),var(--shadow-dialog)}
.shell-search__results .sw-menu{box-shadow:none;border-radius:0;background:transparent}
.shell-search__status{margin:0;padding:var(--space-12) var(--space-16) 0;font:var(--font-small);color:var(--text-secondary)}

/* iOS-26-Fehler (WebKit 297779): feste Elemente um den gemeldeten Versatz zurückschieben (public/ios-viewport-fix.js) */
.swibby-fab,.sw-overlay,.shell-tabbar,.shell-topbar{translate:0 var(--ios-vv-versatz,0px)}
/* Home-Bildschirm-App: empfohlene Korrektur gegen verrutschende feste Elemente */
@media (display-mode:standalone){html{min-height:calc(100% + env(safe-area-inset-top,0px))}}
/* Fenster offen → Seite dahinter scrollt nicht mit (siehe ui/dialog.js) */
html.sw-has-dialog,html.sw-has-dialog body{overscroll-behavior:none}