/* Custom polish on top of Tailwind */
:root {
  color-scheme: light;
}

html, body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; border: 2px solid transparent; }

/* Editable cell */
.cell-edit { outline: none; background: white; }

/* Sticky first column for the data grid */
.data-grid th.sticky-col,
.data-grid td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 5;
  background: white;
}
.data-grid thead th.sticky-col {
  z-index: 10;
  background: #f8fafc;
}

.data-grid tr.row-archived td { opacity: 0.55; }

/* Image drop zone hover */
.drop-active { outline: 2px solid #ff3f6c; background: #fff1f5; }

/* Animations */
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fade-in 200ms ease-out both; }

@keyframes slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.slide-in-right { animation: slide-in-right 220ms ease-out both; }

/* Loading shimmer */
@keyframes shimmer { 0% { background-position: -800px 0 } 100% { background-position: 800px 0 } }
.shimmer { background: linear-gradient(90deg, #f1f5f9 0px, #e2e8f0 40px, #f1f5f9 80px); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; }

/* Tag pill */
.pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }

/* Brand gradient header */
.brand-gradient {
  background: linear-gradient(135deg, #ff3f6c 0%, #ed1a55 50%, #c80f47 100%);
}

/* Variation progress — only the card captures clicks; wheel/touch scroll passes through */
#variation-job-root {
  pointer-events: none;
}
#variation-job-root > * {
  pointer-events: auto;
}

/* Searchable attribute dropdowns */
.searchable-select input:focus {
  outline: none;
  border-color: #ff3f6c;
  box-shadow: 0 0 0 2px rgba(255, 63, 108, 0.15);
}

/* Folder sidebar: thin scroll + menu on touch */
[data-folder-list] {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (hover: none) {
  .folder-menu-btn { opacity: 0.55 !important; }
}

/* Studio page — no duplicate fixed overlays */
[data-studio-page] {
  padding-bottom: 2rem;
}