/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Prevent layout shift when scrollbar appears/disappears */
html {
  overflow-y: scroll; /* Fallback for older browsers */
  scrollbar-gutter: stable; /* Modern solution - reserves space for scrollbar */
}

/* Skeleton animation delays for staggered loading effect (CSP-compliant via data attributes) */
.skeleton-loader[data-delay="0"] { animation-delay: 0ms; }
.skeleton-loader[data-delay="50"] { animation-delay: 50ms; }
.skeleton-loader[data-delay="100"] { animation-delay: 100ms; }
.skeleton-loader[data-delay="150"] { animation-delay: 150ms; }
.skeleton-loader[data-delay="200"] { animation-delay: 200ms; }
.skeleton-loader[data-delay="250"] { animation-delay: 250ms; }
.skeleton-loader[data-delay="300"] { animation-delay: 300ms; }
.skeleton-loader[data-delay="350"] { animation-delay: 350ms; }
.skeleton-loader[data-delay="400"] { animation-delay: 400ms; }
.skeleton-loader[data-delay="450"] { animation-delay: 450ms; }
.skeleton-loader[data-delay="500"] { animation-delay: 500ms; }
.skeleton-loader[data-delay="550"] { animation-delay: 550ms; }
.skeleton-loader[data-delay="600"] { animation-delay: 600ms; }
.skeleton-loader[data-delay="650"] { animation-delay: 650ms; }
.skeleton-loader[data-delay="700"] { animation-delay: 700ms; }
.skeleton-loader[data-delay="750"] { animation-delay: 750ms; }
.skeleton-loader[data-delay="800"] { animation-delay: 800ms; }
.skeleton-loader[data-delay="850"] { animation-delay: 850ms; }
.skeleton-loader[data-delay="900"] { animation-delay: 900ms; }
.skeleton-loader[data-delay="950"] { animation-delay: 950ms; }
.skeleton-loader[data-delay="1000"] { animation-delay: 1000ms; }