/* ============================================================
   NEXUS UI — Geteiltes Design-System für den gesamten Stack
   Single Source of Truth: Tokens, Back-Navigation, Responsive-Basis.
   Geladen NACH der app-eigenen style.css, VOR /theme.css
   (theme.css behält das letzte Wort beim dynamischen --accent).
   --accent wird hier bewusst NICHT gesetzt.
   ============================================================ */

:root {
  /* Kanonische Nexus-Palette (dunkles Tech-Theme) */
  --bg:            #0a0a0f;
  --bg-card:       #111118;
  --bg-hover:      #16161f;
  --border:        #1e1e2e;
  --text:          #e2e8f0;
  --text-muted:    #64748b;
  --green:         #3dd68c;
  --red:           #f85149;
  --orange:        #f0a500;

  /* Alias-Tokens (Kompat z.B. dashboard) — auf den Kanon gemappt */
  --text-primary:   var(--text);
  --text-secondary: #b8b6b0;
  --text-tertiary:  var(--text-muted);
  --success:        var(--green);
  --danger:         var(--red);
  --warning:        var(--orange);

  /* Geteilte Maße */
  --radius:        12px;
  --radius-sm:     8px;
  --tap:           44px;            /* min. Touch-Target (Apple HIG) */
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);
}

/* ---- Globale Hygiene (nicht-invasiv) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, canvas, svg, video, iframe { max-width: 100%; }

/* Tabellen/breite Inhalte: in scrollbaren Wrapper packen statt abschneiden */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   Kanonischer Back-Button  ← NEXUS
   Ersetzt die 5 dupliziert definierten .nexus-back-Blöcke.
   In-Flow (kein position:fixed) — bleibt im jeweiligen Header.
   ============================================================ */
.nexus-back {
  display: inline-flex;
  align-items: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
  white-space: nowrap;
  /* Zurueck-Button: fixiert oben rechts, app-uebergreifend */
  position: fixed;
  top: calc(var(--safe-top, 0px) + 14px);
  right: calc(var(--safe-right, 0px) + 14px);
  z-index: 1000;
  background: rgba(10, 12, 18, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.8);
}
.nexus-back:hover { transform: translateY(-1px); }
.nexus-back:hover {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
}
.nexus-back:active { background: rgba(255, 255, 255, 0.08); }
.nexus-back:focus-visible {
  outline: 2px solid var(--accent, #6e8efb);
  outline-offset: 2px;
}

/* ============================================================
   Responsive-Basis — iPad (≤1024px) und iPhone (≤430px)
   Greift app-übergreifend für gemeinsame Strukturen.
   Bewusst konservativ: keine app-spezifischen Grid-Selektoren
   (die werden je App in deren eigener CSS feinjustiert).
   ============================================================ */

/* iPad / kleinere Laptops */
@media (max-width: 1024px) {
  .container, .wrap {
    padding-left: max(1.25rem, var(--safe-left));
    padding-right: max(1.25rem, var(--safe-right));
  }
}

/* Tabellen scrollen horizontal statt die Seite zu sprengen (≤640px) */
@media (max-width: 640px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* iPhone & kleine Phones */
@media (max-width: 430px) {
  .container, .wrap {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
    padding-top: max(1rem, var(--safe-top));
  }

  /* Header dürfen umbrechen statt zu quetschen */
  header, .header {
    flex-wrap: wrap;
    gap: 0.75rem;
    row-gap: 0.75rem;
  }

  /* Back-Button: größeres, sicher tappbares Ziel */
  .nexus-back {
    font-size: 12px;
    padding: 9px 13px;
    min-height: var(--tap);
  }

  /* Touch-Targets: Buttons/Tabs/Links nicht unter Fingerbreite */
  button, .btn, .tab-btn, a.btn, [role="button"] {
    min-height: var(--tap);
  }

  /* Untere Safe-Area (Home-Indicator) freihalten */
  body { padding-bottom: var(--safe-bottom); }
}