/* Dark Mode Styles */
/* Default: Light mode (current state) */

/* Apply dark mode to html element as well for better coverage */
html.dark-mode {
  background-color: #1a1a1a;
}

/* Dark mode body and background */
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* Dark mode navbar */
body.dark-mode .navbar {
  background-color: #121212 !important;
  border-bottom: 1px solid #333;
}

body.dark-mode .navbar-brand p {
  color: #e0e0e0 !important;
}

body.dark-mode .nav-link {
  color: #e0e0e0 !important;
}

body.dark-mode .nav-link:hover {
  color: #ffffff !important;
}

body.dark-mode .dropdown-menu {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-mode .dropdown-item {
  color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
  background-color: #2a2a2a;
  color: #ffffff;
}

/* Dark mode main content */
body.dark-mode main {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #e0e0e0;
}

body.dark-mode .text-muted {
  color: #a0a0a0 !important;
}

body.dark-mode .text-dark {
  color: #e0e0e0 !important;
}

/* Dark mode footer */
body.dark-mode .footer {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
  border-top: 1px solid #333;
}

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

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

body.dark-mode .footer hr {
  background-color: #333 !important;
  border-color: #333 !important;
}

/* Dark mode buttons - all button text should be white */
body.dark-mode .btn,
body.dark-mode button {
  color: #ffffff !important;
}

body.dark-mode .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff !important;
}

body.dark-mode .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #ffffff !important;
}

body.dark-mode .btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #ffffff !important;
}

body.dark-mode .btn-secondary:hover {
  color: #ffffff !important;
}

body.dark-mode .btn-light {
  background-color: #3a3a3a;
  border-color: #3a3a3a;
  color: #ffffff !important;
}

body.dark-mode .btn-light:hover {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
  color: #ffffff !important;
}

body.dark-mode .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #ffffff !important;
}

body.dark-mode .btn-danger:hover {
  color: #ffffff !important;
}

body.dark-mode .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000 !important;
}

body.dark-mode .btn-warning:hover {
  color: #000 !important;
}

body.dark-mode .btn-success {
  color: #ffffff !important;
}

body.dark-mode .btn-info {
  color: #ffffff !important;
}

/* Dark mode cards */
body.dark-mode .card {
  background-color: #1e1e1e;
  border-color: #333;
  color: #e0e0e0;
}

body.dark-mode .card-body {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* Dark mode forms */
body.dark-mode .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .form-control:focus {
  background-color: #2a2a2a;
  border-color: #0d6efd;
  color: #e0e0e0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.dark-mode .form-control::placeholder {
  color: #888;
}

body.dark-mode .input-group-text {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

/* Dark mode search container */
body.dark-mode .search-container {
  background-color: rgba(42, 42, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .search-input {
  color: #e0e0e0;
}

body.dark-mode .search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Dark mode links */
body.dark-mode a {
  color: #6ea8fe;
}

body.dark-mode a:hover {
  color: #8bb9fe;
}

body.dark-mode .instant-link {
  color: #e0e0e0;
}

/* Dark mode alerts */
body.dark-mode .alert {
  background-color: #1e1e1e;
  border-color: #333;
  color: #e0e0e0;
}

body.dark-mode .alert-danger {
  background-color: #2a1a1a;
  border-color: #5a2a2a;
  color: #ffaaaa;
}

body.dark-mode .alert-success {
  background-color: #1a2a1a;
  border-color: #2a5a2a;
  color: #aaffaa;
}

body.dark-mode .alert-warning {
  background-color: #2a2a1a;
  border-color: #5a5a2a;
  color: #ffffaa;
}

/* Dark mode spinner */
body.dark-mode .spinner-border {
  border-color: #444;
  border-top-color: #0d6efd;
}

/* Dark mode load more button */
body.dark-mode .load-more-btn {
  background-color: #3a3a3a;
  color: #e0e0e0;
}

body.dark-mode .load-more-btn:hover {
  background-color: #4a4a4a;
}

/* Dark mode toggle button */
#dark-mode-toggle {
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.3s ease;
  border: none;
  background: transparent;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

#dark-mode-toggle:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

#dark-mode-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  border-radius: 50%;
}

body.dark-mode #dark-mode-toggle {
  color: #ffc107;
}

body.dark-mode #dark-mode-toggle:hover {
  color: #ffd54f;
  background-color: rgba(255, 193, 7, 0.1);
}

#dark-mode-icon {
  font-size: 1.2rem;
}

/* Responsive adjustments for dark mode toggle */
@media (max-width: 991.98px) {
  #dark-mode-toggle {
    margin-right: 0.5rem;
  }
}

