/* Critical layout -- works even if the pinned Tailwind runtime is slow to load */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
img, video, svg { max-width: 100%; height: auto; }

/* Responsive card grid: stacks at 400px, fills as the panel widens */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.75rem;
}

/* Table wrapper for horizontal scroll when needed */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* Custom scrollbar styling for denser tables */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* Tab button highlights */
.tab-btn.active {
  box-shadow: inset 4px 0 0 0 #2563eb;
}
.dark .tab-btn.active {
  box-shadow: inset 4px 0 0 0 #60a5fa;
}

/* Symbol item selector hovering */
.symbol-btn {
  cursor: pointer;
}

/* Interactive SVG outlines */
#symbolsOverlay g:hover circle,
#symbolsOverlay g:hover rect,
#symbolsOverlay g:hover path,
#symbolsOverlay g:hover line {
  stroke: #2563eb !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4));
}

.dark #symbolsOverlay g:hover circle,
.dark #symbolsOverlay g:hover rect,
.dark #symbolsOverlay g:hover path,
.dark #symbolsOverlay g:hover line {
  stroke: #60a5fa !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
}