/* ============================================
   Workforce Productivity — project-local styles
   Layered on top of FLBI tokens.css + components.css.
   This file should only contain rules that the FLBI components don't
   cover — surface anything generic enough to belong in components.css
   as migration debt and lift it into the next style-guide release.
   ============================================ */

/* Project-local extensions to the FLBI token palette.
   Migration debt: --color-text-faint and --color-text-muted now come
   from tokens.css; old names --color-panel / --color-panel-border /
   --color-positive / --color-negative / --color-warn are aliased here
   as a temporary bridge. New code should use the FLBI names directly. */
:root {
  --color-panel: var(--color-surface);
  --color-panel-border: var(--color-border);
  --color-positive: var(--color-success);
  --color-negative: var(--color-error);
  --color-warn: var(--color-warning);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Legacy radius/spacing aliases — new code uses FLBI's named tokens. */
  --radius: var(--radius-md);
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
}

* {
  box-sizing: border-box;
}

/* body styling lives in tokens.css — Satoshi font + FLBI palette. */

/* ── Sidebar ── */

/* Disabled nav item — used for tabs that are placeholders pending the
   Tickets pipeline. Still clickable so users can preview the placeholder
   panel and see what's coming, just visually subdued. */
.nav-item-disabled {
  opacity: 0.55;
}
.nav-item-disabled:hover {
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.75;
}

/* Section labels in the sidebar nav — group items under "Calls" /
   "Tickets" without making them clickable. */
.nav-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-md) var(--space-md) 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-panel-border);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-section-label svg { opacity: 0.7; }
.nav-section-label:first-child { margin-top: 0; }
.nav-coming-soon {
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--color-warn);
  color: #1a1f2c;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Placeholder card used in Tickets section panels until the pipeline
   ships data — keeps the layout informative rather than empty. */
.placeholder-card {
  padding: var(--space-md);
  border: 1px dashed var(--color-panel-border);
  border-radius: 8px;
  background: rgba(91, 155, 255, 0.03);
}
.placeholder-card h2 { margin-top: 0; }
.placeholder-card p { color: var(--color-text-muted); }
.placeholder-card p:first-of-type { color: var(--color-text); }

.last-run {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Version pill — clickable, opens the changelog modal. */
.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-panel-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.version-badge:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Changelog modal — lifted from ComRadar conventions. */
.modal-brand-bar {
  background: var(--color-primary);
  padding: 14px 20px;
  flex-shrink: 0;
}
.modal-brand-label {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
}
/* Shared markdown body styles — both the changelog modal and the
   transcript modal render markdown via the same minimal renderer in
   app.js, so they share these rules. */
.changelog-body, .transcript-body { font-size: 13px; line-height: 1.6; }
.changelog-body h1, .transcript-body h1 { font-size: 16px; margin: 0 0 var(--space-md) 0; }
.changelog-body h2, .transcript-body h2 { font-size: 14px; margin: var(--space-md) 0 var(--space-xs) 0; color: var(--color-primary); }
.changelog-body h3, .changelog-body h4,
.transcript-body h3, .transcript-body h4 { font-size: 13px; margin: var(--space-md) 0 var(--space-xs) 0; }
.changelog-body hr, .transcript-body hr { border: none; border-top: 1px solid var(--color-panel-border); margin: var(--space-md) 0; }
.changelog-body code, .transcript-body code { background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.changelog-body ul, .changelog-body ol,
.transcript-body ul, .transcript-body ol { margin: 6px 0 var(--space-md); padding-left: 20px; }
.changelog-body li, .transcript-body li { margin: 4px 0; }
.changelog-body p, .transcript-body p { margin: 6px 0; }
.changelog-loading, .changelog-error { color: var(--color-text-muted); }

/* Larger modal dialog used for transcripts (more reading area). */
.modal.modal-lg {
  max-width: 900px;
  width: 92vw;
}

/* Blockquotes inside transcripts — used for the scope disclaimer at the
   top of every generated markdown file. */
.transcript-body blockquote {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-warn);
  background: rgba(251, 191, 36, 0.06);
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Speaker turn lines in the diarized transcript body. The format is
   "**SPEAKER (mm:ss):** quoted text" — bold the speaker label so the
   eye can scan turns. */
.transcript-body strong { color: var(--color-text); }

/* Dim "transcript" links in the friction list and the All Calls table
   to read as actions, not destinations. */
.transcript-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.transcript-link:hover { opacity: 0.85; }

/* ── Main column tightening ──
   The .main column fills 100% width to match ComRadar's behavior — no
   max-width cap. FLBI's .main { padding: var(--space-6) } is fine on
   desktop but eats too much horizontal real estate on narrow
   viewports, so reduce progressively. */
@media (max-width: 1024px) {
  .main { padding: var(--space-4); }
}
@media (max-width: 600px) {
  .main { padding: var(--space-3); }
}

.window-select, .btn {
  background: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--color-primary);
}

.custom-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  color: var(--color-text-muted);
}
.custom-range[hidden] { display: none; }
.custom-range label { display: inline-flex; align-items: center; gap: 4px; }
.custom-range input[type="date"] {
  background: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}

