:root,
html[data-bs-theme="light"] {
  /* Hive brand palette */
  --hive-red: #E31337;
  --hive-black: #212529; /* Bootstrap default dark text */
  --hive-grey: #e7e7f1;
  --hive-lightgrey: #f0f0f8;

  /* Map to Bootstrap CSS variables */
  --bs-primary: var(--hive-red);
  --bs-primary-rgb: 227, 19, 55;
  --bs-secondary: var(--hive-grey);
  --bs-body-bg: var(--hive-lightgrey);
  --bs-secondary-bg: #f8f9fa; /* used by bg-body-secondary */
  --bs-tertiary-bg: #f1f3f5;  /* used by bg-body-tertiary (navbar/footer) */
  --bs-body-color: var(--hive-black);
  /* Links use RGB vars in Bootstrap 5.3 */
  --bs-link-color-rgb: 227, 19, 55; /* Hive red */
  --bs-link-color: var(--hive-red);
  /* Hover: slightly darker red; color-mix supported in modern browsers */
  --bs-link-hover-color: color-mix(in srgb, var(--hive-red), #000 15%);
  --bs-link-hover-color-rgb: 200, 16, 47; /* fallback approximate */
  --bs-focus-ring-color: rgba(227, 19, 55, 0.25);

  /* Optional accents */
  --bs-border-color: #dee2e6;
  --bs-code-color: var(--hive-red);
  /* Surfaces */
  --surface-1: #ffffff;         /* cards, panels */
  --surface-2: #f6f7f9;         /* soft containers */
}

/* Dark theme variable overrides */
html[data-bs-theme="dark"] {
  /* Keep brand red, adjust neutrals for dark */
  --hive-red: #E31337;
  --hive-black: #e6edf3; /* light text */
  --hive-grey: #2d333b;
  --hive-lightgrey: #0d1117; /* body background */

  /* Bootstrap mappings */
  --bs-primary: var(--hive-red);
  --bs-primary-rgb: 227, 19, 55;
  --bs-secondary: var(--hive-grey);
  --bs-body-bg: var(--hive-lightgrey);
  --bs-secondary-bg: #161b22; /* darker panel */
  --bs-tertiary-bg: #0f141a;  /* navbar/footer bg */
  --bs-body-color: var(--hive-black);
  --bs-link-color-rgb: 227, 19, 55;
  --bs-link-color: var(--hive-red);
  --bs-link-hover-color: color-mix(in srgb, var(--hive-red), white 15%);
  --bs-link-hover-color-rgb: 255, 90, 110; /* rough */
  --bs-focus-ring-color: rgba(227, 19, 55, 0.35);
  --bs-border-color: #30363d;
  --bs-code-color: #ff7b72; /* accent for inline code */
  /* Surfaces */
  --surface-1: #0f141a;
  --surface-2: #161b22;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, black)) {
  :root {
    --bs-link-hover-color: #c8102f; /* close darker red */
  }
}

/* Navbar tweaks */
.navbar {
  --bs-navbar-color: rgba(33, 37, 41, 0.8);
  --bs-navbar-hover-color: var(--hive-black);
  --bs-navbar-brand-color: var(--hive-black);
  --bs-navbar-brand-hover-color: var(--hive-red);
  backdrop-filter: saturate(1.4) blur(6px);
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
}
html[data-bs-theme="dark"] .navbar {
  --bs-navbar-color: rgba(230, 237, 243, 0.8);
  --bs-navbar-hover-color: var(--hive-black);
  --bs-navbar-brand-color: var(--hive-black);
  --bs-navbar-brand-hover-color: var(--hive-red);
}

.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
  color: var(--hive-red);
}
.navbar .nav-link.active {
  border-bottom: 2px solid var(--hive-red);
}

/* Primary button uses Hive red */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hive-red);
  --bs-btn-border-color: var(--hive-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--hive-red), #000 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--hive-red), #000 10%);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--hive-red), #000 15%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--hive-red), #000 15%);
}
html[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--hive-red), white 8%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--hive-red), white 8%);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--hive-red), white 12%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--hive-red), white 12%);
}
@supports not (color: color-mix(in srgb, red, black)) {
  .btn-primary {
    --bs-btn-hover-bg: #cb1231;
    --bs-btn-hover-border-color: #cb1231;
    --bs-btn-active-bg: #b4102b;
    --bs-btn-active-border-color: #b4102b;
  }
}

/* Outline primary matches Hive red */
.btn-outline-primary {
  --bs-btn-color: var(--hive-red);
  --bs-btn-border-color: var(--hive-red);
  --bs-btn-hover-bg: var(--hive-red);
  --bs-btn-hover-border-color: var(--hive-red);
  --bs-btn-hover-color: #fff;
}
html[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--hive-red);
  --bs-btn-border-color: var(--hive-red);
  --bs-btn-hover-bg: var(--hive-red);
  --bs-btn-hover-border-color: var(--hive-red);
  --bs-btn-hover-color: #fff;
}

