/* =========================================
   1. Font Definitions
   Added 'font-display: swap' for better loading performance
   ========================================= */
@font-face {
    font-family: 'Bamini';
    src: url('../fonts/Bamini.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Paalai';
    src: url('../fonts/TAU-Paalai.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Achu';
    src: url('./fonts/TAU-Achu.ttf') format('truetype');
    font-display: swap;
}

/* =========================================
   2. General Typography & Layout
   ========================================= */
body {
    font-family: 'Paalai', 'Mukta Malar', sans-serif;
}

.font-bamini {
    font-family: 'Paalai', sans-serif;
    font-size: 1.1em;
    line-height: 1.4;
}

/* Utility: Group Hover (Tailwind-like behavior) */
.group:hover .group-hover\:block {
    display: block;
}

/* =========================================
   3. DataTables Styling
   ========================================= */
table.dataTable thead th {
    background: #f8fafc !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #475569;
}

/* =========================================
   4. Scrollbar Styling
   Optimized to remove duplicates and support Firefox
   ========================================= */

/* Firefox Standard (Works for global and custom classes) */
* {
    scrollbar-width: thin;
    scrollbar-color: #c7c7c7 #f1f1f1;
}

/* Chrome, Edge, Safari (Webkit) - Global Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Specific Custom Scrollbar Class */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Used the slate color from your snippet */
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}