/* ===============================================
   NEXUS DATA MALL DARK THEME - TAILWIND CSS
   Permanent dark theme using Tailwind utilities
   =============================================== */

/* Dark Theme Root Variables for Tailwind */
:root {
    --dark-bg-primary: #0a0a0a;
    --dark-bg-secondary: #111111;
    --dark-bg-tertiary: #1a1a1a;
    --dark-bg-card: #1e1e1e;
    --dark-bg-hover: #2a2a2a;
    
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #e5e5e5;
    --dark-text-muted: #a0a0a0;
    --dark-text-accent: #60a5fa;
    
    --dark-accent-blue: #3b82f6;
    --dark-accent-purple: #8b5cf6;
    --dark-accent-green: #10b981;
    --dark-accent-orange: #f59e0b;
    --dark-accent-red: #ef4444;
    
    --dark-border-primary: #333333;
    --dark-border-secondary: #404040;
    --dark-border-accent: #555555;
    
    --dark-mtn: #fbbf24;
    --dark-airtel: #f97316;
    --dark-vodafone: #dc2626;
    --dark-tigo: #059669;
    --dark-glo: #10b981;
}

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

/* Base dark theme overrides */
body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Tailwind Dark Theme Utilities */
.bg-white {
    background-color: var(--dark-bg-card) !important;
}

.bg-white\/90 {
    background-color: rgba(30, 30, 30, 0.9) !important;
}

.bg-gray-50 {
    background-color: var(--dark-bg-secondary) !important;
}

.bg-primary-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.text-gray-900 {
    color: var(--dark-text-primary) !important;
}

.text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.text-gray-700 {
    color: var(--dark-text-secondary) !important;
}

.text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

.text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.text-gray-400 {
    color: var(--dark-text-muted) !important;
}

.border-gray-200 {
    border-color: var(--dark-border-primary) !important;
}

.border-gray-100 {
    border-color: var(--dark-border-secondary) !important;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-primary) !important;
    color: var(--dark-text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--dark-accent-blue), var(--dark-accent-purple)) !important;
    border: none !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Gradients */
.bg-gradient-to-br {
    background: linear-gradient(135deg, var(--dark-bg-primary), var(--dark-bg-secondary), #1a1a2e) !important;
}

.bg-gradient-to-r {
    background: linear-gradient(90deg, var(--dark-bg-secondary), var(--dark-bg-tertiary)) !important;
}

/* Network colors */
.mtn {
    color: var(--dark-mtn) !important;
}

.airtel {
    color: var(--dark-airtel) !important;
}

.vodafone {
    color: var(--dark-vodafone) !important;
}

.tigo {
    color: var(--dark-tigo) !important;
}

.glo {
    color: var(--dark-glo) !important;
}

/* Footer */
footer {
    background: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border-primary);
}

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

::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-border-accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent-blue);
}

/* Glass effects */
.glass-effect {
    background: rgba(30, 30, 30, 0.8) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--dark-border-primary);
}

/* Hover effects */
/* Scale effect removed */

.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 {
    background: linear-gradient(90deg, var(--dark-bg-tertiary), var(--dark-bg-hover), var(--dark-bg-tertiary));
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Alerts */
.alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--dark-accent-green) !important;
    color: var(--dark-accent-green) !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--dark-accent-red) !important;
    color: var(--dark-accent-red) !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--dark-accent-orange) !important;
    color: var(--dark-accent-orange) !important;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--dark-accent-blue) !important;
    color: var(--dark-accent-blue) !important;
}

/* User Dashboard Specific Dark Theme Overrides */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Form elements in user dashboard */
.border-gray-200\/50 {
    border-color: var(--dark-border-primary) !important;
}

.border-gray-200 {
    border-color: var(--dark-border-primary) !important;
}

.border-gray-100 {
    border-color: var(--dark-border-secondary) !important;
}

/* Text colors for user dashboard */
.text-gray-900 {
    color: var(--dark-text-primary) !important;
}

.text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.text-gray-700 {
    color: var(--dark-text-secondary) !important;
}

.text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

.text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.text-gray-400 {
    color: var(--dark-text-muted) !important;
}

/* Button states */
.tab-btn.active {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-accent-blue) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tab-btn {
    color: var(--dark-text-muted) !important;
}

/* Notification toast dark theme */
.notification-toast {
    background: var(--dark-bg-card) !important;
    border-left-color: var(--dark-border-accent) !important;
}

.notification-success {
    border-left-color: var(--dark-accent-green) !important;
}

.notification-error {
    border-left-color: var(--dark-accent-red) !important;
}

/* Cart and form elements */
.bg-gray-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--dark-accent-red) !important;
}

.bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.bg-purple-100 {
    background-color: rgba(139, 92, 246, 0.2) !important;
}

.bg-green-100 {
    background-color: rgba(16, 185, 129, 0.2) !important;
}

.bg-yellow-100 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

.bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.bg-orange-100 {
    background-color: rgba(251, 146, 60, 0.2) !important;
}