/* ===== P6 Tools Hub — Core Styles ===== */
/* Fonts: Playfair Display (headings), IBM Plex Mono (monospace), system-ui fallback */

/* ─── Accent amber ───
   Single source of truth for the accent colour. Every amber in the app resolves
   through these tokens, so the accent is identical to the active nav pill in
   whichever theme is showing. Light mode uses amber-600 (#d97706); dark mode
   uses amber-500 (#f59e0b), which stays legible on the dark surfaces.
   --accent-text is the foreground guaranteed readable on --accent. */
:root {
  --accent: #d97706;
  --accent-rgb: 217, 119, 6;
  --accent-hover: #b45309;
  --accent-text: #ffffff;

  --primary: var(--accent);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
}

/* ─── Base ─── */
body {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  padding-top: 1rem;
  padding-bottom: 2rem;
  background-color: #f5f6fa;
  color: #1f2937;
  transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; }
.container-main { max-width: 1200px; }
a { transition: color 0.2s ease; }

/* ─── Navbar ─── */
.navbar { box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background-color 0.3s ease; }
.navbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
}
/* ─── Primary navigation (left drawer) ───
   Replaces the eight nav pills that used to run across the top of every page.
   The pills were hand-copied into twelve templates and had begun to wrap onto
   three rows on a laptop; the markup now lives once, in layouts.html.

   Everything here resolves through the theme tokens, which both [data-theme]
   blocks define in full — the literals are fallbacks for the moment before the
   inline theme script has run, not a second palette. */
.nav-drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.5rem;
  color: var(--text, #1f2937);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.nav-drawer-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-drawer-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
}

/* Pinned to the navbar band, left of the brand, so it is in the same place on
   every page. It used to sit where the pills had been, and that container is
   different on each template — a flex row here, a plain block there — so the
   control moved as you navigated.

   The band is dark in BOTH themes (#1f2937 light, #111318 dark), so on it the
   toggle takes its colours from the band rather than from --text, which would
   be near-black on near-black in light mode. */
.navbar .nav-drawer-toggle {
  margin-right: 0.85rem;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}
.navbar .nav-drawer-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.navbar .nav-drawer-toggle:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.25);
}

/* Three bars, drawn rather than fetched. The icon set has no hamburger, and
   two rectangles are not worth another sprite. */
