/*/////////////////////////////////////////////////////////////////////
//TOP NAV BAR  
////////////////////////////////////////////////////////////////////*/
    /* Topbar Glassmorphism */
    .navbar-custom {
        backdrop-filter: blur(10px);
        background-color: rgba(13, 110, 253, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Rainbow, Bounce & Shimmer Branding */
    .topbar-brand-text {
        font-weight: 900;
        letter-spacing: 2px;
        font-size: 1.2rem;
        display: inline-block;
        background: linear-gradient(to right, #fff, #ff7f00, #ffff00, #00ff00, #00ffff, #fff, #8f00ff, #fff);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: rainbow-shimmer-top 3s linear infinite, bounce-top 2s ease-in-out infinite;
    }

    @keyframes rainbow-shimmer-top { to { background-position: 200% center; } }
    @keyframes bounce-top { 
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); } 
    }

    /* Live Clock Styling */
    #live-clock {
        font-family: 'Courier New', Courier, monospace;
        font-weight: 600;
        background: rgba(0, 0, 0, 0.2);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.85rem;
    }

    /* Network Status Pulse */
    .status-dot {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .status-online { background-color: #28a745; box-shadow: 0 0 8px #28a745; }
    .status-offline { background-color: #dc3545; box-shadow: 0 0 8px #dc3545; }

/*
/////////////////////////////////////////////////////////////////////
//SIDE BAR  46
////////////////////////////////////////////////////////////////////
*/

    #sidebarOffcanvas { border-right: 1px solid rgba(255,255,255,0.1); }
    
    .nav-link {
        transition: all 0.2s ease;
        border-radius: 6px !important;
        margin-bottom: 3px;
        color: rgba(255,255,255,0.8) !important;
        display: flex;
        align-items: center;
        padding: 10px 15px !important;
    }

    /* Red Hover */
    .nav-link:hover {
        background: #dc3545 !important;
        color: #fff !important;
        transform: translateX(5px);
    }

    /* Active Link State (Blue) */
    .nav-link.active, .active-link {
        background: #0d6efd !important;
        color: #fff !important;
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
    }

    /* Pulsing Logout Button */
    .btn-logout {
        background: #dc3545 !important;
        color: #fff !important;
        margin-top: 20px;
        font-weight: 600;
        animation: pulse-red 1s infinite;
        border: none;
    }

    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }

    .menu-header {
        color: #ffffff !important;
        letter-spacing: 1px;
        font-size: 0.75rem;
        margin-top: 25px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 5px;
    }

    .nav-sub-menu {
        border-left: 1px solid rgba(255,255,255,0.1);
        margin-left: 1.2rem !important;
        background: rgba(255,255,255,0.02);
    }

    /* Rainbow, Bounce & Shimmer Branding */
    .brand-container {
        background: rgba(0,0,0,0.4);
        padding: 25px 10px;
        margin: 20px -1rem -1rem -1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .brand-footer {
        text-align: center;
        font-weight: 900;
        letter-spacing: 4px;
        font-size: 1.2rem;
        display: block;
        background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff, #ff0000);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: rainbow-shimmer 4s linear infinite, bounce-text 2s ease-in-out infinite;
    }

    @keyframes rainbow-shimmer {
        to { background-position: 200% center; }
    }

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

/*
/////////////////////////////////////////////////////////////////////
//WELCOME CARD  136
////////////////////////////////////////////////////////////////////
*/
    /* ... (Keeping your existing high-energy animated styles) ... */
    .welcome-card-animated {
        position: relative;
        border: none;
        border-radius: 24px;
        overflow: hidden;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: fast-gradient-flow 3s ease infinite;
        box-shadow: 0 15px 35px rgba(231, 60, 126, 0.3);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .welcome-card-animated::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        animation: shimmer-sweep 2s infinite;
    }

    @keyframes fast-gradient-flow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    @keyframes shimmer-sweep { 100% { left: 200%; } }

    .card-glass-overlay {
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        height: 100%; width: 100%;
        z-index: 2; position: relative;
    }

    /* Typing Effect Cursor */
    .typing-text::after {
        content: "|";
        animation: blink 0.7s infinite;
        margin-left: 5px;
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    .welcome-icon-box-white {
        width: 55px; height: 55px;
        background: rgba(255, 255, 255, 0.3);
        color: white; border-radius: 18px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem; border: 1px solid rgba(255, 255, 255, 0.4);
        animation: pulse-icon 1.5s infinite ease-in-out;
    }

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

    .role-badge-glass {
        background: #fff; color: #e73c7e;
        padding: 6px 16px; font-weight: 800;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }