/* ==========================================================================
   ACS Gruppe – DocFX Corporate Theme Overrides (Aident by ACS)

   Purpose:
   - Align DocFX UI (navbar, TOC, right "In this article", tables, callouts)
     with ACS Corporate Design.

   How it works:
   - Defines design tokens in :root (colors, fonts, radii).
   - Overrides DocFX/Bootstrap selectors for consistent ACS look.
   - Tables: .table-responsive wrapper owns the outer border to avoid doubles.
   - Admonitions: unified ACS panels for TIP/NOTE/WARNING/IMPORTANT and alerts.

   Assets:
   - Fonts (woff2): <docfx_site>/styles/fonts/
       Poppins-*.woff2, WorkSans-*.woff2
   - Logos:
       logo.svg (light), logo_dark.svg (dark) in same folder as this CSS

   Do NOT:
   - Add ad-hoc overrides in other CSS files.
   - Add borders to both .table-responsive and table (causes double borders).

   Verification checklist:
   - Home page + long article page
   - Left TOC active item + hover
   - Right "IN THIS ARTICLE" panel (single border, readable in dark mode)
   - Tables inside and outside .table-responsive (no double borders)
   - TIP/NOTE/WARNING/IMPORTANT callouts
   - Light + Dark mode

   Last updated: 2026-01-26
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Design Tokens + Bootstrap Alignment
   -------------------------------------------------------------------------- */

:root {
  /* Brand Colours (Primary) */
  --acs-pure-blue:  #0097D9;
  --acs-black:      #000000;
  --acs-white:      #FFFFFF;

  /* Brand Colours (Secondary) */
  --acs-dark-blue:          #213D77;
  --acs-medium-blue:        #1362A0;
  --acs-light-grayish-blue: #F4F6FC;
  --acs-grayish-blue:       #E2E6EA;

  /* Typography */
  --font-headings: 'Poppins', 'Aptos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:     'Work Sans', 'Aptos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Shape */
  --radius-brand:    14px;
  --radius-brand-sm: 10px;

  /* UI tokens */
  --text-muted:  rgba(0, 0, 0, 0.60);
  --focus-ring:  rgba(0, 151, 217, 0.35);

  /* Bootstrap alignment */
  --bs-primary: var(--acs-pure-blue);
  --bs-link-color: var(--acs-pure-blue);
  --bs-link-hover-color: var(--acs-medium-blue);

  --bs-border-radius: var(--radius-brand);
  --bs-border-radius-sm: var(--radius-brand-sm);

  --bs-body-font-family: var(--font-body);
  --bs-headings-font-family: var(--font-headings);

  --bs-focus-ring-color: var(--focus-ring);
}

/* Theme variables */
[data-bs-theme="light"] {
  --bs-body-bg: var(--acs-white);
  --bs-body-color: var(--acs-black);
  --bs-border-color: var(--acs-grayish-blue);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--acs-black);
  --bs-body-color: var(--acs-white);
  --bs-border-color: rgba(255, 255, 255, 0.16);

  --bs-link-color: var(--acs-pure-blue);
  --bs-link-hover-color: #5cc4ef;
}


/* --------------------------------------------------------------------------
   2) Font Faces
   Put .woff2 under: <docfx_site>/styles/fonts/
   -------------------------------------------------------------------------- */

/* Poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Poppins-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-Bold.woff2') format('woff2');
}

/* Work Sans */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/WorkSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/WorkSans-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/WorkSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/WorkSans-Bold.woff2') format('woff2');
}


/* --------------------------------------------------------------------------
   3) Global Typography & Base Elements
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0;
}

b, strong {
  font-weight: var(--fw-bold);
}

article img {
  margin-bottom: 1rem;
  border-radius: var(--radius-brand-sm);
}

/* Article rhythm */
article h1 {
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid rgba(0, 151, 217, 0.28);
}
article h2 { margin: 2rem 0 0.9rem 0; }
article h3 { margin: 1.5rem 0 0.75rem 0; }

