/* ============================================
   MOBILE FIXES - Sidebar z-index and list alignment
   ============================================ */

@media (min-width: 280px) and (max-width: 990px) {
    /* ============================================
       SIDEBAR MENU - Must appear ABOVE content cards
       ============================================ */
    
    /* Sidebar menu needs very high z-index to overlay cards */
    #sidebarMenu {
        z-index: 9999 !important;
        position: fixed !important;
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 70px !important;
    }

    #openSidebarMenu:checked ~ #sidebarMenu {
        transform: translateX(0) !important;
    }
    
    /* Sidebar toggle button also needs high z-index */
    .sidebarIconToggle {
        z-index: 10000 !important;
    }
    
    /* Mobile menu header stays on top */
    .mobile-menu-header {
        z-index: 10001 !important;
        height: 70px !important;
    }
    
    /* Ensure content cards don't overlap sidebar */
    .favorite-card,
    .list-col,
    .list-shadow,
    .panel,
    .card,
    #content,
    #content .row,
    section:not(#header):not(#sidebarMenu) {
        position: relative;
        z-index: 1;
    }
    
    /* ============================================
       LIST ITEMS - Fix alignment on mobile
       ============================================ */
    
    /* List rows: flex layout so icons align vertically */
    .list-content .site-row,
    .list-content li {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        padding: 0.5rem 0 !important;
        min-height: 44px !important; /* Touch target size */
    }
    
    /* Main link: flex grow, allow truncation */
    .list-content .site-row > a:first-of-type,
    .list-content li > a:first-of-type {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-right: 0.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* Action buttons: always visible, aligned right */
    .list-content .sub-links {
        display: flex !important;
        flex-shrink: 0 !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        align-items: center !important;
        gap: 0.35rem !important;
        order: 2 !important;
        margin-left: auto !important;
        max-width: 96px !important;
    }
    
    /* Action button icons: consistent size and alignment */
    .list-content .sub-links a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 6px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        vertical-align: middle !important;
    }
    
    /* Ensure icons don't overlap text */
    .list-content .sub-links .icon,
    .list-content .sub-links .i-info,
    .list-content .sub-links .i-link,
    .list-content .sub-links .i-fav {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1 !important;
    }

    /* Disable hover padding shift on mobile */
    .list-content li:hover,
    .list-content .site-row:hover {
        padding-left: 0 !important;
        background: transparent !important;
    }
    
    /* Count/number: consistent alignment */
    .list-content a .count {
        flex-shrink: 0 !important;
        margin-right: 0.5rem !important;
        vertical-align: middle !important;
    }
    
    /* Site logo/icon: consistent alignment */
    .list-content a img {
        flex-shrink: 0 !important;
        vertical-align: middle !important;
        margin: 0 0.25rem !important;
    }
    
    /* Site name: allow truncation */
    .list-content a .name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.2 !important;
    }
}

/* Extra small screens */
@media (min-width: 150px) and (max-width: 280px) {
    /* Same sidebar z-index fixes */
    #sidebarMenu {
        z-index: 9999 !important;
    }
    
    .sidebarIconToggle {
        z-index: 10000 !important;
    }
    
    .mobile-menu-header {
        z-index: 10001 !important;
    }
}