/* ── Scope banner ── */
.scope-banner {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--color-warn);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 13px;
}

/* ── KPI cards ── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.kpi {
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

/* ── Panels ── */
/* Tabbed view: only the section matching the active sidebar nav item is
   shown. Default: hidden. The .active class is applied by app.js based on
   the URL hash (or sidebar click). KPI row + scope banner stay always
   visible — they're global context. */
.panel-section {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.panel-section.active {
  display: flex;
}

/* Compact KPI row used inside section headers (e.g. Agents tab) — visually
   distinct from the always-visible global KPI row at the top. */
.kpi-row-compact .kpi {
  background: transparent;
  border: 1px solid var(--color-panel-border);
}
.kpi-value-sm {
  font-size: 18px;
  font-weight: 600;
}

/* Agents table: tighter, supports right-aligned numeric columns and
   click-to-filter rows. */
.agents-table th.num,
.agents-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.agents-table tbody tr {
  cursor: pointer;
}
.agents-table tbody tr:hover td {
  background: var(--color-panel-border);
}
.agents-table .agent-cell-queue {
  color: var(--color-text-muted);
  font-style: italic;
}
.agents-table .pct-bar {
  display: inline-block;
  height: 4px;
  border-radius: 2px;
  background: var(--color-primary);
  vertical-align: middle;
  margin-left: 6px;
}
.agents-table .pct-bar.warn { background: var(--color-warn); }
.agents-table .pct-bar.bad  { background: var(--color-negative); }
.agents-table .pct-bar.good { background: var(--color-positive); }

.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.panel h2 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* Bound chart canvases inside fixed-height wrappers — Chart.js with
   maintainAspectRatio:false grows to fill its container, so without an
   explicit height the canvas climbs every redraw. */
.chart-wrap {
  position: relative;
  width: 100%;
}
.chart-wrap canvas { display: block; max-width: 100%; }
.chart-wrap.chart-line   { height: 240px; }
.chart-wrap.chart-bar    { height: 360px; }
.chart-wrap.chart-doughnut { height: 220px; }

.panel-hint {
  margin: 0 0 var(--space-md) 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.panel-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .panel-grid-2 { grid-template-columns: 1fr; }
}

/* ── Friction quotes list ── */
.quote-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quote-list li {
  border-left: 3px solid var(--color-negative);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: rgba(248, 113, 113, 0.04);
  border-radius: 0 6px 6px 0;
}

.quote-list .quote-text {
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 4px;
}

.quote-list .quote-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* ── Friction list — clickable expanding cards ── */
.friction-item {
  cursor: pointer;
  transition: background 0.12s ease;
}
.friction-item:hover { background: rgba(248, 113, 113, 0.08); }
.friction-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.friction-item.open { background: rgba(248, 113, 113, 0.08); }

.friction-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--color-panel-border);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 500;
}
.friction-expand-hint {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 11px;
  user-select: none;
}

.friction-detail {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
}
.friction-actions {
  margin-top: var(--space-sm);
  display: flex;
  gap: 8px;
}

/* Definition-list metric grid used inside expanded friction cards. Two
   columns: label | value. Reads as a key/value table without the borders. */
.metric-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px var(--space-md);
  margin: 0;
  font-size: 12px;
}
.metric-grid dt {
  color: var(--color-text-muted);
  font-weight: 500;
}
.metric-grid dd {
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}
.metric-grid code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.metric-sub {
  color: var(--color-text-muted);
  font-size: 11px;
  margin-left: 4px;
}

/* Phone link — same color as the worker mask sigil so masked vs. unmasked
   read consistently, but the unmasked version is underlined to signal
   it's clickable (tel:). */
.phone-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-variant-numeric: tabular-nums;
}
.phone-display {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* ── Calls table ── */
.table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.table-controls input {
  flex: 1;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
}

#table-count {
  color: var(--color-text-muted);
  font-size: 12px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
}

.calls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.calls-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  border-bottom: 1px solid var(--color-panel-border);
}

.calls-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-panel-border);
  vertical-align: top;
}

.calls-table tr:last-child td {
  border-bottom: none;
}

