/* Dark Mode Styles - YouTube-like Neutral Colors */
/* Comfortable for extended viewing with neutral grays */

:root {
    /* Light mode (default) */
    --bg-primary: #ecf0f1;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f5f5f5;
    --text-primary: #0f0f0f;
    --text-secondary: #606060;
    --text-muted: #909090;
    --border-color: #000000;
    --border-light: #e5e5e5;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --shadow-neu: 4px 4px 0 #000;
}

[data-theme="dark"] {
    /* Deep dark mode - darker cards and elements */
    --bg-primary: #0a0a0a;
    --bg-card: #121212;
    --bg-input: #1a1a1a;
    --bg-hover: #222222;
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --border-color: #2a2a2a;
    --border-light: #1e1e1e;
    --shadow-color: rgba(0, 0, 0, 0.8);
    --shadow-neu: 2px 2px 0 #0a0a0a;
}

/* ===== Body & Background ===== */
body.dark-mode {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ===== Universal override for ALL Tailwind arbitrary bg colors ===== */
/* This catches bg-[#XXXX] patterns used throughout the app */
.dark-mode [class*="bg-[#"] {
    background-color: var(--bg-card) !important;
}

/* Body-level background colors */
body.dark-mode[class*="bg-[#"] {
    background-color: var(--bg-primary) !important;
}

/* ===== Cards & Containers ===== */
/* Don't override gradient backgrounds */
.dark-mode .neu-border:not([class*="bg-gradient"]):not([class*="from-"]),
.dark-mode .bg-white,
.dark-mode [class*="bg-white"] {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Preserve white text on gradient backgrounds */
.dark-mode .neu-border[class*="bg-gradient"],
.dark-mode .neu-border[class*="from-"],
.dark-mode [class*="bg-gradient"],
.dark-mode [class*="from-"] {
    color: white !important;
}

.dark-mode .neu-border {
    box-shadow: var(--shadow-neu) !important;
}

/* ===== Inputs & Forms ===== */
.dark-mode .neu-input,
.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.dark-mode select,
.dark-mode textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: #555555 !important;
    outline-color: #555555 !important;
}

/* ===== Buttons ===== */
.dark-mode .neu-button {
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-neu) !important;
}

.dark-mode .neu-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--border-color) !important;
}

