/* UTU Engine — Applications / Application detail dark palette parity with Analytics.
 * Scoped exclusively to Dark Mode; no business logic, geometry, semantic colors, or chart changes.
 * Loaded after legacy CSS to settle the cascade without altering shared light surfaces.
 * Existing --utu-* tokens are defined in utu-unified-navy.css.
 */

/* Catalog: remove the old bright-blue gradient while preserving the relationship graph.
 * Status pills, provider marks and dependency graph edge colors remain semantic. */
:root[data-theme="dark"] #applications-list .application-v2-card {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #applications-list .application-v2-card:is(:hover,:focus-within) {
  background:var(--utu-panel-hover)!important;
  border-color:var(--utu-highlight)!important;
  box-shadow:0 0 0 1px rgba(67,209,221,.12)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-avatar {
  background:var(--utu-panel-soft)!important;
  border:1px solid var(--utu-stroke);
  color:var(--utu-highlight)!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #applications-list .application-v2-text h3 {
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-subtitle {
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-open {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-open:hover {
  background:var(--utu-panel-hover)!important;
  border-color:var(--utu-highlight)!important;
  color:var(--utu-highlight)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-open:focus-visible {
  outline:2px solid var(--utu-highlight)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-toolbar,
:root[data-theme="dark"] #applications-list .application-v2-legend {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-toolbar button {
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #applications-list .application-v2-toolbar button:is(:hover,:focus-visible) {
  background:var(--utu-panel-hover)!important;
  outline-color:var(--utu-highlight)!important;
}
:root[data-theme="dark"] #applications-list .application-standalone-pool {
  border-top-color:var(--utu-stroke-soft)!important;
}
:root[data-theme="dark"] #applications-list .application-dependency-pool {
  scrollbar-color:var(--utu-stroke) transparent;
}
:root[data-theme="dark"] #applications-list .empty-state {
  color:var(--utu-subtext)!important;
}

/* Application identity, tabs, nested cards, and create form. */
:root[data-theme="dark"] #application-editor.application-detail {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor .application-detail-header {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-editor .application-detail-header :is(h1,h2,strong) {
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor .application-detail-header :is(p,.meta) {
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #application-editor .back-button {
  color:var(--utu-highlight)!important;
  background:transparent!important;
}
:root[data-theme="dark"] #application-editor .application-tabs {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-editor .application-tabs button {
  background:transparent!important;
  border:1px solid transparent!important;
  color:var(--utu-subtext)!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #application-editor .application-tabs button:hover:not(.active) {
  background:var(--utu-panel-hover)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor .application-tabs button.active {
  background:var(--utu-panel-hover)!important;
  border-color:var(--utu-highlight)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor .application-tab-panel,
:root[data-theme="dark"] #application-editor .application-create-panel,
:root[data-theme="dark"] #application-editor #application-llm-panel {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-tab-panel>.grid,.application-create-panel>.grid,#app-llm-fields
) {
  background:transparent!important;
  background-image:none!important;
}
:root[data-theme="dark"] #application-editor :is(
  #app-tools .tool-card,#dependencies .dep-row,#dependencies .tool-row,
  .cross-app-dependency-row,.llm-primary-grid,
  .topology-settings-card,.topology-builder-card,.topology-merge-box,
  .topology-type-help,.topology-alias-box
) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-intro p,.field-help,.form-hint,.hint,.meta,
  .llm-history-help,.tool-kind,.tool-connection,.cross-app-table-name small,
  .application-topology-intro p
) {
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-intro h2,.application-tab-panel>h2,.llm-setting-name,
  .topology-builder-card h3,.topology-settings-card h3
) {
  color:var(--utu-text)!important;
}
/* Tables in Dependencies and Security retain separate semantic status colors. */
:root[data-theme="dark"] #application-editor :is(
  .cross-app-table-wrap,.app-security-section,.application-sanitizer-test,
  .sanitizer-test-result
) {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .cross-app-dependency-table th,.sensitive-rule-header
) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .cross-app-dependency-table td,.sensitive-rule-row
) {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke-soft)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .cross-app-dependency-table tbody tr:hover td,.sensitive-rule-row:hover
) {
  background:var(--utu-panel-hover)!important;
}