.nav-drawer-bars {
  position: relative;
  flex: none;
  width: 1rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-drawer-bars::before,
.nav-drawer-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-drawer-bars::before { top: -5px; }
.nav-drawer-bars::after  { top:  5px; }

.app-nav-drawer {
  width: 17rem;
  background-color: var(--surface, #ffffff);
  color: var(--text, #1f2937);
  border-right: 1px solid var(--border, #e5e7eb);
}
.app-nav-drawer .offcanvas-header { border-bottom: 1px solid var(--border, #e5e7eb); }
.app-nav-drawer .offcanvas-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.app-nav-drawer .offcanvas-body { padding-top: 0.75rem; }

.nav-drawer-group {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted, #6b7280);
  margin: 1.25rem 0 0.4rem;
}
.nav-drawer-group:first-child { margin-top: 0; }

.nav-drawer-link {
  display: block;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.15rem;
  border-radius: 0.5rem;
  border-left: 3px solid transparent;
  color: var(--text, #1f2937);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-drawer-link:hover { background: rgba(var(--accent-rgb),0.1); color: var(--accent); }
.nav-drawer-link.active {
  background: var(--accent);
  border-left-color: var(--accent-hover);
  color: var(--accent-text);
  font-weight: 500;
}
.nav-drawer-link.active:hover { background: var(--accent-hover); color: var(--accent-text); }

/* ─── Report Sections ─── */
.report-section { margin-bottom: 2rem; }
.section-header {
  cursor: pointer;
  user-select: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0.85rem 1.25rem;
  transition: background-color 0.2s ease;
}
.section-header:hover {
  filter: brightness(0.96);
}
.section-header[aria-expanded="false"] .collapse-chevron {
  transform: rotate(-90deg);
}
.collapse-chevron {
  transition: transform 0.25s ease;
  display: inline-block;
  font-size: 1.2rem;
}

/* ─── Stat Cards ─── */
.stat-card {
  text-align: center;
  padding: 1.25rem 1rem;
  background: #ffffff;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-card:hover {
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.2);
  transform: translateY(-2px);
  border-color: var(--accent);
}
/* Force stat cards in rows to match height of tallest sibling */
.row.mb-3 {
  align-items: stretch;
}
.row.mb-3 > [class^="col"] {
  display: flex;
  flex-direction: column;
}
.row.mb-3 > [class^="col"] > .stat-card {
  flex: 1;
}
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--accent);
  line-height: 1.2;
}
.stat-value-sm {
  font-size: 1.15rem;
  font-weight: 600;
}
.stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  font-weight: 500;
}

/* ─── Activity Status Active Card ─── */
.stat-card.status-active {
  border-left: 4px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}
[data-theme="dark"] .stat-card.status-active {
  background: rgba(var(--accent-rgb), 0.1);
}

/* ─── Progress Bar ─── */
.progress-bar-custom {
  height: 1.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

/* ─── Tables ─── */
.table {
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 2px solid #e5e7eb;
  padding: 0.6rem 0.75rem;
}
.table tbody td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0,0,0,0.02);
}
.table-striped > tbody > tr:hover {
  background-color: rgba(var(--accent-rgb),0.04);
}

/* ─── Cards ─── */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card-header {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}

/* ─── DCMA Metric Cards ─── */
.dcma-metric-card {
  position: relative;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.25s ease;
  overflow: visible;
  cursor: pointer;
  text-decoration: none !important;
}
/* Keep card with active popover above neighbors */
.dcma-metric-card:has(.dcma-popover.active) {
  z-index: 10000;
}
/* Prevent card hover transform from creating a new containing block
   for position:fixed children. Without this, the transform on .dcma-metric-card:hover
   makes the fixed-position popover relative to the card, not the viewport. */
.dcma-metric-card:has(.dcma-popover.active):hover {
  transform: none !important;
}

.dcma-metric-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  transition: width 0.2s ease, background-color 0.2s ease;
}
/* Left border colors by status */
.dcma-metric-card.status-pass::before { background: #22c55e; }
.dcma-metric-card.status-warning::before { background: var(--accent); }
.dcma-metric-card.status-fail::before { background: #ef4444; }
.dcma-metric-card.status-na::before { background: #9ca3af; }

.dcma-metric-card:hover {
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.25);
  transform: translateY(-2px);
  border-color: var(--accent);
  z-index: 10;
}
.dcma-metric-card:hover::before {
  width: 6px;
}
/* Tooltip-style explanation on hover */
.dcma-metric-card .dcma-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 9998;
  margin-bottom: 0.5rem;
  font-family: 'IBM Plex Mono', monospace;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.dcma-metric-card .dcma-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}
.dcma-metric-card:hover .dcma-tooltip {
  display: block;
}

.dcma-metric-card .dcma-metric-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: #9ca3af;
  letter-spacing: 0.05em;
}
.dcma-metric-card .dcma-metric-name {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
}
.dcma-metric-card .dcma-metric-value {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.95rem;
}
/* Status badges */
.badge-dcma-pass { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-dcma-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-dcma-fail { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.badge-dcma-na { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

/* ─── DCMA Cog Button ─── */
.dcma-cog-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 5;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--accent);
  padding: 3px 4px;
  border-radius: 4px;
  line-height: 1;
}
.dcma-cog-btn:hover {
  opacity: 1 !important;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-hover);
}
.dcma-metric-card:hover .dcma-cog-btn {
  opacity: 0.6;
}

/* ─── DCMA Modal Backdrop ─── */
.dcma-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.dcma-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent body scroll when modal is open */
body.dcma-modal-open {
  overflow: hidden;
}

/* ─── DCMA Modal ─── */
.dcma-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 400px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  z-index: 9999;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dcma-popover.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
/* ─── DCMA Modal Header ─── */
.dcma-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0.6rem 0.6rem 0 0;
}
.dcma-popover-header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1f2937;
  margin: 0;
}
.dcma-popover-close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 0.2rem;
  transition: color 0.15s ease;
}
.dcma-popover-close-btn:hover {
  color: #ef4444;
}

