/* ============================================================
   DS Page Loader — top progress bar + lightweight skeleton
   Theme-agnostic: works with every existing DS theme, since it
   only reads the shared CSS variables (--green-700, --bg, --line)
   that every theme already defines. Does not alter any page logic
   or content — purely a visual transition aid between navigations.
   ============================================================ */

#ds-progress-bar{
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:3px;
  width:0%;
  background:var(--green-700,#1c6b4a);
  z-index:99999;
  opacity:0;
  transition:width .3s ease,opacity .25s ease;
  box-shadow:0 0 8px rgba(0,0,0,.25);
  pointer-events:none;
}
#ds-progress-bar.ds-active{opacity:1}
#ds-progress-bar.ds-done{width:100% !important;transition:width .15s ease,opacity .35s ease .12s;opacity:0}

#ds-skeleton-overlay{
  position:absolute;
  inset:0;
  background:var(--bg,#f3eddd);
  z-index:40;
  display:none;
  overflow:hidden;
  padding:inherit;
}
#ds-skeleton-overlay.ds-active{display:block}

.ds-skel{
  background:linear-gradient(90deg,var(--line-soft,#e7e2d3) 25%,var(--surface,#fff) 37%,var(--line-soft,#e7e2d3) 63%);
  background-size:400% 100%;
  animation:ds-skel-shine 1.4s ease infinite;
  border-radius:9px;
}
@keyframes ds-skel-shine{0%{background-position:100% 50%}100%{background-position:0 50%}}

.ds-skel-title{height:24px;width:230px;margin-bottom:10px}
.ds-skel-sub{height:11px;width:360px;margin-bottom:22px}
.ds-skel-cards{display:flex;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.ds-skel-card{height:76px;flex:1 1 160px;min-width:140px}
.ds-skel-filters{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.ds-skel-filter{height:38px;flex:1 1 140px;min-width:120px;border-radius:10px}
.ds-skel-row{height:44px;margin-bottom:8px;border-radius:10px}

/* Smooth fade-in for real content once the skeleton clears */
.ds-content-ready{animation:ds-content-fade .18s ease both}
@keyframes ds-content-fade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  #ds-progress-bar{transition:none}
  .ds-skel{animation:none}
  .ds-content-ready{animation:none}
}