/* Performance optimizations for Tabler CSS */

/* 1. Reduce repaints and reflows */
.card, .table, .btn {
    will-change: auto;
    transform: translateZ(0);
}

/* 2. Optimize animations */
.card-hover {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 3. Optimize table rendering */
.table-responsive {
    contain: layout style;
}

.table tbody tr {
    contain: layout;
}

/* 4. Reduce DOM complexity for large lists */
.planet-row {
    contain: layout style;
}

/* 5. Optimize chart containers */
.chart-container {
    contain: layout;
    transform: translateZ(0);
}

/* 6. Critical CSS inlining for above-the-fold content */
.navbar, .page-header {
    contain: layout style;
}

/* 7. Optimize badge rendering */
.badge {
    contain: layout;
    font-variant-numeric: tabular-nums;
}

/* 8. Reduce paint complexity */
.avatar {
    contain: layout;
    backface-visibility: hidden;
}

/* 9. Optimize spinner animations */
.spinner-border {
    contain: layout;
    will-change: transform;
}

/* 10. Memory-efficient gradients */
.bg-gradient {
    background-attachment: local;
}

/* 11. Optimize dark theme transitions */
[data-bs-theme="dark"] * {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* 12. Reduce layout thrashing */
.container-xl {
    contain: layout;
}

/* 13. Optimize pagination */
.pagination {
    contain: layout;
}

.page-link {
    contain: layout;
}

/* 14. Critical loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    contain: layout;
}

/* 17. Color grid optimizations */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
    gap: 12px;
    align-content: start;
    justify-items: center;
}

.color-item {
    width: 120px;
    max-width: 120px;
    contain: layout;
}

.dynamic-height-grid {
    max-height: calc(100vh - 400px);
    min-height: 200px;
    overflow-y: auto;
}

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

/* 15. Optimize form controls */
.form-control, .form-select {
    contain: layout;
}

/* 16. Reduce repaint on hover states */
.btn:hover, .nav-link:hover {
    contain: layout;
}