/* The prescription modals. Each draws its own header; the body scrolls
   between that header and the footer. */
dialog.modals--main-modal.prescriptions--modal {
  min-width: 0;
  border-radius: var(--radius-md);
  outline: none;

  @media screen and (max-width: 576px) {
    width: 100dvw;
  }

  > .modals--content {
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  /* What the modal's controllers hide stays hidden, whatever its display. */
  [hidden] {
    display: none;
  }

  /* Outlined buttons take the design's border color, inside the button's box. */
  .buttons--button[data-type="outlined"][data-style="neutral"][data-size] {
    outline-color: var(--border-primary);
    outline-offset: -1px;
  }
}

/* 64px: back arrow, title, then minimize and close. */
.prescriptions--header.modals--header-new[data-is-dialog="true"] {
  flex-shrink: 0;
  gap: var(--rem-12);
  padding: 0 var(--rem-16) 0 var(--rem-24);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border-secondary);
}

.prescriptions--header-title {
  flex: 1;
  min-width: 0;
}

.prescriptions--header-back.buttons--button[data-size][data-has-text][data-has-icon] {
  width: var(--rem-20);
  height: var(--rem-20);
  padding: 0;

  .icon i {
    font-size: var(--rem-15);
  }
}

.prescriptions--header-actions {
  display: flex;
  align-items: center;
  gap: var(--rem-8);

  .buttons--button[data-size][data-has-text][data-has-icon] {
    width: var(--rem-32);
    height: var(--rem-32);
    padding: 0;
  }

  .icon i {
    font-size: var(--rem-13);
  }

  /* The workspace X is drawn apart from the header; here it sits in the row. */
  .modals--close-button {
    position: static;
    width: var(--rem-32);
    height: var(--rem-32);
    transform: none;
  }
}

.prescriptions--modal-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rem-24);
  min-height: 0;
  padding: var(--rem-24);
  overflow-y: auto;

  /* A select's menu, placed against the modal, wraps text past the body's
     width instead of running out of the modal. */
  .select > .dropdowns--menu {
    max-width: calc(100% - 2 * var(--rem-24));
  }
}

/* A prescription's fields, in its modal or in an order cart's medication details. */
.prescriptions--fields {
  display: flex;
  flex-direction: column;
  gap: var(--rem-24);

  /* Menus drawn as the design's Select Menu. */
  .dropdowns--menu {
    border-radius: var(--radius-md);
    outline-color: var(--border-primary);
    box-shadow: var(--shadow-neutral-md);
  }

  /* A leading avatar keeps the label beside it, not centred. */
  .select span.dropdowns--trigger-label {
    flex: 1;
    text-align: left;
  }

  .dropdowns--menu .select--regular-item {
    font-size: var(--rem-13);
    font-variation-settings: 'wght' var(--text-medium);
    color: var(--text-action-neutral);
  }

  /* Text areas keep the design's height as they fill. */
  textarea {
    min-height: 5rem;
  }

  .input-character-counter {
    display: block;
    text-align: right;
  }

  /* The design's number fields have no steppers. */
  input[type="number"] {
    appearance: textfield;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  /* A field the drug locks: a Schedule II drug's refills. */
  input[data-locked="true"] {
    background-color: var(--surface-subtle);
    color: var(--text-disabled);
    cursor: not-allowed;
  }

  /* A field with an error: the design's red line and ring. */
  .input-groups--group[data-error="true"] :is(input, textarea, .dropdowns--trigger-button, .search-select--selected-container, .inputs--custom-search) {
    outline: 1px solid var(--icon-error);
    box-shadow: 0 0 0 2px var(--surface-error);
  }
}

/* A field and the hint or error under it. */
.prescriptions--field {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
  min-width: 0;

  &[hidden] {
    display: none;
  }
}

.prescriptions--hint {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-6);
  margin: 0;
  font-size: var(--rem-13);
  line-height: var(--rem-17);
  color: var(--text-additional);

  .icon {
    display: flex;
    align-items: center;
    width: var(--rem-12);
    min-width: var(--rem-12);
    height: var(--rem-17);
  }

  .icon i {
    font-size: var(--rem-11);
  }

  .prescriptions--hint-text {
    color: inherit;
  }

  &[data-tone="error"] {
    color: var(--text-error);
  }

  /* The refill lines are a size smaller. */
  &[data-size="xs"] {
    font-size: var(--rem-12);
    line-height: 1.2;

    .icon {
      height: 1.2em;
    }
  }
}

