/* ===== ch_patient_movement_card_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   No :where() scope is added. Every rule already starts with the root id #patient-movement-card. */

#patient-movement-card .pm-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ch-space-md) var(--ch-space-lg);
  align-items: end;
}

#patient-movement-card .pm-span-2 {
  grid-column: span 2;
}

#patient-movement-card .pm-span-full {
  grid-column: 1 / -1;
}

#patient-movement-card .pm-mode-group {
  align-self: end;
}

#patient-movement-card .pm-mode-options {
  min-height: 44px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ch-space-md);
  align-items: center;
}

#patient-movement-card .ch-radio-item.pm-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#patient-movement-card .pm-manual-fields {
  display: contents;
}

#patient-movement-card .pm-picker-fields {
  align-self: end;
}

#patient-movement-card .pm-checkbox-field {
  align-self: end;
  min-height: 44px;
  display: flex;
  align-items: center;
}

#patient-movement-card .pm-manual-fields[hidden],
#patient-movement-card .pm-picker-fields[hidden],
#patient-movement-card #pm-destination-group[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  #patient-movement-card .pm-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #patient-movement-card #pm-destination-group {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  #patient-movement-card .pm-fields-grid {
    grid-template-columns: 1fr;
  }

  #patient-movement-card .pm-span-2,
  #patient-movement-card .pm-span-full,
  #patient-movement-card #pm-destination-group {
    grid-column: 1 / -1;
  }
}