/**
 * 共用 skeleton loading（shimmer 占位）
 * 給 project_analysis / completed_property_analysis / index.html 各 tab 共用
 */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-border-light, #e5e2dc) 25%,
        rgba(255, 255, 255, 0.85) 50%,
        var(--color-border-light, #e5e2dc) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    display: block;
}

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

/* 高度 preset：對齊現有元件實際高度 */
.skeleton-stat-card  { height: 96px; }
.skeleton-chart-360  { height: 360px; }
.skeleton-chart-400  { height: 400px; }
.skeleton-chart-500  { height: 500px; }
.skeleton-table      { height: 320px; }
.skeleton-permit     { height: 140px; }
.skeleton-pivot      { height: 280px; }

.skeleton-metric-num {
    height: 1.6rem;
    width: 60%;
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}

.skeleton-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* table 內當作整 row 的 skeleton */
tr.skeleton-row td {
    padding: 12px;
    border: none;
    background: transparent;
}

tr.skeleton-row td .skeleton {
    height: 18px;
    width: 100%;
}

/* chart-container 內 skeleton 跟 canvas 重疊用：絕對定位 + Chart.js afterRender plugin 自動清掉 */
.chart-container,
.chart-wrapper {
    position: relative;
}

.chart-container > .skeleton,
.chart-wrapper > .skeleton {
    position: absolute;
    inset: 0;
    width: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}

/* 觸控裝置減少動畫負擔 */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--color-border-light, #e5e2dc);
    }
}