/* Custom styles for SanaSend Admin and User Dashboard */

/* Unfold-inspired color scheme matching admin panel */
:root {
    /* Primary colors (teal/cyan from Unfold config) */
    --primary-50: rgb(240 253 250);
    --primary-100: rgb(204 251 241);
    --primary-200: rgb(153 246 228);
    --primary-300: rgb(102 240 214);
    --primary-400: rgb(45 212 191);
    --primary-500: rgb(0 201 167);
    --primary-600: rgb(0 180 149);
    --primary-700: rgb(0 159 131);
    --primary-800: rgb(0 138 113);
    --primary-900: rgb(0 117 95);
    
    /* Legacy teal aliases for backward compatibility */
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;
}

/* Ensure consistent color usage across admin and user dashboard */
.text-teal-600,
.text-primary-600 {
    color: var(--primary-600) !important;
}

.bg-teal-600,
.bg-primary-600 {
    background-color: var(--primary-600) !important;
}

.border-teal-500,
.border-primary-500 {
    border-color: var(--primary-500) !important;
}

.focus\:ring-teal-500:focus,
.focus\:ring-primary-500:focus {
    --tw-ring-color: var(--primary-500) !important;
}

.hover\:bg-teal-700:hover,
.hover\:bg-primary-700:hover {
    background-color: var(--primary-700) !important;
}

/* Button styles matching Unfold */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
}

/* Admin Dashboard Enhancements */
.stat-card-hover {
    transition: all 0.2s ease-in-out;
}

.stat-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
}

/* Smooth animations for status indicators */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Table enhancements */
table tbody tr {
    transition: background-color 0.15s ease;
}

/* Status badge animations */
.status-badge {
    animation: fadeIn 0.2s ease-out;
}

/* Chart container improvements */
canvas {
    border-radius: 0.5rem;
}

/* Scrollbar styling for tables */
.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}