/* qs-menu.css — EINE Gestaltung der Kopf-Menüs (Werkzeuge, Datei, Hilfe) für das
 * BPMN-Studio und Synixx BPMN (beide team-modeling.html), 2026-10-10.
 *
 * Die Menüs entstehen aus /js/qs-menu-defs.js; der Baustein vergibt neben den
 * Seitenklassen (tm-mi …) die gemeinsamen Klassen
 *   .qs-menu   Menü-Container        .qs-mh   Bereichskopf
 *   .qs-mi     Eintrag               .qs-mchk An/aus-Schalter (Haken-Spalte)
 * Maßstab ist die Gestaltung des BPMN-Studio: feste Status-Spalte links (✓ Schalter
 * an, ● Fenster offen, sonst leer — nichts springt beim Zustandswechsel), Reserve
 * rechts für das ⓘ, 30 px Zeilenhöhe. Bereichsfarben, Zonen-Boxen und das Dimmen/
 * Ausblenden nach Erfahrungsstufe bleiben in qs-theme-v2.css bzw. den Seiten.
 * Diese Datei wird NACH den Seiten-Stilen geladen.
 */

/* ---- Grund (alle Designs) ---- */
/* Container: Radius und Menü-Schatten (--qs-elev-1). Im klassischen Design hatte das
   BPMN-Studio-Menü keinen Schatten (var(--qs-shadow) ist eine FARBE → ungültige Regel);
   die V2-Designs setzen Fläche/Radius/Schatten weiter in qs-theme-v2.css. */
