/* UTU Engine — Security dark-surface contract.
 * One scoped source of truth for Settings > Sensitive Data, Application >
 * Security and the Add/Edit rule dialog. Loaded after legacy theme layers.
 * Never changes the deliberately separate light theme or security behavior.
 */
:root[data-theme="dark"] #settings-view #sensitive-data-settings,
:root[data-theme="dark"] #application-security-panel,
:root[data-theme="dark"] #sensitive-rule-dialog {
  --security-bg:#0d1722;
  --security-header:#122334;
  --security-field:#101e2d;
  --security-hover:#1a3044;
  --security-stroke:#223647;
  --security-ink:#edf5fb;
  --security-muted:#a7b4c6;
  color:var(--security-ink)!important;
  color-scheme:dark;
}

/* Cards, nested sections, scroll wrappers, rule lists, preview and audit.
 * In particular, remove the pale card backgrounds inherited from styles.css.
 */
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .panel,.subpanel,.sensitive-settings-card,.sensitive-data-content,
  .sensitive-policy-card,.sensitive-settings-list,.utu-sensitive-policy-card,
  .utu-sensitive-fields-card,.utu-sensitive-patterns-card,.sanitizer-test-card,
  .security-audit-card,.utu-sensitive-table-scroll,.security-audit-table-wrap,
  .utu-sensitive-bottom-grid>.panel,.sensitive-global-backing,
  .sensitive-policy-grid
),
:root[data-theme="dark"] #application-security-panel :is(
  .panel,.subpanel,.app-security-section,.application-sanitizer-test,
  .app-security-table-scroll,.sensitive-settings-card,.sensitive-data-content
),
:root[data-theme="dark"] #sensitive-rule-dialog .utu-sensitive-dialog-card {
  background-color:var(--security-bg)!important;
  background-image:none!important;
  border-color:var(--security-stroke)!important;
  box-shadow:none!important;
  color:var(--security-ink)!important;
}

/* Invariant notices, help sections, empty states, and rule rows are navy,
 * not the light cards supplied by the legacy component CSS. */
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .security-invariant-note,.security-view-only-note,.sensitive-field-explainer span,
  .sensitive-empty-state,.utu-sensitive-table-empty,.sensitive-global-entry,
  .sensitive-rule-row,.sensitive-policy-item,.utu-sensitive-table-row,
  .sanitizer-test-meta,.sanitizer-test-result,.utu-sensitive-info-icon
),
:root[data-theme="dark"] #application-security-panel :is(
  .security-invariant-note,.security-view-only-note,.app-security-help,
  .sensitive-field-explainer span,.sensitive-empty-state,.sensitive-rule-row,
  .sanitizer-test-meta,.sanitizer-test-result,.utu-sensitive-table-row
),
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  .utu-sensitive-dialog-header,.utu-sensitive-dialog-fields,.utu-sensitive-dialog-hint
) {
  background-color:var(--security-bg)!important;
  background-image:none!important;
  border-color:var(--security-stroke)!important;
  box-shadow:none!important;
  color:var(--security-muted)!important;
}

/* A different navy shade is reserved for table headers and interactive hover,
 * never pale grey/blue. Keep policy/category icons and status semantics intact. */
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .sensitive-rule-header,.security-audit-table th,.sensitive-field-header,
  .sensitive-pattern-header
),
:root[data-theme="dark"] #application-security-panel :is(
  .sensitive-rule-header,.sensitive-field-header,.sensitive-pattern-header
) {
  background-color:var(--security-header)!important;
  background-image:none!important;
  border-color:var(--security-stroke)!important;
  color:var(--security-muted)!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .sensitive-rule-row,.utu-sensitive-table-row,.security-audit-table tbody tr
):hover,
:root[data-theme="dark"] #application-security-panel .sensitive-rule-row:hover {
  background:var(--security-hover)!important;
}

