/* spoke_emar_send_html — the eMAR send screen's own rules.
 *
 * Every rule is scoped `:where(.es-container)`, which adds no specificity, so
 * the scope does not change which rule wins. The root rule itself stays a bare
 * class: it is the form root, not a descendant of it.
 */

.es-container { max-width: 1000px; margin: 0 auto; }
:where(.es-container) .es-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
:where(.es-container) .es-title { font-size: 22px; font-weight: 600; color: var(--px-info-text); }
:where(.es-container) .es-subtitle { font-size: 13px; color: var(--px-text-secondary); margin-top: 4px; }
/* Scannable barcode of the token; the barcode prints the token text
   underneath itself. The wrapper, not the svg, carries the scroll
   (bar geometry rationale lives with the shared renderer in
   anvil.yaml head_html).

   `.es-token-barcode` is the SPAN wrapping the svg rather than the svg
   itself: the designer instantiates every element as a component and assigns
   `element.className`, which is read-only on an SVGElement, so a classed
   `<svg>` renders as an invalid component on the canvas. `line-height: 0`
   makes the span's box equal the svg's. */
:where(.es-container) .es-token-barcode-wrap { max-width: 100%; overflow-x: auto; margin-top: 6px; }
:where(.es-container) .es-token-barcode { display: block; line-height: 0; }
:where(.es-container) .es-back-btn {
  padding: 8px 18px; border: 1px solid var(--px-border-strong); border-radius: 4px; font-size: 13px;
  font-weight: 600; cursor: pointer; background: var(--px-bg-card); color: var(--px-text-primary);
}
:where(.es-container) .es-back-btn:hover { border-color: var(--px-border-hover); }
:where(.es-container) .es-back-btn:focus-visible { outline: 2px solid var(--px-focus-ring); outline-offset: 2px; }

:where(.es-container) .es-card {
  background: var(--px-bg-card); border: 1px solid var(--px-border); border-radius: 8px;
  box-shadow: var(--px-shadow); padding: 20px; margin-bottom: 16px;
}
:where(.es-container) .es-note {
  background: var(--px-info-bg); border-left: 4px solid var(--px-info); border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: var(--px-info-text); margin-bottom: 16px;
}

/* Three editable columns cannot compress below the quantity input and
   its unit. On a phone the table scrolls sideways inside this wrapper
   rather than crushing the drug name to one letter per line. */
:where(.es-container) .es-table-scroll { overflow-x: auto; }
:where(.es-container) .es-table { width: 100%; border-collapse: collapse; font-size: 13px; }
:where(.es-container) .es-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--px-border); color: var(--px-text-secondary); font-weight: 600; font-size: 12px; }
:where(.es-container) .es-table td { padding: 8px 10px; border-bottom: 1px solid var(--px-border-subtle); vertical-align: top; }
:where(.es-container) .es-drug-name { font-weight: 600; color: var(--px-text-primary); }
:where(.es-container) .es-drug-etp { font-size: 12px; color: var(--px-text-muted); margin-top: 3px; }

:where(.es-container) .es-qty-input {
  width: 90px; padding: 7px 10px; border: 1px solid var(--px-border-strong); border-radius: 4px;
  font-size: 14px; outline: none; background: var(--px-bg-input); color: var(--px-text-primary);
}
:where(.es-container) .es-unit { font-size: 13px; color: var(--px-text-secondary); padding-left: 6px; }
:where(.es-container) .es-instructions-input {
  width: 100%; min-height: 56px; padding: 7px 10px; border: 1px solid var(--px-border-strong);
  border-radius: 4px; font-size: 14px; resize: vertical; font-family: inherit; outline: none;
  background: var(--px-bg-input); color: var(--px-text-primary);
}
:where(.es-container) .es-instructions-input::placeholder { color: var(--px-text-muted); opacity: 1; }
:where(.es-container) .es-qty-input:focus-visible,
:where(.es-container) .es-instructions-input:focus-visible { outline: 2px solid var(--px-focus-ring); outline-offset: 2px; }
:where(.es-container) .es-invalid { border-color: var(--px-field-invalid-border) !important; background: var(--px-field-invalid-bg); }
:where(.es-container) .es-field-error { font-size: 12px; color: var(--px-danger); margin-top: 3px; display: none; }

:where(.es-container) .es-footer { text-align: right; }
:where(.es-container) .es-send-btn {
  padding: 10px 28px; border: none; border-radius: 4px; font-size: 14px;
  font-weight: 600; cursor: pointer; background: var(--px-info); color: var(--px-ink-on-bright);
}
/* Lightened, not darkened: the ink is dark. */
:where(.es-container) .es-send-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--px-info) 80%, #fff); }
:where(.es-container) .es-send-btn:disabled {
  background: var(--px-bg-disabled); color: var(--px-text-disabled);
  box-shadow: inset 0 0 0 1px var(--px-border-disabled); cursor: not-allowed;
}
:where(.es-container) .es-send-btn[data-sending] { color: var(--px-text-secondary); }
:where(.es-container) .es-loading { text-align: center; padding: 60px 20px; color: var(--px-text-muted); font-size: 15px; }

/* Phone layout. The 16px input size is not cosmetic: iOS Safari zooms
   the whole page in when a focused field is under 16px, and the operator
   then loses the rest of the row. Class selectors, not bare `input`, so
   these beat the base rules above on specificity. */
@media (max-width: 768px) {
  :where(.es-container) .es-send-btn { width: 100%; }
  :where(.es-container) .es-qty-input, :where(.es-container) .es-instructions-input { font-size: 16px; }
  :where(.es-container) .es-qty-input { min-height: 44px; }
  :where(.es-container) .es-send-btn, :where(.es-container) .es-back-btn { min-height: 44px; }
  :where(.es-container) .es-table { min-width: 600px; }
}