/* ============================================================
   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: absolut positioniert mit Abstand zum Trigger */
.oo-cm > .oo-cm__panel {
    position: absolute;
    margin-top: var(--oo-space-1);
}

/* ── Positionierung (ContextMenu) ────────────────────────── */

.oo-cm[data-cm-position=top] > .oo-cm__panel {
    bottom: 100%;
    left: 0;
    margin-top: 0;
    margin-bottom: var(--oo-space-1);
    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=bottom] > .oo-cm__panel {
    top: 100%;
    left: 0;
}

.oo-cm[data-cm-position=left] > .oo-cm__panel {
    right: 100%;
    top: 0;
    margin-top: 0;
    margin-right: var(--oo-space-1);
    animation-name: oo-cm-fadein-right;
}

.oo-cm[data-cm-position=right] > .oo-cm__panel {
    left: 100%;
    top: 0;
    margin-top: 0;
    margin-left: var(--oo-space-1);
    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%;
}

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

.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;
}

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

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

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

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