/* Skeleton Loader Styles */
.skeleton-loader {
    --skeleton-bg: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    --skeleton-bg-dark: linear-gradient(90deg, #2d2d2d 25%, #3d3d3d 50%, #2d2d2d 75%);
}

[data-bs-theme="dark"] .skeleton-loader {
    --skeleton-bg: var(--skeleton-bg-dark);
}

/* Base skeleton animation */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Skeleton line */
.skeleton-line {
    height: 16px;
    border-radius: 4px;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    margin-bottom: 8px;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

/* Skeleton text */
.skeleton-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Skeleton card */
.skeleton-card {
    background: var(--bs-card-bg, #fff);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.skeleton-title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Skeleton avatar */
.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* Skeleton image */
.skeleton-image {
    height: 200px;
    border-radius: 8px;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Skeleton table */
.skeleton-table {
    width: 100%;
}

.skeleton-table-header,
.skeleton-table-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
}

.skeleton-table-header {
    border-bottom-width: 2px;
}

.skeleton-cell {
    flex: 1;
    height: 20px;
    border-radius: 4px;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Skeleton stat */
.skeleton-stat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bs-card-bg, #fff);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.skeleton-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.skeleton-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Skeleton chart */
.skeleton-chart {
    padding: 20px;
    background: var(--bs-card-bg, #fff);
    border-radius: 8px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.skeleton-chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 20px;
}

.skeleton-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    min-height: 20px;
}

.skeleton-chart-axis {
    height: 2px;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Width utilities */
.w-33 { width: 33.333% !important; }
.w-66 { width: 66.666% !important; }

/* Loading overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

[data-bs-theme="dark"] .loading-overlay {
    background: rgba(30, 30, 30, 0.8);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bs-border-color, #e9ecef);
    border-top-color: var(--bs-primary, #009ef7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fade transitions */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}