/* Theme System - CSS Variables Override */
/* Light theme (default) colors */
:root {
  /* Background colors */
  --bg-body-from: #DAD7C5;
  --bg-body-to: #D8D6C3;
  --bg-header: #F5F3ED;
  --bg-nav: #EDEBDC;
  --bg-hover: #E5E1D5;
  --bg-white: #FFFFFF;
  
  /* Border colors */
  --border-primary: #E5E1D5;
  --border-secondary: #D8D6C3;
  
  /* Text colors */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6B7280;
  --text-muted: #9CA3AF;
  
  /* Brand colors (stay the same) */
  --brand-primary: #AE2012;
  --brand-hover: #8B1A0F;
  
  /* Component specific */
  --pagination-bg: #F5F3ED;
  --pagination-border: #E5E1D5;
  --pagination-disabled: #EDEBDC;
}

/* Dark theme colors */
html.dark-theme {
  /* Background colors */
  --bg-body-from: #1a1a1a;
  --bg-body-to: #0f0f0f;
  --bg-header: #1f1f1f;
  --bg-nav: #2a2a2a;
  --bg-hover: #333333;
  --bg-white: #252525;
  
  /* Border colors */
  --border-primary: #3a3a3a;
  --border-secondary: #404040;
  
  /* Text colors */
  --text-primary: #e5e5e5;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-muted: #6b7280;
  
  /* Component specific */
  --pagination-bg: #2a2a2a;
  --pagination-border: #3a3a3a;
  --pagination-disabled: #333333;
}

/* Apply theme colors to body gradient */
html.dark-theme body {
  background-image: linear-gradient(to bottom, var(--bg-body-from), var(--bg-body-to)) !important;
}

/* Header override */
html.dark-theme header {
  background-color: var(--bg-header) !important;
  border-color: var(--border-primary) !important;
}

/* Theme switcher button - fix contrast in dark mode */
html.dark-theme #theme-switcher,
html.dark-theme #theme-switcher-mobile {
  background-color: var(--bg-nav) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

html.dark-theme #theme-switcher:hover,
html.dark-theme #theme-switcher-mobile:hover {
  background-color: var(--bg-hover) !important;
}

html.dark-theme #theme-switcher svg,
html.dark-theme #theme-switcher-mobile svg {
  color: var(--text-primary) !important;
  filter: none !important;
}

/* Navigation override */
html.dark-theme nav {
  background-color: var(--bg-nav) !important;
  border-color: var(--border-primary) !important;
}

/* Navigation selected item - lighter text for better contrast on dark background */
html.dark-theme nav a[class*="border-[#AE2012]"]:not([class*="bg-[#AE2012]"]) {
  color: #d1d5db !important; /* Light gray for selected nav items */
}

/* Go to top button - fix contrast */
html.dark-theme #top-btn {
  color: var(--text-primary) !important;
  background-color: var(--bg-nav) !important;
  border: 1px solid var(--border-primary) !important;
}

html.dark-theme #top-btn:hover {
  background-color: var(--bg-hover) !important;
}

html.dark-theme #top-btn svg {
  color: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
  filter: none !important;
}

/* Text color overrides */
html.dark-theme .text-gray-900,
html.dark-theme .text-gray-800,
html.dark-theme .text-gray-700 {
  color: var(--text-primary) !important;
}

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

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

/* Font semibold and bold text - ensure proper contrast */
html.dark-theme .font-semibold,
html.dark-theme .font-bold {
  color: var(--text-primary) !important;
}

/* Stats numbers - ensure they stand out */
html.dark-theme h6.font-semibold,
html.dark-theme h6[class*="font-semibold"] {
  color: var(--text-primary) !important;
}

/* Background overrides */
html.dark-theme .bg-white {
  background-color: var(--bg-white) !important;
}

html.dark-theme [class*="bg-[#F5F3ED]"],
html.dark-theme [class*="bg-\\[\\#F5F3ED\\]"] {
  background-color: var(--bg-header) !important;
}

html.dark-theme [class*="bg-[#EDEBDC]"],
html.dark-theme [class*="bg-\\[\\#EDEBDC\\]"] {
  background-color: var(--bg-nav) !important;
}

