/* ============================================================================
   Optimal(R) Trend - AI Console: Forensic Findings + SLA Evidence
   Consultancy-grade restyle - 2026-06-21 (R5)
   - WCAG AA contrast in BOTH light and dark themes (surfaces + text locked
     together so a theme can never produce dark-on-dark again).
   - Restrained palette: navy ink, single teal accent, semantic badges.
   - Class names unchanged (markup/JS untouched).
============================================================================ */

.ot-forensic-root,
.ot-sla-root {
  /* Light theme tokens (default) */
  --fz-ink:        #0f2742;   /* primary heading ink */
  --fz-text:       #233449;   /* body text */
  --fz-muted:      #5d6f88;   /* meta / labels */
  --fz-surface:    #ffffff;   /* card surface */
  --fz-surface-2:  #f7fafd;   /* alt surface */
  --fz-canvas:     #eef3f9;   /* timeline trough */
  --fz-line:       #e2e9f2;   /* hairline border */
  --fz-line-2:     #cfdbe8;   /* stronger border */
  --fz-navy:       #11335c;   /* solid fills (active chip / primary btn) */
  --fz-accent:     #00a3c7;   /* teal accent */
  --fz-accent-2:   #0883a3;
  --fz-key:        #11335c;   /* key-event accent rail */
  --fz-key-tint:   #f3f8fd;
  --fz-emerald-bg: #e8f8f0; --fz-emerald: #0a7d52;
  --fz-amber-bg:   #fdf2e6; --fz-amber:   #b4630a;
  --fz-slate-bg:   #eaf1fa; --fz-slate:   #2b3f5c;
  --fz-shadow:       0 1px 2px rgba(16,42,74,.06), 0 4px 12px rgba(16,42,74,.05);
  --fz-shadow-hover: 0 2px 6px rgba(16,42,74,.10), 0 12px 26px rgba(16,42,74,.10);
  --fz-radius: 12px;

  color: var(--fz-text);
  color-scheme: light;
  display: grid;
  gap: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Dark theme: relink surfaces AND text together (the anti dark-on-dark) - */
[data-theme="dark"] .ot-forensic-root,
[data-theme="dark"] .ot-sla-root {
  --fz-ink:        #eaf1fa;
  --fz-text:       #d7e2f0;
  --fz-muted:      #9fb2cc;
  --fz-surface:    #13243f;   /* elevated dark card */
  --fz-surface-2:  #182c4b;
  --fz-canvas:     #0e1d35;
  --fz-line:       #2a3f60;
  --fz-line-2:     #35507a;
  --fz-navy:       #1f4f86;
  --fz-accent:     #34c5e6;
  --fz-accent-2:   #57d2ef;
  --fz-key:        #34c5e6;
  --fz-key-tint:   #16294a;
  --fz-emerald-bg: #103a2c; --fz-emerald: #57d39a;
  --fz-amber-bg:   #3d2c14; --fz-amber:   #f0b36b;
  --fz-slate-bg:   #1c3155; --fz-slate:   #cddbf0;
  --fz-shadow:       0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.30);
  --fz-shadow-hover: 0 3px 8px rgba(0,0,0,.40), 0 14px 30px rgba(0,0,0,.40);
  color-scheme: dark;
}

/* ---- Toolbar / filter chips ------------------------------------------------ */
.ot-forensic-toolbar,
.ot-sla-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ot-forensic-chip {
  border: 1px solid var(--fz-line-2);
  background: var(--fz-surface);
  color: var(--fz-ink);
  border-radius: 999px;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ot-forensic-chip:hover {
  border-color: var(--fz-accent);
  color: var(--fz-accent-2);
}

.ot-forensic-chip[aria-pressed="true"] {
  background: var(--fz-navy);
  border-color: var(--fz-navy);
  color: #ffffff;
  box-shadow: var(--fz-shadow);
}

/* ---- Two-column layout ----------------------------------------------------- */
.ot-forensic-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 16px;
  align-items: start;
}

/* ---- Panels + section headers --------------------------------------------- */
.ot-forensic-panel,
.ot-sla-panel {
  border: 1px solid var(--fz-line);
  background: var(--fz-surface);
  border-radius: var(--fz-radius);
  padding: 16px;
  min-width: 0;
  box-shadow: var(--fz-shadow);
}

.ot-forensic-panel h3,
.ot-sla-panel h3 {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fz-line);
  color: var(--fz-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---- Timeline -------------------------------------------------------------- */
.ot-forensic-timeline {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 20px;
}

.ot-forensic-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--fz-canvas);
  border-radius: 2px;
}

/* ---- Event card (the core fix) -------------------------------------------- */
.ot-forensic-root .ot-forensic-event {
  position: relative;
  border: 1px solid var(--fz-line);
  background: var(--fz-surface);
  color: var(--fz-text);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--fz-shadow);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.ot-forensic-root .ot-forensic-event:hover {
  transform: translateY(-1px);
  box-shadow: var(--fz-shadow-hover);
  border-color: var(--fz-line-2);
}

