/* Core styles - see full file for all styles */
[x-cloak] { display: none !important; }

.form-input {
    display: block; width: 100%; padding: 0.75rem 1rem;
    font-size: 1rem; color: #374151; background: #fff;
    border: 1px solid #d1d5db; border-radius: 0.5rem;
}
.form-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.form-input.is-invalid { border-color: #ef4444; }
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #374151; }
.form-label.required::after { content: ' *'; color: #ef4444; }
.error-message { margin-top: 0.25rem; font-size: 0.875rem; color: #ef4444; }

.btn { display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 1.5rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer; }
.btn-primary { color: #fff; background: #2563eb; border: 1px solid #2563eb; }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-secondary { color: #374151; background: #fff; border: 1px solid #d1d5db; }
.btn-success { color: #fff; background: #10b981; border: 1px solid #10b981; }
.btn-danger { color: #fff; background: #ef4444; border: 1px solid #ef4444; }
.btn:disabled { opacity: 0.65; cursor: not-allowed; }

.card { background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #e5e7eb; }
.card-body { padding: 1.5rem; }

.badge { display: inline-flex; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.badge-success { color: #065f46; background: #d1fae5; }
.badge-warning { color: #92400e; background: #fef3c7; }
.badge-danger { color: #991b1b; background: #fee2e2; }
.badge-info { color: #1e40af; background: #dbeafe; }

.spinner { display: inline-block; width: 1.25rem; height: 1.25rem;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin 0.75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .form-input { font-size: 16px; }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease-out;
    border-left: 4px solid #3b82f6;
}

.toast-success { border-left-color: #10b981; background: #f0fdf4; }
.toast-error { border-left-color: #ef4444; background: #fef2f2; }
.toast-warning { border-left-color: #f59e0b; background: #fffbeb; }
.toast-info { border-left-color: #3b82f6; background: #eff6ff; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 640px) {
    .toast-container {
        top: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
    }
}