/* OpenDesign V8 / Phase 6
   Final presentation owner for CRM, SRM, HRM and TPM. */

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"],
  .panel[data-panel="srm"],
  .panel[data-panel="hrm"],
  .panel[data-panel="tpm"]
) {
  min-width: 0;
  color: var(--bms-text);
}

body.bms-opendesign-v8 :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
) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bms-space-4);
  margin: 0;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-3);
  background: var(--bms-surface);
  padding: var(--bms-space-5);
  box-shadow: var(--bms-shadow-1);
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-title,
  .panel[data-panel="srm"] .relationship-title
)::after {
  display: none;
}

body.bms-opendesign-v8 :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(--bms-text);
  font: 700 1.45rem/1.25 var(--bms-font-display);
  letter-spacing: -0.02em;
}

body.bms-opendesign-v8 :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
) {
  max-width: 720px;
  margin: 0;
  color: var(--bms-text-muted);
  font-size: 0.82rem;
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-title .eyebrow,
  .panel[data-panel="srm"] .relationship-title .eyebrow,
  .panel[data-panel="hrm"] .hrm-hero .eyebrow,
  .panel[data-panel="tpm"] .tpm-hero .eyebrow,
  .hrm-kicker
) {
  color: var(--bms-primary);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.09em;
}

body.bms-opendesign-v8 :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: var(--bms-space-1);
  margin: var(--bms-space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--bms-border);
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-tabs button,
  .panel[data-panel="srm"] .relationship-tabs button,
  .panel[data-panel="hrm"] .hrm-tabs button,
  .panel[data-panel="tpm"] .tpm-tabs button
) {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--bms-control-standard);
  border: 0;
  border-radius: var(--bms-radius-2) var(--bms-radius-2) 0 0;
  background: transparent;
  padding: var(--bms-space-2) var(--bms-space-3);
  color: var(--bms-text-muted);
  box-shadow: none;
  font-weight: 650;
  white-space: nowrap;
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-tabs button:hover,
  .panel[data-panel="srm"] .relationship-tabs button:hover,
  .panel[data-panel="hrm"] .hrm-tabs button:hover,
  .panel[data-panel="tpm"] .tpm-tabs button:hover
) {
  background: var(--bms-surface-subtle);
  color: var(--bms-text);
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-tabs button.active,
  .panel[data-panel="srm"] .relationship-tabs button.active,
  .panel[data-panel="hrm"] .hrm-tabs button.active,
  .panel[data-panel="tpm"] .tpm-tabs button.active
) {
  background: var(--bms-primary-soft);
  color: var(--bms-primary);
  box-shadow: inset 0 -2px var(--bms-primary);
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-tabs button.active,
  .panel[data-panel="srm"] .relationship-tabs button.active,
  .panel[data-panel="hrm"] .hrm-tabs button.active,
  .panel[data-panel="tpm"] .tpm-tabs button.active
)::after {
  display: none;
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-toolbar,
  .panel[data-panel="srm"] .relationship-toolbar,
  .panel[data-panel="hrm"] .hrm-toolbar
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-3);
  margin-bottom: var(--bms-space-4);
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-toolbar input,
  .panel[data-panel="srm"] .relationship-toolbar input,
  .panel[data-panel="hrm"] .hrm-toolbar input
) {
  width: min(100%, 430px);
  min-height: var(--bms-control-standard);
  border-color: var(--bms-border);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface);
  color: var(--bms-text);
}

body.bms-opendesign-v8 :is(
  .panel[data-panel="crm"] .relationship-toolbar[hidden],
  .panel[data-panel="srm"] .relationship-toolbar[hidden]
) {
  display: none;
}

body.bms-opendesign-v8 :is(.crm-v2-kpis, .srm-v2-kpis, .hrm-metrics, .tpm-metrics) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bms-space-3);
}

body.bms-opendesign-v8 :is(
  .crm-v2-card,
  .srm-v2-card,
  .srm-v2-kpi,
  .hrm-card,
  .hrm-metric,
  .tpm-card,
  .tpm-metric
) {
  min-width: 0;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-3);
  background: var(--bms-surface);
  padding: var(--bms-space-4);
  color: var(--bms-text);
  box-shadow: var(--bms-shadow-1);
}

