/* =========================================================
   Market UI v2 — Buttons Component
   Path: public/assets/marketv2/components/buttons/buttons.css

   هذا الملف:
   - طبقة عرض فقط
   - يستهلك button contract القادم من variables.css
   - لا يحتوي theme logic
   - لا يحتوي palette logic
   - لا يحتوي slot mapping
   - لا يحتوي semantic role mapping
   - لا يحتوي action alias mapping
   - لا يحتوي business logic
========================================================= */


/* =========================================================
   1) BASE BUTTON
========================================================= */

.m-btn {
    --btn-bg: var(--m-btn-bg);
    --btn-text: var(--m-btn-text-color);
    --btn-border: var(--m-btn-border-color-current);

    --btn-hover-bg: var(--m-btn-bg-hover);
    --btn-hover-text: var(--m-btn-text-color-hover);
    --btn-hover-border: var(--m-btn-border-color-hover);

    --btn-active-bg: var(--m-btn-bg-active);
    --btn-active-text: var(--m-btn-text-color-active);
    --btn-active-border: var(--m-btn-border-color-active);

    --btn-disabled-bg: var(--m-btn-bg-disabled);
    --btn-disabled-text: var(--m-btn-text-color-disabled);
    --btn-disabled-border: var(--m-btn-border-color-disabled);

    --btn-shadow: var(--m-btn-shadow);
    --btn-shadow-hover: var(--m-btn-shadow-hover);
    --btn-shadow-active: var(--m-btn-shadow-active);
    --btn-shadow-focus: var(--m-btn-shadow-focus);

    --btn-height: var(--m-btn-height-md);
    --btn-padding-x: var(--m-btn-padding-x-md);
    --btn-padding-y-wrap: var(--m-btn-padding-y-wrap-md);
    --btn-font-size: var(--m-btn-font-size-md);
    --btn-font-weight: var(--m-btn-font-weight);
    --btn-line-height: var(--m-btn-line-height);
    --btn-radius: var(--m-btn-radius-md);
    --btn-gap: var(--m-btn-gap-md);
    --btn-spinner-size: var(--m-btn-spinner-size-md);
    --btn-translate-active: var(--m-btn-translate-active);

    position: relative;
    z-index: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);

    min-width: 0;
    max-width: 100%;
    width: auto;
    height: var(--btn-height);
    min-height: var(--btn-height);
    padding-inline: var(--btn-padding-x);

    background: var(--btn-bg);
    color: var(--btn-text);
    border: var(--m-btn-border-width) solid var(--btn-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);

    overflow: hidden;
    isolation: isolate;

    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color var(--m-btn-transition-base),
        color var(--m-btn-transition-base),
        border-color var(--m-btn-transition-base),
        box-shadow var(--m-btn-transition-base),
        opacity var(--m-btn-transition-base),
        transform var(--m-btn-transition-fast);
}

.m-btn,
.m-btn__label,
.m-btn__spinner,
.m-btn__text {
    min-width: 0;
}


/* =========================================================
   2) INTERNAL STRUCTURE
========================================================= */

.m-btn__label {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;

    min-width: 0;
    max-width: 100%;
    color: inherit;
}

.m-btn__text {
    min-width: 0;
    max-width: 100%;
    color: inherit;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: inherit;
}

.m-btn__spinner {
    display: none;
    flex: 0 0 auto;

    width: var(--btn-spinner-size);
    height: var(--btn-spinner-size);

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
}

.m-btn .sr-only,
.m-btn .visually-hidden,
.m-btn__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   3) ICONS
========================================================= */

.m-btn svg,
.m-btn i {
    flex: 0 0 auto;
    color: inherit;
    pointer-events: none;
}

.m-btn svg {
    width: var(--m-btn-icon-size);
    height: var(--m-btn-icon-size);
}


/* =========================================================
   4) HOVER
========================================================= */

@media (hover: hover) {
    .m-btn:hover {
        background: var(--btn-hover-bg);
        color: var(--btn-hover-text);
        border-color: var(--btn-hover-border);
        box-shadow: var(--btn-shadow-hover);
        text-decoration: none;
    }
}


/* =========================================================
   5) ACTIVE PRESS
========================================================= */

.m-btn:active {
    transform: translateY(var(--btn-translate-active));
    box-shadow: var(--btn-shadow-active);
}


/* =========================================================
   6) FOCUS
========================================================= */

.m-btn:focus {
    outline: none;
}

.m-btn:focus-visible {
    outline: none;
    box-shadow: var(--btn-shadow-focus);
}


