/* Dark Mode Styles for HKEVTrends */
/* Works with both old Tailwind design and new CSS design system */

/* Smooth transitions */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark {
    color-scheme: dark;
}

/* Toggle button icon visibility - supports both nav and floating buttons */
html.light #darkModeToggle .moon-icon,
html.light #darkModeToggleFloat .moon-icon,
html.dark #darkModeToggle .sun-icon,
html.dark #darkModeToggleFloat .sun-icon {
    display: none;
}

html.light #darkModeToggle .sun-icon,
html.light #darkModeToggleFloat .sun-icon,
html.dark #darkModeToggle .moon-icon,
html.dark #darkModeToggleFloat .moon-icon {
    display: block;
}

/* Dark mode overrides */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

html.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

html.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

html.dark .text-gray-800 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-700 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500 {
    color: #64748b !important;
}

html.dark .border-b,
html.dark .border-t,
html.dark .border {
    border-color: #334155 !important;
}

html.dark .border-gray-200 {
    border-color: #334155 !important;
}

html.dark .shadow,
html.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

html.dark .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #334155 !important;
}

/* Header & Footer */
html.dark header,
html.dark footer {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Cards */
html.dark .rounded-lg.shadow {
    background-color: #1e293b;
}

/* Tables */
html.dark table thead {
    background-color: #1e293b;
}

html.dark .divide-y > * {
    border-color: #334155;
}

html.dark table tbody tr:hover {
    background-color: #334155;
}

/* Forms */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #0ea5e9 !important;
}

/* Buttons */
html.dark .bg-sky-600 {
    background-color: #0284c7 !important;
}

html.dark .border-sky-600 {
    border-color: #0284c7 !important;
}

/* Charts - handled via Chart.js config */

/* Links */
html.dark .text-blue-600 {
    color: #38bdf8 !important;
}

html.dark .hover\:text-blue-600:hover {
    color: #7dd3fc !important;
}

/* Info boxes */
html.dark .bg-blue-50 {
    background-color: #1e3a5f !important;
}

html.dark .bg-sky-50 {
    background-color: #0c4a6e !important;
}

html.dark .border-blue-200 {
    border-color: #1e40af !important;
}

html.dark .border-blue-500 {
    border-color: #3b82f6 !important;
}

html.dark .border-sky-100 {
    border-color: #0369a1 !important;
}

html.dark .text-blue-800,
html.dark .text-blue-900 {
    color: #93c5fd !important;
}