/* Gray buttons */
.dark-mode .bg-gray-200,
.dark-mode .bg-gray-100,
.dark-mode .bg-gray-50 {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* ALL colored buttons - dark gray in black/white mode */
.dark-mode .bg-green-400,
.dark-mode .bg-green-500,
.dark-mode .bg-green-600,
.dark-mode .bg-green-700,
.dark-mode .bg-blue-400,
.dark-mode .bg-blue-500,
.dark-mode .bg-blue-600,
.dark-mode .bg-blue-700,
.dark-mode .bg-red-400,
.dark-mode .bg-red-500,
.dark-mode .bg-red-600,
.dark-mode .bg-red-700,
.dark-mode .bg-yellow-400,
.dark-mode .bg-yellow-500,
.dark-mode .bg-yellow-600,
.dark-mode .bg-purple-400,
.dark-mode .bg-purple-500,
.dark-mode .bg-purple-600,
.dark-mode .bg-purple-700,
.dark-mode .bg-orange-400,
.dark-mode .bg-orange-500,
.dark-mode .bg-orange-600,
.dark-mode .bg-pink-400,
.dark-mode .bg-pink-500,
.dark-mode .bg-pink-600,
.dark-mode .bg-indigo-400,
.dark-mode .bg-indigo-500,
.dark-mode .bg-indigo-600,
.dark-mode .bg-teal-400,
.dark-mode .bg-teal-500,
.dark-mode .bg-teal-600,
.dark-mode .bg-cyan-400,
.dark-mode .bg-cyan-500,
.dark-mode .bg-cyan-600 {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* Hover states for colored buttons */
.dark-mode .bg-green-500:hover,
.dark-mode .bg-blue-500:hover,
.dark-mode .bg-red-500:hover,
.dark-mode .bg-yellow-500:hover,
.dark-mode .bg-purple-500:hover,
.dark-mode .bg-orange-500:hover,
.dark-mode .bg-pink-500:hover {
    background-color: #3a3a3a !important;
}

/* All button elements */
.dark-mode button[class*="bg-green"],
.dark-mode button[class*="bg-blue"],
.dark-mode button[class*="bg-red"],
.dark-mode button[class*="bg-yellow"],
.dark-mode button[class*="bg-purple"],
.dark-mode button[class*="bg-orange"],
.dark-mode button[class*="bg-pink"],
.dark-mode button[class*="bg-indigo"],
.dark-mode button[class*="bg-teal"],
.dark-mode button[class*="bg-cyan"] {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

/* ===== Tables ===== */
.dark-mode table {
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
}

.dark-mode thead,
.dark-mode th {
    background-color: #0e0e0e !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

.dark-mode tbody tr:nth-child(even) {
    background-color: #0f0f0f !important;
}

.dark-mode tbody tr:hover {
    background-color: var(--bg-hover) !important;
}

.dark-mode td {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* Sticky table headers */
.dark-mode .sticky {
    background-color: #0e0e0e !important;
}

/* ===== Text Colors ===== */
.dark-mode .text-gray-400 {
    color: var(--text-muted) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-600,
.dark-mode .text-gray-700,
.dark-mode .text-gray-800,
.dark-mode .text-gray-900 {
    color: var(--text-secondary) !important;
}

.dark-mode .text-black {
    color: var(--text-primary) !important;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: var(--text-primary) !important;
}

.dark-mode p {
    color: var(--text-secondary) !important;
}

.dark-mode label {
    color: var(--text-primary) !important;
}

.dark-mode span {
    color: inherit;
}

/* ===== Borders ===== */
.dark-mode .border-gray-100,
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
    border-color: var(--border-light) !important;
}

.dark-mode .border-black {
    border-color: var(--border-color) !important;
}

.dark-mode .divide-gray-200 > * + * {
    border-color: var(--border-light) !important;
}

/* ===== Modals & Overlays ===== */
.dark-mode .bg-black.bg-opacity-50,
.dark-mode .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode [class*="modal"] .bg-white,
.dark-mode [id*="Modal"] .bg-white,
.dark-mode [id*="modal"] .bg-white {
    background-color: var(--bg-card) !important;
}

/* ===== Dropdowns ===== */
.dark-mode .dropdown,
.dark-mode [class*="dropdown"] {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode option:hover {
    background-color: var(--bg-hover) !important;
}

.dark-mode option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ===== Navigation ===== */
.dark-mode nav,
.dark-mode header {
    background-color: var(--bg-card) !important;
}

.dark-mode .nav-header {
    background-color: var(--bg-card) !important;
}

/* ===== Status Badges - Pure black and white ===== */
/* All status badge backgrounds -> dark gray */
.dark-mode .bg-green-100,
.dark-mode .bg-green-50,
.dark-mode .bg-red-100,
.dark-mode .bg-red-50,
.dark-mode .bg-yellow-100,
.dark-mode .bg-yellow-50,
.dark-mode .bg-blue-100,
.dark-mode .bg-blue-50,
.dark-mode .bg-purple-100,
.dark-mode .bg-purple-50,
.dark-mode .bg-orange-100,
.dark-mode .bg-orange-50,
.dark-mode .bg-pink-100,
.dark-mode .bg-pink-50 {
    background-color: #1a1a1a !important;
}

/* ===== Links - gray/white only ===== */
.dark-mode a {
    color: #b0b0b0 !important;
}

.dark-mode a:hover {
    color: #ffffff !important;
}

/* Keep white text on colored buttons */
.dark-mode .text-white {
    color: #ffffff !important;
}

/* ===== Scrollbars - Subtle dark scrollbars ===== */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

/* Firefox scrollbar */
.dark-mode * {
    scrollbar-color: #333333 var(--bg-primary);
    scrollbar-width: thin;
}

/* ===== Icons ===== */
.dark-mode i[class*="bi-"] {
    color: inherit;
}

/* ===== Language Selector ===== */
.dark-mode .lang-selector {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ===== Specific Tailwind arbitrary color overrides ===== */
/* These are commonly used in templates */

/* Pastel backgrounds -> dark card */
.dark-mode .bg-\[\#FFEBEB\],
.dark-mode .bg-\[\#E8F5E9\],
.dark-mode .bg-\[\#FFF9E6\],
.dark-mode .bg-\[\#ecf0f1\],
.dark-mode .bg-\[\#E3F2FD\],
.dark-mode .bg-\[\#F3E5F5\],
.dark-mode .bg-\[\#FFF3E0\],
.dark-mode .bg-\[\#FFFDE7\],
.dark-mode .bg-\[\#F1F8E9\] {
    background-color: var(--bg-card) !important;
}

/* ===== PURE BLACK AND WHITE MODE ===== */
/* All colored backgrounds -> black/dark gray */
.dark-mode .bg-\[\#7DEDFF\],
.dark-mode .bg-\[\#A8D5FF\],
.dark-mode .bg-\[\#98EECC\],
.dark-mode .bg-\[\#A8E6CF\],
.dark-mode .bg-\[\#B4FF9F\],
.dark-mode .bg-\[\#C9F4AA\],
.dark-mode .bg-\[\#FFB4B4\],
.dark-mode .bg-\[\#FF6B6B\],
.dark-mode .bg-\[\#FFCDD2\],
.dark-mode .bg-\[\#FFB3BA\],
.dark-mode .bg-\[\#D4ADFC\],
.dark-mode .bg-\[\#DFCCFB\],
.dark-mode .bg-\[\#E1BEE7\],
.dark-mode .bg-\[\#E8B4F8\],
.dark-mode .bg-\[\#FFE0B2\],
.dark-mode .bg-\[\#FFCC80\],
.dark-mode .bg-\[\#FFE5CA\],
.dark-mode .bg-\[\#FFDFBA\],
.dark-mode .bg-\[\#FFD3B6\],
.dark-mode .bg-\[\#FFF59D\],
.dark-mode .bg-\[\#FFEB3B\],
.dark-mode .bg-\[\#FFE082\],
.dark-mode .bg-\[\#FF6B9D\] {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Page buttons - pure black/white */
.dark-mode .page-button {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-mode .page-button:hover {
    background-color: #252525 !important;
}

.dark-mode .page-button i {
    color: #e0e0e0 !important;
}

/* Admin badge - black/white */
.dark-mode .admin-badge {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* All stats boxes - same dark */
.dark-mode .bg-blue-50,
.dark-mode .bg-green-50,
.dark-mode .bg-purple-50,
.dark-mode .bg-red-50,
.dark-mode .bg-orange-50,
.dark-mode .bg-yellow-50,
.dark-mode .bg-pink-50,
.dark-mode .bg-indigo-50,
.dark-mode .bg-teal-50,
.dark-mode .bg-cyan-50,
.dark-mode .bg-gray-50 {
    background-color: #141414 !important;
}

/* All 100-level backgrounds */
.dark-mode .bg-blue-100,
.dark-mode .bg-green-100,
.dark-mode .bg-yellow-100,
.dark-mode .bg-red-100,
.dark-mode .bg-purple-100,
.dark-mode .bg-orange-100,
.dark-mode .bg-pink-100 {
    background-color: #1a1a1a !important;
}

/* ALL colored text -> white/gray only */
.dark-mode .text-purple-600,
.dark-mode .text-purple-700,
.dark-mode .text-purple-800,
.dark-mode .text-blue-600,
.dark-mode .text-blue-700,
.dark-mode .text-blue-800,
.dark-mode .text-orange-600,
.dark-mode .text-orange-700,
.dark-mode .text-orange-800,
.dark-mode .text-green-600,
.dark-mode .text-green-700,
.dark-mode .text-green-800,
.dark-mode .text-red-600,
.dark-mode .text-red-700,
.dark-mode .text-red-800,
.dark-mode .text-pink-600,
.dark-mode .text-pink-700,
.dark-mode .text-pink-800,
.dark-mode .text-indigo-600,
.dark-mode .text-indigo-700,
.dark-mode .text-indigo-800,
.dark-mode .text-teal-600,
.dark-mode .text-teal-700,
.dark-mode .text-teal-800,
.dark-mode .text-yellow-600,
.dark-mode .text-yellow-700,
.dark-mode .text-yellow-800,
.dark-mode .text-cyan-600,
.dark-mode .text-cyan-700,
.dark-mode .text-cyan-800 {
    color: #e0e0e0 !important;
}

/* Icons - all white/gray */
.dark-mode i[class*="bi-"] {
    color: #e0e0e0 !important;
}

/* Links - gray instead of blue */
.dark-mode a {
    color: #b0b0b0 !important;
}

.dark-mode a:hover {
    color: #ffffff !important;
}

/* Borders - dark gray */
.dark-mode .border-2,
.dark-mode .border {
    border-color: #333333 !important;
}

/* ===== Alerts & Notifications ===== */
.dark-mode .alert,
.dark-mode [class*="alert-"] {
    border-color: var(--border-color) !important;
    background-color: var(--bg-card) !important;
}

/* ===== Charts & Graphs ===== */
.dark-mode canvas {
    filter: brightness(0.9);
}

/* ===== Code/Pre blocks ===== */
.dark-mode pre,
.dark-mode code {
    background-color: #0e0e0e !important;
    color: var(--text-primary) !important;
}

/* ===== Empty states ===== */
.dark-mode .empty-state,
.dark-mode [class*="no-data"],
.dark-mode [class*="empty"] {
    color: var(--text-muted) !important;
}

/* ===== Print Styles - Force light mode for printing ===== */
@media print {
    body.dark-mode {
        background-color: white !important;
        color: black !important;
    }

    .dark-mode .neu-border,
    .dark-mode .bg-white {
        background-color: white !important;
        color: black !important;
        border-color: black !important;
    }

    .dark-mode table,
    .dark-mode thead,
    .dark-mode tbody,
    .dark-mode tr,
    .dark-mode td,
    .dark-mode th {
        background-color: white !important;
        color: black !important;
    }
}

/* ===== Theme Toggle Button Icons ===== */
.theme-icon-sun {
    display: none;
}

[data-theme="dark"] .theme-icon-moon {
    display: none !important;
}

[data-theme="dark"] .theme-icon-sun {
    display: inline !important;
}

/* ===== Transition for smooth theme switching ===== */
body,
.neu-border,
.neu-button,
.neu-input,
input, select, textarea,
table, thead, tbody, tr, td, th,
a, span, p, h1, h2, h3, h4, h5, h6 {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ===== Focus styles ===== */
.dark-mode *:focus-visible {
    outline-color: #555555 !important;
}

/* ===== Hover states for list items ===== */
.dark-mode li:hover {
    background-color: var(--bg-hover);
}

/* ===== Card shadows ===== */
.dark-mode .shadow,
.dark-mode .shadow-lg,
.dark-mode .shadow-md,
.dark-mode .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* ===== Ring utilities ===== */
.dark-mode .ring-1,
.dark-mode .ring-2 {
    --tw-ring-color: var(--border-color) !important;
}

/* ===== Backdrop blur elements ===== */
.dark-mode .backdrop-blur,
.dark-mode [class*="backdrop"] {
    background-color: rgba(15, 15, 15, 0.8) !important;
}