/* assets/css/style.css
 * This file is intentionally left empty as we have migrated to Tailwind CSS.
 * Keep this file if you wish to add custom global CSS overrides in the future.
 */

/* Toast Notifications - Added for replacing native alerts */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

.toast {
    background: white;
    color: #1f2937;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    gap: 10px;
    animation: slideIn 0.3s ease-out forwards;
    border-left: 4px solid #3b82f6;
    min-width: 250px;
    max-width: 350px;
}

.toast.success {
    border-left-color: #22c55e;
}

.toast.error {
    border-left-color: #ef4444;
}

.toast.warning {
    border-left-color: #f59e0b;
}

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

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

/* Marquee Animation for Announcement Bar */
/* Marquee Animation for Announcement Bar */
@keyframes marquee {
    0% {
        transform: translate3d(100%, 0, 0); /* Start completely off-screen right */
    }

    100% {
        transform: translate3d(-100%, 0, 0); /* End completely off-screen left */
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
    display: inline-block;
    white-space: nowrap;
    will-change: transform; /* Hint to browser for performance */
}
/* Pause on hover for better UX */
.animate-marquee:hover {
    animation-play-state: paused;
}