/*
 * Fax-feature scoped styles.
 *
 * All selectors live under .fax-app so none of these tokens leak into the
 * host Tailwind application. The host provides global utilities (.btn-primary,
 * .input-field, etc.) via app/assets/tailwind/application.css — we don't
 * re-declare those here.
 *
 * Design-rule audit (per project convention):
 *   - NO border-left color accents
 *   - NO box-shadow inset-left color stripes
 *   - NO left-edge gradient bleeds
 *   Every emphasis/state treatment uses top-border, full-bg-tint, or chip/pill.
 */

/* --------------------------------------------------------------------------
   PDF preview utility classes
   Used by _bench.html.erb and cover_sheet.html.erb.
   The hatched background evokes paper without any left-edge stripes.
-------------------------------------------------------------------------- */
.fax-app .pdf-bg {
  background: repeating-linear-gradient(
    45deg,
    #fbf9f5 0 12px,
    #f2eee6 12px 14px
  );
}

.fax-app .pdf-line {
  background: #e8e3da;
  height: 9px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Timeline dot — used in the fax detail / audit trail
-------------------------------------------------------------------------- */
.fax-app .tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Queue row states
   row-selected uses a full background tint (no left accent stripe).
-------------------------------------------------------------------------- */
.fax-app .row-hover:hover {
  background: #fbf9f5;
}

.fax-app .row-selected {
  background: #eaf0f5;
}

/* --------------------------------------------------------------------------
   Fax-specific calm-pill variants
   The host tailwind build provides .calm-pill and its modifiers; these
   supply any residual sub-variants used only in the fax UI.
-------------------------------------------------------------------------- */
.fax-app .fax-status-delivered {
  background: #eaf3ee;
  color: #3f7a5c;
  border-color: rgba(63, 122, 92, 0.3);
}

.fax-app .fax-status-failed {
  background: #fbeaea;
  color: #b33a3a;
  border-color: rgba(179, 58, 58, 0.3);
}

.fax-app .fax-status-sending {
  background: #eaf0f5;
  color: #3e5c76;
  border-color: rgba(62, 92, 118, 0.3);
}

.fax-app .fax-status-queued {
  background: #f6eedf;
  color: #a86b2c;
  border-color: rgba(168, 107, 44, 0.3);
}

/* --------------------------------------------------------------------------
   Contact-edit <dialog> modal
   Progressive enhancement: full-page new/edit forms work without JS;
   with JS the fax-dialog-controller opens the native <dialog> element.
   Top-border accent on the header row — NOT a left-edge stripe.
-------------------------------------------------------------------------- */
dialog.fax-dialog {
  padding: 0;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  overflow: hidden;
}

dialog.fax-dialog:not([open]) {
  display: none;
}

dialog.fax-dialog[open] {
  display: flex;
  flex-direction: column;
  /* Re-assert modal centering: the UA's `dialog:modal { margin: auto }` is
     clobbered by Tailwind preflight's margin reset which, combined with the
     UA `inset: 0`, would pin the dialog to the top-left corner. */
  margin: auto;
}

dialog.fax-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

dialog.fax-dialog .fax-dialog-header {
  padding: 1rem 1.25rem 0.875rem;
  border-top: 3px solid #3e5c76;
  border-bottom: 1px solid #e8e3da;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}

dialog.fax-dialog .fax-dialog-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f1b16;
}

dialog.fax-dialog .fax-dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #8b8275;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}

dialog.fax-dialog .fax-dialog-close:hover {
  background: #f2eee6;
  color: #1f1b16;
}

dialog.fax-dialog .fax-dialog-body {
  padding: 1.25rem;
  overflow-y: auto;
  /* flex-basis:auto (not 0) so the body sizes to its content — WebKit/Safari
     collapses a flex-basis:0 child to zero height in an auto-height flex
     column, which (with the dialog's overflow:hidden) clipped the form to the
     header. min-height:0 still lets it shrink + scroll under max-height. */
  flex: 1 1 auto;
  min-height: 0;
}