// ============================================================
// 健康模块公共样式 - 统一列表页 UI 风格
// ============================================================

// 主题色变量
$health-primary: #667eea;
$health-primary-end: #764ba2;
$health-primary-bg: rgba(102, 126, 234, 0.08);
$health-primary-border: rgba(102, 126, 234, 0.3);
$health-danger: #f5576c;
$health-danger-bg: rgba(245, 87, 108, 0.1);
$health-danger-border: rgba(245, 87, 108, 0.3);
$health-warning: #fa8c16;
$health-warning-bg: rgba(250, 140, 22, 0.1);
$health-warning-border: rgba(250, 140, 22, 0.3);
$health-info: #13c2c2;
$health-info-bg: rgba(19, 194, 194, 0.1);
$health-info-border: rgba(19, 194, 194, 0.3);

// ==================== 页面容器 ====================
page {
  height: 100%;
  overflow: auto;
}

// ==================== 搜索栏 - 单行模式 ====================
.search-view {
  padding: 12rpx 32rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 100;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  gap: 10rpx;

  .search-input {
    flex: 1;
  }

  .search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;

    .search-icon {
      position: absolute;
      right: 20rpx;
      z-index: 10;
      cursor: pointer;
    }
  }

  .filter-btn,
  .add-btn {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 12rpx 24rpx;
    background: $health-primary-bg;
    border-radius: 24rpx;
    border: 2rpx solid $health-primary-border;
    transition: all 0.3s ease;
    flex-shrink: 0;

    &:active {
      transform: scale(0.95);
      background: rgba(102, 126, 234, 0.12);
    }

    text {
      color: $health-primary;
      font-size: 28rpx;
      font-weight: 600;
    }

    uni-icons {
      color: $health-primary;
    }
  }
}

// ==================== 搜索栏 - 多行模式（人员+档案选择） ====================
.search-container {
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 100;

  .search-row {
    padding: 12rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10rpx;

    &:first-child {
      padding-bottom: 8rpx;
    }

    &:last-child {
      padding-top: 8rpx;
    }

    .search-input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;

      .search-icon {
        position: absolute;
        right: 20rpx;
        z-index: 10;
        cursor: pointer;
      }
    }

    .search-input {
      background: $health-primary-bg;
      color: #333333;
      width: 100%;
      border-radius: 24rpx;
      border: 2rpx solid $health-primary-border;
      height: 66rpx !important;
      display: flex;
      align-items: center;

      :deep(input::placeholder) {
        color: #909399 !important;
        font-size: 14px !important;
      }

      :deep(input::-webkit-input-placeholder) {
        color: #909399 !important;
        font-size: 14px !important;
      }

      :deep(input::-moz-placeholder) {
        color: #909399 !important;
        font-size: 14px !important;
      }

      :deep(.u-input__content__field-wrapper__field) {
        color: #333333 !important;
      }

      :deep(input) {
        color: #333333 !important;
      }
    }

    .filter-btn,
    .add-btn {
      display: flex;
      align-items: center;
      gap: 6rpx;
      padding: 12rpx 24rpx;
      background: $health-primary-bg;
      border-radius: 24rpx;
      border: 2rpx solid $health-primary-border;
      transition: all 0.3s ease;
      flex-shrink: 0;

      &:active {
        transform: scale(0.95);
        background: rgba(102, 126, 234, 0.12);
      }

      text {
        color: $health-primary;
        font-size: 28rpx;
        font-weight: 600;
      }

      uni-icons {
        color: $health-primary;
      }
    }
  }
}

// ==================== 筛选面板 ====================
.filter-panel {
  width: 100%;
  position: absolute;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .filter-panel-content {
    background-color: #ffffff;
    padding: 0 30rpx 30rpx;
    border-radius: 0 0 16rpx 16rpx;

    .filter-title {
      color: #2c3e50;
      font-size: 32rpx;
      font-weight: 600;
      padding: 32rpx 0 24rpx 20rpx;
      position: relative;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        width: 6rpx;
        height: 32rpx;
        background: linear-gradient(135deg, $health-primary 0%, $health-primary-end 100%);
        border-radius: 3rpx;
        margin-right: 12rpx;
        flex-shrink: 0;
      }
    }

    .selcet-content {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
    }

    .state-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;

      .state-item {
        padding: 0 32rpx;
        height: 68rpx;
        border: 2rpx solid #e8edf3;
        border-radius: 34rpx;
        text-align: center;
        line-height: 68rpx;
        font-size: 28rpx;
        color: #666666;
        background: #ffffff;
        transition: all 0.2s ease;
      }

      .active {
        background: linear-gradient(135deg, $health-primary 0%, $health-primary-end 100%);
        border: 2rpx solid transparent;
        color: #ffffff;
        font-weight: 600;
      }
    }
  }

  .btn-box {
    display: flex;
    gap: 20rpx;
    padding: 24rpx 30rpx;
    background-color: #fff;
    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;

    .btn-reset,
    .btn-confirm {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      height: 88rpx;
      border-radius: 12rpx;
      font-size: 30rpx;
      font-weight: 600;
      flex: 1;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        opacity: 0.9;
      }

      text {
        line-height: 1;
      }
    }

    .btn-reset {
      background: #f5f7fa;
      border: 2rpx solid #dcdfe6;

      text {
        color: #606266;
      }
    }

    .btn-confirm {
      background: $health-primary;
      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
      border: none;

      text {
        color: #ffffff;
      }
    }
  }
}

