/* ===== FORMS: GLOBAL DATA VIEWS ===== */
/* Cross-form Contacts / Appointments / All-Submissions subviews of the Forms
   tab (#formsRoot, public/js/form-data-views.js). This file is a THIN pane
   layer over frm-shared.css — the shared stylesheet already owns the
   form-table.js component + the primitives (.frm-btn / .frm-badge / .frm-empty
   / .frm-drawer). Here we only add the pane chrome (airy header, view icon),
   the detail-drawer content styling, the status-pill colour modifiers and the
   small toolbar icon affordances (search / filter caret / CSV download).

   Everything sits on the kanban design tokens from index.css (--card, --border,
   --accent, --gold, --t1..t3, radius/spacing/font scales, --green, --red,
   --orange) so both the default dark theme and [data-theme=light] stay correct
   with no hardcoded
   colours — the sole exceptions are the search/caret data-URI icons (an SVG
   background can't inherit currentColor), which carry an explicit light-theme
   override at the bottom. */

/* ── page shell ── */
.frm-dv {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s7) var(--s6) var(--s8);
  display: grid;
  /* minmax(0,1fr) so the table row can shrink below its content width and the
     .frm-table-wrap overflow-x scroll engages instead of pushing the whole
     page wide (grid tracks default to min-width:auto = content). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-content: start;
}

/* the table mount must be allowed to shrink below its content so the wrap's
   overflow-x:auto scrolls the wide table instead of overflowing the page. */
.frm-dv-table {
  min-width: 0;
}

/* ── header (icon tile + title + subtitle + count) ── */
.frm-dv-head {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.frm-dv-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r4);
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.frm-dv-head-icon .mi,
.frm-dv-head-icon .frm-ico {
  width: 20px;
  height: 20px;
}
.frm-dv-head-text {
  min-width: 0;
}
.frm-dv-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fz-2xl);
  font-weight: var(--fw-bold);
  color: var(--t1);
  line-height: 1.15;
}
.frm-dv-sub {
  margin-top: 3px;
  font-size: var(--fz-md);
  color: var(--t3);
  line-height: var(--lh-snug);
}
.frm-dv-count {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.frm-dv-count:empty {
  display: none;
}

/* ── loading / error / empty ── */
.frm-dv-loading,
.frm-dv-drawer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--t3);
  font-size: var(--fz-md);
  padding: var(--s8) 0;
}
.frm-dv-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border3);
  border-top-color: var(--accent);
  animation: frm-dv-spin 0.7s linear infinite;
}
@keyframes frm-dv-spin {
  to {
    transform: rotate(360deg);
  }
}
/* error re-uses .frm-empty; only the icon gets a danger tint */
.frm-dv-error-icon {
  background: var(--danger-dim);
  color: var(--red);
}
.frm-dv-none {
  color: var(--t3);
  font-size: var(--fz-sm);
  padding: var(--s2) 0;
}

/* ── load-more bar ── */
.frm-dv-more {
  display: flex;
  justify-content: center;
}
.frm-dv-more:empty {
  display: none;
}

/* ══════════════════════════════════════════════════════════════ */
/* TABLE — small additions over frm-shared's form-table styling      */
/* ══════════════════════════════════════════════════════════════ */
/* Search field gets a leading magnifier. */
.frm-dv .frm-table-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 15px 15px;
  padding-left: 34px;
}
/* Filter selects get the dashboard custom caret (frm-shared leaves them
   native-arrow; here we restyle them to match .frm-select). */
.frm-dv .frm-table-filter {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
  padding-right: 32px;
}
/* CSV + bulk buttons pick up a leading icon via a currentColor mask (theme-safe). */
.frm-dv .frm-table-csv::before,
.frm-dv .frm-table-bulk::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* Long values ellipsize instead of forcing horizontal scroll. */
.frm-dv .frm-table-el td {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* muted leading icon inside the primary (Name / Contact) cell */
.frm-dv-strong {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--t1);
  font-weight: var(--fw-semibold);
}
.frm-dv-row-ico {
  color: var(--t3);
  flex-shrink: 0;
}

/* ── generic cell fragments ── */
.frm-dv-mono {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fz-xs);
  color: var(--t3);
}
.frm-dv-pts {
  display: inline-block;
  margin-left: var(--s2);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-semibold);
  color: var(--gold);
  border: 1px solid var(--goldBd);
  background: rgba(217, 170, 69, 0.1);
  font-variant-numeric: tabular-nums;
}
.frm-dv-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  color: var(--t2);
  background: var(--chip);
  border: 1px solid var(--border2);
}