/* Badges */
.badge.text-bg-primary {
  background-color: var(--hive-red) !important;
}

/* Cards and footer adopt body bg subtly */
.card {
  border-radius: 0.75rem;
  background-color: var(--surface-1);
  border-color: var(--bs-border-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
html[data-bs-theme="dark"] .card {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.card .card-header {
  background-color: var(--surface-2);
  border-bottom-color: var(--bs-border-color);
}

.list-group-item {
  background-color: var(--surface-1);
}

/* Utility classes for brand colors if needed */
.bg-hive-red { background-color: var(--hive-red) !important; }
.text-hive-red { color: var(--hive-red) !important; }
.bg-hive-light { background-color: var(--hive-lightgrey) !important; }
.bg-hive-grey { background-color: var(--hive-grey) !important; }

/* Links (do not override button anchors) */
a:not(.btn) {
  color: var(--hive-red);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--hive-red), transparent 60%);
  text-underline-offset: 2px;
}
a:not(.btn):visited {
  color: var(--hive-red);
}
a:not(.btn):hover {
  color: var(--bs-link-hover-color);
  text-decoration-color: var(--hive-red);
}

/* Softer alerts, badges, and chips */
/* High-contrast tag chip using Hive red */
.tag-chip {
  background-color: var(--hive-red) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--hive-red), #000 15%);
}
.tag-chip:hover,
.tag-chip:focus {
  background-color: color-mix(in srgb, var(--hive-red), #000 10%) !important;
  color: #fff !important;
}
html[data-bs-theme="dark"] .tag-chip {
  background-color: color-mix(in srgb, var(--hive-red), black 10%) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--hive-red), black 25%) !important;
}
html[data-bs-theme="dark"] .tag-chip:hover,
html[data-bs-theme="dark"] .tag-chip:focus {
  background-color: color-mix(in srgb, var(--hive-red), black 18%) !important;
}

/* Form controls focus ring in Hive red */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--hive-red);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* Checkbox / radio colors */
.form-check-input:checked {
  background-color: var(--hive-red);
  border-color: var(--hive-red);
}
.form-check-input {
  accent-color: var(--hive-red);
}

/* Pagination active item */
.pagination .page-item.active .page-link {
  background-color: var(--hive-red);
  border-color: var(--hive-red);
}
.pagination .page-link {
  color: var(--hive-red);
}

/* Post/Feed layout niceties */
.post-meta {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  gap: .25rem; /* tighter than gap-2 */
}
.post-meta a {
  color: var(--bs-secondary-color);
}
.post-meta a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}
.post-meta code {
  color: var(--bs-secondary-color);
  word-break: break-all;
}
.reply-indicator {
  color: var(--bs-secondary-color);
}

/* Accordion polish */
.accordion-button {
  background-color: var(--surface-2);
}
.accordion-button:not(.collapsed) {
  color: inherit;
  background-color: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.accordion-item {
  background-color: var(--surface-1);
  border-color: var(--bs-border-color);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Keep long trx ids to a single line with ellipsis */
.trx-hash {
  display: inline-block;
  max-width: 40ch; /* roughly fits within meta line */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--bs-secondary-color);
}

/* Full txid variant: same visual style, no truncation */
.trx-hash-full {
  max-width: none;
  white-space: normal;
  word-break: break-all;
}

/* Ensure the left meta column can shrink/truncate in flex */
.meta-left {
  min-width: 0;
}

.meta-right {
  flex: 0 0 auto;
}

/* Responsive media inside post content */
.card-text img,
.card-text video,
.card-text iframe {
  max-width: 100%;
  height: auto;
}

/* Ensure embeds don't overflow; let iframes scale to container */
.card-text iframe {
  width: 100%;
}

/* Reset figure margins to avoid unexpected overflow */
.card-text figure {
  max-width: 100%;
  margin: 0;
}

/* YouTube preview styling */
.youtubePreview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.youtubePreview > div { pointer-events: none; }
.youtubeThumbnail { width: 100%; height: 100%; object-fit: cover; display: block; }
.playButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .2s ease; }
.playIcon { filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); transition: filter .2s ease; }
.youtubePreview:hover .playButton { transform: translate(-50%, -50%) scale(1.06); }
.youtubePreview:hover .playIcon { filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }

/* --- Code & Syntax Highlighting (Pygments via codehilite) --- Enhanced for better visibility --- */
/* Inline code */
code {
  background: #f1f3f4;
  color: #202124;
  padding: .2rem .35rem;
  border-radius: 4px;
  border: 1px solid #dadce0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
}

