/* CampaignHub — Custom Styles */

/* Loading overlay fade */
#loading-overlay {
    transition: opacity 0.3s ease;
}

#loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Toast animations */
.toast-enter {
    animation: slideInRight 0.3s ease forwards;
}

.toast-exit {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
}

/* Table row hover */
.table-row-hover:hover {
    background-color: #f9fafb;
}

/* Scrollbar styling for sidebar */
#sidebar-container aside nav::-webkit-scrollbar {
    width: 4px;
}

#sidebar-container aside nav::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 2px;
}

/* ── Mobile Sidebar ───────────────────────────────────────────────── */
#sidebar-container aside {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

#sidebar-container.open aside {
    transform: translateX(0);
}

#sidebar-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#sidebar-container.open #sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 768px) {
    #sidebar-container aside {
        transform: translateX(0);
    }

    #sidebar-backdrop {
        display: none;
    }

    #mobile-menu-btn {
        display: none;
    }
}