/* BOMSync Action & Status Legend — candidate tokens (v1.0)
 * Preview / confirmation surface for /system/pallete.
 * Prefer existing theme tokens where hex matches; legend-only values live here until Geoffrey signs off. */

:root {
    /* Primary — aliases existing --btn-primary-bg / --bsx-action (#2F6690) */
    --bms-primary: var(--btn-primary-bg, #2F6690);
    --bms-primary-hover: #255579;
    --bms-primary-pressed: #1E4562;
    --bms-on-primary: #FFFFFF;

    /*
     * Create / New — subtle lift above Primary so “New package”, New item, New RFI,
     * New PO, Create… draw attention without shouting (Geoffrey 2026-10-11).
     * Cool cyan-navy family only — not orange-forward.
     */
    --bms-create: #3A8FC4;
    --bms-create-hover: #4FA3D4;
    --bms-create-pressed: #2F7AA8;
    --bms-on-create: #FFFFFF;
    --bms-create-hover-grad: linear-gradient(180deg, #7EC4E8 0%, #55A8D8 42%, #3A8FC4 100%);
    --bms-create-hover-border: rgb(255 255 255 / 0.7);
    --bms-create-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.6) inset,
        0 2px 8px rgb(58 143 196 / 0.34);
    --bms-create-hover-filter: none;
    --bms-create-hover-lift: -1px;
    --bms-create-rest-shadow:
        0 1px 0 rgb(255 255 255 / 0.22) inset,
        0 2px 8px rgb(58 143 196 / 0.28);
    /*
     * Light primary hover — redo 2026-10-10 (Geoffrey): previous navy-dark gradient +
     * brightness filter felt muddy/blurry. Keep resting #2F6690; hover goes LIGHTER and
     * CRISPER (clear top sheen, sharp inset edge, modest lift — no filter blur).
     */
    --bms-primary-hover-grad: linear-gradient(180deg, #6EB0DE 0%, #4A93C4 42%, #347EB0 100%);
    --bms-primary-hover-border: rgb(255 255 255 / 0.65);
    --bms-primary-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.55) inset,
        0 2px 6px rgb(47 102 144 / 0.28);
    --bms-primary-hover-filter: none;
    --bms-primary-hover-lift: -1px;

    /* Secondary */
    --bms-secondary-bg: #FFFFFF;
    --bms-secondary-border: #76879E;
    --bms-secondary-text: #1A2333;
    --bms-secondary-hover: #EEF2F6;
    --bms-secondary-hover-border: #5A6F8A;
    --bms-secondary-hover-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 2px 6px rgb(26 38 56 / 0.1);

    /* Ghost */
    --bms-ghost-text: var(--btn-primary-bg, #2F6690);
    --bms-ghost-hover: #EAF1F7;

    /* Positive (legend; distinct from --bomsync-confirm teal until sign-off) */
    --bms-positive: #1E7145;
    --bms-positive-hover: #259556;
    --bms-positive-pressed: #165C37;
    --bms-on-positive: #FFFFFF;
    --bms-positive-hover-grad: linear-gradient(180deg, #3FA86A 0%, #2B8A54 45%, #1E7145 100%);
    --bms-positive-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.35) inset,
        0 2px 8px rgb(30 113 69 / 0.32);
    --bms-positive-selected-ring: rgb(30 113 69 / 0.35);

    /* Caution */
    --bms-caution-bg: #FFF7E6;
    --bms-caution-border: #B7791F;
    --bms-caution-text: #8A5300;
    --bms-caution-hover-bg: #FFE8B8;
    --bms-caution-hover-border: #9A6410;
    --bms-caution-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.55) inset,
        0 2px 8px rgb(183 121 31 / 0.22);
    --bms-caution-pressed-bg: #FFD98A;
    --bms-caution-selected-ring: rgb(183 121 31 / 0.4);

    /* Destructive */
    --bms-danger: #B42318;
    --bms-danger-hover-bg: color-mix(in srgb, #B42318 14%, transparent);
    --bms-on-danger: #FFFFFF;

    /* Shared */
    --bms-focus: var(--btn-primary-bg, #2F6690);
    --bms-disabled-bg: #EEF2F6;
    --bms-disabled-text: #8A9BB0;
    --bms-row-icon: var(--bsx-option, #415A77);

    /* Status chips — light */
    --bms-chip-neutral-fg: #3D4A5C;
    --bms-chip-neutral-bg: #EDF0F4;
    --bms-chip-info-fg: #1F4F75;
    --bms-chip-info-bg: #E6F0F8;
    --bms-chip-warning-fg: #7A4A00;
    --bms-chip-warning-bg: #FFF4DB;
    --bms-chip-success-fg: #1B5E3A;
    --bms-chip-success-bg: #E5F4EC;
    --bms-chip-danger-fg: #9A1C13;
    --bms-chip-danger-bg: #FDECEA;
}

[data-theme="dark"] {
    --bms-primary: #8FB8DE;
    --bms-primary-hover: #A9C9E7;
    --bms-primary-pressed: #7AA6CF;
    --bms-on-primary: #111B2C;
    /* Lighter chrome sheen — same effect language, not a flat fill jump */
    --bms-primary-hover-grad: linear-gradient(135deg, #C5DBF0 0%, #A9C9E7 42%, #8FB8DE 100%);
    --bms-primary-hover-border: rgb(255 255 255 / 0.5);
    --bms-primary-hover-shadow:
        0 2px 10px rgb(143 184 222 / 0.42),
        0 1px 0 rgb(255 255 255 / 0.55) inset;
    --bms-primary-hover-filter: brightness(1.06) saturate(1.05);
    --bms-primary-hover-lift: -1px;

    /* Create / New — brighter cool cyan than Dark Primary */
    --bms-create: #A8D4F0;
    --bms-create-hover: #C5E4F7;
    --bms-create-pressed: #8FC4E4;
    --bms-on-create: #111B2C;
    --bms-create-hover-grad: linear-gradient(135deg, #E2F2FB 0%, #C5E4F7 42%, #A8D4F0 100%);
    --bms-create-hover-border: rgb(255 255 255 / 0.55);
    --bms-create-hover-shadow:
        0 2px 12px rgb(168 212 240 / 0.5),
        0 1px 0 rgb(255 255 255 / 0.6) inset;
    --bms-create-hover-filter: brightness(1.05) saturate(1.06);
    --bms-create-hover-lift: -1px;
    --bms-create-rest-shadow:
        0 1px 0 rgb(255 255 255 / 0.28) inset,
        0 2px 10px rgb(168 212 240 / 0.38);

    --bms-secondary-bg: #1A2638;
    --bms-secondary-border: #6E83A0;
    --bms-secondary-text: #E3EAF2;
    /* Stronger Dark secondary hover — was too faint (#243247) */
    --bms-secondary-hover: #334A66;
    --bms-secondary-hover-border: #9DB4CC;
    --bms-secondary-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.14) inset,
        0 0 0 1px rgb(157 180 204 / 0.28),
        0 2px 10px rgb(0 0 0 / 0.35);

    --bms-ghost-text: #8FB8DE;
    --bms-ghost-hover: #243B58;

    --bms-positive: #6FCF97;
    --bms-positive-hover: #8FDEB0;
    --bms-positive-pressed: #4FB87A;
    --bms-on-positive: #111B2C;
    /* Dark positive: filled glass on hover/select (resting stays outline) */
    --bms-positive-hover-grad: linear-gradient(180deg, rgb(111 207 151 / 0.42) 0%, rgb(111 207 151 / 0.22) 100%);
    --bms-positive-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.2) inset,
        0 0 0 1px rgb(111 207 151 / 0.45),
        0 2px 10px rgb(111 207 151 / 0.28);
    --bms-positive-selected-ring: rgb(111 207 151 / 0.55);

    --bms-caution-bg: transparent;
    --bms-caution-border: #F5C26B;
    --bms-caution-text: #F5C26B;
    --bms-caution-hover-bg: rgb(245 194 107 / 0.22);
    --bms-caution-hover-border: #FFD98A;
    --bms-caution-hover-shadow:
        0 1px 0 rgb(255 255 255 / 0.12) inset,
        0 0 0 1px rgb(245 194 107 / 0.4),
        0 2px 10px rgb(245 194 107 / 0.22);
    --bms-caution-pressed-bg: rgb(245 194 107 / 0.32);
    --bms-caution-selected-ring: rgb(245 194 107 / 0.5);

    --bms-danger: #FF8A80;
    /* Stronger Dark destructive hover wash */
    --bms-danger-hover-bg: rgb(255 138 128 / 0.28);
    --bms-on-danger: #111B2C;

    --bms-focus: #8FB8DE;
    --bms-disabled-bg: #243247;
    --bms-disabled-text: #6E83A0;
    --bms-row-icon: #9DB4CC;

    --bms-chip-neutral-fg: #C9D6E3;
    --bms-chip-neutral-bg: #243247;
    --bms-chip-info-fg: #8FB8DE;
    --bms-chip-info-bg: #1B2D44;
    --bms-chip-warning-fg: #F5C26B;
    --bms-chip-warning-bg: #3A2E14;
    --bms-chip-success-fg: #6FCF97;
    --bms-chip-success-bg: #173326;
    --bms-chip-danger-fg: #FF8A80;
    --bms-chip-danger-bg: #3A1A1A;
}

/* ── Legend intent buttons ─────────────────────────────────────────── */

.e-btn.bms-btn,
button.bms-btn,
a.bms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        color 0.12s ease,
        filter 0.15s ease,
        transform 0.1s ease;
}

.e-btn.bms-btn:focus-visible,
button.bms-btn:focus-visible,
a.bms-btn:focus-visible {
    outline: 2px solid var(--bms-focus);
    outline-offset: 2px;
}

.e-btn.bms-btn:disabled,
button.bms-btn:disabled {
    background: var(--bms-disabled-bg) !important;
    color: var(--bms-disabled-text) !important;
    border-color: transparent !important;
    cursor: not-allowed;
    opacity: 1;
}

.e-btn.bms-btn--primary,
button.bms-btn--primary,
a.bms-btn--primary {
    background: var(--bms-primary);
    color: var(--bms-on-primary);
    border-color: var(--bms-primary);
    box-shadow: none;
}

.e-btn.bms-btn--primary:hover:not(:disabled),
button.bms-btn--primary:hover:not(:disabled),
a.bms-btn--primary:hover {
    background: var(--bms-primary-hover-grad);
    border-color: var(--bms-primary-hover-border);
    color: var(--bms-on-primary);
    box-shadow: var(--bms-primary-hover-shadow);
    filter: var(--bms-primary-hover-filter);
    transform: translateY(var(--bms-primary-hover-lift));
}

.e-btn.bms-btn--primary:active:not(:disabled),
button.bms-btn--primary:active:not(:disabled) {
    background: var(--bms-primary-pressed);
    border-color: var(--bms-primary-pressed);
    box-shadow: 0 1px 4px rgb(47 102 144 / 0.28);
    filter: brightness(1.02);
    transform: translateY(0);
}

[data-theme="dark"] .e-btn.bms-btn--primary:active:not(:disabled),
[data-theme="dark"] button.bms-btn--primary:active:not(:disabled) {
    box-shadow: 0 1px 4px rgb(143 184 222 / 0.28);
}

/* Create / New — brighter Primary sibling for starting work */
.e-btn.bms-btn--create,
button.bms-btn--create,
a.bms-btn--create {
    background: var(--bms-create);
    color: var(--bms-on-create);
    border-color: var(--bms-create);
    box-shadow: var(--bms-create-rest-shadow);
}

.e-btn.bms-btn--create:hover:not(:disabled),
button.bms-btn--create:hover:not(:disabled),
a.bms-btn--create:hover {
    background: var(--bms-create-hover-grad);
    border-color: var(--bms-create-hover-border);
    color: var(--bms-on-create);
    box-shadow: var(--bms-create-hover-shadow);
    filter: var(--bms-create-hover-filter);
    transform: translateY(var(--bms-create-hover-lift));
}

.e-btn.bms-btn--create:active:not(:disabled),
button.bms-btn--create:active:not(:disabled) {
    background: var(--bms-create-pressed);
    border-color: var(--bms-create-pressed);
    box-shadow: 0 1px 4px rgb(58 143 196 / 0.3);
    filter: brightness(1.02);
    transform: translateY(0);
}

[data-theme="dark"] .e-btn.bms-btn--create:active:not(:disabled),
[data-theme="dark"] button.bms-btn--create:active:not(:disabled) {
    box-shadow: 0 1px 4px rgb(168 212 240 / 0.32);
}

.e-btn.bms-btn--secondary,
button.bms-btn--secondary,
a.bms-btn--secondary {
    background: var(--bms-secondary-bg);
    color: var(--bms-secondary-text);
    border-color: var(--bms-secondary-border);
}

.e-btn.bms-btn--secondary:hover:not(:disabled),
button.bms-btn--secondary:hover:not(:disabled),
a.bms-btn--secondary:hover {
    background: var(--bms-secondary-hover);
    border-color: var(--bms-secondary-hover-border);
    color: var(--bms-secondary-text);
    box-shadow: var(--bms-secondary-hover-shadow);
    transform: translateY(-1px);
}

.e-btn.bms-btn--secondary:active:not(:disabled),
button.bms-btn--secondary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(0.96);
}

.e-btn.bms-btn--ghost,
button.bms-btn--ghost,
a.bms-btn--ghost {
    background: transparent;
    color: var(--bms-ghost-text);
    border-color: transparent;
}

.e-btn.bms-btn--ghost:hover:not(:disabled),
button.bms-btn--ghost:hover:not(:disabled),
a.bms-btn--ghost:hover {
    background: var(--bms-ghost-hover);
    color: var(--bms-ghost-text);
}

.e-btn.bms-btn--positive,
button.bms-btn--positive,
a.bms-btn--positive {
    background: var(--bms-positive);
    color: var(--bms-on-positive);
    border-color: var(--bms-positive);
}

/* Dark positive rests with visible fill wash; hover/select intensify */
[data-theme="dark"] .e-btn.bms-btn--positive,
[data-theme="dark"] button.bms-btn--positive,
[data-theme="dark"] a.bms-btn--positive {
    background: rgb(111 207 151 / 0.22);
    color: var(--bms-positive);
    border-color: var(--bms-positive);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.e-btn.bms-btn--positive:hover:not(:disabled),
button.bms-btn--positive:hover:not(:disabled),
a.bms-btn--positive:hover {
    background: var(--bms-positive-hover-grad);
    border-color: var(--bms-positive-hover);
    color: var(--bms-on-positive);
    box-shadow: var(--bms-positive-hover-shadow);
    transform: translateY(-1px);
}

[data-theme="dark"] .e-btn.bms-btn--positive:hover:not(:disabled),
[data-theme="dark"] button.bms-btn--positive:hover:not(:disabled),
[data-theme="dark"] a.bms-btn--positive:hover {
    color: #E8FFF1;
    border-color: var(--bms-positive-hover);
}

.e-btn.bms-btn--positive:active:not(:disabled),
button.bms-btn--positive:active:not(:disabled),
.e-btn.bms-btn--positive.is-selected,
button.bms-btn--positive.is-selected,
a.bms-btn--positive.is-selected {
    background: var(--bms-positive-pressed);
    border-color: var(--bms-positive-pressed);
    color: var(--bms-on-positive);
    box-shadow: 0 0 0 3px var(--bms-positive-selected-ring);
    transform: translateY(0);
}

[data-theme="dark"] .e-btn.bms-btn--positive:active:not(:disabled),
[data-theme="dark"] button.bms-btn--positive:active:not(:disabled),
[data-theme="dark"] .e-btn.bms-btn--positive.is-selected,
[data-theme="dark"] button.bms-btn--positive.is-selected,
[data-theme="dark"] a.bms-btn--positive.is-selected {
    background: rgb(111 207 151 / 0.38);
    border-color: var(--bms-positive-hover);
    color: #E8FFF1;
    box-shadow: 0 0 0 3px var(--bms-positive-selected-ring);
}

.e-btn.bms-btn--caution,
button.bms-btn--caution,
a.bms-btn--caution {
    background: var(--bms-caution-bg);
    color: var(--bms-caution-text);
    border-color: var(--bms-caution-border);
}

.e-btn.bms-btn--caution:hover:not(:disabled),
button.bms-btn--caution:hover:not(:disabled),
a.bms-btn--caution:hover {
    background: var(--bms-caution-hover-bg);
    border-color: var(--bms-caution-hover-border);
    color: var(--bms-caution-text);
    box-shadow: var(--bms-caution-hover-shadow);
    transform: translateY(-1px);
}

.e-btn.bms-btn--caution:active:not(:disabled),
button.bms-btn--caution:active:not(:disabled),
.e-btn.bms-btn--caution.is-selected,
button.bms-btn--caution.is-selected,
a.bms-btn--caution.is-selected {
    background: var(--bms-caution-pressed-bg);
    border-color: var(--bms-caution-hover-border);
    color: var(--bms-caution-text);
    box-shadow: 0 0 0 3px var(--bms-caution-selected-ring);
    transform: translateY(0);
}

.e-btn.bms-btn--danger-ghost,
button.bms-btn--danger-ghost,
a.bms-btn--danger-ghost {
    background: transparent;
    color: var(--bms-danger);
    border-color: transparent;
}

[data-theme="dark"] .e-btn.bms-btn--danger-ghost,
[data-theme="dark"] button.bms-btn--danger-ghost,
[data-theme="dark"] a.bms-btn--danger-ghost {
    /* Decision-pair / footer destructive — resting wash so Dark bg is not invisible */
    background: rgb(255 138 128 / 0.12);
    border-color: rgb(255 138 128 / 0.35);
    color: var(--bms-danger);
}

.e-btn.bms-btn--danger-ghost:hover:not(:disabled),
button.bms-btn--danger-ghost:hover:not(:disabled),
a.bms-btn--danger-ghost:hover {
    background: var(--bms-danger-hover-bg);
    border-color: color-mix(in srgb, var(--bms-danger) 45%, transparent);
    color: var(--bms-danger);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bms-danger) 28%, transparent);
    transform: translateY(-1px);
}

[data-theme="dark"] .e-btn.bms-btn--danger-ghost:hover:not(:disabled),
[data-theme="dark"] button.bms-btn--danger-ghost:hover:not(:disabled),
[data-theme="dark"] a.bms-btn--danger-ghost:hover {
    background: rgb(255 138 128 / 0.32);
    border-color: #FFA8A0;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.1) inset,
        0 0 0 1px rgb(255 138 128 / 0.4),
        0 2px 10px rgb(255 138 128 / 0.22);
}

.e-btn.bms-btn--danger-ghost:active:not(:disabled),
button.bms-btn--danger-ghost:active:not(:disabled) {
    transform: translateY(0);
    background: color-mix(in srgb, var(--bms-danger) 22%, transparent);
}

/* Solid danger — confirm dialogs only */
.e-btn.bms-btn--danger,
button.bms-btn--danger,
a.bms-btn--danger {
    background: var(--bms-danger);
    color: var(--bms-on-danger);
    border-color: var(--bms-danger);
}

.e-btn.bms-btn--danger:hover:not(:disabled),
button.bms-btn--danger:hover:not(:disabled),
a.bms-btn--danger:hover {
    filter: brightness(1.1) saturate(1.05);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bms-danger) 40%, transparent);
    transform: translateY(-1px);
}

