/* ============================================================
   FlyoutMenu – oo-fm
   Alle Farben und Abstände via --oo-* Tokens aus main.css.
   ============================================================ */

.oo-fm {
    --oo-fm-min-width:         10rem;
    --oo-fm-max-width:         20rem;
    --oo-fm-item-height:       2rem;
    --oo-fm-font-size:         var(--oo-font-size-md);
    --oo-fm-header-font-size:  var(--oo-font-size-xs);
    --oo-fm-icon-size:         1rem;
    --oo-fm-gap:               var(--oo-space-2);
    --oo-fm-radius:            var(--oo-radius-md);
    --oo-fm-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-fm-z-index:           var(--oo-z-context-menu);
    --oo-fm-transition:        var(--oo-transition-fast);

    font-family: var(--oo-font-family);
    font-size: var(--oo-fm-font-size);
    color: var(--oo-color-text);
    position: relative;
    display: inline-block; /* Breite schrumpft auf Inhalt – kein Block-Durchmarsch */
}

/* Vertikale Variante darf volle Breite nutzen (z. B. in einer Sidebar) */
.oo-fm--vertical {
    display: block;
}

/* ── Listen-Reset ─────────────────────────────────────────── */

.oo-fm__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-1);
    width: fit-content;
}

/* Vertikale Orientierung: Liste stapeln, volle Breite */
.oo-fm--vertical .oo-fm__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* ── Item ─────────────────────────────────────────────────── */

.oo-fm__item {
    position: relative;
    list-style: none;
}

.oo-fm__item--root {
    /* Root-Items in horizontaler Menüleiste: kein voller Breite */
}

.oo-fm--vertical .oo-fm__item--root {
    width: 100%;
}

/* ── Trigger-Button / Link ────────────────────────────────── */

.oo-fm__item-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-fm-gap);
    min-height: var(--oo-fm-item-height);
    padding: var(--oo-space-1) var(--oo-space-3);
    border: none;
    border-radius: var(--oo-fm-radius);
    background: transparent;
    color: inherit;
    font-size: var(--oo-fm-font-size);
    font-family: var(--oo-font-family);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--oo-fm-transition), color var(--oo-fm-transition);
    box-sizing: border-box;
    width: 100%;
}

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

/* Flyout-Items haben volle Breite */
.oo-fm__flyout .oo-fm__item-trigger {
    width: 100%;
}

/* ── Aktiv-Zustand ────────────────────────────────────────── */

.oo-fm__item--active > .oo-fm__item-trigger,
.oo-fm__item--active > .oo-fm__item-trigger .oo-fm__icon {
    color: var(--oo-primary);
    background: var(--oo-color-surface);
}

.oo-fm__item--active-child > .oo-fm__item-trigger,
.oo-fm__item--active-child > .oo-fm__item-trigger .oo-fm__icon,
.oo-fm__item--active-child > .oo-fm__item-trigger .oo-fm__arrow {
    color: var(--oo-primary);
    background: var(--oo-color-surface);
}

/* Offenes Root-Item hervorheben */
.oo-fm__item--root.oo-fm__item--open > .oo-fm__item-trigger {
    background: var(--oo-color-surface);
}

/* ── Disabled ─────────────────────────────────────────────── */

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

/* Icon-Only: Root-Trigger hat reduzierten Gap (kein Text, nur Icon + Pfeil) */
.oo-fm--icon-only .oo-fm__item--root > .oo-fm__item-trigger {
    gap: 0.2rem;
}

/* ── Icon ─────────────────────────────────────────────────── */

.oo-fm__icon {
    font-size: var(--oo-fm-icon-size);
    flex-shrink: 0;
    color: var(--oo-color-text-subtle);
    transition: color var(--oo-fm-transition);
}

/* ── Text ─────────────────────────────────────────────────── */

.oo-fm__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Content-Template (rechts) ───────────────────────────── */

.oo-fm__content-template {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Pfeil ────────────────────────────────────────────────── */

.oo-fm__arrow {
    font-size: var(--oo-fm-icon-size);
    flex-shrink: 0;
    margin-left: auto;
    color: var(--oo-color-text-subtle);
    transition: transform var(--oo-fm-transition), color var(--oo-fm-transition);
}

/* Root-Item horizontal: Pfeil rotiert wenn offen */
.oo-fm__item--root.oo-fm__item--open > .oo-fm__item-trigger .oo-fm__arrow {
    transform: rotate(180deg);
}

/* ── Flyout-Panel ─────────────────────────────────────────── */

.oo-fm__flyout {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: var(--oo-space-1) 0;
    min-width: var(--oo-fm-min-width);
    max-width: var(--oo-fm-max-width);
    width: max-content;
    background: var(--oo-color-background);
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    border-radius: var(--oo-fm-radius);
    box-shadow: var(--oo-fm-shadow);
    z-index: var(--oo-fm-z-index);

    /* Einblende-Animation */
    animation: oo-fm-fadein var(--oo-fm-transition) ease;
}

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

/* Flyout öffnet nach unten (Root-Level horizontal) */
.oo-fm__flyout--down {
    top: 100%;
    left: 0;
    margin-top: var(--oo-space-1);
}

/* Flyout öffnet nach rechts (Sub-Level) */
.oo-fm__flyout--right {
    top: 0;
    left: 100%;
    margin-left: var(--oo-space-1);
    animation-name: oo-fm-fadein-right;
}

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

/* Fallback: Flyout öffnet nach links (via JS-Korrektur, .oo-fm__flyout--left) */
.oo-fm__flyout--left {
    top: 0;
    right: 100%;
    left: auto;
    margin-left: 0;
    margin-right: var(--oo-space-1);
}

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

.oo-fm__header-item {
    display: flex;
    align-items: center;
    gap: var(--oo-fm-gap);
    padding: var(--oo-space-2) var(--oo-space-4) var(--oo-space-1);
    margin-top: var(--oo-space-1);
    pointer-events: none;
}

.oo-fm__header-item:first-child {
    margin-top: 0;
}

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

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

.oo-fm__separator-item {
    padding: var(--oo-space-1) 0;
    list-style: none;
}

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