/* Dark Theme Support for FCLI Documentation */

/* Default light theme variables */
:root {
  --bg-color: #ffffff;
  --content-bg: #ffffff;
  --text-color: rgba(0, 0, 0, 0.8);
  --heading-color: rgba(0, 0, 0, 0.8);
  --link-color: #2156a5;
  --link-hover-color: #1d4b8f;
  --code-bg: #f5f5f5;
  --code-border: #cccccc;
  --table-border: #dedede;
  --table-stripe-bg: #f9f9f9;
  --banner-bg: #0079ef;
  --banner-logo-bg: #00abf3;
  --navbar-bg: #dddddf;
  --navbar-text: rgba(0, 0, 0, 0.8);
  --sidebar-bg: #f3f3f3;
  --admonition-note-bg: #e7f2fa;
  --admonition-tip-bg: #f3f8f3;
  --admonition-warning-bg: #fff6dd;
  --admonition-caution-bg: #fff3f3;
  --admonition-important-bg: #ffe5e5;
  --border-color: #cccccc;
  --toc-border: #efefed;
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #888888;
  --scrollbar-thumb-hover: #555555;
}

/* Dark theme variables */
[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --content-bg: #252526;
  --text-color: #d4d4d4;
  --heading-color: #e8e8e8;
  --link-color: #4fc3f7;
  --link-hover-color: #81d4fa;
  --code-bg: rgba(110, 118, 129, 0.4);
  --code-text: rgb(230, 237, 243);
  --code-inline-bg: rgba(110, 118, 129, 0.4);
  --code-inline-text: rgb(230, 237, 243);
  --code-border: #3e3e42;
  --table-border: #3e3e42;
  --table-stripe-bg: #2a2a2b;
  --banner-bg: #005fb8;
  --banner-logo-bg: #0078d4;
  --navbar-bg: #2d2d30;
  --navbar-text: #cccccc;
  --sidebar-bg: #252526;
  --admonition-note-bg: #1e3a5f;
  --admonition-tip-bg: #1e3a2f;
  --admonition-warning-bg: #4a3c1e;
  --admonition-caution-bg: #4a2a2a;
  --admonition-important-bg: #4a1e1e;
  --border-color: #3e3e42;
  --toc-border: #3e3e42;
  --scrollbar-track: #2d2d2d;
  --scrollbar-thumb: #555555;
  --scrollbar-thumb-hover: #777777;
}

/* Apply theme colors */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

#content {
  background-color: var(--content-bg);
}

h1, h2, h3, h4, h5, h6, #toctitle, .sidebarblock > .content > .title {
  color: var(--heading-color) !important;
}

[data-theme="dark"] .subtitle {
  color: var(--heading-color) !important;
}

.paragraph p, p {
  color: var(--text-color);
}

[data-theme="dark"] .paragraph p,
[data-theme="dark"] p,
[data-theme="dark"] .sectionbody p {
  color: var(--text-color) !important;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

/* Code blocks */
.listingblock > .content > pre,
.literalblock > .content > pre,
pre {
  background-color: var(--code-inline-bg) !important;
  border-color: var(--code-border);
}

[data-theme="dark"] .listingblock > .content > pre,
[data-theme="dark"] .literalblock > .content > pre,
[data-theme="dark"] pre {
  background-color: var(--code-inline-bg) !important;
  color: var(--code-text);
}

[data-theme="dark"] .listingblock,
[data-theme="dark"] .literalblock {
  background-color: var(--code-inline-bg) !important;
}

[data-theme="dark"] .listingblock > .content,
[data-theme="dark"] .literalblock > .content {
  background-color: var(--code-inline-bg) !important;
}

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

/* Tables */
table thead,
table tfoot {
  background-color: var(--code-bg);
}

[data-theme="dark"] table thead,
[data-theme="dark"] table tfoot {
  background-color: #2d2d2e !important;
}

[data-theme="dark"] table thead th,
[data-theme="dark"] table tfoot th {
  color: var(--text-color) !important;
  font-weight: bold;
}

table tbody tr:nth-of-type(even) {
  background-color: var(--table-stripe-bg);
}

[data-theme="dark"] table tbody tr:nth-of-type(odd) {
  background-color: #2d2d2e !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] table tbody tr:nth-of-type(even) {
  background-color: var(--table-stripe-bg) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] table tbody tr:first-child {
  background-color: #2d2d2e !important;
}

[data-theme="dark"] table tbody tr:first-child td {
  color: var(--text-color) !important;
  font-weight: bold;
}

table.tableblock {
  border-color: var(--table-border);
}

table thead th,
table tfoot th,
table tbody td {
  border-color: var(--table-border);
}

/* Banner and navbar */
#banner {
  background-color: var(--banner-bg);
}

