/*
 * Phase 9 / Wave 4 — Business Modules
 * Approved panels only: crm, srm, hrm and tpm, plus their existing overlays.
 * Rollback boundary: remove this stylesheet and body.bms-wave-4.
 */

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) {
  min-width: 0;
  padding: var(--bms-space-4);
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--bms-shadow-1);
  font-family: var(--bms-font-ui);
}

/* Dark Executive uses the module panel as a command canvas; bounded cards own grouping. */
.bms-dark-executive.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Module identity stays textual and evidence-led. */
.bms-wave-4 :is(
  .panel[data-panel="crm"] .relationship-title,
  .panel[data-panel="srm"] .relationship-title,
  .panel[data-panel="hrm"] .hrm-hero,
  .panel[data-panel="tpm"] .tpm-hero
) {
  min-height: 52px;
  margin: 0 0 var(--bms-space-3);
  padding: 0 0 var(--bms-space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .relationship-title h2,
  .panel[data-panel="srm"] .relationship-title h2,
  .panel[data-panel="hrm"] .hrm-hero h2,
  .panel[data-panel="tpm"] .tpm-hero h2
) {
  margin: var(--bms-space-1) 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 720;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .relationship-title p,
  .panel[data-panel="srm"] .relationship-title p,
  .panel[data-panel="hrm"] .hrm-hero p,
  .panel[data-panel="tpm"] .tpm-hero p
) { color: var(--muted); }

.bms-wave-4 :is(
  .panel[data-panel="crm"] .eyebrow,
  .panel[data-panel="srm"] .eyebrow,
  .panel[data-panel="hrm"] :is(.eyebrow, .hrm-kicker),
  .panel[data-panel="tpm"] .eyebrow
) {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Shared action and field hierarchy without changing handlers or values. */
.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) .btn,
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) .btn,
.bms-wave-4 #relationshipDrawer .btn {
  min-height: var(--bms-control-standard);
  border-radius: var(--bms-radius-2);
  box-shadow: none;
  font-weight: 700;
  transform: none;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) .btn:hover:not(:disabled) { box-shadow: var(--bms-shadow-1); transform: none; }

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) .btn.primary,
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) .btn.primary,
.bms-wave-4 #relationshipDrawer .btn.primary {
  border-color: var(--bms-primary);
  color: var(--bms-surface);
  background: var(--bms-primary);
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) .btn.secondary,
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) .btn.secondary,
.bms-wave-4 #relationshipDrawer .btn.secondary {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}

.bms-wave-4 :is(
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) .btn.danger,
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) .btn.danger {
  border-color: color-mix(in srgb, var(--bms-danger) 38%, var(--line));
  color: color-mix(in srgb, var(--ink) 62%, var(--bms-danger));
  background: color-mix(in srgb, var(--surface) 88%, var(--bms-danger));
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) :is(input, select, textarea),
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) :is(input, select, textarea),
.bms-wave-4 #relationshipDrawer :is(input, select, textarea) {
  min-height: var(--bms-control-standard);
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"],
  #relationshipDrawer,
  .hrm-form-dialog,
  .tpm-dialog
) :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bms-focus) 38%, transparent);
  outline-offset: 2px;
}

/* One tab grammar across four different module dialects. */
.bms-wave-4 :is(
  .panel[data-panel="crm"] .relationship-tabs,
  .panel[data-panel="srm"] .relationship-tabs,
  .panel[data-panel="hrm"] .hrm-tabs,
  .panel[data-panel="tpm"] .tpm-tabs
) {
  position: static;
  display: flex;
  gap: 0;
  margin: 0 0 var(--bms-space-4);
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overscroll-behavior-inline: contain;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .relationship-tabs,
  .panel[data-panel="srm"] .relationship-tabs,
  .panel[data-panel="hrm"] .hrm-tabs,
  .panel[data-panel="tpm"] .tpm-tabs
) button {
  min-height: var(--bms-control-standard);
  padding: 9px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .relationship-tabs,
  .panel[data-panel="srm"] .relationship-tabs,
  .panel[data-panel="hrm"] .hrm-tabs,
  .panel[data-panel="tpm"] .tpm-tabs
) button.active {
  border-bottom-color: var(--bms-primary);
  color: var(--bms-primary);
  background: color-mix(in srgb, var(--surface) 90%, var(--bms-primary));
  box-shadow: none;
}

