/* 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;
}

/* Recent searches dropdown */
.recent-search-dropdown {
  backdrop-filter: blur(4px);
}

.recent-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.28);
  z-index: 9;
  pointer-events: none;
}

.recent-search-item {
  color: #374151;
}

.recent-search-item:hover {
  background-color: #f5f3ed;
  color: #111827;
}

/* Profile menu contrast fixes in dark mode */
html.dark-theme .profile-menu-panel-link,
html.dark-theme .profile-menu-logout-link {
  color: #f3f4f6 !important;
}

html.dark-theme .profile-menu-panel-link:hover,
html.dark-theme .profile-menu-logout-link:hover {
  background-color: var(--bg-hover) !important;
  color: #ffffff !important;
}

/* Recent searches dark mode */
html.dark-theme .recent-search-dropdown {
  background-color: var(--bg-header) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme .recent-search-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

html.dark-theme .recent-search-title,
html.dark-theme .recent-search-footer {
  border-color: var(--border-primary) !important;
}

html.dark-theme .recent-search-item {
  color: var(--text-secondary) !important;
}

html.dark-theme .recent-search-item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

html.dark-theme .recent-search-empty,
html.dark-theme .recent-search-clear {
  color: var(--text-tertiary) !important;
}

html.dark-theme .recent-search-clear:hover {
  color: #fca5a5 !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;
}

/* API Details Page - specific overrides */
/* Title color override for API details */
html.dark-theme [class*="text-[#7f431e]"] {
  color: var(--brand-primary) !important;
}

/* Alert and notification backgrounds */
html.dark-theme .bg-yellow-50 {
  background-color: #451a03 !important;
  /* Dark yellow background */
}

html.dark-theme .border-yellow-200 {
  border-color: #d97706 !important;
  /* Orange border for contrast */
}

html.dark-theme .text-yellow-800 {
  color: #fbbf24 !important;
  /* Light yellow text for readability */
}

html.dark-theme .bg-blue-50 {
  background-color: #1e3a8a !important;
  /* Dark blue background */
}

html.dark-theme .border-blue-200 {
  border-color: #3b82f6 !important;
  /* Blue border */
}

html.dark-theme .text-blue-900,
html.dark-theme .text-blue-800 {
  color: #dbeafe !important;
  /* Light blue text */
}

html.dark-theme .bg-red-100 {
  background-color: #7f1d1d !important;
  /* Dark red background */
}

html.dark-theme .border-red-400 {
  border-color: #dc2626 !important;
  /* Red border */
}

html.dark-theme .text-red-700 {
  color: #fca5a5 !important;
  /* Light red text */
}

html.dark-theme .bg-green-100 {
  background-color: #14532d !important;
  /* Dark green background */
}

html.dark-theme .border-green-400 {
  border-color: #16a34a !important;
  /* Green border */
}

html.dark-theme .text-green-700 {
  color: #86efac !important;
  /* Light green text */
}

/* Type badges - keep existing functionality but add dark versions */
html.dark-theme .bg-blue-100.text-blue-800 {
  background-color: #1e40af !important;
  color: #dbeafe !important;
}

html.dark-theme .bg-purple-100.text-purple-800 {
  background-color: #6b21a8 !important;
  color: #e9d5ff !important;
}

html.dark-theme .bg-green-100.text-green-800 {
  background-color: #166534 !important;
  color: #bbf7d0 !important;
}

/* Language tags */
html.dark-theme .bg-gray-200.text-gray-700 {
  background-color: #374151 !important;
  color: #d1d5db !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 - Vibrant, distinct colors for dark theme */

/* Green buttons - Download actions (vibrant emerald green) */
html.dark-theme .bg-green-600,
html.dark-theme a[class*="bg-green-600"],
html.dark-theme button[class*="bg-green-600"] {
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
  transition: all 0.2s ease !important;
}

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: #10b981 !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Red-800 buttons - Details/Info actions (vibrant crimson red) */
html.dark-theme .bg-red-800,
html.dark-theme a[class*="bg-red-800"],
html.dark-theme button[class*="bg-red-800"] {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
  transition: all 0.2s ease !important;
}

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: #ef4444 !important;
  border-color: #f87171 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Blue buttons - List/View actions (vibrant azure blue) */
html.dark-theme .bg-blue-600,
html.dark-theme a[class*="bg-blue-600"],
html.dark-theme button[class*="bg-blue-600"] {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.2s ease !important;
}

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: #3b82f6 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Slate buttons - Neutral actions (professional slate gray) */
html.dark-theme .bg-slate-600,
html.dark-theme a[class*="bg-slate-600"],
html.dark-theme button[class*="bg-slate-600"] {
  background-color: #475569 !important;
  color: #f1f5f9 !important;
  border: 1px solid #64748b !important;
  box-shadow: 0 2px 8px rgba(71, 85, 105, 0.3) !important;
  transition: all 0.2s ease !important;
}

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: #64748b !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Brand red buttons (bg-[#AE2012]) - Keep gray for header login button */
html.dark-theme header a[class*="bg-[#AE2012]"],
html.dark-theme header button[class*="bg-[#AE2012]"] {
  background-color: #475569 !important;
  color: #f1f5f9 !important;
  border: 1px solid #64748b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

html.dark-theme header a[class*="bg-[#AE2012]"]:hover,
html.dark-theme header button[class*="bg-[#AE2012]"]:hover {
  background-color: #64748b !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* Brand red buttons outside header - Brand primary actions */
html.dark-theme a[class*="bg-[#AE2012]"]:not(header *),
html.dark-theme button[class*="bg-[#AE2012]"]:not(header *) {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
  box-shadow: 0 2px 8px rgba(174, 32, 18, 0.3) !important;
  transition: all 0.2s ease !important;
}

html.dark-theme a[class*="bg-[#AE2012]"]:hover:not(header *),
html.dark-theme button[class*="bg-[#AE2012]"]:hover:not(header *) {
  background-color: #ef4444 !important;
  border-color: #f87171 !important;
  box-shadow: 0 4px 12px rgba(174, 32, 18, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Ensure icons in buttons remain white and visible */
html.dark-theme .bg-green-600 img,
html.dark-theme .bg-red-800 img,
html.dark-theme .bg-blue-600 img,
html.dark-theme .bg-slate-600 img,
html.dark-theme a[class*="bg-[#AE2012]"] img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* 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 #content a.text-gray-500:hover {
  color: #dc2626 !important;
}

/* Public profile uploaded subtitles button - dark theme complement */
html.dark-theme .profile-add-friend-btn {
  background-color: #9a3412 !important;
  border-color: #7c2d12 !important;
  color: #ffffff !important;
}

html.dark-theme .profile-add-friend-btn:hover {
  background-color: #c2410c !important;
  border-color: #9a3412 !important;
}

html.dark-theme .profile-uploaded-btn {
  background-color: #1d4ed8 !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
}

html.dark-theme .profile-uploaded-btn:hover {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !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;
}

/* Public profile action buttons - keep intended default colors */
html.dark-theme a.profile-add-friend-btn {
  background-color: #9a3412 !important;
  border: 1px solid #7c2d12 !important;
  color: #ffffff !important;
}

html.dark-theme a.profile-uploaded-btn {
  background-color: #1d4ed8 !important;
  border: 1px solid #1e40af !important;
  color: #ffffff !important;
}

html.dark-theme a.profile-add-friend-btn:hover {
  background-color: #c2410c !important;
  border-color: #9a3412 !important;
}

html.dark-theme a.profile-uploaded-btn:hover {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !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 and background */
nav[aria-label="Breadcrumb"] {
  background-color: transparent !important;
  border: none !important;
}

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 .forum-page > main > div[class*="bg-[#DFDCCC]"],
html.dark-theme .forum-page > main > div[class*="bg-\\[\\#DFDCCC\\]"] {
  background-color: var(--bg-header) !important;
}

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

html.dark-theme .forum-page .bg-\[\\#EDEBDC\] {
  background-color: #1f1f1f !important;
  border-color: var(--border-secondary) !important;
}

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

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

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

/* Forum posts/messages - better contrast */
html.dark-theme .forum-page .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 .forum-page .bg-\[\\#EDEBDC\] p,
html.dark-theme .forum-page .bg-\[\\#EDEBDC\] span:not([class*="text-red"]):not([class*="font-semibold"]):not(.bbcode-color) {
  color: var(--text-primary) !important;
}

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

/* Forum thread list - start date and labels */
html.dark-theme .forum-page [class*="bg-white/50"][class*="border-gray-300"] h6,
html.dark-theme .forum-page [class*="bg-white/50"][class*="border-gray-300"] .text-md,
html.dark-theme .forum-page [class*="bg-white\/50"][class*="border-gray-300"] h6,
html.dark-theme .forum-page [class*="bg-white\/50"][class*="border-gray-300"] .text-md {
  color: var(--text-primary) !important;
}

/* Forum-specific button defaults in dark theme */
html.dark-theme .forum-page a[class*="bg-orange-700"],
html.dark-theme .forum-page button[class*="bg-orange-700"] {
  background-color: #9a3412 !important;
  border: 1px solid #7c2d12 !important;
  color: #ffffff !important;
}

html.dark-theme .forum-page a[class*="bg-orange-700"]:hover,
html.dark-theme .forum-page button[class*="bg-orange-700"]:hover {
  background-color: #c2410c !important;
  border-color: #9a3412 !important;
}

html.dark-theme .forum-page .bg-white\/50,
html.dark-theme .forum-page .bg-white\/60,
html.dark-theme .forum-page .bg-white\/70 {
  background-color: var(--bg-white) !important;
}

/* Forum pagination alignment and no overflow */
.forum-pagination-top ul,
.forum-pagination-bottom ul {
  flex-wrap: wrap;
}

/* Forum thread pagination - consistent top and bottom */
html.dark-theme .forum-page .forum-pagination-top [aria-label="Pager"] a,
html.dark-theme .forum-page .forum-pagination-top [aria-label="Pager"] span,
html.dark-theme .forum-page .forum-pagination-bottom [aria-label="Pager"] a,
html.dark-theme .forum-page .forum-pagination-bottom [aria-label="Pager"] span {
  background-color: var(--bg-nav) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}

html.dark-theme .forum-page .forum-pagination-top [aria-label="Pager"] a:hover,
html.dark-theme .forum-page .forum-pagination-bottom [aria-label="Pager"] a:hover {
  background-color: var(--bg-nav) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-secondary) !important;
}

html.dark-theme .forum-page .forum-pagination-top [aria-label="Pager"] span[class*="bg-[#AE2012]"],
html.dark-theme .forum-page .forum-pagination-bottom [aria-label="Pager"] span[class*="bg-[#AE2012]"] {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  border-color: var(--brand-primary) !important;
}

/* ============================================================================
   HTMX ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Fade In Animation for AJAX-loaded content */
.htmx-fade-in {
  opacity: 0;
  transition: opacity 400ms ease-in;
}

.htmx-fade-in.htmx-swapping {
  opacity: 0;
}

.htmx-fade-in.htmx-settling {
  opacity: 1;
}

/* Loading Indicators */

/* Loading Indicators - override HTMX defaults for our usage */
/* We use display:none/block on .htmx-indicator itself rather than opacity,
   since opacity would show a zero-height ghost element in the layout.
   The !important overrides HTMX's dynamically injected <style> tag. */
.htmx-indicator {
  display: none !important;
  opacity: 1 !important;
  /* Prevent HTMX injected opacity:0 from conflicting */
}

.htmx-request .htmx-indicator {
  display: inline-block !important;
}

.htmx-request.htmx-indicator {
  display: inline-block !important;
}



/* Page Loading Bar (for hx-boost navigation) */
/* Container stays permanently visible to preserve the 3px layout space (no content pushing) */
#page-loading {
  display: block !important;
  opacity: 1 !important;
}


/* Page Transition Effects */
#content-grid.htmx-swapping {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

#content-grid.htmx-settling {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

/* Smooth height transitions for collapsible content */
.htmx-collapsible {
  transition: height 300ms ease-in-out, opacity 300ms ease-in-out;
}

/* Form submission states */
form.htmx-request button[type="submit"] {
  opacity: 0.7;
  cursor: wait;
}

/* Spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* NProgress-style page navigation bar */

/* Base state: zero width, invisible, no transition (instant reset) */
#page-loading-bar {
  width: 0%;
  opacity: 0;
  height: 100%;
  background-color: #AE2012;
  transition: opacity 0.4s ease-out;
  transform: none;
}

/* Active: slowly crawls toward 85% while the page loads */
#page-loading-bar.progress-active {
  opacity: 1;
  width: 85%;
  transition: width 15s cubic-bezier(0.04, 0.6, 0.04, 1), opacity 0.15s ease-in;
}

/* Complete: snap to 100% quickly */
#page-loading-bar.progress-complete {
  opacity: 1;
  width: 100%;
  transition: width 0.25s ease-out;
}

/* Slide in from right animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.htmx-slide-in-right {
  animation: slideInRight 300ms ease-out;
}

/* Fade and slide up animation */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.htmx-fade-slide-up {
  animation: fadeSlideUp 400ms ease-out;
}

/* ============================================================================
   PAGINATION - Light theme fix for Tailwind arbitrary values
   ============================================================================ */

/* Generate the Tailwind arbitrary value classes that CDN might miss */
.bg-\[\#F5F3ED\] {
  background-color: #F5F3ED;
}

.bg-\[\#AE2012\] {
  background-color: #AE2012;
}

.bg-\[\#EDEBDC\] {
  background-color: #EDEBDC;
}

.border-\[\#E5E1D5\] {
  border-color: #E5E1D5;
}

.border-\[\#AE2012\] {
  border-color: #AE2012;
}

.hover\:bg-\[\#EDEBDC\]:hover {
  background-color: #EDEBDC;
}

.hover\:text-\[\#AE2012\]:hover {
  color: #AE2012;
}

.hover\:border-\[\#AE2012\]:hover {
  border-color: #AE2012;
}

/* BBCode color adjustments for dark theme */
/* Mix original colors with 60% white so even dark named colors (navy, maroon, olive, etc.) are readable */
html.dark-theme .bbcode-color {
  color: color-mix(in srgb, var(--bbcolor) 40%, white 60%) !important;
}

/* Black text becomes mid-gray; boost it further to stay readable */
html.dark-theme .bbcode-color[style*="--bbcolor: black"] {
  color: #cccccc !important;
}