@charset "UTF-8";
/* Телефонные медиазапросы: кроме ширины окна - сенсорный экран и узкая сторона экрана устройства (телефон лежа,
   широкий веб-вью, «Версия для ПК» в браузере). Пояснение - в начале style.css (01.11.2026). */
/* Смета дилера на телефоне карточками (245, 27.10.2026; владелец: «Делай в построителе смету дилера на телефоне карточками»
   - предложение 1 разбора EasyCeiling Mobile 3.4.0, D:\cloude\android\ec-analysis\report.md). До 245 таблица сметы шириной
   667 px лежала в прокрутке 334 px: цена, скидка и сумма были за правым краем экрана телефона.
   На экране до 600 px накладная «Заказ комплектующих» (.est-inv-tbl) и калькуляция (.est-tbl[data-scope], calcHtml - смета
   объекта, смета для клиента) идут карточками: строка сметы - карточка, подписи колонок - у полей. До 296 - только у дилера
   (html.role-dealer); с 296 (01.11.2026, владелец: «в мобильном приложении при открытии сметы оптимизируй шрифт и масштаб строк,
   чтобы не сдвигать строку влево-вправо») - у всех: сотрудник на телефоне видел прежнюю таблицу в прокрутке. Разметка est-ui.js
   прежняя, классы ячеек: no, cd, nm, un, q, p, dc, dp, s, x. Таблица спецификации в окне (.est-tbl без data-scope), журналы
   (.est-jr) и оплаты (.est-pays-tbl) не меняются. Правила только для экрана: лист печати и PDF (#printSheet, .pe) свои.
   Плотные карточки (297, 03.11.2026, автор задачи Юрий @utaliiev: «в мобильной версии построителя в разделе смета
   отображаются слишком большие позиции сметы, сделай их максимально узкими по высоте, немного уменьши шрифт, чтобы на
   экран телефона помещалось максимальное количество позиций сметы»). Было пять строк на позицию (№ и ×; название;
   кол-во и цена; скидка и цена со скидкой; сумма) - около 300 px, на экран влезали две позиции. Стало две-три строки
   около 130 px: № и название с × - первой строкой, сумма встала справа в строку скидки (без скидки - в строку цены),
   поля ниже (32 px), подписи, название, единица, сумма и строки материалов мельче. Шрифт самих полей ввода остается
   16 px: с меньшим iPhone увеличивает страницу при нажатии на поле.
   Строчные подписи и мелкие поля (298, 03.11.2026, тот же автор: «оптимизируй размеры позиций, окошки с количеством и
   суммой, и уменьши их еще в два раза, но сделай так чтобы это выглядело аккуратно и читаемо»): подпись поля встала
   слева от него, а не над ним - строка полей вдвое ниже; поле количества 48×22 вместо 68×32 (вдвое меньше по площади)
   в приложении Telegram, где масштаб страницы выключен (tg.js, html.tg), и 60×26 в обычном браузере, где шрифт поля
   обязан остаться 16 px. Крестик строки переехал в правый верхний угол карточки: в потоке он съезжал к полю количества,
   когда название занимало две строки. Позиция - около 55 px вместо 80 px.
   Одна строка полей и чередование фона (400, 05.11.2026, владелец по снимку сметы в мини-приложении Telegram: «не добавил
   цветового разделения по товарам, поле количества например шт лучше делать ближе к значению, попробуй выиграть одну
   строчку разместив инфу о количестве скидках и тд компактнее»): количество, цена, скидка, цена со скидкой и сумма -
   одной строкой, подписи - мелко над полями; № стоит рядом с длинным названием, а не строкой над ним; единица - вплотную
   к полю количества; соседние карточки - разным фоном. */
