/* ── CSS-Variable für Env-Banner-Höhe (wird von Mail-Shell und ds-shell genutzt) ── */
:root               { --env-banner-h: 0px; }
body.has-env-banner { --env-banner-h: 28px; }

/* ── Environment Banner (non-production) ── */
.env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--amber);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  z-index: 2100; /* above offline-bar (2000) so env text is never covered */
  pointer-events: none;
  user-select: none;
}
.env-banner svg { flex-shrink: 0; }

/* Shift all fixed/sticky elements down when banner is visible */
body.has-env-banner .sidebar        { top: 28px; }
body.has-env-banner .offline-bar    { top: 28px; }
body.has-env-banner .main-content   { padding-top: 28px; }

/* ── App Layout ── */
.app-layout {
  display: flex;
  min-height: 100dvh;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  transition: transform var(--transition-slow);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.sidebar-logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  min-height: 40px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.nav-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 0.75rem 0.75rem 0.25rem;
}

.nav-section-title:first-child {
  padding-top: 0.125rem;
}

.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

.user-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
}

.user-card:hover { background: var(--bg-secondary); }

.user-card-info { min-width: 0; flex: 1; }
.user-card-name { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card-role { font-size: 0.75rem; color: var(--text-tertiary); }

/* ── Main Content ── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate; /* contain stacking context; prevents fixed sidebar from leaking z-index */
}

/* ── Top Bar ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 1rem;
}

.topbar-left  { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.page-title {
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-toggle {
  display: none;
  padding: 0.5rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

/* ── Theme toggle icon wrapper (inside sidebar nav-item) ── */
.theme-icon {
  display: contents; /* passes through flex layout to the SVG inside */
}
.theme-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Topbar Logo (centered, mobile only) ── */
.topbar-logo {
  display: none;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}
.topbar-logo img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.topbar-logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ── Page Body ── */
#app {
  padding: 1.5rem;
  flex: 1;
  overscroll-behavior: contain;
}

/* ── Grid ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.grid-sidebar { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }

/* ── Section ── */
.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 700;
}

/* ── Page Header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Mobile: FAB ersetzt die Header-Aktionen. layout.css laedt NACH
   components.css → gleiche Spezifitaet, spaetere Quelle gewinnt und
   schlaegt sonst components.css' Mobile-Ausblendung aus. Fix hier statt
   dort, direkt nach der Basisregel im selben File (gewinnt gegen sich
   selbst). Hoeher-spezifische Ausnahmen (z.B. .page-X .page-header-actions,
   ds-todo-list-view .page-header-actions) bleiben unangetastet — 0,1,1
   schlaegt diese 0,1,0-Regel weiterhin. */
@media (max-width: 900px) {
  .page-header-actions { display: none; }

  /* Ausnahmen: Seiten ohne sinnvolle FAB-Erstell-Aktion behalten ihren
     oberen Header-Button auch auf Mobile sichtbar (0,1,1 schlaegt die
     0,1,0-Basisregel). Editor/Wizard/Runner-Seiten — kein "Neu"-FAB. */
  page-admin-migrations .page-header-actions,
  page-import .page-header-actions,
  page-form-builder .page-header-actions,
  page-form-submissions .page-header-actions {
    display: flex;
  }
}

/* ── Back-Link (Breadcrumb-Style) ── */
.ds-back-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: .75rem;
  padding: .25rem .5rem;
  margin-left: -.5rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.ds-back-link:hover {
  background: var(--bg-secondary);
  color: var(--accent);
}

/* ── Sidebar Overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}

/* ── Bottom Navigation (Mobile) ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  padding: 0.25rem 0 env(safe-area-inset-bottom);
  z-index: 100;
}

.bottom-nav-items {
  display: flex;
  justify-content: space-around;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 500;
  min-height: 48px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item svg { width: 22px; height: 22px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .sidebar-overlay.show { display: block; }

  .main-content { margin-left: 0; }

  .menu-toggle { display: flex; }

  .bottom-nav { display: block; }

  #app { padding: 1rem; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Show logo, hide page-title in topbar */
  .topbar-logo { display: flex; }
  .page-title  { display: none; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-sidebar { grid-template-columns: 1fr; }

  /* Solid topbar on mobile – backdrop-filter on position:sticky triggers
     a WebKit compositing bug that misroutes ALL touch events in the viewport */
  .topbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 900px) {
  [data-theme="dark"] .topbar {
    background: var(--bg-primary);
  }
}

@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  /* Explicit padding-bottom so the shorthand doesn't overwrite the 80px bottom-nav clearance */
  #app { padding: 0.75rem; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .page-header { margin-bottom: 1rem; }
}

/* ── Offline Bar ── */
.offline-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--coral);
  color: #fff;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  z-index: 2000;
  transform: translateY(-100%);
  transition: transform 200ms ease;
  pointer-events: none;
}
.offline-bar.show {
  transform: translateY(0);
}

/* ── FAB (Floating Action Button) ── */
.fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom) + 1rem);
  right: 1.25rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,56,128,0.3);
  z-index: 90;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.fab.visible { display: flex; }
.fab:active  { transform: scale(0.92); box-shadow: 0 2px 8px rgba(0,56,128,0.2); }
.fab svg { width: 24px; height: 24px; }

@media (min-width: 901px) {
  .fab { display: none !important; }
}

/* ── Utilities ── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.mt-1   { margin-top: 0.25rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-4   { margin-top: 1rem; }
.mb-4   { margin-bottom: 1rem; }
.w-full { width: 100%; }
.text-sm  { font-size: 0.875rem; }
.text-xs  { font-size: 0.75rem; }
.text-muted { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  min-height: 44px;
  transition: color var(--transition);
}
.back-btn:hover { color: var(--text-primary); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.breadcrumb-item {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.breadcrumb-item:hover { color: var(--text-primary); }
.breadcrumb-sep {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  user-select: none;
}
.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}
.breadcrumb-badge {
  margin-left: .5rem;
  vertical-align: middle;
  font-size: .7rem;
}

/* ── iOS Install Banner ──
   z-index: 950 — bewusst UNTER .modal-backdrop (1000, _core.css). Ticket 3.167:
   der Banner stand vorher auf 1500 und lag damit ueber JEDEM Modal-Dialog
   (auch dem Login-Screen), sobald ein Modal.confirm()/Modal.open() bis an den
   unteren Viewport-Rand reichte. 950 bleibt weiterhin ueber normalem
   Seiteninhalt + Sidebar/Bottom-Nav (hoechster Wert dort: 500) sowie den
   Slide-in-Panels (.ds-cal-panel-System 400-403). Toast (2000)/ContextMenu
   (1099-1101)/Drawer (1190-1200)/Command-Palette (1500) bleiben unveraendert
   ueber dem Modal — nur das Banner-vs-Modal-Verhaeltnis wurde gedreht.
   Ticket 3.252 (2026-08-21): weil 950 > 401-403 (Slide-in-Panels), lag der
   Banner trotzdem ueber dem unteren Rand jedes Panels — SIEHE nav.css (laedt
   NACH dieser Datei) fuer den body:has(...)-Block, der .ios-install-banner
   bei offenem Panel per display:none ausblendet statt den z-index zu drehen. */
.ios-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 950;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
  animation: slideUpBanner 0.25s ease;
}
@keyframes slideUpBanner {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ios-install-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  max-width: 480px;
  margin: 0 auto;
}
.ios-install-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}
.ios-install-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.ios-install-banner-text strong {
  font-size: 0.875rem;
}
.ios-install-banner-text span {
  color: var(--text-secondary);
}
.ios-install-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.ios-install-banner-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}