/*
 * Zlata mobile layer — independent styles via media queries.
 * Loaded on all pages; active only on narrow viewports and in standalone PWA mode.
 */

:root {
  --zlata-mobile-gutter: 12px;
  --zlata-mobile-touch-min: 44px;
}

@media (max-width: 900px) {
  :root {
    --zlata-mobile-nav-font: 11px;
    --zlata-mobile-nav-pad-y: 4px;
    --zlata-mobile-nav-pad-x: 8px;
    --zlata-mobile-nav-gap: 4px;
    --zlata-mobile-nav-min-height: 32px;
  }

  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
    max-width: 100vw;
    min-width: 0;
  }

  body > :not(.zlata-topbar):not(script):not(style):not(link) {
    max-width: 100vw;
    overflow-x: clip;
    box-sizing: border-box;
  }

  /* Tractor /purchasing: fill shell owns overflow — generic clip kills table pan */
  body.tt-page > .page,
  body.tt-page > #ttPage {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
  }

  /* Family A: clip-exception as tt-page (not overflow-x:clip on fill shell) */
  body.zl-mobile-registry > .page,
  body.zl-mobile-registry > .zl-table-page,
  body:has(.zl-table-page--fill) > .zl-table-page--fill,
  body:has(.zl-table-page--fill) > .page,
  body:has(.zl-table-page--fill) > .zl-table-page,
  body:has(#documentsTable) > main.zlata-page {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
  }

  /* Order: do not clip body children — kills h-scroll + qty focus on iOS */
  body.order-page > .order-page-controls,
  body.order-page > .order-page-table-section {
    max-width: 100vw !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .zlata-page,
  .dela-page,
  .mail-shell,
  .max-shell,
  .sl-kartochka,
  body:has(#scheduleTable),
  body > main {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* order-page: no overflow-x clip here — table viewport needs real scroll + pinch */

  .dela-page p,
  .dela-page span,
  .dela-page div,
  .dela-page td,
  .dela-page th,
  .dela-page li,
  .dela-page h1,
  .dela-page h2,
  .dela-page h3,
  .dela-page label,
  .zlata-page span,
  .zlata-page div,
  .zlata-page td,
  .zlata-page th,
  .zlata-page li,
  .zlata-page h1,
  .zlata-page h2,
  .zlata-page h3,
  .zlata-page label,
  .max-shell p,
  .max-shell span,
  .max-shell div,
  .max-shell td,
  .max-shell th,
  .max-shell li,
  .max-shell h1,
  .max-shell h2,
  .max-shell h3,
  .max-shell label,
  .sl-kartochka p,
  .sl-kartochka span,
  .sl-kartochka div,
  body > main p,
  body > main span,
  body > main div {
    max-width: 100%;
  }

  .zlata-nav-primary-track {
    max-width: 100%;
  }

  .zlata-nav-primary-track .zlata-nav-dropdown-button {
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .zlata-nav-primary-track .zlata-nav-dropdown {
    touch-action: manipulation;
  }

  .zlata-nav-dropdown.open .zlata-nav-dropdown-menu,
  .zlata-nav-dropdown-menu.zlata-mobile-nav-menu-open {
    display: grid !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: calc(var(--zlata-topbar-z, 200010) + 20);
    max-height: min(60vh, calc(100dvh - var(--zlata-topbar-height, 44px) - 24px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    gap: 4px;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.28);
  }

  img,
  video,
  iframe,
  svg,
  canvas {
    max-width: 100%;
    height: auto;
  }

  .zlata-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 8px var(--zlata-mobile-gutter);
    overflow-x: clip;
  }

  .zlata-page input,
  .zlata-page select,
  .zlata-page textarea,
  .zlata-page button {
    max-width: 100%;
  }

  .zlata-topbar,
  .zlata-topbar * {
    box-sizing: border-box;
  }

  .zlata-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand primary aside";
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    min-height: var(--zlata-topbar-height, 44px);
    overflow: visible;
    padding: 6px max(8px, env(safe-area-inset-left)) 4px max(8px, env(safe-area-inset-right));
  }

  .zlata-brand {
    grid-area: brand;
    flex-shrink: 0;
  }

  .zlata-brand-logo {
    height: 28px;
    max-width: 72px;
  }

  .zlata-nav-primary {
    grid-area: primary;
    overflow: hidden;
    min-width: 0;
  }

  .zlata-nav-aside {
    grid-area: aside;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    flex-shrink: 0;
  }

  .zlata-topbar button,
  .zlata-topbar .zlata-nav-link,
  .zlata-topbar .zlata-nav-dropdown {
    max-width: none;
    width: auto;
  }

  .zlata-nav-primary-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: manipulation;
    align-items: center;
    gap: var(--zlata-mobile-nav-gap);
    width: 100%;
    min-width: 0;
    scrollbar-width: none;
  }

  .zlata-nav-primary-track::-webkit-scrollbar {
    display: none;
  }

  .zlata-nav-singles,
  .zlata-nav-groups {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
  }

  .zlata-nav-primary-track .zlata-nav-singles > .zlata-nav-link,
  .zlata-nav-primary-track .zlata-nav-groups > .zlata-nav-dropdown {
    flex: 0 0 auto;
    flex-shrink: 0;
    max-width: none;
    min-width: 0;
  }

  .zlata-nav-primary-track .zlata-nav-link,
  .zlata-nav-primary-track .zlata-nav-dropdown-button {
    font-size: var(--zlata-mobile-nav-font);
    padding: var(--zlata-mobile-nav-pad-y) var(--zlata-mobile-nav-pad-x);
    min-height: var(--zlata-mobile-nav-min-height);
  }

  .zlata-nav-primary-track .zlata-nav-groups > .zlata-nav-dropdown .zlata-nav-dropdown-button {
    max-width: none;
  }

  .zlata-nav-primary-track .zlata-nav-dropdown-label {
    overflow: visible;
    text-overflow: unset;
    max-width: none;
  }

  @media (hover: none) {
    .zlata-nav-dropdown:not(.open) .zlata-nav-dropdown-menu:not(.zlata-mobile-nav-menu-open) {
      display: none !important;
    }

    .zlata-nav-dropdown:hover .zlata-nav-dropdown-menu {
      display: none !important;
    }

    .zlata-nav-dropdown.open .zlata-nav-dropdown-menu,
    .zlata-nav-dropdown-menu.zlata-mobile-nav-menu-open {
      display: grid !important;
    }
  }

  .zlata-nav-logout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px 6px !important;
    min-height: var(--zlata-mobile-nav-min-height);
    max-width: 36px !important;
    min-width: 32px;
    overflow: hidden;
  }

  .zlata-nav-logout-text {
    display: none !important;
  }

  .zlata-nav-logout::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M7.5 6.8A7 7 0 1 0 16.5 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M7.5 6.8A7 7 0 1 0 16.5 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .zlata-notification-button {
    padding: 4px 6px;
    min-height: var(--zlata-mobile-nav-min-height);
  }

  .zlata-notification-panel {
    width: min(340px, calc(100vw - 24px));
    right: max(0px, env(safe-area-inset-right));
  }

  .zlata-notification-panel.zlata-mobile-notification-open {
    display: block !important;
    position: fixed !important;
    z-index: calc(var(--zlata-topbar-z, 200010) + 25);
    width: min(340px, calc(100vw - 24px));
    max-height: min(420px, calc(100dvh - var(--zlata-topbar-height, 44px) - 24px));
    overflow: hidden;
  }

  .zlata-notification-panel.zlata-mobile-notification-open .zlata-notification-list {
    max-height: min(360px, calc(100dvh - var(--zlata-topbar-height, 44px) - 80px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zlata-page table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zlata-page pre,
  .zlata-page .modal,
  .zlata-page .modal-backdrop {
    max-width: 100vw;
  }

  .max-shell {
    height: calc(100dvh - var(--zlata-topbar-height, 44px));
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px));
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    display: flex;
  }

  /* List mode: full-width chat list (like desktop sidebar) */
  .max-sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    border-right: none;
  }

  .max-sidebar-head {
    padding: 12px 14px 8px;
  }

  .max-sidebar-head h1 {
    font-size: 22px;
  }

  .max-search {
    font-size: 15px;
    padding: 10px 14px;
    margin: 0 12px 10px;
    width: calc(100% - 24px);
  }

  .max-chat-list {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .max-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .max-avatar-wrap {
    width: 48px;
  }

  .max-chat-item {
    padding: 10px 12px;
    gap: 10px;
    align-items: flex-start;
  }

  .max-chat-body {
    min-width: 0;
    flex: 1;
  }

  .max-chat-title {
    font-size: 15px;
  }

  .max-chat-preview {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .max-chat-time {
    font-size: 11px;
    flex-shrink: 0;
  }

  .max-chat-bind {
    display: block;
    font-size: 11px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .max-main {
    display: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .max-main-empty {
    display: none !important;
  }

  /* Thread mode: fullscreen chat with back button */
  body.max-chat-open .max-sidebar {
    display: none !important;
  }

  body.max-chat-open .max-main {
    display: flex !important;
    flex: 1;
    width: 100%;
    min-width: 0;
  }

  body.max-chat-open #maxThread {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .max-thread-head {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }

  .max-group-participants {
    order: 10;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .max-group-participant {
    min-width: 120px;
    flex-shrink: 0;
  }

  .max-thread-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .max-link-company-btn,
  .max-request-phone-btn {
    font-size: 12px;
    padding: 6px 8px;
    white-space: normal;
    text-align: center;
  }

  .max-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .max-composer {
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px;
  }

  .max-composer-input {
    font-size: 16px;
  }

  .max-mobile-back {
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    padding: 2px 8px 2px 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  body.max-chat-open .max-mobile-back {
    display: inline-flex;
  }

  .max-company-popover {
    position: fixed;
    inset: auto 8px 8px 8px;
    top: calc(var(--zlata-topbar-height, 44px) + 8px);
    width: auto;
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px) - 16px);
    z-index: calc(var(--zlata-topbar-z, 200010) + 20);
  }

  /* Mail — all pages via render_mail_page */
  .mail-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    height: calc(100dvh - var(--zlata-topbar-height, 44px));
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px));
    overflow: hidden;
  }

  .mail-sidebar {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    padding: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .mail-sidebar-title,
  .mail-sidebar-mailbox {
    display: none;
  }

  .mail-compose {
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0 auto 10px;
    padding: 0;
    font-size: 0;
    line-height: 36px;
    border-radius: 10px;
    position: relative;
  }

  .mail-compose::before {
    content: "\270E";
    font-size: 16px;
    line-height: 1;
  }

  .mail-folder {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 10px 4px;
    border-left: none;
    position: relative;
  }

  .mail-folder.is-active {
    background: #fff7d1;
    border-radius: 8px;
    margin: 0 4px;
  }

  .mail-folder-label,
  .mail-folder-badge {
    display: none;
  }

  .mail-folder.has-unread::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
  }

  .mail-folder-icon {
    width: auto;
    font-size: 18px;
    opacity: 1;
    line-height: 1;
  }

  .mail-workspace {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .mail-list-panel {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    border-right: none;
  }

  .mail-list-panel.has-view {
    flex: 1;
    max-width: 100%;
  }

  .mail-toolbar {
    padding: 6px 8px;
    gap: 4px;
  }

  .mail-search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    order: 10;
  }

  .mail-list {
    overflow-x: hidden;
  }

  .mail-row {
    grid-template-columns: 18px 34px minmax(0, 1fr);
    gap: 6px;
    padding: 8px 6px;
    align-items: center;
  }

  .mail-row-left-badges {
    display: none;
  }

  .mail-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
  }

  .mail-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .mail-row-from {
    max-width: none;
    font-size: 13px;
  }

  .mail-row-top-right {
    gap: 4px;
  }

  .mail-row-unsub,
  .mail-row-attaches,
  .mail-row-attach-chip {
    display: none;
  }

  .mail-row-date {
    font-size: 10px;
    flex-shrink: 0;
  }

  .mail-row-snippet {
    font-size: 12px;
  }

  .mail-view-panel.is-open {
    display: flex;
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .mail-view-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px 8px;
  }

  .mail-mobile-back {
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #222;
    font-size: 22px;
    line-height: 1;
    padding: 2px 8px 2px 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  body.mail-view-open .mail-mobile-back {
    display: inline-flex;
  }

  body.mail-view-open .mail-sidebar,
  body.mail-view-open .mail-list-panel {
    display: none !important;
  }

  body.mail-view-open .mail-shell {
    height: calc(100dvh - var(--zlata-topbar-height, 44px));
  }

  body.mail-view-open .mail-view-panel {
    display: flex !important;
    flex: 1;
    width: 100%;
    min-width: 0;
  }

  body.mail-view-open #btnBackToList {
    display: none;
  }

  body.mail-view-open .mail-view-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "back subject"
      "meta meta";
    align-items: start;
    gap: 4px 8px;
  }

  body.mail-view-open .mail-mobile-back {
    grid-area: back;
    display: inline-flex;
    align-self: center;
  }

  body.mail-view-open .mail-view-subject {
    grid-area: subject;
    font-size: 16px;
    margin: 0;
    min-width: 0;
  }

  body.mail-view-open .mail-view-meta {
    grid-area: meta;
    padding-left: 0;
  }

  body.mail-view-open .mail-view-actions {
    padding: 8px 12px;
    gap: 6px;
  }

  body.mail-view-open .mail-view-actions button {
    padding: 8px 12px;
    font-size: 13px;
  }

  body.mail-view-open .mail-view-body {
    padding: 12px;
    overflow-x: hidden;
    word-break: break-word;
  }

  .mail-modal-backdrop .mail-modal {
    width: min(420px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .dela-toolbar {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 6px;
  }

  .dela-toolbar .dela-search {
    margin-left: 0;
    width: 100%;
  }

  .dela-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .dela-columns {
    min-width: min-content;
  }

  .dela-column {
    width: min(75vw, 220px);
    min-width: 120px;
    max-width: 75vw;
    flex-shrink: 0;
  }

  /*
   * Lab pages: /order + /raspisanie_sotrudnikov
   * — top panel ≤25% viewport, horizontal scroll preserves desktop control layout
   * — tables: first column pinned 15vw, body scrolls horizontally
   * Tokens = family B (zlata_mobile_layout_family_b_v1)
   */
  :root {
    --zlata-mobile-panel-max-height: 20dvh;
    --zlata-mobile-sticky-col-width: 15vw;
    --zlata-mobile-extra-row-height: 36px;
  }

  /*
   * Family B (etalon /order): chrome X + subband X independently; page Y; pin 15vw.
   * Family A = fill viewport, table X+Y (deals/specs/purchasing) — later START.
   * /order maps via grouped selectors — keep DOM ids (#orderTable, .order-page-controls).
   * Marker: zlata_mobile_layout_family_b_v1
   */
  .zl-mobile-chrome,
  body.order-page .order-page-controls {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: var(--zlata-mobile-panel-max-height) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: auto !important;
    z-index: 50 !important;
    background: #f3f6fa !important;
    contain: none !important;
    box-shadow: 0 1px 0 #d0d7de !important;
  }

  .zl-mobile-subband,
  body.order-page .extra-assortment-block {
    position: sticky !important;
    top: var(--zlata-mobile-panel-max-height) !important;
    z-index: 45 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    box-shadow: 0 1px 0 #d0d7de !important;
  }

  .zl-mobile-subband.is-collapsed,
  body.order-page .extra-assortment-block.is-collapsed {
    height: var(--zlata-mobile-extra-row-height) !important;
    max-height: var(--zlata-mobile-extra-row-height) !important;
  }

  .zl-mobile-subband:not(.is-collapsed),
  body.order-page .extra-assortment-block:not(.is-collapsed) {
    height: auto !important;
    max-height: min(28dvh, 220px) !important;
  }

  .zl-mobile-grid,
  body.order-page .order-table-viewport {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: auto !important;
    background: #fff !important;
  }

  /* Generic pin for pages that add .zl-mobile-grid; /order pin stays data-order-col="position" */
  .zl-mobile-grid > table thead th:first-child,
  .zl-mobile-grid > table tbody td:first-child {
    width: var(--zlata-mobile-sticky-col-width) !important;
    min-width: var(--zlata-mobile-sticky-col-width) !important;
    max-width: var(--zlata-mobile-sticky-col-width) !important;
    box-sizing: border-box !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 25 !important;
    background: #fff !important;
    box-shadow: 2px 0 0 #d0d7de !important;
  }

  /*
   * Order mobile: static document flow (not nested 100dvh scrollports).
   * Pinch-zoom must work; tables must not drift as independent flex panes.
   * Marker: zlata_mobile_order_static_zoom
   */
  body.order-page {
    display: block !important;
    /* overflow-y must stay visible: document scrolls on html; body overflow-y:auto
       creates a dead sticky scrollport and the top menu scrolls away */
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    touch-action: auto !important;
  }

  body.order-page > header.zlata-topbar,
  body.order-page > .zlata-topbar {
    position: relative !important;
  }

  body.order-page > main.zlata-page {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body.order-page .top-box {
    min-width: 980px !important;
    width: max-content !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.order-page .top-box .pole,
  body.order-page .top-box .vybor,
  body.order-page .top-box .poisk,
  body.order-page .top-box input,
  body.order-page .top-box select,
  body.order-page .top-box button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  /* Marker: zlata_mobile_order_extra_onerow — inner extra table; band chrome = .zl-mobile-subband */
  body.order-page .extra-assortment-panel,
  body.order-page .extra-assortment-table-viewport {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    max-height: inherit !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: auto !important;
  }

  body.order-page .extra-assortment-block.is-collapsed .extra-assortment-table-viewport,
  body.order-page .extra-assortment-block.is-collapsed #extraAssortmentTable,
  body.order-page .extra-assortment-block.is-collapsed #extraAssortmentTable thead,
  body.order-page .extra-assortment-block.is-collapsed #extraAssortmentTable thead tr {
    height: var(--zlata-mobile-extra-row-height) !important;
    max-height: var(--zlata-mobile-extra-row-height) !important;
  }

  body.order-page #extraAssortmentTable {
    margin: 0 !important;
    border-collapse: collapse !important;
  }

  body.order-page #extraAssortmentTable th.order-col-head,
  body.order-page #extraAssortmentTable td {
    padding: 0 4px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    height: var(--zlata-mobile-extra-row-height) !important;
    max-height: var(--zlata-mobile-extra-row-height) !important;
    min-height: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.order-page #extraAssortmentTable thead th {
    height: var(--zlata-mobile-extra-row-height) !important;
    max-height: var(--zlata-mobile-extra-row-height) !important;
    white-space: nowrap !important;
    position: static !important;
    top: auto !important;
  }

  body.order-page #extraAssortmentTable .extra-assortment-position-head-inner,
  body.order-page #extraAssortmentTable .extra-assortment-head-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-height: var(--zlata-mobile-extra-row-height) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body.order-page #extraAssortmentTable .extra-assortment-toggle-btn,
  body.order-page #extraAssortmentTable .extra-assortment-add-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    line-height: 28px !important;
  }

  body.order-page #orderTable th.order-col-head {
    padding: 2px 4px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    height: 30px !important;
    max-height: 30px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.order-page #orderTable thead {
    height: 30px !important;
  }

  body.order-page.zlata-mobile-order-layout .zlata-mobile-order-cell-inner {
    display: block;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  body.order-page .order-page-table-section {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /*
   * Marker: zlata_mobile_order_flush_extra_main — hide fresh-prices strip.
   * Marker: zlata_mobile_order_main_hscroll_v1 — h-scroll columns in viewport.
   * Marker: zlata_mobile_order_rows_page_scroll_v1 — no nested max-height sticky
   * pane (that trapped touch Y-scroll so lower rows looked "not loaded").
   */
  body.order-page .order-fresh-prices-status {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  html:has(body.order-page) {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  /*
   * Marker: zlata_mobile_order_qty_input — active qty/sale above sticky pin;
   * hide inactive kg/pcs twin so taps are not swallowed by disabled field.
   */
  body.order-page #orderTable tbody td[data-order-col="qty_kg"],
  body.order-page #orderTable tbody td[data-order-col="qty_pcs"],
  body.order-page #orderTable tbody td[data-order-col="sale_price"],
  body.order-page #extraAssortmentTable tbody td[data-order-col="qty_kg"],
  body.order-page #extraAssortmentTable tbody td[data-order-col="qty_pcs"],
  body.order-page #extraAssortmentTable tbody td[data-order-col="sale_price"] {
    overflow: visible !important;
    position: relative !important;
    z-index: 8 !important;
    min-width: 4.75rem !important;
    pointer-events: auto !important;
    background: #fff !important;
  }

  body.order-page #orderTable input.qty-kg-input,
  body.order-page #orderTable input.qty-pcs-input,
  body.order-page #orderTable input.qty-input,
  body.order-page #orderTable input.sale-input,
  body.order-page #orderTable input.calc-input,
  body.order-page #extraAssortmentTable input.qty-kg-input,
  body.order-page #extraAssortmentTable input.qty-pcs-input,
  body.order-page #extraAssortmentTable input.qty-input,
  body.order-page #extraAssortmentTable input.sale-input,
  body.order-page #extraAssortmentTable input.calc-input {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 9 !important;
    min-height: 40px !important;
    min-width: 3.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    background: #fff !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 4px !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  body.order-page #orderTable input.qty-input-inactive,
  body.order-page #extraAssortmentTable input.qty-input-inactive,
  body.order-page #orderTable input.qty-kg-input:disabled,
  body.order-page #orderTable input.qty-pcs-input:disabled,
  body.order-page #extraAssortmentTable input.qty-kg-input:disabled,
  body.order-page #extraAssortmentTable input.qty-pcs-input:disabled {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /*
   * Kill desktop selected-row vertical sticky (z-index 3625) — rows must stay
   * in document flow so pinch-zoom does not float them as separate panes.
   * Marker: zlata_mobile_order_no_row_float
   */
  body.order-page #orderTable tr.item-row.selected-order-row td,
  body.order-page #orderTable tr.item-row.selected-order-row td.num,
  body.order-page #orderTable tr.item-row.selected-order-row td[data-order-col] {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  html body.order-page #orderTable tr.item-row.selected-order-row td[data-order-col="position"],
  html body.order-page #orderTable tr.item-row.selected-order-row td.order-item-name {
    position: sticky !important;
    left: 0 !important;
    top: auto !important;
    z-index: 25 !important;
  }

  /*
   * Marker: zlata_mobile_order_thead_align — all main-table head cells one row.
   * Marker: zlata_mobile_order_main_hscroll_v1 — thead top:0 inside table viewport.
   */
  body.order-page #orderTable,
  body.order-page #extraAssortmentTable {
    width: max-content !important;
    min-width: 100% !important;
  }

  body.order-page #orderTable thead {
    position: static !important;
    z-index: auto !important;
  }

  body.order-page #orderTable thead tr.order-table-header-row,
  body.order-page #orderTable thead tr {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }

  body.order-page #orderTable thead th.order-col-head,
  body.order-page #orderTable thead th[data-order-col] {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    background: #eee !important;
    overflow: hidden !important;
    right: auto !important;
    bottom: auto !important;
  }

  body.order-page #orderTable thead th[data-order-col="position"] {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 42 !important;
    background: #eee !important;
  }

  /*
   * Marker: zlata_mobile_order_pin15 — col1 stays, rest scrolls under.
   * Marker: zlata_mobile_order_pin_z_v1 — z-index must beat desktop
   * `#orderTable tbody td[data-order-col]:not(margin…)` (z-index:1 !important);
   * otherwise h-scroll paints sibling cells over names → empty «Позиция».
   */
  html body.order-page #orderTable tbody td.order-item-name[data-order-col="position"],
  html body.order-page #orderTable tbody td[data-order-col="position"],
  html body.order-page #orderTable td.order-item-name,
  body.order-page #extraAssortmentTable th[data-order-col="position"],
  body.order-page #extraAssortmentTable th.extra-assortment-position-head,
  body.order-page #extraAssortmentTable td[data-order-col="position"] {
    width: var(--zlata-mobile-sticky-col-width) !important;
    min-width: var(--zlata-mobile-sticky-col-width) !important;
    max-width: var(--zlata-mobile-sticky-col-width) !important;
    box-sizing: border-box !important;
    position: sticky !important;
    left: 0 !important;
    top: auto !important;
    background: #fff !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    box-shadow: 2px 0 0 #d0d7de !important;
    clip-path: none !important;
    z-index: 25 !important;
  }

  body.order-page #extraAssortmentTable thead th[data-order-col="position"],
  body.order-page #extraAssortmentTable thead th.extra-assortment-position-head {
    position: sticky !important;
    left: 0 !important;
    top: auto !important;
    z-index: 7 !important;
    background: #eee !important;
  }

  html body.order-page #orderTable tbody td.order-item-name[data-order-col="position"],
  html body.order-page #orderTable tbody td[data-order-col="position"],
  html body.order-page #orderTable tbody td.order-item-name,
  body.order-page #extraAssortmentTable tbody td[data-order-col="position"] {
    z-index: 25 !important;
  }

  html body.order-page #orderTable tr.item-row.selected-order-row td[data-order-col="position"],
  html body.order-page #orderTable tr.item-row.selected-order-row td.order-item-name {
    background: #eef7ff !important;
    z-index: 25 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    min-width: var(--zlata-mobile-sticky-col-width) !important;
  }

  /* Other body columns scroll under pinned col1 (thead handled above) */
  body.order-page #orderTable tbody td[data-order-col]:not([data-order-col="position"]),
  body.order-page #extraAssortmentTable tbody td[data-order-col]:not([data-order-col="position"]) {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    background: #fff !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 4.5rem !important;
  }

  /* Marker: order_indicative_cost_yellow_selected_v1 — mobile must not wipe indicative yellow */
  body.order-page #orderTable tbody td.order-cost-indicative[data-order-col="cost_kg"],
  body.order-page #extraAssortmentTable tbody td.order-cost-indicative[data-order-col="cost_kg"],
  body.order-page #orderTable tr.item-row.selected-order-row td.order-cost-indicative[data-order-col="cost_kg"],
  body.order-page #extraAssortmentTable tr.item-row.selected-order-row td.order-cost-indicative[data-order-col="cost_kg"] {
    background: #fff3bf !important;
  }

  body.order-page #extraAssortmentTable thead th[data-order-col]:not([data-order-col="position"]) {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: 3 !important;
    background: #eee !important;
    min-width: 4.5rem !important;
  }

  body.order-page #orderTable [data-order-col="margin"],
  body.order-page #orderTable [data-order-col="margin_pct"],
  body.order-page #extraAssortmentTable [data-order-col="margin"],
  body.order-page #extraAssortmentTable [data-order-col="margin_pct"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    box-shadow: none !important;
  }

  body.order-page #orderTable thead th[data-order-col="margin"],
  body.order-page #orderTable thead th[data-order-col="margin_pct"] {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
  }

  /* --- Schedule: compact top panel --- */
  body:has(#scheduleTable) {
    overflow-x: clip !important;
    overflow-y: hidden !important;
    height: 100dvh;
    max-height: 100dvh;
  }

  body:has(#scheduleTable) > main {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    overflow: hidden !important;
    padding: 6px 8px 8px !important;
    box-sizing: border-box;
  }

  body:has(#scheduleTable) > main > h1 {
    flex: 0 0 auto;
    margin: 0 0 4px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  body:has(#scheduleTable) .toolbar-main {
    flex: 0 0 auto;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    max-height: var(--zlata-mobile-panel-max-height) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    width: 100% !important;
    max-width: 100vw !important;
    margin-bottom: 6px !important;
    position: relative !important;
    z-index: 200 !important;
    isolation: isolate;
    contain: layout paint;
    background: #f4f7fb;
  }

  body:has(#scheduleTable) .toolbar-actions,
  body:has(#scheduleTable) .toolbar-center {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  body:has(#scheduleTable) .toolbar-center {
    min-width: max-content;
  }

  body:has(#scheduleTable) .toolbar-weeks {
    flex-wrap: nowrap !important;
  }

  body:has(#scheduleTable) .card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate;
    contain: layout style;
  }

  body:has(#scheduleTable) #columnToolbar {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    position: relative;
    z-index: 2;
  }

  body:has(#scheduleTable) .table-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  /* --- Schedule: pinned employee column inside table scroll only --- */
  body:has(#scheduleTable) #scheduleTable {
    width: max-content !important;
    min-width: 100% !important;
  }

  body:has(#scheduleTable) #scheduleTable thead {
    top: 0 !important;
    z-index: 3 !important;
  }

  body:has(#scheduleTable) #scheduleTable thead th:not(.employee-col) {
    position: relative !important;
    z-index: 3 !important;
    background: #eef3f9 !important;
  }

  body:has(#scheduleTable) #scheduleTable .employee-col {
    width: var(--zlata-mobile-sticky-col-width) !important;
    min-width: var(--zlata-mobile-sticky-col-width) !important;
    max-width: var(--zlata-mobile-sticky-col-width) !important;
    box-sizing: border-box !important;
    position: sticky !important;
    left: 0 !important;
    background: #fff !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: left !important;
    box-shadow: none !important;
    clip-path: inset(0);
  }

  body:has(#scheduleTable) #scheduleTable thead th.employee-col {
    z-index: 4 !important;
    background: #eef3f9 !important;
    top: 0 !important;
  }

  body:has(#scheduleTable) #scheduleTable tbody td.employee-col {
    z-index: 1 !important;
  }

  body:has(#scheduleTable) #scheduleTable tbody td:not(.employee-col):not(.night-meta-pad) {
    position: relative !important;
    z-index: 2 !important;
    background: #fff !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:has(#scheduleTable) #scheduleTable thead th:not(.employee-col) {
    overflow: hidden !important;
  }

  body:has(#scheduleTable) #scheduleTable tr.department-row > td.employee-col {
    background: #cbd5e1 !important;
  }

  body:has(#scheduleTable) #scheduleTable tr.brigade-row > td.employee-col {
    background: #dbeafe !important;
  }

  body:has(#scheduleTable) #scheduleTable td.col-day,
  body:has(#scheduleTable) #scheduleTable th.col-day {
    min-width: 28px !important;
    white-space: nowrap !important;
  }

  /*
   * Payment registry /reestr_platezhey
   * — top toolbar + sums stay in rows, horizontal scroll (≤25vh each)
   * — table scrolls inside viewport; body does not grow sideways
   */
  body.pr-page {
    overflow-x: clip !important;
    overflow-y: auto !important;
    max-width: 100vw;
  }

  body.pr-page .pr-wrap {
    padding: 4px 6px;
    max-width: 100vw;
    box-sizing: border-box;
  }

  body.pr-page .pr-card {
    padding: 6px 8px;
    max-width: 100%;
    overflow: hidden;
  }

  body.pr-page .pr-head {
    margin-bottom: 4px;
    gap: 4px 8px;
  }

  body.pr-page .pr-head h1 {
    font-size: 16px;
  }

  body.pr-page .pr-subtitle {
    font-size: 11px;
  }

  body.pr-page .pr-toolbar,
  body.pr-page .pr-toolbar.zl-table-toolbar {
    flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 8px;
    max-height: var(--zlata-mobile-panel-max-height, 25dvh);
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    width: 100%;
    max-width: 100%;
    margin-bottom: 4px;
  }

  body.pr-page .pr-toolbar-group,
  body.pr-page .pr-firm-btns,
  body.pr-page .pr-field {
    flex: 0 0 auto !important;
  }

  body.pr-page .pr-sums {
    flex-wrap: nowrap;
    max-height: var(--zlata-mobile-panel-max-height, 25dvh);
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 4px;
    padding: 4px 8px;
  }

  body.pr-page .pr-sums-row,
  body.pr-page .pr-sums-row-totals,
  body.pr-page .pr-sums-row-firms {
    flex-wrap: nowrap !important;
    width: max-content;
    min-width: 100%;
  }

  body.pr-page .pr-sums-row-firms > .pr-firm-balance {
    flex: 0 0 auto !important;
    min-width: 240px;
    max-width: none;
  }

  body.pr-page .pr-director-slot {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    align-items: stretch;
  }

  body.pr-page .pr-table-caption {
    margin: 4px 0;
  }

  body.pr-page .pr-table-viewport,
  body.pr-page .zl-table-viewport.pr-table-viewport {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: min(55dvh, calc(100dvh - var(--zlata-topbar-height, 44px) - 40dvh));
  }

  body.pr-page .pr-table-viewport .zl-table {
    width: max-content;
    min-width: 100%;
  }

  body.pr-page .pr-table-viewport .zl-table thead th[data-tablitsa-col="counterparty"],
  body.pr-page .pr-table-viewport .zl-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    max-width: 28vw;
    min-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06);
  }

  body.pr-page .pr-table-viewport .zl-table thead th[data-tablitsa-col="counterparty"] {
    z-index: 3;
    background: #f8fafc;
  }

  /*
   * /price — like /customer-data/deals on phone:
   * topbar stays; stack delivery under table; table scrolls x+y in viewport.
   * Root cause: desktop grid minmax(780px)+360px + .zlata-page overflow-x:clip
   * → content wider than screen but scrollLeft blocked.
   * Marker: zlata_mobile_price_layout_v1
   */
  body:has(main.price-page) {
    overflow-x: clip !important;
    overflow-y: auto !important;
    max-width: 100vw;
  }

  body:has(main.price-page) > .zlata-topbar,
  body:has(main.price-page) > header.zlata-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: calc(var(--zlata-topbar-z, 200010)) !important;
  }

  body:has(main.price-page) > main.price-page.zlata-page,
  main.price-page.zlata-page {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 6px 8px 12px !important;
    box-sizing: border-box !important;
  }

  main.price-page .layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main.price-page .price-area {
    order: 1;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
    border: none !important;
    background: transparent !important;
  }

  main.price-page .top-panel {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
  }

  main.price-page .header {
    grid-template-columns: 72px 1fr !important;
    min-height: 0 !important;
  }

  main.price-page .logo {
    padding: 4px !important;
  }

  main.price-page .logo img {
    width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
  }

  main.price-page .top-title {
    font-size: 12px !important;
    padding: 4px 6px !important;
  }

  main.price-page .req {
    font-size: 10px !important;
    padding: 4px 6px !important;
    line-height: 1.25 !important;
  }

  /* Marker: zlata_mobile_price_layout_v1 — deals-like table wrap (JS inserts) */
  main.price-page .price-table-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    max-height: min(65dvh, calc(100dvh - var(--zlata-topbar-height, 44px) - 9rem));
    border: 1px solid #c8d0da;
    border-radius: 8px;
    background: #fff;
  }

  /* Override generic .zlata-page table { display:block } — keep real columns */
  main.price-page #priceTable {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
  }

  main.price-page #priceTable th {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
  }

  main.price-page #priceTable th.name,
  main.price-page #priceTable tr > td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
    max-width: 42vw !important;
    min-width: 7rem !important;
    width: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06);
  }

  main.price-page #priceTable th.name {
    z-index: 5 !important;
    background: #eee !important;
  }

  main.price-page #priceTable tr.block > td,
  main.price-page #priceTable tr.family > td,
  main.price-page #priceTable tr.section > td {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    max-width: none !important;
  }

  main.price-page #priceTable .pack,
  main.price-page #priceTable .price,
  main.price-page #priceTable th:not(.name) {
    white-space: nowrap !important;
  }

  main.price-page .side-panel {
    order: 2;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    overflow-x: auto !important;
  }

  main.price-page .delivery-row {
    grid-template-columns: 24px minmax(7rem, 1fr) 72px 72px 64px !important;
    gap: 4px !important;
    font-size: 12px !important;
    min-width: 320px;
  }

  main.price-page .delivery-price,
  main.price-page .delivery-capacity {
    width: 68px !important;
  }

  main.price-page .price-destination-row {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  main.price-page .buttons {
    flex-wrap: wrap !important;
  }

  /*
   * /my-specifications + /specifications — like /customer-data/deals:
   * topbar stays; filter band compact; table viewport scrolls x+y.
   * Marker: zlata_mobile_specs_layout_v1
   */
  body:has(#documentsTable) {
    overflow-x: clip !important;
    overflow-y: hidden !important;
    height: 100dvh;
    max-height: 100dvh;
  }

  body:has(#documentsTable) > .zlata-topbar,
  body:has(#documentsTable) > header.zlata-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: calc(var(--zlata-topbar-z, 200010)) !important;
    flex-shrink: 0;
  }

  body:has(#documentsTable) > main.zlata-page {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 6px 8px 8px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }

  body:has(#documentsTable) .card.zl-table-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(#documentsTable) .page-head {
    flex: 0 0 auto;
    gap: 6px 10px;
    margin: 0 0 4px !important;
  }

  body:has(#documentsTable) .page-head h1 {
    font-size: 16px !important;
  }

  body:has(#documentsTable) .page-head .found-count,
  body:has(#documentsTable) .spec-counters,
  body:has(#documentsTable) .manager-counters {
    font-size: 11px !important;
    padding: 4px 6px !important;
    margin: 0 0 4px !important;
    max-height: 4.5rem;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:has(#documentsTable) .filter-card {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
    max-height: min(28dvh, 200px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 0 6px !important;
    padding: 8px !important;
  }

  body:has(#documentsTable) .tr-tabs {
    flex-wrap: nowrap !important;
    width: max-content;
    min-width: 100%;
    margin: 0 0 6px !important;
  }

  body:has(#documentsTable) .tr-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  body:has(#documentsTable) .filter-toolbar {
    flex-wrap: nowrap !important;
    align-items: flex-end;
    width: max-content;
    min-width: 100%;
  }

  body:has(#documentsTable) .search-field {
    flex: 0 0 auto !important;
    width: min(210px, 70vw) !important;
    max-width: min(210px, 70vw) !important;
    min-width: 160px !important;
  }

  body:has(#documentsTable) .specs-pagination-bar {
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  /* Like deals .table-wrap: remaining height, both axes scroll */
  body:has(#documentsTable) .specs-table-scroll.zl-table-viewport,
  body:has(#documentsTable) .zl-table-viewport.specs-table-scroll {
    flex: 1 1 auto !important;
    min-height: 36dvh !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    margin-top: 0 !important;
  }

  body:has(#documentsTable) #documentsTable.zl-table {
    width: max-content !important;
    min-width: 100% !important;
  }

  body:has(#documentsTable) #documentsTable.zl-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
  }

  /*
   * /purchasing — tractor trips: like /customer-data/deals on phone.
   * Desktop fill + body overflow:hidden leaves ~0 table height under month/tabs/KPI.
   * Compact chrome; table viewport keeps min-height and scrolls x+y.
   * Marker: zlata_mobile_tractor_trips_layout_v1
   */
  body.tt-page {
    overflow-x: clip !important;
    overflow-y: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
  }

  body.tt-page > .zlata-topbar,
  body.tt-page > header.zlata-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: calc(var(--zlata-topbar-z, 200010)) !important;
    flex-shrink: 0;
  }

  body.tt-page > .page.zl-table-page,
  body.tt-page #ttPage.zl-table-page--fill,
  body.tt-page #ttPage {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  body.tt-page .tt-wrap.zl-table-card,
  body.tt-page .tt-wrap.zl-table-card--fill {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 8px 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.tt-page .tt-head {
    flex: 0 0 auto;
    margin-bottom: 4px !important;
    gap: 4px 8px;
  }

  body.tt-page .tt-head h1 {
    font-size: 16px !important;
  }

  body.tt-page .tt-month-switch {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    max-height: 4.5rem;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 4px !important;
  }

  body.tt-page .tt-month-switch .knopka {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 8px !important;
  }

  body.tt-page .tt-tabs-row {
    flex: 0 0 auto;
    margin: 0 0 4px !important;
    gap: 4px 8px;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.tt-page .tt-tabs {
    flex-wrap: nowrap !important;
    width: max-content;
    min-width: 100%;
    margin: 0 !important;
  }

  body.tt-page .tt-tabs .knopka,
  body.tt-page .tt-tabs [role="tab"] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 10px !important;
  }

  body.tt-page .tt-toolbar,
  body.tt-page .tt-toolbar.zl-table-toolbar {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    max-height: min(22dvh, 160px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 0 4px !important;
  }

  body.tt-page .tt-toolbar .stroka-field,
  body.tt-page .tt-toolbar-tail {
    flex: 0 0 auto !important;
  }

  body.tt-page .tt-summary.zl-stat-banners {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    max-height: min(18dvh, 120px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 0 6px !important;
    gap: 8px !important;
  }

  body.tt-page .tt-summary .zl-stat-banner {
    flex: 0 0 auto !important;
    min-width: min(220px, 78vw);
    max-width: min(280px, 88vw);
  }

  body.tt-page .tt-summary .zl-stat-banner-title {
    font-size: 11px !important;
  }

  body.tt-page .tt-summary .zl-stat-banner-value {
    font-size: 18px !important;
  }

  body.tt-page .tt-summary .zl-stat-banner-note {
    font-size: 10px !important;
  }

  /* Like deals .zl-table-viewport: remaining height, both axes scroll */
  body.tt-page .tt-table-viewport,
  body.tt-page .zl-table-viewport.tt-table-viewport,
  body.tt-page #ttTableWrap {
    flex: 1 1 auto !important;
    min-height: 36dvh !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    margin-top: 0 !important;
  }

  body.tt-page #ttTable.zl-table {
    width: max-content !important;
    min-width: 100% !important;
  }

  body.tt-page #ttTable.zl-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
  }

  /*
   * Family A hang — fill registries + specs (not /order B).
   * Host: .zl-mobile-registry | :has(.zl-table-page--fill) | #documentsTable
   * STOP B (20dvh / pin 15vw / Y=html) on tablitsa fill.
   * Marker: zlata_mobile_layout_family_a_registry_v1
   * Marker: zlata_mobile_layout_family_a_hang_remaining_v1
   */
  :is(
    body.zl-mobile-registry,
    body.zl-table-page--fill,
    body:has(.zl-table-page--fill),
    body:has(#documentsTable)
  ):not(.order-page) {
    overflow-x: clip !important;
    overflow-y: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
  }

  :is(
    body.zl-mobile-registry,
    body.zl-table-page--fill,
    body:has(.zl-table-page--fill),
    body:has(#documentsTable)
  ):not(.order-page) > .zlata-topbar,
  :is(
    body.zl-mobile-registry,
    body.zl-table-page--fill,
    body:has(.zl-table-page--fill),
    body:has(#documentsTable)
  ):not(.order-page) > header.zlata-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: calc(var(--zlata-topbar-z, 200010)) !important;
    flex-shrink: 0;
  }

  :is(
    body.zl-mobile-registry,
    body:has(.zl-table-page--fill),
    body:has(#documentsTable)
  ):not(.order-page) > .page,
  :is(
    body.zl-mobile-registry,
    body:has(.zl-table-page--fill)
  ):not(.order-page) > .zl-table-page,
  :is(
    body.zl-mobile-registry,
    body:has(.zl-table-page--fill)
  ):not(.order-page) > .zl-table-page--fill,
  body:has(#documentsTable) > main.zlata-page {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    max-height: calc(100dvh - var(--zlata-topbar-height, 44px)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill)):not(.order-page) .zl-table-page-title-row,
  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill)):not(.order-page) .deals-bar,
  body:has(#documentsTable) .page-head {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100%;
    margin-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .zl-table-registry-tabs,
  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .tr-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .zl-table-registry-tab,
  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .tr-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  body.zl-mobile-registry .tr-mailing-bar-wrap {
    flex: 0 0 auto;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.zl-mobile-registry .tr-mailing-bar {
    flex-wrap: nowrap !important;
    width: max-content;
    min-width: 100%;
    margin: 4px 0 !important;
    padding: 4px 2px !important;
    gap: 8px 10px;
  }

  body.zl-mobile-registry .tr-mailing-bar > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.zl-mobile-registry .tr-row-legend {
    flex: 0 0 auto;
    margin: 2px 0 !important;
    max-height: 2.6em;
    overflow: hidden;
  }

  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill)):not(.order-page) .zl-table-registry-filters,
  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill)):not(.order-page) .tr-filters {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 0 0 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill)):not(.order-page) .zl-table-card--fill {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .zl-table-card--fill > .zl-table-viewport,
  :is(body.zl-mobile-registry, body:has(.zl-table-page--fill)):not(.order-page) #tr-table-wrap,
  body:has(#documentsTable) .specs-table-scroll.zl-table-viewport {
    flex: 1 1 auto !important;
    min-height: 40dvh !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  body.zl-mobile-registry #transportRequestsTable.zl-table,
  :is(body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .zl-table-card--fill > .zl-table-viewport > table.zl-table,
  body:has(#documentsTable) #documentsTable.zl-table {
    width: max-content !important;
    min-width: 100% !important;
  }

  body.zl-mobile-registry #transportRequestsTable.zl-table thead th,
  :is(body:has(.zl-table-page--fill), body:has(#documentsTable)):not(.order-page) .zl-table-card--fill > .zl-table-viewport > table.zl-table thead th,
  body:has(#documentsTable) #documentsTable.zl-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
  }

  /* /price: A table wrap only — keep page Y so delivery stack stays reachable */
  main.price-page .price-table-viewport {
    min-height: 40dvh !important;
  }
}

/* Login and other standalone pages without top navigation */
@media (max-width: 900px) {
  body:not(:has(.zlata-topbar)) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    padding-left: max(var(--zlata-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--zlata-mobile-gutter), env(safe-area-inset-right));
  }

  body:not(:has(.zlata-topbar)) form,
  body:not(:has(.zlata-topbar)) .card {
    width: min(420px, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body:not(:has(.zlata-topbar)) input,
  body:not(:has(.zlata-topbar)) button,
  body:not(:has(.zlata-topbar)) select,
  body:not(:has(.zlata-topbar)) textarea {
    width: 100%;
    box-sizing: border-box;
  }

  body:not(:has(.zlata-topbar)) .remember-row input[type="checkbox"] {
    width: var(--galochka-size, 14px);
    min-width: var(--galochka-size, 14px);
    height: var(--galochka-size, 14px);
  }
}

/* iPhone home-screen web app (standalone display mode) */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .zlata-topbar {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}