/* Dark Mode Theme CSS Variables */

:root[data-theme="dark"] {
  /* Page & Background */
  --page-col: #1a1a1a;
  --text-col: #e4e4e4;
  --mid-col: #a0a0a0;
  
  /* Navigation */
  --navbar-col: #252525;
  --navbar-text-col: #e4e4e4;
  --navbar-border-col: #404040;
  
  /* Links & Interactions */
  --link-col: #5ca7ff;
  --hover-col: #7eb8ff;
  
  /* Footer */
  --footer-col: #252525;
  --footer-text-col: #b0b0b0;
  --footer-link-col: #e4e4e4;
  --footer-hover-col: #7eb8ff;
}

/* Light Mode (Default) */
:root[data-theme="light"] {
  --page-col: #ffffff;
  --text-col: #404040;
  --mid-col: #808080;
  --navbar-col: #eaeaea;
  --navbar-text-col: #404040;
  --navbar-border-col: #dddddd;
  --link-col: #008aff;
  --hover-col: #0085a1;
  --footer-col: #eaeaea;
  --footer-text-col: #777777;
  --footer-link-col: #404040;
  --footer-hover-col: #0085a1;
}

/* Dark mode adjustments for specific elements */
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Code blocks in dark mode */
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code {
  background-color: #2d2d2d !important;
  color: #e4e4e4 !important;
  border-color: #404040 !important;
}

:root[data-theme="dark"] .highlight {
  background-color: #2d2d2d !important;
}

/* Blockquote in dark mode */
:root[data-theme="dark"] blockquote {
  border-left-color: #5ca7ff;
  background-color: #232323;
  padding: 1rem;
  border-radius: 0.25rem;
}

/* Cards and boxes in dark mode */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .post-preview {
  background-color: #252525 !important;
  border-color: #404040 !important;
  color: #e4e4e4 !important;
}

:root[data-theme="dark"] .card:hover {
  background-color: #2d2d2d !important;
}

/* Tables in dark mode */
:root[data-theme="dark"] table {
  background-color: #252525;
  border-color: #404040;
  color: #e4e4e4;
}

:root[data-theme="dark"] table thead {
  background-color: #2d2d2d;
  color: #5ca7ff;
}

:root[data-theme="dark"] table tbody tr:hover {
  background-color: #2d2d2d;
}

/* Input & Form elements in dark mode */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: #2d2d2d !important;
  color: #e4e4e4 !important;
  border-color: #404040 !important;
}

:root[data-theme="dark"] input::placeholder {
  color: #808080 !important;
}

/* Pagination in dark mode */
:root[data-theme="dark"] .pagination .page-link {
  background-color: #252525;
  border-color: #404040;
  color: #5ca7ff;
}

:root[data-theme="dark"] .pagination .page-link:hover {
  background-color: #2d2d2d;
  border-color: #5ca7ff;
}

:root[data-theme="dark"] .pagination .active .page-link {
  background-color: #5ca7ff;
  border-color: #5ca7ff;
}

/* Badges & Pills in dark mode */
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .label {
  background-color: #5ca7ff !important;
  color: #1a1a1a !important;
}

/* Buttons in dark mode */
:root[data-theme="dark"] .btn-light {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #e4e4e4;
}

:root[data-theme="dark"] .btn-light:hover {
  background-color: #404040;
  border-color: #505050;
}

/* Alerts in dark mode */
:root[data-theme="dark"] .alert {
  border-color: #404040;
  background-color: #232323;
  color: #e4e4e4;
}

/* Jumbotron in dark mode */
:root[data-theme="dark"] .jumbotron {
  background-color: #252525;
  color: #e4e4e4;
}

/* HR styling in dark mode */
:root[data-theme="dark"] hr {
  border-color: #404040;
  opacity: 0.5;
}

/* Spinner in dark mode */
:root[data-theme="dark"] .spinner-border {
  border-color: #404040;
  border-right-color: #5ca7ff;
}

/* Image hover overlay */
img {
  transition: filter 0.3s ease;
}

:root[data-theme="dark"] img {
  filter: brightness(0.95);
}

/* Smooth transition between themes */
:root {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Bootstrap dropdown adjustments for dark mode */
:root[data-theme="dark"] .dropdown-menu {
  background-color: #252525 !important;
  border-color: #404040 !important;
}

:root[data-theme="dark"] .dropdown-item {
  color: #e4e4e4 !important;
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: #2d2d2d !important;
  color: #5ca7ff !important;
}

:root[data-theme="dark"] .dropdown-divider {
  border-color: #404040 !important;
}

/* Tag styling in dark mode */
:root[data-theme="dark"] .tag-list a,
:root[data-theme="dark"] .category-list a {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #5ca7ff;
}

:root[data-theme="dark"] .tag-list a:hover,
:root[data-theme="dark"] .category-list a:hover {
  background-color: #5ca7ff;
  color: #1a1a1a;
  border-color: #5ca7ff;
}

/* Blog tags and categories in dark mode */
:root[data-theme="dark"] .blog-tags a,
:root[data-theme="dark"] .blog-categories a {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #5ca7ff !important;
  text-decoration: none;
}

:root[data-theme="dark"] .blog-tags a:hover,
:root[data-theme="dark"] .blog-categories a:hover {
  background-color: #5ca7ff !important;
  border-color: #5ca7ff !important;
  color: #1a1a1a !important;
}

/* Ensure all text content is readable in dark mode */
:root[data-theme="dark"] {
  background-color: var(--page-col);
  color: var(--text-col);
}

:root[data-theme="dark"] body {
  background-color: var(--page-col) !important;
  color: var(--text-col) !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] dt,
:root[data-theme="dark"] dd {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] .post-title {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] a {
  color: var(--link-col);
}

:root[data-theme="dark"] a:hover {
  color: var(--hover-col);
}

/* Fix for lists and other text elements */
:root[data-theme="dark"] ul,
:root[data-theme="dark"] ol {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] strong,
:root[data-theme="dark"] b {
  color: inherit;
}

:root[data-theme="dark"] em,
:root[data-theme="dark"] i {
  color: inherit;
}

/* Ensure labels and small text are readable */
:root[data-theme="dark"] label,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small {
  color: var(--mid-col) !important;
}

/* Post meta information in dark mode */
:root[data-theme="dark"] .post-meta,
:root[data-theme="dark"] .article-metadata {
  color: var(--mid-col) !important;
}

:root[data-theme="dark"] .post-meta a,
:root[data-theme="dark"] .article-metadata a {
  color: var(--link-col) !important;
}

:root[data-theme="dark"] .post-meta a:hover,
:root[data-theme="dark"] .article-metadata a:hover {
  color: var(--hover-col) !important;
}