/* ==========================================================================
   Drupal 11 Navigation Toolbar & Top Bar - Gin Dark Mode Tokens
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zentrale Farbdefinitionen (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Hintergründe */
  --admin-bg-primary: #18181c;            /* Linke Hauptleiste, Top Bar */
  --admin-bg-secondary: #222328;          /* Flyout, Dropdowns, Popovers */
  --admin-bg-header: #1c1d22;             /* Flyout Header */
  --admin-bg-hover: #2d2e35;              /* Hover-Zustand Menüpunkte */
  --admin-bg-active: #2a2b32;             /* Aktiver Zustand Menüpunkte */

  /* Rahmen & Linien */
  --admin-border-primary: #27272c;        /* Haupttrennlinien */
  --admin-border-secondary: #2e2f36;      /* Flyout-Rahmen, Submenü-Divider */

  /* Text & Icons */
  --admin-text-primary: #e4e4e7;          /* Standard-Text (helles Grau) */
  --admin-text-muted: #cfd0d6;            /* Navigation-Links */
  --admin-text-white: #ffffff;            /* Überschriften, Hover-Text */
  --admin-icon-color: #a1a1aa;            /* Neutrale Icons / Chevrons */

  /* Primäraktionen (z. B. "Bearbeiten"-Button) */
  --admin-action-blue: #2563eb;
  --admin-action-blue-hover: #1d4ed8;

  /* Status-Badges ("Veröffentlicht") */
  --admin-badge-success-bg: rgba(34, 197, 94, 0.15);
  --admin-badge-success-border: rgba(34, 197, 94, 0.3);
  --admin-badge-success-text: #4ade80;

  /* Z-Index Schichten */
  --admin-z-topbar: 1040;
  --admin-z-toolbar: 1060;
}

/* --------------------------------------------------------------------------
   2. Core-Design-Tokens für Navigation mappen
   -------------------------------------------------------------------------- */
:root,
#admin-toolbar,
.admin-toolbar,
.admin-toolbar__scroll-wrapper,
.toolbar-popover__wrapper {
  --admin-toolbar-color-white: var(--admin-bg-primary);
  --admin-toolbar-color-gray-050: #1c1c21;
  --admin-toolbar-color-gray-100: var(--admin-bg-secondary);
  --admin-toolbar-color-gray-200: var(--admin-border-primary);
  --admin-toolbar-color-gray-300: var(--admin-border-secondary);
  --admin-toolbar-color-gray-400: #71717a;
  --admin-toolbar-color-gray-500: var(--admin-icon-color);
  --admin-toolbar-color-gray-600: #d4d4d8;
  --admin-toolbar-color-gray-700: var(--admin-text-primary);
  --admin-toolbar-color-gray-800: #f4f4f5;
  --admin-toolbar-color-gray-900: var(--admin-text-white);
  --admin-toolbar-background: var(--admin-bg-primary);
  --admin-toolbar-bg: var(--admin-bg-primary);
  --admin-toolbar-header-bg: var(--admin-bg-primary);
  --admin-toolbar-footer-bg: var(--admin-bg-primary);
}

/* --------------------------------------------------------------------------
   3. Scroll-Shadow-Gradienten & Masken eliminieren
   -------------------------------------------------------------------------- */
.admin-toolbar::before,
.admin-toolbar::after,
.admin-toolbar__scroll-wrapper::before,
.admin-toolbar__scroll-wrapper::after,
.admin-toolbar__content::before,
.admin-toolbar__content::after,
.admin-toolbar__header::before,
.admin-toolbar__header::after,
.admin-toolbar__footer::before,
.admin-toolbar__footer::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   4. Ebene 1: Vertikale Hauptleiste
   -------------------------------------------------------------------------- */
#admin-toolbar,
.admin-toolbar,
.admin-toolbar__scroll-wrapper,
.admin-toolbar__content,
.admin-toolbar__header,
.admin-toolbar__footer,
.admin-toolbar .toolbar-block,
.admin-toolbar .toolbar-block__list,
.admin-toolbar__displace-placeholder {
  background: var(--admin-bg-primary) !important;
  background-image: none !important;
  color: var(--admin-text-muted) !important;
  border-color: var(--admin-border-primary) !important;
}

.admin-toolbar__header a,
.admin-toolbar__header button,
.admin-toolbar__back-button,
.admin-toolbar__close-button {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}

.admin-toolbar__header button:hover,
.admin-toolbar__back-button:hover,
.admin-toolbar__close-button:hover {
  background: var(--admin-bg-hover) !important;
  color: var(--admin-text-white) !important;
}

/* --------------------------------------------------------------------------
   5. Ebene 2: Ausklappbares Flyout (Subnavigation)
   -------------------------------------------------------------------------- */
.admin-toolbar .toolbar-popover__wrapper,
.admin-toolbar .toolbar-popover__menu,
.admin-toolbar .toolbar-menu,
.admin-toolbar .toolbar-menu--level-1,
.admin-toolbar .toolbar-menu--level-2,
.admin-toolbar .toolbar-menu__item {
  background: var(--admin-bg-secondary) !important;
  background-image: none !important;
  color: var(--admin-text-primary) !important;
  border-color: var(--admin-border-secondary) !important;
}