/* The New / Edit prescription form. */
dialog.modals--main-modal.prescriptions--form-modal {
  width: 37.75rem;
}

.prescriptions--medication {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.prescriptions--medication-row {
  display: flex;
  align-items: flex-end;
  gap: var(--rem-16);

  > .prescriptions--field {
    flex: 1;
  }

  /* "Allow generic" lines up with the field, not its label. */
  > .medications--toggle {
    flex-shrink: 0;
    height: 2.5rem;
    margin-top: 0;
  }
}

.prescriptions--banner {
  display: flex;
  flex-direction: column;
  gap: var(--rem-2);
  padding: var(--rem-12);
  border-radius: var(--radius-md);
  outline: 1px solid var(--border-warning);
  outline-offset: -1px;
  background-color: var(--surface-warning);
  color: var(--text-warning);
}

.prescriptions--banner-title {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  margin: 0;
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: inherit;

  .icon {
    width: var(--rem-20);
    min-width: var(--rem-20);
  }

  .icon i {
    font-size: var(--rem-15);
  }

  span {
    font-variation-settings: inherit;
    color: inherit;
  }
}

.prescriptions--banner-text {
  margin: 0;
  padding-left: var(--rem-28);
  font-size: var(--rem-13);
  line-height: 1.4;
  color: inherit;
}

/* One equal column per field shown: Days supply only shows for a controlled drug. */
.prescriptions--amounts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--rem-8);
}

/* The refill lines hang under the field, so typing never moves the rows below. */
.prescriptions--refills {
  position: relative;

  > .prescriptions--hint {
    position: absolute;
    top: calc(100% + var(--rem-8));
    left: 0;
  }
}

/* The drug's unit sits inside the Quantity field, on its right. */
.prescriptions--amount {
  position: relative;
  display: block;

  input {
    width: 100%;
    padding-right: 5rem;
  }
}

.prescriptions--unit {
  position: absolute;
  top: 50%;
  right: var(--rem-16);
  transform: translateY(-50%);
  font-size: var(--rem-13);
  color: var(--text-label);
  pointer-events: none;
}

.prescriptions--divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--border-primary);
}

/* "Additional details": a disclosure whose caret turns when it opens. */
.prescriptions--details > summary {
  display: flex;
  align-items: center;
  gap: var(--rem-6);
  width: fit-content;
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: normal;
  color: var(--text-label);
  list-style: none;
  cursor: pointer;

  &::-webkit-details-marker {
    display: none;
  }

  .icon {
    width: var(--rem-12);
    min-width: var(--rem-12);
  }

  .icon i {
    font-size: var(--rem-11);
  }
}

.prescriptions--details:not([open]) .prescriptions--caret-open,
.prescriptions--details[open] .prescriptions--caret-closed {
  display: none;
}

.prescriptions--details > .medications--form-fields {
  margin-top: var(--rem-16);
}

.prescriptions--pharmacy-row {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);

  > .search-select {
    flex: 1;
    min-width: 0;
  }

  > .buttons--button {
    flex-shrink: 0;
  }

  > .buttons--button .icon {
    width: var(--rem-20);
    min-width: var(--rem-20);
  }

  > .buttons--button .icon i {
    font-size: var(--rem-15);
  }
}

