/*
 * Rhyddid Template 0.15.0
 * Confirmation, destructive-action, archive/restore, undo, selection, and
 * batch-operation presentation. Components own all actual behavior and safety.
 */

/* --------------------------------------------------------------------------
   Confirmation, consequence, and destructive-action regions
   -------------------------------------------------------------------------- */

:where(
  .confirmation-panel,
  .confirmation-card,
  .action-confirmation,
  .destructive-zone,
  .danger-zone,
  .archive-panel,
  .restore-panel,
  .delete-panel,
  .data-loss-warning
) {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

:where(.destructive-zone, .danger-zone, .delete-panel, .data-loss-warning, .is-irreversible) {
  border-color: color-mix(in srgb, var(--state-danger) 64%, var(--border));
  box-shadow: inset 0.28rem 0 0 var(--state-danger);
}

:where(.archive-panel, .restore-panel) {
  border-color: color-mix(in srgb, var(--state-warning) 52%, var(--border));
  box-shadow: inset 0.28rem 0 0 var(--state-warning);
}

:where(
  .confirmation-header,
  .confirmation-panel__header,
  .danger-zone__header,
  .archive-panel__header,
  .restore-panel__header
) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

:where(
  .confirmation-title,
  .confirmation-panel__title,
  .danger-zone__title,
  .archive-panel__title,
  .restore-panel__title
) {
  margin: 0;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

:where(.danger-zone__title, .delete-panel .confirmation-title, .data-loss-warning .confirmation-title) {
  color: var(--state-danger);
}

:where(.confirmation-target, .affected-record, .action-target) {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

:where(.confirmation-target, .affected-record, .action-target) > :where(.target-label, dt, small) {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(.confirmation-target, .affected-record, .action-target) > :where(.target-name, dd, strong) {
  margin: 0;
  color: var(--text-strong);
}

:where(.action-consequences, .consequence-list, .confirmation-checklist, .risk-list) {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1.35rem;
}

:where(.action-consequences, .consequence-list, .confirmation-checklist, .risk-list) li::marker {
  color: var(--state-danger);
}

:where(.archive-panel, .restore-panel) :where(.action-consequences, .consequence-list, .confirmation-checklist, .risk-list) li::marker {
  color: var(--state-warning);
}

:where(.confirmation-note, .confirmation-help, .consequence-note, .risk-detail) {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

:where(.confirmation-phrase, .typed-confirmation, .confirmation-input) {
  display: grid;
  gap: 0.4rem;
}

:where(.confirmation-phrase, .typed-confirmation, .confirmation-input) code {
  display: inline-block;
  max-inline-size: 100%;
  padding: 0.2rem 0.4rem;
  color: var(--text-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

:where(.confirmation-actions, .danger-actions, .archive-actions, .restore-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  padding-block-start: 0.2rem;
}

:where(.confirmation-actions, .danger-actions, .archive-actions, .restore-actions) > :where(.btn, button, a) {
  min-inline-size: 8rem;
  justify-content: center;
}

:where(.btn-danger, .button-danger, .action-delete, .action-destroy, .action-permanent-delete) {
  color: #fff;
  background: var(--state-danger);
  border-color: color-mix(in srgb, var(--state-danger) 76%, #000);
}

:where(.btn-danger, .button-danger, .action-delete, .action-destroy, .action-permanent-delete):where(:hover, :focus-visible) {
  color: #fff;
  background: color-mix(in srgb, var(--state-danger) 82%, #000);
  border-color: var(--state-danger);
}

:where(.action-archive, .action-restore) {
  border-color: color-mix(in srgb, var(--state-warning) 68%, var(--border));
}

:where(.destructive-zone, .danger-zone) hr,
:where(.archive-panel, .restore-panel) hr {
  margin: 0;
  border-color: var(--border);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Selection, bulk actions, and batch-operation summaries
   -------------------------------------------------------------------------- */

:where(.bulk-selection-bar, .selection-toolbar, .batch-toolbar, .multi-select-toolbar) {
  position: sticky;
  inset-block-start: calc(var(--sticky-offset, 0px) + 0.5rem);
  z-index: 24;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--accent));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

:where(.selection-count, .bulk-count, .selected-count) {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
  color: var(--text-strong);
  font-weight: 800;
}

:where(.selection-count, .bulk-count, .selected-count) :where(.count, output) {
  min-inline-size: 1.7rem;
  padding: 0.08rem 0.42rem;
  text-align: center;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 999px;
}

:where(.select-all-control, .selection-control, .record-selection) {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

:where(.bulk-actions, .batch-actions, .selection-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-inline-start: auto;
}

:where(.selectable-row, .selection-row, [data-selectable="true"]) {
  position: relative;
}

:where(.selectable-row, .selection-row, [data-selectable="true"]):where(.is-selected, [aria-selected="true"], [data-selected="true"]) {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  box-shadow: inset 0.25rem 0 0 var(--accent);
}

:where(.batch-summary, .operation-summary, .bulk-results, .batch-results) {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

:where(.result-counts, .batch-counts, .operation-counts) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.65rem;
}

:where(.result-count, .batch-count, .operation-count) {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.7rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

:where(.result-count, .batch-count, .operation-count) > :where(strong, .count) {
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

:where(.result-list, .batch-result-list, .operation-result-list) {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.result-item, .batch-result, .operation-result) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 1rem;
  align-items: start;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

:where(.result-item, .batch-result, .operation-result).is-success {
  border-inline-start: 0.25rem solid var(--state-success);
}

:where(.result-item, .batch-result, .operation-result).is-warning,
:where(.result-item, .batch-result, .operation-result).is-skipped {
  border-inline-start: 0.25rem solid var(--state-warning);
}

:where(.result-item, .batch-result, .operation-result).is-failed {
  border-inline-start: 0.25rem solid var(--state-danger);
}

/* --------------------------------------------------------------------------
   Archive, restore, trash, undo, and temporary recovery states
   -------------------------------------------------------------------------- */

:where(.archive-state, .trashed-state, .restored-state, .pending-deletion, .soft-delete-state) {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  max-inline-size: 100%;
  padding: 0.28rem 0.55rem;
  font-size: 0.88rem;
  font-weight: 750;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

:where(.archive-state, .trashed-state, .pending-deletion, .soft-delete-state) {
  color: var(--state-warning);
  border-color: color-mix(in srgb, var(--state-warning) 56%, var(--border));
}

.restored-state {
  color: var(--state-success);
  border-color: color-mix(in srgb, var(--state-success) 56%, var(--border));
}

:where(.undo-notice, .restore-notice, .action-reversal, .temporary-action-notice) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--state-info) 58%, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

:where(.undo-notice, .restore-notice, .action-reversal, .temporary-action-notice) > :where(.undo-actions, .restore-actions, .notice-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-inline-start: auto;
}

:where(.undo-countdown, .deletion-countdown, .recovery-window) {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

:where(.record-is-archived, .record-is-trashed, .record-is-pending-deletion) {
  opacity: 0.78;
}

:where(.record-is-archived, .record-is-trashed, .record-is-pending-deletion) :where(img, video, .thumbnail, .media-preview) {
  filter: grayscale(0.72);
}

/* --------------------------------------------------------------------------
   Semantic confirmation states and disabled safeguards
   -------------------------------------------------------------------------- */

:where([data-confirmation-state="ready"], .confirmation-ready) {
  border-color: color-mix(in srgb, var(--state-success) 56%, var(--border));
}

:where([data-confirmation-state="incomplete"], .confirmation-incomplete) {
  border-color: color-mix(in srgb, var(--state-warning) 58%, var(--border));
}

:where([data-confirmation-state="blocked"], .confirmation-blocked) {
  border-color: color-mix(in srgb, var(--state-danger) 62%, var(--border));
}

:where(.safety-lock, .action-blocked, .confirmation-blocked-note) {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.65rem 0.75rem;
  color: var(--text);
  background: color-mix(in srgb, var(--state-warning) 10%, var(--surface-soft));
  border: 1px solid color-mix(in srgb, var(--state-warning) 55%, var(--border));
  border-radius: var(--radius);
}

:where(.safety-lock, .action-blocked, .confirmation-blocked-note) > :first-child {
  flex: 0 0 auto;
}

:where(.confirmation-panel, .danger-zone, .bulk-selection-bar, .batch-toolbar) :where(button, .btn)[disabled],
:where(.confirmation-panel, .danger-zone, .bulk-selection-bar, .batch-toolbar) :where(button, .btn)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

/* --------------------------------------------------------------------------
   Responsive, reduced-motion, forced-colors, and print behavior
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  :where(.confirmation-actions, .danger-actions, .archive-actions, .restore-actions),
  :where(.bulk-actions, .batch-actions, .selection-actions),
  :where(.undo-notice, .restore-notice, .action-reversal, .temporary-action-notice) > :where(.undo-actions, .restore-actions, .notice-actions) {
    inline-size: 100%;
    margin-inline-start: 0;
  }

  :where(.confirmation-actions, .danger-actions, .archive-actions, .restore-actions) > :where(.btn, button, a),
  :where(.bulk-actions, .batch-actions, .selection-actions) > :where(.btn, button, a) {
    flex: 1 1 10rem;
  }

  :where(.bulk-selection-bar, .selection-toolbar, .batch-toolbar, .multi-select-toolbar) {
    position: static;
  }

  :where(.result-item, .batch-result, .operation-result) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.record-is-archived, .record-is-trashed, .record-is-pending-deletion) {
    transition: none;
  }
}

@media (forced-colors: active) {
  :where(
    .confirmation-panel,
    .confirmation-card,
    .action-confirmation,
    .destructive-zone,
    .danger-zone,
    .archive-panel,
    .restore-panel,
    .delete-panel,
    .data-loss-warning,
    .bulk-selection-bar,
    .selection-toolbar,
    .batch-toolbar,
    .multi-select-toolbar,
    .batch-summary,
    .operation-summary,
    .bulk-results,
    .batch-results,
    .undo-notice,
    .restore-notice,
    .action-reversal,
    .temporary-action-notice
  ) {
    border-color: CanvasText;
    box-shadow: none;
  }

  :where(.selectable-row, .selection-row, [data-selectable="true"]):where(.is-selected, [aria-selected="true"], [data-selected="true"]) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

@media print {
  :where(
    .confirmation-actions,
    .danger-actions,
    .archive-actions,
    .restore-actions,
    .bulk-selection-bar,
    .selection-toolbar,
    .batch-toolbar,
    .multi-select-toolbar,
    .undo-notice,
    .restore-notice,
    .action-reversal,
    .temporary-action-notice
  ) {
    display: none !important;
  }

  :where(.confirmation-panel, .destructive-zone, .danger-zone, .archive-panel, .restore-panel, .batch-summary, .operation-summary, .bulk-results, .batch-results) {
    box-shadow: none;
    break-inside: avoid;
  }
}