/* ============================================================
   VIDARIA 1.1 REPORT CARD CHROME
   ------------------------------------------------------------
   Phase 3: outer chrome restyle for the existing ReportCard
   component. Applied IN PLACE (not a new component) — per
   locked rule §3.9 ReportCard is restyled, not replaced.

   The existing per-type body content rendering and the existing
   QuestPDF download path are UNCHANGED. Only the wrapper, header,
   KPI tile strip, and action bar take on the new visual language.

   Naming: .vds-rc-* — never collides with the legacy
   .report-modal* / .report-actions* selectors.
   ============================================================ */

/* Backdrop: blurred dark overlay matching the locked modal pattern §C.2 */
.vds-rc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 400;          /* var(--z-modal-backdrop) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Extra top offset so the navy modal header clears the navbar (which is the
     same vidaria-blue) — otherwise the header blends into the nav. */
  padding: 80px var(--space-4) var(--space-6);
  overflow-y: auto;
  font-family: var(--font-family);
}

.vds-rc {
  width: 100%;
  max-width: 1100px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  z-index: 410;          /* var(--z-modal) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Cap at viewport — body scrolls internally so header + footer stay fixed.
     Must subtract the overlay's vertical padding (80px top + space-6 bottom)
     or the footer falls below the fold. */
  max-height: calc(100vh - 80px - var(--space-6));
}

/* ── Header strip (navy) ── */
.vds-rc-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--vidaria-blue);
  color: var(--white);
  flex-shrink: 0;
}
.vds-rc-header-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vds-rc-header-title {
  flex: 1;
  min-width: 0;
}
.vds-rc-header-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  margin-bottom: 4px;
}
.vds-rc-header-id {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
.vds-rc-header-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.vds-rc-header-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ── KPI tile strip (between header and body) ── */
.vds-rc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-150);
  border-bottom: 1px solid var(--gray-150);
  flex-shrink: 0;
}
.vds-rc-kpi-strip--cols-3 { grid-template-columns: repeat(3, 1fr); }
.vds-rc-kpi-strip--cols-2 { grid-template-columns: repeat(2, 1fr); }
.vds-rc-kpi {
  background: var(--white);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.vds-rc-kpi-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
}
.vds-rc-kpi-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  line-height: 1.1;
}
.vds-rc-kpi-value--success { color: var(--success-text); }
.vds-rc-kpi-value--warning { color: var(--warning-text); }
.vds-rc-kpi-value--danger  { color: var(--danger); }
.vds-rc-kpi-value--blue    { color: var(--vidaria-blue); }

/* ── Completion bar (Tour-only) ── */
.vds-rc-completion {
  padding: var(--space-3) var(--space-5);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-150);
  flex-shrink: 0;
}
.vds-rc-completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: 6px;
  color: var(--gray-700);
}
.vds-rc-completion-bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.vds-rc-completion-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* ── Body (existing per-type rendering reused — no changes there) ── */
.vds-rc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
}
/* Legacy update feed (renderReportUpdates) restyled to read as a
   section inside the new body. Markup is reused verbatim. */
.vds-rc-body .report-updates { margin-top: var(--space-2); }
.vds-rc-body .report-updates h4 {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  margin: 0 0 var(--space-3);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vidaria-blue);
}
.vds-rc-body .report-updates .updates-div {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.vds-rc-body .report-updates .update-bubble {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-100);
}
.vds-rc-body .report-updates .update-bubble:last-child { border-bottom: none; }
.vds-rc-body .report-updates .update-bubble p { margin: 0 0 4px; font-size: var(--font-size-sm); color: var(--gray-800); }
.vds-rc-body .report-updates .update-bubble small { color: var(--gray-400); font-size: 11px; }

.vds-rc-body .report-modal-content,
.vds-rc-body .report-updates-sticky {
  /* Neutralize the legacy outer wrapper styles since the existing
     renderReportDetails() and renderReportUpdates() output assumed
     specific parents. Keep the inner content rendering intact. */
  padding: 0;
  margin: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  max-height: none;
  overflow: visible;
}

