/* otlist.css — OT List maker. Local-only. Mobile-first.
   Reuses .field / .pae-form-actions / .pae-empty / .calllog-input from
   pae.css and calllog.css — only OT-List-specific rules live here. */

.otlist-tool-card { text-align: left; padding: 1.25rem 1rem; }
.otlist-tool-card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); text-align: left; }
.otlist-tool-card > p { text-align: left; color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 0.35rem 0 1rem; }

.otlist-new-btn { margin-bottom: 0.9rem; }

.otlist-form-wrap {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.otlist-form-wrap textarea.calllog-input {
  resize: vertical;
  min-height: 3.4rem;
  line-height: 1.4;
}

/* ---------- Top-level OT list cards ---------- */

.otlist-list { display: flex; flex-direction: column; gap: 0.65rem; }

.otlist-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.otlist-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  cursor: pointer;
}

.otlist-card-info { flex: 1; min-width: 0; }
.otlist-card-title { font-size: 0.96rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otlist-card-meta { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }

.otlist-count-pill {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.otlist-card-chevron { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s; flex-shrink: 0; }
.otlist-card.open .otlist-card-chevron { transform: rotate(180deg); }

.otlist-card-delete {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.otlist-card-delete:active { color: var(--red); }
.otlist-card-delete svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.otlist-card-body { display: none; border-top: 1px solid var(--border); padding: 0.85rem 0.9rem 1rem; }
.otlist-card.open .otlist-card-body { display: block; }

.otlist-add-patient-btn {
  width: 100%;
  background: #fff;
  border: 1.5px dashed var(--border-strong);
  color: var(--accent);
  border-radius: var(--r-sm);
  padding: 0.7rem;
  font-family: var(--inter);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 0.7rem;
}
.otlist-add-patient-btn:active { background: var(--accent-soft); }

.otlist-generate-btn { margin-top: 0.2rem; }
.otlist-generate-btn.secondary { margin-top: 0.5rem; }

/* ---------- Nested patient rows ---------- */

.otlist-patient-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.4rem; }

.otlist-patient {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.otlist-patient-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.otlist-patient-summary { flex: 1; min-width: 0; }
.otlist-patient-name { font-size: 0.88rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otlist-patient-meta { font-size: 0.68rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.otlist-patient-chevron { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s; flex-shrink: 0; }
.otlist-patient.open .otlist-patient-chevron { transform: rotate(180deg); }

.otlist-patient-delete {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.otlist-patient-delete:active { color: var(--red); }
.otlist-patient-delete svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.otlist-patient-body { display: none; border-top: 1px solid var(--border); padding: 0.75rem; background: #fff; }
.otlist-patient.open .otlist-patient-body { display: flex; flex-direction: column; gap: 0.6rem; }

.otlist-scan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  background: var(--accent-soft);
  border: 1.5px solid rgba(170,68,101,.24);
  color: var(--accent);
  border-radius: var(--r-sm);
  padding: 0.65rem;
  font-family: var(--inter);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.otlist-scan-btn:active { transform: scale(0.98); }
.otlist-scan-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.otlist-field-row { display: flex; gap: 0.5rem; }
.otlist-field-row .field { flex: 1; min-width: 0; }
.otlist-field-row .field.age-field { flex: 0 0 24%; }
.otlist-field-row .field.sex-field { flex: 0 0 28%; }

.otlist-patient-body textarea.calllog-input { resize: vertical; min-height: 2.6rem; line-height: 1.4; }

.otlist-patient-body select.calllog-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374717B' stroke-width='2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
  padding-right: 2.3rem;
}

/* ---------- QR scanner modal ---------- */

.otlist-scan-sheet { padding-bottom: 1.5rem; }

.otlist-scan-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: var(--r);
  overflow: hidden;
}

.otlist-scan-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.otlist-scan-frame {
  position: absolute;
  inset: 12%;
  border: 2.5px solid rgba(255,255,255,.85);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.28);
  pointer-events: none;
}

.otlist-scan-status {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1.2em;
}

.otlist-scan-status.error { color: var(--red); font-weight: 600; }

/* ---------- Responsive ---------- */

@media (min-width: 480px) {
  .otlist-field-row.name-row { flex-direction: row; }
}

/* Add these beside the existing OT-list styles. */
.otlist-form-wrap h3 {
  margin: 0 0 1rem;
}

.otlist-signature-note {
  margin: -0.15rem 0 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, #6b6872);
}

.otlist-card-edit,
.otlist-card-delete {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}

.otlist-card-edit svg,
.otlist-card-delete svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.otlist-card-edit:hover,
.otlist-card-edit:focus-visible,
.otlist-card-delete:hover,
.otlist-card-delete:focus-visible {
  background: rgba(36, 35, 49, 0.07);
}