/**
 * Button primitives
 *
 * Phase 3.5 (backend-unification-execution plan):
 * Single source of truth for .btn / .btn--primary / .btn--secondary /
 * .btn--ghost / .btn--danger across the back-end. Built on the canonical
 * tokens in /css/theme-tokens.css so it adapts to light + dark themes.
 *
 * Naming uses BEM-style modifiers (.btn--primary) to avoid collisions
 * with the legacy global .btn-primary defined in css/enterprise-monitoring.css
 * and various inline styles. The legacy class is kept as a backward-
 * compatible alias below — new code should prefer the modifier form.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.05s ease;
    user-select: none;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-info, #3b82f6);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary action — brand colour, high emphasis. */
.btn--primary {
    background: var(--brand-primary, #667eea);
    color: var(--text-inverse, #ffffff);
    border-color: var(--brand-primary, #667eea);
}

.btn--primary:hover {
    background: var(--brand-secondary, #764ba2);
    border-color: var(--brand-secondary, #764ba2);
}

/* Secondary action — neutral surface, medium emphasis. */
.btn--secondary {
    background: var(--surface-elevated, #ffffff);
    color: var(--text-primary, #111827);
    border-color: var(--border-default, #e5e7eb);
}

.btn--secondary:hover {
    background: var(--bg-tertiary, #eef0f4);
    border-color: var(--border-strong, #d1d5db);
}

/* Ghost action — text-only, low emphasis. */
.btn--ghost {
    background: transparent;
    color: var(--text-primary, #111827);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--bg-tertiary, #eef0f4);
}

/* Destructive action. */
.btn--danger {
    background: var(--accent-error, #ef4444);
    color: #ffffff;
    border-color: var(--accent-error, #ef4444);
}

.btn--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* Sizes */
.btn--sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.btn--lg { padding: 14px 24px; font-size: 16px; border-radius: 10px; }

/* ---------------------------------------------------------------------- */
/* Backward-compatible aliases for legacy class names.                    */
/* New code should use .btn .btn--primary etc.                            */
/* ---------------------------------------------------------------------- */

.btn-primary   { /* alias */ }
.btn-secondary { /* alias */ }
.btn-danger    { /* alias */ }

/* If a page uses the legacy single-class .btn-primary (no .btn), inherit
   the same visual contract. */
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn-primary:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--brand-primary, #667eea);
    background: var(--brand-primary, #667eea);
    color: var(--text-inverse, #ffffff);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

button.btn-primary:hover,
a.btn-primary:hover,
input.btn-primary:hover,
.btn-primary:not(.btn):hover {
    background: var(--brand-secondary, #764ba2);
    border-color: var(--brand-secondary, #764ba2);
}