/* ==========================================================================
   HassleFreeBooks — confirm / alert / prompt dialog (hfb-dialog.js)
   ==========================================================================
   One native <dialog class="hfb-dialog"> built on first use. It replaces
   window.alert / confirm / prompt everywhere. Colours, radii, spacing and
   shadows all come from design-tokens.css, so the light, dark and system
   themes follow the rest of the app. No inline styles: the script only
   toggles the classes below, which keeps it clean under the nonce-only CSP.
   ========================================================================== */

.hfb-dialog {
  /* The danger button needs 4.5:1 against its label in every theme. */
  --hfb-danger-bg: var(--color-danger-text, #a12d2d);
  --hfb-danger-bg-hover: #8a2525;
  --hfb-danger-fg: #ffffff;

  box-sizing: border-box;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-border, #e8e5e1);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #37352f);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: var(--font-size-base, 0.9375rem);
  line-height: var(--line-height-base, 1.5);
  box-shadow: var(--shadow-xl, 0 16px 32px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04));
}

/* A browser without <dialog> support must not paint it before it is opened. */
.hfb-dialog:not([open]) {
  display: none;
}

.hfb-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

body.theme-dark .hfb-dialog {
  --hfb-danger-bg: var(--color-danger, #eb6060);
  --hfb-danger-bg-hover: #f07a7a;
  --hfb-danger-fg: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  body.theme-system .hfb-dialog {
    --hfb-danger-bg: var(--color-danger, #eb6060);
    --hfb-danger-bg-hover: #f07a7a;
    --hfb-danger-fg: #1a1a1a;
  }
}

/* Author display rules would otherwise beat the UA [hidden] rule. */
.hfb-dialog [hidden] {
  display: none !important;
}

.hfb-dialog__panel {
  padding: var(--space-6, 1.5rem);
}

.hfb-dialog__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  color: var(--color-text, #37352f);
}

.hfb-dialog--danger .hfb-dialog__title {
  color: var(--color-danger-text, #a12d2d);
}

/* pre-line: messages carry \n paragraph breaks (void warnings, line-item lists). */
.hfb-dialog__message {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--color-text, #37352f);
}

.hfb-dialog__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--input-height-lg, 40px);
  margin-top: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-strong, #d3d1cb);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg, #faf9f7);
  color: var(--color-text, #37352f);
  font: inherit;
}

.hfb-dialog__input:focus-visible {
  outline: 2px solid var(--color-primary, #1a6fb8);
  outline-offset: 0;
}

.hfb-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-5, 1.25rem);
}

.hfb-dialog__btn {
  min-width: 5.5rem;
  min-height: 40px;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  font: inherit;
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms ease);
}

.hfb-dialog__btn:focus-visible {
  outline: 3px solid var(--color-primary, #1a6fb8);
  outline-offset: 2px;
}

.hfb-dialog__btn--secondary {
  background: var(--color-surface, #ffffff);
  border-color: var(--color-border-strong, #d3d1cb);
  color: var(--color-text, #37352f);
}

.hfb-dialog__btn--secondary:hover {
  background: var(--color-surface-hover, #f0eeeb);
}

.hfb-dialog__btn--primary {
  background: var(--color-primary, #1a6fb8);
  color: var(--color-text-on-primary, #ffffff);
}

.hfb-dialog__btn--primary:hover {
  background: var(--color-primary-hover, #155b99);
}

.hfb-dialog__btn--danger {
  background: var(--hfb-danger-bg);
  color: var(--hfb-danger-fg);
}

.hfb-dialog__btn--danger:hover {
  background: var(--hfb-danger-bg-hover);
}

/* Phones: full-width buttons, the primary action on top within thumb reach. */
@media (max-width: 420px) {
  .hfb-dialog__actions {
    flex-direction: column-reverse;
  }

  .hfb-dialog__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hfb-dialog[open] {
    animation: hfb-dialog-in var(--transition-base, 200ms ease);
  }

  .hfb-dialog[open]::backdrop {
    animation: hfb-dialog-fade var(--transition-base, 200ms ease);
  }
}

@keyframes hfb-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

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

@media print {
  .hfb-dialog {
    display: none;
  }
}