/** * 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) { grid-template-columns: var(--rmc-app-shell-sidebar-w, clamp(240px, 18vw, 320px)) minmax(0, 1fr) var(--rmc-app-shell-copilot-w, 44px); } [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%; } /* 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; }