/* Engineering department — supplemental styles layered on departments.css. */

.eng-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.eng-chart-card .dept-section-body {
  padding-top: 8px;
}

.eng-chart-card canvas {
  width: 100% !important;
  max-height: 220px;
}

.dept-kpi-sublabel {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.01em;
}

.eng-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.eng-filter-chip {
  background: var(--bg-card, rgba(255,255,255,0.04));
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.eng-filter-chip:hover {
  border-color: #60a5fa;
  color: #60a5fa;
}

.eng-filter-chip.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.eng-filter-chip.eng-filter-reset {
  background: transparent;
  color: var(--text-muted, #94a3b8);
}

.eng-filter-meta {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.dept-table td.eng-cycle-warn {
  color: #f59e0b;
  font-weight: 600;
}

.dept-table td.eng-cycle-bad {
  color: #f43f5e;
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════════
   Tickets cockpit — sub-tab nav, explorer toolbar, summary strip,
   expandable per-ticket detail drawer, distribution cards.
   Navigator-inspired: dense, scannable, drill-to-detail in place.
   ═════════════════════════════════════════════════════════════════ */

/* Sub-tab nav (Explorer / Flow / Teams / Backlog) */
.eng-subnav {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: var(--bg-tertiary, #0f1623);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  width: fit-content;
}
.eng-subtab {
  background: transparent;
  border: none;
  color: var(--text-secondary, #cbd5e1);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.eng-subtab:hover {
  color: var(--text-primary, #e2e8f0);
  background: rgba(96, 165, 250, 0.07);
}
.eng-subtab.active {
  background: var(--bg-card, #1a2234);
  color: var(--text-primary, #e2e8f0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
}
.eng-subpanel { display: none; }
.eng-subpanel.eng-subpanel-active { display: block; }

/* Explorer toolbar — search + sort */
.eng-explore-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.eng-search {
  flex: 1;
  min-width: 220px;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 13px;
}
.eng-search:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
.eng-select {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

/* Summary strip — filtered-set headline stats */
.eng-summary-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}
@media (max-width: 900px) { .eng-summary-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .eng-summary-strip { grid-template-columns: repeat(2, 1fr); } }
.eng-stat {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 9px;
  padding: 10px 12px;
  text-align: center;
}
.eng-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.eng-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
  margin-top: 4px;
}

/* Explorer table rows */
.eng-ticket-table tbody tr.eng-row { cursor: pointer; }
.eng-ticket-table tbody tr.eng-row:hover td { background: rgba(96, 165, 250, 0.06); }
.eng-ticket-table tbody tr.eng-row-open td { background: rgba(96, 165, 250, 0.10); }
.eng-caret-cell { text-align: center; }
.eng-caret {
  display: inline-block;
  font-size: 9px;
  color: var(--text-muted, #94a3b8);
  transition: transform 0.15s ease, color 0.15s ease;
}
.eng-ticket-table tbody tr.eng-row-open .eng-caret { transform: rotate(90deg); color: #60a5fa; }
.eng-title {
  color: var(--text-primary, #e2e8f0);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eng-row-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.eng-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.eng-tag-open   { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
.eng-tag-reopen { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.eng-tag-inc    { background: rgba(244, 63, 94, 0.16);  color: #f87171; }

/* Severity pill */
.eng-sev {
  display: inline-block;
  min-width: 34px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.eng-sev-p1 { background: rgba(244, 63, 94, 0.16);  color: #f87171; border-color: rgba(244,63,94,0.4); }
.eng-sev-p2 { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
.eng-sev-p3 { background: rgba(59, 130, 246, 0.14); color: #60a5fa; border-color: rgba(59,130,246,0.3); }
.eng-sev-p4 { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

/* Work-classification chip (S / O) */
.eng-wc {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  vertical-align: middle;
}
.eng-wc-s { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.eng-wc-o { background: rgba(148, 163, 184, 0.16); color: #94a3b8; }

/* QA Lag tab — "In QA now" status pill + live-days emphasis */
.qa-lag-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.18);
  color: #f59e0b;
  white-space: nowrap;
}
td.qa-lag-live { color: #f59e0b; font-weight: 700; }
.eng-qa-window-label { margin-right: 6px; font-size: 13px; color: var(--text-muted, #94a3b8); }

/* Expandable detail drawer */
.eng-ticket-table tbody tr.eng-detail-row td {
  padding: 0 !important;
  background: var(--bg-secondary, rgba(148, 163, 184, 0.05)) !important;
  border-bottom: 1px solid var(--border, #2d3748) !important;
}
.eng-ticket-table tbody tr.eng-detail-row:hover td { background: var(--bg-secondary, rgba(148, 163, 184, 0.05)) !important; }
.eng-detail {
  padding: 16px 20px;
  border-top: 2px solid #60a5fa;
}
.eng-d-head { margin-bottom: 12px; }
.eng-d-title {
  font-size: 16px;
  margin: 0 0 3px;
  color: var(--text-primary, #e2e8f0);
  line-height: 1.35;
}
.eng-d-sub { font-size: 12px; color: var(--text-muted, #94a3b8); }

/* Timeline: created → dev start → closed */
.eng-d-timeline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 9px;
}
.eng-tl-step { display: flex; align-items: center; gap: 8px; }
.eng-tl-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #60a5fa; flex: 0 0 auto;
}
.eng-tl-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}
.eng-tl-date {
  font-size: 13px; font-weight: 600; color: var(--text-primary, #e2e8f0);
  font-variant-numeric: tabular-nums;
}
.eng-tl-arrow { color: var(--text-muted, #94a3b8); font-size: 14px; }

/* Detail metric grid */
.eng-d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px;
  margin: 0 0 14px;
}
.eng-d-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  font-size: 13px;
}
.eng-d-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
}
.eng-d-val { color: var(--text-primary, #e2e8f0); font-weight: 500; }

/* Narrative panels */
.eng-d-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.eng-d-panel {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 8px;
  padding: 10px 12px;
}
.eng-d-panel-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8); margin-bottom: 6px;
}
.eng-d-panel-text {
  font-size: 13px; line-height: 1.5; color: var(--text-primary, #e2e8f0);
  max-height: 220px; overflow-y: auto;
}
.eng-d-empty {
  font-size: 12px; font-style: italic; color: var(--text-muted, #94a3b8);
  padding: 6px 0;
}

/* Flow distribution cards */
.eng-dist-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.eng-dist-card {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  padding: 14px 16px;
}
.eng-dist-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-secondary, #cbd5e1); font-weight: 600; margin-bottom: 12px;
}
.eng-dist-body { display: flex; flex-direction: column; gap: 8px; }
.eng-dist-empty { font-size: 12px; font-style: italic; color: var(--text-muted, #94a3b8); }
.eng-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.eng-bar-name {
  color: var(--text-primary, #e2e8f0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eng-bar-track {
  position: relative; height: 16px;
  background: var(--bg-tertiary, #1e293b);
  border: 1px solid var(--border, #2d3748);
  border-radius: 5px; overflow: hidden;
}
.eng-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 4px; transition: width 220ms ease;
}
.eng-bar-fill.tone-green { background: linear-gradient(90deg, #16a34a, #4ade80); }
.eng-bar-fill.tone-amber { background: linear-gradient(90deg, #d97706, #fbbf24); }
.eng-bar-fill.tone-red   { background: linear-gradient(90deg, #dc2626, #f87171); }
.eng-bar-fill.tone-blue  { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.eng-bar-fill.tone-muted { background: linear-gradient(90deg, #475569, #94a3b8); }
.eng-bar-count {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--text-secondary, #cbd5e1); text-align: right;
}

/* Reliability tiles inside a distribution card */
.eng-rel-body { flex-direction: row; justify-content: space-around; gap: 10px; }
.eng-rel-tile { text-align: center; flex: 1; }
.eng-rel-val {
  font-size: 22px; font-weight: 700; color: var(--text-primary, #e2e8f0);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.eng-rel-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8); margin-top: 4px;
}

/* ── ITSC Roadmap tab ─────────────────────────────────────────────── */

.itsc-intro {
  font-size: 13px;
  color: var(--text-secondary, #cbd5e1);
  margin-bottom: 12px;
  line-height: 1.5;
}

.itsc-intro code {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.itsc-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.itsc-toolbar-spacer { flex: 1; }

.itsc-search {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  min-width: 220px;
}

.itsc-select {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
}

.itsc-btn-primary {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.itsc-btn-primary:hover { background: #1d4ed8; }
.itsc-btn-primary:disabled { opacity: 0.5; cursor: wait; }

.itsc-btn-secondary {
  background: transparent;
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}
.itsc-btn-secondary:hover { border-color: #60a5fa; color: #60a5fa; }

.itsc-btn-danger {
  background: transparent;
  color: #f43f5e;
  border: 1px solid #f43f5e;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}
.itsc-btn-danger:hover { background: #f43f5e; color: #fff; }

.itsc-btn-link {
  background: none;
  border: none;
  color: #60a5fa;
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
}
.itsc-btn-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
   Summary cards — three rows: KPI strip / distribution bars / action lists.
   All rows are uniform-height; cards use the same theme tokens as the
   rest of the app so density and contrast match the dashboard chrome.
   ─────────────────────────────────────────────────────────────────── */

.itsc-summary-wrap { margin: 16px 0; display: grid; gap: 12px; }

/* Row 1 — KPI strip: small headline tiles in one row. */
.itsc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1080px) {
  .itsc-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
.itsc-kpi-tile {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
  justify-content: center;
}
.itsc-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #cbd5e1);
  font-weight: 600;
}
.itsc-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.itsc-kpi-value.accent-blue   { color: #60a5fa; }
.itsc-kpi-value.accent-green  { color: #4ade80; }
.itsc-kpi-value.accent-amber  { color: #fbbf24; }
.itsc-kpi-value.accent-red    { color: #f87171; }
.itsc-kpi-sub {
  font-size: 11px;
  color: var(--text-secondary, #cbd5e1);
}

/* Row 2 — Distributions: 4 equal cards with horizontal mini-bars. */
.itsc-dist-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1080px) {
  .itsc-dist-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .itsc-dist-row { grid-template-columns: 1fr; }
}

/* Row 3 — Action lists: 2 equal cards side by side. */
.itsc-action-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .itsc-action-row { grid-template-columns: 1fr; }
}

.itsc-summary-tile {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.itsc-summary-tile-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #cbd5e1);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.itsc-summary-tile-meta {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.itsc-summary-tile-body {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.itsc-summary-empty {
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  font-style: italic;
}

/* Horizontal mini-bar rows inside distribution cards. */
.itsc-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.itsc-bar-row-label {
  color: var(--text-primary, #e2e8f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.itsc-bar-track {
  position: relative;
  height: 18px;
  background: var(--bg-tertiary, #1e293b);
  border: 1px solid var(--border, #2d3748);
  border-radius: 5px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.itsc-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 4px;
  transition: width 220ms ease;
}
.itsc-bar-fill.tone-green  { background: linear-gradient(90deg, #16a34a, #4ade80); }
.itsc-bar-fill.tone-amber  { background: linear-gradient(90deg, #d97706, #fbbf24); }
.itsc-bar-fill.tone-red    { background: linear-gradient(90deg, #dc2626, #f87171); }
.itsc-bar-fill.tone-muted  { background: linear-gradient(90deg, #475569, #94a3b8); }
.itsc-bar-row-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-secondary, #cbd5e1);
  text-align: right;
}
.itsc-bar-name-only {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Action lists (upcoming / blocked) */
.itsc-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.itsc-summary-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.itsc-summary-list li:last-child { border-bottom: none; }
.itsc-summary-list a {
  color: var(--text-primary, #e2e8f0);
  text-decoration: none;
  font-size: 12.5px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itsc-summary-list a:hover { color: #60a5fa; }
.itsc-summary-meta {
  font-size: 11px;
  color: var(--text-secondary, #cbd5e1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   Table — sortable column headers, hover row, sort indicators.
   ─────────────────────────────────────────────────────────────────── */
.itsc-table tbody tr.itsc-row { cursor: pointer; }
.itsc-table tbody tr.itsc-row:hover { background: rgba(96, 165, 250, 0.06); }

.itsc-table thead th.itsc-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px;
  transition: color 120ms ease, background 120ms ease;
}
.itsc-table thead th.itsc-sortable:hover {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.05);
}
.itsc-table thead th.itsc-sortable::after {
  content: '↕';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  opacity: 0.4;
}
.itsc-table thead th.itsc-sortable.sort-asc::after {
  content: '▲';
  opacity: 1;
  color: #60a5fa;
}
.itsc-table thead th.itsc-sortable.sort-desc::after {
  content: '▼';
  opacity: 1;
  color: #60a5fa;
}

/* Detail view */
.itsc-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 0;
}
.itsc-detail-actions { display: flex; gap: 8px; }

.itsc-detail-title-row { margin-bottom: 12px; }
.itsc-detail-title {
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--text-primary, #e2e8f0);
}
.itsc-detail-sub {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.itsc-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  margin: 12px 0;
}

.itsc-detail-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
.itsc-detail-cell-wide { grid-column: 1 / -1; }
.itsc-detail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}
.itsc-detail-value {
  font-size: 14px;
  color: var(--text-primary, #e2e8f0);
  line-height: 1.45;
  word-break: break-word;
}
.itsc-read-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.itsc-table-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.itsc-table-pill.tone-green {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.itsc-table-pill.tone-amber {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.itsc-table-pill.tone-red {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}
.itsc-table-pill.tone-muted { color: var(--text-muted, #94a3b8); }

.itsc-detail-section-title {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
}

.itsc-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.itsc-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.itsc-flag-chip.on {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.itsc-flag-chip.off { color: var(--text-muted, #94a3b8); }

.itsc-detail-briefs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.itsc-detail-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
}
.itsc-detail-panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 6px;
}
.itsc-detail-panel-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #e2e8f0);
}
.itsc-detail-panel-empty {
  border-style: dashed;
  opacity: 0.7;
}
.itsc-detail-panel-empty-msg {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted, #94a3b8);
}

.itsc-detail-voters {
  max-width: 420px;
}

.itsc-detail-audit {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

/* ─────────────────────────────────────────────────────────────────────
   Form overlay — centered, height-capped, scrolls inside the panel
   so the dashboard underneath stays locked. Background uses the same
   theme tokens the rest of the app uses (--bg-card / --bg-tertiary /
   --border-color) so the panel reads as a solid surface against the
   dim backdrop instead of a washed-out tinted sheet.
   ─────────────────────────────────────────────────────────────────── */
.itsc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

/* Lock body scroll while the modal is open so the page underneath
   can't scroll out from beneath the panel. JS toggles the class. */
body.itsc-modal-open { overflow: hidden; }

.itsc-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 14, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.itsc-overlay-panel {
  position: relative;
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

.itsc-overlay-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #2d3748);
  background: var(--bg-card, #1a2234);
}
.itsc-overlay-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  letter-spacing: 0.01em;
}

.itsc-overlay-close {
  background: transparent;
  border: 1px solid var(--border, #2d3748);
  color: var(--text-secondary, #cbd5e1);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: border-color 120ms ease, color 120ms ease;
}
.itsc-overlay-close:hover {
  border-color: #f43f5e;
  color: #f43f5e;
}

/* The form is the scrollable region between header + footer. The
   footer uses position: sticky so Save / Cancel stay visible no
   matter how far the user scrolls down the form. */
#itsc-form {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 24px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.itsc-form-errors {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
}
.itsc-form-errors ul { margin: 4px 0 0 18px; padding: 0; }

.itsc-fieldset {
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  padding: 14px 18px 16px;
  margin: 0 0 16px;
  background: var(--bg-secondary, #111827);
}
.itsc-fieldset legend {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #cbd5e1);
}

.itsc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.itsc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  min-width: 0;
}
.itsc-field-wide { grid-column: 1 / -1; }
.itsc-field > span {
  color: var(--text-secondary, #cbd5e1);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.itsc-required { color: #f43f5e; font-weight: 700; }

.itsc-field input,
.itsc-field select,
.itsc-field textarea {
  background: var(--bg-tertiary, #1e293b);
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, #2d3748);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  min-width: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.itsc-field input::placeholder,
.itsc-field textarea::placeholder {
  color: var(--text-muted, #94a3b8);
}
.itsc-field select {
  /* Match the input look across browsers — kill the native chrome
     and add our own caret so the dropdowns don't render as a tiny
     OS-themed widget that clashes with the dark panel. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary, #cbd5e1) 50%),
                    linear-gradient(135deg, var(--text-secondary, #cbd5e1) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.itsc-field textarea {
  resize: vertical;
  min-height: 64px;
}
.itsc-field input:focus,
.itsc-field select:focus,
.itsc-field textarea:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}

.itsc-flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.itsc-flag-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-tertiary, #1e293b);
  border: 1px solid var(--border, #2d3748);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-primary, #e2e8f0);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.itsc-flag-checkbox:hover { border-color: #60a5fa; }
.itsc-flag-checkbox input {
  margin: 0;
  width: 15px;
  height: 15px;
  accent-color: #60a5fa;
  cursor: pointer;
}

.itsc-voter-block { margin-top: 14px; }
.itsc-voter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-primary, #e2e8f0);
}
.itsc-voter-hint { color: var(--text-secondary, #cbd5e1); flex: 1; font-size: 11px; }

.itsc-voter-row {
  display: grid;
  grid-template-columns: 1fr 100px 32px;
  gap: 8px;
  margin-bottom: 6px;
}
.itsc-voter-row input {
  background: var(--bg-tertiary, #1e293b);
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border, #2d3748);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
}
.itsc-voter-row input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
.itsc-voter-empty {
  font-size: 12px;
  color: var(--text-secondary, #cbd5e1);
  font-style: italic;
  padding: 6px 0;
}

/* Sticky footer — stays anchored at the bottom of the scroll region
   so Save and Cancel are always reachable even on a tall form. */
.itsc-form-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 0 4px;
  margin-top: auto;
  background: linear-gradient(to top, var(--bg-card, #1a2234) 80%, rgba(26, 34, 52, 0));
}

@media (max-width: 720px) {
  .itsc-form-grid { grid-template-columns: 1fr; }
  .itsc-overlay { padding: 16px 12px; }
  .itsc-overlay-panel { max-height: calc(100vh - 32px); }
  #itsc-form { padding: 14px 16px 12px; }
  .itsc-overlay-header { padding: 12px 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   ITSC subtabs — Roadmap | Salesforce Plan (V2)
   Lives inside #panel-itsc; chrome modelled on the .dept-tab strip
   above it but visually de-weighted so it reads as a child level.
   ─────────────────────────────────────────────────────────────────── */

.itsc-subnav {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: var(--bg-tertiary, #0f1623);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  width: fit-content;
}

.itsc-subtab {
  background: transparent;
  border: none;
  color: var(--text-secondary, #cbd5e1);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.itsc-subtab:hover {
  color: var(--text-primary, #e2e8f0);
  background: rgba(96, 165, 250, 0.07);
}
.itsc-subtab.active {
  background: var(--bg-card, #1a2234);
  color: var(--text-primary, #e2e8f0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
}

.itsc-subpanel { display: none; }
.itsc-subpanel.itsc-subpanel-active { display: block; }

/* ─────────────────────────────────────────────────────────────────────
   Salesforce Plan (V2) — in-app review document.
   Source: templates/_dept_engineering_itsc_sf_plan.html
   Goal: dense, scannable, citation-grade. Matches dashboard chrome.
   All selectors namespaced under .itsc-sfp so they cannot leak.
   ─────────────────────────────────────────────────────────────────── */

.itsc-sfp {
  color: var(--text-primary, #e2e8f0);
  font-size: 14px;
  line-height: 1.55;
  max-width: 1100px;
}

/* Header banner */
.itsc-sfp-header {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0.02));
  border: 1px solid var(--border, #2d3748);
  border-left: 3px solid #60a5fa;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 18px;
}
.itsc-sfp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #cbd5e1);
  font-weight: 600;
  margin-bottom: 8px;
}
.itsc-sfp-version-badge {
  background: #60a5fa;
  color: #0f1623;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.itsc-sfp-eyebrow-text { letter-spacing: 0.08em; }
.itsc-sfp-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary, #e2e8f0);
}
.itsc-sfp-lede {
  margin: 0;
  color: var(--text-secondary, #cbd5e1);
  font-size: 13.5px;
  max-width: 880px;
}

/* TOC */
.itsc-sfp-toc {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.itsc-sfp-toc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  margin-right: 6px;
}
.itsc-sfp-toc a {
  color: #93c5fd;
  text-decoration: none;
  font-size: 12.5px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(96, 165, 250, 0.06);
  transition: background 0.12s ease;
}
.itsc-sfp-toc a:hover {
  background: rgba(96, 165, 250, 0.15);
  text-decoration: none;
}

/* Sections */
.itsc-sfp-section {
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2d3748);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 14px;
  scroll-margin-top: 12px; /* anchor jumps land below sticky-ish chrome */
}
.itsc-sfp-h {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-primary, #e2e8f0);
  border-bottom: 1px solid var(--border, #2d3748);
  padding-bottom: 8px;
}
.itsc-sfp-h4 {
  font-size: 13.5px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--text-primary, #e2e8f0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.itsc-sfp-section p,
.itsc-sfp-section ul,
.itsc-sfp-section ol {
  color: var(--text-secondary, #cbd5e1);
  margin: 8px 0;
}
.itsc-sfp-section ul,
.itsc-sfp-section ol { padding-left: 22px; }
.itsc-sfp-section li { margin: 4px 0; }
.itsc-sfp-section code {
  background: rgba(15, 22, 35, 0.6);
  color: #fde68a;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}
.itsc-sfp-section strong { color: var(--text-primary, #e2e8f0); }
.itsc-sfp-section em { color: var(--text-secondary, #cbd5e1); }

/* Tables */
.itsc-sfp-table-wrap {
  overflow-x: auto;
  margin: 10px 0;
  border: 1px solid var(--border, #2d3748);
  border-radius: 8px;
}
.itsc-sfp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.itsc-sfp-table thead th {
  background: var(--bg-tertiary, #0f1623);
  color: var(--text-secondary, #cbd5e1);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border, #2d3748);
}
.itsc-sfp-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(45, 55, 72, 0.5);
  vertical-align: top;
  color: var(--text-primary, #e2e8f0);
}
.itsc-sfp-table tbody tr:last-child td { border-bottom: none; }
.itsc-sfp-table tbody tr:hover td { background: rgba(96, 165, 250, 0.04); }
.itsc-sfp-table .itsc-sfp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Highlight rows added/changed in v2 */
.itsc-sfp-row-new td {
  background: rgba(74, 222, 128, 0.04);
  border-left: 2px solid rgba(74, 222, 128, 0.5);
}
.itsc-sfp-row-new:first-child td:first-child { border-top-left-radius: 4px; }

.itsc-sfp-new-tag {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Pre-formatted diagrams */
.itsc-sfp-diagram {
  background: var(--bg-tertiary, #0f1623);
  border: 1px solid var(--border, #2d3748);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-primary, #e2e8f0);
  overflow-x: auto;
  white-space: pre;
  margin: 12px 0;
}
.itsc-sfp-diagram strong { color: #93c5fd; }

/* Callout */
.itsc-sfp-callout {
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid #fbbf24;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 12px 0;
  color: var(--text-primary, #e2e8f0);
  font-size: 13.5px;
}

.itsc-sfp-note {
  background: rgba(96, 165, 250, 0.05);
  border-left: 2px solid rgba(96, 165, 250, 0.4);
  padding: 8px 12px;
  border-radius: 5px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text-secondary, #cbd5e1);
}

/* Footer */
.itsc-sfp-footer {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px dashed var(--border, #2d3748);
  border-radius: 8px;
  background: rgba(15, 22, 35, 0.4);
}
.itsc-sfp-footer p { margin: 0 0 6px; color: var(--text-secondary, #cbd5e1); font-size: 13px; }
.itsc-sfp-footer p:last-child { margin: 0; }
.itsc-sfp-footer-meta {
  font-size: 11.5px !important;
  color: var(--text-muted, #94a3b8) !important;
  font-style: italic;
}

@media (max-width: 720px) {
  .itsc-sfp-section { padding: 14px 16px; }
  .itsc-sfp-header { padding: 14px 16px; }
  .itsc-sfp-table { font-size: 12px; }
  .itsc-sfp-table thead th,
  .itsc-sfp-table tbody td { padding: 7px 9px; }
}

/* Inline editing (Salesforce-backed roadmap) */
.itsc-inline-select,
.itsc-inline-input {
  width: 100%;
  max-width: 160px;
  font-size: 12.5px;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid var(--border, #2d3748);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-primary, #e2e8f0);
  font-family: inherit;
}
.itsc-inline-input { max-width: 120px; }
.itsc-detail-input,
.itsc-detail-textarea {
  width: 100%;
  max-width: none;
  margin-top: 4px;
}
.itsc-detail-textarea {
  min-height: 88px;
  resize: vertical;
}
.itsc-create-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border, #2d3748);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
}
.itsc-detail-note {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 12px;
}

/* -- Engineering KPI Targets sub-tab (Delivery Cycle + Reliability) -- */
.ekpi-target-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.ekpi-target-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 4px;
}
.ekpi-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: var(--bg-card);
}
.ekpi-chip strong { font-weight: 700; }
/* Pass/fail is carried by border + tint so the label text stays high-contrast
   (var(--text-primary)) on every theme, light or dark. */
.ekpi-chip-good {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.14);
}
.ekpi-chip-good strong { color: #059669; }
.ekpi-chip-bad {
  border-color: rgba(244, 63, 94, 0.6);
  background: rgba(244, 63, 94, 0.14);
}
.ekpi-chip-bad strong { color: #e11d48; }
.ekpi-chip-now { opacity: 0.72; font-size: 11px; }
/* "Other Types" roll-up under Completed by Type: a clickable chip that
   expands the long tail onto its own line within the flex-wrap strip. */
.ekpi-other-toggle { cursor: pointer; user-select: none; }
.ekpi-other-caret { font-size: 10px; opacity: 0.7; }
.ekpi-other-types {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.ekpi-other-types[hidden] { display: none; }

/* Narrative intro at the top of each KPI work-stream panel: deconstructs the
   dashboard and calls out the interactions before the first number. */
.ekpi-intro {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 10px;
  background: var(--bg-secondary);
}
.ekpi-intro-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ekpi-intro-lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ekpi-intro-lead strong { color: var(--text-primary); }
.ekpi-intro-hints {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ekpi-intro-hints li + li { margin-top: 4px; }
.ekpi-intro-hints em { color: var(--text-primary); font-style: normal; font-weight: 600; }
.ekpi-intro-hints .ekpi-i { cursor: default; }

.ekpi-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.ekpi-note strong { color: var(--text-primary); }
.ekpi-note code {
  font-size: 11.5px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}
.ekpi-origin-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  text-transform: capitalize;
  white-space: nowrap;
}
.ekpi-scope-pill { text-transform: none; }
.ekpi-reviewed-mark { font-size: 10px; margin-left: 2px; opacity: .85; }

/* Outage triage — the verdict buckets beside the count. Each chip is a
   drill into the tickets it counts; the colour names the bucket, the text
   stays high-contrast on every theme. */
.ekpi-triage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.ekpi-triage-full strong { color: #e11d48; }
.ekpi-triage-unverified strong { color: #d97706; }
.ekpi-triage-partial strong { color: var(--text-muted); }
.ekpi-triage-reviewed strong { color: #2563eb; }

/* Smart info bubble — a JS-positioned floating tooltip (see initSmartTips in
   dept_engineering.js) that replaces the pure-CSS [data-kpi-tip] tooltip so a
   bubble near the top of the page is repositioned into the visible area
   instead of being clipped above it, and scrolls when it is taller than the
   screen. */
.ekpi-float-tip {
  position: fixed;
  z-index: 10050;
  max-width: 340px;
  background: #0f172a;
  border: 1px solid var(--border-light, #334155);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: #e2e8f0;
  line-height: 1.55;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  opacity: 0;
  transition: opacity .12s ease;
}
.ekpi-float-tip.is-visible { opacity: 1; }

/* Once the smart positioner is wired, suppress the pure-CSS tooltip so the two
   cannot double up — the floating element handles every [data-kpi-tip]. If the
   script never runs, the class is never added and the CSS tooltip remains. */
body.eng-smart-tips [data-kpi-tip]::after,
body.eng-smart-tips [data-kpi-tip]::before { content: none; }

/* Small hoverable "i" marker that reveals a [data-kpi-tip] explanation. */
.ekpi-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  font-family: 'Georgia', serif;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  transition: color .12s ease, border-color .12s ease;
}
.ekpi-i:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* The two registers (Development incidents, Operations aged-open) share one
   skeleton. Each is a bounded scroll box — 96 incidents or 149 aged requests
   must not push the panel several screens tall — with a header that stays
   put while the rows scroll under it. */
.ekpi-register .dept-table-wrap {
  max-height: 60vh;
  overflow: auto;
}
.ekpi-register .dept-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
  cursor: help;
}
.ekpi-register-foot {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.ekpi-register-foot:empty { display: none; }

/* Inside that scroll box a column-header tooltip must open downward or it is
   clipped by the top edge. */
.ekpi-register th[data-kpi-tip]::after {
  bottom: auto;
  top: calc(100% + 10px);
}
.ekpi-register th[data-kpi-tip]::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════
   KPI work-stream switch (Development / Operations)
   Nested one level inside the Tickets subnav, so it reads as a
   narrower choice: slightly smaller, pill-outlined rather than
   tray-mounted.
   ═══════════════════════════════════════════════════════════════ */
.eng-kstream-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.eng-kstream-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.eng-kstream-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: rgba(96, 165, 250, 0.07);
}
.eng-kstream-tab.active {
  color: #fff;
  background: #3b82f6;
  border-color: #3b82f6;
}
.eng-kstream-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: 6px;
}
.eng-kstream-panel { display: none; }
.eng-kstream-panel.eng-kstream-active { display: block; }

/* ═══════════════════════════════════════════════════════════════
   Drill-down: clickable aggregates
   ═══════════════════════════════════════════════════════════════ */

/* A tile or chip that opens the tickets behind its number. The cue is
   revealed on hover rather than always shown, so the resting grid stays
   as quiet as it was before the tiles became clickable. */
.ekpi-drillable { cursor: pointer; position: relative; }
.dept-insight.ekpi-drillable:hover,
.dept-insight.ekpi-drillable:focus-visible {
  background: rgba(96, 165, 250, 0.06);
  outline: none;
}
.dept-insight.ekpi-drillable:focus-visible { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5); }
.ekpi-drill-cue {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
  opacity: 0;
  transition: opacity .12s ease;
}
.dept-insight.ekpi-drillable:hover .ekpi-drill-cue,
.dept-insight.ekpi-drillable:focus-visible .ekpi-drill-cue { opacity: 1; }
.ekpi-chip.ekpi-drillable:hover { border-color: #60a5fa; }
.ekpi-chip.ekpi-drillable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
}

/* ─── Drawer ─────────────────────────────────────────────────── */
.eng-dd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(2, 6, 16, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.eng-dd-overlay[hidden] { display: none; }
body.eng-dd-open { overflow: hidden; }
.eng-dd-panel {
  width: min(1180px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-light, var(--border));
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.eng-dd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.eng-dd-head-text { min-width: 0; }
.eng-dd-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.3;
}
.eng-dd-scope {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.eng-dd-close {
  flex: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.eng-dd-close:hover { color: var(--text-primary); border-color: var(--border-light); }
.eng-dd-def {
  padding: 10px 20px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}
.eng-dd-def:empty { display: none; }
.eng-dd-body { padding: 4px 0 0; }
.eng-dd-body .dept-table-wrap { max-height: 58vh; overflow: auto; }
.eng-dd-foot {
  padding: 10px 20px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ─── Rows ───────────────────────────────────────────────────── */
.eng-dd-table tbody tr.eng-dd-row { cursor: pointer; }
.eng-dd-table tbody tr.eng-dd-row:hover { background: rgba(96, 165, 250, 0.07); }
.eng-dd-table tbody tr.eng-dd-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.5);
}
.eng-dd-table tbody tr.eng-dd-row-open { background: rgba(96, 165, 250, 0.1); }
.eng-dd-sf {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.eng-dd-sf:hover { text-decoration: underline; }
.eng-dd-sf-mark { font-size: 10px; margin-left: 3px; opacity: .75; }
.eng-dd-nolink { color: var(--text-muted); cursor: help; }

/* ─── Classification trace ───────────────────────────────────── */
.eng-dd-detail-row > td { padding: 0 !important; background: var(--bg-tertiary); }
.eng-dd-detail {
  padding: 16px 20px;
  border-top: 2px solid #60a5fa;
}
.eng-dd-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.eng-dd-detail-title {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.35;
}
.eng-dd-detail-sf {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
  text-decoration: none;
  white-space: nowrap;
}
.eng-dd-detail-sf:hover { text-decoration: underline; }
.eng-dd-detail-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.eng-tr {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
  padding: 11px 14px;
  margin-bottom: 10px;
}
.eng-tr:last-child { margin-bottom: 0; }
.eng-tr-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.eng-tr-label { font-size: 13px; font-weight: 650; color: var(--text-primary); }
.eng-tr-result {
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 999px;
  padding: 1px 9px;
}
.eng-tr-field {
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.eng-tr-method {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.eng-tr-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 4px;
  padding: 2px 7px;
}
.eng-tr-badge-ai {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.45);
}
.eng-tr-method-note { font-size: 11.5px; color: var(--text-muted); }
.eng-tr-rule {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
  padding: 3px 0;
}
.eng-tr-k {
  flex: none;
  width: 82px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-top: 2px;
}
.eng-tr-v { flex: 1; min-width: 0; color: var(--text-secondary); word-break: break-word; }
.eng-tr-pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 11.5px;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 9px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}
.eng-tr-match {
  background: rgba(245, 158, 11, 0.25);
  color: var(--text-primary);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
}
.eng-tr-context { font-style: italic; color: var(--text-muted); }
.eng-tr-input { display: block; }
.eng-tr-input code {
  font-size: 11px;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
.eng-tr-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── EoY Report tab ─────────────────────────────────────────── */
.eoy-goal-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  margin: 1px 0;
  white-space: nowrap;
}
.eoy-muted { color: var(--text-muted); }
.eoy-flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.eoy-flag.on {
  color: #166534;
  background: #dcfce7;
  border-radius: 4px;
  padding: 1px 7px;
}
.eoy-editable { cursor: pointer; }
.eoy-editable:hover { background: var(--bg-tertiary); }

.eoy-goal-outcome { margin-top: 12px; }
.eoy-goal-outcome-h {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.eoy-goal-outcome ul,
.eoy-narrative-list { margin: 0; padding-left: 18px; }
.eoy-goal-outcome li,
.eoy-narrative-list li { margin: 4px 0; color: var(--text-secondary); }
.eoy-narrative-detail { color: var(--text-secondary); font-size: var(--font-sm, 0.8125rem); margin-top: 2px; }
.eoy-narrative { color: var(--text-secondary); }

.eoy-export-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: var(--font-sm, 0.8125rem);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.eoy-export-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-color: var(--accent, #2563eb);
}