/* Links */
a {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
.breadcrumb a:hover,
.nav-link:hover,
.affix ul li a:hover,
.toc li > a:hover {
  color: var(--bs-link-hover-color) !important;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   4) DocFX small fixes + Logo
   -------------------------------------------------------------------------- */

.affix ul > li.active > a:hover {
  color: var(--acs-pure-blue);
}

.expand-stub + a {
  text-decoration: none !important;
}

/* Logo */
#logo {
  max-width: 100%;
  height: auto;
  width: 110px;
}

[data-bs-theme="dark"] #logo { content: url("logo_dark.svg"); }
[data-bs-theme="light"] #logo { content: url("logo.svg"); }


/* --------------------------------------------------------------------------
   5) Top Navbar (clean underline + dark mode)
   -------------------------------------------------------------------------- */

.navbar,
.navbar.navbar-default {
  background: var(--acs-white) !important;
  border-bottom: 1px solid var(--acs-grayish-blue) !important;
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar.navbar-default {
  background: var(--acs-black) !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}

/* Remove “sketchy” underline behavior in navbar */
.navbar a,
.navbar .nav-link {
  text-decoration: none !important;
}

.navbar .navbar-nav .nav-link,
.navbar a.nav-link,
.navbar .navbar-nav > li > a {
  color: var(--acs-black) !important;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
}

[data-bs-theme="dark"] .navbar .navbar-nav .nav-link,
[data-bs-theme="dark"] .navbar .navbar-nav > li > a {
  color: rgba(255,255,255,0.88) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav > li > a:hover {
  color: var(--acs-pure-blue) !important;
  text-decoration: none !important;
}

.navbar .navbar-nav .active > a,
.navbar .navbar-nav .nav-link.active {
  color: var(--acs-pure-blue) !important;
  position: relative;
  text-decoration: none !important;
}

/* Clean pill underline for active item */
.navbar .navbar-nav .active > a::after,
.navbar .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.15rem;
  height: 3px;
  background: var(--acs-pure-blue);
  opacity: 0.9;
  border-radius: 999px;
}


/* --------------------------------------------------------------------------
   6) Inputs (Search / Filter)
   -------------------------------------------------------------------------- */

input[type="search"],
input.form-control,
#search,
#toc_filter_input,
.filter .form-control {
  border-radius: var(--radius-brand) !important;
  border: 1px solid var(--acs-grayish-blue) !important;
  background: var(--acs-white) !important;
  box-shadow: none !important;
}

input[type="search"]:focus,
input.form-control:focus,
#search:focus,
#toc_filter_input:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--acs-pure-blue) !important;
  box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
}

[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input.form-control,
[data-bs-theme="dark"] #toc_filter_input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.9) !important;
}


/* --------------------------------------------------------------------------
   7) Left TOC Sidebar
   -------------------------------------------------------------------------- */

.sidetoc,
.sidetoc .toc,
.sidetoc .sidetoc {
  background: var(--acs-light-grayish-blue) !important;
  border-right: 1px solid var(--acs-grayish-blue) !important;
}

.sidetoc .toc { padding: 1rem !important; }

.sidetoc .toc .nav,
.sidetoc .toc .nav > li,
.sidetoc .toc ul {
  background: transparent !important;
}

.sidetoc .toc .nav {
  background: var(--acs-white) !important;
  border: 1px solid var(--acs-grayish-blue) !important;
  border-radius: var(--radius-brand) !important;
  padding: 0.75rem 0.5rem !important;
}

.sidetoc .toc a,
.sidetoc .toc .nav > li > a {
  color: var(--acs-black) !important;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  border-radius: 10px;
  padding: 0.35rem 0.6rem !important;
}

