/* ═══════════════════════════════════════════════════════════════════
   ShukWAY · Loading Skeletons
   Gray placeholders with shimmer animation on cream background.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.sk{
  background:linear-gradient(90deg,var(--cream-warm) 25%,var(--cream-deep) 50%,var(--cream-warm) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease infinite;
  border-radius:var(--r-sm);
  display:block;
}

/* Variants */
.sk-text{height:14px;width:60%;margin-bottom:var(--sp-2)}
.sk-text-short{height:14px;width:35%;margin-bottom:var(--sp-2)}
.sk-text-full{height:14px;width:100%;margin-bottom:var(--sp-2)}
.sk-number{height:36px;width:80px;margin-bottom:var(--sp-2);border-radius:var(--r-md)}
.sk-heading{height:22px;width:50%;margin-bottom:var(--sp-3)}

/* Card skeleton */
.sk-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  position:relative;
  overflow:hidden;
}
.sk-card::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:3px;
  background:var(--cream-deep);
}

/* KPI card skeleton */
.sk-kpi{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  position:relative;
  overflow:hidden;
}
.sk-kpi::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:3px;
  background:linear-gradient(90deg,var(--cream-deep) 0%,var(--cream-warm) 100%);
}

/* Table row skeleton */
.sk-row{
  display:flex;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--divider);
  align-items:center;
}
.sk-row .sk{flex-shrink:0;margin:0}

/* Map placeholder */
.sk-map{
  width:100%;
  height:calc(100vh - 220px);
  min-height:280px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
}

/* Hero skeleton */
.sk-hero{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  margin-bottom:var(--sp-6);
  position:relative;
  overflow:hidden;
}
.sk-hero::before{
  content:'';
  position:absolute;
  top:0;right:0;left:0;
  height:4px;
  background:var(--cream-deep);
}

/* Layouts */
.sk-grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}
.sk-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
}
.sk-table{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--paper);
  overflow:hidden;
}

@media(max-width:768px){
  .sk-grid-4{grid-template-columns:1fr 1fr}
  .sk-grid-2{grid-template-columns:1fr}
  .sk-hero{padding:var(--sp-5) var(--sp-4)}
}
@media(max-width:480px){
  .sk-map{height:50vh;min-height:200px}
}