/**
 * Trending Crypto Tables - OPTIMIZED VERSION
 * Ultra hızlı trending coin tabloları
 */

/* ============================================ */
/* 🚀 OPTIMIZED CONTAINER & BASE STYLES 🚀 */
/* ============================================ */

/* Container ve genel stil - Optimized */
.crypto-trending-tables-container {
    padding: 15px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* CSS Containment */
    contain: layout style;
}

/* OPTIMIZED Logo Stili */
.crypto-coin-table-container[data-table-id="trending-coins"] .coin-logo,
.crypto-coin-table-container .coin-logo,
.crypto-coin-table .coin-logo,
.coin-logo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin-right: 12px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2d3748;
    /* Optimized shadow */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* GPU Acceleration */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    contain: layout style;
}

/* Coin logo resmi - Optimized */
.crypto-coin-table-container[data-table-id="trending-coins"] .coin-logo-img,
.crypto-coin-table-container .coin-logo-img,
.crypto-coin-table .coin-logo-img,
.coin-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    /* Image rendering optimize */
    image-rendering: auto;
    -webkit-user-select: none;
    user-select: none;
    /* Hızlı image loading */
    loading: eager;
    decode: sync;
    /* Instant visibility */
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

/* Default coin logo - Optimized */
.crypto-coin-table-container[data-table-id="trending-coins"] .default-coin-logo,
.crypto-coin-table-container .default-coin-logo,
.crypto-coin-table .default-coin-logo,
.default-coin-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Simplified gradient */
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-weight: bold;
    font-size: 18px !important;
    box-sizing: border-box;
    /* Font optimize */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* OPTIMIZED Text Styles */
.crypto-coin-table-container[data-table-id="trending-coins"] .coin-tag,
.crypto-coin-table-container .coin-tag,
.crypto-coin-table .coin-tag,
.coin-tag {
    font-size: 1.0rem !important;
    color: #8d97a5;
    margin-top: 2px;
    /* Font optimize */
    -webkit-font-smoothing: antialiased;
}

.crypto-coin-table-container[data-table-id="trending-coins"] .coin-name,
.crypto-coin-table-container .coin-name,
.crypto-coin-table .coin-name,
.coin-name {
    font-size: 1.05rem !important;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    /* Font optimize */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================ */
/* 🚀 ULTRA FAST TABLE WRAPPER 🚀 */
/* ============================================ */

/* Tablo wrapper - Ultra optimized */
.crypto-trending-table-wrapper {
    background: #11131A;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    /* Simplified shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Backdrop-filter kaldırıldı - ağır */
    border: none;
    max-width: 100%;
    /* GPU Acceleration */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    /* CSS Containment */
    contain: layout style paint;
}

/* OPTIMIZED Header */
.crypto-trending-table-header {
    padding: 8px 20px 4px;
    background: #11131A;
    color: #fff;
    border-bottom: none;
    margin-bottom: 0;
    contain: layout style;
}

.crypto-trending-table-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    /* Font optimize */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Simplified title decoration */
.crypto-trending-table-title:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #3a7bd5, #00d2ff);
    border-radius: 3px;
    will-change: transform;
}

/* ============================================ */
/* 🚀 BLAZING FAST TABLE STYLES 🚀 */
/* ============================================ */

/* ULTRA FAST COIN DROP ANIMATION */
.crypto-coin-table tbody tr {
    /* Hızlı coin düşme animasyonu */
    animation: fastCoinDrop 0.3s ease-out forwards;
    animation-delay: calc(var(--row-index, 0) * 0.05s);
}

.crypto-coin-table tbody tr:nth-child(1) { --row-index: 0; }
.crypto-coin-table tbody tr:nth-child(2) { --row-index: 1; }
.crypto-coin-table tbody tr:nth-child(3) { --row-index: 2; }
.crypto-coin-table tbody tr:nth-child(4) { --row-index: 3; }
.crypto-coin-table tbody tr:nth-child(5) { --row-index: 4; }

