/* MotorDex semantic action controls. Keep these modifiers tied to intent,
   not to a specific module or workflow. */
.motordex-shell .mdx-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--mdx-control-min-height);
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--mdx-radius-sm);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.motordex-shell .mdx-action--sm { min-height: 2rem; padding: 0.3rem 0.55rem; font-size: 0.8125rem; }
.motordex-shell .mdx-action:hover:not(:disabled),
.motordex-shell .mdx-action:focus-visible { transform: translateY(-1px); box-shadow: var(--mdx-shadow-sm); }
.motordex-shell .mdx-action:focus-visible { outline: 0; box-shadow: var(--mdx-focus-ring), var(--mdx-shadow-sm); }
.motordex-shell .mdx-action:disabled,
.motordex-shell .mdx-action[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; transform: none; }
.motordex-shell .mdx-action.is-loading { pointer-events: none; }
.motordex-shell .mdx-action.is-loading .mdx-action__label::before {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.35rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    vertical-align: -0.08em;
    animation: mdx-action-spin 0.7s linear infinite;
}

.motordex-shell .mdx-action--edit { color: #fff; background: var(--mdx-color-navy); border-color: var(--mdx-color-navy); }
.motordex-shell .mdx-action--create { color: #fff; background: var(--mdx-color-blue); border-color: var(--mdx-color-blue); }
.motordex-shell .mdx-action--generate { color: #fff; background: var(--mdx-color-blue); border-color: var(--mdx-color-blue); }
.motordex-shell .mdx-action--capture { color: #3c2a00; background: var(--mdx-color-amber); border-color: var(--mdx-color-amber); }
.motordex-shell .mdx-action--invoice,
.motordex-shell .mdx-action--completed { color: #fff; background: var(--mdx-color-success); border-color: var(--mdx-color-success); }
.motordex-shell .mdx-action--delete { color: #fff; background: var(--mdx-color-danger); border-color: var(--mdx-color-danger); }
.motordex-shell .mdx-action--view { color: #fff; background: var(--mdx-color-navy); border-color: var(--mdx-color-navy); }
.motordex-shell .mdx-action--archive,
.motordex-shell .mdx-action--neutral { color: var(--mdx-color-text); background: #fff; border-color: var(--mdx-color-border); }
.motordex-shell .mdx-action--whatsapp { color: #fff; background: #128c7e; border-color: #128c7e; }
.motordex-shell .mdx-action--email { color: var(--mdx-color-text); background: #fff; border-color: var(--mdx-color-border); }
.motordex-shell .mdx-action--pdf { color: #fff; background: var(--mdx-color-navy); border-color: var(--mdx-color-navy); }
.motordex-shell .mdx-action--overflow { color: var(--mdx-color-navy); background: #fff; border-color: var(--mdx-color-border); }

/*
   Compatibility bridge for the existing MVC surface. Most workflows still
   render Bootstrap .btn markup because their event/data contracts live in
   feature-specific views and TypeScript. Standalone actions share the MotorDex
   shape, focus treatment and semantic Bootstrap colour mapping, while embedded
   input-group controls retain their original Bootstrap field styling.
   New work should use <mdx-action>.
*/
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--mdx-control-min-height);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--mdx-btn-border, var(--mdx-color-border));
    border-radius: var(--mdx-radius-sm);
    color: var(--mdx-btn-text, var(--mdx-color-text));
    background-color: var(--mdx-btn-bg, #fff);
    background-image: none;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *):hover:not(:disabled),
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *):focus-visible {
    color: var(--mdx-btn-hover-text, var(--mdx-btn-text, var(--mdx-color-text)));
    background-color: var(--mdx-btn-hover-bg, var(--mdx-btn-bg, #fff));
    border-color: var(--mdx-btn-hover-border, var(--mdx-btn-border, var(--mdx-color-border)));
    transform: translateY(-1px);
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *):focus-visible {
    outline: 0;
    box-shadow: var(--mdx-focus-ring), var(--mdx-shadow-sm);
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *):disabled,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-sm {
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.8125rem;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *) > .bi:first-child {
    flex: 0 0 auto;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-primary,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-primary,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-dark,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-dark {
    --mdx-btn-text: #fff;
    --mdx-btn-bg: var(--mdx-color-navy);
    --mdx-btn-border: var(--mdx-color-navy);
    --mdx-btn-hover-text: #fff;
    --mdx-btn-hover-bg: #0b1d36;
    --mdx-btn-hover-border: #0b1d36;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-info,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-info {
    --mdx-btn-text: #fff;
    --mdx-btn-bg: var(--mdx-color-blue);
    --mdx-btn-border: var(--mdx-color-blue);
    --mdx-btn-hover-text: #fff;
    --mdx-btn-hover-bg: #155bbb;
    --mdx-btn-hover-border: #155bbb;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-success,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-success {
    --mdx-btn-text: #fff;
    --mdx-btn-bg: var(--mdx-color-success);
    --mdx-btn-border: var(--mdx-color-success);
    --mdx-btn-hover-text: #fff;
    --mdx-btn-hover-bg: #137a45;
    --mdx-btn-hover-border: #137a45;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-warning,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-warning {
    --mdx-btn-text: #3c2a00;
    --mdx-btn-bg: var(--mdx-color-amber);
    --mdx-btn-border: var(--mdx-color-amber);
    --mdx-btn-hover-text: #3c2a00;
    --mdx-btn-hover-bg: #d99a18;
    --mdx-btn-hover-border: #d99a18;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-danger,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-danger {
    --mdx-btn-text: #fff;
    --mdx-btn-bg: var(--mdx-color-danger);
    --mdx-btn-border: var(--mdx-color-danger);
    --mdx-btn-hover-text: #fff;
    --mdx-btn-hover-bg: #921f16;
    --mdx-btn-hover-border: #921f16;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-secondary,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-secondary,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-light,
.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-outline-light {
    --mdx-btn-text: var(--mdx-color-text);
    --mdx-btn-bg: #fff;
    --mdx-btn-border: var(--mdx-color-border);
    --mdx-btn-hover-text: var(--mdx-color-navy);
    --mdx-btn-hover-bg: #f4f7fb;
    --mdx-btn-hover-border: #b8c5d4;
}

.motordex-shell :is(a.btn:not(.btn-link), button.btn, input.btn):not(.input-group *).btn-link {
    min-height: auto;
    padding: 0.25rem 0.35rem;
    border-color: transparent;
    background: transparent;
    color: var(--mdx-color-blue);
    font-weight: 600;
}

.motordex-shell .mdx-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mdx-space-2);
    position: relative;
}

/* A compact Bootstrap-style action group: one shared control, no gaps, and
   only the outside corners rounded. Individual actions retain their semantic
   colour while the group reads as one deliberate toolbar in dense tables. */
.motordex-shell .mdx-action-group--inline {
    gap: 0;
    flex-wrap: nowrap;
    vertical-align: middle;
}

.motordex-shell .mdx-action-group--inline > .mdx-action {
    position: relative;
    z-index: 0;
    border-radius: 0;
    margin-inline-start: -1px;
}

.motordex-shell .mdx-action-group--inline > form {
    display: contents;
}

.motordex-shell .mdx-action-group--inline > form > .mdx-action {
    position: relative;
    z-index: 0;
    border-radius: 0;
    margin-inline-start: -1px;
}

.motordex-shell .mdx-action-group--inline > .mdx-action:first-child {
    margin-inline-start: 0;
    border-top-left-radius: var(--mdx-radius-sm);
    border-bottom-left-radius: var(--mdx-radius-sm);
}

.motordex-shell .mdx-action-group--inline > .mdx-action:last-child {
    border-top-right-radius: var(--mdx-radius-sm);
    border-bottom-right-radius: var(--mdx-radius-sm);
}

.motordex-shell .mdx-action-group--inline > form:last-child > .mdx-action {
    border-top-right-radius: var(--mdx-radius-sm);
    border-bottom-right-radius: var(--mdx-radius-sm);
}

.motordex-shell .mdx-action-group--inline > .mdx-action:hover:not(:disabled),
.motordex-shell .mdx-action-group--inline > .mdx-action:focus-visible {
    z-index: 1;
}

.motordex-shell .mdx-action-group [data-mdx-action-overflow] { display: none; }

@keyframes mdx-action-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    .motordex-shell .mdx-action-group[data-mdx-action-group] { width: 100%; justify-content: flex-end; }
    .motordex-shell .mdx-action-group--inline[data-mdx-action-group] {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }
    .motordex-shell .mdx-action-group--inline[data-mdx-action-group] > .mdx-action { flex: 0 0 auto; }
    .motordex-shell .mdx-action-group[data-mdx-action-group] [data-mdx-action-overflow] { display: inline-flex; }
    .motordex-shell .mdx-action-group[data-mdx-action-group] [data-mdx-action-secondary] { display: none; }
    .motordex-shell .mdx-action-group[data-mdx-action-group].is-open [data-mdx-action-secondary] { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    .motordex-shell .mdx-action,
    .motordex-shell .mdx-action.is-loading .mdx-action__label::before { animation: none; transition: none; }
}