/* =========================================================
   7) DISABLED
========================================================= */

.m-btn:disabled,
.m-btn.is-disabled,
.m-btn[aria-disabled="true"] {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled-border);
    box-shadow: none;

    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    text-decoration: none;
}


/* =========================================================
   8) INTERACTION STATES
========================================================= */

.m-btn.is-active,
.m-btn.is-selected,
.m-btn[aria-pressed="true"],
.m-btn[aria-expanded="true"],
.m-btn[aria-current="true"] {
    background: var(--btn-active-bg);
    color: var(--btn-active-text);
    border-color: var(--btn-active-border);
    box-shadow: var(--btn-shadow-active);
}

@media (hover: hover) {
    .m-btn.is-active:hover,
    .m-btn.is-selected:hover,
    .m-btn[aria-pressed="true"]:hover,
    .m-btn[aria-expanded="true"]:hover,
    .m-btn[aria-current="true"]:hover {
        background: var(--btn-active-bg);
        color: var(--btn-active-text);
        border-color: var(--btn-active-border);
        box-shadow: var(--btn-shadow-active);
    }
}


/* =========================================================
   9) VISUAL TYPES
========================================================= */

.m-btn-solid {
    --btn-bg: var(--m-btn-solid-bg);
    --btn-text: var(--m-btn-solid-text);
    --btn-border: var(--m-btn-solid-border);

    --btn-hover-bg: var(--m-btn-solid-bg-hover);
    --btn-hover-text: var(--m-btn-solid-text-hover);
    --btn-hover-border: var(--m-btn-solid-border-hover);

    --btn-active-bg: var(--m-btn-solid-bg-active);
    --btn-active-text: var(--m-btn-solid-text-active);
    --btn-active-border: var(--m-btn-solid-border-active);

    --btn-disabled-bg: var(--m-btn-solid-bg-disabled);
    --btn-disabled-text: var(--m-btn-solid-text-disabled);
    --btn-disabled-border: var(--m-btn-solid-border-disabled);
}

.m-btn-outline {
    --btn-bg: var(--m-btn-outline-bg);
    --btn-text: var(--m-btn-outline-text);
    --btn-border: var(--m-btn-outline-border);

    --btn-hover-bg: var(--m-btn-outline-bg-hover);
    --btn-hover-text: var(--m-btn-outline-text-hover);
    --btn-hover-border: var(--m-btn-outline-border-hover);

    --btn-active-bg: var(--m-btn-outline-bg-active);
    --btn-active-text: var(--m-btn-outline-text-active);
    --btn-active-border: var(--m-btn-outline-border-active);

    --btn-disabled-bg: var(--m-btn-outline-bg-disabled);
    --btn-disabled-text: var(--m-btn-outline-text-disabled);
    --btn-disabled-border: var(--m-btn-outline-border-disabled);
}

.m-btn-ghost {
    --btn-bg: var(--m-btn-ghost-bg);
    --btn-text: var(--m-btn-ghost-text);
    --btn-border: var(--m-btn-ghost-border);

    --btn-hover-bg: var(--m-btn-ghost-bg-hover);
    --btn-hover-text: var(--m-btn-ghost-text-hover);
    --btn-hover-border: var(--m-btn-ghost-border-hover);

    --btn-active-bg: var(--m-btn-ghost-bg-active);
    --btn-active-text: var(--m-btn-ghost-text-active);
    --btn-active-border: var(--m-btn-ghost-border-active);

    --btn-disabled-bg: var(--m-btn-ghost-bg-disabled);
    --btn-disabled-text: var(--m-btn-ghost-text-disabled);
    --btn-disabled-border: var(--m-btn-ghost-border-disabled);
}

.m-btn-soft {
    --btn-bg: var(--m-btn-soft-bg);
    --btn-text: var(--m-btn-soft-text);
    --btn-border: var(--m-btn-soft-border);

    --btn-hover-bg: var(--m-btn-soft-bg-hover);
    --btn-hover-text: var(--m-btn-soft-text-hover);
    --btn-hover-border: var(--m-btn-soft-border-hover);

    --btn-active-bg: var(--m-btn-soft-bg-active);
    --btn-active-text: var(--m-btn-soft-text-active);
    --btn-active-border: var(--m-btn-soft-border-active);

    --btn-disabled-bg: var(--m-btn-soft-bg-disabled);
    --btn-disabled-text: var(--m-btn-soft-text-disabled);
    --btn-disabled-border: var(--m-btn-soft-border-disabled);
}

