/* Values extracted from the existing .graphicPopup.timeProgramDialog cascade.
   The shell owns appearance only; sizes, authored content and backdrop behavior
   remain with their existing components. Loaded last in config and runtime. */
:root {
    --mhome-dialog-background: #f8fafc;
    --mhome-dialog-border: #e2e8f0;
    --mhome-dialog-text: #263746;
    --mhome-dialog-header-background: var(--mhome-dialog-background);
    --mhome-dialog-shadow: 0 24px 80px #0f172a40, 0 4px 16px #0f172a1a;
    --mhome-dialog-radius: 16px;
    --mhome-dialog-width: 1024px;
    --mhome-dialog-confirm-width: 560px;
    --mhome-dialog-min-width: 480px;
    --mhome-space-xs: 6px;
    --mhome-space-sm: 8px;
    --mhome-space-md: 16px;
    --mhome-space-lg: 24px;
    --mhome-dialog-padding: var(--mhome-space-lg);
    --mhome-dialog-title-size: 1.5em;
    --mhome-dialog-control-border: #cbd5e1;
    --mhome-dialog-control-radius: 6px;
    --mhome-dialog-control-background: #fff;
    --mhome-dialog-control-text: #222;
    --mhome-dialog-button-radius: 7px;
    /* Single-line text plus this padding stays below --mhome-control-height (33px). */
    --mhome-button-padding-block: 6px;
    --mhome-button-padding-inline: 12px;
    --mhome-dialog-button-text: #205578;
    --mhome-dialog-button-hover-background: #e2e8f0;
    --mhome-button-primary: #205578;
    --mhome-button-primary-hover: #164e73;
    --mhome-button-primary-active: #1e293b;
    --mhome-button-danger: #b91c1c;
    --mhome-button-danger-hover: #991b1b;
    --mhome-button-danger-active: #7f1d1d;
    --mhome-dialog-close-text: #64748b;
    --mhome-dialog-close-hover-text: #1e293b;
}

/* No class or JavaScript setup is required for a new native mHome dialog. */
:is(dialog, .mhomeDialog) {
    background: var(--mhome-dialog-background);
    color: var(--mhome-dialog-text);
    border: 1px solid var(--mhome-dialog-border);
    border-radius: var(--mhome-dialog-radius);
    box-shadow: var(--mhome-dialog-shadow);
    padding: var(--mhome-dialog-padding);
}

/* All configuration dialogs share one width: 1024px on wide screens, shrinking
   with the window down to the minimum width; only a smaller window goes below it.
   Batch/discovery workspaces, fullscreen and authored project popups
   (graphicPopup, objectControlPopup) retain their own geometry. */
dialog:is(.mhomeDialog, .visualizationDialog, .navigationDialog, .timeProgramDialog,
    .alarmDialog, .trendConfigDialog, .managementWeekDialog, .timeCalendarDialog,
    .baseTemplateDialog, .styleManager, .baseElementConfigDialog, .mediaPicker,
    .ruleSchemaStructureDialog):not(.objectBatchDialog, .mhomeDialogFullscreen, .objectControlPopup) {
    box-sizing: border-box;
    width: clamp(min(var(--mhome-dialog-min-width), calc(100vw - 2 * var(--mhome-space-sm))),
        calc(100vw - 2 * var(--mhome-space-md)), var(--dialog-target-width, var(--mhome-dialog-width)));
    max-width: calc(100vw - 2 * var(--mhome-space-sm));
}
/* Confirmations (delete, execute, duplicate) use the narrower step with the same minimum. */
dialog.mhomeDialogConfirm { --dialog-target-width: var(--mhome-dialog-confirm-width); }