/* Gradient backgrounds for highlighted sections */
html.dark .bg-gradient-to-r.from-blue-50,
html.dark .bg-gradient-to-r.from-sky-50 {
    background: linear-gradient(to right, #1e3a5f, #0c4a6e) !important;
}

/* Sky color tags */
html.dark .bg-sky-100 {
    background-color: #0c4a6e !important;
}

html.dark .text-sky-700 {
    color: #7dd3fc !important;
}

/* Gray tags */
html.dark .bg-gray-100 {
    background-color: #334155 !important;
}

/* Highlight boxes in blog (yellow) */
html.dark .highlight {
    background: linear-gradient(to right, #422006, #451a03) !important;
    border-color: #d97706 !important;
}

/* Skeleton loading */
html.dark .animate-pulse {
    background-color: #334155;
}

/* Navigation pills/tabs */
html.dark .rounded-full.border-gray-200 {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

html.dark .rounded-full.border-gray-200:hover {
    border-color: #0ea5e9 !important;
    color: #38bdf8 !important;
}

/* Prose for blog content */
html.dark .prose {
    color: #cbd5e1;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3 {
    color: #f1f5f9 !important;
}

html.dark .prose p {
    color: #cbd5e1;
}

html.dark .prose a {
    color: #38bdf8 !important;
}

html.dark .prose a:hover {
    color: #7dd3fc !important;
}

html.dark .prose strong {
    color: #f1f5f9;
}

html.dark .prose blockquote {
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html.dark .prose th {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark .prose td {
    border-color: #334155 !important;
}

html.dark .prose ul li,
html.dark .prose ol li {
    color: #cbd5e1;
}

/* Article header border */
html.dark .border-gray-100 {
    border-color: #334155 !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

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

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ========== New Design System Dark Mode ========== */

/* Navigation */
html.dark .nav-header {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: #334155 !important;
}

html.dark .nav-logo-text {
    color: #e2e8f0;
}

html.dark .nav-link:visited {
    color: #334155;
}

html.dark .nav-link:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

html.dark .nav-toggle {
    color: #94a3b8;
}

html.dark .nav-toggle:hover {
    background: #334155;
    color: #f1f5f9;
}

/* Mobile Menu */
html.dark .mobile-menu-content {
    background: #1e293b;
}

html.dark .mobile-nav-link {
    color: #cbd5e1;
}

html.dark .mobile-nav-link:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Hero Section */
html.dark .hero {
    background: linear-gradient(135deg, rgba(2, 44, 34, 0.9) 0%, rgba(6, 78, 59, 0.0) 50%, rgba(15, 118, 110, 0.9) 100%),
                url('/assets/hero-banner2.jpg') center/cover no-repeat;
}

html.dark .hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 1px 1px #333;
}

/* KPI Cards */
html.dark .kpi-card {
    background: #1e293b;
    border-color: #334155;
}

html.dark .kpi-label {
    color: #94a3b8;
}

html.dark .kpi-value {
    color: #f1f5f9;
}

html.dark .kpi-icon.green {
    background: rgba(16, 185, 129, 0.2);
}

html.dark .kpi-icon.blue {
    background: rgba(59, 130, 246, 0.2);
}

html.dark .kpi-icon.amber {
    background: rgba(245, 158, 11, 0.2);
}

html.dark .kpi-icon.cyan {
    background: rgba(14, 165, 233, 0.2);
}

html.dark .kpi-change.positive {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

html.dark .kpi-change.negative {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Cards */
html.dark .card,
html.dark .chart-card,
html.dark .table-container {
    background: #1e293b;
    border-color: #334155;
}

html.dark .card-header,
html.dark .chart-header,
html.dark .table-header {
    border-color: #334155;
}

html.dark .card-footer {
    background: #0f172a;
    border-color: #334155;
}

/* Info Box */
html.dark .info-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
    border-color: #10b981;
}

html.dark .info-box-title {
    color: #34d399;
}

html.dark .info-box-content {
    color: #cbd5e1;
}

html.dark .info-box-content strong {
    color: #f1f5f9;
}

html.dark .info-box-links {
    border-color: rgba(16, 185, 129, 0.2);
}

html.dark .info-box-link {
    color: #34d399;
}

/* Chart Toggle */
html.dark .chart-toggle {
    background: #0f172a;
}

html.dark .chart-toggle-btn {
    color: #94a3b8;
}

html.dark .chart-toggle-btn.active {
    background: #1e293b;
    color: #f1f5f9;
}

/* Tables */
html.dark .data-table th {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

html.dark .data-table td {
    color: #e2e8f0;
    border-color: #334155;
}

html.dark .data-table tbody tr:hover {
    background: #334155;
}

/* Video Cards */
html.dark .video-card {
    background: #1e293b;
    border-color: #334155;
}

html.dark .video-title {
    color: #f1f5f9;
}

html.dark .video-meta {
    color: #94a3b8;
}

/* Footer */
html.dark .footer {
    background: #1e293b;
    border-color: #334155;
}

html.dark .footer-logo-text {
    color: #f1f5f9;
}

html.dark .footer-desc {
    color: #94a3b8;
}

html.dark .footer-links-group h4 {
    color: #64748b;
}

html.dark .footer-links-group a {
    color: #cbd5e1;
}

html.dark .footer-links-group a:hover {
    color: #10b981;
}

html.dark .footer-bottom {
    border-color: #334155;
    color: #64748b;
}

/* Buttons */
html.dark .btn-secondary {
    background: #334155;
    color: #f1f5f9;
}

html.dark .btn-secondary:hover {
    background: #475569;
}

html.dark .btn-outline {
    border-color: #475569;
    color: #e2e8f0;
}

html.dark .btn-outline:hover {
    background: #334155;
}

/* Section Titles */
html.dark .section-title {
    color: #f1f5f9;
}

html.dark .section-subtitle {
    color: #94a3b8;
}

/* Skeleton Loading */
html.dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}

/* Scroll Hint */
html.dark .scroll-hint::after {
    background: linear-gradient(to left, #1e293b, transparent);
}

/* ========== Dark Mode overrides for alternate layout theme (theme-alt) ========== */
html.dark body.theme-alt {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(5, 150, 105, 0.85)),
        url('/assets/hero-banner-alt2.png') center/cover no-repeat;
}

html.dark body.theme-alt .hero {
    background: transparent !important;
}

html.dark body.theme-alt .card,
html.dark body.theme-alt .chart-card,
html.dark body.theme-alt .table-container {
    background: rgba(15, 23, 42, 0.96);
    border-color: #1f2937;
}

html.dark body.theme-alt .explanation-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(8, 47, 73, 0.96));
    border-color: #0f766e;
}

html.dark body.theme-alt .brand-table th {
    background: rgba(15, 23, 42, 0.98);
}

html.dark body.theme-alt .brand-table tbody tr:hover {
    background: rgba(30, 64, 175, 0.18);
}