/* CSS for EDIT CBD modal */
.modal-xl {
    max-width: 90%;
}

#editClientDataPopup .modal-body {
    padding: 20px;
}

.client-data-table th {
    white-space: nowrap;
}

.client-data-table td {
    vertical-align: middle;
}

/* Modal table column widths */
.client-data-table .client-column {
    width: 200px;
    min-width: 200px;
}

.client-data-table .action-column {
    width: 120px;
    min-width: 120px;
}

.client-data-table .priority-column {
    width: 120px;
    min-width: 120px;
}

.client-data-table .categories-column {
    width: 200px;
    min-width: 200px;
    cursor: pointer;
}

.client-data-table .notes-column {
    min-width: 300px;
    width: auto;
    /* Allow notes to take remaining space */
}


/* Override Bootstrap's textarea styles for our notes */
#edit-cbd-form textarea.form-control {
    overflow: hidden !important;
    /* Hide scrollbars */
    resize: none !important;
    /* Prevent manual resizing since we're auto-sizing */
    padding: 8px !important;
    /* Keep some padding for text readability */
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 24px; /* Set minimum height */
}

/* Mobile Responsive Styles */
@media (max-width: 1100px) {
    /* Make the modal take full width on mobile */
    .modal-xl {
        max-width: 100%;
        margin: 0;
    }
    
    /* Convert table to stacked layout */
    .client-data-table thead {
        display: none; /* Hide the header row on mobile */
    }
    
    .client-data-table tr {
        display: block;
        margin-bottom: 1rem;
        border-bottom: 2px solid #dee2e6;
    }
    
    .client-data-table td {
        display: block;
        padding: 0.5rem;
        border: none;
        
        /* Add labels before each value */
        &::before {
            content: attr(data-label);
            font-weight: bold;
            display: block;
            margin-bottom: 0.25rem;
        }
    }

    /* Reset fixed widths for mobile */
    .client-data-table .client-column,
    .client-data-table .action-column,
    .client-data-table .priority-column,
    .client-data-table .categories-column,
    .client-data-table .notes-column {
        width: 100%;
        min-width: 0;
    }
}