/**
 * PyBLOCK Pool - Block Template Visualizer Styles
 * Enhanced styles for transaction visualization
 */

/* Search Input Enhancement */
#txid-search {
    transition: all 0.3s ease;
}

#txid-search:focus {
    box-shadow: 0 0 40px var(--color-primary), 0 0 80px var(--color-cyan);
    border-color: var(--color-cyan);
    outline: none;
    transform: scale(1.02);
}

#txid-search::placeholder {
    color: rgba(0, 255, 65, 0.5);
}

/* Block Container Scrollbar */
#block-container::-webkit-scrollbar {
    width: 12px;
}

#block-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-primary);
}

#block-container::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
}

#block-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
    box-shadow: 0 0 20px var(--color-accent);
}

/* Transaction Squares */
.tx-block-square {
    position: relative;
    animation: txSquareAppear 0.3s ease-out;
}

@keyframes txSquareAppear {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Color Legend Items */
.legend-item {
    transition: all 0.3s ease;
}

.legend-item:hover {
    transform: scale(1.1);
    filter: brightness(1.3);
}

/* Sort Dropdown Enhancement */
#block-sort {
    transition: all 0.3s ease;
}

#block-sort:hover {
    box-shadow: 0 0 20px var(--color-primary);
    border-color: var(--color-accent);
}

#block-sort:focus {
    outline: none;
    box-shadow: 0 0 30px var(--color-cyan);
    border-color: var(--color-cyan);
}

/* Stat Boxes in Detailed Stats */
.stat-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 40px currentColor !important;
}

/* Loading State for Block Container */
#block-container.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Highlight Animation */
@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 40px white, 0 0 80px var(--color-accent);
    }
    50% {
        box-shadow: 0 0 60px white, 0 0 120px var(--color-accent);
    }
}

.tx-highlighted {
    animation: highlightPulse 2s ease-in-out infinite;
}

/* Info Panel Enhancement */
#hover-info {
    animation: infoSlideUp 0.3s ease-out;
}

@keyframes infoSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Search Info Pill */
#search-info {
    transition: all 0.3s ease;
    animation: searchInfoBounce 0.5s ease-out;
}

@keyframes searchInfoBounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #block-container {
        height: 400px;
        max-height: 400px;
    }

    .tx-block-square {
        /* Slightly larger on mobile for better touch targets */
        min-width: 6px !important;
        min-height: 6px !important;
    }

    #hover-info {
        padding: 15px;
    }

    #hover-info > div {
        font-size: 1rem !important;
    }
}

/* Accessibility */
.tx-block-square:focus {
    outline: 3px solid white;
    outline-offset: 2px;
    z-index: 1001;
}

#txid-search:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    #block-container {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .tx-block-square {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}