/* ═══════════════════════════════════════════════════════════════
   SKELETON SCREEN — GrowthfinSolutions MFB
   Drop this file alongside style.css and link it in index.html:
   <link rel="stylesheet" href="skeleton.css" />
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SHIMMER KEYFRAME ────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── 2. BASE BONE ───────────────────────────────────────────── */
/*
  Every skeleton "bone" (placeholder block) gets the .sk class.
  Combine with shape helpers below.
*/
.sk {
  background: linear-gradient(
    90deg,
    #e8edf3 25%,   /* matches --border */
    #f4f6f9 50%,   /* matches --page-bg */
    #e8edf3 75%
  );
  background-size: 600px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

/* Shape helpers */
.sk-circle  { border-radius: 50%; }
.sk-pill    { border-radius: 999px; }
.sk-rect    { border-radius: 4px; }
.sk-rounded { border-radius: 12px; }

/* Dark-mode inversion */
body.dark-mode .sk {
  background: linear-gradient(
    90deg,
    #1e293b 25%,
    #273348 50%,
    #1e293b 75%
  );
  background-size: 600px 100%;
}


/* ══════════════════════════════════════════════════════════════
   3. TOPBAR SKELETON
   Mirrors .topbar — shown while user data & avatar load
   ══════════════════════════════════════════════════════════════ */
.sk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: var(--topbar-bg, #fff);
  border-bottom: 1.5px solid var(--border, #e8edf3);
  gap: 16px;
}
.sk-topbar-left  { display: flex; align-items: center; gap: 14px; }
.sk-topbar-right { display: flex; align-items: center; gap: 12px; }

/* Brand text in topbar */
.sk-topbar .sk-brand-text {
  width: 140px;
  height: 16px;
}
.sk-topbar .sk-menu-btn {
  width: 36px;
  height: 36px;
}
.sk-topbar .sk-search {
  width: 220px;
  height: 36px;
}
.sk-topbar .sk-icon-btn {
  width: 36px;
  height: 36px;
}
.sk-topbar .sk-avatar {
  width: 38px;
  height: 38px;
}
.sk-topbar .sk-username {
  width: 90px;
  height: 14px;
}


/* ══════════════════════════════════════════════════════════════
   4. SIDEBAR SKELETON
   Mirrors the .sidebar nav list
   ══════════════════════════════════════════════════════════════ */
.sk-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--sidebar-bg, #0b2b27);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each nav item row */
.sk-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
}
.sk-nav-item .sk-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  opacity: 0.18;
}
.sk-nav-item .sk-label {
  height: 13px;
  flex: 1;
  opacity: 0.18;
}

/* Override shimmer tones for dark sidebar */
.sk-sidebar .sk {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.06) 75%
  );
  background-size: 300px 100%;
}


/* ══════════════════════════════════════════════════════════════
   5. HERO BANNER SKELETON
   Full-width teal banner placeholder
   ══════════════════════════════════════════════════════════════ */
.sk-hero {
  width: 100%;
  height: 220px;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    #0b5e58 25%,
    #0f766e 50%,
    #0b5e58 75%
  );
  background-size: 800px 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

/* Inner content ghost */
.sk-hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 36px;
}
.sk-hero-text-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.sk-hero-text-block .sk {
  background: rgba(255,255,255,0.12);
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.08) 75%
  );
  background-size: 600px 100%;
}
.sk-hero-title   { height: 32px; width: 55%; }
.sk-hero-sub     { height: 14px; width: 70%; }
.sk-hero-sub2    { height: 14px; width: 40%; }
.sk-hero-btn     { height: 40px; width: 140px; margin-top: 8px; }

.sk-hero-stats {
  display: flex;
  gap: 24px;
}
.sk-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.sk-hero-stat .sk-num  { height: 28px; width: 80px; }
.sk-hero-stat .sk-lbl  { height: 11px; width: 64px; }


/* ══════════════════════════════════════════════════════════════
   6. STAT CARDS SKELETON  (.cards section)
   ══════════════════════════════════════════════════════════════ */
.sk-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px 0;
}

.sk-stat-card {
  flex: 1;
  min-width: 160px;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e8edf3);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.sk-stat-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.sk-stat-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sk-stat-label { height: 12px; width: 70%; }
.sk-stat-value { height: 26px; width: 55%; }
.sk-stat-sub   { height: 10px; width: 45%; }


/* ══════════════════════════════════════════════════════════════
   7. ANALYTICS GRID SKELETON  (.analytics-grid)
   ══════════════════════════════════════════════════════════════ */
.sk-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px 24px 0;
}