/* All editor forms, including body-portaled dependency, wizard and Topology dialogs.
 * Keep custom select chevrons, native popup behavior, and disabled states intact. */
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  textarea,select,[role="combobox"]
) {
  color-scheme:dark;
  background-color:var(--utu-field)!important;
  color:var(--utu-text)!important;
  border-color:var(--utu-stroke)!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is(select,option,optgroup) {
  color-scheme:dark!important;
  background-color:var(--utu-field)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is(input,textarea)::placeholder {
  color:var(--utu-dim)!important;
  opacity:1;
}
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is(input,textarea,select,[role="combobox"]):focus-visible {
  border-color:var(--utu-highlight)!important;
  outline:2px solid var(--utu-highlight)!important;
  outline-offset:2px;
}
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is(input,textarea,select,button):disabled {
  cursor:not-allowed!important;
}
/* Safeguard readable native Application dropdowns and their full-width controls. */
:root[data-theme="dark"] #application-editor select:not([multiple]),
:root[data-theme="dark"] :is(
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) select:not([multiple]),
:root[data-theme="dark"] #application-tool-modal .tool-modal-core select:not([multiple]) {
  min-height:44px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  font-size:13px!important;
  text-overflow:ellipsis;
}
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is([role="listbox"],.dropdown-menu,.dropdown-content,.custom-select-menu,.autocomplete-list) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] :is(
  #application-editor,#application-tool-modal,
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-editor-host,#topology-discovery-modal-host
) :is([role="option"]:hover,.dropdown-menu button:hover,.custom-select-menu button:hover) {
  background:var(--utu-panel-hover)!important;
}

/* Checkbox alignment: native checkboxes stay at the left of their labels;
 * intentionally exclude custom history and cross-app switch tracks. */
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.grid,
  [data-app-tab="overview"]>.grid
)>label.switch,
:root[data-theme="dark"] #application-llm-panel #app-llm-fields>label.switch,
:root[data-theme="dark"] #application-tool-modal .tool-modal-core>label.switch {
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap;
  gap:10px!important;
  text-align:left!important;
}
:root[data-theme="dark"] #application-editor label.switch>input[type="checkbox"],
:root[data-theme="dark"] #application-tool-modal .tool-modal-core label.switch>input[type="checkbox"],
:root[data-theme="dark"] #topology-editor-host .trigger-check-field input[type="checkbox"] {
  appearance:auto!important;
  flex:0 0 18px!important;
  width:18px!important;
  min-width:18px!important;
  height:18px!important;
  min-height:18px!important;
  margin:0!important;
  accent-color:#00b6ce!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .tool-fields,.utu-tool-substep-fields
) label:not(.switch):has(>input[type="checkbox"]) {
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  text-align:left!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .tool-fields,.utu-tool-substep-fields
) label:not(.switch)>input[type="checkbox"] {
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  flex:0 0 16px!important;
  margin:0!important;
  accent-color:#00b6ce!important;
}

/* Shared Add/Edit Tool wizard & Topology dialogs. Visual-only: do not recolor
 * provider logos, health outcomes, disabled warnings or graph node categories. */
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-unified-tool-dialog,.tool-modal-dialog
),
:root[data-theme="dark"] #topology-discovery-modal-host .topology-discovery-dialog,
:root[data-theme="dark"] #topology-editor-host .topology-node-editor {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-tool-step,.utu-tool-substep,.tool-modal-settings,.tool-modal-section
),
:root[data-theme="dark"] :is(
  #topology-discovery-modal-host,#topology-editor-host
) :is(.security-invariant-note,.topology-type-help,.topology-merge-box,.topology-alias-box) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-tool-step-header p,.utu-tool-modal-header p,.field-help,.hint,.meta,
  .vm-component-text small,.tool-modal-settings p
),
:root[data-theme="dark"] :is(
  #topology-discovery-modal-host,#topology-editor-host
) :is(.modal-header p,.hint,.meta) {
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-tool-step-number,.net-step-number
) {
  background:var(--utu-panel-hover)!important;
  border-color:var(--utu-highlight)!important;
  color:var(--utu-highlight)!important;
  box-shadow:none!important;
}