.ot-forensic-root .ot-forensic-event:focus-visible {
  outline: 2px solid var(--fz-accent);
  outline-offset: 2px;
}

.ot-forensic-event::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fz-accent);
  border: 2px solid var(--fz-surface);
  box-shadow: 0 0 0 1px var(--fz-accent);
}

/* Key (girth) event - navy accent rail + subtle tint, text stays legible */
.ot-forensic-root .ot-forensic-event.is-girth {
  border-color: var(--fz-line-2);
  border-left: 3px solid var(--fz-key);
  background: var(--fz-key-tint);
}
.ot-forensic-event.is-girth::before {
  background: var(--fz-key);
  box-shadow: 0 0 0 1px var(--fz-key);
}

/* Selected (defensive - applies if JS marks selection) */
.ot-forensic-root .ot-forensic-event.is-selected,
.ot-forensic-root .ot-forensic-event[aria-current="true"] {
  border-color: var(--fz-navy);
  box-shadow: 0 0 0 1px var(--fz-navy), var(--fz-shadow);
}

/* Locked text colours - cannot desync from the surface */
.ot-forensic-root .ot-forensic-event__meta,
.ot-sla-muted {
  color: var(--fz-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
}

.ot-forensic-root .ot-forensic-event__title {
  color: var(--fz-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
}

/* ---- Badges ---------------------------------------------------------------- */
.ot-forensic-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.ot-forensic-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--fz-slate-bg);
  color: var(--fz-slate);
}

.ot-forensic-badge--high,
.ot-forensic-badge--direct,
.ot-sla-status--computed {
  background: var(--fz-emerald-bg);
  color: var(--fz-emerald);
}

.ot-forensic-badge--needs,
.ot-forensic-badge--low {
  background: var(--fz-amber-bg);
  color: var(--fz-amber);
}

/* ---- Detail drawer --------------------------------------------------------- */
.ot-forensic-drawer {
  display: grid;
  gap: 12px;
}

.ot-forensic-drawer dl,
.ot-sla-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}

.ot-forensic-drawer dt,
.ot-sla-kpi span {
  color: var(--fz-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ot-forensic-drawer dd,
.ot-sla-kpi strong {
  margin: 3px 0 0;
  color: var(--fz-ink);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---- Action buttons -------------------------------------------------------- */
.ot-forensic-actions,
.ot-sla-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ot-forensic-actions a,
.ot-forensic-actions button,
.ot-sla-actions a,
.ot-sla-actions button,
.ot-sla-file {
  border: 1px solid var(--fz-line-2);
  background: var(--fz-surface);
  color: var(--fz-ink);
  border-radius: 8px;
  min-height: 34px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ot-forensic-actions a:hover,
.ot-forensic-actions button:hover,
.ot-sla-actions a:hover,
.ot-sla-actions button:hover {
  border-color: var(--fz-accent);
  color: var(--fz-accent-2);
  box-shadow: var(--fz-shadow);
}

.ot-forensic-actions .is-primary,
.ot-sla-actions .is-primary {
  background: var(--fz-navy);
  border-color: var(--fz-navy);
  color: #ffffff;
}

.ot-forensic-actions .is-primary:hover,
.ot-sla-actions .is-primary:hover {
  filter: brightness(1.08);
  color: #ffffff;
}

/* ---- Phase bands ----------------------------------------------------------- */
.ot-forensic-phase {
  border-left: 3px solid var(--fz-accent);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  background: var(--fz-surface-2);
  color: var(--fz-text);
  font-size: 12px;
  line-height: 1.45;
}

/* ---- SLA evidence ---------------------------------------------------------- */
.ot-sla-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

.ot-sla-kpi {
  border: 1px solid var(--fz-line);
  background: var(--fz-surface);
  border-radius: 10px;
  padding: 14px;
  box-shadow: var(--fz-shadow);
}

.ot-sla-kpi strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--fz-ink);
}

.ot-sla-table-wrap {
  overflow-x: auto;
}

.ot-sla-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--fz-text);
}

.ot-sla-table th,
.ot-sla-table td {
  border-bottom: 1px solid var(--fz-line);
  padding: 9px 8px;
  text-align: left;
  vertical-align: top;
}

.ot-sla-table thead th {
  position: sticky;
  top: 0;
  background: var(--fz-surface-2);
  color: var(--fz-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ot-sla-table tbody tr:hover {
  background: var(--fz-surface-2);
}

.ot-sla-file {
  display: inline-grid;
  gap: 6px;
}

.ot-sla-file input {
  max-width: 260px;
  font-size: 12px;
  color: var(--fz-text);
}

.ot-sla-status {
  white-space: pre-wrap;
  color: var(--fz-text);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Motion preference ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ot-forensic-chip,
  .ot-forensic-root .ot-forensic-event,
  .ot-forensic-actions a,
  .ot-forensic-actions button {
    transition: none;
  }
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1060px) {
  .ot-forensic-layout,
  .ot-sla-grid {
    grid-template-columns: 1fr;
  }
}