@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter/Inter-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('../../material_symbols/material_symbol_font.woff2') format('woff2');
}

body {
    font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Performance table row animations */

.tl-row { display: none; }
.tl-row.show { display: table-row; }
.tl-row.show td { animation: rowFadeIn 0.8s ease forwards; }
.tl-row.hide td { 
    animation: rowFadeOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}


.caller-row { display: none; }
.caller-row.show { display: table-row; }
.caller-row.show td { animation: rowFadeIn 0.8s ease forwards; }
.caller-row.hide td { 
    animation: rowFadeOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}
.scrollbar-stable {
    overflow-y: scroll;
    scrollbar-width: thin;
    padding-right: 6px;
}

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

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