/* Shared layout contract: form/section stacks, field groups, action rows.
   Wrapped labels are field groups too, without JavaScript registration. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) {
    --mhome-dialog-padding: var(--mhome-space-lg);
    --dialog-title-gap: var(--mhome-space-md);
    --dialog-section-gap: var(--mhome-space-lg);
    --dialog-field-gap: var(--mhome-space-md);
    --dialog-label-gap: var(--mhome-space-xs);
    --dialog-action-gap: var(--mhome-space-sm);
}
:is(dialog[open], .mhomeDialog:not(dialog)),
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(form, .mhomeForm, .mhomeDialogBody, .mhomeFormSection):not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *)),
:is(dialog, .mhomeDialog, .mhomeWorkspace) :where(div, section, fieldset):has(> .mhomeFormGroup, > label > input, > label > select, > label > textarea):not(:where(
    .mhomeFormGroup, .visualizationFields, .buttonGroupEditorRow,
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *
)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dialog-field-gap);
    align-content: start;
}
/* Margins never supply field or button spacing. Containers own the rhythm. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(label, input, select, textarea, button, h2, h3, h4, p):not(:where(
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mediaItem *
)) { margin: 0; }
:is(dialog, .mhomeDialog, .mhomeWorkspace) label > :is(input, select, textarea):not(:where(
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *
)) { margin: 0; }
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.mhomeFormGroup, label:has(> input, > select, > textarea)):not(:where(
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *
)) {
    display: flex;
    flex-direction: column;
    gap: var(--dialog-label-gap);
    min-width: 0;
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) label:has(> :is([type=checkbox], [type=radio]):only-child):not(:where(
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *
)) { flex-direction: row; align-items: center; }
:is(dialog, .mhomeDialog, .mhomeWorkspace) label > :is([type=checkbox], [type=radio]):not(:where(
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *
)) { width: auto; flex: 0 0 auto; align-self: start; }
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(form, .mhomeForm, .mhomeDialogBody, .mhomeFormSection) > :is(div, p):empty,
:is(dialog, .mhomeDialog, .mhomeWorkspace) p:empty,
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.mhomeForm, .mhomeFormSection, .visualizationFields):not(:has(> :not([hidden]))) { display: none; }
:is(dialog, .mhomeDialog, .mhomeWorkspace) [hidden] { display: none !important; }

/* Opt-in shell for long configuration forms. Only the body scrolls; the
   existing header, controls and action row keep the common UI scale. */
dialog.mhomeDialogScrollable {
    box-sizing: border-box;
    max-inline-size: calc(100vw - 2 * var(--mhome-space-md));
    max-block-size: calc(100dvh - 2 * var(--mhome-space-md));
    overflow: hidden;
}
dialog.mhomeDialogScrollable[open] { display: flex; flex-direction: column; }
dialog.mhomeDialogScrollable > form.mhomeForm {
    /* Keep the intrinsic form height in an auto-height dialog. A zero flex
       basis can collapse the entire form behind overflow:hidden. */
    flex: 1 1 auto;
    min-block-size: 0;
    min-inline-size: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}
