/* ═══ 🎨 Tooltips ═══ */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card-solid);
    color: var(--text);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    z-index: 1000;
}
[data-tooltip]:hover::after {
    opacity: 1;
}



/* ═══ 💀 Skeleton Loaders ═══ */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 0%,
        var(--border) 50%,
        var(--bg-elevated) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
}
.skeleton-card {
    height: 140px;
    border-radius: var(--radius-lg);
    margin-bottom: 0;
}
.skeleton-text {
    height: 14px;
    border-radius: 4px;
    margin: 4px 0;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 100%; }

/* Loading container that shows skeletons */
.loading-skeletons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}