/* ═══════════════════════════════════════════════════════════════
   dxBinder: Seitengeruest im Stil des Domix.Dev-Dashboards

   Links eine einklappbare Sidebar (240px, eingeklappt 80px und beim
   Ueberfahren wieder 240px), oben eine klebende Kopfleiste mit Suche
   (Strg/Cmd+K), Theme-Schalter und Benutzermenue. Darunter der Inhalt.
   Gleiche Aufteilung und Masse wie DashboardLayout auf domix.dev,
   nur mit Blau als Akzent.

   Das Markup erzeugt partials/header.php (nur eingeloggt), das
   Verhalten dxbinder-shell.js. Alle Klassen tragen das Praefix dd-,
   damit sie nicht mit site.css kollidieren.

   Aufbau:
     1. Umschalten der alten Topbar
     2. Rahmen und Sidebar
     3. Menuepunkte und Untermenues
     4. Kopfleiste: Knoepfe, Suche, Benutzermenue
     5. Schmale Bildschirme
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. Alte Topbar weg, Platz fuer die Kopfleiste
   ─────────────────────────────────────────────────────────────── */

body.dd-has-shell {
  /* site.css reserviert oben Platz fuer die feste Topbar. Die gibt es
     hier nicht mehr; --topbar-h bleibt als Hoehe der neuen Kopfleiste,
     weil klebende Spalten in den Seiten darauf aufbauen. */
  padding-top: 0;
  --topbar-h: 72px;
  --dd-sidebar-w: 240px;
  --dd-sidebar-w-collapsed: 80px;
  background: var(--bg);
}

body.dd-has-shell .topbar,
body.dd-has-shell .mobile-menu-overlay {
  display: none !important;
}


/* ───────────────────────────────────────────────────────────────
   2. Rahmen und Sidebar
   ─────────────────────────────────────────────────────────────── */

.dd-app {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
}

.dd-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: var(--dd-sidebar-w);
  padding: 0 16px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 300ms ease, width 300ms ease;
}

.dd-sidebar.is-open { transform: translateX(0); }

.dd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(7, 10, 14, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.dd-backdrop.is-open { opacity: 1; pointer-events: auto; }

.dd-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 0;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.dd-brand img {
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.dd-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.dd-brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.dd-brand-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-400);
}

.dd-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
  scrollbar-width: none;
}
.dd-scroll::-webkit-scrollbar { display: none; }

.dd-section {
  /* site.css setzt auf alles mit "section" im Klassennamen 56px Polsterung. */
  padding: 0;
  margin: 0;
}

/* Dashboard: flex-col gap-4 zwischen den Abschnitten, Titel mb-4. */
.dd-section + .dd-section { margin-top: 16px; }

.dd-section-title {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.dd-section-dots { display: none; text-align: center; color: var(--muted-2); line-height: 20px; margin-bottom: 16px; }

.dd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* Einklappen (nur ab Desktop-Breite; darunter ist die Sidebar eine
   Schublade). Beim Ueberfahren klappt sie wieder auf, ohne den Inhalt
   zu verschieben. */
@media (min-width: 1024px) {
  .dd-sidebar { transform: none; }
  .dd-content { margin-left: var(--dd-sidebar-w); transition: margin-left 300ms ease; }

  html.dd-collapsed .dd-content { margin-left: var(--dd-sidebar-w-collapsed); }

  html.dd-collapsed .dd-sidebar:not(:hover) { width: var(--dd-sidebar-w-collapsed); }

  html.dd-collapsed .dd-sidebar:not(:hover) .dd-label,
  html.dd-collapsed .dd-sidebar:not(:hover) .dd-caret,
  html.dd-collapsed .dd-sidebar:not(:hover) .dd-sub,
  html.dd-collapsed .dd-sidebar:not(:hover) .dd-section-title,
  html.dd-collapsed .dd-sidebar:not(:hover) .dd-brand-text { display: none; }

  html.dd-collapsed .dd-sidebar:not(:hover) .dd-section-dots { display: block; }
  html.dd-collapsed .dd-sidebar:not(:hover) .dd-item { justify-content: center; padding-inline: 0; }
  /* Das Logo ist breiter als die 48px, die eingeklappt bleiben: ganz
     anzeigen (verkleinert) statt anzuschneiden. */
  html.dd-collapsed .dd-sidebar:not(:hover) .dd-brand img { width: 44px; max-width: 100%; height: auto; object-fit: contain; }

  html.dd-collapsed .dd-sidebar:hover { box-shadow: var(--shadow-lg); }
}

.dd-content {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Inhaltsflaeche: Abstand wie im Dashboard (p-4, ab 768px p-6). */
.dd-page {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 768px) {
  .dd-page { padding: 24px; }
}

/* Die Seiten bringen ihr eigenes Geruest mit (main.sh-shell > section.hero >
   .container > .hero-grid). Dessen Aussenabstaende und Breiten kamen von der
   alten Topbar-Layout; hier ersetzt .dd-page sie.
   Die Spalte des Grids muss minmax(0, 1fr) sein: bei einfachem 1fr dehnt
   sich die Spur auf die Mindestbreite des Inhalts (z. B. einer breiten
   Tabelle) und schiebt die Seite ueber den Bildschirmrand. */
body.dd-has-shell .sh-shell .hero {
  min-height: 0;
  padding: 0;
  background: transparent;
}

body.dd-has-shell .sh-shell .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

body.dd-has-shell .hero-grid,
body.dd-has-shell .hero-grid.solo {
  grid-template-columns: minmax(0, 1fr);
}

body.dd-has-shell .hero-main { min-width: 0; }


/* ───────────────────────────────────────────────────────────────
   3. Menuepunkte und Untermenues

   Masse und Zustaende wie .menu-item / .menu-dropdown-item im
   Dashboard. Aktiv: Marke als Schrift auf 7-Prozent-Flaeche.
   ─────────────────────────────────────────────────────────────── */

.dd-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.dd-item:hover { background: var(--panel-2); color: var(--text); }

.dd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 17px;
  color: var(--muted-2);
  transition: color 150ms ease;
}

.dd-item:hover .dd-icon { color: var(--muted); }

.dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd-caret {
  margin-left: auto;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--muted-2);
  transition: transform 200ms ease, color 200ms ease;
}

