/* Shared page canvases retain their existing workflow components and controls. */
.design-editor-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 12px; background: #fff; border: 1px solid #dce6f0; border-radius: 9px; }
.design-editor-tabs .button { min-height: 35px; font-size: 12px; }
.platform-designed-login { max-width: 1440px; margin: 24px auto; padding: 0 20px; }
.platform-designed-login > #main { width: 100%; }
[data-platform-design-page="login"] .ef-access-header { padding: 12px; min-height: 75px; }
[data-platform-design-page="login"] .ef-access-hero { min-height: 260px; }
[data-platform-design-page="login"] .ef-access-intro { padding: 24px; }
[data-platform-design-page="login"] .ef-login-card { width: 100%; margin: 0; box-sizing: border-box; }
[data-platform-design-page="shell"] .utility-bar,
[data-platform-design-page="shell"] .global-header,
[data-platform-design-page="shell"] .app-nav { position: static; width: 100%; }
.platform-design-live { position: relative; isolation: isolate; min-width: 0; width: 100%; transform: translateZ(0); }
.platform-design-block { position: absolute; min-width: 0; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.platform-design-section > .card { margin: 0; min-height: 100%; }
.platform-design-section > .page-heading { margin-top: 0; }
.platform-design-region-heading { margin: 0 0 14px; font-size: inherit; line-height: inherit; color: inherit; }
.platform-design-text { padding: 12px 16px; white-space: pre-wrap; }
.platform-design-text-content h2 { margin: 0 0 12px; font-size: inherit; line-height: inherit; color: inherit; }
.platform-design-text-content p { margin: 0; }
.platform-design-text-content .case-formatted-list { margin: 0; padding-inline-start: 1.5em; white-space: normal; }
.platform-design-text-content .case-formatted-list li { white-space: pre-wrap; }
.platform-design-button { display: flex; align-items: stretch; }
.platform-design-action { display: flex; width: 100%; min-height: 40px; height: 100%; justify-content: center; align-items: center; font: inherit; text-align: inherit; white-space: normal; }
/* A design button's visible control occupies the whole resized component. */
.design-button-block { box-sizing: border-box; padding: 0; overflow: visible; }
.button.design-button-control { box-sizing: border-box; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; flex: none; margin: 0; padding: 0; overflow: hidden; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; text-align: inherit; text-decoration: inherit; white-space: normal; overflow-wrap: anywhere; }
.button.design-button-control > span { display: block; width: 100%; min-width: 0; font: inherit; line-height: inherit; text-align: inherit; text-decoration: inherit; }
.platform-design-section[data-platform-design-text-color] :is(h1,h2,h3,.card-title,.card-subtitle,.form-label),
.platform-design-section[data-platform-design-text-color] :is(.ef-hero-copy,.auth-heading,.welcome-copy,.ef-access-intro) > p { color: var(--platform-design-text-color); }
.platform-design-block[data-platform-design-font-family] :is(h1,h2,h3,.card-title,.form-label,.form-input,.form-textarea,.filter-select) { font-family: var(--platform-design-font-family); }
.platform-design-block[data-platform-design-font-size] :is(h1,h2,h3,.card-title,.form-label) { font-size: var(--platform-design-font-size); }
.platform-design-block[data-platform-design-bold] :is(h1,h2,h3,.card-title,.form-label) { font-weight: var(--platform-design-font-weight); }
.platform-design-block[data-platform-design-italic] :is(h1,h2,h3,.card-title,.form-label) { font-style: var(--platform-design-font-style); }
.platform-design-block[data-platform-design-decoration] :is(h1,h2,h3,.card-title,.form-label) { text-decoration: var(--platform-design-text-decoration); }
.platform-design-block[data-platform-design-line-height] :is(h1,h2,h3,.card-title,.card-subtitle,.form-label) { line-height: var(--platform-design-line-height); }
/* Native controls, status badges, warning banners and priority colors retain
   their functional styling. Only page/workflow surfaces receive a chosen fill. */
.platform-design-section[data-platform-design-background-color] :is(.card,.auth-card,.ef-login-card,.metric-card,.welcome-banner,.ef-access-hero,.ef-access-header,.ef-access-intro,.global-header,.app-nav,.portal-header,.portal-footer,.utility-bar,.workspace,.logistics-card,.field-service-card) { background: var(--platform-design-background-color); }
.platform-design-block :is(input,select,textarea) { max-width: 100%; }
.platform-design-preview a[inert] { cursor: default; }
.platform-design-preview a[inert], .platform-design-preview :disabled { pointer-events: none; }
/* Login components normally live inside the access-page grid. Their page-design
   slots instead provide their own independent canvas geometry. */
[data-platform-design-page="login"] { min-height: 400px; }
[data-platform-design-page="login"] .platform-design-section > .ef-access-hero,
.platform-design-section-sample[data-platform-design-page="login"] > .ef-access-hero { height: clamp(260px, 21vw, 385px); min-height: 260px; }
[data-platform-design-page="login"] .platform-design-section > .ef-access-intro { padding: 28px; max-width: none; }
[data-platform-design-page="login"] .platform-design-section > .ef-login-card { width: 100%; min-height: 100%; box-sizing: border-box; margin: 0; }
[data-platform-design-page="shell"] > [data-platform-design-source="workspace"] { overflow: auto; }
[data-platform-design-page="portal"] > [data-platform-design-source="workspace"] { min-width: 0; }
.case-editor-preview[data-device="desktop"] > .platform-design-live { width: var(--platform-design-width, 1200px); }
.case-editor-preview[data-device="mobile"] > .platform-design-live { max-width: 390px; }
@media (max-width: 900px) {
  .platform-design-live:not(.case-editor-preview[data-device="desktop"] .platform-design-live) { display: flex; flex-direction: column; gap: 16px; height: auto !important; }
  .platform-design-live:not(.case-editor-preview[data-device="desktop"] .platform-design-live) > .platform-design-block { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 40px; max-width: 100%; overflow: visible; }
  .platform-design-live:not(.case-editor-preview[data-device="desktop"] .platform-design-live) > .platform-design-section > .card { min-height: 0; }
  .platform-design-live:not(.case-editor-preview[data-device="desktop"] .platform-design-live) .platform-design-action { height: auto; min-height: 44px; }
  .platform-design-live:not(.case-editor-canvas *):not(.case-editor-preview[data-device="desktop"] *) [data-platform-element-sized]:not([data-design-placement-parent]):not([data-design-placement-mobile]) { max-width: 100% !important; min-width: 0 !important; height: auto !important; translate: none !important; flex: 0 1 auto !important; }
  [data-platform-design-page="login"] .platform-design-section > .ef-access-intro { display: block; padding: 20px; }
  [data-platform-design-page="login"] .platform-design-section > .ef-access-hero,
  .platform-design-section-sample[data-platform-design-page="login"] > .ef-access-hero { height: auto; }
}
/* A mobile preview reflows even when the editor itself is on a desktop. */
.case-editor-preview[data-device="mobile"] > .platform-design-live { display: flex; flex-direction: column; gap: 16px; height: auto !important; }
.case-editor-preview[data-device="mobile"] > .platform-design-live > .platform-design-block { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 40px; overflow: visible; }
.case-editor-preview[data-device="mobile"] > .platform-design-live > .platform-design-section > .card { min-height: 0; }
.case-editor-preview[data-device="mobile"] .platform-design-action { height: auto; min-height: 44px; }
.case-editor-preview[data-device="mobile"] .platform-design-live [data-platform-element-sized]:not([data-design-placement-parent]):not([data-design-placement-mobile]) { max-width: 100% !important; min-width: 0 !important; height: auto !important; translate: none !important; flex: 0 1 auto !important; }
.case-editor-preview[data-device="mobile"] .platform-design-live[data-platform-design-page="dashboard"] .welcome-banner.welcome-overview { grid-template-columns: minmax(0, 1fr); padding: 21px; gap: 22px; }
.case-editor-preview[data-device="mobile"] .platform-design-live[data-platform-design-page="dashboard"] .welcome-overview > .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.case-editor-preview[data-device="mobile"] .platform-design-live[data-platform-design-page="dashboard"] .welcome-overview .metric-card { min-width: 0; min-height: 124px; padding: 16px 14px; }
/* Removed source sections still own working transferred controls. Keep their
   invisible frame out of mobile flow without hiding its visible descendants. */
.platform-design-live[data-design-layout="mobile"] > .platform-design-block[data-platform-design-block][data-design-placement-ghost],
.case-design-live[data-design-layout="mobile"] .case-design-panel > .case-design-block[data-design-block-id][data-design-placement-ghost] { position: absolute !important; left: 0 !important; top: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.platform-design-live[data-design-layout="mobile"] [data-design-mobile-slot],
.case-design-live[data-design-layout="mobile"] [data-design-mobile-slot] { grid-column: 1 / -1; width: 100%; min-width: 0; pointer-events: none; }

/* Canvas samples show the application's actual objects. The editor captures
   their actions and uses these targets solely for selection and presentation. */
.case-editor-block-content:has(.platform-design-section-sample) { padding: 0; }
.case-editor-section-sample:has(> .platform-design-section-sample) { height: auto; min-width: 0; }
.case-editor-section-sample > .platform-design-section-sample { display: block; grid-template-columns: none; gap: 0; }
.platform-design-section-sample { position: relative; min-width: 0; width: 100%; height: auto; box-sizing: border-box; overflow: visible; pointer-events: none; user-select: none; }
.platform-design-section-sample > .card { min-height: 0; }
.platform-design-section-sample[data-platform-design-page="login"] { min-height: 0; }
.platform-design-section-sample[data-platform-design-page="login"] > .ef-login-card { min-height: 0; }
/* Designed service sections can be narrower than the viewport. Preserve the
   detail controls' intrinsic minimum so fitting measures their real width
   rather than collapsing their card to its borders and clipping its content. */
@media (min-width: 651px) {
  .platform-design-section .service-grid { grid-template-columns: minmax(240px, 320px) minmax(min-content, 1fr); }
}
.platform-design-section-sample [data-platform-element] { pointer-events: auto; touch-action: manipulation; cursor: pointer; }
.platform-design-section-sample [data-platform-element]:hover { outline: 1px dashed #7aaedd; outline-offset: 1px; }
.platform-design-section-sample [data-platform-element][aria-selected="true"],
.platform-design-section-sample [data-platform-element][data-platform-element-selected="true"] { outline: 2px solid #0876d3; outline-offset: 2px; }
.platform-design-section-sample :is(input,textarea,select) { caret-color: transparent; }
.platform-design-section-sample .platform-design-live { height: auto !important; }
.case-editor-canvas .platform-design-live, .case-editor-canvas .case-design-live { transform: none; }
[data-design-placement-path] { isolation: auto; }

/* A selected real container can own typography too. Resolve its own validated
   variables through nested component wrappers, without resetting unrelated
   objects or semantic status/priority styles. Direct object styles still win. */
[data-platform-element-styled][style*="--platform-design-text-color:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.card-subtitle,.form-label) { color: var(--platform-design-text-color); }
[data-platform-element-styled][style*="--platform-design-font-family:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.form-label,.form-input,.form-textarea,.filter-select) { font-family: var(--platform-design-font-family); }
[data-platform-element-styled][style*="--platform-design-font-size:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.form-label) { font-size: var(--platform-design-font-size); }
[data-platform-element-styled][style*="--platform-design-font-weight:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.form-label) { font-weight: var(--platform-design-font-weight); }
[data-platform-element-styled][style*="--platform-design-font-style:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.form-label) { font-style: var(--platform-design-font-style); }
[data-platform-element-styled][style*="--platform-design-text-decoration:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.form-label) { text-decoration: var(--platform-design-text-decoration); }
[data-platform-element-styled][style*="--platform-design-line-height:"] :is(h1,h2,h3,h4,h5,h6,p,.card-title,.card-subtitle,.form-label) { line-height: var(--platform-design-line-height); }
[data-platform-element-styled][style*="--platform-design-background-color:"] :is(.card,.auth-card,.ef-login-card,.metric-card,.welcome-banner,.ef-access-hero,.ef-access-header,.ef-access-intro,.global-header,.app-nav,.portal-header,.portal-footer,.utility-bar,.workspace,.logistics-card,.field-service-card) { background: var(--platform-design-background-color); }