/* Owned in-place edit controls shared by the Clash Sets and Clash Matrix worklists and panels.
   The edit chip is the trigger for an anchored option list / small editor (Cw3OptionPopover,
   Cw3Popover); its colours come from the configured option hex. */
.cw-editchip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 8px 0 10px;
    border: 1px solid var(--cw-border-subtle, #34405a); border-radius: 999px;
    background: var(--cw-surface-raised, #25324b); color: var(--cw-text-primary, #eef0f8);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cw-worklist.is-compact .cw-editchip { min-height: 26px; }
.cw-editchip:hover:not(:disabled) { border-color: var(--cw-border-control, #71809a); }
.cw-editchip:focus-visible { outline: 2px solid var(--cw-focus-ring, #91a6ff); outline-offset: 2px; }
.cw-editchip:disabled { opacity: .55; cursor: progress; }
.cw-editchip[aria-expanded="true"] { border-color: var(--cw-focus-ring, #91a6ff); }
.cw-editchip.is-empty { border-style: dashed; background: transparent; color: var(--cw-text-secondary, #a0acc1); font-weight: 500; }
.cw-editchip__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cw-editchip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-editchip__chev { flex: 0 0 auto; opacity: .7; }

/* Small editor popovers (due days) */
.cw-duedays { display: grid; gap: 8px; width: 240px; padding: 12px; }
.cw-duedays__label { font-size: 12px; font-weight: 600; color: var(--cw-text-secondary, #a0acc1); }
.cw-duedays__input {
    width: 100%; min-height: 36px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--cw-border-control, #71809a); background: var(--cw-surface-canvas, #141c30);
    color: var(--cw-text-primary, #eef0f8); font: inherit; font-size: 14px;
}
.cw-duedays__input:focus-visible { outline: 2px solid var(--cw-focus-ring, #91a6ff); outline-offset: 1px; }
.cw-duedays__input.is-invalid { border-color: var(--cw-status-danger, #f87171); }
.cw-duedays__hint { margin: 0; font-size: 12px; color: var(--cw-text-secondary, #a0acc1); }
.cw-duedays__hint.is-invalid { color: var(--cw-status-danger, #f87171); }
.cw-duedays__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Owned icon (Cw3Icon). Sized in em exactly like MudBlazor's svg icon (1em box, font-size per
   size), so a surface swapped off MudIcon keeps its layout and any parent font-size rule. */
.cw3-icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; font-size: 1.25rem; vertical-align: middle; user-select: none; }
.cw3-icon--xs { font-size: 1rem; }
.cw3-icon--md { font-size: 1.5rem; }
.cw3-icon--lg { font-size: 2.1875rem; }

/* Owned action menu (Cw3Menu). Global (not scoped) because the popover can render in a host's
   popover layer, outside the component that declares the menu. */
.cw3-menu { display: inline-flex; align-items: center; }
.cw-popover.cw3-menu-pop { min-width: 220px; max-width: min(340px, calc(100vw - 16px)); padding: 4px; }
.cw3-menu-list { margin: 0; padding: 0; list-style: none; }
.cw3-menu-item {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 14px; align-items: center; column-gap: 10px;
    width: 100%; min-height: 32px; padding: 5px 10px 5px 8px; border: 0; border-radius: 6px;
    background: transparent; color: var(--cw-text-primary, #eef0f8); font: inherit; font-size: 13px;
    line-height: 1.3; text-align: left; cursor: pointer;
}
.cw3-menu-item:hover:not(:disabled), .cw3-menu-item:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.cw3-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--cw-focus-ring, #91a6ff); }
.cw3-menu-item:disabled { opacity: .45; cursor: default; }
.cw3-menu-item__icon { display: inline-flex; width: 18px; justify-content: center; color: var(--cw-text-secondary, #a0acc1); }
.cw3-menu-item.is-on .cw3-menu-item__icon, .cw3-menu-item.is-on .cw3-menu-item__label { color: var(--cw-accent, #7cc4ff); }
.cw3-menu-item.is-on .cw3-menu-item__label { font-weight: 600; }
.cw3-menu-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keys sit in their own column and the tick in a fixed 14px column after it, so every key in a
   menu lines up whether or not its item is a toggle. */
.cw3-menu-item__kbd {
    grid-column: 3;
    min-width: 20px; padding: 1px 5px; border: 1px solid var(--cw-border-subtle, #34405a); border-radius: 4px;
    color: var(--cw-text-secondary, #a0acc1); font: 11px/1.4 'Geist Mono', ui-monospace, monospace; text-align: center;
}
.cw3-menu-item__check { grid-column: 4; width: 14px; height: 14px; fill: none; stroke: var(--cw-accent, #7cc4ff); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw3-menu-item[aria-checked="false"] .cw3-menu-item__check { visibility: hidden; }
.cw3-menu-item.is-danger, .cw3-menu-item.is-danger .cw3-menu-item__icon { color: var(--cw-danger, #ff8a8a); }
.cw3-menu-sep { height: 1px; margin: 4px 6px; background: var(--cw-border-subtle, #34405a); }
.cw3-menu-heading {
    padding: 8px 10px 4px 36px; color: var(--cw-text-secondary, #a0acc1);
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.cw3-menu-list > li:first-child.cw3-menu-heading { padding-top: 4px; }
.cw3-popover-layer { display: contents; }