.e-btn.bms-btn--disabled,
button.bms-btn--disabled {
    background: var(--bms-disabled-bg);
    color: var(--bms-disabled-text);
    border-color: transparent;
    pointer-events: none;
}

/* Dialog footer — amplify Dark hover on all footer actions */
[data-theme="dark"] .bms-dialog-footer .bms-btn--secondary:hover:not(:disabled),
[data-theme="dark"] .bms-dialog-footer button.bms-btn--secondary:hover:not(:disabled) {
    background: #3A5474;
    border-color: #B4C8DE;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.16) inset,
        0 0 0 1px rgb(180 200 222 / 0.35),
        0 2px 12px rgb(0 0 0 / 0.4);
}

[data-theme="dark"] .bms-dialog-footer .bms-btn--danger-ghost:hover:not(:disabled),
[data-theme="dark"] .bms-dialog-footer button.bms-btn--danger-ghost:hover:not(:disabled) {
    background: rgb(255 138 128 / 0.36);
    border-color: #FFB0A8;
}

[data-theme="dark"] .bms-dialog-footer .bms-btn--primary:hover:not(:disabled),
[data-theme="dark"] .bms-dialog-footer button.bms-btn--primary:hover:not(:disabled) {
    /* Keep approved Dark primary sheen; slightly stronger lift in footer */
    box-shadow:
        0 2px 12px rgb(143 184 222 / 0.5),
        0 1px 0 rgb(255 255 255 / 0.6) inset;
}

