/* ================================================================
   iFile.cloud - Mobile Login Menu Enhancement
   Makes the mobile/small screen login menu more noticeable
   
   ⚠️ ONLY APPLIES ON SCREENS ≤768px WIDTH
   Desktop screens (>768px) will not show these styles
   ================================================================ */

/* ----------------------------------------------------------------
   Mobile Login Menu Styling (≤768px only)
   ---------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Target the login menu that appears on mobile/medium screens */
    [role="presentation"].bg-elevated {
        background: linear-gradient(135deg, #79d6ed 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4) !important;
        animation: slideUpFade 0.3s ease-out;
        position: relative;
        overflow: hidden;
    }

        /* Add subtle pattern overlay for depth */
        [role="presentation"].bg-elevated::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
            opacity: 0.5;
            pointer-events: none;
        }

    /* Animation for menu appearance */
    @keyframes slideUpFade {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    /* Login menu item styling */
    [role="presentation"].bg-elevated [role="menuitem"] {
        color: white !important;
        padding: 1rem 1.5rem !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
        position: relative;
        z-index: 1;
    }

        /* Enhanced hover state */
        [role="presentation"].bg-elevated [role="menuitem"]:hover {
            background: rgba(255, 255, 255, 0.25) !important;
            transform: translateX(5px);
            padding-left: 2rem !important;
        }

            /* Add arrow indicator on hover */
            [role="presentation"].bg-elevated [role="menuitem"]:hover::after {
                content: '→';
                position: absolute;
                right: 1.5rem;
                font-weight: bold;
                animation: arrowBounce 0.6s ease-in-out infinite;
            }

    @keyframes arrowBounce {
        0%, 100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(5px);
        }
    }

    /* Focus state for accessibility */
    [role="presentation"].bg-elevated [role="menuitem"]:focus {
        outline: 3px solid rgba(255, 255, 255, 0.5) !important;
        outline-offset: -3px;
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* Active/pressed state */
    [role="presentation"].bg-elevated [role="menuitem"]:active {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(0.98);
    }

    /* Text within menu item */
    [role="presentation"].bg-elevated [role="menuitem"] .min-w-auto {
        color: white !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* ----------------------------------------------------------------
   Dark Mode Adjustments
   ---------------------------------------------------------------- */
    .dark [role="presentation"].bg-elevated {
        background: linear-gradient(135deg, #5b21b6 0%, #6b21a8 100%) !important;
        box-shadow: 0 10px 40px rgba(91, 33, 182, 0.5) !important;
    }

        .dark [role="presentation"].bg-elevated [role="menuitem"]:hover {
            background: rgba(255, 255, 255, 0.15) !important;
        }
}
/* End of @media (max-width: 768px) */

/* ----------------------------------------------------------------
   Alternative Style: Glassmorphism (Optional)
   Remove the above styles and use these for a glass effect
   Also wrap in @media (max-width: 768px) if using
   ---------------------------------------------------------------- */

/* Uncomment to use glassmorphism style instead:

[role="presentation"].bg-elevated {
    background: rgba(102, 126, 234, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4) !important;
}

*/

/* ----------------------------------------------------------------
   Mobile Menu Button (Person Icon) Enhancement (≤768px only)
   ---------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Style the button that opens the menu */
    button[aria-haspopup="menu"].md\:hidden {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
        border: 2px solid rgba(102, 126, 234, 0.3) !important;
        transition: all 0.3s ease !important;
        position: relative;
    }

        button[aria-haspopup="menu"].md\:hidden:hover {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
            border-color: rgba(102, 126, 234, 0.6) !important;
            transform: scale(1.05);
        }

        /* Add a subtle pulse animation to draw attention */
        button[aria-haspopup="menu"].md\:hidden::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(102, 126, 234, 0.6);
            border-radius: inherit;
            transform: translate(-50%, -50%);
            animation: pulse 2s ease-out infinite;
        }

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

        50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.5;
        }

        100% {
            transform: translate(-50%, -50%) scale(1.4);
            opacity: 0;
        }
    }

    /* Icon color enhancement */
    button[aria-haspopup="menu"].md\:hidden svg {
        color: #667eea !important;
        filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
        transition: transform 0.3s ease;
    }

    button[aria-haspopup="menu"].md\:hidden:hover svg {
        transform: scale(1.1);
    }

    .dark button[aria-haspopup="menu"].md\:hidden svg {
        color: #a78bfa !important;
    }

    /* When menu is open, change button appearance */
    button[aria-haspopup="menu"][aria-expanded="true"].md\:hidden {
        background: linear-gradient(135deg, #79d6ed 0%, #764ba2 100%) !important;
        border-color: transparent !important;
    }

        button[aria-haspopup="menu"][aria-expanded="true"].md\:hidden svg {
            color: white !important;
        }

        /* Remove pulse when menu is open */
        button[aria-haspopup="menu"][aria-expanded="true"].md\:hidden::after {
            display: none;
        }

    /* Make menu slightly larger on very small screens (≤480px) */
    @media (max-width: 480px) {
        [role="presentation"].bg-elevated [role="menuitem"] {
            padding: 1.25rem 1.5rem !important;
            font-size: 1.1rem !important;
        }
    }

    /* ----------------------------------------------------------------
   Additional Enhancement: Add Login Icon
   ---------------------------------------------------------------- */

    /* Add a login icon before the text */
    [role="presentation"].bg-elevated [role="menuitem"][data-value="login"]::before {
        content: '👤';
        margin-right: 0.75rem;
        font-size: 1.2em;
        opacity: 0.9;
    }
}
/* End of @media (max-width: 768px) for button section */

/* Or use an SVG icon instead (uncomment to use): */
/*
[role="presentation"].bg-elevated [role="menuitem"][data-value="login"]::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}
*/

/* ----------------------------------------------------------------
   Print Styles
   ---------------------------------------------------------------- */
@media print {
    [role="presentation"].bg-elevated,
    button[aria-haspopup="menu"].md\:hidden {
        display: none !important;
    }
}