/* ============================================================
   HUB-SMARTNAV :: Smart-Menü für das Hauptmenü (Mobile < 780px)
   Prinzip aus Chorus: wischbares Karussell, dunkle Regenbogenfarben,
   Aktiv-Kugeln. Design der App bleibt.
   ============================================================ */

/* Nav selbst: aus flex-wrap wird block, damit die Reihe volle Breite hat */
nav.flex-wrap[data-smart="1"] {
  display: block;
  overflow: visible;
}

/* ---- Wischbare Reihe (Karussell) ---- */
.hub-smart-reihe {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Etwas Luft oben/unten für die Kugeln; seitlich genügen 4px –
     die aktive Karte wird NICHT mehr vergrößert (nur Farbe+Glow),
     es ragt also nie etwas über ein Feld hinaus. */
  padding: 4px 4px 8px;
  scrollbar-width: none;            /* Firefox */
}
.hub-smart-reihe::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* ---- Maus-Drag (Desktop-Wischen): Cursor + keine Textauswahl ---- */
.hub-smart-reihe {
  cursor: grab;
}
.hub-smart-reihe:active {
  cursor: grabbing;
}

/* ---- Modul-Nummern-Badge: nach INNEN, kein Überstand über die
   Kartenkante (absolute -bottom-1 -right-1 ragte 3px hinaus) ---- */
.hub-smart-feld button [class*="absolute"] {
  right: 7px !important;
  bottom: 7px !important;
}

/* ---- Symmetrie in den Karten: Icon-Abstand OBEN = UNTEN = MITTE.
   Karte 64px: padding 8 + Icon 24 + Label 10 + padding 8 = 50px,
   Rest 14px als gap → Icon 13px oben, 13px unten, 14px zum Label. */
.hub-smart-feld button {
  gap: 14px !important;
}

/* ---- Lange Status-Badges (SPEC u.a.): umbrechen statt über den Rand
   ragen (gemessen: 20px Überstand bei "STATUS CODE ARRAY ...") ---- */
#root div[class*="flex items-center space-x-3"] {
  flex-wrap: wrap !important;
}
#root [class*="font-mono"] {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* ---- Felder (einrastende Karten): 3 sichtbar, je ⅓ Breite (Chorus-Prinzip) ----
   Vertikaler Puffer: overflow-x:auto auf der Reihe erzwingt laut CSS-Spec
   auch overflow-y:auto (Clipping!) – deshalb bekommt JEDES Feld oben/unten
   Platz, damit die vergrößerte aktive Karte (scale 1.06) nie abgeschnitten
   wird.
   HORIZONTAL: 3×⅓ + 2 Lücken (gap 8px) = mehr als 100% → die 3. Karte
   würde rechts abgeschnitten. Deshalb ziehen wir den Lücken-Anteil vom
   Feld ab: 2 gaps ÷ 3 Felder = 5.34px (bei gap:8px). Passt exakt: 3 Felder
   + 2 Lücken = 100% – nichts wird je an den Seiten abgeschnitten. */
.hub-smart-feld {
  flex: 0 0 calc(33.3333% - 5.34px);
  max-width: calc(33.3333% - 5.34px);
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 4px 2px;
}

/* ---- Der Button (Original-Button der App, umgestylt) ----
   Selektor über die ID (nav-micro-*): React ersetzt beim Aktiv-Wechsel
   die komplette className (wischt .hub-smart-knopf weg) – die id bleibt
   immer stabil, damit min-height/display auch nach Rerenders gelten. */
