/* ────────────────────────────────────────────────────────────────────────────
   SKELETON LOADING SYSTEM (loaded globally by includes/head.php)

   Two jobs:
   1. Shimmer primitives (.sk, .sk-*) — drop-in placeholder shapes for any
      container whose content arrives via AJAX. Compose them by hand or via
      the LPSkeleton JS helper (assets/skeleton.js).
   2. Page-transition overlay (#lpPageSkel) — a full-viewport faux app shell
      that appears the instant the user navigates to another page, so slow
      server renders show a skeleton instead of a frozen old page.
   ──────────────────────────────────────────────────────────────────────── */

/* ── 1. Shimmer primitives ── */
.sk{
  position:relative;
  overflow:hidden;
  background:#E8E9ED;
  border-radius:8px;
  /* A skeleton block never shows its (empty) content */
  color:transparent !important;
  pointer-events:none;
  user-select:none;
}
.sk::after{
  content:'';
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer{
  100%{transform:translateX(100%)}
}
@media (prefers-reduced-motion: reduce){
  .sk::after{animation:none}
}

/* Shape variants */
.sk-line  {height:.8rem;border-radius:6px}
.sk-title {height:1.15rem;border-radius:7px;width:45%}
.sk-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.sk-thumb {height:140px;border-radius:12px}
.sk-btn   {height:38px;width:110px;border-radius:100px}
.sk-chip  {height:24px;width:70px;border-radius:100px}

/* Common composed layouts (LPSkeleton presets emit these) */
.sk-row{display:flex;align-items:center;gap:.65rem;padding:.55rem .9rem}
.sk-row .sk-avatar{width:34px;height:34px}
.sk-row-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}

.sk-card{
  background:#fff;
  border:1.5px solid #E5E7EB;
  border-radius:16px;
  padding:1.1rem 1.2rem;
  margin-bottom:1rem;
}
.sk-card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}
.sk-card-head .sk-row-lines{gap:.45rem}
.sk-card-body{display:flex;flex-direction:column;gap:.55rem}

/* ── 2. Page-transition overlay ── */
#lpPageSkel{
  position:fixed;
  inset:0;
  z-index:99990;
  background:#F3F4F6;
  display:none;
  opacity:0;
  transition:opacity .18s ease;
}
#lpPageSkel.on{display:block}
#lpPageSkel.vis{opacity:1}

/* Indeterminate progress bar pinned to the very top */
.lp-skel-bar{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:rgba(123,45,160,.15);
  overflow:hidden;
  z-index:2;
}
.lp-skel-bar::after{
  content:'';
  position:absolute;top:0;bottom:0;left:0;width:38%;
  border-radius:100px;
  background:linear-gradient(90deg,#7B2DA0,#A855F7);
  animation:lp-skel-slide 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lp-skel-slide{
  0%  {left:-40%}
  100%{left:105%}
}
@media (prefers-reduced-motion: reduce){
  .lp-skel-bar::after{animation-duration:2.2s}
}

/* Faux top nav */
.lp-skel-nav{
  height:57px;
  background:#fff;
  border-bottom:1px solid #E5E7EB;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0 1.4rem;
}
.lp-skel-nav .sk-brand{width:130px;height:20px;border-radius:6px}
.lp-skel-nav .lp-skel-nav-right{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.lp-skel-nav .sk-circle{width:34px;height:34px;border-radius:50%}

/* Faux shell: sidebar + content */
.lp-skel-shell{display:flex;height:calc(100% - 57px)}
.lp-skel-side{
  width:230px;flex-shrink:0;
  background:#fff;border-right:1px solid #E5E7EB;
  padding:1.1rem .9rem;
  display:flex;flex-direction:column;gap:.85rem;
}
.lp-skel-side .sk-line{height:.9rem}
.lp-skel-main{flex:1;min-width:0;padding:1.8rem 2rem;overflow:hidden}
.lp-skel-main .sk-title{margin-bottom:1.2rem;height:1.5rem;width:32%}
.lp-skel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
  margin-bottom:1.4rem;
}
@media(max-width:900px){
  .lp-skel-side{display:none}
  .lp-skel-main{padding:1rem}
}