/* * mobile_home_v2.css * Полный мобильный дизайн главной страницы kroim.by. * Подключается ПОСЛЕДНИМ в — после mobile_finance_grid_v2.css — * чтобы гарантированно побеждать все более ранние правила. * Не трогает ID элементов и JS-логику — только внешний вид и сворачивание * громоздких блоков в компактные плашки через нативный
. */ /* По умолчанию мобильные элементы СКРЫТЫ — показываются только в мобильном @media ниже. Это защищает десктоп от появления плиток/таббара/гамбургера, даже если медиа-запрос min-width не сработает. */ .kr-tiles, .kr-tabbar, .kr-burger, .kr-icon-toolbar { display: none; } /* Кнопки "Платёжный календарь" (десктоп и мобайл) — скрыты по умолчанию; показывает их JS (loadPaymentCalendarBadge) после проверки роли (admin/accountant/logist — Надежда). Не завязано на body.admin-mode, чтобы не открывать логисту заодно все остальные админские элементы. */ .payment-calendar-desktop-btn, .payment-calendar-mobile-btn { display: none; } .payment-calendar-desktop-btn.pc-visible { display: inline-block !important; } .payment-calendar-mobile-btn.pc-visible { display: flex !important; } /* SVG-иконка рубля никогда не растягивается, в любом контексте */ .kr-tile-ic svg { width: 21px; height: 21px; max-width: 21px; max-height: 21px; } @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 { display: none !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 { display: none !important; } .hero-row > div:first-child p { display: none !important; } .hero .badge #currentDate, .hero .badge .header-user-name { 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; margin-top: 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 { display: none !important; } /* Все пункты гамбургера теперь вынесены в закреплённую панель ниже — сам гамбургер на мобиле больше не нужен. */ .kr-burger { display: none !important; } .kr-icon-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; position: sticky !important; top: 0 !important; z-index: 30 !important; background: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; padding: 8px 10px !important; margin: 0 -12px 10px !important; box-shadow: 0 2px 6px rgba(0,0,0,.04) !important; } .kr-icon-toolbar button { background: none !important; border: none !important; color: #4b5563 !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; cursor: pointer !important; } .kr-icon-toolbar button:active { background: #f3f4f6 !important; } .kr-icon-toolbar i { font-size: 24px !important; } .kr-icon-toolbar img { height: 24px !important; width: auto !important; display: block !important; } .kr-icon-toolbar .kr-icon-calc { color: #854F0B !important; } /* "Эффективность менеджеров" — только для администратора */ .kr-icon-admin-only { display: none !important; } body.admin-mode .kr-icon-admin-only { display: flex !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; } /* ============================================= СЕТКА ПЛИТОК-НАВИГАЦИИ (главный экран) ============================================= */ .kr-tiles { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin-bottom: 10px !important; order: -5 !important; } body.admin-mode .admin-mobile-dashboard-stack > .kr-tiles { order: -5 !important; } .kr-twonum { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; } .kr-num { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 12px 14px !important; cursor: pointer !important; text-align: left !important; -webkit-tap-highlight-color: transparent !important; transition: transform 0.1s !important; } .kr-num:active { transform: scale(0.97) !important; } .kr-num-lbl { font-size: 10px !important; font-weight: 600 !important; color: #9ca3af !important; } .kr-num-val { font-size: 17px !important; font-weight: 700 !important; color: #15803d !important; } .kr-tile { display: flex !important; flex-direction: column !important; gap: 9px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 13px !important; cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 1 !important; text-align: left !important; -webkit-tap-highlight-color: transparent !important; transition: transform 0.1s !important; } .kr-tile:active { transform: scale(0.97) !important; } .kr-tile-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 4px !important; } .kr-tile-ic { width: 38px !important; height: 38px !important; border-radius: 11px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 2px solid currentColor !important; flex-shrink: 0 !important; } .kr-tile-ic i { font-size: 20px !important; } .kr-tile-ic svg { width: 21px !important; height: 21px !important; } .kr-tile-amt { text-align: right !important; line-height: 1.15 !important; min-width: 0 !important; } .kr-tile-amt b { font-size: 14px !important; font-weight: 700 !important; display: block !important; color: #111111 !important; } .kr-tile-amt small { font-size: 9px !important; font-weight: 400 !important; color: #9ca3af !important; display: block !important; margin-top: 1px !important; } .kr-tile-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; } .kr-tile-nm { font-size: 12px !important; font-weight: 600 !important; color: #111111 !important; } .kr-tile-green { color: #16a34a !important; } .kr-tile-blue { color: #2563eb !important; } .kr-tile-orange { color: #ea580c !important; } .kr-tile-purple { color: #7c3aed !important; } .kr-tile-red { color: #d71920 !important; } .kr-tile-cyan { color: #0891b2 !important; } .kr-tile-green .kr-tile-amt b { color: #15803d !important; } .kr-tile-red .kr-tile-amt b { color: #b91c1c !important; } } /* Плитки, таббар и гамбургер только на мобиле */ @media (min-width: 951px) { .kr-tiles { display: none !important; } .kr-tabbar { display: none !important; } .kr-burger { display: none !important; } }