/**
 * Needibi Serve — Unified skeleton loading (no spinners)
 * Matches dashboard design system: Inter scale, #2058e6 tint, 8px radius
 */

@keyframes adm-skel-shimmer {
    0% { background-position: -480px 0; }
    100% { background-position: 480px 0; }
}

.adm-skel {
    background: linear-gradient(90deg, #eef4ff 0%, #e5e7eb 45%, #eef4ff 90%);
    background-size: 960px 100%;
    animation: adm-skel-shimmer 1.35s ease-in-out infinite;
    border-radius: 6px;
}

.dark .adm-skel {
    background: linear-gradient(90deg, #1e293b 0%, #334155 45%, #1e293b 90%);
    background-size: 960px 100%;
}

@media (prefers-reduced-motion: reduce) {
    .adm-skel { animation: none; background: #e5e7eb; }
    .dark .adm-skel { background: #334155; }
}

/* ── Stat cards ── */
.adm-skel-stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .adm-skel-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .adm-skel-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .adm-skel-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.adm-skel-stat-card,
.adm-skel-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    min-height: 88px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.dark .adm-skel-stat-card,
.dark .adm-skel-stat {
    background: #102334;
    border-color: #24364d;
}

.adm-skel-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.adm-skel-stat-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.adm-skel-stat-label { height: 12px; width: 72px; }
.adm-skel-stat-val { height: 20px; width: 48px; }

/* ── Table rows ── */
.adm-skel-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.dark .adm-skel-table-wrap {
    border-color: #24364d;
    background: #102334;
}

.adm-skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f8;
}

.dark .adm-skel-row { border-bottom-color: #24364d; }

.adm-skel-row:last-child { border-bottom: none; }

.adm-skel-cell {
    height: 14px;
    border-radius: 4px;
}

.adm-skel-cell.w1 { width: 30px; flex-shrink: 0; }
.adm-skel-cell.w2 { width: 120px; flex-shrink: 0; }
.adm-skel-cell.w3 { width: 80px; flex-shrink: 0; }
.adm-skel-cell.w4 { flex: 1; min-width: 60px; }

/* ── List / form ── */
.adm-skel-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.adm-skel-li-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-skel-li-text {
    height: 14px;
    flex: 1;
    max-width: 200px;
}

.adm-skel-block {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.dark .adm-skel-block {
    background: #0f1f30;
    border-color: #24364d;
}

.adm-skel-line {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.adm-skel-line:last-child { margin-bottom: 0; }
.adm-skel-line.w60 { width: 60%; }
.adm-skel-line.w80 { width: 80%; }
.adm-skel-line.w100 { width: 100%; }

.adm-skel-form { display: flex; flex-direction: column; gap: 16px; }
.adm-skel-form-label { height: 12px; width: 100px; margin-bottom: 6px; }
.adm-skel-form-input { height: 44px; width: 100%; border-radius: 8px; }

.adm-skel-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; }
.adm-skel-avatar { width: 80px; height: 80px; border-radius: 50%; }
.adm-skel-name { height: 18px; width: 140px; }
.adm-skel-badge { height: 14px; width: 80px; margin-top: 4px; }
.adm-skel-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; width: 100%; }
.adm-skel-profile-grid .adm-skel-field { height: 36px; border-radius: 8px; }

.adm-skel-perm-group { padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 12px; }
.dark .adm-skel-perm-group { border-color: #24364d; }
.adm-skel-perm-title { height: 16px; width: 140px; margin-bottom: 12px; }
.adm-skel-perm-item { height: 14px; width: 100%; margin-bottom: 8px; border-radius: 4px; }

.adm-skel-form-textarea { height: 80px; width: 100%; border-radius: 8px; }

.adm-skel-report {
    padding: 2rem 1rem;
}

.adm-skel-report .adm-skel-stat-grid {
    margin-bottom: 1.5rem;
}

.adm-skel-text {
    display: inline-block;
    height: 14px;
    width: 80px;
    border-radius: 4px;
    vertical-align: middle;
}

/* ── Full-page / AJAX overlay (no spinner) ── */
.adm-skel-overlay-panel {
    width: min(420px, 92vw);
    padding: 1.25rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

.dark .adm-skel-overlay-panel {
    background: #102334;
    border-color: #24364d;
}

.adm-skel-overlay-panel .adm-skel-line { margin-bottom: 12px; }

#ajax-loading .adm-skel-overlay {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 280px;
}

.adm-skel-loading-zone {
    min-height: 48px;
}

.adm-skel-loading-zone--table { min-height: 200px; }

.adm-skel-loading-zone--stats { min-height: 88px; }

/* Hide legacy spinners project-wide when skeleton is active */
.adm-skel-active .fa-spin,
.adm-skel-active .animate-spin,
.adm-skel-active .skel-spinner {
    display: none !important;
}