/* ── Footer action bar ── */
.vds-rc-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
  position: relative;
}
.vds-rc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--gray-700);
  white-space: nowrap;
}
.vds-rc-btn--ghost { color: var(--gray-700); border-color: var(--gray-300); }
.vds-rc-btn--ghost:hover { background: var(--gray-100); color: var(--gray-900); }
.vds-rc-btn--secondary { color: var(--vidaria-blue); border-color: var(--gray-300); }
.vds-rc-btn--secondary:hover { background: var(--vidaria-blue-tint); border-color: var(--vidaria-blue); }
.vds-rc-btn--primary {
  background: var(--vidaria-blue);
  color: var(--white);
  border-color: var(--vidaria-blue);
}
.vds-rc-btn--primary:hover { background: var(--vidaria-blue-hover); border-color: var(--vidaria-blue-hover); }
.vds-rc-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Email picker popover (positioned above the Email button) */
.vds-rc-email-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  right: var(--space-5);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 320px;
}
.vds-rc-email-pop input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  font-family: var(--font-family);
}
.vds-rc-email-pop input:focus { border-color: var(--vidaria-blue); }

/* Status badge (Unreviewed / Reviewed / Pending) inside the header */
.vds-rc-header-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  flex-shrink: 0;
}
.vds-rc-header-badge--review { background: var(--danger); }
.vds-rc-header-badge--pending { background: var(--warning); color: var(--warning-text); }
.vds-rc-header-badge--reviewed { background: var(--success); }

/* ============================================================
   PHASE 3 POLISH — REPORT BODY LANGUAGE
   ------------------------------------------------------------
   Shared body primitives (see Reports/vidaria/ReportPrimitives.js)
   that reproduce the mockup's report-modal body: meta-pair cards,
   in-body KPI tiles, completion bar, section titles, clean data
   tables, status badges, flat-SVG boolean flags.

   Values copied from Vidaria-mockup/demo/css/pages/reports.css
   and re-homed onto production tokens (mockup navy #103255 →
   var(--vidaria-blue)). All scoped under .vds-rc-body so legacy
   ?ui=legacy chrome is untouched.
   ============================================================ */

/* The body becomes a soft-gray canvas; cards float on white. */
.vds-rc-body {
  background: var(--gray-50);
}

/* ── Meta-pair cards (Tour Info / Time Details) ── */
.vds-rc-meta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
  .vds-rc-meta-pair { grid-template-columns: 1fr; }
}
.vds-rc-meta-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.vds-rc-meta-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.vds-rc-meta-card-title svg { color: var(--gray-400); }
.vds-rc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 5px 0;
  border-bottom: 1px solid var(--gray-100);
}
.vds-rc-meta-row:last-child { border-bottom: none; }
.vds-rc-meta-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.vds-rc-meta-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  text-align: right;
}
.vds-rc-meta-value .officer-link,
.vds-rc-meta-value a {
  color: var(--vidaria-blue);
  cursor: pointer;
  text-decoration: none;
}
.vds-rc-meta-value .officer-link:hover,
.vds-rc-meta-value a:hover { text-decoration: underline; }

