/**
 * Bootstrap Compatibility Layer - Core
 * Buttons, forms, typography, and text/bg utilities
 *
 * Note: Grid/layout utilities are in bootstrap-compat-grid.css
 * Note: Components (cards, modals, etc) are in bootstrap-compat-components.css
 */

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
}

.btn-success {
    background: var(--color-success);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--color-text-muted);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.btn-secondary:hover {
    background: #4b5563;
}

.btn-info {
    background: var(--color-info);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.btn-info:hover {
    background: #2563eb;
}

.btn-danger {
    background: var(--color-error);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

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

.btn-outline-primary {
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.btn-outline-primary:hover {
    background: var(--color-primary-light);
}

.btn-outline-success {
    background: white;
    color: var(--color-success);
    border: 2px solid var(--color-success);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.btn-outline-success:hover {
    background: var(--color-success-light);
}

.btn-outline-info {
    background: white;
    color: var(--color-info);
    border: 2px solid var(--color-info);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.btn-outline-info:hover {
    background: #dbeafe;
}

.btn-outline-secondary {
    background: white;
    color: var(--color-text-muted);
    border: 2px solid var(--color-border-default);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.btn-outline-secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-text-muted);
}

.btn-outline-danger {
    background: white;
    color: var(--color-error);
    border: 2px solid var(--color-error);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.btn-outline-danger:hover {
    background: var(--color-error-light);
}

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-md);
}

/* Button group */
.btn-group {
    display: inline-flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   FORM COMPONENTS
   ============================================ */

.form-control {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.form-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-family: var(--font-family);
    background: white;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-text {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.input-group {
    display: flex;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child,
.input-group > :first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-control:last-child,
.input-group > :last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-bg-section);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-muted);
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-error) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-info { color: var(--color-info) !important; }
.text-decoration-none { text-decoration: none !important; }
.text-nowrap { white-space: nowrap !important; }

/* ============================================
   FONT UTILITIES
   ============================================ */

.fw-bold { font-weight: var(--font-weight-bold) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fs-5 { font-size: var(--font-size-xl) !important; }
.fs-6 { font-size: var(--font-size-lg) !important; }

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

.bg-light { background-color: var(--color-bg-page) !important; }
.bg-white { background-color: white !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-text-muted) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-error) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-transparent { background-color: transparent !important; }

/* ============================================
   BORDER UTILITIES
   ============================================ */

.border { border: 1px solid var(--color-border-default) !important; }
.border-0 { border: none !important; }
.rounded { border-radius: var(--radius-lg) !important; }

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ============================================
   TYPOGRAPHY
   ============================================ */

.lead {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
}

.display-4 {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}