/* ===== FORMS: SUBMISSIONS + LOGS PANES ===== */
/* Pane-specific layer for the per-form Submissions + Appointments pane
   (#frmPane-submissions, public/js/form-submissions.js) and the Integration
   Logs pane (#frmPane-logs, public/js/form-logs.js). The heavy lifting —
   the filterable table, .frm-btn / .frm-select / .frm-badge / .frm-kpi /
   .frm-drawer / .frm-empty primitives — lives in frm-shared.css; this file
   only adds what's unique to these two surfaces (segmented sub-view toggle,
   status/tag colours, the answer + JSON detail bodies). Everything is built on
   the index.css design tokens so dark (default) and [data-theme=light] are
   both correct. */

/* ── pane shell (airy, centred, generous gaps) ── */
.frm-sub-pane,
.frm-logs-pane {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s6);
  display: grid;
  /* single column pinned to the container width (minmax(0,…) — NOT the wide
     table's max-content) so the table scrolls inside its own wrap instead of
     stretching the whole pane and forcing a horizontal page scroll. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-content: start;
}

/* the table mount must be allowed to shrink below its content width so the
   .frm-table-wrap overflow-x scroll actually engages. */
.frm-sub-table {
  min-width: 0;
}

/* ── header: sub-view toggle / title + refresh ── */
.frm-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.frm-sub-toggle {
  display: inline-flex;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--r3);
  padding: 3px;
  gap: 2px;
}
.frm-sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text2);
  font-size: var(--fz-base);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  padding: 7px 14px;
  border-radius: var(--r2);
  cursor: pointer;
  transition:
    background var(--tr-fast),
    color var(--tr-fast);
}
.frm-sub-tab .mi,
.frm-sub-tab .frm-ico {
  width: 15px;
  height: 15px;
}
.frm-sub-tab:hover {
  color: var(--text);
}
.frm-sub-tab-on {
  background: var(--accent-dim);
  color: var(--accent);
}
.frm-sub-note {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fz-sm);
  color: var(--text3);
}
.frm-sub-note .mi,
.frm-sub-note .frm-ico {
  width: 14px;
  height: 14px;
}

/* ── logs pane header text ── */
.frm-logs-head-text {
  display: grid;
  gap: 3px;
}
.frm-logs-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fz-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0;
}
.frm-logs-title .mi,
.frm-logs-title .frm-ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.frm-logs-sub {
  font-size: var(--fz-base);
  color: var(--text3);
  margin: 0;
  line-height: var(--lh-snug);
}

/* ── KPI stat tiles: shared .frm-kpi, only the icon accent is pane-specific ── */
.frm-sub-tile-total .frm-kpi-label .frm-ico {
  color: var(--text2);
}
.frm-sub-tile-completed .frm-kpi-label .frm-ico {
  color: var(--green);
}
.frm-sub-tile-partial .frm-kpi-label .frm-ico {
  color: var(--gold);
}
.frm-sub-tile-qualified .frm-kpi-label .frm-ico {
  color: var(--accent);
}

