/* ============================================
   SafetyPro — Skeleton Loaders (Phase 1 PR 1)
   ============================================
   Centralised skeleton system. CSS-only, no external library, no
   first-paint cost — the file is lazy-loaded via the
   `media="print" onload="this.media='all'"` pattern in index.html.

   Public API:
     Primitives ........... .sp-sk, .sp-sk-line, .sp-sk-circle,
                            .sp-sk-rect, .sp-sk-button, .sp-sk-avatar,
                            .sp-sk-image, .sp-sk-text
     Composites (built by  .sp-sk-table, .sp-sk-list, .sp-sk-cards,
       js/skeleton.js) ...  .sp-sk-tiles, .sp-sk-form, .sp-sk-page

   Animation:
     - Default: shimmer (subtle gradient sweep, hardware-accelerated)
     - prefers-reduced-motion: falls back to a still skeleton with a
       slow opacity pulse (no horizontal motion) to avoid vestibular
       triggers.

   Theming:
     - Pulls from CSS custom properties --border / --bg-light / --surface
       so the skeleton inherits any future theme automatically.
     - RTL-safe: only logical properties (margin-block, padding-inline)
       and symmetric backgrounds — never directional gradients.

   Namespacing:
     - All classes are `sp-sk-*` to avoid clashing with the older
       single-purpose `.skeleton-line` / `.ai-skeleton` blocks already
       in styles.css. Those legacy blocks remain untouched in this PR
       and will be migrated in a follow-up after Phase 1 is stable.
   ============================================ */

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

@keyframes sp-sk-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* Base block. Every primitive inherits from this. */
.sp-sk {
  display: block;
  background-color: var(--border, #E2E8F0);
  background-image: linear-gradient(
    90deg,
    var(--border, #E2E8F0) 0%,
    var(--bg-light, #F1F5F9) 40%,
    var(--bg-light, #F1F5F9) 60%,
    var(--border, #E2E8F0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: sp-sk-shimmer 1.6s ease-in-out infinite;
  /* Prevent text selection of skeleton placeholders */
  user-select: none;
  pointer-events: none;
  /* Provide a sensible minimum so an unsized skeleton is still visible */
  min-height: 12px;
}

/* ───────── Primitives ───────── */
.sp-sk-line {
  height: 12px;
  width: 100%;
  margin-block: 6px;
  border-radius: 4px;
}
.sp-sk-line.sp-sk-sm { height: 10px; }
.sp-sk-line.sp-sk-lg { height: 16px; }
.sp-sk-line.sp-sk-xl { height: 20px; }

.sp-sk-line.sp-sk-w-25 { width: 25%; }
.sp-sk-line.sp-sk-w-40 { width: 40%; }
.sp-sk-line.sp-sk-w-50 { width: 50%; }
.sp-sk-line.sp-sk-w-60 { width: 60%; }
.sp-sk-line.sp-sk-w-75 { width: 75%; }
.sp-sk-line.sp-sk-w-90 { width: 90%; }

.sp-sk-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.sp-sk-circle.sp-sk-sm { width: 28px; height: 28px; }
.sp-sk-circle.sp-sk-lg { width: 56px; height: 56px; }

.sp-sk-rect {
  width: 100%;
  height: 80px;
  border-radius: 8px;
}

.sp-sk-button {
  display: inline-block;
  width: 96px;
  height: 36px;
  border-radius: 6px;
  vertical-align: middle;
}

.sp-sk-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sp-sk-image {
  width: 100%;
  height: 160px;
  border-radius: 8px;
}

.sp-sk-text > .sp-sk-line:last-child {
  /* Final line of a multi-line block is shorter — readable cue that
     this is text and not a uniform bar. */
  width: 60%;
}

/* ───────── Composite: Table ─────────
   js/skeleton.js renders a <div class="sp-sk-table"> with N row
   containers, each holding M column lines. Used to stand in for
   the renderTable() output while a list module is loading. */
.sp-sk-table {
  width: 100%;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 8px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.sp-sk-table-row {
  display: grid;
  grid-template-columns: repeat(var(--sp-sk-cols, 4), 1fr);
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  align-items: center;
}
.sp-sk-table-row:last-child { border-bottom: none; }
.sp-sk-table-row.sp-sk-table-head {
  background: var(--bg-light, #F1F5F9);
}
.sp-sk-table-row.sp-sk-table-head .sp-sk-line {
  height: 14px;
}

/* ───────── Composite: List ─────────
   Vertical stack of avatar + 2 lines + meta. Used for chat lists,
   notification feeds, knowledge-base entries. */
.sp-sk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-sk-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.sp-sk-list-item-body {
  flex: 1;
  min-width: 0;
}

/* ───────── Composite: Cards ─────────
   Auto-fit grid of cards. Used for module dashboards / module
   galleries while data loads. */
.sp-sk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.sp-sk-card {
  padding: 16px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 12px;
  background: var(--surface, #fff);
}

/* ───────── Composite: Tiles (KPIs) ─────────
   Compact KPI tiles for dashboards. */
.sp-sk-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.sp-sk-tile {
  padding: 14px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
}

/* ───────── Composite: Form ─────────
   Used for modal bodies that load data before rendering form fields. */
.sp-sk-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}
.sp-sk-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ───────── Composite: Page ─────────
   Full-page placeholder while a module bootstraps. */
.sp-sk-page {
  padding: 24px;
}
.sp-sk-page-header {
  margin-bottom: 24px;
}

/* ───────── Reduced motion ─────────
   Replace shimmer with a still pulse — no horizontal background
   movement for users who opt out of motion. */
@media (prefers-reduced-motion: reduce) {
  .sp-sk {
    background-image: none;
    animation: sp-sk-pulse 2s ease-in-out infinite;
  }
}