/* ── In-body KPI tile grid (matches the screenshot) ── */
.vds-rc-kpi-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.vds-rc-kpi-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.vds-rc-kpi-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.vds-rc-kpi-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.vds-rc-kpi-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.vds-rc-kpi-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 720px) {
  .vds-rc-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.vds-rc-kpi-tile {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.vds-rc-kpi-tile-label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.vds-rc-kpi-tile-value {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  line-height: 1;
}
.vds-rc-kpi-tile-value--success { color: var(--success-text); }
.vds-rc-kpi-tile-value--warning { color: var(--warning-text); }
.vds-rc-kpi-tile-value--danger  { color: var(--danger); }
.vds-rc-kpi-tile-value--blue    { color: var(--vidaria-blue); }

/* ── Completion bar (in-body) ── */
.vds-rc-completion-wrap { margin-bottom: var(--space-4); }
.vds-rc-completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--gray-700);
}
.vds-rc-completion-track {
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.vds-rc-completion-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* ── Section title + body ── */
.vds-rc-section { margin-bottom: var(--space-4); }
.vds-rc-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  margin-bottom: var(--space-2);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vidaria-blue);
}
.vds-rc-section-count {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-400);
}
.vds-rc-section-action { margin-left: auto; }
.vds-rc-section-body {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Tables sit flush inside the section body */
.vds-rc-section-body .vds-rc-table-wrap {
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4));
}

/* ── Clean data table ── */
.vds-rc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-xl);
}
.vds-rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.vds-rc-table thead th {
  text-align: left;
  padding: 8px 14px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.vds-rc-table tbody td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}
.vds-rc-table tbody tr:last-child td { border-bottom: none; }
.vds-rc-table tbody tr:hover td { background: var(--gray-50); }
.vds-rc-table-empty {
  text-align: center;
  color: var(--gray-400);
  padding: var(--space-6) !important;
  font-size: var(--font-size-sm);
}

/* ── Pill badges ── */
.vds-rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.vds-rc-badge--gray    { background: var(--gray-100);    color: var(--gray-600); }
.vds-rc-badge--blue    { background: var(--vidaria-blue-tint); color: var(--vidaria-blue); }
.vds-rc-badge--success { background: var(--success-light); color: var(--success-text); }
.vds-rc-badge--warning { background: var(--warning-light); color: var(--warning-text); }
.vds-rc-badge--danger  { background: var(--danger-light);  color: var(--danger-text); }

/* ── Flat-SVG boolean flags (replace emoji glyphs) ── */
.vds-rc-flag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.vds-rc-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.vds-rc-flag-label { color: var(--gray-700); }
.vds-rc-flag--off       { background: var(--gray-50); }
.vds-rc-flag--off svg   { color: var(--gray-300); }
.vds-rc-flag--off .vds-rc-flag-label { color: var(--gray-400); }
.vds-rc-flag--success   { background: var(--success-light); border-color: transparent; }
.vds-rc-flag--success svg { color: var(--success-text); }
.vds-rc-flag--success .vds-rc-flag-label { color: var(--success-text); }
.vds-rc-flag--warning   { background: var(--warning-light); border-color: transparent; }
.vds-rc-flag--warning svg { color: var(--warning-text); }
.vds-rc-flag--warning .vds-rc-flag-label { color: var(--warning-text); }
.vds-rc-flag--danger    { background: var(--danger-light); border-color: transparent; }
.vds-rc-flag--danger svg { color: var(--danger-text); }
.vds-rc-flag--danger .vds-rc-flag-label { color: var(--danger-text); }

/* ── Plain text block ── */
.vds-rc-text {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--gray-700);
  white-space: pre-wrap;
  margin: 0;
}
.vds-rc-text--empty { color: var(--gray-400); font-style: italic; }

/* ── Card-owned bodies: neutralize the legacy per-type card
   wrappers (.tour-card / .shift-card / .incident-card / etc.)
   so they don't double-pad inside .vds-rc-section-body. The
   vidaria early-return in each card renders bare primitives,
   so this mainly guards any legacy wrapper that slips through. */
.vds-rc-body > .vds-rc-typebody { display: block; }
.vds-rc-typebody strong { font-weight: var(--font-weight-bold); color: var(--gray-800); }

/* ── Lists ── */
.vds-rc-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.7;
}

