/* Dark Mode Styles for Tranquilpeak Theme */

/* Sidebar menu alignment fix */
#sidebar ul.sidebar-buttons {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

#sidebar ul.sidebar-buttons:first-of-type {
  margin-top: 0 !important;
}

/* CSS Variables for theme colors */
:root {
  --bg-color: #fff;
  --text-color: #5d686f;
  --heading-color: #4a4a4a;
  --link-color: #349ef3;
  --border-color: #eef2f8;
  --code-bg: #f7f8f8;
  --header-bg: #fff;
  --main-bg: #fff;
  --card-bg: #fff;
  --table-alt-bg: #f7f8f8;
  --blockquote-border: #5d686f;
  --footer-text: #9eabb3;
}

/* Dark mode variables */
[data-theme="dark"] {
  --bg-color: #0a0a0a;
  --text-color: #e0e0e0;
  --heading-color: #ffffff;
  --link-color: #5dade2;
  --border-color: #2a2a2a;
  --code-bg: #1a1a1a;
  --header-bg: #0d0d0d;
  --main-bg: #0a0a0a;
  --card-bg: #1a1a1a;
  --table-alt-bg: #1a1a1a;
  --blockquote-border: #5dade2;
  --footer-text: #a0a0a0;
}

/* Body and main background */
[data-theme="dark"] body {
  background: var(--main-bg) !important;
  color: var(--text-color) !important;
}

/* Main content area */
[data-theme="dark"] #main {
  background: var(--main-bg) !important;
}

/* Header */
[data-theme="dark"] #header {
  background: var(--header-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #header .header-title .header-title-link {
  color: var(--text-color) !important;
}

[data-theme="dark"] #header .header-title .header-title-link:hover {
  color: var(--link-color) !important;
}

[data-theme="dark"] #header #btn-open-sidebar {
  color: var(--text-color) !important;
}

[data-theme="dark"] #header .header-right-picture,
[data-theme="dark"] #header .header-right-icon {
  color: var(--text-color) !important;
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--heading-color) !important;
}

/* Links */
[data-theme="dark"] a,
[data-theme="dark"] a:visited {
  color: var(--link-color) !important;
}

[data-theme="dark"] a:hover {
  color: #7ec8f3 !important;
}

/* Paragraphs and general text */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] div {
  color: var(--text-color);
}

/* Code blocks */
[data-theme="dark"] code {
  background-color: var(--code-bg) !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] pre > code {
  background-color: var(--code-bg) !important;
}

[data-theme="dark"] .highlight > pre {
  background-image: linear-gradient(
    rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1.5em, 
    rgba(255,255,255,0.01) 1.5em, rgba(255,255,255,0.01) 3em) !important;
  border-color: var(--border-color) !important;
  border-left-color: #5dade2 !important;
}

[data-theme="dark"] .highlight pre.lineno {
  color: rgba(255,255,255,0.4) !important;
  border-right-color: #5dade2 !important;
}

/* Tables */
[data-theme="dark"] table tr {
  background-color: var(--main-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] table tr:nth-child(2n) {
  background-color: var(--table-alt-bg) !important;
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] table th {
  border-bottom-color: var(--text-color) !important;
}

/* Blockquotes */
[data-theme="dark"] blockquote {
  border-left-color: var(--blockquote-border) !important;
  color: var(--text-color) !important;
}

/* Horizontal rule */
[data-theme="dark"] hr {
  border-top-color: var(--border-color) !important;
}

/* Footer */
[data-theme="dark"] #footer {
  color: var(--footer-text) !important;
  background: var(--main-bg) !important;
}

/* About card */
[data-theme="dark"] #about #about-card {
  background: var(--card-bg) !important;
}

[data-theme="dark"] #about #about-card #about-card-name {
  color: var(--heading-color) !important;
}

[data-theme="dark"] #about #about-card #about-card-bio,
[data-theme="dark"] #about #about-card #about-card-job,
[data-theme="dark"] #about #about-card #about-card-location {
  color: var(--text-color) !important;
}

[data-theme="dark"] #about #about-card #about-btn-close {
  color: var(--text-color) !important;
}

/* Post content */
[data-theme="dark"] .post-content,
[data-theme="dark"] .post-header,
[data-theme="dark"] .post-excerpt {
  color: #ffffff !important;
}

[data-theme="dark"] .post-title,
[data-theme="dark"] .post-title-link,
[data-theme="dark"] .post-header-title,
[data-theme="dark"] .post-header .post-title,
[data-theme="dark"] .post .post-title {
  color: var(--link-color) !important;
}

[data-theme="dark"] .post-meta,
[data-theme="dark"] .post-meta-date,
[data-theme="dark"] .post-meta-categories,
[data-theme="dark"] .post-meta-tags {
  color: var(--footer-text) !important;
}

/* Post preview text white in dark mode */
[data-theme="dark"] .post-excerpt p,
[data-theme="dark"] .post-excerpt-text,
[data-theme="dark"] .post-content p,
[data-theme="dark"] .postShorten-excerpt,
[data-theme="dark"] .postShorten-excerpt p {
  color: #ffffff !important;
}

