/* ============================================================================
   styles.css — a few custom touches on top of Tailwind (loaded from a CDN).
   Most styling is done with Tailwind classes directly in the HTML/JS.
   This file only holds things Tailwind can't do cleanly (animations, etc.).
============================================================================ */

/* Use a clean system font stack everywhere. */
html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- The slide-in drawer (affiliate profile panel) --- */
/* It sits off-screen to the right, then slides in when we add .drawer-open. */
#drawer {
  transition: transform 0.28s ease;
  transform: translateX(100%);
}
#drawer.drawer-open {
  transform: translateX(0);
}

/* The dark dimmed background behind the drawer. Hidden until needed. */
#drawer-overlay {
  transition: opacity 0.28s ease;
}

/* --- Dropdown menus (like the ⚙️ column chooser) --- */
/* We just toggle the .hidden class from JavaScript to show/hide them. */

/* --- A subtle, thin scrollbar for tables and the drawer --- */
.thin-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 999px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Make table headers "stick" to the top when you scroll a long table. */
.sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* A soft fade-in used when we switch between screens. */
.fade-in {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}