/* ── Photo strip (incident) ── */
.vds-rc-photo-strip {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.vds-rc-photo-strip img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.vds-rc-photo-strip img:hover { transform: scale(1.03); }

/* ── Photo grid (photo / site reports) ── */
.vds-rc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}
.vds-rc-photo-cell {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}
.vds-rc-photo-cell:hover { box-shadow: var(--shadow-md); }
.vds-rc-photo-cell img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.vds-rc-photo-cap {
  margin: 0;
  padding: 8px 10px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
}
.vds-rc-photo-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 10px;
  font-size: 11px;
  color: var(--gray-400);
}

/* ── Signature ── */
.vds-rc-signature {
  max-width: 320px;
  max-height: 140px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: var(--space-2);
}

/* ── Tabs (site report) ── */
.vds-rc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}
.vds-rc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.vds-rc-tab:hover { color: var(--gray-800); }
.vds-rc-tab.is-active {
  color: var(--vidaria-blue);
  border-bottom-color: var(--vidaria-blue);
}
.vds-rc-tab-count {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}
.vds-rc-tab.is-active .vds-rc-tab-count {
  background: var(--vidaria-blue-tint);
  color: var(--vidaria-blue);
}

/* ── Note cards (site notes) ── */
.vds-rc-note-list { display: flex; flex-direction: column; gap: var(--space-3); }
.vds-rc-note {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
}
.vds-rc-note-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.vds-rc-note-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-400);
}

/* ── Shift timeline: color-coded event rows + flat-SVG action icons ── */
.vds-rc-ev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-800);
}
.vds-rc-ev svg { flex-shrink: 0; }
.vds-rc-ev-label { white-space: nowrap; }

/* left accent strip on the event (first) cell */
.vds-rc-table tbody tr.vds-rc-evrow td:first-child {
  border-left: 3px solid transparent;
}

/* per-tone tint + accent + icon color. rgba tints mirror the legacy
   entry-type palette so the taxonomy reads consistently. */
.vds-rc-table tbody tr.vds-rc-evrow--danger td { background: rgba(239, 68, 68, 0.06); }
.vds-rc-table tbody tr.vds-rc-evrow--danger:hover td { background: rgba(239, 68, 68, 0.11); }
.vds-rc-table tbody tr.vds-rc-evrow--danger td:first-child { border-left-color: var(--danger); }
.vds-rc-evrow--danger .vds-rc-ev svg { color: var(--danger); }

.vds-rc-table tbody tr.vds-rc-evrow--warning td { background: rgba(245, 158, 11, 0.07); }
.vds-rc-table tbody tr.vds-rc-evrow--warning:hover td { background: rgba(245, 158, 11, 0.13); }
.vds-rc-table tbody tr.vds-rc-evrow--warning td:first-child { border-left-color: var(--warning); }
.vds-rc-evrow--warning .vds-rc-ev svg { color: var(--warning-text); }

.vds-rc-table tbody tr.vds-rc-evrow--success td { background: rgba(16, 185, 129, 0.06); }
.vds-rc-table tbody tr.vds-rc-evrow--success:hover td { background: rgba(16, 185, 129, 0.12); }
.vds-rc-table tbody tr.vds-rc-evrow--success td:first-child { border-left-color: var(--success); }
.vds-rc-evrow--success .vds-rc-ev svg { color: var(--success-text); }

.vds-rc-table tbody tr.vds-rc-evrow--blue td { background: rgba(59, 130, 246, 0.06); }
.vds-rc-table tbody tr.vds-rc-evrow--blue:hover td { background: rgba(59, 130, 246, 0.12); }
.vds-rc-table tbody tr.vds-rc-evrow--blue td:first-child { border-left-color: var(--vidaria-blue); }
.vds-rc-evrow--blue .vds-rc-ev svg { color: var(--vidaria-blue); }

