/* ==============================================
   NOTIFICATION DROPDOWN - MOBILE RESPONSIVE FIX
   ============================================== */

/* Ensure all dropdowns have proper width - prevent w-0 utility class issues */
.zn-dropdown-menu,
.zn-dropdown-menu.dropdown,
.dropdown:not(.file-status),
.ucp-dropdown-menu {
    width: auto !important;
    min-width: 280px !important;
    max-width: 400px !important;
}

/* ===== DESKTOP AVATAR SIZING (always smaller) ===== */
#notification_list .avatar-wrapper {
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

#notification_list .avatar-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Better mobile dropdown positioning and sizing */
@media (max-width: 768px) {

    /* Notification dropdown container - optimize for mobile */
    .zn-dropdown-menu.dropdown.dropdown-end {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: 92vw !important;
        width: 92vw !important;
        max-height: 85vh !important;
    }

    /* Notification dropdown contents */
    .zn-dropdown-menu .dropdown-contents {
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        overflow: hidden;
    }

    /* Header - make more compact on mobile */
    .zn-dropdown-menu .dropdown-header {
        flex-shrink: 0;
        padding: 12px 16px !important;
    }

    .zn-dropdown-menu .dropdown-header .text-base {
        font-size: 1rem !important;
    }

    .zn-dropdown-menu .dropdown-header .flex.items-center.gap-1 {
        gap: 0.25rem !important;
    }

    .zn-dropdown-menu .dropdown-header a.dropdown-item {
        padding: 8px !important;
    }

    /* Notification list - scrollable area */
    #notification_list {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: none !important;
        padding: 12px !important;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    /* Individual notification items */
    #notification_list li {
        padding: 12px 0 !important;
    }

    #notification_list .block {
        padding: 12px !important;
    }

    /* Avatar - compact on mobile */
    #notification_list .avatar-wrapper {
        height: 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    /* Notification text - better spacing */
    #notification_list .notification_text {
        font-size: 0.9rem;
    }

    #notification_list .notification-title {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    #notification_list .notification-time {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }

    /* Footer - make more compact */
    .zn-dropdown-menu .dropdown-footer {
        flex-shrink: 0;
        padding: 10px 16px !important;
    }

    .zn-dropdown-menu .dropdown-footer a {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }

    /* Mark read button - hide on mobile for space */
    #notification_list .mark_read.icon-mark {
        display: none !important;
    }

    /* No notifications message */
    #notification_list .no_notifications {
        padding: 24px 12px !important;
        text-align: center;
    }
}

/* Small mobile devices (320px - 480px) */
@media (max-width: 480px) {
    .zn-dropdown-menu.dropdown.dropdown-end {
        max-width: 95vw !important;
        width: 95vw !important;
        max-height: 90vh !important;
    }

    .zn-dropdown-menu .dropdown-contents {
        max-height: 90vh;
    }

    .zn-dropdown-menu .dropdown-header {
        padding: 10px 12px !important;
    }

    .zn-dropdown-menu .dropdown-header .text-base {
        font-size: 0.95rem !important;
    }

    #notification_list {
        padding: 8px !important;
        gap: 8px !important;
    }

    #notification_list li {
        padding: 8px 0 !important;
    }

    #notification_list .block {
        padding: 10px !important;
    }

    #notification_list .avatar-wrapper {
        height: 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    #notification_list .notification-title {
        font-size: 0.85rem;
    }

    #notification_list .notification-time {
        font-size: 0.7rem !important;
    }

    .zn-dropdown-menu .dropdown-footer {
        padding: 8px 12px !important;
    }
}

/* Tablet landscape and small desktops (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .zn-dropdown-menu.dropdown.dropdown-end {
        max-width: 420px !important;
        width: 420px !important;
    }

    #notification_list {
        max-height: 400px !important;
    }
}

/* Ensure smooth scrolling for notification list */
#notification_list {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* Custom scrollbar for webkit browsers */
#notification_list::-webkit-scrollbar {
    width: 6px;
}

#notification_list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#notification_list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#notification_list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Fix notification items text overflow */
#notification_list .notification-title,
#notification_list .notification-reference,
#notification_list .notification-reason {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {
    #notification_list .notification-block {
        min-height: 44px;
        /* iOS recommendation for touch targets */
    }

    .zn-dropdown-menu .dropdown-header a {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Prevent body scroll when dropdown is open on mobile */
@media (max-width: 768px) {
    body:has(.zn-dropdown.open) {
        overflow: hidden;
    }
}

/* Backdrop for mobile dropdown */
@media (max-width: 768px) {
    .zn-dropdown.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(4px);
    }

    .zn-dropdown-menu.dropdown {
        z-index: 1000;
    }
}

/* Animation improvements for mobile */
@media (max-width: 768px) {
    .zn-dropdown-menu.dropdown {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .zn-dropdown:not(.open) .zn-dropdown-menu {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
        pointer-events: none;
    }

    .zn-dropdown.open .zn-dropdown-menu {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }
}