#banner .logo {
  background-color: var(--banner-logo-bg);
}

#navbar {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
}

/* Sidebar/TOC */
#toc.toc2 {
  background-color: var(--sidebar-bg);
  border-color: var(--toc-border);
}

.sidebarblock > .content {
  background-color: var(--sidebar-bg);
  border-color: var(--border-color);
}

/* Version number and navbar text */
#navbar-version, #revnumber, .details {
  color: var(--navbar-text);
}

[data-theme="dark"] .admonitionblock td.content,
[data-theme="dark"] .admonitionblock td.icon {
  color: var(--text-color) !important;
}

/* Admonition blocks */
.admonitionblock td.content {
  border-color: var(--border-color);
}

.admonitionblock.note {
  background-color: var(--admonition-note-bg);
}

.admonitionblock.tip {
  background-color: var(--admonition-tip-bg);
}

.admonitionblock.warning {
  background-color: var(--admonition-warning-bg);
}

.admonitionblock.caution {
  background-color: var(--admonition-caution-bg);
}

.admonitionblock.important {
  background-color: var(--admonition-important-bg);
}

/* Scrollbar styling for dark theme */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Theme toggle button styling */
#theme-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 0.3s ease;
  z-index: 3000;
}

#theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 1);
}

#theme-toggle .light-icon {
  display: none;
}

#theme-toggle .dark-icon {
  display: inline;
}

[data-theme="dark"] #theme-toggle .light-icon {
  display: inline;
}

[data-theme="dark"] #theme-toggle .dark-icon {
  display: none;
}

/* Adjust navbar to accommodate theme toggle */
#navbar-version {
  right: 60px;
}

/* Dropdown menu dark theme support */
[data-theme="dark"] .dropdown-content {
  background-color: var(--navbar-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-content a {
  color: var(--text-color);
}

[data-theme="dark"] .dropdown-content a:hover {
  background-color: var(--code-bg);
}

[data-theme="dark"] .dropdown-content span {
  color: var(--navbar-text);
}
}

/* Copy button styles for code blocks */
/* Ensure containers have proper positioning */
.listingblock > .content,
.literalblock > .content {
  position: relative !important;
}

.copy-button {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  padding: 6px 12px !important;
  background-color: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-family: "Open Sans", "DejaVu Sans", sans-serif !important;
  color: var(--text-color) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease, background-color 0.2s ease !important;
  z-index: 10 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  font-weight: normal !important;
  display: block !important;
}

.listingblock:hover .copy-button,
.literalblock:hover .copy-button {
  opacity: 1 !important;
}

.copy-button:hover {
  background-color: var(--link-color) !important;
  color: #ffffff !important;
  border-color: var(--link-color) !important;
}

.copy-button:focus {
  outline: 2px solid var(--link-color) !important;
  outline-offset: 2px !important;
}

.copy-button.copied {
  background-color: #28a745 !important;
  color: #ffffff !important;
  border-color: #28a745 !important;
  opacity: 1 !important;
}

[data-theme="dark"] .copy-button {
  background-color: #3e3e42 !important;
  border-color: #555555 !important;
}

[data-theme="dark"] .copy-button:hover {
  background-color: var(--link-color) !important;
  border-color: var(--link-color) !important;
  color: #ffffff !important;
}