/* 🎨 Clean Dark Theme - Modern Admin Panel */

/* Main Color Scheme - Dark Base with White Accents */
:root {
    --bg-dark: #0f172a;
    --bg-darker: #020617;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --border-dark: #334155;
    --border-light: #475569;
    --text-white: #f8fafc;
    --text-light: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
}

/* Main background - Dark */
.dark-gradient {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 50%, var(--bg-darker) 100%) !important;
}

.bg-black\/50 {
    background: var(--bg-card) !important;
}

/* Override white backgrounds to dark */
.bg-white { 
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
}

.bg-gray-50 { background: var(--bg-card) !important; }
.bg-gray-100 { background: var(--bg-card-hover) !important; }
.bg-gray-200 { background: var(--border-dark) !important; }
.bg-gray-800 { background: var(--bg-card) !important; }
.bg-gray-900 { background: var(--bg-darker) !important; }

/* Text colors - Light on dark */
.text-gray-800 { color: var(--text-white) !important; }
.text-gray-700 { color: var(--text-light) !important; }
.text-gray-600 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-dim) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-300 { color: var(--text-light) !important; }

/* Override ALL green colors to white/light */
.text-green-400 { color: var(--text-white) !important; }
.text-green-300 { color: var(--text-light) !important; }
.text-green-500 { color: var(--text-white) !important; }
.text-green-600 { color: var(--text-white) !important; }
.text-green-700 { color: var(--text-white) !important; }
.text-green-800 { color: var(--text-white) !important; }
.text-green-900 { color: var(--text-white) !important; }

/* Border colors */
.border-gray-200 { border-color: var(--border-dark) !important; }
.border-gray-300 { border-color: var(--border-light) !important; }
.border-gray-400 { border-color: var(--border-light) !important; }

/* Shadows - Subtle */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
}

/* Stat cards - Dark with subtle borders */
.stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    border-color: var(--border-light) !important;
    background: var(--bg-card-hover) !important;
}

/* Dark cards */
.dark-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
}

/* Hover states */
.hover\:bg-gray-50:hover { background: var(--bg-card-hover) !important; }
.hover\:bg-gray-100:hover { background: var(--bg-card-hover) !important; }
.hover\:bg-gray-700:hover { background: var(--bg-card-hover) !important; }

/* Focus states - Blue accent */
.focus\:ring-blue-500:focus { 
    --tw-ring-color: rgba(59, 130, 246, 0.5) !important;
    border-color: var(--accent-blue) !important;
}

/* Buttons - Blue accent */
.bg-blue-500, .bg-blue-600 { 
    background: var(--accent-blue) !important;
    border: 1px solid var(--accent-blue-hover) !important;
}

.bg-blue-500:hover, .bg-blue-600:hover { 
    background: var(--accent-blue-hover) !important;
}

/* Matrix/Login button override - Dark */
.matrix-button, .login-button {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-light) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s !important;
    color: var(--text-white) !important;
}

.matrix-button:hover, .login-button:hover {
    background: var(--bg-card-hover) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px);
}

/* Input fields - Dark with light text */
input, select, textarea {
    background: var(--bg-darker) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-white) !important;
}

input::placeholder {
    color: var(--text-dim) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    background: var(--bg-card) !important;
}

/* Tables - Dark theme */
table {
    border-color: var(--border-dark) !important;
}

thead {
    background: var(--bg-card) !important;
    color: var(--text-white) !important;
}

tbody tr {
    background: var(--bg-card) !important;
    border-color: var(--border-dark) !important;
}

tbody tr:hover {
    background: var(--bg-card-hover) !important;
}

/* Remove Matrix glow effect */
.matrix-glow {
    text-shadow: none !important;
    color: var(--text-white) !important;
}

.glow-text {
    text-shadow: none !important;
    color: var(--text-white) !important;
}

/* Neon effects removal */
.neon-border {
    border: 1px solid var(--border-dark) !important;
    box-shadow: none !important;
}

/* Badges - Subtle colors */
.bg-green-100 { background: rgba(59, 130, 246, 0.1) !important; }
.bg-green-800 { background: var(--accent-blue) !important; }
.text-green-800 { color: var(--text-white) !important; }

.bg-red-100 { background: rgba(239, 68, 68, 0.1) !important; }
.text-red-700 { color: #ef4444 !important; }

.bg-yellow-100 { background: rgba(234, 179, 8, 0.1) !important; }
.text-yellow-700 { color: #eab308 !important; }

/* Success/active states - Blue */
.bg-green-500 { background: var(--accent-blue) !important; }
.bg-green-600 { background: var(--accent-blue-hover) !important; }
.border-green-500 { border-color: var(--accent-blue) !important; }

/* Form sections */
.form-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Login card */
.login-card {
    background: var(--bg-card) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
    animation: none !important;
}

/* Matrix input override */
.matrix-input, .login-input {
    background: var(--bg-darker) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-white) !important;
}

.matrix-input:focus, .login-input:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.matrix-input::placeholder, .login-input::placeholder {
    color: var(--text-dim) !important;
}

/* Countdown timer */
.countdown-timer {
    color: var(--text-white) !important;
    text-shadow: none !important;
    font-weight: bold;
}

/* Matrix/Login background override */
.matrix-bg, .login-bg {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 50%, var(--bg-darker) 100%) !important;
}

/* Sidebar active state */
.bg-blue-500\/10 {
    background: rgba(59, 130, 246, 0.1) !important;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}