/**
 * ui/css/ui-shell.css
 * Version: v1.0.0-hardcut-modular-v3.4.5 (2026-02-04)
 *
 * Zweck:
 * - Shell-Styling: Menü links, generelle Buttons, Layout-Polish
 * - KEIN Panel/Form-Styling (das bleibt in ui-core.css)
 */

:root{
  --bp-border: #e5e7eb;
  --bp-primary: rgba(80,160,255,.18);
  --bp-primary-border: rgba(80,160,255,.35);
  --bp-chip-bg: rgba(148,163,184,.14);
  --bp-chip-border: rgba(148,163,184,.22);
}

/* Sidebar */
#menu{
  padding: 12px;
  background: #fafafa;
  border-right: 1px solid var(--bp-border);
}

/* Überschriften (falls vorhanden) */
#menu h1,#menu h2,#menu h3{
  margin: 10px 0 6px;
  font-size: 14px;
  color: #111827;
}

/* Defensives Chip-Styling für Menü-Buttons/Links */
#menu a, #menu button{
  font: inherit;
}

#menu button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--bp-chip-border);
  background: var(--bp-chip-bg);
  color: #111827;
  cursor: pointer;
  margin: 4px 6px 0 0;
}

#menu button:hover{
  background: rgba(148,163,184,.20);
}

#menu button[aria-current="page"], #menu button.active{
  border-color: var(--bp-primary-border);
  background: var(--bp-primary);
}

/* Kleine Shell-Buttons (Snapshot Toggle etc.) */
.bp-btn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(148,163,184,.14);
  color: #111827;
  cursor: pointer;
  font-weight: 600;
}
.bp-btn:hover{ background: rgba(148,163,184,.20); }
.bp-btn-secondary{ background: rgba(148,163,184,.10); }

@media (max-width: 900px){
  #menu{
    border-right: none;
    border-bottom: 1px solid var(--bp-border);
  }
}

/* ==========================================================================
   ui/css/ui-shell.css
   Version: v3.4.6 (2026-02-04)
   Layout/Shell Styles (Menü, View-Container, Snapshot-Leiste)
   ========================================================================== */

/* Wichtig: #view ist der Container für den gesamten rechten Bereich.
   Für iPad/iPhone Safari muss hier overflow:hidden gesetzt sein,
   sonst scrollt der Body und NICHT unser innerer Panel-Scroller. */
#view{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* =============================================================================
   MOBILE (iPhone): Menü einklappbar + 1-Spalten Shell + Safe-Area
   Version: v3.4.7-mobile-menu (2026-02-05)
   ============================================================================= */

@media (max-width: 520px){

  /* --- Shell Layout: Menü oben, View darunter --- */
  #menu{
    width: 100% !important;
    max-width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--bp-border);
  }

  #view{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    overflow: hidden;
  }

  /* --- Toggle-Button im Menü --- */
  #menu .bp-menuToggle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--bp-chip-border);
    background: var(--bp-chip-bg);
    font: inherit;
    font-weight: 700;
    margin: 0 0 8px 0;
    cursor: pointer;
  }

  /* --- Eingeklappter Zustand: nur Toggle sichtbar --- */
  html.bp-menu-collapsed #menu > *:not(.bp-menuToggle){
    display: none !important;
  }

  /* Optional: Wenn eingeklappt, etwas kompaktere Menü-Padding */
  html.bp-menu-collapsed #menu{
    padding-bottom: 8px;
  }
}

/* --- iOS Safe-Area (Notch/Homebar) --- */
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

body{
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ==========================================================================
   MOBILE COMPACT MODE (GLOBAL) — Smartphone Layout dichter machen
   Version: v1.0.0-mobile-compact (2026-02-06)
   Ziel:
   - Weniger "Luft" oben (Header/Menu/Panel)
   - Buttons & Cards enger
   - Mehr Platz für Content (z.B. iframe/WebGL)
   ========================================================================== */

@media (max-width: 520px){

  /* App Header kompakter */
  #appHeader{
    height: 44px;
    padding: 0 10px;
  }
  #appTitle{
    font-size: 14px;
  }

  /* Grundflächen/Sections enger */
  #shell{
    gap: 10px;
    padding: 10px;
  }
  #main{
    padding: 0;
  }
  #app{
    gap: 10px;
  }

  /* Cards/Boxen enger (wir greifen bewusst breit, damit es überall wirkt) */
  .panel-card,
  .bp-card,
  .card{
    padding: 10px !important;
    border-radius: 12px !important;
  }

  /* Buttons global etwas kleiner */
  .bp-btn{
    padding: 6px 8px;
    border-radius: 10px;
    font-weight: 600;
  }

  /* Kleine Texte/Badges */
  .muted,
  .subtle,
  .panel-subtitle{
    font-size: 12px;
  }
}