/* Mobile-first approach */
@media (max-width: 768px) {
    .ta-dashboard {
        padding: 10px;
    }
    
    .dashboard-header {
        flex-direction: column;
    }
    
    .profile-summary, .financial-summary {
        min-width: 100%;
        margin-bottom: 15px;
    }
    
    .dashboard-content {
        flex-direction: column;
    }
    
    .dashboard-sidebar, .dashboard-cards {
        min-width: 100%;
    }
    
    .profile-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .profile-actions .button {
        margin: 5px;
        width: 100%;
        text-align: center;
    }
    
    .requests-table {
        font-size: 12px;
    }
    
    .requests-table th, .requests-table td {
        padding: 8px 5px;
    }
    
    .ta-modal .modal-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .button {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Chat modal tabs */
    .chat-tabs {
        display: flex;
        margin-bottom: 10px;
    }
    
    .chat-tabs .tab-button {
        flex: 1;
        padding: 8px;
        font-size: 14px;
    }
    
    .tab-content {
        padding: 5px;
    }
    
    /* Financial buttons */
    .wallet-actions, .leads-actions {
        flex-direction: column;
    }
    
    .wallet-actions .button, .leads-actions .button {
        margin-bottom: 5px;
        width: 100%;
    }

    /* --- Start of your friend's fixes --- */

    /* Mobile-first responsive fixes */
    /* Ensure modals are full width and have better spacing */
    .ta-modal .modal-content {
        width: 95%;
        margin: 5px; /* Adds a small margin around the modal content */
        padding: 15px; /* Increases internal padding for better spacing */
    }
    
    /* Make buttons more touch-friendly */
    .button {
        padding: 12px 15px; /* Increases padding for easier tapping */
        font-size: 16px; /* Makes button text slightly larger */
        margin: 5px 0; /* Adds vertical margin to buttons */
    }
    
    /* Fix table display for better horizontal scrolling on small screens */
    .requests-table {
        display: block; /* Changes display to block to allow overflow */
        overflow-x: auto; /* Enables horizontal scrolling if content overflows */
    }
    
    /* Improve modal content layout for individual request details */
    .request-detail-item {
        padding: 10px 0; /* Adds vertical padding to detail items */
    }
    
    /* Fix financial summary layout to stack sections vertically */
    .financial-summary {
        flex-direction: column; /* Stacks items in a column */
    }
    
    /* Ensure wallet and leads sections take full width */
    .wallet-section, .leads-section {
        width: 100%; /* Makes these sections take full available width */
        margin-bottom: 15px; /* Adds spacing between sections */
    }
    
    /* Improve chat modal specific to the admin chat modal */
    #chat-admin-modal .modal-content {
        max-height: 90vh; /* Ensures the chat modal doesn't exceed 90% of viewport height */
    }
    
    /* Adjust chat tabs to stack vertically on mobile */
    .chat-tabs {
        flex-direction: column; /* Stacks chat tabs in a column */
    }
    
    /* Make chat tab buttons take full width */
    .tab-button {
        width: 100%; /* Makes each tab button take full width */
        margin-bottom: 5px; /* Adds spacing between tab buttons */
    }
    
    /* Debug panel positioning and sizing for mobile */
    .ta-debug-panel {
        width: 95%; /* Sets width to 95% of the viewport */
        max-width: none; /* Removes any maximum width constraint */
        right: 2.5%; /* Positions it 2.5% from the right edge */
        bottom: 5px; /* Positions it 5px from the bottom edge */
    }
    /* --- End of your friend's fixes --- */
}

/* Add to the bottom of ta-mobile.css */
@media (max-width: 768px) {
    .ta-dashboard {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .dashboard-content {
        display: block;
        width: 100%;
    }
    
    .dashboard-sidebar,
    .dashboard-cards {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 0;
    }
    
    .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 0 20px 0;
    }
    
    .card-header,
    .card-body {
        padding: 15px;
    }
    
    .requests-table {
        width: 100% !important;
        min-width: 100%;
        display: table;
    }
    
    .requests-table th,
    .requests-table td {
        padding: 8px 5px;
        font-size: 12px;
        white-space: normal;
        word-break: break-word;
    }
    
    .requests-table td:last-child {
        white-space: nowrap;
    }

    /* --- Start of your friend's new fixes to be added --- */

    /* Fix for iOS Vertical Text Issue: */
    .requests-table {
        display: table !important; /* Force table display on iOS */
        table-layout: auto !important; /* Allow natural column widths */
    }
    
    .requests-table th,
    .requests-table td {
        white-space: nowrap; /* Prevent text from wrapping vertically */
        overflow: visible; /* Ensure content isn't clipped */
    }
    
    .requests-table td:last-child {
        white-space: normal; /* Allow button text to wrap if needed */
    }

    /* Fix for Android Button Cut-off Issue: */
    .requests-table td:last-child {
        min-width: 120px; /* Ensure enough space for button */
        padding-right: 5px; /* Add right padding */
    }
    
    .btn-view-details {
        padding: 6px 8px !important; /* Reduce button padding */
        font-size: 11px !important; /* Slightly smaller font */
        white-space: normal; /* Allow button text to wrap */
        line-height: 1.2; /* Better line spacing */
        text-align: center; /* Center button text */
        width: 100%; /* Full width in cell */
        box-sizing: border-box; /* Include padding in width */
    }

    /* Additional Optimizations: */
    /* Column width adjustments */
    .requests-table th:nth-child(1),
    .requests-table td:nth-child(1) {
        width: 30%; /* Date/Time column */
    }
    
    .requests-table th:nth-child(2),
    .requests-table td:nth-child(2) {
        width: 25%; /* Location column */
    }
    
    .requests-table th:nth-child(3),
    .requests-table td:nth-child(3) {
        width: 20%; /* Venue column */
    }
    
    .requests-table th:nth-child(4),
    .requests-table td:nth-child(4) {
        width: 25%; /* Actions column */
    }
    
    /* Header text adjustments */
    .requests-table th {
        font-size: 10px; /* Smaller header text */
        padding: 8px 3px !important; /* Tighter padding */
    }
    /* --- End of your friend's new fixes to be added --- */
}

/* Mobile Gallery Styles */
@media (max-width: 768px) {
    .therapist-gallery {
        max-width: 100%; /* Full width on mobile */
        padding: 15px;
        box-sizing: border-box;
    }
    
    .gallery-grid {
        gap: 10px; /* Smaller gap on mobile */
    }
    
    .gallery-item {
        aspect-ratio: 1/1; /* Maintain square aspect */
    }
    
    .gallery-notice {
        font-size: 13px;
        padding: 10px;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .gallery-grid {
        gap: 8px;
    }
    
    .gallery-item {
        border-radius: 6px;
    }
}

/* Add to the very bottom of the file */
@media (max-width: 480px) {
    .partner-login-container {
        padding: 10px 0 !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
    }
    
    .login-card {
        max-width: 95% !important;
        margin: 0 auto !important;
        border-radius: 12px !important;
    }
    
    .login-header,
    .login-card > div:last-child {
        padding: 20px 15px !important;
    }
    
    .form-group input[type="email"],
    .form-group input[type="password"] {
        padding: 14px !important;
        font-size: 15px !important;
    }
    
    .login-button,
    .signup-button {
        padding: 16px !important;
        font-size: 16px !important;
    }
}

/* Mobile gallery fixes */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px;
    }
    
    /* Prevent overflow */
    .profile-info,
    .financial-summary {
        overflow: hidden;
        max-width: 100vw;
    }
}