/* Decision pair — positive needs fill language; Dark reject wash stronger */
.bms-decision-pair .bms-btn--positive {
    min-width: 6.5rem;
}

.bms-decision-pair .bms-btn--danger-ghost {
    min-width: 6.5rem;
}

[data-theme="dark"] .bms-decision-pair .bms-btn--danger-ghost {
    background: rgb(255 138 128 / 0.22);
    border-color: rgb(255 138 128 / 0.55);
}

[data-theme="dark"] .bms-decision-pair .bms-btn--positive {
    background: rgb(111 207 151 / 0.3);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(111 207 151 / 0.25);
}

/* Grid row icon actions */
.e-btn.bms-row-action,
button.bms-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    background: transparent;
    color: var(--bms-row-icon);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.e-btn.bms-row-action:hover,
button.bms-row-action:hover {
    color: var(--bms-primary);
    background: color-mix(in srgb, var(--bms-primary) 10%, transparent);
}

.e-btn.bms-row-action--danger:hover,
button.bms-row-action--danger:hover {
    color: var(--bms-danger);
    background: color-mix(in srgb, var(--bms-danger) 10%, transparent);
}

.e-btn.bms-row-action > .bi,
button.bms-row-action > .bi,
.e-btn.bms-row-action > i,
button.bms-row-action > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.e-btn.bms-row-action > .bi::before,
button.bms-row-action > .bi::before {
    display: block;
    line-height: 1;
}