.vds-rc-table tbody tr.vds-rc-evrow--purple td { background: rgba(139, 92, 246, 0.06); }
.vds-rc-table tbody tr.vds-rc-evrow--purple:hover td { background: rgba(139, 92, 246, 0.12); }
.vds-rc-table tbody tr.vds-rc-evrow--purple td:first-child { border-left-color: #8b5cf6; }
.vds-rc-evrow--purple .vds-rc-ev svg { color: #7c3aed; }

.vds-rc-table tbody tr.vds-rc-evrow--slate td { background: rgba(100, 116, 139, 0.05); }
.vds-rc-table tbody tr.vds-rc-evrow--slate:hover td { background: rgba(100, 116, 139, 0.1); }
.vds-rc-table tbody tr.vds-rc-evrow--slate td:first-child { border-left-color: var(--gray-400); }
.vds-rc-evrow--slate .vds-rc-ev svg { color: var(--gray-400); }

/* ── Compact detail buttons (View Location / View Photo) inside the
   new chrome — overrides the heavy legacy glassmorphic pills. ── */
.vds-rc-body .btn-view-location,
.vds-rc-body .btn-view-photo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  border: 1px solid var(--vidaria-blue-light);
  background: var(--vidaria-blue-tint);
  color: var(--vidaria-blue);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vds-rc-body .btn-view-location:hover,
.vds-rc-body .btn-view-photo:hover {
  background: var(--vidaria-blue);
  color: var(--white);
  border-color: var(--vidaria-blue);
}
.vds-rc-body .btn-view-location svg,
.vds-rc-body .btn-view-photo svg { width: 13px; height: 13px; }
.vds-rc-evrow .entry-message-text {
  color: var(--gray-400);
  font-size: 12px;
  margin-right: 2px;
}

/* ── Embedded report map (trail / incident pin) ── */
.vds-rc-map {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
}
/* The map lives inside a section body which already pads + clips; pull it
   flush to the section edges like tables do. */
.vds-rc-section-body > .vds-rc-map {
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4));
  width: auto;
  border: none;
  border-radius: 0;
}
.vds-rc-map-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gray-50);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-md);
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

/* ── Multi-column section grouping (reduces whitespace) ── */
.vds-rc-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: start;
}
.vds-rc-grid--2 { grid-template-columns: 1fr 1fr; }
.vds-rc-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
/* Collapse to a single column when only one child actually rendered
   (conditional sections that evaluated to false leave no DOM node). */
.vds-rc-grid--2:has(> :only-child),
.vds-rc-grid--3:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .vds-rc-grid--2, .vds-rc-grid--3 { grid-template-columns: 1fr; }
}
/* Sections/cards inside a grid lose their own bottom margin — the grid gap
   owns the spacing now. */
.vds-rc-grid > .vds-rc-section,
.vds-rc-grid > .vds-rc-meta-card { margin-bottom: 0; }

/* ── Split layout: stacked main column + fill-height map side ── */
.vds-rc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
  .vds-rc-split { grid-template-columns: 1fr; }
}
.vds-rc-split-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.vds-rc-split-main > .vds-rc-section,
.vds-rc-split-main > .vds-rc-meta-card,
.vds-rc-split-main > .vds-rc-kpi-grid,
.vds-rc-split-main > .vds-rc-meta-pair { margin-bottom: 0; }
.vds-rc-split-side {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  min-width: 0;
}
.vds-rc-split-side > .vds-rc-section {
  margin-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vds-rc-split-side > .vds-rc-section .vds-rc-section-body {
  flex: 1;
  padding: 0;
}
.vds-rc-split-side .vds-rc-map {
  height: 100% !important;
  border: none;
  border-radius: 0;
}
.vds-rc-split-side .vds-rc-map-msg { height: 100% !important; }

/* ── Sticky-header scrollable tables (long row lists) ── */
.vds-rc-table-wrap--scroll {
  max-height: 320px;
  overflow-y: auto;
}
.vds-rc-table-wrap--scroll .vds-rc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* gray-50 is opaque enough; add a hairline so rows don't bleed under it */
  box-shadow: inset 0 -1px 0 var(--gray-200);
}