/* ==========================================================================
   ScanFood admin — адаптив для телефона и планшета.
   Подключается ПОСЛЕ AdminLTE.min.css в resources/views/vendor/adminlte/master.blade.php.

   ПРАВИЛО ФАЙЛА: десктоп (>= 992px) должен остаться ровно таким, каким был.
   Поэтому вне медиа-запросов тут живут только заведомо нейтральные вещи:
   класс-обёртка .table-scroll (на широком экране таблица влезает — скролла нет)
   и скрытие компактной пагинации (её на десктопе просто не видно).
   Всё поведенческое — внутри @media (max-width: 991px) / (max-width: 767px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Таблицы: скролл внутри своего блока, а не «уезжающая» страница.
   AdminLTE ставит .wrapper{overflow-x:hidden}, поэтому широкая таблица не
   скроллилась, а ОБРЕЗАЛАСЬ — правые колонки были недоступны вообще.
   -------------------------------------------------------------------------- */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ВАЖНО для «десктоп как был». Обёртка встаёт между родителем и таблицей и
   разрывает связки «родитель > .table», на которых у Bootstrap 3 и AdminLTE
   держатся отступы, рамки и скругления таблиц внутри .panel и .box-body.
   Без этого пагинация уезжала на 20px вниз, а у таблиц в панелях появлялись
   лишние рамки и сдвиги. Ниже — точное зеркало этих правил через обёртку
   (сгенерировано из bootstrap 3.3.7 и AdminLTE.min.css). */

/* AdminLTE: .box-body>.table{margin-bottom:0} */
.box-body > .table-scroll > .table {
    margin-bottom: 0;
}

/* Bootstrap 3: .panel>.table{...} */
.panel > .table-scroll > .table {
    margin-bottom: 0;
}

.panel > .table-scroll > .table caption {
    padding-right: 15px;
    padding-left: 15px;
}

.panel > .table-scroll > .table:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel > .table-scroll > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-scroll > .table:first-child > thead:first-child > tr:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel > .table-scroll > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-scroll > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-scroll > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-scroll > .table:first-child > thead:first-child > tr:first-child th:first-child {
    border-top-left-radius: 3px;
}

.panel > .table-scroll > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-scroll > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-scroll > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-scroll > .table:first-child > thead:first-child > tr:first-child th:last-child {
    border-top-right-radius: 3px;
}

.panel > .table-scroll > .table:last-child {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel > .table-scroll > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-scroll > .table:last-child > tfoot:last-child > tr:last-child {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel > .table-scroll > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-scroll > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-scroll > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-scroll > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
    border-bottom-left-radius: 3px;
}

.panel > .table-scroll > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-scroll > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-scroll > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-scroll > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
    border-bottom-right-radius: 3px;
}

.panel > .table-scroll + .panel-body,
.panel > .panel-body + .table-scroll {
    border-top: 1px solid #ddd;
}

.panel > .table-scroll > .table > tbody:first-child > tr:first-child td,
.panel > .table-scroll > .table > tbody:first-child > tr:first-child th {
    border-top: 0;
}

.panel > .table-scroll > .table-bordered {
    border: 0;
}

.panel > .table-scroll > .table-bordered > tbody > tr > td:first-child,
.panel > .table-scroll > .table-bordered > tbody > tr > th:first-child,
.panel > .table-scroll > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-scroll > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-scroll > .table-bordered > thead > tr > td:first-child,
.panel > .table-scroll > .table-bordered > thead > tr > th:first-child {
    border-left: 0;
}

.panel > .table-scroll > .table-bordered > tbody > tr > td:last-child,
.panel > .table-scroll > .table-bordered > tbody > tr > th:last-child,
.panel > .table-scroll > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-scroll > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-scroll > .table-bordered > thead > tr > td:last-child,
.panel > .table-scroll > .table-bordered > thead > tr > th:last-child {
    border-right: 0;
}

.panel > .table-scroll > .table-bordered > tbody > tr:first-child > td,
.panel > .table-scroll > .table-bordered > tbody > tr:first-child > th,
.panel > .table-scroll > .table-bordered > thead > tr:first-child > td,
.panel > .table-scroll > .table-bordered > thead > tr:first-child > th {
    border-bottom: 0;
}

.panel > .table-scroll > .table-bordered > tbody > tr:last-child > td,
.panel > .table-scroll > .table-bordered > tbody > tr:last-child > th,
.panel > .table-scroll > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-scroll > .table-bordered > tfoot > tr:last-child > th {
    border-bottom: 0;
}

/* Bootstrap 3 включает .table-responsive только ниже 768px, из-за чего на
   планшете 768–991 таблица снова обрезалась. Выравниваем поведение. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   2. Пагинация: компактный блок скрыт везде, кроме телефона.
   -------------------------------------------------------------------------- */
.pagination-compact {
    display: none;
}

/* --------------------------------------------------------------------------
   3. Bootstrap-3 .container имеет ФИКСИРОВАННУЮ ширину (750/970/1170px).
   Внутри .content-wrapper, у которого слева 230px под меню, такой контейнер
   вылезал за экран на 768 и 1024 (страницы «Продукты» и «Упражнения»).
   Ограничение по родителю нейтрально для 1920 (там 1170 < доступных 1690),
   но чинит планшет. -------------------------------------------------------- */
.content-wrapper .container {
    max-width: 100%;
}