/* Dark mode blog cards */
body.dark-mode .blog-card {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-mode .blog-image-container {
  background-color: #2a2a2a;
}

/* Dark mode instant page extra buttons */
body.dark-mode .instant-page-extra-button {
  background-color: #2a3a4f;
  color: #e0e0e0;
}

body.dark-mode .instant-page-extra-button:hover {
  background-color: #3a4a5f;
}

/* Dark mode toast notifications */
body.dark-mode .toast {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #444;
}

/* Dark mode - make download/link icon white */
/* Dark Mode - make download/link icon white */
body.dark-mode .instant-action-button img[src*="link.svg"],
body.blue-theme .instant-action-button img[src*="link.svg"],
body.high-contrast-theme .instant-action-button img[src*="link.svg"] {
  filter: brightness(0) invert(1);
}

/* =========================================
   Theme Sidebar Styles
   ========================================= */
.theme-sidebar {
  position: fixed;
  top: 50%;
  right: -300px;
  /* Hidden by default */
  width: 260px;
  height: auto;
  max-height: 80vh;
  transform: translateY(-50%);
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  /* Above bootstrap modal/overlay */
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  border-radius: 12px 0 0 12px;
}

.theme-sidebar.open {
  right: 0;
}

/* Dark mode sidebar styles */
body.dark-mode .theme-sidebar,
body.blue-theme .theme-sidebar,
body.high-contrast-theme .theme-sidebar {
  background-color: #1e1e1e;
  color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}

body.blue-theme .theme-sidebar {
  background-color: #0d1b2a;
}

body.high-contrast-theme .theme-sidebar {
  background-color: #000;
  border-left: 2px solid #fff;
}

.theme-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Invert close button for dark themes to make it white */
body.dark-mode .theme-sidebar .btn-close,
body.blue-theme .theme-sidebar .btn-close,
body.high-contrast-theme .theme-sidebar .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .theme-sidebar-header,
body.blue-theme .theme-sidebar-header {
  border-color: #333;
}

body.high-contrast-theme .theme-sidebar-header {
  border-color: #fff;
}

.theme-sidebar-body {
  padding: 1rem;
  overflow-y: auto;
}

.theme-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  display: none;
}

.theme-overlay.show {
  display: block;
}

/* Theme Options */
.theme-option {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 2px solid transparent;
}

.theme-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .theme-option:hover,
body.blue-theme .theme-option:hover,
body.high-contrast-theme .theme-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.rainbow-theme .theme-option:hover {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1), rgba(107, 207, 127, 0.1), rgba(77, 157, 224, 0.1), rgba(155, 89, 182, 0.1));
}

.theme-option.active {
  border-color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.1);
}

body.dark-mode .theme-option.active {
  border-color: #fff;
}