.dd-item.is-active,
.dd-group.is-open > .dd-item,
.dd-item.is-current {
  background: var(--brand-faint);
  color: var(--brand-400);
}

.dd-item.is-active .dd-icon,
.dd-group.is-open > .dd-item .dd-icon,
.dd-item.is-current .dd-icon { color: var(--brand-400); }

.dd-group.is-open > .dd-item .dd-caret { transform: rotate(180deg); color: var(--brand-400); }

[data-theme="light"] .dd-item.is-active,
[data-theme="light"] .dd-group.is-open > .dd-item,
[data-theme="light"] .dd-item.is-current { background: var(--brand-soft); color: var(--brand-600); }

[data-theme="light"] .dd-item.is-active .dd-icon,
[data-theme="light"] .dd-group.is-open > .dd-item .dd-icon,
[data-theme="light"] .dd-item.is-current .dd-icon,
[data-theme="light"] .dd-group.is-open > .dd-item .dd-caret { color: var(--brand-500); }

/* Untermenue: weiches Auf-/Zuklappen wie im Dashboard (Hoehe 0 -> Inhalt,
   300ms). Ueber eine Grid-Zeile von 0fr auf 1fr statt per JS-Hoehe, damit
   verschachtelte Gruppen automatisch mitwachsen. Der Abstand steckt im
   Inneren (padding), nicht aussen: Aussenabstaende wuerden beim Zuklappen
   als Rest stehen bleiben. */
.dd-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.dd-group.is-open > .dd-collapse,
.dd-subgroup.is-open > .dd-collapse { grid-template-rows: 1fr; }

.dd-collapse-in {
  min-height: 0;
  overflow: hidden;
  /* Zugeklappt nicht per Tab erreichbar; erst nach der Animation verstecken. */
  visibility: hidden;
  transition: visibility 0s linear 300ms;
}

.dd-group.is-open > .dd-collapse > .dd-collapse-in,
.dd-subgroup.is-open > .dd-collapse > .dd-collapse-in {
  visibility: visible;
  transition-delay: 0s;
}

.dd-sub {
  list-style: none;
  margin: 0;
  padding: 8px 0 0 36px;   /* Dashboard: ms-9 mt-2 */
  display: flex;
  flex-direction: column;
  gap: 4px;                /* space-y-1 */
}

.dd-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.dd-sub-item:hover { background: var(--panel-2); color: var(--text); }

.dd-sub-item.is-active {
  background: var(--brand-faint);
  color: var(--brand-400);
}

[data-theme="light"] .dd-sub-item.is-active { background: var(--brand-soft); color: var(--brand-600); }

.dd-sub-item .dd-ext { margin-left: auto; font-size: 10px; opacity: 0.6; }

.dd-sub-label {
  padding: 8px 12px 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.dd-sub-sep { height: 1px; margin: 6px 12px; background: var(--border); }

/* Zweite Ebene (Developer > Fraktion > Whitelist, Logins, ...). */
.dd-subgroup > .dd-sub-item .dd-caret { width: 16px; height: 16px; margin-left: auto; }
.dd-subgroup.is-open > .dd-sub-item { color: var(--brand-400); }
.dd-subgroup.is-open > .dd-sub-item .dd-caret { transform: rotate(180deg); }
[data-theme="light"] .dd-subgroup.is-open > .dd-sub-item { color: var(--brand-600); }

.dd-subgroup .dd-sub { padding: 4px 0 4px 12px; margin-left: 12px; border-left: 1px solid var(--border); }

/* ───────────────────────────────────────────────────────────────
   4. Kopfleiste
   ─────────────────────────────────────────────────────────────── */

.dd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 1024px) {
  .dd-header { padding: 0 24px; }
}

