/**
 * GIPIX — скелетоны загрузки (shimmer), токены .gipix-*
 */

@keyframes gipix-sk-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Заметнее на светлом SaaS-фоне: раньше сливалось с #f3f4f6 / белым каркасом */
.gipix-sk {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-chip);
    background: linear-gradient(165deg, #e2e8f0 0%, #cbd5e1 55%, #e5e7eb 100%);
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.gipix-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(var(--gipix-primary-rgb), 0.12) 38%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(var(--gipix-primary-rgb), 0.12) 62%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: gipix-sk-shimmer 1.05s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .gipix-sk::after {
        animation: none;
        transform: none;
        opacity: 0.35;
    }
}

.gipix-sk-line {
    display: block;
    height: 0.65rem;
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
}

.gipix-sk-line--sm {
    height: 0.5rem;
}

.gipix-sk-line--lg {
    height: 0.85rem;
}

.gipix-sk-line--short {
    width: 42%;
}

/* Ширины без inline style (макрос Jinja + HTML/CSS линтеры) */
.gipix-sk-line--q0 {
    width: 88%;
}
.gipix-sk-line--q1 {
    width: 72%;
}
.gipix-sk-line--q2 {
    width: 64%;
}
.gipix-sk-line--q3 {
    width: 54%;
}
.gipix-sk-line--q4 {
    width: 76%;
}
.gipix-sk-line--q5 {
    width: 70%;
}
.gipix-sk-line--q6 {
    width: 82%;
}
.gipix-sk-line--q7 {
    width: 60%;
}

.gipix-sk-line--chart-lead {
    width: 38%;
    margin-bottom: 10px;
    display: block;
}

.gipix-sk-line--list-label {
    width: 34%;
    display: block;
}

.gipix-sk-line--list-body {
    width: 92%;
    margin-top: 6px;
    display: block;
}

.gipix-sk-line--circle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.gipix-sk-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gipix-sk-stack--tight {
    gap: 0.45rem;
}

/* Полноэкранный оверлей первой отрисовки (#pageLoading) */
.gipix-page-skeleton {
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    bottom: 0;
    padding: clamp(16px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    pointer-events: none;
}

.gipix-page-skeleton__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 720px;
}

.gipix-page-skeleton__toolbar .gipix-sk-line:not(.gipix-sk-line--circle) {
    max-width: 200px;
}

.gipix-page-skeleton__toolbar-spacer {
    flex: 1 1 auto;
    min-width: var(--space-sm);
}

.gipix-page-skeleton__card {
    flex: 1 1 auto;
    max-width: min(960px, 100%);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(var(--gipix-primary-rgb), 0.14);
    box-shadow: var(--shadow-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gipix-page-skeleton__rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.gipix-page-skeleton__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.gipix-page-skeleton__row .gipix-sk-line--circle {
    width: 1.75rem;
    height: 1.75rem;
}

.gipix-page-skeleton__row .gipix-sk-line:last-child {
    flex: 1 1 auto;
}

/* Полноэкранный #pageLoading: без бесконечного shimmer (repaint вместе с fixed-сайдбаром/шапкой).
   Дублирует критический inline в templates/base.html — держать в sync при правках. */
.page-loading {
    contain: paint;
    isolation: isolate;
}

#pageLoading .gipix-sk::after {
    animation: none;
    transform: none;
    opacity: 0.22;
}

/* Модалки / встраиваемые блоки */
.gipix-modal-skeleton {
    padding: 0.15rem 0 0.25rem;
}

/* Универсальные плейсхолдеры (JS: window.gipixSkeleton) */
.gipix-sk-panel {
    padding: var(--space-md);
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--gipix-border);
    box-shadow: var(--shadow-md);
    min-height: 5rem;
}

.gipix-sk-centered {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.gipix-sk-block {
    border-radius: var(--radius-card);
    background: var(--gipix-surface);
    border: 1px solid var(--gipix-border);
}

.gipix-sk-compact {
    min-height: 3rem;
}

.gipix-sk-chart {
    min-height: 200px;
    padding: var(--space-sm);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--gipix-primary-rgb), 0.12);
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}

.gipix-sk-chart__area {
    height: 140px;
    width: 100%;
    border-radius: var(--radius-chip);
    margin-top: var(--space-xs);
}

.gipix-sk-ul .gipix-sk-list-row {
    list-style: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gipix-gray-200);
}

.gipix-sk-ul .gipix-sk-list-row:last-child {
    border-bottom: none;
}

.gipix-sk-table-loading td {
    border-color: transparent;
    vertical-align: middle;
}

.gipix-sk-btn-pulse {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    vertical-align: -0.2em;
    border: 1px solid rgba(var(--gipix-primary-rgb), 0.2);
}

.gipix-sk-kpi-pulse {
    display: inline-block;
    min-width: 3.25rem;
    height: 1.35rem;
    border-radius: 6px;
    vertical-align: middle;
    border: 1px solid rgba(var(--gipix-primary-rgb), 0.18);
}

/* --- HTMX / общий async: плейсхолдер поверх #gipix-content-area --- */
html.gipix-htmx-content-loading #gipix-content-area {
    position: relative;
    pointer-events: none;
    min-height: min(52vh, 440px);
}

html.gipix-htmx-content-loading #gipix-content-area::after {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 30;
    border-radius: var(--radius-card);
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--gipix-border);
    box-shadow: var(--shadow-md);
    background-image:
        linear-gradient(var(--gipix-gray-200), var(--gipix-gray-200)),
        linear-gradient(var(--gipix-gray-200), var(--gipix-gray-200)),
        linear-gradient(var(--gipix-gray-200), var(--gipix-gray-200)),
        linear-gradient(var(--gipix-gray-200), var(--gipix-gray-200));
    background-size:
        min(48%, 280px) 12px,
        min(72%, 420px) 12px,
        min(36%, 200px) 12px,
        min(88%, 560px) 12px;
    background-position:
        20px 28px,
        20px 52px,
        20px 76px,
        20px 116px;
    background-repeat: no-repeat;
    animation: gipix-sk-block-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes gipix-sk-block-pulse {
    0% {
        opacity: 0.88;
    }
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.gipix-htmx-content-loading #gipix-content-area::after {
        animation: none;
    }
}

/* Пока не подтянулись стили фрагмента — без FOUC */
#gipix-content-area.gipix-htmx-await-styles {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

#gipix-content-area.gipix-htmx-styles-reveal {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease-out, visibility 0s linear 0s;
}