.bms-wave-4 .panel[data-panel="hrm"] .hrm-tabs button.active::after { display: none; }

.bms-wave-4 :is(.panel[data-panel="crm"], .panel[data-panel="srm"]) .relationship-toolbar,
.bms-wave-4 .panel[data-panel="hrm"] .hrm-toolbar {
  gap: var(--bms-space-2);
  margin-bottom: var(--bms-space-3);
}

/* KPI ledgers keep business evidence comparable instead of card-heavy. */
.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-kpis,
  .panel[data-panel="srm"] .srm-v2-kpis,
  .panel[data-panel="hrm"] .hrm-metrics,
  .panel[data-panel="tpm"] .tpm-metrics
) {
  display: grid;
  gap: var(--bms-space-3);
  margin-bottom: var(--bms-space-3);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-kpi,
  .panel[data-panel="srm"] .srm-v2-kpi,
  .panel[data-panel="hrm"] .hrm-metric,
  .panel[data-panel="tpm"] .tpm-metric
) {
  min-width: 0;
  min-height: 82px;
  padding: var(--bms-space-3) var(--bms-space-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--bms-primary);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
  transform: none;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-kpi,
  .panel[data-panel="srm"] .srm-v2-kpi,
  .panel[data-panel="hrm"] .hrm-metric,
  .panel[data-panel="tpm"] .tpm-metric
) :is(span, small) { color: var(--muted); font-size: 11px; }

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-kpi,
  .panel[data-panel="srm"] .srm-v2-kpi,
  .panel[data-panel="hrm"] .hrm-metric,
  .panel[data-panel="tpm"] .tpm-metric
) strong {
  margin: var(--bms-space-1) 0;
  color: var(--ink);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.bms-wave-4 .panel[data-panel="srm"] .srm-v2-kpi.warning { box-shadow: inset 0 3px 0 var(--bms-warning); }
.bms-wave-4 .panel[data-panel="srm"] .srm-v2-kpi.danger { box-shadow: inset 0 3px 0 var(--bms-danger); }

/* Shared cards and lists preserve each module's evidence structure. */
.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-card,
  .panel[data-panel="crm"] .crm-stage,
  .panel[data-panel="crm"] .crm-opportunity,
  .panel[data-panel="srm"] .srm-v2-card,
  .panel[data-panel="srm"] .srm-plan-row,
  .panel[data-panel="hrm"] .hrm-card,
  .panel[data-panel="hrm"] .hrm-request-card,
  .panel[data-panel="tpm"] .tpm-card,
  .panel[data-panel="tpm"] .tpm-check-item
) {
  border-color: var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-card,
  .panel[data-panel="srm"] .srm-v2-card,
  .panel[data-panel="hrm"] .hrm-card,
  .panel[data-panel="tpm"] .tpm-card
) { padding: var(--bms-space-4); }

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-card h3,
  .panel[data-panel="srm"] .srm-v2-card h3,
  .panel[data-panel="hrm"] .hrm-card h3,
  .panel[data-panel="tpm"] .tpm-card h3
) { color: var(--ink); font-size: 14px; }

.bms-wave-4 .panel[data-panel="hrm"] .hrm-supporting-card { border-top: 3px solid var(--bms-primary); background: var(--surface-soft); }
.bms-wave-4 .panel[data-panel="hrm"] .hrm-request-card { border-left: 1px solid var(--line); }
.bms-wave-4 .panel[data-panel="tpm"] .tpm-report-note { border-left-color: var(--bms-primary); }

.bms-wave-4 :is(
  .panel[data-panel="srm"] .srm-v2-actions article,
  .panel[data-panel="srm"] .srm-v2-intelligence article,
  .panel[data-panel="srm"] .srm-v2-list article,
  .panel[data-panel="tpm"] .tpm-row
) { border-bottom-color: var(--line); }

