.dashboard {
  position: absolute;
  top: 0;
  left: 0;
  padding: 24px 20px 20px 20px;
  background: #f7f9fc;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;

  // 隐藏滚动条但保持滚动功能
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */

  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  // 顶部标题和选项卡
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-shrink: 0;
    z-index: 2;

    .headerLeft {
      flex: 1;

      .title {
        display: flex;
        font-size: 36px;
        font-weight: 600;
        margin: 0 0 16px 0;
        .starIcon {
          position: absolute;
          top: 18px;
          width: 14px;
          height: 14px;
          left: 15px;
        }
        .titleText {
          display: inline-block;
          background: linear-gradient(90deg, #472bf6 0%, #2b99ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .analysisTabs {
        :global(.@{antPrefix}-segmented-item) {
          font-size: 14px;
        }
      }
      .datePicker {
        margin-left: 8px;
        width: 140px;
      }
      .RangePicker {
        margin-left: 8px;
        width: 200px;
      }
    }

    .headerRight {
      display: flex;
      align-items: flex-start;
      gap: 16px;

      .globalCard {
        width: 500px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: none;

        :global(.@{antPrefix}-card-body) {
          padding: 16px;
        }

        .globalContent {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .globalText {
            flex: 1;
            font-size: 14px;
            color: #1f2329;
            line-height: 1.6;

            p {
              margin: 0;
            }
          }

          .globalIcon {
            margin-left: 16px;
            flex-shrink: 0;
          }
        }
      }
    }
  }
  :global {
    .@{antPrefix}-spin-nested-loading {
      z-index: 2;
    }
  }
  // 关键指标卡片行
  .metricsRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    flex-shrink: 0;
    z-index: 2;

    .metricCard {
      border-radius: 12px;
      border: 1px solid #fff;
      background: linear-gradient(208deg, #ecf4ff 0%, #fff 72.2%);
      padding: 20px;

      .metricContent {
        display: flex;
        align-items: center;
        gap: 16px;

        .metricIcon {
          width: 64px;
          height: 64px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          flex-shrink: 0;

          // &[data-icon='purple'] {
          //   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          //   color: #fff;
          // }

          // &[data-icon='blue'] {
          //   background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
          //   color: #fff;
          // }

          // &[data-icon='orange'] {
          //   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          //   color: #fff;
          // }
        }

        .metricInfo {
          flex: 1;

          .metricTitle {
            font-size: 14px;
            color: #14161aff;
            margin-bottom: 8px;
          }

          .metricValue {
            font-size: 24px;
            font-weight: 600;
            color: #1f2329;
            margin-bottom: 4px;

            .metricUnit {
              font-size: 14px;
              font-weight: 400;
              color: #86909c;
            }
          }

          .metricTrend {
            font-size: 12px;
            .metricTrendText {
              color: #40454dff;
              margin-right: 4px;
            }
            .trendUp {
              color: #f53f3f;
            }

            .trendDown {
              color: #00b42a;
            }
          }
        }
      }
    }
  }

  // 分区标题
  .section {
    margin-bottom: 24px;
    flex-shrink: 0;
    z-index: 2;

    .sectionTitle {
      font-size: 14px;
      font-weight: 500;
      color: #14161a;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      .sectionTitleText {
        width: 3px;
        height: 14px;
        border-radius: 1px 3px 3px 1px;
        background: var(--user-primary-primary-6, #165dff);
        margin-right: 8px;
      }
    }
  }

  // 分析区域
  .analysisSection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    .chartCard,
    .rankCard {
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 1px 2px 0 #00000008, 0 1px 6px 0 #00000005, 0 2px 4px 0 #00000005;
      display: flex;
      flex-direction: column;

      .cardHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        flex-shrink: 0;

        .cardTitle {
          font-size: 16px;
          font-weight: 500;
          color: #1f2329;
        }
      }

      .cardBody {
        padding: 0px 20px 20px 20px;
        flex: 1;
      }
    }

    .chartCard {
      .chartContainer {
        width: 100%;
        height: 420px;
      }
    }

    .rankCard {
      .rankTabs {
        margin-bottom: 0;

        :global(.@{antPrefix}-segmented-item) {
          font-size: 14px;
        }
      }

      .rankTable {
        :global(.@{antPrefix}-table-thead > tr > th) {
          background: transparent;
          border-bottom: none;
          color: #86909c;
          font-weight: 500;
          font-size: 14px;
          padding: 12px 16px;
          border-right: none !important;

          &::before {
            display: none !important;
            content: none !important;
            width: 0 !important;
          }

          &::after {
            display: none !important;
            content: none !important;
            width: 0 !important;
          }

          :global(.@{antPrefix}-table-cell) {
            &::before {
              display: none !important;
              content: none !important;
              width: 0 !important;
            }

            &::after {
              display: none !important;
              content: none !important;
              width: 0 !important;
            }
          }
        }

        :global(.@{antPrefix}-table-tbody > tr > td) {
          border-bottom: 1px solid #f0f0f0;
          padding: 16px;
          color: #1f2329;
          font-size: 14px;
        }

        :global(.@{antPrefix}-table-tbody > tr:hover > td) {
          background: #f7f8fa;
        }

        .rankNumber {
          display: inline-block;
          width: 28px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          color: #1f2329;
          font-weight: 500;
        }

        .rankImage {
          display: inline-block;
          width: 28px;
          height: 28px;
          object-fit: contain;
          vertical-align: middle;
        }

        .employeeCell {
          display: flex;
          align-items: center;
          gap: 12px;

          :global(.@{antPrefix}-avatar) {
            flex-shrink: 0;
          }
        }

        // 进度条样式（独立使用）
        .progressBar {
          height: 8px;
          background: #f0f0f0;
          border-radius: 4px;
          overflow: hidden;
          min-width: 200px;

          .progressFill {
            height: 100%;
            background: #126dff;
            border-radius: 4px;
            transition: width 0.3s ease;
          }
        }

        .countText {
          white-space: nowrap;
          font-weight: 500;

          .trendUp {
            color: #f53f3f;
            margin-left: 4px;
          }

          .trendDown {
            color: #00b42a;
            margin-left: 4px;
          }
        }

        .serviceCountCell {
          display: flex;
          align-items: center;
          gap: 12px;

          .progressBar {
            height: 8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
            min-width: 200px;

            .progressFill {
              height: 100%;
              background: #126dff;
              border-radius: 4px;
              transition: width 0.3s ease;
            }
          }

          .countText {
            white-space: nowrap;
            font-weight: 500;

            .trendUp {
              color: #f53f3f;
              margin-left: 4px;
            }

            .trendDown {
              color: #00b42a;
              margin-left: 4px;
            }
          }
        }

        .trendUp {
          color: #f53f3f;
        }

        .trendDown {
          color: #00b42a;
        }
      }
    }
  }

  // 规范性分析卡片
  .normativeCard {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px 0 #00000008, 0 1px 6px 0 #00000005, 0 2px 4px 0 #00000005;
    display: flex;
    flex-direction: column;

    .cardHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      flex-shrink: 0;
    }

    .cardBody {
      padding: 0px 20px 20px 20px;
      flex: 1;
    }

    .rankTabs {
      margin-bottom: 0;

      :global(.@{antPrefix}-segmented-item) {
        font-size: 14px;
      }
    }

    .normativeTable {
      :global(.@{antPrefix}-table-thead > tr > th) {
        background: #f5f7fa;
        border-bottom: 1px solid #e5e6eb;
        color: #86909c;
        font-weight: 500;
        font-size: 14px;
        padding: 12px 16px;
        white-space: nowrap;
      }

      :global(.@{antPrefix}-table-tbody > tr > td) {
        border-bottom: 1px solid #f0f0f0;
        padding: 16px;
        color: #1f2329;
        font-size: 14px;
      }

      :global(.@{antPrefix}-table-tbody > tr:hover > td) {
        background: #f7f8fa;
      }
    }

    .paginationWrapper {
      margin-top: 16px;
      display: flex;
      justify-content: flex-end;

      :global(.@{antPrefix}-pagination) {
        :global(.@{antPrefix}-pagination-total-text) {
          margin-right: 16px;
        }
      }
    }

    .actionButton {
      padding: 0;
      height: auto;
      color: #1890ff;
      font-size: 14px;
      border: none;
      background: transparent;

      &:hover {
        color: #40a9ff;
      }
    }
  }
}

.backgroundRadialGradients1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(232, 237, 255, 1), rgba(247, 249, 252, 1));
}
.backgroundRadialGradients2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  background-image: radial-gradient(ellipse at top right, rgba(173, 251, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 0 0 0 100%;
  overflow: hidden;
}
// 响应式设计
@media (max-width: 1400px) {
  .dashboard {
    .metricsRow {
      grid-template-columns: repeat(2, 1fr);
    }

    .analysisSection {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 16px;

    .header {
      flex-direction: column;
      gap: 16px;

      .headerRight {
        width: 100%;
        flex-direction: column;

        .globalCard {
          width: 100%;
        }
      }
    }

    .metricsRow {
      grid-template-columns: 1fr;
    }

    .analysisSection {
      grid-template-columns: 1fr;
    }
  }
}