// ==================== 列表卡片 ====================
.list-item {
  margin: 10rpx 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
  }

  // 卡片头部 - 渐变背景
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, $health-primary 0%, $health-primary-end 100%);

    .card-name-section {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      margin-right: 16rpx;
    }

    .card-icon {
      width: 40rpx;
      height: 40rpx;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12rpx;
      flex-shrink: 0;
    }

    .card-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12rpx;

      .card-name {
        color: #ffffff;
        font-size: 30rpx;
        font-weight: 700;
        line-height: 1.3;
        /* 超长药品名称自动换行，最多 3 行后省略 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
        letter-spacing: 0.5rpx;
      }

      .card-time {
        color: rgba(255, 255, 255, 0.9);
        font-size: 26rpx;
        font-weight: 500;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
        letter-spacing: 0.3rpx;
      }

      .card-code {
        color: rgba(255, 255, 255, 0.9);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
        letter-spacing: 0.3rpx;
      }
    }

    // 统计数据区（如身高体重）
    .stats-section {
      display: flex;
      align-items: center;
      gap: 16rpx;
      flex-shrink: 0;

      .stats-item {
        color: $health-warning;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;

        .stats-label {
          color: rgba(255, 255, 255, 0.85);
          font-size: 20rpx;
          font-weight: 400;
          margin-left: 4rpx;
        }
      }
    }

    // 体温展示区
    .temperature-section {
      display: flex;
      align-items: center;
      flex-shrink: 0;

      .temperature-value {
        font-size: 32rpx;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        padding: 10rpx 20rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10rpx;
        letter-spacing: 0.5rpx;

        &.temp-normal {
          color: rgba(255, 255, 255, 0.95);
        }

        &.temp-warning {
          color: #ff7875;
          background: rgba(255, 120, 117, 0.15);
          font-weight: 800;
        }

        &.temp-danger {
          color: #ff4d4f;
          background: rgba(255, 77, 79, 0.15);
          font-weight: 800;
        }
      }
    }
  }

  // 卡片主体
  .card-body {
    padding: 24rpx;
    background: #fafbfc;
    border: 2rpx solid #f0f2f5;
    margin: 15rpx 16rpx 2rpx;
    border-radius: 12rpx;
  }

  // 信息行 - 两列布局
  .info-row {
    display: flex;
    flex-wrap: wrap;
    /* 关键：使用 flex-start 顶部对齐，避免同行两个 item 超长换行后高度不齐 */
    align-items: flex-start;
    margin: 0 -12rpx;

    .info-item {
      width: 50%;
      padding: 0 12rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-bottom: 20rpx;

      &.info-item-full {
        width: 100%;
      }

      .info-label {
        font-size: 24rpx;
        color: $health-primary;
        font-weight: 500;
        background: $health-primary-bg;
        padding: 6rpx 12rpx;
        border-radius: 8rpx;
        align-self: flex-start;
        margin-bottom: 8rpx;
      }

      .info-value {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
        flex: 1;
        line-height: 1.5;
        word-break: break-all;
        white-space: normal;
      }

      /* 两列布局下也允许换行（内容起长时撑开多行） */
      &:not(.info-item-full) .info-value {
        /* 超过 4 行后省略号截断，避免某个超长字段把整个卡片撑得太高 */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  // 操作按钮区
  .operate {
    display: flex;
    justify-content: flex-end;
    padding: 16rpx 24rpx 24rpx;
    gap: 16rpx;
    flex-wrap: wrap;

    .btn-edit,
    .btn-delete,
    .btn-copy,
    .btn-detail,
    .btn-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6rpx;
      padding: 0 24rpx;
      height: 64rpx;
      border-radius: 12rpx;
      font-size: 26rpx;
      font-weight: 500;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.95);
      }
    }

    .btn-edit {
      background: rgba(102, 126, 234, 0.1);
      color: $health-primary;
      border: 1rpx solid $health-primary-border;
    }

    .btn-delete {
      background: $health-danger-bg;
      color: $health-danger;
      border: 1rpx solid $health-danger-border;
    }

    .btn-copy {
      background: $health-warning-bg;
      color: $health-warning;
      border: 1rpx solid $health-warning-border;
    }

    .btn-detail {
      background: $health-info-bg;
      color: $health-info;
      border: 1rpx solid $health-info-border;
    }

    /* 汇总按钮：与 btn-detail 同一色调（信息色），避免各页面重复定义 */
    .btn-summary {
      background: $health-info-bg;
      color: $health-info;
      border: 1rpx solid $health-info-border;
    }
  }
}

// ==================== 状态标签 ====================
.status-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  font-weight: 600;

  &.status-active, &.status-1 {
    background: rgba(82, 196, 26, 0.2);
    color: #52c41a;
  }

  &.status-ended, &.status-2 {
    background: rgba(144, 147, 153, 0.2);
    color: #909399;
  }

  &.status-paused, &.status-3 {
    background: rgba(250, 140, 22, 0.2);
    color: #fa8c16;
  }
}