@media screen and (max-width: 600px), screen and (pointer: coarse) and (max-device-width: 540px), screen and (pointer: coarse) and (max-device-height: 540px) {
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]),
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) > :is(tbody, tfoot) { display: block; width: 100%; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) > thead { display: none; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) td { display: block; min-width: 0; width: auto; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; white-space: normal; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) td:empty { display: none; }
  .est-sheet { padding-left: 8px; padding-right: 8px; } /* поля листа 8 px вместо 12: строке полей карточки - еще 8 px ширины (400) */

  /* карточка строки (400): первой строкой № и название - оно переносится внутри своей ячейки рядом с №, × - в правом
     верхнем углу карточки; второй - все поля одной строкой: «Кол-во <поле> ед.», «Цена», «Скидка %», «Со скидкой» и сумма
     справа. Подписи - мелко над полями: ширины строки они не отнимают. До 400 (298) подписи стояли слева от полей и строк
     полей было две (количество и цена, затем скидка и сумма); у короткого названия поле количества вставало в первую
     строку, а его единица уезжала во вторую; длинное название уходило строкой под № */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row { --est-fh: 26px; position: relative; margin: 5px 0 0; padding: 4px 8px 5px; gap: 3px 6px; align-items: baseline; border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--surface); }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row { --est-fh: 22px; } /* высота поля в приложении Telegram (ниже) */
  /* цветовое разделение позиций (400): соседние карточки - разным фоном, каждая вторая с голубым оттенком. Счет - только по
     карточкам, кроме потолка накладной: у него своя заливка и рамка (ниже), и первая строка под ним белая. Строки
     материалов работы между карточками не считаются */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row:not(.ceil):nth-child(even of tr.est-row:not(.ceil)) { background: var(--surface2); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
  /* разрыв после названия: поля - всегда второй строкой, а не рядом с коротким названием */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row::before { content: ''; order: 4; flex: 1 1 100%; height: 0; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.no { order: 1; width: auto; white-space: nowrap; color: var(--dim); font-size: 11px; font-weight: 700; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.no::before { content: '№ '; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.cd { order: 2; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.nm { order: 3; flex: 1 1 0; }
  /* место под крестик в углу - только в первой строке названия (обтекаемый блок справа): строки ниже, например «Помещение
     1 · 12,00 м² · периметр ...» у потолка накладной, идут на всю ширину */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.nm::before { content: ''; float: right; width: 16px; height: 14px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.x { position: absolute; top: 2px; right: 4px; width: auto; margin: 0; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.x .x { padding: 2px 4px; font-size: 15px; line-height: 1; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q { order: 5; }
  /* единица - вплотную к полю количества; кнопка ↺ (вернуть количество по чертежу) - только когда количество задано
     вручную: скрытая, она занимала место между полем и единицей (400) */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.un { order: 6; margin-left: -3px; color: var(--muted); }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q .est-ic.off { display: none; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.un:empty + td.q { min-width: 32px; } /* без единицы подпись «Кол-во» не наезжает на «Цена» */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.p { order: 7; margin-left: 8px; } /* зазор между «1 шт» и ценой шире: подписи «Кол-во» и «Цена» не слипаются */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.p .p1c { min-width: 0; text-align: left; }
  /* пометки у цены («выберите фактуру», «нет в 1С», «не по 1С», «пересчет после записи», «цена у менеджера») - под полем
     цены, а не в строке полей: в строке они выталкивали цену со скидкой и сумму в третью строку (400). Карточка с
     пометкой ниже на ее высоту; вторая пометка - под первой */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.p small.c1c:is(.miss, .need) { position: absolute; left: 0; top: 100%; max-width: none; margin: 2px 0 0; white-space: nowrap; text-align: left; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.p small.c1c:is(.miss, .need) ~ small.c1c:is(.miss, .need) { margin-top: 20px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row:has(> td.p small.c1c:is(.miss, .need)) { padding-bottom: 22px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row:has(> td.p small.c1c:is(.miss, .need) ~ small.c1c:is(.miss, .need)) { padding-bottom: 40px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dc { order: 9; min-width: 42px; } /* не уже подписи «Скидка %», когда скидка текстом */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dp { order: 10; }
  /* сумма - справа в строке полей */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.s { order: 11; flex: 0 0 auto; min-width: 0; margin-left: auto; justify-content: flex-end; text-align: right; font-size: 13px; font-weight: 800; }
  /* подпись поля - мелко над ним (400): у ячейки поля отступ сверху под подпись, сама подпись вне потока. Ячейки строки
     полей - высотой с поле и по нижнему краю: подписи над текстом (цена из 1С, скидка дилера) стоят вровень с подписями
     над полями */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.q, td.un, td.p, td.dc, td.dp, td.s):not(:empty) { align-self: flex-end; display: flex; align-items: center; min-height: var(--est-fh); }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.q, td.p, td.dc, td.dp, td.s) { position: relative; gap: 3px; margin-top: 11px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.q, td.p, td.dc, td.dp, td.s)::before { position: absolute; left: 0; bottom: 100%; margin: 0 0 1px; white-space: nowrap; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 10px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q::before { content: 'Кол-во'; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.p::before { content: 'Цена'; } /* цена текстом - уже с ₽ */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.p:has(input)::before { content: 'Цена, ₽'; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dc::before { content: 'Скидка %'; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dp::before { content: 'Со скидкой'; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.s::before { content: 'Сумма'; left: auto; right: 0; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) .tag { display: inline-block; margin-left: 5px; padding: 0 5px; font-size: 9px; }
  /* поля: в обычном браузере шрифт 16 px - с меньшим iPhone увеличивает страницу при нажатии на поле. В приложении
     Telegram масштаб страницы выключен (tg.js, html.tg), поэтому там поле мельче (298). С 400 поля чуть уже: все четыре
     и сумма помещаются в одну строку */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row input { min-height: 26px; padding: 2px 5px; font-size: 16px; text-align: right; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q input { width: 52px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.dp) input { width: 66px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dc input { width: 44px; }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row input { min-height: 22px; padding: 1px 4px; font-size: 13.5px; }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q input { width: 44px; }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.dp) input { width: 58px; }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dc input { width: 40px; }
  /* число длиннее поля (цена 13 580,24, количество 125,75): поле шире по числу, где браузер это умеет (field-sizing), до
     96 px у цен и 72 px у количества; в остальных - ширина выше, число прокручивается в поле (400) */
  @supports (field-sizing: content) {
    .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.dp) input { field-sizing: content; width: auto; min-width: 66px; max-width: 96px; }
    html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.dp) input { width: auto; min-width: 58px; max-width: 90px; }
    .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q input { field-sizing: content; width: auto; min-width: 52px; max-width: 72px; }
    html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q input { width: auto; min-width: 44px; max-width: 64px; }
  }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row .est-ic { padding: 0 3px; font-size: 13px; line-height: 1; }

  /* материалы работы (строки под ней, без «материалы в цене работы»): короче, со сдвигом; «кол-во ед. × цена = сумма» */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid { margin: 0 0 0 10px; padding: 2px 8px; border-left: 2px dashed var(--line2); align-items: baseline; gap: 0 6px; color: var(--muted); font-size: 11px; line-height: 1.25; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td { color: inherit; font-size: inherit; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.nm { flex: 1 1 100%; padding-left: 0; box-shadow: none; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.q { order: 1; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.un { order: 2; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.p { order: 3; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.p::before { content: '× '; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.dp { order: 4; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.dp::before { content: 'со скидкой '; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.s { order: 5; margin-left: auto; color: var(--text); }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-kid > td.s::before { content: '= '; color: var(--muted); }

  /* накладная: потолок - карточка с подложкой, строки к нему - с чертой слева, изделие - группа с чертой сверху
     (у tr.est-row.ceil и .att специфичность та же, что у карточки tr.est-row выше: перекрывают ее порядком) */
  .est-sheet table.est-inv-tbl > tbody.est-grp { margin-top: 8px; padding-top: 2px; border-top: 2px solid var(--accent-line); }
  .est-sheet table.est-inv-tbl tr.est-row.ceil { border-color: var(--accent-line); background: var(--accent-soft); }
  .est-sheet table.est-inv-tbl tr.est-row.att { border-left: 3px solid var(--accent); }
  .est-sheet table.est-inv-tbl tr.est-ceil0 { margin-top: 5px; padding: 5px 8px 6px; border: 1px dashed var(--line2); border-radius: var(--r-md); background: var(--accent-soft); }
  .est-sheet table.est-inv-tbl tr.est-ceil0 > td.nm { flex: 1 1 100%; }

  /* заголовки групп, «Убрано из заказа», пустая смета, итоги: полосой без рамки */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr:is(.est-gh, .est-ghid, .est-empty) > td { flex: 1 1 100%; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-gh { padding: 7px 2px 0; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-ghid { padding: 4px 2px 0; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-empty > td { padding: 12px 6px; text-align: center; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr:is(.est-gsum, .est-sum) { justify-content: space-between; align-items: baseline; padding: 6px 2px 3px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr:is(.est-gsum, .est-sum) > td[colspan] { flex: 1 1 0; text-align: left; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr:is(.est-gsum, .est-sum) > td.s { flex: none; text-align: right; font-weight: 800; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-sum { margin-top: 8px; border-top: 2px solid var(--accent-soft); font-weight: 800; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-sum > td small { display: block; margin: 2px 0 0; }

  /* шрифт строк на телефоне (296, мельче с 297 и 298): название 13 px с переносом длинных слов, единица и цена текстом
     12 px, подписи полей 9 px над полями (400, выше), сумма строки 13 px (выше); поля - 16 px, в приложении Telegram
     13,5 px (выше) */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.nm { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.nm .mk { margin-left: 5px; font-size: 11px; white-space: normal; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.nm small { font-size: 11px; }
  /* «Помещение 1 · 12,00 м² · периметр ... · углов 4» под названием потолка (400): рядом с № строка уже - чуть мельче, а
     если не умещается, переносится ровными половинами, без одинокого числа во второй строке */
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.nm small.sub { font-size: 10.5px; text-wrap: balance; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.un { font-size: 11px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.q) { font-size: 12px; } /* цена и количество текстом (площадь из 1С); в полях шрифт свой */
}
/* узкий телефон (360 px и меньше): зазоры и поля карточки еще теснее (298), поля цены уже - строка полей с суммой
   умещается целиком (400) */
@media screen and (max-width: 380px), screen and (pointer: coarse) and (max-device-width: 380px), screen and (pointer: coarse) and (max-device-height: 380px) {
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row { gap: 3px 5px; padding-left: 6px; padding-right: 6px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q input { width: 50px; min-width: 50px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.dp) input { width: 60px; min-width: 60px; }
  .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dc input { width: 40px; }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.q input { width: 40px; min-width: 40px; }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.p, td.dp) input { width: 54px; min-width: 54px; }
  @supports (field-sizing: content) {
    .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.q, td.p, td.dp) input,
    html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > :is(td.q, td.p, td.dp) input { width: auto; }
  }
  html.tg .est-sheet :is(table.est-inv-tbl, table.est-tbl[data-scope]) tr.est-row > td.dc input { width: 36px; }
}
