/* ≤980px: только навигация — горизонтальное меню не влезает, включаем бургер */
@media screen and (max-width: 980px) {
    body {
        padding: 0 15px;
    }
    /* На мобильном шапка липкая и во всю ширину, без «просветов» */
    #header {
        justify-content: space-between;
        position: sticky;
        top: 0;
        margin: 0 -15px 40px;
        padding: 8px 15px;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        /* Цвет браузерной зоны (theme-color = --bg-top) перетекает в шапку:
           сверху сплошной --bg-top, к низу плавно проступает блюр (--bg-blur).
           Переход растянут почти на всю высоту — короткий читался как граница */
        background:
            linear-gradient(to bottom, var(--bg-top) 25%, transparent 85%),
            var(--bg-blur);
    }
    /* Мягкий градиент-«шлейф» под липкой шапкой вместо жёсткой линии: контент
       уходит под шапку плавно, от цвета фона в прозрачность */
    #header::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
        background: linear-gradient(to bottom, var(--bg-top), transparent);
        pointer-events: none;
    }
    .logo-wrapper img {
        max-width: 180px;
    }
    /* Индикатор сети прижат к бургеру, плашка офлайна — под липкой шапкой */
    #net-status {
        margin-right: 10px;
        padding: 4px 10px;
        font-size: 12px;
    }
    #offline-note {
        margin: -26px -15px 20px;
        border-radius: 0;
    }
    .menu-burger {
        display: flex;
    }
    /* Меню — затемняющий оверлей на весь экран, список — карточка под шапкой */
    .menu-wrapper {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(25, 18, 42, 0.45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 111;
        padding: 76px 16px 24px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s;
    }
    .menu-wrapper.active {
        opacity: 1;
        visibility: visible;
    }
    /* Карточка меню «пружинно» раскрывается из угла кнопки-бургера */
    .menu-wrapper ul {
        max-height: 100%;
        overflow: auto;
        transform-origin: top right;
        transform: scale(0.85) translateY(-16px);
        opacity: 0;
        transition: transform 0.34s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.16s ease;
    }
    .menu-wrapper.active ul {
        transform: none;
        opacity: 1;
    }
    /* Админка Битрикса не адаптирована под мобильные — в бургере не показываем */
    .menu-wrapper ul li.hide-mobile {
        display: none;
    }
    /* Пункты подъезжают каскадом; задержки только на открытие —
       закрывается всё разом, без ожидания */
    .menu-wrapper ul li {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .menu-wrapper.active ul li {
        opacity: 1;
        transform: none;
    }
    .menu-wrapper.active ul li:nth-child(1) { transition-delay: 0.03s; }
    .menu-wrapper.active ul li:nth-child(2) { transition-delay: 0.06s; }
    .menu-wrapper.active ul li:nth-child(3) { transition-delay: 0.09s; }
    .menu-wrapper.active ul li:nth-child(4) { transition-delay: 0.12s; }
    .menu-wrapper.active ul li:nth-child(5) { transition-delay: 0.15s; }
    .menu-wrapper.active ul li:nth-child(6) { transition-delay: 0.18s; }
    .menu-wrapper.active ul li:nth-child(7) { transition-delay: 0.21s; }
    /* Уважение к системной настройке «уменьшить движение» */
    @media (prefers-reduced-motion: reduce) {
        .menu-wrapper,
        .menu-wrapper ul,
        .menu-wrapper ul li,
        .menu-wrapper.active ul li:nth-child(n) {
            transition-duration: 0.01s;
            transition-delay: 0s;
        }
    }
    /* Пока меню открыто: страница не скроллится, а у шапки отключаем
       backdrop-filter — иначе она становится containing block для
       fixed-шторки и ломает её геометрию и блюр */
    body.menu-open {
        overflow: hidden;
    }
    body.menu-open #header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* Отдельного крестика нет: бургер остаётся поверх затемнения
       и его полоски складываются в крестик */
    .menu-burger {
        z-index: 112;
    }
    .menu-burger span,
    .menu-burger:before,
    .menu-burger:after {
        transition: transform 0.22s ease, opacity 0.15s ease, top 0.22s ease;
    }
    body.menu-open .menu-burger {
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
    }
    body.menu-open .menu-burger:before {
        top: 17px;
        transform: rotate(45deg);
    }
    body.menu-open .menu-burger span {
        opacity: 0;
        transform: scaleX(0.4);
    }
    body.menu-open .menu-burger:after {
        top: 17px;
        transform: rotate(-45deg);
    }
    #header ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        font-size: 20px;
        padding: 0;
        margin: 0;
        background: var(--bg-card);
        border-radius: 16px;
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }
    #header ul li {
        margin: 0;
        border-bottom: 1px solid var(--separator);
    }
    #header ul li:last-child {
        border-bottom: 0;
        padding: 14px 18px;
        margin: 0;
        font-size: 16px;
    }
    #header ul li a {
        display: block;
        padding: 14px 18px;
        border-radius: 0;
        font-size: 18px;
    }
    #header ul li a.active {
        background: var(--tint-soft);
    }
    /* Карта замеров: колонки не влезают — складываем в одну */
    .mmap-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ≤600px: мобильная раскладка — карточки на всю ширину, контролы ужимаются */