.calls-table tr:hover td {
  background: rgba(91, 155, 255, 0.04);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.tag-positive { background: rgba(74, 222, 128, 0.15); color: var(--color-positive); }
.tag-neutral  { background: rgba(148, 163, 184, 0.15); color: var(--color-neutral); }
.tag-negative { background: rgba(248, 113, 113, 0.15); color: var(--color-negative); }
.tag-bypass   { background: rgba(251, 191, 36, 0.15); color: var(--color-warn); }

.summary-cell {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-cell:hover {
  white-space: normal;
}

/* ============================================
   FLBI migration — project-local additions on top of components.css.
   These cover the patterns the FLBI components don't (yet) standardize.
   When a pattern lands in components.css we migrate the local rule out.
   ============================================ */

/* Topbar last-run indicator. Tucked next to the Refresh button so the
   user can always see how stale the data is. */
.last-run-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nav source tag — small chip on source-specific nav items
   (FLC Bypass for calls, SLA Compliance for tickets) so the user
   knows the tab won't respect the source filter. */
.nav-source-tag {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Responsiveness pass (v0.6.1) ──
   Project-local rules that fix layout pain on tablet / mobile widths.
   Some of these are upstream-eligible — flagged inline as migration
   debt. */

/* Override FLBI's overflow:hidden on .table-wrapper so wide data tables
   (All Records has 9 columns; Agents has 7) get horizontal scroll on
   narrow viewports instead of clipping or forcing the layout to grow.
   MIGRATION DEBT: lift this into components.css upstream — every
   dashboard with a wide data-table needs it. */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Keep cells from collapsing to no width — gives a scrollable canvas. */
.data-table {
  min-width: max-content;
}

/* Chart heights use clamp() so they scale with viewport instead of
   sticking at fixed pixel values. Keeps charts readable on narrow
   screens without losing detail on wide. */
.chart-wrap.chart-line   { height: clamp(180px, 30vw, 280px); }
.chart-wrap.chart-bar    { height: clamp(260px, 45vw, 380px); }
.chart-wrap.chart-doughnut { height: clamp(180px, 25vw, 240px); }

/* Topbar tightening at tablet width. components.css's 768px breakpoint
   handles phone, but at 1024px the topbar gets cramped because we have
   source filter + date dropdown + custom range inputs + last-run chip +
   refresh button. Allow wrap one breakpoint earlier. */
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; padding-block: var(--space-2); }
  .topbar-controls { flex-wrap: wrap; row-gap: var(--space-2); }
  .topbar-title { flex-basis: 100%; margin-bottom: var(--space-2); }
}

/* Custom-range inputs — stack below 700px instead of forcing a horizontal
   row that overflows. */
@media (max-width: 700px) {
  .custom-range { flex-direction: column; align-items: stretch; gap: 4px; }
  .custom-range input[type="date"] { width: 100%; }
  .last-run-chip { font-size: 10px; padding: 3px 8px; }
}

/* Friction items: metric-grid switches from two-column key/value to
   stacked at mobile widths so labels and values aren't squished. */
@media (max-width: 600px) {
  .metric-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
  .metric-grid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
  }
  .friction-actions { flex-direction: column; align-items: stretch; }
  .friction-actions .btn { width: 100%; text-align: center; }
}

/* Modal padding tightens on small screens — the modal-lg width is
   already responsive (92vw cap), but its internal padding shouldn't
   eat the content area. */
@media (max-width: 600px) {
  .modal { padding: var(--space-3); }
  .modal-body { padding: var(--space-3); }
  .modal-brand-bar { padding: var(--space-2) var(--space-3); }
}

/* Sidebar collapsed-rail polish at <=768px (FLBI's breakpoint).
   FLBI's rule hides .brand-name and .nav-item span — we extend that to
   project-local elements: nav section labels, source tags, and the
   stale-cache pill (which the scope banner attaches to the topbar). */
@media (max-width: 768px) {
  .nav-section-label { display: none; }
  .nav-source-tag { display: none; }
  /* On the icon rail, nav items center the SVG and shed padding. */
  .nav-item svg { margin: 0 auto; }
}

/* ── Sidebar polish (project-local fixes for FLBI gaps) ──
   MIGRATION DEBT: components.css's .nav-item rule doesn't include
   text-decoration: none, so anchors get the browser-default underline.
   Lift this fix upstream when bumping the style guide. */
.nav-item, .nav-item:hover, .nav-item:visited {
  text-decoration: none;
}

/* Project-local override of FLBI's .brand-name (which enforces single-line
   nowrap + ellipsis on components.css). FLBI was designed for short names
   like "ComRadar"; "Workforce Productivity" is 22 chars and won't fit at
   220px sidebar width. Allow wrap to two lines with tightened line-height.
   The .sidebar-brand also unpins from --topbar-h so the second line has
   room. Revisit if FLBI ever ships a long-name variant in components.css. */