/* Code blocks */
.codehilite {
  background: #f8f9fa;
  color: #212529;
  border-radius: 8px;
  overflow: auto;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.codehilite .hll { /* remove highlight line background */
  background: transparent !important;
}
.codehilite pre {
  margin: 0;
  padding: 1rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
  line-height: 1.5;
}
pre code { /* prevent double-styling inside blocks */
  background: transparent;
  padding: 0;
  border: 0; /* prevent extra lines around code content inside pre */
}

/* Prevent underlines/overlines inside highlighted code blocks (e.g., if linkified) */
.codehilite a,
.codehilite span {
  text-decoration: none !important;
}

/* Enhanced token colors for better visibility */
.codehilite .k { color: #0000ff; font-weight: bold; } /* Keywords - bright blue */
.codehilite .o { color: #d73a49; font-weight: bold; } /* Operators - red */
.codehilite .c, .codehilite .cm, .codehilite .c1, .codehilite .cs, .codehilite .cp {
  color: #6a737d; font-style: italic;
} /* Comments - muted gray */
.codehilite .na, .codehilite .nc, .codehilite .nd, .codehilite .nn { color: #6f42c1; font-weight: bold; } /* Names */
.codehilite .nb, .codehilite .m { color: #005cc5; } /* Builtins, numbers */
.codehilite .nf { color: #6f42c1; font-weight: bold; } /* Functions */
.codehilite .nt { color: #22863a; font-weight: bold; } /* Tags */
.codehilite .nv, .codehilite .no { color: #e36209; font-weight: bold; } /* Variables */
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb, .codehilite .sc, .codehilite .sd, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sr, .codehilite .ss, .codehilite .sx {
  color: #032f62; font-weight: bold;
} /* Strings - darker blue for contrast */
.codehilite .p { color: #24292e; } /* Punctuation */

/* Dark theme adjustments with high contrast */
html[data-bs-theme="dark"] code {
  background: #2d3748;
  color: #e2e8f0;
  border-color: #4a5568;
}
html[data-bs-theme="dark"] .codehilite {
  background: #2d3748;
  color: #e2e8f0;
  border-color: #4a5568;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-bs-theme="dark"] .codehilite .hll {
  background: transparent !important;
}
html[data-bs-theme="dark"] .codehilite .c,
html[data-bs-theme="dark"] .codehilite .cm,
html[data-bs-theme="dark"] .codehilite .c1,
html[data-bs-theme="dark"] .codehilite .cs,
html[data-bs-theme="dark"] .codehilite .cp {
  color: #a0aec0;
  font-style: italic;
}
html[data-bs-theme="dark"] .codehilite .k { color: #63b3ed; font-weight: bold; } /* Keywords - bright blue */
html[data-bs-theme="dark"] .codehilite .o { color: #fc8181; font-weight: bold; } /* Operators - red */
html[data-bs-theme="dark"] .codehilite .na, .codehilite .nc, .codehilite .nd, .codehilite .nn { color: #9f7aea; font-weight: bold; }
html[data-bs-theme="dark"] .codehilite .nb, .codehilite .m { color: #63b3ed; }
html[data-bs-theme="dark"] .codehilite .nf { color: #9f7aea; font-weight: bold; }
html[data-bs-theme="dark"] .codehilite .nt { color: #68d391; font-weight: bold; }
html[data-bs-theme="dark"] .codehilite .nv, .codehilite .no { color: #fbb6ce; font-weight: bold; }
html[data-bs-theme="dark"] .codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb, .codehilite .sc, .codehilite .sd, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sr, .codehilite .ss, .codehilite .sx {
  color: #fbb6ce; font-weight: bold;
} /* Strings - pink for contrast */
html[data-bs-theme="dark"] .codehilite .p { color: #e2e8f0; }

/* Table responsive styles for theme consistency */
.table-responsive {
  background-color: var(--surface-1);
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}
.table-responsive .table {
  margin-bottom: 0;
  background-color: var(--surface-1);
  color: var(--bs-body-color);
}
.table-responsive .table th,
.table-responsive .table td {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.table-responsive .table thead th {
  background-color: var(--surface-2);
  border-bottom: 2px solid var(--bs-border-color);
  font-weight: 600;
}
.table-responsive .table tbody tr:nth-child(even) {
  background-color: var(--surface-2);
}
.table-responsive .table tbody tr:hover {
  background-color: var(--bs-secondary-bg);
}

html[data-bs-theme="dark"] .table-responsive {
  background-color: var(--surface-1);
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .table-responsive .table {
  background-color: var(--surface-1);
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .table-responsive .table th,
html[data-bs-theme="dark"] .table-responsive .table td {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .table-responsive .table thead th {
  background-color: var(--surface-2);
  border-bottom-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .table-responsive .table tbody tr:nth-child(even) {
  background-color: var(--surface-2);
}
html[data-bs-theme="dark"] .table-responsive .table tbody tr:hover {
  background-color: var(--bs-secondary-bg);
}