body.bms-opendesign-v8 :is(.crm-v2-kpi, .srm-v2-kpi, .hrm-metric, .tpm-metric) {
  min-height: 94px;
  border-top: 1px solid var(--bms-border);
}

body.bms-opendesign-v8 :is(.crm-v2-kpi span, .crm-v2-kpi small, .srm-v2-kpi span, .hrm-metric span, .tpm-metric span, .tpm-metric small) {
  color: var(--bms-text-muted);
  font-size: 0.76rem;
}

body.bms-opendesign-v8 :is(.crm-v2-kpi strong, .srm-v2-kpi strong, .hrm-metric strong, .tpm-metric strong) {
  display: block;
  margin-top: var(--bms-space-2);
  color: var(--bms-text);
  font: 700 1.42rem/1.15 var(--bms-font-data);
}

body.bms-opendesign-v8 .crm-v2-kpi:hover {
  border-color: var(--bms-border-strong);
  transform: none;
}

body.bms-opendesign-v8 :is(.crm-v2-card h3, .srm-v2-card h3, .hrm-card h3, .tpm-card h3) {
  color: var(--bms-text);
  font-size: 0.98rem;
}

body.bms-opendesign-v8 .crm-v2-grid {
  gap: var(--bms-space-3);
}

body.bms-opendesign-v8 .crm-v2-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.bms-opendesign-v8 :is(.crm-v2-table-wrap, .srm-v2-table, .hrm-table-wrap) {
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface);
  overflow: auto;
}

body.bms-opendesign-v8 :is(.crm-v2-table, .srm-v2-table table, .hrm-table) {
  width: 100%;
  border-collapse: collapse;
  color: var(--bms-text);
}