/* Dialog footer layout */
.bms-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.bms-dialog-footer .bms-spacer {
    flex: 1 1 auto;
    min-width: 12px;
}

.bms-decision-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Status chips */
.bms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.bms-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.bms-chip--neutral {
    color: var(--bms-chip-neutral-fg);
    background: var(--bms-chip-neutral-bg);
}

.bms-chip--info {
    color: var(--bms-chip-info-fg);
    background: var(--bms-chip-info-bg);
}

.bms-chip--warning {
    color: var(--bms-chip-warning-fg);
    background: var(--bms-chip-warning-bg);
}

.bms-chip--success {
    color: var(--bms-chip-success-fg);
    background: var(--bms-chip-success-bg);
}

.bms-chip--danger {
    color: var(--bms-chip-danger-fg);
    background: var(--bms-chip-danger-bg);
}

/*
 * New-tab navigational action: square-arrow pinned to the top-right corner.
 * Label keeps ≥10px clearance; icon never overlaps text (absolute corner, not inline).
 */
.bms-btn--new-tab,
a.bms-btn--new-tab,
button.bms-btn--new-tab,
.bomsync-hub-hero-action-btn.bms-btn--new-tab {
    position: relative;
    /* Extra end padding so label never underlaps the corner glyph */
    padding-right: 1.65rem;
    padding-inline-end: 1.65rem;
}

