/* Admin confirmation dialog - src/components/admin/AdminConfirmDialog.vue
 *
 * One dialog for every destructive action in /admin. It sits above the admin
 * shell (sidebar z-index 900, view modals 1000), so it must outrank both: a
 * confirmation raised from inside a modal has to render over that modal.
 *
 * The panel flips direction per request (Hebrew screens rtl, English screens
 * ltr), so every rule here is written with logical properties - nothing may
 * assume a side.
 */

.acd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg, 24px);
  background: rgba(10, 20, 40, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: acd-fade-in 0.12s ease-out;
}

.acd-panel {
  width: 520px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  /* Cool-blue shadow family, never raw black. */
  box-shadow: 0 18px 48px rgba(0, 60, 130, 0.22);
  /* The tone stripe reads before any word does. */
  border-top: 3px solid #dc2626;
  animation: acd-rise 0.14s ease-out;
}

.acd-panel--warning {
  border-top-color: #d97706;
}

.acd-panel--neutral {
  border-top-color: var(--primary-color, #0071E3);
}

/* ── Head ─────────────────────────────────────────── */

.acd-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.35rem 1.5rem 0.5rem;
}

.acd-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 980px);
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  font-size: 0.95rem;
}

.acd-panel--warning .acd-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

.acd-panel--neutral .acd-icon {
  background: rgba(0, 113, 227, 0.1);
  color: var(--primary-color, #0071E3);
}

.acd-title {
  margin: 0;
  padding-block-start: 0.3rem;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-color, #191A23);
}

/* ── Body ─────────────────────────────────────────── */

.acd-body {
  padding: 0.35rem 1.5rem 1.25rem;
  /* Aligns the prose with the title rather than the icon. */
  padding-inline-start: calc(1.5rem + 34px + 0.75rem);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary, #5A5B6A);
}

.acd-message {
  margin: 0 0 0.75rem;
}

/* What will actually be destroyed, one line per kind of record. */
.acd-list {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.85rem;
  padding-inline-start: 1.65rem;
  list-style: disc;
  background: #f7f8fa;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-color, #191A23);
}

.acd-list li + li {
  margin-block-start: 0.3rem;
}

.acd-irreversible {
  margin: 0;
  font-weight: 600;
  color: #b91c1c;
}

.acd-undo {
  margin: 0;
  color: #15803d;
}

/* ── Type-to-confirm ──────────────────────────────── */

.acd-require {
  display: block;
  margin-block-start: 1rem;
}

.acd-require__label {
  display: block;
  margin-block-end: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-color, #191A23);
}

.acd-require__token {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: #eef1f5;
  /* Deliberately NOT var(--font-mono): Departure Mono carries no Hebrew
     glyphs, and the token is usually a person's or cohort's name, so a
     Hebrew name fell back mid-string and rendered letter-spaced and broken.
     The chip background and weight already set it apart from the sentence. */
  font-size: 0.88rem;
  font-weight: 600;
  color: #b91c1c;
  /* Names copied out of a table can be long; never let one widen the panel. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 16px, not 0.9rem, at EVERY width. This dialog is mounted by AdminLayout as a
   sibling of `.admin-main`, so it sits outside `.per-page` and the Person page's
   16px touch-width floor cannot reach it: measured 14.4px on a phone on
   2026-08-08. Under 16px, iOS Safari zooms the page in on focus and never zooms
   back out - and this is the box a staff member has to type a customer's name
   into to confirm deleting them, which is the worst possible moment to lose the
   viewport. Unconditional rather than inside the phone block: an iPad does it
   too, and one value is easier to keep true than two.

   The literal `16px` rather than `1rem` is deliberate and is the rule the rest
   of this panel follows: `rem` is only 16px while nothing re-bases the root,
   and iOS measures the computed pixel value, not the ratio. */
.acd-require__input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid #d5d9e0;
  border-radius: var(--radius-sm, 8px);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.acd-require__input:focus {
  border-color: var(--primary-color, #0071E3);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

/* Rendered only once something has been typed and it does not match, so this is
   the one line on the panel that answers "why is the button still grey?".
   Without it that button WAS the whole answer, and an open-day seat whose
   registration carried a different name than its lead was reported as
   impossible to delete.

   Same #b91c1c as `.acd-irreversible` and the token chip above it - the panel
   already uses that red for "read this before you press", and a second error
   colour would only ask the reader to learn one more thing. Block-direction
   spacing only: nothing here may assume a side, the panel flips per request. */
.acd-require__hint {
  margin: 0;
  margin-block-start: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #b91c1c;
}

/* ── Email preview ────────────────────────────────────
 *
 * Present only when a call site passed `previewHtml` (or the honest note that
 * says it could not be loaded). Everything above this block is untouched for a
 * text-only dialog - the whole preview layout hangs off `.acd-panel--preview`.
 *
 * The change it makes is one thing: the panel stops being a single scrolling
 * box. A 520px box that scrolls as a whole pushes Cancel and Confirm off the
 * bottom the moment the content is an email, and an answer you have to go
 * looking for is not a confirmation. Each region owns its own overflow instead -
 * the prose scrolls, the email scrolls inside its own frame, and the two fixed
 * ends (the title and the buttons) never move.
 */

.acd-panel--preview {
  /* 520px cannot hold a 600px email card. */
  width: 720px;
  display: flex;
  flex-direction: column;
  /* Replaces the panel-wide scroll - the regions below scroll instead. */
  overflow: hidden;
}

.acd-panel--preview .acd-head {
  flex: none;
}

/* The prose gives way first: it is short, and it has been read by the time the
   preview matters. `min-height: 0` is what actually lets it shrink inside a
   flex column. */
.acd-panel--preview .acd-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.acd-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 0.9rem;
}

.acd-preview__label {
  flex: none;
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-secondary, #5A5B6A);
}

.acd-preview__frame {
  flex: 1 1 auto;
  /* Enough to read a greeting, the date and the location without scrolling. */
  min-height: 240px;
  border: 1px solid #e5e8ee;
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  /* Keeps the iframe's square corners inside the rounded frame. */
  overflow: hidden;
  /* A second flex context, so the iframe STRETCHES to the frame rather than
     resolving a percentage height against it. `height: 100%` inside a box whose
     own height comes from `min-height` is the case browsers disagree about, and
     losing it collapses the frame to an iframe's 150px intrinsic default. */
  display: flex;
}

.acd-preview__iframe {
  /* Fills the frame in both axes: flex-grow across, the default `stretch`
     alignment down. The email scrolls inside itself. */
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: #fff;
}

/* Not an error state for the ACTION - the send is unaffected and the buttons
   below still work. Warm rather than red, for exactly that reason. */
.acd-preview__error {
  flex: none;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed #e3c68e;
  border-radius: var(--radius-sm, 8px);
  background: #fdf8ec;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #92400e;
}

/* ── Actions ──────────────────────────────────────── */

.acd-actions {
  display: flex;
  /* flex-START, matching .modal-footer in admin.css. Trailing-edge actions are
     the more common convention, but every other modal in this panel puts them
     at the reading start, and a confirmation is not the place to move a button
     staff reach for by muscle memory. Cancel is first in the DOM, so it is
     first in reading order in both directions. */
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem 1.25rem;
  border-block-start: 1px solid #eef0f3;
}

/* The load-bearing half of the preview layout: whatever the email does, the
   answer buttons keep their height and their place at the foot of the panel. */
.acd-panel--preview .acd-actions {
  flex: none;
}

/* 44px at every width, for the same reason the input above is 16px at every
   width: this dialog is the last thing between a staff member and an
   irreversible action, and below 767px `.btn` drops to 0.4rem/0.8rem padding
   with no floor behind it (measured 31.8px on a phone, 2026-08-08). A tablet
   is a touch device too, so the floor is not fenced into the phone block. */
.acd-cancel,
.acd-confirm {
  min-height: 44px;
}

/* Cancel is the safe default and looks it: quiet, but the wider target. */
.acd-cancel {
  min-width: 96px;
  justify-content: center;
  font-weight: 500;
}

.acd-confirm {
  min-width: 96px;
  justify-content: center;
  font-weight: 600;
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.acd-confirm:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.acd-confirm--warning {
  background: #d97706;
  border-color: #d97706;
}

.acd-confirm--warning:hover:not(:disabled) {
  background: #b45309;
  border-color: #b45309;
}

/* A question that destroys nothing must not wear the destructive red. */
.acd-confirm--neutral {
  background: var(--primary-color, #0071E3);
  border-color: var(--primary-color, #0071E3);
}

.acd-confirm--neutral:hover:not(:disabled) {
  background: #005bb5;
  border-color: #005bb5;
}

.acd-confirm:disabled {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.acd-panel :focus-visible {
  outline: 2px solid var(--primary-color, #0071E3);
  outline-offset: 2px;
}

@keyframes acd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes acd-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acd-overlay,
  .acd-panel {
    animation: none;
  }
}

@media (max-width: 767px) {
  .acd-overlay {
    padding: var(--space-md, 16px);
    align-items: flex-end;
  }

  .acd-panel {
    width: 100%;
  }

  .acd-body {
    /* No room to indent past the icon on a phone. */
    padding-inline-start: 1.5rem;
  }

  /* The panel is already full-width here, so the only thing left to give the
     email is height - taken from the padding around it, never from the buttons. */
  .acd-panel--preview {
    max-height: 88vh;
  }

  .acd-preview {
    padding-inline: 1rem;
  }

  .acd-preview__frame {
    min-height: 180px;
  }

  /* column-REVERSE: the panel is pinned to the bottom of the screen on a
     phone, so the last item in the column is the one under the thumb. Cancel
     is authored first and therefore lands there, and the destructive button
     sits above it where it takes a deliberate reach. */
  .acd-actions {
    flex-direction: column-reverse;
    /* 1rem, not the base 0.5rem: stacked, the gap is the only thing between a
       thumb reaching for Cancel and the destructive button directly above it.
       Measured 8px on 2026-08-08, against the 16px required around anything
       destructive. */
    gap: 1rem;
  }

  .acd-cancel,
  .acd-confirm {
    width: 100%;
  }
}