/* ══════════════════════════════════════════════════════════════ */
/* STATUS PILLS — .frm-dv-badge base (mirrors .frm-badge) + colours  */
/* ══════════════════════════════════════════════════════════════ */
.frm-dv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.frm-dv-badge .mi,
.frm-dv-badge .frm-ico {
  width: 12px;
  height: 12px;
}
.frm-dv-b-blank {
  color: var(--t3);
  border-color: var(--border2);
  background: transparent;
  letter-spacing: 0;
}
/* qualification */
.frm-dv-q-qualified {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}
.frm-dv-q-unqualified {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: var(--danger-dim);
}
.frm-dv-q-none {
  color: var(--t3);
  border-color: var(--border2);
  background: var(--chip);
}
/* contact flags */
.frm-dv-booked {
  color: var(--gold);
  border-color: var(--goldBd);
  background: rgba(217, 170, 69, 0.12);
}
.frm-dv-synced {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}
/* appointment status (5-status enum, read-only v1) */
.frm-dv-a-unconfirmed {
  color: var(--t2);
  border-color: var(--border2);
  background: var(--chip);
}
.frm-dv-a-confirmed {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-dim);
}
.frm-dv-a-showed {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}
.frm-dv-a-no_show {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 35%, transparent);
  background: color-mix(in srgb, var(--orange) 13%, transparent);
}
.frm-dv-a-cancelled {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: var(--danger-dim);
}
/* session status (All Submissions) */
.frm-dv-s-completed {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}
.frm-dv-s-partial {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
}
.frm-dv-s-abandoned {
  color: var(--t3);
  border-color: var(--border2);
  background: var(--chip);
}

/* ── qualification override select (completed rows) ── */
.frm-dv-qual-sel {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--card2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 13px 13px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 3px 24px 3px 10px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: var(--t2);
  transition:
    border-color var(--tr-fast),
    box-shadow var(--tr-fast);
}
.frm-dv-qual-sel:hover {
  border-color: var(--border3);
}
.frm-dv-qual-sel:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.frm-dv-qual-sel.frm-dv-q-qualified {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
}
.frm-dv-qual-sel.frm-dv-q-unqualified {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}
.frm-dv-qual-sel.frm-dv-q-none {
  color: var(--t3);
}
.frm-dv-qual-sel:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ══════════════════════════════════════════════════════════════ */
/* DETAIL DRAWER — leans on .frm-drawer (frm-shared); pane content   */
/* ══════════════════════════════════════════════════════════════ */
.frm-dv-drawer {
  width: min(520px, 94vw);
}
.frm-dv-drawer-head-text {
  min-width: 0;
  margin-right: auto;
}
.frm-dv-drawer-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* meta strip under the header (status + score + time) */
.frm-dv-drawer-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.frm-dv-drawer-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--t3);
  font-size: var(--fz-sm);
  margin-left: auto;
}
.frm-dv-drawer-time .mi,
.frm-dv-drawer-time .frm-ico {
  width: 13px;
  height: 13px;
}
.frm-dv-sub-score {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--gold);
  white-space: nowrap;
}

/* sections */
.frm-dv-section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.frm-dv-section-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t3);
  margin: 0;
}
.frm-dv-section-title .mi,
.frm-dv-section-title .frm-ico {
  width: 14px;
  height: 14px;
}

/* lead information / appointment info grid */
.frm-dv-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.frm-dv-info {
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s3);
  display: grid;
  /* start-align so a direct badge/tag child hugs its content instead of
     stretching to the full column width (grid default justify-items:stretch). */
  justify-items: start;
  gap: 6px;
  font-size: var(--fz-sm);
  color: var(--t1);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* the wide CRM-sync / booked value wrappers must still fill the row so a
   right-side mono id doesn't get clipped by start-alignment — but a direct
   badge child (also a <span>) must keep hugging its content. */
