/* Dark Mode Styles for Turbo Toolz */

/* Base Dark Mode */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e5e5e5;
}

body.dark-mode header {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
}

body.dark-mode footer {
    background-color: #0a0a0a;
}

body.dark-mode footer h3,
body.dark-mode footer h4 {
    color: #f5f5f5 !important;
}

body.dark-mode footer a {
    color: #d1d1d1 !important;
}

body.dark-mode footer a:hover {
    color: #60a5fa !important;
}

body.dark-mode footer p {
    color: #8a8a8a !important;
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: #f5f5f5;
}

body.dark-mode p {
    color: #d1d1d1;
}

body.dark-mode div {
    color: inherit;
}

body.dark-mode span {
    color: inherit;
}

/* Links - Remove blue color in dark mode */
body.dark-mode a {
    color: #e5e5e5 !important;
}

body.dark-mode a:hover {
    color: #60a5fa !important;
}

/* Nav links specifically */
body.dark-mode nav a {
    color: #d1d1d1 !important;
}

body.dark-mode nav a:hover {
    color: #60a5fa !important;
}

body.dark-mode nav a.text-blue-600,
body.dark-mode nav a.font-semibold {
    color: #60a5fa !important;
}

/* Backgrounds */
body.dark-mode .bg-white {
    background-color: #2d2d2d !important;
}

body.dark-mode .bg-gray-50 {
    background-color: #1f1f1f !important;
}

body.dark-mode .bg-gray-100 {
    background-color: #2a2a2a !important;
}

body.dark-mode .bg-gray-200 {
    background-color: #353535 !important;
}

/* Text Colors */
body.dark-mode .text-gray-900 {
    color: #f5f5f5 !important;
}

body.dark-mode .text-gray-800 {
    color: #e5e5e5 !important;
}

body.dark-mode .text-gray-700 {
    color: #d1d1d1 !important;
}

body.dark-mode .text-gray-600 {
    color: #a8a8a8 !important;
}

body.dark-mode .text-gray-500 {
    color: #8a8a8a !important;
}

body.dark-mode .text-gray-400 {
    color: #6b6b6b !important;
}

/* Remove blue text colors in dark mode - make them light gray instead */
body.dark-mode .text-blue-600 {
    color: #d1d1d1 !important;
}

body.dark-mode .text-blue-500 {
    color: #d1d1d1 !important;
}

body.dark-mode .text-blue-700 {
    color: #d1d1d1 !important;
}

/* But keep blue for hover states */
body.dark-mode .hover\:text-blue-600:hover,
body.dark-mode .hover\:text-blue-700:hover {
    color: #60a5fa !important;
}

/* Keep colored text for specific utility classes that need contrast */
body.dark-mode .text-green-600 {
    color: #86efac !important;
}

body.dark-mode .text-red-600 {
    color: #fca5a5 !important;
}

body.dark-mode .text-purple-600 {
    color: #c4b5fd !important;
}

/* SVG and Icon colors - Keep logos visible but not jarring blue */
body.dark-mode svg.text-blue-600 {
    color: #60a5fa !important;
}

body.dark-mode svg.text-green-600 {
    color: #86efac !important;
}

body.dark-mode svg.text-purple-600 {
    color: #c4b5fd !important;
}

/* Borders */
body.dark-mode .border-gray-200 {
    border-color: #404040 !important;
}

body.dark-mode .border-gray-300 {
    border-color: #4a4a4a !important;
}

body.dark-mode .border-blue-200 {
    border-color: #1e3a5f !important;
}

body.dark-mode .border-blue-300 {
    border-color: #1e3a5f !important;
}

body.dark-mode .border-green-200,
body.dark-mode .border-green-300 {
    border-color: #1e4a3a !important;
}

body.dark-mode .border-purple-200,
body.dark-mode .border-purple-300 {
    border-color: #3a1e5f !important;
}

body.dark-mode .border-red-200,
body.dark-mode .border-red-300 {
    border-color: #5f1e1e !important;
}

body.dark-mode .border-yellow-200,
body.dark-mode .border-yellow-300 {
    border-color: #5f5a1e !important;
}

body.dark-mode .border-orange-200,
body.dark-mode .border-orange-300 {
    border-color: #5f3a1e !important;
}

/* Cards & Components */
body.dark-mode .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode input[type="number"],
body.dark-mode input[type="password"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="file"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #2a2a2a !important;
    border-color: #4a4a4a !important;
    color: #e5e5e5 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #6b6b6b !important;
}

/* Buttons - ensure text is readable */
body.dark-mode button:not([id="darkModeToggle"]) {
    /* Buttons keep their original colors for better visibility */
}

body.dark-mode button {
    color: inherit;
}

/* Button text colors */
body.dark-mode .bg-blue-600,
body.dark-mode .bg-green-600,
body.dark-mode .bg-purple-600,
body.dark-mode .bg-red-600,
body.dark-mode .bg-orange-600,
body.dark-mode .bg-yellow-600 {
    color: white !important;
}