@keyframes fastCoinDrop {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobilde daha da hızlı */
@media (max-width: 768px) {
    .crypto-coin-table tbody tr {
        animation-duration: 0.2s;
        animation-delay: calc(var(--row-index, 0) * 0.03s);
    }
}

/* Table content - Optimized */
.crypto-trending-table-content {
    padding: 0;
    margin-top: 5px;
    flex-grow: 1;
    height: 100%;
    overflow: auto;
    max-width: 100%;
    /* Scroll optimize */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    contain: layout style;
}

/* Table - Ultra fast */
.crypto-trending-table {
    margin-bottom: 0;
    margin-top: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    /* Table layout optimize */
    table-layout: fixed;
    contain: layout style;
}

/* Hidden thead - No performance impact */
.crypto-trending-table thead {
    height: 0;
    visibility: hidden;
    display: none;
}

/* OPTIMIZED Table cells */
.crypto-trending-table th {
    font-weight: 500;
    color: #8d97a5;
    border-top: none;
    padding: 12px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    /* Font optimize */
    -webkit-font-smoothing: antialiased;
}

.crypto-trending-table td {
    padding: 4px 3px;
    vertical-align: middle;
    border: none !important;
    font-size: 0.7rem;
    text-align: left;
    /* Font optimize */
    -webkit-font-smoothing: antialiased;
}

/* LIGHTNING FAST Rows */
.crypto-trending-table tr {
    height: 55px;
    /* Simplified transition */
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    border: none !important;
    margin-bottom: 2px;
    /* GPU layer */
    will-change: background-color;
    contain: layout style;
}

.crypto-trending-table tr:last-child {
    border-bottom: none;
}

/* Micro hover effect */
.crypto-trending-table tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ============================================ */
/* 🚀 OPTIMIZED PRICE & INFO STYLES 🚀 */
/* ============================================ */

/* Price column - Fast */
.price-column {
    text-align: right !important;
    font-weight: 600;
    contain: layout style;
}

.price-value {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
    -webkit-font-smoothing: antialiased;
}

/* Coin info - Optimized */
.coin-info {
    display: flex;
    align-items: center;
    gap: 8px;
    contain: layout style;
}

/* Rank cell - Fast */
.rank-logo-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    contain: layout style;
}

.rank-logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-number {
    font-weight: 600;
    color: #8d97a5;
    font-size: 0.9rem;
    min-width: 20px;
    -webkit-font-smoothing: antialiased;
}

/* ============================================ */
/* 🚀 PERFORMANCE OPTIMIZED RESPONSIVE 🚀 */
/* ============================================ */

/* Tablet optimization */
@media (max-width: 768px) {
    .crypto-trending-table tr {
        height: 50px;
        /* Faster transition */
        transition: background-color 0.1s ease;
    }
    
    .crypto-trending-table th,
    .crypto-trending-table td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .coin-logo {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }
    
    .price-value {
        font-size: 0.8rem;
    }
}

/* Mobile optimization */
@media (max-width: 576px) {
    .crypto-trending-table tr {
        height: 45px;
        transition: none; /* Remove transitions on mobile */
    }
    
    .crypto-trending-table th,
    .crypto-trending-table td {
        padding: 4px 2px;
        font-size: 0.7rem;
    }
    
    .coin-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }
    
    .crypto-trending-table-wrapper {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }
    
    /* Remove hover effects on mobile */
    .crypto-trending-table tr:hover {
        background-color: transparent;
    }
}

/* ============================================ */
/* 🚀 THEME OPTIMIZATIONS 🚀 */
/* ============================================ */

/* Dark theme - Default optimized */
.crypto-trending-tables-container.dark-theme {
    /* Already optimized above */
}

/* Light theme - Optimized */
.crypto-trending-tables-container.light-theme .crypto-trending-table-wrapper {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.crypto-trending-tables-container.light-theme .crypto-trending-table tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.crypto-trending-tables-container.light-theme .coin-name {
    color: #1a1a1a;
}

.crypto-trending-tables-container.light-theme .price-value {
    color: #1a1a1a;
}

/* ============================================ */
/* 🚀 GPU ACCELERATION HELPERS 🚀 */
/* ============================================ */

/* Force GPU layers for performance */
.crypto-trending-table,
.crypto-trending-table-wrapper,
.coin-logo,
.crypto-trending-table tr {
    transform: translate3d(0, 0, 0);
}

/* Optimize scrolling */
.crypto-trending-table-content {
    transform: translate3d(0, 0, 0);
    -webkit-overflow-scrolling: touch;
}

/* Prevent layout thrashing */
.crypto-trending-table * {
    box-sizing: border-box;
}

/* Remove unused complex styles */
.crypto-trending-table tr:after,
.chain-logo-container,
.swiper-related-styles {
    display: none;
}

/* HIZLI YÜKLEME İYİLEŞTİRMELERİ */
.crypto-coin-table-container.loading .crypto-coin-table tbody tr {
    animation: none; /* Yükleme sırasında animasyon kapat */
    opacity: 0.7;
}

.crypto-coin-table-container.loaded .crypto-coin-table tbody tr {
    animation: fastCoinDrop 0.3s ease-out forwards;
}

/* İlk 3 coin için öncelikli yükleme */
.crypto-coin-table tbody tr:nth-child(-n+3) {
    animation-delay: 0s !important; /* İlk 3 coin anında */
    opacity: 1;
}