/* ============================================================================
   mobile-ux.css — мобільна ревізія 11.2026 (телефон ≤768px). ІЗОЛЬОВАНО.
   Підключається ОСТАННІМ у index.html: mobile.css стоїть рано, і пізніші шари
   (apple-ui, navy-pages, company.css…) перебивали його правила на телефоні.
   Усе всередині @media (max-width:768px) — на десктопі не діє нічого.
   ============================================================================ */

/* m-only: елементи лише для телефона (напр. сортування для карток замість шапки таблиці) */
@media (min-width: 769px) { .m-only, .m-filt-btn { display: none !important; } }

@media (max-width: 768px) {

  /* ---- Топбар: один рядок. Курси й статус 1С — інформаційні, на телефоні ховаємо;
     🔔 сповіщення мав клас .topbar-nav-btn і ховався разом із дублями меню — повертаємо ---- */
  .topbar { flex-wrap: nowrap; min-height: 52px; padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 6px !important; }
  .topbar-actions { flex-wrap: nowrap !important; margin-left: auto !important; }
  #onecSyncBadge, #currencyWidget { display: none !important; }
  .topbar-actions #leadNotifBtn { display: flex !important; min-width: 44px; min-height: 40px; justify-content: center; }
  .topbar-meet-btn { min-height: 40px; }
  .mobile-menu-btn { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }

  /* ---- Плаваюча кнопка асистента: менша, у safe-area, і не накриває кінець сторінки ---- */
  .ai-assistant-btn { width: 48px !important; height: 48px !important; font-size: 21px !important; right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  .page-container { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---- Таб-бари (Кабінет, картка компанії, сегменти) — ОДИН рядок зі скролом, не 7 рядків переносу ---- */
  .cck-tabs, .comp-tabs, #pageCompanyDetail .comp-tabs {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .cck-tabs::-webkit-scrollbar, .comp-tabs::-webkit-scrollbar { display: none; }
  .cck-tab, .comp-tab-btn { flex: 0 0 auto !important; white-space: nowrap; min-height: 40px; scroll-snap-align: start; }

  /* ---- Будь-яка таблиця, що НЕ стала карткою, гортається всередині себе, а не розпирає сторінку ---- */
  .page.active { max-width: 100vw; }
  .page-content, .page-container { min-width: 0; }

  /* ---- Таблиці → картки v2: клас m-card-tbl ставить js/mobile.js (data-table, mdash-table, admin-table,
     contract-table, report-table, cs-table, .m-cards; лише з <thead>). Комірка — block: підпис float ліворуч,
     значення праворуч (flex розкладав багатовузлові комірки в колонки). ---- */
  table.m-card-tbl { border: 0 !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; background: transparent !important; }
  table.m-card-tbl colgroup { display: none; }
  table.m-card-tbl thead { position: absolute !important; left: -9999px !important; top: -9999px !important; }
  table.m-card-tbl tbody, table.m-card-tbl tfoot, table.m-card-tbl tr, table.m-card-tbl td { display: block; width: auto !important; max-width: none !important; }
  table.m-card-tbl tr {
    border: 1px solid var(--border-color) !important; border-radius: 14px; margin: 0 0 10px; padding: 10px 14px;
    background: var(--bg-secondary, #fff); box-shadow: 0 1px 2px rgba(15,23,42,.05);
  }
  table.m-card-tbl tr[hidden], table.m-card-tbl tr[style*="display: none"], table.m-card-tbl tr[style*="display:none"] { display: none !important; }
  table.m-card-tbl td {
    border: 0 !important; padding: 5px 0 !important; text-align: right !important; min-height: 0 !important;
    white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; position: static !important;
    background: transparent !important; height: auto !important;
  }
  table.m-card-tbl td::after { content: ""; display: table; clear: both; }
  table.m-card-tbl td::before {
    content: attr(data-label); float: left; max-width: 45%; margin-right: 12px; text-align: left;
    font: 600 13px/1.35 system-ui, -apple-system, sans-serif; color: var(--text-muted); letter-spacing: 0; text-transform: none;
  }
  /* заголовок картки: перша комірка або td[data-m-title] */
  table.m-card-tbl td:first-child, table.m-card-tbl td[data-m-title] { text-align: left !important; font-weight: 700; font-size: 15px; padding-top: 0 !important; }
  table.m-card-tbl td:first-child::before, table.m-card-tbl td[data-m-title]::before,
  table.m-card-tbl td[colspan]::before, table.m-card-tbl td.m-nolabel::before, table.m-card-tbl td:not([data-label])::before,
  table.m-card-tbl td[data-label=""]::before { content: none; display: none; }
  table.m-card-tbl tr:has(> td[data-m-title]) { display: flex; flex-direction: column; }
  table.m-card-tbl tr:has(> td[data-m-title]) > td[data-m-title] { order: -1; }
  /* заголовок — інша клітинка: перша (ЄДРПОУ, дата) — звичайний рядок із підписом, не другий «заголовок» */
  table.m-card-tbl tr:has(> td[data-m-title]) > td:first-child:not([data-m-title]) { text-align: right !important; font-weight: 400; font-size: inherit; padding-top: 5px !important; }
  table.m-card-tbl tr:has(> td[data-m-title]) > td:first-child:not([data-m-title])[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; float: left; }
  table.m-card-tbl td:empty, table.m-card-tbl td[data-m-empty], table.m-card-tbl td.m-hide { display: none !important; }
  table.m-card-tbl td[colspan] { text-align: left !important; }
  table.m-card-tbl tfoot tr { background: var(--accent-light) !important; }
  /* рядок дій у картці — кнопки праворуч, тап-зона 40px */
  table.m-card-tbl td.m-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 8px !important; }
  table.m-card-tbl td.m-actions::before { content: none; display: none; }
  table.m-card-tbl td .btn-sm, table.m-card-tbl td.m-actions .btn { min-height: 36px; }
  table.m-card-tbl td input[type=checkbox] { width: 20px; height: 20px; }
  /* обгортка-скролер картки не обрізає */
  .table-scroll:has(> table.m-card-tbl), .table-responsive:has(> table.m-card-tbl), .mv-wrap:has(> table.m-card-tbl) { overflow-x: visible !important; }

  /* таблиця-не-картка ширша за екран — гортається сама (js/mobile.js hscrollGuard) + тінь-підказка, поки є куди гортати */
  table.m-hscroll-tbl { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  table.m-hscroll-tbl.m-hs-end { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 768px) {
  /* .m-cards.m-grid — компактна картка: заголовок на всю ширину, далі пари «підпис над значенням» у ДВІ колонки
     (щільні числові таблиці: база лідів, реєстри) — картка вдвічі нижча */
  table.m-card-tbl.m-grid tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 2px; }
  table.m-card-tbl.m-grid td { display: block; text-align: left !important; padding: 4px 0 !important; min-width: 0; overflow-wrap: anywhere; }
  table.m-card-tbl.m-grid td::before { display: block; float: none; margin: 0 0 1px; max-width: none; font-size: 11px; font-weight: 600; text-transform: none; margin-bottom: 1px; }
  table.m-card-tbl.m-grid td:first-child, table.m-card-tbl.m-grid td[colspan], table.m-card-tbl.m-grid td.m-actions, table.m-card-tbl.m-grid td.m-wide { grid-column: 1 / -1; }
  table.m-card-tbl.m-grid td.m-actions { display: flex; }
  table.m-card-tbl td:first-child .btn-link { padding: 0 !important; background: none !important; text-align: left; white-space: normal; font-weight: 700; font-size: 15px; min-height: 0; }

  /* гамбургер — контрастніший (був ледь видно) */
  .mobile-menu-btn { color: var(--text-primary) !important; opacity: 1 !important; }
}

@media (max-width: 768px) {
  /* ---- 🎯 Ліди: тулбар — компактна сітка замість 6 рядків на весь перший екран ---- */
  #pageLeads .lead-tb { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; align-items: center; }
  #pageLeads .lead-tb-seg { grid-column: 1; justify-self: start; }
  #pageLeads .lead-tb-seg a { padding: 8px 12px !important; min-height: 36px; display: inline-flex; align-items: center; }
  #pageLeads .lead-tb-new { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 !important; min-height: 40px; }
  #pageLeads .lead-tb-q { grid-column: 1 / -1; max-width: none !important; min-width: 0 !important; flex: none !important; }
  #pageLeads .lead-tb .filter-select { width: 100% !important; min-width: 0 !important; }
  #pageLeads .lead-tb-cnt { grid-column: 1 / -1; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #pageLeads .lead-tb-cnt::-webkit-scrollbar { display: none; }
  #pageLeads .lead-tb-cnt > a { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; }
  #pageLeads .lead-tb-reset { grid-column: 1 / -1; justify-self: start; }

  /* ---- 🎯 Канбан: колонка = майже екран, прилипання до колонки, сусідня визирає краєм ---- */
  #pageLeads .lead-stage-nav { margin: 0 0 10px; }
  #pageLeads .lead-kanban { scroll-snap-type: x mandatory; scroll-padding-left: 0; gap: 10px; -webkit-overflow-scrolling: touch; }
  #pageLeads .lead-col { min-width: calc(100vw - 56px) !important; max-width: calc(100vw - 56px) !important; scroll-snap-align: start; }
  #pageLeads .lead-card { padding: 12px 14px; }
  #pageLeads .lead-card .lead-tap { min-height: 36px; }
}

@media (max-width: 768px) {
  /* ---- Сегмент-контроли: правило mobile.css («один рядок зі скролом») перебивав apple-ui.css (flex-wrap:wrap),
     бо той підключений пізніше — на телефоні сегменти розповзались у 3–4 рядки. Тут — останнє слово ---- */
  .seg, .trs-seg { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg::-webkit-scrollbar, .trs-seg::-webkit-scrollbar { display: none; }
  .seg > *, .trs-seg > * { flex: 0 0 auto; white-space: nowrap; }
  .seg-btn, .trs-seg-btn { min-height: 38px; }
  /* у сітці таблиць/тулбарів сегмент не має розтягувати колонку */
  .lead-tb-seg { white-space: nowrap; }
  .lead-tb-seg a { white-space: nowrap; }
}

@media (max-width: 768px) {
  /* ---- 🎯 Картка ліда: дії та вкладки — по ОДНОМУ рядку зі скролом (було ~12 кнопок у 6 рядків = весь екран) ---- */
  .lead-detail-wrap { padding: 4px 0 !important; }
  .lead-detail-wrap .back-btn { padding: 6px 12px !important; font-size: 14px !important; min-height: 36px; }
  .lead-detail-wrap h2 { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
  .lead-acts, .lead-tabs {
    flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .lead-acts::-webkit-scrollbar, .lead-tabs::-webkit-scrollbar { display: none; }
  .lead-acts > *, .lead-tabs > * { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
  .lead-tabs { position: sticky; top: calc(52px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bg-primary, #f8fafc); padding: 6px 0; margin: 8px 0 !important; }
}

@media (max-width: 768px) {
  /* ---- Фільтр-бари (js/mobile.js): закрито — видно пошук + «⚙ Фільтри (n)», решта по тапу ---- */
  .m-filt-btn { flex: 0 0 auto; min-height: 44px; }
  /* закритий бар — пошук і «⚙ Фільтри» одним рядком; відкритий — кожен фільтр на всю ширину */
  :is(.filters-bar, .filter-bar, .cs-filterbar, [data-m-filters]):has(> .m-filt-btn) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px; }
  :is(.filters-bar, .filter-bar, .cs-filterbar, [data-m-filters]):has(> .m-filt-btn) > :not(.m-filt-btn) { flex: 1 1 100%; min-width: 0; }
  :is(.filters-bar, .filter-bar, .cs-filterbar, [data-m-filters]):has(> .m-filt-btn) > :not(.m-filt-btn):not(.m-filt-collapsible) { flex: 1 1 160px; }
  :is(.filters-bar, .filter-bar, .cs-filterbar, [data-m-filters]):not(.m-filt-open) > .m-filt-collapsible { display: none !important; }
  :is(.filters-bar, .filter-bar, .cs-filterbar, [data-m-filters]).m-filt-open { gap: 8px; }
  .cs-filterbar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .cs-filterbar select { min-width: 0 !important; }
  .cs-filterbar > label, .filters-bar > label, .filter-bar > label { display: flex; align-items: center; gap: 8px; min-height: 40px; }

  /* ---- CC3: сторінка не розпирається вбік ---- */
  .page-header { flex-wrap: wrap; gap: 8px; }
  .page-header .page-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  .page-actions .filter-select, .page-actions .filter-input { flex: 1 1 140px; min-width: 0 !important; width: auto !important; }
  [style*="grid-template-columns:1fr 1fr"]:not(.m-keep-grid), [style*="grid-template-columns: 1fr 1fr"]:not(.m-keep-grid), [style*="grid-template-columns:300px 1fr"]:not(.m-keep-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  /* «1fr 1fr» як підрядок ловить і 3–4-колонкові сітки (зазвичай плитки-лічильники) — їм 2 колонки, не 1 */
  [style*="grid-template-columns:1fr 1fr 1fr"]:not(.m-keep-grid), [style*="grid-template-columns: 1fr 1fr 1fr"]:not(.m-keep-grid),
  [style*="grid-template-columns:repeat(3,1fr)"]:not(.m-keep-grid), [style*="grid-template-columns:repeat(4,1fr)"]:not(.m-keep-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"]:not(.m-keep-grid), [style*="grid-template-columns:repeat(6,1fr)"]:not(.m-keep-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .card, .cck-card, .grid > *, .stats-grid > * { min-width: 0; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: 0 0 auto; }
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }

  /* ---- CC4: решта таб/пігулок-барів — один рядок зі свайпом ---- */
  .admin-tabs, .prj-chips, .ch-filters, .cck-pills, .tab-bar, .tabs, .clm-tabs, .clm-direction-tabs, .cs-tabs, .salc-tabs, .prj-tabs, .cck-seg {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .admin-tabs::-webkit-scrollbar, .prj-chips::-webkit-scrollbar, .ch-filters::-webkit-scrollbar, .cck-pills::-webkit-scrollbar { display: none; }
  .admin-tabs > *, .prj-chips > *, .ch-filters > *, .cck-pills > *, .clm-tabs > *, .clm-direction-tabs > *, .cs-tabs > *, .salc-tabs > *, .prj-tabs > *, .cck-seg > * { flex: 0 0 auto; white-space: nowrap; min-height: 38px; }
  .clm-tabs::-webkit-scrollbar, .clm-direction-tabs::-webkit-scrollbar, .cs-tabs::-webkit-scrollbar, .salc-tabs::-webkit-scrollbar, .prj-tabs::-webkit-scrollbar, .cck-seg::-webkit-scrollbar { display: none; }

  /* ---- CC5: шухляда меню — тінь лише відкритій (закрита лишала сіру смугу зліва) ---- */
  .sidebar:not(.mobile-open) { box-shadow: none !important; visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .sidebar.mobile-open { visibility: visible; transition: transform .2s ease; }

  /* ---- CC6: асистент бази знань (#aiChatFab) — той самий розмір; ховаємо, коли відкрита модалка ---- */
  /* асистент БАЗИ ЗНАНЬ вставляється в body раз і лишався на всіх сторінках (дві 🤖) — лише на сторінках бази знань, над основним */
  #aiChatFab { width: 48px !important; height: 48px !important; right: 14px !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
  body:not(:has(#pageKnowledge.active)):not(:has(#pageSupportKb.active)) #aiChatFab { display: none !important; }
  body:has(.modal-overlay:not(.hidden)) .ai-assistant-btn, body:has(.modal-overlay:not(.hidden)) #aiChatFab { display: none !important; }

  /* ---- CC8: KPI по 2 в ряд, а не плитка на весь рядок ---- */
  .stats-grid, .ai-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stats-grid .stat-card, .stats-grid > div { padding: 10px 12px !important; }
  .stat-card .stat-value, .stats-grid .stat-value { font-size: 20px !important; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  /* ---- CC9: тап-зони й дрібний текст ---- */
  .cck-btn, .cck-pill, .cck-seg__btn, .pill, .prj-chip, .ch-fpill, .trs-btn, .admin-tab { min-height: 40px; }
  /* чип не стискається до «погодж/ено» (статус поруч із заголовком), а довгий (адреса, ПІБ) — переноситься по словах */
  .cck-chip { max-width: 100%; flex-shrink: 0; white-space: normal !important; overflow-wrap: break-word; }

  /* ---- CC10: без подвійних полів (контейнер 12px + контент 12px + картка 16px = ~280px під текст) ---- */
  .page-container .page-content { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 768px) {
  /* ---- Сортування карток (js/mobile.js sortBars) ---- */
  .m-sortbar { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; }
  .m-sortbar select { flex: 1 1 auto; min-width: 0; }
  .m-sortbar .btn { flex: 0 0 44px; min-height: 40px; font-size: 18px; padding: 0; }
  .m-sortbar .m-selall:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap; flex: 0 0 auto; font-size: 14px; }
}
@media (min-width: 769px) { .m-sortbar { display: none !important; } }

@media (max-width: 768px) {
  /* ---- 💬 Чати: список ↔ розмова на весь екран (js/chats.js _mConv) ---- */
  #pageChats .ch-shell { grid-template-columns: minmax(0, 1fr) !important; height: calc(100dvh - 70px - env(safe-area-inset-top, 0px)); min-height: 0; border-radius: 14px; }
  #pageChats .ch-pane--card { display: none !important; }
  #pageChats .ch-shell:not(.is-conv) .ch-pane--conv { display: none; }
  #pageChats .ch-shell.is-conv .ch-pane--list { display: none; }
  #pageChats .ch-mback { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--novo-border, #E2E8F0);
    background: var(--novo-surface, #fff); color: var(--accent, #2563EB); font-weight: 600; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
  #pageChats .ch-compbar { flex-wrap: wrap; gap: 6px; }
  #pageChats .ch-modes { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  #pageChats .ch-mode, #pageChats .ch-meetbtn { min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; }
  #pageChats .ch-item { min-height: 56px; }
  /* у чатах асистент накриває поле вводу */
  body:has(#pageChats.active) .ai-assistant-btn { display: none !important; }
  body:has(#pageChats.active) .page-container { padding-bottom: 8px !important; }
}

@media (max-width: 768px) {
  /* ---- 📰 Новини: дії рядком під текстом ---- */
  .nw-card { flex-wrap: wrap; }
  .nw-card > div[style*="flex:1"] { flex: 1 1 calc(100% - 70px) !important; }
  .nw-actions { order: 3; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .nw-actions .btn { min-height: 40px; }

  /* ---- 📚 База знань: одна колонка, категорії — смуга чипів ---- */
  .kb-layout, .kb-main { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .kb-sidebar { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  .kb-sidebar .kb-cat-list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .kb-sidebar .kb-cat-list::-webkit-scrollbar { display: none; }
  .kb-sidebar .kb-cat-list li { margin: 0 !important; flex: 0 0 auto; }
  .kb-sidebar .kb-cat-list a { white-space: nowrap; min-height: 38px; display: flex !important; align-items: center; border: 1px solid var(--border-color); border-radius: 19px !important; padding: 6px 12px !important; }
  .kb-sidebar h4 { display: none; }

  /* ---- 🎓 Аналітика навчання: сітка не розпирається таблицею ---- */
  .ta-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ta-grid > * { min-width: 0; }
}

@media (max-width: 768px) {
  /* ---- .m-strips: кожен дочірній блок — одна смуга зі свайпом (Кабінет → Замовлення та ін.) ---- */
  .m-strips > span { max-width: 100%; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .m-strips > span::-webkit-scrollbar { display: none; }
  .m-strips > span > * { flex: 0 0 auto; white-space: nowrap; }
  .m-strips > span > a { min-height: 34px; display: inline-flex; align-items: center; }
}

@media (max-width: 768px) {
  /* ---- СЕБ-ІКО: шкала 0–10 — сітка 6×2 з тап-зоною 40px (11 кнопок у рядок не влазили, 9 і 10 за краєм) ---- */
  #plsNps { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px !important; }
  #plsNps .plsN { min-height: 40px; padding: 0; }

  /* ---- 🏦 Казначейство: плитки по 2 в ряд, суми не розпирають ---- */
  .trs-tile { min-width: 0 !important; flex: 1 1 calc(50% - 6px) !important; }
  .trs-hero { font-size: clamp(1.05rem, 5.2vw, 1.45rem) !important; overflow-wrap: anywhere; }
}

@media (max-width: 768px) {
  /* ---- 🎯 Кабінет → Огляд: KPI-картки команди по 2 в ряд (mobile.css робив mdash-grid в 1 колонку) ---- */
  .mdash-grid[style*="minmax(190px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .mdash-grid[style*="minmax(190px"] > .card { padding: 10px 12px !important; }
  .mdash-grid[style*="minmax(190px"] > .card > div:nth-child(2) { font-size: 17px !important; overflow-wrap: anywhere; }
}

@media (max-width: 768px) {
  /* ---- 🎯 Кабінет → Планування: рядки прогнозів (клієнт · сума · ціль/банк · дата) — переносяться:
     клієнт на всю ширину, далі поля парою; в один ряд поля стискались до ~20 px, дата вилазила за екран ---- */
  .cck-row.wb-srow, .cck-row.wb-irow, .cck-row.kv-row { flex-wrap: wrap !important; gap: 6px !important; }
  .cck-row.wb-srow > div:first-child, .cck-row.wb-irow > div:first-child, .cck-row.kv-row > div:first-child { flex: 1 1 100% !important; }
  .cck-row.wb-srow > input, .cck-row.wb-srow > select, .cck-row.wb-irow > input, .cck-row.wb-irow > select,
  .cck-row.kv-row > input, .cck-row.kv-row > select { flex: 1 1 calc(50% - 30px) !important; width: auto !important; min-width: 0 !important; min-height: 40px; }
  .cck-row.wb-srow > button, .cck-row.wb-irow > button, .cck-row.kv-row > button { flex: 0 0 40px; min-height: 40px; }
}

@media (max-width: 768px) {
  /* Lead Engine: рядок пошуку на всю ширину лише на телефоні */
  .ll-searchrow { flex: 1 1 100%; }
  .ll-searchrow #llSearch { flex: 1 1 auto; }
}

@media (max-width: 768px) {
  /* ---- 🛒 Маркетплейси → Характеристики категорії Rozetka: кожне поле правила на всю ширину, селекти без вилазок ---- */
  .mp-sch-row > label, .mp-sch-row > div { flex: 1 1 100% !important; min-width: 0 !important; }
  .mp-sch-row select, .mp-sch-row input { width: 100% !important; min-width: 0 !important; min-height: 40px; }
}

@media (max-width: 768px) {
  /* ---- 🛒 Маркетплейси, етап 4: галерея фото — дві плитки в ряд; службові характеристики й довідник країн — поле на всю ширину ---- */
  .mp-gal-item { width: calc(50% - 4px) !important; min-width: 0 !important; }
  .mp-gal-item .btn { min-height: 36px; }
  .mp-svc-grid { grid-template-columns: 1fr !important; }
  .mp-svc-grid select, .mp-svc-grid input { width: 100% !important; min-width: 0 !important; min-height: 40px; }
  .mp-cty-row > input { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; min-height: 40px; }
}

@media (max-width: 768px) {
  /* ---- 🧾 Картка товару: рядок характеристики — підпис зверху, значення й джерело під ним; поле правки на всю ширину ---- */
  .pc-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .pc-row > div:last-child { justify-content: flex-start !important; }
  .pc-row #pcEditInput { width: 100% !important; min-width: 0 !important; min-height: 40px; }
}

@media (max-width: 768px) {
  /* ---- 🛒 Маркетплейси .mpx (редизайн 6.141.0; десктоп — css/marketplaces.css): каталог — комірки, масові дії — два ряди над
     нижнім краєм; картка пропозиції — нижній лист на 92dvh зі стрічкою розділів і кнопками в зоні великого пальця ---- */
  .mpx-top { gap: 8px; margin-bottom: 12px; }
  .mpx-top > .mpx-grow { display: none; }
  .mpx-chan { order: -1; width: 100%; justify-content: space-between; }
  .mpx-top > .seg { flex: 1 1 100%; }
  .mpx-tiles, .mpx-tiles.n3, .mpx-tiles.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .mpx .mpx-tile .hero-num { font-size: 21px; }
  .mpx-ovw { grid-template-columns: minmax(0, 1fr); }
  .mpx :is(input.mpx-field, select.mpx-field) { height: 40px; }

  /* фільтри: пошук і «⚙ Фільтри (n)» (js/mobile.js) одним рядком; категорія й капсули — по тапу, кожна на всю ширину */
  .mpx .mpx-tools.card { padding: 8px; gap: 8px; }
  .mpx-search { max-width: none; min-width: 0; }
  .mpx .mpx-search input.mpx-field { height: 44px; }
  #mpxFilters .mpx-popup, #mpxFilters label.pill { height: 44px; max-width: none; flex: 1 1 100%; justify-content: space-between; }
  .mpx-tools2 { margin-bottom: 10px; position: relative; }
  /* червоний лічильник «З помилками» за краєм сегмента — крапка на краю (JS segFade: .bad-r), як у стрічці розділів листа */
  .mpx-tools2:has(> .seg.fr.bad-r)::after { content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: var(--mpx-bad); box-shadow: 0 0 0 2.5px var(--mpx-cell); pointer-events: none; }
  .mpx-tools2 > :not(.seg) { display: none; }
  .mpx-tools2 > .seg { flex: 1 1 100%; }

  /* список: шапка — «Вибрати всі за фільтром · N» і ⇕ ⤫ (не липне); рядки — комірки */
  .mpx .mpx-list.card { border-radius: 14px; }
  .mpx-lh { position: static; grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 52px; padding: 6px 6px 6px 10px; }
  .mpx-list.ro .mpx-lh { grid-template-columns: minmax(0, 1fr) auto; }
  .mpx-lh > :not(.mpx-c-sel):not(.mpx-lh-m):not(.mpx-lh-t) { display: none; }
  .mpx-lh .mpx-lh-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .mpx-lh .mpx-lh-m .mpx-sub { font-weight: 500; }
  .mpx-lh .mpx-lh-t { display: flex; gap: 2px; }
  .mpx .mpx-lh .btn.mpx-ib, .mpx .mpx-fold .btn.mpx-ib { width: 36px; height: 36px; }
  /* «Картка товару CRM» у мета рядка — 36 px під палець (було 22: поруч клікабельний рядок, промах відкривав лист); відʼємні поля —
     рядок не росте (ревʼю 13.11, третій прохід) */
  .mpx-meta .btn.mpx-ib.xs { width: 36px; height: 36px; margin: -8px -4px; }
  .mpx input[type=checkbox].mpx-ck { width: 20px; height: 20px; }
  .mpx-c-sel { min-width: 30px; min-height: 40px; cursor: pointer; }

  /* папка: назві — перший рядок (лише перемикач поруч), 🗂 🌍 — у другому, біля статів (ревʼю 13.11: на 390 px назві лишалось ~150 px,
     «3.03 Готова продукція» рвалась на два рядки, а рядок папки виростав до ~105 px) */
  .mpx-fold { grid-template-columns: 30px 20px minmax(0, 1fr) auto; grid-template-areas: "sel chev name pub" ". . meta act";
    column-gap: 6px; row-gap: 2px; align-items: center; min-height: 56px; padding: 8px 10px 8px 10px; }
  .mpx-list.ro .mpx-fold { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "chev name pub" ". meta act"; }
  .mpx-fold > .mpx-c-sel { grid-area: sel; }
  .mpx-fold > .mpx-chev { grid-area: chev; height: 36px; }
  .mpx-fold > .mpx-c-pub { grid-area: pub; min-height: 36px; }
  /* перемикач папки — на правому краї, на одній вертикалі з перемикачами пропозицій (колонку ширшає 🗂 🌍 у другому рядку; ревʼю 13.11) */
  .mpx-fold > .mpx-c-pub { justify-content: flex-end; }
  .mpx-fold > .mpx-c-act { grid-area: act; align-self: start; margin-top: -4px; }
  .mpx-fold.l1 .mpx-chev { margin-left: 0; }
  .mpx-fold-main { display: contents; }
  .mpx-fold-name { grid-area: name; white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mpx-fold-meta { grid-area: meta; gap: 4px 12px; }
  .mpx-fold .mpx-c-act .btn.mpx-ib { opacity: 1; }

  .mpx-item { grid-template-columns: 30px 48px minmax(0, 1fr) auto; grid-template-areas: "sel pic prod prod" "sel . state pub";
    column-gap: 10px; row-gap: 6px; align-items: start; min-height: 0; padding: 12px 10px; }
  .mpx-list.ro .mpx-item { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "pic prod prod" ". state pub"; }
  .mpx-item > .mpx-c-sel { grid-area: sel; align-self: stretch; align-items: flex-start; padding-top: 12px; }
  .mpx-item > .mpx-thumb { grid-area: pic; width: 48px; height: 48px; }
  .mpx-item > .mpx-prod { grid-area: prod; }
  .mpx-item > .mpx-c-state { grid-area: state; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; align-self: center; }
  .mpx-item > .mpx-c-pub { grid-area: pub; align-self: center; min-height: 40px; }
  .mpx-item > .mpx-c-num, .mpx-item > .mpx-c-cat { display: none; }
  .mpx-name { font-size: 14px; }
  .mpx-mline { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .mpx-mline b { color: var(--text-primary); font-weight: 600; }
  .mpx-sw-t { width: 44px; height: 26px; }
  .mpx-sw-t::before { width: 22px; height: 22px; }
  .mpx-sw > input:checked + .mpx-sw-t::before { transform: translateX(18px); }
  .mpx-sw > input:indeterminate + .mpx-sw-t::before { transform: translateX(9px); }
  .mpx-sw.sm .mpx-sw-t { width: 36px; height: 22px; }
  .mpx-sw.sm .mpx-sw-t::before { width: 18px; height: 18px; }
  .mpx-sw.sm > input:checked + .mpx-sw-t::before { transform: translateX(14px); }

  /* масові дії: (1) «Вибрано: N» · «Вибрати всі за фільтром» · ✕ (2) «Розміщувати» на всю ширину + ⊘ 🗂 ⟳ по 40 px */
  /* row-gap 4: нульовий рядок-роздільник .mpx-vsep дає дві щілини — разом 8 px, а не 16 (critic 12.11) */
  .mpx-bulk { width: calc(100% - 16px); max-width: none; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin: 10px auto 12px; row-gap: 4px; padding: 8px 8px 8px 14px; }
  .mpx-bulk-n { order: 1; }
  .mpx-bulk > .mpx-link { order: 2; min-height: 36px; }
  .mpx-bulk > .mpx-bulk-x { order: 3; margin-left: auto; }
  .mpx-bulk > .mpx-vsep { order: 4; flex: 1 1 100%; height: 0; margin: 0; }
  .mpx .mpx-bulk > .btn-primary { order: 5; flex: 1 1 auto; height: 40px; }
  .mpx .mpx-bulk > .btn-ghost:not(.mpx-ib) { order: 6; width: 40px; height: 40px; padding: 0; }
  .mpx-bulk > .mpx-popup { order: 7; width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .mpx .mpx-bulk > .btn-ghost.mpx-bulk-crm { order: 8; }
  .mpx .mpx-bulk .btn.mpx-ib { width: 40px; height: 40px; }
  .mpx-bulk .mpx-bt, .mpx-bulk .mpx-popup > .mpx-i-updown { display: none; }
  /* на дотику підказки title не видно — під значками ⊘ 🗂 ⟳ короткі підписи (data-short: «Зняти», «Категорія», «З CRM»), як у тулбарі iOS
     (ревʼю 13.11: ⟳ не читалось як «зміни з CRM», а воно шле опубліковані на модерацію) */
  @media (hover: none) {
    .mpx .mpx-bulk > :is(.btn-ghost, .mpx-popup)[data-short] { width: auto; min-width: 44px; height: auto; min-height: 44px; padding: 3px 6px; flex-direction: column; justify-content: center; gap: 1px; }
    .mpx-bulk > [data-short]::after { content: attr(data-short); font-size: 10px; font-weight: 600; line-height: 1.1; color: var(--text-secondary); white-space: nowrap; }
  }
  body:has(#pageMarketplaces.active .mpx-bulk) .ai-assistant-btn { display: none !important; }   /* лише поки «Маркетплейси» на екрані */

  /* ---- картка пропозиції — нижній лист ---- */
  #modalContent:has(> #modalBody > .mpx-sheet) { height: 92dvh !important; max-height: 92dvh !important; }
  .modal-overlay:not(.hidden) #modalContent:has(> #modalBody > .mpx-sheet) { animation-duration: 200ms; }
  .mpx-sh { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 4px 10px 10px 14px; }
  .mpx-sh-pic { width: 40px; height: 40px; border-radius: 9px; }
  .mpx-sh-title { font-size: 14.5px; }
  .mpx-sh-price, .mpx-sh-nav { display: none; }
  .mpx-x { width: 36px; height: 36px; }
  .mpx-sb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mpx-nav { flex-direction: row; overflow: hidden; padding: 0; gap: 0; box-shadow: 0 1px 0 var(--mpx-sep); }
  .mpx-nav-l { flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; }
  .mpx-nav-l::-webkit-scrollbar { display: none; }
  /* край стрічки гасне, поки є куди гортати (JS: .fl / .fr) — «Характеристики 1» за краєм не губиться (ревʼю 13.11) */
  .mpx-nav-l.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .mpx-nav-l.fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
  .mpx-nav-l.fl.fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent); }
  .mpx-nav { position: relative; }
  .mpx-nav:has(> .mpx-nav-l.fr.bad-r)::after { content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: var(--mpx-bad); box-shadow: 0 0 0 2.5px var(--mpx-cell); pointer-events: none; }
  .mpx-nav-i { width: auto; flex: 0 0 auto; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; background: var(--mpx-cell); box-shadow: 0 0 0 1px var(--mpx-sep); }
  .mpx-nav-i > .mpx-i, .mpx-nav-i > .mpx-badge:empty { display: none; }
  .mpx-nav-i > .mpx-badge { min-width: 0; }
  .mpx-nav-i > .mpx-badge .bc, .mpx-nav-i > .mpx-badge .bw { margin-right: 0; }
  .mpx-nav-i.on { background: color-mix(in srgb, var(--accent, #2563eb) 11%, var(--mpx-cell)); color: var(--accent, #2563eb);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent); }
  .mpx-nav-note { display: none; }
  .mpx-scroll { padding: 16px 12px 28px; }
  .mpx-sec + .mpx-sec { margin-top: 28px; padding-top: 22px; scroll-margin-top: -19px; }   /* перехід: межа за краєм, заголовок на 16 px, як «Огляд» */
  .mpx-sec-h { font-size: 19px; }
  .mpx-sec-head .mpx-search { flex: 1 1 100%; order: 3; margin: 8px 0 0; }
  .mpx-gh { padding: 0 12px 6px; }
  .mpx-gf { padding: 6px 12px 0; }
  .mpx-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; min-height: 40px; padding: 10px 12px; }
  .mpx-row.f { grid-template-columns: minmax(0, 1fr) auto; }
  .mpx-row > .mpx-act:empty, .mpx-row > .mpx-val:empty { display: none; }
  .mpx-row > .mpx-act { justify-content: flex-start; }
  /* рядок із полем: підпис зверху, під ним поле й праворуч від нього чип джерела + «↺ авто» (чип — після значення, як на десктопі);
     короткі числові поля (ціна, кратність) — одним рядком із підписом */
  .mpx-row.fx { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .mpx-row.fx > .mpx-l { grid-column: 1 / -1; }
  .mpx-row.fx > :is(input, select):not(.mpx-w80):not(.mpx-w100), .mpx-row.fx > .mpx-val { grid-column: 1; }   /* не 2-га колонка десктопу */
  .mpx-row.fx > .mpx-act { justify-content: flex-end; }
  .mpx-row.fx:has(> input.mpx-w80, > input.mpx-w100) { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  /* WebKit рахує сітці «підпис на всю ширину + селект у 1-й колонці» зайві ~14 px прокручуваної ширини (видимого нічого не виходить) —
     лист на 390 px гортався вбік на 2 px (Safari, ревʼю 13.11); обрізаємо лише горизонталь рядка, кільця фокуса — всередині полів рядка */
  .mpx-row.fx:has(> select) { overflow-x: clip; }
  .mpx-row.fx:has(> input.mpx-w80, > input.mpx-w100) > .mpx-l { grid-column: auto; }
  /* «Службові»: колонка «чип + ↺ авто» стала — поле не стискається на першому символі (чип «авто» → «вручну» і «↺ авто»: −68 px), праві
     краї полів групи — одна вертикаль (країни й числа); довгий «не передається» + «↺ авто» — переносом у тій самій колонці (ревʼю 13.11) */
  .mpx-svc .mpx-row.fx { grid-template-columns: minmax(0, 1fr) 120px; }
  .mpx-svc .mpx-row.fx > .mpx-act { justify-content: flex-start; flex-wrap: wrap; row-gap: 2px; }
  .mpx-svc .mpx-svc-auto { margin-left: auto; }
  /* «Ціна», «Бренд», «Категорія»: місце під чип зарезервовано — «від 1С» / «з CRM» → «вручну» не зсуває поле */
  .mpx-row.fx > .mpx-act { min-width: 56px; }
  /* перемикач у рядку з полем («Дозволити вище паритету») — одним рядком із підписом */
  .mpx-row.fx:has(> .mpx-ctl) { grid-template-columns: minmax(0, 1fr) auto; }
  .mpx-row.fx:has(> .mpx-ctl) > .mpx-l { grid-column: auto; }
  .mpx-disc > summary.mpx-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; }
  .mpx-disc > summary.mpx-row > .mpx-act { justify-content: flex-end; }
  .mpx-disc > summary.mpx-row.fx > :is(.mpx-l, .mpx-val) { grid-column: auto; }
  .mpx-row + .mpx-row::before, .mpx-group > :not(.mpx-row):not([hidden]) + .mpx-row::before { left: 12px; }
  .mpx-xp { grid-template-columns: minmax(0, 1fr) auto; }
  .mpx-xp > input:first-child { grid-column: 1 / -1; }
  .mpx-callout { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
  .mpx-co-t { flex: 1 1 calc(100% - 40px); }
  .mpx-callout > .mpx-link, .mpx-callout > .btn { margin-left: 34px; }
  .mpx-pr-h { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "v a"; row-gap: 2px; padding: 10px 6px 10px 12px; }
  .mpx-pr-n { grid-area: n; font-size: 12.5px; }
  .mpx-pv { grid-area: v; font-size: 14.5px; }
  .mpx-pr-a { grid-area: a; align-self: center; margin-right: 0; }
  .mpx .mpx-pr-a .btn.mpx-ib { width: 36px; height: 36px; }
  .mpx-pr-ed-in { margin-left: 0; padding: 2px 12px 14px; }
  .mpx .seg.mpx-seg-sm { align-self: stretch; }
  .mpx .seg.mpx-seg-sm .seg-btn { flex: 1 1 0; min-height: 36px; padding: 6px 8px; }
  .mpx-pr-ctl { max-width: none; }
  /* фото — рядками: мініатюра ліворуч; праворуч позначки · кнопки (в один ряд, 40 px) · «у Rozetka» */
  .mpx-gal { gap: 8px; padding: 10px; }
  .mpx .mpx-ph.card { width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "img badges" "img tools" "img foot";
    align-content: center; padding: 8px 0 8px 8px; }
  .mpx .mpx-ph.mp-gal-item { width: 100% !important; }   /* перекриває «дві плитки в ряд» етапу 4 (.mp-gal-item вище) */
  .mpx-ph-img { display: contents; }
  .mpx-ph-img img { grid-area: img; align-self: center; width: 84px; height: 84px; padding: 4px; box-sizing: border-box; background: #fff;
    border-radius: 10px; box-shadow: 0 0 0 1px var(--mpx-sep); }
  .mpx-ph-badges { grid-area: badges; position: static; padding: 0 10px 2px; }
  .mpx-ph-badges:empty { display: none; }
  .mpx-ph-badges .chip { box-shadow: none; }
  .mpx-ph-tools { grid-area: tools; position: static; opacity: 1; flex-wrap: nowrap; justify-content: flex-start; gap: 0; padding: 0 2px; border-radius: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mpx .mpx-ph-tools .btn.mpx-ib { flex: 0 1 40px; width: auto; min-width: 0; height: 40px; }
  .mpx-ph-foot { grid-area: foot; border-top: 0; padding: 0 10px; }
  .mpx-ph.is-skel .mpx-ph-img { display: block; grid-area: img; width: 84px; height: 84px; border-radius: 10px; }
  .mpx-ph-add { width: 100%; min-height: 0; padding: 16px 10px; }
  .mpx-sf { gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); min-height: 60px; }
  .mpx-sf-tools, .mpx-kbd { display: none; }
  .mpx-sf-nav { display: flex; gap: 2px; }
  .mpx .mpx-sf-nav .btn.mpx-ib { width: 40px; height: 40px; }
  .mpx-dirty .mpx-dirty-t { display: none; }
  .mpx-dirty { margin-right: 4px; }
  .mpx .mpx-sf > .btn:not(.mpx-ib) { height: 42px; padding: 0 16px; }
}