// 硬件管理组件样式
.section-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  }

  .section-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;

    .section-icon {
      margin-right: 12px;
      font-size: 1.5rem;
    }

    h2 {
      flex: 1;
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
    }

    .section-actions {
      display: flex;
      gap: 8px;
    }
  }

  .section-content {
    padding: 24px;
  }
}

// 按钮样式
.btn-primary {
  background: #4299e1;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background: #3182ce;
  }
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.btn-outline {
  background: transparent;
  color: #4299e1;
  border: 1px solid #4299e1;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #4299e1;
    color: white;
  }
}

// 硬件分类样式
.hardware-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;

  .category-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;

    &:hover, &.active {
      background: #4299e1;
      color: white;
      border-color: #4299e1;
    }

    .count {
      background: rgba(0, 0, 0, 0.1);
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 0.75rem;
    }
  }
}

// 硬件网格样式
.hardware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;

  .hardware-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;

    &:hover {
      border-color: #cbd5e0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .hardware-image {
      position: relative;
      height: 120px;
      background: #f7fafc;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 80%;
        max-height: 80%;
      }

      .status-indicator {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 12px;
        height: 12px;
        border-radius: 50%;

        &.status-connected { background: #10b981; }
        &.status-disconnected { background: #ef4444; }
        &.status-error { background: #f59e0b; }
      }
    }

    .hardware-info {
      padding: 16px;

      h4 {
        margin: 0 0 4px 0;
        font-size: 1rem;
        color: #2d3748;
      }

      .model {
        margin: 0 0 8px 0;
        font-size: 0.875rem;
        color: #718096;
      }

      .specs {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 12px;

        span {
          background: #e2e8f0;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 0.75rem;
          color: #4a5568;
        }
      }

      .hardware-actions {
        display: flex;
        gap: 8px;
      }
    }
  }
}

// 引脚配置样式
.pin-configuration {
  margin-top: 24px;
  padding: 16px;
  background: #f7fafc;
  border-radius: 8px;

  h3 {
    margin: 0 0 16px 0;
    color: #2d3748;
  }

  .pin-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;

    .pin-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        border-color: #4299e1;
      }

      &.configured {
        background: #e6fffa;
        border-color: #38b2ac;
      }

      .pin-number {
        font-weight: 600;
        color: #2d3748;
      }

      .pin-function {
        font-size: 0.75rem;
        color: #718096;
        text-align: center;
      }

      .pin-type {
        font-size: 0.625rem;
        color: #a0aec0;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .hardware-grid {
    grid-template-columns: 1fr;
  }
}
