/* HealthERP Custom Styles */

/* Card */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
}
.card-header {
    @apply px-6 py-4 border-b border-gray-100;
}
.card-title {
    @apply text-lg font-semibold text-gray-900;
}
.card-description {
    @apply text-sm text-gray-500 mt-1;
}
.card-body {
    @apply p-6;
}

/* Form Elements */
.form-group {
    @apply mb-4;
}
.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}
.form-label.required::after {
    content: ' *';
    @apply text-red-500;
}
.form-input,
.form-select,
.form-textarea {
    @apply w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-150;
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    @apply bg-gray-50 text-gray-500 cursor-not-allowed;
}
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    @apply border-red-500 focus:ring-red-500;
}
.form-error {
    @apply mt-1 text-sm text-red-600 min-h-[1.25rem];
}
.form-hint {
    @apply mt-1 text-xs text-gray-500;
}
.form-checkbox {
    @apply flex items-center gap-2 cursor-pointer;
}
.form-checkbox input[type="checkbox"] {
    @apply w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-2 focus:ring-primary-500;
}

/* Buttons */
.btn {
    @apply inline-flex items-center justify-center px-5 py-2.5 font-medium rounded-lg transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}
.btn-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500;
}
.btn-outline {
    @apply border-2 border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
}
.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}
.btn-sm {
    @apply px-3 py-1.5 text-sm;
}
.btn-lg {
    @apply px-6 py-3 text-lg;
}

/* Table */
.table {
    @apply w-full text-left;
}
.table th {
    @apply px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-gray-100;
}
.table td {
    @apply px-4 py-3 text-sm text-gray-900 border-b border-gray-50;
}
.table tbody tr:hover {
    @apply bg-gray-50;
}

/* Badge */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.badge-primary { @apply bg-blue-100 text-blue-800; }
.badge-info { @apply bg-cyan-100 text-cyan-800; }
.badge-warning { @apply bg-yellow-100 text-yellow-800; }
.badge-success { @apply bg-green-100 text-green-800; }
.badge-danger { @apply bg-red-100 text-red-800; }
.badge-gray { @apply bg-gray-100 text-gray-800; }
.badge-outline { @apply bg-transparent border border-gray-300 text-gray-700; }

/* Pagination */
.pagination-list {
    @apply flex items-center gap-1;
}
.pagination-link {
    @apply px-3 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition-colors;
}
.pagination-link.is-current {
    @apply bg-primary-600 border-primary-600 text-white;
}
.pagination-link:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Alert */
.alert {
    @apply p-4 rounded-lg border;
}
.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}
.alert-error,
.alert-danger {
    @apply bg-red-50 border-red-200 text-red-800;
}
.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}
.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Spinner */
.spinner {
    @apply inline-block w-5 h-5 border-2 border-current border-r-transparent rounded-full animate-spin;
}
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Toast Container */
#toast-container {
    @apply fixed top-4 right-4 z-50 flex flex-col gap-2;
}
.toast {
    @apply px-4 py-3 rounded-lg shadow-lg border-l-4 min-w-[250px] max-w-md animate-slide-in;
}
.toast-success { @apply border-green-500 bg-white; }
.toast-error { @apply border-red-500 bg-white; }
.toast-warning { @apply border-yellow-500 bg-white; }
.toast-info { @apply border-blue-500 bg-white; }

@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; }
}
.animate-slide-in { animation: slideIn 0.3s ease; }
.animate-slide-out { animation: slideOut 0.3s ease forwards; }

/* Ajax Loader */
.ajax-loader-overlay {
    @apply absolute inset-0 bg-white/80 flex items-center justify-center z-50;
}
.ajax-spinner {
    @apply text-center;
}
.ajax-spinner .spinner {
    @apply w-8 h-8 border-3 mx-auto;
}
.loader-message {
    @apply mt-2 text-sm text-gray-500;
}

/* Form Submitting State */
form.is-submitting .btn-text {
    @apply inline-flex items-center gap-2;
}

/* Responsive */
@media (max-width: 640px) {
    .card-header,
    .card-body {
        @apply px-4 py-3;
    }
    .btn {
        @apply w-full;
    }
}

/* Utility */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
}