/* ============================================================================
   reinwok.com — docs.css
   Loaded on /docs/** only, AFTER site.css. Documentation layout: sidebar,
   "On this page" TOC, content typography, callouts, tables, media, steps,
   cards, banners, related pages.

   Merge of documentation/docs-styles.css (base — wins on shared selectors)
   + monday/monday-docs.css (monday-only components appended; a few rules kept
   where they are a clear superset) + the generic doc components that were
   inline in reminder/label-manager/risk-assessment/datacenter and in the
   documentation/, workhub-jira/, confluence-calendar/ and monday/ hub pages.

   Header, footer, page-header, buttons, search overlay, image lightbox and
   .back-to-top live in site.css and are deliberately NOT repeated here.
   ============================================================================ */

/* --------------------------------------------------------- Docs page grid -- */
.docs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  max-width: 1400px;
  margin: -40px auto 60px;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- Sidebar -- */
.docs-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.docs-sidebar::-webkit-scrollbar { width: 4px; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
.docs-sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

.sidebar-nav {
  display: block;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

/* Cloud · Data Center switch — rendered by partials/docs-sidebar.njk for any
   product that carries a `platformSwitch` array in products.json. Plain <a>s
   inside a <div> (not a <ul>) so the .sidebar-nav ul rules above never apply. */
.sidebar-platform-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 8px;
  background: var(--bg-secondary);
}
.sidebar-platform-switch a {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
}
.sidebar-platform-switch a:hover {
  color: var(--primary-color);
  background: rgba(255, 255, 255, 0.7);
}
.sidebar-platform-switch a.active {
  background: white;
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.sidebar-nav h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 8px;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-nav ul { list-style: none; }
.sidebar-nav ul li { margin-bottom: 1px; }

.sidebar-nav ul li a {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  transition: all 0.2s ease;
}
.sidebar-nav ul li a i {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  margin-right: 8px;
  font-size: 12px;
  color: var(--text-light);
}
.sidebar-nav ul li a:hover {
  background: var(--bg-secondary);
  color: var(--primary-color);
}
.sidebar-nav ul li a:hover i { color: var(--primary-color); }

.sidebar-nav ul li a.active {
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary-color);
}
.sidebar-nav ul li a.active i { color: var(--primary-color); }

/* Nested nav items (e.g. Export & Import sub-pages) */
.sidebar-nav ul ul.submenu {
  margin: 0 0 0 24px;
  padding: 2px 0 4px;
  border-left: 2px solid var(--border-color);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.sidebar-nav ul li:hover > ul.submenu,
.sidebar-nav ul li a.active + ul.submenu,
.sidebar-nav ul li a.active ~ ul.submenu,
.sidebar-nav ul ul.submenu:hover,
.sidebar-nav ul ul.submenu.open,
.sidebar-nav ul ul.submenu:has(a.active) {
  max-height: 300px;
  padding: 4px 0 6px;
}
.sidebar-nav ul ul.submenu li { margin-bottom: 0; }
.sidebar-nav ul ul.submenu li a {
  font-size: 12.5px;
  font-weight: 400;
  padding: 5px 10px 5px 12px;
  color: var(--text-light);
}
.sidebar-nav ul ul.submenu li a:hover {
  color: var(--primary-color);
  background: var(--bg-secondary);
}
.sidebar-nav ul ul.submenu li a.active {
  color: var(--primary-color);
  font-weight: 600;
  background: rgba(12, 114, 136, 0.08);
}

/* Chevron on items that own a submenu */
.sidebar-nav > ul > li > a.has-submenu::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  margin-left: auto;
  color: var(--text-light);
  transition: transform 0.2s ease;
}
.sidebar-nav > ul > li:hover > a.has-submenu::after,
.sidebar-nav > ul > li > a.has-submenu.active::after {
  transform: rotate(180deg);
  color: var(--primary-color);
}

/* Support / cross-product links pinned under the nav */
.sidebar-nav .support-links {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.sidebar-nav .support-links ul li a { font-size: 12px; color: var(--text-light); }
.sidebar-nav .support-links ul li a i {
  font-size: 11px;
  color: var(--primary-color);
  width: 14px;
}

/* ------------------------------------------------- "On this page" TOC block -- */
/* partials/docs-sidebar.njk renders #docs-toc AFTER the product nav and the
   support links, so the separator goes on top (monday-docs.css variant). */
.nav-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  padding: 0 8px 8px;
}

.nav-section ul { list-style: none; padding: 0; margin: 0; }

.nav-section ul li a {
  display: block;
  padding: 5px 8px 5px 16px;
  border-radius: 4px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}
.nav-section ul li a:hover {
  color: var(--primary-color);
  background: rgba(12, 114, 136, 0.04);
  border-left-color: var(--primary-color);
}
.nav-section ul li a.active {
  color: var(--primary-color);
  font-weight: 600;
  border-left-color: var(--primary-color);
  background: rgba(12, 114, 136, 0.06);
}

.nav-section ul ul.toc-subitems { list-style: none; padding: 0; margin: 0; }
.nav-section ul ul.toc-subitems li a { padding: 4px 8px 4px 28px; font-size: 11.5px; }

/* ----------------------------------------------------------- Content card -- */
.docs-content {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 48px;
  box-shadow: var(--shadow-md);
  min-width: 0;
}

/* Base prose rhythm — used by the monday docs, which have no .doc-section
   wrappers. The .doc-section rules further down override it for the Jira docs. */
.docs-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  scroll-margin-top: 100px;
}
.docs-content h2:first-child { margin-top: 0; }

