/* =============================================================================
   TOP TOKENS WIDGET STYLES
   Dedicated styles for the reusable top tokens widget partial
   ============================================================================= */

/* Token table styles - unified across all devices */
.token-row .token-logo {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

/* Token logo spin animation */
.token-logo {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

/* Left align all table headers */
#topTokensContainer thead th {
    text-align: left !important;
}

.token-row:hover .token-logo {
    animation: coinFlip3D 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes coinFlip3D {
    0% {
        transform: perspective(200px) rotateY(0deg) rotateX(0deg);
        filter: brightness(1);
    }
    5% {
        transform: perspective(200px) rotateY(90deg) rotateX(5deg);
        filter: brightness(1.1);
    }
    10% {
        transform: perspective(200px) rotateY(180deg) rotateX(10deg);
        filter: brightness(0.9);
    }
    15% {
        transform: perspective(200px) rotateY(270deg) rotateX(15deg);
        filter: brightness(1.1);
    }
    20% {
        transform: perspective(200px) rotateY(360deg) rotateX(20deg);
        filter: brightness(1);
    }
    25% {
        transform: perspective(200px) rotateY(450deg) rotateX(15deg);
        filter: brightness(1.1);
    }
    30% {
        transform: perspective(200px) rotateY(540deg) rotateX(10deg);
        filter: brightness(0.9);
    }
    35% {
        transform: perspective(200px) rotateY(630deg) rotateX(5deg);
        filter: brightness(1.1);
    }
    40% {
        transform: perspective(200px) rotateY(720deg) rotateX(0deg);
        filter: brightness(1);
    }
    50% {
        transform: perspective(200px) rotateY(900deg) rotateX(-5deg);
        filter: brightness(0.95);
    }
    60% {
        transform: perspective(200px) rotateY(1080deg) rotateX(-3deg);
        filter: brightness(1.05);
    }
    70% {
        transform: perspective(200px) rotateY(1260deg) rotateX(-2deg);
        filter: brightness(0.98);
    }
    80% {
        transform: perspective(200px) rotateY(1440deg) rotateX(-1deg);
        filter: brightness(1.02);
    }
    90% {
        transform: perspective(200px) rotateY(1620deg) rotateX(-0.5deg);
        filter: brightness(0.99);
    }
    95% {
        transform: perspective(200px) rotateY(1710deg) rotateX(0deg);
        filter: brightness(1.01);
    }
    100% {
        transform: perspective(200px) rotateY(1800deg) rotateX(0deg);
        filter: brightness(1);
    }
}

/* Mobile responsive styles for top tokens widget */
@media (max-width: 768px) {
    .token-rank-cell.text-center {
        display: none !important;
    }

    /* Allow volume text on mobile for compact display */
    .text-muted.ms-1 {
        font-size: 0.55rem !important;
    }

    /* Hide badges on mobile */
    .badge.text-decoration-none.me-1 {
        display: none !important;
    }

    /* Make token info cell more compact on mobile - removed width override */
    .token-info-cell .fw-bold {
        font-size: 0.65rem !important;
    }

    .token-info-cell .text-muted {
        font-size: 0.6rem !important;
    }

    /* Reduce token logo size on mobile */
    #topTokensContainer .token-logo {
        width: 28px !important;
        height: 28px !important;
    }

    /* Make symbol text more compact */
    #topTokensContainer .fw-bold {
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

    /* Specific styling for chart percentage text below SVGs on mobile */
    #topTokensContainer .token-charts-mobile .fw-bold {
        font-size: 10px !important;
    }

    /* Reduce market cap font size */
    #topTokensContainer .text-muted {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    /* Force small font size for mobile token prices */
    .token-price-cell,
    .token-price-cell .fw-bold,
    .token-price-cell span {
        font-size: 0.75rem !important;
    }

    /* Shrink emoji size to match market cap text - target mobile token table specifically */
    .token-row span[title*="performance"],
    .flex-grow-1 span[title*="performance"],
    td .flex-grow-1 span {
        font-size: 0.7rem !important;
    }

    /* Force table layout fixed for mobile token tables with custom widths */
    #topTokensContainer table,
    .token-table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* Force full width on mobile for table container and responsive wrapper */
    #topTokensContainer {
        width: 100% !important;
        max-width: 100% !important;
    }

    #topTokensContainer .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #topTokensContainer .card-body {
        padding: 0 !important;
    }

    /* Mobile-specific column widths - optimized to fill space and reduce white space */
    #topTokensContainer .token-info-mobile {
        width: 35% !important;
    }

    #topTokensContainer .token-volume-mobile {
        width: 17% !important;
    }

    #topTokensContainer .token-price-mobile {
        width: 10% !important;
    }

    #topTokensContainer .token-charts-mobile {
        width: 18% !important;
    }

    #topTokensContainer .token-sentiment-mobile {
        width: 6% !important;
    }

    /* Mobile cell styling - consistent padding and alignment */
    #topTokensContainer .token-info-mobile,
    #topTokensContainer .token-charts-mobile,
    #topTokensContainer .token-sentiment-mobile {
        padding: 4px 2px !important;
        vertical-align: middle !important;
    }

    /* Volume display formatting - left aligned */
    #topTokensContainer .token-volume-mobile {
        padding: 0 !important;
        vertical-align: bottom !important;
        text-align: left !important;
    }

    /* Price mobile - align price to bottom and left */
    .token-price-mobile {
        padding: 4px 2px !important;
        vertical-align: bottom !important;
        text-align: left !important;
    }

    /* Allow table headers to show */
    #topTokensContainer thead th {
        display: table-cell !important;
        visibility: visible !important;
        height: auto !important;
        padding: 8px 4px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: left !important;
    }

    /* Ensure full height utilization in mobile cells */
    #topTokensContainer .token-info-mobile .d-flex,
    #topTokensContainer .token-volume-mobile .d-flex,
    #topTokensContainer .token-price-mobile .d-flex,
    #topTokensContainer .token-charts-mobile .d-flex,
    #topTokensContainer .token-sentiment-mobile .d-flex {
        height: 100% !important;
        min-height: 18px !important;
    }
}