dialog.mhomeDialogScrollable > form > .mhomeDialogBody,
dialog.mhomeDialogScrollable > .mhomeDialogBody {
    min-block-size: 0;
    min-inline-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
/* Explicit section stacks allow complex editors to group fields without
   introducing feature-specific field or section margins. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) .mhomeFormSections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dialog-section-gap);
    min-width: 0;
    align-content: start;
}

/* Side-by-side groups (e.g. permission groups). Columns of at least 220px fill
   the dialog width and collapse to one column on narrow dialogs. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) .mhomeFormColumns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: var(--dialog-section-gap);
    align-items: start;
    min-width: 0;
}

/* Fullscreen analysis uses the same shell, with a non-scrolling header. */
dialog.mhomeDialogFullscreen {
    box-sizing: border-box;
    max-inline-size: calc(100vw - 2 * var(--mhome-space-sm));
    max-block-size: calc(100dvh - 2 * var(--mhome-space-sm));
    overflow: hidden;
}
dialog.mhomeDialogFullscreen[open] { display:grid; grid-template-rows:auto minmax(0,1fr); }
dialog.mhomeDialogFullscreen > .mhomeDialogHeader { position:relative; z-index:1; min-width:0; }
dialog.mhomeDialogFullscreen > .mhomeFullscreenBody { min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; }

/* Inline actions and the footer share button gaps, with no button margins. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.mhomeActions, .mhomeDialogActions, .visualizationActions, .navigationActions, .pageHeaderActions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dialog-action-gap);
    margin: 0;
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) .mhomeDialogActions {
    justify-content: flex-end;
    margin-block-start: calc(var(--dialog-section-gap) - var(--dialog-field-gap));
    padding-block-start: var(--mhome-space-md);
    border-block-start: 1px solid var(--mhome-dialog-border);
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.mhomeActions, .mhomeDialogActions, .visualizationActions, .navigationActions, .pageHeaderActions) > button {
    margin: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Existing compound editors keep their columns; their spacing uses the tokens. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.buttonGroupEditorRow, .visualizationFields) {
    gap: var(--mhome-space-md);
    margin: 0;
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) .buttonGroupEditorRow { padding-block: 0; }
:is(dialog, .mhomeDialog, .mhomeWorkspace) .valueImageMapping {
    margin: 0;
    padding: var(--mhome-space-md);
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) .mediaGrid { margin: 0; gap: var(--mhome-space-md); }
@media (max-width: 600px) {
    :is(dialog, .mhomeDialog, .mhomeWorkspace) {
        --mhome-space-md: 12px;
        --mhome-space-lg: 16px;
    }
}

/* Plain form titles and existing popup headers share the time-program title.
   Keep the existing header nodes intact: drag handlers are attached to them. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) > :is(h2, h3),
:is(dialog, .mhomeDialog, .mhomeWorkspace) > form > :is(h2, h3):first-child,
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupHeader, .mhomeDialogHeader) {
    background: var(--mhome-dialog-header-background);
    color: var(--mhome-dialog-text);
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) > :is(h2, h3),
:is(dialog, .mhomeDialog, .mhomeWorkspace) > form > :is(h2, h3):first-child,
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupHeader, .mhomeDialogHeader) > :is(h2, h3) {
    font-size: var(--mhome-dialog-title-size);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}
:is(.graphicPopupHeader, .mhomeDialogHeader) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dialog-title-gap, 16px);
    margin: 0;
}
:is(.graphicPopupHeader, .mhomeDialogHeader) > :is(h2, h3) { margin: 0; }

/* Reuse the existing time-program field/button treatment across normal forms.
   Never restyle configured graphics, live controls, previews or media cards. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(input, select, textarea):not(:where(
    [type=checkbox], [type=radio], [type=range], [type=color], [type=hidden],
    .graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *
)) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mhome-dialog-control-border);
    border-radius: var(--mhome-dialog-control-radius);
    background: var(--mhome-dialog-control-background);
    color: var(--mhome-dialog-control-text);
    font: inherit;
}
/* Colour fields: the global input padding would collapse the native swatch.
   Same outer height and frame as text controls, visible swatch inside. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) input[type=color]:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *)) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(1.2em + 22px);
    padding: 4px;
    border: 1px solid var(--mhome-dialog-control-border);
    border-radius: var(--mhome-dialog-control-radius);
    background: var(--mhome-dialog-control-background);
    cursor: pointer;
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) input[type=color]:disabled { opacity: .45; cursor: not-allowed; }
/* Secondary is the default. Explicit semantics take precedence over submit. */
:is(:is(dialog, .mhomeDialog, .mhomeWorkspace) button:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mhomeTableName)), button.mhomeButton) {
    --button-bg: var(--mhome-dialog-background);
    --button-hover: var(--mhome-dialog-button-hover-background);
    --button-active: #cbd5e1;
    --button-text: var(--mhome-dialog-button-text);
    --button-border: var(--mhome-dialog-control-border);
    font: inherit;
    border: 1px solid var(--button-border);
    border-radius: var(--mhome-dialog-button-radius);
    background: var(--button-bg);
    color: var(--button-text);
    padding: var(--mhome-button-padding-block) var(--mhome-button-padding-inline);
    cursor: pointer;
    width: auto;
    margin: 0;
}
:is(:is(dialog, .mhomeDialog, .mhomeWorkspace) button:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mhomeTableName)), button.mhomeButton):is(.primary, [type=submit]:not(.secondary, .danger, .dangerButton)) {
    --button-bg: var(--mhome-button-primary);
    --button-hover: var(--mhome-button-primary-hover);
    --button-active: var(--mhome-button-primary-active);
    --button-text: #fff;
    --button-border: var(--button-bg);
}
:is(:is(dialog, .mhomeDialog, .mhomeWorkspace) button:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mhomeTableName)), button.mhomeButton):is(.danger, .dangerButton) {
    --button-bg: var(--mhome-button-danger);
    --button-hover: var(--mhome-button-danger-hover);
    --button-active: var(--mhome-button-danger-active);
    --button-text: #fff;
    --button-border: var(--button-bg);
}
:is(:is(dialog, .mhomeDialog, .mhomeWorkspace) button:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mhomeTableName)), button.mhomeButton):hover:enabled { background: var(--button-hover); }
:is(:is(dialog, .mhomeDialog, .mhomeWorkspace) button:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mhomeTableName)), button.mhomeButton):active:enabled { background: var(--button-active); }
:is(:is(dialog, .mhomeDialog, .mhomeWorkspace) button:not(:where(.graphicSurface *, .baseLibraryPreview *, .baseTemplatePreview *, .stylePreview *, .object *, .mediaItem, .mhomeTableName)), button.mhomeButton):disabled {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: var(--button-border);
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

/* The shared icon close control, including the existing runtime/preview class. */
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupClose, .mhomeDialogClose) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mhome-dialog-close-text);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupClose, .mhomeDialogClose) span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupClose, .mhomeDialogClose):hover:enabled {
    background: var(--mhome-dialog-border);
    color: var(--mhome-dialog-close-hover-text);
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupClose, .mhomeDialogClose):active:enabled {
    background: var(--mhome-dialog-control-border);
}
:is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupClose, .mhomeDialogClose):disabled {
    background: transparent;
    color: var(--mhome-dialog-close-text);
}
@media (prefers-reduced-motion: reduce) {
    :is(dialog, .mhomeDialog, .mhomeWorkspace) :is(.graphicPopupClose, .mhomeDialogClose) { transition: none; }
}