/* Gray buttons need dark text in dark mode */
body.dark-mode .bg-gray-200,
body.dark-mode .bg-gray-300 {
    color: #1a1a1a !important;
}

/* Specific component overrides */
body.dark-mode .info-card {
    background-color: #2a2a2a !important;
    border-color: #4a4a4a !important;
}

body.dark-mode .blog-card {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
}

body.dark-mode .key {
    background-color: #2a2a2a !important;
    border-color: #4a4a4a !important;
    color: #e5e5e5 !important;
}

body.dark-mode .time-zone-card {
    background-color: #2a2a2a !important;
}

/* Article/Blog cards */
body.dark-mode article {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

/* Ensure colored backgrounds with gradients work in dark mode */
body.dark-mode .from-blue-50,
body.dark-mode .from-green-50,
body.dark-mode .from-purple-50,
body.dark-mode .from-orange-50 {
    background-color: #2a2a2a !important;
}

body.dark-mode .to-blue-50,
body.dark-mode .to-cyan-50,
body.dark-mode .to-pink-50,
body.dark-mode .to-teal-50,
body.dark-mode .to-yellow-50 {
    background-color: #2a2a2a !important;
}

/* Hover states */
body.dark-mode .hover\:bg-gray-100:hover {
    background-color: #3a3a3a !important;
}

/* Gradient backgrounds for dark mode */
body.dark-mode .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, #1f1f1f, #2d2d2d) !important;
}

body.dark-mode .bg-gradient-to-r {
    background-image: none !important;
    background-color: #2d2d2d !important;
}

body.dark-mode .bg-gradient-to-br {
    background-image: none !important;
    background-color: #2a2a2a !important;
}

/* Specific colored gradients in dark mode */
body.dark-mode .bg-gradient-to-r.from-blue-600,
body.dark-mode .bg-gradient-to-r.from-purple-600 {
    /* Keep vibrant colored gradients for buttons and special sections */
    background-image: inherit !important;
    background-color: inherit !important;
}

/* Article content - Override hardcoded colors */
body.dark-mode .article-content h2,
body.dark-mode .article-content h3,
body.dark-mode .article-content h4 {
    color: #f5f5f5 !important;
}

body.dark-mode .article-content p,
body.dark-mode .article-content li,
body.dark-mode .article-content ul,
body.dark-mode .article-content ol {
    color: #d1d1d1 !important;
}

body.dark-mode .article-content strong {
    color: #f5f5f5 !important;
}

/* Code and Pre elements */
body.dark-mode code {
    background-color: #2a2a2a !important;
    color: #93c5fd !important;
}

body.dark-mode pre {
    background-color: #1f1f1f !important;
    border: 1px solid #4a4a4a !important;
    color: #d1d1d1 !important;
}

/* Inline formatting */
body.dark-mode strong,
body.dark-mode b {
    color: #f5f5f5 !important;
}

body.dark-mode em,
body.dark-mode i {
    color: #d1d1d1 !important;
}

body.dark-mode mark {
    background-color: #5f5a1e !important;
    color: #fde68a !important;
}

/* Lists */
body.dark-mode ul,
body.dark-mode ol {
    color: #d1d1d1 !important;
}

body.dark-mode li {
    color: #d1d1d1 !important;
}

/* Blockquotes */
body.dark-mode blockquote {
    border-left-color: #4a4a4a !important;
    color: #d1d1d1 !important;
    background-color: #2a2a2a !important;
}

/* Horizontal rules */
body.dark-mode hr {
    border-color: #4a4a4a !important;
}

/* Disabled states */
body.dark-mode :disabled {
    opacity: 0.5;
    color: #6b6b6b !important;
}

/* Loading and animations */
body.dark-mode .loading-spinner {
    border-color: #4a4a4a !important;
    border-top-color: #60a5fa !important;
}

/* Special colored backgrounds in dark mode */
body.dark-mode .bg-blue-50 {
    background-color: #1e3a5f !important;
}

body.dark-mode .bg-green-50 {
    background-color: #1e4a3a !important;
}

body.dark-mode .bg-purple-50 {
    background-color: #3a1e5f !important;
}

body.dark-mode .bg-orange-50 {
    background-color: #5f3a1e !important;
}

body.dark-mode .bg-red-50 {
    background-color: #5f1e1e !important;
}

body.dark-mode .bg-yellow-50 {
    background-color: #5f5a1e !important;
}

/* Light colored backgrounds (100 series) */
body.dark-mode .bg-blue-100 {
    background-color: #1e3a5f !important;
}

body.dark-mode .bg-green-100 {
    background-color: #1e4a3a !important;
}

body.dark-mode .bg-purple-100 {
    background-color: #3a1e5f !important;
}

body.dark-mode .bg-red-100 {
    background-color: #5f1e1e !important;
}

body.dark-mode .bg-yellow-100 {
    background-color: #5f5a1e !important;
}

body.dark-mode .bg-orange-100 {
    background-color: #5f3a1e !important;
}

body.dark-mode .bg-gray-100 {
    background-color: #2a2a2a !important;
}

