/* App-Gerüst: Seitenleiste und Kopfzeile sitzen am Rand, der Inhalt hat Platz und steht im Fokus.
   Layouts: sidebar (Standard), top (Leiste oben), dock (schwebend unten). Auf dem Handy immer unten. */

#app { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 0; padding: 0; margin: 0; max-width: none; min-height: 100vh; align-items: start; }
.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; padding: 0; }
.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: 26px 30px 80px; }

/* ---------- Seitenleiste ---------- */
.side { position: sticky; top: 0; height: 100vh; width: 256px; padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
#app > .side.glass { border-radius: 0; box-shadow: inset -1px 0 0 var(--rim), 10px 0 36px -26px var(--shade); }
#app > .side.glass::before { border-radius: 0; }
.side .brand { padding: 4px 10px 16px; }
.side .nav-primary, .side .nav-context { display: flex; flex-direction: column; gap: 2px; }
.side .nav-context { display: none; }
#app[data-ctx="server"] .nav-primary { display: none; }
#app[data-ctx="server"] .nav-context { display: flex; }
.nav a.on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); }
.nav a { position: relative; }

/* Kontext: Server */
.ctx-back { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--ink-2); font-size: .88rem; border-radius: var(--r-btn); text-decoration: none; }
.ctx-back:hover { color: var(--ink); background: var(--glass-2); text-decoration: none; }
.ctx-back svg { transform: rotate(180deg); width: 14px; height: 14px; }
.ctx-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 14px; }
.ctx-head .sicon { width: 42px; height: 42px; font-size: 1.05rem; border-radius: 11px; }
.ctx-head b { display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-head small { color: var(--ink-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 30px;
  background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5); backdrop-filter: blur(var(--blur)) saturate(1.5);
  box-shadow: inset 0 -1px 0 var(--rim);
}
.topbar .crumbs { display: flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink-3); min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar .crumbs a { color: var(--ink-2); text-decoration: none; } .topbar .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.topbar .crumbs b { color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumbs svg { width: 12px; height: 12px; opacity: .5; flex: none; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-3); }
.live .dot { background: var(--ok); } .live.off .dot { background: var(--bad); animation: blink 1s infinite; }
.topbar .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; text-decoration: none; }
.pagehead .crumbs-top { display: none; }

/* ---------- Layout: Leiste oben ---------- */
[data-layout="top"] #app { grid-template-columns: minmax(0, 1fr); }
[data-layout="top"] .side {
  position: sticky; top: 0; z-index: 30; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 8px 22px; overflow: visible; box-shadow: inset 0 -1px 0 var(--rim);
}
[data-layout="top"] .side .brand { padding: 0 14px 0 0; }
[data-layout="top"] .side .nav-primary, [data-layout="top"] .side .nav-context { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
[data-layout="top"] .side .nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; }
[data-layout="top"] .side .nav-label, [data-layout="top"] .side .nav-sub { display: none; }
[data-layout="top"] .side .ctx-head { padding: 0 8px; } [data-layout="top"] .side .ctx-head .sicon { width: 30px; height: 30px; font-size: .9rem; } [data-layout="top"] .side .ctx-head small { display: none; }
[data-layout="top"] .ctx-back svg { transform: none; }
[data-layout="top"] .side .spacer { flex: 1; }
[data-layout="top"] .side .me .who { display: none; }
[data-layout="top"] .side .nav a, [data-layout="top"] .side .nav button { padding: 8px 12px; }
[data-layout="top"] .side .nav a.on::before { display: none; }
[data-layout="top"] .topbar { position: static; }

/* ---------- Layout: Dock unten ---------- */
[data-layout="dock"] #app { grid-template-columns: minmax(0, 1fr); }
[data-layout="dock"] .content { padding-bottom: 130px; }
[data-layout="dock"] #app > .side.glass { border-radius: 30px; box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 0 0 1px var(--rim), 0 18px 40px -16px var(--shade); }
[data-layout="dock"] .side {
  position: fixed; z-index: 40; left: 50%; bottom: 14px; top: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 20px);
  height: auto; flex-direction: row; align-items: center; gap: 2px; padding: 8px 10px; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
}
[data-layout="dock"] .side::-webkit-scrollbar { display: none; }
[data-layout="dock"] .side .brand, [data-layout="dock"] .side .nav-label, [data-layout="dock"] .side .spacer, [data-layout="dock"] .side .me,
[data-layout="dock"] .side .nav .srvlink, [data-layout="dock"] .side .nav-sub, [data-layout="dock"] .side .ctx-head { display: none; }
[data-layout="dock"] .side .nav-primary, [data-layout="dock"] .side .nav-context, [data-layout="dock"] .side .nav { flex-direction: row; gap: 2px; align-items: center; }
[data-layout="dock"] .side .nav a, [data-layout="dock"] .side .nav button, [data-layout="dock"] .ctx-back { flex-direction: column; gap: 3px; font-size: .68rem; padding: 8px 12px; min-width: 62px; justify-content: center; text-align: center; }
[data-layout="dock"] .side .nav a svg, [data-layout="dock"] .side .nav button svg { width: 22px; height: 22px; }
[data-layout="dock"] .side .nav a.on { transform: translateY(-3px); }
[data-layout="dock"] .side .nav a.on::before { display: none; }
[data-layout="dock"] .ctx-back svg { transform: none; }
[data-layout="dock"] #toasts { bottom: 104px; }

/* ---------- Handy: immer unten ---------- */
@media (max-width: 900px) {
  [data-layout] #app { grid-template-columns: minmax(0, 1fr); }
  [data-layout] .content { padding: 18px 14px 130px; }
  .topbar { padding: 0 14px; min-height: 48px; }
  [data-layout] #app > .side.glass { border-radius: 26px; box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 0 0 1px var(--rim), 0 18px 40px -16px var(--shade); }
  [data-layout] .side {
    position: fixed; z-index: 40; left: 10px; right: 10px; bottom: 10px; top: auto; transform: none; width: auto; max-width: none; height: auto;
    flex-direction: row; align-items: center; gap: 2px; padding: 6px; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
  }
  [data-layout] .side .brand, [data-layout] .side .nav-label, [data-layout] .side .spacer, [data-layout] .side .me,
  [data-layout] .side .nav .srvlink, [data-layout] .side .nav-sub, [data-layout] .side .ctx-head { display: none; }
  [data-layout] .side .nav-primary, [data-layout] .side .nav-context, [data-layout] .side .nav { flex-direction: row; align-items: center; gap: 2px; }
  [data-layout] #app[data-ctx="server"] .nav-primary { display: none; }
  [data-layout] .side .nav-context { flex-basis: auto; border: 0; padding: 0; margin: 0; }
  [data-layout] .side .nav a, [data-layout] .side .nav button, [data-layout] .ctx-back { flex-direction: column; gap: 2px; font-size: .64rem; padding: 7px 10px; min-width: 54px; justify-content: center; text-align: center; }
  [data-layout] .side .nav a.on::before { display: none; }
  [data-layout] .ctx-back svg { transform: none; }
  .live { display: none; }
  #toasts { right: 12px; bottom: 96px; left: 12px; align-items: stretch; }
}

/* ---------- Server-Kopf: schlanke Leiste mit Status und Knöpfen ---------- */
.srv { gap: 14px; }
.srv > div:empty { display: none; }
.srv-head { padding: 12px 18px; gap: 12px 16px; }
.srv-head .glow, .srv-head .sicon { display: none; }
.srv-head h1 { font-size: 1.2rem; }
.srv-head .sub { margin-top: 2px; }