/* ===========================================================================
   Account deletion — "Compte et données" section of the profile settings.
   Markup: slices/userInfos.php :: getAccountSection()
   Wiring: script/js/qzr-account-deletion.js

   Lives in its own file (loaded after ui-visual-language.css) because it
   introduces the only destructive-action button in the app. Everything is
   scoped under .qzr-account-del so the danger palette cannot leak into the
   rest of the settings accordion.
   =========================================================================== */

.qzr-account-del {
  --qzr-del-ink: #b3261e;
  --qzr-del-surface: color-mix(in srgb, #b3261e 6%, transparent);
  --qzr-del-line: color-mix(in srgb, #b3261e 28%, transparent);
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .qzr-account-del {
    /* Pure red on a dark surface fails contrast; lift it toward the light. */
    --qzr-del-ink: #ff8a80;
    --qzr-del-surface: color-mix(in srgb, #ff8a80 10%, transparent);
    --qzr-del-line: color-mix(in srgb, #ff8a80 34%, transparent);
  }
}

.qzr-account-del .qzr-nset-ico {
  color: var(--qzr-del-ink);
  background: var(--qzr-del-surface);
}

.qzr-account-del__lead {
  margin: 6px 0 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--qz-text);
}

.qzr-account-del__hint {
  margin: 0 0 14px;
  font-size: .8rem;
  color: var(--qz-muted, #5E8A7C);
}

.qzr-account-del__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-md, 12px);
  background: color-mix(in srgb, var(--qz-surface) 88%, transparent);
}

.qzr-account-del__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--qz-text);
}

.qzr-account-del__list li + li {
  border-top: 1px solid color-mix(in srgb, var(--qz-line) 55%, transparent);
}

.qzr-account-del__list i {
  flex: 0 0 16px;
  margin-top: 3px;
  font-size: .72rem;
  color: var(--qz-muted, #5E8A7C);
}

/* Feedback line — one element, three states, driven by the JS. */
.qzr-account-del__feedback {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: .8rem;
  font-weight: 700;
}

.qzr-account-del__feedback.is-error   { color: var(--qzr-del-ink); }
.qzr-account-del__feedback.is-ok      { color: var(--qz-accent-ink, #0A4F40); }
.qzr-account-del__feedback.is-pending { color: var(--qz-muted, #5E8A7C); }

/* The pending state is a status panel, not a form. */
.qzr-account-del--pending {
  padding: 14px;
  border: 1px solid var(--qzr-del-line);
  border-radius: var(--qz-r-md, 12px);
  background: var(--qzr-del-surface);
}

/* ---------------------------------------------------------------------------
   .btn-ux--danger — the app's only destructive button variant.
   !important mirrors the other .btn-ux modifiers in ui-visual-language.css,
   which set colour that way; without it the base .btn-ux background wins.
   --------------------------------------------------------------------------- */
.btn-ux--danger {
  background: #b3261e !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none;
}

.btn-ux--danger:hover:not(:disabled),
.btn-ux--danger:focus-visible:not(:disabled) {
  background: #8f1d17 !important;
}

.btn-ux--danger:disabled {
  /* Disabled is the DEFAULT state here — it only unlocks once SUPPRIMER is
     typed — so it has to read as "not yet", not as "broken". */
  background: color-mix(in srgb, #b3261e 32%, var(--qz-surface)) !important;
  color: color-mix(in srgb, #fff 78%, transparent) !important;
  cursor: not-allowed;
}