.hub-smart-feld button[id^="nav-micro-"] {
  width: 100%;
  height: auto;
  min-height: 64px;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px;
  padding: 8px 4px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--mf, #164e63) 28%, rgba(2, 6, 23, 0.72)) !important;
  border: 1px solid color-mix(in srgb, var(--mf, #164e63) 62%, #334155) !important;
  color: #cbd5e1;
  /* Reacts scale-105 auf der aktiven Karte aushebeln (höhere Spezifität
     als Tailwind); die AKTIVE Karte vergrößert sich dezent per JS-
     Inline-Transform (scale 1.12) – transform ändert kein Layout,
     also kein Springen der Reihe. */
  transform: scale(1);
  position: relative;
  transition: transform .25s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hub-smart-feld button[id^="nav-micro-"]:active {
  transform: scale(0.93) !important;  /* kurzes Press-Feedback nur beim Drücken */
}

/* Tailwinds scale-105 (React legt sie auf die AKTIVE Karte) gezielt
   aushebeln: Tailwind v4 nutzt die moderne `scale`-EIGENSCHAFT (nicht
   transform!) – die wirkt zusätzlich zum transform. Beide auf 1 setzen,
   damit die aktive Karte EXAKT so groß bleibt wie die anderen; nur
   Farbe+Glow heben sie ab. */
.hub-smart-feld button[id^="nav-micro-"].scale-105 {
  transform: scale(1);
  scale: 1 !important;
}

/* ---- Label unterm Icon (wichtig auf Touch: kein Hover-Tooltip) ---- */
.hub-smart-label {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1;
  color: #94a3b8;
  white-space: nowrap;
}

/* ---- Aktiv-Kugeln (ÜBERSICHT): klickbar – Punkt i führt direkt zu
   Modul i (wie ein Karten-Klick), damit man nicht durch das Karussell
   wischen muss. Zustand via data-aktiv (kein classList! – sonst
   MutationObserver-Loop); der sichtbare Punkt ist ::before, die Box
   (16px) ist die Touch-Fläche. ---- */
.hub-smart-kugeln {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 14px;
  margin-top: 7px;
  padding-bottom: 2px;
}
.hub-smart-kugel {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;   /* kein 300ms-Tap-Delay, kein Doppel-Tap-Zoom */
  border-radius: 50%;
  transition: transform .2s ease;
}
.hub-smart-kugel::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #334155;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.25), 0 0 2px rgba(0, 0, 0, 0.9);
  transition: background .2s ease, box-shadow .2s ease;
}
.hub-smart-kugel[data-aktiv="1"]::before {
  background: var(--ma);
  box-shadow: 0 0 8px var(--ma);
}
.hub-smart-kugel[data-aktiv="1"] {
  transform: scale(1.1);
}

/* Tooltip (React-Hover-Popup) im Micro-Modus auf Touch nicht stören */
@media (max-width: 780px) {
  /* HORIZONTALER SEITEN-ÜBERLAUF: Ein Modul-Inhalt ist breiter als der
     Bildschirm (scrollWidth 411 statt 390). Dadurch scrollte scrollIntoView
     beim Zentrieren der aktiven Karte den BODY horizontal mit (scrollLeft
     21) – Header & Menü wurden links abgeschnitten, rechts erschien ein
     WEISSER RAND (transparenter body über weißem Canvas).
     Fix: overflow-x: CLIP (verbietet auch programmatisches Scrollen –
     hidden würde scrollIntoView weiterhin erlauben) + dunkler
     body-Hintergrund als Schutz. Nur das Karussell scrollt noch. */
  html, body {
    overflow-x: clip !important;
    background: #0B0F1A !important;
  }
  nav.flex-wrap[data-smart="1"] .fixed {
    display: none;
  }

  /* SETTINGS-Wallet-Karten – NEUE STRUKTUR (Johann): Der Karten-Kopf
     (`flex items-start justify-between gap-3`) wird zur SPALTE:
     1) Titel/Info-Block bekommt die GESAMTE Zeile (volle Breite),
     2) die Aktions-Gruppe (ACTIVE/ACTIVATE + Icon) kommt DARUNTER auf
        eine eigene Zeile (rechtsbündig, volle Breite) – so ragt nie
        mehr etwas über den rechten Rand. */
  div[class*="flex items-start justify-between gap-3"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  div[class*="flex items-center space-x-2 shrink-0"] {
    align-self: flex-end !important;
  }

  /* SETTINGS: Langes Code-Badge (z.B. "[YEAR_3000_FRACTAL_OS::
     STATUS_SYSTEM_OVERHAUL_ACTIVE]") ist EIN Wort ohne Leerzeichen –
     es kann nicht umbrechen, das flex-Item bleibt so breit wie der Text
     (min-width:auto) und ragt über den rechten Rand.
     Fix: Schrumpfen erlauben + Umbruch mitten im String. */
  div[class*="bg-black/40 border border-[#334155] px-3 py-1.5 rounded text-fuchsia-400"] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
  /* "ACTIVE FEEDER"-Hinweis: NICHT mehr absolut über dem Inhalt
     schweben (er VERDECKTE den Titeltext!) – stattdessen in den
     normalen Fluss: eigene Zeile rechtsbündig über dem Kartenkopf.
     Der Titel nutzt dann die volle Breite, nichts wird verdeckt
     oder abgeschnitten. */
  div[class*="absolute top-0 right-0"] {
    position: static !important;
    display: flex !important;
    width: fit-content !important;
    margin: 0 0 6px auto !important;
  }

  /* VAULT-CARDS: mehr Luft zum Atmen (v33) – die Textzeilen
     (Badge → Titel → Adresse) klebten mit 0px direkt aneinander.
     1) Icon → Textblock: 12px Luft */
  div[class*="flex items-center space-x-3 z-10"] > div:not([class*="w-10"]) {
    margin-top: 12px !important;
  }
  /* 2) Badge → Titel → Adresse: je 7px Luft */
  div[class*="flex items-center space-x-3 z-10"] > div:not([class*="w-10"]) > * + * {
    margin-top: 7px !important;
  }
  /* 3) Kopf → Netzwerk-Zeile: 16px (war 12px) + Innenpolster 18px (war 16px) */
  div[class*="from-blue-950/80"] {
    row-gap: 16px !important;
    padding: 18px !important;
  }
  /* 4) Zwischen den Karten: 18px (war 12px) */
  div[class*="max-h-[420px] overflow-y-auto"] {
    row-gap: 18px !important;
  }

  /* AKTIVE WALLET-KARTE: React/Tailwind legt `scale-[1.01]` auf die
     ausgewählte Karte (Vergrößerung!). Im scrollenden Listen-Container
     (overflow-y:auto) ragt sie dadurch oben/links über und wird
     abgeschnitten – gleiche Wurzel wie beim Menü (Tailwind v4 nutzt die
     `scale`-EIGENSCHAFT, nicht transform!). Aushebeln: Karte bleibt
     exakt in Originalgröße, nichts ragt mehr über. */
  [class*="scale-[1.01]"], [class*="scale-105"] {
    scale: 1 !important;
    transform: scale(1) !important;
  }

  /* Schmale Screens (≤ ~375px): Titel-Zeilen dürfen umbrechen –
     PRIMARY-Pipeline-Titel (flex items-center space-x-3) und die
     Wallet-Titel-Zeile (Titel + Netzwerk-Badge im Info-Block), damit
     langer Text + Badges nie über den rechten Rand ragen. */
  div[class*="flex items-center space-x-3"],
  div[class="space-y-1"] > div[class*="flex items-center space-x-2"] {
    flex-wrap: wrap !important;
  }

  /* AUTO/MICRO/EXPANDED-Umschalter: auf Smartphones nicht gebraucht.
     Exakter Klassen-Match (kein :has() – das würde auch Vorfahren
     ausblenden und könnte die ganze Seite leer machen!) */
  div[class="flex items-center space-x-1 bg-black/60 border border-[#334155] p-0.5 rounded"] {
    display: none !important;
  }

  /* Hover-/Touch-Tooltip (fixed z-50, "z.B. #15 JARVIS_COPILOT") auf Mobile
     ausblenden – er überlagert die Info-Karte und lässt Texte
     "abgeschnitten" wirken, obwohl sie vollständig sind */
  div[class*="fixed z-50"][class*="pointer-events-none"] {
    display: none !important;
  }
}

/* ============================================================
   HEADER :: bluna.svg Logo + NUR der Titel rechts daneben
   Symmetrie: eine Zeile, vertikal zentriert, gleiche Abstände
   ============================================================ */
header .hub-bluna-zeile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;      /* VERTIKAL zentriert (Logo + Titel) (30.08.) */
  gap: 14px !important;
  margin: 0 !important;
}
/* Die Mutter-Zeile (React flex-row) auf volle Breite – sonst endet der BEREICH linksbündig (30.08.)
   HINWEIS: Wird zusätzlich per JS gesetzt (setProperty important) – React-resistent! */
header .hub-bluna-logo {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 auto;
  margin-right: 0 !important;  /* Tailwind space-x-3 (12px) neutralisieren – nur gap zählt */
}
header .hub-bluna-logo-img {
  width: 36px;
  height: 36px;
  display: block;
}
header .hub-bluna-text {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;  /* Tailwind space-x-3 (12px) neutralisieren – nur gap zählt */
}
header .hub-bluna-titel {
  font-size: clamp(18px, 4vw, 30px) !important;  /* wie Galerie */
  letter-spacing: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  margin: 0 !important;
  color: #FBBF24 !important;  /* HUB gold wie die Sonne */
}
header .hub-bluna-name {
  color: #FFFFFF !important;  /* BLUNA weiß wie das Licht */
}

/* ============================================================
   SYSTEM-STATUS-BADGE :: rechts oben im Header (spiegelt Logo)
   Grün 100% = alles läuft | Rot STÖRUNG/OFFLINE = sofort sichtbar
   ============================================================ */
header .hub-sys-status {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 60;
  background: transparent;
}
header .hub-sys-status.hub-sys-ok {
  color: #34d399;
  background: rgba(6, 78, 59, 0.35);
  border: 1px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.25);
}
header .hub-sys-status.hub-sys-warn {
  color: #f87171;
  background: rgba(127, 29, 29, 0.45);
  border: 1px solid rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.45);
  animation: hub-sys-puls 1.6s infinite;
}
header .hub-sys-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
@keyframes hub-sys-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---- no-scrollbar: Scrollleiste unsichtbar (Tab-Leisten, Karusselle) ---- */
.no-scrollbar {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}