.m-btn-link {
    --btn-bg: var(--m-btn-link-bg);
    --btn-text: var(--m-btn-link-text);
    --btn-border: var(--m-btn-link-border);

    --btn-hover-bg: var(--m-btn-link-bg-hover);
    --btn-hover-text: var(--m-btn-link-text-hover);
    --btn-hover-border: var(--m-btn-link-border-hover);

    --btn-active-bg: var(--m-btn-link-bg-active);
    --btn-active-text: var(--m-btn-link-text-active);
    --btn-active-border: var(--m-btn-link-border-active);

    --btn-disabled-bg: var(--m-btn-link-bg-disabled);
    --btn-disabled-text: var(--m-btn-link-text-disabled);
    --btn-disabled-border: var(--m-btn-link-border-disabled);

    height: auto;
    min-height: 0;
    padding-inline: 0;

    border-width: 0;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
}

.m-btn-link,
.m-btn-link:hover,
.m-btn-link:focus-visible {
    text-decoration: none;
}

@media (hover: hover) {
    .m-btn-link:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}


/* =========================================================
   10) SIZES
========================================================= */

.m-btn-sm {
    --btn-height: var(--m-btn-height-sm);
    --btn-padding-x: var(--m-btn-padding-x-sm);
    --btn-font-size: var(--m-btn-font-size-sm);
    --btn-radius: var(--m-btn-radius-sm);
    --btn-spinner-size: var(--m-btn-spinner-size-sm);
    --btn-gap: var(--m-btn-gap-sm);
}

.m-btn-md {
    --btn-height: var(--m-btn-height-md);
    --btn-padding-x: var(--m-btn-padding-x-md);
    --btn-font-size: var(--m-btn-font-size-md);
    --btn-radius: var(--m-btn-radius-md);
    --btn-spinner-size: var(--m-btn-spinner-size-md);
    --btn-gap: var(--m-btn-gap-md);
}

.m-btn-lg {
    --btn-height: var(--m-btn-height-lg);
    --btn-padding-x: var(--m-btn-padding-x-lg);
    --btn-font-size: var(--m-btn-font-size-lg);
    --btn-radius: var(--m-btn-radius-lg);
    --btn-spinner-size: var(--m-btn-spinner-size-lg);
    --btn-gap: var(--m-btn-gap-lg);
}


/* =========================================================
   11) SHAPES
========================================================= */

.m-btn-pill {
    --btn-radius: var(--m-btn-radius-pill);
}

.m-btn-square {
    --btn-radius: var(--m-btn-radius-square);
}


/* =========================================================
   12) MODES
========================================================= */

.m-btn-block {
    display: inline-flex;
    width: 100%;
}

.m-btn-icon {
    width: var(--btn-height);
    min-width: var(--btn-height);
    padding-inline: 0;
    gap: 0;

    flex: 0 0 auto;
}

.m-btn-icon .m-btn__label {
    gap: 0;
}

.m-btn-icon .m-btn__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.m-btn-icon .m-btn__text > i,
.m-btn-icon .m-btn__text > svg {
    margin: 0;
}

.m-btn-nowrap {
    white-space: nowrap;
}

.m-btn-wrap {
    white-space: normal;
    line-height: var(--m-btn-line-height-wrap);
    height: auto;
    min-height: var(--btn-height);
    padding-block: var(--btn-padding-y-wrap);
}

.m-btn-wrap .m-btn__text {
    white-space: normal;
}

.m-btn-compact {
    --btn-padding-x: 10px;
    --btn-gap: 6px;
}


/* =========================================================
   13) LOADING
========================================================= */

.m-btn.is-loading,
.m-btn[aria-busy="true"] {
    pointer-events: none;
}

.m-btn.is-loading .m-btn__spinner,
.m-btn[aria-busy="true"] .m-btn__spinner {
    display: inline-flex;
    animation: m-btn-spin 0.6s linear infinite;
}

.m-btn.is-loading .m-btn__label,
.m-btn[aria-busy="true"] .m-btn__label {
    opacity: 0.92;
}

@keyframes m-btn-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   14) SPECIAL STATES
========================================================= */

.m-btn.is-success {
    --btn-bg: var(--m-btn-state-success-bg);
    --btn-text: var(--m-btn-state-success-text);
    --btn-border: var(--m-btn-state-success-border);

    --btn-hover-bg: var(--m-btn-state-success-bg);
    --btn-hover-text: var(--m-btn-state-success-text);
    --btn-hover-border: var(--m-btn-state-success-border);

    --btn-active-bg: var(--m-btn-state-success-bg);
    --btn-active-text: var(--m-btn-state-success-text);
    --btn-active-border: var(--m-btn-state-success-border);
}