.theme-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.light-preview {
  background: linear-gradient(135deg, #ffffff 50%, #f8f9fa 50%);
}

.dark-preview {
  background: linear-gradient(135deg, #1a1a1a 50%, #121212 50%);
}

.blue-preview {
  background: linear-gradient(135deg, #0d1b2a 50%, #1b263b 50%);
}

.contrast-preview {
  background: linear-gradient(135deg, #000000 50%, #ffffff 50%);
  border: 2px solid #fff;
}

.rainbow-preview {
  background: linear-gradient(135deg, #fff9c4 30%, #ff6b6b 30%, #ff6b6b 40%, #ffd93d 40%, #ffd93d 50%, #6bcf7f 50%, #6bcf7f 60%, #4d9de0 60%, #4d9de0 70%, #9b59b6 70%);
  border: 1px solid #ffd93d;
}

/* =========================================
   Blue Theme
   ========================================= */
/* =========================================
   Blue Theme
   ========================================= */
body.blue-theme {
  background-color: #0d1b2a;
  color: #ffffff;
}

body.blue-theme h1,
body.blue-theme h2,
body.blue-theme h3,
body.blue-theme h4,
body.blue-theme h5,
body.blue-theme h6,
body.blue-theme p,
body.blue-theme span,
body.blue-theme strong,
body.blue-theme li {
  color: #ffffff !important;
}

body.blue-theme .navbar {
  background-color: #1b263b !important;
}

body.blue-theme .footer {
  background-color: #1b263b !important;
  color: #ffffff !important;
}

body.blue-theme .card {
  background-color: #1b263b;
  border-color: #415a77;
  color: #ffffff;
}

body.blue-theme .list-group-item {
  background-color: #1b263b;
  border-color: #415a77;
  color: #ffffff;
}

body.blue-theme .form-control {
  background-color: #415a77;
  border-color: #778da9;
  color: #ffffff;
}

body.blue-theme .form-control:focus {
  background-color: #415a77;
  color: #ffffff;
  box-shadow: 0 0 0 0.25rem rgba(65, 90, 119, 0.5);
}

body.blue-theme .form-control::placeholder {
  color: #d0d0d0;
}

body.blue-theme .btn-light {
  background-color: #415a77;
  border-color: #415a77;
  color: #ffffff !important;
}

body.blue-theme .text-muted {
  color: #d0d0d0 !important;
}

/* Force all links to ocean blue */
body.blue-theme a {
  color: #4cc9f0 !important;
}

body.blue-theme a:hover {
  color: #90e0ef !important;
}

/* Ensure buttons keep white text even if they are links */
body.blue-theme .btn {
  color: #ffffff !important;
}

/* =========================================
   High Contrast Theme
   ========================================= */
body.high-contrast-theme {
  background-color: #000000;
  color: #ffffff;
}

body.high-contrast-theme h1,
body.high-contrast-theme h2,
body.high-contrast-theme h3,
body.high-contrast-theme h4,
body.high-contrast-theme h5,
body.high-contrast-theme h6,
body.high-contrast-theme p,
body.high-contrast-theme span,
body.high-contrast-theme strong,
body.high-contrast-theme li,
body.high-contrast-theme label,
body.high-contrast-theme .text-muted,
body.high-contrast-theme .text-dark {
  color: #ffffff !important;
}

body.high-contrast-theme .navbar {
  background-color: #000000 !important;
  border-bottom: 2px solid #ffffff;
}

body.high-contrast-theme .card {
  background-color: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

body.high-contrast-theme .btn {
  background-color: #000000;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  font-weight: bold;
}

body.high-contrast-theme .btn:hover {
  background-color: #ffffff;
  color: #000000 !important;
}

/* Links yellow */
body.high-contrast-theme a:not(.btn) {
  color: #ffff00 !important;
  text-decoration: underline;
}

body.high-contrast-theme .footer {
  background-color: #000000 !important;
  border-top: 2px solid #ffffff;
}

body.high-contrast-theme .form-control {
  background-color: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

body.high-contrast-theme .form-control::placeholder {
  color: #ffffff;
  opacity: 1;
  /* Firefox */
}

/* Dropdown fixes for high contrast */
body.high-contrast-theme .dropdown-menu {
  background-color: #000000;
  border: 2px solid #ffffff;
}

body.high-contrast-theme .dropdown-item {
  color: #ffffff !important;
  background-color: #000000;
}

body.high-contrast-theme .dropdown-item:hover {
  background-color: #333333;
  color: #ffff00 !important;
}

/* =========================================
   Rainbow Theme
   ========================================= */
body.rainbow-theme {
  background-color: #fff9c4;
  /* Slightly yellow background */
  color: #333333;
}

body.rainbow-theme h1,
body.rainbow-theme h2,
body.rainbow-theme h3,
body.rainbow-theme h4,
body.rainbow-theme h5,
body.rainbow-theme h6,
body.rainbow-theme p,
body.rainbow-theme span,
body.rainbow-theme strong,
body.rainbow-theme li {
  color: #333333;
}

body.rainbow-theme .navbar {
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #9b59b6) !important;
  border-bottom: 2px solid #ffd93d;
}

body.rainbow-theme .navbar-brand p,
body.rainbow-theme .nav-link {
  color: #ffffff !important;
  font-weight: 500;
}

body.rainbow-theme .nav-link:hover {
  color: #fff9c4 !important;
}

/* Rainbow buttons - each button gets a different rainbow color */
body.rainbow-theme .btn-primary {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  border-color: #ff6b6b;
  color: #ffffff !important;
  font-weight: 600;
}

body.rainbow-theme .btn-primary:hover {
  background: linear-gradient(135deg, #ff5252, #ff6b6b);
  border-color: #ff5252;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
}

body.rainbow-theme .btn-secondary {
  background: linear-gradient(135deg, #4d9de0, #6bb3ff);
  border-color: #4d9de0;
  color: #ffffff !important;
  font-weight: 600;
}

body.rainbow-theme .btn-secondary:hover {
  background: linear-gradient(135deg, #3d8dd0, #4d9de0);
  border-color: #3d8dd0;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(77, 157, 224, 0.3);
}

body.rainbow-theme .btn-success {
  background: linear-gradient(135deg, #6bcf7f, #8de0a0);
  border-color: #6bcf7f;
  color: #ffffff !important;
  font-weight: 600;
}

body.rainbow-theme .btn-success:hover {
  background: linear-gradient(135deg, #5bbf6f, #6bcf7f);
  border-color: #5bbf6f;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(107, 207, 127, 0.3);
}

body.rainbow-theme .btn-danger {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  border-color: #ff6b6b;
  color: #ffffff !important;
  font-weight: 600;
}

body.rainbow-theme .btn-danger:hover {
  background: linear-gradient(135deg, #ff5252, #ff6b6b);
  border-color: #ff5252;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
}

body.rainbow-theme .btn-warning {
  background: linear-gradient(135deg, #ffd93d, #ffe066);
  border-color: #ffd93d;
  color: #333333 !important;
  font-weight: 600;
}

body.rainbow-theme .btn-warning:hover {
  background: linear-gradient(135deg, #ffd024, #ffd93d);
  border-color: #ffd024;
  color: #333333 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 217, 61, 0.3);
}

body.rainbow-theme .btn-light {
  background: linear-gradient(135deg, #9b59b6, #b87fd4);
  border-color: #9b59b6;
  color: #ffffff !important;
  font-weight: 600;
}

body.rainbow-theme .btn-light:hover {
  background: linear-gradient(135deg, #8b49a6, #9b59b6);
  border-color: #8b49a6;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
}

body.rainbow-theme .btn-info {
  background: linear-gradient(135deg, #4d9de0, #6bb3ff);
  border-color: #4d9de0;
  color: #ffffff !important;
  font-weight: 600;
}

body.rainbow-theme .btn-info:hover {
  background: linear-gradient(135deg, #3d8dd0, #4d9de0);
  border-color: #3d8dd0;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(77, 157, 224, 0.3);
}

/* Generic button styling for any other buttons */
body.rainbow-theme .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-light):not(.btn-info) {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #9b59b6);
  background-size: 200% 200%;
  animation: rainbow-shift 3s ease infinite;
  border: none;
  color: #ffffff !important;
  font-weight: 600;
}

@keyframes rainbow-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body.rainbow-theme .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-light):not(.btn-info):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

body.rainbow-theme .footer {
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #9b59b6) !important;
  color: #ffffff !important;
  border-top: 2px solid #ffd93d;
}

body.rainbow-theme .footer a {
  color: #000000 !important;
  font-weight: 500;
}

body.rainbow-theme .footer a:hover {
  color: #333333 !important;
}

body.rainbow-theme .card {
  background-color: #ffffff;
  border: 2px solid #ffd93d;
  color: #333333;
  box-shadow: 0 2px 8px rgba(255, 217, 61, 0.2);
}

body.rainbow-theme .card:hover {
  box-shadow: 0 4px 12px rgba(255, 217, 61, 0.3);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

body.rainbow-theme .form-control {
  background-color: #ffffff;
  border: 2px solid #ffd93d;
  color: #333333;
}

body.rainbow-theme .form-control:focus {
  background-color: #ffffff;
  border-color: #ff6b6b;
  color: #333333;
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25);
}

body.rainbow-theme .form-control::placeholder {
  color: #999999;
}

body.rainbow-theme .dropdown-menu {
  background-color: #ffffff;
  border: 2px solid #ffd93d;
  box-shadow: 0 4px 12px rgba(255, 217, 61, 0.3);
}

body.rainbow-theme .dropdown-item {
  color: #333333;
}

body.rainbow-theme .dropdown-item:hover {
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #9b59b6);
  color: #ffffff !important;
}

body.rainbow-theme .text-muted {
  color: #666666 !important;
}

body.rainbow-theme a:not(.btn) {
  color: #000000 !important;
  font-weight: 500;
}

body.rainbow-theme a:not(.btn):hover {
  color: #333333 !important;
}

body.rainbow-theme .alert {
  border: 2px solid #ffd93d;
  background-color: #ffffff;
  color: #333333;
}

body.rainbow-theme .alert-success {
  border-color: #6bcf7f;
  background: linear-gradient(135deg, #ffffff, #e8f5e9);
}

body.rainbow-theme .alert-danger {
  border-color: #ff6b6b;
  background: linear-gradient(135deg, #ffffff, #ffebee);
}

body.rainbow-theme .alert-warning {
  border-color: #ffd93d;
  background: linear-gradient(135deg, #ffffff, #fff9c4);
}

/* Theme sidebar styling for rainbow theme */
body.rainbow-theme .theme-sidebar {
  background-color: #ffffff;
  border-left: 3px solid #ffd93d;
}

body.rainbow-theme .theme-sidebar-header {
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #9b59b6);
  color: #ffffff;
  border-bottom: 2px solid #ffd93d;
}

body.rainbow-theme .theme-option:hover {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1), rgba(107, 207, 127, 0.1), rgba(77, 157, 224, 0.1), rgba(155, 89, 182, 0.1));
}

body.rainbow-theme .theme-option.active {
  border-color: #ffd93d;
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.2), rgba(255, 217, 61, 0.2), rgba(107, 207, 127, 0.2), rgba(77, 157, 224, 0.2), rgba(155, 89, 182, 0.2));
}