/* ==========================================================================
   Responsive layer - адаптивність для планшетів і телефонів.
   Підключається ПІСЛЯ theme.css.

   Головна проблема проєкту: модулі верстані на col-xs-*, а в Bootstrap 3
   ці класи діють від найменшого брейкпоінта і вгору, тобто НЕ переносяться
   на вузьких екранах (col-xs-2 на телефоні = ~60px). Тут ми перевизначаємо
   ширини колонок по брейкпоінтах, не чіпаючи розмітку модулів.
   ========================================================================== */

/* Таблиці прокручуються по горизонталі не тільки на телефонах (Bootstrap
   вмикає це до 767px), а й на планшетах - у модулях по 8-12 колонок.
   Обгортку .table-responsive навішує wrapResponsiveTables() у scripts.js. */
@media (max-width: 1199px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    .table-responsive > .table { margin-bottom: 0; }

    /* Щоб колонки не стискались у вузькі стовпчики тексту */
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Планшети (<= 991px): фільтрові поля по 3 в ряд замість 5-6
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .col-xs-1,
    .col-xs-2,
    .col-xs-3 { width: 33.33333333%; }

    .col-xs-4,
    .col-xs-5 { width: 50%; }

    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11 { width: 100%; }

    .form-control,
    .btn-block { margin-bottom: 8px; }

    /* Усередині input-group та таблиць відступ ламає вирівнювання */
    .input-group .form-control,
    .table .form-control { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Телефони (<= 767px): усе в один стовпець
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12 { width: 100%; }

    /* Пари полів (дата з / дата по, стать / дата) лишаємо поруч */
    .col-xs-5,
    .col-xs-6 { width: 50%; }

    .col-xs-offset-1,
    .col-xs-offset-2,
    .col-xs-offset-3,
    .col-xs-offset-4,
    .col-xs-offset-5,
    .col-xs-offset-6 { margin-left: 0; }

    .container,
    .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* Розділяємо поля, що стали одне під одним */
    .form-control,
    .btn-block,
    .file-field { margin-bottom: 10px; }

    .btn-block + .btn-block { margin-top: 0; }

    /* Верхня панель і випадні меню */
    .navTop { margin-bottom: 16px; }

    #mainMenu,
    #userMenu {
        width: calc(100vw - 24px);
        max-width: 340px;
        right: 0;
    }

    #mainMenu a {
        width: calc(33.33% - 10px);
        height: 70px;
    }

    #userMenu .profile-sidebar { width: 100%; }

    /* Модалки: інлайнові width у розмітці перебиваємо */
    .modal-dialog {
        width: auto !important;
        max-width: none !important;
        margin: 10px !important;
    }

    .modal-body   { padding: 15px; }
    .modal-header { padding: 13px 15px; }
    .modal-footer { padding: 12px 15px; }
    .modal-footer .btn { width: 100%; margin-left: 0; }
    .modal-footer .btn + .btn { margin-top: 8px; }

    /* Таблиці */
    .table > thead > tr > th { font-size: 11px; padding: 9px 8px; }
    .table > tbody > tr > td { font-size: 13px; padding: 8px; }

    /* Панель дій (зум/поворот фото тощо) */
    .btn-toolbar { text-align: center; }
    .btn-toolbar > .btn-group { float: none; display: inline-block; }

    /* Пагінація компактніша */
    .pagination > li > a,
    .pagination > li > span { padding: 6px 10px; margin: 0 2px; }

    /* Медіа не вилазить за межі екрана */
    img { max-width: 100%; }

    .file-field .file-field-btn { padding: 7px 10px; }

    /* Плитки дашборда - по одній в ряд */
    .tile-box { margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
   Вузькі телефони (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .col-xs-5,
    .col-xs-6 { width: 100%; }

    #mainMenu a { width: calc(50% - 10px); }

    .btn { padding: 8px 12px; }

    .table > tbody > tr > td { font-size: 12px; }

    /* Довгий підпис у кнопці не має розривати макет */
    .btn-block { white-space: normal; }
}