.assessment-survey-vitals {
  .page-header {
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-secondary);

    .page-heading {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;

      .page-title {
        font-size: var(--font-size-page-title);
        font-weight: var(--weight-semi-bold);
        color: var(--color-text-primary);
      }

      .page-description {
        margin: 0;
        max-width: 440px;
        font-size: var(--font-size-sm);
        line-height: var(--line-height-text-sm);
      }
    }
  }

  .source-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-primary);
    padding: 8px 12px;

    &.success {
      color: var(--color-text-success-primary);
      border-color: var(--color-border-success_subtle);
      background-color: var(--color-bg-success-primary);
    }
  }

  .vitals-tabs {
    border-bottom: 0;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);

    .tab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border: 1px solid transparent;
      border-radius: var(--border-radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--weight-semi-bold);
      line-height: var(--line-height-text-sm);
      color: var(--color-text-quaternary);

      &.active {
        border: 1px solid var(--color-border-primary);
        background-color: var(--color-bg-primary);
        color: var(--color-text-secondary);
        box-shadow: 0 1px 2px var(--color-shadow-lg-03);
      }
    }
  }

  .vitals-panel {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .panel-header {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .panel-header-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
      }
    }

    .populate-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-sm);
      font-weight: var(--weight-medium);
      color: var(--color-text-tertiary);
      white-space: nowrap;
    }

    .dictation-uploading-status {
      display: none;
    }

    .alert-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background-color: var(--color-bg-error-primary);
      border: 1px solid var(--color-border-error_subtle);
      border-radius: var(--border-radius-md);
      color: var(--color-text-error-primary);
      font-size: var(--font-size-sm);
      font-weight: var(--weight-medium);
    }

    .readonly-note {
      border: 1px solid var(--color-border-warning_subtle);
      background-color: var(--color-bg-warning-primary);
      color: var(--color-text-warning-primary);
      border-radius: var(--border-radius-md);
      padding: 10px 12px;
      font-size: var(--font-size-sm);
      font-weight: var(--weight-medium);
    }

    .vitals-empty-state {
      border: 1px dashed var(--color-border-primary);
      border-radius: var(--border-radius-md);
      padding: 18px;
      text-align: center;
      color: var(--color-text-tertiary);
      font-size: var(--font-size-sm);
    }

    .parameter-groups,
    .measure-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .parameter-groups {
      gap: 6px;
    }

    .measure-selector {
      flex: 0 1 280px;
      min-width: 240px;
      max-width: 280px;
    }

    .measure-controls-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    @media (min-width: 1024px) {
      .measure-controls-row .unable-to-collect {
        margin-left: auto;
      }
    }

    .dictation-controls {
      display: flex;
      gap: 8px;
    }

    .unable-to-collect {
      gap: 8px;

      .toggle-label {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
      }
    }

    .parameter-group,
    .measure-card {
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-sm);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background-color: var(--color-bg-primary);

      h4 {
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: var(--weight-medium);
        color: var(--color-text-secondary);
      }
    }

    .measure-badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 6px;
      padding: 4px 12px 4px 10px;
      background-color: var(--color-bg-brand-primary);
      border: 1px solid var(--color-border-brand-disabled);
      border-radius: 999px;
      color: var(--color-text-brand-primary);
      font-size: var(--font-size-md);
      font-weight: var(--weight-medium);
      line-height: var(--line-height-text-md);

      i {
        font-size: var(--font-size-sm);
      }
    }

    .measure-header {
      display: flex;
      align-items: center;
      gap: 10px;

      .measure-badge {
        margin-right: auto;
      }
    }

    .measure-set-block {
      display: flex;
      flex-direction: column;
      gap: 12px;

      + .measure-set-block {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border-secondary);
      }
    }

    .measure-set-actions {
      display: flex;
      justify-content: flex-end;
    }

    .measure-time {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;

      label {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        white-space: nowrap;
      }
    }

    .fields-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;

      label {
        font-size: var(--font-size-sm);
        font-weight: var(--weight-medium);
        line-height: var(--line-height-text-sm);
        color: var(--color-text-secondary);
      }

      &.out-of-range {
        label {
          color: var(--color-text-warning-primary);
        }

        input[type="number"] {
          border-color: var(--color-border-warning_subtle);
          background-color: var(--color-bg-warning-primary);
        }
      }

      .limit-warning {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: var(--font-size-xs);
        color: var(--color-text-warning-primary);
      }
    }

    .input-with-unit {
      position: relative;
      display: flex;
      align-items: center;

      input,
      select {
        padding-right: 48px;
      }

      span {
        position: absolute;
        right: 14px;
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
        font-weight: var(--weight-light);
      }
    }

    .panel-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 4px;
    }

    .panel-actions--record-vitals {
      margin-top: 16px;
    }
  }
}

.assessment-survey-vitals .vitals-panel[data-dictation-uploading] .dictation-uploading-status {
  display: flex;
}