/**
 * ============================================================================
 * MUAADH ACTION — Button component family
 * ============================================================================
 *
 * Base button component (60 rules) extracted from muaadh-core.css in
 * Phase 3 Wave 6 (2026-05-13).
 *
 * Owns:
 *   - .muaadh-action (base) + hover/focus/disabled/active states
 *   - Variants: --primary, --secondary, --success, --warning, --danger,
 *               --info, --outline, --ghost, --link, --reset
 *   - Sizes: --sm, --lg, --xl, --full-width, --icon-only, --compact
 *   - Groups: .muaadh-action-group, .muaadh-action-group--compact
 *   - Loading/disabled state coordination
 *
 * NOT included (kept in core.css — context-specific overrides):
 *   - lines 1618-1630: .X .muaadh-action overrides inside checkout flows
 *   - lines 1858-1871: .muaadh-action inside catalog filter dialogs
 *   - lines 2065-2067: .muaadh-action inside mobile compact groups
 *   - line 2348:       .muaadh-action--full-width responsive override
 *
 * Those 9 contextual overrides target the same component but only fire
 * inside specific parent scopes; relocating them would break selector
 * specificity. They live with their owning component blocks in core.css.
 *
 * Loaded on every page via shell layouts.
 * ============================================================================
 */

/* ============================================================================
   SECTION 2: BASE BUTTON COMPONENT
   ============================================================================ */

/* duplicate base .muaadh-action block removed (audit #1) — kept at L1580 (cascade winner) */
.muaadh-action:hover {
    text-decoration: none;
}
.muaadh-action:focus,
.muaadh-action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.muaadh-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}
/* ----- Button Variants ----- */
/* Primary - Main action */
.muaadh-action--primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--theme-text-white);
    box-shadow: var(--shadow-primary);
}
.muaadh-action--primary:hover {
    box-shadow: var(--shadow-primary);
    filter: brightness(1.1);
    color: var(--theme-text-white);
}
.muaadh-action--primary:active {
    filter: brightness(0.95);
}
/* Secondary */
.muaadh-action--secondary {
    background: var(--gradient-secondary);
    border-color: transparent;
    color: var(--theme-text-white);
    box-shadow: var(--shadow-secondary);
}
.muaadh-action--secondary:hover {
    filter: brightness(1.1);
    color: var(--theme-text-white);
}
/* Danger - Destructive actions (Delete, Remove) */
.muaadh-action--danger {
    background: var(--gradient-danger);
    border-color: transparent;
    color: var(--theme-text-white);
    box-shadow: var(--shadow-danger);
}
.muaadh-action--danger:hover {
    filter: brightness(1.1);
    color: var(--theme-text-white);
}
/* Success - Positive actions (Approve, Complete) */
.muaadh-action--success {
    background: var(--gradient-success);
    border-color: transparent;
    color: var(--theme-text-white);
    box-shadow: var(--shadow-success);
}
.muaadh-action--success:hover {
    filter: brightness(1.1);
    color: var(--theme-text-white);
}
/* Warning - Caution actions */
.muaadh-action--warning {
    background: var(--gradient-warning);
    border-color: transparent;
    color: var(--theme-text-white);
    box-shadow: var(--shadow-warning);
}
.muaadh-action--warning:hover {
    filter: brightness(1.1);
    color: var(--theme-text-white);
}
/* Info */
.muaadh-action--info {
    background: var(--gradient-info);
    border-color: transparent;
    color: var(--theme-text-white);
    box-shadow: var(--shadow-info);
}
.muaadh-action--info:hover {
    filter: brightness(1.1);
    color: var(--theme-text-white);
}
/* Dark - Dark background for secondary actions */
.muaadh-action--dark {
    background-color: var(--surface-inverse);
    border-color: transparent;
    color: var(--text-on-dark);
}
.muaadh-action--dark:hover {
    filter: brightness(1.3);
    color: var(--text-on-dark);
}
/* Ghost - Transparent background */
/* Link - Looks like a link */
/* Light - Soft background for subtle actions */
.muaadh-action--light {
    background-color: var(--surface-elevated);
    border-color: var(--border-default);
    color: var(--text-body);
}
.muaadh-action--light:hover {
    background-color: var(--border-default);
    color: var(--text-body);
}
/* Text - No background, no border, just text */
.muaadh-action--text {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-body);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}
.muaadh-action--text:hover {
    background-color: var(--surface-elevated);
}
/* ----- Outline Variants ----- */
.muaadh-action--outline {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-body);
}
.muaadh-action--outline:hover {
    background-color: var(--surface-elevated);
    border-color: var(--border-strong);
}
/* Ghost variant — borderless, transparent bg.
   Promoted from frontend.css where it was the sole non-conflict rule
   in PRIMITIVE 7. Per owner directive 2026-05-07 (one truth, no layers). */
.muaadh-action--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}
.muaadh-action--ghost:hover { background: var(--surface-elevated); }

