/* ============================================================
   ContextMenu & RechtsklickContextMenu – oo-cm / oo-rcm
   Alle Farben und Abstände via --oo-* Tokens aus main.css.
   ============================================================ */

/* ── Gemeinsame Tokens ───────────────────────────────────── */

.oo-cm,
.oo-rcm {
    --oo-cm-min-width:    10rem;
    --oo-cm-max-width:    24rem;
    --oo-cm-item-height:  2rem;
    --oo-cm-font-size:    var(--oo-font-size-sm);
    --oo-cm-radius:       var(--oo-radius-md);
    --oo-cm-shadow:       0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    --oo-cm-z-index:      var(--oo-z-context-menu);
    --oo-cm-transition:   var(--oo-transition-fast);
}

/* ── ContextMenu – Wrapper ───────────────────────────────── */

.oo-cm {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: fit-content;
}

/* ── Panel (gemeinsam für beide Varianten) ───────────────── */

.oo-cm__panel {
    /* Tokens hier wiederholt, damit .oo-rcm__panel (position:fixed, kein DOM-Kind von .oo-rcm) sie erbt */
    --oo-cm-min-width:    10rem;
    --oo-cm-max-width:    24rem;
    --oo-cm-item-height:  2rem;
    --oo-cm-font-size:    var(--oo-font-size-sm);
    --oo-cm-radius:       var(--oo-radius-md);
    --oo-cm-shadow:       0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    --oo-cm-z-index:      var(--oo-z-context-menu);
    --oo-cm-transition:   var(--oo-transition-fast);

    background: var(--oo-color-background);
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    border-radius: var(--oo-cm-radius);
    box-shadow: var(--oo-cm-shadow);
    color: var(--oo-color-text);
    cursor: default;
    font-family: var(--oo-font-family);
    font-size: var(--oo-cm-font-size);
    min-width: var(--oo-cm-min-width);
    max-width: var(--oo-cm-max-width);
    padding: var(--oo-space-1) 0;
    width: max-content;
    z-index: var(--oo-cm-z-index);
    animation: oo-cm-fadein var(--oo-cm-transition) ease;
}

@keyframes oo-cm-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Root-Panel beim ContextMenu und SelectMenu: fest positioniert, contextmenu.js setzt es an den Auslöser.
   So schneidet kein Vorfahre mit overflow (Scrollbereich, Kanban-Spalte, Karte, Tabelle) das Panel ab. */
.oo-cm > .oo-cm__panel {
    position: fixed;
}

/* ── Einblenden je nach bevorzugter Seite ────────────────── */

.oo-cm[data-cm-position=top] > .oo-cm__panel {
    animation-name: oo-cm-fadein-up;
}

@keyframes oo-cm-fadein-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.oo-cm[data-cm-position=left] > .oo-cm__panel,
.oo-cm[data-cm-position=right] > .oo-cm__panel {
    animation-name: oo-cm-fadein-right;
}

@keyframes oo-cm-fadein-right {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Trigger ─────────────────────────────────────────────── */

.oo-cm__trigger {
    align-items: center;
    display: inline-flex;
}

/* ── RechtsklickContextMenu ──────────────────────────────── */

.oo-rcm {
    display: contents; /* Wrapper beeinflusst kein Layout */
}

.oo-rcm__panel {
    position: fixed;
    animation: oo-cm-fadein var(--oo-cm-transition) ease;
}

/* ── Menü-Items (gemeinsam) ──────────────────────────────── */

.oo-cm__item {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    gap: var(--oo-space-2);
    min-height: var(--oo-cm-item-height);
    padding: var(--oo-space-1) var(--oo-space-3);
    position: relative;
    transition: background-color var(--oo-cm-transition);
    white-space: nowrap;
    width: 100%;
    /* Nicht markierbar wie ein natives Menü. Sonst hält Chrome unter Android ein Tippen auf den Text für „Tippen zum
       Suchen“ und öffnet neben dem Untermenü ein Suchblatt, weil die Seite erst nach dem Umlauf über den Server reagiert. */
    user-select: none;
    -webkit-user-select: none;
}

.oo-cm__item:hover {
    background-color: var(--oo-color-surface);
}

.oo-cm__item--active,
.oo-cm__item--active .oo-cm__item-icon {
    color: var(--oo-primary);
}

.oo-cm__item--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sub-Menü-Indikator: Pfeil-Icon */
.oo-cm__item-arrow {
    font-size: 1rem;
    margin-left: auto;
    color: var(--oo-color-text-subtle);
    flex-shrink: 0;
}

/* Haken für eingeschaltete Optionen (IsChecked) */
.oo-cm__item-check {
    font-size: 1rem;
    margin-left: auto;
    padding-left: var(--oo-space-3);
    color: var(--oo-primary);
    flex-shrink: 0;
}

/* Switch statt Haken (IsSwitch) – Aussehen wie die Switch-Komponente, aber ohne eigenes Eingabefeld;
   umgeschaltet wird über den Klick auf den ganzen Eintrag. */
.oo-cm__item-switch {
    position: relative;
    flex-shrink: 0;
    width: 1.7rem;
    height: 0.85rem;
    margin-left: auto;
    margin-right: 0.15rem;
    background: var(--oo-gray-300);
    border-radius: var(--oo-radius-full);
    transition: background var(--oo-cm-transition);
}

.oo-cm__item-text + .oo-cm__item-switch,
.oo-cm__item-link + .oo-cm__item-switch {
    margin-left: var(--oo-space-4);
}

.oo-cm__item-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.05rem;
    height: 1.05rem;
    background: var(--oo-gray-50);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(-50%);
    transition: left var(--oo-cm-transition);
}

