/*
 * rmc-platform-beautify-v4.css
 * Cross-shell luxury spacing + full-width utilization (control plane, tenant portal,
 * backend, marketing editorial, studio embed).
 */

:root {
  --rmc-shell-card-radius: var(--radius-lg, 16px);
  --rmc-mkt-content-max: min(72rem, 100%);
}

/* --- Control plane + manager admin --- */
body.control-plane-shell .rmc-app-shell__canvas-body,
body.admin-manager-shell .rmc-app-shell__canvas-body,
body.control-plane-shell .cp-shell-content,
body.admin-manager-shell .cp-shell-content {
  width: 100%;
  max-width: none;
  /* Horizontal inset is owned by #cp-main-content / .cp-page-body / .page-wrap only. */
  padding-inline: 0;
  padding-block: var(--rmc-shell-pad-y);
}

body.control-plane-shell .cp-layout,
body.admin-manager-shell .cp-layout {
  width: 100%;
  max-width: none;
}

body.control-plane-shell .cp-panel,
body.admin-manager-shell .cp-panel {
  border-radius: var(--rmc-shell-card-radius);
  border: 1px solid var(--hairline);
  background: var(--surface-elevated);
  box-shadow: var(--elev-1);
}

body.control-plane-shell .cp-header__row--utility .rmc-platform-header__inner,
body.admin-manager-shell .cp-header__row--utility .rmc-platform-header__inner {
  gap: clamp(8px, 1vw, 16px);
  padding-inline: var(--rmc-shell-pad-x);
}

body.control-plane-shell .cp-header__row--utility .rmc-platform-header__command,
body.admin-manager-shell .cp-header__row--utility .rmc-platform-header__command {
  max-width: min(740px, 48vw);
}

/* --- Tenant portal + legacy base document shell --- */
body.portal-body-with-layout .cp-panel,
body.portal-body-with-layout .tp-card,
body.base-document-shell .card,
body.backend-shell .card {
  border-radius: var(--rmc-shell-card-radius);
  border: 1px solid var(--hairline);
  background: var(--surface-elevated);
  box-shadow: var(--elev-1);
}

body.portal-body-with-layout #main-content,
body.portal-body-with-layout .portal-main,
body.portal-body-with-layout [data-shell-main="portal"],
body.base-document-shell #main-content,
body.backend-shell #main-content,
body.backend-shell .portal-main {
  max-width: none;
  width: 100%;
}

/* Tenant canvas inset: .page-wrap / .cp-page-body only — not every .container-fluid (preserves header + nested grids). */
body.base-document-shell .container-fluid,
body.backend-shell .container-fluid {
  padding-inline: var(--rmc-shell-pad-x);
}

/* Manager bridge on portal_base: same canvas rules as control plane */
body.portal-body-with-layout.host-kind-manager .rmc-app-shell__canvas-body,
body.portal-body-with-layout.host-kind-manager .cp-shell-content {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  padding-block: var(--rmc-shell-pad-y);
}

/* --- Marketing (editorial): spacing only, not operator chrome --- */
html[data-surface="marketing"] .mkt-page-wrap,
html[data-surface="marketing"] main[role="main"],
html[data-surface="marketing"] .marketing-content-root {
  width: 100%;
  max-width: var(--rmc-mkt-content-max);
  margin-inline: auto;
  padding-inline: var(--rmc-shell-pad-x);
}

html[data-surface="marketing"] .card,
html[data-surface="marketing"] .mkt-card {
  border-radius: var(--rmc-shell-card-radius);
}

/* --- Studio embed / minimal iframe surfaces --- */
html[data-rmc-studio-embed="1"] .studio-embed-main,
html[data-rmc-studio-embed="1"] main[role="main"] {
  width: 100%;
  max-width: none;
  padding: var(--rmc-shell-pad-y) var(--rmc-shell-pad-x);
}

html[data-rmc-studio-embed="1"] .card {
  border-radius: var(--rmc-shell-card-radius);
  border: 1px solid var(--hairline);
}

/* --- Edge canvas: one horizontal inset layer (direct wrappers only; nested grids keep Bootstrap gutters) --- */
body.control-plane-shell .cp-layout.rmc-shell-canvas-container.container-fluid,
body.admin-manager-shell .cp-layout.rmc-shell-canvas-container.container-fluid {
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

body.control-plane-shell #cp-main-content,
body.admin-manager-shell #cp-main-content,
body.control-plane-shell .cp-page-body,
body.admin-manager-shell .cp-page-body {
  padding-inline: var(--rmc-shell-pad-x);
}

body.portal-body-with-layout .portal-main-col > .page-wrap,
body.manager-portal-bridge .portal-main-col > .page-wrap {
  padding-block: var(--rmc-shell-rhythm-y);
  padding-inline: var(--rmc-shell-pad-x);
  max-width: none;
  margin-inline: 0;
}

:is(
    body.control-plane-shell,
    body.admin-manager-shell,
    body.portal-body-with-layout,
    body.backend-shell,
    body.base-document-shell
  )
  :is(#cp-main-content, #main-content, .cp-page-body, .portal-page-body, .page-wrap)
  > :is(.container-fluid, .container) {
  padding-inline: 0;
}

/* Reading-width opt-ins stay centered on dashboard shells (explicit class only). */
:is(
    body.control-plane-shell,
    body.admin-manager-shell,
    body.portal-body-with-layout,
    body.backend-shell
  )
  :is(.content-max-narrow, .content-max-520, .content-max-640) {
  max-inline-size: revert;
  margin-inline: auto;
}

@media (max-width: 991.98px) {
  body.control-plane-shell .rmc-app-shell__canvas-body,
  body.admin-manager-shell .rmc-app-shell__canvas-body,
  body.control-plane-shell .cp-shell-content,
  body.admin-manager-shell .cp-shell-content,
  body.base-document-shell .container-fluid,
  body.backend-shell .container-fluid,
  html[data-surface="marketing"] .mkt-page-wrap,
  html[data-surface="marketing"] main[role="main"] {
    padding-inline: 10px;
  }
}