/* css/style.css */

/* 1. Kustomisasi Scrollbar untuk Panel Detail S-Box */
#sbox-details-container::-webkit-scrollbar {
    width: 6px;
}

#sbox-details-container::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 8px;
}

#sbox-details-container::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 8px;
}

#sbox-details-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* 2. Efek Transisi Halus Saat Output Muncul */
#output-section {
    animation: fadeInUp 0.6s ease-out forwards;
}

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

/* 3. Highlight Khusus untuk Mempermudah Pembacaan Bit Biner */
.font-mono {
    letter-spacing: 0.05em;
}

/* Efek zebra striping kustom pada tabel agar lebih empuk dipandang */
tbody tr:nth-child(even) {
    background-color: #f8fafc; /* slate-50 */
}

tbody tr:hover {
    background-color: #f1f5f9; /* slate-100 */
    transition: background-color 0.2s ease;
}