/* 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);
}

/* ── 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%;
  }
}