html,
body {
    background: #121212;
    color: white;
}

* {
    scrollbar-color: #ef4444 #1a1a1a;
    scrollbar-width: thin;
}

.bg-dark-secondary {
    background: #1E1E1E;
}

.bg-dark-bg {
    background: #121212;
}

.toast {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.channel-drag-handle {
    cursor: move;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.channel-drag-handle:hover {
    opacity: 1;
}

.sortable-ghost {
    opacity: 0.5;
    background: #2d2d2d;
}

.sortable-chosen {
    background: #1e1e1e;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: #1a1a1a;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border-radius: 9999px;
    border: 3px solid #1a1a1a;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f87171, #dc2626);
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Improve button spacing on mobile */
    button i {
        margin-right: 0.25rem;
    }
    
    /* Ensure modals are properly sized */
    .fixed.inset-0 {
        padding: 1rem;
    }
    
    /* Better table cell spacing on mobile */
    table td, table th {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Improve touch targets */
    button, a.button {
        min-height: 44px;
        min-width: 44px;
    }
}