/* Provider Notifications Styles */

/* Form Styling */
.notification-form {
    @apply space-y-6;
}

.form-group {
    @apply space-y-2;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white;
}

.form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 resize-none;
}

.form-checkbox {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700;
}

/* Character Counter */
.character-counter {
    @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
}

.character-counter.warning {
    @apply text-yellow-600 dark:text-yellow-400;
}

.character-counter.error {
    @apply text-red-600 dark:text-red-400;
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition-colors;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800 transition-colors;
}

.btn-danger {
    @apply inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800 transition-colors;
}

/* Statistics Cards */
.stats-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6;
}

.stats-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center;
}

.stats-icon.blue {
    @apply bg-blue-100 dark:bg-blue-900/20;
}

.stats-icon.green {
    @apply bg-green-100 dark:bg-green-900/20;
}

.stats-icon.purple {
    @apply bg-purple-100 dark:bg-purple-900/20;
}

.stats-value {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
}

.stats-label {
    @apply text-sm text-gray-600 dark:text-gray-400;
}

/* Recent Notifications */
.notification-item {
    @apply flex items-start space-x-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700;
}

.notification-status {
    @apply w-2 h-2 rounded-full mt-2;
}

.notification-status.sent {
    @apply bg-green-400;
}

.notification-status.failed {
    @apply bg-red-400;
}

.notification-status.pending {
    @apply bg-yellow-400;
}

.notification-title {
    @apply text-sm font-medium text-gray-900 dark:text-white truncate;
}

.notification-time {
    @apply text-xs text-gray-500 dark:text-gray-400;
}

/* Modal Styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-50;
}

.modal-container {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-content {
    @apply flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0;
}

.modal-panel {
    @apply relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6;
}

.modal-header {
    @apply flex items-center justify-between mb-4;
}

.modal-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.modal-close {
    @apply text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors;
}

.modal-body {
    @apply space-y-4;
}

.modal-footer {
    @apply flex justify-end space-x-3 mt-6;
}

/* Preview Styles */
.preview-container {
    @apply bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600;
}

.preview-subject {
    @apply font-semibold text-gray-900 dark:text-white mb-2;
}

.preview-message {
    @apply text-gray-700 dark:text-gray-300 whitespace-pre-wrap;
}

.preview-channels {
    @apply flex flex-wrap gap-2 mt-3;
}

.preview-channel {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.preview-channel.in-app {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400;
}

.preview-channel.email {
    @apply bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400;
}

.preview-channel.push {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400;
}

/* Toast Notifications */
.toast {
    @apply fixed top-4 right-4 max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50;
}

.toast.success {
    @apply border-l-4 border-green-400;
}

.toast.error {
    @apply border-l-4 border-red-400;
}

.toast.warning {
    @apply border-l-4 border-yellow-400;
}

.toast.info {
    @apply border-l-4 border-blue-400;
}

.toast-content {
    @apply p-4;
}

.toast-title {
    @apply text-sm font-medium text-gray-900 dark:text-white;
}

.toast-message {
    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
}

.toast-close {
    @apply absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300;
}

/* Loading States */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply animate-spin -ml-1 mr-3 h-5 w-5 text-white;
}

/* Responsive Design */
@media (max-width: 640px) {
    .modal-panel {
        @apply sm:max-w-full mx-4;
    }
    
    .stats-card {
        @apply p-4;
    }
    
    .notification-form {
        @apply space-y-4;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Focus States */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    @apply ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
}

/* Disabled States */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    @apply bg-gray-100 dark:bg-gray-600 cursor-not-allowed opacity-50;
}

.btn-primary:disabled,
.btn-secondary:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Validation States */
.form-input.error,
.form-select.error,
.form-textarea.error {
    @apply border-red-300 focus:border-red-500 focus:ring-red-500;
}

.form-input.success,
.form-select.success,
.form-textarea.success {
    @apply border-green-300 focus:border-green-500 focus:ring-green-500;
}

.error-message {
    @apply text-sm text-red-600 dark:text-red-400 mt-1;
}

.success-message {
    @apply text-sm text-green-600 dark:text-green-400 mt-1;
}

/* Tips Section */
.tips-container {
    @apply bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800 p-6;
}

.tips-title {
    @apply text-lg font-semibold text-blue-900 dark:text-blue-100 mb-3;
}

.tips-list {
    @apply space-y-2;
}

.tips-item {
    @apply flex items-start space-x-2 text-sm text-blue-800 dark:text-blue-200;
}

.tips-icon {
    @apply w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0;
}