/* NOTE: MwOperatorSelect — reusable FilterOp picker built on MWMenu. Prefix: mw-os-*.
   Themed entirely via MudBlazor palette variables so it follows the active light/dark theme.
   The operator accent defaults to --mud-palette-info; override --mw-os-accent on .mw-os to recolor. */

.mw-os {
    --mw-os-accent: var(--mud-palette-info);
    display: inline-flex;
}

/* ── Activator (our custom ActivatorContent), variant chrome mirrors mw-menu-select-activator ── */
.mw-os-activator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 11px;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.mw-os-activator:focus-visible {
    outline: 2px solid var(--mw-os-accent);
    outline-offset: 2px;
}

.mw-os--outlined {
    border-color: var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.mw-os--outlined:hover:not(.mw-os--disabled) {
    border-color: var(--mud-palette-text-primary);
}

.mw-os--filled {
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    background: var(--mud-palette-background-gray);
}

.mw-os--filled:hover:not(.mw-os--disabled) {
    border-bottom-color: var(--mud-palette-text-primary);
}

.mw-os--text {
    padding: 6px 8px;
}

.mw-os--text:hover:not(.mw-os--disabled) {
    background: var(--mud-palette-action-default-hover);
}

/* Dense — tighter for grid rows / toolbars */
.mw-os--dense .mw-os-activator {
    padding: 4px 8px;
    font-size: 0.82rem;
    gap: 6px;
}

/* Symbol-only — keep the glyph compact and centered */
.mw-os--symbol-only {
    padding-left: 10px;
    padding-right: 9px;
}

/* Disabled (explicit, or no operators available) */
.mw-os--disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.55;
}

/* ── Activator inner pieces ──
   NOTE: Each child is an explicitly-centered flex box with line-height 1, so the enlarged glyph, the
   words, and the chevron all sit on one vertical axis regardless of their differing font metrics. */
/* NOTE: Symbol glyph sized in em (≈ +25% over the activator font) so it stands out and scales with Dense. */
.mw-os-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 600;
    color: var(--mw-os-accent);
    min-width: 1.2ch;
    text-align: center;
    font-size: 1.25em;
    /* NOTE: Optical centering — math glyphs (= ≥ ≤ etc.) are drawn on the font's math axis, which sits
       below the em-box center, so the enlarged glyph looks low even when its box is flex-centered. Lift it
       a touch so the ink lines up with the words and chevron. Tune this value if a font shifts the balance. */
    transform: translateY(-0.1em);
}

.mw-os-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.mw-os-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem !important;
    color: var(--mud-palette-action-default);
    margin-left: -2px;
}

/* ── Popover (MWMenu renders the items as MudMenuItems) ──
   Each operator category gets its own accent hue (--mw-os-cat), set on the group header and on every
   operator row. The hue colors the header, its dot, the glyph, the check, hover, and the selected fill,
   making the menu scannable by category. Cohesive with the One-Dark palette used across MitWare. */
.mw-os-cat-equality   { --mw-os-cat: #56b6c2; } /* cyan   */
.mw-os-cat-comparison { --mw-os-cat: #c678dd; } /* purple */
.mw-os-cat-text       { --mw-os-cat: #e5c07b; } /* gold   */
.mw-os-cat-set        { --mw-os-cat: #98c379; } /* green  */
.mw-os-cat-pattern    { --mw-os-cat: #e8864a; } /* orange */
.mw-os-cat-presence   { --mw-os-cat: #7f93a8; } /* slate  */

.mw-os-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mw-os-cat, var(--mud-palette-text-secondary));
    padding: 8px 14px 4px;
}

/* Glowing category dot before each header */
.mw-os-group-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--mw-os-cat, var(--mud-palette-text-secondary));
    box-shadow: 0 0 7px color-mix(in srgb, var(--mw-os-cat, transparent) 80%, transparent);
}

/* Wrap inner content in our own flex row so layout is independent of MudMenuItem internals */
.mw-os-item-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

.mw-os-item-symbol {
    font-weight: 600;
    color: var(--mw-os-cat, var(--mw-os-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7ch;
    text-align: center;
    margin-right: 10px;
    flex-shrink: 0;
    font-size: 1.2em;
    /* NOTE: Same optical nudge as .mw-os-symbol so menu rows align glyph with label + check. */
    transform: translateY(-0.08em);
}

.mw-os-item-label {
    color: var(--mud-palette-text-primary);
}

.mw-os-item-check {
    font-size: 1.25rem !important;
    color: var(--mw-os-cat, var(--mw-os-accent));
    margin-left: auto;
    padding-left: 12px;
}

/* Hover — subtle tint in the row's own category hue (:not(.mud-disabled) bumps specificity past Mud's). */
.mw-os-item:not(.mud-disabled):hover {
    background: color-mix(in srgb, var(--mw-os-cat, var(--mw-os-accent)) 12%, transparent);
}

/* Selected — prominent: category-tinted fill, a left accent bar, and a bold accent label. */
.mw-os-item.mw-os-item--selected {
    background: color-mix(in srgb, var(--mw-os-cat, var(--mw-os-accent)) 22%, transparent);
    box-shadow: inset 3px 0 0 var(--mw-os-cat, var(--mw-os-accent));
}

.mw-os-item.mw-os-item--selected:hover {
    background: color-mix(in srgb, var(--mw-os-cat, var(--mw-os-accent)) 30%, transparent);
}

.mw-os-item--selected .mw-os-item-label {
    color: var(--mw-os-cat, var(--mw-os-accent));
    font-weight: 700;
}

/* Selected glyph a touch larger for extra prominence (keeps the optical nudge). */
.mw-os-item--selected .mw-os-item-symbol {
    transform: translateY(-0.08em) scale(1.08);
}