/* Comprehensive Mobile Button Layout CSS - Final Fix with Correct Selectors */

/* ========================================
   1. MEMOIR PROMPTS - Story Card Buttons
   ======================================== */

/* Memoir Prompts: 4 buttons on row 1, "Include in My Book" on row 2 */
@media screen and (max-width: 768px) {
    
    /* Row 1: View, Edit, Share, Delete - equal width, fill the row */
    .memoir-button-row-1 {
        display: flex !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .memoir-button-row-1 button {
        flex: 1 !important; /* Equal width for all 4 buttons */
        padding: 0.5rem 0.5rem !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
    }
    
    /* Row 2: Include in My Book - full width, GREEN */
    .memoir-button-row-2 {
        display: flex !important;
    }
    
    .memoir-button-row-2 .include-book-btn {
        width: 100% !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
    }
    
    /* ========================================
       2. COLLABORATIONS - View, Approve, Decline
       ======================================== */
    
    /* Collaborations: View, Approve, Decline - equal width, fill the row */
    .collab-button-container {
        display: flex !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important; /* Don't wrap, keep on one line */
    }
    
    .collab-button-container button {
        flex: 1 !important; /* Equal width for all 3 buttons */
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
    }
    
    /* Ensure buttons don't have weird widths */
    .collab-view-btn,
    .collab-approve-btn,
    .collab-decline-btn {
        min-width: 0 !important; /* Allow flex to shrink */
    }
    
    /* ========================================
       3. PROMPT CARD BUTTONS - Answer Prompt, Skip, Not Relevant
       ======================================== */
    
    /* Stack vertically on mobile for better readability */
    /* Be specific to avoid affecting header */
    .prompt-card .flex.space-x-2,
    .story-card .flex.space-x-2 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .prompt-card .flex.space-x-2 button,
    .story-card .flex.space-x-2 button {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Alternative: If the buttons have specific classes */
    .answer-prompt-btn,
    .skip-prompt-btn,
    .delete-prompt-btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* ========================================
       4. TYPE/SPEAK BUTTONS - Stack vertically
       ======================================== */
    
    /* CORRECT MODAL ID: answer-prompt-modal */
    /* Type Your Answer and Speak Your Answer - stack vertically */
    #answer-prompt-modal .flex.space-x-2.mb-4 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* Make sure they're full width */
    #type-mode-btn,
    #speak-mode-btn {
        flex: none !important;
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }
    
    /* ========================================
       5. SUBMIT BUTTONS - Skip for Now, Not Relevant, Save Draft, Submit Answer
       ======================================== */
    
    /* Stack all 4 buttons vertically on mobile - use correct modal ID */
    #answer-prompt-modal .flex.justify-between {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #skip-buttons-container {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 0 !important;
    }
    
    /* The save/submit button container */
    #answer-prompt-modal .flex.justify-between > div {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #skip-this-prompt,
    #not-relevant-prompt,
    #save-draft,
    #submit-answer {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Remove space-x-2 spacing in modal */
    #answer-prompt-modal .flex.space-x-2 {
        gap: 0.5rem !important;
    }
    
    #answer-prompt-modal .flex.space-x-2 > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* ========================================
       6. PROTECT HEADER - Ensure header stays horizontal
       ======================================== */
    
    /* Explicitly keep header elements horizontal */
    header .flex,
    header .flex.items-center {
        flex-direction: row !important;
    }
    
    /* Keep notification and profile buttons horizontal */
    header .ml-4.flex.items-center {
        flex-direction: row !important;
    }
}

/* ========================================
   DESKTOP VIEW - Keep original layouts
   ======================================== */

@media screen and (min-width: 769px) {
    .memoir-button-container,
    .collab-button-container {
        display: flex !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    /* On desktop, all memoir buttons can be on one row if space allows */
    .memoir-button-row-1,
    .memoir-button-row-2 {
        display: inline-flex !important;
        gap: 0.5rem !important;
    }
    
    .memoir-button-row-1 button,
    .memoir-button-row-2 button {
        flex: initial !important; /* Don't force equal width on desktop */
    }
    
    /* Fix collaboration buttons to be smaller on desktop */
    .collab-button-container button {
        flex: 0 0 auto !important; /* Don't stretch, size to content */
        min-width: 120px !important; /* Minimum width for readability */
        max-width: 200px !important; /* Maximum width to keep them compact */
        padding: 0.5rem 1.5rem !important; /* Comfortable padding */
    }
    
    .collab-view-btn,
    .collab-approve-btn,
    .collab-decline-btn {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    
    /* Desktop keeps horizontal layout for Type/Speak and Submit buttons */
    .flex.space-x-2,
    .flex.justify-between {
        flex-direction: row !important;
    }
}