.bms-wave-4 .panel[data-panel="srm"] .srm-plan-board { background: var(--surface-soft); }
.bms-wave-4 .panel[data-panel="srm"] .srm-plan-list .srm-plan-row { min-height: 230px; padding: var(--bms-space-4); }
.bms-wave-4 .panel[data-panel="srm"] .srm-plan-list .srm-plan-row::before { display: none; }
.bms-wave-4 .panel[data-panel="srm"] :is(.srm-plan-materials, .srm-iqc-delivered) { border-radius: var(--bms-radius-2); background: var(--surface-soft); }
.bms-wave-4 .panel[data-panel="srm"] .srm-plan-actions { border-top-color: var(--line); }

.bms-wave-4 .panel[data-panel="srm"] .srm-v2-actions article[class*="project-tone-"] {
  border: 1px solid var(--line);
  border-left: 3px solid var(--bms-primary);
  border-radius: var(--bms-radius-2);
  background: var(--surface-soft);
}

.bms-wave-4 .panel[data-panel="srm"] :is(.srm-iqc-card, .srm-v2-projects article, .srm-v2-plan-lines article, .srm-v2-consolidation-summary > div, .srm-v2-supplier-option) {
  border-color: var(--line);
  border-radius: var(--bms-radius-2);
  background: var(--surface);
}

.bms-wave-4 .panel[data-panel="srm"] .srm-iqc-notice,
.bms-wave-4 .panel[data-panel="srm"] .relationship-notice {
  border-left-color: var(--bms-success);
  border-radius: var(--bms-radius-2);
  color: color-mix(in srgb, var(--ink) 62%, var(--bms-success));
  background: color-mix(in srgb, var(--surface) 90%, var(--bms-success));
}

.bms-wave-4 .panel[data-panel="srm"] .srm-early-approval-bar {
  border-color: color-mix(in srgb, var(--bms-warning) 38%, var(--line));
  border-radius: var(--bms-radius-2);
  background: color-mix(in srgb, var(--surface) 92%, var(--bms-warning));
}

/* Kraljic remains a matrix; categories become semantic evidence zones. */
.bms-wave-4 .panel[data-panel="srm"] .kraljic-matrix section {
  border-color: var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface-soft);
}

.bms-wave-4 .panel[data-panel="srm"] .kraljic-matrix section.strategic { box-shadow: inset 0 3px 0 var(--bms-danger); }
.bms-wave-4 .panel[data-panel="srm"] .kraljic-matrix section.leverage { box-shadow: inset 0 3px 0 var(--bms-success); }
.bms-wave-4 .panel[data-panel="srm"] .kraljic-matrix section.bottleneck { box-shadow: inset 0 3px 0 var(--bms-warning); }
.bms-wave-4 .panel[data-panel="srm"] .kraljic-matrix section.non_critical { box-shadow: inset 0 3px 0 var(--bms-neutral); }
.bms-wave-4 .panel[data-panel="srm"] .kraljic-matrix button { border-color: var(--line); border-radius: var(--bms-radius-2); color: var(--ink); background: var(--surface); }

/* Dense module tables stay real tables with local scrolling. */
.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-v2-table-wrap,
  .panel[data-panel="crm"] .relationship-table-wrap,
  .panel[data-panel="srm"] .srm-v2-table,
  .panel[data-panel="srm"] .relationship-table-wrap,
  .panel[data-panel="hrm"] .hrm-table-wrap
) {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
  overscroll-behavior-inline: contain;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"]
) table {
  border-collapse: collapse;
  color: var(--ink);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"]
) th {
  position: sticky;
  top: 0;
  z-index: var(--bms-z-sticky);
  color: var(--muted) !important;
  background: var(--surface-soft) !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"]
) :is(th, td) { border-bottom-color: var(--line); }

.bms-wave-4 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"]
) tbody tr:hover { background: color-mix(in srgb, var(--surface) 90%, var(--bms-primary)); }