html.dark-theme [class*="bg-[#E5E1D5]"],
html.dark-theme [class*="bg-\\[\\#E5E1D5\\]"],
html.dark-theme [class*="hover:bg-[#E5E1D5]"],
html.dark-theme [class*="hover:bg-\\[\\#E5E1D5\\]"]:hover {
  background-color: var(--bg-hover) !important;
}

html.dark-theme .bg-gray-100,
html.dark-theme .bg-gray-50 {
  background-color: var(--bg-nav) !important;
}

/* Comment section on subtitle list - slightly different gray tone */
html.dark-theme .bg-gray-50.rounded-lg.p-4 {
  background-color: #1f1f1f !important; /* Slightly lighter than nav for subtle distinction */
  border-color: var(--border-secondary) !important;
}

/* Comments - fix background and border */
html.dark-theme .bg-white.rounded-lg.p-6[class*="border-gray-100"],
html.dark-theme .bg-white.rounded-lg.shadow-sm.p-6 {
  background-color: #1f1f1f !important; /* Distinct gray for comments */
  border: 1px solid var(--border-primary) !important; /* Thin border */
}

/* No comments placeholder */
html.dark-theme .bg-gray-50.border.border-gray-200.rounded-lg {
  background-color: var(--bg-nav) !important;
  border: 1px solid var(--border-primary) !important;
}

/* Border overrides */
html.dark-theme [class*="border-[#E5E1D5]"],
html.dark-theme [class*="border-\\[\\#E5E1D5\\]"] {
  border-color: var(--border-primary) !important;
}

html.dark-theme [class*="border-[#D8D6C3]"],
html.dark-theme [class*="border-\\[\\#D8D6C3\\]"] {
  border-color: var(--border-secondary) !important;
}

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