.qs-menu {
    border-radius: 10px; box-shadow: var(--qs-elev-1, 0 8px 24px rgba(0, 0, 0, .25));
    /* EINE Schriftliste: die Seiten erben sonst unterschiedliche Rückfall-Ketten */
    font-family: var(--qs-font, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.qs-menu .qs-mh {
    font-size: var(--qs-fs-xs, 11px); font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
    color: var(--qs-text-mute, #6b7280); padding: 8px 8px 3px; margin-top: 2px;
}
.qs-menu .qs-mh:first-child { margin-top: 0; }
.qs-menu .qs-mi {
    display: block; position: relative; min-width: 100%; box-sizing: border-box; text-align: left;
    background: transparent; color: var(--qs-text, #e6e6e6);
    border: 1px solid transparent; border-radius: 7px;
    padding: 6px 30px 6px 9px;          /* rechts: ⓘ 16 px + 6 px Rand + 8 px Luft */
    cursor: pointer; font-family: inherit; font-size: var(--qs-fs-md, 13px); font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qs-menu .qs-mi:hover { background: var(--qs-panel-2, #1e232b); border-color: var(--qs-border, #2a2e36); }
/* Status-Spalte: ALLE Einträge reservieren sie → kein Versatz zwischen Schalter und Fenster-Öffner */
.qs-menu .qs-mi::before { content: ''; display: inline-block; width: 1.25em; text-align: center; flex-shrink: 0; font-size: inherit; }
.qs-menu .qs-mi.qs-mchk[aria-pressed="true"]::before { content: '✓'; color: var(--qs-accent, #3b82f6); font-weight: 700; }
.qs-menu .qs-mi[aria-pressed="true"]:not(.qs-mchk)::before { content: '●'; color: var(--qs-accent, #3b82f6); }

/* ---- V2-Designs ---- */
body.ui-v2 .qs-menu .qs-mh { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
body.ui-v2 .qs-menu .qs-mi { display: flex; align-items: center; gap: 8px; }
body.ui-v2 .qs-menu .qs-mi::before { flex: 0 0 14px; width: 14px; display: inline-block; text-align: center; font-size: 10px; }
body.ui-v2 .qs-menu .qs-mi.qs-mchk[aria-pressed="true"]::before { content: '✓'; color: var(--qs2-menu-check); }
body.ui-v2 .qs-menu .qs-mi.qs-mchk[aria-pressed="false"]::before { content: ''; }
body.ui-v2 .qs-menu .qs-mi[aria-pressed="true"]:not(.qs-mchk)::before { content: '●'; font-size: 8px; color: var(--qs2-menu-check); }
body.ui-v2 .qs-menu .qs-mi:not([aria-pressed])::before { content: ''; }

/* ---- Auswahl-Segment im Menü (z. B. Dokumentation: Aus · Anzeigen · Bearbeiten) ----
   Nur im V2-Design; im klassischen Design bedient der Zyklus-Knopf davor dieselbe
   Funktion (.qs-mi-classic). Die Seitenklasse tm-seg bleibt für die
   Menü-Klappen; ihre Grundform (Editor-Umschalter) wird hier überschrieben. */
.qs-menu .qs-mseg { display: inline-flex; border: 1px solid var(--qs-border, #2a2e36); border-radius: 8px; overflow: hidden; }
body:not(.ui-v2) .qs-menu .qs-mseg { display: none !important; }
body.ui-v2 .qs-menu .qs-mi-classic { display: none !important; }
body.ui-v2 .qs-menu .qs-mseg { display: flex; align-items: center; gap: 4px; padding: 4px 10px 8px; flex-wrap: wrap; }
body.ui-v2 .qs-menu .qs-mseg-lbl { flex: 0 0 auto; margin-right: 4px; font-size: 11px; color: var(--qs-text-dim); }
body.ui-v2 .qs-menu .qs-mseg-opt {
    flex: 0 0 auto; padding: 3px 10px; font: inherit; font-size: 10.5px; font-weight: 600;
    border: 1px solid var(--qs2-win-head-border); border-radius: var(--qs2-radius-item);
    background: transparent; color: var(--qs-text-dim); cursor: pointer;
}
body.ui-v2 .qs-menu .qs-mseg-opt:hover:not([aria-pressed="true"]) { background: var(--qs2-menu-item-hover); color: var(--qs-text); }
body.ui-v2 .qs-menu .qs-mseg-opt[aria-pressed="true"] { background: var(--qs-accent); border-color: var(--qs-accent); color: var(--qs2-btn-primary-text); }

/* ---- Bereichsfarben (V2) ----
   Werkzeug-Bereiche über data-grp (Kopf UND Einträge: --qs2-zone-c färbt die Zonen-Box),
   Datei-Orte über data-area. Ein Bereich = eine Farbe; vorher standen dieselben Regeln je
   Seite doppelt. */
body.ui-v2 .qs-menu [data-grp="inspect"]   { --qs2-zone-c: var(--qs2-grp-inspect); }
body.ui-v2 .qs-menu [data-grp="analysis"]  { --qs2-zone-c: var(--qs2-grp-analysis); }
body.ui-v2 .qs-menu [data-grp="structure"] { --qs2-zone-c: var(--qs2-grp-structure); }
body.ui-v2 .qs-menu [data-grp="process"]   { --qs2-zone-c: var(--qs2-grp-process); }
body.ui-v2 .qs-menu [data-grp="neutral"]   { --qs2-zone-c: var(--qs2-grp-neutral); }
body.ui-v2 .qs-menu .qs-mh[data-grp="inspect"]   { color: var(--qs2-grp-inspect); }
body.ui-v2 .qs-menu .qs-mh[data-grp="analysis"]  { color: var(--qs2-grp-analysis); }
body.ui-v2 .qs-menu .qs-mh[data-grp="structure"] { color: var(--qs2-grp-structure); }
body.ui-v2 .qs-menu .qs-mh[data-grp="process"]   { color: var(--qs2-grp-process); }
body.ui-v2 .qs-menu .qs-mh[data-grp="neutral"]   { color: var(--qs2-grp-neutral); }
/* Datei-Orte: Dieser Rechner blau, Gruppenordner grün, Bibliothek/Camunda 8 amber,
   ortsunabhängig (Neu, Simulationsdaten, Export, Geöffnete DMNs) neutral grau.
   Hilfe: Kennenlernen blau, Nachschlagen grau. data-area schlägt data-grp. */
body.ui-v2 .qs-menu .qs-mh:is([data-area="local"], [data-area="learn"], [data-area="look"]) { color: var(--qs-accent); }
body.ui-v2 .qs-menu .qs-mh[data-area="room"]    { color: var(--qs-green); }
body.ui-v2 .qs-menu .qs-mh[data-area="library"] { color: var(--qs-amber); }
body.ui-v2 .qs-menu .qs-mh:is([data-area="new"], [data-area="data"], [data-area="export"], [data-area="session"], [data-area="lookup"], [data-area="neutral"]) { color: var(--qs2-grp-neutral); }

/* ---- Erfahrungsstufe (V2) ----
   Unterhalb der SELBSTGEWÄHLTEN Stufe bleiben Einträge sichtbar, aber gedimmt und
   inaktiv; der Bereichskopf trägt „ab …“. Fixierte Nur-Lese-Stufen (persona-locked)
   und der Schalter „Gesperrte Funktionen ausblenden“ (qs-locked-hide) fallen auf das
   Ausblenden der Seiten zurück. Köpfe bleiben klickbar (ein-/ausklappen, Hover-Peek). */
body.ui-v2 .qs-menu .qs-mh:is(.qs-lvl-analyst, .qs-lvl-digitizer, .qs-lvl-champion)::after {
    display: inline-block; margin-left: 8px; padding: 0 7px;
    border: 1px solid var(--qs2-badge-border); border-radius: var(--qs2-radius-pill);
    background: var(--qs2-badge-bg, transparent); color: var(--qs2-badge-text);
    font-size: var(--qs-fs-xs, 11px); font-weight: 600; line-height: 15px;
    text-transform: none; letter-spacing: 0; vertical-align: 1px;
}
/* „ab …“ nur, wenn die aktuelle Stufe den Bereich wirklich sperrt */
body.ui-v2.persona-newbie .qs-menu .qs-mh.qs-lvl-analyst::after { content: 'ab Analytiker'; }
body.ui-v2:is(.persona-newbie, .persona-analyst) .qs-menu .qs-mh.qs-lvl-digitizer::after { content: 'ab Digitalisierer'; }
body.ui-v2:is(.persona-newbie, .persona-analyst, .persona-digitizer) .qs-menu .qs-mh.qs-lvl-champion::after { content: 'ab Champion'; }
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie :is(.qs-menu .qs-mi, .qs-sec-flyout *):is(.qs-lvl-analyst, .qs-lvl-digitizer, .qs-lvl-champion),
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst :is(.qs-menu .qs-mi, .qs-sec-flyout *):is(.qs-lvl-digitizer, .qs-lvl-champion),
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer :is(.qs-menu .qs-mi, .qs-sec-flyout *).qs-lvl-champion {
    display: flex !important; opacity: .45; pointer-events: none;
}
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-newbie .qs-menu .qs-mh:is(.qs-lvl-analyst, .qs-lvl-digitizer, .qs-lvl-champion),
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-analyst .qs-menu .qs-mh:is(.qs-lvl-digitizer, .qs-lvl-champion),
body.ui-v2:not(.persona-locked):not(.qs-locked-hide).persona-digitizer .qs-menu .qs-mh.qs-lvl-champion {
    display: block !important; opacity: .6;
}