/* ============================================================================ АДАПТИВНОСТЬ ДАШБОРДА И ОТЧЕТОВ ---------------------------------------------------------------------------- Подключается ОДНОЙ строкой в обеих страниц, после Tailwind: Что чинит: - карточки сводки и блоки перестают вылезать за экран на телефоне; - таблицы и планы прокручиваются по горизонтали, а не ломают верстку; - шапка с фильтрами переносится на несколько строк вместо сжатия; - текст не становится нечитаемо мелким на маленьких экранах; - на больших мониторах контент не растягивается в одну строку. Ничего в разметке менять не нужно: правила опираются на уже существующие классы Tailwind. ============================================================================ */ /* =========================================================================== 1. ОБЩЕЕ: убираем горизонтальную прокрутку всей страницы =========================================================================== */ html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* Длинные названия помещений не должны распирать карточки */ h1, h2, h3, h4, .truncate { overflow-wrap: anywhere; } /* =========================================================================== 2. ТЕЛЕФОНЫ (до 640px) =========================================================================== */ @media (max-width: 640px) { /* --- Шапка: фильтры в столбик, каждый на всю ширину --- */ header select, header input[type="date"], header input[type="password"] { width: 100% !important; min-height: 40px; /* удобно попадать пальцем */ font-size: 13px !important; } header nav { flex-wrap: wrap; gap: 8px !important; } /* --- Карточки сводки: по одной в ряд, крупные цифры не режутся --- */ main .grid.grid-cols-2, main .grid.sm\:grid-cols-2, main .grid.grid-cols-3 { grid-template-columns: 1fr !important; } /* Тройка счетчиков в блоке отметок остается в ряд, но компактнее */ #milestonesBlock .grid.grid-cols-3, #milestonesBlock .grid.sm\:grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #milestonesBlock .divide-x > * + * { border-left: 0 !important; border-top: 1px solid #dbeafe; } /* --- Крупные числа: чтобы не переносились на две строки --- */ main .text-3xl, main .text-4xl, main .sm\:text-4xl { font-size: 26px !important; line-height: 1.1 !important; } /* --- Строки блоков "Требуют уборки" и "Отметки": в две строки --- */ #cleanNowList > div, #milestonesList > div { flex-wrap: wrap; row-gap: 6px; } #cleanNowList .hidden.sm\:block, #milestonesList .hidden.sm\:block { display: block !important; width: 100%; text-align: left; padding-left: 36px; } /* Подстроки мужского и женского санузла */ #milestonesList .flex.items-center.gap-2 > .w-16 { width: auto !important; min-width: 62px; } #milestonesList .flex.items-center.gap-2 > .w-20 { width: auto !important; min-width: 70px; } #milestonesList .ml-auto { margin-left: 0 !important; } /* --- Графики: не ниже читаемой высоты --- */ main canvas { min-height: 220px; max-height: 320px; } /* --- План этажа: прокручиваем, а не сжимаем до нечитаемости --- */ #mapContainer, #mapWrapper { min-width: 640px !important; } /* --- Тепловая карта: одна зона в ряд --- */ #roomsGrid { grid-template-columns: 1fr !important; } /* --- Кнопки периода: перенос вместо сжатия --- */ .global-date-btn, [class*="date-btn-"] { flex: 1 1 auto; min-width: 64px; } /* --- Модальное окно отчетов на весь экран --- */ #room-modal > div, #reportModal > div { max-height: 94vh !important; margin: 0 !important; border-radius: 12px !important; } /* --- Карточки отчетов: чек-лист в один столбец --- */ .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; } /* --- Фото в отчетах: сетка по три, а не по одному --- */ #modal-reports-container img, #modal-guests-container img { max-height: 120px; } /* --- Меню выгрузки не должно уезжать за край --- */ #exportMenu { right: auto !important; left: 50% !important; transform: translateX(-50%); width: min(280px, calc(100vw - 24px)) !important; } } /* =========================================================================== 3. ПЛАНШЕТЫ (641-1023px) =========================================================================== */ @media (min-width: 641px) and (max-width: 1023px) { main .grid.lg\:grid-cols-3, main .grid.xl\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #roomsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } main canvas { max-height: 340px; } /* Боковая панель редактора карты уходит вниз, план — на всю ширину */ .xl\:col-span-3 { grid-column: span 2 / span 2 !important; } } /* =========================================================================== 4. НОУТБУКИ И МОНИТОРЫ (от 1024px) =========================================================================== */ @media (min-width: 1024px) { main canvas { max-height: 380px; } } /* Очень широкие экраны: контент не растягиваем, читать длинные строки тяжело */ @media (min-width: 1900px) { main.max-w-\[1600px\] { max-width: 1800px !important; } } /* =========================================================================== 5. ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА ТАМ, ГДЕ ОНА НУЖНА Планы и широкие таблицы прокручиваем пальцем, с заметной полосой =========================================================================== */ .overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .overflow-x-auto::-webkit-scrollbar { height: 6px; } .overflow-x-auto::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 4px; } /* Подсказка о прокрутке видна только на узких экранах */ @media (min-width: 768px) { .scroll-hint { display: none !important; } } /* =========================================================================== 6. ПЕЧАТЬ И PDF =========================================================================== */ @media print { header, footer, #exportWrap, .fixed { display: none !important; } /* Тепловую карту и план этажа на бумагу не выводим: они нечитаемы в печати и занимают по целой странице. Те же блоки исключаются и при выгрузке в PDF. */ [data-print="skip"] { display: none !important; } /* Заголовок не должен оставаться внизу страницы без своего блока */ h2, h3 { break-after: avoid !important; page-break-after: avoid !important; } /* Строки блоков не режем пополам */ #milestonesList > div, #cleanNowList > div, #roomsGrid > div { break-inside: avoid !important; page-break-inside: avoid !important; } main { max-width: none !important; padding: 0 !important; } #msBody { display: block !important; } .bg-white { border: 1px solid #cbd5e1 !important; break-inside: avoid; } .overflow-x-auto { overflow: visible !important; } } #cleanNowList { max-height: 650px; overflow-y: auto; } /* =========================================================================== 7. ДОПРАВКИ: карточки статистики, шапка, модалки =========================================================================== */ @media (max-width: 640px) { /* Счётчики «Убрано / Ожидает» больше не держат min-width и не вылезают */ .stat-card, main .neu.min-w-max, main .flex-1.min-w-max { min-width: 0 !important; } /* Заголовок + подзаголовок не упираются в гамбургер (он теперь в потоке) */ header h1, .app-header h1 { font-size: 1.05rem !important; line-height: 1.25 !important; } /* Таблицы на странице ролей — горизонтальный скролл внутри карточки */ table { min-width: 520px; } /* Кнопки действий в таблицах не сжимаются в кашу */ td .flex { flex-wrap: wrap; gap: 6px; } /* Карта: скроллим ТОЛЬКО внутренний контейнер, не всю страницу */ #mapWrapper, #mapContainer { min-width: 640px !important; } /* Модалка: безопасная зона снизу, кнопки не под home-indicator */ #room-modal > div, .modal-shell { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* Фильтры модалки — по два в ряд, не в одну длинную ленту */ #modal-detailed-filters-row select { width: calc(50% - 0.25rem) !important; min-width: 0 !important; } } @media (max-width: 1023px) { /* На планшете/телефоне сайдбар не занимает место в потоке */ aside.sidebar { position: fixed !important; } }