.sk-analytics-card {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e8edf3);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.sk-analytics-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.sk-analytics-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sk-analytics-label { height: 12px; width: 65%; }
.sk-analytics-value { height: 30px; width: 60%; }
.sk-analytics-sub   { height: 10px; width: 50%; }


/* ══════════════════════════════════════════════════════════════
   8. CHART AREA SKELETON
   ══════════════════════════════════════════════════════════════ */
.sk-chart-section {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .sk-chart-section { grid-template-columns: 1fr; }
}

.sk-chart-card {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e8edf3);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sk-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sk-chart-title  { height: 16px; width: 38%; }
.sk-chart-legend { height: 14px; width: 22%; }
.sk-chart-body   { height: 200px; width: 100%; border-radius: 10px; }
.sk-chart-footer { display: flex; gap: 12px; }
.sk-chart-foot-item { height: 11px; flex: 1; }


/* ══════════════════════════════════════════════════════════════
   9. TABLE SKELETON
   Matches the general .table-wrapper style
   ══════════════════════════════════════════════════════════════ */
.sk-table-wrap {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e8edf3);
  border-radius: 16px;
  overflow: hidden;
  margin: 20px 24px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Header row */
.sk-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border, #e8edf3);
  background: #f8fafc;
}

.sk-table-title  { height: 16px; width: 28%; }
.sk-table-search { height: 34px; width: 200px; border-radius: 8px; }

/* Column header cells */
.sk-table-thead {
  display: flex;
  gap: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border, #e8edf3);
  background: #f8fafc;
}
.sk-th {
  flex: 1;
  height: 11px;
  max-width: 120px;
}

/* Table rows */
.sk-table-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #e8edf3);
  gap: 12px;
}
.sk-table-row:last-child { border-bottom: none; }

/* Cell variants */
.sk-cell        { flex: 1; height: 13px; }
.sk-cell-avatar { width: 34px; height: 34px; flex-shrink: 0; }
.sk-cell-badge  { width: 72px; height: 22px; flex-shrink: 0; }
.sk-cell-short  { flex: 0.6; }
.sk-cell-long   { flex: 1.6; }


/* ══════════════════════════════════════════════════════════════
   10. ACTIVITY FEED SKELETON
   ══════════════════════════════════════════════════════════════ */
.sk-feed-wrap {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e8edf3);
  border-radius: 16px;
  overflow: hidden;
  margin: 20px 24px 0;
}

.sk-feed-header {
  padding: 14px 20px;
  border-bottom: 1.5px solid var(--border, #e8edf3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sk-feed-title { height: 15px; width: 30%; }
.sk-feed-date  { height: 13px; width: 15%; }

.sk-feed-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #e8edf3);
}
.sk-feed-item:last-child { border-bottom: none; }

.sk-feed-dot   { width: 38px; height: 38px; flex-shrink: 0; }
.sk-feed-body  { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-feed-name  { height: 13px; width: 55%; }
.sk-feed-meta  { height: 10px; width: 35%; }
.sk-feed-amt   { height: 16px; width: 80px; flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════
   11. OFFICER DASHBOARD SKELETON
   (officerDashSection — stat card grid + tables)
   ══════════════════════════════════════════════════════════════ */
.sk-officer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.sk-officer-id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sk-officer-avatar { width: 60px; height: 60px; }
.sk-officer-name   { height: 18px; width: 160px; margin-bottom: 8px; }
.sk-officer-role   { height: 14px; width: 100px; }

.sk-od-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 0 24px 20px;
}

.sk-od-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e8edf3);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sk-od-icon  { width: 44px; height: 44px; flex-shrink: 0; }
.sk-od-body  { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sk-od-label { height: 10px; width: 80%; }
.sk-od-value { height: 22px; width: 55%; }


/* ══════════════════════════════════════════════════════════════
   12. SHOW / HIDE HELPERS
   Use JavaScript to swap between skeleton and real content.
   ══════════════════════════════════════════════════════════════ */

/*
  Skeleton blocks are HIDDEN BY DEFAULT.
  Call GFSkeleton.show('key') to reveal one while data loads,
  then GFSkeleton.hide('key') when data is ready.
*/
[id^="sk"] {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   13. RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sk-topbar .sk-search  { display: none; }
  .sk-cards { padding: 14px 12px 0; gap: 10px; }
  .sk-stat-card { min-width: 140px; }
  .sk-analytics-grid { padding: 14px 12px 0; }
  .sk-chart-section { padding: 14px 12px; }
  .sk-table-wrap,
  .sk-feed-wrap { margin: 14px 12px 0; }
  .sk-hero { height: 160px; }
  .sk-hero-stats { display: none; }
}