/* ═══ HTML Deep WBS Tab — Additional Styles ═══
   Adds styles on top of the existing m2-* mapping tree classes.
   Targets elements specific to the Deep WBS view.
*/

/* ── AI Activity group (description level) ── */
.m2-deep-act-group > summary.m2-deep-act-sum {
  background: rgba(59, 130, 246, .06);
  border-left: 3px solid rgba(96, 165, 250, .45);
}

.m2-deep-act-group > summary.m2-deep-act-sum:hover {
  background: rgba(59, 130, 246, .11);
}

.m2-deep-act-name {
  font-weight: 800 !important;
  color: #93c5fd !important;
  font-size: 13px !important;
}

/* ── Metrics pills on AI activity row ── */
.m2-deep-metrics {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-right: 6px;
}

.m2-deep-meta-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.m2-deep-meta-pill.dur {
  background: rgba(59, 130, 246, .14);
  border-color: rgba(96, 165, 250, .28);
  color: #93c5fd;
}
.m2-deep-meta-pill.crew {
  background: rgba(16, 185, 129, .11);
  border-color: rgba(52, 211, 153, .22);
  color: #6ee7b7;
}
.m2-deep-meta-pill.wpc {
  background: rgba(6, 182, 212, .1);
  border-color: rgba(103, 232, 249, .2);
  color: #67e8f9;
}
.m2-deep-meta-pill.wrk {
  background: rgba(245, 158, 11, .1);
  border-color: rgba(251, 191, 36, .2);
  color: #fcd34d;
}
.m2-deep-meta-pill.cd {
  background: rgba(139, 92, 246, .11);
  border-color: rgba(167, 139, 250, .22);
  color: #c4b5fd;
}
.m2-deep-meta-pill.md {
  background: rgba(236, 72, 153, .09);
  border-color: rgba(244, 114, 182, .2);
  color: #f9a8d4;
}
.m2-deep-meta-pill.qty {
  background: rgba(6, 182, 212, .09);
  border-color: rgba(103, 232, 249, .18);
  color: #67e8f9;
}

/* ── Activity body ── */
.m2-deep-act-body {
  padding: 8px 10px 10px;
}

/* Duration/teams method info */
.m2-deep-act-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.m2-deep-method {
  font-size: 10px;
  color: #4a6080;
  font-style: italic;
}

/* ── Warnings strip ── */
.m2-deep-warn-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.m2-deep-warn-item {
  font-size: 10px;
  color: #fcd34d;
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(251, 191, 36, .2);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ── Toggle children button ── */
.m2-deep-toggle-children {
  margin-bottom: 6px;
  font-size: 11px !important;
  padding: 3px 10px !important;
}

/* ── Child table wrapper ── */
.m2-deep-child-tbl-wrap {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, .12);
}

/* ── RID column ── */
.m2-deep-rid {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px !important;
  color: #4a6080 !important;
  white-space: nowrap;
}

/* ── Mapping child row ── */
.m2-deep-child-row td {
  border-bottom: 1px solid rgba(148, 163, 184, .06);
}

.m2-deep-child-row:hover td {
  background: rgba(59, 130, 246, .04);
}

/* Activity name inside child row */
.m2-deep-child-act {
  font-weight: 600;
  color: #b0c8e8;
  display: block;
  font-size: 11.5px;
}

.m2-deep-child-boq {
  font-size: 10px;
  color: #4a6080;
  display: block;
}

/* ── Link badge ── */
.m2-deep-lnk {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.m2-deep-lnk.ok {
  color: #4ade80;
  background: rgba(74, 222, 128, .1);
}

.m2-deep-lnk.warn {
  color: #fbbf24;
  background: rgba(251, 191, 36, .1);
}

/* ── Stats bar ── */
.m2-deep-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(5, 12, 28, .7);
  border: 1px solid rgba(59, 130, 246, .1);
  border-radius: 8px;
}

.m2-deep-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 60px;
}

.m2-deep-stat .dsv {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #60a5fa;
  line-height: 1.2;
}

.m2-deep-stat .dsv.ok { color: #4ade80; }
.m2-deep-stat .dsv.warn { color: #fbbf24; }
.m2-deep-stat .dsv.err { color: #f87171; }

.m2-deep-stat .dsl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #4a6080;
}

/* ── Fallback banner ── */
.m2-deep-fallback-banner {
  margin-bottom: 10px;
  padding: 8px 14px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(251, 191, 36, .2);
  border-radius: 7px;
  color: #fcd34d;
  font-size: 11.5px;
  font-weight: 600;
}