/** * rmc-isomorphic-grid.css — Isomorphic Design System Grid (v3.90.59) * ------------------------------------------------------------------- * Locks viewport boundaries, geometric spacing (8px base), typographic * overflow immunity, and balanced split-pane columns across operator, * tenant, and onboarding surfaces. Composes on rmc-app-shell.css (100vh * document lock + canvas scroll) and preview HTML north stars: * - manager v8 200x → operator-control-plane (3-col + copilot) * - admin v1 200x → tenant-admin-hub (2-col backoffice density) * - tenant portal v3 → tenant-admin-hub (2-col, 24px rhythm) * - signup / studio → onboarding-wizard (1-col, 32px, 1200px cap) * * Template selector: data-rmc-isomorphic-template on or shell root. */ /* ── 8px geometric spacing scale (maps to design-tokens --token-space-*) ── */ :root, [data-rmc-isomorphic-template] { --rmc-iso-grid-unit: var(--dashboard-space-unit, 8px); --rmc-iso-space-1: var(--rmc-iso-grid-unit); /* 8px */ --rmc-iso-space-2: calc(var(--rmc-iso-grid-unit) * 2); /* 16px */ --rmc-iso-space-3: calc(var(--rmc-iso-grid-unit) * 3); /* 24px */ --rmc-iso-space-4: calc(var(--rmc-iso-grid-unit) * 4); /* 32px */ --rmc-iso-gap: var(--rmc-iso-space-2); --rmc-iso-panel-pad: var(--rmc-iso-space-2); --rmc-iso-canvas-pad-x: var(--rmc-iso-space-3); --rmc-iso-canvas-pad-y: var(--rmc-iso-space-2); --rmc-iso-split-max-h: 100dvh; --rmc-iso-wizard-max: 75rem; /* 1200px */ } /* Template 1 — Operator control plane (/super/): high-density 12px pad */ [data-rmc-isomorphic-template="operator-control-plane"] { --rmc-iso-panel-pad: 0.75rem; /* 12px */ --rmc-iso-canvas-pad-x: clamp(12px, 2vw, 24px); --rmc-iso-canvas-pad-y: var(--rmc-iso-space-2); --rmc-iso-gap: var(--rmc-iso-space-1); } /* Template 2 — Tenant administration hub: balanced 24px pad */ [data-rmc-isomorphic-template="tenant-admin-hub"] { --rmc-iso-panel-pad: var(--rmc-iso-space-3); --rmc-iso-canvas-pad-x: var(--rmc-iso-space-3); --rmc-iso-canvas-pad-y: var(--rmc-iso-space-3); --rmc-iso-gap: var(--rmc-iso-space-3); } /* Template 3 — Onboarding wizard: generous 32px, centered column */ [data-rmc-isomorphic-template="onboarding-wizard"] { --rmc-iso-panel-pad: var(--rmc-iso-space-4); --rmc-iso-canvas-pad-x: var(--rmc-iso-space-4); --rmc-iso-canvas-pad-y: var(--rmc-iso-space-4); --rmc-iso-gap: var(--rmc-iso-space-4); } /* ── Viewport-locked shell reinforcement (extends rmc-app-shell) ── */ html:not([data-rmc-shell="off"]) .rmc-app-shell { max-height: var(--rmc-iso-split-max-h); overflow: hidden; } html:not([data-rmc-shell="off"]) .rmc-app-shell__canvas, html:not([data-rmc-shell="off"]) .rmc-app-shell__sidebar { min-height: 0; max-height: 100%; } /* Canvas interior uses isomorphic padding tokens */ [data-rmc-isomorphic-template] .rmc-app-shell__canvas-body, [data-rmc-isomorphic-template] #cp-main-content, [data-rmc-isomorphic-template] #main-content .portal-page-body, [data-rmc-isomorphic-template] #content-main { padding-inline: var(--rmc-iso-canvas-pad-x); padding-block: var(--rmc-iso-canvas-pad-y); gap: var(--rmc-iso-gap); } /* ── Split-pane matrix: equal-height columns, isolated scroll ── */ .rmc-iso-grid { display: grid; gap: var(--rmc-iso-gap); width: 100%; min-width: 0; min-height: 0; align-items: stretch; } .rmc-iso-grid--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .rmc-iso-grid--3col { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } .rmc-iso-grid--balanced { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rmc-iso-grid--sidebar-main { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); } @media (max-width: 991.98px) { .rmc-iso-grid--2col, .rmc-iso-grid--3col, .rmc-iso-grid--balanced { grid-template-columns: minmax(0, 1fr); } } /* Locked split-pane: columns scroll independently inside viewport */ .rmc-iso-split-pane { display: grid; grid-template-columns: inherit; gap: inherit; min-height: 0; max-height: min(100%, calc(100dvh - var(--rmc-app-shell-header-h, 64px) - 2rem)); height: 100%; width: 100%; } .rmc-iso-split-pane__col { display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: 100%; overflow: hidden; padding: var(--rmc-iso-panel-pad); background: var(--surface-canvas, var(--surface-bg)); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 8px); } .rmc-iso-split-pane__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Operator 3-col binds to app-shell sidebar + canvas + copilot */ [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell:not(.rmc-app-shell--no-sidebar)[data-rmc-app-shell-copilot="1"] { grid-template-columns: var(--rmc-app-shell-sidebar-w, clamp(240px, 18vw, 320px)) minmax(0, 1fr) var(--rmc-app-shell-copilot-w, 44px); grid-template-areas: "rmc-shell-h rmc-shell-h rmc-shell-h" "rmc-shell-sb rmc-shell-cv rmc-shell-cp" "rmc-shell-f rmc-shell-f rmc-shell-f"; } [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell__sidebar, [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell__canvas, [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell__copilot { align-self: stretch; max-height: 100%; } [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell[data-rmc-app-shell-copilot="1"] > .rmc-app-shell__copilot { grid-area: rmc-shell-cp; grid-row: 2; grid-column: 3; width: var(--rmc-app-shell-copilot-w, 44px); max-width: var(--rmc-app-shell-copilot-w, 44px); } /* Phone collapse for the operator 3-col bind. The rule above is specificity (0,3,0) and had NO mobile breakpoint, so it overrode every lower-specificity collapse (base rmc-app-shell.css @media, rmc-cp-200x.css) and kept the sidebar+canvas+copilot 3-column layout on phones — crushing the canvas to a ~66px sliver and painting the 280px sidebar over the page content (the MFA "Verify" card rendered behind the nav). Collapse to one column and hide the static sidebar at the same breakpoint the base shell uses; offcanvas drawer mode still slides the sidebar in over the canvas. */ @media (max-width: 991.98px) { [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell:not(.rmc-app-shell--no-sidebar) { grid-template-columns: 1fr; } [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell__sidebar { display: none; } [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell__canvas { grid-column: 1 / -1; } [data-rmc-isomorphic-template="operator-control-plane"] .rmc-app-shell[data-rmc-shell-sidebar="offcanvas"] .rmc-app-shell__sidebar { display: block; } } /* Onboarding wizard: single centered column */ [data-rmc-isomorphic-template="onboarding-wizard"] .rmc-iso-wizard-shell, [data-rmc-isomorphic-template="onboarding-wizard"] [data-rmc-isomorphic-wizard="1"] { width: 100%; max-width: var(--rmc-iso-wizard-max); margin-inline: auto; padding: var(--rmc-iso-panel-pad); } [data-rmc-isomorphic-template="onboarding-wizard"] .rmc-iso-wizard-steps { display: flex; flex-wrap: wrap; gap: var(--rmc-iso-space-1); justify-content: center; margin-bottom: var(--rmc-iso-space-3); } [data-rmc-isomorphic-template="onboarding-wizard"] .rmc-iso-wizard-step { flex: 0 1 auto; min-width: 0; padding: var(--rmc-iso-space-1) var(--rmc-iso-space-2); border-radius: var(--radius-sm, 8px); border: 1px solid var(--hairline); font-size: var(--type-size-sm, 0.875rem); } @media (max-width: 575.98px) { [data-rmc-isomorphic-template="onboarding-wizard"] .rmc-iso-wizard-step__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [data-rmc-isomorphic-template="onboarding-wizard"] .rmc-iso-wizard-step::before { content: attr(data-step-index); font-weight: 600; } } /* ── Typographic overflow guard (i18n / RTL safe) ── */ .rmc-text-container, [data-rmc-text-clamp="1"] { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rmc-text-clamp-2, [data-rmc-text-clamp="2"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; } [dir="rtl"] .rmc-text-container, [dir="rtl"] [data-rmc-text-clamp="1"] { direction: rtl; text-align: start; } /* Buttons, pills, table cells — layout-immune to long strings */ .rmc-iso-grid .btn, .rmc-iso-grid .cp-primary-nav__pill, .rmc-iso-grid .tp-primary-nav__pill, .rmc-data-table td, .rmc-data-table th, .rmc-card__title, .rmc-stat-card__label { min-width: 0; max-width: 100%; } .rmc-data-table td:not(.rmc-data-table__cell--wrap), .rmc-data-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rmc-data-table__cell--wrap { white-space: normal; word-break: break-word; } /* Tooltip affordance when clipped (JS sets data-rmc-text-overflow="1") */ [data-rmc-text-overflow="1"] { cursor: help; text-decoration: underline dotted var(--text-secondary, currentColor); text-underline-offset: 0.15em; } .rmc-text-tooltip { position: fixed; z-index: 1080; max-width: min(24rem, calc(100vw - 2rem)); padding: var(--rmc-iso-space-1) var(--rmc-iso-space-2); border-radius: var(--radius-sm, 8px); background: var(--surface-elevated, var(--surface-bg)); color: var(--text-primary); border: 1px solid var(--hairline); box-shadow: var(--elev-2, var(--elev-1)); font-size: var(--type-size-sm, 0.875rem); line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--motion-fast, 120ms) var(--ease-standard, ease), transform var(--motion-fast, 120ms) var(--ease-standard, ease); } .rmc-text-tooltip[data-rmc-text-tooltip-visible="1"] { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .rmc-text-tooltip { transition: none; } } /* ── Empty panel footprint (no awkward blank gaps) ── */ .rmc-iso-panel-empty, [data-rmc-panel-empty="1"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rmc-iso-space-2); min-height: min(12rem, 40vh); width: 100%; padding: var(--rmc-iso-space-3); border: 1px dashed var(--hairline); border-radius: var(--radius-sm, 8px); background: var(--surface-canvas, var(--surface-bg)); color: var(--text-secondary); text-align: center; } .rmc-iso-panel-empty__title { margin: 0; color: var(--text-primary); font-size: var(--type-size-md, 1rem); font-weight: 600; } .rmc-iso-panel-empty__message { margin: 0; max-width: 28rem; font-size: var(--type-size-sm, 0.875rem); } /* Auto empty-state when panel has zero substantive children */ [data-rmc-iso-panel="1"]:empty, [data-rmc-iso-panel="1"][data-rmc-panel-records="0"]:not(:has(.rmc-empty, .cp-empty, .tp-empty, .rmc-iso-panel-empty)) { min-height: min(10rem, 35vh); } [data-rmc-iso-panel="1"]:empty::after, [data-rmc-iso-panel="1"][data-rmc-panel-records="0"]:not(:has(.rmc-empty, .cp-empty, .tp-empty, .rmc-iso-panel-empty))::after { content: attr(data-rmc-panel-empty-message); display: flex; align-items: center; justify-content: center; min-height: inherit; padding: var(--rmc-iso-space-3); border: 1px dashed var(--hairline); border-radius: var(--radius-sm, 8px); color: var(--text-secondary); font-size: var(--type-size-sm, 0.875rem); text-align: center; } /* Geometric spacing utilities (prefer over ad-hoc margins) */ .rmc-iso-gap-1 { gap: var(--rmc-iso-space-1) !important; } .rmc-iso-gap-2 { gap: var(--rmc-iso-space-2) !important; } .rmc-iso-gap-3 { gap: var(--rmc-iso-space-3) !important; } .rmc-iso-gap-4 { gap: var(--rmc-iso-space-4) !important; } .rmc-iso-pad-1 { padding: var(--rmc-iso-space-1) !important; } .rmc-iso-pad-2 { padding: var(--rmc-iso-space-2) !important; } .rmc-iso-pad-3 { padding: var(--rmc-iso-space-3) !important; } .rmc-iso-pad-4 { padding: var(--rmc-iso-space-4) !important; }