/* Dependency dialogs are portaled directly to body and cannot inherit the
 * Application editor's panel selectors. Their matchers remain editable. */
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-dependency-form,
:root[data-theme="dark"] #regular-dependency-modal-host .regular-dependency-modal {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host :is(
  .cross-app-enabled-row,.cross-app-advanced,.cross-matcher-group
) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host :is(
  .cross-matcher-add,.cross-matcher-remove,.cross-cancel
),
:root[data-theme="dark"] #regular-dependency-modal-host .dep-cancel {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host :is(
  .cross-matcher-add,.cross-matcher-remove,.cross-cancel
):hover,
:root[data-theme="dark"] #regular-dependency-modal-host .dep-cancel:hover {
  background:var(--utu-panel-hover)!important;
}
/* Neutral wizard controls can still be brightly painted by older capability
 * sheets. Never override selected, primary, danger or pressed states. */
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-tool-step,.utu-tool-substep
) button:not(.primary):not(.danger):not(.selected):not(.active):not(.modal-close):not([aria-pressed="true"]) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-tool-step,.utu-tool-substep
) button:not(.primary):not(.danger):not(.selected):not(.active):not(.modal-close):not([aria-pressed="true"]):hover {
  background:var(--utu-panel-hover)!important;
}

/* Secondary buttons; primary gradients and danger states stay unchanged. */
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.actions,
  .application-tab-panel>.actions,
  .cross-app-table-actions,.topology-settings-actions,.topology-builder-actions,
  .topology-connect-bar,.topology-merge-controls,.llm-settings-actions,
  #dependencies .actions
) button:not(.primary):not(.danger),
:root[data-theme="dark"] #application-tool-modal .utu-tool-modal-footer button:not(.primary):not(.danger),
:root[data-theme="dark"] :is(
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-discovery-modal-host,#topology-editor-host
) :is(.modal-actions,.cross-app-modal-actions,.regular-dependency-modal-actions) button:not(.primary):not(.danger) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.actions,
  .application-tab-panel>.actions,
  .cross-app-table-actions,.topology-settings-actions,.topology-builder-actions,
  .topology-connect-bar,.topology-merge-controls,.llm-settings-actions,
  #dependencies .actions
) button:not(.primary):not(.danger):hover,
:root[data-theme="dark"] #application-tool-modal .utu-tool-modal-footer button:not(.primary):not(.danger):hover,
:root[data-theme="dark"] :is(
  #cross-app-dependency-modal-host,#regular-dependency-modal-host,
  #topology-discovery-modal-host,#topology-editor-host
) :is(.modal-actions,.cross-app-modal-actions,.regular-dependency-modal-actions) button:not(.primary):not(.danger):hover {
  background:var(--utu-panel-hover)!important;
}
:root[data-theme="dark"] #application-editor :is(
  button,summary
):focus-visible,
:root[data-theme="dark"] #application-tool-modal button:focus-visible {
  outline:2px solid var(--utu-highlight)!important;
  outline-offset:2px;
}

/* The same deletion dialog is reused for Applications and Connections, so align
 * its shared neutral surfaces without touching the destructive red action. */
:root[data-theme="dark"] #entity-action-dialog .entity-action-dialog {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #entity-action-dialog .entity-action-subject {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #entity-action-dialog :is(p,ul) {
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #entity-action-dialog .entity-action-dialog-actions button:not(.danger) {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}


/* Application refinement: compact Cross App and clean form guidance.
 * User-visible dark styling only; underlying Application/dependency values
 * and provider-specific diagnostic selection/validation are unchanged. */
:root[data-theme="dark"] #application-editor .application-detail-header {
  padding:18px 20px 15px!important;
}
:root[data-theme="dark"] #application-editor .application-detail-header h1 {
  font-size:30px!important;
  line-height:1.12;
}
:root[data-theme="dark"] #application-editor .application-tabs {
  padding:6px 12px!important;
  gap:4px!important;
}
:root[data-theme="dark"] #application-editor .application-tabs button {
  min-height:32px!important;
  padding:6px 11px!important;
  font-size:11px!important;
}
:root[data-theme="dark"] #application-editor .application-tab-panel {
  padding:16px 18px 20px!important;
}
:root[data-theme="dark"] #application-editor .application-create-panel {
  padding:18px 20px!important;
  margin-top:15px!important;
}
:root[data-theme="dark"] #application-editor .application-create-intro {
  margin-bottom:11px!important;
}
:root[data-theme="dark"] #application-editor .application-create-intro p {
  max-width:65ch;
  line-height:1.45;
  font-size:11.5px;
}
:root[data-theme="dark"] #application-editor .application-tab-panel>h2 {
  font-size:19px!important;
  margin:0 0 10px!important;
}

