/* Panel component shells */
.panel {
  @apply rounded-lg shadow-sm border overflow-hidden min-w-0;
  background-color: var(--surface-base);
  border-color: var(--border-base);
  color: var(--text-primary);
}

.panel-footer-hints {
  @apply flex items-center justify-center flex-wrap gap-3 text-xs;
  color: var(--text-muted);
}

.panel-header {
  @apply px-4 py-3 border-b;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}

.panel-title {
  @apply text-base font-semibold;
  color: var(--text-primary);
}

.panel-subtitle {
  @apply text-xs mt-0.5;
  color: var(--text-muted);
}

.panel-body {
  @apply p-4;
  background-color: var(--surface-base);
}

.panel-section {
  @apply border-t;
  border-color: var(--border-base);
}

.panel-section-header {
  @apply w-full px-4 py-3 flex items-center justify-center transition-colors cursor-pointer gap-2;
  background-color: var(--surface-secondary);
}

.panel-section-header:hover {
  background-color: var(--surface-hover);
}

.panel-section-content {
  @apply px-4 py-3 border-t overflow-visible space-y-4 w-full;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}

.panel-list {
  @apply max-h-[400px] overflow-y-auto w-full min-w-0;
  overflow-x: hidden;
}

.panel-list--fill {
  max-height: none;
  height: 100%;
}

.panel-list-item {
  @apply border-b last:border-b-0 transition-colors w-full;
  border-color: var(--border-base);
}

.panel-list-item:hover {
  background-color: var(--surface-hover);
}

.panel-list-item-highlight {
  background-color: var(--list-item-highlight-bg) !important;
  box-shadow: inset 0 0 0 1px var(--list-item-highlight-border);
}

.panel-list-item-content {
  @apply flex-1 text-start px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors w-full min-w-0;
}

.panel-list-item-content:hover {
  background-color: transparent;
}

.panel-list-item-content:disabled {
  opacity: 0.6;
}

.panel-list-item button:disabled {
  cursor: not-allowed;
}

.panel-list-item-disabled {
  opacity: 0.6;
}

.panel-empty-state {
  @apply p-6 text-center;
}

.panel-empty-state-icon {
  @apply text-gray-400 dark:text-gray-600 mb-2;
  color: var(--text-muted);
}

.panel-empty-state-title {
  @apply font-medium text-sm mb-1;
  color: var(--text-secondary);
}

.panel-empty-state-description {
  @apply text-xs;
  color: var(--text-muted);
}

.panel-footer {
  @apply px-4 py-3 border-t;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}