.m-btn.is-error {
    --btn-bg: var(--m-btn-state-error-bg);
    --btn-text: var(--m-btn-state-error-text);
    --btn-border: var(--m-btn-state-error-border);

    --btn-hover-bg: var(--m-btn-state-error-bg);
    --btn-hover-text: var(--m-btn-state-error-text);
    --btn-hover-border: var(--m-btn-state-error-border);

    --btn-active-bg: var(--m-btn-state-error-bg);
    --btn-active-text: var(--m-btn-state-error-text);
    --btn-active-border: var(--m-btn-state-error-border);
}


/* =========================================================
   15) CHOICE BUTTONS
========================================================= */

.m-btn-choice {
    --btn-bg: var(--m-btn-choice-bg);
    --btn-text: var(--m-btn-choice-text);
    --btn-border: var(--m-btn-choice-border);

    --btn-hover-bg: var(--m-btn-choice-bg-hover);
    --btn-hover-text: var(--m-btn-choice-text-hover);
    --btn-hover-border: var(--m-btn-choice-border-hover);

    --btn-active-bg: var(--m-btn-choice-bg-selected);
    --btn-active-text: var(--m-btn-choice-text-selected);
    --btn-active-border: var(--m-btn-choice-border-selected);
}


/* =========================================================
   16) TABLE ACTION HELPERS
========================================================= */

.m-btn-table-action {
    --btn-height: var(--m-btn-table-action-height);
    --btn-padding-x: var(--m-btn-table-action-padding-x);
    --btn-font-size: var(--m-btn-table-action-font-size);
    --btn-radius: var(--m-btn-table-action-radius);
    --btn-spinner-size: var(--m-btn-table-action-spinner-size);
    --btn-gap: var(--m-btn-table-action-gap);
}

.m-btn-table-action.m-btn-icon {
    width: var(--m-btn-table-action-height);
    min-width: var(--m-btn-table-action-height);
}

.m-btn-table-action-group {
    display: inline-flex;
    align-items: center;
    gap: var(--m-btn-table-action-group-gap);
    flex-wrap: wrap;
    min-width: 0;
}

.m-btn-table-action-group.is-compact {
    gap: var(--m-btn-table-action-group-gap-compact);
}


/* =========================================================
   17) MENU TRIGGER LOOK
========================================================= */

.m-btn-menu.m-btn-icon,
.m-btn-action-trigger.m-btn-icon {
    --btn-radius: 8px;
}


/* =========================================================
   18) ICON SIZE HELPERS
========================================================= */

.m-btn-icon.m-btn-sm {
    width: var(--m-btn-icon-only-size-sm);
    min-width: var(--m-btn-icon-only-size-sm);
}

.m-btn-icon.m-btn-md {
    width: var(--m-btn-icon-only-size-md);
    min-width: var(--m-btn-icon-only-size-md);
}

.m-btn-icon.m-btn-lg {
    width: var(--m-btn-icon-only-size-lg);
    min-width: var(--m-btn-icon-only-size-lg);
}


/* =========================================================
   19) RESPONSIVE
========================================================= */

@media (max-width: 575.98px) {
    .m-btn {
        min-height: max(var(--btn-height), 2.75rem);
    }

    .m-btn-lg {
        --btn-height: var(--m-button-height-lg);
        --btn-padding-x: var(--m-button-padding-x-lg);
    }

    .m-btn-wrap {
        width: 100%;
    }

    .m-btn-table-action-group {
        width: 100%;
    }
}


/* =========================================================
   20) ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .m-btn,
    .m-btn__spinner {
        transition: none !important;
        animation: none !important;
    }

    .m-btn:active {
        transform: none;
    }
}

/* =========================================================
   15.1) PALETTE / SEMANTIC ACCENT BRIDGE
========================================================= */

