/*
  drill-nav.css — MND (19.09.2026): JTL-Style Drill-Down-Panels.
  Bewusst UNLAYERED (Pendant zu unified_nav.css): reine .drill-*-Klassen,
  keine Bootstrap-Kollisionen; Gewinner gegen Utilities nur durch
  Quelle-Later-Position in assets.tpl (nach unified_nav.css).

  Zwei Modi:
  - Ohne JS: verschachtelte, vollständig verlinkte Liste (statisch,
    eingerückt) — das Markup selbst trägt kein hidden.
  - Mit JS (html.drill-js): Panels werden absolute Overlays im
    [data-drill-root], sliden per translateX herein, Root-Liste und
    Panel-Body scrollen unabhängig (overscroll-behavior: contain).
*/

/* ---------- Grundstruktur (beide Modi) ---------- */

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

.drill-node { margin: 0; padding: 0; position: static; }

.drill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* Touch-Vertrag (FRONTEND_TASKLIST P1.3) */
  padding: 4px 6px 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.drill-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}
a.drill-link:hover, a.drill-link:focus-visible { color: var(--color-accent-cyan, #22d3ee); }

.drill-ic { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.drill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drill-count {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
}

.drill-next {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.08);
  color: var(--color-accent-cyan, #22d3ee);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.drill-next:hover, .drill-next:focus-visible { background: rgba(34, 211, 238, 0.18); }
.drill-next[aria-expanded="true"] { background: rgba(34, 211, 238, 0.18); }

/* MND-F1: Feed-Abo-Icon (nur Bäume mit feed_url — rss/radar) */
.drill-feed {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: rgba(34, 211, 238, 0.55);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.drill-feed:hover, .drill-feed:focus-visible { color: var(--color-accent-cyan, #22d3ee); background: rgba(34, 211, 238, 0.12); }

/* ---------- Sub-Panel: Kopfzeile + Alle-aus-Eintrag + Body ---------- */

.drill-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.drill-back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.drill-back:hover, .drill-back:focus-visible { background: rgba(255, 255, 255, 0.12); }
.drill-back-caret { font-size: 1.25rem; line-height: 1; }

.drill-crumb {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

.drill-all {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.1);
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}
a.drill-all:hover, a.drill-all:focus-visible {
  background: rgba(34, 211, 238, 0.2);
  color: var(--color-accent-cyan, #22d3ee);
}
.drill-all-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Ohne JS: statisch eingerückte Verschachtelung ---------- */

.drill-sub {
  margin: 6px 0 2px 12px;
  padding-left: 10px;
  border-left: 2px solid rgba(34, 211, 238, 0.3);
}

/* ---------- Mit JS: Overlay-Geometrie im [data-drill-root] ---------- */

html.drill-js [data-drill-root] { position: relative; }

/* Scroll-Container-Außenstelle: im JS-Modus scrollt JEDE Root-Liste selbst
   (die tab-content-Scrollfläche wird dicht). Klasse .drill-tabcontent wird
   vom Template zusätzlich zur Bootstrap-Struktur getragen. */
/* Der Drawer-Body (justify-content-between, Suchfeld + Tabs + Sektionen +
   Footer) hat keine positive Resthöhe für den Baum — flex würde ihn als
   einzigem schrumpfbaren Kind auf 0 quetschen. Daher: Baum bekommt eine
   eigene dvh-Fläche (60 Prozent der dynamischen Viewport-Höhe) und lebt im
   Body-Scroll; Panels füllen diese Fläche absolute. vh-Fallback für alte
   Browser vor dvh. */

/* Der Drawer-Body ist d-flex + justify-content-between (kurzer Legacy-Baum).
   Mit dem 60dvh-Baum übersteigt der Inhalt die Body-Höhe — space-between
   verteilt dann NEGATIV und stapelt Sektionen ÜBER den Baum (beide bei
   gleicher Y-Position, Klick-Interception). Im Drill-Modus daher schlichter
   Stapel-Flow: Body scrollt (offcanvas-body hat overflow:auto), Footer
   bleibt via mt-auto unten verankert, Sektionen stehen unter dem Baum. */

html.drill-js .glass-offcanvas .offcanvas-body { justify-content: flex-start; }

html.drill-js .drill-tabcontent { overflow: visible; flex-shrink: 0; }
html.drill-js .drill-tabcontent > [data-drill-root] {
  height: 60vh;
  height: 60dvh;
  min-height: 340px;
}

/* Root-Ebene scrollt selbst — entweder ist die Root-Liste direktes Kind
   (RSS-/CMS-Tab) oder ein .drill-scroll-Wrapper (Blog-Tab mit Kopfkopf-
   Button) übernimmt den Scroll über beide. */
html.drill-js [data-drill-root] > .drill-list,
html.drill-js [data-drill-root] > .drill-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 24px 0;
}
html.drill-js [data-drill-root] > .drill-scroll { display: flex; flex-direction: column; }

html.drill-js .drill-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
html.drill-js .drill-layer > .drill-sub { pointer-events: auto; }

html.drill-js .drill-sub {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(13, 17, 23, 0.985);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.26s ease-out;
  will-change: transform;
}
html.drill-js .drill-sub.is-open { transform: translateX(0); }

html.drill-js .drill-sub .drill-sub-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}

/* Enkel-Panels im Layer liegen im selben Koordinatensystem wie ihr Parent-
   Panel (absolute inset: 0 je Layer) — z-Index setzt drill-nav.js nach
   Ebene. Ohne JS-Geometrie gilt oben die statische Einrückung weiter. */

/* ---------- Themen-Radar-Drawer: Body wird Flex-Spalte, Matrix scrollt ---------- */
/* .md-radar-drawer hat 80vh (community_chat.css) — der Body kann im JS-Modus
   sicher auf Flex-Spalte kippen: Hero + Filter oben fix, Matrix-Bereich
   füllt den Rest und scrollt eigenständig; Panels überlagern absolute. */

html.drill-js .md-radar-drillbody { overflow: hidden; display: flex; flex-direction: column; }
html.drill-js .md-radar-matrix-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
html.drill-js .md-radar-matrix-wrap > .drill-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.drill-js .md-radar-matrix-wrap .drill-next { width: 34px; height: 34px; font-size: 1.15rem; }

/* ---------- MND2-3: „Zuletzt besuchte Kategorien" (Root-Listen-Kopf) ---------- */

.drill-recents {
  display: block;
  margin: 0 0 4px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.05);
}
.drill-recents-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.drill-recents-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.drill-recents-track::-webkit-scrollbar { display: none; }
.drill-recents-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: rgba(13, 17, 23, 0.85);
  color: inherit;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
a.drill-recents-chip:hover, a.drill-recents-chip:focus-visible {
  background: rgba(34, 211, 238, 0.14);
  color: var(--color-accent-cyan, #22d3ee);
}
.drill-recents-chip-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- MND-G1: Aktive Kategorie (URL-Match, aria-current) ---------- */

.drill-item:has(> a.drill-link.is-active) {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.1);
}
a.drill-link.is-active { color: var(--color-accent-cyan, #22d3ee); }
a.drill-link.is-active::after {
  content: "•";
  margin-left: 4px;
  color: var(--color-accent-cyan, #22d3ee);
}
a.drill-all.is-active {
  border-color: rgba(34, 211, 238, 0.65);
  background: rgba(34, 211, 238, 0.16);
  color: var(--color-accent-cyan, #22d3ee);
}

/* MND-G8: Deep-Link-Ziel (Leaf ohne eigenes Panel) — Sprungmarke */
.drill-node.is-target > .drill-item {
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35) inset;
}
.drill-node.is-target > .drill-item a.drill-link { color: #facc15; }

/* ---------- MND-G2: Klickbare Breadcrumb-Kette ---------- */

.drill-crumb { display: flex; align-items: center; gap: 2px; }
.drill-crumb-btn {
  border: 0;
  padding: 6px 7px;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-height: 32px;
  cursor: pointer;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drill-crumb-btn:hover, .drill-crumb-btn:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
}
.drill-crumb-sep { color: rgba(255, 255, 255, 0.3); flex-shrink: 0; }
.drill-crumb-cur {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- MND-G3: Such-Meta (Trefferzahl / Keine Treffer / Clear) ---------- */

.drill-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  min-width: 28px;
  min-height: 28px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}
.drill-search-clear:hover, .drill-search-clear:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.drill-search-meta {
  margin-top: 6px;
  padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.55);
  min-height: 1em;
}
.drill-search-meta.is-empty { color: rgba(248, 113, 113, 0.9); }
.drill-search-reset {
  border: 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.12);
  color: rgba(252, 165, 165, 1);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.drill-search-reset:hover, .drill-search-reset:focus-visible { background: rgba(248, 113, 113, 0.22); }

/* ---------- MND-G5: Recents — Tree-Badge, Einzel-/Gesamtlöschen ---------- */

.drill-recents-caption { justify-content: space-between; width: 100%; }
.drill-recents-clear {
  border: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.66rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.drill-recents-clear:hover, .drill-recents-clear:focus-visible { color: rgba(255, 255, 255, 0.8); }
.drill-recents-chipwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.drill-recents-chip { padding-right: 30px; }
.drill-recents-chip-tree {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(34, 211, 238, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 6px;
  padding: 2px 5px;
  line-height: 1;
}
.drill-recents-x {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
}
.drill-recents-x:hover, .drill-recents-x:focus-visible {
  background: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

/* ---------- Reduced Motion: Slides aus, Zustandswechsel instant ---------- */

@media (prefers-reduced-motion: reduce) {
  html.drill-js .drill-sub { transition: none; }
}

/* ---------- Schmale Sichtflächen: Badges/Icons atmen lassen ---------- */

@media (max-width: 379px) {
  .drill-count { padding: 4px 6px; font-size: 0.65rem; }
  .drill-next { width: 36px; height: 36px; }
  .drill-item { min-height: 44px; }
}