/**
 * tr_card_detail.css — Shared Inline Detail Panel styles
 *
 * Matches the visual design language already established in pr302_command_center.css.
 * Used by TRCardDetail.renderDetailPanel() across all actionable surfaces.
 *
 * Classes:
 *   .tr-detail-toggle     — "View Details" / "Hide Details" button
 *   .tr-detail-panel      — collapsible detail container
 *   .tr-detail-table      — label/value grid inside the panel
 *   .tr-detail-label      — left column (field name)
 *   .tr-detail-value      — right column (field content)
 *   .tr-detail-value--hl  — highlighted value (orange, for key facts like amount/status)
 *   .tr-detail-open-link  — secondary "Open full record" escape hatch link
 */

/* ── Toggle button ─────────────────────────────────────────────────────────── */
.tr-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--bd-lt, #e5e7eb);
  border-radius: 20px;
  font: 600 11px 'Barlow', system-ui, sans-serif;
  color: var(--navy, #1A1A2E);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tr-detail-toggle:hover {
  background: var(--bg-lt, #f3f4f6);
  border-color: var(--bd-md, #d1d5db);
}

.tr-detail-toggle[aria-expanded="true"] {
  background: var(--bg-lt, #f3f4f6);
  border-color: var(--bd-md, #d1d5db);
  color: var(--orange, #FF6B00);
}

/* ── Collapsible detail panel ──────────────────────────────────────────────── */
.tr-detail-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-lt, #f9fafb);
  border: 1px solid var(--bd-lt, #e5e7eb);
  border-radius: 10px;
  animation: tr-detail-in 0.15s ease;
}

@keyframes tr-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Detail table ──────────────────────────────────────────────────────────── */
.tr-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.tr-detail-table tr + tr td {
  border-top: 1px solid var(--bd-lt, #e5e7eb);
}

.tr-detail-label {
  padding: 5px 10px 5px 0;
  width: 38%;
  font-weight: 600;
  color: var(--tx-md, #6b7280);
  vertical-align: top;
  white-space: nowrap;
}

.tr-detail-value {
  padding: 5px 0;
  font-weight: 500;
  color: var(--navy, #1A1A2E);
  vertical-align: top;
  word-break: break-word;
}

.tr-detail-value--hl {
  color: var(--orange, #FF6B00);
  font-weight: 700;
}

/* ── Open full record link (secondary escape hatch) ────────────────────────── */
.tr-detail-open-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font: 600 11px 'Barlow', system-ui, sans-serif;
  color: var(--navy, #1A1A2E);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.12s;
}

.tr-detail-open-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.tr-detail-open-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── AP Hub list row integration ────────────────────────────────────────────── */
/* When tr-detail-toggle is placed inside an ap-row-wrapper, ensure it
   does not submit the parent form and stays visually tight */
.ap-row-wrapper .tr-detail-toggle {
  margin-top: 6px;
}

/* ── PR240 notification item integration ────────────────────────────────────── */
.pr240-panel-item .tr-detail-panel {
  margin: 8px 12px 4px;
}

.pr240-panel-item .tr-detail-toggle {
  margin: 2px 12px 4px;
}

/* ── Materials Invoice Intake integration ───────────────────────────────────── */
.mhub-panel .tr-detail-toggle {
  margin-top: 6px;
}

/* ── PR146 / PR152 approval queue integration ───────────────────────────────── */
[data-pr146-apq-row] .tr-detail-toggle,
[data-pr152-5-row] .tr-detail-toggle {
  margin-top: 6px;
}

/* ── Responsive: compact on narrow containers ───────────────────────────────── */
@media (max-width: 480px) {
  .tr-detail-label {
    width: 44%;
    font-size: 11px;
  }
  .tr-detail-value {
    font-size: 11px;
  }
}