/**
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║ MODULE LAYOUT — Shared Skelett fuer alle Werke                           ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 *
 * @file widgets/_shared/module-layout.css
 *
 * Vier-Zonen-Skelett: Header / Toolbar / Body / Footer.
 * Jede Zone bezieht ihre Hintergrundfarbe und Padding ueber Theme-Vars
 * (--module-zone-*-bg, --module-pad-*) — Themes ueberschreiben zentral
 * im Theme-Manager (Single Source of Truth: theme-master.json + themes.json,
 * geladen via index.php in den Early-Inject-Block).
 *
 * KEINE Fallback-Defaults im :root oder als var(...,fallback)-Zweite-Argumente.
 * Wenn eine Var fehlt, soll der Fehler sichtbar sein — nicht stille Default-
 * Werte greifen (Charta: feedback_no_fallbacks).
 *
 * VERWENDUNG (alle Werke):
 *
 *   <div class="<modul-prefix>-shell module-shell">
 *     <header class="module-header">
 *       <div class="module-header__title">
 *         <span class="module-header__icon">📝</span>
 *         <span class="module-header__text">SCHRIFTWERK</span>
 *       </div>
 *       <div class="module-header__tools">
 *         <button class="module-icon-btn">⚙️</button>
 *       </div>
 *     </header>
 *
 *     <div class="module-toolbar">
 *       <div class="module-toolbar__primary">  <!-- Tabs/NavWidget -->
 *       <div class="module-toolbar__filler">   <!-- Filter, Suche -->
 *       <div class="module-toolbar__actions">  <!-- + Neu, etc. -->
 *     </div>
 *
 *     <div class="module-body">
 *       <!-- Modul-spezifischer Inhalt: 3-Pane / List+Detail / Dashboard -->
 *     </div>
 *
 *     <footer class="module-footer">
 *       <div class="module-footer__left">
 *         <span class="module-footer__status-dot"></span>
 *         <span class="module-footer__status-label">…</span>
 *       </div>
 *       <div class="module-footer__right">
 *         <span class="module-footer__count">…</span>
 *       </div>
 *     </footer>
 *   </div>
 */

/* ── [hidden] portalweit durchsetzen ────────────────────────────────── */
/* Das HTML-Attribut `hidden` wird vom Browser nur mit `[hidden]{display:none}`
   aus dem User-Agent-Stylesheet umgesetzt. JEDE Autoren-Deklaration von
   `display` schlaegt diese Regel — unabhaengig von der Spezifitaet, weil
   Autoren-Origin vor UA-Origin gewinnt. Schon `div{display:flex}` reicht.
   Folge ohne diese Regel: `el.hidden = true` ist auf jedem Element mit
   eigener display-Regel ein stiller No-Op (belegt an der Schriftwerk-Toolbar,
   die auf allen Top-Tabs stehenblieb, obwohl _updateToolbarForTab sie
   ausblenden wollte).
   Wer ein Element trotz `hidden` anzeigen muss, nutzt das Muster
   `.klasse:not([hidden]) { display: flex }` statt dieser Regel auszuweichen. */
[hidden] { display: none !important; }

/* ── Skelett-Container ──────────────────────────────────────────────── */

.module-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--module-zone-body-bg);
  color: var(--color-text-primary);
}

/* ── Header / Toolbar / Body / Footer ──────────────────────────────────
   Padding pro Zone separat (Stammwerk-Master: Header 16px 24px, Footer
   8px 24px — nicht symmetrisch). Background pro Zone separat aber im
   Default-Theme nahezu identisch (Stammwerk-Look). */

.module-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--module-pad-header);
  background: var(--module-zone-header-bg);
  color: var(--module-zone-header-fg);
  border-bottom: var(--module-divider);
}

.module-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--module-pad-toolbar);
  background: var(--module-zone-toolbar-bg);
  color: var(--module-zone-toolbar-fg);
  border-bottom: var(--module-divider);
}