/* Colored text adjustments */
body.dark-mode .text-blue-900 {
    color: #93c5fd !important;
}

body.dark-mode .text-green-900 {
    color: #86efac !important;
}

body.dark-mode .text-purple-900 {
    color: #c4b5fd !important;
}

body.dark-mode .text-orange-900 {
    color: #fdba74 !important;
}

body.dark-mode .text-red-700,
body.dark-mode .text-red-800,
body.dark-mode .text-red-900 {
    color: #fca5a5 !important;
}

body.dark-mode .text-yellow-800,
body.dark-mode .text-yellow-900 {
    color: #fde68a !important;
}

/* Label and small text colors */
body.dark-mode label {
    color: #d1d1d1 !important;
}

body.dark-mode .text-sm,
body.dark-mode .text-xs {
    color: inherit;
}

/* White text remains white - for buttons and badges */
body.dark-mode .text-white {
    color: #ffffff !important;
}

/* Ensure semibold/bold text is visible */
body.dark-mode .font-semibold,
body.dark-mode .font-bold {
    color: inherit;
}

/* Specific heading colors in sections */
body.dark-mode h4.text-xl,
body.dark-mode h3.text-2xl,
body.dark-mode h2.text-3xl,
body.dark-mode h1.text-4xl {
    color: #f5f5f5 !important;
}

/* Tab buttons */
body.dark-mode .tab-btn {
    color: #d1d1d1 !important;
}

body.dark-mode .tab-btn.active {
    color: #60a5fa !important;
}

/* Badges and Pills */
body.dark-mode .badge,
body.dark-mode .pill {
    background-color: #2a2a2a !important;
    color: #d1d1d1 !important;
    border-color: #4a4a4a !important;
}

/* Dropdown menus */
body.dark-mode select option {
    background-color: #2a2a2a !important;
    color: #e5e5e5 !important;
}

/* Alert and Message boxes */
body.dark-mode .alert,
body.dark-mode [class*="alert-"],
body.dark-mode [class*="message"] {
    color: inherit !important;
}

/* Success messages */
body.dark-mode .bg-green-100.text-green-800,
body.dark-mode .bg-green-50.text-green-900 {
    background-color: #1e4a3a !important;
    color: #86efac !important;
}

/* Error messages */
body.dark-mode .bg-red-100.text-red-800,
body.dark-mode .bg-red-50.text-red-900 {
    background-color: #5f1e1e !important;
    color: #fca5a5 !important;
}

/* Warning messages */
body.dark-mode .bg-yellow-100.text-yellow-800,
body.dark-mode .bg-yellow-50.text-yellow-900 {
    background-color: #5f5a1e !important;
    color: #fde68a !important;
}

/* Info messages */
body.dark-mode .bg-blue-100.text-blue-800,
body.dark-mode .bg-blue-50.text-blue-900 {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
}

/* Form elements special states */
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: #333333 !important;
    border-color: #60a5fa !important;
}

/* Markdown preview in dark mode */
body.dark-mode .markdown-preview {
    color: #d1d1d1 !important;
}

body.dark-mode .markdown-preview code {
    background-color: #2a2a2a !important;
    color: #93c5fd !important;
}

body.dark-mode .markdown-preview pre {
    background-color: #1f1f1f !important;
    border: 1px solid #4a4a4a;
}

body.dark-mode .markdown-preview a {
    color: #60a5fa !important;
}

/* Map containers */
body.dark-mode #mapContainer {
    background-color: #1f1f1f !important;
}

/* Additional dark mode improvements */
body.dark-mode .prose h2,
body.dark-mode .prose h3,
body.dark-mode .prose h4 {
    color: #f5f5f5 !important;
}

body.dark-mode .prose p,
body.dark-mode .prose li {
    color: #d1d1d1 !important;
}

body.dark-mode .prose a {
    color: #60a5fa !important;
}

body.dark-mode .prose code {
    background-color: #2a2a2a !important;
    color: #93c5fd !important;
}

/* Dark mode hover effects */
body.dark-mode .hover\:bg-gray-100:hover {
    background-color: #3a3a3a !important;
}

body.dark-mode .hover\:bg-blue-700:hover {
    background-color: #1e40af !important;
}

/* Hero section and special sections remain visible */
body.dark-mode section {
    color: inherit;
}

body.dark-mode section h1,
body.dark-mode section h2,
body.dark-mode section h3 {
    color: #f5f5f5 !important;
}

body.dark-mode section p {
    color: #d1d1d1 !important;
}

/* Tables in dark mode */
body.dark-mode table {
    border-color: #4a4a4a !important;
}

body.dark-mode th,
body.dark-mode td {
    border-color: #4a4a4a !important;
}

/* Fullscreen dark mode support for notepad */
body.dark-mode .notepad-fullscreen {
    background-color: #1a1a1a !important;
}

/* Transition for smooth mode switching */
body,
header,
footer,
.bg-white,
.bg-gray-50,
.bg-gray-100,
input,
textarea,
select,
button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}