/* ============================================================
   Supreme LAB — Мобільний перегляд (≤ 900px)
   Прогресивне покращення: десктопна версія лишається незмінною.
   Уся розмітка нижче застосовується ЛИШЕ на вузьких екранах.
   ============================================================ */

@media (max-width: 900px) {

    /* --- Базові налаштування --- */
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0 !important;
        /* верхній відступ — приблизний резерв під шапку; точну висоту виставляє JS */
        padding: 150px 0 74px 0;
        background: #eef1f6 !important;
        font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 15px;
        -webkit-tap-highlight-color: transparent;
    }

    body.m-lock {
        overflow: hidden;
    }

    /* ---------------------------------------------------------
       ВЕРХНЯ ПАНЕЛЬ (мобільна шапка)
       Ряд 1: ☰ меню (=налаштування)  +  «Supreme LAB»
       Ряд 2: поле пошуку  +  кнопка скидання (↻)
       Ряд 3: селектор режиму пошуку (по якому полю шукати)
       --------------------------------------------------------- */
    .header {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* оригінальний вміст шапки на мобільному ховаємо одразу через media query
       (не чекаємо body.m-on від JS — інакше мигає велика іконка LPD / десктопні елементи) */
    .header > *:not(.m-header) {
        display: none !important;
    }

    .m-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px 10px 12px;
        background: #0c274b;
    }

    /* Ряд 1: меню (зліва) — тризуб (строго по центру) — назва (справа) */
    .m-hrow-top {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 42px;
    }

    .m-menu {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        /* без окремого фону — кнопка не виділяється, лишаються самі смужки */
        background: transparent;
        color: #fff;
        line-height: 1;
        cursor: pointer;
    }

    /* Три «жирні» смужки замість тонкого гліфа ☰ */
    .m-menu-bars {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
    }

    .m-menu-bars > span {
        display: block;
        width: 100%;
        height: 2.5px;
        border-radius: 2px;
        background: #fff;
    }

    .m-menu:active {
        background: rgba(255, 255, 255, 0.12);
    }

    /* Тризуб абсолютно по центру рядка — не залежить від ширини меню чи назви */
    .m-gerb {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 34px;
        width: auto;
        pointer-events: none;
    }

    .m-brand {
        flex: 0 1 auto;
        min-width: 0;
        text-align: right;
        color: #fff;
        font-size: 19px;
        font-weight: normal;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-hrow-search {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .m-searchbox {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        height: 44px;
        padding: 0 10px;
        background: #fff;
        border-radius: 10px;
    }

    .m-search-ic {
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        opacity: 0.7;
    }

    .m-search-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 15px;
        color: #1c2b3a;
    }

    .m-search-clear {
        flex: 0 0 auto;
        display: none;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 50%;
        background: #eef1f6;
        color: #45566b;
        font-size: 13px;
        cursor: pointer;
    }

    .m-searchbox.m-has-text .m-search-clear {
        display: inline-flex;
    }

    .m-refresh {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    .m-refresh:active {
        background: rgba(255, 255, 255, 0.24);
    }

    .m-hrow-mode {
        position: relative;
    }

    .m-mode-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 12px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.10);
        color: #dfe7f2;
        font-family: inherit;
        font-size: 13px;
        cursor: pointer;
        text-align: left;
    }

    .m-mode-label {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-mode-caret {
        flex: 0 0 auto;
        transition: transform 0.2s ease;
    }

    .m-hrow-mode.m-open .m-mode-caret {
        transform: rotate(180deg);
    }

    .m-mode-menu {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 1100;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(8, 20, 38, 0.28);
        overflow: hidden;
    }

    .m-hrow-mode.m-open .m-mode-menu {
        display: block;
    }

    .m-mode-item {
        padding: 14px 16px;
        font-size: 15px;
        color: #17324f;
        border-bottom: 1px solid #eef1f6;
        cursor: pointer;
    }

    .m-mode-item:last-child {
        border-bottom: 0;
    }

    .m-mode-item.m-current {
        background: #eaf1fb;
        color: #0c274b;
        font-weight: normal;
    }

    .m-mode-item:active {
        background: #f0f4fa;
    }

    /* ---------------------------------------------------------
       ТАБЛИЦЯ → КАРТКИ
       --------------------------------------------------------- */
    .table-container {
        padding: 12px 10px 0 10px !important;
    }

    .table-container table {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: separate !important;
        background: transparent !important;
    }

    /* Заголовки таблиці ховаємо — їх замінюють підписи в картках + шторка фільтрів */
    .table-container thead {
        display: none !important;
    }

    .table-container table,
    .table-container tbody,
    .table-container tr,
    .table-container td {
        display: block !important;
        width: auto !important;
    }

    /* Кожен рядок стає карткою */
    .table-container tbody tr {
        display: flex !important;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #e6ebf2;
        border-radius: 16px;
        margin: 0 0 14px 0;
        padding: 6px 16px 8px 16px;
        box-shadow: 0 2px 8px rgba(12, 39, 75, 0.06), 0 1px 2px rgba(12, 39, 75, 0.08);
        overflow: hidden;
    }

    .table-container tbody tr:active {
        border-color: #cdd8e6;
    }

    .table-container tbody td {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        border: 0 !important;
        border-bottom: 1px solid #eef1f6 !important;
        padding: 9px 0 !important;
        text-align: left !important;
        font-size: 14px;
        line-height: 1.45;
        color: #1c2b3a;
        min-width: 0;
        word-break: break-word;
    }

    .table-container tbody td:last-child {
        border-bottom: 0 !important;
    }

    /* Підпис поля (назва колонки) */
    .table-container tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: normal;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #7688a0;
    }

    /* Порожні клітинки не показуємо, щоб картка не роздувалась */
    .table-container tbody td.m-empty {
        display: none !important;
    }

    /* № справи — як заголовок картки (перша позиція) */
    .table-container tbody td.case-number {
        order: -2;
        font-size: 17px;
        font-weight: normal;
        color: #0c274b;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #e6ebf2 !important;
    }

    .table-container tbody td.case-number::before {
        color: #9aa7b8;
    }

    /* Юрисдикція — компактний «чіп» одразу під номером */
    .table-container tbody td.jurisdiction-class {
        order: -1;
    }

    .table-container tbody td.jurisdiction-class::before {
        margin-bottom: 4px;
    }

    .table-container tbody td.jurisdiction-class a {
        display: inline-block;
        align-self: flex-start;
        background: #eaf1fb;
        color: #0c274b;
        font-weight: normal;
        font-size: 13px;
        padding: 4px 12px;
        border-radius: 999px;
        text-decoration: none;
    }

    /* Клітинки з довгим текстом (Суть питання, Правова позиція тощо) */
    .table-container tbody .scrollable-div,
    .table-container tbody .scrollable-textarea {
        width: 100% !important;
        height: auto !important;
        max-height: 240px;
        border: 0 !important;
        background: #f6f8fc !important;
        border-radius: 8px;
        padding: 10px 12px !important;
        margin-top: 2px;
        font-size: 14px;
        line-height: 1.5;
        overflow-y: auto;
        box-sizing: border-box;
    }

    /* Блок із знайденим збігом розкриваємо повністю, щоб підсвічене слово
       не ховалось за внутрішнім скролом (див. focusSearchMatch у mobile.js) */
    .table-container tbody .scrollable-div.m-expanded,
    .table-container tbody .scrollable-textarea.m-expanded {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Внутрішні посилання (юрисдикція, доповідач, стан) */
    .table-container tbody td a {
        color: #14539e;
    }

    /* Зовнішні посилання-документи — як акуратні кнопки */
    .table-container tbody td a.m-doc {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #0c274b;
        color: #ffffff !important;
        text-decoration: none;
        padding: 9px 13px;
        border-radius: 9px;
        font-weight: normal;
        font-size: 13px;
        margin: 4px 8px 2px 0;
        max-width: 100%;
    }

    .table-container tbody td a.m-doc:active {
        background: #134786;
    }

    /* Підсвічування пошуку лишаємо як є */
    .table-container tbody td span[style*="yellow"] {
        border-radius: 3px;
        padding: 0 2px;
    }

    /* Повідомлення «Записи не знайдено» */
    .table-container tbody td[colspan] {
        text-align: center !important;
        padding: 40px 16px !important;
        color: #5b6b80;
        background: #fff;
        border-radius: 14px;
        font-size: 16px;
    }

    .table-container tbody td[colspan]::before {
        content: none;
    }

    /* ---------------------------------------------------------
       ПАГІНАЦІЯ
       --------------------------------------------------------- */
    .pagination {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 4px 0 18px 0 !important;
        font-size: 14px;
        color: #45566b;
    }

    .pagination a {
        flex: 1 1 40%;
        min-width: 120px;
        text-align: center;
        padding: 12px 10px !important;
        font-size: 15px;
        font-weight: normal;
        border-radius: 10px !important;
    }

    .pagination .total-records {
        flex-basis: 100%;
        text-align: center;
        color: #5b6b80;
    }

    /* ---------------------------------------------------------
       НИЖНЯ ПАНЕЛЬ ДІЙ (Фільтри / Сортування / Скинути / Вгору)
       --------------------------------------------------------- */
    .m-actionbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4000;
        display: flex;
        gap: 4px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px;
        background: #ffffff;
        border-top: 1px solid #e2e7ee;
        box-shadow: 0 -2px 12px rgba(12, 39, 75, 0.08);
    }

    /* Пункт-таб: іконка зверху, підпис знизу; усі однакової ширини */
    .m-act {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 4px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #0c274b;
        font-family: inherit;
        font-size: 12px;
        font-weight: normal;
        cursor: pointer;
    }

    .m-act:active {
        background: #eef1f6;
    }

    .m-act-ic {
        position: relative;
        font-size: 21px;
        line-height: 1;
    }

    .m-act-lbl {
        line-height: 1;
    }

    .m-badge {
        position: absolute;
        top: -7px;
        left: 100%;
        margin-left: -8px;
        background: #e8542f;
        color: #fff;
        border-radius: 999px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .m-badge.m-hidden {
        display: none;
    }

    /* ---------------------------------------------------------
       АВТОПРИХОВУВАННЯ ПАНЕЛЕЙ ПРИ СКРОЛІ
       • завантаження — панелі показані;
       • скрол вниз — ховаються (більше місця для контенту);
       • скрол трохи вгору — знову з'являються.
       --------------------------------------------------------- */
    .header,
    .m-actionbar {
        transition: transform 0.28s ease;
        will-change: transform;
    }

    body.m-nav-hidden .header {
        transform: translateY(-100%);
    }

    body.m-nav-hidden .m-actionbar {
        transform: translateY(100%);
    }

    /* ---------------------------------------------------------
       ОВЕРЛЕЙ + НИЖНІ ШТОРКИ (bottom sheets)
       --------------------------------------------------------- */
    .m-overlay {
        position: fixed;
        inset: 0;
        background: rgba(8, 20, 38, 0.5);
        z-index: 4500;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease;
    }

    .m-overlay.m-show {
        opacity: 1;
        visibility: visible;
    }

    .m-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5000;
        display: flex;
        flex-direction: column;
        max-height: 88vh;
        background: #f4f6f9;
        border-radius: 18px 18px 0 0;
        transform: translateY(101%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -8px 28px rgba(8, 20, 38, 0.28);
    }

    .m-sheet.m-show {
        transform: translateY(0);
    }

    .m-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: #0c274b;
        color: #fff;
        border-radius: 18px 18px 0 0;
    }

    .m-sheet-head h3 {
        margin: 0;
        font-size: 17px;
        font-weight: normal;
    }

    .m-close {
        background: rgba(255, 255, 255, 0.16);
        border: 0;
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
    }

    /* Кнопка «Перехід до Бази правових позицій ВС» — перший елемент у тілі
       шторки налаштувань (над «Справ на сторінці»). Повна ширина, світла. */
    .m-lpdlink {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 18px;
        background: #fff;
        border: 1px solid #cfd8e3;
        border-radius: 11px;
        text-decoration: none;
        color: #0c274b;
        font-size: 14.5px;
        font-weight: normal;
        line-height: 1.3;
    }

    .m-lpdlink:active {
        background: #eef2f8;
        border-color: #0c274b;
    }

    .m-lpdlink-txt {
        min-width: 0;
    }

    .m-lpdlink-ic {
        flex: 0 0 auto;
        font-size: 16px;
    }

    .m-sheet-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px;
    }

    .m-sheet-foot {
        display: flex;
        gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) 14px;
        border-top: 1px solid #e2e7ee;
        background: #fff;
    }

    .m-btn {
        flex: 1 1 auto;
        height: 48px;
        border: 0;
        border-radius: 11px;
        font-size: 15px;
        font-weight: normal;
        font-family: inherit;
        cursor: pointer;
    }

    .m-btn-apply {
        background: #0c274b;
        color: #fff;
    }

    .m-btn-apply:active {
        background: #134786;
    }

    .m-btn-reset {
        flex: 0 0 40%;
        background: #fff;
        color: #c0392b;
        border: 1px solid #e6c3bd;
    }

    /* ---------------------------------------------------------
       ГРУПИ ФІЛЬТРІВ У ШТОРЦІ
       --------------------------------------------------------- */
    .m-fgroup {
        background: #fff;
        border: 1px solid #e6ebf2;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
    }

    .m-flabel {
        display: block;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #0c274b;
        margin-bottom: 8px;
    }

    /* Нейтралізуємо «десктопне» абсолютне позиціонування перенесених віджетів */
    .m-sheet .filter-wrapper {
        position: static !important;
        width: 100% !important;
        display: flex;
        gap: 8px;
        align-items: stretch;
    }

    .m-sheet .filter-wrapper input[type="text"] {
        flex: 1 1 auto;
        width: 100% !important;
        box-sizing: border-box;
        height: 46px;
        padding: 10px 12px;
        border: 1px solid #cfd8e3;
        border-radius: 9px;
        font-size: 15px;
        background: #fff;
        color: #1c2b3a;
    }

    .m-sheet .filter-wrapper input[type="text"]:focus {
        outline: none;
        border-color: #0c274b;
        box-shadow: 0 0 0 3px rgba(12, 39, 75, 0.12);
    }

    .m-sheet .clear-button {
        flex: 0 0 auto;
        height: 46px;
        border-radius: 9px;
        padding: 0 14px;
    }

    /* Дерева-списки (юрисдикція / підстава / стан):
       за замовчуванням ЗГОРНУТІ, розкриваються по кліку на поле */
    .m-sheet #nav,
    .m-sheet #nav2,
    .m-sheet #nav3 {
        display: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .m-sheet .m-open #nav,
    .m-sheet .m-open #nav2,
    .m-sheet .m-open #nav3 {
        display: block !important;
    }

    /* Поле-тригер, що розкриває дерево */
    .m-sheet .m-collapsible .filter-wrapper {
        cursor: pointer;
    }

    .m-sheet .m-collapsible .filter-wrapper input[type="text"] {
        cursor: pointer;
        caret-color: transparent; /* поле лише відкриває список, ввід не потрібен */
    }

    .m-chevron {
        flex: 0 0 auto;
        align-self: center;
        margin-left: 2px;
        color: #7688a0;
        font-size: 14px;
        transition: transform 0.2s ease;
        pointer-events: none;
    }

    .m-sheet .m-open .m-chevron {
        transform: rotate(180deg);
    }

    .m-sheet #nav ul,
    .m-sheet #nav2 ul,
    .m-sheet #nav3 ul,
    .m-sheet #nav li ul,
    .m-sheet #nav2 li ul,
    .m-sheet #nav3 li ul {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Підзаголовки палат (ВП ВС », КАС ВС »…) — лише в дереві юрисдикції (#nav),
       де верхній рівень «> ul > li > a» є саме заголовками палат.
       У #nav2 (Підстава передачі) цей рівень — це самі опції з чекбоксами,
       тож сюди його НЕ додаємо (інакше pointer-events:none блокує кліки). */
    .m-sheet #nav > ul > li > a {
        display: block;
        padding: 10px 4px 4px 4px !important;
        font-size: 12px !important;
        font-weight: normal;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #7688a0 !important;
        pointer-events: none;
    }

    /* Пункти з чекбоксами — зручні для дотику */
    .m-sheet #nav li a,
    .m-sheet #nav2 li a,
    .m-sheet #nav3 li a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 8px !important;
        font-size: 15px !important;
        color: #17324f !important;
        white-space: normal !important;
        border-bottom: 1px solid #eef1f6;
        background: transparent !important;
    }

    .m-sheet #nav li li a,
    .m-sheet #nav2 li a,
    .m-sheet #nav3 li a {
        padding-left: 8px !important;
    }

    .m-sheet #nav input[type="checkbox"],
    .m-sheet #nav2 input[type="checkbox"],
    .m-sheet #nav3 input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin: 0 !important;
        flex: 0 0 auto;
    }

    /* Приховуємо вбудовані посилання «Застосувати» — застосування через кнопку внизу */
    .m-sheet a[onclick^="applyFilters"] {
        display: none !important;
    }

    /* Автодоповнення доповідачів — світлий випадаючий список у потік
       (на десктопі він темно-синій; у світлій шторці робимо світлим і читабельним) */
    .m-sheet .dropdown {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 240px !important;
        margin-top: 8px !important;
        background: #ffffff !important;
        border: 1px solid #cfd8e3 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .m-sheet .dropdown-item {
        padding: 13px 14px !important;
        font-size: 15px;
        color: #17324f !important;
        border-bottom: 1px solid #eef1f6;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .m-sheet .dropdown-item:last-child {
        border-bottom: 0;
    }

    .m-sheet .dropdown-item:hover,
    .m-sheet .dropdown-item:active {
        background: #eaf1fb !important;
        color: #0c274b !important;
    }

    /* ---------------------------------------------------------
       ШТОРКА СОРТУВАННЯ
       --------------------------------------------------------- */
    .m-sortrow {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        background: #fff;
        border: 1px solid #e6ebf2;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
    }

    .m-sortname {
        font-size: 15px;
        font-weight: normal;
        color: #17324f;
    }

    .m-sortdir {
        display: flex;
        gap: 8px;
    }

    /* Чіткі текстові підписи напрямку замість незрозумілих стрілок */
    .m-sortdir button {
        flex: 1 1 0;
        min-width: 0;
        height: 44px;
        padding: 0 8px;
        border: 1px solid #cfd8e3;
        background: #fff;
        border-radius: 9px;
        font-size: 14px;
        font-weight: normal;
        font-family: inherit;
        color: #0c274b;
        cursor: pointer;
        white-space: nowrap;
    }

    .m-sortdir button.m-active {
        background: #0c274b;
        color: #fff;
        border-color: #0c274b;
    }

    /* ---------------------------------------------------------
       ШТОРКА НАЛАШТУВАНЬ (к-сть на сторінці + поля картки)
       --------------------------------------------------------- */
    .m-set-section {
        margin-bottom: 18px;
    }

    .m-set-title {
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #0c274b;
        margin-bottom: 10px;
    }

    .m-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    .m-chip {
        flex: 1 1 auto;
        min-width: 56px;
        height: 46px;
        border: 1px solid #cfd8e3;
        background: #fff;
        border-radius: 10px;
        font-size: 16px;
        font-weight: normal;
        color: #0c274b;
        cursor: pointer;
        font-family: inherit;
    }

    .m-chip.m-chip-on {
        background: #0c274b;
        color: #fff;
        border-color: #0c274b;
    }

    .m-set-num {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .m-set-numlbl {
        font-size: 14px;
        color: #45566b;
        flex: 0 0 auto;
    }

    .m-num {
        flex: 1 1 auto;
        height: 46px;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid #cfd8e3;
        border-radius: 9px;
        font-size: 16px;
        background: #fff;
        color: #1c2b3a;
    }

    .m-fieldlist {
        background: #fff;
        border: 1px solid #e6ebf2;
        border-radius: 12px;
        overflow: hidden;
    }

    .m-fieldrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        border-bottom: 1px solid #eef1f6;
        cursor: pointer;
    }

    .m-fieldrow:last-child {
        border-bottom: 0;
    }

    .m-fieldname {
        font-size: 15px;
        color: #17324f;
    }

    .m-fieldlist input[type="checkbox"] {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }

    /* Поля, приховані користувачем через налаштування */
    .table-container tbody td.m-hide {
        display: none !important;
    }

    /* ---------------------------------------------------------
       ЛІЧИЛЬНИК ЗНАЙДЕНИХ СПРАВ (між пошуком і картками, один рядок)
       --------------------------------------------------------- */
    .m-count {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin: 0 0 10px 0;
        padding: 9px 14px;
        background: #fff;
        border: 1px solid #e6ebf2;
        border-radius: 10px;
        font-size: 14px;
        color: #45566b;
    }

    .m-count-num {
        color: #0c274b;
        font-size: 15px;
    }

    /* ---------------------------------------------------------
       Календар діапазону дат — по центру екрана й вміщений по ширині.
       Стандартно це діапазонний пікер (два місяці по 400px поруч),
       який на вузькому екрані обрізався. Тут: фіксуємо по центру,
       обмежуємо ширину, а два місяці ставимо один під одним.
       --------------------------------------------------------- */
    .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        z-index: 6000 !important;
        box-sizing: border-box !important;
        width: 94vw !important;
        max-width: 94vw !important;
        max-height: 88vh !important;
        overflow: auto !important;
    }

    /* стрілка-вказівник не потрібна для центрованого календаря */
    .daterangepicker:before,
    .daterangepicker:after {
        display: none !important;
    }

    /* два місяці — один під одним, кожен на всю ширину */
    .daterangepicker .drp-calendar {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        padding: 8px !important;
    }

    .daterangepicker.show-calendar .drp-calendar.left {
        border-right: 0 !important;
    }

    /* table-layout: fixed — колонки ділять ширину порівну й НЕ переповнюють */
    .daterangepicker .calendar-table,
    .daterangepicker .calendar-table table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Перебиваємо явні width:32px/min-width:32px з daterangepicker1.css
       (той самий селектор + !important), щоб 7 колонок ділили ширину
       порівну й вміщувались, а не переповнювали календар. */
    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        padding: 2px !important;
        font-weight: normal !important;
    }

    .daterangepicker .drp-buttons {
        display: block !important;
        text-align: right;
    }
}

/* Якщо екран знову став широким — прибираємо мобільні елементи
   (JS робить reload при зміні, але це підстраховка) */
@media (min-width: 901px) {
    .m-actionbar,
    .m-overlay,
    .m-sheet {
        display: none !important;
    }
}