/* =====================================================================
   parkos-responsive.css — слой адаптации Паркоса под планшеты/телефоны.
   Грузится ПОСЛЕДНИМ (после style.css и themes/parkos.css) → при равной
   специфичности побеждает по порядку исходника.

   Раскладка (согласовано):
     • >=1180px          — десктоп-грид (сайдбар+топбар+метрики). Не трогаем.
     • 0–1179px          — компактная раскладка (плавающие панели над картой)
                           + бургер/дровер. В style.css основные компактные
                           блоки (§max-width:768 и вложенный) расширены до 1179px,
                           поэтому вся навигация/панели/метрики работают и на
                           планшетах в ОБЕИХ ориентациях. Здесь — точечные
                           доводки поверх этого.
     • телефон+landscape — orientation-lock (телефон = shortest-side<=500 & touch).

   Скан QR велосипеда убран на <=1179 (флоу не используется);
   доп. предохранитель — в openDeviceQrScannerModal() (app.js).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Скан QR велосипеда — полностью убран на телефонах и планшетах.
   (Плавающую кнопку на <=768 уже прячет style.css; здесь закрываем весь
   диапазон <=1179 и прячем кнопку-скан в бейдже «Операции».)
   --------------------------------------------------------------------- */
@media (max-width: 1179px) {
  /* ── Анти-зум при фокусе на поле ввода (iOS Safari) ──────────────────
     iOS автоматически масштабирует страницу, когда фокусируешься на поле
     с font-size < 16px — интерфейс «выпрыгивает» за экран. Держим у ВСЕХ
     полей ввода текста/чисел ровно 16px — авто-зум не срабатывает.
     (select не вызывает зум — открывает нативный пикер, его не трогаем;
     размер визуально задаётся паддингами/высотой, читаемости 16px не мешает.) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"]),
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
  }

  .device-qr-floating-button,
  #deviceQrFloatingButton,
  #startRentalBadge .start-rental-scan-btn,
  #startRentalScanBtn {
    display: none !important;
  }

  /* «Начать аренду» остаётся единственной кнопкой в бейдже — на всю ширину */
  #startRentalBadge #startRentalBtn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   1b. Бренд-плашка — тёмная (в тон бейджу «Кабинет сети»/сайдбару), а не жёлтая.
   Базовый #brandPanel в style.css хардкодит жёлтый rgba(255,212,0); тема parkos
   переопределила --brand-yellow на фиолетовый, но плашка его не использовала.
   Плашка видна только в компактном режиме (телефон/планшет).
   --------------------------------------------------------------------- */
#brandPanel {
  background: var(--pk-ink, #0E1525) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#brandBadge strong { color: #fff !important; }
#brandBadge small { color: rgba(255, 255, 255, 0.66) !important; }

/* ---------------------------------------------------------------------
   1c. Настройки (networkAdminModal): боковое меню разделов → горизонтальная
   лента-табы в шапке модала на телефоне/планшете. В style.css оно было
   `display:none` на <=600px — разделы были недоступны. Теперь доступны все.
   (Это и есть «пункты бокового меню в шапке открытого модала».)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .settings-module { flex-direction: column; height: 100%; }

  .settings-sidebar {
    display: flex !important;      /* перебиваем display:none из style.css */
    flex-direction: row;
    width: 100%;
    /* width:100% + padding без border-box давали ровно +12px к ширине
       модуля настроек (402 при экране 390) — экран уезжал вбок. */
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .settings-sidebar::-webkit-scrollbar { display: none; }

  /* Заголовок и статус сайдбара не нужны в горизонтальной ленте */
  .settings-sidebar__header,
  .settings-sidebar__status { display: none !important; }

  .settings-sidebar__item {
    flex: 0 0 auto;
    white-space: nowrap;
    width: auto;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 13px 14px;
    font-size: 13px;
  }
  .settings-sidebar__item--active {
    border-left-color: transparent !important;
    border-bottom-color: var(--pk-primary, #7c3aed);
  }

  /* Кнопка закрытия — гарантированно поверх ленты табов */
  .settings-content__close-btn { z-index: 30; }

  /* Поля поиска/строки внутри разделов настроек — на всю ширину */
  .settings-content .settings-section__search input,
  .settings-content input[type="search"],
  .settings-content input[type="text"] { min-width: 0; }

  /* Тулбары разделов настроек переносятся, поиск тянется на доступную ширину */
  .settings-content__topbar,
  .settings-section__toolbar,
  .network-branch-list__toolbar { flex-wrap: wrap; gap: 8px; }
  .settings-content__topbar input[type="search"],
  .settings-content__topbar input[type="text"],
  .settings-section__toolbar input { flex: 1 1 140px; min-width: 0; }
}

/* ---------------------------------------------------------------------
   1d. ВСЕ модалы на телефоне (<=768px): открываются на весь экран, шапка
   закреплена (кнопка закрытия всегда видна), тело скроллится, элементы
   уложены компактно в колонку. Мини-подтверждения остаются диалогом.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* ВАЖНО: открытие/закрытие модалов управляется inline style.display
     (none/flex). Поэтому здесь НЕЛЬЗЯ трогать display — иначе скрытые модалы
     станут видимыми. Меняем только размеры/позицию/скролл. База .app-modal уже
     flex-direction:column, так что шапка+тело раскладываются в колонку. */

  /* Все содержательные модалы — на весь экран телефона (кроме компактных
     подтверждений mini/dialog и правой панели slide-right). */
  .app-modal:not(.app-modal--mini):not(.app-modal--dialog):not(.app-modal--slide-right) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  /* Панель карточки устройства (выезжает справа) — на всю ширину телефона */
  .app-modal.app-modal--slide-right {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  /* Компактные подтверждения — центрированный диалог, ничего не обрезается */
  .app-modal.app-modal--mini,
  .app-modal.app-modal--dialog {
    width: min(440px, calc(100vw - 24px)) !important;
    max-width: min(440px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 18px !important;
  }

  /* Шапка модала — не сжимается, тело — скроллится */
  .app-modal > .device-card__header,
  .app-modal .modal__header,
  .app-modal .leads-modal__header,
  .app-modal > .modal-header,
  .app-modal > .app-modal__header { flex: 0 0 auto; }

  .app-modal > .modal-body,
  .app-modal > .device-card__body,
  .app-modal > .app-modal__body,
  .app-modal > .modal__body,
  .app-modal .leads-modal__body,
  .app-modal .network-admin-body,
  .app-modal > .settings-module {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Компактные шапки: переносим содержимое, прячем декоративный подзаголовок,
     кнопка закрытия остаётся справа сверху и видна. */
  .device-card__header,
  .leads-modal__header,
  .modal__header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
  .device-card__title { font-size: 18px; line-height: 1.2; }
  .device-card__header .device-card__meta { display: none; }
  .device-card__header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
  }
  .device-card__close-btn,
  .modal-close-x,
  .fleet-close-btn,
  .qrs-close-btn,
  .lcm-close-btn,
  .modal__close { flex: 0 0 auto; }

  /* Табличный вид списков (если включён вручную) — горизонтальный скролл,
     чтобы колонки не обрезались. По умолчанию на телефоне включены карточки. */
  .clients-table-view,
  .rentals-table-view,
  .fleet-table-view {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ряды кнопок действий в модалах — переносим */
  .modal__actions,
  .device-card__actions { flex-wrap: wrap; }

  /* Поля ввода/селекты в модалах не должны распирать контейнер */
  .app-modal input,
  .app-modal select,
  .app-modal textarea { max-width: 100%; }
}

/* =====================================================================
   §3. МОБИЛЬНАЯ ОБОЛОЧКА (телефон, <=768px)
   Цель — не «сайт в телефоне», а приложение: нижний таб-бар, компактная
   верхняя панель, никакой обрезки по краям, тач-цели от 44px, учёт
   вырезов экрана (safe-area). Разметку строит parkos-mobile.js.

   Планшет (769–1179) и десктоп (>=1180) НЕ затрагиваются.
   ===================================================================== */
@media (max-width: 768px) {
  :root {
    --pkm-tabbar-h: 58px;
    --pkm-safe-b: env(safe-area-inset-bottom, 0px);
    --pkm-safe-t: env(safe-area-inset-top, 0px);
    /* Полная высота нижней навигации вместе с безопасной зоной */
    --pkm-bottom: calc(var(--pkm-tabbar-h) + var(--pkm-safe-b));
    --pkm-gutter: 12px;
  }

  /* ── 3.1 Нижний таб-бар ─────────────────────────────────────────── */
  .pkm-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Таб-бар ВСЕГДА поверх всех окон (app-modal z от 3000). Окна
       заканчиваются над ним (см. §3.2), поэтому бар постоянно виден и
       нажимаем. Выше него только дровер «Ещё» и активные оверлеи. */
    z-index: 6000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    /* border-box: высота var(--pkm-bottom) ВКЛЮЧАЕТ padding+border, иначе
       content-box давал 92+34+1=127px и всё, что привязано к --pkm-bottom
       (шит, кнопки карты), уходило на 35px под бар (safe-area устройства). */
    box-sizing: border-box;
    height: var(--pkm-bottom);
    padding-bottom: var(--pkm-safe-b);
    background: rgba(14, 21, 37, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 28px rgba(9, 14, 26, 0.28);
  }

  .pkm-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.62);
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms ease;
  }

  .pkm-tab__icon { width: 23px; height: 23px; }
  .pkm-tab__label { line-height: 1; }
  .pkm-tab:active { color: #fff; }
  .pkm-tab.is-active { color: #fff; }
  .pkm-tab.is-active .pkm-tab__icon { stroke-width: 2.1; }

  /* Активная вкладка помечена полоской сверху, а не заливкой —
     не спорит с брендовыми цветами карточек. */
  .pkm-tab { position: relative; }
  .pkm-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--pk-primary, #7C5CFF), var(--pk-accent, #22D3EE));
  }

  /* ── 3.2 ВСЕ модалы — одинаково в полный экран над таб-баром ────────
     Раньше модалы открывались по-разному: одни full-screen, другие с
     отступами (разные классы --wide/--dialog/--mini и ДВЕ системы:
     .app-modal и .wh-modal-* у ремонтов/склада). Приводим ВСЕ к одному
     виду: сверху 0, во всю ширину, низ ВПЛОТНУЮ к верхней границе бара. */
  body.pkm-shell .app-modal {
    top: 0 !important;
    bottom: var(--pkm-bottom) !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* #rentalsModal и др. с id-правилами ширины (спец. 1,1,x) — перебиваем
     тем же id + body.pkm-shell. */
  body.pkm-shell #rentalsModal,
  body.pkm-shell #networkAdminModal,
  body.pkm-shell #leadsModal {
    top: 0 !important;
    bottom: var(--pkm-bottom) !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  /* Модал «Новая аренда» имеет тему parkos с border-radius:22px
     (спец. html[data-theme] #id :has = 1,2,1) → перебиваем той же
     специфичностью + позже по порядку, чтобы углы были острые как у
     «Сделать ремонт» (единый full-screen вид). */
  body.pkm-shell #rentalsModal:has(.rental-create-form) {
    border-radius: 0 !important;
    border: 0 !important;
  }

  /* Вторая система модалов (ремонты/склад — whOpenModal): overlay с
     центрированной карточкой и padding:16 → инлайн-стили. Перебиваем
     !important: overlay кончается на баре, карточка заполняет его. */
  body.pkm-shell .wh-modal-overlay {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--pkm-bottom) !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    z-index: 5500 !important;   /* ниже таб-бара (6000) — бар остаётся виден */
  }
  body.pkm-shell .wh-modal-card {
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Третья система — модалы Настроек из parkos.js (редакторы тарифа и
     филиала): .pk-tariff-modal / .pk-branch-modal — центрированная карточка
     с padding:24 и z 50/60. Приводим к тому же полному экрану над баром. */
  body.pkm-shell .pk-tariff-modal,
  body.pkm-shell .pk-branch-modal {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--pkm-bottom) !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    z-index: 5500 !important;
  }
  body.pkm-shell .pk-tariff-modal__dialog,
  body.pkm-shell .pk-branch-modal__dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  /* Дровер «Ещё» и его затемнение — выше таб-бара (он их и открывает) */
  #mobileNavDrawer { z-index: 6200 !important; }
  #mobileNavOverlay { z-index: 6100 !important; }
  /* Прокручиваемым телам добавляем запас, чтобы последний элемент списка
     не прятался за баром при инерционном скролле. */
  body.pkm-shell .app-modal > .modal-body,
  body.pkm-shell .app-modal > .device-card__body,
  body.pkm-shell .app-modal .leads-modal__body,
  body.pkm-shell .app-modal > .settings-module {
    padding-bottom: calc(16px + var(--pkm-safe-b));
  }

  /* ── 3.3 Верхняя панель карты ───────────────────────────────────── */
  /* Бургер на карте убран: боковое меню открывается из «Ещё» в таб-баре,
     дублировать его сверху незачем. Элемент остаётся в DOM (скрыт) —
     «Ещё» открывает дровер программным кликом по нему. */
  .mobile-nav-handle { display: none !important; }

  /* Бренд-плашка и строка филиала — ХАГ по содержимому и ЦЕНТРИРОВАНЫ по
     средней оси экрана (два ряда сверху по центру). */
  #brandPanel,
  #statusBar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    box-sizing: border-box;
  }
  /* Логоплашка (ряд 1) — уже под колокольчик справа, чтобы не наезжать */
  #brandPanel { max-width: calc(100vw - 120px) !important; }
  /* Строка филиала (ряд 2) — под ней колокольчика нет, можно шире */
  #statusBar { max-width: calc(100vw - 24px) !important; }
  /* Компактная бренд-плашка: паддинг по тексту, логотип и шрифты меньше.
     Была высотой 64px из-за логотипа 52px и заголовка 26px. */
  #brandPanel {
    top: calc(var(--pkm-safe-t) + 8px) !important;
    min-height: 0 !important;
    padding: 6px 12px !important;
  }
  #brandBadge { gap: 9px !important; }
  #brandBadge img { width: 32px !important; height: 32px !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(17,17,17,.16) !important; }
  #brandBadge strong { font-size: 18px !important; }
  #brandBadge small { font-size: 10.5px !important; }
  /* Строка филиала — компактная, сразу под бренд-плашкой. Хаг по тексту
     (right:auto из правила выше), колокольчик справа её больше не касается. */
  #statusBar {
    top: calc(var(--pkm-safe-t) + 58px) !important;
  }
  #status { padding: 7px 14px !important; }

  /* Ручка метрик — тоже не за краем экрана. */
  .mobile-metrics-handle {
    left: 8px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  /* ── 3.4 Плавающие плашки ───────────────────────────────────────── */
  /* Плашка сессии уезжала на 198px за правый край. Её действия
     («Сменить сотрудника», «Выйти») уже есть в подвале дровера —
     на телефоне убираем дубль. */
  #authSessionBadge { display: none !important; }

  /* «Начать аренду»/«Сделать ремонт» — главные операции смены, поэтому
     не прячем, а превращаем в нормальную панель действий. Она живёт
     ВНУТРИ шита (первой строкой), чтобы ничего не перекрывать. */
  #startRentalBadge {
    min-width: 0 !important;
    display: block !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  #startRentalBadge .auth-session-badge__handle,
  #startRentalBadge .auth-session-badge__fio,
  #startRentalBadge .auth-session-badge__pin { display: none !important; }
  #startRentalBadge .auth-session-badge__content {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #startRentalBadge #startRentalBtn,
  #startRentalBadge #startRentalRepairBtn {
    width: 100% !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 13.5px;
    font-weight: 700 !important;
  }
  /* Иерархия по концепту: главная операция — градиент бренда,
     вторичная («Ремонт») — тональная фиолетовая, не спорит за внимание. */
  #startRentalBadge #startRentalBtn {
    background: var(--pk-grad, linear-gradient(135deg,#7C5CFF,#22D3EE)) !important;
    border: 0 !important;
    color: #fff !important;
  }
  #startRentalBadge #startRentalRepairBtn {
    background: rgba(124,92,255,.12) !important;
    border: 1px solid transparent !important;
    color: var(--pk-primary-strong, #6D5BFF) !important;
  }

  /* Колокольчик центра уведомлений — над шитом и под дровером. */
  /* Колокольчик — в правом верхнем углу на уровне логоплашки (ряд 1),
     центр кнопки совпадает с центром бренд-плашки (top safe-t+8, h~46). */
  #pkBellFab {
    top: calc(var(--pkm-safe-t) + 9px) !important;
    bottom: auto !important;
    right: var(--pkm-gutter) !important;
    z-index: 1700 !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Кнопки зума карты — над свёрнутым шитом (шапка ≈192px), у правого края.
     Когда шит раскрыт, он ложится поверх (z выше) и кнопки скрыты — при
     чтении списка зум не нужен. */
  #mapControls {
    right: var(--pkm-gutter) !important;
    top: auto !important;
    bottom: calc(var(--pkm-bottom) + 192px) !important;
  }

  /* ── 3.4b Нижний шит карты ──────────────────────────────────────── */
  /* Панели устройств/аналитики/аренд/клиентов собраны в один шит
     (parkos-mobile.js). Он свёрнут до «пика» и раскрывается по ручке. */
  .pkm-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--pkm-bottom);
    z-index: 1660;
    display: flex;
    flex-direction: column;
    /* По умолчанию шит СВЁРНУТ: видны только ручка + операции + вкладки,
       список скрыт → видно большую часть карты. Раскрывается по ручке
       или по тапу вкладки (класс is-open).
       ВАЖНО: свёрнутый max-height задан ПО ВЫСОТЕ ШАПКИ (145px ≈ grip+ops+
       tabs). Раньше был 82dvh — БОЛЬШЕ раскрытого 60dvh, поэтому при
       открытии шит подпрыгивал вверх до 82dvh и потом опускался до 60dvh.
       Теперь открытие идёт монотонно 145px→60dvh — плавное выдвижение без
       подскока. */
    max-height: 145px;
    padding: 0 var(--pkm-gutter) 10px;
    border-radius: 20px 20px 0 0;
    background: rgba(248, 249, 251, 0.96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 -10px 34px rgba(15, 23, 42, 0.16);
    transition: max-height 300ms cubic-bezier(.33, 1, .68, 1);
  }
  /* Свёрнуто — тело списка не показываем, шит сжат до шапки */
  .pkm-sheet:not(.is-open) .pkm-sheet__body { display: none !important; }
  /* Раскрыто — список виден, шит занимает ~60% высоты */
  .pkm-sheet.is-open { max-height: 60dvh; }

  /* Дровер лежит внутри #dashboardStack (свой контекст наложения), а шит и
     колокольчик висят прямо на body — поэтому по z-index они выигрывали и
     рисовались ПОВЕРХ открытого меню. Пока меню открыто — убираем их. */
  body.mobile-nav-open .pkm-sheet,
  body.mobile-nav-open #pkBellFab { display: none !important; }

  .pkm-sheet__grip {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    min-height: 26px;
    padding: 10px 0 6px;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pkm-sheet__grip::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.22);
  }

  /* Переключатель разделов шита */
  .pkm-sheet__tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 8px;
  }
  .pkm-sheet__tabs::-webkit-scrollbar { display: none; }
  .pkm-sheet__tab {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--pk-line, rgba(15, 23, 42, 0.12));
    border-radius: 999px;
    background: var(--pk-surface, #fff);
    color: var(--pk-slate, #5b6474);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pkm-sheet__tab.is-active {
    background: var(--pk-ink, #0E1525);
    border-color: transparent;
    color: #fff;
  }

  .pkm-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    padding-bottom: 4px;
  }

  /* Показываем РОВНО ОДИН раздел — остальные не занимают места
     (раньше свёрнутые панели висели пустыми полосками друг на друге). */
  .pkm-sheet .pkm-section { display: none !important; }
  .pkm-sheet .pkm-section.pkm-section--active { display: block !important; }

  /* Внутри шита панели перестают быть fixed и просто складываются в
     колонку на всю ширину — снимаем всё позиционирование базы.
     ВАЖНО: база задаёт позицию через id-селекторы с !important
     (#rentalsTopControl и т.д.). При равном !important побеждает БОЛЬШАЯ
     специфичность, поэтому здесь тоже нужны id, иначе панели остаются
     fixed и продолжают наезжать друг на друга. */
  .pkm-sheet #deviceListWrapper,
  .pkm-sheet #analyticsWrapper,
  .pkm-sheet #rentalsTopControl,
  .pkm-sheet #clientListWrapper,
  .pkm-sheet #startRentalBadge,
  .pkm-sheet .pkm-in-sheet {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Список аренд в шите — строки-карточки вместо таблицы из 5 колонок.
     На 390px колонки схлопывались и заголовки наезжали друг на друга
     («УСТРОЙСТВОТАРИФ»). Шапку колонок убираем — она теряет смысл.
     Селекторы с html[data-theme] — чтобы перебить базовую сетку темы. */
  html[data-theme="parkos"] .pk-bookings__head { display: none !important; }
  /* Строка аренды = концепт-карточка: белая, с радиусом, заголовок клиента
     дисплейным шрифтом, статус — плашкой, дни — mono-бейджем.
     Раскладка грид-областями: клиент+дни в строке, ниже устройство/тариф,
     статус справа. */
  html[data-theme="parkos"] .pk-book-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "client  days"
      "device  status"
      "tariff  status" !important;
    gap: 2px 10px !important;
    padding: 12px 13px !important;
    margin-bottom: 10px !important;
    align-items: center;
    background: var(--pk-surface) !important;
    border: 1px solid var(--pk-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 0 rgba(14,21,37,.03) !important;
  }
  /* min-width:0 + многоточие — иначе nowrap из темы распирал ячейки */
  html[data-theme="parkos"] .pk-book-row__client,
  html[data-theme="parkos"] .pk-book-row__device,
  html[data-theme="parkos"] .pk-book-row__tariff {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-theme="parkos"] .pk-book-row__client {
    grid-area: client;
    font-family: var(--pk-display) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: -.01em;
  }
  html[data-theme="parkos"] .pk-book-row__device { grid-area: device; font-size: 12.5px; color: var(--pk-slate); }
  html[data-theme="parkos"] .pk-book-row__tariff { grid-area: tariff; font-size: 12.5px; color: var(--pk-muted); }
  /* Статус — плашка с тонированным фоном (было просто цветным текстом) */
  html[data-theme="parkos"] .pk-book-row__status {
    grid-area: status; justify-self: end; align-self: center;
    height: 24px; padding: 0 10px; border-radius: 999px;
    font-size: 11.5px !important; font-weight: 800 !important;
  }
  html[data-theme="parkos"] .pk-book-row__status.pk-st--rent    { background: rgba(34,197,94,.14); color: #15803d; }
  html[data-theme="parkos"] .pk-book-row__status.pk-st--rent .pk-dot    { background: #22C55E; }
  html[data-theme="parkos"] .pk-book-row__status.pk-st--overdue { background: rgba(239,68,68,.14); color: #b91c1c; }
  html[data-theme="parkos"] .pk-book-row__status.pk-st--off     { background: var(--pk-surface-2); color: var(--pk-slate); }
  /* Бейдж дней — mono */
  html[data-theme="parkos"] .pk-book-row__days { grid-area: days; justify-self: end; align-self: center; font-family: var(--pk-mono); }
  /* Скелет-заглушка — простыми полосами, без сетки колонок */
  html[data-theme="parkos"] .pk-book-row.pk-book-skel {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    background: var(--pk-surface) !important;
  }

  /* Название панели дублирует активную вкладку — прячем, оставляя
     только фильтр/поиск. Счётчик («114/188») тоже уходит: он есть
     на экране «Аренды». */
  .pkm-sheet #deviceListHeader .panel-heading-group,
  .pkm-sheet #clientListHeader .panel-heading-group,
  .pkm-sheet #analyticsHeader .panel-heading-group,
  .pkm-sheet #rentalsMapHeader .panel-heading-group { display: none !important; }

  /* ── Статичное окно метрик на карте (по просьбе владельца) ──────────
     Не выдвижное, а статичный виджет под плашкой названия сети/филиала:
     4 KPI-плитки 2×2 (Выручка·Клиенты сверху, Активные·Доступные снизу),
     сверху компактный фильтр периода и (для сети) фильтр филиала.
     Кнопка-шторка больше не нужна — окно всегда видно. */
  .mobile-metrics-handle { display: none !important; }

  /* ── Плашка метрик #desktopMetrics на карте, СВОРАЧИВАЕМАЯ (все роли) ──
     По умолчанию свёрнута в пилюлю «Метрики» под плашкой; тап разворачивает
     в окно KPI. У сети — фильтр филиалов; у филиал-сотрудника — только
     доступные ему финансовые метрики (выручка за день). */
  body.pkm-shell #desktopMetrics {
    position: fixed !important;
    left: var(--pkm-gutter) !important;
    right: var(--pkm-gutter) !important;
    top: calc(var(--pkm-safe-t) + 102px) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 60dvh !important;
    transform: none !important;
    z-index: 1590 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--pk-line, #E7E9F2) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: saturate(160%) blur(10px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(10px) !important;
  }
  body.mobile-metrics-open #desktopMetrics { transform: none !important; }

  /* Заголовок-тумблер «Метрики» (инжектится первым элементом) */
  body.pkm-shell #desktopMetrics .pkm-metrics-head {
    grid-column: 1 / -1 !important;
    order: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--pk-display) !important;
    font-weight: 700;
    line-height: 1;
  }
  body.pkm-shell #desktopMetrics .pkm-metrics-head svg { flex: 0 0 auto; }
  body.pkm-shell #desktopMetrics .pkm-metrics-head__label { flex: 1 1 auto; text-align: left; }
  body.pkm-shell #desktopMetrics .pkm-metrics-head__chev { transition: transform .22s ease; }
  body.pkm-shell.pkm-metrics-open #desktopMetrics .pkm-metrics-head__chev { transform: rotate(180deg); }

  /* Развёрнуто — тонкая строка-заголовок над плитками */
  body.pkm-shell.pkm-metrics-open #desktopMetrics .pkm-metrics-head {
    justify-content: space-between;
    width: 100%;
    padding: 2px 4px 6px !important;
    background: transparent;
    color: var(--pk-ink, #0E1525);
    font-size: 13px;
    border-bottom: 1px solid var(--pk-line, #E7E9F2);
  }
  body.pkm-shell.pkm-metrics-open #desktopMetrics .pkm-metrics-head svg { color: var(--pk-primary, #7C5CFF); }

  /* Свёрнуто (по умолчанию) — тёмная пилюля-кнопка под плашкой сети */
  body.pkm-shell:not(.pkm-metrics-open) #desktopMetrics {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    display: block !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.pkm-shell:not(.pkm-metrics-open) #desktopMetrics > *:not(.pkm-metrics-head) {
    display: none !important;
  }
  body.pkm-shell:not(.pkm-metrics-open) #desktopMetrics .pkm-metrics-head {
    justify-content: center;
    padding: 11px 20px !important;
    background: var(--pk-ink, #0E1525);
    color: #fff;
    font-size: 14px;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
  }
  body.pkm-shell:not(.pkm-metrics-open) #desktopMetrics .pkm-metrics-head__label { flex: 0 0 auto; }
  body.pkm-shell:not(.pkm-metrics-open) #desktopMetrics .pkm-metrics-head svg { color: var(--pk-cyan, #22D3EE); }

  /* ── КАБИНЕТ ФИЛИАЛА, роль СОТРУДНИК ─────────────────────────────────
     Сотрудник видит СВОЮ финансовую плашку #desktopMetrics на карте (пилюля,
     как у всех — выручка за день), А ТАКЖЕ рабочую сводку #staffAnalyticsWrapper
     (Просрочено / К сдаче сегодня / На ТО / завтра), которую parkos-mobile.js
     переносит внутрь секции analyticsWrapper (открывается кнопкой «Метрики»). */

  /* Рабочая сводка внутри секции «Метрики» — сетка 2×2 на всю ширину */
  .pkm-sheet #staffAnalyticsWrapper {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    z-index: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .pkm-sheet #staffAnalyticsWrapper .staff-analytics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .pkm-sheet #staffAnalyticsWrapper .staff-analytics-card {
    margin: 0 !important;
    min-width: 0 !important;
  }
  /* У сотрудника скрываем «сырой» блок аналитики (#analyticsContent —
     «Загрузка…») и шапку — в секции «Метрики» остаётся только рабочая сводка */
  body.pkm-shell.role-staff .pkm-sheet #analyticsContent,
  body.pkm-shell.role-staff .pkm-sheet #analyticsHeader { display: none !important; }
  /* Приложение прячет #analyticsWrapper для роли staff
     (body.role-staff #analyticsWrapper{display:none!important}). Возвращаем
     его показ, КОГДА это активная секция шита (специфичность выше). */
  body.pkm-shell.role-staff .pkm-sheet #analyticsWrapper.pkm-section--active {
    display: block !important;
  }

  /* Фильтр периода — строкой на всю ширину, сверху */
  #desktopMetrics .mobile-metrics-mini-filters {
    grid-column: 1 / -1 !important;
    order: 1;
    display: flex !important;
    gap: 6px;
    flex-wrap: nowrap;
  }
  #desktopMetrics .mobile-metrics-mini-filters .revenue-filter-button {
    flex: 1 1 auto;
    min-height: 30px !important;
    padding: 0 8px !important;
    border-radius: 999px;
    font-size: 11px !important;
  }
  /* Фильтр филиала (кабинет сети) — на всю ширину, под периодом */
  #desktopMetrics .pkm-metrics-branch:not([hidden]) {
    grid-column: 1 / -1 !important;
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #desktopMetrics .pkm-metrics-branch .desktop-metrics-filter__scope-label {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pk-muted, #8A93A8) !important;
  }
  #desktopMetrics .pkm-metrics-branch select {
    width: 100% !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    border: 1px solid var(--pk-line, #E7E9F2) !important;
    background: var(--pk-surface, #fff) !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    color: var(--pk-ink, #0E1525) !important;
    font-weight: 700;
  }

  /* 4 KPI-плитки: Выручка·Клиенты (верх), Активные·Доступные (низ).
     DOM-порядок Revenue·Active·Clients·Devices → переупорядочиваем order. */
  #desktopMetrics .desktop-metric-card {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: var(--pk-surface-2, #F1F2F8) !important;
    box-shadow: none !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  #desktopMetrics .desktop-metric-card--revenue { order: 3; }
  #desktopMetrics .desktop-metric-card--clients { order: 4; }
  #desktopMetrics .desktop-metric-card--active  { order: 5; }
  #desktopMetrics .desktop-metric-card--devices { order: 6; }
  /* Цветной акцент-квадрат меньше (был 36×36 → перекрывал текст) */
  #desktopMetrics .desktop-metric-card::after {
    width: 20px !important;
    height: 20px !important;
    border-bottom-left-radius: 8px !important;
  }
  #desktopMetrics .desktop-metric-card::before {
    top: 10px !important;
    bottom: 10px !important;
    width: 4px !important;
  }
  #desktopMetrics .desktop-metric-card__label {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--pk-muted, #8A93A8) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
  }
  #desktopMetrics .desktop-metric-card__value {
    font-family: var(--pk-display) !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }
  #desktopMetrics .desktop-metric-card__hint {
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: var(--pk-slate, #475069) !important;
    margin-top: 1px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Тумблер сворачивания панели (▼) в шите не нужен — у шита своя ручка.
     Оставлял осиротевшую стрелку справа от фильтра. */
  .pkm-sheet .pkm-section .panel-toggle,
  .pkm-sheet .pkm-section .panel-heading-group__toggle { display: none !important; }

  .pkm-sheet .pkm-section > [id$="Header"] {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    min-height: 0 !important;
  }
  /* Остатки шапки (фильтр) прижаты влево и на всю ширину — иначе селект
     висел одиноко у правого края в пустой строке. */
  .pkm-sheet .pkm-section > [id$="Header"] > * {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0 !important;
  }
  .pkm-sheet .pkm-section .panel-heading-actions {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  /* Фильтр в шите — компактный контрол по содержимому (пилюля), а не
     гигантское пустое поле во всю строку. */
  .pkm-sheet .pkm-section .panel-heading-actions select {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 34px 0 14px !important;
    border-radius: 999px !important;
    background-color: var(--pk-surface-2, #F1F2F8) !important;
    border: 1px solid var(--pk-line, #E7E9F2) !important;
    font-weight: 700 !important;
  }
  .pkm-sheet .pkm-section input,
  .pkm-sheet .pkm-section select {
    min-height: 40px !important;
    font-size: 14px !important;
  }
  /* Сама панель — без своей карточки: фон и рамку даёт шит.
     Нужны id-селекторы: база оформляет панели через #id. */
  .pkm-sheet #rentalsTopControl,
  .pkm-sheet #deviceListWrapper,
  .pkm-sheet #clientListWrapper,
  .pkm-sheet #analyticsWrapper {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* ── 3.5 Дровер ─────────────────────────────────────────────────── */
  /* Подвал с «Выйти» подрезался: делаем меню колонкой со скроллом. */
  .mobile-nav-drawer {
    display: flex;
    flex-direction: column;
    padding-top: calc(14px + var(--pkm-safe-t));
    /* Запас под таб-бар — иначе подвал с «Выйти» уходит под него. */
    padding-bottom: calc(var(--pkm-bottom) + 14px);
    overflow: hidden;
  }
  .mobile-nav-drawer__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-drawer__foot { flex: 0 0 auto; }
  .mobile-nav-drawer .desktop-sidebar__link {
    min-height: 46px;
    /* Бейдж («Заявки 7») уходит вправо, а не слипается с текстом. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
  }
  .mobile-nav-drawer .desktop-sidebar__link-badge {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }

  /* ── 3.6 Экраны-списки ──────────────────────────────────────────── */

  /* 3.6.0 Плотность. База рассчитана на десктоп: 16px шрифт, отступы 20px+,
     контролы 48px. На 390px из-за этого до контента приходилось скроллить.
     Ужимаем типографику и отступы по всему экрану списка. */
  .app-modal--fullscreen .dashboard-screen,
  .app-modal--fullscreen .fleet-content { padding: 0 !important; }

  .app-modal--fullscreen .dashboard-screen__section,
  .app-modal--fullscreen .fleet-fullscreen-section { margin: 0 0 4px !important; }

  .app-modal--fullscreen .dashboard-screen__section-title,
  .app-modal--fullscreen .fleet-fullscreen-section__title {
    font-size: 15px !important;
    padding: 12px var(--pkm-gutter) 6px !important;
    margin: 0 !important;
  }

  /* 3.6.1 Фильтры: строка «поиск + Фильтры», остальное — по тапу.
     Разметку готовит parkos-mobile.js (.pkm-filters/.pkm-keep). */
  .pkm-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px !important;
    padding: 10px var(--pkm-gutter) !important;
    border-radius: 0 !important;
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--pk-surface, #fff);
    border-bottom: 1px solid var(--pk-line, rgba(15, 23, 42, 0.08));
  }
  /* Цепочка до поля поиска (.pkm-path) остаётся в строке и тянется.
     Обнуляем оформление ТОЛЬКО у обёрток: если поле само оказалось
     прямым потомком тулбара, обнуление съело бы его рамку. */
  .pkm-filters > .pkm-path {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    order: -2;
    margin: 0 !important;
  }
  .pkm-filters > .pkm-path:not(input) {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  /* Поле поиска выглядит одинаково на всех экранах */
  .pkm-filters .pkm-path input,
  .pkm-filters input.pkm-path {
    width: 100% !important;
    min-height: 42px;
    padding: 0 12px !important;
    box-sizing: border-box;
    border: 1px solid var(--pk-line, rgba(15, 23, 42, 0.12)) !important;
    border-radius: 12px !important;
    background: var(--pk-surface, #fff) !important;
    font-size: 14px !important;
  }
  .pkm-filters > .pkm-filters-toggle { order: -1; }

  /* Свёрнуто — виден только поиск (его цепочка) и кнопка «Фильтры».
     Прячем «соседей» на каждом уровне цепочки, поэтому неважно, как
     глубоко поле вложено в обёртки тулбара. */
  .pkm-filters.is-collapsed > *:not(.pkm-path):not(.pkm-filters-toggle),
  .pkm-filters.is-collapsed .pkm-path > *:not(.pkm-path):not(.pkm-filters-toggle) {
    display: none !important;
  }
  /* Развёрнуто — контролы колонкой под строкой поиска */
  .pkm-filters:not(.is-collapsed) > *:not(.pkm-path):not(.pkm-filters-toggle) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pkm-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--pk-line, rgba(15, 23, 42, 0.12));
    background: var(--pk-surface-2, #eef1f6);
    color: var(--pk-ink, #17181A);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .pkm-filters-toggle.is-open {
    background: var(--pk-primary, #7C5CFF);
    border-color: transparent;
    color: #fff;
  }
  .pkm-filters-toggle__count:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pk-primary, #7C5CFF);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
  }
  .pkm-filters-toggle.is-open .pkm-filters-toggle__count:not(:empty) {
    background: rgba(255, 255, 255, 0.25);
  }

  /* 3.6.2 Показатели — лента компактных чипов вместо блока в пол-экрана.
     Было: плитки 100px высотой в 2 ряда занимали ~300px. */
  .fleet-fullscreen-meta__item,
  .rentals-fullscreen-meta > * {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }
  .fleet-fullscreen-meta__item > *,
  .rentals-fullscreen-meta > * > * {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .fleet-fullscreen-meta__item > *:first-child,
  .rentals-fullscreen-meta > * > *:first-child {
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .fleet-fullscreen-meta__tiles,
  .rentals-fullscreen-meta { gap: 6px !important; padding: 8px var(--pkm-gutter) !important; }

  /* 3.6.3 Карточка списка — 3 строки с иерархией вместо столбика
     «поле: значение». Раскладку задаём областями грида: заголовок и
     статус в одну строку, клиент — второй, факты — третьей. */
  .app-modal--fullscreen .dashboard-list-card {
    display: grid !important;
    /* 3 колонки: заголовок тянется, справа — счётчик дней и статус,
       всё в ОДНОЙ строке. Остальное идёт полными строками ниже. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 3px 8px !important;
    align-items: center;
    padding: 12px var(--pkm-gutter) !important;
    margin: 0 0 1px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pk-line, rgba(15, 23, 42, 0.07)) !important;
    box-shadow: none !important;
  }
  .app-modal--fullscreen .dashboard-list-card__title {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--pk-display) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em;
    margin: 0 !important;
    /* Длинные ФИО переносим на вторую строку, а не обрезаем: обрезка
       без многоточия съедала конец фамилии. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app-modal--fullscreen .dashboard-list-card__status {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap;
  }
  /* Строка клиента: подпись «Клиент:» на телефоне лишняя — имя и так
     очевидно; сам линк делаем заметным. */
  .app-modal--fullscreen .rentals-fullscreen-card__client-line > span:first-child { display: none; }
  .app-modal--fullscreen .rentals-fullscreen-card__client-line button {
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--pk-primary, #7C5CFF) !important;
    font-weight: 700;
    text-align: left;
  }
  /* Строки-факты — мелким, каждая на всю ширину; подпись и значение
     держим в одной строке (иначе «До:» и дата разъезжались на две). */
  .app-modal--fullscreen .dashboard-list-card__line,
  .app-modal--fullscreen .dashboard-list-card__meta {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--pk-slate, #5b6474);
  }
  /* Ссылки внутри строк-фактов (имя клиента) — в ту же строку, что и
     подпись, и в брендовом цвете вместо системного синего. */
  .app-modal--fullscreen .dashboard-list-card__line a,
  .app-modal--fullscreen .dashboard-list-card__line button {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--pk-primary, #7C5CFF) !important;
    font-size: inherit !important;
    font-weight: 700;
    text-align: left;
  }

  /* Плашка «осталось дней» — тоже в строку заголовка, между ним и статусом */
  .app-modal--fullscreen .dashboard-list-card .rental-days-badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
  }

  /* Строка клиента — сразу под заголовком, на всю ширину */
  .app-modal--fullscreen .rentals-fullscreen-card__client-line { grid-column: 1 / -1; }

  /* «До:» и дата — строго в одну строку. База ставит этой строке
     flex-direction:column (style.css §5697), поэтому значение падало
     под подпись — направление нужно перебить явно. */
  .app-modal--fullscreen .rentals-fullscreen-card__term-line {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 5px !important;
  }
  .app-modal--fullscreen .rentals-fullscreen-card__due-value,
  .app-modal--fullscreen .rentals-fullscreen-card__term-line > span {
    display: inline !important;
    white-space: nowrap;
  }
  .app-modal--fullscreen .dashboard-list-card__actions {
    grid-column: 1 / -1;
    margin-top: 8px !important;
  }

  /* 3.6.4 Шапка экрана = app bar приложения: ОДНА строка 52px —
     заголовок, компактное действие, закрыть. Раньше шапка переносилась
     в две строки, а половину её занимал переключатель «список/карточки».
     На телефоне вид всегда карточками, поэтому переключатель убираем. */
  .app-modal--fullscreen > .modal-header,
  .app-modal--fullscreen > .leads-modal__header,
  .app-modal--fullscreen > .device-card__header {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px var(--pkm-gutter) !important;
    /* ВАЖНО: фон НЕ наследуем — у части экранов шапка тёмная, и inherit
       делал её светлой, а белый заголовок пропадал на белом. У «Заявок»
       фон задан в базе с высоким весом, поэтому !important. */
    background: var(--pk-ink, #0E1525) !important;
  }
  .app-modal--fullscreen > .modal-header .modal-title,
  .app-modal--fullscreen > .leads-modal__header .modal-title,
  .app-modal--fullscreen > .device-card__header .device-card__title {
    color: #fff !important;
  }
  .app-modal--fullscreen > .modal-header .modal-close-x,
  .app-modal--fullscreen > .leads-modal__header .modal-close-x,
  .app-modal--fullscreen > .device-card__header .device-card__close-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
  }

  /* Пояснения под заголовком — десктопная роскошь */
  .app-modal--fullscreen .modal-subtitle,
  .app-modal--fullscreen .device-card__meta,
  .app-modal--fullscreen .device-card__category,
  .app-modal--fullscreen .dashboard-screen__section-subtitle,
  .app-modal--fullscreen .rentals-fullscreen-section__subtitle,
  .app-modal--fullscreen .clients-fullscreen-section__subtitle,
  .app-modal--fullscreen .fleet-fullscreen-section__subtitle { display: none !important; }

  /* Заголовок часто завёрнут в .modal-title-group — тянуться должна
     именно обёртка, иначе заголовок сжимается в ноль. */
  .app-modal--fullscreen > .modal-header .modal-title-group,
  .app-modal--fullscreen > .leads-modal__header .modal-title-group {
    flex: 1 1 auto;
    min-width: 0;
  }
  .app-modal--fullscreen .modal-title,
  .app-modal--fullscreen > .device-card__header .device-card__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-modal--fullscreen .modal-header-actions,
  .app-modal--fullscreen .device-card__header-right {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 6px !important;
  }

  /* Переключатель «список/карточки» — не нужен на телефоне */
  .app-modal--fullscreen .view-mode-toggle { display: none !important; }

  /* Действия в шапке — компактные, не растягиваются на пол-строки */
  .app-modal--fullscreen > .device-card__header .fleet-btn,
  .app-modal--fullscreen > .modal-header button {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .app-modal--fullscreen > .device-card__header .device-card__close-btn,
  .app-modal--fullscreen .modal-close-x {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  /* Обёртка плиток тоже должна жить в пределах экрана — иначе скроллится
     она сама, а не лента внутри (было #fleetFullscreenMeta 432>390). */
  .dashboard-screen__meta,
  #fleetFullscreenMeta,
  #rentalsFullscreenMeta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Ряды плиток-показателей: горизонтальная лента со «схлопнутым» краем,
     а не обрезанные плитки (было 654>390 во флоте). */
  .fleet-fullscreen-meta__tiles,
  .rentals-fullscreen-meta {
    width: 100%;
    max-width: 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .fleet-fullscreen-meta__tiles::-webkit-scrollbar,
  .rentals-fullscreen-meta::-webkit-scrollbar { display: none; }
  .fleet-fullscreen-meta__item,
  .rentals-fullscreen-meta > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Тулбары/фильтры: ничего не выпирает за экран.
     НЕ трогаем display/flex-direction — база уже раскладывает тулбар
     колонкой на узких экранах; достаточно снять фиксированные ширины
     у детей и запретить им распирать контейнер. */
  .app-modal--fullscreen .dashboard-screen__toolbar,
  .app-modal--fullscreen .dashboard-screen__toolbar--analytics,
  .app-modal--fullscreen .dashboard-screen__toolbar--fleet,
  .app-modal--fullscreen .dashboard-screen__toolbar--rentals,
  .settings-content__topbar,
  .settings-section__toolbar,
  #employeeAuditModalControls,
  #employeeAuditModalBody {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .app-modal--fullscreen .dashboard-screen__toolbar > *,
  .app-modal--fullscreen .dashboard-screen__toolbar--analytics > *,
  .app-modal--fullscreen .dashboard-screen__toolbar--fleet > *,
  .app-modal--fullscreen .dashboard-screen__toolbar--rentals > *,
  #employeeAuditModalControls > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  /* Вложенные группы контролов тоже складываем колонкой */
  .app-modal--fullscreen .dashboard-screen__controls,
  .app-modal--fullscreen .dashboard-screen__controls--analytics,
  .app-modal--fullscreen .dashboard-screen__controls--fleet,
  .app-modal--fullscreen .dashboard-screen__aside {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Ленты табов внутри экранов (разделы флота, разделы настроек) —
     честный горизонтальный скролл вместо уезжающих за край кнопок. */
  .fleet-fullscreen-tabs,
  .fleet-module__tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fleet-fullscreen-tabs::-webkit-scrollbar,
  .fleet-module__tabs::-webkit-scrollbar { display: none; }
  .fleet-fullscreen-tabs > *,
  .fleet-module__tabs > * { flex: 0 0 auto; }

  /* Шапка раздела флота: заголовок + закрыть в одной строке, кнопки
     действий — строкой ниже. Раньше «✕» переносился отдельной строкой
     под кнопками и читался как ещё одно действие. */
  /* Шапка раздела флота — такой же app bar в одну строку: заголовок,
     компактные действия, закрыть. Было: три ряда на пол-экрана. */
  .fleet-content__topbar {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px var(--pkm-gutter) !important;
    background: var(--pk-ink, #0E1525);
  }
  .fleet-content__title {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff !important;
    font-size: 17px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fleet-content__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    margin-left: auto;
  }
  /* На узком экране в шапке помещается одно действие — «Устройство».
     «Создать пачкой» и массовые операции остаются на десктопе. */
  .fleet-content__actions #fleetBatchCreateBtn,
  .fleet-content__actions #fleetSelectModeBtn,
  .fleet-content__actions #fleetDeleteSelectedBtn { display: none !important; }
  .fleet-content__actions .fleet-btn {
    flex: 0 0 auto;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .fleet-content__topbar .fleet-close-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
  }
  .fleet-content__topbar .fleet-close-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Подзаголовки секций флота описывают РАСПОЛОЖЕНИЕ КОЛОНОК на десктопе
     («Левые два столбца…», «Правый нижний блок…»). На телефоне колонок
     нет — подсказка не просто лишняя, она неверная. */
  .fleet-fullscreen-section__subtitle { display: none; }

  /* Кнопки действий в карточках. Цвет НЕ перекрашиваем скопом: он несёт
     смысл (красная «Завершить», тёмная «Удалить»), и различаются кнопки
     только инлайновым стилем из app.js. Чужеродные синий/бирюзовый
     перекладывает на брендовые токены parkos-mobile.js — точечно.
     Здесь — только размер: кнопки компактные и переносятся по строке. */
  .dashboard-list-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .dashboard-list-card__actions > button {
    /* по 2–3 кнопки в ряд в зависимости от длины подписи */
    flex: 1 1 auto;
    min-width: 30%;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700;
  }

  /* ── 3.7 Настройки и формы: строго одна колонка ─────────────────── */
  /* Самый сломанный экран: сетки в 2 колонки ужимали поля до нечитаемых
     и уносили правую колонку за экран (432>308, 353>250). */
  /* Вся колоночная цепочка настроек рассчитана на десктоп жёсткими
     пикселями (layout 346px → detail-col 310px → form 272px), из-за чего
     содержимое уезжало за экран. На телефоне ширину задаёт экран. */
  .settings-module,
  .settings-content,
  .settings-section,
  .settings-section__body,
  .settings-section__body.settings-branches-layout,
  .settings-branches-list-col,
  .settings-branches-detail-col,
  .network-admin-form,
  .network-admin-subcard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .settings-branches-detail-col,
  .settings-branches-list-col { padding: 12px var(--pkm-gutter) !important; }
  .settings-card { padding: 14px !important; }

  .settings-card,
  .settings-section__grid,
  .network-admin-subcard,
  #networkBranchCredentialsForm,
  .branch-notify-contacts {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .settings-card > label,
  .settings-card > .settings-field,
  #networkBranchCredentialsForm > label,
  .branch-notify-contacts > label {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    box-sizing: border-box;
  }
  .settings-content input[type="text"],
  .settings-content input[type="email"],
  .settings-content input[type="password"],
  .settings-content input[type="number"],
  .settings-content input[type="search"],
  .settings-content input[type="time"],
  .settings-content input[type="date"],
  .settings-content select,
  .settings-content textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* График работы: день — строкой, время — парой полей под ним. */
  /* Сам редактор раскладывал дни в две колонки — на телефоне строго
     по одному дню в строку. */
  #networkBranchScheduleWrap,
  #networkBranchScheduleEditor {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .branch-schedule__row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px !important;
    padding: 10px 0 !important;
  }
  .branch-schedule__day { min-width: 0 !important; }
  .branch-schedule__times { width: 100%; }
  .branch-schedule__from,
  .branch-schedule__to {
    flex: 1 1 0;
    width: auto !important;
    min-height: 40px;
  }

  /* Переключатели-строки не должны быть шире экрана (234>128). */
  .settings-content label > input[type="checkbox"] { flex: 0 0 auto; }
  .settings-content label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── 3.8 Тач-цели ───────────────────────────────────────────────── */
  .app-modal button:not(.modal-close-x):not(.pkm-tab),
  .app-modal input:not([type="checkbox"]):not([type="radio"]),
  .app-modal select { min-height: 44px; }

  .app-modal .modal-close-x,
  .app-modal .fleet-close-btn,
  .app-modal .device-card__close-btn { min-width: 40px; min-height: 40px; }

  /* Мини-фильтры периода были 37px высотой. */
  .mobile-metrics-mini-filters .revenue-filter-button { min-height: 44px; }

  /* ── 3.9 Единый крестик закрытия во ВСЕХ окнах ──────────────────────
     Раньше: где-то текст «Закрыть», где-то ✕/× разного размера и не по
     центру. Приводим все кнопки закрытия (текстовые id$="Close" и глиф-
     крестики) к одному виду: квадрат 38px, ✕ по центру через SVG-маску. */
  body.pkm-shell.pkm-shell button[id$="Close"],
  body.pkm-shell.pkm-shell .modal-close-x,
  body.pkm-shell.pkm-shell .fleet-close-btn,
  body.pkm-shell.pkm-shell .device-card__close-btn,
  body.pkm-shell.pkm-shell .settings-content__close-btn,
  body.pkm-shell.pkm-shell .lcm-close-btn,
  body.pkm-shell.pkm-shell .qrs-close-btn {
    /* НЕ трогаем position — некоторые крестики абсолютно спозиционированы
       (напр. settings-content__close-btn); ::before центрируется флексом. */
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 1px solid var(--pk-line, #E7E9F2) !important;
    background: var(--pk-surface, #fff) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  /* прячем исходный текст «Закрыть» и дочерние глифы/иконки */
  body.pkm-shell.pkm-shell button[id$="Close"] > *,
  body.pkm-shell.pkm-shell .modal-close-x > *,
  body.pkm-shell.pkm-shell .fleet-close-btn > *,
  body.pkm-shell.pkm-shell .device-card__close-btn > *,
  body.pkm-shell.pkm-shell .settings-content__close-btn > *,
  body.pkm-shell.pkm-shell .lcm-close-btn > *,
  body.pkm-shell.pkm-shell .qrs-close-btn > * { display: none !important; }
  /* сам крестик — SVG-маска, идеально по центру независимо от шрифта */
  body.pkm-shell.pkm-shell button[id$="Close"]::before,
  body.pkm-shell.pkm-shell .modal-close-x::before,
  body.pkm-shell.pkm-shell .fleet-close-btn::before,
  body.pkm-shell.pkm-shell .device-card__close-btn::before,
  body.pkm-shell.pkm-shell .settings-content__close-btn::before,
  body.pkm-shell.pkm-shell .lcm-close-btn::before,
  body.pkm-shell.pkm-shell .qrs-close-btn::before {
    content: "" !important;
    width: 16px; height: 16px;
    background-color: var(--pk-slate, #475069);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  }
  /* На тёмных шапках — светлый крестик и полупрозрачная подложка */
  body.pkm-shell.pkm-shell .device-card__header button[id$="Close"],
  body.pkm-shell.pkm-shell .device-card__header .device-card__close-btn,
  body.pkm-shell.pkm-shell .fleet-content__topbar .fleet-close-btn,
  body.pkm-shell.pkm-shell .app-modal--fullscreen > .modal-header button[id$="Close"],
  body.pkm-shell.pkm-shell .app-modal--fullscreen > .modal-header .modal-close-x,
  body.pkm-shell.pkm-shell .app-modal--fullscreen > .leads-modal__header button[id$="Close"] {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
  body.pkm-shell.pkm-shell .device-card__header button[id$="Close"]::before,
  body.pkm-shell.pkm-shell .device-card__header .device-card__close-btn::before,
  body.pkm-shell.pkm-shell .fleet-content__topbar .fleet-close-btn::before,
  body.pkm-shell.pkm-shell .app-modal--fullscreen > .modal-header button[id$="Close"]::before,
  body.pkm-shell.pkm-shell .app-modal--fullscreen > .modal-header .modal-close-x::before,
  body.pkm-shell.pkm-shell .app-modal--fullscreen > .leads-modal__header button[id$="Close"]::before {
    background-color: #fff;
  }

  /* ── 3.10 Боковое меню Флота/Настроек = выдвижной левый дровер ───────
     Раньше сайдбар был горизонтальной лентой-табами в шапке (её мотало).
     Теперь — настоящий левый дровер: скрыт за краем, выезжает по
     гамбургеру, затемнение и выбор пункта закрывают. Разметку готовит
     parkos-mobile.js (класс .pkm-mdrawer + гамбургер + .pkm-mdrawer-overlay). */
  body.pkm-shell .pkm-mdrawer {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: min(300px, 84%) !important;
    min-width: 0 !important;
    max-width: 84% !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    z-index: 40 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 8px 0 34px rgba(8, 12, 24, 0.4);
    padding: calc(10px + var(--pkm-safe-t)) 8px 12px !important;
  }
  body.pkm-shell .pkm-mdrawer.is-open { transform: translateX(0); }
  /* внутри дровера — вертикальный список, шапка-логотип видна */
  body.pkm-shell .pkm-mdrawer .settings-sidebar__header,
  body.pkm-shell .pkm-mdrawer .fleet-sidebar__header { display: block !important; }
  body.pkm-shell .pkm-mdrawer .settings-sidebar__item,
  body.pkm-shell .pkm-mdrawer .fleet-sidebar__item {
    width: 100% !important;
    border-left: none !important;
    border-bottom: none !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
    min-height: 46px;
  }

  body.pkm-shell .pkm-mdrawer-overlay {
    position: absolute;
    inset: 0;
    z-index: 39;
    background: rgba(8, 12, 24, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  body.pkm-shell .pkm-mdrawer-overlay.is-open { opacity: 1; pointer-events: auto; }

  /* Гамбургер — первым в шапке раздела (слева от заголовка) */
  body.pkm-shell .pkm-mdrawer-toggle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--pk-line, #E7E9F2);
    background: var(--pk-surface-2, #F1F2F8);
    color: var(--pk-ink, #0E1525);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.pkm-shell .pkm-mdrawer-toggle svg { width: 20px; height: 20px; }
  /* На тёмной шапке флота — светлый гамбургер */
  body.pkm-shell .fleet-content__topbar .pkm-mdrawer-toggle {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  /* Настройки: крестик закрытия в правом верхнем углу окна.
     ВАЖНО: у него в style.css правило #networkAdminModal #networkAdminCloseBtn
     (специфичность 2,0,0) — перебиваем ДВУМЯ id + body, иначе глиф двоится
     (не прячется) и ::before-крестик накладывается. */
  body.pkm-shell #networkAdminModal #networkAdminCloseBtn {
    /* fixed, а не absolute: иначе крестик уезжал при скролле контента и
       налезал на карточки. Модал full-screen без transform → fixed = от
       вьюпорта, ровно в углу app-bar рядом с гамбургером слева. */
    position: fixed !important;
    top: calc(9px + var(--pkm-safe-t)) !important;
    right: var(--pkm-gutter) !important;
    left: auto !important;
    z-index: 12 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 1px solid var(--pk-line, #E7E9F2) !important;
    background: var(--pk-surface, #fff) !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  body.pkm-shell #networkAdminModal #networkAdminCloseBtn > * { display: none !important; }
  body.pkm-shell #networkAdminModal #networkAdminCloseBtn::before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    background-color: var(--pk-slate, #475069) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
  }
  /* Шапка раздела настроек — под вырез (safe-t) + место справа под fixed-
     крестик, чтобы гамбургер, заголовок и ✕ были в одной строке app-bar. */
  body.pkm-shell #networkAdminModal .settings-content__topbar {
    padding-top: calc(var(--pkm-safe-t) + 8px) !important;
    padding-right: 58px !important;
  }

/* ---------------------------------------------------------------------
   2. Планшет (769–1179px) — доводки поверх компактной раскладки.
   Базовый дровер/панели уже приходят из style.css; здесь только то,
   что приятнее сделать шире/удобнее на планшетном экране.
   --------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1179px) {
  /* Выезжающее меню чуть шире, чем на телефоне — удобнее тапать. */
  .mobile-nav-drawer {
    width: min(360px, calc(100vw - 64px));
  }

  /* Пункты меню повыше — крупнее зона нажатия на планшете. */
  .mobile-nav-drawer .desktop-sidebar__link {
    min-height: 54px;
  }
}