/* Each Overview field is a compact label + caption at left, control at right.
 * The original unstructured helper text was falling into a separate row. */
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.grid,
  [data-app-tab="overview"]>.grid
)>label:not(.switch) {
  display:grid!important;
  grid-template-columns:minmax(160px,200px) minmax(0,1fr)!important;
  grid-template-rows:auto auto;
  align-items:start!important;
  column-gap:16px!important;
  row-gap:3px!important;
  padding:10px 0!important;
  margin:0!important;
  border-bottom:1px solid var(--utu-stroke-soft)!important;
  line-height:1.35;
  font-size:12px;
  font-weight:650;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.grid,
  [data-app-tab="overview"]>.grid
)>label:not(.switch)>:is(input:not([type="checkbox"]),select,textarea) {
  grid-column:2!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  margin:0!important;
  background:var(--utu-field)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.grid,
  [data-app-tab="overview"]>.grid
)>label:not(.switch)>.field-help {
  grid-column:1!important;
  grid-row:2!important;
  align-self:start;
  max-width:200px;
  margin:0!important;
  padding:0!important;
  color:var(--utu-dim)!important;
  font-size:10.5px!important;
  font-weight:400!important;
  line-height:1.4!important;
  letter-spacing:0;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.grid,
  [data-app-tab="overview"]>.grid
)>label.switch {
  padding:9px 0!important;
  min-height:37px;
  gap:8px!important;
  border-bottom:1px solid var(--utu-stroke-soft)!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.grid,
  [data-app-tab="overview"]>.grid
)>label.switch>.field-help {
  flex-basis:100%;
  margin:-2px 0 0 26px!important;
  color:var(--utu-dim)!important;
  font-size:10.5px!important;
  font-weight:400!important;
  line-height:1.3!important;
}
:root[data-theme="dark"] #application-editor .application-create-panel textarea,
:root[data-theme="dark"] #application-editor [data-app-tab="overview"] textarea {
  min-height:88px!important;
  max-height:240px;
  padding:10px 12px!important;
  resize:vertical;
  line-height:1.45;
}

/* LLM / tool controls: muted helper captions without oversized vertical gaps. */
:root[data-theme="dark"] #application-editor #application-llm-panel :is(
  .llm-setting-row,#app-llm-fields>label
) {
  padding:9px 10px!important;
}
:root[data-theme="dark"] #application-llm-panel :is(.field-help,.hint,.llm-history-help),
:root[data-theme="dark"] #application-tool-modal :is(.field-help,.hint) {
  color:var(--utu-dim)!important;
  font-size:10.5px!important;
  line-height:1.4!important;
  margin-top:3px;
}
:root[data-theme="dark"] #application-editor :is(
  .llm-setting-name,.application-create-panel label
) {
  letter-spacing:0!important;
}
:root[data-theme="dark"] #application-editor :is(
  .application-create-panel>.actions,[data-app-tab="overview"]>.actions
) {
  padding-top:12px!important;
  margin-top:10px!important;
  gap:8px!important;
}

