/* First column sticky */
.sticky-left {
  position: sticky;
  left: 0;
  z-index: 5;
  box-shadow: 6px 0 8px -6px rgba(0,0,0,.1);
}

/* Give first column a distinct background */
tbody .sticky-left {
  background-color: #f8fafc; /* light slate / gray */
}

/* Header row style */
thead th {
  background-color: #2563eb; /* Tailwind blue-600 */
  color: white;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-y: hidden; 
}

/* Pretty scrollbars on WebKit (optional) */
::-webkit-scrollbar { height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* Shimmer skeleton */
@keyframes ladle-skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0;  }
}

.skeleton-block {
  display: block;
  width: 100%;
  height: 1.25rem;              /* base height of the grey bar */
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    #e5e7eb 0%,
    #f3f4f6 50%,
    #e5e7eb 100%
  );
  background-size: 200% 100%;
  animation: ladle-skel-shimmer 1.3s ease-in-out infinite;
}

/* a slightly taller skeleton in the first column */
.skeleton-label {
  height: 1.5rem;
}

/* keep cells vertically centered even during skeleton */
#ladleWallGrid th,
#ladleWallGrid td {
  vertical-align: middle;
}

/* sticky first column shadow */
.sticky-left {
  position: sticky;
  left: 0;
  z-index: 5;
  box-shadow: 6px 0 8px -6px rgba(0,0,0,.1);
}