/* ============================================
   MOBILE NOTIFICATION PANEL FIX
   Fixes notification panel positioning on mobile
   Uses ID selector for higher specificity
   Author: Claude - Diciembre 2025
   ============================================ */

/* Mobile: Make notification panel slide from right, not positioned off-screen */
@media (max-width: 768px) {
    #notificationPanel,
    .notification-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        z-index: 10000 !important;
        border-radius: 0 !important;
        background: #0d1117 !important;
    }
    
    #notificationPanel.active,
    .notification-panel.active {
        transform: translateX(0) !important;
    }
    
    /* Notification header - sticky on mobile */
    #notificationPanel .notification-header,
    .notification-panel .notification-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        padding: 16px !important;
        background: #0d1117 !important;
    }
    
    /* Notification tabs - horizontal scroll on mobile */
    #notificationPanel .notification-tabs,
    .notification-panel .notification-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 16px 12px !important;
        gap: 8px !important;
        scrollbar-width: none !important;
    }
    
    #notificationPanel .notification-tabs::-webkit-scrollbar,
    .notification-panel .notification-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    #notificationPanel .notification-tab,
    .notification-panel .notification-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }
    
    /* Notification list - scrollable */
    #notificationPanel .notification-list,
    .notification-panel .notification-list {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 16px !important;
    }
    
    /* Notification items - full width, better touch targets */
    #notificationPanel .notification-item,
    .notification-panel .notification-item {
        padding: 16px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        min-height: 72px !important;
    }
    
    /* Close button - larger touch target */
    #notificationPanel .close-notification-panel,
    .notification-panel .close-notification-panel {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Footer - fixed at bottom */
    #notificationPanel .notification-footer,
    .notification-panel .notification-footer {
        position: sticky !important;
        bottom: 0 !important;
        padding: 16px !important;
        background: #0d1117 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Small phones (320px - 375px) */
@media (max-width: 375px) {
    #notificationPanel .notification-tab,
    .notification-panel .notification-tab {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
    
    #notificationPanel .notification-item,
    .notification-panel .notification-item {
        padding: 12px 10px !important;
    }
}

/* Tablet portrait */
@media (min-width: 769px) and (max-width: 1024px) {
    #notificationPanel,
    .notification-panel {
        width: 400px !important;
        max-width: 80vw !important;
        right: 0 !important;
        left: auto !important;
    }
}