/* Loading spinner og overlays */

.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-xl { width: 48px; height: 48px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading overlay (full-section) */
.loading-overlay {
    position: relative;
    min-height: 200px;
}
.loading-overlay.is-loading::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 1;
}
.loading-overlay.is-loading .loading-indicator {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.loading-indicator {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.loading-overlay.is-loading .loading-indicator { display: inline-flex; }

/* Inline button-spinner */
.btn .spinner { width: 14px; height: 14px; border-width: 2px; }
.btn[data-loading="true"] { position: relative; pointer-events: none; }
.btn[data-loading="true"] > *:not(.spinner) { opacity: 0.4; }

/* Skeleton row */
.skeleton-row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}
.skeleton-cell {
    height: 14px;
    flex: 1;
    background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-card) 50%, var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-xs);
}
.skeleton-cell-sm { max-width: 80px; }
.skeleton-cell-md { max-width: 160px; }