/* ═══════════════════════════════════════════════════
   BUTTONS — ImportControl
   ═══════════════════════════════════════════════════ */

.btn-copper,
.btn-primary-custom {
    background: var(--brand-primary);
    border: none;
    color: var(--text-inverse);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast);
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    cursor: pointer;
    line-height: 1;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.btn-copper:hover,
.btn-primary-custom:hover {
    background: var(--brand-hover);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.btn-copper:active,
.btn-primary-custom:active {
    background: var(--brand-active);
    transform: translateY(0.5px);
}

.btn-copper:disabled,
.btn-copper[disabled],
.btn-primary-custom:disabled {
    background: var(--gray-150);
    color: var(--text-disabled);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-copper:focus-visible,
.btn-primary-custom:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.btn-outline-navy,
.btn-secondary-custom {
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    background: var(--surface-card);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition-fast);
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    cursor: pointer;
    line-height: 1;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.btn-outline-navy:hover,
.btn-secondary-custom:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-outline-navy:active,
.btn-secondary-custom:active {
    background: var(--surface-active);
}

.btn-outline-navy:disabled,
.btn-outline-navy[disabled] {
    background: var(--surface-overlay);
    color: var(--text-disabled);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

.btn-outline-navy:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.btn-sm-copper {
    background: var(--brand-primary);
    border: none;
    color: var(--text-inverse);
    font-size: var(--text-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    transition: background var(--transition);
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    line-height: 1;
    font-family: var(--font-sans);
}

.btn-sm-copper:hover { background: var(--brand-hover); color: var(--text-inverse); }
.btn-sm-copper:active { background: var(--brand-active); }

.btn-sm-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    line-height: 1;
    font-family: var(--font-sans);
}

.btn-sm-ghost:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.btn-sm-ghost:active {
    background: var(--surface-active);
}

.btn-sm-ghost:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.btn-danger {
    background: var(--danger);
    border: none;
    color: var(--text-inverse);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    cursor: pointer;
    font-family: var(--font-sans);
}

.btn-danger:hover { background: #C52E32; color: var(--text-inverse); }

.btn-success {
    background: var(--success);
    border: none;
    color: var(--text-inverse);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    cursor: pointer;
    font-family: var(--font-sans);
}

.btn-success:hover { background: #0D6B0D; color: var(--text-inverse); }

.btn-warning {
    background: var(--warning);
    border: none;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    cursor: pointer;
    font-family: var(--font-sans);
}

.btn-warning:hover { background: #E5A800; }

.btn-login {
    background: var(--brand-primary);
    border: none;
    color: var(--text-inverse);
    height: 42px;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    width: 100%;
    transition: background var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--font-sans);
}

.btn-login:hover { background: var(--brand-hover); box-shadow: var(--shadow-sm); }
.btn-login:active { background: var(--brand-active); }
.btn-login:disabled { background: var(--gray-150); color: var(--text-disabled); cursor: not-allowed; }

.btn-sm {
    font-size: var(--text-sm);
    padding: 0 var(--space-2);
    height: 28px;
    border-radius: var(--radius-sm);
}

.btn [class*="bi-"] { line-height: 1; }
.me-1 { margin-right: var(--space-1-5); }
.ms-2 { margin-left: var(--space-2); }
