:root {
  --md-primary-fg-color: hsl(var(--primary));
  --md-primary-fg-color--light: hsl(var(--primary) / 0.85);
  --md-primary-fg-color--dark: hsl(var(--primary) / 0.95);
  --md-accent-fg-color: hsl(var(--primary));
  --md-typeset-color: hsl(var(--foreground));
  --md-typeset-kbd-color: hsl(var(--foreground));
  --md-typeset-mark-color: hsl(var(--foreground));
  --md-typeset-table-color: hsl(var(--foreground));
  --md-default-bg-color: hsl(var(--background));
  --md-default-fg-color: hsl(var(--foreground));
  --md-default-fg-color--light: hsl(var(--muted-foreground));
  --md-default-fg-color--lighter: hsl(var(--muted-foreground) / 0.7);
  --md-default-fg-color--lightest: hsl(var(--muted-foreground) / 0.35);
  --md-code-bg-color: hsl(var(--muted));
  --md-code-fg-color: hsl(var(--foreground));
  --md-typeset-a-color: hsl(var(--primary));
}

.dark {
  --md-typeset-color: hsl(var(--foreground));
  --md-typeset-kbd-color: hsl(var(--foreground));
  --md-typeset-mark-color: hsl(var(--foreground));
  --md-typeset-table-color: hsl(var(--foreground));
  --md-default-bg-color: hsl(var(--background));
  --md-default-fg-color: hsl(var(--foreground));
  --md-default-fg-color--light: hsl(var(--muted-foreground));
  --md-default-fg-color--lighter: hsl(var(--muted-foreground) / 0.75);
  --md-default-fg-color--lightest: hsl(var(--muted-foreground) / 0.45);
  --md-code-bg-color: hsl(var(--muted));
  --md-code-fg-color: hsl(var(--foreground));
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Global content typography should always follow active theme tokens */
.md-content__inner,
.md-content__inner .md-typeset,
.md-content__inner .md-typeset p,
.md-content__inner .md-typeset li,
.md-content__inner .md-typeset td,
.md-content__inner .md-typeset th,
.md-content__inner .md-typeset dt,
.md-content__inner .md-typeset dd,
.md-content__inner .md-typeset summary,
.md-content__inner .md-typeset blockquote,
.md-content__inner .md-typeset label,
.md-content__inner .md-typeset span,
.md-content__inner .md-typeset strong,
.md-content__inner .md-typeset em,
.md-content__inner .md-typeset small {
  color: hsl(var(--foreground)) !important;
}

.md-content__inner .md-typeset a {
  color: hsl(var(--primary)) !important;
}

/* Manual-wide table surfaces should use theme tokens in light/dark */
.md-typeset__table,
.md-typeset__scrollwrap {
  background: transparent !important;
}

.md-content__inner .md-typeset table {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.md-content__inner .md-typeset table thead,
.md-content__inner .md-typeset table thead tr,
.md-content__inner .md-typeset table thead th {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.md-content__inner .md-typeset table tbody tr,
.md-content__inner .md-typeset table tbody td {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.md-content__inner .md-typeset table tbody tr:nth-child(even) td {
  background: hsl(var(--muted) / 0.35) !important;
}

.md-content__inner .md-typeset table tbody tr:hover td {
  background: hsl(var(--accent) / 0.5) !important;
}

/* Hard override for markdown HTML tables rendered inside accordion bodies */
.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem;
}

.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] table,
.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] thead,
.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] tbody,
.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] tr,
.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] th,
.md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] td {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

[data-theme="dark"] .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] table,
[data-theme="dark"] .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] tbody tr td,
html.dark .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] table,
html.dark .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] tbody tr td {
  background: hsl(var(--card)) !important;
}

[data-theme="dark"] .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] thead th,
html.dark .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] thead th {
  background: hsl(var(--muted)) !important;
}

[data-theme="dark"] .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] tbody tr:nth-child(even) td,
html.dark .md-content__inner .md-typeset .hs-acc-body div[style*="overflow-x:auto"] tbody tr:nth-child(even) td {
  background: hsl(var(--muted) / 0.35) !important;
}

.md-header,
.md-tabs {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.md-header__title,
.md-tabs__link {
  color: hsl(var(--primary-foreground));
}

/* Remove old low-res logo icon from header; we render our own brand row */
.md-header .md-logo {
  display: none !important;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: hsl(var(--foreground));
}

.md-typeset mark {
  background: hsl(var(--primary) / 0.22);
  color: hsl(var(--foreground));
}

.md-nav__title,
.md-nav__link {
  color: hsl(var(--foreground));
}

.md-search__input {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / 0.45);
}

.md-search,
.md-search__inner,
.md-search__form {
  background: transparent !important;
}

.md-header__button.md-icon[for="__search"],
.md-search__icon,
.md-search__icon.md-icon {
  color: hsl(var(--card-foreground));
}

.md-search__icon svg {
  color: currentColor;
}

