/* Мобільна версія desk (08.10.2026, Богдан: «потрібна мобільна версія деска»).
 * Лише для вузьких екранів (≤ 800 px); на комп'ютері нічого не змінює. Підключено в base.html ПІСЛЯ desk-theme.css.
 *  • меню: замість розгорнутого списку на весь перший екран — тонка смуга зверху (☰, назва сторінки, пошук товару),
 *    саме меню виїжджає збоку (mobile.js додає смугу й кнопки — CSP панелі не пускає вбудовані скрипти);
 *  • жовті підказки (.help) — згорнуті до трьох рядків, «Докладніше» розгортає;
 *  • панелі кнопок, поля, списки й спливаючі вікна не вилазять за екран; таблиці гортаються всередині себе. */

.mbar, .mshade, .help-more { display: none; }

@media (max-width: 800px) {
  /* ── смуга зверху ── */
  .mbar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 25;   /* ниже выдвижных карточек (50) и спливаючих (30–100) */
    height: 52px; padding: 0 8px 0 12px; background: var(--night, #080b18); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  }
  .mbar .logo {
    flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--gold, #ffc800); color: var(--night, #080b18); font-weight: 700; text-decoration: none;
  }
  .mbar .ttl { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar button {
    flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #e9ebf3;
    font-size: 22px; display: grid; place-items: center; padding: 0; box-shadow: none;
  }
  .mbar button:active { background: rgba(255, 255, 255, .08); }

  /* ── меню збоку ── */
  .app { display: block; }
  .side {
    display: none !important; position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 90;
    width: min(320px, 86vw); height: 100vh; height: 100dvh; flex-direction: column !important; flex-wrap: nowrap !important;
    padding: 14px 12px 12px; gap: 1px; overflow-y: auto; box-shadow: 8px 0 32px rgba(0, 0, 0, .35);
  }
  body.nav-open .side { display: flex !important; }
  .side .cap { display: block !important; }
  .side .brand, .side .nav-find, .side .who { width: auto; }
  .side a { padding: 10px 10px; font-size: 15px; }
  .mshade { position: fixed; inset: 0; z-index: 80; background: rgba(8, 11, 24, .45); }
  body.nav-open .mshade { display: block; }
  body.nav-open { overflow: hidden; }

  /* ── вміст ── */
  main { padding: 12px 12px 24px; min-width: 0; }
  header.top { flex-wrap: wrap; gap: 6px 10px; }
  header.top h1 { font-size: 20px; }
  .toolbar, .row, .panel, .shop-row, .hm-links { flex-wrap: wrap !important; }
  main input:not([type=checkbox]):not([type=radio]), main select, main textarea { max-width: 100%; min-width: 0; }
  main select { width: auto; }
  .toolbar > *, .row > * { max-width: 100%; }
  main img { max-width: 100%; height: auto; }

  /* підказка: три рядки, далі — «Докладніше» */
  .help.mclip { max-height: 4.7em; overflow: hidden; position: relative; margin-bottom: 4px; }
  .help.mclip::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  }
  .help-more {
    display: inline-block; border: 0; background: none; box-shadow: none; padding: 2px 0 10px; height: auto;
    color: var(--mut, #6b7186); font-size: 13px; text-decoration: underline; cursor: pointer;
  }

  /* згорнуті блоки (mobile.js): видно лише заголовок зі стрілкою */
  .mfold > :not(h3) { display: none !important; }
  .mfold-h { cursor: pointer; position: relative; padding-right: 22px; }
  .mfold-h::after { content: "▾"; position: absolute; right: 2px; top: 0; color: var(--mut, #6b7186); }
  .mfold .mfold-h { margin-bottom: 0 !important; }
  .mfold .mfold-h::after { content: "▸"; }
  /* пошук над таблицею — на весь рядок */
  main input#q { flex: 1 1 100% !important; width: 100% !important; }

  /* спливаючі списки (магазини, мультивибір, меню перемикачів) — по ширині екрана */
  .ms-pop, .tgmenu {
    position: fixed !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; max-height: 70vh; overflow-y: auto; z-index: 95;
  }
  /* список магазинів «Наценок» живе в <details>: для його вмісту Chrome рахує fixed від самого details, тож
     на телефоні — просто розгортаємо під кнопкою, у потоці сторінки */
  .shops[open] { flex: 1 1 100%; }
  .shops .shops-list {
    position: static !important; width: 100% !important; min-width: 0 !important; margin-top: 6px;
    box-shadow: none !important; max-height: 50vh; overflow-y: auto;
  }
  /* картка товару, тексти: висувна панель — на весь екран */
  .tx-drawer, .drawer { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; }

  /* звичайні таблиці (звіти, клієнти, магазин) гортаються всередині картки, а не всією сторінкою */
  .card, .rcard, .hm-box, .panel { overflow-x: auto; max-width: 100%; }
  main > table, main > form > table, main > div > table:not(.tabulator-table) { display: block; overflow-x: auto; max-width: 100%; }
  .tabulator { max-width: 100%; }
}