/* RR Team uniform layout layer
   Ziel:
   - gleiche Hero-/Logo-Basis auf allen app-hero Seiten
   - Portal/PDF behalten normalen app-glass-btn Stil
   - Panel-Overlap bleibt wie im Original
   - Header-Inhalt wird kompakt genug, damit nichts verdeckt wird
*/

:root {
  --rr-brand-logo-w-mobile: 190px;
  --rr-brand-logo-h-mobile: 107px;
  --rr-brand-logo-w-desktop: 206px;
  --rr-brand-logo-h-desktop: 116px;
}

html {
  scrollbar-gutter: stable;
}

body.app-layout-uniform {
  overflow-anchor: none;
}

/* Hero bleibt in der Höhe aus main.css, nur Innenabstand wird stabilisiert */
body.app-layout-uniform .app-hero {
  height: var(--hero-height-mobile, 300px) !important;
  min-height: var(--hero-height-mobile, 300px) !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  padding-bottom: 54px !important;
  position: relative !important;
}

/* Inhalt immer oben starten */
body.app-layout-uniform .app-hero-inner {
  height: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  color: #fff;
}

/* Seiten-Wrapper neutralisieren */
body.app-layout-uniform .header-inner,
body.app-layout-uniform .header-center,
body.app-layout-uniform .emails-hero,
body.app-layout-uniform .settings-hero,
body.app-layout-uniform .report-hero,
body.app-layout-uniform .zeiten-hero-inner {
  min-height: 0 !important;
}

/* Portal-Header: alte negative Abstände raus */
body.app-layout-uniform #header-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 0 !important;
}

/* Logo überall gleich und ohne transform */
body.app-layout-uniform .app-logo-frame,
body.app-layout-uniform .portal-hero-inner .app-logo-frame {
  width: var(--rr-brand-logo-w-mobile) !important;
  height: var(--rr-brand-logo-h-mobile) !important;
  min-width: var(--rr-brand-logo-w-mobile) !important;
  min-height: var(--rr-brand-logo-h-mobile) !important;
  max-width: var(--rr-brand-logo-w-mobile) !important;
  max-height: var(--rr-brand-logo-h-mobile) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto 0 !important;
  padding: 0 !important;

  line-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;

  transform: none !important;
  translate: none !important;
  animation: none !important;

  flex: 0 0 var(--rr-brand-logo-h-mobile) !important;
  pointer-events: auto !important;
  user-select: none !important;
  text-decoration: none !important;
}

body.app-layout-uniform .app-logo-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  display: block !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  will-change: auto !important;

  filter:
    drop-shadow(0 9px 13px rgba(0,0,0,.48))
    drop-shadow(0 0 5px rgba(255,255,255,.26)) !important;
}

/* alte Textlogos aus */
body.app-layout-uniform .app-logo-mark,
body.app-layout-uniform .app-logo-team {
  display: none !important;
}

/* Subline */
body.app-layout-uniform .app-logo-sub,
body.app-layout-uniform #header-title .app-logo-sub {
  margin-top: 0 !important;
  min-height: 1.15em !important;
  line-height: 1.15 !important;
  color: rgba(255,255,255,.92) !important;
}

