/* ═══ Opsis Suite — Unified Loading Skeleton ═══
   Consistent shimmer/skeleton loader for all modules.
   Usage: Add <div class="os-loading" id="os-loading-skel">...</div>
          Call document.getElementById('os-loading-skel')?.remove() on first render.
*/

/* ── Skeleton container ── */
.os-loading{padding:8px 0}

/* ── Skeleton card ── */
.os-skel{background:var(--bg-card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:18px;margin-bottom:12px}

/* ── Skeleton lines ── */
.os-skel-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--hover,rgba(0,0,0,.06)) 25%,rgba(0,0,0,.03) 50%,var(--hover,rgba(0,0,0,.06)) 75%);background-size:200% 100%;animation:os-shimmer 1.4s ease-in-out infinite;margin-bottom:10px}
.os-skel-line.thick{height:16px;margin-bottom:14px}
.os-skel-line.thin{height:8px}
.os-skel-line.w30{width:30%}.os-skel-line.w40{width:40%}.os-skel-line.w50{width:50%}
.os-skel-line.w60{width:60%}.os-skel-line.w70{width:70%}.os-skel-line.w80{width:80%}
.os-skel-line.w90{width:90%}.os-skel-line:last-child{margin-bottom:0}

/* ── Skeleton circle (avatar) ── */
.os-skel-circle{width:38px;height:38px;border-radius:50%;background:linear-gradient(90deg,var(--hover,rgba(0,0,0,.06)) 25%,rgba(0,0,0,.03) 50%,var(--hover,rgba(0,0,0,.06)) 75%);background-size:200% 100%;animation:os-shimmer 1.4s ease-in-out infinite;margin-bottom:12px;flex-shrink:0}

/* ── Row layout (for table-like skeletons) ── */
.os-skel-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border,#e2e8f0)}
.os-skel-row:last-child{border-bottom:none}
.os-skel-row .os-skel-line{margin-bottom:0}

/* ── Grid layout (for card-based views) ── */
.os-skel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1200px){.os-skel-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.os-skel-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.os-skel-grid{grid-template-columns:1fr}}

/* ── Kanban layout ── */
.os-skel-kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* ── Portal layout (for detail/portal pages) ── */
.os-skel-portal{max-width:800px}
.os-skel-portal .os-skel-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.os-skel-portal .os-skel-header .os-skel-circle{width:52px;height:52px;margin-bottom:0}
.os-skel-portal .os-skel-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.os-skel-portal .os-skel-fields{grid-template-columns:1fr}}

/* ── Shimmer animation ── */
@keyframes os-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}