/* Existing CRM charts keep their renderer series; their containers join the system. */
.bms-wave-4 .panel[data-panel="crm"] .crm-v2-grid { gap: var(--bms-space-3); }
.bms-wave-4 .panel[data-panel="crm"] .crm-v2-kpis { gap: 0; }
.bms-wave-4 .panel[data-panel="crm"] .crm-v2-kpi:hover { border-color: var(--line); transform: none; }
.bms-wave-4 .panel[data-panel="crm"] :is(.crm-today-row, .crm-sales-row, .crm-funnel-summary) { border-color: var(--line); }
.bms-wave-4 .panel[data-panel="crm"] .crm-kanban { gap: var(--bms-space-2); overscroll-behavior-inline: contain; }
.bms-wave-4 .panel[data-panel="crm"] .crm-stage { border-top: 3px solid var(--bms-primary) !important; background: var(--surface-soft); }
.bms-wave-4 .panel[data-panel="crm"] .crm-opportunity { background: var(--surface); }
.bms-wave-4 .panel[data-panel="crm"] .crm-empty-v2,
.bms-wave-4 :is(.panel[data-panel="srm"], .panel[data-panel="hrm"], .panel[data-panel="tpm"]) :is(.relationship-loading, .relationship-empty, .srm-v2-empty, .hrm-empty, .hrm-loading, .tpm-empty) {
  border-radius: var(--bms-radius-2);
  color: var(--muted);
  background: var(--surface-soft);
}

/* Canonical states retain original labels and transition codes. */
.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-status,
  .panel[data-panel="srm"] .srm-v2-badge,
  .panel[data-panel="srm"] .relationship-status,
  .panel[data-panel="hrm"] .hrm-status,
  .panel[data-panel="tpm"] .tpm-status
) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  color: color-mix(in srgb, var(--ink) 72%, var(--bms-neutral));
  background: color-mix(in srgb, var(--surface) 90%, var(--bms-neutral));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-status.won,
  .panel[data-panel="srm"] .srm-v2-badge.status-official,
  .panel[data-panel="srm"] .srm-v2-badge.status-approved,
  .panel[data-panel="srm"] .srm-v2-badge.status-completed,
  .panel[data-panel="srm"] .srm-v2-badge.status-paid,
  .panel[data-panel="srm"] .srm-v2-badge.status-matched_po,
  .panel[data-panel="srm"] .relationship-status.active
) {
  border-color: color-mix(in srgb, var(--bms-success) 38%, var(--line));
  color: color-mix(in srgb, var(--ink) 62%, var(--bms-success));
  background: color-mix(in srgb, var(--surface) 88%, var(--bms-success));
}

.bms-wave-4 :is(
  .panel[data-panel="srm"] .srm-v2-badge.status-pending,
  .panel[data-panel="srm"] .srm-v2-badge.status-submitted,
  .panel[data-panel="srm"] .srm-v2-badge.status-waiting_iqc
) {
  border-color: color-mix(in srgb, var(--bms-warning) 38%, var(--line));
  color: color-mix(in srgb, var(--ink) 62%, var(--bms-warning));
  background: color-mix(in srgb, var(--surface) 88%, var(--bms-warning));
}

.bms-wave-4 :is(
  .panel[data-panel="crm"] .crm-status.lost,
  .panel[data-panel="srm"] .srm-v2-badge.status-overdue,
  .panel[data-panel="srm"] .srm-v2-badge.status-exceeds_po,
  .panel[data-panel="srm"] .srm-v2-badge.status-exceeds_receipt,
  .panel[data-panel="srm"] .relationship-status.blocked
) {
  border-color: color-mix(in srgb, var(--bms-danger) 38%, var(--line));
  color: color-mix(in srgb, var(--ink) 62%, var(--bms-danger));
  background: color-mix(in srgb, var(--surface) 88%, var(--bms-danger));
}

