helmview/frontend/src/components/ResourceCard.css

.resource-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
  overflow: hidden;
}

.resource-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.resource-card.expanded {
  grid-column: 1 / -1;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  cursor: pointer;
  user-select: none;
}

.resource-header:hover {
  background: #f7fafc;
}

.resource-info {
  flex: 1;
}

.resource-kind {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.kind-badge {
  display: inline-block;
  background: #667eea;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Different colors for different resource kinds */
.kind-badge[data-kind="Deployment"],
.resource-card[data-kind="Deployment"] .kind-badge {
  background: #667eea;
}

.kind-badge[data-kind="Service"],
.resource-card[data-kind="Service"] .kind-badge {
  background: #48bb78;
}

.kind-badge[data-kind="Ingress"],
.resource-card[data-kind="Ingress"] .kind-badge {
  background: #ed8936;
}

.kind-badge[data-kind="ConfigMap"],
.resource-card[data-kind="ConfigMap"] .kind-badge {
  background: #4299e1;
}

.kind-badge[data-kind="Secret"],
.resource-card[data-kind="Secret"] .kind-badge {
  background: #9f7aea;
}

.kind-badge[data-kind="Pod"],
.resource-card[data-kind="Pod"] .kind-badge {
  background: #38b2ac;
}

.kind-badge[data-kind="StatefulSet"],
.resource-card[data-kind="StatefulSet"] .kind-badge {
  background: #805ad5;
}

.kind-badge[data-kind="DaemonSet"],
.resource-card[data-kind="DaemonSet"] .kind-badge {
  background: #d53f8c;
}

.kind-badge[data-kind="Job"],
.resource-card[data-kind="Job"] .kind-badge {
  background: #dd6b20;
}

.kind-badge[data-kind="CronJob"],
.resource-card[data-kind="CronJob"] .kind-badge {
  background: #c05621;
}

.kind-badge[data-kind="PersistentVolumeClaim"],
.resource-card[data-kind="PersistentVolumeClaim"] .kind-badge {
  background: #319795;
}

.kind-badge[data-kind="ServiceAccount"],
.resource-card[data-kind="ServiceAccount"] .kind-badge {
  background: #718096;
}

.kind-badge[data-kind="Role"],
.kind-badge[data-kind="RoleBinding"],
.kind-badge[data-kind="ClusterRole"],
.kind-badge[data-kind="ClusterRoleBinding"],
.resource-card[data-kind="Role"] .kind-badge,
.resource-card[data-kind="RoleBinding"] .kind-badge,
.resource-card[data-kind="ClusterRole"] .kind-badge,
.resource-card[data-kind="ClusterRoleBinding"] .kind-badge {
  background: #2d3748;
}

.kind-badge[data-kind="HorizontalPodAutoscaler"],
.resource-card[data-kind="HorizontalPodAutoscaler"] .kind-badge {
  background: #e53e3e;
}

.resource-name {
  font-size: 1.1rem;
  color: #2d3748;
  margin: 0.25rem 0;
  word-break: break-word;
}

.resource-namespace {
  color: #718096;
  font-size: 0.85rem;
  margin: 0.25rem 0 0 0;
  font-family: 'Monaco', 'Menlo', monospace;
}

.expand-btn {
  background: #ebf4ff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #667eea;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.expand-btn:hover {
  background: #667eea;
  color: white;
}

.resource-content {
  border-top: 1px solid #e2e8f0;
}

/* Tabs */
.tabs {
  display: flex;
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
}

.tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: #718096;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  background: #edf2f7;
  color: #2d3748;
}

.tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background: white;
}

.tab-content {
  padding: 1.5rem;
  max-height: 600px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Summary Tab */
.summary-tab {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.summary-row {
  display: flex;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f7fafc;
}

.summary-label {
  font-weight: 600;
  color: #4a5568;
  min-width: 120px;
}

.summary-value {
  color: #2d3748;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9rem;
}

.summary-section {
  margin-top: 1rem;
}

.summary-section h5 {
  font-size: 0.95rem;
  color: #4a5568;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.label-item {
  background: #f7fafc;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.label-item code {
  font-size: 0.85rem;
  color: #2d3748;
}

/* YAML Tab */
.yaml-tab {
  padding: 0;
  max-height: none;
  overflow: visible;
}