.frm-dv-info > span:not(.frm-dv-badge) {
  justify-self: stretch;
  min-width: 0;
}
.frm-dv-info-wide {
  grid-column: 1 / -1;
}
.frm-dv-info-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t3);
}
.frm-dv-info-label .mi,
.frm-dv-info-label .frm-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.frm-dv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* submission history (expandable Q&A) */
.frm-dv-sub {
  border: 1px solid var(--border);
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--bg2);
}
.frm-dv-sub + .frm-dv-sub {
  margin-top: var(--s2);
}
.frm-dv-sub-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  background: transparent;
  border: none;
  color: var(--t2);
  font-family: inherit;
  font-size: var(--fz-sm);
  padding: var(--s3);
  cursor: pointer;
  text-align: left;
  transition: background var(--tr-fast);
}
.frm-dv-sub-head:hover {
  background: var(--card-hover);
}
.frm-dv-sub-form {
  font-weight: var(--fw-semibold);
  color: var(--t1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frm-dv-sub-date {
  color: var(--t3);
  font-size: var(--fz-xs);
  white-space: nowrap;
}
.frm-dv-caret {
  display: inline-flex;
  color: var(--t3);
  transition: transform var(--tr-base);
}
.frm-dv-sub.open .frm-dv-caret {
  transform: rotate(180deg);
}
.frm-dv-sub .frm-dv-qa {
  display: none;
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 1px solid var(--border);
}
.frm-dv-sub.open .frm-dv-qa {
  display: block;
}
.frm-dv-qa-row {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}
.frm-dv-qa-row:last-child {
  border-bottom: none;
}
.frm-dv-qa-q {
  font-size: var(--fz-sm);
  color: var(--t3);
  margin-bottom: 3px;
}
.frm-dv-qa-a {
  font-size: var(--fz-base);
  color: var(--t1);
  overflow-wrap: anywhere;
}

/* activity timeline / event trail — icon-chip markers */
.frm-dv-tl {
  display: grid;
  gap: var(--s3);
}
.frm-dv-tl-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}
.frm-dv-tl-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--t3);
  background: var(--chip);
  border: 1px solid var(--border);
}
.frm-dv-tl-dot .mi,
.frm-dv-tl-dot .frm-ico {
  width: 14px;
  height: 14px;
}
.frm-dv-tl-sub,
.frm-dv-tl-ev-complete,
.frm-dv-tl-ev-qualify {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.frm-dv-tl-book,
.frm-dv-tl-ev-book {
  color: var(--gold);
  background: rgba(217, 170, 69, 0.12);
  border-color: var(--goldBd);
}
.frm-dv-tl-crm,
.frm-dv-tl-ev-start,
.frm-dv-tl-ev-answer {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.frm-dv-tl-fail,
.frm-dv-tl-ev-abandon {
  color: var(--red);
  background: var(--danger-dim);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.frm-dv-tl-body {
  min-width: 0;
  padding-top: 4px;
}
.frm-dv-tl-label {
  font-size: var(--fz-sm);
  color: var(--t1);
  overflow-wrap: anywhere;
}
.frm-dv-tl-time {
  font-size: var(--fz-xs);
  color: var(--t3);
  margin-top: 1px;
}

/* tracking data */
.frm-dv-track-row {
  display: flex;
  gap: var(--s3);
  padding: var(--s2) 0;
  font-size: var(--fz-sm);
  min-width: 0;
  border-bottom: 1px solid var(--border);
}
.frm-dv-track-row:last-child {
  border-bottom: none;
}
.frm-dv-track-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--t3);
  font-weight: var(--fw-medium);
  flex-shrink: 0;
  min-width: 120px;
}
.frm-dv-track-key .mi,
.frm-dv-track-key .frm-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.frm-dv-track-val {
  color: var(--t2);
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fz-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════ */
/* LIGHT THEME — data-URI icons only (tokens handle everything else) */
/* ══════════════════════════════════════════════════════════════ */
[data-theme='light'] .frm-dv .frm-table-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
[data-theme='light'] .frm-dv .frm-table-filter,
[data-theme='light'] .frm-dv-qual-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  html:not([data-theme='dark']):not([data-theme='light']) .frm-dv .frm-table-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  }
  html:not([data-theme='dark']):not([data-theme='light']) .frm-dv .frm-table-filter,
  html:not([data-theme='dark']):not([data-theme='light']) .frm-dv-qual-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ── responsive (<= 640px): drawer full width, single-column grid ── */
@media (max-width: 640px) {
  .frm-dv {
    padding: var(--s5) var(--s4) var(--s7);
    gap: var(--s4);
  }
  .frm-dv-head-icon {
    width: 38px;
    height: 38px;
  }
  .frm-dv-title {
    font-size: var(--fz-xl);
  }
  .frm-dv-drawer {
    width: 100%;
  }
  .frm-dv-info-grid {
    grid-template-columns: 1fr;
  }
  .frm-dv-info-wide {
    grid-column: auto;
  }
}