.mdm-shell {
  --mdm-bg: #091120;
  --mdm-surface: #101b2f;
  --mdm-surface-soft: #152238;
  --mdm-surface-strong: #1d2c46;
  --mdm-border: rgba(62, 103, 155, 0.28);
  --mdm-border-strong: rgba(88, 149, 224, 0.42);
  --mdm-text: #edf3ff;
  --mdm-text-soft: #93a8c8;
  --mdm-text-muted: #6f84a5;
  --mdm-cyan: #46c8ff;
  --mdm-blue: #4ca8ff;
  --mdm-magenta: #ef4394;
  --mdm-green: #27d89f;
  --mdm-gold: #f0b53c;
  --mdm-danger: #ff5d77;
  width: min(1680px, 100%);
  margin: 0;
  padding: 14px 18px 32px;
  color: var(--mdm-text);
}

.mdm-shell [hidden] {
  display: none !important;
}

.mdm-header,
.mdm-kpi-card,
.mdm-card,
.mdm-filter-bar,
.mdm-batch-bar,
.mdm-table-shell,
.mdm-modal .modal-content {
  border: 1px solid var(--mdm-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.98), rgba(11, 19, 32, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mdm-header,
.mdm-filter-bar,
.mdm-batch-bar,
.mdm-card {
  padding: 16px 18px;
}

.mdm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.mdm-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdm-blue);
}

.mdm-header h1,
.mdm-card h2,
.mdm-modal h2,
.mdm-modal h3 {
  margin: 0;
  color: #f5f9ff;
}

.mdm-header h1 {
  font-size: 32px;
}

.mdm-copy,
.mdm-card p,
.mdm-empty,
.mdm-subtext {
  color: var(--mdm-text-soft);
}

.mdm-actions,
.mdm-header-actions,
.mdm-modal-actions,
.mdm-filter-actions,
.mdm-batch-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mdm-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.mdm-kpi-card {
  padding: 16px;
}

