/**
 * @package  Base System
 * @author   Fred Melnychuk <fredeveloper@gmail.com>
 * @version  0.0.1
 *
 * Mobile overrides (minimal changes, desktop untouched)
 */

@media (max-width: 768px)
{
    /* --- base */
    html, body {width: 100%; margin: 0; padding: 0;}
    *, *:before, *:after {box-sizing: border-box;}
    img, video, iframe {max-width: 100%; height: auto;}

    /* иногда старые reset/css оставляют отступы/ширины */
    body {overflow-x: hidden;}

    /* --- layout table: убрать любые min-width, дать занимать весь экран */
    table[style*="min-width"] {min-width: 0 !important; width: 100% !important;}
    table[width="100%"] {width: 100% !important;}
    .layout-root {min-width: 0 !important; width: 100% !important;}

    /* --- твой align="center" превращает жизнь в боль:
           пусть контейнер тянется на всю ширину */
    td[align="center"] > div {width: 100% !important;}

    /* --- header menu: горизонтальный скролл */
    ul.dropdown {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    ul.dropdown > li {float: none !important; display: inline-block;}

    /* логотип часто задаёт фикс. ширины инлайном */
    ul.dropdown > li.logo {width: auto !important;}
    ul.dropdown > li.logo img {position: static !important; width: 120px !important; height: auto !important;}

    /* --- messages */
    .header_message {width: auto !important; margin: 10px !important;}

    /* --- DataTables: делаем “контролы” вертикально + таблицу скроллящейся */
    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Важно: DataTables любит float’ы, на мобиле это ломает UI */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* сама таблица: пусть не сжимается в кашу, лучше скролл */
    table.dataTable {
        width: 100% !important;
        min-width: 700px; /* можно 600-900 подобрать под твою таблицу */
    }

    #videos th, #videos td {white-space: nowrap;}

    /* inputs/selects should not overflow */
    input[type="text"],
    input[type="password"],
    textarea,
    select {max-width: 100% !important;}
}