/* ===============================================
   ESCOSTORES DARK THEME - TAILWIND CSS
   Permanent dark theme using Tailwind utilities
   =============================================== */

/* Tailwind Dark Theme Configuration */

/* Force dark theme on all elements */
* {
    color-scheme: dark;
}

/* Base dark theme overrides using Tailwind classes */
body {
    @apply bg-slate-900 text-white;
}

/* Tailwind Dark Theme Utilities - Override light theme classes */
.bg-white {
    @apply bg-slate-800;
}

.bg-white\/90 {
    @apply bg-slate-800/90;
}

.bg-gray-50 {
    @apply bg-slate-800;
}

.bg-primary-50 {
    @apply bg-slate-700;
}

.text-gray-900 {
    @apply text-white;
}

.text-gray-800 {
    @apply text-white;
}

.text-gray-700 {
    @apply text-slate-200;
}

.text-gray-600 {
    @apply text-slate-200;
}

.text-gray-500 {
    @apply text-slate-400;
}

.text-gray-400 {
    @apply text-slate-400;
}

.border-gray-200 {
    @apply border-slate-600;
}

.border-gray-100 {
    @apply border-slate-500;
}

/* Form elements - removed to use only Tailwind classes */

/* Buttons */
.btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 border-0 text-white;
}

.btn-secondary {
    @apply bg-slate-700 border-slate-600 text-white;
}

/* Gradients */
.bg-gradient-to-br {
    @apply bg-gradient-to-br from-slate-900 via-slate-800 to-slate-700;
}

.bg-gradient-to-r {
    @apply bg-gradient-to-r from-slate-800 to-slate-700;
}

/* Network colors */
.mtn {
    @apply text-yellow-400;
}

.airtel {
    @apply text-orange-500;
}

.vodafone {
    @apply text-red-600;
}

.tigo {
    @apply text-green-600;
}

.glo {
    @apply text-green-500;
}

/* Footer */
footer {
    @apply bg-slate-800 border-t border-slate-600;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-slate-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-slate-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-500;
}

/* Glass effects */
.glass-effect {
    @apply bg-slate-800/80 backdrop-blur-xl border border-slate-600;
}

/* Hover effects */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Loading states */
.loading {
    @apply bg-gradient-to-r from-slate-700 via-slate-600 to-slate-700;
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Alerts */
.alert-success {
    @apply bg-green-500/10 border-green-500 text-green-500;
}

.alert-danger {
    @apply bg-red-500/10 border-red-500 text-red-500;
}

.alert-warning {
    @apply bg-yellow-500/10 border-yellow-500 text-yellow-500;
}

.alert-info {
    @apply bg-blue-500/10 border-blue-500 text-blue-500;
}

/* User Dashboard Specific Dark Theme Overrides */
.card-hover {
    @apply transition-all duration-300 ease-out;
}

.card-hover:hover {
    @apply -translate-y-1 shadow-xl;
}

/* Form elements in user dashboard */
.border-gray-200\/50 {
    @apply border-slate-600;
}

.border-gray-200 {
    @apply border-slate-600;
}

.border-gray-100 {
    @apply border-slate-500;
}

/* Text colors for user dashboard */
.text-gray-900 {
    @apply text-white;
}

.text-gray-800 {
    @apply text-white;
}

.text-gray-700 {
    @apply text-slate-200;
}

.text-gray-600 {
    @apply text-slate-200;
}

.text-gray-500 {
    @apply text-slate-400;
}

.text-gray-400 {
    @apply text-slate-400;
}

/* Button states */
.tab-btn.active {
    @apply bg-slate-800 text-blue-500 shadow-md;
}

.tab-btn {
    @apply text-slate-400;
}

/* Notification toast dark theme */
.notification-toast {
    @apply bg-slate-800 border-l-slate-600;
}

.notification-success {
    @apply border-l-green-500;
}

.notification-error {
    @apply border-l-red-500;
}

/* Cart and form elements */
.bg-gray-50 {
    @apply bg-slate-700;
}

.bg-red-50 {
    @apply bg-red-500/10 border-red-500;
}

.bg-blue-100 {
    @apply bg-blue-500/20;
}

.bg-purple-100 {
    @apply bg-purple-500/20;
}

.bg-green-100 {
    @apply bg-green-500/20;
}

.bg-yellow-100 {
    @apply bg-yellow-500/20;
}

.bg-red-100 {
    @apply bg-red-500/20;
}

.bg-orange-100 {
    @apply bg-orange-500/20;
}