/* Thingware Corporate Design – App-Shell
   Kanonisches Shell-Stylesheet. tokens.css zuvor einbinden. App-spezifische Styles
   danach in der eigenen app.css ergänzen (Shell-Regeln nicht überschreiben). */

html, body { height: 100%; margin: 0; }
/* Mount-Element der App – die id unterscheidet sich je App (#root, #app, …). */
#root, #app { height: 100%; }

/* Volle Fensterhöhe, unabhängig davon, worin die App gemountet ist: Sidebar und
   Hauptbereich sind immer genau fensterhoch, gescrollt wird NUR in #main-content.
   `dvh` folgt der ein-/ausblendenden Browserleiste auf Mobilgeräten; `vh` ist der
   Fallback für ältere Browser. */
#app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  width: var(--tw-sidebar-width);
  min-width: var(--tw-sidebar-width);
  background: var(--tw-sidebar-bg);
  color: var(--tw-sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: margin-left .2s ease;
}

/* ── Desktop-Collapse: Sidebar gleitet aus, Handle zum Wieder-Ausklappen ──── */
#app-shell.sidebar-collapsed #sidebar { margin-left: calc(-1 * var(--tw-sidebar-width) - 1px); }
#sidebar-handle {
  display: none;
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 200; border: none;
  background: var(--tw-sidebar-bg); color: var(--tw-sidebar-text);
  border-radius: 0 .5rem .5rem 0; padding: .7rem .45rem;
  box-shadow: 1px 0 6px rgba(0,0,0,.2);
}
#app-shell.sidebar-collapsed #sidebar-handle { display: block; }

#sidebar-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid var(--tw-border-soft);
  letter-spacing: .02em;
}
#sidebar-brand i { color: var(--tw-accent); }
#sidebar-collapse-btn { background: none; border: none; color: inherit; opacity: .7; } /* legacy */
#sidebar-collapse-btn:hover { opacity: 1; color: #fff; }
/* Empfohlen: Collapse-Toggle als Quadrat links im #breadcrumb-bar (immer sichtbar, beide Richtungen). */
#sidebar-collapse-toggle {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tw-border, #e5e7eb); border-radius: 8px;
  background: var(--tw-surface, #fff); color: #6b7280; cursor: pointer; transition: .15s ease;
}
#sidebar-collapse-toggle:hover { color: var(--tw-accent); border-color: var(--tw-accent); }
/* Brand-Logo: fixe Höhe, kein voller-Breite-Chip (sonst rendert viewBox-only-SVG riesig). */
#sidebar-brand .brand-logo { height: 30px; width: auto; max-width: 100%; display: block; }

/* Mobile-Topbar (Burger + App-Name) — nur unter md sichtbar, siehe Media-Query unten */
#mobile-topbar { display: none; }
#mobile-topbar .mobile-brand { font-weight: 700; }
#mobile-topbar .mobile-brand i { color: var(--tw-accent); }

#nav-menu { flex: 1; padding: .5rem 0; }
#nav-menu .nav-link {
  display: flex;
  align-items: center;
  padding: .6rem 1.25rem;
  color: var(--tw-sidebar-muted);
  font-size: .9rem;
  border-radius: 0;
  transition: background .15s, color .15s;
}
/* Icon-Kasten: greift auf <i> (Font-Awesome-Webfont) UND <svg> (Font-Awesome im
   SVG/JS-Modus, ersetzt das <i>) — so ist der Icon-Text-Abstand unabhaengig davon,
   wie die App Font Awesome laedt. */
#nav-menu .nav-link i, #nav-menu .nav-link svg { width: 1.4rem; text-align: center; }
#nav-menu .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
#nav-menu .nav-link.active {
  background: var(--tw-accent-soft);
  color: var(--tw-accent);
  border-left: 3px solid var(--tw-accent);
}

