/* Contacts Tab Mobile Fixes - Target Dynamic Content */

@media screen and (max-width: 768px) {
    
    /* ========================================
       FIX EMAIL OVERFLOW IN CONTACT CARDS
       ======================================== */
    
    /* Target the contacts list container */
    #contacts-list {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* All contact cards inside contacts-list */
    #contacts-list > div,
    #contacts-list .border,
    #contacts-list .rounded-lg,
    #contacts-list .shadow-sm {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Email addresses - force wrapping */
    #contacts-list a,
    #contacts-list a[href^="mailto"] {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        display: inline !important;
        max-width: 100% !important;
        font-size: 0.8125rem !important;
        line-height: 1.3 !important;
    }
    
    /* Email and phone container with icons */
    #contacts-list .flex {
        max-width: 100% !important;
        overflow: hidden !important;
        flex-wrap: wrap !important;
    }
    
    /* Icons should not shrink */
    #contacts-list svg {
        flex-shrink: 0 !important;
    }
    
    /* Text content next to icons */
    #contacts-list .flex > a,
    #contacts-list .flex > span {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        max-width: calc(100% - 40px) !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* ========================================
       FIX DELETE BUTTON TEXT CUTOFF
       ======================================== */
    
    /* Stack all buttons vertically on mobile */
    #contacts-list button {
        display: block !important;
        width: 100% !important;
        margin: 0.25rem 0 !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.9375rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    /* Button containers - stack vertically */
    #contacts-list .flex.space-x-2,
    #contacts-list .flex.space-x-3,
    #contacts-list .flex.space-x-4,
    #contacts-list .flex.gap-2,
    #contacts-list .flex.gap-3,
    #contacts-list .flex.gap-4,
    #contacts-list .mt-4,
    #contacts-list .mt-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Remove horizontal spacing classes on mobile */
    #contacts-list .space-x-2 > * + *,
    #contacts-list .space-x-3 > * + *,
    #contacts-list .space-x-4 > * + * {
        margin-left: 0 !important;
    }
    
    /* Ensure button icons and text fit */
    #contacts-list button svg {
        margin-right: 0.375rem !important;
        flex-shrink: 0 !important;
    }
    
    /* ========================================
       CONTACT CARD LAYOUT OPTIMIZATIONS
       ======================================== */
    
    /* Reduce padding in contact cards */
    #contacts-list .p-4,
    #contacts-list .p-5,
    #contacts-list .p-6 {
        padding: 0.75rem !important;
    }
    
    /* Contact info spacing */
    #contacts-list .space-y-2 > * + *,
    #contacts-list .space-y-3 > * + * {
        margin-top: 0.375rem !important;
    }
    
    /* Contact name */
    #contacts-list h3,
    #contacts-list .text-lg,
    #contacts-list .font-semibold {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Avatar/initials */
    #contacts-list .rounded-full {
        flex-shrink: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    /* Contact badge (Parent, Friend, etc.) */
    #contacts-list .text-xs {
        font-size: 0.75rem !important;
    }
    
    /* ========================================
       ENSURE FULL BUTTON TEXT VISIBILITY
       ======================================== */
    
    /* Specific targeting for Create Message, Edit, Delete buttons */
    #contacts-list button:nth-child(1),
    #contacts-list button:nth-child(2),
    #contacts-list button:nth-child(3) {
        min-height: 2.5rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    
    /* Make sure text inside buttons doesn't wrap */
    #contacts-list button span {
        white-space: nowrap !important;
    }
}

/* ========================================
   DESKTOP VIEW - Fix email display
   ======================================== */

@media screen and (min-width: 769px) {
    /* Fix email addresses to display horizontally on desktop - override mobile */
    #contacts-list a[href^="mailto"],
    #contacts-list a {
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        display: inline !important;
        max-width: none !important;
    }
    
    /* Ensure text doesn't break character by character */
    #contacts-list .flex > a[href^="mailto"],
    #contacts-list .flex > a,
    #contacts-list .flex > span {
        word-break: normal !important;
        overflow-wrap: normal !important;
        max-width: none !important;
    }
}