/* Titel kleiner, damit Aktionen nicht nach unten gedrückt werden */
body.app-layout-uniform .app-hero-title {
  max-width: min(94vw, 980px) !important;
  margin-top: 2px !important;
  font-size: clamp(1.9rem, 3.3vw, 2.65rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
  white-space: normal !important;
  text-wrap: balance;
}

body.app-layout-uniform .app-hero-subtitle {
  margin-top: 4px !important;
  font-size: clamp(.84rem, 1.35vw, .95rem) !important;
  line-height: 1.15 !important;
}

/* Pills kompakt */
body.app-layout-uniform .app-pill-row {
  margin-top: 6px !important;
  gap: 7px !important;
}

body.app-layout-uniform .app-stat-pill {
  min-height: 28px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Aktionen höher halten, aber keine Button-Farben anfassen */
body.app-layout-uniform .app-hero-actions {
  margin-top: 6px !important;
  position: relative !important;
  z-index: 30 !important;
}

body.app-layout-uniform .app-hero-actions .app-glass-btn {
  position: relative !important;
  z-index: 30 !important;
}

/* Portal-Startseite kompakt halten */
body.app-layout-uniform .portal-hero-inner #header-username {
  margin-top: 3px !important;
  margin-bottom: 2px !important;
}

body.app-layout-uniform .portal-hero-inner .app-hero-badges {
  margin-top: 0 !important;
}

body.app-layout-uniform .portal-hero-inner .last-login {
  margin-top: 2px !important;
}

/* Wichtig: Original-Panel-Overlap behalten */
body.app-layout-uniform:not(.portal-hydrating):not(.portal-ready) .app-shell {
  margin-top: var(--shell-overlap-mobile) !important;
}

body.app-layout-uniform .app-shell--hero-dense {
  margin-top: var(--shell-overlap-mobile) !important;
}

/* Panels stabil */
body.app-layout-uniform .app-panel,
body.app-layout-uniform .card,
body.app-layout-uniform .admin-card,
body.app-layout-uniform .settings-card,
body.app-layout-uniform .report-card {
  overflow-anchor: none;
}

/* Legacy-Hero-Seiten */
body.app-layout-uniform .hero {
  min-height: var(--hero-height-mobile, 300px);
}

@media (min-width: 600px) {
  body.app-layout-uniform .app-hero {
    height: var(--hero-height-tablet, 320px) !important;
    min-height: var(--hero-height-tablet, 320px) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    padding-bottom: 58px !important;
  }

  body.app-layout-uniform:not(.portal-hydrating):not(.portal-ready) .app-shell,
  body.app-layout-uniform .app-shell--hero-dense {
    margin-top: var(--shell-overlap-tablet) !important;
  }

  body.app-layout-uniform .hero {
    min-height: var(--hero-height-tablet, 320px);
  }
}

@media (min-width: 1024px) {
  body.app-layout-uniform .app-hero {
    height: var(--hero-height-desktop, 340px) !important;
    min-height: var(--hero-height-desktop, 340px) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    padding-bottom: 60px !important;
  }

  body.app-layout-uniform .app-logo-frame,
  body.app-layout-uniform .portal-hero-inner .app-logo-frame {
    width: var(--rr-brand-logo-w-desktop) !important;
    height: var(--rr-brand-logo-h-desktop) !important;
    min-width: var(--rr-brand-logo-w-desktop) !important;
    min-height: var(--rr-brand-logo-h-desktop) !important;
    max-width: var(--rr-brand-logo-w-desktop) !important;
    max-height: var(--rr-brand-logo-h-desktop) !important;
    flex-basis: var(--rr-brand-logo-h-desktop) !important;
  }

  body.app-layout-uniform .app-hero-title {
    font-size: clamp(2rem, 2.85vw, 2.8rem) !important;
  }

  body.app-layout-uniform:not(.portal-hydrating):not(.portal-ready) .app-shell,
  body.app-layout-uniform .app-shell--hero-dense {
    margin-top: var(--shell-overlap-desktop) !important;
  }

  body.app-layout-uniform .hero {
    min-height: var(--hero-height-desktop, 340px);
  }
}

@media (max-width: 760px) {
  body.app-layout-uniform .app-hero {
    padding-bottom: 50px !important;
  }

  body.app-layout-uniform .app-logo-frame,
  body.app-layout-uniform .portal-hero-inner .app-logo-frame {
    width: 180px !important;
    height: 101px !important;
    min-width: 180px !important;
    min-height: 101px !important;
    max-width: 180px !important;
    max-height: 101px !important;
    flex-basis: 101px !important;
  }

  body.app-layout-uniform .app-hero-title {
    font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
  }

  body.app-layout-uniform .app-hero-subtitle {
    font-size: .86rem !important;
  }

  body.app-layout-uniform .app-pill-row {
    margin-top: 6px !important;
  }

  body.app-layout-uniform .app-hero-actions {
    margin-top: 5px !important;
  }
}