/* ==============================
   Global Reset iFrame-sicher
   ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;

  /* Kritisch: Keine Vollhöhe im iFrame erzwingen */
  height: auto !important;
  min-height: 0 !important;
}

/* Verhindere, dass ein Eltern-Element die Höhe wieder hochzieht */
html, body, #app, #root, .app, .root {
  min-height: 0 !important;
  height: auto !important;
}

/* Default-Zeilenhöhe neutral, aber lesbar */
body {
  line-height: 1.2;
  font-family: var(--sl-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--sl-font-size-medium, 16px);
}

/* Prevent FOUC für Custom Elements */
:not(:defined) {
  visibility: hidden;
}

/* ==============================
   Splash Screen
   ============================== */

#briefcase-splash {
  background-color: #999;
  position: relative; /* nicht fixed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;

  padding: 1rem;
  z-index: 1000;
}

#briefcase-splash p {
  text-align: center;
  color: #fff;
  font-size: large;
  margin: 0.5rem 0;
}

#briefcase-splash.hidden {
  display: none;
}

#briefcase-splash img {
  animation: throbber 1.5s infinite;
}

@keyframes throbber {
  0%   { transform: scale(1.2); }
  70%  { transform: scale(1.0); }
  100% { transform: scale(1.2); }
}

/* ==============================
   Header / Menubar (Toga)
   ============================== */

header.toga {
  background-color: var(--sl-color-primary-800, #1f2937);
  color: var(--sl-color-neutral-50, #f9fafb);
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

header.toga a.brand { margin: 8px 1em; }
header.toga a.brand img { width: 32px; }

header.toga nav { display: inline-block; }

header.toga nav.menubar {
  flex-grow: 1;
  min-width: 0; /* wichtig für Flex-Overflow */
  font-family: var(--sl-font-sans, inherit);
  font-size: var(--sl-font-size-large, 18px);
}

header.toga nav.menubar:last-of-type {
  flex-grow: 0;
  padding-right: 1em;
}

header.toga nav.menubar .menu {
  color: var(--sl-color-neutral-200, #e5e7eb);
  padding: 0.5em;
  cursor: pointer;
}

header.toga nav.menubar .menu:hover {
  background-color: var(--sl-color-primary-700, #374151);
  color: var(--sl-color-primary-300, #93c5fd);
}

header.toga nav.menubar .app {
  color: var(--sl-color-neutral-50, #f9fafb);
  font-weight: var(--sl-font-weight-bold, 700);
}

/* ==============================
   Main window – keine erzwungene Höhe
   ============================== */

main.toga.window {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible;

  /* Kritisch gegen Leerraum */
  height: auto !important;
  min-height: 0 !important;
}

main.toga.window > .container {
  flex-grow: 0;
  width: 100%;
  min-height: 0;
}

/* ==============================
   Container / Widgets
   ============================== */

.toga .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start; /* verhindert vertikales Strecken */
}

.toga .container > * {
  align-self: flex-start;
}

.toga .label {
  white-space: nowrap;
}

/* ==============================
   Kritische Overrides gegen 100%/100vh-Ketten
   (verhindern aufgeblähte Höhe ohne JS)
   ============================== */

/* Häufige Schuldige – optional aktivieren, wenn weiterhin Leerraum:
   Entkommentieren, falls du fremdes CSS nicht anpassen kannst
*/

/*
html, body, main, section, article, .page, .site, .wrap, .wrapper, .content, .viewport, .screen, .full-height,
.app, .root, #app, #root {
  min-height: 0 !important;
  height: auto !important;
}
*/

/* Falls irgendwo Vollbild-Flex-Container sind */
.flex, .flex-col, .flex-row, [class*="flex"] {
  min-height: 0; /* verhindert, dass Kinderhöhen hochpropagieren */
}

/* Margin-Collapsing kann optisch „Leerraum“ erzeugen.
   Neutralisiere oberstes/unterstes Element-Margin innerhalb des Body. */
body > :first-child { margin-top: 0; }
body > :last-child  { margin-bottom: 0; }

/* Wenn einzelne Bereiche zu groß werden: intern scrollen statt Seite aufblasen.
   Selektiv anwenden, nicht global. */
/*
.section-scroll {
  max-height: 70vh;
  overflow-y: auto;
}
*/