#sidebar-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--tw-border-soft);
  font-size: .82rem;
  color: var(--tw-sidebar-footer);
}
#sidebar-footer .user-email {
  color: var(--tw-sidebar-muted);
  font-size: .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Suite-Switcher-Button (siehe components/suite-switcher.md) */
#btn-suite { color: var(--tw-sidebar-muted); }
#btn-suite:hover { color: #fff; }

/* ── Hauptbereich: Breadcrumb-Leiste + Inhalt ────────────── */
#main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#breadcrumb-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--tw-surface);
  border-bottom: 1px solid #e5e7eb;
  padding: .55rem 1rem;
}
#sidebar-backdrop { display: none; }
#breadcrumb-bar .breadcrumb { font-size: .85rem; margin: 0; }
#breadcrumb-bar a { text-decoration: none; }

#main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--tw-content-bg);
  padding: 1.75rem 2rem;
}

/* ── Cards / Tabellen / Badges ───────────────────────────── */
.card { border: none; border-radius: var(--tw-card-radius); }
.card.shadow-sm { box-shadow: var(--tw-card-shadow) !important; }

.table th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tw-neutral); font-weight: 600; border-top: none;
}
.table td { vertical-align: middle; font-size: .9rem; }

.badge-status-active    { background-color: var(--tw-success); }
.badge-status-inactive  { background-color: var(--tw-neutral); }
.badge-status-pending   { background-color: var(--tw-warning); }
.badge-status-cancelled { background-color: var(--tw-danger); }

/* ── Toasts / Spinner ────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem;
}
.page-spinner { display: flex; align-items: center; justify-content: center; padding: 4rem 0; }

/* Blockierender Lade-Spinner (Balken-Overlay) – via showLoader()/hideLoader() */
#app-loader {
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .6);
}
#app-loader.show { display: flex; }
.loader-bars { display: flex; align-items: center; gap: 6px; height: 44px; }
.loader-bars span {
  display: block; width: 7px; height: 100%;
  background: var(--tw-accent); border-radius: 2px;
  transform: scaleY(.3); transform-origin: center;
  animation: loader-bars 1s ease-in-out infinite;
}
.loader-bars span:nth-child(1) { animation-delay: -.9s; }
.loader-bars span:nth-child(2) { animation-delay: -.8s; }
.loader-bars span:nth-child(3) { animation-delay: -.7s; }
.loader-bars span:nth-child(4) { animation-delay: -.6s; }
.loader-bars span:nth-child(5) { animation-delay: -.5s; }
@keyframes loader-bars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ── Responsive: Haupt-Sidebar als Off-Canvas-Drawer (Burger) ───── */
@media (max-width: 768px) {
  /* Schmale Topbar mit Burger (nur Apps OHNE Breadcrumb-Leiste rendern sie) */
  #mobile-topbar {
    display: flex; align-items: center; gap: .5rem;
    flex-shrink: 0; height: 48px; padding: 0 .75rem;
    background: var(--tw-sidebar-bg); color: #fff;
  }
  #mobile-topbar .btn { color: #fff; font-size: 1.15rem; padding: .2rem .5rem; }

  /* Haupt-Sidebar wird zum Off-Canvas-Drawer (voller Drawer, kein Mini-Rail) */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--tw-sidebar-width); min-width: var(--tw-sidebar-width);
    margin-left: 0 !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1100;
  }
  body.sidebar-open #sidebar { transform: none; }
  #sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45); z-index: 1090;
  }
  body.sidebar-open #sidebar-backdrop { display: block; }
  /* Desktop-Collapse-Steuerung mobil ausblenden (dort gilt der Drawer) */
  #sidebar-handle, #sidebar-collapse-btn { display: none !important; }
  #main-content { padding: 1rem; }
}
/* Sekundäre Steuer-Panels werden zu rechten Drawern + FAB – siehe design-system.md.
   App-spezifische Klassen (.controls-sidebar/.controls-fab/.controls-backdrop) in der jeweiligen app.css. */