/* ============================================================
   SD-BUTTON — Core Button Component
   BEM: sd-button, sd-button--{variant}, sd-button--{size}
   Depends on: tokens.css (design tokens)
   ============================================================ */

/* --- Base Button --- */
.sd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0.5625rem 1rem;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid transparent;
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition:
        background var(--duration, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
        border-color var(--duration, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
        color var(--duration, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--duration, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
        transform var(--duration, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

/* --- Focus Visible (Accessibility) --- */
.sd-button:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}

/* --- Remove default outline for mouse users --- */
.sd-button:focus:not(:focus-visible) {
    outline: none;
}

/* --- Disabled State --- */
.sd-button:disabled,
.sd-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   VARIANTS
   ============================================================ */

/* --- Primary --- */
.sd-button--primary {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: var(--text-inverse, #ffffff);
}

.sd-button--primary:hover {
    background: var(--accent-hover, #1d4ed8);
    border-color: var(--accent-hover, #1d4ed8);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.sd-button--primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Secondary (Outline) --- */
.sd-button--secondary {
    background: transparent;
    border-color: var(--border, #e1e1e1);
    color: var(--text-secondary, #666666);
}

.sd-button--secondary:hover {
    background: var(--bg-base, #ffffff);
    border-color: var(--border, #e1e1e1);
    color: var(--text-primary, #1a1a1a);
}

.sd-button--secondary:active {
    background: var(--bg-surface-hover, #f5f5f5);
}

/* --- Danger --- */
.sd-button--danger {
    background: var(--danger, #d13438);
    border-color: var(--danger, #d13438);
    color: var(--text-inverse, #ffffff);
}

.sd-button--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 2px 8px rgba(209, 52, 56, 0.3);
    transform: translateY(-1px);
}

.sd-button--danger:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Ghost --- */
.sd-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary, #666666);
}

.sd-button--ghost:hover {
    background: var(--bg-surface-hover, #f5f5f5);
    color: var(--text-primary, #1a1a1a);
}

.sd-button--ghost:active {
    background: var(--border-subtle, #f0f0f0);
}

/* ============================================================
   SIZES
   ============================================================ */

/* --- Small --- */
.sd-button--sm {
    font-size: 0.78rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-xs, 4px);
    gap: 0.375rem;
}

/* --- Medium (default, explicit) --- */
.sd-button--md {
    font-size: 0.875rem;
    padding: 0.5625rem 1rem;
}

/* --- Large --- */
.sd-button--lg {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 10px);
    gap: 0.625rem;
}

/* ============================================================
   MODIFIERS
   ============================================================ */

/* --- Icon-only Button --- */
.sd-button--icon {
    padding: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
}

.sd-button--icon.sd-button--sm {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.25rem;
}

.sd-button--icon.sd-button--lg {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
}

/* --- Full Width --- */
.sd-button--block {
    display: flex;
    width: 100%;
}

/* --- Loading State --- */
.sd-button--loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.sd-button--loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sd-button-spin 0.6s linear infinite;
}

.sd-button--primary.sd-button--loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-right-color: transparent;
}

@keyframes sd-button-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BUTTON GROUP
   ============================================================ */
.sd-button-group {
    display: inline-flex;
}

.sd-button-group .sd-button {
    border-radius: 0;
}

.sd-button-group .sd-button:first-child {
    border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
}

.sd-button-group .sd-button:last-child {
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}

.sd-button-group .sd-button + .sd-button {
    margin-left: -1px;
}

/* ============================================================
   BOOTSTRAP .btn COMPATIBILITY ALIASES
   Maps Bootstrap class names to sd-button system.
   Templates using .btn classes get the same consistent styling.
   ============================================================ */

/* --- Base .btn → .sd-button --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: var(--btn-font-weight, 500);
    font-size: 0.875rem;
    line-height: 1;
    padding: 0.5625rem 1rem;
    border-radius: var(--btn-border-radius, 6px);
    border: 1px solid transparent;
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: var(--btn-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
    outline: none;
}

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

/* --- Solid Variants --- */
.btn-primary {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: var(--text-inverse, #ffffff);
}

.btn-primary:hover {
    background: var(--color-primary-hover, #1d4ed8);
    border-color: var(--color-primary-hover, #1d4ed8);
    box-shadow: var(--btn-shadow-hover, 0 2px 8px rgba(37, 99, 235, 0.3));
    transform: translateY(var(--btn-translate-y, -1px));
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    background: var(--color-secondary, #64748b);
    border-color: var(--color-secondary, #64748b);
    color: var(--text-inverse, #ffffff);
}

.btn-secondary:hover {
    background: var(--color-secondary-hover, #475569);
    border-color: var(--color-secondary-hover, #475569);
    box-shadow: var(--btn-shadow-hover, 0 2px 8px rgba(100, 116, 139, 0.3));
    transform: translateY(var(--btn-translate-y, -1px));
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-success {
    background: var(--color-success, #10b981);
    border-color: var(--color-success, #10b981);
    color: var(--text-inverse, #ffffff);
}

.btn-success:hover {
    background: var(--color-success-hover, #059669);
    border-color: var(--color-success-hover, #059669);
    box-shadow: var(--btn-shadow-hover, 0 2px 8px rgba(16, 185, 129, 0.3));
    transform: translateY(var(--btn-translate-y, -1px));
}

.btn-success:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-danger {
    background: var(--color-danger, #ef4444);
    border-color: var(--color-danger, #ef4444);
    color: var(--text-inverse, #ffffff);
}

.btn-danger:hover {
    background: var(--color-danger-hover, #dc2626);
    border-color: var(--color-danger-hover, #dc2626);
    box-shadow: var(--btn-shadow-hover, 0 2px 8px rgba(239, 68, 68, 0.3));
    transform: translateY(var(--btn-translate-y, -1px));
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-warning {
    background: var(--color-warning, #f59e0b);
    border-color: var(--color-warning, #f59e0b);
    color: var(--text-inverse, #ffffff);
}

.btn-warning:hover {
    background: var(--color-warning-hover, #d97706);
    border-color: var(--color-warning-hover, #d97706);
    box-shadow: var(--btn-shadow-hover, 0 2px 8px rgba(245, 158, 11, 0.3));
    transform: translateY(var(--btn-translate-y, -1px));
}

.btn-warning:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-info {
    background: var(--color-info, #3b82f6);
    border-color: var(--color-info, #3b82f6);
    color: var(--text-inverse, #ffffff);
}

.btn-info:hover {
    background: var(--color-info-hover, #2563eb);
    border-color: var(--color-info-hover, #2563eb);
    box-shadow: var(--btn-shadow-hover, 0 2px 8px rgba(59, 130, 246, 0.3));
    transform: translateY(var(--btn-translate-y, -1px));
}

.btn-info:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Outline Variants --- */
.btn-outline-primary {
    background: transparent;
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

.btn-outline-primary:hover {
    background: var(--color-primary, #2563eb);
    color: var(--text-inverse, #ffffff);
}

.btn-outline-primary:active {
    background: var(--color-primary-hover, #1d4ed8);
}

.btn-outline-secondary {
    background: transparent;
    border-color: var(--border-default, #e2e8f0);
    color: var(--text-secondary, #475569);
}

.btn-outline-secondary:hover {
    background: var(--bg-muted, #f8fafc);
    border-color: var(--border-strong, #cbd5e1);
    color: var(--text-primary, #0f172a);
}

.btn-outline-secondary:active {
    background: var(--bg-subtle, #f1f5f9);
}

.btn-outline-success {
    background: transparent;
    border-color: var(--color-success, #10b981);
    color: var(--color-success, #10b981);
}

.btn-outline-success:hover {
    background: var(--color-success, #10b981);
    color: var(--text-inverse, #ffffff);
}

.btn-outline-success:active {
    background: var(--color-success-hover, #059669);
}

.btn-outline-danger {
    background: transparent;
    border-color: var(--color-danger, #ef4444);
    color: var(--color-danger, #ef4444);
}

.btn-outline-danger:hover {
    background: var(--color-danger, #ef4444);
    color: var(--text-inverse, #ffffff);
}

.btn-outline-danger:active {
    background: var(--color-danger-hover, #dc2626);
}

.btn-outline-warning {
    background: transparent;
    border-color: var(--color-warning, #f59e0b);
    color: var(--color-warning, #f59e0b);
}

.btn-outline-warning:hover {
    background: var(--color-warning, #f59e0b);
    color: var(--text-inverse, #ffffff);
}

.btn-outline-warning:active {
    background: var(--color-warning-hover, #d97706);
}

.btn-outline-info {
    background: transparent;
    border-color: var(--color-info, #3b82f6);
    color: var(--color-info, #3b82f6);
}

.btn-outline-info:hover {
    background: var(--color-info, #3b82f6);
    color: var(--text-inverse, #ffffff);
}

.btn-outline-info:active {
    background: var(--color-info-hover, #2563eb);
}

/* --- Size Aliases --- */
.btn-sm {
    font-size: 0.78rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-xs, 4px);
    gap: 0.375rem;
}

.btn-lg {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 10px);
    gap: 0.625rem;
}

/* --- Close Button --- */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--text-muted, #94a3b8);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%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, 6px);
    opacity: 0.5;
    transition: opacity var(--duration, 0.2s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn-close:hover {
    opacity: 1;
}

/* --- Dark Mode for .btn --- */
[data-theme="dark"] .btn {
    background: var(--bg-surface, #161822);
    color: var(--text-primary, #e2e8f0);
    border-color: var(--border-default, #2e3348);
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--border-default, #2e3348);
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--bg-muted, #1a1d2e);
    color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .sd-button {
    background: var(--bg-surface, #1e1e1e);
    color: var(--text-primary, #e0e0e0);
    border-color: var(--border, #333333);
}

[data-theme="dark"] .sd-button--secondary {
    border-color: var(--border, #333333);
    color: var(--text-secondary, #a0a0a0);
}

[data-theme="dark"] .sd-button--secondary:hover {
    background: var(--bg-surface-hover, #2a2a2a);
    color: var(--text-primary, #e0e0e0);
}

[data-theme="dark"] .sd-button--ghost:hover {
    background: var(--bg-surface-hover, #2a2a2a);
    color: var(--text-primary, #e0e0e0);
}

[data-theme="dark"] .sd-button--ghost:active {
    background: var(--border-subtle, #2a2a2a);
}

[data-theme="dark"] .sd-button--loading::after {
    border-color: rgba(255, 255, 255, 0.2);
    border-right-color: transparent;
}