/* ==========================================================================
   УЗКИЙ ДЕСКТОП И НИЖЕ (<= 1199px)
   Отдельная точка нужна ровно из-за требуемого вьюпорта 1024x768: колонки
   col-md-3 там уже 198px, и AdminLTE режет заголовки многоточием.
   На 1920 (эталон «десктоп как был») правила не применяются.
   ========================================================================== */
@media (max-width: 1199px) {

    /* AdminLTE режет .info-box-text многоточием (white-space:nowrap + ellipsis):
       в сводке /admin/api-errors из-за этого не видно ни статусов,
       ни путей эндпоинтов — разрешаем перенос. */
    .info-box-text,
    .progress-description {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .info-box-content {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ==========================================================================
   ПЛАНШЕТ И НИЖЕ (<= 991px)
   ========================================================================== */
@media (max-width: 991px) {

    /* Таблица внутри скролл-обёртки берёт свою естественную ширину:
       колонки не сплющиваются в столбик из одиночных букв, пользователь
       просто протягивает таблицу пальцем вбок. */
    .table-scroll > table,
    .table-responsive > table {
        width: auto;
        min-width: 100%;
        margin-bottom: 0;
    }

    .table-scroll > table > thead > tr > th,
    .table-scroll > table > tbody > tr > td,
    .table-scroll > table > tfoot > tr > td,
    .table-responsive > table > thead > tr > th,
    .table-responsive > table > tbody > tr > td {
        white-space: nowrap;
    }

    /* Колонки со свободным текстом (сообщения, JSON, названия товаров)
       переносятся и не растягивают таблицу на километр. */
    .table-scroll > table td.wrap-cell,
    .table-scroll > table th.wrap-cell,
    .table-responsive > table td.wrap-cell,
    .table-responsive > table th.wrap-cell {
        white-space: normal;
        min-width: 220px;
        max-width: 420px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Внутри ячеек ничего не должно распирать таблицу картинками. */
    .table-scroll img,
    .table-responsive img {
        max-width: 120px;
        height: auto;
    }

    /* Заголовок страницы и хлебные крошки не должны наезжать друг на друга. */
    .content-header > .breadcrumb {
        position: static;
        float: none;
        margin-top: 8px;
        padding: 0;
        display: block;
    }

    /* Длинные строки без пробелов (email, токены, product_id, url). */
    .break-long {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Блоки кода и JSON-выдачи. */
    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

/* ==========================================================================
   ТЕЛЕФОН (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- 2.1 Пагинация: вместо простыни на тысячи страниц — компактный ряд --- */
    .pagination-full {
        display: none;
    }

    .pagination-compact {
        display: block;
    }

    .pagination-compact .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 10px 0;
        padding-left: 0;
    }

    .pagination-compact .pagination > li {
        float: none;
        display: block;
    }

    /* Тапабельный размер: >= 40px по обеим сторонам. */
    .pagination-compact .pagination > li > a,
    .pagination-compact .pagination > li > span {
        min-width: 42px;
        padding: 9px 10px;
        text-align: center;
        font-size: 14px;
        line-height: 1.5;
    }

    /* ---- 2.2 Табы (языки En/Ru/De/... и iOS/Android) — лента с горизонтальным
            скроллом вместо восьми рядов, съедающих пол-экрана. ---- */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1px;
    }

    .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    .nav-tabs > li > a {
        white-space: nowrap;
    }

    /* ---- 2.3 Формы и кнопки ---- */

    /* Ряды кнопок-фильтров (btn-group) переносятся, а не уезжают за край. */
    .btn-group,
    .btn-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .btn-group > .btn,
    .btn-toolbar > .btn {
        float: none;
    }

    /* Скруглённые углы у btn-group при переносе выглядят рвано —
       на телефоне делаем кнопки самостоятельными. */
    .btn-group > .btn:not(:first-child):not(:last-child),
    .btn-group > .btn:first-child,
    .btn-group > .btn:last-child {
        border-radius: 3px;
        margin: 0 4px 4px 0;
    }

    /* Инпуты фиксированной ширины из inline-стилей ужимаем до экрана. */
    .form-control,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="search"],
    select,
    textarea {
        max-width: 100%;
    }

    .form-inline .form-group {
        display: block;
        margin-bottom: 10px;
    }

    .form-inline .form-control {
        width: 100%;
    }

    /* ---- 2.4 Общий контроль переливов ---- */

    /* Коробки/панели не должны выпускать содержимое за край. */
    .box,
    .panel,
    .callout,
    .alert,
    .box-body,
    .panel-body {
        max-width: 100%;
    }

    /* Длинные слова без пробелов в текстовых блоках карточек. */
    .box-body,
    .panel-body,
    .callout,
    .alert,
    .description-block,
    .info-box-content,
    dd, dt, li, p, h1, h2, h3, h4, h5 {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Заголовки страниц немного меньше — иначе длинные имена рвут макет. */
    .content-header > h1 {
        font-size: 22px;
    }

    .content-header > h1 > small {
        display: block;
        margin-top: 4px;
    }

    /* Ссылки-«таблицы» и прочие блоки с явной шириной. */
    [style*="width: 600px"],
    [style*="width:600px"],
    [style*="width: 500px"],
    [style*="width:500px"],
    [style*="width: 400px"],
    [style*="width:400px"] {
        max-width: 100% !important;
    }

    /* AdminLTE прячет часть шапки на телефоне — оставляем кнопку выхода видимой. */
    .main-header .navbar-custom-menu {
        float: right;
    }

    /* Модальные окна и большие изображения. */
    .modal-dialog {
        margin: 10px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}