/*
 * Мобильная вёрстка PriceMatrixWeb.
 * Все правила — только для узких экранов (< 768px, брейкпоинт Bootstrap 3 xs), десктоп не затрагивается.
 * Поведение, которое нельзя сделать CSS (обёртки таблиц, размеры диалогов) — в js/mobile.js.
 * Проверка: PriceMatrixWeb.MobileTests (pytest + Playwright), см. README там.
 */
@media (max-width: 767px) {

    /* ---------- основа ---------- */
    html, body { -webkit-text-size-adjust: 100%; }
    body { font-size: 14px; }
    #page-wrapper { padding-left: 15px; padding-right: 15px; min-width: 0; }
    #wrapper { min-height: 0 !important; }
    img, video, iframe, canvas, svg { max-width: 100%; }
    img, video { height: auto; }
    pre { white-space: pre-wrap; word-break: break-word; }
    h1 { font-size: 24px; margin-top: 12px; }
    h2 { font-size: 20px; }
    h3 { font-size: 17px; }

    /* поля ввода: не шире экрана, 16px — иначе iOS зумит страницу при фокусе */
    input, select, textarea, .form-control { max-width: 100%; }
    input[type=text], input[type=search], input[type=email], input[type=number], input[type=password],
    input[type=url], input[type=tel], input[type=date], select, textarea, .form-control { font-size: 16px; }
    .form-inline .form-control, .form-inline select, .form-inline input { width: 100%; }
    .input-group { max-width: 100%; }
    /* .input-group (display:table) без addon/кнопок используется просто как контейнер — растягивается под содержимое */
    .input-group:not(:has(> .input-group-addon, > .input-group-btn)) { display: block; }
    select[class*="col-"] { float: none; }

    /* кнопки и группы кнопок переносятся, а не уезжают вправо */
    .btn-group, .btn-toolbar { flex-wrap: wrap; white-space: normal; max-width: 100%; }
    .btn-group:not(.dropdown):not(.open) { display: inline-flex; }
    .btn { white-space: normal; }
    .pull-right { float: none !important; }
    [align=right] { text-align: left; }

    /* ---------- верхняя панель и меню ---------- */
    .navbar { min-height: 0; }
    .navbar-top-links { float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
                        margin: 0 !important; padding: 8px 64px 8px 12px; font-size: 13px; line-height: 1.3; min-height: 50px; color: #555; }
    /* email — мелкой отдельной строкой, ниже название кампании и меню пользователя */
    .navbar-top-links > span:first-of-type { flex: 1 1 100%; font-size: 11px; color: #888; }
    .navbar-top-links > span:empty { display: none; }
    .navbar-top-links > li > a { padding: 4px 6px; min-height: 0; }
    .navbar-top-links > li, .navbar-top-links > span { display: inline-block; float: none; }
    .navbar-top-links > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .navbar-top-links .dropdown-menu { position: absolute; right: 0; left: auto; max-width: calc(100vw - 16px); }
    .navbar > .navbar-toggle { position: absolute; top: 4px; right: 8px; margin: 0; z-index: 5; }
    .navbar { position: relative; }
    .navbar-collapse { max-height: none; border-top: 1px solid #e7e7e7; clear: both; }
    .navbar-collapse.collapse:not(.in) { display: none !important; }
    .navbar-nav { margin: 0; }
    .navbar-nav > li > a { padding: 10px 14px; }
    .navbar-nav .open .dropdown-menu, .navbar-nav .dropdown-menu { position: static; float: none; width: auto; max-width: 100%;
                                     box-shadow: none; border: 0; margin: 0; background: #fff; }
    .navbar-nav .dropdown-menu > li > a, .navbar-nav .dropdown-submenu > a { white-space: normal; padding: 8px 14px 8px 28px; line-height: 1.35; }
    .dropdown-submenu > .dropdown-menu { position: static !important; left: auto !important; margin: 0 !important; padding-left: 12px; }
    /* подменю открываются тапом (js/mobile.js ставит .pm-open), «залипший» hover на телефоне не используется */
    .dropdown-submenu:not(.pm-open) > .dropdown-menu { display: none !important; }
    .dropdown-submenu.pm-open > .dropdown-menu { display: block !important; }
    .dropdown-submenu > a:after { transform: rotate(90deg); }
    .dropdown-submenu.pm-open > a:after { transform: rotate(-90deg); }
    .dropdown-menu { max-width: calc(100vw - 16px); }
    .dropdown-menu > li > a { white-space: normal; }

    /* ---------- таблицы ---------- */
    /* широкая таблица скроллится внутри своей обёртки (js/mobile.js добавляет .pm-xscroll), страница — нет */
    .pm-xscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .table-responsive { overflow-x: auto; border: 0; }
    /* обёртки DataTables (стандартная и самописная .dataTable_wrapper) — скролл сразу из CSS, не дожидаясь js */
    .dataTables_wrapper, .dataTable_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* строки Bootstrap внутри DataTables (поиск, пагинация) с отрицательными отступами давали лишние 15px */
    .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
    .dataTables_wrapper > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info { text-align: left !important; float: none !important; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
    .dataTables_wrapper .pagination { flex-wrap: wrap; display: flex; }
    .table > thead > tr > th, .table > tbody > tr > td { padding: 6px; }

    /* таблица-список карточками (js/mobile.js ставит .pm-cards и data-label каждой ячейке) */
    table.pm-cards, table.pm-cards > tbody, table.pm-cards > tbody > tr, table.pm-cards > tbody > tr > td { display: block; width: auto !important; }
    table.pm-cards { border: 0 !important; background: none; margin-bottom: 8px; }
    table.pm-cards > thead { display: none; }
    table.pm-cards > tbody > tr { border: 1px solid #dde3ea; border-radius: 10px; margin: 0 0 10px; padding: 8px 12px;
                                  background: #fff !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
    table.pm-cards > tbody > tr > td { display: flex; gap: 10px; align-items: baseline; border: 0 !important;
                                       padding: 3px 0 !important; text-align: left !important; background: none !important;
                                       overflow-wrap: anywhere; min-height: 0; height: auto !important; }
    table.pm-cards > tbody > tr > td[data-label]::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%;
                                       font-size: 12px; font-weight: 600; color: #64748b; line-height: 1.3; }
    table.pm-cards > tbody > tr > td[data-label=""]::before { display: none; }
    table.pm-cards > tbody > tr > td > .pm-cards-v { flex: 1 1 auto; min-width: 0; }
    table.pm-cards > tbody > tr > td.pm-cards-empty { display: none; }
    table.pm-cards > tbody > tr > td:first-child { font-weight: 600; }
    table.pm-cards > tbody > tr.pm-cards-group { border: 0; box-shadow: none; background: none !important; padding: 10px 0 4px; margin: 0; }
    table.pm-cards > tbody > tr.pm-cards-group > td { padding: 0 !important; }
    table.pm-cards > tbody > tr.pm-cards-group > td::before { display: none; }
    table.pm-cards .pm-cards-v input:not([type=checkbox]):not([type=radio]), table.pm-cards .pm-cards-v select,
    table.pm-cards .pm-cards-v textarea { width: 100% !important; min-width: 0 !important; }
    table.pm-cards.dataTable { width: 100% !important; }

    /* таблица-раскладка без заголовков: ячейки друг под другом */
    table.pm-stack, table.pm-stack > tbody, table.pm-stack > tbody > tr, table.pm-stack > tbody > tr > td,
    table.pm-stack > tr, table.pm-stack > tr > td, table.pm-stack > thead, table.pm-stack > thead > tr, table.pm-stack > thead > tr > th {
        display: block; width: auto !important; min-width: 0 !important; }
    table.pm-stack > tbody > tr > td, table.pm-stack > tr > td { padding: 3px 0 !important; border: 0 !important; }
    table.pm-stack > tbody > tr { margin-bottom: 6px; }
    table.pm-stack input:not([type=checkbox]):not([type=radio]), table.pm-stack select, table.pm-stack textarea { max-width: 100% !important; }

    /* ---------- DevExtreme: грид скроллится сам, контейнер — не шире экрана ---------- */
    .dx-widget, .dx-datagrid { max-width: 100%; }
    /* панель инструментов грида (поиск, кнопки, текст статуса): DevExtreme раскладывает её абсолютными блоками,
       на узком экране они наезжают друг на друга — переносим по строкам */
    .dx-datagrid-header-panel .dx-toolbar .dx-toolbar-items-container { height: auto !important; display: flex; flex-wrap: wrap; gap: 4px; }
    .dx-datagrid-header-panel .dx-toolbar-before, .dx-datagrid-header-panel .dx-toolbar-center,
    .dx-datagrid-header-panel .dx-toolbar-after { position: static !important; display: flex; flex-wrap: wrap; align-items: center;
                                                  gap: 4px; margin: 0 !important; padding: 0 !important; max-width: 100%; }
    .dx-datagrid-header-panel .dx-toolbar-after { margin-left: auto !important; }
    .dx-datagrid-header-panel .dx-toolbar-item { padding: 0 !important; max-width: 100%; white-space: normal; }
    .dx-datagrid-header-panel .dx-toolbar-item .dx-texteditor, .dx-datagrid-search-panel { max-width: 100%; }
    .dx-datagrid-header-panel .dx-toolbar-text-auto-hide .dx-button .dx-button-text { display: none; }

    /* ---------- диалоги ---------- */
    .modal-dialog { width: auto !important; margin: 8px !important; }
    .modal-body { overflow-x: auto; }
    .ui-dialog { max-width: 100vw; }
    .ui-dialog .ui-dialog-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

    /* плашка «Вам нужна помощь?» в правом нижнем углу — компактная, чтобы не закрывала содержимое */
    .bottom_right_corner { padding: 5px 10px !important; margin: 6px !important; font-size: 12px; max-width: calc(100vw - 12px);
                           box-shadow: 0 2px 8px rgba(0,0,0,.15); opacity: .95; }

    /* ---------- прочее ---------- */
    .panel, .well { max-width: 100%; }
    .tab-content, .nav-tabs { max-width: 100%; }
    .nav-tabs { display: flex; flex-wrap: wrap; }
    .nav-tabs > li { float: none; }
    .select2-container { max-width: 100% !important; }
}