/* Light-Mode Basis-Tokens (Dark-Override: html.vcp-theme-dark / body.dark) */
:root {
  --vcp-brand: #1E2DC0;
  --vcp-brand-light: #3143dd; /* Kontrast Text auf #fff: 7.05:1 (WCAG AA) — Followup-Report */
  --vcp-brand-accent: #1E2DC0;
  --vcp-success: #16a34a;
  --vcp-danger: #dc2626;
  --vcp-brand-soft: rgba(30, 45, 192, 0.07);
  --vcp-brand-border: rgba(30, 45, 192, 0.12);
  --vcp-text: #0f172a;
  --vcp-text-muted: #64748b;
  --vcp-text-subtle: #94a3b8;
  --vcp-text-secondary: #475569;
  --vcp-surface: #ffffff;
  --vcp-surface-elevated: rgba(255, 255, 255, 0.96);
  --vcp-surface-icon: rgba(255, 255, 255, 0.82);
  --vcp-border: rgba(148, 163, 184, 0.22);
  --vcp-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  --vcp-shadow-strong: 0 8px 32px rgba(15, 23, 42, 0.12);
  --vcp-shadow-menu: 0 8px 32px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(30, 45, 192, 0.06);
  --vcp-overlay: rgba(15, 23, 42, 0.38);
  /* Page-/Global-Loading (waitMe + show-spinner) */
  --vcp-loading-spinner-track: color-mix(in srgb, var(--vcp-brand) 15%, transparent);
  --vcp-loading-spinner-accent: var(--vcp-brand);
  --vcp-loading-spinner-bg: var(--vcp-surface);
  --vcp-loading-card-bg: var(--vcp-modal-bg);
  --vcp-loading-card-border: var(--vcp-brand-border);
  --vcp-loading-card-shadow: var(--vcp-modal-shadow);
  --vcp-loading-card-accent: var(--vcp-modal-accent);
  --vcp-loading-text: var(--vcp-text);
  --vcp-loading-progress: var(--vcp-brand);
  --vcp-scrollbar: rgba(100, 116, 139, 0.35);
  --vcp-scrollbar-thumb: rgba(100, 116, 139, 0.3);
  --vcp-scrollbar-thumb-hover: rgba(100, 116, 139, 0.5);
  /* Toast/Flash — Namen aus panel-audit-feedback-zwischenstand.md (C); Werte = flash-messages.css */
  --vcp-flash-offset-top: 1.25rem;
  --vcp-flash-offset-right: 1.25rem;
  --vcp-flash-z: 1080;
  --vcp-flash-width: 24rem;
  --vcp-flash-radius: 16px;
  --vcp-flash-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
  --vcp-flash-bg: #fff;
  --vcp-flash-border: rgba(0, 0, 0, 0.06);
  --vcp-flash-text: #334155;
  --vcp-flash-dismiss: #94a3b8;
  --vcp-flash-dismiss-hover-bg: rgba(15, 23, 42, 0.06);
  --vcp-flash-dismiss-hover: #64748b;
  --vcp-flash-accent: var(--vcp-brand);
  --vcp-flash-accent-success: var(--vcp-success);
  --vcp-flash-accent-error: var(--vcp-danger);
  --vcp-flash-accent-warning: #d97706;
  --vcp-flash-progress-track: color-mix(in srgb, var(--vcp-flash-accent) 12%, transparent);
  --vcp-flash-enter-ms: 450ms;
  --vcp-flash-exit-ms: 300ms;
  /* Modal Light-Parity (analog body.dark --vcp-modal-*) */
  --vcp-modal-bg: #ffffff;
  --vcp-modal-bg-deep: #f8fafc;
  --vcp-modal-bg-panel: rgba(248, 250, 252, 0.92);
  --vcp-modal-bg-input: #ffffff;
  --vcp-modal-bg-footer: rgba(248, 250, 252, 0.92);
  --vcp-modal-border: rgba(0, 0, 0, 0.06);
  --vcp-modal-border-strong: rgba(30, 45, 192, 0.16);
  --vcp-modal-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 25px 50px -12px rgba(15, 23, 42, 0.18);
  --vcp-modal-accent: linear-gradient(90deg, #3143dd 0%, #1E2DC0 52%, #1724a0 100%);
  --vcp-modal-accent-glow: 0 0 16px rgba(30, 45, 192, 0.14);
  --vcp-modal-accent-danger: linear-gradient(90deg, #fca5a5 0%, #ef4444 45%, #dc2626 100%);
  --vcp-modal-accent-warn: linear-gradient(90deg, #fdba74 0%, #f97316 45%, #ea580c 100%);
  --vcp-modal-icon-bg: rgba(255, 255, 255, 0.82);
  --vcp-modal-icon-border: rgba(30, 45, 192, 0.14);
  --vcp-modal-icon-color: #1E2DC0;
  --vcp-modal-icon-danger-bg: rgba(220, 38, 38, 0.1);
  --vcp-modal-icon-danger-border: rgba(220, 38, 38, 0.22);
  --vcp-modal-icon-danger-color: #b91c1c;
  --vcp-modal-icon-warn-bg: rgba(234, 88, 12, 0.1);
  --vcp-modal-icon-warn-border: rgba(234, 88, 12, 0.22);
  --vcp-modal-icon-warn-color: #c2410c;
  --vcp-modal-title: #0f172a;
  --vcp-modal-subtitle: #64748b;
  --vcp-modal-text: #334155;
  --vcp-modal-text-strong: #0f172a;
  --vcp-modal-label: #64748b;
  --vcp-modal-panel-gradient: linear-gradient(135deg, rgba(30, 45, 192, 0.06) 0%, rgba(248, 250, 252, 0.96) 100%);
  --vcp-modal-brand-soft: rgba(30, 45, 192, 0.07);
  --vcp-modal-danger-soft: rgba(220, 38, 38, 0.08);
  --vcp-modal-danger-border: rgba(220, 38, 38, 0.2);
  --vcp-modal-danger-text: #b91c1c;
  --vcp-modal-warn-soft: rgba(245, 158, 11, 0.1);
  --vcp-modal-warn-border: rgba(217, 119, 6, 0.22);
  --vcp-modal-warn-text: #b45309;
  --vcp-modal-success: var(--vcp-success);
  --vcp-modal-error: var(--vcp-danger);
  --vcp-modal-focus-border: rgba(30, 45, 192, 0.45);
  --vcp-modal-focus-ring: 0 0 0 3px rgba(30, 45, 192, 0.16);
}

html {
  width: 100%;
}

/* WCAG: Skip-to-content – sr-only, nur bei Tastaturfokus sichtbar */
.vcp-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  z-index: -1;
  pointer-events: none;
}

.vcp-skip-link:focus-visible {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5rem 0.85rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border-radius: 0.35rem;
  background: var(--vcp-brand);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
  pointer-events: auto;
}

/* Keyboard-fokussierbare Tabellenzeilen mit Modal-Aktion */
.vcp-modal-row:focus {
  outline: none;
}

.vcp-modal-row:focus-visible {
  outline: 2px solid var(--vcp-brand);
  outline-offset: -2px;
}

/* Sidebar: Mausrad scrollt Menü-Inhalt statt Seite (Perfect Scrollbar JS fehlt im Bundle) */
.menu .main-menu > .scroll,
.menu .sub-menu > .scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.menu .main-menu > .scroll:hover,
.menu .sub-menu > .scroll:hover {
  scrollbar-color: var(--vcp-scrollbar) transparent;
}

.menu .main-menu > .scroll::-webkit-scrollbar,
.menu .sub-menu > .scroll::-webkit-scrollbar {
  width: 4px;
}

.menu .main-menu > .scroll::-webkit-scrollbar-track,
.menu .sub-menu > .scroll::-webkit-scrollbar-track {
  background: transparent;
}

.menu .main-menu > .scroll::-webkit-scrollbar-thumb,
.menu .sub-menu > .scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.menu .main-menu > .scroll:hover::-webkit-scrollbar-thumb,
.menu .sub-menu > .scroll:hover::-webkit-scrollbar-thumb {
  background: var(--vcp-scrollbar-thumb);
}

.menu .main-menu > .scroll::-webkit-scrollbar-thumb:hover,
.menu .sub-menu > .scroll::-webkit-scrollbar-thumb:hover {
  background: var(--vcp-scrollbar-thumb-hover);
}

/* Dark-Scrollbar: Werte kommen aus body.dark Token-Overrides */

/* Admin-Submenu: Collapse-Buttons wie Links */
.menu .sub-menu button.rotate-arrow-icon {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.dark .menu .sub-menu button.rotate-arrow-icon,
body.dark .menu .sub-menu button.rotate-arrow-icon.opacity-50 {
  color: inherit;
}

body.dark .menu .sub-menu button.rotate-arrow-icon i {
  color: inherit;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner>main {
  overflow: hidden !important;
}

/* Seiteninhalt ausblenden; Modals und Backdrop bleiben sichtbar */
body.show-spinner>*:not(.waitMe):not(.modal):not(.modal-backdrop) {
  opacity: 0;
}

/* Vollflächiges Backdrop über Navbar, Menü und Mobile-Chrome */
body.show-spinner::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  z-index: 1030;
  background: var(--vcp-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: all;
}

/* Initialer Spinner – zentriert über dem Backdrop (Farben via Tokens / html.vcp-theme-dark) */
body.show-spinner::after {
  content: "";
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border: 3px solid var(--vcp-loading-spinner-track);
  border-radius: 50%;
  border-top-color: var(--vcp-loading-spinner-accent);
  background: var(--vcp-loading-spinner-bg);
  box-shadow: var(--vcp-shadow-strong);
  animation: spin 0.85s linear infinite;
  -webkit-animation: spin 0.85s linear infinite;
  z-index: 1035;
}

/*
 * Dark-Tokens auf html.vcp-theme-dark (theme-boot, vor body) UND body.dark.
 * Nötig für #vcp-global-loading-root unter <html> und FOUC-freien First Paint.
 */
html.vcp-theme-dark,
body.dark {
  --vcp-brand: #1E2DC0;
  --vcp-brand-light: #a5aeff; /* Kontrast auf --vcp-surface #1a2438: 7.46:1 (WCAG AA) */
  --vcp-brand-accent: #7b87ff;
  --vcp-success: #22c55e;
  --vcp-danger: #ef4444;
  --vcp-brand-soft: rgba(30, 45, 192, 0.16);
  --vcp-brand-border: rgba(123, 135, 255, 0.24);
  --vcp-text: #f1f5f9;
  --vcp-text-muted: #94a3b8;
  --vcp-text-subtle: #64748b;
  --vcp-text-secondary: #cbd5e1;
  --vcp-surface: #1a2438;
  --vcp-surface-elevated: rgba(30, 41, 59, 0.92);
  --vcp-surface-icon: rgba(15, 23, 42, 0.65);
  --vcp-border: rgba(123, 135, 255, 0.18);
  --vcp-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  --vcp-shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.42);
  --vcp-shadow-menu: 0 8px 32px rgba(0, 0, 0, 0.42);
  --vcp-overlay: rgba(15, 23, 42, 0.68);
  --vcp-loading-spinner-track: color-mix(in srgb, var(--vcp-brand) 20%, transparent);
  --vcp-loading-spinner-accent: var(--vcp-brand-light);
  --vcp-loading-spinner-bg: var(--vcp-surface-elevated);
  --vcp-loading-card-bg: var(--vcp-modal-bg);
  --vcp-loading-card-border: var(--vcp-modal-border);
  --vcp-loading-card-shadow: var(--vcp-modal-shadow);
  --vcp-loading-card-accent: var(--vcp-modal-accent);
  --vcp-loading-text: var(--vcp-modal-text-strong);
  --vcp-loading-progress: var(--vcp-brand-light);
  --vcp-scrollbar: rgba(148, 163, 184, 0.35);
  --vcp-scrollbar-thumb: rgba(148, 163, 184, 0.28);
  --vcp-scrollbar-thumb-hover: rgba(148, 163, 184, 0.45);
  --vcp-flash-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --vcp-flash-bg: rgba(15, 23, 42, 0.92);
  --vcp-flash-border: rgba(255, 255, 255, 0.08);
  --vcp-flash-text: #e2e8f0;
  --vcp-flash-dismiss: #64748b;
  --vcp-flash-dismiss-hover-bg: rgba(255, 255, 255, 0.06);
  --vcp-flash-dismiss-hover: #94a3b8;
  --vcp-flash-accent: var(--vcp-brand-light);
  --vcp-flash-accent-success: var(--vcp-success);
  --vcp-flash-accent-error: var(--vcp-danger);
  --vcp-flash-accent-warning: #fbbf24;
  --vcp-flash-progress-track: color-mix(in srgb, var(--vcp-flash-accent) 18%, transparent);
  --vcp-menu-bg: #141b2d;
  --vcp-menu-bg-elevated: #1a2438;
  --vcp-menu-text: #dbeafe;
  --vcp-menu-text-muted: #94a3b8;
  --vcp-menu-text-active: #eef1ff;
  --vcp-menu-icon: #b6c0d9;
  --vcp-menu-hover-bg: rgba(30, 45, 192, 0.16);
  --vcp-menu-active-bg: rgba(30, 45, 192, 0.3);
  --vcp-menu-border: rgba(123, 135, 255, 0.18);
  --vcp-menu-indicator: linear-gradient(180deg, #a5aeff 0%, #1E2DC0 100%);
  --vcp-modal-bg: #1a2438;
  --vcp-modal-bg-deep: #141b2d;
  --vcp-modal-bg-panel: rgba(15, 23, 42, 0.58);
  --vcp-modal-bg-input: rgba(12, 18, 32, 0.72);
  --vcp-modal-bg-footer: rgba(11, 16, 28, 0.55);
  --vcp-modal-border: rgba(123, 135, 255, 0.14);
  --vcp-modal-border-strong: rgba(123, 135, 255, 0.24);
  --vcp-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(123, 135, 255, 0.08);
  --vcp-modal-accent: linear-gradient(90deg, #a5aeff 0%, #7b87ff 38%, #1E2DC0 100%);
  --vcp-modal-accent-glow: 0 0 20px rgba(123, 135, 255, 0.22);
  --vcp-modal-accent-danger: linear-gradient(90deg, #fca5a5 0%, #ef4444 45%, #dc2626 100%);
  --vcp-modal-accent-warn: linear-gradient(90deg, #fdba74 0%, #f97316 45%, #ea580c 100%);
  --vcp-modal-icon-bg: rgba(30, 45, 192, 0.18);
  --vcp-modal-icon-border: rgba(123, 135, 255, 0.26);
  --vcp-modal-icon-color: #c7ceff;
  --vcp-modal-icon-danger-bg: rgba(220, 38, 38, 0.18);
  --vcp-modal-icon-danger-border: rgba(248, 113, 113, 0.3);
  --vcp-modal-icon-danger-color: #fecaca;
  --vcp-modal-icon-warn-bg: rgba(234, 88, 12, 0.18);
  --vcp-modal-icon-warn-border: rgba(251, 146, 60, 0.3);
  --vcp-modal-icon-warn-color: #fed7aa;
  --vcp-modal-title: #f1f5f9;
  --vcp-modal-subtitle: #94a3b8;
  --vcp-modal-text: #cbd5e1;
  --vcp-modal-text-strong: #e8ebff;
  --vcp-modal-label: #94a3b8;
  --vcp-modal-panel-gradient: linear-gradient(135deg, rgba(30, 45, 192, 0.22) 0%, rgba(15, 23, 42, 0.82) 100%);
  --vcp-modal-brand-soft: rgba(30, 45, 192, 0.14);
  --vcp-modal-danger-soft: rgba(220, 38, 38, 0.14);
  --vcp-modal-danger-border: rgba(248, 113, 113, 0.24);
  --vcp-modal-danger-text: #fecaca;
  --vcp-modal-warn-soft: rgba(245, 158, 11, 0.12);
  --vcp-modal-warn-border: rgba(251, 191, 36, 0.22);
  --vcp-modal-warn-text: #fcd34d;
  --vcp-modal-success: var(--vcp-success);
  --vcp-modal-error: var(--vcp-danger);
  --vcp-modal-focus-border: rgba(123, 135, 255, 0.5);
  --vcp-modal-focus-ring: 0 0 0 3px rgba(123, 135, 255, 0.16);
}

/* Dark Mode – Navigation (seitenweit) */
body.dark .navbar {
  background: var(--vcp-menu-bg-elevated);
  border-bottom: 1px solid var(--vcp-menu-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

body.dark .navbar .menu-button svg .main,
body.dark .navbar .menu-button svg .sub,
body.dark .navbar .menu-button-mobile svg rect {
  fill: var(--vcp-menu-icon);
  transition: fill 0.18s ease;
}

body.dark .navbar .menu-button:hover svg .main,
body.dark .navbar .menu-button:hover svg .sub,
body.dark .navbar .menu-button-mobile:hover svg rect {
  fill: var(--vcp-brand-light);
}

body.dark .navbar .user .name,
body.dark .navbar .header-icon.btn-empty {
  color: var(--vcp-menu-text);
}

body.dark .navbar .header-icon.btn-empty:hover {
  color: var(--vcp-brand-light);
}

body.dark .menu .main-menu {
  background: linear-gradient(180deg, var(--vcp-menu-bg-elevated) 0%, var(--vcp-menu-bg) 100%);
  border-right: 1px solid var(--vcp-menu-border);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.24);
}

body.dark .menu .main-menu ul li a,
body.dark .menu .main-menu ul li button.vcp-logout-link {
  color: var(--vcp-menu-text-muted);
  border-bottom-color: var(--vcp-menu-border);
  transition: color 0.18s ease, background 0.18s ease;
}

body.dark .menu .main-menu ul li a i,
body.dark .menu .main-menu ul li button.vcp-logout-link i {
  color: inherit;
}

body.dark .menu .main-menu ul li a:hover,
body.dark .menu .main-menu ul li a:focus,
body.dark .menu .main-menu ul li button.vcp-logout-link:hover,
body.dark .menu .main-menu ul li button.vcp-logout-link:focus {
  color: var(--vcp-brand-light);
  background: var(--vcp-menu-hover-bg);
}

body.dark .menu .main-menu ul li.active a {
  color: var(--vcp-menu-text-active);
  background: var(--vcp-menu-active-bg);
  font-weight: 600;
}

body.dark .menu .main-menu ul li.active a i {
  color: var(--vcp-brand-light);
}

body.dark .menu .main-menu ul li.active::after {
  background: var(--vcp-menu-indicator);
  box-shadow: 0 0 14px rgba(123, 135, 255, 0.45);
}

body.dark .menu .sub-menu {
  background: var(--vcp-menu-bg);
  border-left-color: var(--vcp-menu-border);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
}

body.dark .menu .sub-menu ul li a,
body.dark .menu .sub-menu ul.inner-level-menu li a {
  color: var(--vcp-menu-text-muted);
  transition: color 0.18s ease;
}

body.dark .menu .sub-menu ul li i,
body.dark .menu .sub-menu ul.inner-level-menu li i {
  color: var(--vcp-menu-icon);
  transition: color 0.18s ease;
}

body.dark .menu .sub-menu ul li a:hover,
body.dark .menu .sub-menu ul.inner-level-menu li a:hover,
body.dark .menu .sub-menu ul li a:hover i,
body.dark .menu .sub-menu ul.inner-level-menu li a:hover i {
  color: var(--vcp-brand-light);
}

body.dark .menu .sub-menu ul li.active a,
body.dark .menu .sub-menu ul li.active i,
body.dark .menu .sub-menu ul.inner-level-menu li.active a,
body.dark .menu .sub-menu ul.inner-level-menu li.active i {
  color: var(--vcp-brand-light);
  font-weight: 600;
}

body.dark .menu .sub-menu ul li.active::after,
body.dark .menu .sub-menu ul.inner-level-menu li.active::after {
  background: var(--vcp-brand-accent);
  box-shadow: 0 0 8px rgba(123, 135, 255, 0.55);
  width: 6px;
  height: 6px;
}

body.dark .menu .sub-menu a.rotate-arrow-icon,
body.dark .menu .sub-menu a.rotate-arrow-icon.opacity-50,
body.dark .menu .sub-menu button.rotate-arrow-icon,
body.dark .menu .sub-menu button.rotate-arrow-icon.opacity-50 {
  opacity: 1 !important;
  color: var(--vcp-menu-text);
}

body.dark .menu .sub-menu a.rotate-arrow-icon i,
body.dark .menu .sub-menu button.rotate-arrow-icon i {
  color: var(--vcp-brand-accent);
}

/* Submenu labels align: simple-line-icons and iconsminds glyphs differ in width */
.menu .sub-menu ul li > a > i,
.menu .sub-menu ul li > button > i {
  width: 1.3em;
  text-align: center;
}

body.dark .menu .ps__thumb-y {
  background: rgba(123, 135, 255, 0.35);
}

body.dark .menu .ps__rail-y:hover > .ps__thumb-y,
body.dark .menu .ps__rail-y:focus > .ps__thumb-y,
body.dark .menu .ps__rail-y.ps--clicking .ps__thumb-y {
  background: rgba(165, 174, 255, 0.55);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.firewallRuleDrag {
  background-color:#f3f3f3 !important;;
  font-size: 150%;
}

/* Navbar: semantische Menu-Toggles + Fokus-Ringe */
.navbar .menu-button,
.navbar .menu-button-mobile {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  color: inherit;
}

.navbar .menu-button:focus-visible,
.navbar .menu-button-mobile:focus-visible,
.navbar .header-icon.btn-empty:focus-visible,
.navbar .user .btn:focus-visible {
  outline: 2px solid var(--vcp-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.navbar .vcp-fullscreen-btn i:last-of-type {
  display: none;
}

/* Navbar: einzeiliges Flex-Layout (Dore nutzt flex-basis ohne Flex-Parent) */
.navbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.navbar-left {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.navbar-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.navbar-right {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.navbar .header-icons {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-right: 0;
  vertical-align: middle;
}

.navbar .vcp-header-controls {
  flex-shrink: 0;
}

.navbar .user {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar .user .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.navbar .user .btn > span {
  display: inline-flex;
  align-items: center;
}

/* Mobile: Logo zentrieren, nur Dropdown rechts (kein Icon-Overlap) */
@media (max-width: 767px) {
  .navbar-left {
    flex: 0 0 auto;
  }

  .navbar-logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .navbar-right {
    flex: 0 0 auto;
    gap: 0;
  }

  .navbar .user {
    margin-left: 0;
    margin-right: 15px;
  }

  .navbar .user .name {
    display: none;
  }
}

/* Mobile-Header-Dropdown (Bootstrap 4) */
.vcp-header-mobile-menu__trigger.dropdown-toggle::after {
  display: none;
}

.vcp-header-mobile-menu__panel {
  min-width: min(18.5rem, calc(100vw - 1.5rem));
  margin-top: 0.45rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--vcp-brand-border);
  border-radius: 12px;
  box-shadow: var(--vcp-shadow-menu);
}

.vcp-header-mobile-menu__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--vcp-border);
}

.vcp-header-mobile-menu__section:last-child {
  border-bottom: 0;
  padding-bottom: 0.15rem;
}

.vcp-header-mobile-menu__section--account {
  padding-top: 0.65rem;
}

.vcp-header-mobile-menu__label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vcp-text-muted);
  letter-spacing: 0.02em;
}

.vcp-header-mobile-menu__control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.vcp-header-mobile-menu__section--ticket .vcp-ticket-notification {
  width: auto;
  min-width: 1.75rem;
  padding: 0.15rem 0.45rem;
}

.vcp-header-mobile-menu__action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: var(--vcp-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.vcp-header-mobile-menu__action:hover,
.vcp-header-mobile-menu__action:focus {
  color: var(--vcp-brand);
}

.vcp-header-mobile-menu__action:focus-visible {
  outline: 2px solid var(--vcp-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.vcp-header-mobile-menu__action i {
  font-size: 1rem;
  line-height: 1;
}

body.dark .vcp-header-mobile-menu__panel {
  background: var(--vcp-menu-bg-elevated, #1a2438);
  border-color: var(--vcp-menu-border, rgba(123, 135, 255, 0.18));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42);
}

body.dark .vcp-header-mobile-menu__section {
  border-bottom-color: var(--vcp-menu-border, rgba(123, 135, 255, 0.18));
}

body.dark .vcp-header-mobile-menu__label {
  color: var(--vcp-menu-text-muted, #94a3b8);
}

body.dark .vcp-header-mobile-menu__action {
  color: var(--vcp-menu-text, #dbeafe);
}

body.dark .vcp-header-mobile-menu__action:hover,
body.dark .vcp-header-mobile-menu__action:focus {
  color: var(--vcp-brand-light, #a5aeff);
}

@media (max-width: 767px) {
  .navbar-right {
    gap: 0.2rem;
  }
}

@media (max-width: 374px) {
  .navbar .vcp-header-controls {
    gap: 0.2rem;
    margin-right: 0.2rem;
  }
}