/* ============================================================
   Components — buttons, cards, badges, modals, forms, tables
   ============================================================ */

/* ── BUTTONS ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  min-height: 44px;
  text-decoration: none;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--ink);
  color: var(--washi);
  border-color: var(--ink);
}
.btn--primary:hover:not(:disabled) {
  background: transparent;
  color: var(--ink);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover:not(:disabled) {
  background: var(--ink);
  color: var(--washi);
}

.btn--ghost {
  background: transparent;
  color: var(--stone);
  border-color: transparent;
  padding: 0.5rem 0.75rem;
  letter-spacing: var(--tracking-wide);
  min-height: 36px;
}
.btn--ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--washi);
}

.btn--danger {
  background: var(--red-seal);
  color: var(--washi);
  border-color: var(--red-seal);
}
.btn--danger:hover:not(:disabled) {
  background: transparent;
  color: var(--red-seal);
}

.btn--sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.65rem;
  min-height: 32px;
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: var(--text-sm);
  min-height: 52px;
}

.btn--block {
  width: 100%;
}

.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: var(--washi);
}
.btn--outline.is-loading::after,
.btn--ghost.is-loading::after {
  color: var(--ink);
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ── CARDS ─────────────────────────────────────── */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card:hover {
  box-shadow: var(--shadow-sm);
}
.card--elevated {
  background: var(--surface-elevated);
}
.card--bordered {
  border-left-width: 3px;
  border-left-color: var(--gold);
}
.card--pad-sm { padding: var(--s-3); }
.card--pad-lg { padding: var(--s-8); }
.card--clickable {
  cursor: pointer;
}
.card--clickable:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card header/body/footer */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
}
.card-meta {
  font-size: var(--text-xs);
  color: var(--stone);
}

/* ── RADIO OPTION CHIP (used in modal forms) ────── */
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--text-sm);
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.radio-option input { margin: 0; accent-color: var(--gold); }
.radio-option:hover { border-color: var(--gold); background: var(--washi); }
.radio-option:has(input:checked) { border-color: var(--gold); background: var(--washi); }

/* ── BADGES ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--washi-dark);
  color: var(--stone);
  white-space: nowrap;
}
.badge--pending  { background: #fef3cd; color: #856404; }
.badge--active   { background: rgba(184, 150, 90, 0.15); color: var(--gold); }
.badge--progress { background: rgba(74, 144, 217, 0.15); color: var(--info); }
.badge--success  { background: rgba(122, 140, 114, 0.18); color: var(--sage); }
.badge--danger   { background: rgba(192, 57, 43, 0.12); color: var(--red-seal); }
.badge--info     { background: rgba(102, 153, 187, 0.15); color: var(--info); }

/* ── FIELDS (forms) ────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.field-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
  text-transform: uppercase;
}
.field-label[data-required]::after {
  content: " *";
  color: var(--red-seal);
}
.field-hint {
  font-size: var(--text-xs);
  color: var(--stone);
  margin-top: -0.25rem;
}
.field-error {
  font-size: var(--text-xs);
  color: var(--red-seal);
  margin-top: 0.25rem;
  display: none;
}
.field.is-error .field-error {
  display: block;
}
.field.is-error .field-input {
  border-color: var(--red-seal);
}

.field-input {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.field-input:focus {
  border-color: var(--gold);
}
.field-input:disabled,
.field-input[readonly] {
  background: var(--washi);
  cursor: not-allowed;
  opacity: 0.7;
}

.field-input--boxed {
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.field-input--boxed:focus {
  border-color: var(--gold);
  background: var(--washi);
}

textarea.field-input {
  min-height: 100px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  resize: vertical;
  line-height: var(--leading-normal);
}

select.field-input {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7068' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  -webkit-appearance: none;
  appearance: none;
}

/* Field grid layouts */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
}
.field-grid--2 { grid-template-columns: repeat(2, 1fr); }
.field-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Checkbox/radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--ink);
}
.check input[type="checkbox"],
.check input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

/* ── TABLES ────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  text-align: left;
  padding: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
  background: transparent;
}
.table td {
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: middle;
}
.table tr:hover td {
  background: var(--washi);
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive table: stack to cards on mobile */
@media (max-width: 640px) {
  .table.table--responsive thead { display: none; }
  .table.table--responsive tr {
    display: block;
    background: var(--washi);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
  }
  .table.table--responsive td {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border: none;
  }
  .table.table--responsive td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--stone);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-right: var(--s-3);
  }
}

/* ── MODALS ────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.5);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  display: flex;
  /* Brief #14a-fix-10 — was 'align-items: center' which combined with
     the modal's max-height: 90vh broke scroll on small viewports
     (modal taller than 90vh got truncated with no way to reach the
     bottom). Switching to flex-start + overflow-y on the backdrop
     means the WHOLE backdrop scrolls when the modal exceeds the
     viewport, so any modal content is reachable on any screen size.
     The 'margin: auto' on .modal preserves vertical centering when
     the modal is shorter than the viewport. */
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-4);
  overflow-y: auto;
  opacity: 0;
  animation: modal-fade var(--dur-base) var(--ease-out) forwards;
}
@keyframes modal-fade {
  to { opacity: 1; }
}

