html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Theme-aware styles for API usage panels */
.api-usage pre {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  padding: .75rem;
  border-radius: .5rem;
  overflow: auto;
}
.api-usage pre.bg-light {
  /* Ensure readable background in dark mode as well */
  background-color: var(--bs-tertiary-bg) !important;
}
.api-usage code {
  color: inherit;
  background-color: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
}
.api-usage pre code {
  color: inherit !important; /* ensure pre>code inherits readable color */
  background: transparent !important;
}
.api-usage :not(pre) > code {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  padding: .12rem .3rem;
  border-radius: .25rem;
  border: 1px solid var(--bs-border-color);
}
.api-usage h5.card-title, .api-usage h6, .api-usage strong {
  color: var(--bs-emphasis-color);
}
.api-usage .text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

/* Dark theme contrast tweaks for API usage panels */
html[data-bs-theme='dark'] .api-usage {
  color: var(--bs-body-color);
}
html[data-bs-theme='dark'] .api-usage .text-body-secondary,
html[data-bs-theme='dark'] .api-usage p,
html[data-bs-theme='dark'] .api-usage li,
html[data-bs-theme='dark'] .api-usage small {
  color: var(--bs-body-color) !important;
}
html[data-bs-theme='dark'] .api-usage h6,
html[data-bs-theme='dark'] .api-usage strong {
  color: var(--bs-emphasis-color);
}
html[data-bs-theme='dark'] .api-usage pre,
html[data-bs-theme='dark'] .api-usage pre.bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-light);
  border-color: var(--bs-border-color);
}
html[data-bs-theme='dark'] .api-usage code {
  color: var(--bs-light) !important;
}
html[data-bs-theme='dark'] .api-usage pre code {
  color: var(--bs-light) !important;
}
html[data-bs-theme='dark'] .api-usage :not(pre) > code {
  background-color: rgba(255,255,255,.06);
  color: var(--bs-light) !important;
  border-color: var(--bs-border-color);
}

/* Refined palette for dark mode code blocks (API usage) */
html[data-bs-theme='dark'] .api-usage {
  --api-code-bg: #0d1117;          /* deep panel bg */
  --api-code-inline-bg: #161b22;   /* inline code chip bg */
  --api-code-fg: #8b949e;          /* gray code text */
  --api-code-inline-fg: #8b949e;   /* gray inline code text */
  --api-code-border: #30363d;      /* subtle border */
}

html[data-bs-theme='dark'] .api-usage pre,
html[data-bs-theme='dark'] .api-usage pre.bg-light {
  background-color: var(--api-code-bg) !important;
  color: var(--api-code-fg) !important;
  border-color: var(--api-code-border) !important;
}
html[data-bs-theme='dark'] .api-usage pre code {
  color: var(--api-code-fg) !important;
}
html[data-bs-theme='dark'] .api-usage :not(pre) > code {
  background-color: var(--api-code-inline-bg) !important;
  color: var(--api-code-inline-fg) !important;
  border-color: var(--api-code-border) !important;
}

/* Light theme gray code text within API usage */
html[data-bs-theme='light'] .api-usage code,
html[data-bs-theme='light'] .api-usage pre code {
  color: #6c757d !important; /* bootstrap secondary gray */
}

/* Global dark-mode defaults for code blocks (outside API usage too) */
html[data-bs-theme='dark'] pre {
  background-color: #0d1117 !important;
  color: #8b949e !important; /* gray */
  border: 1px solid #30363d !important;
}
html[data-bs-theme='dark'] pre.bg-light { background-color: #0d1117 !important; }
html[data-bs-theme='dark'] pre code { color: #8b949e !important; }
html[data-bs-theme='dark'] :not(pre) > code {
  background-color: #161b22 !important;
  color: #8b949e !important;
  border: 1px solid #30363d !important;
  padding: .12rem .3rem;
  border-radius: .25rem;
}

/* Accent system for API sections */
.api-usage .api-block { margin-bottom: 1rem; }
.api-usage .api-block pre {
  border-left: 3px solid var(--api-accent, var(--bs-border-color));
  box-shadow: inset 0 0 0 1px var(--api-code-border, var(--bs-border-color)), inset 3px 0 0 var(--api-accent, var(--bs-border-color));
  position: relative;
  border-radius: .5rem;
}

/* Copy button on code blocks */
.api-usage pre { position: relative; }
.api-usage .copy-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .2rem .5rem;
  font-size: .75rem;
  line-height: 1.2;
  border-radius: .375rem;
  border: 1px solid var(--copy-border, var(--bs-border-color));
  color: var(--copy-fg, var(--bs-body-color));
  background-color: var(--copy-bg, rgba(0,0,0,.04));
  cursor: pointer;
  user-select: none;
}
.api-usage .copy-btn:hover { filter: brightness(1.05); }
.api-usage .copy-btn:active { transform: translateY(1px); }

/* Light theme copy palette */
html[data-bs-theme='light'] .api-usage { --copy-bg: rgba(0,0,0,.04); --copy-fg: #222; --copy-border: var(--bs-border-color); }

/* Dark theme copy palette */
html[data-bs-theme='dark'] .api-usage { --copy-bg: rgba(255,255,255,.06); --copy-fg: var(--api-code-fg); --copy-border: var(--api-code-border); }
}
.api-usage .accent-curl { --api-accent: #3fb950; }      /* green */
.api-usage .accent-response { --api-accent: #d29922; }  /* amber */
.api-usage .accent-dotnet { --api-accent: #58a6ff; }    /* blue */
html[data-bs-theme='dark'] .api-usage a {
  color: var(--bs-link-color);
}
html[data-bs-theme='dark'] .api-usage a:hover {
  color: var(--bs-link-hover-color);
}