body.bms-opendesign-v8 :is(.crm-v2-table th, .srm-v2-table th, .hrm-table th) {
  background: var(--bms-surface-subtle);
  color: var(--bms-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.bms-opendesign-v8 :is(.crm-v2-table th, .crm-v2-table td, .srm-v2-table th, .srm-v2-table td, .hrm-table th, .hrm-table td) {
  border-bottom: 1px solid var(--bms-border);
  padding: var(--bms-space-3);
  text-align: left;
  vertical-align: middle;
}

body.bms-opendesign-v8 :is(.crm-v2-table tbody tr:hover, .srm-v2-table tbody tr:hover, .hrm-table tbody tr:hover) {
  background: var(--bms-surface-subtle);
}

body.bms-opendesign-v8 :is(.crm-status, .srm-v2-badge, .hrm-status, .tpm-status) {
  display: inline-flex;
  align-items: center;
  border-radius: var(--bms-radius-round);
  background: var(--bms-neutral-soft);
  padding: var(--bms-space-1) var(--bms-space-2);
  color: var(--bms-text-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

body.bms-opendesign-v8 :is(.crm-status.won, .srm-v2-badge.status-completed, .srm-v2-badge.status-approved) {
  background: var(--bms-success-soft);
  color: var(--bms-success);
}

body.bms-opendesign-v8 :is(.srm-v2-badge.status-overdue, .srm-v2-badge.status-exceeds_po, .srm-v2-badge.status-exceeds_receipt) {
  background: var(--bms-danger-soft);
  color: var(--bms-danger);
}

body.bms-opendesign-v8 :is(.crm-kanban, .srm-v2-overview-grid) {
  scrollbar-width: thin;
}

body.bms-opendesign-v8 .crm-stage {
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-3);
  background: var(--bms-surface-subtle);
  padding: var(--bms-space-3);
}

body.bms-opendesign-v8 .crm-opportunity {
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface);
  padding: var(--bms-space-3);
  box-shadow: var(--bms-shadow-1);
}

body.bms-opendesign-v8 :is(.srm-v2-actions article, .srm-v2-intelligence article, .srm-v2-list article, .tpm-row) {
  border-bottom-color: var(--bms-border);
}

body.bms-opendesign-v8 .hrm-supporting-card {
  background: var(--bms-surface-subtle);
}

body.bms-opendesign-v8 .hrm-request-card {
  border-color: var(--bms-border);
  border-left-color: var(--bms-primary);
  background: var(--bms-surface);
}

body.bms-opendesign-v8 .tpm-grid,
body.bms-opendesign-v8 .hrm-grid,
body.bms-opendesign-v8 .srm-v2-dashboard-grid {
  gap: var(--bms-space-4);
}

/* SRM follows the same single-surface page structure as the workflow tabs.
   The legacy rollout framed the page, its title, and each KPI independently. */
body.bms-opendesign-v8 .panel[data-panel="srm"] {
  padding: var(--bms-space-5);
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-3);
  background: var(--bms-surface);
  box-shadow: var(--bms-shadow-1);
}

body.bms-opendesign-v8 .panel[data-panel="srm"] .relationship-title {
  min-height: 70px;
  margin: 0 0 var(--bms-space-5);
  padding: 0 0 var(--bms-space-4);
  border: 0;
  border-bottom: 1px solid var(--bms-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.bms-opendesign-v8 .panel[data-panel="srm"] .srm-v2-kpi,
body.bms-opendesign-v8 .panel[data-panel="srm"] .srm-v2-kpi.warning,
body.bms-opendesign-v8 .panel[data-panel="srm"] .srm-v2-kpi.danger {
  border: 1px solid var(--bms-border);
  background: var(--bms-surface);
  box-shadow: none;
}

body.bms-opendesign-v8 :is(#relationshipDrawer, .hrm-form-dialog, .tpm-dialog) {
  color: var(--bms-text);
}

@media (max-width: 1100px) {
  body.bms-opendesign-v8 :is(.crm-v2-kpis, .srm-v2-kpis, .hrm-metrics, .tpm-metrics) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.bms-opendesign-v8 :is(.crm-v2-funnel, .crm-v2-today, .crm-v2-donut-card, .crm-v2-revenue, .crm-v2-sales, .crm-v2-closing) {
    grid-column: span 6;
  }
}

@media (max-width: 767px) {
  body.bms-opendesign-v8 :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
  ) {
    flex-direction: column;
    padding: var(--bms-space-4);
  }

  body.bms-opendesign-v8 .panel[data-panel="srm"] {
    padding: var(--bms-space-4);
  }

  body.bms-opendesign-v8 .panel[data-panel="srm"] .relationship-title {
    padding: 0 0 var(--bms-space-4);
  }

  body.bms-opendesign-v8 :is(
    .panel[data-panel="crm"] .relationship-toolbar,
    .panel[data-panel="srm"] .relationship-toolbar,
    .panel[data-panel="hrm"] .hrm-toolbar
  ) {
    align-items: stretch;
    flex-direction: column;
  }

  body.bms-opendesign-v8 :is(
    .panel[data-panel="crm"] .relationship-toolbar input,
    .panel[data-panel="srm"] .relationship-toolbar input,
    .panel[data-panel="hrm"] .hrm-toolbar input
  ) {
    width: 100%;
    max-width: none;
  }

  body.bms-opendesign-v8 .crm-v2-grid > * {
    grid-column: 1 / -1;
  }

  body.bms-opendesign-v8 :is(.crm-v2-table, .srm-v2-table table, .hrm-table) {
    min-width: 680px;
  }

  body.bms-opendesign-v8 .tpm-quick-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  body.bms-opendesign-v8 :is(.crm-v2-kpis, .srm-v2-kpis, .hrm-metrics, .tpm-metrics) {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (min-width: 901px) and (max-width: 950px) and (max-height: 500px) {
  body.bms-opendesign-v8 :is(
    .panel[data-panel="crm"],
    .panel[data-panel="srm"],
    .panel[data-panel="hrm"],
    .panel[data-panel="tpm"]
  ) :is(.btn, button, input, select, textarea, [role="button"]) {
    min-height: var(--bms-control-touch);
  }

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

@media (prefers-reduced-motion: reduce) {
  body.bms-opendesign-v8 :is(
    .panel[data-panel="crm"],
    .panel[data-panel="srm"],
    .panel[data-panel="hrm"],
    .panel[data-panel="tpm"]
  ) * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}