/* Wenn ein NavWidget (.bnw) direkt in einem Toolbar-Slot lebt, soll es seinen
   eigenen Container-Hintergrund + Border ablegen — die `.module-toolbar`
   ist bereits der Container. Verhindert doppelte Background-/Border-Schicht
   und doppeltes Padding. Gilt fuer alle drei Slots (__primary, __filler,
   __actions), damit ein Toolbar-Bereich auf NavWidget umgestellt werden kann
   ohne Layout-Doppelschicht. */
.module-toolbar__primary > .bnw,
.module-toolbar__filler > .bnw,
.module-toolbar__actions > .bnw {
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: none;
}

/* ── Zweite Menuzeile (kontextuelles Submenu) ──────────────────────────
   Optionale Zone DIREKT unter der `.module-toolbar`. Module, die eine
   zweistufige Navigation brauchen (Haupt-Tab in Zeile 1 -> kontextuelle
   Sub-Tabs in Zeile 2), rendern ein zweites NavWidget in diese Zone.
   `:empty` blendet die Zeile aus, wenn der aktive Haupt-Tab kein Submenu
   hat (z. B. eine Cockpit-/Dashboard-Startseite) — keine Geisterzeile. */
.module-subtoolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--module-pad-toolbar);
  background: var(--module-zone-subtoolbar-bg);
  color: var(--module-zone-toolbar-fg);
  border-bottom: var(--module-divider);
}
.module-subtoolbar:empty { display: none; }
.module-subtoolbar > .bnw {
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: none;
}

.module-body {
  flex: 1;
  min-height: 0;
  background: var(--module-zone-body-bg);
  overflow: hidden;
  /* KEIN Padding hier — Stammwerk-Master hat das Padding pro Inhalt
     (Cards/Listen/Panes verwalten ihr eigenes Padding). var(--module-pad-body)
     ist als Hint fuer Module verfuegbar, aber nicht hier global gesetzt. */
}

.module-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--module-pad-footer);
  background: var(--module-zone-footer-bg);
  color: var(--module-zone-footer-fg);
  border-top: var(--module-divider);
  font-size: var(--module-footer-size);
}

/* ── Header-Innenstruktur ──────────────────────────────────────────── */

.module-header__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--module-title-size);
  font-weight: var(--module-title-weight);
  letter-spacing: var(--module-title-letter-spacing);
  text-transform: var(--module-title-transform);
  color: inherit;
}

.module-header__icon {
  font-size: var(--module-icon-size);
  line-height: var(--line-height-tight);
}

.module-header__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Toolbar-Innenstruktur ─────────────────────────────────────────── */

.module-toolbar__primary,
.module-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.module-toolbar__filler {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ── Footer-Innenstruktur ──────────────────────────────────────────── */

.module-footer__left,
.module-footer__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-footer__status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}

.module-footer__status-dot--idle    { background: var(--color-text-tertiary); }
.module-footer__status-dot--warning { background: var(--color-warning); }
.module-footer__status-dot--error   { background: var(--color-error); }

.module-footer__count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--module-footer-count-weight);
}

/* ── Footer-Status-Pill (Stammwerk-Master-Look) ───────────────────────
   Wrappt Status-Dot + Status-Label in einem Pill-Button mit Border +
   Radius. Optional klickbar (Modul kann Status-Filter toggeln). */

.module-footer__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  color: var(--module-zone-footer-fg);
  font-size: var(--module-footer-size);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.module-footer__status-pill:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}

/* Statische (nicht-klickbare) Pill-Variante: kein Hover-Effekt */
.module-footer__status-pill[disabled],
.module-footer__status-pill--static {
  cursor: default;
}

.module-footer__status-pill[disabled]:hover,
.module-footer__status-pill--static:hover {
  background: transparent;
  color: var(--module-zone-footer-fg);
}

/* ── Generischer Header-Icon-Button (Stammwerk-Master-Look) ─────────────
   Werte exakt vom Stammwerk-Master uebernommen, damit alle Module die
   gleiche Header-Hoehe haben (Icon-Button bestimmt die Header-Hoehe via
   align-items: center). 36×36 statt 30×30 → +6px Header-Hoehe = matcht
   Stammwerk-Referenz. */

.module-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--module-action-size);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.module-icon-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-secondary);
  color: var(--color-text-primary);
}