/* * mobile_home_v2.css * Полный мобильный дизайн главной страницы kroim.by. * Подключается ПОСЛЕДНИМ в — после mobile_finance_grid_v2.css — * чтобы гарантированно побеждать все более ранние правила. * Не трогает ID элементов и JS-логику — только внешний вид и сворачивание * громоздких блоков в компактные плашки через нативный
. */ @media (max-width: 950px) { /* ============================================= СВОРАЧИВАЕМЫЕ БЛОКИ (Эффективность, Проблемные переносы) ============================================= */ .kr-collapsible { padding: 0 !important; border-radius: 14px !important; overflow: hidden !important; } .kr-details { width: 100% !important; } .kr-summary { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 16px !important; cursor: pointer !important; list-style: none !important; -webkit-tap-highlight-color: transparent !important; } .kr-summary::-webkit-details-marker { display: none !important; } .kr-summary-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: #111111 !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .kr-summary-icon i { font-size: 15px !important; } .kr-summary-text { flex: 1 !important; font-size: 14px !important; font-weight: 700 !important; color: #111111 !important; } .kr-summary-chev { font-size: 18px !important; color: #9ca3af !important; transition: transform 0.2s !important; flex-shrink: 0 !important; } .kr-details[open] .kr-summary-chev { transform: rotate(180deg) !important; } .kr-details-body { padding: 0 16px 16px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .kr-details-body .hint { font-size: 12px !important; color: #6b7280 !important; margin: 0 !important; } .kr-details-body .manager-efficiency-main-btn { width: 100% !important; min-height: 42px !important; border-radius: 10px !important; } /* ============================================= БЛОК "КОНТРОЛЬ" — компактная сетка 2x2 ============================================= */ .auto-control-section { border-radius: 14px !important; overflow: hidden !important; } .auto-control-section .card-title { padding: 14px 16px 8px !important; } .auto-control-section .card-title h2 { font-size: 14px !important; font-weight: 700 !important; } .auto-control-finance-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 16px 16px !important; } .auto-control-finance-card { background: #f9fafb !important; border: 1px solid #f0f0f0 !important; border-radius: 12px !important; padding: 12px 14px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } .auto-control-finance-card strong { font-size: 20px !important; font-weight: 700 !important; color: #111111 !important; order: 1 !important; } .auto-control-finance-card span { font-size: 11px !important; color: #6b7280 !important; font-weight: 500 !important; order: 2 !important; margin-top: 3px !important; } .auto-control-finance-card small { display: none !important; } /* Перебиваем admin_mobile_control_calc_queue_fix.css для "Нажмите" */ body .auto-control-section .control-card.auto-control-finance-card small, body.admin-mode .auto-control-section .control-card small { display: none !important; } /* Убираем зелёный кружок перед "КОНТРОЛЬ" */ .auto-control-section .card-title h2::before, .auto-control-section .card-title::before, body.admin-mode .auto-control-section .card-title h2::before, .card:has(.auto-control-finance-grid) .card-title h2::before { display: none !important; content: none !important; } .auto-control-section .card-title h2 { font-size: 14px !important; font-weight: 700 !important; padding-left: 0 !important; } /* ============================================= БЛОК "ПРОСЧЁТЫ" (Сейчас/Следом/Ждёт/Сегодня) — компактнее ============================================= */ .admin-mobile-calc-queue-section { border-radius: 14px !important; } .admin-mobile-calc-queue-section .card-title h2 { font-size: 14px !important; } /* ============================================= ОБЩИЙ ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ ============================================= */ .page > section, .page > .card, .admin-grid > .card { margin-bottom: 10px !important; } /* ============================================= СЖАТАЯ ШАПКА (hero) — остаётся видимой ============================================= */ /* ============================================= СЖАТАЯ ШАПКА (hero) — остаётся видимой ============================================= */ section.hero, body.admin-mode section.hero, body.portal-authenticated section.hero, .page > section.hero, .admin-mobile-dashboard-stack > section.hero { display: block !important; } .hero { display: block !important; padding: 0 !important; margin-bottom: 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; order: -10 !important; width: 100% !important; } .hero-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; flex-wrap: wrap !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 12px 14px !important; } /* Прячем только длинный заголовок-описание, не кнопки */ .hero-row > div:first-child h1 { font-size: 15px !important; margin: 0 !important; line-height: 1.2 !important; } .hero-row > div:first-child p { display: none !important; } .hero .badge { display: flex !important; align-items: center !important; gap: 7px !important; flex-wrap: wrap !important; background: transparent !important; border: none !important; padding: 0 !important; } .hero .badge .header-user-name { font-size: 15px !important; font-weight: 700 !important; color: #111111 !important; } .hero .badge #currentDate { font-size: 11px !important; color: #9ca3af !important; } .hero .badge .header-month-closed { display: none !important; } .hero .badge .switch-user-btn { font-size: 11px !important; padding: 5px 10px !important; min-height: 30px !important; border-radius: 8px !important; } /* ============================================= НИЖНИЙ ТАББАР (фиксированный) ============================================= */ .kr-tabbar { display: flex !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9999 !important; background: rgba(255,255,255,0.98) !important; backdrop-filter: blur(8px) !important; border-top: 1px solid #e5e7eb !important; box-shadow: 0 -4px 20px rgba(17,24,39,0.08) !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; } .kr-tab { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 8px 2px 10px !important; background: transparent !important; border: none !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .kr-tab i { font-size: 20px !important; color: #6b7280 !important; } .kr-tab span { font-size: 10px !important; color: #6b7280 !important; font-weight: 500 !important; } .kr-tab:active i, .kr-tab:active span { color: #d71920 !important; } /* Отступ снизу страницы чтобы таббар не перекрывал контент */ body.portal-authenticated .page { padding-bottom: 76px !important; } /* Прячем старую горизонтальную полосу из 7 кнопок на мобиле */ .actions.manager-section, .actions.admin-actions { display: none !important; } } /* Таббар виден только на мобиле — на десктопе скрыт */ @media (min-width: 951px) { .kr-tabbar { display: none !important; } }