/* * mobile_finance_grid_v2.css * Блок "Финансы" на мобиле — единая карточка с сеткой 2x2. * Не трогает HTML и JS, не трогает ID элементов (todayPlan, closedTodayTotal, * monthClosedTotal, calcTotal) которые портал обновляет через JS. * Подключается ПОСЛЕДНИМ в , поэтому побеждает все предыдущие правила. */ @media (max-width: 950px) { .kr-row-flex { display: flex !important; align-items: center !important; gap: 9px !important; width: 100% !important; text-align: left !important; } .kr-av { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; font-weight: 700 !important; flex-shrink: 0 !important; } .kr-av.r { background: #fee2e2 !important; color: #b91c1c !important; } .kr-av.o { background: #ffedd5 !important; color: #9a3412 !important; } .kr-av.b { background: #dbeafe !important; color: #1d4ed8 !important; } .kr-av.g { background: #dcfce7 !important; color: #166534 !important; } .kr-row-main { flex: 1 !important; min-width: 0 !important; text-align: left !important; } .kr-row-name-line { display: flex !important; align-items: center !important; gap: 6px !important; } .kr-row-name { font-size: 13px !important; font-weight: 700 !important; color: #111111 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 140px !important; } .kr-badge { font-size: 9px !important; font-weight: 700 !important; padding: 1px 7px !important; border-radius: 8px !important; flex-shrink: 0 !important; } .kr-badge.hot { background: #fee2e2 !important; color: #b91c1c !important; } .kr-badge.warm { background: #ffedd5 !important; color: #9a3412 !important; } .kr-badge.cold { background: #f1f5f9 !important; color: #475569 !important; } .kr-row-meta { font-size: 10px !important; color: #9ca3af !important; margin-top: 2px !important; } } @media (max-width: 950px) { .stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; background: var(--color-border-tertiary, #e5e7eb) !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; overflow: hidden !important; margin: 0 0 10px !important; padding: 0 !important; } .stats .stat { background: #ffffff !important; border: none !important; border-radius: 0 !important; border-top: none !important; box-shadow: none !important; padding: 12px 14px !important; margin: 0 !important; } .stats .stat .label { font-size: 10px !important; color: #9ca3af !important; font-weight: 600 !important; margin-bottom: 4px !important; } .stats .stat .value { font-size: 18px !important; font-weight: 700 !important; color: #111111 !important; margin-bottom: 2px !important; } .stats .stat.green .value, .stats .stat.closed-today-stat .value, .stats .stat.month-closed-stat .value { color: #15803d !important; } .stats .stat.orange .value { color: #ea580c !important; } .stats .stat.blue .value { color: #111111 !important; } .stats .stat .sub { display: none !important; } /* Модалка детализации (открывается по тапу на карточку) — сохранена из прежней версии */ .mobile-finance-detail-overlay { align-items: flex-start !important; padding: 18px 10px !important; overflow-y: auto !important; z-index: 2147483550 !important; } .mobile-finance-detail-modal { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 36px) !important; overflow-y: auto !important; border-radius: 16px !important; padding: 14px !important; background: #ffffff !important; } .mobile-finance-detail-modal .modal-title h2 { color: #111111 !important; font-size: 20px !important; line-height: 1.15 !important; } .mobile-finance-detail-summary { margin: 8px 0 12px !important; padding: 14px !important; border-radius: 12px !important; background: #f9fafb !important; } .mobile-finance-detail-summary span { display: block !important; color: #9ca3af !important; font-size: 11px !important; font-weight: 600 !important; margin-bottom: 4px !important; } .mobile-finance-detail-summary strong { display: block !important; color: #111111 !important; font-size: 22px !important; line-height: 1.1 !important; font-weight: 700 !important; } .mobile-finance-detail-rows { display: grid !important; gap: 8px !important; } .mobile-finance-detail-item { padding: 12px !important; border-radius: 12px !important; border: 1px solid #f0f0f0 !important; background: #ffffff !important; } .mobile-finance-detail-line { display: grid !important; grid-template-columns: 1fr auto !important; gap: 10px !important; align-items: start !important; margin-bottom: 8px !important; } .mobile-finance-detail-line strong { color: #111111 !important; font-size: 14px !important; line-height: 1.2 !important; overflow-wrap: anywhere !important; } .mobile-finance-detail-line span { color: #15803d !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap !important; } .mobile-finance-detail-two { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .mobile-finance-detail-two div { min-width: 0 !important; padding: 7px 8px !important; border-radius: 8px !important; background: #f9fafb !important; } .mobile-finance-detail-two b { display: block !important; color: #9ca3af !important; font-size: 9px !important; line-height: 1.1 !important; font-weight: 600 !important; margin-bottom: 2px !important; } .mobile-finance-detail-two span { display: block !important; color: #111111 !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 600 !important; overflow-wrap: anywhere !important; } .mobile-finance-detail-wide { grid-column: 1 / -1 !important; } .mobile-finance-more-btn { width: 100% !important; min-height: 38px !important; margin-top: 8px !important; border-radius: 8px !important; border: 1px solid #dbeafe !important; background: #eff6ff !important; color: #1d4ed8 !important; font-size: 12px !important; font-weight: 600 !important; } .mobile-finance-empty { padding: 16px !important; border-radius: 10px !important; background: #f9fafb !important; color: #9ca3af !important; font-weight: 500 !important; text-align: center !important; } }