.md-search__icon svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.hasscloud-manual-theme-toggle {
  margin-left: 1rem;
  margin-right: 0.35rem;
  border: 1px solid hsl(var(--primary-foreground) / 0.35);
  background: hsl(var(--primary-foreground) / 0.14);
  color: hsl(var(--primary-foreground));
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  width: 1.72rem;
  height: 1.72rem;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 2px 6px hsl(var(--primary) / 0.28);
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.hasscloud-manual-theme-toggle:hover {
  background: hsl(var(--primary-foreground) / 0.24);
  box-shadow: 0 4px 10px hsl(var(--primary) / 0.35);
}

.hasscloud-manual-theme-toggle:active {
  transform: translateY(1px);
}

.hasscloud-manual-theme-toggle__icon {
  width: auto;
  text-align: center;
  line-height: 1;
  display: inline-flex;
}

.hasscloud-manual-theme-toggle__label {
  line-height: 1;
  display: none;
}

.hasscloud-manual-theme-toggle__icon svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dark .md-header__button.md-icon[for="__search"],
.dark .md-search__icon,
.dark .md-search__icon.md-icon {
  color: hsl(var(--foreground));
}

.dark .md-search,
.dark .md-search__inner,
.dark .md-search__form,
.dark .md-search__output,
.dark .md-search-result,
.dark .md-search-result__meta {
  color: hsl(var(--foreground)) !important;
}

.dark .md-search__inner {
  border: 0 !important;
  box-shadow: none !important;
}

.dark .md-search__form {
  border-bottom: 0 !important;
}

.dark .md-search__input {
  background: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dark .md-search__input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .md-search-result__link,
.dark .md-search-result__title,
.dark .md-search-result__teaser {
  color: hsl(var(--foreground)) !important;
}

.dark .md-search-result *,
.dark .md-search-result__article *,
.dark .md-search-result__meta *,
.dark .md-search-result__teaser *,
.dark .md-search-result__title * {
  color: hsl(var(--foreground)) !important;
}

.dark .md-search-result__article {
  background: hsl(var(--muted)) !important;
}

.dark .md-search__output {
  background: hsl(var(--card)) !important;
}

.dark .md-search-result__meta {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.dark .md-search-result__more,
.dark .md-search-result__more > summary,
.dark .md-search-result__more > summary * {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}

.dark .md-search__icon,
.dark .md-search__icon.md-icon,
.dark .md-search__icon svg,
.dark .md-search__icon svg path,
.dark .md-header__button.md-icon[for="__search"],
.dark .md-header__button.md-icon[for="__search"] svg,
.dark .md-header__button.md-icon[for="__search"] svg path {
  color: hsl(var(--foreground)) !important;
  fill: hsl(var(--foreground)) !important;
  stroke: hsl(var(--foreground)) !important;
}

.dark .md-search__scrollwrap {
  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--card));
}

.dark .md-search__scrollwrap::-webkit-scrollbar {
  width: 10px;
}

.dark .md-search__scrollwrap::-webkit-scrollbar-track {
  background: hsl(var(--card));
}

.dark .md-search__scrollwrap::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.75);
  border-radius: 9999px;
}

.md-search__input::placeholder {
  color: hsl(var(--muted-foreground));
}

/* Replace Material's panel title fades with branded solid red */
.md-nav__title {
  background: hsl(var(--primary)) !important;
  background-image: none !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: none !important;
}

.md-nav__title .md-nav__button,
.md-nav__title .md-nav__icon,
.md-nav__title .md-ellipsis {
  color: hsl(var(--primary-foreground)) !important;
}

/* Remove Material fade overlays behind panel headers in all modes */
.md-sidebar .md-nav__title::before,
.md-sidebar .md-nav__title::after,
.md-sidebar .md-nav__title .md-nav__button::before,
.md-sidebar .md-nav__title .md-nav__button::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Prevent sidebar scrollbar flash during route transitions while keeping scroll support */
.md-sidebar__scrollwrap,
.md-sidebar__inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.md-sidebar__scrollwrap::-webkit-scrollbar,
.md-sidebar__inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Branded top header section: logo + HASSCloud | page title */
.hasscloud-manual-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--primary-foreground));
  text-decoration: none;
  min-width: 0;
}

.hasscloud-manual-brand-link__logo {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
}

.hasscloud-manual-brand-link__name {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hasscloud-manual-page-topic {
  color: hsl(var(--primary-foreground));
}

.hasscloud-manual-page-topic .md-ellipsis {
  display: inline-flex;
  align-items: center;
}

.hasscloud-manual-page-topic .md-ellipsis::before {
  content: "";
  margin: 0 0.65rem;
  width: 1px;
  height: 1.05rem;
  background: hsl(var(--primary-foreground) / 0.55);
  display: inline-block;
}

/* Keep brand + page title visible together in header across scroll states */
.md-header__title .md-header__ellipsis {
  display: inline-flex !important;
  align-items: center;
}

.md-header__title .md-header__topic {
  display: inline-flex !important;
  align-items: center;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  position: static !important;
  transition: none !important;
}

.md-header__title .md-header__topic .md-ellipsis {
  display: inline-flex;
  align-items: center;
}