/* ══════════════════════════════════════════════════════════════════════════
   DETAIL MODAL
══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.40); backdrop-filter: blur(4px);
  z-index: 500; align-items: center; justify-content: center; padding: 24px;
}
.modal-backdrop.open { display: flex; }

.modal-box {
  background: var(--black);
  border: 1px solid var(--black-3);
  border-radius: var(--radius-card);
  width: 80%; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  animation: modal-in .18s ease;
  overflow: hidden;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* modal header */
.modal-hd {
  position: sticky; top: 0; z-index: 10;
  background: var(--black);
  border-bottom: 1px solid var(--black-3);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
}
.modal-hd-identity { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.modal-logo { height: 28px; width: auto; max-width: 80px; object-fit: contain; border-radius: var(--radius-tag); }
.modal-name { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--gray-1); }
.modal-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.modal-close {
  width: 28px; height: 28px; border-radius: var(--radius-button); border: 1px solid var(--black-3);
  background: none; color: var(--gray-3); font-size: 16px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.modal-close:hover { border-color: var(--orange-bdr); color: var(--orange); background: var(--orange-dim); }

/* modal body */
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; flex: 1; }

/* modal bar summary */
.modal-bar-row { display: flex; flex-direction: column; gap: 6px; }

/* section heading */
.section-heading {
  font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 1px;
  text-transform: uppercase; color: var(--gray-4);
}

/* chart header row with tc selector */
.chart-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tc-select {
  font-size: var(--text-xs); color: var(--gray-2);
  border: 1px solid var(--black-3); border-radius: var(--r-sm);
  padding: 4px 10px; background: var(--black); cursor: pointer;
  font-family: inherit; outline: none; max-width: 220px;
}
.tc-select:focus { border-color: var(--orange); }

/* chart */
.chart-container {
  background: var(--black-1); border: 1px solid var(--black-3);
  border-radius: var(--r-lg); padding: 16px 16px 8px;
}
.chart-state { text-align: center; padding: 28px; color: var(--gray-4); font-size: var(--text-sm); }
svg.trend-chart { width: 100%; display: block; overflow: visible; }
.x-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--gray-4); padding: 4px 48px 0; }

/* test case table */
.tc-wrap { border: 1px solid var(--black-3); border-radius: var(--r-lg); overflow: auto; max-height: 360px; }
.tc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tc-table th {
  background: var(--black-2); text-align: left;
  font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: .8px;
  text-transform: uppercase; color: var(--gray-4);
  padding: 8px 14px; border-bottom: 1px solid var(--black-3);
}
.tc-table td { padding: 10px 14px; border-bottom: 1px solid var(--black-3); color: var(--gray-2); vertical-align: middle; }
.tc-table tbody tr:last-child td { border-bottom: none; }
.tc-table tbody tr:hover td { background: var(--black-2); }

.tc-name { font-weight: var(--font-weight-medium); font-size: var(--text-xs); }
.tc-badge {
  display: inline-block; font-size: 10px; font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.tc-badge.PASS          { color: var(--green);  background: var(--green-dim);  border: 1px solid var(--green-bdr); }
.tc-badge.ERROR         { color: var(--red);    background: var(--red-dim);    border: 1px solid var(--red-bdr); }
.tc-badge.NOT_SUPPORTED { color: var(--gray-4); background: var(--black-2);    border: 1px solid var(--black-3); }
.tc-badge.unknown       { color: var(--gray-4); background: var(--black-2);    border: 1px solid var(--black-3); }

.lat-wrap { display: flex; align-items: center; gap: 8px; }
.lat-bar  { width: 72px; height: 4px; background: var(--black-3); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.lat-fill { height: 100%; border-radius: 2px; background: var(--orange); }
.lat-text { font-size: var(--text-xs); color: var(--gray-3); white-space: nowrap; }
.lat-none { color: var(--gray-4); font-size: var(--text-xs); }
.err-note { font-size: 11px; color: var(--gray-4); margin-top: 2px; white-space: normal; word-break: break-word; line-height: 1.4; }