.oo-cm__item-switch--on {
    background: var(--oo-primary);
}

.oo-cm__item-switch--on::after {
    left: calc(1.7rem - 1.05rem);
}

.oo-cm__item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zweizeiliger Eintrag (Description): Text und Beschreibung untereinander */
.oo-cm__item--described {
    padding-top: var(--oo-space-2);
    padding-bottom: var(--oo-space-2);
}

.oo-cm__item-title,
.oo-cm__item-description {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Relativ zum Eintrag: --oo-font-size-xs und -sm sind gleich groß und darum nicht kleiner als der Eintrag selbst */
.oo-cm__item-description {
    font-size: 0.875em;
    color: var(--oo-color-text-subtle);
}

/* Tastenkürzel rechts (Shortcut) – reine Anzeige */
.oo-cm__item-shortcut {
    margin-left: auto;
    padding-left: var(--oo-space-4);
    font-size: 0.875em;
    color: var(--oo-color-text-subtle);
    flex-shrink: 0;
}

.oo-cm__item-icon {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--oo-color-text-subtle);
}

.oo-cm__item-link {
    flex: 1;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Item-Wrapper (für Sub-Menü-Positionierung) ──────────── */

.oo-cm__item-wrap {
    position: relative;
}

/* ── Sub-Menü-Panel ──────────────────────────────────────── */

.oo-cm__sub-panel {
    position: absolute;
    left: 100%;
    top: -4px;              /* leicht nach oben – aligned mit Item-Oberkante */
    margin-left: 4px;       /* kleiner Abstand damit Shadow sichtbar bleibt */
    z-index: 1;             /* liegt über dem Parent-Panel */
    animation-name: oo-cm-fadein-right;
}

/* Unsichtbare Hover-Brücke: überbrückt den 4px-Gap damit kein mouseleave feuert */
.oo-cm__item-wrap--open > .oo-cm__item::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
}

.oo-cm__item-wrap--open.oo-cm__item-wrap--opens-left > .oo-cm__item::after {
    left: -12px;
    right: auto;
}

/* ── Vor dem Positionieren ───────────────────────────────── */

/* Unsichtbar oben links im Fenster geparkt, bis contextmenu.js Panel und Auslöser gemessen und die Position gesetzt hat.
   An der Stelle aus den Regeln oben ragte das Panel oft über den Rand: Scrollt die Seite selbst (etwa am Handy),
   verbreitert Chrome dafür kurz das Fenster. Die Position würde dann mit falschen Maßen berechnet, und das
   Scroll-Ereignis schlösse das Menü. Steht nach den Positionsregeln, damit es sie überschreibt; die Inline-Position
   des Rechtsklick-Menüs bleibt erhalten. */
.oo-cm__panel--positioning,
.oo-cm[data-cm-position] > .oo-cm__panel--positioning {
    animation: none;
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
}

/* ── Gruppen-Header ──────────────────────────────────────── */

.oo-cm__header {
    align-items: center;
    display: flex;
    gap: var(--oo-space-2);
    padding: var(--oo-space-2) var(--oo-space-3) var(--oo-space-1);
    pointer-events: none;
}

.oo-cm__header-text {
    font-size: var(--oo-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oo-color-text-subtle);
}

/* ── Separator ───────────────────────────────────────────── */

.oo-cm__separator {
    border: none;
    border-top: var(--oo-border-width) solid var(--oo-color-border);
    margin: var(--oo-space-1) 0;
}

/* ── Default-Trigger (drei Punkte, Ghost) ────────────────── */

.oo-cm__default-trigger {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--oo-radius-md, 4px);
    color: var(--oo-color-text-subtle);
    cursor: pointer;
    display: inline-flex;
    line-height: 1;
    padding: var(--oo-space-1);
    transition: background var(--oo-transition-fast), color var(--oo-transition-fast);
}

.oo-cm__default-trigger .oo-icon {
    font-size: 1.25rem;
}

.oo-cm__default-trigger:hover {
    background: var(--oo-color-surface);
    color: var(--oo-color-text);
}

/* ── Volle Breite (FullWidth) ────────────────────────────── */

/* Wrapper und Trigger über die ganze Breite des Containers, etwa für ein Benutzermenü unten in einer Seitenleiste. */
.oo-cm--full-width {
    display: block;
    width: auto;
}

.oo-cm--full-width > .oo-cm__trigger {
    display: block;
    cursor: pointer;
}

/* ── Touch ───────────────────────────────────────────────── */

/* Mit dem Finger höhere Einträge (40 statt 32 px). Am Panel wiederholt, weil das Panel des RechtsklickContextMenu
   kein DOM-Kind seines Wrappers ist. */
@media (pointer: coarse) {
    .oo-cm,
    .oo-rcm,
    .oo-cm__panel {
        --oo-cm-item-height: 2.5rem;
    }
}

/* Ohne Hover gibt es meist keine Tastatur; Tastenkürzel wären nur Ballast. */
@media (hover: none) {
    .oo-cm__item-shortcut {
        display: none;
    }
}