/* Shared relationship drawer and module dialogs keep their current lifecycle. */
.bms-wave-4 #relationshipDrawer { z-index: var(--bms-z-modal); }
.bms-wave-4 #relationshipDrawer .relationship-drawer-backdrop { background: color-mix(in srgb, var(--bms-frame-950) 58%, transparent); }
.bms-wave-4 #relationshipDrawer > aside {
  width: min(680px, 94vw);
  border-left: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--bms-shadow-overlay);
}

.bms-wave-4 #relationshipDrawer > aside > header {
  position: sticky;
  top: 0;
  z-index: var(--bms-z-sticky);
  padding: var(--bms-space-4) var(--bms-space-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.bms-wave-4 #relationshipDrawer .icon-btn {
  min-width: var(--bms-control-standard);
  min-height: var(--bms-control-standard);
  color: var(--ink);
  background: var(--surface);
}

.bms-wave-4 #relationshipDrawerBody { padding: var(--bms-space-5); }
.bms-wave-4 #relationshipDrawer :is(.relationship-detail-grid section, .srm-v2-consolidation-summary > div, .srm-v2-supplier-option, .srm-v2-plan-lines article) {
  border-color: var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
}

.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) {
  width: min(720px, calc(100vw - 24px));
  max-height: min(90dvh, 820px);
  padding: var(--bms-space-5);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--bms-shadow-overlay);
}

.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog)::backdrop { background: color-mix(in srgb, var(--bms-frame-950) 58%, transparent); }
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) > h3 { margin: 0 0 var(--bms-space-4); color: var(--ink); }
.bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) :is(.hrm-form-actions, .tpm-form footer, .tpm-checklist footer) {
  position: sticky;
  bottom: calc(var(--bms-space-5) * -1);
  margin: var(--bms-space-3) calc(var(--bms-space-5) * -1) calc(var(--bms-space-5) * -1);
  padding: var(--bms-space-3) var(--bms-space-5);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 1199px) {
  .bms-wave-4 :is(.panel[data-panel="srm"] .srm-v2-dashboard-grid, .panel[data-panel="srm"] .srm-v2-dashboard-grid.lower, .panel[data-panel="srm"] .srm-plan-list) { grid-template-columns: 1fr; }
  .bms-wave-4 :is(.panel[data-panel="hrm"] .hrm-grid, .panel[data-panel="tpm"] .tpm-grid) { grid-template-columns: 1fr; }
  .bms-wave-4 .panel[data-panel="crm"] .crm-v2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .bms-wave-4 :is(
    .panel[data-panel="crm"] .relationship-title,
    .panel[data-panel="srm"] .relationship-title,
    .panel[data-panel="tpm"] .tpm-hero
  ) { align-items: stretch; flex-direction: column; }

  .bms-wave-4 .panel[data-panel="tpm"] .tpm-quick-actions { justify-content: flex-start; }
  .bms-wave-4 :is(.panel[data-panel="crm"], .panel[data-panel="srm"]) .relationship-toolbar { align-items: stretch; flex-direction: column; }
  .bms-wave-4 :is(.panel[data-panel="crm"], .panel[data-panel="srm"]) .relationship-toolbar input { width: 100%; }
}