/* Remote engineering uses the shared shell and controls; only content arrangement. */
dialog.knxImportDialog { --dialog-target-width: 1700px; }
dialog.bacnetImportDialog { --dialog-target-width: 1700px; }
.remoteEngineeringDialog .gatewayTableWrapper { min-width:0; max-width:100%; overflow:auto; }
.remoteEngineeringDialog .pageHeaderActions { flex-wrap:wrap; justify-content:flex-end; }
.remoteEngineeringDialog pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.remoteFacts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--dialog-field-gap); }
.remoteFacts dd { margin:0; overflow-wrap:anywhere; }

/* Routed engineering fills the normal appPage; only tables scroll sideways. */
.remoteEngineeringPage { min-width:0; max-width:100%; }
.remoteEngineeringPage :is(section, form, nav, .pageHeaderActions) { min-width:0; }
.remoteEngineeringPage .pageHeaderActions { justify-content:flex-end; }
.remoteEngineeringPage .gatewayTableWrapper { max-width:100%; }
/* Action buttons wrap so fitted engineering tables keep their data columns visible. */
:is(.remoteEngineeringPage, .remoteEngineeringDialog) .gatewayTableWrapper > table .visualizationActions { flex-wrap:wrap; white-space:normal; max-width:360px; }
.remoteEngineeringPage pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.remoteEngineeringPage .remoteWorkActions { position:sticky; bottom:0; background:#fff; z-index:2; }
.remoteEngineeringPage .pageHeader { margin-bottom:0; }
.remoteEngineeringPage .remoteTabs { padding-bottom:var(--mhome-space-md); border-bottom:1px solid #e2e8f0; }
.remoteEngineeringPage .remoteDetailNav { align-items:center; }
.remoteEngineeringPage .remoteDetailNav > h3 { margin:0; }
.remoteEngineeringPage button.mhomeButton.secondary {
    --button-bg: var(--mhome-button-neutral-background);
    --button-hover: var(--mhome-button-neutral-hover);
    --button-active: var(--mhome-button-neutral-hover);
    --button-text: var(--mhome-button-neutral-text);
    --button-border: var(--mhome-button-neutral-background);
}
.remoteEngineeringPage nav [aria-current=page] { background:var(--mhome-button-primary); color:white; }

.remoteDiscoveryControls > .mhomeFormGroup { flex:0 1 260px; }
.remoteDiscoveryControls { align-items:flex-end !important; }

.remoteBatchTools > details[open] { flex-basis:100%; }

.cloudRebindDialog{width:min(1100px,calc(100vw - 48px))}

/* Shared automation editor arrangement; control sizes belong to the UI foundation. */
dialog.automationDialog { width:1040px; }
.automationRows { display:grid; gap:var(--dialog-field-gap); min-width:0; }
.automationRows:empty, .automationIssues:empty { display:none; }
.automationRow { display:grid; gap:var(--dialog-field-gap); align-items:end; min-width:0; }
.automationConditionRow { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; }
.automationActionRow { grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; }
.automationRow > .mhomeActions { flex-wrap:nowrap; }
.automationIssues { margin:0; padding-left:1.2em; }
@media (max-width:760px) { .automationConditionRow, .automationActionRow { grid-template-columns:minmax(0,1fr); } }
/* Anlagen & Betriebsmittel: detail view with link tables (docs/plant-assets.md). */
dialog.plantAssetDetail { --dialog-target-width: 1400px; }
.plantAssetDetail .gatewayTableWrapper { min-width:0; max-width:100%; overflow:auto; }
/* Final deletion: usage check by category (docs/plant-assets.md). */
.plantAssetHint { color:#64748b; font-size:12px; }
.plantAssetStrong { font-weight:600; }
.plantAssetUsage { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.plantAssetUsage > button, .plantAssetDetail li > button { width:auto; margin-top:0; }
.plantAssetCheck { display:flex; align-items:center; gap:6px; }
.plantAssetCheck input { width:auto; }