/* 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).
 ========================================================================== */

/* ── Kontextleiste (View-as / Impersonation) ──────────── */
/* Sitzt in der app-shell auf gleicher Ebene wie .tab-bar — identische Hoehe */

/* Kontextleiste ausgeblendet — Kontext wird nur über Topbar-Button gesteuert */
.mt-kontext-bar {
  display: none !important;
}
.mt-kontext-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}
.mt-kontext-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.mt-kontext-dd {
  font-size: var(--font-size-sm);
}
.mt-kontext-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border-pressed);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  padding: var(--space-xxs) var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.mt-kontext-reset-btn:hover { background: var(--status-danger-bg); border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.mt-kontext-reset-btn:hover .ui-ico img { filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(2000%) hue-rotate(340deg) brightness(90%); }
.mt-kontext-hinweis {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-left: auto;
}
.mt-kontext-hinweis strong { font-weight: var(--fw-semibold); }

/* Modus-Farben */
.mt-kontext-bar[data-mode="view"] { background: var(--status-info-bg); border-bottom-color: var(--status-info-default); }
.mt-kontext-bar[data-mode="view"] .mt-kontext-label { color: var(--status-info-default); }
.mt-kontext-bar[data-mode="view"] .mt-kontext-hinweis strong { color: var(--status-info-default); }
.mt-kontext-bar[data-mode="agieren"] { background: var(--status-warning-bg); border-bottom-color: var(--status-warning-default); }
.mt-kontext-bar[data-mode="agieren"] .mt-kontext-label { color: var(--status-warning-default); }
.mt-kontext-bar[data-mode="agieren"] .mt-kontext-hinweis strong { color: var(--status-warning-default); }
.mt-kontext-bar[data-mode="handelnAls"] { background: var(--status-danger-bg); border-bottom-color: var(--status-danger-default); }
.mt-kontext-bar[data-mode="handelnAls"] .mt-kontext-label { color: var(--status-danger-default); }
.mt-kontext-bar[data-mode="handelnAls"] .mt-kontext-hinweis strong { color: var(--status-danger-default); }

/* Responsive: Tablet */
@media (max-width: 999px) {
  .mt-kontext-bar { padding: 0 var(--space-4); }
}
/* Responsive: Mobile — Kontextleiste in Topbar verschieben */
@media (max-width: 599px) {
  /* Die Balken-Kontextleiste komplett ausblenden — wird durch Topbar-Button ersetzt */
  .mt-kontext-bar { display: none !important; }
}

/* 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;
}