.modal {
  position: relative;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6);
  max-width: 500px;
  width: 100%;
  /* Brief #14a-fix-10 — let the modal grow naturally; the backdrop
     handles scroll for tall content. 'margin: auto' centers the
     modal vertically WITHIN the available backdrop space when there
     IS extra space (i.e., on desktop with short content). When the
     modal is taller than the viewport, auto margins collapse to 0
     and the backdrop scrolls. */
  margin: auto;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
  animation: modal-slide var(--dur-base) var(--ease-out) forwards;
}
@keyframes modal-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal--lg { max-width: 700px; }
.modal--xl { max-width: 900px; }

.modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--stone);
  font-size: 1.2rem;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
  background: transparent;
  border: none;
}
.modal-close:hover {
  background: var(--washi);
  color: var(--ink);
}

.modal-header {
  text-align: center;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}
.modal-subtitle {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-top: var(--s-1);
}

/* ── TOAST ─────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--washi);
  padding: 0.9rem 1.5rem;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in var(--dur-base) var(--ease-out);
  max-width: 400px;
}
.toast--success { background: var(--sage); }
.toast--danger  { background: var(--red-seal); }
.toast--warning { background: var(--warning); color: var(--ink); }
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── DRAWER ────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.4);
  z-index: var(--z-overlay);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 480px;
  background: var(--cream);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.drawer.is-open {
  transform: translateX(0);
}

/* ── DIVIDER ───────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--mist) 30%, var(--gold) 50%, var(--mist) 70%, transparent);
  border: none;
  margin: var(--s-6) 0;
}

/* ── UTILITY CLASSES ───────────────────────────── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--stone); }
.text-gold   { color: var(--gold); }
.text-danger { color: var(--red-seal); }
.text-success{ color: var(--sage); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: flex-start; }
.flex-gap-1 { gap: var(--s-1); }
.flex-gap-2 { gap: var(--s-2); }
.flex-gap-3 { gap: var(--s-3); }
.flex-gap-4 { gap: var(--s-4); }
.flex-gap-6 { gap: var(--s-6); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }

.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }

.p-2 { padding: var(--s-2); } .p-3 { padding: var(--s-3); } .p-4 { padding: var(--s-4); } .p-6 { padding: var(--s-6); } .p-8 { padding: var(--s-8); }

.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 32rem; }
.max-w-lg { max-width: 48rem; }

.hidden { display: none !important; }

/* ═════════════════════════════════════════════════════════════
   Body Diagram (walk-in case record · doctor consult)
   ───────────────────────────────────────────────────────────── */
.body-diagram-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--washi);
}
.body-diagram-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.body-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.body-pen {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, border-color 120ms ease;
}
.body-pen:hover { transform: scale(1.1); }
.body-pen.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(0,0,0,0.05); }
.body-pen--blue  { background: #1f6fb2; }
.body-pen--red   { background: #c0392b; }
.body-pen--green { background: #2e8b57; }
.body-pen--erase { background: #eee; color: #555; }
.body-thickness-label { font-size: var(--text-xs); color: var(--stone); }
.body-thickness-value { font-size: var(--text-xs); color: var(--stone); font-family: var(--font-mono); min-width: 32px; }
#body-thickness { width: 110px; accent-color: var(--gold); }

/* ──────────────────────────────────────────────────────────────
   Combined body-chart stage — one big canvas spans both views and
   the whitespace around them, so the doctor can draw anywhere in
   the card (on the silhouette, between the two figures, in the
   margin at the edges). Images sit behind the canvas and never
   intercept pointer events.
   ────────────────────────────────────────────────────────────── */
.body-combined-labels {
  display: flex;
  gap: 5%;
  padding: 0 5%;
  margin-bottom: 4px;
  font-size: var(--text-xs);
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: var(--font-zh);
}
.body-combined-labels span {
  flex: 1;
  text-align: center;
}
.body-combined-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 8;          /* generous area: wider than two figures so there's margin on both sides */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-sizing: border-box;
}
/* Wrapper that positions the two images side-by-side inside the stage.
   Uses flexbox with generous padding so ~30% of the canvas area is
   whitespace for annotations. */
.body-combined-silhouettes {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3% 4%;
  gap: 4%;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}
.body-combined-img {
  display: block;
  height: 94%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Canvas covers the full stage — including the whitespace and the
   space between the two figures — so pens can draw anywhere. */
.body-combined-stage .body-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  background: transparent;
  z-index: 2;
}

@media (max-width: 640px) {
  .body-combined-stage { aspect-ratio: 6 / 8; }
  .body-combined-img   { height: 90%; max-width: 44%; }
}