/* Tower-Shell = ConsoleHub Frame-Look (tp-ui-v2 apps-shell + frame-look.css).
   Hier nur, was die Console per Inline-Style/Tailwind setzt – CSP erlaubt kein Inline. */
:root { --tpv2-chrome-top: 56px; }

body {
  display: block; /* tp-ui base setzt flex → Grid würde zentriert */
  margin: 0;
  padding-top: 3.5rem; /* nur Topbar – Tower hat keine Service-Bar (keine Module) */
}
/* frame-look.css rechnet mit Topbar + Service-Bar (6.5rem) – hier nur Topbar */
@media (min-width: 1024px) {
  [data-look="frame"] .apps-shell-grid { height: calc(100dvh - 3.5rem); }
  /* wie console.talk-point.dev: Sheet bis zum unteren Rand, nur obere Ecken rund */
  [data-look="frame"] .apps-page-grid {
    height: calc(100dvh - 3.5rem);
    margin-bottom: 0;
    border-radius: 16px 16px 0 0;
  }
}
/* Mobil: Sheet direkt unter der Topbar (Abstand Logo↔Sheet = Logo↔Oberkante), Rundung vor dunklem Grund */
@media (max-width: 1023px) {
  [data-look="frame"] .apps-page-grid {
    border-radius: 16px 16px 0 0;
    overflow: clip; /* Page-Header hat eigenen Hintergrund und überdeckte sonst die Rundung; clip lässt sticky intakt */
  }
  /* Geschlossene Schublade liegt links außerhalb, ihr Schatten ragte trotzdem ins Bild */
  .apps-shell-sidebar:not(.is-open) { box-shadow: none; }
}
/* Gemessen auf console.talk-point.dev (Light): Sheet #f1f1f1, Text #303030 */
html[data-theme="light"] { --tp-content-bg: #f1f1f1; --tp-text: #303030; }
.apps-shell-grid { min-height: calc(100vh - 3.5rem); }

/* Breadcrumb oben im Sheet, Trenner automatisch zwischen Kindern */
.tower-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
  padding: .875rem 1.5rem 0;
  font-size: .75rem; color: var(--tp-text-secondary);
}
.tower-breadcrumb > * + *::before { content: "/"; margin-right: .375rem; color: var(--tp-border); }
.tower-breadcrumb a { color: inherit; text-decoration: none; }
.tower-breadcrumb a:hover { color: var(--tp-text); }
.tower-breadcrumb > :last-child { color: var(--tp-text); }
.tower-breadcrumb:has(> :only-child) { display: none; } /* nur Root (Dashboard) → weg */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--tp-content-bg);
  color: var(--tp-text);
}

