/* Mobile access layer: no privileged section is allowed to disappear because
   its desktop table has no bespoke card view. */
@media (max-width: 768px) {
  .tab-content,
  .main-panel,
  .glass-panel {
    min-width: 0 !important;
  }

  /* The old stylesheet hid every desktop table on phones. Several critical
     sections (HWID, salary and KP logs) do not have a second mobile renderer,
     so keep the table and make its columns safely swipeable instead. */
  .desktop-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px !important;
    scrollbar-width: thin !important;
  }

  .desktop-table-scroll > table,
  .desktop-table-scroll .data-table,
  table.desktop-data-table {
    display: table !important;
    width: max-content !important;
    min-width: 720px !important;
  }

  /* Avoid duplicated data where a table already had an old card fallback. */
  .mobile-card-list {
    display: none !important;
  }

  .desktop-table-scroll::after {
    content: "Проведите влево, чтобы увидеть остальные столбцы";
    display: block;
    width: max-content;
    min-width: 100%;
    margin-top: 8px;
    color: var(--text3);
    font-size: 11px;
    text-align: right;
  }

  /* The bottom navigation contains all available sections. Make it a real
     swipeable strip rather than shrinking fifteen controls into unreadable
     slivers. */
  .bottom-nav {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin !important;
  }

  .bottom-nav-item {
    flex: 0 0 74px !important;
    min-width: 74px !important;
    min-height: 58px !important;
    white-space: normal !important;
    scroll-snap-align: start;
  }

  .bottom-nav-item:last-child {
    margin-right: 4px;
  }

  iframe {
    height: calc(100dvh - 128px) !important;
    min-height: calc(100dvh - 128px) !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 420px) {
  .bottom-nav-item {
    flex-basis: 68px !important;
    min-width: 68px !important;
    font-size: 8.5px !important;
  }
}