body { font-family: 'Inter', sans-serif; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }

.custom-scrollbar::-webkit-scrollbar-thumb 
{ 
    background-color: #cbd5e1; 
    border-radius: 10px; 
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #475569; }

.table-container 
{ 
    border-radius: 0.75rem; 
    overflow: hidden; 
    isolation: isolate; 
}

@media (min-width: 768px) { .mobile-view { display: none; } .desktop-view { display: block; } }
@media (max-width: 767px) {
    .desktop-view { display: none; }
    .mobile-view { display: block; }


    .class-divider 
    {
        border-top: 1px solid #e2e8f0; 
        margin-top: 0.75rem; 
        padding-top: 0.75rem; 
    }
    
    .dark .class-divider { border-color: #1e293b; }
    
    .std-pill 
    { 
        background: #1e293b; 
        color: #94a3b8; 
        padding: 0.1rem 1rem; 
        border-radius: 4px; 
        font-size: 0.75rem; 
        font-family: monospace; 
    }
    
    .info-pill 
    { 
        font-size: 0.7rem; 
        padding: 0.15rem 0.5rem; 
        border-radius: 4px; 
        background: #e0e7ff; 
        color: #4338ca; 
        font-weight: 700; 
        display: inline-block; 
        white-space: nowrap; 
        border: 1px solid rgba(67, 56, 202, 0.2); 
    }

    .dark .info-pill 
    { 
        background: #1e1b4b; 
        color: #a5b4fc; 
        border-color: rgba(165, 180, 252, 0.2); 
    }
}

.badge 
{ 
    padding: 0.2rem 0.5rem; 
    border-radius: 0.375rem; 
    font-size: 0.7rem; 
    font-weight: 700; 
    display: inline-block; 
    white-space: nowrap; 
}

.row-cancelled 
{ 
    opacity: 0.5; 
    filter: saturate(0.5); 
}

.red-strike 
{ 
    text-decoration: line-through #ef4444 2px; 
}

.badge-cancelled 
{ 
    background-color: #e2e8f0 !important; 
    color: #64748b !important; 
    border: 1px solid #cbd5e1; 
}

.dark .badge-cancelled 
{ 
    background-color: #334155 !important; 
    color: #94a3b8 !important; 
    border-color: #475569; 
}
.message-banner 
{ 
    border-left-width: 4px; 
    padding: 1rem; 
    margin-bottom: 0.75rem; 
    border-radius: 0.375rem; 
}