/* ── loading / error states (empty relies on shared .frm-empty) ── */
.frm-sub-empty,
.frm-sub-loading {
  padding: var(--s8) var(--s5);
  text-align: center;
  color: var(--text3);
  font-size: var(--fz-md);
}
.frm-sub-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border2));
  background: var(--danger-dim);
  border-radius: var(--r3);
  color: var(--text);
  font-size: var(--fz-base);
}
.frm-sub-error-msg {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.frm-sub-error-msg .mi,
.frm-sub-error-msg .frm-ico {
  width: 16px;
  height: 16px;
  color: var(--red);
}

/* ── table: shared frm-table styling; only per-question column truncation
   and a slightly denser scroll body are pane-specific ── */
.frm-sub-pane .frm-table-el td,
.frm-logs-pane .frm-table-el td {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── submission cells ── */
.frm-sub-lead {
  display: grid;
  line-height: var(--lh-snug);
}
.frm-sub-lead-name {
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.frm-sub-lead-mail {
  font-size: var(--fz-sm);
  color: var(--text3);
}
.frm-sub-score {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.frm-sub-dim {
  color: var(--text3);
}

/* inline qualification select — compact + status-tinted (shared .frm-select
   supplies the caret + fill; we only override size/colour, longhand so the
   caret background-image survives) */
.frm-sub-pane select.frm-sub-qual {
  width: auto;
  min-width: 122px;
  padding: 5px 30px 5px 11px;
  font-size: var(--fz-sm);
  font-weight: var(--fw-semibold);
}
.frm-sub-pane select.frm-sub-qual-qualified {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 55%, var(--border2));
}
.frm-sub-pane select.frm-sub-qual-unqualified {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 55%, var(--border2));
}

/* tag cells: flowing .frm-badge pills (lowercase, no letter-spacing) */
.frm-sub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.frm-sub-tag {
  text-transform: none;
  letter-spacing: 0;
}
.frm-sub-tag .mi,
.frm-sub-tag .frm-ico {
  width: 11px;
  height: 11px;
  opacity: 0.75;
}

/* ── status / kind badges (shared .frm-badge base; these add the colour) ── */
.frm-sub-badge-complete,
.frm-sub-badge-success,
.frm-sub-badge-confirmed,
.frm-sub-badge-showed,
.frm-sub-badge-qualified {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.frm-sub-badge-partial,
.frm-sub-badge-unconfirmed {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}
.frm-sub-badge-failed,
.frm-sub-badge-no_show,
.frm-sub-badge-cancelled {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 13%, transparent);
}
.frm-sub-badge-unqualified {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 15%, transparent);
}
.frm-sub-badge-none {
  color: var(--text3);
  background: var(--card2);
  border: 1px solid var(--border2);
}
.frm-sub-badge-score {
  color: var(--accent);
  background: var(--accent-dim);
  text-transform: none;
  letter-spacing: 0;
}

/* ── detail drawer (shared .frm-drawer chrome; pane owns the inner body) ── */
.frm-sub-drawer-name {
  font-size: var(--fz-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-tight);
}
.frm-sub-drawer-mail {
  margin-top: 2px;
}
.frm-sub-drawer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.frm-sub-section .frm-section-title {
  margin-bottom: 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.frm-sub-ans {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  display: grid;
  gap: 3px;
}
.frm-sub-ans-title {
  font-size: var(--fz-sm);
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.frm-sub-ans-val {
  font-size: var(--fz-base);
  color: var(--text);
  word-break: break-word;
}
.frm-sub-pts {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  white-space: nowrap;
}
.frm-sub-pts-zero {
  color: var(--text3);
}

/* uploaded-file link inside the drawer */
.frm-sub-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  padding: 5px 10px;
  cursor: pointer;
  transition:
    background var(--tr-fast),
    border-color var(--tr-fast);
}
.frm-sub-file:hover {
  background: var(--card-hover);
  border-color: var(--border3);
}
.frm-sub-file .mi,
.frm-sub-file .frm-ico {
  width: 14px;
  height: 14px;
}
.frm-sub-file-noPath {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text3);
  font-size: var(--fz-sm);
}
.frm-sub-file-noPath .mi,
.frm-sub-file-noPath .frm-ico {
  width: 14px;
  height: 14px;
}

/* ── logs: type icon accent, reference code, detail body ── */
.frm-log-type {
  text-transform: none;
  letter-spacing: 0;
}
.frm-log-type .mi,
.frm-log-type .frm-ico {
  width: 13px;
  height: 13px;
}
.frm-log-type-ghl {
  color: var(--accent);
  background: var(--accent-dim);
}
.frm-log-type-meta {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 15%, transparent);
}
.frm-logs-action {
  color: var(--text);
  font-weight: var(--fw-medium);
}
.frm-logs-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fz-sm);
  background: var(--chip);
  border: 1px solid var(--border2);
  border-radius: var(--r1);
  padding: 1px 6px;
  color: var(--text2);
}

/* logs detail drawer: wider than the default (JSON needs room) */
.frm-logs-drawer {
  width: 640px;
  max-width: 96vw;
}
.frm-logs-detail-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}
.frm-logs-type-ico {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.frm-logs-type-ico .mi,
.frm-logs-type-ico .frm-ico {
  width: 18px;
  height: 18px;
}
.frm-logs-type-ico.frm-logs-type-ghl {
  color: var(--accent);
}
.frm-logs-type-ico.frm-logs-type-meta {
  color: var(--purple);
}
.frm-logs-detail-event {
  font-size: var(--fz-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frm-logs-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border2));
  background: var(--danger-dim);
  border-radius: var(--r2);
  padding: var(--s3);
  color: var(--red);
  font-size: var(--fz-sm);
  word-break: break-word;
}
.frm-logs-error .mi,
.frm-logs-error .frm-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.frm-logs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--fz-sm);
  color: var(--text3);
}
.frm-logs-meta-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.frm-logs-meta-time .mi,
.frm-logs-meta-time .frm-ico {
  width: 13px;
  height: 13px;
}
.frm-logs-actions {
  display: flex;
  gap: var(--s2);
}
.frm-logs-json {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
.frm-logs-json-col {
  min-width: 0;
}
.frm-logs-json-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--s2);
}
.frm-logs-json-label .mi,
.frm-logs-json-label .frm-ico {
  width: 13px;
  height: 13px;
}
.frm-logs-pre {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--s3);
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fz-sm);
  line-height: var(--lh-normal);
  color: var(--text2);
  overflow: auto;
  max-height: 300px;
  white-space: pre;
}

/* ── responsive: <=640px ── */
@media (max-width: 640px) {
  .frm-sub-pane,
  .frm-logs-pane {
    padding: var(--s4);
    gap: var(--s4);
  }
  .frm-sub-head {
    align-items: stretch;
  }
  .frm-sub-toggle {
    width: 100%;
  }
  .frm-sub-tab {
    flex: 1;
    justify-content: center;
  }
  .frm-logs-drawer {
    width: 100%;
  }
}