.dd-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.dd-iconbtn:hover {
  color: var(--brand-400);
  border-color: color-mix(in srgb, var(--brand-1) 40%, var(--border));
  background: var(--brand-faint);
}

[data-theme="light"] .dd-iconbtn:hover { color: var(--brand-600); }

.dd-iconbtn .dd-ico-sun { display: none; }
[data-theme="light"] .dd-iconbtn .dd-ico-sun { display: inline; }
[data-theme="light"] .dd-iconbtn .dd-ico-moon { display: none; }

.dd-search {
  position: relative;
  flex: 1;
  max-width: 28rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .dd-search { position: absolute; left: 50%; top: 50%; width: 28rem; transform: translate(-50%, -50%); margin: 0; }
}

.dd-search input {
  width: 100%;
  height: 44px;
  padding: 10px 56px 10px 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dd-search input::placeholder { color: var(--muted-2); }

.dd-search input:focus {
  outline: none;
  border-color: var(--brand-300);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 14%, transparent);
}

.dd-search-ico {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  font-size: 14px;
  pointer-events: none;
}

.dd-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted-2);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
}

@media (max-width: 1023px) { .dd-kbd { display: none; } }

.dd-results {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 80;
  display: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

.dd-results.is-open { display: block; }

.dd-results a,
.dd-results .dd-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.dd-results a:hover,
.dd-results a.is-focus { background: var(--panel-2); }

.dd-results .dd-empty { color: var(--muted); }

.dd-results small { margin-left: auto; color: var(--muted-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

.dd-results i { width: 18px; text-align: center; color: var(--muted-2); font-size: 13px; flex-shrink: 0; }

.dd-header-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.dd-user { position: relative; }

.dd-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 150ms ease;
}

.dd-user-btn:hover { background: var(--panel-2); }

.dd-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-3);
}

.dd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dd-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.dd-user-btn .dd-caret { width: 16px; height: 16px; }
.dd-user.is-open .dd-caret { transform: rotate(180deg); }

@media (max-width: 639px) { .dd-user-name, .dd-user-btn .dd-caret { display: none; } }

.dd-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  display: none;
  width: 260px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

.dd-user.is-open .dd-menu { display: block; }

.dd-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.dd-menu-head .dd-avatar { width: 44px; height: 44px; }
.dd-menu-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-menu-sub { margin-top: 2px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.dd-menu a i { width: 18px; text-align: center; color: var(--muted-2); }
.dd-menu a:hover { background: var(--panel-2); color: var(--text); }
.dd-menu a:hover i { color: var(--brand-400); }

.dd-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--border); }


/* ───────────────────────────────────────────────────────────────
   5. Schmale Bildschirme
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .dd-toggle-desktop { display: none; }
  .dd-sidebar { box-shadow: var(--shadow-lg); }
}

@media (min-width: 1024px) {
  .dd-toggle-mobile, .dd-backdrop { display: none; }
}

@media (max-width: 639px) {
  .dd-header { gap: 8px; padding: 0 12px; }
  .dd-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-sidebar, .dd-content, .dd-backdrop { transition: none; }
}


/* ───────────────────────────────────────────────────────────────
   6. Seiten mit eigener Vollhoehe

   admin/mysql.php rechnet mit einer 60px hohen Topbar (100vh - 60px).
   Hier sind es die Kopfleiste (--topbar-h) plus oben und unten der
   Seitenabstand von .dd-page (2 x 16px, ab 768px 2 x 24px).
   ─────────────────────────────────────────────────────────────── */

body.dd-has-shell .ms-wrap,
body.dd-has-shell .ms-gate {
  height: calc(100vh - var(--topbar-h) - 32px);
}

@media (min-width: 768px) {
  body.dd-has-shell .ms-wrap,
  body.dd-has-shell .ms-gate {
    height: calc(100vh - var(--topbar-h) - 48px);
  }
}


/* ───────────────────────────────────────────────────────────────
   7. Brotkrumen und Zustaende
   ─────────────────────────────────────────────────────────────── */

/* Seitenpfad links in der Kopfleiste. Nur wo neben der mittigen Suche Platz
   ist (ab 1280px), sonst wuerde er mit ihr kollidieren. */
.dd-crumbs {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Rechts der Pfad endet vor der mittig sitzenden Suche (28rem breit):
     halbe Inhaltsbreite minus halbe Suche minus Kopf-Abstand und Knopf. */
  max-width: calc((100vw - var(--dd-sidebar-w)) / 2 - 224px - 92px);
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .dd-crumbs { display: flex; }
}

.dd-crumbs span { overflow: hidden; text-overflow: ellipsis; }
.dd-crumb-sep { font-size: 9px; color: var(--muted-2); flex-shrink: 0; }
.dd-crumbs .dd-crumb-now { color: var(--text); font-weight: 500; }

/* Gemerkte Gruppe beim Laden ohne Animation oeffnen. */
.dd-no-anim .dd-collapse,
.dd-no-anim .dd-collapse-in,
.dd-no-anim .dd-caret { transition: none !important; }