/* ============================================================
   main.css — Shared stylesheet for WhatsApp AI Bot Dashboard
   ============================================================ */

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
}

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

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

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

/* ---- Sidebar ---- */
.sidebar-transition {
    transition: all 0.3s ease-in-out;
}

.menu-item-active {
    position: relative;
}

.menu-item-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
}

/* ---- Mobile Overlay ---- */
.mobile-overlay {
    backdrop-filter: blur(4px);
}

/* ---- Role Badge ---- */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

.role-badge {
    animation: pulse-glow 2s infinite;
}

/* ---- Login Page: Background Gradient Animation ---- */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

/* ---- Error 401: Rotate & Fade ---- */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.rotate-animation {
    animation: rotate 20s linear infinite;
}

@keyframes fade-in-out {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

.fade-pulse {
    animation: fade-in-out 2s ease-in-out infinite;
}

/* ---- Error 403: Shake & Lock Bounce ---- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-10px); }
    75%       { transform: translateX(10px); }
}

.shake-animation {
    animation: shake 0.5s ease-in-out;
}

@keyframes lock-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.lock-bounce {
    animation: lock-bounce 2s ease-in-out infinite;
}

/* ---- Error 404: Float & Pulse Scale ---- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-20px); }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

.pulse-scale {
    animation: pulse-scale 2s ease-in-out infinite;
}

/* ---- Error 500/503: Glitch & Blink ---- */
@keyframes glitch {
    0%   { transform: translate(0); }
    20%  { transform: translate(-2px, 2px); }
    40%  { transform: translate(-2px, -2px); }
    60%  { transform: translate(2px, 2px); }
    80%  { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch {
    animation: glitch 0.3s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.blink {
    animation: blink 1s ease-in-out infinite;
}

/* ============================================================
   Responsive Fixes
   ============================================================ */

/* Notification dropdown: prevent overflow on small screens */
#notification-panel {
    max-width: calc(100vw - 1.5rem);
}

/* On very small screens, reduce the notification panel width */
@media (max-width: 480px) {
    #notification-panel {
        width: 18rem;
        right: -0.5rem;
    }
}

/* Sidebar: ensure footer doesn't overlap nav items on short screens */
@media (max-height: 500px) {
    #sidebar .absolute.bottom-0 {
        position: relative;
        margin-top: 1rem;
    }
}

/* Tables: horizontal scroll on mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modal: ensure it never exceeds viewport on mobile */
.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* Prevent body scroll when mobile sidebar is open */
body.sidebar-open {
    overflow: hidden;
}