/* Product spacing: shared controls stay compact, related groups have breathing room.
   Do not target map-engine controls, navigation tabs or arbitrary div/button pairs. */
:root {
  --pat-space-actions: 12px;
  --pat-space-fields: 16px;
  --pat-space-section: 24px;
}

.territorial-action-row,
.territorial-form-actions,
.territorial-filter-actions,
.territorial-inline-actions,
.territorial-page-heading-actions,
.territorial-map-edit-actions,
.territorial-approval-resolution {
  align-items: center;
  gap: var(--pat-space-actions);
  min-width: 0;
}

.territorial-table-actions {
  gap: 10px;
}

.territorial-form-actions + .territorial-table-shell,
.territorial-form-actions + .ds-table-scroll {
  margin-top: var(--pat-space-fields);
}

.ds-card > .ds-form-grid + .ds-btn {
  margin-top: var(--pat-space-fields);
}

.ds-card > .ds-card + .ds-card {
  margin-top: var(--pat-space-fields);
}

.ds-card > .territorial-operational-explanation {
  margin-block: var(--pat-space-fields);
}

:where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-section-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--pat-space-fields) var(--pat-space-section);
}

:where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-section-actions {
  flex-wrap: wrap;
  gap: var(--pat-space-actions);
  max-width: 100%;
  min-width: 0;
}

:where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-section-heading .ds-muted {
  margin-top: 8px;
  line-height: 1.6;
}

/* Ordinary cards use block flow; these siblings previously had no separation.
   Grid cards keep their own gap, without introducing an extra wrapper. */
:where(.territorial-module, .citizen-portal, .ds-modal-panel)
  .ds-card:not(.territorial-page-stack, .ds-stack, .citizen-management-card)
  > .ds-section-header {
  margin-bottom: var(--pat-space-fields);
}

:where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-stack {
  gap: var(--pat-space-fields);
}

.territorial-form-grid,
.territorial-config-form,
.territorial-modal-form,
.territorial-report-filters {
  gap: 20px var(--pat-space-fields);
}

:where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-form-grid {
  gap: 20px var(--pat-space-fields);
}

/* Inline explanations should not touch the following table or action bar. */
:where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-disclosure {
  margin-block: var(--pat-space-fields);
}

.ds-form-details-content:not([hidden]) {
  gap: var(--pat-space-fields);
  padding: 8px 16px 16px;
}

.territorial-modal-form > .territorial-form-actions,
.territorial-config-form > .territorial-form-actions,
.territorial-report-filters > .territorial-action-row {
  padding-top: 4px;
}

:is(.territorial-mfa-options, fieldset:has(> label > input[name="mfa_delivery_channels"])) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0;
  padding: 12px 16px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
}

:is(.territorial-mfa-options, fieldset:has(> label > input[name="mfa_delivery_channels"])) legend {
  padding-inline: 4px;
  font-weight: 600;
}

:is(.territorial-mfa-options, fieldset:has(> label > input[name="mfa_delivery_channels"])) label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

:is(.territorial-mfa-options, fieldset:has(> label > input[name="mfa_delivery_channels"])) input {
  margin: 0;
}

:where(.territorial-action-row, .territorial-form-actions, .territorial-table-actions, .ds-section-actions) > .ds-btn {
  flex-shrink: 0;
  height: auto;
  min-height: 34px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(.territorial-action-row, .territorial-form-actions, .territorial-table-actions, .ds-section-actions)
  > .ds-btn
  > svg {
  flex-shrink: 0;
}

.ds-modal-header,
.ds-modal-body,
.ds-modal-footer {
  padding: 20px 24px;
}

.ds-modal-footer {
  gap: var(--pat-space-actions);
}

.ds-workspace-section {
  gap: 20px;
}

.ds-workspace-section-description {
  line-height: 1.6;
}

.workflow-studio {
  display: grid;
  gap: var(--pat-space-section);
  min-width: 0;
}

.workflow-designer__fields > .workflow-toolbar {
  justify-content: flex-start;
  margin-top: 20px;
}

.workflow-designer__properties > .workflow-toolbar {
  margin-bottom: var(--pat-space-fields);
}

/* This fieldset contains the entire response workspace, not a single row. */
.response-workspace-content {
  display: grid;
  align-content: start;
  gap: 20px;
}

.response-workspace-content > .ds-btn {
  justify-self: start;
}

.response-workspace-content > p {
  margin: 0;
}

.response-modalities[open] > :not(summary) {
  margin-block: 16px;
}

.response-modalities-grid > li > :last-child {
  margin-bottom: 0;
}

.response-report-filter-bar > p {
  margin: 0;
}

.observation-review-workspace > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 12px;
}

