/* Plexus background voor auth pages en app dashboard */
.login-bg,
.app-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 48%, rgba(22,73,144,0.22), transparent 32%),
    radial-gradient(circle at 28% 68%, rgba(71,195,192,0.18), transparent 28%),
    linear-gradient(135deg, #0B1220 0%, #0F1E3A 50%, #0B1220 100%);
}

.login-bg::after,
.app-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/media/bg/meeting-assistant-login-animated.svg") center/cover no-repeat;
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

/* App: content bovenop achtergrond - alleen app-main, NIET header/sidebar (die moeten fixed blijven) */
.app-bg .app-main {
  position: relative;
  z-index: 1;
}
/* Main: geen extra top-spacing, content direct onder header */
.app-bg .app-main {
  padding-top: 0 !important;
}

/* Content venster: forceer bovenaan, niet onderaan (fix voor Metronic flex) */
.app-bg #kt_app_main,
.app-bg #kt_app_main .d-flex.flex-column.flex-column-fluid {
  justify-content: flex-start !important;
  align-items: stretch !important;
}
.app-bg #kt_app_main {
  min-height: auto !important;
}

/* Main content: witte container voor leesbaarheid, minimale top-spacing */
.app-bg .app-content {
  padding: 0 1rem 1rem;
  padding-top: 0.5rem !important;
  flex: 1 1 auto;
}
.app-bg #kt_app_content_container {
  background: rgba(255, 255, 255, 0.98) !important;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  overflow-x: hidden;
  overflow-y: visible;
  min-height: 200px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
[data-bs-theme="dark"] .app-bg #kt_app_content_container {
  background: rgba(17, 24, 39, 0.95) !important;
}
.app-bg .app-toolbar {
  background: transparent;
  padding-top: 0.5rem !important;
  padding-bottom: 0.25rem !important;
}
/* Toolbar titel en breadcrumb: licht op donkere achtergrond */
.app-bg .app-toolbar .page-heading,
.app-bg .app-toolbar .page-heading.text-gray-900 {
  color: rgba(255, 255, 255, 0.95) !important;
}
.app-bg .app-toolbar .breadcrumb-item,
.app-bg .app-toolbar .breadcrumb-item a,
.app-bg .app-toolbar .breadcrumb-item.text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}
.app-bg .app-toolbar .breadcrumb-item a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}
.app-bg .app-toolbar .bullet {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* AUTH_ANIMATED_BACKGROUND=false: keep gradients/layout, hide animated SVG layer */
.auth-bg-no-animated .login-bg::after,
.auth-bg-no-animated .app-bg::after {
  display: none !important;
}