.docs-content h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 32px;
  margin-bottom: 12px;
  scroll-margin-top: 100px;
}
.docs-content h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 24px;
  margin-bottom: 8px;
}
.docs-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 16px;
}
.docs-content ul,
.docs-content ol {
  color: var(--text-secondary);
  padding-left: 24px;
  margin-bottom: 16px;
  line-height: 1.8;
  font-size: 16px;
}
.docs-content li { margin-bottom: 6px; }
.docs-content strong { color: var(--text-primary); font-weight: 600; }
.docs-content a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.docs-content a:hover { opacity: 0.8; text-decoration: underline; }

/* Intro block (first section on a page) */
.intro-section {
  padding-bottom: 40px;
  border-bottom: 2px solid var(--bg-secondary);
  margin-bottom: 48px;
}
.intro-section h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  color: var(--text-primary);
}
.intro-section p { font-size: 18px; line-height: 1.8; color: var(--text-secondary); }

/* ------------------------------------------------------------ Doc sections -- */
.doc-section { margin-bottom: 64px; scroll-margin-top: 100px; }

.doc-section h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-section h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--text-primary);
}
.doc-section h3[id] { scroll-margin-top: 100px; }

.doc-section p { margin-bottom: 16px; line-height: 1.7; color: var(--text-secondary); }
.doc-section ul,
.doc-section ol { margin-bottom: 16px; padding-left: 24px; }
.doc-section ul li,
.doc-section ol li { margin-bottom: 8px; line-height: 1.6; color: var(--text-secondary); }
.doc-section ul li strong,
.doc-section ol li strong { color: var(--text-primary); }
.doc-section a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.doc-section a:hover { text-decoration: underline; }
.doc-section code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary-dark);
}

.section-icon {
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

/* Legacy breadcrumb wrapper kept for pages that still ship one in content. */
.content-header { margin-bottom: 24px; }

/* ------------------------------------------------------------------- Media -- */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: var(--shadow-md);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.doc-image {
  max-width: 90%;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  margin: 24px 0;
  border: 1px solid var(--border-color);
  cursor: zoom-in;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.doc-image:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Fixed: the source had `max-width: 95%; !important;` which parsed as a
   stray declaration and never applied. */
.doc-image-large { max-width: 95% !important; }

.doc-hero-image {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

/* monday docs screenshots — most carry per-image inline sizing, this is the
   fallback frame plus the shared zoom affordance. */
.doc-screenshot {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}
.docs-content .doc-screenshot:hover,
.docs-content .doc-image:hover { opacity: 0.95; }

.screenshot-placeholder {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  margin: 24px 0;
  color: var(--text-light);
}
.screenshot-placeholder i {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
  color: var(--text-light);
}
.screenshot-placeholder p { font-size: 14px; color: var(--text-light); margin-bottom: 4px; }
.screenshot-placeholder .screenshot-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ Steps -- */
/* Jira docs: <ol class="steps-list"> */
.steps-list { list-style: none; counter-reset: step-counter; }
.steps-list > li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 48px;
  margin-bottom: 24px;
}
.steps-list > li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.steps-list > li strong { color: var(--text-primary); font-weight: 600; }

.sub-steps { list-style: none; margin-top: 16px; margin-left: 0; padding-left: 0; }
.sub-steps li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--text-secondary);
}
.sub-steps li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 700;
}