.sidetoc .toc a:hover,
.sidetoc .toc .nav > li > a:hover {
  color: var(--acs-pure-blue) !important;
  background: rgba(0, 151, 217, 0.08) !important;
  text-decoration: none !important;
}

.sidetoc .toc .active > a,
.sidetoc .toc li.active > a {
  color: var(--acs-pure-blue) !important;
  font-weight: var(--fw-medium) !important;
  background: rgba(0, 151, 217, 0.10) !important;
  position: relative;
}

.sidetoc .toc .active > a::before,
.sidetoc .toc li.active > a::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  background: var(--acs-pure-blue);
  border-radius: 3px;
}

[data-bs-theme="dark"] .sidetoc,
[data-bs-theme="dark"] .sidetoc .toc {
  background: rgba(255,255,255,0.04) !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
}


/* --------------------------------------------------------------------------
   8) Right "IN THIS ARTICLE" (Affix) – single card
   -------------------------------------------------------------------------- */

.sidebar,
#affix,
.affix {
  background: transparent !important;
}

/* Outer card */
.sidebar .sideaffix,
#affix {
  background: var(--acs-white) !important;
  border: 1px solid var(--acs-grayish-blue) !important;
  border-radius: var(--radius-brand) !important;
  padding: 0.9rem !important;
}

/* Remove inner card styling */
.sidebar .sideaffix .affix,
#affix.affix,
#affix .affix,
.affix {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#affix ul,
.affix ul {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.35rem 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Title */
.sidebar h5,
.sidebar h6,
.sidebar .title,
#affix .title {
  font-family: var(--font-headings) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Links */
#affix ul > li > a,
.affix ul > li > a {
  display: block;
  padding: 0.3rem 0.45rem;
  border-radius: 10px;
  color: var(--acs-black) !important;
  text-decoration: none !important;
}

#affix ul > li > a:hover,
.affix ul > li > a:hover {
  color: var(--acs-pure-blue) !important;
  background: rgba(0, 151, 217, 0.08) !important;
}

#affix ul > li.active > a,
.affix ul > li.active > a {
  color: var(--acs-pure-blue) !important;
  font-weight: var(--fw-medium) !important;
  background: rgba(0, 151, 217, 0.10) !important;
}

/* Dark mode (card + readable text) */
[data-bs-theme="dark"] .sidebar .sideaffix,
[data-bs-theme="dark"] #affix {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.88) !important;
}

[data-bs-theme="dark"] .sidebar h5,
[data-bs-theme="dark"] .sidebar h6,
[data-bs-theme="dark"] .sidebar .title,
[data-bs-theme="dark"] #affix .title {
  color: rgba(255,255,255,0.70) !important;
}

[data-bs-theme="dark"] #affix ul > li > a,
[data-bs-theme="dark"] .affix ul > li > a {
  color: rgba(255,255,255,0.86) !important;
}

[data-bs-theme="dark"] #affix ul > li > a:hover,
[data-bs-theme="dark"] .affix ul > li > a:hover {
  color: var(--acs-pure-blue) !important;
  background: rgba(0,151,217,0.14) !important;
}

[data-bs-theme="dark"] #affix ul > li.active > a,
[data-bs-theme="dark"] .affix ul > li.active > a {
  color: var(--acs-pure-blue) !important;
  background: rgba(0,151,217,0.18) !important;
}


/* --------------------------------------------------------------------------
   9) Breadcrumbs + Footer
   -------------------------------------------------------------------------- */

[data-bs-theme="light"] ul.level1.breadcrumb > li { color: var(--acs-medium-blue); }
[data-bs-theme="light"] ul.level1.breadcrumb > li > a { color: var(--acs-pure-blue); }

[data-bs-theme="dark"] ul.level1.breadcrumb > li { color: rgba(255, 255, 255, 0.70); }
[data-bs-theme="dark"] ul.level1.breadcrumb > li > a { color: var(--acs-pure-blue); }

