/* ============================================
   RIView - Component Styles v2.0
   Buttons, forms, cards, toasts, modals
   ============================================ */

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 56, 101, 0.25);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    box-shadow: 0 4px 12px rgba(0, 56, 101, 0.35);
    transform: translateY(-1px);
}

.btn-secondary {
    background: white;
    color: var(--neutral-700);
    border: 1px solid var(--neutral-300);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ==================== FORMS ==================== */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; margin-bottom: var(--space-2); font-size: 14px; font-weight: 500; color: var(--neutral-700); }
.form-input, .form-select, .form-textarea { display: block; width: 100%; padding: var(--space-3); font-size: 14px; font-family: inherit; line-height: 1.5; color: var(--neutral-900); background: white; border: 1px solid var(--neutral-300); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.form-input::placeholder { color: var(--neutral-400); }
.form-hint { display: block; margin-top: var(--space-1); font-size: 12px; color: var(--neutral-500); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ==================== TOASTS ==================== */
.toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 500; display: flex; flex-direction: column; gap: var(--space-2); max-width: 400px; }
.toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); transform: translateX(120%); opacity: 0; transition: all var(--transition-normal); }
.toast-show { transform: translateX(0); opacity: 1; }
.toast-hide { transform: translateX(120%); opacity: 0; }
.toast-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: bold; }
.toast-success .toast-icon { background: var(--success-100); color: var(--success-600); }
.toast-error .toast-icon { background: var(--danger-100); color: var(--danger-600); }
.toast-warning .toast-icon { background: var(--warning-100); color: var(--warning-600); }
.toast-info .toast-icon { background: var(--brand-100); color: var(--brand-600); }
.toast-message { flex: 1; font-size: 14px; color: var(--neutral-700); }
.toast-close { background: none; border: none; color: var(--neutral-400); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }

/* ==================== LOADING OVERLAY ==================== */
.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 400; opacity: 0; visibility: hidden; transition: all var(--transition-normal); }
.loading-overlay.visible { opacity: 1; visibility: visible; }
.loading-overlay.hidden { opacity: 0; visibility: hidden; }
.loading-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.loading-spinner { width: 48px; height: 48px; border: 4px solid var(--neutral-200); border-top-color: var(--brand-600); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading-text { font-size: 14px; color: var(--neutral-600); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== SIDEBAR OVERLAY ==================== */
.sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.sidebar.open ~ .sidebar-overlay { opacity: 1; visibility: visible; }

/* ==================== BADGES ==================== */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: 500; border-radius: var(--radius-full); }
.badge-success { background: var(--success-100); color: var(--success-700); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-danger { background: var(--danger-100); color: var(--danger-700); }