/* monday docs: <div class="steps"><div class="step"><div class="step-content"> */
.steps { counter-reset: step-counter; margin: 24px 0; }
.step {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  counter-increment: step-counter;
}
.step::before {
  content: counter(step-counter);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  margin-top: 2px;
}
/* Explicit badge: <div class="step-number">1</div> / "Mon" / "Action" inside a
   .step. It replaces the auto-numbered .step::before, so the counter badge is
   suppressed when one is present. Pill shape so word labels fit; a single
   character stays a circle. */
.step:has(> .step-number)::before { content: none; }
.step-number {
  flex-shrink: 0;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  margin-top: 2px;
}

.step-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.step-content p { font-size: 14px; margin-bottom: 8px; }

/* -------------------------------------------------------------- Callouts -- */
/* .note / .tip — standalone amber & green callouts (Jira docs) */
.note {
  background: #FEF5E8;
  border-left: 3px solid #E8890B;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.7;
  color: #7A3E06;
}
.note strong { color: #7A3E06; }

.tip {
  background: #EAFBF4;
  border-left: 3px solid #26B893;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.7;
  color: #12543A;
}
.tip strong { color: #12543A; }

/* .info-box — two markup shapes share this class:
   Jira/WorkHub:  <div class="info-box tip"><i></i><div>…</div></div>
   monday:        <div class="info-box tip"><strong>…</strong><p>…</p></div>
   The flex row is therefore applied only when a direct <i> icon is present. */
.info-box {
  background: linear-gradient(135deg, rgba(12, 114, 136, 0.06) 0%, rgba(81, 181, 207, 0.03) 100%);
  border-left: 3px solid var(--primary-color);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 16px 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.info-box:has(> i) { display: flex; gap: 12px; align-items: flex-start; }
.info-box > i {
  flex-shrink: 0;
  color: var(--primary-color);
  font-size: 16px;
  margin-top: 2px;
}
.info-box > strong:first-child { display: block; margin-bottom: 4px; }
.info-box strong { color: var(--text-primary); }
.info-box p { margin-bottom: 0; font-size: inherit; color: inherit; }
.info-box a { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.info-box a:hover { text-decoration: underline; }
.info-box ul { margin: 8px 0 0; padding-left: 20px; font-size: inherit; }
.info-box ul li { margin-bottom: 4px; }

.info-box.tip {
  background: rgba(0, 202, 114, 0.08);
  border-left-color: #00CA72;
  color: #006644;
}
.info-box.tip > i { color: #00875A; }

.info-box.note {
  background: rgba(97, 97, 255, 0.08);
  border-left-color: #6161FF;
  color: #333399;
}
.info-box.note > i { color: #6161FF; }

.info-box.warning {
  background: rgba(253, 171, 61, 0.08);
  border-left-color: #FDAB3D;
  color: #663D00;
}
.info-box.warning > i { color: #FF991F; }

.info-box.example {
  background: rgba(87, 155, 252, 0.08);
  border-left-color: #579BFC;
  color: #0052CC;
}
.info-box.example > i { color: var(--primary-color); }

/* .feature-highlight — callout box (Jira docs). */
.feature-highlight {
  background: linear-gradient(135deg, rgba(12, 114, 136, 0.1) 0%, rgba(81, 181, 207, 0.05) 100%);
  border-left: 4px solid var(--primary-color);
  padding: 20px 24px;
  border-radius: 8px;
  margin: 24px 0;
}
.feature-highlight h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feature-highlight p { color: var(--text-secondary); line-height: 1.7; }

/* …and the monday product-index variant, which is an image/text row using the
   same class name. Selected structurally so no markup has to be renamed. */
.feature-highlight:has(> .feature-highlight-img) {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px 0;
  margin: 0;
  background: none;
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-color);
}
.feature-highlight:has(> .feature-highlight-img):last-child { border-bottom: none; }
.feature-highlight--reverse:has(> .feature-highlight-img) { flex-direction: row-reverse; }

.feature-highlight-content { flex: 1; min-width: 0; }
.feature-highlight-content h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
  display: block;
}
.feature-highlight-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.feature-highlight-content .btn-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.feature-highlight-content .btn-learn-more:hover { gap: 10px; }

.feature-highlight-img { flex: 1; min-width: 0; }
.feature-highlight-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: block;
}

/* Feature summary strip at the top of a monday doc page */
.feature-summary {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.feature-summary-item { display: flex; align-items: flex-start; gap: 10px; }
.feature-summary-item i {
  color: var(--primary-color);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.feature-summary-item .summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-bottom: 2px;
}
.feature-summary-item .summary-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Quick reference card */
.quick-ref {
  background: linear-gradient(135deg, rgba(12, 114, 136, 0.04) 0%, rgba(54, 179, 126, 0.04) 100%);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px 0;
}
.quick-ref h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quick-ref ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.quick-ref ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.quick-ref ul li i { color: var(--secondary-color); font-size: 11px; flex-shrink: 0; }

/* Risk Assessment docs — risk level cards & formula block */
.risk-levels { display: flex; gap: 16px; margin: 24px 0; flex-wrap: wrap; }
.risk-level {
  flex: 1;
  min-width: 150px;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}
.risk-level h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.risk-level p { font-size: 14px; color: var(--text-secondary); }
.risk-level.low { background: rgba(54, 179, 126, 0.1); border: 2px solid #36B37E; }
.risk-level.medium { background: rgba(255, 171, 0, 0.1); border: 2px solid #FFAB00; }
.risk-level.high { background: rgba(222, 53, 11, 0.1); border: 2px solid #DE350B; }
/* Headings carry the semantic hue but darkened to clear 4.5:1 on white
   (the light fills and 2px borders above keep the original signal color). */
.risk-level.low h4 { color: #178054; }
.risk-level.medium h4 { color: #A85C06; }
.risk-level.high h4 { color: #C0392B; }

/* -------------------------------------------------------------- Formula box -- */
.formula-box {
  background: var(--bg-dark);
  color: white;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 15px;
  margin: 16px 0;
  overflow-x: auto;
}
.formula-box code { color: #7CD6E6; background: none; padding: 0; }

/* --- Contrast overrides for inline colors baked into the docs pages --------
   Several product docs hard-code the old Atlassian signal colors inline
   (risk legends, status dots, the muted comment line in .formula-box). They
   win over the cascade, so each is pinned by its exact inline value and only
   darkened/lightened enough to clear 4.5:1. Hue and meaning are preserved.
   Matching is case-insensitive and covers both "color:#x" and "color: #x",
   because the pages use a mix of both. */
.docs-content [style*="color:#36b37e" i],
.docs-content [style*="color: #36b37e" i] { color: #178054 !important; }
.docs-content [style*="color:#ffab00" i],
.docs-content [style*="color: #ffab00" i] { color: #A85C06 !important; }
.docs-content [style*="color:#ff5630" i],
.docs-content [style*="color: #ff5630" i] { color: #C0392B !important; }
.docs-content [style*="color:#de350b" i],
.docs-content [style*="color: #de350b" i] { color: #C0392B !important; }
.docs-content [style*="color:#e2445c" i],
.docs-content [style*="color: #e2445c" i] { color: #B22D46 !important; }

/* Muted comment line inside the dark .formula-box. */
.formula-box [style*="color:#7a869a" i],
.formula-box [style*="color: #7a869a" i] { color: #A8BAC8 !important; }

/* monday.com status swatches: the FILL is the documented content, so the hue
   must not change — flip the label to dark ink instead. Purple keeps white
   (4.67:1); the other three fail with white and pass with navy. */
.docs-content .status-badge[style*="#66ccff" i],
.docs-content .status-badge[style*="#597bfc" i],
.docs-content .status-badge[style*="#e67e22" i] { color: #061A2A !important; }

/* ----------------------------------------------------------------- Tables -- */
.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 15px;
}
.docs-content table th {
  background: var(--primary-tint);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
}
.docs-content table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.docs-content table tr:last-child td { border-bottom: none; }
.docs-content table code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary-dark);
}

/* Dark-header comparison table */
.source-type-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.source-type-table th {
  background: var(--bg-dark);
  color: white;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  border-bottom: none;
}
.source-type-table td {
  padding: 12px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.source-type-table tr:last-child td { border-bottom: none; }
.source-type-table td:first-child { font-weight: 600; color: var(--text-primary); }

.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.docs-table th {
  background: var(--bg-secondary);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}
.docs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.docs-table tr:last-child td { border-bottom: none; }
.docs-table td strong { color: var(--text-primary); }

.config-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.config-table th,
.config-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.config-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-primary);
}
.config-table td { color: var(--text-secondary); }

/* ------------------------------------------------------------------ Badges -- */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-badge.green { background: rgba(0, 202, 114, 0.15); color: #006644; }
.status-badge.yellow { background: rgba(253, 171, 61, 0.15); color: #663D00; }
.status-badge.red { background: rgba(228, 66, 88, 0.15); color: #9B1B30; }
.status-badge.blue { background: rgba(81, 181, 207, 0.18); color: #0A6076; }
.status-badge.purple { background: rgba(162, 93, 220, 0.15); color: #5A2D82; }
.status-badge.grey { background: rgba(103, 104, 121, 0.15); color: #323338; }

.docs-content kbd {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  box-shadow: 0 1px 0 var(--border-color);
}

/* ------------------------------------------------------------------- Cards -- */
/* Small two-up feature cards inside a doc page */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.feature-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.2s ease;
}
.feature-card:hover { box-shadow: var(--shadow-sm); }
.feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.feature-card h3 i { margin-right: 6px; }
.feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.feature-card a {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.feature-card a:hover { text-decoration: underline; }

/* Scope chips */
.scope-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.scope-card {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
}
.scope-card strong {
  display: block;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.scope-card span { font-size: 13px; color: var(--text-secondary); }

/* Product / hub landing cards (monday .doc-cards-grid + Confluence .topic-cards).
   src/docs/jira-workhub/index.html uses its own page-level .hub-* classes —
   deliberately NOT defined here, so the two card systems cannot collide. */
.doc-cards-grid,
.topic-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.doc-card,
.topic-card {
  background: white;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
}
.doc-card:hover,
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-light);
  text-decoration: none;
}

.doc-card .card-icon,
.topic-card .topic-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  margin-bottom: 16px;
  background: var(--gradient-primary);
  flex-shrink: 0;
}

.doc-card h2,
.doc-card h3,
.topic-card h2,
.topic-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 0;
  border-bottom: none;
  color: var(--text-primary);
}
.doc-card p,
.topic-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  transition: gap 0.2s ease;
}
.doc-card:hover .card-link,
.topic-card:hover .card-link,
.platform-card:hover .card-link { gap: 12px; }

/* Cloud / Data Center chooser on the Calendar for Jira docs index */
.platform-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 32px 0;
}
.platform-card {
  background: white;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-light);
}
.platform-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.platform-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}
.platform-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  margin-bottom: 24px;
}
.platform-icon.cloud { background: linear-gradient(222deg, #0A6076 0%, #0F7C95 100%); }
.platform-icon.dc { background: linear-gradient(222deg, #4A3A9C 0%, #6E5AC9 100%); }

/* The chooser at /docs/jira-calendar is a standalone page (layouts/page.njk +
   bodyClass "docs-chooser", docs.css pulled in through pageStyles) — no
   sidebar, no .docs-content. These rules only frame the shared grid above. */
.docs-chooser .page-content {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.docs-chooser .platform-cards { margin: -40px 0 28px; }
.docs-chooser .platform-card { padding: 44px 36px; }
.docs-chooser .platform-card p { margin-bottom: 20px; }

.chooser-migrate {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  border-radius: 16px;
  border-left: 4px solid var(--secondary-color);
  background: white;
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.chooser-migrate:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.chooser-migrate-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  background: var(--gradient-secondary);
}
.chooser-migrate-body { flex: 1; }
.chooser-migrate-body h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.chooser-migrate-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.chooser-migrate .card-link { margin-top: 0; white-space: nowrap; }
.chooser-migrate:hover .card-link { gap: 12px; }

@media (max-width: 768px) {
  .docs-chooser .platform-cards { margin: -32px 0 24px; }
  .chooser-migrate { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------- Feature banners -- */
.feature-banner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border-radius: 12px;
  margin: 0 0 32px;
  overflow: hidden;
  position: relative;
}
.feature-banner--gradient-blue { background: linear-gradient(135deg, #6161FF 0%, #4B4BCC 100%); color: white; }
.feature-banner--gradient-green { background: linear-gradient(135deg, #00CA72 0%, #009955 100%); color: white; }
.feature-banner--gradient-orange { background: linear-gradient(135deg, #FDAB3D 0%, #E89520 100%); color: white; }
.feature-banner--gradient-purple { background: linear-gradient(135deg, #A25DDC 0%, #7B3BB5 100%); color: white; }
.feature-banner--gradient-dark { background: linear-gradient(135deg, #1C1F3B 0%, #323338 100%); color: white; }
.feature-banner--gradient-teal { background: linear-gradient(135deg, #579BFC 0%, #3B7FE0 100%); color: white; }
.feature-banner--reverse { flex-direction: row-reverse; }

.feature-banner-text { flex: 1; min-width: 0; }
.feature-banner-text h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1.3;
  color: inherit;
}
.feature-banner-text p { font-size: 14px; line-height: 1.5; color: white; margin: 0; }

.feature-banner-img { flex: 1; min-width: 0; }
.feature-banner-img img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: block;
}

/* Pre-rendered PNG banner variant */
.feature-banner--png {
  display: block;
  margin: 0 0 40px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.feature-banner--png img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* --------------------------------------------- Related pages & help blocks -- */
.related-pages {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: 8px;
}
.related-pages h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.related-pages ul { margin: 0; padding-left: 20px; }
.related-pages ul li { margin-bottom: 6px; font-size: 14px; color: var(--text-secondary); }
.related-pages ul li a { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.related-pages ul li a:hover { text-decoration: underline; }

.related-page-card {
  display: block;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.related-page-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.need-help,
.support-section,
.support-cta {
  background: var(--bg-secondary);
  padding: 32px;
  border-radius: 12px;
  margin-top: 48px;
  text-align: center;
}
.need-help h3,
.support-section h3,
.support-cta h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-primary);
}
.need-help p,
.support-section p,
.support-cta p { color: var(--text-secondary); margin-bottom: 24px; }
.need-help a,
.support-section a,
.support-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-primary);
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease;
}
.need-help a:hover,
.support-section a:hover,
.support-cta a:hover { transform: translateY(-2px); text-decoration: none; opacity: 1; }

/* ------------------------------------------------------------- Responsive -- */
@media (max-width: 1024px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: relative; top: auto; max-height: none; }
  .platform-cards { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .docs-content { padding: 32px 24px; overflow-x: clip; }
  .docs-content table { display: block; overflow-x: auto; }
  .doc-image,
  .doc-image-large { max-width: 100% !important; }
  .doc-screenshot { max-width: 100% !important; height: auto; }
  .scope-cards { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .doc-cards-grid,
  .topic-cards { grid-template-columns: 1fr; }
  .support-section,
  .need-help,
  .support-cta { padding: 24px 16px; }
  .risk-levels { flex-direction: column; }

  .feature-banner { flex-direction: column; padding: 32px 24px; gap: 24px; }
  .feature-banner--reverse { flex-direction: column; }
  .feature-banner-text h2 { font-size: 22px; }

  .feature-highlight:has(> .feature-highlight-img) {
    flex-direction: column;
    gap: 24px;
    padding: 32px 0;
  }
  .feature-highlight--reverse:has(> .feature-highlight-img) { flex-direction: column; }
  .feature-highlight-content h3 { font-size: 20px; }
}

@media (max-width: 480px) {
  .doc-section h2,
  .docs-content h2 { font-size: 22px; }
  .docs-content { padding: 24px 16px; }
}

/* ------------------------------------------------------------------ Print -- */
@media print {
  .docs-sidebar { display: none; }
  .docs-layout { grid-template-columns: 1fr; margin: 0 auto; }
  .docs-content { box-shadow: none; padding: 0; }
}