[data-bs-theme="light"] .footer { color: var(--text-muted); }
[data-bs-theme="dark"] .footer { color: rgba(255, 255, 255, 0.65); }


/* --------------------------------------------------------------------------
   10) Code, Blockquotes, Buttons
   -------------------------------------------------------------------------- */

code,
pre {
  border-radius: var(--radius-brand-sm);
}

[data-bs-theme="light"] pre,
[data-bs-theme="light"] code {
  background: var(--acs-light-grayish-blue);
  border: 1px solid var(--acs-grayish-blue);
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

blockquote {
  border-left: 4px solid var(--acs-pure-blue);
  border-radius: var(--radius-brand-sm);
  padding: 0.75rem 1rem;
}

[data-bs-theme="light"] blockquote { background: var(--acs-light-grayish-blue); }
[data-bs-theme="dark"]  blockquote { background: rgba(255, 255, 255, 0.06); }

/* Buttons (if used) */
.btn-primary {
  --bs-btn-bg: var(--acs-pure-blue);
  --bs-btn-border-color: var(--acs-pure-blue);
  --bs-btn-hover-bg: var(--acs-dark-blue);
  --bs-btn-hover-border-color: var(--acs-dark-blue);
  --bs-btn-active-bg: var(--acs-dark-blue);
  --bs-btn-active-border-color: var(--acs-dark-blue);
  border-radius: var(--radius-brand);
}


/* --------------------------------------------------------------------------
   11) Tables (ACS style) – no double borders + strong dark mode
   -------------------------------------------------------------------------- */

/* Wrapper owns the frame */
.table-responsive {
  border: 1px solid var(--acs-grayish-blue) !important;
  border-radius: var(--radius-brand) !important;
  overflow: hidden;
  background: var(--acs-white);
}

/* Table inside wrapper has no outer border */
.table-responsive > table,
.table-responsive > table.table {
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--acs-white);
}

/* Standalone tables */
table,
table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--acs-white);
}

table:not(.table-responsive table),
table.table:not(.table-responsive table.table) {
  border: 1px solid var(--acs-grayish-blue);
  border-radius: var(--radius-brand);
  overflow: hidden;
}

/* Headers */
table thead th,
table.table thead th,
.table thead th {
  background: var(--acs-light-grayish-blue) !important;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--acs-grayish-blue) !important;
}

/* Cells */
table th,
table td,
.table > :not(caption) > * > * {
  border-color: var(--acs-grayish-blue) !important;
  padding: 0.65rem 0.75rem;
  vertical-align: top;
}

/* Row hover */
table tbody tr:hover,
table.table tbody tr:hover {
  background: rgba(0, 151, 217, 0.04);
}

/* Nested tables: no extra frame */
table table {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

table table th,
table table td {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Strong dark-mode tables (fixes invisible headers) */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table.table {
  --bs-table-color: rgba(255,255,255,0.88);
  --bs-table-bg: rgba(255,255,255,0.02);
  --bs-table-border-color: rgba(255,255,255,0.14);
  --bs-table-striped-color: rgba(255,255,255,0.88);
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-hover-color: rgba(255,255,255,0.92);
  --bs-table-hover-bg: rgba(0,151,217,0.08);
}

[data-bs-theme="dark"] .table-responsive {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

[data-bs-theme="dark"] .table-responsive > table,
[data-bs-theme="dark"] .table-responsive > table.table,
[data-bs-theme="dark"] table,
[data-bs-theme="dark"] table.table {
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
}

[data-bs-theme="dark"] table thead,
[data-bs-theme="dark"] table.table thead,
[data-bs-theme="dark"] .table thead {
  background: rgba(255,255,255,0.07) !important;
}

[data-bs-theme="dark"] table thead th,
[data-bs-theme="dark"] table.table thead th,
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table > thead > tr > td {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.16) !important;
}

[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] table td,
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  border-color: rgba(255,255,255,0.14) !important;
}

[data-bs-theme="dark"] table tbody tr:hover,
[data-bs-theme="dark"] table.table tbody tr:hover {
  background: rgba(0,151,217,0.08) !important;
}

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


/* --------------------------------------------------------------------------
   12) Admonitions / Alerts (TIP, NOTE, WARNING, IMPORTANT) – ACS panels
   -------------------------------------------------------------------------- */

.alert,
div.NOTE, div.TIP, div.IMPORTANT, div.WARNING, div.CAUTION {
  border-radius: var(--radius-brand) !important;
  border: 1px solid var(--acs-grayish-blue) !important;
  background: var(--acs-light-grayish-blue) !important;
  padding: 0.9rem 1rem !important;
  margin: 1rem 0 1.25rem 0 !important;
  position: relative;
}

/* Left accent bar */
.alert::before,
div.NOTE::before, div.TIP::before, div.IMPORTANT::before, div.WARNING::before, div.CAUTION::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 4px;
  border-radius: 4px;
  background: var(--acs-pure-blue);
  opacity: 0.95;
}

