.licenseManagementContainer {
  height: 90vh;

  .topSectionContainer {
    padding: 0;
    margin: 15px 0px 15px 5px;
    height: 40%;
    display: flex;
    gap: 15px;
    align-items: stretch;

    .firstBlock {
      width: 30%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 10px 16px;
      border-radius: 2px;

      .chartHeader {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .colorBlock {
          width: 2px;
          height: 18px;
          background-color: #2E4CD4;
          margin-right: 8px;
          border-radius: 1px;
        }

        .chartTitle {
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          line-height: 18px;
        }
      }

      .chartContainer {
        flex: 1;
        width: 100%;
        position: relative;

        .chart {
          width: 100%;
          height: 100%;
          min-height: 200px;
        }

        // 进度条区域样式
        .progressSection {
          margin-bottom: 20px;

          .progressItem {
            margin-bottom: 16px;

            .progressLabel {
              font-size: 12px;
              color: #666;
              margin-bottom: 8px;
              font-weight: 400;
            }

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

              .customProgress {
                flex: 1;
                
                :global(.ant-progress-bg) {
                  height: 8px !important;
                  border-radius: 4px;
                }
                
                :global(.ant-progress-outer) {
                  .ant-progress-inner {
                    background-color: #F0F0F0;
                    border-radius: 4px;
                  }
                }
              }

              .progressPercent {
                font-size: 12px;
                color: #333;
                font-weight: 500;
                min-width: 30px;
                text-align: right;
              }
            }
          }
        }

        // 数字统计区域样式
        .statsSection {
          .statItem {
            text-align: center;
            padding: 8px;

            .statNumber {
              font-size: 24px;
              font-weight: 600;
              line-height: 1.2;
              margin-bottom: 4px;
            }

            .statLabel {
              font-size: 12px;
              color: #666;
              font-weight: 400;
            }
          }
        }
      }
    }

    .secondBlock {
      width: 30%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 10px 16px;
      border-radius: 2px;

      .chartHeader {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .colorBlock {
          width: 2px;
          height: 18px;
          background-color: #2E4CD4;
          margin-right: 8px;
          border-radius: 1px;
        }

        .chartTitle {
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          // line-height: 18px;
        }
      }

      .chartContainer {
        flex: 1;
        width: 100%;
        position: relative;

        // 进度条区域样式
        .progressSection {
          // margin-bottom: 20px;

          .progressItem {
            // margin-bottom: 16px;

            .progressLabel {
              font-size: 10px;
              color: #666;
              // margin-bottom: 8px;
              font-weight: 400;
            }

            .progressWrapper {
              display: flex;
              align-items: center;
              gap: 5px;

              .customProgress {
                flex: 1;
                
                :global(.ant-progress-bg) {
                  height: 8px !important;
                  border-radius: 4px;
                }
                
                :global(.ant-progress-outer) {
                  .ant-progress-inner {
                    background-color: #F0F0F0;
                    border-radius: 4px;
                  }
                }
              }

              .progressPercent {
                font-size: 12px;
                color: #333;
                font-weight: 500;
                min-width: 30px;
                text-align: right;
              }
            }
          }
        }

        // 数字统计区域样式
        .statsSection {
          .statItem {
            text-align: center;
            padding: 0px 2px 2px 2px;

            .statNumber {
              font-size: 22px;
              font-weight: 600;
              line-height: 1.2;
              margin-bottom: 4px;
            }

            .statLabel {
              font-size: 12px;
              color: #666;
              font-weight: 400;
            }
          }
        }
      }
    }

    .thirdBlock {
      flex: 1;
      background-image: url('@/assets/business_basic/background_lqyj.svg');
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      padding: 10px 16px;
      border-radius: 2px;

      .chartHeader {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .colorBlock {
          width: 2px;
          height: 18px;
          background-color: #2E4CD4;
          margin-right: 8px;
          border-radius: 1px;
        }

        .chartTitle {
          font-size: 14px;
          font-weight: 500;
          color: #333333;
        }
      }

      .chartContainer {
        flex: 1;
        width: 100%;
        position: relative;

        // 透明块容器样式
        .transparentBlock {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 4px 8px;

          .licenseCard {
            width: 60%;
            height: auto;
            background-color: #FFF9F4;
            border: 1px solid #FFD7BB;
            border-radius: 2px;
            padding: 5px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

            .cardContent {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 4px;

              .licenseName {
                font-size: 12px;
                font-weight: 500;
                color: #333;
                line-height: 1.2;
              }

              .licenseNumber {
                font-size: 12px;
                color: #666;
                font-weight: 400;
              }
            }

            .expiryTag {
              width: 38%;
              background-color: #FFEDDE;
              border-radius: 2px;
              padding: 5px 12px;
              margin-left: 12px;


              .expiryText {
                font-size: 12px;
                font-weight: 500;
                display: flex;
                align-items: center;
                color: #D46B08;
              }
            }
          }
        }
      }
    }
  }


  .listCard {
    padding: 0;
    padding: 15px 5px 15px 20px;
    flex: 1;
    // display: flex;
    gap: 15px;
    background-color: #fff;
    // align-items: stretch;

    .chartHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;

      .headerLeft {
        display: flex;
        align-items: center;

        .colorBlock {
          width: 2px;
          height: 18px;
          background-color: #2E4CD4;
          margin-right: 8px;
          border-radius: 1px;
        }

        .chartTitle {
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          line-height: 18px;
        }
      }

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

        .searchInput {
          width: 280px;
          
          .ant-input {
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            
            &:hover {
              border-color: #40a9ff;
            }
            
            &:focus {
              border-color: #40a9ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            }
          }
        }

        .typeSelector {
          width: 120px;
          
          .ant-select-selector {
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            
            &:hover {
              border-color: #40a9ff;
            }
          }
          
          &.ant-select-focused .ant-select-selector {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
          }
        }

        .addButton {
          border-radius: 4px;
          background-color: #2E4CD4;
          // border-color: #1890ff;
          height: 32px;
          padding: 4px 15px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &:hover {
            background-color: #2E4CD4;
            // border-color: #40a9ff;
          }
          
          &:focus {
            background-color: #2E4CD4;
            // border-color: #40a9ff;
          }
        }
      }
    }

    // StandardTable 组件样式
    :global(.ant-table) {
      font-size: 12px;
    }
    :global(.ant-pagination-options-quick-jumper input) {
      text-align: center !important;
    }

    :global(.ant-table-thead > tr > th) {
      background-color: #f5f5fa;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #f0f0f0;   
      padding: 8px 12px;
      text-align: center;
    }

    :global(.ant-table-tbody > tr > td) {
      padding: 8px 12px;
      border-bottom: 1px solid #f0f0f0;
      text-align: center;
      color: #666666;
    }

    :global(.ant-pagination) {
      margin-top: 16px;
      text-align: right;
    }
  }
}

// 覆盖Ant Design默认样式
.licenseManagementContainer {
  .ant-card {
    box-shadow: none;
  }

  .ant-card-body {
    padding: 20px;
  }

  .ant-table {
    font-size: 14px;
  }

  .ant-tag {
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 8px;
  }

  .ant-btn-link {
    padding: 0;
    height: auto;
    font-size: 14px;
  }

  .ant-input-search {
    .ant-input {
      border-radius: 6px;
    }
  }

  .ant-select {
    .ant-select-selector {
      border-radius: 6px;
    }
  }

  .ant-btn-primary {
    border-radius: 6px;
  }
}