.sidebar-brand {
  height: auto;
  min-height: var(--topbar-h);
  align-items: center;
}
.brand-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
  min-width: 0;
}

/* Source-tag chips on FLC Bypass / SLA Compliance items were wrapping
   onto a second line because the FLBI .nav-item is a flex container
   with the text-span as a flex child. Force the inner span to flex
   inline so the badge stays on the right of the label. */
.nav-item > span {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

/* ── Scrollbar styling ──
   Tighter, themed scrollbars across the app — matches the dark UI so
   wide horizontal scrolls in the data tables don't look like default
   chunky white bars. WebKit + Firefox covered. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-2) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--color-surface-offset);
  background-clip: content-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Compact KPI grid — used inside section headers (Agents tab, Tickets
   Overview). Smaller cards, smaller value type. FLBI's .kpi-grid is
   the base; .kpi-grid-compact tightens spacing. */
.kpi-grid-compact .kpi-card {
  padding: var(--space-3) var(--space-4);
}
.kpi-grid-compact .kpi-value {
  font-size: var(--text-lg);
}
/* Migration debt: kpi-value-sm is a project-local sub-variant for the
   "Top by volume" KPIs — fold into FLBI components when adding a real
   small-kpi variant upstream. */
.kpi-value.kpi-value-sm {
  font-size: var(--text-base);
  font-weight: 600;
}

/* Backlog aging emphasis — amber for 8–90d, red for 90d+ rot. Inline spans
   so only the non-zero aged counts get colored, keeping the table scannable
   for where the genuinely-old piles are. */
.backlog-warn { color: var(--color-warning, #d98324); font-weight: 600; }
.backlog-crit { color: var(--color-error, #d64545); font-weight: 700; }

/* Workstream B — ticket detail timeline (Created → First reply → Resolved),
   each leg labeled with elapsed time and reddened on SLA breach. */
.tl-wrap { overflow-x: auto; margin: var(--space-3) 0 var(--space-4); }
.tl { display: flex; align-items: flex-start; min-width: max-content; }
.tl-node { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 84px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.tl-dot-start { background: var(--color-text-muted); box-shadow: 0 0 0 2px var(--color-text-muted); }
.tl-dot-end { background: var(--color-success, #2e9e6b); box-shadow: 0 0 0 2px var(--color-success, #2e9e6b); }
.tl-dot-open { background: var(--color-warning, #d98324); box-shadow: 0 0 0 2px var(--color-warning, #d98324); }
.tl-label { font-size: 12px; font-weight: 600; margin-top: 6px; }
.tl-time { font-size: 11px; color: var(--color-text-muted); }
.tl-seg { flex: 1; min-width: 70px; display: flex; align-items: center; justify-content: center; position: relative; margin-top: 5px; }
.tl-seg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-border); }
.tl-seg.tl-breach::before { background: var(--color-error, #d64545); }
.tl-seg-open::before { background: repeating-linear-gradient(90deg, var(--color-warning, #d98324) 0 6px, transparent 6px 12px); }
.tl-dur { font-size: 11px; color: var(--color-text-muted); background: var(--color-surface); padding: 0 6px; position: relative; z-index: 1; white-space: nowrap; }
.tl-breach .tl-dur { color: var(--color-error, #d64545); font-weight: 600; }

/* Ticket friction excerpt card — the verbatim "this is the problem" quote,
   parity with the call friction cards. */
.ticket-friction-card { border-left: 3px solid var(--color-warning, #d98324); background: rgba(217, 131, 36, 0.08); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.tfc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--color-warning, #d98324); text-transform: uppercase; }
.tfc-quote { font-style: italic; margin-top: 3px; color: var(--color-text); }

/* Workstream B — backlog group drill-down (expand a group to its open tickets). */
.backlog-row { cursor: pointer; }
.backlog-row:hover { background: var(--color-surface-hover, rgba(255,255,255,0.03)); }
.backlog-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.backlog-caret { display: inline-block; width: 1em; color: var(--color-text-muted); font-size: 11px; }
.backlog-detail-row > td { padding: 0; background: var(--color-surface-2, rgba(0,0,0,0.12)); }
.backlog-detail { padding: var(--space-2) var(--space-3) var(--space-3) var(--space-5); }
.backlog-detail-table { width: 100%; font-size: 13px; }
.backlog-detail-table .bd-subj { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sm { padding: 2px 8px; font-size: 12px; line-height: 1.4; }

/* Workstream B (B-thread) — full conversation thread in the ticket modal. */
.ticket-thread { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.tt-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.tt-fallback { color: var(--color-text); }