/* Responsive tweaks for sales order forms */

@media (max-width: 768px) {
    form, fieldset, .form-horizontal, .form-group, .row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    .form-group > label,
    .form-group > .control-label,
    .form-group > .label_purchase {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 5px;
    }
    .form-group > div,
    .form-group > input,
    .form-group > select {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    input[type="text"], input[type="number"], select, textarea {
        width: 100% !important;
        min-width: 0 !important;
    }
    .btn, .btn_purchase, .btn_purchase1, .btn_purchase3 {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    table, .CSSTableGenerator, .table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table th, table td {
        white-space: nowrap;
    }
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .box, .box-header, .box-body {
        padding: 8px !important;
    }
    legend, .text_forheader {
        font-size: 1.2em !important;
    }
    .dashboard_menu li {
        display: block !important;
        margin-bottom: 8px !important;
    }
    .btn-group {
        width: 100% !important;
    }
}

/* Optional: Make buttons and inputs a bit larger for touch */
@media (max-width: 480px) {
    input, select, button, .btn {
        font-size: 16px !important;
        padding: 10px 8px !important;
    }
}
