/* Телефон. Все правила только под html.phone (класс ставит tablet.js), размеры касания и меню - из tablet.css. */

html.phone main { padding: 12px 10px 60px; }
html.phone .page-title, html.phone .hello h1 { font-size: 20px; margin-bottom: 10px; }
html.phone .page-sub { font-size: 12px; margin-top: -4px; }

/* шапка: часы не показываются, поиск на отдельной строке */
html.phone .topbar { flex-wrap: wrap; padding: 6px 10px; gap: 6px; }
html.phone .clock { display: none; }
html.phone .qsearch { order: 5; flex-basis: 100%; max-width: none; }
html.phone .top-right { gap: 6px; flex: 1; justify-content: flex-end; }
html.phone .mode { min-width: 0; flex: 0 1 auto; }
html.phone .mode select { max-width: 130px; }
html.phone .pill .lab-long { display: none; }
/* телефон повернут: шапка в одну строку, иначе занимает треть экрана по высоте */
@media (orientation: landscape) {
  html.phone .topbar { flex-wrap: nowrap; }
  html.phone .qsearch { order: 0; flex: 1 1 0; min-width: 0; }
  html.phone .top-right { flex: 0 0 auto; }
}

/* панели фильтров: поля на всю ширину, вкладки листаются пальцем */
html.phone .toolbar { gap: 6px; }
html.phone .toolbar .inp, html.phone .toolbar select.inp { flex: 1 1 100%; max-width: none !important; width: 100%; }
html.phone .toolbar .lg-per { flex: 1 1 100%; }
html.phone .toolbar .lg-per .inp { flex: 1 1 0; min-width: 0; }
html.phone .toolbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html.phone .toolbar .seg button { flex: 0 0 auto; white-space: nowrap; }
html.phone .ptabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
html.phone .ptabs button { flex: 0 0 auto; white-space: nowrap; }

/* таблицы карточками (разметку ячеек ставит phone.js) */
html.phone .clients-wrap:has(.mcards) { background: transparent; border: 0; padding: 0; }
html.phone .sticky-wrap:has(.mcards), html.phone .table-wrap:has(.mcards) { max-height: none; overflow: visible; }
html.phone .tbl.mcards, html.phone .of-tbl.mcards, html.phone .mcards > tbody { display: block; width: 100%; }
html.phone .mcards > thead, html.phone .mcards tr.m-head { display: none; }
html.phone .mcards tr { display: block; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
html.phone .mcards td {
  display: flow-root; padding: 3px 0 !important; border: 0; text-align: right; font-size: 13px; min-width: 0; max-width: none;
  position: static; box-shadow: none; white-space: normal; overflow-wrap: anywhere;
}
html.phone .mcards td:not(.of-short):not(.of-over) { background: none !important; } /* подсветка недостачи в заказе остается */
html.phone .of-tbl.mcards { min-width: 0; }
html.phone .mcards td::before { content: attr(data-label); float: left; width: 42%; padding-right: 10px; text-align: left; color: var(--muted); font-size: 12px; }
html.phone .mcards td.m-title {
  display: block; text-align: left; font-size: 15px; font-weight: 600; padding: 0 0 6px !important; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
html.phone .mcards td.m-title::before, html.phone .mcards td.m-act::before, html.phone .mcards td.m-span::before { content: none; }
html.phone .mcards td.m-act { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 0 0 !important; text-align: left; }
html.phone .mcards td.m-span { display: block; text-align: left; }
html.phone .mcards td.m-empty { display: none; }
/* строки групп, холдингов и итогов - заголовки между карточками */
html.phone .mcards tr.ct-folder, html.phone .mcards tr.label, html.phone .mcards tr.brand-row { background: transparent; border: 0; padding: 8px 2px 2px; margin: 4px 0 2px; }
html.phone .mcards tr.ct-folder td, html.phone .mcards tr.label td, html.phone .mcards tr.brand-row td { font-size: 14px; }
html.phone .mcards input:not([type=checkbox]):not([type=radio]) { width: 110px; max-width: 100%; }
html.phone .mcards td.m-title input, html.phone .mcards td.m-span input, html.phone .mcards .oi-search input { width: 100%; }
html.phone .mcards select { max-width: 100%; }

/* таблицы, которые остаются таблицами: колонка клиента уже, чтобы были видны суммы */
html.phone .tbl.db-tree { min-width: 680px; }
html.phone .tbl.db-tree td.name { min-width: 150px; max-width: 180px; }

/* канбан: одна колонка на экран, соседняя видна краем */
html.phone .kanban { scroll-snap-type: x mandatory; gap: 10px; padding-right: 10px; }
html.phone .kcol { flex: 0 0 86vw; min-width: 86vw; scroll-snap-align: start; }

/* окна на всю ширину; окно заказа прокручивается целиком */
html.phone .modal { padding: 6px 4px; }
html.phone .modal-body { padding: 12px; max-width: none; }
html.phone .modal-head h2 { font-size: 17px; }
html.phone .order-modal { width: 100%; height: auto; min-height: calc(100dvh - 12px); padding: 10px; }
html.phone .oh-hero { flex-direction: column; gap: 8px; padding: 12px; }
html.phone .oh-num { font-size: 22px; padding-right: 40px; }
html.phone .oh-sum { text-align: left; }
html.phone .oh-sum-v { font-size: 22px; }
html.phone .oh-btns { justify-content: flex-start; margin-top: 4px; }
html.phone .oh-cards, html.phone .of-head, html.phone .of-foot { grid-template-columns: minmax(0, 1fr); }
html.phone .of-f.wide { grid-column: auto; }
html.phone .of-tabrow #lo-q { max-width: none; }
html.phone .row-end { justify-content: stretch; }
html.phone .row-end .btn-green, html.phone .row-end .btn-ghost { flex: 1 1 auto; }
html.phone .np { left: 8px; right: 8px; width: auto; }
html.phone .toasts { right: 10px; left: 10px; width: auto; bottom: 10px; }