.customer-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  padding-bottom: 100px;

  .header-bg {
    background: linear-gradient(to bottom, #03605c, #18ae4f);
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 0;
  }

  .nav-actions {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .loading-container,
  .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    color: #999;
    
    .nut-button {
      margin-top: 16px;
    }
  }

  .detail-container {
    position: relative;
    z-index: 10;
    padding: 20px 16px;
    margin-top: 20px;

    .customer-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      .customer-header {
        margin-bottom: 16px;

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

          .company-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            flex: 1;
          }

          .nut-tag {
            margin-left: 12px;
          }
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          padding: 8px 0;

          &:last-child {
            margin-bottom: 0;
          }

          .nut-icon {
            margin-right: 8px;
            flex-shrink: 0;
          }

          .contact-text {
            font-size: 14px;
            color: #333;
            line-height: 1.4;

            &.phone {
              color: #52c41a;
              cursor: pointer;
            }
          }
        }
      }
    }

    .info-section {
      background: #ffffff;
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 16px 8px;
        border-bottom: 1px solid #f0f0f0;

        .section-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }

        .nut-button {
          height: 28px;
          font-size: 12px;
          padding: 0 12px;
        }
      }

      .info-content {
        .nut-cell {
          padding: 12px 16px;
          border-bottom: 1px solid #f8f8f8;

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

          .nut-cell__title {
            font-size: 14px;
            color: #666;
            font-weight: normal;
          }

          .nut-cell__value {
            font-size: 14px;
            color: #333;
            text-align: right;
          }
        }
      }

      .contact-history {
        padding: 0 16px 16px;

        .history-item {
          padding: 12px 0;
          border-bottom: 1px solid #f8f8f8;

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

          .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .history-type {
              font-size: 14px;
              font-weight: 500;
              color: #333;
            }

            .history-date {
              font-size: 12px;
              color: #999;
            }
          }

          .history-content {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
            margin-bottom: 4px;
          }

          .history-operator {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    z-index: 100;

    .action-buttons {
      display: flex;
      gap: 12px;

      .action-btn {
        flex: 1;
        height: 44px;
        border-radius: 22px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        &.call-btn {
          background: #52c41a;
          color: #ffffff;
          border: none;
        }

        &.renew-btn {
          background: #1890ff;
          color: #ffffff;
          border: none;
        }
      }
    }
  }
}

// 适配安全区域
@supports (bottom: env(safe-area-inset-bottom)) {
  .customer-detail-page .fixed-bottom {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

// 标签样式优化
.nut-tag {
  &.nut-tag--plain {
    border-width: 1px;
    font-size: 12px;
    padding: 2px 8px;
  }
}

// 响应式适配
@media (max-width: 375px) {
  .customer-detail-page {
    .detail-container {
      padding: 16px 12px;

      .customer-card {
        padding: 16px;

        .customer-header {
          .company-info {
            .company-name {
              font-size: 16px;
            }
          }
        }

        .contact-info {
          .contact-item {
            .contact-text {
              font-size: 13px;
            }
          }
        }
      }

      .info-section {
        .section-header {
          padding: 14px 12px 6px;

          .section-title {
            font-size: 15px;
          }
        }

        .info-content {
          .nut-cell {
            padding: 10px 12px;

            .nut-cell__title,
            .nut-cell__value {
              font-size: 13px;
            }
          }
        }

        .contact-history {
          padding: 0 12px 12px;

          .history-item {
            .history-content {
              font-size: 13px;
            }
          }
        }
      }
    }

    .fixed-bottom {
      .action-buttons {
        .action-btn {
          height: 40px;
          font-size: 13px;
        }
      }
    }
  }
}