/* Title line */
.alert > h5,
.alert > .alert-heading,
div.NOTE > h5, div.TIP > h5, div.IMPORTANT > h5, div.WARNING > h5, div.CAUTION > h5 {
  font-family: var(--font-headings) !important;
  font-weight: var(--fw-bold) !important;
  margin: 0 0 0.35rem 0 !important;
  letter-spacing: 0.02em;
}

/* Content spacing */
.alert > :last-child,
div.NOTE > :last-child, div.TIP > :last-child, div.IMPORTANT > :last-child,
div.WARNING > :last-child, div.CAUTION > :last-child {
  margin-bottom: 0 !important;
}

.alert p, .alert ul, .alert ol,
div.NOTE p, div.TIP p, div.IMPORTANT p, div.WARNING p, div.CAUTION p {
  margin-bottom: 0.5rem;
}

/* Subtle type differentiation */
.alert-info, div.NOTE, div.TIP {
  background: var(--acs-light-grayish-blue) !important;
}

.alert-warning, div.WARNING, div.CAUTION {
  background: rgba(0, 151, 217, 0.08) !important;
}

.alert-danger, div.IMPORTANT {
  background: rgba(33, 61, 119, 0.08) !important;
}

/* Accent color per type */
.alert-info::before,
div.NOTE::before, div.TIP::before {
  background: var(--acs-pure-blue);
}

.alert-warning::before,
div.WARNING::before, div.CAUTION::before {
  background: var(--acs-medium-blue);
}

.alert-danger::before,
div.IMPORTANT::before {
  background: var(--acs-dark-blue);
}

/* Code blocks inside callouts */
.alert pre, .alert code,
div.NOTE pre, div.TIP pre, div.IMPORTANT pre, div.WARNING pre, div.CAUTION pre {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--acs-grayish-blue) !important;
}

/* Dark mode callouts */
[data-bs-theme="dark"] .alert,
[data-bs-theme="dark"] div.NOTE, [data-bs-theme="dark"] div.TIP,
[data-bs-theme="dark"] div.IMPORTANT, [data-bs-theme="dark"] div.WARNING,
[data-bs-theme="dark"] div.CAUTION {
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.04) !important;
}

[data-bs-theme="dark"] .alert pre,
[data-bs-theme="dark"] .alert code,
[data-bs-theme="dark"] div.NOTE pre, [data-bs-theme="dark"] div.TIP pre,
[data-bs-theme="dark"] div.IMPORTANT pre, [data-bs-theme="dark"] div.WARNING pre,
[data-bs-theme="dark"] div.CAUTION pre,
[data-bs-theme="dark"] div.NOTE code, [data-bs-theme="dark"] div.TIP code,
[data-bs-theme="dark"] div.IMPORTANT code, [data-bs-theme="dark"] div.WARNING code,
[data-bs-theme="dark"] div.CAUTION code {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
}