.observation-review-workspace > header > :is(h2, p) {
  flex-basis: 100%;
  margin: 0;
}

.observation-review-workspace > header > .ds-btn {
  min-height: 34px;
}

.territorial-map-tools {
  gap: var(--pat-space-fields);
}

/* Keep the canvas edge-to-edge, but inset the status/help beneath it. */
.territorial-map-card > p[role="status"],
.territorial-map-card > .territorial-operational-explanation {
  margin: 16px 20px;
}

.territorial-map-edit-actions + small {
  display: block;
  margin-top: var(--pat-space-actions);
}

.territorial-map-tools .ds-card > p + :is(.territorial-action-row, .territorial-map-mode-actions),
.territorial-map-tools .ds-card > .territorial-action-row + p {
  margin-top: var(--pat-space-actions);
}

.territorial-map-tools .ds-card > input[type="file"] {
  margin-top: var(--pat-space-actions);
  max-width: 100%;
}

.territorial-alert-documents summary + * {
  margin-top: var(--pat-space-actions);
}

.territorial-alert-documents details {
  padding-bottom: 4px;
}

.citizen-management-card form,
.citizen-form-grid {
  gap: 20px var(--pat-space-fields);
}

.citizen-card-heading,
.citizen-account-panel-heading {
  flex-wrap: wrap;
  gap: var(--pat-space-fields) var(--pat-space-section);
}

.citizen-card-heading > h2,
.citizen-card-heading > h3 {
  margin-block: 0;
}

.citizen-dialog-actions,
.citizen-form-actions {
  gap: var(--pat-space-actions);
}

.citizen-management-card {
  gap: 20px;
}

.citizen-sector-list > .citizen-inline-empty {
  margin: 0;
  padding: 16px;
}

.citizen-privacy-actions > div:last-child {
  gap: var(--pat-space-actions);
}

/* Keep state labels and destructive actions legible in the reviewed dark theme. */
:root[data-theme="dark"] .citizen-portal .territorial-eyebrow {
  color: var(--ds-info);
}

:root[data-theme="dark"] .citizen-section-heading > span,
:root[data-theme="dark"] .citizen-final-cta > div > span,
:root[data-theme="dark"] .citizen-step-grid li > span,
:root[data-theme="dark"] .citizen-header nav > a.is-active {
  color: var(--ds-info);
}

:root[data-theme="dark"] .territorial-alert-state:is(.is-active, .is-approved) {
  color: var(--ds-info);
}

:root[data-theme="dark"] .territorial-alert-state:is(.is-pending_approval, .is-scheduled) {
  color: var(--ds-warning);
}

:root[data-theme="dark"] .territorial-alert-state:is(.is-cancelled, .is-rejected) {
  color: var(--ds-danger);
}

:root[data-theme="dark"] .ds-btn-danger {
  background: #a82431;
  border-color: #a82431;
  color: var(--ds-text-on-accent);
}

@media (width <= 640px) {
  .ds-modal-header,
  .ds-modal-body,
  .ds-modal-footer {
    padding: 16px;
  }

  :where(.territorial-module, .citizen-portal, .ds-modal-panel) .ds-section-actions {
    justify-content: flex-start;
  }

  .territorial-page-heading-actions {
    flex-shrink: 1;
  }

  :where(.territorial-action-row, .territorial-form-actions, .territorial-table-actions, .ds-section-actions)
    > .ds-btn {
    min-height: 40px;
  }
}