/* obs-apps.css - der App-Umschalter in allen vier Huellen. 13.09.2026.
   Neutral gehalten: eigene Farben mit Rueckfall, damit dieselbe Datei im hellen
   Studio, im CRM (Schiene), im Hub (dunkle Kopfzeile) und im Monitoring sitzt. */

.obs-apps { position: relative; display: inline-flex; align-items: center; font-family: inherit; }

.obs-apps-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 10px;
  border: 1px solid var(--obs-apps-rand, rgba(15, 26, 32, 0.14));
  border-radius: 8px;
  background: var(--obs-apps-grund, #ffffff);
  color: var(--obs-apps-schrift, #16232e);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.1px;
  cursor: pointer; white-space: nowrap;
}

.obs-apps-knopf:hover, .obs-apps-knopf[aria-expanded="true"] { background: var(--obs-apps-grund-hover, #f1f4f6); }
.obs-apps-knopf svg { flex: 0 0 auto; opacity: 0.85; }

.obs-apps-menue {
  position: absolute; z-index: 1000; top: calc(100% + 8px); left: 0;
  min-width: 300px; max-width: 360px;
  padding: 10px;
  border: 1px solid rgba(15, 26, 32, 0.12);
  border-radius: 12px;
  background: #ffffff; color: #0f1a20;
  box-shadow: 0 14px 40px rgba(15, 26, 32, 0.18);
}

.obs-apps-kopf { padding: 4px 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: #6b7a84; }

.obs-apps-liste { display: grid; grid-template-columns: 1fr; gap: 4px; }

.obs-apps-kachel {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 9px;
  color: inherit; text-decoration: none;
}
.obs-apps-kachel:hover { background: #f1f4f6; }
.obs-apps-kachel--aktiv { background: #eef1ff; }

.obs-apps-zeichen {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #fff;
  background: #16232e;
}
.obs-apps-zeichen--studio { background: #2a3be0; }
.obs-apps-zeichen--crm { background: #0f8a6a; }
.obs-apps-zeichen--hub { background: #16232e; }
.obs-apps-zeichen--monitoring { background: #b3541e; }

.obs-apps-text { display: flex; flex-direction: column; min-width: 0; }
.obs-apps-text b { font-size: 14px; font-weight: 600; }
.obs-apps-text i { font-style: normal; font-size: 12px; color: #6b7a84; }

.obs-apps-fuss {
  display: block; margin-top: 8px; padding: 8px 10px;
  border-top: 1px solid rgba(15, 26, 32, 0.08);
  font-size: 13px; color: #2a3be0; text-decoration: none;
}
.obs-apps-fuss:hover { text-decoration: underline; }

/* --- Studio: sitzt in der Kopfleiste rechts, vor dem Konto. */
.obs-apps--studio { margin-right: 10px; }

/* --- Hub: dunkle Kopfzeile, heller Knopf mit Transparenz. */
.obs-apps--hub { margin-left: auto; margin-right: 14px; }
.obs-apps--hub .obs-apps-knopf {
  --obs-apps-grund: rgba(255, 255, 255, 0.08);
  --obs-apps-grund-hover: rgba(255, 255, 255, 0.16);
  --obs-apps-rand: rgba(255, 255, 255, 0.22);
  --obs-apps-schrift: #ffffff;
}

/* --- CRM / Monitoring: in der Schiene unter der Marke, volle Breite. */
.obs-apps--rail { display: flex; padding: 0 12px 10px; }
.obs-apps--rail .obs-apps-knopf { width: 100%; justify-content: flex-start; }
.obs-apps--rail .obs-apps-menue { left: 12px; }

@media (max-width: 640px) {
  .obs-apps-knopf-text { display: none; }
  .obs-apps-knopf { padding: 0 9px; }
  .obs-apps-menue { min-width: 260px; }
}