@media (max-width: 719px) {
  .bms-wave-4 :is(
    .panel[data-panel="crm"],
    .panel[data-panel="srm"],
    .panel[data-panel="hrm"],
    .panel[data-panel="tpm"]
  ) {
    padding: 0;
    border-inline: 0;
  }

  .bms-wave-4 :is(
    .panel[data-panel="crm"],
    .panel[data-panel="srm"],
    .panel[data-panel="hrm"],
    .panel[data-panel="tpm"],
    #relationshipDrawer,
    .hrm-form-dialog,
    .tpm-dialog
  ) :is(.btn, button, input, select, textarea) { min-height: var(--bms-control-touch); }

  .bms-wave-4 :is(
    .panel[data-panel="crm"] .relationship-tabs,
    .panel[data-panel="srm"] .relationship-tabs,
    .panel[data-panel="hrm"] .hrm-tabs,
    .panel[data-panel="tpm"] .tpm-tabs
  ) button { min-height: var(--bms-control-touch); }

  .bms-wave-4 :is(
    .panel[data-panel="crm"] .crm-v2-kpis,
    .panel[data-panel="srm"] .srm-v2-kpis,
    .panel[data-panel="hrm"] .hrm-metrics,
    .panel[data-panel="tpm"] .tpm-metrics
  ) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bms-wave-4 :is(
    .panel[data-panel="crm"] .crm-v2-kpi,
    .panel[data-panel="srm"] .srm-v2-kpi,
    .panel[data-panel="hrm"] .hrm-metric,
    .panel[data-panel="tpm"] .tpm-metric
  ) { min-height: 78px; }

  .bms-wave-4 .panel[data-panel="crm"] .crm-v2-grid > * { grid-column: 1 / -1; }
  .bms-wave-4 .panel[data-panel="crm"] .crm-kanban { grid-template-columns: repeat(7, 82vw); }
  .bms-wave-4 .panel[data-panel="srm"] :is(.srm-v2-plan-line-fields, .srmIqcForm, .srm-v2-consolidation-summary, .srm-v2-supplier-picker) { grid-template-columns: 1fr; }
  .bms-wave-4 .panel[data-panel="hrm"] :is(.hrm-form, .hrm-progress-list label) { grid-template-columns: 1fr; }
  .bms-wave-4 .panel[data-panel="hrm"] .hrm-form .wide { grid-column: auto; }
  .bms-wave-4 .panel[data-panel="tpm"] .tpm-form { grid-template-columns: 1fr; }
  .bms-wave-4 .panel[data-panel="tpm"] .tpm-form :is(.wide, footer) { grid-column: auto; }

  .bms-wave-4 #relationshipDrawer > aside { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; border: 0; }
  .bms-wave-4 #relationshipDrawerBody { padding: var(--bms-space-4); }
  .bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--bms-space-4);
    border: 0;
    border-radius: 0;
  }

  .bms-wave-4 > :is(.hrm-form-dialog, .tpm-dialog) :is(.hrm-form-actions, .tpm-form footer, .tpm-checklist footer) {
    bottom: calc(var(--bms-space-4) * -1);
    margin: var(--bms-space-3) calc(var(--bms-space-4) * -1) calc(var(--bms-space-4) * -1);
    padding: var(--bms-space-3) var(--bms-space-4) max(var(--bms-space-3), var(--bms-safe-area-bottom));
  }
}

@media (max-width: 479px) {
  .bms-wave-4 :is(
    .panel[data-panel="crm"] .crm-v2-kpis,
    .panel[data-panel="srm"] .srm-v2-kpis,
    .panel[data-panel="hrm"] .hrm-metrics,
    .panel[data-panel="tpm"] .tpm-metrics
  ) { grid-template-columns: 1fr; }

  .bms-wave-4 .panel[data-panel="srm"] .srm-iqc-summary,
  .bms-wave-4 .panel[data-panel="hrm"] .hrm-facts { grid-template-columns: 1fr; }
}

/* Short landscape touch viewports use the same safe control target as mobile. */
@media (max-width: 899px) and (max-height: 480px) {
  .bms-wave-4.bms-wave-1 :is(
    .panel[data-panel="crm"],
    .panel[data-panel="srm"],
    .panel[data-panel="hrm"],
    .panel[data-panel="tpm"]
  ) :is(.btn, button, input, select, textarea),
  .bms-wave-4.bms-wave-1 #relationshipDrawer :is(.btn, button, input, select, textarea),
  .bms-wave-4.bms-wave-1 > :is(.hrm-form-dialog, .tpm-dialog) :is(.btn, button, input, select, textarea) {
    min-height: var(--bms-control-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bms-wave-4 :is(
    .panel[data-panel="crm"],
    .panel[data-panel="srm"],
    .panel[data-panel="hrm"],
    .panel[data-panel="tpm"],
    #relationshipDrawer,
    .hrm-form-dialog,
    .tpm-dialog
  ) * { scroll-behavior: auto; transition-duration: .001ms; animation-duration: .001ms; }
}