/* ============================================================
   BuhayAhente — Phase 2.1 UI/UX Polish
   Component: Skeleton Loading
   ------------------------------------------------------------
   Builds on the base .ba-skeleton shimmer primitive already
   defined in design-system.css. This file adds ready-made
   composite skeleton blocks for the specific screens listed in
   the polish spec (stat cards, charts, activity lists, tables,
   vehicle cards, website-builder sections) so pages only need to
   drop in a wrapper div — no bespoke CSS per page.

   Zero layout shift: every skeleton block reserves the same
   height/spacing as its real counterpart.
   ============================================================ */

.ba-skeleton-line       { height: .85rem; margin-bottom: .5rem; }
.ba-skeleton-line.w-25  { width: 25%; }
.ba-skeleton-line.w-40  { width: 40%; }
.ba-skeleton-line.w-50  { width: 50%; }
.ba-skeleton-line.w-75  { width: 75%; }
.ba-skeleton-line.w-100 { width: 100%; }
.ba-skeleton-line:last-child { margin-bottom: 0; }

.ba-skeleton-circle { border-radius: 50%; flex-shrink: 0; }

/* ---- Stat card skeleton (dashboard overview) ---- */
.ba-skeleton-stat {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3, .75rem);
    height: 100%;
}
.ba-skeleton-stat .ba-skeleton-circle { width: 46px; height: 46px; border-radius: var(--ba-radius-md, .75rem); }
.ba-skeleton-stat .ba-skeleton-stat-lines { flex: 1; }
.ba-skeleton-stat .ba-skeleton-line:first-child { width: 60%; height: .7rem; }
.ba-skeleton-stat .ba-skeleton-line:last-child   { width: 40%; height: 1.4rem; margin-top: .4rem; }

/* ---- Chart skeleton ---- */
.ba-skeleton-chart {
    height: 260px;
    border-radius: var(--ba-radius-md, .75rem);
}

/* ---- Activity / list row skeleton ---- */
.ba-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--ba-border-soft, #eceef1);
}
.ba-skeleton-list-item:last-child { border-bottom: 0; }
.ba-skeleton-list-item .ba-skeleton-circle { width: 36px; height: 36px; }
.ba-skeleton-list-item .ba-skeleton-list-lines { flex: 1; }

/* ---- Table row skeleton ---- */
.ba-skeleton-table-row td {
    padding: .85rem .75rem;
    vertical-align: middle;
}

/* ---- Vehicle / media card skeleton (listings, website builder) ---- */
.ba-skeleton-media-card {
    border-radius: var(--ba-radius-lg, 1rem);
    overflow: hidden;
    background: var(--ba-surface, #fff);
    box-shadow: var(--ba-shadow-sm, 0 .125rem .375rem rgba(15,27,45,.06));
}
.ba-skeleton-media-card .ba-skeleton-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
}
.ba-skeleton-media-card .ba-skeleton-media-body { padding: .9rem 1rem 1.1rem; }
.ba-skeleton-media-card .ba-skeleton-media-buttons {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}
.ba-skeleton-media-card .ba-skeleton-media-buttons .ba-skeleton-line {
    height: 2rem;
    border-radius: var(--ba-radius-sm, .5rem);
    margin-bottom: 0;
}

/* ---- Widget card wrapper skeleton (website builder sections:
   About Me, Gallery, Testimonials, Featured Vehicle, QR Code,
   Contact Details) ---- */
.ba-skeleton-widget {
    border-radius: var(--ba-radius-lg, 1rem);
    padding: 1.25rem;
    background: var(--ba-surface, #fff);
    box-shadow: var(--ba-shadow-sm, 0 .125rem .375rem rgba(15,27,45,.06));
}
.ba-skeleton-widget .ba-skeleton-line.title { width: 45%; height: 1.1rem; margin-bottom: .9rem; }

/* Swap helper: pair a real element and its skeleton twin, e.g.
   <div class="ba-skeleton-wrap" data-loaded="false">
     <div class="ba-skeleton-state"> ...skeleton markup... </div>
     <div class="ba-real-state"> ...real content... </div>
   </div>
   skeleton.js toggles [data-loaded] to "true" once data resolves. */
.ba-skeleton-wrap[data-loaded="false"] .ba-real-state { display: none; }
.ba-skeleton-wrap[data-loaded="false"] .ba-skeleton-state { display: block; }
.ba-skeleton-wrap[data-loaded="true"] .ba-real-state {
    display: block;
    animation: ba-fade-slide-in .25s var(--ba-ease-out, ease) both;
}
.ba-skeleton-wrap[data-loaded="true"] .ba-skeleton-state { display: none; }