/* Responsive Styles for Material Request Pages - Unified Width */

/* Unified container class for all material request pages */
.material-request-container {
    width: 70% !important;
    margin: 116px auto 0 !important;
    background: white;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    /* Unified styles for all material request pages */
    div[dir="rtl"].w-\[55\%\],
    div[dir="rtl"].w-\[70\%\],
    .material-request-container,
    .material-request-detail {
        width: 100% !important;
        margin-top: 20px !important;
        padding: 16px !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    .flex.gap-2.items-center button,
    .flex.gap-2.items-center a {
        width: 100% !important;
        text-align: center !important;
    }

    .flex.gap-2.items-center {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .border.border-\[\#ECECEC\].rounded-lg {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .grid.grid-cols-6 {
        min-width: 600px !important;
    }

    .grid.grid-cols-6 > div {
        font-size: 0.75rem !important;
    }

    input, select, textarea {
        font-size: 16px !important;
    }

    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .border-l {
        display: none !important;
    }

    .mb-8 {
        margin-bottom: 1rem !important;
    }

    .p-4, .p-8 {
        padding: 1rem !important;
    }

    .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .d-flex.gap-2 button {
        width: 100% !important;
    }

    .card-body .d-flex {
        flex-direction: column !important;
    }

    .bg-\[\#F3F1ED\].rounded.p-4 {
        padding: 12px !important;
    }

    div[style*="padding: 30px"] {
        padding: 15px !important;
    }

    div[style*="padding-right: 50px"] {
        padding-right: 30px !important;
    }

    div[style*="margin-right: 60px"] {
        margin-right: 40px !important;
        padding: 12px !important;
    }
}

.border.border-\[\#ECECEC\].rounded-lg {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet: 85% width for better readability */
    div[dir="rtl"].w-\[55\%\],
    div[dir="rtl"].w-\[70\%\],
    .material-request-container,
    .material-request-detail {
        width: 85% !important;
    }

    #xrm-detail-page > div,
    #xrm-submit-page .material-request-detail,
    #xrm-support-response-page .material-request-detail {
        width: 100% !important;
    }
}

@media (min-width: 1025px) {
    /* Desktop: 70% width for optimal content width */
    div[dir="rtl"].w-\[70\%\],
    .material-request-container {
        width: 70% !important;
    }
}

@media (max-width: 480px) {
    .text-2xl {
        font-size: 1.1rem !important;
    }

    button, .btn {
        font-size: 0.9rem !important;
        padding: 10px 14px !important;
    }
}

.grid.grid-cols-6 > div {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #ECECEC;
    padding: 8px !important;
}

.grid.grid-cols-6 > div:before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 120px;
}

/* تحسين أزرار الإجراءات في الكارد */
.card-body {
    padding: 12px !important;
}

.card-header h5 {
    font-size: 0.9rem !important;
}

/* تحسين النماذج */
select, input[type="text"] {
    height: auto !important;
    min-height: 40px;
}

/* إصلاح مشكلة التمرير الأفقي في Odoo Chatter */
.o_portal_chatter,
.o_portal_chatter *,
.o_message_thread,
.o_message_thread * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.o_portal_chatter .o_portal_chatter_composer,
.o_portal_chatter .o_portal_chatter_messages {
    overflow-x: hidden !important;
    width: 100% !important;
}