/* workspace-panel.css — Workspace management view */

/* ===== Panel Layout ===== */
.workspace-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  gap: var(--space-md);
  overflow-y: auto;
  height: 100%;
}

.workspace-panel::-webkit-scrollbar { width: 4px; }
.workspace-panel::-webkit-scrollbar-track { background: transparent; }
.workspace-panel::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: var(--radius-full);
}
.workspace-panel::-webkit-scrollbar-thumb:hover { background: var(--glass-border-light); }

/* ===== Workspace Cards ===== */
.workspace-panel .glass-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

/* Active workspace: accent border + subtle inner glow */
.workspace-panel .glass-card[data-active="true"] {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 1px var(--accent-primary), inset 0 0 24px rgba(99, 102, 241, 0.06);
}

/* Inactive cards: subtle hover lift */
.workspace-panel .glass-card:not([data-active="true"]):hover {
  transform: translateY(-1px);
}

/* ===== File List ===== */
/* Constrain height so it scrolls rather than pushing content off screen */
.workspace-panel [style*="overflow-y: auto"] {
  max-height: 320px;
}

/* File rows */
.workspace-panel .glass-subtle {
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

/* File type emoji icons via data attribute (enhancement) */
.workspace-panel .glass-subtle[data-ext="html"]::before,
.workspace-panel .glass-subtle[data-ext="htm"]::before  { content: '🌐'; }
.workspace-panel .glass-subtle[data-ext="md"]::before   { content: '📝'; }
.workspace-panel .glass-subtle[data-ext="txt"]::before  { content: '📄'; }
.workspace-panel .glass-subtle[data-ext="json"]::before { content: '{}'; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--warning); }
.workspace-panel .glass-subtle[data-ext="js"]::before,
.workspace-panel .glass-subtle[data-ext="mjs"]::before  { content: 'JS'; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--warning); }
.workspace-panel .glass-subtle[data-ext="css"]::before  { content: '#'; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--info); }
.workspace-panel .glass-subtle[data-ext="csv"]::before  { content: '📊'; }

/* ===== Delete button danger hover ===== */
.workspace-panel .glass-button-icon[aria-label*="Delete"]:hover {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

/* ===== Divider ===== */
.workspace-panel .divider {
  height: 1px;
  background: var(--glass-border);
  border: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .workspace-panel {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .workspace-panel .glass-card {
    padding: var(--space-sm) var(--space-md);
  }

  .workspace-panel [style*="overflow-y: auto"] {
    max-height: 200px;
  }
}