.muaadh-action--outline-primary {
    background-color: transparent;
    border-color: var(--action-primary);
    color: var(--action-primary);
}
.muaadh-action--outline-primary:hover {
    background-color: var(--action-primary);
    color: var(--text-inverse);
}
.muaadh-action--outline-secondary {
    background-color: transparent;
    border-color: var(--action-secondary);
    color: var(--action-secondary);
}
.muaadh-action--outline-secondary:hover {
    background-color: var(--action-secondary);
    color: var(--text-inverse);
}
.muaadh-action--outline-danger {
    background-color: transparent;
    border-color: var(--action-danger);
    color: var(--action-danger);
}
.muaadh-action--outline-danger:hover {
    background-color: var(--action-danger);
    color: var(--text-inverse);
}
.muaadh-action--outline-success {
    background-color: transparent;
    border-color: var(--action-success);
    color: var(--action-success);
}
.muaadh-action--outline-success:hover {
    background-color: var(--action-success);
    color: var(--text-inverse);
}
.muaadh-action--outline-warning {
    background-color: transparent;
    border-color: var(--action-warning);
    color: var(--action-warning);
}
.muaadh-action--outline-warning:hover {
    background-color: var(--action-warning);
    color: var(--text-inverse);
}
.muaadh-action--outline-info {
    background-color: transparent;
    border-color: var(--action-info);
    color: var(--action-info);
}
.muaadh-action--outline-info:hover {
    background-color: var(--action-info);
    color: var(--text-inverse);
}
.muaadh-action--outline-dark {
    background-color: transparent;
    border-color: var(--surface-inverse);
    color: var(--surface-inverse);
}
.muaadh-action--outline-dark:hover {
    background-color: var(--surface-inverse);
    color: var(--text-on-dark);
}
/* ----- Button Sizes ----- */
.muaadh-action--sm {
    min-height: var(--size-control-sm);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
}
.muaadh-action--md {
    min-height: var(--size-control-md);
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
}
.muaadh-action--lg {
    min-height: var(--size-control-xl);
    padding: 0 var(--space-6);
    font-size: var(--text-base);
}
/* ----- Button Modifiers ----- */
.muaadh-action--block {
    display: flex;
    width: 100%;
}
.muaadh-action--icon {
    width: var(--size-control-lg);
    padding: 0;
}
.muaadh-action--icon.muaadh-action--sm { width: 32px; }
.muaadh-action--icon.muaadh-action--lg { width: 48px; }
/* ============================================================================
   B51 — PROFESSIONAL BUTTON SYSTEM (Unified & Semantic)
   ============================================================================

   BUTTON CATEGORIES:
   ------------------
   1. PRIMARY    ——€آ ' Main actions (Buy, Add to Cart, Continue, Submit)
   2. SECONDARY  ——€آ ' Secondary actions (Back, Cancel, Close)
   3. SUCCESS    ——€آ ' Positive actions (Save, Confirm, Complete, Approve)
   4. DANGER     ——€آ ' Destructive actions (Delete, Remove, Reject)
   5. WARNING    ——€آ ' Caution actions (Warning, Pending, Wait)
   6. INFO       ——€آ ' Informational actions (Details, View, Info)
   7. OUTLINE    ——€آ ' Light alternative buttons
   8. GHOST      ——€آ ' Minimal buttons (text-only style)
   9. LINK       ——€آ ' Link-style buttons

   ============================================================================ */
/* ========== BASE BUTTON STYLES ========== */
.muaadh-action,
[class*="btn-"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--theme-font-primary);
    font-weight: var(--theme-font-medium);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: var(--chassis-border-normal) solid transparent;
    border-radius: var(--chassis-radius-btn);
    transition: all 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
}
.muaadh-action:focus,
[class*="btn-"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.25);
}
.muaadh-action:disabled,
[class*="btn-"]:disabled,
.muaadh-action.disabled,
[class*="btn-"].disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* ========== BUTTON SIZES ========== */
.muaadh-action--expanded {
    height: var(--size-control-xl);
    padding: var(--space-3) 28px;
    font-size: var(--text-base);
    border-radius: var(--chassis-radius);
}
/* ========== 11. ICON BUTTONS ========== */
/* ========== 12. BUTTON GROUPS ========== */
.muaadh-action-group {
    display: inline-flex;
    gap: 0;
    position: relative;
    vertical-align: middle;
}
.muaadh-action-group .muaadh-action,
.muaadh-action-group [class*="btn-"] {
    border-radius: 0;
}
.muaadh-action-group .muaadh-action:first-child,
.muaadh-action-group [class*="btn-"]:first-child {
    border-radius: var(--chassis-radius) 0 0 var(--chassis-radius);
}
.muaadh-action-group .muaadh-action:last-child,
.muaadh-action-group [class*="btn-"]:last-child {
    border-radius: 0 var(--chassis-radius) var(--chassis-radius) 0;
}

/* ============================================================================
 * SECTION: ACTION EXTRAS (moved from muaadh-core.css in Phase 13 Wave 2
 *           2026-05-13 — single-source-of-truth enforcement)
 * ============================================================================ */

/* Close Button */
.muaadh-action--close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: var(--text-primary);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--radius-sm);
    opacity: 0.5;
    cursor: pointer;
}
.muaadh-action--close:hover {
    opacity: 0.75;
}

/* Button Group Descendants */
.muaadh-action-group > .muaadh-action {
    position: relative;
    flex: 1 1 auto;
}
.muaadh-action-group > .muaadh-action:not(:first-child) {
    margin-inline-start: -1px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.muaadh-action-group > .muaadh-action:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.muaadh-action-group--sm > .muaadh-action {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

/* Group Compact + Reset variant */
.muaadh-action-group--compact .muaadh-action { padding: 0.25rem 0.5rem; font-size: var(--text-xs); }
.muaadh-action--reset { background: none; border: none; padding: 0; cursor: pointer; color: inherit; }

/* Full-Width utility variant */
.muaadh-action--full-width { width: 100%; }