/* A diagnosis's ICD-10 code, 4px after its title in the picker. */
.search-select--selected-body:has(> .prescriptions--code-chip) {
  gap: var(--rem-4);
}

.search-select--selected-container .prescriptions--code-chip {
  display: inline-flex;
  align-items: center;
  height: var(--rem-16);
  padding: 0 var(--rem-4);
  border-radius: var(--radius-xs);
  background-color: var(--surface-subtle);
  font-size: var(--rem-11);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-label);

  > span {
    font-size: inherit;
    font-variation-settings: inherit;
    color: inherit;
  }

  &:has(> span:empty) {
    display: none;
  }
}

/* A prescriber prescribes as themselves: their name, not a choice. An
   approval of a pharmacy message goes to the pharmacy that asked. */
.prescriptions--prescriber-fixed,
.prescriptions--pharmacy-fixed {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  height: 2.5rem;
  padding: 0 var(--rem-16);
  border-radius: var(--radius-sm);
  outline: 1px solid var(--border-secondary);
  outline-offset: -1px;
  background-color: var(--surface-subtle);
  box-shadow: var(--shadow-neutral-xs);
  font-size: var(--rem-14);
  color: var(--text-body);
}

.prescriptions--prescriber-avatar {
  display: flex;
}

.select--regular-item.prescriptions--prescriber-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--rem-8);
  min-height: var(--rem-32);

  /* Clicks land on the option itself, which carries its value. */
  * {
    pointer-events: none;
  }
}

/* The prescriber menu with nobody in it: one centred paragraph. It takes the
   menu's width, which follows the field, rather than widening the menu to its
   own length. */
.prescriptions--select-empty {
  contain: inline-size;
  margin: 0;
  padding: var(--rem-8);
  font-size: var(--rem-13);
  line-height: 1.4;
  color: var(--text-information);
  text-align: center;

  strong {
    font-variation-settings: 'wght' var(--text-medium);
    line-height: 1.2;
    color: inherit;
  }
}

/* "Prescription details" reuses the Medication details frame
   (.medications--details-modal); these are its own parts. */
.prescriptions--details-modal .tabs--tab-badge {
  min-width: var(--rem-18);
  min-height: var(--rem-18);
  padding: var(--rem-2) var(--rem-4);
  font-size: var(--rem-11);
}

.prescriptions--status-row .medications--status-tag {
  padding-left: var(--rem-4);
}

.prescriptions--diagnosis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rem-2);
}

/* A diagnosis's ICD-10 code in the details and the review. */
.prescriptions--diagnosis-code {
  padding: var(--rem-2) var(--rem-4);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-additional);
  background-color: var(--surface-secondary);
  border-radius: var(--radius-xs);
}

.prescriptions--person {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  color: var(--text-body);
}

/* Review prescription: 564px, the fields in two columns. Header and footer
   stay put while the fields scroll. */
dialog.modals--main-modal.prescriptions--review-modal {
  width: 35.25rem;
  min-width: 0;

  .modals--content {
    padding: 0;
    gap: 0;
    max-height: none;
    overflow: hidden;
  }
}

.prescriptions--review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rem-20);
  padding: var(--rem-24);
  max-height: calc(100vh - 2 * var(--modal-dialog-header-height) - 2 * var(--modal-footer-height));
  overflow-y: auto;
}

.prescriptions--review-field {
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);
  min-width: 0;

  &[data-wide] {
    grid-column: 1 / -1;
  }
}

.prescriptions--review-label {
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-label);
}

.prescriptions--review-value {
  font-size: var(--rem-14);
  line-height: var(--rem-20);
  color: var(--text-body);
  overflow-wrap: anywhere;
}

.prescriptions--review-entity {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);

  .avatar i {
    font-size: var(--rem-11);
  }
}

.prescriptions--review-entity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.prescriptions--review-entity-name {
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral);
}

.prescriptions--review-entity-detail {
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-information);
}

.prescriptions--review-person {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  color: var(--text-body);
}