.admin-toolbar .toolbar-popover__wrapper {
  border-right: 1px solid var(--admin-border-secondary) !important;
  border-left: 1px solid var(--admin-border-secondary) !important;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6) !important;
}

.admin-toolbar .toolbar-popover__header {
  background: var(--admin-bg-header) !important;
  background-image: none !important;
  color: var(--admin-text-white) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--admin-border-secondary) !important;
}

/* --------------------------------------------------------------------------
   6. Menü-Einträge, Buttons & Interaktions-Zustände
   -------------------------------------------------------------------------- */
.admin-toolbar .toolbar-button,
.admin-toolbar .toolbar-menu__link,
.admin-toolbar .toolbar-button__label {
  color: var(--admin-text-muted) !important;
  background: transparent !important;
}

.admin-toolbar .toolbar-button__icon,
.admin-toolbar .toolbar-button__chevron {
  color: var(--admin-icon-color) !important;
}

.admin-toolbar .toolbar-button:hover,
.admin-toolbar .toolbar-menu__link:hover,
.admin-toolbar .toolbar-button:focus,
.admin-toolbar .toolbar-menu__link:focus {
  background: var(--admin-bg-hover) !important;
  color: var(--admin-text-white) !important;
  border-radius: 6px;
}

.admin-toolbar .toolbar-button:hover .toolbar-button__icon,
.admin-toolbar .toolbar-button:hover .toolbar-button__chevron {
  color: var(--admin-text-white) !important;
}

.admin-toolbar .toolbar-button[aria-expanded="true"],
.admin-toolbar .toolbar-button.is-active,
.admin-toolbar .toolbar-menu__link.is-active {
  background: var(--admin-bg-active) !important;
  color: var(--admin-text-white) !important;
}

.admin-toolbar__tooltip,
.toolbar-tooltip {
  background: var(--admin-bg-secondary) !important;
  color: var(--admin-text-white) !important;
  border: 1px solid var(--admin-border-secondary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.admin-toolbar__expand-button {
  background: var(--admin-bg-secondary) !important;
  color: var(--admin-text-muted) !important;
  border: 1px solid var(--admin-border-secondary) !important;
}

.admin-toolbar__expand-button:hover {
  background: var(--admin-bg-hover) !important;
  color: var(--admin-text-white) !important;
}

/* --------------------------------------------------------------------------
   7. Contextual Top Bar (Node-Aktionen & Bearbeitungsleiste)
   -------------------------------------------------------------------------- */
.top-bar,
.top-bar__content,
.top-bar__context,
.top-bar__tools,
.top-bar__actions {
  background-color: var(--admin-bg-primary) !important;
  color: var(--admin-text-primary) !important;
  border-color: var(--admin-border-primary) !important;
}

.top-bar {
  border-bottom: 1px solid var(--admin-border-primary) !important;
  z-index: var(--admin-z-topbar) !important;
}

.top-bar__title,
.top-bar .toolbar-title,
.top-bar .toolbar-title__label {
  color: var(--admin-text-primary) !important;
}

.top-bar .toolbar-title__icon,
.top-bar .toolbar-title__icon path,
.top-bar svg:not(.toolbar-button--primary svg) {
  fill: var(--admin-icon-color) !important;
  color: var(--admin-icon-color) !important;
}

.top-bar .toolbar-badge,
.top-bar .toolbar-badge--success {
  background-color: var(--admin-badge-success-bg) !important;
  color: var(--admin-badge-success-text) !important;
  border: 1px solid var(--admin-badge-success-border) !important;
}

.top-bar .toolbar-button {
  color: var(--admin-text-muted) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.top-bar .toolbar-button:hover {
  background-color: var(--admin-bg-hover) !important;
  color: var(--admin-text-white) !important;
}

.top-bar .toolbar-button--primary {
  background-color: var(--admin-action-blue) !important;
  color: var(--admin-text-white) !important;
}

.top-bar .toolbar-button--primary:hover {
  background-color: var(--admin-action-blue-hover) !important;
}

.top-bar .toolbar-button--primary svg,
.top-bar .toolbar-button--primary svg path {
  fill: var(--admin-text-white) !important;
  color: var(--admin-text-white) !important;
}

.top-bar .toolbar-dropdown__menu {
  background-color: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border-secondary) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

.top-bar .toolbar-dropdown__link {
  color: var(--admin-text-muted) !important;
}

.top-bar .toolbar-dropdown__link:hover {
  background-color: var(--admin-bg-hover) !important;
  color: var(--admin-text-white) !important;
}

/* --------------------------------------------------------------------------
   8. Z-Index Absicherung gegen Bootstrap Layout
   -------------------------------------------------------------------------- */
#admin-toolbar,
.admin-toolbar,
.toolbar-popover__wrapper {
  z-index: var(--admin-z-toolbar) !important;
}

.navbar.sticky-top {
  z-index: 1010;
}