становится grid'ом, каждый | получает «лейбл: значение»
через ::before content: attr(data-label). На десктопе остаётся обычной.
Брейкпоинт 768px (а не 640) — потому что 7-колоночная table уже на 720px
начинает ломаться: даты переносятся «2026-05-01», точки «Кра узе» и т.п. */
@media (max-width: 768px) {
.cw-tx-table { border: none; display: block; }
.cw-tx-table thead { display: none; }
.cw-tx-table tbody { display: block; }
.cw-tx-table tr {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.15rem 0.5rem;
padding: 0.6rem 0.75rem;
margin: 0.5rem 0;
border: 1px solid var(--cw-border);
border-radius: 6px;
background: var(--pico-card-background-color);
}
.cw-tx-table td {
display: block;
padding: 0.1rem 0;
border: none;
text-align: left !important; /* перебиваем cw-num right-align */
}
.cw-tx-table td::before {
content: attr(data-label) ": ";
font-weight: 600;
color: var(--cw-muted);
font-size: 0.82rem;
margin-right: 0.35rem;
}
/* Колонки без data-label (.cw-row-actions) — пустая «приставка» не нужна. */
.cw-tx-table td:not([data-label])::before { content: none; }
/* Кнопка «Удалить» — компактная иконка ✕ в правом верхнем углу карточки.
Так визуально не остаётся «пустого столбца» справа от данных. */
.cw-tx-table td.cw-row-actions {
grid-column: 2; grid-row: 1;
align-self: start;
display: flex; justify-content: flex-end;
padding: 0;
margin: -0.2rem -0.25rem 0 0;
}
.cw-tx-table td.cw-row-actions > button {
width: 36px; min-width: 36px;
height: 36px; min-height: 36px;
padding: 0;
font-size: 0; /* скрываем «Удалить» текст */
line-height: 1;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--cw-negative) 35%, var(--cw-border));
background: color-mix(in srgb, var(--cw-negative) 8%, transparent);
color: var(--cw-negative);
display: inline-flex; align-items: center; justify-content: center;
}
.cw-tx-table td.cw-row-actions > button::before {
content: "✕";
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
}
.cw-tx-table td.cw-row-actions > button:hover,
.cw-tx-table td.cw-row-actions > button:active {
background: color-mix(in srgb, var(--cw-negative) 18%, transparent);
}
/* Данные карточки занимают всю ширину, кнопка ✕ висит абсолютно
над правым верхним углом — освобождает пространство под текст. */
.cw-tx-table tr {
position: relative;
}
.cw-tx-table td.cw-row-actions {
position: absolute;
top: 0.45rem;
right: 0.5rem;
margin: 0;
}
.cw-tx-table td:not(.cw-row-actions) {
grid-column: 1 / -1;
padding-right: 2.5rem; /* чтобы значения не упирались в ✕ */
}
}
/* ========================================================================== */
/* МОБИЛЬНАЯ АДАПТАЦИЯ — Этап 1 (фундамент) */
/* ========================================================================== */
@media (max-width: 640px) {
/* Увеличиваем базовый шрифт до 16px — это:
(a) anti-zoom для iOS Safari при focus в input,
(b) комфортно читается с расстояния руки на телефоне. */
html { font-size: 16px; }
input, select, textarea {
font-size: 16px !important; /* перебивает Pico cascade */
}
/* 44×44px — минимальная тач-цель (Apple HIG / WCAG 2.5.5). */
button,
a[role="button"],
[role="button"] {
min-height: 44px;
}
.cw-btn-small,
button.cw-btn-small,
.cw-quick-btn {
min-height: 44px;
padding: 0.55rem 0.85rem;
font-size: 0.95rem;
}
/* Иконочные кнопки в строках таблицы (✏ / 🗑) — тоже тач-цель. */
.cw-row-actions > button,
.cw-row-actions > a[role="button"],
.cw-row-actions > form > button {
min-width: 44px;
min-height: 44px;
}
/* Глобальный touch-action: убирает 300ms delay double-tap-zoom для всех
кнопок и интерактивных элементов, не ломая жесты на остальной странице. */
button, a, [role="button"], select, .cw-comment-cell { touch-action: manipulation; }
}
@media (max-width: 480px) {
/* Узкий экран — ужимаем боковые отступы контейнера. */
main.container, header.container, footer.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* ========================================================================== */
/* МОБИЛЬНАЯ АДАПТАЦИЯ — Этап 3 (дашборды и графики) */
/* ========================================================================== */
@media (max-width: 480px) {
/* Селекторы периода Месяц/Год на главной — занимают всю ширину
и располагаются 1+1 колонкой вместо «слипшихся» min-width-полей. */
.cw-home-period {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
width: 100%;
}
.cw-home-period label { grid-column: 1 / -1; }
.cw-home-period select,
.cw-home-period select[name="period_year"],
.cw-home-period select[name="period_month"] {
width: 100%;
min-width: 0;
}
/* KPI-плашки дашборда объекта — 2 в ряд (вместо 3-5) на узком, потом 1. */
#kpi-grid.grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
#kpi-grid .cw-kpi-value { font-size: 1.1rem; }
}
@media (max-width: 380px) {
#kpi-grid.grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
/* Три графика «Источники / Динамика / Машин» становятся в одну колонку. */
.cw-dir-panel-charts { grid-template-columns: 1fr !important; }
/* Кнопки быстрого ввода доход/расход/машины — переносятся и тянутся. */
.cw-home-quick-actions { flex-wrap: wrap; gap: 0.4rem; }
.cw-home-quick-actions .cw-quick-btn { flex: 1 1 calc(50% - 0.4rem); min-height: 44px; }
/* Шапка секции «Действующая / Стройка» — статы переносятся в 2x2. */
.cw-home-section-stats { flex-wrap: wrap; gap: 0.5rem; }
.cw-home-stat { flex: 1 1 calc(50% - 0.3rem); }
/* Кнопка «Открыть» в плитке объекта — на мобильном выраженная,
во всю ширину футера, с явным акцентом (primary стиль).
display:flex вместо block — иначе текст ложится по line-height
у верха content-area и визуально съезжает вверх. */
.cw-tile .cw-tile-footer { text-align: stretch; }
.cw-tile .cw-tile-footer a[role="button"] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
font-size: 0.95rem;
font-weight: 500;
padding: 0.6rem 1rem;
min-height: 44px;
line-height: 1.15;
}
}
@media (max-width: 720px) {
/* Статы секции (Объектов / Доход / Расход / Прибыль / Машин) — на узком
экране по одному в строке. Без рамки/фона/скругления, чтобы не были
похожи на кликабельные кнопки. Просто «лейбл — значение».
Специфичность через родителя .cw-home-section-stats перебивает базовый
.cw-home-stat { border-radius: 999px; ... } ниже по файлу. */
.cw-home-section-stats {
display: flex !important; /* перебиваем grid из верхнего слоя */
flex-direction: column;
align-items: stretch;
gap: 0;
}
.cw-home-section-stats .cw-home-stat {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.35rem 0;
border: none;
border-radius: 0;
background: transparent;
border-bottom: 1px dashed var(--cw-border);
}
.cw-home-section-stats .cw-home-stat:last-child { border-bottom: none; }
.cw-home-section-stats .cw-home-stat-label {
font-size: 0.88rem;
color: var(--cw-muted);
}
}
/* ========================================================================== */
/* МОБИЛЬНАЯ АДАПТАЦИЯ — Этап 4 (матрицы schedule/drains) */
/* ========================================================================== */
/* Переключатель «◂ Неделя N/M ▸» над матрицей.
На десктопе скрыт — там видна вся матрица сразу. */
.cw-schedule-weekbar { display: none; }
@media (max-width: 720px) {
.cw-schedule-weekbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin: 0.5rem 0 0.75rem;
padding: 0.5rem 0.6rem;
background: var(--cw-bg-soft);
border: 1px solid var(--cw-border);
border-radius: 6px;
font-size: 0.95rem;
}
.cw-schedule-weekbar .cw-week-fullmonth {
font-size: 0.82rem;
color: var(--cw-muted);
}
.cw-schedule-weekbar .cw-btn-placeholder {
width: 5rem; /* зарезервированное место под кнопку, чтобы центр не прыгал */
}
}
/* Во время drag-select на тач — блокируем скролл контейнера. */
table.cw-schedule.cw-dragging { touch-action: none; }
table.cw-schedule.cw-dragging td.cw-schedule-cell { touch-action: none; }
/* Тач-цель для ячеек матрицы на мобильном — 44px высоты и ширины. */
@media (max-width: 720px) {
table.cw-schedule th,
table.cw-schedule td.cw-schedule-cell {
min-width: 44px;
height: 44px;
}
/* Sticky-колонка имени — visible-разделитель тенью. */
table.cw-schedule .cw-schedule-name {
min-width: 110px;
width: 110px;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}
}
/* ========================================================================== */
/* Мобильное меню — собственный |