/* =========================================================================
   Guide body overrides.

   The manual pages were converted from the original JSP and still carry
   light-theme inline styling (white panels, #e8e8e8 borders, black text,
   bgcolor attributes). Inline styles beat stylesheets, so these rules need
   !important. Scoped to .legacy so nothing else is touched.
   ========================================================================= */

.legacy { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.legacy #main_content { width: auto !important; }

.legacy div, .legacy span, .legacy td, .legacy th,
.legacy table, .legacy p, .legacy li {
  background-color: transparent !important;
  border-color: var(--line) !important;
  color: inherit !important;
}

.legacy [style*="background-color:#ffffff"],
.legacy [style*="background-color: #ffffff"],
.legacy [style*="background-color:#FFFFFF"],
.legacy [bgcolor="#ffffff"], .legacy [bgcolor="#FFFFFF"] {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--line) !important;
}

.legacy [bgcolor="#eeeeee"], .legacy [bgcolor="#EEEEEE"],
.legacy [bgcolor="#e8e8e8"], .legacy [bgcolor="#f5f5f5"] {
  background: rgba(255,255,255,.07) !important; color: var(--ink) !important;
}
.legacy [bgcolor="#808080"], .legacy [bgcolor="#999999"] { background: var(--edge-2) !important; }
.legacy [bgcolor="#990000"], .legacy [bgcolor="#cc0000"] { background: var(--cyan) !important; }

.legacy b, .legacy strong { color: var(--ink) !important; }
.legacy a { color: var(--cyan-2) !important; }
.legacy a:hover { color: #ffffff !important; }
.legacy font { color: inherit !important; }

.legacy table { width: 100% !important; border-collapse: collapse !important; margin: 0 0 16px !important; }
.legacy td, .legacy th { padding: 9px 11px !important; border: 1px solid var(--line) !important; vertical-align: top; }
.legacy tr[height="1"] td, .legacy tr[height="3"] td { padding: 0 !important; border: 0 !important; }

/* Converted markup nests fixed-width tables; let them scroll rather than
   stretching the page on a phone. */
.legacy .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; }
.legacy .tbl-scroll > table { min-width: 520px; margin: 0 !important; }

.legacy img {
  max-width: 100%; height: auto;
  /* the original art is bright line-work on white; cool it into the page */
  filter: brightness(.92) saturate(.85) hue-rotate(-8deg);
}
.legacy img.img-responsive { display: block; margin: 0 auto 14px; }

.legacy hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.legacy ul, .legacy ol { padding-left: 20px; }
.legacy li { margin: 4px 0; }
.legacy h1, .legacy h2, .legacy h3, .legacy h4 { color: var(--ink) !important; }

/* The imported guide ships a Bootstrap tab strip with an inline light
   background; inline styles need !important to be overridden. */
.legacy .nav-tabs {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill);
  display: flex; padding: 4px; margin: 0 0 16px; list-style: none;
}
.legacy .nav-tabs > li { float: none !important; margin: 0 !important; }
.legacy .nav-tabs > li > a {
  display: block; text-align: center;
  padding: 8px 14px !important; margin: 0 !important;
  border: 0 !important; border-radius: var(--r-pill) !important;
  background: transparent !important; color: var(--ink-2) !important;
  font: 600 13px/1.4 Manrope, sans-serif !important;
}
.legacy .nav-tabs > li > a:hover { background: rgba(255,255,255,.07) !important; color: var(--ink) !important; }
.legacy .nav-tabs > li.active > a {
  background: var(--cyan) !important; color: #041018 !important; font-weight: 700 !important;
}