/* More space between continue reading and next post */
.postShorten {
  margin-bottom: 50px !important;
}

.postShorten-excerpt {
  margin-bottom: 25px !important;
}

.postShorten-readMore {
  margin-bottom: 30px !important;
}

/* Archive and category pages */
[data-theme="dark"] .archive-year,
[data-theme="dark"] .archive-month {
  color: var(--heading-color) !important;
}

/* Tags */
[data-theme="dark"] .tag,
[data-theme="dark"] .category {
  background-color: var(--code-bg) !important;
  color: var(--text-color) !important;
}

/* Pagination */
[data-theme="dark"] .pagination a {
  color: var(--link-color) !important;
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .pagination .current {
  background-color: var(--link-color) !important;
  color: var(--main-bg) !important;
}

/* Post bottom bar */
[data-theme="dark"] #bottom-bar {
  background: var(--header-bg) !important;
  border-top-color: var(--border-color) !important;
}

[data-theme="dark"] #bottom-bar .post-action-btn {
  color: var(--text-color) !important;
}

/* Share options */
[data-theme="dark"] .share-options-link {
  color: var(--text-color) !important;
}

/* Thumbnail caption */
[data-theme="dark"] .thumbnail-image .caption {
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* Image gallery */
[data-theme="dark"] .fancybox-caption {
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* Algolia search */
[data-theme="dark"] #algolia-search-box {
  background: var(--header-bg) !important;
}

[data-theme="dark"] #algolia-search-box input {
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Highlight.js code syntax - dark theme adjustments */
[data-theme="dark"] .hljs {
  background: var(--code-bg) !important;
  color: #e0e0e0 !important;
}

/* Force all string elements in code to be red in dark mode */
[data-theme="dark"] .hljs-string {
  color: #ff6b6b !important;
}

/* SQL code blocks - improved syntax highlighting */
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .language-sql .hljs-keyword {
  color: #002fff !important;
  font-weight: bold;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .language-sql .hljs-string,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .language-sql .hljs-literal,
[data-theme="dark"] code .hljs-string,
[data-theme="dark"] pre .hljs-string,
[data-theme="dark"] .highlight .hljs-string,
[data-theme="dark"] .codeblock .hljs-string {
  color: #ff6b6b !important;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .language-sql .hljs-number {
  color: #bd93f9 !important;
}

[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .language-sql .hljs-comment {
  color: #a46262 !important;
  font-style: italic;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .language-sql .hljs-built_in {
  color: #8be9fd !important;
}

[data-theme="dark"] .hljs-type,
[data-theme="dark"] .language-sql .hljs-type {
  color: #ffb86c !important;
}

[data-theme="dark"] .hljs-operator,
[data-theme="dark"] .language-sql .hljs-operator {
  color: #ff79c6 !important;
}

[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .language-sql .hljs-variable {
  color: #50fa7b !important;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .language-sql .hljs-title {
  color: #50fa7b !important;
}

/* Post actions bar (Next/Previous, Go to top, Socials) */
[data-theme="dark"] .post-actions-wrap {
  background: var(--header-bg) !important;
}

[data-theme="dark"] .post-action {
  background: var(--header-bg) !important;
}

[data-theme="dark"] .post-action a,
[data-theme="dark"] .post-action button,
[data-theme="dark"] .post-action-btn {
  color: var(--text-color) !important;
  background: transparent !important;
}

[data-theme="dark"] .post-action a:hover,
[data-theme="dark"] .post-action button:hover,
[data-theme="dark"] .post-action-btn:hover {
  color: var(--link-color) !important;
}

[data-theme="dark"] .post-action i,
[data-theme="dark"] .post-action .fa,
[data-theme="dark"] .post-action .fas,
[data-theme="dark"] .post-action .fab {
  color: var(--text-color) !important;
}

[data-theme="dark"] .post-action:hover i,
[data-theme="dark"] .post-action:hover .fa,
[data-theme="dark"] .post-action:hover .fas,
[data-theme="dark"] .post-action:hover .fab {
  color: var(--link-color) !important;
}

/* Share buttons */
[data-theme="dark"] .share-options {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .share-options a {
  color: var(--text-color) !important;
}

[data-theme="dark"] .share-options a:hover {
  color: var(--link-color) !important;
}

/* Post navigation (Previous/Next post links) */
[data-theme="dark"] .post-nav,
[data-theme="dark"] .post-nav-item {
  background: var(--header-bg) !important;
}

[data-theme="dark"] .post-nav-item a {
  color: var(--text-color) !important;
}

[data-theme="dark"] .post-nav-item a:hover {
  color: var(--link-color) !important;
}

[data-theme="dark"] .post-nav-item .post-nav-caption {
  color: var(--footer-text) !important;
}

/* Bottom bar actions */
[data-theme="dark"] #bottom-bar {
  background: var(--header-bg) !important;
  border-top-color: var(--border-color) !important;
}

[data-theme="dark"] #bottom-bar ul,
[data-theme="dark"] #bottom-bar li {
  background: transparent !important;
}

[data-theme="dark"] #bottom-bar .post-action,
[data-theme="dark"] #bottom-bar .post-action a,
[data-theme="dark"] #bottom-bar .post-action i {
  color: var(--text-color) !important;
  background: transparent !important;
}

[data-theme="dark"] #bottom-bar .post-action:hover,
[data-theme="dark"] #bottom-bar .post-action:hover a,
[data-theme="dark"] #bottom-bar .post-action:hover i {
  color: var(--link-color) !important;
}

/* Cookie consent adjustments if needed */
[data-theme="dark"] .cc-window {
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* Cover image overlay for better text readability */
[data-theme="dark"] .post-header-cover .post-header {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* Tooltip styles */
[data-theme="dark"] .tooltip-inner {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* Selection highlight */
[data-theme="dark"] ::selection {
  background-color: #5dade2 !important;
  color: #1a1a2e !important;
}

[data-theme="dark"] ::-moz-selection {
  background-color: #5dade2 !important;
  color: #1a1a2e !important;
}

/* Dark mode toggle button styles */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 30px 0;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode-toggle button {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.dark-mode-toggle button:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode-toggle button i {
  font-size: 16px;
}

/* Hide sun icon in light mode, show moon */
[data-theme="light"] .dark-mode-toggle .fa-sun,
.dark-mode-toggle .fa-sun {
  display: none;
}

[data-theme="light"] .dark-mode-toggle .fa-moon,
.dark-mode-toggle .fa-moon {
  display: inline-block;
}

/* Show sun icon in dark mode, hide moon */
[data-theme="dark"] .dark-mode-toggle .fa-sun {
  display: inline-block;
}

[data-theme="dark"] .dark-mode-toggle .fa-moon {
  display: none;
}

/* Smooth transition for theme changes */
body,
#main,
#header,
#footer,
#about #about-card,
h1, h2, h3, h4, h5, h6,
a,
p,
code,
pre,
table,
blockquote {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Reading Progress Indicator - Horizontal at bottom */
.reading-progress-container {
  position: fixed;
  bottom: 60px;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: none;
  transition: bottom 0.25s ease-in-out;
}

.reading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #5dade2 0%, #3498db 100%);
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.1s ease-out;
}

.reading-progress-percentage {
  position: absolute;
  right: 15px;
  top: -22px;
  font-size: 11px;
  font-weight: 600;
  color: #5d686f;
  background: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  white-space: nowrap;
}

/* Dark mode styles for reading progress */
[data-theme="dark"] .reading-progress-container {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .reading-progress-percentage {
  color: #e0e0e0;
  background: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Show on post pages */
.post .reading-progress-container,
.single .reading-progress-container {
  display: block;
}

/* Table of Contents - Right Sidebar */
.toc-container {
  --initial-top: 350px;
  position: fixed;
  right: 20px;
  top: var(--initial-top);
  width: 220px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 15;
  display: none;
  font-size: 13px;
  scrollbar-width: thin;
  transition: top 0.3s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

/* Sticky mode when scrolled */
.toc-container.toc-sticky {
  max-height: calc(100vh - 40px);
}

/* Hide ToC when sidebar is open */
.toc-container.sidebar-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.toc-container::-webkit-scrollbar {
  width: 4px;
}

.toc-container::-webkit-scrollbar-track {
  background: transparent;
}

.toc-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.toc-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #5dade2;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  margin: 0;
  padding: 0;
}

.toc-list a {
  display: block;
  padding: 6px 0 6px 0;
  color: #666;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -2px;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.toc-list a:hover {
  color: #5dade2;
  text-decoration: none;
}

.toc-list a.active {
  color: #5dade2;
  border-left-color: #5dade2;
  font-weight: 600;
  background: rgba(93, 173, 226, 0.1);
}

/* Indent based on heading level */
.toc-list .toc-h3 {
  padding-left: 20px;
}

.toc-list .toc-h4 {
  padding-left: 30px;
}

.toc-list .toc-h5 {
  padding-left: 40px;
}

.toc-list .toc-h6 {
  padding-left: 50px;
}

/* Dark mode styles for ToC */
[data-theme="dark"] .toc-container {
  background: #1a1a1a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toc-title {
  color: #fff;
}

[data-theme="dark"] .toc-list a {
  color: #a0a0a0;
}

[data-theme="dark"] .toc-list a:hover {
  color: #5dade2;
}

[data-theme="dark"] .toc-list a.active {
  color: #5dade2;
  background: rgba(93, 173, 226, 0.15);
}

[data-theme="dark"] .toc-container::-webkit-scrollbar-thumb {
  background: #444;
}

/* Show ToC only on larger screens */
@media (min-width: 1400px) {
  .toc-container {
    display: block;
  }
}

/* Hide on smaller screens */
@media (max-width: 1399px) {
  .toc-container {
    display: none !important;
  }
}