.mdm-kpi-label {
  display: block;
  color: var(--mdm-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mdm-kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  color: #f6fbff;
}

.mdm-kpi-meta,
.mdm-meta {
  display: block;
  margin-top: 6px;
  color: var(--mdm-text-soft);
  font-size: 12px;
}

.mdm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.mdm-col-4 { grid-column: span 4; }
.mdm-col-5 { grid-column: span 5; }
.mdm-col-6 { grid-column: span 6; }
.mdm-col-7 { grid-column: span 7; }
.mdm-col-8 { grid-column: span 8; }
.mdm-col-12 { grid-column: span 12; }

.mdm-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.mdm-card-head h2 {
  font-size: 20px;
}

.mdm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(78, 119, 178, 0.28);
  background: rgba(16, 26, 43, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mdm-pill.pending { color: #ffd57c; border-color: rgba(240, 181, 60, 0.28); }
.mdm-pill.approved { color: #7af0be; border-color: rgba(39, 216, 159, 0.3); }
.mdm-pill.excluded { color: #ff9ba8; border-color: rgba(255, 93, 119, 0.3); }
.mdm-pill.queued { color: #80d9ff; border-color: rgba(70, 200, 255, 0.3); }

.mdm-filter-bar {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) repeat(2, minmax(200px, 0.6fr)) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.mdm-filter-bar label,
.mdm-batch-actions label,
.mdm-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mdm-filter-bar label span,
.mdm-batch-actions label span,
.mdm-form-grid label span,
.mdm-stat-label {
  color: var(--mdm-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mdm-search input,
.mdm-filter-bar select,
.mdm-batch-actions select,
.mdm-form-grid input,
.mdm-form-grid select,
.mdm-form-grid textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(67, 104, 156, 0.38);
  background: rgba(8, 16, 29, 0.9);
  color: var(--mdm-text);
}

.mdm-form-grid textarea {
  min-height: 110px;
  resize: vertical;
}

.mdm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mdm-form-grid .mdm-grid-wide {
  grid-column: 1 / -1;
}

.mdm-batch-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.mdm-table-shell {
  overflow: hidden;
}

.mdm-table-shell .table-container {
  margin: 0;
}

.mdm-table-shell table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mdm-table-shell th,
.mdm-table-shell td {
  padding: 14px;
  border-bottom: 1px solid rgba(55, 86, 126, 0.22);
  text-align: left;
  vertical-align: top;
}

.mdm-table-shell th {
  color: #c5d4ec;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mdm-table-shell td {
  color: var(--mdm-text);
  font-size: 12px;
}

.mdm-table-shell tbody tr:hover {
  background: rgba(35, 52, 79, 0.35);
}

.mdm-primary {
  display: block;
  font-weight: 700;
  color: #f4f8ff;
  font-size: 13px;
}

.mdm-secondary {
  display: block;
  margin-top: 4px;
  color: var(--mdm-text-soft);
  font-size: 12px;
}

.mdm-empty {
  padding: 24px 12px;
  text-align: center;
}

.mdm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mdm-list-item {
  border: 1px solid rgba(72, 111, 167, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(10, 18, 30, 0.78);
}

.mdm-list-item strong {
  display: block;
  color: #f4f8ff;
}

.mdm-quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mdm-quick-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(72, 111, 167, 0.28);
  background: rgba(10, 18, 30, 0.78);
  color: #f1f6ff;
  text-decoration: none;
}

.mdm-quick-link span {
  display: block;
  margin-top: 6px;
  color: var(--mdm-text-soft);
  font-size: 12px;
}

.mdm-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mdm-stat {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(72, 111, 167, 0.28);
  background: rgba(10, 18, 30, 0.78);
}

.mdm-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  color: #f6fbff;
}

.mdm-upload-shell {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(320px, 1.05fr);
  gap: 12px;
}

.mdm-preview-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(72, 111, 167, 0.18);
}

.mdm-mapping-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mdm-preview-table {
  overflow: auto;
  max-height: 360px;
  border: 1px solid rgba(72, 111, 167, 0.22);
  border-radius: 12px;
  margin-top: 10px;
}

.mdm-preview-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.mdm-preview-table th,
.mdm-preview-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(72, 111, 167, 0.16);
  font-size: 12px;
  text-align: left;
}

.mdm-preview-table th {
  position: sticky;
  top: 0;
  background: rgba(11, 19, 31, 0.98);
  color: #c7d6f1;
  z-index: 1;
}

.mdm-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.mdm-metric {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(72, 111, 167, 0.28);
  background: rgba(10, 18, 30, 0.78);
}

.mdm-metric strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
}

.mdm-modal {
  align-items: center;
  justify-content: center;
}

.mdm-modal .modal-content {
  width: min(820px, calc(100vw - 40px));
  padding: 24px;
  position: relative;
}

.mdm-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

@media (max-width: 1200px) {
  .mdm-col-4,
  .mdm-col-5,
  .mdm-col-6,
  .mdm-col-7,
  .mdm-col-8 {
    grid-column: span 12;
  }

  .mdm-kpis,
  .mdm-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mdm-upload-shell,
  .mdm-filter-bar,
  .mdm-stat-grid,
  .mdm-quick-links,
  .mdm-mapping-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .mdm-shell {
    padding: 12px;
  }

  .mdm-header,
  .mdm-batch-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .mdm-kpis,
  .mdm-report-metrics,
  .mdm-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Import page: bridge mdm-shell into the vrm-workspace-shell design token space ── */

.mdm-shell {
  --vrm-bg: var(--mdm-bg, #091120);
  --vrm-surface: var(--mdm-surface, #101b2f);
  --vrm-surface-soft: var(--mdm-surface-soft, #152238);
  --vrm-surface-alt: var(--mdm-surface-strong, #1d2c46);
  --vrm-border: var(--mdm-border, rgba(62, 103, 155, 0.28));
  --vrm-border-strong: var(--mdm-border-strong, rgba(88, 149, 224, 0.42));
  --vrm-text: var(--mdm-text, #edf3ff);
  --vrm-text-soft: var(--mdm-text-soft, #93a8c8);
  --vrm-text-muted: var(--mdm-text-muted, #8a9fc0);
  --vrm-cyan: var(--mdm-cyan, #46c8ff);
  --vrm-blue: var(--mdm-blue, #4ca8ff);
  --vrm-magenta: var(--mdm-magenta, #ef4394);
  --vrm-green: var(--mdm-green, #27d89f);
  --vrm-gold: var(--mdm-gold, #f0b53c);
  --vrm-danger: var(--mdm-danger, #ff5d77);
}

/* ── Import page: phase accent colors ── */

[data-phase="upload"] .vrm-phase-index {
  border-color: rgba(72, 224, 200, 0.85);
  color: #48e0c8;
  box-shadow: 0 0 8px rgba(72, 224, 200, 0.25);
}

[data-phase="upload"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(72, 224, 200, 0.25);
}

[data-phase="map"] .vrm-phase-index {
  border-color: rgba(60, 180, 255, 0.85);
  color: #3cb4ff;
  box-shadow: 0 0 8px rgba(60, 180, 255, 0.25);
}

[data-phase="map"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(60, 180, 255, 0.25);
}

[data-phase="preview"] .vrm-phase-index {
  border-color: rgba(160, 100, 255, 0.85);
  color: #a064ff;
  box-shadow: 0 0 8px rgba(160, 100, 255, 0.25);
}

[data-phase="preview"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(160, 100, 255, 0.25);
}

[data-phase="commit"] .vrm-phase-index {
  border-color: rgba(230, 60, 160, 0.85);
  color: #e63ca0;
  box-shadow: 0 0 8px rgba(230, 60, 160, 0.25);
}

[data-phase="commit"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(230, 60, 160, 0.25);
}

/* ── Import page: hero avatar ── */

.mdm-import-avatar {
  background: linear-gradient(135deg, rgba(72, 200, 255, 0.9), rgba(39, 216, 159, 0.85));
}

/* ── Import page: hero overrides ── */

.mdm-import-hero {
  margin-bottom: 0;
}

/* ── Import page: form grid inside phase body ── */

.mdm-import-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mdm-import-wide {
  grid-column: 1 / -1;
}

.mdm-import-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mdm-import-status-text {
  color: var(--mdm-text-soft);
  font-size: 13px;
}

/* ── Import page: KPI strip inside preview phase ── */

.mdm-import-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}

/* ── Import page: section headings inside phase body ── */

.mdm-import-section-heading {
  margin-bottom: 8px;
}

.mdm-import-section-heading .mdm-kicker {
  margin-bottom: 2px;
}

.mdm-import-section-copy {
  color: var(--mdm-text-soft);
  font-size: 13px;
  margin: 0;
}

/* ── Import page: commit phase body ── */

.mdm-import-commit-banner {
  padding: 12px 14px;
  border: 1px solid rgba(72, 224, 200, 0.3);
  border-radius: 10px;
  background: rgba(20, 55, 55, 0.45);
  color: #5be0aa;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.mdm-import-commit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.mdm-import-commit-stat {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(72, 111, 167, 0.28);
  background: rgba(10, 18, 30, 0.78);
}

.mdm-import-commit-stat span {
  display: block;
  color: var(--mdm-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mdm-import-commit-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  color: #f6fbff;
}

.mdm-import-commit-note {
  color: var(--mdm-text-soft);
  font-size: 13px;
  margin: 0 0 16px;
}

.mdm-import-commit-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Import page: file input sizing (vendor-detail doesn't target [type=file]) ── */

.mdm-import-form-grid .vendor-field input[type="file"] {
  padding: 8px 12px;
}

/* ── Responsive ── */

@media (max-width: 980px) {
  .mdm-import-form-grid,
  .mdm-import-commit-summary,
  .mdm-import-kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .mdm-import-form-grid,
  .mdm-import-commit-summary,
  .mdm-import-kpi-strip {
    grid-template-columns: 1fr;
  }
}

/* ── Inventory page: hero avatar ───────────────────────────────────── */

.mdm-inventory-avatar {
  background: linear-gradient(135deg, rgba(76, 168, 255, 0.92), rgba(160, 100, 255, 0.88));
}

/* ── Inventory page: hero overrides ─────────────────────────────────── */

.mdm-inventory-hero {
  margin-bottom: 0;
}

/* ── Inventory page: review mode pill inside heading row ─────────────── */

.mdm-inventory-review-pill {
  flex-shrink: 0;
}

/* ── Inventory page: KPI strip (5-column, no border/bg — uses vrm-kpi-card) ── */

.mdm-inventory-kpi-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

/* ── KPI card active state (filter selected) ─────────────────────────── */

.mdm-inventory-kpi-strip .vrm-kpi-card.active,
.mdm-overview-kpi-strip .vrm-kpi-card.active {
  border-color: color-mix(in srgb, var(--vrm-kpi-accent, #7c5cff) 80%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--vrm-kpi-accent, #7c5cff) 45%, transparent), 0 8px 24px rgba(0,0,0,0.32);
}

/* ── Inventory page: filter bar inner layout ────────────────────────── */

.mdm-inventory-filter-bar {
  padding: 16px 18px 18px;
  margin-bottom: 0;
}

.mdm-inventory-filter-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.5fr) repeat(2, minmax(160px, 0.65fr)) auto;
  gap: 14px;
  align-items: end;
}

.mdm-inventory-search-field {
  /* inherits vendor-field layout */
}

.mdm-inventory-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-bottom: 1px;
}

/* ── Inventory page: review mode guidance banner ─────────────────────── */

.mdm-inventory-review-banner {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(240, 181, 60, 0.32);
  border-radius: 10px;
  background: rgba(40, 30, 12, 0.68);
  color: #ffd57c;
  font-size: 13px;
  line-height: 1.5;
}

.mdm-inventory-review-banner strong {
  color: #ffe8a0;
}

/* ── Inventory page: batch action bar ────────────────────────────────── */

.mdm-inventory-batch-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(120, 179, 255, 0.26);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 28, 48, 0.98), rgba(14, 22, 38, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mdm-inventory-batch-info {
  color: var(--mdm-text-soft, #93a8c8);
  font-size: 13px;
}

.mdm-inventory-batch-info strong {
  color: #f4f8ff;
  font-size: 15px;
}

.mdm-inventory-batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Inventory page: table lives directly in mdm-table-shell ─────────── */

.mdm-inventory-hero ~ .mdm-table-shell,
.mdm-inventory-batch-bar ~ .mdm-table-shell {
  margin-top: 12px;
}

/* Give the table shell a top margin when batch bar is hidden */
.mdm-shell .mdm-table-shell {
  margin-top: 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .mdm-inventory-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .mdm-inventory-filter-row {
    grid-template-columns: 1fr 1fr;
  }

  .mdm-inventory-search-field {
    grid-column: 1 / -1;
  }

  .mdm-inventory-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .mdm-inventory-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mdm-inventory-filter-row {
    grid-template-columns: 1fr;
  }

  .mdm-inventory-batch-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .mdm-inventory-batch-actions {
    justify-content: flex-start;
  }
}

/* ── Reports page: hero avatar ──────────────────────────────────────── */

.mdm-reports-avatar {
  background: linear-gradient(135deg, rgba(240, 181, 60, 0.92), rgba(255, 93, 119, 0.82));
}

/* ── Reports page: hero margin override ─────────────────────────────── */

.mdm-reports-hero {
  margin-bottom: 0;
}

/* ── Reports page: KPI strip (4-column) ─────────────────────────────── */

.mdm-reports-kpi-strip,
.mdm-report-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.mdm-report-summary-strip {
  display: grid;
  gap: 14px;
}

.mdm-report-summary-card {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgba(57, 95, 145, 0.26);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.96), rgba(13, 21, 35, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ── Reports page: filter bar ───────────────────────────────────────── */

.mdm-reports-filter-bar {
  padding: 16px 18px 18px;
  margin-bottom: 0;
}

.mdm-reports-filter-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.5fr) repeat(2, minmax(160px, 0.65fr)) auto;
  gap: 14px;
  align-items: end;
}

.mdm-reports-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-bottom: 1px;
}

/* ── Reports page: master/detail layout ─────────────────────────────── */

.mdm-reports-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 12px;
  align-items: start;
}

/* When a report is open: narrow list | wide detail */
.mdm-reports-layout.has-detail {
  grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.6fr);
  gap: 14px;
}

/* List panel occupies full width until detail opens */
.mdm-reports-list-panel {
  min-width: 0;
}

/* Hide Rows and Vendors columns in split mode to reclaim horizontal space */
.mdm-reports-layout.has-detail .mdm-reports-col-hideable {
  display: none;
}

/* Selected row highlight */
.mdm-table-shell tbody tr.mdm-reports-row-selected,
.mdm-table-shell tbody tr.mdm-reports-row-selected:hover {
  background: rgba(76, 168, 255, 0.12);
  outline: 1px solid rgba(76, 168, 255, 0.32);
  outline-offset: -1px;
}

/* Make rows feel clickable */
.mdm-table-shell tbody tr[data-report-id] {
  cursor: pointer;
}

/* ── Reports page: detail panel ─────────────────────────────────────── */

.mdm-report-detail-panel {
  min-width: 0;
  border: 1px solid var(--mdm-border-strong, rgba(88, 149, 224, 0.42));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.98), rgba(11, 19, 32, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  /* Panel scrolls independently on tall viewports */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.mdm-report-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(55, 86, 126, 0.28);
}

.mdm-report-detail-title-block {
  min-width: 0;
}

.mdm-report-detail-title-block h2 {
  margin: 4px 0 0;
  font-size: 20px;
  color: #f5f9ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdm-report-detail-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mini stats strip */
.mdm-report-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(55, 86, 126, 0.22);
  border-bottom: 1px solid rgba(55, 86, 126, 0.22);
}

.mdm-report-detail-stat {
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.98), rgba(11, 19, 32, 0.98));
}

.mdm-report-detail-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  color: #f6fbff;
}

/* Sections inside the detail panel */
.mdm-report-detail-section {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(55, 86, 126, 0.18);
}

.mdm-report-detail-section:last-child {
  border-bottom: none;
}

.mdm-report-detail-section .mdm-kicker {
  margin-bottom: 2px;
}

.mdm-report-detail-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #f4f8ff;
}

/* The groups table section needs no extra padding on its shell */
.mdm-report-detail-section-table .mdm-table-shell {
  margin-top: 0;
  border-radius: 10px;
}

/* ── Reports page: responsive ───────────────────────────────────────── */

@media (max-width: 1280px) {
  .mdm-reports-kpi-strip,
  .mdm-report-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .mdm-reports-layout.has-detail {
    grid-template-columns: 1fr;
  }

  .mdm-reports-layout.has-detail .mdm-reports-col-hideable {
    display: table-cell;
  }

  .mdm-report-detail-panel {
    max-height: none;
  }
}

@media (max-width: 980px) {
  .mdm-reports-filter-row {
    grid-template-columns: 1fr 1fr;
  }

  .mdm-reports-search-field {
    grid-column: 1 / -1;
  }

  .mdm-reports-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .mdm-reports-kpi-strip,
  .mdm-report-summary-strip {
    grid-template-columns: 1fr 1fr;
  }

  .mdm-reports-filter-row {
    grid-template-columns: 1fr;
  }

  .mdm-report-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERVIEW PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.mdm-overview-avatar {
  background: linear-gradient(135deg, #7c5cff 0%, #3cb4ff 100%);
}

.mdm-overview-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mdm-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.mdm-overview-card {
  display: block;
  padding: 20px 22px;
}

@media (max-width: 1280px) {
  .mdm-overview-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .mdm-overview-grid,
  .mdm-overview-kpi-strip {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EXPORT GUIDE (ISS-015)
   ═══════════════════════════════════════════════════════════════════════ */

.mdm-export-guide {
  margin-bottom: 16px;
  border: 1px solid rgba(120, 179, 255, 0.18);
  border-radius: 12px;
  background: rgba(16, 28, 50, 0.6);
}

.mdm-export-guide-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--vrm-cyan, #78b3ff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s;
}

.mdm-export-guide-toggle::-webkit-details-marker {
  display: none;
}

.mdm-export-guide-toggle:hover {
  color: #a5ccff;
}

.mdm-export-guide[open] .mdm-export-guide-toggle {
  border-bottom: 1px solid rgba(120, 179, 255, 0.12);
}

.mdm-export-guide-body {
  padding: 14px 16px 16px;
}

.mdm-export-guide-intro {
  margin: 0 0 12px;
  color: var(--vrm-text-soft, #94a3b8);
  font-size: 12px;
  line-height: 1.5;
}

.mdm-export-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.mdm-export-guide-card {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.mdm-export-guide-card strong {
  display: block;
  margin-bottom: 6px;
  color: #f0f6ff;
  font-size: 13px;
}

.mdm-export-guide-card p {
  margin: 0 0 8px;
  color: var(--vrm-text-soft, #94a3b8);
  font-size: 12px;
  line-height: 1.45;
}

.mdm-export-guide-card a {
  color: var(--vrm-cyan, #78b3ff);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.mdm-export-guide-card a:hover {
  text-decoration: underline;
}