/* The medicine form, as a screen.
 *
 * Four separate questions — what it is, how it is kept, how it is taxed, and
 * every batch on the shelf — so they are four blocks with air between them
 * rather than one wall of boxes. The bar at the top carries Save, because
 * that is the one thing being looked for after the last field is filled. */


/* Drawn as the register draws everything else: flat blocks with ruled
 * headings, square fields, and the live one lit amber. It was rounded cards
 * with a green focus ring — a web form sitting behind a page band that said
 * "register", which is a worse mismatch than either look on its own. */
.formwrap {
  flex: 1;
  overflow: auto;
  padding: 0;
  background: var(--bg);
}

.form {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px;
}

.fs {
  margin-bottom: 12px;
  padding: 0 0 12px;
  background: var(--surface);
  border: 1px solid #b9c6dd;
  border-radius: 0;
}
/* The block's own caption band — the same one the voucher puts over its party
 * box, so a form and a voucher are plainly the same paper. */
.fs h4 {
  margin: 0 0 12px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #46618f;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: #eef2f9;
  border-bottom: 1px solid #dde4ef;
}
.fs h4 small {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
  padding: 0 12px;
}
.f { display: flex; flex-direction: column; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.f.wide2 { grid-column: span 2; }
/* A count and the unit it counts, on one line: [ 15 ][ Tab ▾ ]. Two separate
 * fields would read as two unrelated questions, which is exactly how "units in
 * one pack" came to be filled in without anybody knowing what the unit was. */
.unitpair { display: flex; gap: 6px; }
.unitpair input { flex: 1; min-width: 0; }
.unitpair select { flex: 0 0 92px; }
.f input, .f select {
  margin-top: 3px;
  padding: 6px 9px;
  font: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  border: 1px solid #c3ccdb;
  border-radius: 3px;
  background: #fff;
}
/* Marg lights the live field amber, and so does every other typing surface in
 * this app now — the voucher's party box, the item box, the settings pages. */
.f input:focus, .f select:focus {
  outline: none;
  color: #3a2c00;
  background: #fff6d8;
  border-color: #d8a800;
  box-shadow: inset 0 0 0 1px #d8a800;
}
.f small { margin-top: 4px; font-weight: 400; color: var(--muted); }

/* Batches: a table, because that is what they are — one row per box on the
 * shelf, each with its own printed MRP and its own expiry. */
.batches { width: 100%; border-collapse: collapse; }
.batches th {
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.batches td { padding: 2px 4px; }
.batches input {
  width: 100%;
  padding: 7px 8px;
  font: var(--font);
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfe;
}
.batches input:focus { outline: none; border-color: var(--accent); background: #fff; }
.batches .num input { text-align: right; }

.b-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.form .error { margin: 0 0 14px; }

/* The name field carries a suggestion list, so it is what that list is
 * positioned against. */
.f { position: relative; }

/* The medicine's standing trade rate, beside the batch table it falls back
 * from. Not a column: it belongs to the medicine, not to any one batch. */
.b-trade {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  font-size: 12px;
  color: var(--muted);
}
.b-trade input {
  width: 92px;
  padding: 4px 7px;
  font: var(--font);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.b-trade input:focus { outline: 0; border-color: var(--accent); }
.b-trade small { color: var(--muted); font-size: 11px; }
@media (max-width: 820px) {
  .b-trade { margin-left: 0; flex-wrap: wrap; }
  .b-trade small { flex-basis: 100%; }
}