/* ═══════════════════════════════════════════════════════════════════════════
   ui-dialog.css — styling for the app's own alert / confirm / prompt

   Same visual shell as the Add/Edit fuel table dialog, so a confirmation on
   the Rules screen and one on the Fuel screen do not look like they came from
   different products.

   Every colour is a theme variable, so these dialogs follow light and dark
   like the rest of the app — which is the whole thing window.confirm() could
   never do.

   z-index is set inline by ui-dialog.js (10050 and up, incrementing per
   stacked dialog) so a confirm can open on top of the preflight modal at
   9000 and its rule viewer at 9600. app.js pins the toast strip above
   everything at runtime, so the result of an action still lands over the
   dialog that asked about it.
   ═══════════════════════════════════════════════════════════════════════════ */

.appdlg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: appdlg-fade 0.12s ease-out;
}

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

.appdlg-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 22px 24px 18px;
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  animation: appdlg-rise 0.14s ease-out;
}

/* Anything carrying a list or a set of choices needs the extra room, or the
   branch labels wrap after two words. */
.appdlg-box-wide {
  width: min(560px, 100%);
}

@keyframes appdlg-rise {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.appdlg-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.appdlg-icon {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
}

.appdlg-icon-danger,
.appdlg-icon-error {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
}

.appdlg-icon-warning {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

.appdlg-copy {
  min-width: 0;
  flex: 1;
}

.appdlg-title {
  margin: 2px 0 6px;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text-primary);
}

.appdlg-msg {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* The consequence, not the question. Smaller and quieter so the two are not
   read as one run-on sentence the way \n\n rendered them natively. */
.appdlg-detail {
  margin: 8px 0 0;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ── Lists (stack confirmation) ─────────────────────────────────────────── */

.appdlg-groups {
  margin-top: 12px;
}

.appdlg-group-label {
  margin: 12px 0 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.appdlg-groups > .appdlg-group-label:first-child {
  margin-top: 0;
}

.appdlg-list {
  margin: 8px 0 0;
  padding: 10px 12px 10px 26px;
  list-style: disc;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.appdlg-list li + li {
  margin-top: 4px;
}

.appdlg-footnote {
  margin: 12px 0 0;
  font-size: 0.77rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ── Prompt field ───────────────────────────────────────────────────────── */

.appdlg-field {
  margin-top: 14px;
}

.appdlg-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.appdlg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.appdlg-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.appdlg-textarea {
  resize: vertical;
  min-height: 68px;
}

/* Validation stays INSIDE the dialog. The native version had to close first
   and then toast the complaint, which meant reopening and retyping. */
.appdlg-error {
  margin: 7px 0 0;
  font-size: 0.77rem;
  line-height: 1.4;
  color: var(--error);
}

.appdlg-error[hidden] {
  display: none;
}

/* ── Choices (A/B questions) ────────────────────────────────────────────── */

.appdlg-choices {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appdlg-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.appdlg-choice:hover {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

.appdlg-choice:has(input:checked) {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
}

.appdlg-choice input {
  margin-top: 2px;
  accent-color: var(--accent-primary);
  flex: 0 0 auto;
}

.appdlg-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.appdlg-choice-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.appdlg-choice-hint {
  font-size: 0.77rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

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

.appdlg-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.appdlg-btn {
  padding: 8px 16px;
  font-size: 0.84rem;
  font-family: inherit;
  font-weight: 550;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, filter 0.12s;
}

.appdlg-btn:hover:not(:disabled) {
  border-color: var(--accent-primary);
}

.appdlg-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.appdlg-btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  font-weight: 600;
}

.appdlg-btn-primary:hover:not(:disabled) {
  filter: brightness(0.94);
  color: #fff;
}

/* Solid destructive fill. The primary action of a delete dialog has to read
   as destructive before it is hovered. */
.appdlg-btn-destructive {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  font-weight: 600;
}

.appdlg-btn-destructive:hover:not(:disabled) {
  filter: brightness(0.92);
  color: #fff;
}

@media (max-width: 480px) {
  .appdlg-actions {
    flex-direction: column-reverse;
  }
  .appdlg-actions .appdlg-btn {
    width: 100%;
  }
}