/* Bootstrap/styles.css a:hover (blau + Unterstrich) nicht in Shell-Chrome */
.apps-shell-sidebar a.apps-sidebar-item,
.apps-shell-sidebar a.apps-sidebar-item:hover,
.tp-topbar a, .tp-topbar a:hover,
.tp-service-bar a, .tp-service-bar a:hover {
  text-decoration: none;
}
.apps-shell-sidebar a.apps-sidebar-item:hover { color: var(--tp-text); }
/* tp-ui base.css unterstreicht a:hover – Komponenten-Links (Buttons, Kacheln, KPIs, Tabs) nicht */
a[class*="tpv2-"]:hover { text-decoration: none; }
.apps-shell-sidebar a.apps-sidebar-item.is-active,
.apps-shell-sidebar a.apps-sidebar-item.is-active:hover { color: #fff; }

.tower-logo-svg { width: 100%; height: 100%; fill: #fff; }

.tower-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  background: #1d4b8e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600;
}
.tower-avatar-btn { width: auto; padding: 0 .5rem; display: flex; align-items: center; gap: .25rem; }

/* tp-ui färbt den Hamburger mit --tp-text (dunkel) – auf der schwarzen Topbar unsichtbar */
.tp-topbar .apps-hamburger { color: #fff; }

.tower-page-header-text { flex: 1; min-width: 0; }

.tower-page-body { padding: 0 1.5rem 1.5rem; }
/* tp-ui rückt den Seitenkopf mobil auf .75rem – Inhalt und Breadcrumb bündig dazu */
@media (max-width: 767px) {
  .tower-page-body, .tower-breadcrumb { padding-left: .75rem; padding-right: .75rem; }
  /* Aktionen stehen mobil unter dem Titel: Ghost-Buttons ohne Rahmen wirkten eingerückt */
  .tpv2-page-h-actions .tpv2-btn-ghost {
    border-color: var(--tp-border, #e1e1e1);
    background-color: var(--tp-surface, #fff);
  }
}
/* {% block content_width %}: Detail-/Formularseiten wie Console schmaler (64rem) bzw. fokussiert (48rem) */
.tower-page { width: 100%; }
.tower-page.tower-narrow { max-width: calc(64rem + 3rem); margin: 0 auto; }
.tower-page.tower-xs { max-width: calc(48rem + 3rem); margin: 0 auto; }

/* Footer unten in der Sidebar statt im Sheet */
.tower-sidebar-footer {
  margin-top: auto;
  padding: .75rem .5rem 0;
  border-top: 1px solid var(--tp-border);
  display: flex; flex-wrap: wrap; gap: .25rem .75rem;
  font-size: .6875rem; color: var(--tp-text-secondary);
}
.tower-sidebar-footer a { color: inherit; text-decoration: none; }
.tower-sidebar-footer a:hover { color: var(--tp-text); }

/* ---- Easter Egg: "Altes Design" ---- */
.tower-easter-btn {
  background: none; border: 0; padding: 0; margin-left: auto; cursor: pointer;
  font: inherit; color: inherit; opacity: .55;
}
.tower-easter-btn:hover { opacity: 1; text-decoration: line-through; }
.tower-easter {
  width: min(28rem, 92vw); padding: 2rem; border: 0; border-radius: 16px;
  background: var(--tp-surface); color: var(--tp-text); text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.tower-easter::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.tower-easter-step { display: none; }
.tower-easter[data-step="loading"] .tower-easter-loading,
.tower-easter[data-step="old"] .tower-easter-old,
.tower-easter[data-step="gone"] .tower-easter-gone { display: block; }
.tower-easter-title { margin: 0 0 .75rem; font-weight: 600; font-size: 1rem; }
.tower-easter-sub { margin: 0 0 1.25rem; color: var(--tp-text-secondary); font-size: .8125rem; }
.tower-easter-log { margin: .5rem 0 0; font-size: .75rem; color: var(--tp-text-secondary); font-family: ui-monospace, Menlo, monospace; }
.tower-easter-bar { height: 8px; border-radius: 999px; background: var(--tp-border); overflow: hidden; }
.tower-easter-bar span { display: block; height: 100%; width: 0; background: #0d6efd; border-radius: 999px; }
.tower-easter[data-step="loading"] .tower-easter-bar span { animation: tower-easter-fill 2.8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes tower-easter-fill { 0% { width: 0 } 60% { width: 78% } 85% { width: 97% } 100% { width: 99% } }
/* die "alte" Oberfläche: Bootstrap-Blau, dann Absturz */
.tower-easter-old { font-family: "Helvetica Neue", Arial, sans-serif; text-align: left; transform-origin: 20% 110%; }
.tower-easter[data-step="old"] .tower-easter-old { animation: tower-easter-crash 2.4s ease-in forwards; }
.tower-easter-navbar { background: #1d4b8e; color: #fff; padding: .6rem .9rem; border-radius: 6px 6px 0 0; font-weight: 700; }
.tower-easter-navbar span { font-weight: 400; font-size: .75rem; opacity: .85; margin-left: .7rem; }
.tower-easter-alert { margin: .75rem; padding: .6rem .8rem; background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; border-radius: 6px; font-size: .8rem; }
.tower-easter-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: 0 .75rem .75rem; }
.tower-easter-tiles i { display: block; height: 42px; border-radius: 6px; }
.tower-easter-tiles i:nth-child(1) { background: #fff3cd } .tower-easter-tiles i:nth-child(2) { background: #f8d7da }
.tower-easter-tiles i:nth-child(3) { background: #e2e3e5 } .tower-easter-tiles i:nth-child(4) { background: #e0cffc }
@keyframes tower-easter-crash {
  0%, 45% { transform: none; opacity: 1 }
  55% { transform: rotate(-3deg) translateX(-4px) }
  62% { transform: rotate(4deg) translateX(6px) }
  70% { transform: rotate(-6deg) }
  100% { transform: rotate(38deg) translateY(140%); opacity: 0 }
}
.tower-easter-404 { margin: 0; font-size: 4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--tp-primary); animation: tower-easter-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes tower-easter-pop { from { transform: scale(.3) rotate(-8deg); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .tower-easter * { animation: none !important } }