/* skeleton.css — layout placeholders while data/pages load
   Version: 1.0.0 */

.sk {
    display: block;
    background: linear-gradient(90deg, #eef2f7 20%, #f8fafc 40%, #eef2f7 60%);
    background-size: 240% 100%;
    animation: sk-shimmer 1.15s linear infinite;
    border-radius: 8px;
}
.sk-line { height: 12px; width: 100%; }
.sk-label { height: 10px; width: 88px; margin-bottom: 8px; }
.sk-input { height: 38px; width: 100%; margin-bottom: 12px; }
.sk-banner { height: 48px; width: 100%; border-radius: 12px; margin-bottom: 1.25rem; }
.sk-logo { width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; }
.sk-stat { height: 84px; border-radius: 12px; }
.sk-w-25 { width: 25%; }
.sk-w-30 { width: 30%; }
.sk-w-40 { width: 40%; }
.sk-w-50 { width: 50%; }
.sk-w-70 { width: 70%; }
.sk-mb-2 { margin-bottom: 0.5rem; }
.sk-mb-3 { margin-bottom: 0.75rem; }
.sk-mt-3 { margin-top: 0.75rem; }

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

html[data-bs-theme="dark"] .sk {
    background: linear-gradient(90deg, #1e293b 20%, #334155 40%, #1e293b 60%);
    background-size: 240% 100%;
}

#kt_content,
#kt_content_container {
    position: relative;
}
.page-skeleton {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 20;
    min-height: calc(100vh - 140px);
    padding: 0 0 2rem;
    background: var(--refresh-canvas, #f8fafc);
    overflow: hidden;
    pointer-events: none;
}
html[data-bs-theme="dark"] .page-skeleton {
    background: var(--refresh-canvas, #0b1220);
}
html.nav-pending .page-skeleton {
    display: block;
}
.page-skeleton__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.page-skeleton__card {
    background: var(--refresh-card, #fff);
    border: 1px solid var(--refresh-hairline, #e2e8f0);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
}
html[data-bs-theme="dark"] .page-skeleton__card {
    background: #111827;
    border-color: #1e293b;
}
.page-skeleton__row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 1.6fr 1.4fr 0.7fr 0.8fr 0.7fr;
    gap: 12px;
    padding: 0.85rem 0;
    border-bottom: 1px solid #e2e8f0;
}
html[data-bs-theme="dark"] .page-skeleton__row {
    border-bottom-color: #1e293b;
}
@media (max-width: 991.98px) {
    .page-skeleton__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-skeleton__row { grid-template-columns: 1fr 1fr; }
}

/* Order form overlay → skeleton layout */
.form-container > .form-loader {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    background: var(--refresh-canvas, #f8fafc) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-bs-theme="dark"] .form-container > .form-loader {
    background: var(--refresh-canvas, #0b1220) !important;
}
.order-skeleton {
    width: 100%;
}
.order-skeleton .card {
    border: 1px solid var(--refresh-hairline, #e2e8f0);
    border-radius: 12px;
    box-shadow: none;
    background: var(--refresh-card, #fff);
}
html[data-bs-theme="dark"] .order-skeleton .card {
    background: #111827;
    border-color: #1e293b;
}

@media (prefers-reduced-motion: reduce) {
    .sk { animation: none; }
    html.nav-pending::before { animation: none; width: 100%; opacity: .55; }
}