/* Cross App has no nested legacy Dependencies box. Only relationship list. */
:root[data-theme="dark"] #application-cross-app-panel {
  padding:15px 18px 20px!important;
  min-height:0!important;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 12px!important;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-section-head h2 {
  margin:3px 0 3px!important;
  font-size:19px!important;
  line-height:1.2;
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-section-head p {
  margin:0!important;
  max-width:72ch;
  font-size:11px!important;
  line-height:1.45!important;
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-section-head .cross-app-add {
  min-height:35px!important;
  padding:7px 12px!important;
  font-size:11px!important;
  flex:0 0 auto;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-table-wrap {
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-dependency-table :is(th,td) {
  padding:10px 12px!important;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-dependency-table td .badge {
  font-size:10px;
}
:root[data-theme="dark"] #application-cross-app-panel .cross-app-table-actions button {
  min-height:29px!important;
  padding:5px 9px!important;
  font-size:10.5px!important;
}

/* Dark destructive buttons in Application screens, retaining semantic red. */
:root[data-theme="dark"] #application-editor :is(
  .entity-delete-button,.cross-app-table-actions button.danger,
  #app-tools button.danger,.sensitive-remove-rule,.modal-actions button.danger
) {
  background:#3c232b!important;
  color:#ffc7cb!important;
  border:1px solid #743b49!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #application-editor :is(
  .entity-delete-button,.cross-app-table-actions button.danger,
  #app-tools button.danger,.sensitive-remove-rule,.modal-actions button.danger
):hover {
  background:#56303a!important;
  border-color:#a85665!important;
}
:root[data-theme="dark"] #application-editor .entity-danger-zone {
  margin-top:14px!important;
  padding:15px 18px!important;
  gap:12px!important;
  border-color:#49303a!important;
  background:#141b25!important;
}
:root[data-theme="dark"] #application-editor .entity-danger-zone h2 {
  font-size:18px!important;
  margin:2px 0 3px!important;
}
:root[data-theme="dark"] #application-editor .entity-danger-zone p {
  font-size:11px!important;
  line-height:1.45!important;
  max-width:72ch;
  color:var(--utu-subtext)!important;
}

/* All body-portaled Application dialogs: fewer wasted margins, compact controls.
 * Do not constrain specialized target tables inside the Tool wizard. */
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-dependency-form {
  width:min(720px,calc(100vw - 28px))!important;
  max-width:720px!important;
  max-height:calc(100dvh - 28px)!important;
  padding:18px 20px!important;
  border-radius:14px!important;
}
:root[data-theme="dark"] #regular-dependency-modal-host .regular-dependency-modal {
  padding:18px 20px!important;
}
:root[data-theme="dark"] :is(
  #cross-app-dependency-modal-host,#regular-dependency-modal-host
) .cross-app-form-head {
  margin:0 0 12px!important;
}
:root[data-theme="dark"] :is(
  #cross-app-dependency-modal-host,#regular-dependency-modal-host
) .cross-app-form-head h3 {
  margin:2px 0!important;
  font-size:19px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-form-grid {
  gap:10px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-form-grid>label {
  gap:5px!important;
  font-size:11px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host :is(
  input:not([type="checkbox"]),textarea,select
) {
  min-height:39px!important;
  font-size:12px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host textarea {
  min-height:68px!important;
  max-height:170px!important;
  resize:vertical;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-enabled-row {
  min-height:39px!important;
  padding:5px 10px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-advanced {
  padding:9px 12px!important;
  border-radius:10px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-advanced>summary {
  font-size:12px!important;
}
:root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-modal-actions {
  margin-top:12px!important;
  gap:8px!important;
}
:root[data-theme="dark"] #application-tool-modal .utu-unified-tool-dialog {
  padding:17px 18px 0!important;
  max-height:calc(100dvh - 24px)!important;
  border-radius:16px!important;
}
:root[data-theme="dark"] #application-tool-modal .utu-tool-modal-header {
  margin-bottom:12px!important;
}
:root[data-theme="dark"] #application-tool-modal .utu-tool-modal-header h2 {
  font-size:20px!important;
}
:root[data-theme="dark"] #application-tool-modal :is(
  .utu-tool-step,.utu-tool-substep
) {
  margin-bottom:8px!important;
  padding:11px 13px!important;
  border-radius:11px!important;
}
:root[data-theme="dark"] #application-tool-modal .utu-tool-step-header {
  margin-bottom:9px!important;
}
:root[data-theme="dark"] #application-tool-modal .utu-tool-modal-footer {
  padding-top:10px!important;
  padding-bottom:11px!important;
}
:root[data-theme="dark"] :is(
  #topology-editor-host .topology-node-editor,
  #topology-discovery-modal-host .topology-discovery-dialog
) {
  padding:16px 18px!important;
  width:min(780px,calc(100vw - 30px))!important;
  max-width:780px!important;
  max-height:calc(100dvh - 30px)!important;
  overflow-y:auto;
  border-radius:14px!important;
}
:root[data-theme="dark"] :is(
  #topology-editor-host,#topology-discovery-modal-host
) :is(.topology-type-help,.security-invariant-note) {
  padding:9px 11px!important;
  border-radius:9px!important;
  font-size:11px!important;
  line-height:1.4;
}
:root[data-theme="dark"] #entity-action-dialog .entity-action-dialog {
  padding:18px 20px!important;
  border-radius:14px!important;
}
:root[data-theme="dark"] #entity-action-dialog .entity-action-subject {
  margin:12px 0 8px!important;
  padding:9px 11px!important;
}
:root[data-theme="dark"] #entity-action-dialog .entity-action-dialog-actions {
  margin-top:14px!important;
}