.dcma-popover-body {
  padding: 0.85rem 0.9rem;
}
.dcma-popover-body label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.dcma-popover-body input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  background: #f9fafb;
  margin-bottom: 0.5rem;
}
.dcma-popover-body input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.2);
}

/* Styled up/down spinner arrows */
.dcma-popover-body input::-webkit-inner-spin-button,
.dcma-popover-body input::-webkit-outer-spin-button {
  opacity: 0.6;
  height: 22px;
  cursor: pointer;
}

.dcma-popover-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dcma-popover-apply {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: 0.35rem 0.9rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.dcma-popover-apply:hover {
  background: var(--accent-hover);
}
.dcma-popover-reset {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.dcma-popover-reset:hover {
  color: #6b7280;
}
.dcma-popover-range {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 0.5rem;
  padding-top: 2px;
  line-height: 1.5;
}

/* ─── DCMA Popover Dark Theme ─── */
[data-theme="dark"] .dcma-popover {
  background: var(--surface, #252830);
  border-color: var(--border, #374151);
  color: var(--text, #e4e6eb);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .dcma-popover-body label {
  color: #9ca3af;
}
[data-theme="dark"] .dcma-popover-body input {
  background: #1a1d23;
  border-color: var(--border, #374151);
  color: var(--text, #e4e6eb);
}
[data-theme="dark"] .dcma-popover-reset {
  color: #6b7280;
}
[data-theme="dark"] .dcma-popover-reset:hover {
  color: #9ca3af;
}

[data-theme="dark"] .dcma-modal-backdrop {
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .dcma-popover-header {
  background: #2a2d35;
  border-bottom-color: var(--border, #374151);
}
[data-theme="dark"] .dcma-popover-header-title {
  color: var(--text, #e4e6eb);
}
[data-theme="dark"] .dcma-popover-close-btn {
  color: #6b7280;
}
[data-theme="dark"] .dcma-popover-close-btn:hover {
  color: #f87171;
}

/* ─── Alerts ─── */
.flash-message { margin-top: 1rem; }
.alert {
  border-radius: 0.5rem;
  border-left: 4px solid;
}
.alert-info { border-left-color: var(--accent); }
.alert-danger { border-left-color: #ef4444; }
.alert-success { border-left-color: #22c55e; }
.alert-warning { border-left-color: var(--accent); }

/* ─── Buttons ─── */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s ease;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.btn-sm { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
/* Bootstrap compiles its button variants with literal hex, so setting
   --bs-primary above does NOT reach .btn-outline-primary — it keeps #0d6efd and
   puts a blue button directly beneath the amber .btn-primary on the same card.
   Redefining the variant's own custom properties leaves Bootstrap's hover,
   active, focus and disabled machinery intact and swaps only the colour, which
   is what the token layer promises: every accent resolves through --accent, and
   the dark theme redefines those tokens, so this follows the theme for free. */
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-text);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
  --bs-btn-active-color: var(--accent-text);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-color: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-outline-light:hover { background: rgba(255,255,255,0.15); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }

/* ─── WBS Tree ─── */
.wbs-tree-table { width: 100%; }
.wbs-tree-table td { vertical-align: middle; padding: 0.4rem 0.6rem; }
.wbs-row { transition: background-color 0.15s ease; }
.wbs-row:hover { background-color: rgba(var(--accent-rgb),0.05); }
.wbs-code-cell { white-space: nowrap; }
.wbs-toggle { display: inline-block; width: 1.2em; text-align: center; font-size: 0.85rem; color: var(--accent); }
.wbs-code { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 600; }
.wbs-name-cell { width: 100%; }
.wbs-name { font-size: 0.85rem; }
.wbs-bar-cell { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; white-space: nowrap; }
.wbs-bar-wrapper {
  width: 140px;
  height: 0.65rem;
  background: #e5e7eb;
  border-radius: 0.25rem;
  overflow: hidden;
  flex-shrink: 0;
}
.wbs-bar-fill {
  height: 100%;
  border-radius: 0.25rem;
  background: var(--accent);
  min-width: 0;
  transition: width 0.3s ease;
}
.wbs-count-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 2.5rem;
  text-align: right;
}

/* ─── Density Bars ─── */
.density-bar {
  height: 100%;
  border-radius: 0.25rem;
}
.density-bar-fill {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

/* ─── Density Code Cards ─── */
.density-code-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.18) !important;
}

/* ─── Forms ─── */
.form-control, .form-select {
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
  outline: none;
}
.col-form-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 600;
}

/* ─── Footer/Badges ─── */
.badge {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 0.7rem;
}
.text-muted {
  color: #9ca3af !important;
}

/* ─── Collapse All Button ─── */
#collapseAllBtn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Suppress scroll-anchoring artifacts during Bootstrap collapse animations.
   Prevents the visible scroll-up jump when a section above the viewport
   collapses (reports.html sections, WBS toggles, Collapse All/Expand All). */
.collapse { overflow-anchor: none; }
.collapse.show { overflow-anchor: none; }

/* Root-level scroll-anchoring suppression: collapsing a section above the
   viewport would otherwise make the browser re-anchor to a sibling node
   below it and scroll the page up. This app has no lazy images/ads, so
   disabling anchoring globally is the correct, robust fix. */
html { overflow-anchor: none; }

/* ─── DCMA Detail Page ─── */
.dcma-detail-header {
  border-left: 4px solid;
  padding-left: 1rem;
}
.dcma-detail-header.pass { border-left-color: #22c55e; }
.dcma-detail-header.warning { border-left-color: var(--accent); }
.dcma-detail-header.fail { border-left-color: #ef4444; }
.dcma-detail-header.na { border-left-color: #9ca3af; }

/* ─── Transitions ─── */
* { transition: background-color 0.2s ease, border-color 0.2s ease; }

/* ═══════════════════════════════════════════ */
/*  DARK MODE OVERRIDES                       */
/* ═══════════════════════════════════════════ */
[data-theme="dark"] {
  --accent: #f59e0b;
  --accent-rgb: 245, 158, 11;
  --accent-hover: #d97706;
  --accent-text: #1f2937;

  --bg: #1a1d23;
  --surface: #252830;
  --text: #e4e6eb;
  --text-muted: #9ca3af;
  --border: #374151;
  --navbar-bg: #111318;
}
[data-theme="dark"] body { background-color: var(--bg); color: var(--text); }
[data-theme="dark"] .card { background-color: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .card-header:not(.section-header) { background-color: #2a2d35; border-color: var(--border); }
[data-theme="dark"] .section-header { background-color: var(--surface); }
[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .stat-value { color: var(--accent); }
[data-theme="dark"] .table { color: var(--text); }
[data-theme="dark"] .table thead th { color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03); }
[data-theme="dark"] .table-striped > tbody > tr:hover {   background-color: rgba(var(--accent-rgb),0.06); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .navbar { background-color: var(--navbar-bg) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
[data-theme="dark"] .btn-outline-secondary { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .section-header:hover { filter: brightness(1.1); }
[data-theme="dark"] .dcma-metric-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .badge-dcma-pass { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.3); }
[data-theme="dark"] .badge-dcma-warning { background: rgba(var(--accent-rgb),0.15); color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); }
[data-theme="dark"] .badge-dcma-fail { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .badge-dcma-na { background: rgba(156,163,175,0.15); color: #9ca3af; border-color: rgba(156,163,175,0.3); }
[data-theme="dark"] .form-control { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control:focus { border-color: var(--accent); }
[data-theme="dark"] .alert-info { background: rgba(var(--accent-rgb),0.1); color: #fcd34d; }
[data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.1); color: #fca5a5; }
[data-theme="dark"] .density-bar { background: var(--border); }
[data-theme="dark"] .wbs-node::before,
[data-theme="dark"] .wbs-node::after { background: var(--border); }
[data-theme="dark"] .card-body { background-color: var(--surface); color: var(--text); }
[data-theme="dark"] .bg-light { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .list-group-item { background-color: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .dropdown-menu { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background-color: rgba(var(--accent-rgb),0.1); }
[data-theme="dark"] .page-link { background-color: var(--surface); border-color: var(--border); color: var(--accent); }
[data-theme="dark"] .modal-content { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .popover { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .popover-body { color: var(--text); }
[data-theme="dark"] .breadcrumb { background-color: var(--surface); }
[data-theme="dark"] .input-group-text { background-color: #2a2d35; color: var(--text); border-color: var(--border); }
[data-theme="dark"] select.form-select { background-color: var(--surface); color: var(--text); }
[data-theme="dark"] hr { border-color: var(--border); }
[data-theme="dark"] .border { border-color: var(--border) !important; }
[data-theme="dark"] .border-top { border-top-color: var(--border) !important; }
[data-theme="dark"] .border-bottom { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .close, [data-theme="dark"] .btn-close { filter: invert(1); }
[data-theme="dark"] code { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }
[data-theme="dark"] pre { background-color: #1a1d23; border-color: var(--border); }
[data-theme="dark"] .dcma-metric-card .dcma-tooltip { background: var(--accent); color: var(--accent-text); }
[data-theme="dark"] .dcma-metric-card .dcma-tooltip::after { border-top-color: var(--accent); }

/* ─── Dark Mode: Bootstrap white-removal overrides ─── */
[data-theme="dark"] .card-header { background-color: #2a2d35; border-color: var(--border); }
[data-theme="dark"] .card-footer { background-color: #2a2d35; border-color: var(--border); color: var(--text); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--text); box-shadow: none; }
[data-theme="dark"] .table > tbody { background-color: transparent; }
[data-theme="dark"] .progress { background-color: var(--border); }
[data-theme="dark"] .form-check-input { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .form-select { background-color: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-label { color: var(--text); }
[data-theme="dark"] .navbar-text { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .badge.bg-secondary { background-color: #4b5563 !important; }
[data-theme="dark"] .badge.bg-info { background-color: #0e7490 !important; color: #cffafe; }
[data-theme="dark"] .badge.bg-light { background-color: var(--surface) !important; color: var(--text); }
[data-theme="dark"] .text-bg-light { background-color: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] ::selection { background-color: rgba(var(--accent-rgb),0.3); color: var(--text); }
[data-theme="dark"] ::placeholder { color: var(--text-muted); opacity: 1; }

[data-theme="dark"] .wbs-row:hover { background-color: rgba(var(--accent-rgb),0.08); }
[data-theme="dark"] .wbs-bar-wrapper { background-color: var(--border); }
[data-theme="dark"] .wbs-count-badge { color: var(--accent); }
[data-theme="dark"] .wbs-code { color: var(--text); }
[data-theme="dark"] .wbs-name { color: var(--text); }

/* ─── Light Mode Overrides ─── */
[data-theme="light"] {
  --accent: #d97706;
  --accent-rgb: 217, 119, 6;
  --accent-hover: #b45309;
  --accent-text: #ffffff;

  --bg: #f5f6fa;
  --surface: #ffffff;
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --navbar-bg: #1f2937;
}
[data-theme="light"] body { background-color: var(--bg); color: var(--text); }
[data-theme="light"] .card { background-color: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="light"] .card-header { background-color: #f9fafb; border-color: var(--border); }
[data-theme="light"] .stat-card { background: var(--surface); border-color: var(--border); }

/* ═══════════════════════════════════════════ */
/*  DIFF RESULTS PAGE                         */
/* ═══════════════════════════════════════════ */
/*
 * The diff is 19 columns of dense numbers. It used to render as one enormous
 * page-height table inside .table-responsive, which put the horizontal
 * scrollbar thousands of rows below the fold and scrolled the header away on
 * the first flick of the wheel. Instead the table now scrolls INSIDE a
 * viewport-height box: header rows and the activity id stay pinned, and both
 * scrollbars stay within reach.
 *
 * Rules are neutral grey rather than a themed colour so the same two tokens
 * read correctly on the light and the dark surface.
 */
:root {
  --diff-rule: rgba(128, 128, 128, 0.20);
  --diff-rule-strong: rgba(128, 128, 128, 0.45);
  --diff-head-h: 1.9rem;
}

/* The results table needs more room than the 1200px reading measure. */
.container.diff-results-page { max-width: min(1760px, 97vw); }

/* Basis/comparator strip — one line each, so the table starts higher */
.diff-side { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; flex-wrap: nowrap; }
.diff-side > strong,
.diff-side > .text-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-side > strong { flex: 0 1 auto; }
.diff-side > .text-muted { flex: 1 1 auto; }
.diff-side-tag {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* Summary cards: the same cards, sized for a header strip rather than a hero */
.stat-card-compact { padding: 0.6rem 0.75rem; margin-bottom: 0; }
.stat-card-compact .stat-value { font-size: 1.5rem; }
.stat-card-compact .stat-label { font-size: 0.68rem; }
.diff-modified-card { border-left: 4px solid #3b82f6; }
.diff-modified-value { color: #3b82f6 !important; }
.diff-shift-card { border-left: 4px solid #f59e0b; }
.diff-shift-value { color: #d97706 !important; }
[data-theme="dark"] .diff-shift-value { color: #fbbf24 !important; }

/* Toolbar above the table */
.diff-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.diff-toolbar .diff-search { width: 16rem; max-width: 100%; }
.diff-toolbar .diff-count { margin-left: auto; white-space: nowrap; }

/* ─── The scrolling table box ─── */
.diff-table-wrap {
  max-height: calc(100vh - 15rem);
  min-height: 18rem;
  overflow: auto;
  border: 1px solid var(--border, #374151);
  border-radius: 0.5rem;
  background: var(--surface, #ffffff);
}

.diff-table {
  border-collapse: separate;   /* keeps sticky cells from losing their borders */
  border-spacing: 0;
  font-size: 0.8rem;
  width: max-content;          /* columns take their declared width, never squeeze */
  min-width: 100%;
}
.diff-table th,
.diff-table td {
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--diff-rule);
  vertical-align: middle;
}
/* Bootstrap paints every cell with an opaque --bs-table-bg, which in light mode
   hid the added/deleted row tints entirely. Clear it and let the row show. */
.diff-table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
}

/* Subtle line between every column, a firmer one between field groups */
.diff-table th + th,
.diff-table td + td { border-left: 1px solid var(--diff-rule); }
.diff-table th.grp,
.diff-table td.grp { border-left: 1px solid var(--diff-rule-strong); }

/* ─── Sticky header: group row, then A/B/Δ row ─── */
.diff-table thead th {
  position: sticky;
  z-index: 3;
  /* !important: the dark-mode blanket rule for .table cells would otherwise
     make the pinned header transparent and let rows scroll through it. */
  background-color: var(--surface, #ffffff) !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.diff-table thead .diff-group-row th {
  top: 0;
  height: var(--diff-head-h);
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.85rem;
  color: var(--text, #1f2937);
  border-bottom: 1px solid var(--diff-rule-strong);
}
.diff-table thead .diff-sub-row th {
  top: var(--diff-head-h);
  color: var(--text-muted, #6b7280);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--diff-rule-strong);
}
.diff-table thead .diff-sub-row th.col-date,
.diff-table thead .diff-sub-row th.col-num,
.diff-table thead .diff-sub-row th.col-delta { text-align: right; }

/* ─── Column widths: set so no header ever wraps ─── */
.diff-table .col-code   { min-width: 8.5rem; font-weight: 600; }
.diff-table .col-name   { min-width: 16rem; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }
.diff-table .col-wbs    { min-width: 9rem;  max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.diff-table .col-change { min-width: 6.5rem; }
.diff-table .col-date   { min-width: 5.75rem; text-align: right; }
.diff-table .col-num    { min-width: 4.25rem; text-align: right; }
.diff-table .col-delta  { min-width: 4.25rem; text-align: right; }
.diff-table td.col-date,
.diff-table td.col-num,
.diff-table td.col-delta { font-variant-numeric: tabular-nums; }

/* Activity id pinned to the left edge so a row keeps its identity when the
   numbers scroll sideways. Header corner sits above it. */
.diff-table .col-code { position: sticky; left: 0; z-index: 2; }
.diff-table thead .col-code { z-index: 4; }
.diff-table tbody td.col-code {
  background-color: var(--surface, #ffffff) !important;
  border-right: 1px solid var(--diff-rule-strong);
}

/* The name keeps its ellipsis while the renamed marker stays visible beside it.
   The cells stay table-cells — display:flex here would drop them out of the
   table layout and unalign every column to their right. */
.diff-table td.col-name,
.diff-table td.col-wbs { overflow: hidden; }
.diff-table td.col-name > span:first-child,
.diff-table td.col-wbs > span:first-child {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
/* Leave room for the marker when there is one */
.diff-table td.has-flag > span:first-child { max-width: calc(100% - 5.5rem); }

/* Change badge and the renamed/moved markers */
.diff-table .diff-badge { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; }
.diff-flag {
  margin-left: 0.35rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--diff-rule-strong);
}

.diff-table tbody tr:hover td { background-color: rgba(var(--accent-rgb), 0.07); }
.diff-table tbody tr:hover td.col-code {
  background-color: rgba(var(--accent-rgb), 0.07) !important;
}

/* ═══════════════════════════════════════════ */
/*  DIFF TABLE ROW COLORS                     */
/* ═══════════════════════════════════════════ */

/* ADDED rows: green tint */
.diff-table tr.ADDED {
  background-color: rgba(34, 197, 94, 0.08) !important;
}
.diff-table tr.ADDED:hover {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

/* DELETED rows: red tint */
.diff-table tr.DELETED {
  background-color: rgba(239, 68, 68, 0.08) !important;
}
.diff-table tr.DELETED:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

/* MODIFIED rows: neutral, so the coloured rows stand out against them */
.diff-table tr.MODIFIED {
  /* no tint by design */
}

/* DATE_SHIFT rows: amber tint, matching their badge */
.diff-table tr.DATE_SHIFT {
  background-color: rgba(245, 158, 11, 0.08) !important;
}
.diff-table tr.DATE_SHIFT:hover {
  background-color: rgba(245, 158, 11, 0.15) !important;
}

/* The pinned activity-id cell is opaque, so it cannot inherit the row tint —
   it re-paints it as an overlay on top of its own solid background. */
.diff-table tr.ADDED td.col-code {
  background-image: linear-gradient(rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.08));
}
.diff-table tr.DELETED td.col-code {
  background-image: linear-gradient(rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08));
}
.diff-table tr.DATE_SHIFT td.col-code {
  background-image: linear-gradient(rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08));
}
[data-theme="dark"] .diff-table tr.ADDED td.col-code {
  background-image: linear-gradient(rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.12));
}
[data-theme="dark"] .diff-table tr.DELETED td.col-code {
  background-image: linear-gradient(rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.12));
}
[data-theme="dark"] .diff-table tr.DATE_SHIFT td.col-code {
  background-image: linear-gradient(rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.12));
}

/* Delta Cell Colors */
.delta-worse {
  color: #ef4444 !important;
  font-weight: 600;
}
.delta-better {
  color: #22c55e !important;
  font-weight: 600;
}

/* Diff Summary Card Accents */
.diff-added-card {
  border-left: 4px solid #22c55e;
}
.diff-added-value {
  color: #22c55e !important;
}
.diff-deleted-card {
  border-left: 4px solid #ef4444;
}
.diff-deleted-value {
  color: #ef4444 !important;
}

/* Diff Filter Button Active Colors */
#diff-filter-group button.active[data-filter="ADDED"],
#diff-filter-group button[data-filter="ADDED"]:hover {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: white !important;
}
#diff-filter-group button.active[data-filter="DELETED"],
#diff-filter-group button[data-filter="DELETED"]:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: white !important;
}
#diff-filter-group button.active[data-filter="MODIFIED"],
#diff-filter-group button[data-filter="MODIFIED"]:hover {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}
#diff-filter-group button.active[data-filter="DATE_SHIFT"],
#diff-filter-group button[data-filter="DATE_SHIFT"]:hover {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════ */
/*  DARK MODE: DIFF OVERRIDES                 */
/* ═══════════════════════════════════════════ */
[data-theme="dark"] .diff-table tr.ADDED {
  background-color: rgba(34, 197, 94, 0.12) !important;
}
[data-theme="dark"] .diff-table tr.ADDED:hover {
  background-color: rgba(34, 197, 94, 0.2) !important;
}
[data-theme="dark"] .diff-table tr.DELETED {
  background-color: rgba(239, 68, 68, 0.12) !important;
}
[data-theme="dark"] .diff-table tr.DELETED:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
}
[data-theme="dark"] .diff-table tr.DATE_SHIFT {
  background-color: rgba(245, 158, 11, 0.12) !important;
}
[data-theme="dark"] .diff-table tr.DATE_SHIFT:hover {
  background-color: rgba(245, 158, 11, 0.2) !important;
}
[data-theme="dark"] .delta-worse {
  color: #f87171 !important;
}
[data-theme="dark"] .delta-better {
  color: #4ade80 !important;
}

/* ═══════════════════════════════════════════ */
/*  SVG ICON SYSTEM (replaces all emoji)       */
/* ═══════════════════════════════════════════ */
/*
 * Icons are individual SVG files under /icons/, painted with CSS `mask` rather
 * than rendered as <img>. The mask takes only the SVG's alpha channel and fills
 * it with `currentColor`, which means:
 *
 *   - every icon inherits the surrounding text colour, so light/dark themes need
 *     ZERO per-icon overrides (an <img> would be stuck at its authored colour);
 *   - size follows font-size via the 1em box, so icons scale with their context;
 *   - swapping an icon is a pure file replacement — drop a new .svg over the old
 *     filename and nothing in the CSS, templates or JS changes.
 *
 * Because only alpha is used, source SVGs must be SOLID SHAPES (filled paths).
 * Stroke-only / multi-colour icons will mask to a hollow or blank silhouette;
 * pick the "solid" or "filled" variant when sourcing a replacement.
 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  flex-shrink: 0;
}

/* Optional size modifiers for places that need more than the inherited 1em. */
.icon-lg { width: 1.35em; height: 1.35em; }

.icon-sun       { -webkit-mask-image: url('/icons/sun.svg');       mask-image: url('/icons/sun.svg'); }
.icon-moon      { -webkit-mask-image: url('/icons/moon.svg');      mask-image: url('/icons/moon.svg'); }
.icon-trash     { -webkit-mask-image: url('/icons/trash.svg');     mask-image: url('/icons/trash.svg'); }
.icon-eye       { -webkit-mask-image: url('/icons/eye.svg');       mask-image: url('/icons/eye.svg'); }
.icon-globe     { -webkit-mask-image: url('/icons/globe.svg');     mask-image: url('/icons/globe.svg'); }
.icon-refresh   { -webkit-mask-image: url('/icons/refresh.svg');   mask-image: url('/icons/refresh.svg'); }
.icon-clipboard { -webkit-mask-image: url('/icons/clipboard.svg'); mask-image: url('/icons/clipboard.svg'); }
.icon-warning   { -webkit-mask-image: url('/icons/warning.svg');   mask-image: url('/icons/warning.svg'); }
.icon-gear      { -webkit-mask-image: url('/icons/gear.svg');      mask-image: url('/icons/gear.svg'); }
.icon-wrench    { -webkit-mask-image: url('/icons/wrench.svg');    mask-image: url('/icons/wrench.svg'); }