/* spoke_emar_send_html — was the <style> block of the form's template.
 *
 * Every rule is scoped `:where(.es-container)`, which adds no specificity, so
 * no rule that used to win stops winning. 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); }
:where(.es-container) .es-subtitle { font-size: 13px; color: #666; 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 now 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 #ccc; border-radius: 4px; font-size: 13px;
  font-weight: 600; cursor: pointer; background: #fff; color: #333;
}
:where(.es-container) .es-back-btn:hover { border-color: #888; }

:where(.es-container) .es-card {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 20px; margin-bottom: 16px;
}
:where(.es-container) .es-note {
  background: #e0f2f1; border-left: 4px solid var(--px-info); border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: #004d40; 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 #e0e0e0; color: #555; font-weight: 600; font-size: 12px; }
:where(.es-container) .es-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
:where(.es-container) .es-drug-name { font-weight: 600; color: #212121; }
:where(.es-container) .es-drug-etp { font-size: 12px; color: #888; margin-top: 3px; }

:where(.es-container) .es-qty-input {
  width: 90px; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 14px; outline: none;
}
:where(.es-container) .es-unit { font-size: 13px; color: #555; padding-left: 6px; }
:where(.es-container) .es-instructions-input {
  width: 100%; min-height: 56px; padding: 7px 10px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 14px; resize: vertical; font-family: inherit; outline: none;
}
:where(.es-container) .es-invalid { border-color: #c62828 !important; background: #fff8f8; }
:where(.es-container) .es-field-error { font-size: 12px; color: #c62828; 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: #fff;
}
:where(.es-container) .es-send-btn:hover:not(:disabled) { background: var(--px-info-hover); }
:where(.es-container) .es-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.es-container) .es-loading { text-align: center; padding: 60px 20px; color: #888; 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; }
}