@media screen and (max-width: 600px) {
    html, body {
        min-width: 320px;
    }
    #page-wrapper {
        min-width: 0;
    }
    .calc-wrapper .calc-block .line {
        margin-right: 0;
        width: 100%;
    }
    .calc-wrapper .calc-block h4,
    .calc-wrapper .result {
        width: 100%;
    }
    .measure-map {
        height: 420px;
        /* Карта свёрнута, пока не нажали «Показать карту» — Google Maps
           не грузится вообще (на части провайдеров он еле отвечает) */
        display: none;
    }
    .mmap.map-open .measure-map {
        display: block;
    }
    /* Карта на мобильном ниже (420px) — попапу оставляем меньше высоты */
    .leaflet-popup-content {
        max-height: 280px;
    }
    .mmap-map-toggle {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 13px 16px;
        border: 0;
        border-radius: var(--radius-card);
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
        color: var(--tint);
        font-size: 15px;
        font-weight: 600;
        text-align: center;
    }
    .mmap.map-open .mmap-map-toggle {
        display: none;
    }
    /* Легенда и фильтры относятся к карте — прячем их вместе с ней под кнопку
       «Показать карту», показываем только когда карту открыли */
    .mmap-legend {
        display: none;
    }
    .mmap.map-open .mmap-legend {
        display: flex;
    }
    /* Карта замеров: чипы легенды компактнее, отступы карточек меньше */
    .mmap-chip {
        padding: 6px 11px;
        font-size: 13px;
        gap: 6px;
    }
    .mmap-col h2 {
        font-size: 18px;
    }
    .mmap-acc-head {
        padding: 13px 14px;
    }
    .mmap-acc-item {
        padding: 11px 14px;
    }
    /* Ничего внутри карточек не должно вылезать за экран */
    .calc-wrapper .line input,
    .calc-wrapper .line select,
    .calc-wrapper .line .select2-container {
        max-width: 100% !important;
    }
    .calc-wrapper .top-wrap-selects {
        max-width: 100%;
    }
    /* Изделие: три селекта всегда в один ряд, ужимаются поровну
       (перенос ломает порядок из-за row-reverse) */
    .calc-wrapper .main .top-wrap-selects {
        flex-wrap: nowrap;
    }
    .calc-wrapper .main .top-wrap-selects .select2-container {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
    }
    /* Блоки внутри карточки — не шире самой карточки */
    .calc-wrapper .line > div {
        max-width: 100%;
        min-width: 0;
    }
    /* Ровный вертикальный ритм рядов карточки: отступ задаёт row-gap,
       распорки-спейсеры между рядами прячем */
    .calc-wrapper .calc-block .line {
        row-gap: 6px;
    }
    .calc-wrapper .line > .spacer {
        display: none;
    }
    /* Инпуты и select2 строго одной высоты */
    .calc-wrapper .line input[type="text"] {
        height: 36px !important;
        line-height: 36px !important;
    }
    .calc-wrapper .line .select2-container--default .select2-selection--single {
        height: 36px !important;
    }
    .calc-wrapper .line .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
    }
    .calc-wrapper .line .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
    /* Оборудование и Работы: селекты ужимаются (базис 90px), ряды
       пакуются как на десктопе — 3 селекта, ниже артикул/вид работ */
    .calc-wrapper .dop .top-wrap-selects,
    .calc-wrapper .work .top-wrap-selects {
        gap: 6px 4px;
    }
    .calc-wrapper .dop .top-wrap-selects .select2-container,
    .calc-wrapper .work .top-wrap-selects .select2-container {
        flex: 1 1 90px;
        min-width: 0;
        width: auto !important;
        margin-top: 0 !important;
    }
    .calc-wrapper .dop .top-wrap-selects .count,
    .calc-wrapper .work .top-wrap-selects .count {
        margin-top: 0 !important;
    }
    /* Вид работ — всегда отдельным рядом на всю ширину */
    .calc-wrapper .work .top-wrap-selects select.price + .select2-container {
        flex: 1 1 100%;
        max-width: 100% !important;
    }
    /* Оборудование: кол-во поднимаем третьим в первый ряд,
       а селект самого оборудования — отдельным рядом на всю ширину */
    .calc-wrapper .dop .top-wrap-selects .count {
        order: 1;
    }
    .calc-wrapper .dop .top-wrap-selects select.price + .select2-container {
        order: 2;
        flex: 1 1 100%;
        max-width: 100% !important;
    }
    /* Параметры изделия — сетка 3 колонки: селект | толщина(96) | кол-во(75).
       jQuery .show() ставит инлайновый display:block, поэтому матчимся по
       атрибуту style и перебиваем его */
    .calc-wrapper .line .base-wrap[style*="display: block"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 96px) minmax(0, 75px);
        gap: 6px 4px;
        align-items: center;
        /* гасим анонимные грид-элементы из   в разметке */
        font-size: 0;
    }
    .calc-wrapper .line .base-wrap .spacer {
        display: none;
    }
    .calc-wrapper .line .base-wrap .select2-container {
        width: auto !important;
        min-width: 0;
    }
    .calc-wrapper .line .base-wrap input {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
    }
    /* Явная расстановка по ячейкам: селекты в 1-й колонке,
       толщина|кол-во в 1-м ряду, высота — две правые колонки 2-го */
    .calc-wrapper .line .base-wrap span.select2:nth-of-type(1) {
        grid-area: 1 / 1;
    }
    .calc-wrapper .line .base-wrap input.thick {
        grid-area: 1 / 2;
    }
    .calc-wrapper .line .base-wrap input.count {
        grid-area: 1 / 3;
    }
    .calc-wrapper .line .base-wrap span.select2:nth-of-type(2) {
        grid-area: 2 / 1;
    }
    .calc-wrapper .line .base-wrap input.height-top {
        grid-area: 2 / 2 / 3 / -1;
    }
    /* Габариты: длина|ширина (и Г1/Г2, радиусные) — в один ряд поровну */
    .calc-wrapper .line .main-size,
    .calc-wrapper .line .left-p,
    .calc-wrapper .line .right-p,
    .calc-wrapper .line .radius-params {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 5px;
        /* гасим анонимные flex-элементы из   в разметке */
        font-size: 0;
    }
    .calc-wrapper .line .main-size .spacer,
    .calc-wrapper .line .left-p .spacer,
    .calc-wrapper .line .right-p .spacer,
    .calc-wrapper .line .radius-params .spacer {
        display: none;
    }
    .calc-wrapper .line .main-size input,
    .calc-wrapper .line .left-p input,
    .calc-wrapper .line .right-p input,
    .calc-wrapper .line .radius-params input {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
    }
    .measure {
        max-width: 100%;
    }
    /* Таблицы сотрудников: компактные карточки.
       Шапка: точка-индикатор синхронизации + ФИО + кнопки копировать/обновить.
       Остальные поля — под спойлером «Подробнее» */
    .emp-sync table,
    .emp-sync tbody,
    .emp-sync tr,
    .emp-sync td {
        display: block;
    }
    .emp-sync thead {
        display: none;
    }
    .emp-sync table {
        background: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }
    .emp-sync tbody tr {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--bg-card);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
        padding: 6px 14px;
        margin-bottom: 12px;
    }
    /* Глушим десктопный hover — на таче он «залипает» серым */
    .emp-sync table tbody tr:hover td {
        background: transparent;
    }
    .emp-sync td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid var(--separator);
    }
    .emp-sync td:first-child {
        display: none;
    }
    .emp-sync td:before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-size: 13px;
        flex: none;
    }
    /* Шапка карточки: ФИО всегда первой строкой */
    .emp-sync td.emp-name {
        order: -1;
        justify-content: flex-start;
        font-weight: 600;
        font-size: 16px;
        border-bottom: 0;
        padding: 10px 112px 10px 22px;
    }
    .emp-sync td.emp-name:before {
        display: none;
    }
    /* Синхронизация — цветная точка слева от ФИО
       (цвет берётся из inline-стиля через currentColor) */
    .emp-sync td[data-label="Синхронизация"] {
        position: absolute;
        left: 14px;
        top: 22px;
        padding: 0;
        border: 0;
    }
    .emp-sync td[data-label="Синхронизация"]:before {
        display: none;
    }
    .emp-sync td[data-label="Синхронизация"] span {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        font-size: 0;
        background: currentColor;
        box-shadow: 0 0 6px currentColor;
    }
    /* Кнопки в правом верхнем углу */
    .emp-sync .copy-pswd {
        position: absolute;
        top: 12px;
        right: 44px;
        width: auto;
        padding: 0 8px;
        gap: 4px;
    }
    /* Подпись «pwd» — на мобильном пароль скрыт под спойлером,
       без неё непонятно, что копирует кнопка */
    .emp-sync .copy-pswd:after {
        content: 'pwd';
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
    }
    .emp-sync td[data-label="Обновить пароль"] {
        position: static;
        padding: 0;
        border: 0;
    }
    .emp-sync td[data-label="Обновить пароль"]:before {
        display: none;
    }
    .emp-sync .upd-passwrd {
        position: absolute;
        top: 12px;
        right: 10px;
        display: flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        background: var(--fill);
        border-radius: 8px;
    }
    .emp-sync .upd-passwrd img {
        max-height: 16px;
    }
    /* Свёрнутое состояние: детали скрыты, кнопки остаются */
    .emp-sync tr.collapsed td[data-label="ID-B24"],
    .emp-sync tr.collapsed td[data-label="Логин"] {
        display: none;
    }
    .emp-sync tr.collapsed td[data-label="Пароль"] {
        padding: 0;
        border: 0;
    }
    .emp-sync tr.collapsed td[data-label="Пароль"]:before,
    .emp-sync tr.collapsed td[data-label="Пароль"] .pswd-container {
        display: none;
    }
    /* Спойлер — компактная ссылка справа с шевроном */
    .emp-sync .emp-toggle {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        margin-top: 4px;
        padding: 2px 0 8px;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .emp-sync .emp-toggle:before {
        display: none;
    }
    .emp-sync .emp-toggle:after {
        content: '';
        width: 6px;
        height: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s;
    }
    .emp-sync tr:not(.collapsed) .emp-toggle:after {
        transform: translateY(1px) rotate(225deg);
    }
    /* В развёрнутом виде спойлер отделён от полей и не липнет к ним */
    .emp-sync tr:not(.collapsed) .emp-toggle {
        margin-top: 0;
        padding-top: 9px;
    }
    /* Страховка от горизонтального скролла всей страницы */
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }
}

/* ≤480px: узкие экраны — ужимаем контролы, чтобы карточка целиком влезала */
@media screen and (max-width: 480px) {
    body {
        padding: 0 12px;
    }
    #header {
        margin: 0 -12px 36px;
        padding: 6px 12px;
    }
    h1 {
        font-size: 26px;
    }
    .calc-wrapper .calc-block .line {
        padding: 8px;
        padding-top: 44px;
    }
    .calc-wrapper select,
    .calc-wrapper input[type="text"],
    .calc-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 13px;
    }
    .calc-wrapper input[type="text"] {
        padding: 0 6px;
    }
    .calc-wrapper .calc-block .top-label {
        font-size: 11px;
    }
    .calc-wrapper .result h3 {
        font-size: 15px;
    }
}