@use '@carbon/layout';
@use '@carbon/colors';

.workspaceShell {
  height: 100%;
  min-height: 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-06;
  height: 100%;
  min-height: 0;
  padding: layout.$spacing-05 layout.$spacing-06 layout.$spacing-05 layout.$spacing-05;
  overflow: hidden;
  background: colors.$gray-10;
}

.formContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: layout.$spacing-05;
  padding-bottom: layout.$spacing-06;
  scrollbar-gutter: stable;
}

.formContent::-webkit-scrollbar {
  width: 0.5rem;
}

.formContent::-webkit-scrollbar-thumb {
  background-color: colors.$gray-40;
  border-radius: 999px;
}

.formContent::-webkit-scrollbar-track {
  background-color: colors.$gray-10;
}

.formSection {
  display: grid;
  gap: layout.$spacing-05;
  padding: layout.$spacing-05;
  background: colors.$white;
  border-radius: 4px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

.notesField {
  display: grid;
  gap: layout.$spacing-03;
}

.notesLabel {
  font-weight: 600;
  color: colors.$gray-90;
}

.notesHelperText {
  margin: 0;
  color: colors.$gray-70;
}

.notesTextArea {
  min-height: 10rem;
  background: colors.$white;
  border: 1px solid colors.$gray-30;
  border-radius: 4px;
}

.notesTextArea::placeholder {
  color: colors.$gray-50;
}

.formSection h4 {
  margin: 0 0 layout.$spacing-04 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: colors.$gray-100;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formSubsection h5,
.medicationBlock h5,
.fluidBlock h5 {
  margin: 0 0 layout.$spacing-03 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: colors.$gray-100;
}

.twoColumnGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: layout.$spacing-05;
}

.radioGroup {
  padding: layout.$spacing-05;
  background: colors.$gray-10;
  border-radius: 4px;
  border: 1px solid colors.$gray-20;
}

.formSubsection {
  display: grid;
  gap: layout.$spacing-04;
  padding: layout.$spacing-05;
  background: colors.$gray-10;
  border-radius: 4px;
  border: 1px solid colors.$gray-20;
}

.medicationBlock {
  display: grid;
  gap: layout.$spacing-04;
  padding: layout.$spacing-05;
  background: colors.$blue-10;
  border-radius: 4px;
  border-left: 4px solid colors.$blue-60;
  border: 1px solid colors.$gray-20;
  border-left: 4px solid colors.$blue-60;
}

.medicationRow {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-03;
  padding: layout.$spacing-04;
  background: colors.$white;
  border-radius: 2px;
}

.medicationRowStack {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-04;
  width: 100%;
  padding: layout.$spacing-04;
  background: colors.$white;
  border-radius: 2px;
  border: 1px solid colors.$gray-20;
}

.medicationNameField {
  width: 100%;
}

.medicationTimeField {
  width: 100%;
}

.fluidBlock {
  display: grid;
  gap: layout.$spacing-04;
  padding: layout.$spacing-05;
  background: colors.$purple-10;
  border-radius: 4px;
  border: 1px solid colors.$gray-20;
  border-left: 4px solid colors.$purple-60;
}

.fluidRow {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-03;
  padding: layout.$spacing-04;
  background: colors.$white;
  border-radius: 2px;
}

.fluidRowStack {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-04;
  width: 100%;
  padding: layout.$spacing-04;
  background: colors.$white;
  border-radius: 2px;
  border: 1px solid colors.$gray-20;
}

.fluidNameField {
  width: 100%;
}

.fluidTimeField {
  width: 100%;
}

.textAreaError {
  border-color: colors.$red-60 !important;
}

.buttonSet {
  margin-top: auto;
  justify-self: end;
  padding: layout.$spacing-04 layout.$spacing-06 layout.$spacing-04 layout.$spacing-05;
  background: colors.$white;
  border-top: 1px solid colors.$gray-20;
}

.button {
  height: layout.$spacing-10;
  display: flex;
  align-content: flex-start;
  align-items: baseline;
  min-width: 50%;
}

@media (max-width: 42rem) {
  .form {
    padding-right: layout.$spacing-05;
  }

  .formContent {
    padding-right: layout.$spacing-04;
  }

  .buttonSet {
    padding-right: layout.$spacing-05;
  }
}