.m-btn-c1,
.m-btn-primary,
.m-btn-action {
    --m-btn-accent-color: var(--m-color-c1);
    --m-btn-accent-color-hover: var(--m-color-c1-hover);
    --m-btn-accent-color-active: var(--m-color-c1-active);
    --m-btn-accent-soft: var(--m-color-c1-soft);
    --m-btn-accent-soft-strong: var(--m-color-c1-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c1-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c2,
.m-btn-info,
.m-btn-view {
    --m-btn-accent-color: var(--m-color-c2);
    --m-btn-accent-color-hover: var(--m-color-c2-hover);
    --m-btn-accent-color-active: var(--m-color-c2-active);
    --m-btn-accent-soft: var(--m-color-c2-soft);
    --m-btn-accent-soft-strong: var(--m-color-c2-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c2-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c3,
.m-btn-warning {
    --m-btn-accent-color: var(--m-color-c3);
    --m-btn-accent-color-hover: var(--m-color-c3-hover);
    --m-btn-accent-color-active: var(--m-color-c3-active);
    --m-btn-accent-soft: var(--m-color-c3-soft);
    --m-btn-accent-soft-strong: var(--m-color-c3-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c3-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c4,
.m-btn-danger,
.m-btn-delete {
    --m-btn-accent-color: var(--m-color-c4);
    --m-btn-accent-color-hover: var(--m-color-c4-hover);
    --m-btn-accent-color-active: var(--m-color-c4-active);
    --m-btn-accent-soft: var(--m-color-c4-soft);
    --m-btn-accent-soft-strong: var(--m-color-c4-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c4-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c5,
.m-btn-success,
.m-btn-run {
    --m-btn-accent-color: var(--m-color-c5);
    --m-btn-accent-color-hover: var(--m-color-c5-hover);
    --m-btn-accent-color-active: var(--m-color-c5-active);
    --m-btn-accent-soft: var(--m-color-c5-soft);
    --m-btn-accent-soft-strong: var(--m-color-c5-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c5-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c6,
.m-btn-copy {
    --m-btn-accent-color: var(--m-color-c6);
    --m-btn-accent-color-hover: var(--m-color-c6-hover);
    --m-btn-accent-color-active: var(--m-color-c6-active);
    --m-btn-accent-soft: var(--m-color-c6-soft);
    --m-btn-accent-soft-strong: var(--m-color-c6-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c6-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c7 {
    --m-btn-accent-color: var(--m-color-c7);
    --m-btn-accent-color-hover: var(--m-color-c7-hover);
    --m-btn-accent-color-active: var(--m-color-c7-active);
    --m-btn-accent-soft: var(--m-color-c7-soft);
    --m-btn-accent-soft-strong: var(--m-color-c7-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c7-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c8,
.m-btn-edit {
    --m-btn-accent-color: var(--m-color-c8);
    --m-btn-accent-color-hover: var(--m-color-c8-hover);
    --m-btn-accent-color-active: var(--m-color-c8-active);
    --m-btn-accent-soft: var(--m-color-c8-soft);
    --m-btn-accent-soft-strong: var(--m-color-c8-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c8-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c9 {
    --m-btn-accent-color: var(--m-color-c9);
    --m-btn-accent-color-hover: var(--m-color-c9-hover);
    --m-btn-accent-color-active: var(--m-color-c9-active);
    --m-btn-accent-soft: var(--m-color-c9-soft);
    --m-btn-accent-soft-strong: var(--m-color-c9-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c9-text-inverse, var(--m-btn-text-inverse));
}

.m-btn-c10,
.m-btn-secondary,
.m-btn-neutral,
.m-btn-cancel,
.m-btn-menu {
    --m-btn-accent-color: var(--m-color-c10);
    --m-btn-accent-color-hover: var(--m-color-c10-hover);
    --m-btn-accent-color-active: var(--m-color-c10-active);
    --m-btn-accent-soft: var(--m-color-c10-soft);
    --m-btn-accent-soft-strong: var(--m-color-c10-soft-strong);
    --m-btn-accent-text-inverse: var(--m-color-c10-text-inverse, var(--m-btn-text-inverse));
}

/* =========================================================
   15.2) SOLID CONTRAST GUARD
========================================================= */

.m-btn.m-btn-solid {
    color: var(--btn-text);
}

@media (hover: hover) {
    .m-btn.m-btn-solid:hover {
        color: var(--btn-hover-text);
    }
}

.m-btn.m-btn-solid.is-active,
.m-btn.m-btn-solid.is-selected,
.m-btn.m-btn-solid[aria-pressed="true"],
.m-btn.m-btn-solid[aria-expanded="true"],
.m-btn.m-btn-solid[aria-current="true"] {
    color: var(--btn-active-text);
}

.m-btn.m-btn-solid > .m-btn__label,
.m-btn.m-btn-solid .m-btn__text,
.m-btn.m-btn-solid i,
.m-btn.m-btn-solid svg {
    color: inherit;
}