.bms-btn--new-tab .bms-btn__label,
a.bms-btn--new-tab .bms-btn__label,
.bomsync-hub-hero-action-btn.bms-btn--new-tab .bms-btn__label {
    display: inline-block;
    /* ≥10px gap between label end and arrow */
    margin-right: 10px;
    margin-inline-end: 10px;
    padding-right: 0;
}

.bms-btn--new-tab .bms-new-tab-icon,
a.bms-btn--new-tab .bms-new-tab-icon,
.bomsync-hub-hero-action-btn.bms-btn--new-tab .bms-new-tab-icon {
    position: absolute;
    top: 3px;
    right: 5px;
    inset-inline-end: 5px;
    inset-block-start: 3px;
    font-size: 0.62rem;
    line-height: 1;
    width: 0.7rem;
    height: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    pointer-events: none;
    margin: 0;
}

html[dir="rtl"] .bms-btn--new-tab .bms-new-tab-icon,
html[dir="rtl"] a.bms-btn--new-tab .bms-new-tab-icon,
html[dir="rtl"] .bomsync-hub-hero-action-btn.bms-btn--new-tab .bms-new-tab-icon {
    right: auto;
    left: 5px;
}

@media (pointer: coarse) {
    .e-btn.bms-btn,
    button.bms-btn,
    a.bms-btn {
        height: 40px;
        min-height: 40px;
        min-width: 44px;
    }

    .e-btn.bms-row-action,
    button.bms-row-action {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}