/* obs-anwendungen.css - the application switcher at the top of the sidebar (F-0039, 19.10.2026, Stempel 19c).
   Design: artboards D25 (.ws block in .nav) and D15-CRM. One segmented control "Studio | CRM | ...",
   one segment per application, directly under the brand in the dark rail of BOTH hulls.
   THE SAME FILE LIVES IN TWO CONTAINERS: Studio (00b7c0fd-...) and CRM (d7fa909f-...) - webfiles
   are per container, so every change is written to both. Markup comes from obs-anwendungen.js:
   <nav class="obs-anwendungen" aria-label="Anwendungen"><a data-app="studio" aria-current="page">...
   Colours sit on the always-dark rail (--obs-nav), so light and dark theme share these rules;
   the per-app accent is the icon colour of the design (Studio purple, CRM sky). */

.obs-anwendungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px;
  background: rgba(255,255,255,.07); margin: 0 0 10px; box-sizing: border-box; }
.obs-anwendungen[hidden] { display: none; }
.obs-anwendungen > a, .obs-anwendungen > span { --obs-anw-farbe: #B4B6D6; height: 34px; min-width: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 6px; font: 700 13px/1 var(--obs-font-sans); color: var(--obs-nav-text); text-decoration: none; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.obs-anwendungen > a:hover { color: #fff; background: rgba(255,255,255,.06); }
.obs-anwendungen > a:focus-visible { outline: 2px solid var(--obs-anw-farbe); outline-offset: -2px; }
.obs-anwendungen .obsa-ic { width: 16px; height: 16px; flex: none; color: var(--obs-anw-farbe); }
.obs-anwendungen .obs-anw-name { overflow: hidden; text-overflow: ellipsis; }
.obs-anwendungen [aria-current="page"] { background: color-mix(in srgb, var(--obs-anw-farbe) 22%, transparent); color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--obs-anw-farbe) 35%, transparent); }
/* accent per application; an unknown app keeps the neutral colour */
.obs-anwendungen [data-app="studio"] { --obs-anw-farbe: #9C97FF; }
.obs-anwendungen [data-app="crm"] { --obs-anw-farbe: #7DD3FC; }
.obs-anwendungen [data-app="hub"] { --obs-anw-farbe: #2DD4BF; }
.obs-anwendungen [data-app="monitoring"] { --obs-anw-farbe: #FBBF24; }

/* three or more applications: two rows, a notch smaller so "Monitoring" still fits a column */
.obs-anwendungen:has(> :nth-child(3)) > a, .obs-anwendungen:has(> :nth-child(3)) > span { font-size: 12px; gap: 5px; padding: 0 4px; }
.obs-anwendungen:has(> :nth-child(3)) .obsa-ic { width: 14px; height: 14px; }

/* collapsed rail (56 px): icons only, one column */
.obsa-rail-zu .obsa-rail .obs-anwendungen { grid-template-columns: 1fr; }
.obsa-rail-zu .obsa-rail .obs-anwendungen .obs-anw-name { display: none; }
.obsa-rail-zu .obsa-rail .obs-anwendungen > a, .obsa-rail-zu .obsa-rail .obs-anwendungen > span { padding: 0; }
.obsa-rail-zu .obsa-rail .obs-anwendungen .obsa-ic { width: 16px; height: 16px; }

/* 600-1023 px: the 72 px rail shows icons only */
@media (max-width: 1023px) {
  .obsa-rail .obs-anwendungen { grid-template-columns: 1fr; }
  .obsa-rail .obs-anwendungen .obs-anw-name { display: none; }
  .obsa-rail .obs-anwendungen > a, .obsa-rail .obs-anwendungen > span { padding: 0; }
  .obsa-rail .obs-anwendungen .obsa-ic { width: 20px; height: 20px; }
}
/* < 600 px: the rail is the "Mehr" sheet of the bottom navigation - full segments again */
@media (max-width: 599px) {
  .obsa-mehr-offen .obsa-rail .obs-anwendungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obsa-mehr-offen .obsa-rail .obs-anwendungen .obs-anw-name { display: inline; }
  .obsa-mehr-offen .obsa-rail .obs-anwendungen > a, .obsa-mehr-offen .obsa-rail .obs-anwendungen > span { padding: 0 6px; }
  .obsa-mehr-offen .obsa-rail .obs-anwendungen .obsa-ic { width: 16px; height: 16px; }
}

/* the old switches, should a cached script still build them: the "Wechseln" group of the
   former crm-sprung.js at the bottom of the Studio rail and the grid button of obs-apps.js */
.obsa-rail .obs-navgroup:has(> #obs-zum-crm), .obsa-top .obs-apps { display: none; }