.prescriptions--review-diagnosis {
  display: flex;
  align-items: center;
  gap: var(--rem-8);

  .prescriptions--review-value {
    line-height: var(--rem-22);
  }
}

/* Select pharmacy: 1082px (the shared map's rule in pharmacies.css), header
   and footer edge to edge, 24px under the header and 32px over the footer. */
dialog.modals--main-modal.prescriptions--map-modal {
  min-width: 0;

  .modals--content {
    padding: 0;
    gap: 0;
    max-height: none;
  }

  .modals--footer-new {
    height: 4.5rem;
    padding-block: var(--rem-16);
  }
}

.prescriptions--map-body {
  padding: var(--rem-24) var(--rem-24) var(--rem-32);
}

/* The signing modal: 1000px wide, 45px from the top and bottom of the
   viewport, WENO's page filling everything under the status bar. */
dialog.modals--main-modal.prescriptions--signing-modal {
  width: min(62.5rem, calc(100vw - var(--rem-32)));
  height: calc(100dvh - 5.625rem);
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: none;
  outline-color: var(--border-subtle);

  &[open] {
    display: flex;
    flex-direction: column;
  }

  > .modals--content {
    flex: 1;
    gap: 0;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
  }

  /* What the signing controller hides stays hidden, whatever its display. */
  [hidden] {
    display: none;
  }
}

.prescriptions--signing-status {
  display: flex;
  align-items: center;
  gap: var(--rem-16);
  padding: var(--rem-24);
  border-bottom: 1px solid var(--border-secondary);
}

.prescriptions--signing-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rem-8);
  min-width: 0;
}

.prescriptions--signing-heading {
  font-size: var(--rem-16);
  font-variation-settings: 'wght' var(--text-semibold);
  line-height: 1;
  color: var(--text-heading);
}

.prescriptions--signing-text {
  font-size: var(--rem-14);
  line-height: 1.4;
  color: var(--text-information);
}

.prescriptions--signing-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--rem-8);
  padding: var(--rem-6) var(--rem-12);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--neutral-700);
  background-color: var(--neutral-50);
  border-radius: var(--radius-full);

  i {
    font-size: var(--rem-15);
    animation: fa-spin 1s linear infinite;
  }
}

.prescriptions--signing-frame {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background-color: var(--surface-subtle);
}

/* "Leave prescription signing", over the signing modal. */
dialog.modals--main-modal.confirms--dialog.prescriptions--leave-confirm {
  width: 32rem;
}

.prescriptions--leave-close.buttons--button[data-size] {
  width: var(--rem-20);
  height: var(--rem-20);
  padding: 0;

  i {
    font-size: var(--rem-15);
  }
}

.prescriptions--leave-text {
  font-size: var(--rem-14);
  line-height: var(--rem-20);
  color: var(--text-body);
}

/* What became of a signing: "Unable to continue to signing" or "Signature completed". */
dialog.modals--main-modal.prescriptions--signing-result-modal {
  width: 35.25rem;
  border-radius: var(--radius-md);

  > .modals--content {
    padding: var(--rem-8) var(--rem-24) var(--rem-24);
  }
}

.prescriptions--signing-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rem-32);
  min-height: 25.0625rem;
  text-align: center;
}

.prescriptions--signing-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);

  &[data-tone="error"] {
    background-color: var(--surface-error);
  }

  &[data-tone="success"] {
    background-color: var(--surface-success);
  }
}

.prescriptions--signing-result-copy {
  display: flex;
  flex-direction: column;
  gap: var(--rem-12);
  max-width: 26.25rem;
}

.prescriptions--signing-result-heading {
  font-size: var(--rem-18);
  font-variation-settings: 'wght' var(--text-semibold);
  line-height: 1;
  color: var(--text-heading);
}

.prescriptions--signing-result-text {
  font-size: var(--rem-14);
  line-height: 1.4;
  color: var(--text-information);
}