/* Same compact field hierarchy at mobile widths; no overlapping controls. */
@media (max-width:760px) {
  :root[data-theme="dark"] #application-editor .application-detail-header {
    padding:15px!important;
  }
  :root[data-theme="dark"] #application-editor .application-detail-header h1 {
    font-size:25px!important;
  }
  :root[data-theme="dark"] #application-editor .application-tab-panel {
    padding:13px!important;
  }
  :root[data-theme="dark"] #application-editor :is(
    .application-create-panel>.grid,[data-app-tab="overview"]>.grid
  )>label:not(.switch) {
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    row-gap:5px!important;
  }
  :root[data-theme="dark"] #application-editor :is(
    .application-create-panel>.grid,[data-app-tab="overview"]>.grid
  )>label:not(.switch)>:is(input:not([type="checkbox"]),select,textarea) {
    grid-column:1!important;
    grid-row:2!important;
  }
  :root[data-theme="dark"] #application-editor :is(
    .application-create-panel>.grid,[data-app-tab="overview"]>.grid
  )>label:not(.switch)>.field-help {
    grid-column:1!important;
    grid-row:3!important;
    max-width:none!important;
  }
  :root[data-theme="dark"] #application-cross-app-panel .cross-app-section-head {
    align-items:flex-start;
  }
  :root[data-theme="dark"] #cross-app-dependency-modal-host .cross-app-dependency-form {
    padding:14px!important;
  }
  :root[data-theme="dark"] #application-tool-modal .utu-unified-tool-dialog {
    padding:13px 12px 0!important;
  }
}


/* Inner panels have the same restrained density as Analytics cards. */
:root[data-theme="dark"] #application-topology-panel .application-topology-intro {
  align-items:center;
  gap:12px!important;
}
:root[data-theme="dark"] #application-topology-panel .application-topology-intro h2 {
  font-size:19px!important;
  margin-bottom:3px!important;
}
:root[data-theme="dark"] #application-topology-panel .application-topology-intro p {
  max-width:76ch;
  font-size:11px!important;
  line-height:1.4!important;
}
:root[data-theme="dark"] #application-topology-panel .topology-purpose-strip {
  gap:7px!important;
  margin:8px 0!important;
}
:root[data-theme="dark"] #application-topology-panel .topology-purpose-strip>span {
  padding:9px 11px!important;
  font-size:10.5px!important;
  line-height:1.4!important;
  border-color:var(--utu-stroke)!important;
  background:var(--utu-panel-soft)!important;
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] #application-topology-panel :is(
  .topology-settings-card,.topology-builder-card
) {
  padding:13px 15px!important;
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-topology-panel .topology-section-head {
  margin-bottom:8px!important;
}
:root[data-theme="dark"] #application-topology-panel .topology-settings-grid>label {
  padding:8px 0!important;
}
:root[data-theme="dark"] #application-topology-panel .security-invariant-note {
  margin-top:8px!important;
  padding:8px 10px!important;
  color:var(--utu-subtext)!important;
  background:var(--utu-field)!important;
  border-color:var(--utu-stroke)!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
:root[data-theme="dark"] #application-security-panel :is(
  .app-security-section,.application-sanitizer-test
) {
  padding:13px 15px!important;
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] #application-security-panel .sensitive-settings-head {
  gap:8px!important;
  margin-bottom:8px!important;
}
:root[data-theme="dark"] #application-security-panel .sensitive-rule-header {
  padding:9px 10px!important;
}
:root[data-theme="dark"] #application-security-panel .sensitive-rule-row {
  padding:7px 10px!important;
}
:root[data-theme="dark"] #application-security-panel .app-security-help {
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-subtext)!important;
}