/* The native select popup must also be dark. Preserve the normal focus ring,
 * dropdown chevrons, select values, and checkbox native affordances. */
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
),
:root[data-theme="dark"] #application-security-panel :is(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
),
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
) {
  background-color:var(--security-field)!important;
  border:1px solid #30485b!important;
  box-shadow:none!important;
  color:var(--security-ink)!important;
  color-scheme:dark;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  select option,select optgroup
),
:root[data-theme="dark"] #application-security-panel :is(
  select option,select optgroup
),
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  select option,select optgroup
) {
  background:var(--security-field)!important;
  color:var(--security-ink)!important;
  color-scheme:dark;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  input,textarea
)::placeholder,
:root[data-theme="dark"] #application-security-panel :is(
  input,textarea
)::placeholder,
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  input,textarea
)::placeholder {
  color:#8fa5b9!important;
  opacity:1;
}

/* Preview output and inline code must not introduce a third colour behind text. */
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  code,.sensitive-field-explainer code,.utu-sensitive-pattern-code,
  .sanitizer-test-output,.sanitizer-test-meta
),
:root[data-theme="dark"] #application-security-panel :is(
  code,.sensitive-field-explainer code,.sanitizer-test-output,.sanitizer-test-meta
) {
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .sanitizer-test-input,.sanitizer-test-result
),
:root[data-theme="dark"] #application-security-panel :is(
  .app-sanitizer-test-input,.sanitizer-test-result
) {
  background:var(--security-field)!important;
  border-color:var(--security-stroke)!important;
  color:var(--security-ink)!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings .security-audit-table :is(th,td),
:root[data-theme="dark"] #application-security-panel :is(
  .sensitive-rule-row,.sensitive-rule-header
) {
  border-color:var(--security-stroke)!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings .security-audit-table td {
  background:transparent!important;
  color:var(--security-ink)!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .sensitive-global-entry,.utu-sensitive-table-row,.utu-sensitive-table-empty
) {
  color:var(--security-ink)!important;
}

/* Secondary controls, pagination and Add/Edit modal cancel buttons. Primary
 * Save actions and semantic Remove/destructive styling remain unchanged. */
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .utu-sensitive-add-button,.utu-sensitive-test-actions button:not(.primary),
  .utu-security-audit-pages button:not([aria-current="page"])
),
:root[data-theme="dark"] #application-security-panel :is(
  .app-add-sensitive-field,.app-add-sensitive-pattern,
  .app-run-sanitizer-test
),
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  .utu-sensitive-dialog-cancel,.actions button:not(.primary):not(.danger)
) {
  background:var(--security-header)!important;
  border-color:var(--security-stroke)!important;
  color:var(--security-ink)!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .sensitive-global-edit,.sensitive-global-delete
) {
  background:transparent!important;
  border-color:transparent!important;
  color:var(--security-muted)!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings .utu-sensitive-status.badge.ok {
  background:rgba(25,115,87,.19)!important;
  color:#86e3bb!important;
  border-color:rgba(75,183,136,.36)!important;
}
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .utu-sensitive-type-icon,.utu-sensitive-info-icon
) {
  background:var(--security-header)!important;
  color:#43d1dd!important;
}
:root[data-theme="dark"] #sensitive-rule-dialog.utu-sensitive-rule-dialog:not(.hidden) {
  background:rgba(4,15,26,.8)!important;
}
:root[data-theme="dark"] #sensitive-rule-dialog .utu-sensitive-dialog-card {
  background:var(--security-bg)!important;
  border:1px solid var(--security-stroke)!important;
}
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  h3,label,strong,.utu-sensitive-dialog-header h3
) {color:var(--security-ink)!important}
:root[data-theme="dark"] #sensitive-rule-dialog :is(
  p,small,.utu-sensitive-dialog-hint
) {color:var(--security-muted)!important}

/* Preserve transparency of text-only metadata and the introductory heading. */
:root[data-theme="dark"] #application-security-panel .application-security-intro,
:root[data-theme="dark"] #settings-view #sensitive-data-settings :is(
  .sensitive-settings-head,.utu-sensitive-section-head,.utu-sensitive-save-bar
) {
  background:transparent!important;
  box-shadow:none!important;
}