.signinDetail {
  background-color: #ffffff;
  padding: 20px 15px;
  box-sizing: border-box;

  // 上面：标题和日期选择
  .signinDetailHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .titleText {
      font-size: 18px;
      font-weight: 500;
      color: #232323;
    }

    .dateSelector {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;

      &:active {
        background-color: #f5f5f5;
      }

      .dateText {
        font-size: 15px;
        color: #232323;
      }

      .arrowIcon {
        font-size: 12px;
        color: #999999;
        transition: transform 0.3s;
      }
    }
  }

  // 下面：签到明细列表
  .signinDetailList {
    .signinDetailItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .dateText {
        font-size: 15px;
        color: #232323;
      }

      .pointsText {
        font-size: 15px;
        font-weight: 500;
        // 颜色在组件中动态设置
      }
    }

    .emptyState {
      padding: 40px 0;
      text-align: center;

      .emptyText {
        font-size: 14px;
        color: #999999;
      }
    }
  }

  // 年月选择器弹窗
  .datePickerPopup {
    background-color: #ffffff;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
    display: flex;
    flex-direction: column;

    .pickerContent {
      padding: 10px 20px 30px 20px;
      display: flex;
      flex-direction: column;

      // 上面：年份选择
      .yearSelector {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;

        .yearArrow {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 4px;
          transition: background-color 0.3s;

          &:active {
            background-color: #f5f5f5;
          }

          .arrowText {
            font-size: 20px;
            color: #666666;
            font-weight: bold;
          }
        }

        .yearText {
          font-size: 18px;
          font-weight: 500;
          color: #232323;
        }
      }

      // 下面：月份选择（4排3列网格）
      .monthGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 12px;

        .monthItem {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s;
          background-color: #ffffff;

          &:active {
            background-color: #f5f5f5;
          }

          &.active {
            // 背景色在组件中动态设置

            .monthText {
              color: #ffffff;
              font-weight: 500;
            }
          }

          .monthText {
            font-size: 16px;
            color: #232323;
            transition: color 0.3s;
          }
        }
      }
    }
  }
}