/* kontext-sheet.css — Kontextleiste + Kontext-Sheet (View-as / Impersonation)

 Quelle: extrahiert aus mein-tag.css (Bloecke "Kontextleiste" + "Kontext-Sheet").
 Inhalt 1:1.

 Konsumenten:
 - web/js/sections/mein-tag.js (Kontext-State)
 - web/js/ui/init.js (Kontext-Sheet rendern)
 - web/js/ui/tabs.js (Kontext-Filterung)
 - web/js/ui/back-handler.js

 Kontext-System: Mitarbeiter koennen sich als anderer User darstellen
 (View-as), agieren oder impersonieren (handelnAls). Kontext-Sheet
 oeffnet sich aus dem Topbar-Button heraus.

 Theming-Hinweis: `.topbar-kontext-btn.has-kontext` Theming (Light: brand-light
 Tint, Dark: weisse Transparenz) liegt in layout.css (Page-Header SSOT) —
 hier nur Visibility-Toggle. Modus-Farben: data-mode="view" (info), "agieren" (warning), "handelnAls" (danger).
 ========================================================================== */

/* Die Balken-Kontextleiste (.mt-kontext-bar auf Tab-Bar-Ebene) ist entfallen.
   Sie war zuletzt unbedingt `display:none !important` — Markup, Modus-Farben und
   die beiden Breakpoint-Blöcke sind mit ihr entfernt. Der Kontext wird
   ausschließlich über den Topbar-Button + #kontext-sheet gesteuert. */

/* Kontext-Button (in Topbar/Page-Header) — auf allen Breakpoints sichtbar
 sobald JS `.kontext-visible` setzt. Aktiv-Indicator (.has-kontext) wird
 theme-bewusst in layout.css definiert (Light: brand-light Tint, Dark:
 weisse Transparenz) — Hier nur noch der
 Visibility-Toggle. */
.topbar-kontext-btn { display: none; }
.topbar-kontext-btn.kontext-visible { display: inline-flex; }

/* ── Kontext-Sheet (Topbar) ────────────────────────────── */
.kontext-sheet-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Section-Block: Mitarbeiter / Gaeste */
.kontext-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kontext-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.kontext-section-meta {
  text-transform: none;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Select konsistent zum Rest */
.kontext-select { width: 100%; }

/* Modus-Wrap: erscheint unter dem Dropdown wenn ein Ziel gewaehlt ist */
.kontext-modus-wrap {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-light);
}

/* Segmented Control */
.kontext-segmented {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}
.kontext-seg {
  flex: 1;
  padding: var(--space-1-5) var(--space-2);
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-quick), color var(--duration-quick);
}
.kontext-seg:hover:not(.active) { color: var(--color-text); }
.kontext-seg.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-2);
}
.kontext-seg:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}

/* Hinweis-Box in drei Varianten (soft/info/warn) */
.kontext-hinweis {
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.kontext-hinweis strong { font-weight: var(--fw-semibold); }
.kontext-hinweis--soft {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
}
.kontext-hinweis--info {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  border-left: 3px solid var(--status-info-default);
}
.kontext-hinweis--warn {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  border-left: 3px solid var(--status-warning-default);
}

/* Reset-Button: klar als sekundaere Aktion */
.kontext-reset-btn {
  margin-top: var(--space-2);
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kontext-Banner — dauerhaft sichtbarer Hinweis auf einen aktiven Fremdkontext
   (web/js/ui/kontext-banner.js). Frei schwebend am unteren Rand: bewusst NICHT
   im Shell-/Header-Fluss, damit es weder in die Hoehen-Kette der Sektionen noch
   in die Kollaps-Kette des Page-Headers eingreift (beide brechen lautlos).
   Modus-Toenung ueber [data-mode]; --kontext-banner-* traegt die Variante.
   ══════════════════════════════════════════════════════════════════════════ */
.kontext-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 900;                       /* unter Drawer/Modal, ueber Sektionsinhalt */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--kontext-banner-border, var(--color-border));
  background: var(--kontext-banner-bg, var(--color-surface));
  color: var(--kontext-banner-fg, var(--color-text));
  box-shadow: var(--shadow-16);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.kontext-banner.hidden { display: none; }

.kontext-banner[data-mode="view"] {
  --kontext-banner-bg: var(--status-info-bg);
  --kontext-banner-fg: var(--status-info-fg);
  --kontext-banner-border: var(--status-info-default);
}
.kontext-banner[data-mode="agieren"] {
  --kontext-banner-bg: var(--status-warning-bg);
  --kontext-banner-fg: var(--status-warning-fg);
  --kontext-banner-border: var(--status-warning-default);
}
.kontext-banner[data-mode="handelnAls"] {
  --kontext-banner-bg: var(--status-danger-bg);
  --kontext-banner-fg: var(--status-danger-fg);
  --kontext-banner-border: var(--status-danger-default);
}

.kontext-banner-pille {
  flex: 0 0 auto;
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--kontext-banner-fg, var(--color-text));
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.kontext-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kontext-banner-ablauf {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
/* Der Zusatz „folgt dem Kontext nicht" ist die wichtigste Information des Banners,
   sobald sie zutrifft — deshalb eigene Flaeche und kein Nebensatz. */
.kontext-banner-hinweis {
  flex: 0 1 auto;
  min-width: 0;
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kontext-banner-ende {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2-5);
  border: 1px solid var(--kontext-banner-border, var(--color-border));
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--kontext-banner-fg, var(--color-text));
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.kontext-banner-ende:hover { background: var(--color-surface-hover); }

/* Notebook/Tablet: Ablaufzeit ist Zusatzinfo und weicht zuerst. */
@media (max-width: 999px) {
  .kontext-banner-ablauf { display: none; }
}
/* Mobile: zweizeilig statt Pille — die Leiste darf den Inhalt nicht abschneiden,
   und der Hinweis „folgt nicht" muss lesbar bleiben. */
@media (max-width: 599px) {
  .kontext-banner {
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    gap: var(--space-2);
  }
  .kontext-banner-hinweis { white-space: normal; flex: 1 1 100%; }
}