/* Geteiltes Rechtsklick-Menue (FnContextMenu).

   Die Optik ist bewusst 1:1 die des vorhandenen Menues in der Navigationsleiste (.sn-ctx-* in
   shell-nav.css, Rechtsklick auf einen Favoriten) - dieselben Masse, Abstaende, Farben und Radien.
   Zwei Rechtsklick-Menues, die verschieden aussehen, waeren zwei Muster fuer dieselbe Geste.

   Nur Token, kein rohes Hex (Vorgabe 1g). Die Flaeche traegt --fn-surface, weil ein Kontextmenue nach
   der Rollen-Regel eine schwebende Flaeche ist (Vorgabe 1a). */

/* display: contents - der Portal-Knoten selbst darf keine eigene Box aufspannen, sonst verschoebe er
   das Layout an der Stelle, an der die Komponente zufaellig gerendert wurde. */
.fn-ctx-portal { display: contents; }

/* Faengt den naechsten Klick und schliesst. inset: 0 statt Breite/Hoehe: das haelt auch, wenn die Seite
   scrollt, waehrend das Menue offen ist. */
.fn-ctx-backdrop { position: fixed; inset: 0; z-index: 60; }

.fn-ctx-menu {
    position: fixed;
    z-index: 61;
    min-width: 172px;
    padding: 4px;
    background: var(--fn-surface);
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    box-shadow: 0 10px 28px var(--fn-shadow-hover);
}

.fn-ctx-menu--detailed-actions {
    min-width: 238px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

.fn-ctx-menu--detailed-actions .fn-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--fn-text-tertiary);
}

.fn-ctx-separator {
    height: 1px;
    margin: 4px 6px;
    background: var(--fn-border);
}

.fn-ctx-menu--detailed-actions .cw-mi-colors {
    padding: 8px 10px;
    color: var(--fn-text-secondary);
    font-size: 12.5px;
}

.fn-ctx-menu--detailed-actions .cw-mi-colors .fn-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.fn-ctx-menu button:not(.cw-swatch) {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--fn-text-secondary);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    border-radius: var(--fn-radius-sm);
}

.fn-ctx-menu button:not(.cw-swatch):hover:not(:disabled) { background: var(--fn-hover); color: var(--fn-text); }
.fn-ctx-menu button:not(.cw-swatch):focus-visible { outline: none; box-shadow: var(--fn-focus-ring); }
.fn-ctx-menu button:not(.cw-swatch):disabled { opacity: .4; cursor: default; }

.fn-ctx-menu--detailed-actions > button:not(.cw-swatch) { padding: 8px 10px; }
.fn-ctx-menu--detailed-actions > button:not(.cw-swatch):hover .fn-icon { color: var(--fn-text); }

.fn-ctx-menu .cw-swatch {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid var(--fn-border-strong);
    border-radius: 50%;
}

.fn-ctx-menu .cw-swatch:focus-visible {
    outline: 2px solid var(--fn-primary);
    outline-offset: 1px;
    box-shadow: none;
}

/* Der aktuell geltende Eintrag bleibt anwaehlbar - er wird nur erkennbar gemacht. Ihn zu sperren
   verschwiege, welcher Zustand gerade gilt (der haeufigste Grund, das Menue ueberhaupt zu oeffnen). */
.fn-ctx-menu button:not(.cw-swatch)[aria-checked="true"] { color: var(--fn-text); background: var(--fn-accent-soft); }

/* Der Punkt traegt die Farbe des Zustands, den der Eintrag setzt - dieselbe Farbe wie das Icon danach.
   Grau ist --fn-neutral, nicht --fn-text-tertiary: die drei Punkte sind eine Ampel, und fuer
   Ampel-Logik schreibt die Design-Vorgabe 1b ausdruecklich diese Tokens vor. */
.fn-ctx-menu .fn-ctx-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fn-neutral);
}

.fn-ctx-menu .fn-ctx-dot.is-positive { background: var(--fn-success); }
.fn-ctx-menu .fn-ctx-dot.is-caution { background: var(--fn-warning); }

.fn-ctx-menu .fn-ctx-head {
    padding: 6px 10px 7px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--fn-border);
    color: var(--fn-text-tertiary);
    font-size: 11px;
}