/* Form inputs */
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select {
  background-color: var(--bg-white) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

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

html.dark-theme input:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus {
  border-color: var(--brand-primary) !important;
}

/* Dropdowns and menus */
html.dark-theme [role="menu"] {
  background-color: var(--bg-header) !important;
  border-color: var(--border-primary) !important;
}

/* Cards and containers */
html.dark-theme .shadow-lg,
html.dark-theme .shadow-md,
html.dark-theme .shadow-sm {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Hover states - preserve interaction feedback */
html.dark-theme [class*="hover:bg-gray-50"]:hover,
html.dark-theme [class*="hover:bg-gray-100"]:hover {
  background-color: var(--bg-hover) !important;
}

html.dark-theme [class*="hover:bg-[#EDEBDC]"]:hover {
  background-color: var(--bg-hover) !important;
}

/* Brand colors remain the same in both themes */
html.dark-theme .bg-\[\#AE2012\],
html.dark-theme [class*="bg-[#AE2012]"] {
  background-color: var(--brand-primary) !important;
}

html.dark-theme .text-\[\#AE2012\],
html.dark-theme [class*="text-[#AE2012]"] {
  color: var(--brand-primary) !important;
}

/* Footer override */
html.dark-theme footer {
  background-color: var(--bg-header) !important;
  border-color: var(--border-primary) !important;
}

/* Footer gradient override - force solid color in dark mode */
html.dark-theme footer[class*="bg-gradient"] {
  background-image: none !important;
  background-color: var(--bg-header) !important;
}

/* Footer bottom bar with brand gradient - keep it */
html.dark-theme footer [class*="bg-gradient-to-r"] {
  /* Brand gradient bar stays as is */
  background-image: linear-gradient(to right, var(--brand-primary), #BB3E03, var(--brand-primary)) !important;
}

/* Footer headings */
html.dark-theme footer h2,
html.dark-theme footer h3 {
  color: var(--brand-primary) !important;
}

/* Footer links */
html.dark-theme footer a:not([class*="bg-"]) {
  color: var(--text-secondary) !important;
}

html.dark-theme footer a:not([class*="bg-"]):hover {
  color: var(--brand-primary) !important;
}

/* Footer text colors */
html.dark-theme footer .text-gray-700 {
  color: var(--text-secondary) !important;
}

html.dark-theme footer [class*="text-[#7f431e]"] {
  color: var(--brand-primary) !important;
}

/* Cookie consent banner */
html.dark-theme #cookie-consent {
  background-color: transparent !important;
}

html.dark-theme #cookie-consent > div > div {
  background-color: var(--bg-header) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme #cookie-consent .bg-orange-50 {
  background-color: var(--bg-header) !important;
}

html.dark-theme #cookie-consent .text-gray-800 {
  color: var(--text-primary) !important;
}

html.dark-theme #cookie-consent .border-gray-400 {
  border-color: var(--border-primary) !important;
}

/* Sidebar override */
html.dark-theme aside,
html.dark-theme [class*="sidebar"] {
  background-color: var(--bg-white) !important;
}

/* Subtitle list items / cards */
html.dark-theme article,
html.dark-theme [class*="subtitle-item"],
html.dark-theme [class*="movie-card"],
html.dark-theme [class*="trailer-card"] {
  background-color: var(--bg-white) !important;
  border-color: var(--border-primary) !important;
}

/* Generic card/box components */
html.dark-theme .bg-gray-50,
html.dark-theme .bg-gray-100 {
  background-color: var(--bg-white) !important;
}

/* Ensure all white backgrounds get dark theme */
html.dark-theme [style*="background-color: white"],
html.dark-theme [style*="background-color: #fff"],
html.dark-theme [style*="background-color: #FFF"],
html.dark-theme [style*="background-color: #ffffff"],
html.dark-theme [style*="background-color: #FFFFFF"] {
  background-color: var(--bg-white) !important;
}

/* Links in dark theme */
html.dark-theme a:not([class*="bg-"]):not([class*="text-white"]) {
  color: var(--text-secondary);
}

html.dark-theme a:hover:not([class*="bg-"]):not([class*="text-white"]) {
  color: var(--text-primary);
}

/* Dividers and separators */
html.dark-theme hr,
html.dark-theme .border-t,
html.dark-theme .border-b,
html.dark-theme .border-l,
html.dark-theme .border-r {
  border-color: var(--border-primary) !important;
}

/* Tables */
html.dark-theme table {
  background-color: var(--bg-white) !important;
  color: var(--text-primary) !important;
}

html.dark-theme th,
html.dark-theme td {
  border-color: var(--border-primary) !important;
}

html.dark-theme thead {
  background-color: var(--bg-nav) !important;
}

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

/* Form inputs - fix light backgrounds in dark mode */
html.dark-theme input[type="text"],
html.dark-theme input[type="password"],
html.dark-theme input[type="email"],
html.dark-theme input[type="number"],
html.dark-theme input[type="search"],
html.dark-theme input[type="tel"],
html.dark-theme input[type="url"],
html.dark-theme input[type="file"],
html.dark-theme textarea,
html.dark-theme select {
  background-color: var(--bg-nav) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme input[type="text"]:focus,
html.dark-theme input[type="password"]:focus,
html.dark-theme input[type="email"]:focus,
html.dark-theme input[type="number"]:focus,
html.dark-theme input[type="search"]:focus,
html.dark-theme input[type="tel"]:focus,
html.dark-theme input[type="url"]:focus,
html.dark-theme input[type="file"]:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus {
  border-color: #dc2626 !important;
  background-color: var(--bg-white) !important;
}

/* Form labels - fix contrast */
html.dark-theme label {
  color: var(--text-primary) !important;
}

/* Form legends and helper text */
html.dark-theme .text-gray-500,
html.dark-theme p[class*="text-gray-500"] {
  color: var(--text-tertiary) !important;
}

/* Checkboxes and radio buttons */
html.dark-theme input[type="checkbox"],
html.dark-theme input[type="radio"] {
  background-color: var(--bg-nav) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme input[type="checkbox"]:checked,
html.dark-theme input[type="radio"]:checked {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Submit buttons and red buttons - enhance visibility */
html.dark-theme input[type="submit"],
html.dark-theme button[type="submit"],
html.dark-theme .bg-red-700,
html.dark-theme [class*="bg-red-700"] {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

html.dark-theme input[type="submit"]:hover,
html.dark-theme button[type="submit"]:hover,
html.dark-theme .bg-red-700:hover,
html.dark-theme [class*="bg-red-700"]:hover,
html.dark-theme .hover\:bg-red-800:hover {
  background-color: #b91c1c !important;
}

/* Action buttons on subtitle lists - Professional, minimal design for dark theme */

/* Green buttons - subtle differentiation for positive actions (download, view) */
/* Slate buttons - professional style for action buttons */
html.dark-theme .bg-slate-600,
html.dark-theme a[class*="bg-slate-600"],
html.dark-theme button[class*="bg-slate-600"] {
  background-color: #2d3748 !important; /* Professional dark gray */
  color: #d1d5db !important; /* Neutral light gray text */
  border: 1px solid #4a5568 !important; /* Subtle border */
}

html.dark-theme .bg-slate-600:hover,
html.dark-theme a[class*="bg-slate-600"]:hover,
html.dark-theme button[class*="bg-slate-600"]:hover,
html.dark-theme .hover\:bg-slate-700:hover {
  background-color: #1a202c !important; /* Slightly darker on hover */
  color: #e5e7eb !important; /* Brighter text */
  border-color: #718096 !important; /* Lighter border on hover */
}

/* Red-800 buttons - professional deep red style */
html.dark-theme .bg-red-800,
html.dark-theme a[class*="bg-red-800"],
html.dark-theme button[class*="bg-red-800"] {
  background-color: #2d3748 !important; /* Professional dark gray base */
  color: #d1d5db !important; /* Neutral light gray text */
  border: 1px solid #4a5568 !important; /* Subtle border */
}

html.dark-theme .bg-red-800:hover,
html.dark-theme a[class*="bg-red-800"]:hover,
html.dark-theme button[class*="bg-red-800"]:hover,
html.dark-theme .hover\:bg-red-900:hover {
  background-color: #1a202c !important; /* Slightly darker on hover */
  color: #e5e7eb !important; /* Brighter text */
  border-color: #718096 !important; /* Lighter border on hover */
}

/* Green-600 buttons - professional style for download/positive actions */
html.dark-theme .bg-green-600,
html.dark-theme a[class*="bg-green-600"],
html.dark-theme button[class*="bg-green-600"] {
  background-color: #2d3748 !important; /* Professional dark gray base */
  color: #d1d5db !important; /* Neutral light gray text */
  border: 1px solid #4a5568 !important; /* Subtle border */
}

html.dark-theme .bg-green-600:hover,
html.dark-theme a[class*="bg-green-600"]:hover,
html.dark-theme button[class*="bg-green-600"]:hover,
html.dark-theme .hover\:bg-green-700:hover {
  background-color: #1a202c !important; /* Slightly darker on hover */
  color: #e5e7eb !important; /* Brighter text */
  border-color: #718096 !important; /* Lighter border on hover */
}

/* Blue buttons - subtle differentiation for informational actions (details, info) */
html.dark-theme .bg-blue-600,
html.dark-theme a[class*="bg-blue-600"],
html.dark-theme button[class*="bg-blue-600"] {
  background-color: #2d3748 !important; /* Professional dark gray */
  color: #d1d5db !important; /* Neutral light gray text */
  border: 1px solid #4a5568 !important; /* Subtle border */
}

html.dark-theme .bg-blue-600:hover,
html.dark-theme a[class*="bg-blue-600"]:hover,
html.dark-theme button[class*="bg-blue-600"]:hover,
html.dark-theme .hover\:bg-blue-700:hover {
  background-color: #1a202c !important; /* Slightly darker on hover */
  color: #e5e7eb !important; /* Brighter text */
  border-color: #718096 !important; /* Lighter border on hover */
}

/* Brand red buttons (bg-[#AE2012]) - minimal emphasis for primary actions */
html.dark-theme a[class*="bg-[#AE2012]"],
html.dark-theme button[class*="bg-[#AE2012]"] {
  background-color: #2d3748 !important; /* Professional dark gray */
  color: #d1d5db !important; /* Neutral light gray text */
  border: 1px solid #4a5568 !important; /* Subtle border */
}

html.dark-theme a[class*="bg-[#AE2012]"]:hover,
html.dark-theme button[class*="bg-[#AE2012]"]:hover {
  background-color: #1a202c !important; /* Slightly darker on hover */
  color: #e5e7eb !important; /* Brighter text */
  border-color: #718096 !important; /* Lighter border on hover */
}

/* Login/Register page container backgrounds */
html.dark-theme #content[class*="bg-[#DFDCCC]"] {
  background-color: var(--bg-body-from) !important;
}

/* Links on auth pages - improve visibility */
html.dark-theme .text-gray-500 {
  color: var(--text-tertiary) !important;
}

html.dark-theme .text-gray-500:hover,
html.dark-theme a.text-gray-500:hover {
  color: #dc2626 !important;
}

/* Red links - ensure they're visible */
html.dark-theme .text-red-600,
html.dark-theme .text-red-700,
html.dark-theme a[class*="text-red"] {
  color: #f87171 !important;
}

html.dark-theme .text-red-600:hover,
html.dark-theme .text-red-700:hover,
html.dark-theme a[class*="text-red"]:hover {
  color: #fca5a5 !important;
}

/* Headings on login page */
html.dark-theme h1.text-red-700,
html.dark-theme h2.text-red-700 {
  color: #f87171 !important;
}

/* Buttons that should remain readable */
html.dark-theme button:not([class*="bg-[#AE2012]"]):not([class*="bg-red"]) {
  background-color: var(--bg-nav) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme button:not([class*="bg-[#AE2012]"]):not([class*="bg-red"]):hover {
  background-color: var(--bg-hover) !important;
}

/* Badges and tags */
html.dark-theme .badge,
html.dark-theme .tag,
html.dark-theme [class*="badge"],
html.dark-theme [class*="tag"] {
  background-color: var(--bg-nav) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* Code blocks and pre */
html.dark-theme code,
html.dark-theme pre {
  background-color: var(--bg-nav) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* List items and containers with rounded corners */
html.dark-theme .rounded,
html.dark-theme .rounded-lg,
html.dark-theme .rounded-md,
html.dark-theme .rounded-sm {
  background-color: var(--bg-white) !important;
}

/* Specific utility classes that might have white backgrounds */
html.dark-theme [class*="bg-white"] {
  background-color: var(--bg-white) !important;
}

/* Images and media - maintain original appearance */
html.dark-theme img,
html.dark-theme video {
  opacity: 0.95;
}

html.dark-theme img:hover,
html.dark-theme video:hover {
  opacity: 1;
}

/* External Links Buttons - Fix contrast for IMDB, TMDB, Cinemagia logos */
html.dark-theme a[class*="bg-gray-100"],
html.dark-theme a[class*="bg-gray-200"] {
  background-color: var(--bg-nav) !important;
  border: 1px solid var(--border-primary) !important;
}

html.dark-theme a[class*="bg-gray-100"]:hover,
html.dark-theme a[class*="bg-gray-200"]:hover {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-secondary) !important;
}

/* External link logos in movie info section - keep original colors, just ensure visibility */
/* Target only the service logos (IMDB, TMDB, Cinemagia), NOT the external-link icon */
html.dark-theme #movie-info a[class*="bg-gray-100"] img:not([src*="external-link"]),
html.dark-theme #movie-info a[class*="bg-gray-200"] img:not([src*="external-link"]),
html.dark-theme #movie-info img[src*="imdb"],
html.dark-theme #movie-info img[src*="tmdb"],
html.dark-theme #movie-info img[src*="cinemagia"],
html.dark-theme #movie-info img[alt*="IMDB"],
html.dark-theme #movie-info img[alt*="TMDB"] {
  filter: none !important; /* Keep original logo colors - don't invert! */
  opacity: 1 !important;
}

html.dark-theme #movie-info a[class*="bg-gray-100"]:hover img:not([src*="external-link"]),
html.dark-theme #movie-info a[class*="bg-gray-200"]:hover img:not([src*="external-link"]) {
  opacity: 1 !important;
  filter: none !important; /* Keep original logo colors on hover */
}

/* Sidebar - Fix background for subtitle lists */
html.dark-theme .side-subtitles-container,
html.dark-theme .side-subtitles-container[class*="bg-[#F5F3E8]"] {
  background-color: var(--bg-white) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme .side-subtitles-container li {
  background-color: transparent !important;
}

html.dark-theme .side-subtitles-container li:hover {
  background-color: var(--bg-hover) !important;
}

html.dark-theme .side-subtitles-container .divide-y > * {
  border-color: var(--border-primary) !important;
}

/* Sidebar dividers - use gray instead of white */
html.dark-theme .divide-y > *,
html.dark-theme .divide-gray-200 > * {
  border-color: var(--border-primary) !important;
}

/* Subtitle list and trailer list cards - distinct background */
html.dark-theme .bg-\[\\#F5F3E8\][class*="border"],
html.dark-theme [class*="bg-[#F5F3E8]"][class*="border"] {
  background-color: #1f1f1f !important; /* Slightly lighter than body background */
  border-color: var(--border-secondary) !important;
}

/* Breadcrumbs - Fix contrast */
html.dark-theme nav[aria-label="Breadcrumb"] {
  background-color: transparent !important;
}

html.dark-theme nav[aria-label="Breadcrumb"] a,
html.dark-theme nav[aria-label="Breadcrumb"] span {
  color: var(--text-secondary) !important;
}

html.dark-theme nav[aria-label="Breadcrumb"] a:hover {
  color: var(--text-primary) !important;
}

html.dark-theme nav[aria-label="Breadcrumb"] svg {
  filter: invert(1) brightness(0.9);
}

/* Error alerts - Fix contrast */
html.dark-theme .text-red-800.bg-red-300,
html.dark-theme [class*="text-red-800"][class*="bg-red-300"] {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
  border: 1px solid #991b1b !important;
}

/* Page titles (h1) - Fix contrast */
html.dark-theme h1 {
  color: var(--text-primary) !important;
}

/* All red-brown headings (text-[#7f431e]) - Fix contrast in dark mode */
html.dark-theme .text-\[\#7f431e\],
html.dark-theme [class*="text-[#7f431e]"] {
  color: #d97706 !important; /* Warm amber color for good contrast */
}

html.dark-theme .text-\[\#7f431e\]:hover,
html.dark-theme [class*="text-[#7f431e]"]:hover {
  color: #f59e0b !important; /* Brighter amber on hover */
}

/* Sidebar red background sections - better styling */
html.dark-theme .tabs-container[class*="bg-[#AE2012]"] {
  background-color: #7f1d1d !important; /* Darker red for dark theme */
}

html.dark-theme .tabs-container button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

html.dark-theme .tabs-container button:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Pagination - Fix current page contrast */
html.dark-theme [aria-label="Pager"] span[class*="bg-[#AE2012]"],
html.dark-theme [aria-label="Pager"] a[class*="bg-[#AE2012]"] {
  background-color: #dc2626 !important; /* Brighter red for better visibility */
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

/* Icons - invert colors for dark mode visibility */
html.dark-theme img[src*="/icons/"],
html.dark-theme img[src*="icon"],
html.dark-theme img[class*="icon"] {
  filter: invert(1) brightness(0.9);
  opacity: 0.85;
}

html.dark-theme img[src*="/icons/"]:hover,
html.dark-theme img[src*="icon"]:hover,
html.dark-theme img[class*="icon"]:hover {
  opacity: 1;
}

/* External link icon - needs higher opacity for visibility */
html.dark-theme img[src*="external-link"] {
  filter: invert(1) brightness(1.1) !important;
  opacity: 1 !important;
}

/* Don't invert colored icons or logos */
html.dark-theme img[src*="logo"],
html.dark-theme img[alt*="logo"],
html.dark-theme img[alt*="Logo"],
html.dark-theme #logo img {
  filter: none !important;
  opacity: 0.9;
}

html.dark-theme #logo img:hover {
  opacity: 1;
}

/* Don't invert movie posters, avatars, and content images */
html.dark-theme img[src*="poster"],
html.dark-theme img[src*="avatar"],
html.dark-theme img[src*="gravatar"],
html.dark-theme img[src*="thumb"],
html.dark-theme img[alt*="poster"],
html.dark-theme img[alt*="Poster"] {
  filter: none !important;
  opacity: 1;
}

/* SVG icons inline - invert them */
html.dark-theme svg:not([class*="text-white"]):not([class*="text-[#AE2012]"]):not([fill="currentColor"]) {
  filter: invert(1) brightness(0.9);
}

/* Preserve brand-colored SVGs */
html.dark-theme svg[class*="text-[#AE2012]"],
html.dark-theme svg.text-white,
html.dark-theme [class*="bg-[#AE2012]"] svg {
  filter: none !important;
}

/* Ensure proper text contrast on all backgrounds */
html.dark-theme .bg-white *:not([class*="text-"]):not([class*="bg-"]),
html.dark-theme [class*="bg-[#F5F3ED]"] *:not([class*="text-"]):not([class*="bg-"]),
html.dark-theme [class*="bg-[#EDEBDC]"] *:not([class*="text-"]):not([class*="bg-"]) {
  color: var(--text-primary);
}

/* Pagination specific overrides - match new button style */
html.dark-theme [aria-label="Pager"] a,
html.dark-theme [aria-label="Pager"] span {
  background-color: #2d3748 !important; /* Match button style */
  color: #d1d5db !important; /* Neutral light gray text */
  border-color: #4a5568 !important; /* Subtle border */
}

html.dark-theme [aria-label="Pager"] a:hover {
  background-color: #1a202c !important; /* Darker on hover */
  color: #e5e7eb !important; /* Brighter text */
  border-color: #718096 !important; /* Lighter border on hover */
}

/* Pagination current page - subtle emphasis */
html.dark-theme [aria-label="Pager"] span[class*="bg-[#AE2012]"],
html.dark-theme [aria-label="Pager"] a[class*="bg-[#AE2012]"] {
  background-color: #1a202c !important; /* Darker background for current */
  color: #ffffff !important;
  border-color: #718096 !important;
}

/* Pagination arrows - enhance contrast */
html.dark-theme [aria-label="Pager"] svg {
  filter: none !important;
  color: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}

html.dark-theme [aria-label="Pager"] a:hover svg {
  stroke: var(--text-primary) !important;
}

/* Disabled pagination arrows */
html.dark-theme [aria-label="Pager"] span svg {
  stroke: var(--text-tertiary) !important;
  opacity: 0.5;
}

/* Smooth theme transition */
body,
header,
footer,
nav,
aside,
article,
input,
textarea,
select,
button,
[role="menu"],
.transition-colors {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* Forum - Discord widget and general styling */
html.dark-theme iframe[src*="discord.com"] {
  filter: invert(0.9) hue-rotate(180deg);
  border-radius: 8px;
  border: 1px solid var(--border-primary);
}

/* Forum - Message beneath Discord widget */
html.dark-theme iframe[src*="discord.com"] + p {
  color: var(--text-secondary) !important;
  background-color: var(--bg-nav);
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-primary);
}

/* Forum containers - better contrast */
html.dark-theme .bg-\[\\#DFDCCC\][class*="forum"],
html.dark-theme main .bg-\[\\#DFDCCC\] {
  background-color: var(--bg-body-from) !important;
}

html.dark-theme .bg-\[\\#EDEBDC\][class*="forum"],
html.dark-theme main .bg-\[\\#EDEBDC\] {
  background-color: #1f1f1f !important;
  border-color: var(--border-secondary) !important;
}

/* Forum section items - better contrast */
html.dark-theme .border-gray-300[class*="grid"] {
  background-color: var(--bg-nav) !important;
  border-color: var(--border-primary) !important;
}

/* Forum section items hover */
html.dark-theme .border-gray-300[class*="grid"]:hover {
  background-color: var(--bg-hover) !important;
}

/* Forum text colors */
html.dark-theme .text-gray-600 {
  color: var(--text-secondary) !important;
}

/* Forum posts/messages - better contrast */
html.dark-theme .bg-\[\\#EDEBDC\][class*="grid"][class*="col-span"] {
  background-color: var(--bg-nav) !important;
  border-color: var(--border-primary) !important;
}

/* Forum post content and text */
html.dark-theme .bg-\[\\#EDEBDC\] p,
html.dark-theme .bg-\[\\#EDEBDC\] span:not([class*="text-red"]):not([class*="font-semibold"]) {
  color: var(--text-primary) !important;
}

/* Forum post metadata (dates, labels) */
html.dark-theme .bg-\[\\#EDEBDC\] .text-sm.font-light,
html.dark-theme .border-gray-300 span:not([class*="font-bold"]):not([class*="text-"]) {
  color: var(--text-secondary) !important;
}

/* Forum thread list - start date and labels */
html.dark-theme .border-gray-300 h6 {
  color: var(--text-primary) !important;
}

html.dark-theme .border-gray-300 .text-md {
  color: var(--text-primary) !important;
}